diff --git a/modules/ppcp-axo/resources/css/styles.scss b/modules/ppcp-axo/resources/css/styles.scss index 64ebfcf30..3c879dcb6 100644 --- a/modules/ppcp-axo/resources/css/styles.scss +++ b/modules/ppcp-axo/resources/css/styles.scss @@ -12,10 +12,17 @@ } } +#ppcp-axo-billing-email-field-wrapper { + display: flex; + gap: 0.5rem; +} + #ppcp-axo-billing-email-submit-button { margin-top: 0; position: relative; transition: opacity 0.3s ease; + flex: 0 1 auto; + align-self: flex-start; .loader:before { display: inline; @@ -117,27 +124,20 @@ } .ppcp-axo-customer-details #billing_email_field .woocommerce-input-wrapper { - display: flex; - align-items: center; - - input { - flex: 1; - margin-right: 10px; - } + flex: 1 1 auto; } @media screen and (max-width: 719px) { - #ppcp-axo-billing-email-submit-button { - width: 100%; - margin-top: 0.5rem; - } - .ppcp-axo-customer-details #billing_email_field .woocommerce-input-wrapper { - display: block; + #ppcp-axo-billing-email { + &-field-wrapper { + flex-direction: column; + } - input { - margin-right: 0; + &-submit-button { + align-self: auto; } } } + diff --git a/modules/ppcp-axo/resources/js/AxoManager.js b/modules/ppcp-axo/resources/js/AxoManager.js index 74736e3e7..0267093a7 100644 --- a/modules/ppcp-axo/resources/js/AxoManager.js +++ b/modules/ppcp-axo/resources/js/AxoManager.js @@ -225,8 +225,10 @@ class AxoManager { if (scenario.defaultSubmitButton) { this.el.defaultSubmitButton.show(); + this.el.billingEmailSubmitButton.hide(); } else { this.el.defaultSubmitButton.hide(); + this.el.billingEmailSubmitButton.show(); } if (scenario.defaultEmailField) { @@ -252,8 +254,8 @@ class AxoManager { this.el.watermarkContainer.show(); // Move watermark to after email. - this.$(this.el.fieldBillingEmail.selector).append( - this.$(this.el.watermarkContainer.selector) + document.querySelector('#billing_email_field .woocommerce-input-wrapper').append( + document.querySelector(this.el.watermarkContainer.selector) ); } else { this.el.emailWidgetContainer.hide(); @@ -433,10 +435,18 @@ class AxoManager { `); } + // billingEmailFieldWrapper + const befw = this.el.billingEmailFieldWrapper; + if (!document.querySelector(befw.selector)) { + document.querySelector('#billing_email_field .woocommerce-input-wrapper').insertAdjacentHTML('afterend', ` +
+ `); + } + // Watermark container const wc = this.el.watermarkContainer; if (!document.querySelector(wc.selector)) { - this.emailInput.insertAdjacentHTML('afterend', ` + document.querySelector(befw.selector).insertAdjacentHTML('beforeend', `
`); } @@ -466,10 +476,10 @@ class AxoManager { } } else { - // Move email to the AXO container. let emailRow = document.querySelector(this.el.fieldBillingEmail.selector); wrapperElement.prepend(emailRow); + document.querySelector(this.el.billingEmailFieldWrapper.selector).prepend(document.querySelector('#billing_email_field .woocommerce-input-wrapper')) } } @@ -515,7 +525,7 @@ class AxoManager { const billingEmailSubmitButtonSpinner = this.el.billingEmailSubmitButtonSpinner; if (!document.querySelector(billingEmailSubmitButton.selector)) { - this.emailInput.insertAdjacentHTML('afterend', ` + document.querySelector(this.el.billingEmailFieldWrapper.selector).insertAdjacentHTML('beforeend', `