Integrate AXO payment process

modules/ppcp-axo/resources/js/AxoManager.js

@@ -1,5 +1,4 @@
 import Fastlane from "./Connection/Fastlane";
-import MockData from "./Helper/MockData";
 import {log} from "./Helper/Debug";
 import DomElementCollection from "./Components/DomElementCollection";
 import ShippingView from "./Views/ShippingView";
@@ -26,6 +25,7 @@ class AxoManager {
         };
 
         this.data = {
+            email: null,
             billing: null,
             shipping: null,
             card: null,
@@ -101,6 +101,9 @@ class AxoManager {
             console.log('card response', response);
 
             if (response.selectionChanged) {
+
+                console.log('response.selectedCard.paymentToken', response.selectedCard.paymentToken);
+
                 this.setCard(response.selectedCard);
                 this.setBilling({
                     address: response.selectedCard.paymentSource.card.billingAddress
@@ -433,6 +436,8 @@ class AxoManager {
     }
 
     async onChangeEmail () {
+        this.clearData();
+
         if (!this.status.active) {
             log('Email checking skipped, AXO not active.');
             return;
@@ -479,9 +484,13 @@ class AxoManager {
 
                 // Add addresses
                 this.setShipping(authResponse.profileData.shippingAddress);
-                // TODO : set billing
+                this.setBilling({
+                    address: authResponse.profileData.card.paymentSource.card.billingAddress
+                });
                 this.setCard(authResponse.profileData.card);
 
+                console.log('authResponse', authResponse);
+
                 this.setStatus('validEmail', true);
                 this.setStatus('hasProfile', true);
 
@@ -503,12 +512,25 @@ class AxoManager {
             this.setStatus('validEmail', true);
             this.setStatus('hasProfile', false);
 
+            console.log('this.cardComponentData()', this.cardComponentData());
+
             this.cardComponent = await this.fastlane
-                .FastlaneCardComponent(MockData.cardComponent())
+                .FastlaneCardComponent(
+                    this.cardComponentData()
+                )
                 .render(this.el.paymentContainer.selector + '-form');
         }
     }
 
+    clearData() {
+        this.data = {
+            email: null,
+            billing: null,
+            shipping: null,
+            card: null,
+        };
+    }
+
     setShipping(shipping) {
         this.data.shipping = shipping;
         this.shippingView.setData(this.data);
@@ -525,12 +547,50 @@ class AxoManager {
     }
 
     onClickSubmitButton() {
-        try {
-            this.cardComponent.tokenize(MockData.cardComponentTokenize()).then((response) => {
-                this.submit(response.nonce);
-            });
-        } catch (e) {
-            log('Error tokenizing.');
+        if (this.data.card) { // Ryan flow
+            log('Ryan flow.');
+            this.submit(this.data.card.paymentToken);
+
+        } else { // Gary flow
+            log('Gary flow.');
+            console.log('this.tokenizeData()', this.tokenizeData());
+
+            try {
+                this.cardComponent.tokenize(
+                    this.tokenizeData()
+                ).then((response) => {
+                    this.submit(response.nonce);
+                });
+            } catch (e) {
+                log('Error tokenizing.');
+            }
+        }
+    }
+
+    cardComponentData() {
+        return {
+            fields: {
+                phoneNumber: {
+                    prefill: this.billingView.inputValue('phone')
+                },
+                cardholderName: {} // optionally pass this to show the card holder name
+            }
+        }
+    }
+
+    tokenizeData() {
+        return {
+            name: {
+                fullName: this.billingView.fullName()
+            },
+            billingAddress: {
+                addressLine1: this.billingView.inputValue('street1'),
+                addressLine2: this.billingView.inputValue('street2'),
+                adminArea1: this.billingView.inputValue('city'),
+                adminArea2: this.billingView.inputValue('stateCode'),
+                postalCode: this.billingView.inputValue('postCode'),
+                countryCode: this.billingView.inputValue('countryCode'),
+            }
         }
     }
 
@@ -540,7 +600,13 @@ class AxoManager {
         alert('nonce: ' + nonce);
 
         // Submit form.
-//        this.el.defaultSubmitButton.click();
+        if (!this.el.axoNonceInput.get()) {
+            this.$('.woocommerce-checkout').append(`<input type="hidden" id="${this.el.axoNonceInput.id}" name="axo_nonce" value="" />`);
+        }
+
+        this.el.axoNonceInput.get().value = nonce;
+
+        this.el.defaultSubmitButton.click();
     }
 
     useEmailWidget() {

modules/ppcp-axo/resources/js/Components/DomElement.js

@@ -29,8 +29,13 @@ class DomElement {
     }
 
     click() {
-        document.querySelector(this.selector).click();
+        this.get().click();
     }
+
+    get() {
+        return document.querySelector(this.selector);
+    }
+
 }
 
 export default DomElement;

modules/ppcp-axo/resources/js/Components/DomElementCollection.js

@@ -84,6 +84,11 @@ class DomElementCollection {
             attributes: 'data-ppcp-axo-show-gateway-selection',
         });
 
+        this.axoNonceInput = new DomElement({
+            id: 'ppcp-axo-nonce',
+            selector: '#ppcp-axo-nonce',
+        });
+
     }
 }
 

modules/ppcp-axo/resources/js/Components/FormFieldGroup.js

@@ -1,5 +1,5 @@
 
-class MockData {
+class FormFieldGroup {
 
     constructor(config) {
         this.data = {};
@@ -97,6 +97,11 @@ class MockData {
             field.classList.add('ppcp-axo-field-hidden');
         }
     }
+
+    inputValue(name) {
+        return document.querySelector(this.fields[name].selector).value;
+    }
+
 }
 
-export default MockData;
+export default FormFieldGroup;

modules/ppcp-axo/resources/js/Connection/Fastlane.js

@@ -6,14 +6,13 @@ class Fastlane {
         this.identity = null;
         this.profile = null;
         this.FastlaneCardComponent = null;
-        this.FastlaneEmailComponent = null;
-        this.FastlaneAddressComponent = null;
+        this.FastlanePaymentComponent = null;
         this.FastlaneWatermarkComponent = null;
     }
 
     connect(config) {
         return new Promise((resolve, reject) => {
-            window.paypal.Connect(config) // TODO: migrate from 0.6 to 0.7
+            window.paypal.Fastlane(config)
                 .then((result) => {
                     this.init(result);
                     console.log('[AXO] Connected', result);
@@ -30,10 +29,9 @@ class Fastlane {
         this.connection = connection;
         this.identity = this.connection.identity;
         this.profile = this.connection.profile;
-        this.FastlaneCardComponent = this.connection.ConnectCardComponent; // TODO: migrate from 0.6 to 0.7
-        this.FastlaneEmailComponent = null; // TODO: migrate from 0.6 to 0.7
-        this.FastlaneAddressComponent = null; // TODO: migrate from 0.6 to 0.7
-        this.FastlaneWatermarkComponent = this.connection.ConnectWatermarkComponent // TODO: migrate from 0.6 to 0.7
+        this.FastlaneCardComponent = this.connection.FastlaneCardComponent;
+        this.FastlanePaymentComponent = this.connection.FastlanePaymentComponent;
+        this.FastlaneWatermarkComponent = this.connection.FastlaneWatermarkComponent
 
         console.log('[AXO] Fastlane initialized', this);
     }

modules/ppcp-axo/resources/js/Views/BillingView.js

@@ -109,6 +109,14 @@ class BillingView {
         this.billingFormFields.setData(data);
     }
 
+    inputValue(name) {
+        return this.billingFormFields.inputValue(name);
+    }
+
+    fullName() {
+        return `${this.inputValue('firstName')} ${this.inputValue('lastName')}`.trim();
+    }
+
 }
 
 export default BillingView;