https://www.ijvcanada.org/wp-content/uploads/civicrm/ext/org.ijvcanada.custom/js/join-1.js?r=k4Lj9en_CA

1// Donate Pafge | ID of 1
2
3(function($, ts) {
4$(document).ready(function() {
5/**Three Panel Click Through */
6
7const introText = document.querySelector('#intro_text');
8const submitForm = document.querySelector('#_qf_Main_upload-bottom');
9console.log(introText);
10const informed = document.querySelector('.custom_post_profile-group .crm-profile > div:first-of-type');
11
12// console.log(informed)
13
14/* Staging
15const renewMembershipCheckBox = document.getElementById('editrow-custom_170');
16const payByCheque = document.querySelector('#CIVICRM_QFID_3_payment_processor_id');
17*/
18const renewMembershipCheckBox = document.getElementById('editrow-custom_174');
19
20
21
22const payByCheque = document.querySelector('#CIVICRM_QFID_3_payment_processor_id');
23if (payByCheque) {
24  document.querySelector('#CIVICRM_QFID_3_payment_processor_id + label').innerText = ts("e-Transfer / Cheque");
25}
26
27const payByCredit = document.querySelector('#CIVICRM_QFID_1_payment_processor_id');
28const recaptcha = document.querySelector('.recaptcha-section');
29let billingCheckbox = document.getElementById('billingcheckbox');
30if (billingCheckbox) {
31  billingCheckbox.value = 1;
32}
33
34
35
36
37$(renewMembershipCheckBox).appendTo(introText);
38
39// Panel 1
40const amountSection = document.querySelector('#priceset-div');
41const recurSection = document.querySelector('.is_recur-section');
42$(recurSection).appendTo(amountSection);
43const isrecurring = recurSection.querySelector('#is_recur');
44
45let newAmountSection =  document.querySelector('#priceset-div');
46
47// Panel 2
48const profileSection = document.querySelector('.custom_pre_profile-group');
49const profileSectionLastItem = profileSection.querySelector('fieldset > div:last-of-type ');
50const emailSection = document.querySelector('.email-5-section');
51$(emailSection).prependTo(profileSection);
52$(document.querySelector('.honor_block-group')).insertBefore(document.querySelector('.custom_pre_profile-group fieldset'));
53$(informed).insertAfter(profileSectionLastItem);
54let newProfileSection = document.querySelector('.custom_pre_profile-group');
55const membership = document.querySelector('.custom_post_profile-group');
56$(membership).hide();
57
58// Panel 3
59const paymentSection = document.querySelector('#billing-payment-block');
60const paymentOptions = document.querySelector('.crm-public-form-item.crm-group.payment_options-group');
61const paymentMethods = document.querySelector('#editrow-custom_82');
62const lastTab = `<div class="form-tab-section"></div>`;
63
64$(lastTab).insertAfter(newProfileSection);
65
66let sections =[newAmountSection, newProfileSection];
67
68sections.forEach((section, index) => {
69    $(section).addClass('form-tab-section');
70});
71
72// Create Tabs
73let tabSection =
74`<div class="form-tabs" >
75    <div class="tab-bar active" ></div>
76    <div class="tab-bar" ></div>
77    <div class="tab-bar" ></div>
78</div>`;
79
80let tabLabel = `
81<div class="tab-label">
82<div class="tab-number"><span>1</span></div>
83<div class="tab-text">` + ts('Amount') + `</div>
84</div>
85`;
86
87let tabDetails = [
88    {
89        tabNumber: 1,
90        tabText: ts('Amount')
91    },
92    {
93        tabNumber: 2,
94        tabText: ts('Details')
95    },
96    {
97        tabNumber: 3,
98        tabText: ts('Payment')
99    },
100]
101
102
103
104$(tabSection).insertAfter(introText);
105$(tabLabel).insertAfter('.form-tabs');
106
107let newSections = document.querySelectorAll('.form-tab-section');
108let newTabs =  document.querySelectorAll('.tab-bar');
109$(paymentOptions).prependTo(newSections[2]);
110$(paymentSection).appendTo(newSections[2]);
111$(paymentMethods).appendTo(newSections[2]);
112
113$(newSections[0]).addClass('show');
114$(paymentMethods).hide();
115
116let currentIndex = 0;
117let nextIndex;
118
119const prevTabDiv = `<a href="javascript:;" id="prevTab" class="page-btn">` + ts('Go Back') + `</a>`;
120const nextTabDiv = `<a href="javascript:;" id="nextTab" class="page-btn">

120` + ts('Continue') + `</a>`;
121
122let btnDiv = `<div class="tab-btns btn-section" ></div>`;
123$(btnDiv).insertAfter(newSections[2]);
124let btnSection = document.querySelector('.tab-btns');
125$(prevTabDiv).appendTo(btnSection);
126$(nextTabDiv).appendTo(btnSection);
127let prevBtn = document.querySelector('#prevTab');
128let nextBtn = document.querySelector('#nextTab');
129
130
131
132$(prevBtn).hide();
133$(recaptcha).insertBefore(btnSection);
134$(recaptcha).hide();
135
136nextBtn.addEventListener('click', e => {
137    e.preventDefault();
138    nextPrev(+1) ;
139});
140
141prevBtn.addEventListener('click', e => {
142    e.preventDefault();
143    nextPrev(-1) ;
144});
145
146// When recurring contribution is checked
147if ($(isrecurring).is(":checked")) {
148  $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id')).addClass('hide-element');
149  $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id + label')).addClass('hide-element');
150  $(payByCredit).trigger('click');
151} else {
152  $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id')).removeClass('hide-element');
153  $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id + label')).removeClass('hide-element');
154}
155
156$(isrecurring).on('change', function() {
157  if ($(isrecurring).is(":checked")) {
158    $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id')).addClass('hide-element');
159    $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id + label')).addClass('hide-element');
160    $(payByCredit).trigger('click');
161  } else {
162    $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id')).removeClass('hide-element');
163    $(document.querySelector('#CIVICRM_QFID_3_payment_processor_id + label')).removeClass('hide-element');
164  }
165});
166
167
168function nextPrev(n) {
169    nextIndex = currentIndex + (n);
170    $(newSections[nextIndex]).addClass('show');
171    $(newSections[nextIndex]).siblings('.form-tab-section').removeClass('show');
172    $(newTabs[nextIndex]).addClass('active');
173    if (nextIndex < currentIndex) {
174      $(newTabs[currentIndex]).removeClass('active');
175    }
176    currentIndex = nextIndex;
177
178
179    if(currentIndex == 0 ) {
180        $(prevBtn).hide();
181    } else {
182        $(prevBtn).show();
183    }
184
185    if(currentIndex >= newSections.length - 1) {
186        $(nextBtn).text(ts('Submit'));
187        $(recaptcha).show();
188    } else {
189        $(nextBtn).text(ts('Continue'));
190        $(recaptcha).hide();
191    }
192
193    if(nextIndex >=  newSections.length )  {
194       var oneTimeGift = document.getElementById('one-time-gift');
195       if (oneTimeGift && oneTimeGift.classList.contains('selected')) {
196           // Uncheck is_recur radio/checkbox
197           var isRecurEl = document.getElementById('is_recur');
198           if (isRecurEl) {
199               isRecurEl.checked = false;
200           }
201           // Also handle if is_recur is a radio button group
202           $('input[name="is_recur"]').each(function() {
203               if ($(this).val() == '1') {
204                   $(this).prop('checked', false);
205               } else {
206                   $(this).prop('checked', true);
207               }
208           });
209       }
210       $(submitForm).trigger('click');
211    }
212
213    $('.tab-number span').text(tabDetails[currentIndex].tabNumber)
214    $('.tab-text').text(tabDetails[currentIndex].tabText)
215
216}
217
218   var totalFee = 0;
219    $("#priceset [price]").each(function () {
220        totalFee = totalFee + $(this).data('line_raw_total');
221      if (totalFee == 0 || isNaN(totalFee)) {
222         $('#nextTab').hide();
223      }
224      else if (totalFee > 0) {
225         $('#nextTab').show();
226      }
227  })
228
229/** When Cheque is Selected */
230$(payByCheque).on('change', function() {
231    if(billingCheckbox) {
232        billingCheckbox.value = 1;
233    } else {
234        const setBillingCheckbox = setInterval(() => {
235            billingCheckbox = document.getElementById('billingcheckbox');
236            // console.log(billingCheckbox);
237
238            if(billingCheckbox) {
239                billingCheckbox.value = 1;
240                clearInterval(setBillingCheckbox);
241            }
242
243        }, 1000);
244    }
245
246    if($(this).prop('checked')) {
247        $(paymentMethods).show();
248    } else {
249        $(paymentMethods).hide();
250    }
251});
252$(payByCredit).on('change', function() {
253    if($(this).prop('checked')) {
254        $(paymentMethods).hide();
255    }
256});
257
258
259
260
261});
262}(jQuery, CRM.ts('org.ijvcanada.custom')));