https://www.rfp360.ai/wp-content/plugins/rfp360-pricing-plans/assets/js/frontend.js?ver=2.0.0

1/* RFP360 Pricing Plans v2 — group (Supplier/Buyer) switcher + monthly/yearly toggle */
2(function () {
3    'use strict';
4
5    /* ---------------- Billing cycle ---------------- */
6    function setCycle(wrapper, cycle) {
7        wrapper.setAttribute('data-cycle', cycle);
8
9        wrapper.querySelectorAll('.rpp-toggle-btn').forEach(function (btn) {
10            var active = btn.getAttribute('data-cycle') === cycle;
11            btn.classList.toggle('is-active', active);
12            btn.setAttribute('aria-selected', active ? 'true' : 'false');
13        });
14
15        wrapper.querySelectorAll('.rpp-price').forEach(function (el) {
16            var val = el.getAttribute('data-' + cycle);
17            if (val !== null) el.textContent = val;
18        });
19
20        wrapper.querySelectorAll('.rpp-billed').forEach(function (el) {
21            var val = el.getAttribute('data-' + cycle);
22            el.textContent = val || '';
23        });
24    }
25
26    /* ---------------- Group (Supplier / Buyer) ---------------- */
27    function moveSlider(toggle) {
28        var slider = toggle.querySelector('.rpp-group-toggle-slider');
29        var active = toggle.querySelector('.rpp-group-toggle-btn.is-active');
30        if (!slider || !active) return;
31        slider.style.width = active.offsetWidth + 'px';
32        slider.style.transform = 'translateX(' + active.offsetLeft + 'px)';
33    }
34
35    function setGroup(wrapper, group, animate) {
36        if (wrapper.getAttribute('data-group') === group) return;
37        wrapper.setAttribute('data-group', group);
38
39        var toggle = wrapper.querySelector('.rpp-group-toggle');
40        if (toggle) {
41            toggle.querySelectorAll('.rpp-group-toggle-btn').forEach(function (btn) {
42                var active = btn.getAttribute('data-group') === group;
43                btn.classList.toggle('is-active', active);
44                btn.setAttribute('aria-selected', active ? 'true' : 'false');
45            });
46            moveSlider(toggle);
47        }
48
49        wrapper.querySelectorAll('.rpp-panel').forEach(function (panel) {
50            var active = panel.getAttribute('data-group') === group;
51            if (active) {
52                panel.hidden = false;
53                panel.classList.add('is-active');
54                if (animate) {
55                    panel.classList.remove('rpp-panel-enter');
56                    void panel.offsetWidth; /* reflow to restart animation */
57                    panel.classList.add('rpp-panel-enter');
58                }
59            } else {
60                panel.hidden = true;
61                panel.classList.remove('is-active', 'rpp-panel-enter');
62            }
63        });
64    }
65
66    /* Deep-link: ?plans=buyer / ?plans=supplier or #buyer-plans / #supplier-plans */
67    function groupFromUrl() {
68        try {
69            var params = new URLSearchParams(window.location.search);
70            var q = (params.get('plans') || '').toLowerCase();
71            if (q === 'buyer' || q === 'supplier') return q;
72        } catch (e) { /* older browsers */ }
73
74        var hash = (window.location.hash || '').toLowerCase();
75        if (hash.indexOf('buyer') !== -1) return 'buyer';
76        if (hash.indexOf('supplier') !== -1) return 'supplier';
77        return null;
78    }
79
80    function init() {
81        document.querySelectorAll('.rpp-wrapper').forEach(function (wrapper) {
82
83            /* Billing cycle buttons */
84            wrapper.querySelectorAll('.rpp-toggle-btn').forEach(function (btn) {
85                btn.addEventListener('click', function () {
86                    setCycle(wrapper, btn.getAttribute('data-cycle'));
87                });
88            });
89
90            /* Group switcher */
91            var toggle = wrapper.querySelector('.rpp-group-toggle');
92            if (toggle) {
93                toggle.querySelectorAll('.rpp-group-toggle-btn').forEach(function (btn) {
94                    btn.addEventListener('click', function () {
95                        setGroup(wrapper, btn.getAttribute('data-group'), true);
96                    });
97
98                    /* Left/Right arrow keys between tabs */
99                    btn.addEventListener('keydown', function (e) {
100                        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
101                        var btns = Array.prototype.slice.call(toggle.querySelectorAll('.rpp-group-toggle-btn'));
102                        var idx  = btns.indexOf(btn);
103                        var next = e.key === 'ArrowRight' ? idx + 1 : idx - 1;
104                        if (btns[next]) {
105                            btns[next].focus();
106                            btns[next].click();
107                        }
108                    });
109                });
110
111                /* Deep-link override of default tab */
112                var urlGroup = groupFromUrl();
113                if (urlGroup && toggle.querySelector('.rpp-group-toggle-btn[data-group="' + urlGroup + '"]')) {
114                    setGroup(wrapper, urlGroup, false);
115                }
116
117                /* Position the sliding indicator once layout is ready */
118                moveSlider(toggle);
119                window.addEventListener('resize', function () { moveSlider(toggle); });
120                if (document.fonts && document.fonts.ready) {
121                    document.fonts.ready.then(function () { moveSlider(toggle); });
122                }
123                window.addEventListener('load', function () { moveSlider(toggle); });
124            }
125        });
126
127        /* React to hash changes (e.g. nav menu links on the same page) */
128        window.addEventListener('hashchange', function () {
129            var g = groupFromUrl();
130            if (!g) return;
131            document.querySelectorAll('.rpp-wrapper').forEach(function (wrapper) {
132                if (wrapper.querySelector('.rpp-group-toggle-btn[data-group="' + g + '"]')) {
133                    setGroup(wrapper, g, true);
134                }
135            });
136        });
137    }
138
139    if (document.readyState === 'loading') {
140        document.addEventListener('DOMContentLoaded', init);
141    } else {
142        init();
143    }
144})();