jQuery(function($){ console.info(formipay_form); let formipay_form_id = $('[data-form-id]').attr('data-form-id'); let formipay = formipay_form.forms[formipay_form_id]; var select_fields = $('.formipay-input.formipay-select'); if(select_fields.length > 0){ $.each(select_fields, function(index, field){ new Choices('#'+$(field).attr('id')); }); } function validateForm(input_class) { var valid = true; input_class.each(function () { if ($(this).val() === '') { valid = false; return false; } }); return valid; } function price_format(nStr) { nStr = parseFloat(nStr).toFixed(formipay.decimal_digits) + ''; var x = nStr.split('.'); var x1 = x[0]; var x2 = x.length > 1 ? formipay.decimal_symbol + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + formipay.thousand_separator + '$2'); } return formipay.currency + ' ' + x1 + x2; } $('.product-price-row').find('td').html(price_format($('#product_price').val())); $('.formipay-payment-option-group:first-child').find('input').trigger('click'); // PAGE BREAK var page_break = $('.formipay-page-break'); if(page_break.length > 0){ $.each( $('.formipay-field-group:not(.formipay-page-break)'), function(){ var prev_page_break = $(this).prev('.formipay-page-break'); $(this).appendTo(prev_page_break); } ); var payment_page_break = $('.formipay-page-break.formipay-page-break-payment'); $('.result-wrapper').appendTo(payment_page_break); $.each( page_break, function(index, page){ if(index > 0){ $(page).hide(); } index = index + 1; $(page).addClass('formipay-page-'+index); }); $('.formipay-page-break-payment .formipay-submit-button').appendTo('.formipay-bottom-pagination').css({ 'margin-left': 'unset', 'margin-right': 'unset' }).hide(); } var page_break_progress = $('.formipay-progress'); if(page_break_progress.length > 0){ // $(page_break_progress[0]).addClass('active'); $.each(page_break_progress, function(index, page){ if(index == 0){ $(page).addClass('active'); } index = index + 1; $(page).attr('data-page-number', index); }); } $('.formipay-progress').on('click', function(){ var page_number = $(this).attr('data-page-number'); var inputs_in_page = $('.formipay-page-break:visible').find('.formipay-input'); var valid_to_continue = check_page_input_invalid(inputs_in_page); if(valid_to_continue === false){ return false; } if($('.formipay-page-'+page_number).hasClass('formipay-page-break-payment')){ $('.formipay-page-break-next-button').hide(); $('.formipay-page-break-next-button').siblings('.formipay-submit-button').show(); }else{ $('.formipay-page-break-next-button').show(); $('.formipay-page-break-next-button').siblings('.formipay-submit-button').hide(); } $('.formipay-progress').removeClass('active'); $(this).addClass('active'); $('.formipay-page-break').hide(); $('.formipay-page-'+page_number).show(); }); function check_page_input_invalid(inputs){ var invalid_input = 0; inputs.each(function(index, field) { var the_label = $(field).data('label'); // $(field).removeAttr('style'); $(field).removeClass('formipay-input-invalid') if (!$(field).is(':valid')) { // $(field).attr('style', 'border-color: #d93258!important;'); $(field).addClass('formipay-input-invalid'); $(field).siblings('.formipay-validate-field').remove(); if ($(field).attr('type') == 'select' || $(field).attr('type') == 'radio' || $(field).attr('type') == 'checkbox') { if ($(field).attr('type') == 'radio' || $(field).attr('type') == 'checkbox') { if ($('[name="' + $(field).attr('name') + '"]:checked').length == 0) { var notice_message = formipay.notice_empty_select_message; $(field).parent().append('

'+notice_message.replace('{{field}}', the_label)+'

'); invalid_input ++; } } else if ($(field).attr('name').search('agreement') != -1) { var notice_message = formipay.notice_empty_agreement_message; $(field).parent().append('

'+notice_message.replace('{{field}}', the_label)+'

'); invalid_input ++; } else { var notice_message = formipay.notice_empty_select_message; $(field).parent().append('

'+notice_message.replace('{{field}}', the_label)+'

'); invalid_input ++; } } else { var notice_message = formipay.notice_empty_text_message; $(field).parent().append('

'+notice_message.replace('{{field}}', the_label)+'

'); invalid_input ++; } } }); if(invalid_input > 0){ return false; } return true; } $('.formipay-page-break-next-button').on('click', function(e){ var next_page = $('.formipay-page-break:visible').next('.formipay-page-break'); var inputs_in_page = $('.formipay-page-break:visible').find('.formipay-input'); var valid_to_continue = check_page_input_invalid(inputs_in_page); if(valid_to_continue === false){ return false; } var active_progress = $('.formipay-progress.active'); if(next_page.length > 0){ active_progress.next('.formipay-progress').addClass('active'); active_progress.removeClass('active'); if(next_page.hasClass('formipay-page-break-payment')){ // $(this).prop('disabled', true); $(this).hide(); $(this).siblings('.formipay-submit-button').show(); } $('.formipay-page-break:visible').hide(); next_page.show(); e.target.blur() } $('.formipay-page-break-prev-button').prop('disabled', false); }); $('.formipay-page-break-prev-button').on('click', function(e){ var prev_page = $('.formipay-page-break:visible').prev('.formipay-page-break'); var active_progress = $('.formipay-progress.active'); if(prev_page.length > 0){ active_progress.prev('.formipay-progress').addClass('active'); active_progress.removeClass('active'); if(prev_page.is('.formipay-page-break:nth-child(2)')){ $(this).prop('disabled', true); } $('.formipay-page-break-next-button').show(); $('.formipay-page-break-next-button').siblings('.formipay-submit-button').hide(); $('.formipay-page-break:visible').hide(); prev_page.show(); e.target.blur() } $('.formipay-page-break-next-button').prop('disabled', false); }); $('.formipay-input-calculable, .formipay-qty-input').on('change', function(){ var form = $(this).parents('form'); set_qty_button(); do_calculate(form, 'calculate'); }); function set_qty_button() { var input = $('.formipay-qty-input'); var min_val = input.attr('min'); var max_val = input.attr('max'); $('button.qty-min, button.qty-plus').prop('disabled', false); if(input.val() == min_val){ $('button.qty-min').prop('disabled', true); } if(max_val && input.val() == max_val){ $('button.qty-plus').prop('disabled', true); } } set_qty_button(); $('button.qty-min').on('click', function(){ var value = parseInt($('.formipay-qty-input').val()); $('.formipay-qty-input').val(value-1).trigger('change'); }); $('button.qty-plus').on('click', function(){ var value = parseInt($('.formipay-qty-input').val()); $('.formipay-qty-input').val(value+1).trigger('change'); }); function do_calculate(form, action, condition = 'general'){ var form_id = form.data('form-id'); var inputs = form.find('.formipay-input'); var meta_inputs = form.find('.formipay-meta-input'); var form_inputs = new FormData(); form_inputs.append('action', 'formipay_submission'); form_inputs.append('nonce', formipay_form.nonce); form_inputs.append('data[qty]', $('.formipay-qty-input').val()); form_inputs.append('form_id', form_id); form_inputs.append('currency', 'IDR'); var $valid = true; // Initialize as true inputs.each(function(index, field) { var the_key = $(field).attr('name'); var the_label = $(field).data('label'); // $(field).removeAttr('style'); $(field).removeClass('formipay-input-invalid'); if (!$(field).is(':valid')) { // $(field).attr('style', 'border-color: #d93258!important;'); $(field).siblings('.formipay-validate-field').remove(); if ($(field).attr('type') == 'select' || $(field).attr('type') == 'radio' || $(field).attr('type') == 'checkbox') { var notice_message; if ($(field).attr('type') == 'radio' || $(field).attr('type') == 'checkbox') { if (!$('[name="' + $(field).attr('name') + '"]:checked').length) { var notice_message = formipay.notice_empty_select_message; $valid = false; // Set valid to false } } else if ($(field).attr('name').search('agreement') != -1) { var notice_message = formipay.notice_empty_agreement_message; $valid = false; // Set valid to false } else { var notice_message = formipay.notice_empty_select_message; $valid = false; // Set valid to false } } else { var notice_message = formipay.notice_empty_text_message; $valid = false; // Set valid to false } if($valid == false && action == 'checkout' && condition == 'general'){ $(field).addClass('formipay-input-invalid'); $(field).parent().append('

'+notice_message.replace('{{field}}', the_label)+'

'); } } else { var the_value; if ($(field).attr('type') == 'checkbox') { var val = []; form.find('[name="' + the_key + '"]:checked').each(function(i, check) { val[i] = $(check).val(); }); the_value = val; } else if ($(field).attr('type') == 'radio') { the_value = $('[name=' + the_key + ']:checked').val(); } else { the_value = $(field).val(); } if ($(field).attr('type') == 'hidden' || $(field).parent().is(':hidden')) { if ($(field).hasClass('formipay-select')) { form_inputs.append('data[' + the_key + '][value]', the_value); form_inputs.append('data[' + the_key + '][label]', $(field).find('option:selected').attr('data-label')); } else { form_inputs.append('data[' + the_key + ']', the_value); } } else { $(field).siblings('.formipay-validate-field').remove(); if ($(field).hasClass('formipay-select')) { form_inputs.append('data[' + the_key + '][value]', the_value); form_inputs.append('data[' + the_key + '][label]', $(field).find('option:selected').attr('data-label')); } else { form_inputs.append('data[' + the_key + ']', the_value); } } } }); if(meta_inputs.length > 0){ $.each(meta_inputs, function(key, field){ var the_key = $(field).attr('name'); var the_value = $(field).val(); form_inputs.append('meta_data[' + the_key + ']', the_value); }); } if($valid || action == 'calculate') { form_inputs.append('purpose', action); $.ajax({ url: formipay_form.ajax_url, data: form_inputs, processData: false, contentType: false, type: 'POST', enctype: 'multipart/form-data', beforeSend: function() { form.find('.formipay-submit-button').text(formipay.button_processing_text).prop('disabled', true); $(document).trigger('formipayCalculateAjaxBeforeSend', [form, action]); }, success: function(res) { console.log(res); form.find('.formipay-submit-button').text(formipay.button_text).prop('disabled', false); $(document).trigger('formipayCalculateAjaxSuccess', [res, form, action]); }, error: function(xhr, status, error) { Swal.fire({ title: 'Error!', html: xhr.responseText, icon: 'error', customClass: { confirmButton: 'formipay-button-error' }, allowOutsideClick: false, allowEscapeKey: false, showCloseButton: false, }).then((result) => { if (result.isConfirmed) { window.location.reload(); } }); } }); } } $(document).on('change', '.formipay-input-invalid', function(){ if($(this).is(':valid')){ $(this).removeClass('formipay-input-invalid'); $(this).siblings('.formipay-validate-field').remove(); } }); var forms = $('.formipay-form'); if(forms.length > 0){ $.each(forms, function(index, form){ do_calculate($(form), 'calculate', 'first-load'); }); } $(document).on('formipayCalculateAjaxBeforeSend', function(event, form, action) { if( action === 'checkout' ){ form.find('.formipay-validate-field').remove(); var form_id = form.data('form-id'); $('.formipay-input').removeAttr('style'); $('[data-form-id=' + form_id + ']').siblings('.submit-response').html(''); $('[data-form-id=' + form_id + ']').siblings('.submit-response').hide(); $('[data-form-id=' + form_id + ']').siblings('.submit-response').removeClass('formipay-message-success formipay-message-failed'); } }); $(document).on('formipayCalculateAjaxSuccess', function(event, res, form, action) { if(action == 'calculate') { form.find('.formipay-item-row:not(.formipay-product-row):not(.formipay-total-row):not(.formipay-grand-total-row)').remove(); var product_price = res.items[0].subtotal; var grand_total = res.total; form.find('td.product_price').html(price_format(product_price)); form.find('td.grand_total').html(price_format(grand_total)); var button_text = form.find('.formipay-submit-button').data('button-text'); form.find('.formipay-submit-button').html(button_text + ' - ' + price_format(grand_total)); $.each(res.items, function(index, item){ if(index > 0){ var qty = ''; if('qty' in item && item.qty > 1){ qty = ' x '+item.qty; } $('table#formipay-review-order').find('.formipay-total-row').before(` `+item.item+qty+` `+price_format(item.subtotal)+` `); } }); }else if(action == 'checkout'){ var form_id = form.data('form-id'); if(res.success) { if(res.data.response_type == 'notice') { $('[data-form-id=' + form_id + ']').find('.submit-response').html('Success! ' + res.data.message); $('[data-form-id=' + form_id + ']').find('.submit-response').addClass('formipay-message-success'); $('[data-form-id=' + form_id + ']').find('.submit-response').show(); setTimeout(() => { window.location.href = res.data.url; }, 2500); } else if(res.data.response_type == 'popup') { let timerInterval; Swal.fire({ title: 'Success!', html: res.data.message, icon: 'success', timer: 2500, timerProgressBar: true, showConfirmButton: false, willClose: () => { clearInterval(timerInterval); }, allowOutsideClick: false, allowEscapeKey: false, showCloseButton: false, }).then((result) => { if (result.dismiss === Swal.DismissReason.timer) { window.location.href = res.data.url; } }); } } else { if(res.data.response_type == 'notice') { $('[data-form-id=' + form_id + ']').find('.submit-response').html('Failed! ' + res.data.message); $('[data-form-id=' + form_id + ']').find('.submit-response').addClass('formipay-message-failed'); $('[data-form-id=' + form_id + ']').find('.submit-response').show(); } else if(res.data.response_type == 'popup') { Swal.fire({ title: 'Failed!', html: res.data.message, icon: 'error', customClass: { confirmButton: 'formipay-button-error' }, allowOutsideClick: false, allowEscapeKey: false, showCloseButton: false, }).then((result) => { if (result.isConfirmed) { window.location.reload(); } }); } } } }); $('.formipay-form .formipay-submit-button').on('submit click', function(e) { e.preventDefault(); var form = $(this).parents('form'); do_calculate(form, 'checkout'); }); $('#apply_coupon_code').on('click', function(e){ e.preventDefault(); var $thisbutton = $(this); var form = $thisbutton.closest('form'); if($('.formipay-code-input').val() !== ''){ $.ajax({ type: 'post', url: formipay_form.ajax_url, data: { action: 'check_coupon_code', code: $('.formipay-code-input').val(), form: form.data('form-id'), security: formipay_form.frontend_nonce }, beforeSend: function() { $thisbutton.addClass('loading').prop('disabled', true); }, success: function (res) { if(res.success){ $thisbutton .html('') .removeClass('loading') .css('background-color', '#008000'); }else{ $thisbutton .html('') .removeClass('loading') .css('background-color', '#FF0000'); $('.formipay-code-input').val(''); } do_calculate(form, 'calculate'); setTimeout(() => { $thisbutton .removeAttr('style') .html($thisbutton.data('text')) .prop('disabled', false); }, 3000); } }); } }); const $phoneInput = $(`[name=${formipay.buyer_phone_field}]`); const $countrySelect = formipay.buyer_country_field !== "" ? $(`[name=${formipay.buyer_country_field}]`) : ''; let countryCode = formipay.buyer_phone_country_code || ''; // Function: Get all available phone codes from select options function getAllCountryCodes() { const codes = []; $countrySelect.find('option').each(function () { const code = $(this).data('phone-code'); if (code) codes.push(code.toString()); }); return codes; } // Function: Convert number to WhatsApp-compatible format function toWhatsAppNumber(phoneNumber, newCountryCode = '62') { if (!phoneNumber) return ''; let cleaned = phoneNumber.replace(/\D/g, ''); // Step 1: Remove any existing known country code const knownCountryCodes = getAllCountryCodes(); knownCountryCodes.forEach(code => { if (cleaned.startsWith(code)) { cleaned = cleaned.substring(code.length); } }); // Step 2: Remove leading zero after removing old country code if (cleaned.startsWith('0')) { cleaned = cleaned.substring(1); } // Step 3: Add new country code return newCountryCode + cleaned; } // Get current country code dynamically function getCurrentCountryCode() { return $countrySelect.length > 0 ? ($countrySelect.find(':selected').data('phone-code') || '') : (formipay.buyer_phone_country_code || ''); } // On country change: Update country code and re-format phone number if ($countrySelect.length > 0) { $countrySelect.on('change', function () { const oldCountryCode = countryCode; countryCode = $countrySelect.find(':selected').data('phone-code') || ''; if (!countryCode) return; const currentValue = $phoneInput.val().trim(); // If there's a current phone number and country changed if (currentValue && currentValue !== oldCountryCode) { const converted = toWhatsAppNumber(currentValue, countryCode); $phoneInput.val(converted); } else { // Set placeholder if empty $phoneInput.val(countryCode); } }); } // On focus: insert country code as placeholder $phoneInput.on('focus', function () { const $this = $(this); const currentValue = $this.val().trim(); const currentCode = getCurrentCountryCode(); if (!currentCode) return; // Save original value before modifying $this.data('original-value', currentValue); if (currentValue === '' || currentValue === currentCode) { $this.val(currentCode); } }); // On blur: clean up or convert to WhatsApp number $phoneInput.on('blur', function () { const $this = $(this); const originalValue = $this.data('original-value') || ''; const currentValue = $this.val().trim(); const currentCode = getCurrentCountryCode(); if (!currentCode) return; // Case: user left field empty or only had country code if (currentValue === '' || currentValue === currentCode || currentValue.length <= 4) { $this.val(''); // Clear it for placeholder behavior return; } // Skip conversion if already formatted const isAlreadyFormatted = getAllCountryCodes().some(code => currentValue.startsWith(code) ); if (!isAlreadyFormatted || originalValue !== currentValue) { const waNumber = toWhatsAppNumber(currentValue, currentCode); $this.val(waNumber); } }); });