From 995621ba212f2784a70721f16351c4521e3f45de Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Wed, 10 Apr 2024 18:27:21 +0100 Subject: [PATCH] Fixes AXO module --- modules/ppcp-axo/extensions.php | 11 ++-- modules/ppcp-axo/resources/css/styles.scss | 4 ++ modules/ppcp-axo/resources/js/AxoManager.js | 50 ++++++++++------- .../resources/js/Components/FormFieldGroup.js | 54 +++++++++++++++---- .../resources/js/Views/BillingView.js | 26 +++++---- .../ppcp-axo/resources/js/Views/CardView.js | 28 ++++++++-- .../resources/js/Views/ShippingView.js | 16 +++--- modules/ppcp-axo/src/AxoModule.php | 7 +++ 8 files changed, 138 insertions(+), 58 deletions(-) diff --git a/modules/ppcp-axo/extensions.php b/modules/ppcp-axo/extensions.php index 1174c6f2a..b3cc8ab2b 100644 --- a/modules/ppcp-axo/extensions.php +++ b/modules/ppcp-axo/extensions.php @@ -209,9 +209,9 @@ return array( 'Advanced Style Settings (optional) %1$sSee more%2$s %3$sSee less%4$s', 'woocommerce-paypal-payments' ), - '', + '', '', - '' ), 'type' => 'ppcp-heading', @@ -219,13 +219,10 @@ return array( sprintf( // translators: %1$s and %2$s is a link tag. __( - 'Leave the default styling, or customize how Fastlane looks on your website. See PayPal\'s developer docs for info', + 'Leave the default styling, or customize how Fastlane looks on your website. %1$sSee PayPal\'s developer docs%2$s for info', 'woocommerce-paypal-payments' ), - '', + '', '' ) ), diff --git a/modules/ppcp-axo/resources/css/styles.scss b/modules/ppcp-axo/resources/css/styles.scss index 7b9c3c3e9..12c235fbd 100644 --- a/modules/ppcp-axo/resources/css/styles.scss +++ b/modules/ppcp-axo/resources/css/styles.scss @@ -34,3 +34,7 @@ .ppcp-axo-field-hidden { display: none; } + +.ppcp-axo-customer-details { + margin-bottom: 40px; +} diff --git a/modules/ppcp-axo/resources/js/AxoManager.js b/modules/ppcp-axo/resources/js/AxoManager.js index 32af9492a..9eb8ee4a3 100644 --- a/modules/ppcp-axo/resources/js/AxoManager.js +++ b/modules/ppcp-axo/resources/js/AxoManager.js @@ -51,8 +51,9 @@ class AxoManager { this.setStatus(key, value); } - document.axoDebugObject = (key, value) => { + document.axoDebugObject = () => { console.log(this); + return this; } } @@ -351,6 +352,27 @@ class AxoManager { `); } + // Watermark container + const wc = this.el.watermarkContainer; + if (!document.querySelector(wc.selector)) { + this.emailInput = document.querySelector(this.el.fieldBillingEmail.selector + ' input'); + this.emailInput.insertAdjacentHTML('afterend', ` +
+ `); + } + + // Payment container + const pc = this.el.paymentContainer; + if (!document.querySelector(pc.selector)) { + const gatewayPaymentContainer = document.querySelector('.payment_method_ppcp-axo-gateway'); + gatewayPaymentContainer.insertAdjacentHTML('beforeend', ` + + `); + } + if (this.useEmailWidget()) { // Display email widget. @@ -379,7 +401,6 @@ class AxoManager { this.initialized = true; await this.connect(); - this.insertDomElements(); this.renderWatermark(); this.watchEmail(); } @@ -395,21 +416,6 @@ class AxoManager { this.fastlane.setLocale('en_us'); } - insertDomElements() { - this.emailInput = document.querySelector(this.el.fieldBillingEmail.selector + ' input'); - this.emailInput.insertAdjacentHTML('afterend', ` -
- `); - - const gatewayPaymentContainer = document.querySelector('.payment_method_ppcp-axo-gateway'); - gatewayPaymentContainer.insertAdjacentHTML('beforeend', ` - - `); - } - triggerGatewayChange() { this.el.gatewayRadioButton.trigger('change'); } @@ -551,14 +557,20 @@ class AxoManager { } onClickSubmitButton() { + // TODO: validate data. + if (this.data.card) { // Ryan flow log('Ryan flow.'); - console.log('this.data.card', this.data.card); + + jQuery('#ship-to-different-address-checkbox').prop('checked', 'checked'); + this.billingView.copyDataToForm(); + this.shippingView.copyDataToForm(); + this.cardView.copyDataToForm(); + this.submit(this.data.card.id); } else { // Gary flow log('Gary flow.'); - console.log('this.tokenizeData()', this.tokenizeData()); try { this.cardComponent.tokenize( diff --git a/modules/ppcp-axo/resources/js/Components/FormFieldGroup.js b/modules/ppcp-axo/resources/js/Components/FormFieldGroup.js index 29d1319d8..90d65a5f9 100644 --- a/modules/ppcp-axo/resources/js/Components/FormFieldGroup.js +++ b/modules/ppcp-axo/resources/js/Components/FormFieldGroup.js @@ -17,10 +17,17 @@ class FormFieldGroup { this.refresh(); } - getDataValue(path) { + dataValue(fieldKey) { + if (!fieldKey || !this.fields[fieldKey]) { + return ''; + } + + const path = this.fields[fieldKey].valuePath; + if (!path) { return ''; } + const value = path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined) ? acc[key] : undefined, this.data); return value ? value : ''; } @@ -66,13 +73,13 @@ class FormFieldGroup { if (typeof this.template === 'function') { content.innerHTML = this.template({ - value: (valueKey) => { - return this.getDataValue(this.fields[valueKey].valuePath); + value: (fieldKey) => { + return this.dataValue(fieldKey); }, isEmpty: () => { let isEmpty = true; - Object.values(this.fields).forEach((valueField) => { - if (this.getDataValue(valueField.valuePath)) { + Object.keys(this.fields).forEach((fieldKey) => { + if (this.dataValue(fieldKey)) { isEmpty = false; return false; } @@ -98,20 +105,47 @@ class FormFieldGroup { } } - inputValue(name) { + inputElement(name) { const baseSelector = this.fields[name].selector; - const select = document.querySelector(baseSelector + ' input'); + const select = document.querySelector(baseSelector + ' select'); if (select) { - return select.value; + return select; } const input = document.querySelector(baseSelector + ' input'); if (input) { - return input.value; + return input; } - return ''; + return null; + } + + inputValue(name) { + const el = this.inputElement(name); + return el ? el.value : ''; + } + + copyDataToForm() { + + Object.keys(this.fields).forEach((fieldKey) => { + const field = this.fields[fieldKey]; + + if (!field.valuePath || !field.selector) { + return true; + } + + const inputElement = this.inputElement(fieldKey); + + if (!inputElement) { + return true; + } + + jQuery(inputElement).val( + this.dataValue(fieldKey) + ); + }); + } } diff --git a/modules/ppcp-axo/resources/js/Views/BillingView.js b/modules/ppcp-axo/resources/js/Views/BillingView.js index 72fb1f5a7..b2ec0050b 100644 --- a/modules/ppcp-axo/resources/js/Views/BillingView.js +++ b/modules/ppcp-axo/resources/js/Views/BillingView.js @@ -5,7 +5,7 @@ class BillingView { constructor(selector, elements) { this.el = elements; - this.billingFormFields = new FormFieldGroup({ + this.group = new FormFieldGroup({ baseSelector: '.woocommerce-checkout', contentSelector: selector, template: (data) => { @@ -81,42 +81,46 @@ class BillingView { 'selector': '#billing_company_field', 'valuePath': null, }, - phone: { - 'selector': '#billing_phone_field', - 'valuePath': null, - }, + // phone: { + // 'selector': '#billing_phone_field', + // 'valuePath': null, + // }, } }); } isActive() { - return this.billingFormFields.active; + return this.group.active; } activate() { - this.billingFormFields.activate(); + this.group.activate(); } deactivate() { - this.billingFormFields.deactivate(); + this.group.deactivate(); } refresh() { - this.billingFormFields.refresh(); + this.group.refresh(); } setData(data) { - this.billingFormFields.setData(data); + this.group.setData(data); } inputValue(name) { - return this.billingFormFields.inputValue(name); + return this.group.inputValue(name); } fullName() { return `${this.inputValue('firstName')} ${this.inputValue('lastName')}`.trim(); } + copyDataToForm() { + return this.group.copyDataToForm(); + } + } export default BillingView; diff --git a/modules/ppcp-axo/resources/js/Views/CardView.js b/modules/ppcp-axo/resources/js/Views/CardView.js index 67d9aa01e..c63eb3fab 100644 --- a/modules/ppcp-axo/resources/js/Views/CardView.js +++ b/modules/ppcp-axo/resources/js/Views/CardView.js @@ -6,7 +6,7 @@ class CardView { this.el = elements; this.manager = manager; - this.cardFormFields = new FormFieldGroup({ + this.group = new FormFieldGroup({ baseSelector: '.ppcp-axo-payment-container', contentSelector: selector, template: (data) => { @@ -76,19 +76,37 @@ class CardView { } activate() { - this.cardFormFields.activate(); + this.group.activate(); } deactivate() { - this.cardFormFields.deactivate(); + this.group.deactivate(); } refresh() { - this.cardFormFields.refresh(); + this.group.refresh(); } setData(data) { - this.cardFormFields.setData(data); + this.group.setData(data); + } + + copyDataToForm() { + const name = this.group.dataValue('name'); + const { firstName, lastName } = this.splitName(name); + + jQuery('#billing_first_name').val(firstName); + jQuery('#billing_last_name').val(lastName); + + return this.group.copyDataToForm(); + } + + splitName(fullName) { + let nameParts = fullName.trim().split(' '); + let firstName = nameParts[0]; + let lastName = nameParts.length > 1 ? nameParts[nameParts.length - 1] : ''; + + return { firstName, lastName }; } } diff --git a/modules/ppcp-axo/resources/js/Views/ShippingView.js b/modules/ppcp-axo/resources/js/Views/ShippingView.js index 24c95cf87..7b6da3f09 100644 --- a/modules/ppcp-axo/resources/js/Views/ShippingView.js +++ b/modules/ppcp-axo/resources/js/Views/ShippingView.js @@ -5,7 +5,7 @@ class ShippingView { constructor(selector, elements) { this.el = elements; - this.shippingFormFields = new FormFieldGroup({ + this.group = new FormFieldGroup({ baseSelector: '.woocommerce-checkout', contentSelector: selector, template: (data) => { @@ -86,23 +86,27 @@ class ShippingView { } isActive() { - return this.shippingFormFields.active; + return this.group.active; } activate() { - this.shippingFormFields.activate(); + this.group.activate(); } deactivate() { - this.shippingFormFields.deactivate(); + this.group.deactivate(); } refresh() { - this.shippingFormFields.refresh(); + this.group.refresh(); } setData(data) { - this.shippingFormFields.setData(data); + this.group.setData(data); + } + + copyDataToForm() { + return this.group.copyDataToForm(); } } diff --git a/modules/ppcp-axo/src/AxoModule.php b/modules/ppcp-axo/src/AxoModule.php index 6f8372e75..f1c07a577 100644 --- a/modules/ppcp-axo/src/AxoModule.php +++ b/modules/ppcp-axo/src/AxoModule.php @@ -127,6 +127,13 @@ class AxoModule implements ModuleInterface { } ); + add_action('wp_head', function () { + echo ' + + + '; + }); + }, 1 );