From a9d2f97a80263008a1134990a5a650eb06669101 Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Tue, 12 Mar 2024 09:23:42 +0000 Subject: [PATCH] Refactoring axo element handling --- modules/ppcp-axo/resources/js/AxoManager.js | 89 ++++++++++--------- .../resources/js/Components/DomElement.js | 7 +- .../js/Components/DomElementCollection.js | 25 ++++++ .../{Helper => Components}/FormFieldGroup.js | 9 +- .../resources/js/Views/BillingView.js | 25 +++--- .../ppcp-axo/resources/js/Views/CardView.js | 11 +-- .../resources/js/Views/ShippingView.js | 20 ++--- 7 files changed, 109 insertions(+), 77 deletions(-) rename modules/ppcp-axo/resources/js/{Helper => Components}/FormFieldGroup.js (92%) diff --git a/modules/ppcp-axo/resources/js/AxoManager.js b/modules/ppcp-axo/resources/js/AxoManager.js index be6cb0971..e02846b67 100644 --- a/modules/ppcp-axo/resources/js/AxoManager.js +++ b/modules/ppcp-axo/resources/js/AxoManager.js @@ -17,6 +17,7 @@ class AxoManager { this.$ = jQuery; this.isConnectProfile = false; + this.isNewProfile = false; this.hideGatewaySelection = false; this.data = { @@ -37,9 +38,9 @@ class AxoManager { this.registerEventHandlers(); - this.shippingView = new ShippingView(this.el.shippingAddressContainer.selector); - this.billingView = new BillingView(this.el.billingAddressContainer.selector); - this.cardView = new CardView(this.el.paymentContainer.selector, this); + this.shippingView = new ShippingView(this.el.shippingAddressContainer.selector, this.el); + this.billingView = new BillingView(this.el.billingAddressContainer.selector, this.el); + this.cardView = new CardView(this.el.paymentContainer.selector, this.el, this); } registerEventHandlers() { @@ -58,14 +59,13 @@ class AxoManager { }); // On checkout form submitted. - this.$(document).on('click', this.el.submitButton.selector, () => { + this.el.submitButton.on('click', () => { this.onClickSubmitButton(); return false; - }); + }) // Click change shipping address link. - this.$(document).on('click', '*[data-ppcp-axo-change-shipping-address]', async () => { - + this.el.changeShippingAddressLink.on('click', async () => { if (this.isConnectProfile) { console.log('profile', this.fastlane.profile); @@ -79,35 +79,18 @@ class AxoManager { this.setShipping(selectedAddress); this.shippingView.activate(); } - } else { - let checkbox = document.querySelector('#ship-to-different-address-checkbox'); - if (checkbox && !checkbox.checked) { - jQuery(checkbox).trigger('click'); - } - this.shippingView.deactivate(); } - - }); - - this.$(document).on('click', '*[data-ppcp-axo-save-shipping-address]', async () => { - this.shippingView.activate(); }); // Click change billing address link. - this.$(document).on('click', '*[data-ppcp-axo-change-billing-address]', async () => { + this.el.changeBillingAddressLink.on('click', async () => { if (this.isConnectProfile) { - this.$('*[data-ppcp-axo-change-card]').trigger('click'); - } else { - this.billingView.deactivate(); + this.el.changeCardLink.trigger('click'); } }); - this.$(document).on('click', '*[data-ppcp-axo-save-billing-address]', async () => { - this.billingView.activate(); - }); - // Click change card link. - this.$(document).on('click', '*[data-ppcp-axo-change-card]', async () => { + this.el.changeCardLink.on('click', async () => { console.log('profile', this.fastlane.profile); const response = await this.fastlane.profile.showCardSelector(); @@ -123,7 +106,7 @@ class AxoManager { }); // Cancel "continuation" mode. - this.$(document).on('click', '*[data-ppcp-axo-show-gateway-selection]', async () => { + this.el.showGatewaySelectionLink.on('click', async () => { this.hideGatewaySelection = false; this.$('.wc_payment_methods label').show(); this.cardView.refresh(); @@ -135,21 +118,35 @@ class AxoManager { this.initPlacements(); this.initFastlane(); - this.shippingView.activate(); - this.billingView.activate(); + if (!this.isNewProfile && !this.isConnectProfile) { + this.el.allFields.hide(); + } + + if (this.useEmailWidget()) { + this.el.emailWidgetContainer.show(); + this.el.fieldBillingEmail.hide(); + } else { + this.el.emailWidgetContainer.hide(); + this.el.fieldBillingEmail.show(); + } + + if (this.isConnectProfile) { + this.shippingView.activate(); + this.billingView.activate(); + + this.el.emailWidgetContainer.hide(); + this.el.fieldBillingEmail.hide(); + } - this.el.emailWidgetContainer.show(); this.el.watermarkContainer.show(); this.el.paymentContainer.show(); this.el.submitButtonContainer.show(); this.el.defaultSubmitButton.hide(); - - if (this.useEmailWidget()) { - this.el.fieldBillingEmail.hide(); - } } hideAxo() { + this.el.allFields.show(); + this.shippingView.deactivate(); this.billingView.deactivate(); @@ -159,9 +156,8 @@ class AxoManager { this.el.submitButtonContainer.hide(); this.el.defaultSubmitButton.show(); - if (this.useEmailWidget()) { - this.el.fieldBillingEmail.show(); - } + this.el.emailWidgetContainer.hide(); + this.el.fieldBillingEmail.show(); } initPlacements() { @@ -271,16 +267,20 @@ class AxoManager { log('Email changed: ' + this.emailInput.value); this.isConnectProfile = false; + this.isNewProfile = false; this.hideGatewaySelection = false; + this.el.allFields.hide(); + if (!this.emailInput.checkValidity()) { log('The email address is not valid.'); return; } - const lookupResponse = await this.fastlane.identity.lookupCustomerByEmail(this.emailInput.value); + this.data.email = this.emailInput.value; + this.billingView.setData(this.data); - this.el.paymentContainer.show(); + const lookupResponse = await this.fastlane.identity.lookupCustomerByEmail(this.emailInput.value); if (lookupResponse.customerContextId) { // Email is associated with a Connect profile or a PayPal member. @@ -296,6 +296,10 @@ class AxoManager { if (authResponse.authenticationState === 'succeeded') { log(JSON.stringify(authResponse)); + this.el.allFields.show(); + this.el.paymentContainer.show(); + + // document.querySelector(this.el.paymentContainer.selector).innerHTML = // 'Change card'; @@ -322,6 +326,11 @@ class AxoManager { // This is a guest customer. log('No profile found with this email address.'); + this.el.allFields.show(); + this.el.paymentContainer.show(); + + this.isNewProfile = true; + this.cardComponent = await this.fastlane .FastlaneCardComponent(MockData.cardComponent()) .render(this.el.paymentContainer.selector); diff --git a/modules/ppcp-axo/resources/js/Components/DomElement.js b/modules/ppcp-axo/resources/js/Components/DomElement.js index 7c6d185bd..f84ab1725 100644 --- a/modules/ppcp-axo/resources/js/Components/DomElement.js +++ b/modules/ppcp-axo/resources/js/Components/DomElement.js @@ -8,6 +8,7 @@ class DomElement { this.selector = this.config.selector; this.id = this.config.id || null; this.className = this.config.className || null; + this.attributes = this.config.attributes || null; this.anchorSelector = this.config.anchorSelector || null; } @@ -19,12 +20,12 @@ class DomElement { this.$(document).on(action, this.selector, callable); } - hide(important = false) { - setVisible(this.selector, false, important); + hide() { + this.$(this.selector).hide(); } show() { - setVisible(this.selector, true); + this.$(this.selector).show(); } click() { diff --git a/modules/ppcp-axo/resources/js/Components/DomElementCollection.js b/modules/ppcp-axo/resources/js/Components/DomElementCollection.js index 230db6c9a..d6840242a 100644 --- a/modules/ppcp-axo/resources/js/Components/DomElementCollection.js +++ b/modules/ppcp-axo/resources/js/Components/DomElementCollection.js @@ -23,6 +23,10 @@ class DomElementCollection { className: 'ppcp-axo-watermark-container' }); + this.allFields = new DomElement({ + selector: '#customer_details .form-row, #customer_details .woocommerce-shipping-fields' + }); + this.emailWidgetContainer = new DomElement({ id: 'ppcp-axo-email-widget', selector: '#ppcp-axo-email-widget', @@ -54,6 +58,27 @@ class DomElementCollection { this.submitButton = new DomElement({ selector: '#ppcp-axo-submit-button-container button' }); + + this.changeShippingAddressLink = new DomElement({ + selector: '*[data-ppcp-axo-change-shipping-address]', + attributes: 'data-ppcp-axo-change-shipping-address', + }); + + this.changeBillingAddressLink = new DomElement({ + selector: '*[data-ppcp-axo-change-billing-address]', + attributes: 'data-ppcp-axo-change-billing-address', + }); + + this.changeCardLink = new DomElement({ + selector: '*[data-ppcp-axo-change-card]', + attributes: 'data-ppcp-axo-change-card', + }); + + this.showGatewaySelectionLink = new DomElement({ + selector: '*[data-ppcp-axo-show-gateway-selection]', + attributes: 'data-ppcp-axo-show-gateway-selection', + }); + } } diff --git a/modules/ppcp-axo/resources/js/Helper/FormFieldGroup.js b/modules/ppcp-axo/resources/js/Components/FormFieldGroup.js similarity index 92% rename from modules/ppcp-axo/resources/js/Helper/FormFieldGroup.js rename to modules/ppcp-axo/resources/js/Components/FormFieldGroup.js index 3cfd03eb0..d35b54349 100644 --- a/modules/ppcp-axo/resources/js/Helper/FormFieldGroup.js +++ b/modules/ppcp-axo/resources/js/Components/FormFieldGroup.js @@ -66,17 +66,14 @@ class MockData { }, isEmpty: () => { let isEmpty = true; - Object.values(this.fields).forEach((valuefield) => { - if (this.getDataValue(valuefield.valuePath)) { + Object.values(this.fields).forEach((valueField) => { + if (this.getDataValue(valueField.valuePath)) { isEmpty = false; return false; } }); return isEmpty; - }, - isEditing: () => { - return ! this.active; - }, + } }); } diff --git a/modules/ppcp-axo/resources/js/Views/BillingView.js b/modules/ppcp-axo/resources/js/Views/BillingView.js index 6736c9d1f..7e61388c3 100644 --- a/modules/ppcp-axo/resources/js/Views/BillingView.js +++ b/modules/ppcp-axo/resources/js/Views/BillingView.js @@ -1,36 +1,35 @@ -import FormFieldGroup from "../Helper/FormFieldGroup"; +import FormFieldGroup from "../Components/FormFieldGroup"; class BillingView { - constructor(selector) { + constructor(selector, elements) { + this.el = elements; + this.billingFormFields = new FormFieldGroup({ baseSelector: '.woocommerce-checkout', contentSelector: selector, template: (data) => { const valueOfSelect = (selectSelector, key) => { + if (!key) { + return ''; + } const selectElement = document.querySelector(selectSelector); const option = selectElement.querySelector(`option[value="${key}"]`); return option ? option.textContent : key; } - if (data.isEditing()) { - return ` -
-

Save

-
- `; - } if (data.isEmpty()) { return `
+

Billing details Edit

Please fill in your billing details.
-

Edit

`; } return `
-

Billing address

+

Billing details Edit

+
${data.value('email')}
${data.value('company')}
${data.value('firstName')} ${data.value('lastName')}
${data.value('street1')}
@@ -39,11 +38,13 @@ class BillingView {
${valueOfSelect('#billing_state', data.value('stateCode'))}
${valueOfSelect('#billing_country', data.value('countryCode'))}
${data.value('phone')}
-

Edit

`; }, fields: { + email: { + 'valuePath': 'email', + }, firstName: { 'selector': '#billing_first_name_field', 'valuePath': 'billing.name.firstName', diff --git a/modules/ppcp-axo/resources/js/Views/CardView.js b/modules/ppcp-axo/resources/js/Views/CardView.js index 7acd683b0..fd188d7c7 100644 --- a/modules/ppcp-axo/resources/js/Views/CardView.js +++ b/modules/ppcp-axo/resources/js/Views/CardView.js @@ -1,8 +1,9 @@ -import FormFieldGroup from "../Helper/FormFieldGroup"; +import FormFieldGroup from "../Components/FormFieldGroup"; class CardView { - constructor(selector, manager) { + constructor(selector, elements, manager) { + this.el = elements; this.manager = manager; this.cardFormFields = new FormFieldGroup({ @@ -13,21 +14,21 @@ class CardView { if (!this.manager.hideGatewaySelection) { return ''; } - return `

Select other payment method

`; + return `

Select other payment method

`; }; if (data.isEmpty()) { return `
Please fill in your card details.
-

Edit

+

Edit

${selectOtherPaymentMethod()}
`; } return `
-

Card Details Edit

+

Card Details Edit

${data.value('name')}
${data.value('brand')}
${data.value('lastDigits') ? '************' + data.value('lastDigits'): ''}
diff --git a/modules/ppcp-axo/resources/js/Views/ShippingView.js b/modules/ppcp-axo/resources/js/Views/ShippingView.js index 8f972866e..ab154913a 100644 --- a/modules/ppcp-axo/resources/js/Views/ShippingView.js +++ b/modules/ppcp-axo/resources/js/Views/ShippingView.js @@ -1,36 +1,34 @@ -import FormFieldGroup from "../Helper/FormFieldGroup"; +import FormFieldGroup from "../Components/FormFieldGroup"; class ShippingView { - constructor(selector) { + constructor(selector, elements) { + this.el = elements; + this.shippingFormFields = new FormFieldGroup({ baseSelector: '.woocommerce-checkout', contentSelector: selector, template: (data) => { const valueOfSelect = (selectSelector, key) => { + if (!key) { + return ''; + } const selectElement = document.querySelector(selectSelector); const option = selectElement.querySelector(`option[value="${key}"]`); return option ? option.textContent : key; } - if (data.isEditing()) { - return ` -
-

Shipping details Save

-
- `; - } if (data.isEmpty()) { return `
-

Shipping details Edit

+

Shipping details Edit

Please fill in your shipping details.
`; } return `
-

Shipping details Edit

+

Shipping details Edit

${data.value('company')}
${data.value('firstName')} ${data.value('lastName')}
${data.value('street1')}