oont-contents/plugins/astra-addon/addons/woocommerce/assets/js/unminified/two-step-modern-checkout.js
2025-02-08 15:10:23 +01:00

180 lines
7.5 KiB
JavaScript

function twoStepModernCheckout(e) {
e.preventDefault();
const stepButtons = document.querySelectorAll('.ast-embed-checkout-form-steps .steps');
const activeClass = 'ast-current';
const stepOneClass = 'step-one';
const stepTwoClass = 'step-two';
const twoStepWrap = document.querySelector( '.ast-two-step-wrap' );
const activeTab = document.querySelector( '.ast-embed-checkout-form-steps .steps.ast-current' );
const currentTab = e.currentTarget.querySelector( 'a' );
if( activeTab ) {
activeTab.classList.remove( activeClass );
}
if( currentTab && twoStepWrap ) {
const stepsWrapper = twoStepWrap.querySelector( '.woocommerce' );
const currentTabValue = currentTab.getAttribute( 'href' );
const stepTwoTrigger = document.querySelector( '.ast-embed-checkout-form-steps .step-two' );
stepButtons.forEach( single => {
single.classList.remove( activeClass );
});
if( '#customer_details' === currentTabValue && stepsWrapper ) {
stepsWrapper.classList.remove( stepTwoClass );
stepsWrapper.classList.add( stepOneClass );
e.currentTarget.classList.add( activeClass );
} else if( '#ast-order-wrap' === currentTabValue && stepsWrapper ) {
stepsWrapper.classList.remove( stepOneClass );
stepsWrapper.classList.add( stepTwoClass );
stepTwoTrigger.classList.add( activeClass );
}
}
}
function validateInputs( inputs ) {
let access = true;
let flag = false;
inputs.forEach( single => {
const type = single.getAttribute( 'type' );
const fieldRow = single.closest( '.form-row' );
if( fieldRow ) {
const isSelect2 = fieldRow.querySelector( '.select2' );
const fieldValue = fieldRow && isSelect2 ? fieldRow.querySelector( '.select2-selection__rendered' ).getAttribute( 'title' ) : single.value ? single.value.trim() : '';
let hasClass = fieldRow.classList.contains( 'validate-required' );
let fieldFocus = '';
if( hasClass ) {
//Check if checkbox is checked
if ( 'checkbox' === type && single.checked ) {
fieldValueCheckbox = true;
if ( false === fieldValueCheckbox ) {
if ( '' === fieldFocus ) {
fieldRow.classList.add( 'woocommerce-invalid' );
access = false;
fieldFocus = single;
}
}
} else {
fieldRow.classList.remove( 'woocommerce-invalid' );
}
//Check if value is a valid email or if value is empty
if ( ( 'email' === type && false === /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test( fieldValue ) ) || ( '' === fieldValue ) ) {
if ( '' === fieldFocus ) {
fieldRow.classList.add( 'woocommerce-invalid' );
access = false;
fieldFocus = single;
}
} else {
fieldRow.classList.remove( 'woocommerce-invalid' );
}
//Focus the errored field
if ( '' !== fieldFocus && false === flag ) {
flag = true;
fieldFocus.focus();
}
}
}
} );
return access;
}
function validateCheckoutInputs() {
const billingInputsParent = document.querySelector( '.ast-two-step-wrap form.woocommerce-checkout .woocommerce-billing-fields, .ast-two-step-wrap form.woocommerce-checkout .woocommerce-account-fields' );
const customerInformation = document.querySelector( '.woocommerce-billing-fields__customer-info-wrapper' );
const shippingInputParent = document.querySelector( '.ast-two-step-wrap form.woocommerce-checkout .woocommerce-shipping-fields' );
let access = false;
const selectedInputs = 'input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="checkbox"], .select2';
let validationInputs;
if( customerInformation ) {
let customerInfoFields;
const isLogin = document.querySelector( '#ast-customer-login-url' );
const isCreateAccount = document.querySelector( '.ast-create-account-section' );
const isCreateAccountOptional = customerInformation.querySelector( '#createaccount' );
if( isLogin && isLogin.classList.contains( 'active' ) ) {
customerInfoFields = customerInformation.querySelectorAll( '#billing_email, #billing_password' );
} else if( ( astraAddon.is_registration_required && isCreateAccount && "block" === isCreateAccount.style.display ) || ( isCreateAccountOptional && isCreateAccountOptional.checked ) ) {
customerInfoFields = customerInformation.querySelectorAll( '#billing_email, #account_username, #account_password' );
} else {
customerInfoFields = customerInformation.querySelectorAll( '#billing_email' );
}
if( customerInfoFields ) {
if( ! validationInputs ) {
validationInputs = customerInfoFields;
} else {
validationInputs = Array.prototype.slice.call(validationInputs).concat( Array.prototype.slice.call( customerInfoFields ) );
}
}
}
if( billingInputsParent ) {
if( ! validationInputs ) {
validationInputs = billingInputsParent.querySelectorAll( selectedInputs );
} else {
validationInputs = Array.prototype.slice.call(validationInputs).concat( Array.prototype.slice.call( billingInputsParent.querySelectorAll( selectedInputs ) ) );
}
}
if( shippingInputParent ) {
const isShippingToDifferenceChecked = shippingInputParent.querySelector( 'h3#ship-to-different-address input[type="checkbox"]' );
if( isShippingToDifferenceChecked && isShippingToDifferenceChecked.checked ) {
if( ! validationInputs ) {
validationInputs = shippingInputParent.querySelectorAll( selectedInputs );
} else {
validationInputs = Array.prototype.slice.call(validationInputs).concat( Array.prototype.slice.call( shippingInputParent.querySelectorAll( selectedInputs ) ) );
}
}
}
access = validateInputs( validationInputs );
return access;
}
document.addEventListener( "DOMContentLoaded" , function( event ) {
const body = document.querySelector( 'body' );
if( ! astraAddon.cartflows_version && body && body.classList.contains( 'woocommerce-checkout' ) && body.classList.contains( 'ast-woo-two-step-modern-checkout' ) ) {
const stepButtons = document.querySelectorAll('.ast-embed-checkout-form-steps .steps')
const nextButton = document.querySelector( '.ast-embed-checkout-form-nav-btns' );
if( nextButton ) {
nextButton.addEventListener( 'click' , function(e) {
if( validateCheckoutInputs() ) {
twoStepModernCheckout(e);
}
});
}
if( stepButtons ) {
stepButtons.forEach( single => {
single.addEventListener( 'click' , function(e) {
if( validateCheckoutInputs() ) {
twoStepModernCheckout(e);
}
});
});
}
}
});