Final polish

This commit is contained in:
Daniel Dudzic 2024-06-07 22:07:21 +02:00
parent 457ac5a5cd
commit 7537967266
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
4 changed files with 36 additions and 21 deletions

View file

@ -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-billing-email {
&-field-wrapper {
flex-direction: column;
}
.ppcp-axo-customer-details #billing_email_field .woocommerce-input-wrapper {
display: block;
input {
margin-right: 0;
&-submit-button {
align-self: auto;
}
}
}

View file

@ -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', `
<div id="${befw.id}"></div>
`);
}
// Watermark container
const wc = this.el.watermarkContainer;
if (!document.querySelector(wc.selector)) {
this.emailInput.insertAdjacentHTML('afterend', `
document.querySelector(befw.selector).insertAdjacentHTML('beforeend', `
<div class="${wc.className}" id="${wc.id}"></div>
`);
}
@ -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', `
<button type="button" id="${billingEmailSubmitButton.id}" class="${billingEmailSubmitButton.className}">
${this.axoConfig.billing_email_button_text}
<span id="${billingEmailSubmitButtonSpinner.id}"></span>

View file

@ -60,6 +60,11 @@ class DomElementCollection {
selector: '#billing_email_field'
});
this.billingEmailFieldWrapper = new DomElement({
id: 'ppcp-axo-billing-email-field-wrapper',
selector: '#ppcp-axo-billing-email-field-wrapper',
});
this.billingEmailSubmitButton = new DomElement({
id: 'ppcp-axo-billing-email-submit-button',
selector: '#ppcp-axo-billing-email-submit-button',

View file

@ -168,7 +168,7 @@ class AxoGateway extends WC_Payment_Gateway {
? $this->ppcp_settings->get( 'axo_gateway_title' )
: $this->get_option( 'title', $this->method_title );
$this->description = __( 'Enter your email address above to proceed.', 'woocommerce-paypal-payments' );
$this->description = __( 'Enter your email address to continue.', 'woocommerce-paypal-payments' );
$this->init_form_fields();
$this->init_settings();