woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

Fix styles and behaviours on AXO module

Browse source
This commit is contained in:
Pedro Silva 2024-02-15 17:58:56 +00:00
parent ffb2de496d
commit 9fd69e7f55
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
8 changed files with 112 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

90
modules/ppcp-axo/resources/js/AxoManager.js
View file

@ -5,7 +5,10 @@ import {hide, show} from '../../../ppcp-button/resources/js/modules/Helper/Hidin
class AxoManager {
constructor(jQuery) {
constructor(axoConfig, ppcpConfig) {
this.axoConfig = axoConfig;
this.ppcpConfig = ppcpConfig;
this.initialized = false;
this.fastlane = new Fastlane();
this.$ = jQuery;
@ -18,21 +21,26 @@ class AxoManager {
selector: '#place_order',
},
paymentContainer: {
id: 'axo-payment-container',
selector: '#axo-payment-container',
className: 'axo-payment-container'
id: 'ppcp-axo-payment-container',
selector: '#ppcp-axo-payment-container',
className: 'ppcp-axo-payment-container'
},
watermarkContainer: {
id: 'axo-watermark-container',
selector: '#axo-watermark-container',
className: 'axo-watermark-container'
id: 'ppcp-axo-watermark-container',
selector: '#ppcp-axo-watermark-container',
className: 'ppcp-axo-watermark-container'
},
submitButtonContainer: {
selector: '#axo-submit-button-container'
emailWidgetContainer: {
id: 'ppcp-axo-email-widget',
selector: '#ppcp-axo-email-widget',
className: 'ppcp-axo-email-widget'
},
fieldBillingEmail: {
selector: '#billing_email_field'
},
submitButtonContainer: {
selector: '#ppcp-axo-submit-button-container'
},
}
this.styles = {
@ -64,27 +72,52 @@ class AxoManager {
}
showAxo() {
this.moveEmail();
this.initEmail();
this.init();
show(this.elements.emailWidgetContainer.selector);
show(this.elements.watermarkContainer.selector);
show(this.elements.paymentContainer.selector);
show(this.elements.submitButtonContainer.selector);
hide(this.elements.defaultSubmitButton.selector);
if (this.useEmailWidget()) {
hide(this.elements.fieldBillingEmail.selector);
}
}
hideAxo() {
hide(this.elements.emailWidgetContainer.selector);
hide(this.elements.watermarkContainer.selector);
hide(this.elements.paymentContainer.selector);
hide(this.elements.submitButtonContainer.selector);
show(this.elements.defaultSubmitButton.selector);
if (this.useEmailWidget()) {
show(this.elements.fieldBillingEmail.selector);
}
}
moveEmail() {
// Move email row to first place.
initEmail() {
let emailRow = document.querySelector(this.elements.fieldBillingEmail.selector);
emailRow.parentNode.prepend(emailRow);
emailRow.querySelector('input').focus();
if (this.useEmailWidget()) {
// Display email widget.
if (!document.querySelector(this.elements.emailWidgetContainer.selector)) {
emailRow.parentNode.insertAdjacentHTML('afterbegin', `
<div id="${this.elements.emailWidgetContainer.id}" class="${this.elements.emailWidgetContainer.className}">
--- EMAIL WIDGET PLACEHOLDER ---
</div>
`);
}
} else {
// Move email row to first place.
emailRow.parentNode.prepend(emailRow);
emailRow.querySelector('input').focus();
}
}
async init() {
@ -118,7 +151,7 @@ class AxoManager {
const gatewayPaymentContainer = document.querySelector('.payment_method_ppcp-axo-gateway');
gatewayPaymentContainer.insertAdjacentHTML('beforeend', `
<div class="${this.elements.paymentContainer.className}" id="${this.elements.paymentContainer.id}"></div>
<div id="${this.elements.paymentContainer.id}" class="${this.elements.paymentContainer.className} hidden"></div>
`);
}
@ -133,13 +166,22 @@ class AxoManager {
}
watchEmail() {
this.emailInput = document.querySelector(this.elements.fieldBillingEmail.selector + ' input');
this.emailInput.addEventListener('change', async ()=> {
this.onChangeEmail();
});
if (this.emailInput.value) {
this.onChangeEmail();
if (this.useEmailWidget()) {
// TODO
} else {
this.emailInput = document.querySelector(this.elements.fieldBillingEmail.selector + ' input');
this.emailInput.addEventListener('change', async ()=> {
this.onChangeEmail();
});
if (this.emailInput.value) {
this.onChangeEmail();
}
}
}
@ -162,6 +204,8 @@ class AxoManager {
// This is a guest customer.
log('No profile found with this email address.');
document.querySelector(this.elements.paymentContainer.selector)?.classList.remove('hidden');
this.connectCardComponent = await this.fastlane
.FastlaneCardComponent(MockData.cardComponent())
.render(this.elements.paymentContainer.selector);
@ -207,6 +251,10 @@ class AxoManager {
// });
}
useEmailWidget() {
return this.axoConfig?.widgets?.email === 'use_widget';
}
}
export default AxoManager;