Fixes AXO module

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'
 						),
-						'<a href="javascript:void(0)" id="ppcp-axo-style-more" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-less\').show(); document.ppcpAxoShowStyles = true; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal; text-decoration: none;">',
+						'<a href="javascript:void(0)" id="ppcp-axo-style-more" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-less\').show(); document.ppcpAxoShowStyles = true; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal;">',
 						'</a>',
-						'<a href="javascript:void(0)" id="ppcp-axo-style-less" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-more\').show(); document.ppcpAxoShowStyles = false; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal; text-decoration: none; display: none;">',
+						'<a href="javascript:void(0)" id="ppcp-axo-style-less" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-more\').show(); document.ppcpAxoShowStyles = false; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal; display: none;">',
 						'</a>'
 					),
 					'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'
 							),
-							'<a
+							'<a href="https://www.paypal.com/us/fastlane" target="_blank">',
-                            rel="noreferrer noopener"
-                            href="https://woo.com/document/woocommerce-paypal-payments/#vaulting-a-card"
-                            >',
 							'</a>'
 						)
 					),

modules/ppcp-axo/resources/css/styles.scss

@@ -34,3 +34,7 @@
 .ppcp-axo-field-hidden {
 	display: none;
 }
+
+.ppcp-axo-customer-details {
+	margin-bottom: 40px;
+}

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', `
+                <div class="${wc.className}" id="${wc.id}"></div>
+            `);
+        }
+
+        // Payment container
+        const pc = this.el.paymentContainer;
+        if (!document.querySelector(pc.selector)) {
+            const gatewayPaymentContainer = document.querySelector('.payment_method_ppcp-axo-gateway');
+            gatewayPaymentContainer.insertAdjacentHTML('beforeend', `
+                <div id="${pc.id}" class="${pc.className} hidden">
+                    <div id="${pc.id}-form" class="${pc.className}-form"></div>
+                    <div id="${pc.id}-details" class="${pc.className}-details"></div>
+                </div>
+            `);
+        }
+
         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', `
-            <div class="${this.el.watermarkContainer.className}" id="${this.el.watermarkContainer.id}"></div>
-        `);
-
-        const gatewayPaymentContainer = document.querySelector('.payment_method_ppcp-axo-gateway');
-        gatewayPaymentContainer.insertAdjacentHTML('beforeend', `
-            <div id="${this.el.paymentContainer.id}" class="${this.el.paymentContainer.className} hidden">
-                <div id="${this.el.paymentContainer.id}-form" class="${this.el.paymentContainer.className}-form"></div>
-                <div id="${this.el.paymentContainer.id}-details" class="${this.el.paymentContainer.className}-details"></div>
-            </div>
-        `);
-    }
-
     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(

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) => {
+                value: (fieldKey) => {
-                    return this.getDataValue(this.fields[valueKey].valuePath);
+                    return this.dataValue(fieldKey);
                 },
                 isEmpty: () => {
                     let isEmpty = true;
-                    Object.values(this.fields).forEach((valueField) => {
+                    Object.keys(this.fields).forEach((fieldKey) => {
-                        if (this.getDataValue(valueField.valuePath)) {
+                        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)
+            );
+        });
+
     }
 
 }

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: {
+                // phone: {
-                    'selector': '#billing_phone_field',
+                //     'selector': '#billing_phone_field',
-                    'valuePath': null,
+                //     '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;

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 };
     }
 
 }

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();
     }
 
 }

modules/ppcp-axo/src/AxoModule.php

@@ -127,6 +127,13 @@ class AxoModule implements ModuleInterface {
 					}
 				);
 
+				add_action('wp_head', function () {
+					echo '
+						<!-- PayPal Insights SDK JS library -->
+						<script async src="https://www.paypalobjects.com/insights/v1/paypal-insights.sandbox.min.js"></script>
+					';
+				});
+
 			},
 			1
 		);