Refactor AXO form submission

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

@@ -5,6 +5,7 @@ import ShippingView from "./Views/ShippingView";
 import BillingView from "./Views/BillingView";
 import CardView from "./Views/CardView";
 import PayPalInsights from "./Insights/PayPalInsights";
+import {disable,enable} from "../../../ppcp-button/resources/js/modules/Helper/ButtonDisabler";
 
 class AxoManager {
 
@@ -607,11 +608,13 @@ class AxoManager {
             log('Ryan flow.');
 
             jQuery('#ship-to-different-address-checkbox').prop('checked', 'checked');
-            this.billingView.copyDataToForm();
-            this.shippingView.copyDataToForm();
-            this.cardView.copyDataToForm();
 
-            this.submit(this.data.card.id);
+            let data = {};
+            this.billingView.toSubmitData(data);
+            this.shippingView.toSubmitData(data);
+            this.cardView.toSubmitData(data);
+
+            this.submit(this.data.card.id, data);
 
         } else { // Gary flow
             log('Gary flow.');
@@ -652,14 +655,10 @@ class AxoManager {
         }
     }
 
-    submit(nonce) {
+    submit(nonce, data) {
         // Send the nonce and previously captured device data to server to complete checkout
-        log('nonce: ' + nonce);
-        alert('nonce: ' + nonce);
-
-        // Submit form.
         if (!this.el.axoNonceInput.get()) {
-            this.$('.woocommerce-checkout').append(`<input type="hidden" id="${this.el.axoNonceInput.id}" name="axo_nonce" value="" />`);
+            this.$('form.woocommerce-checkout').append(`<input type="hidden" id="${this.el.axoNonceInput.id}" name="axo_nonce" value="" />`);
         }
 
         this.el.axoNonceInput.get().value = nonce;
@@ -674,7 +673,39 @@ class AxoManager {
             }
         });
 
-        this.el.defaultSubmitButton.click();
+        if (data) {
+
+            // Ryan flow.
+            const form = document.querySelector('form.woocommerce-checkout');
+            const formData = new FormData(form);
+
+            disable('.woocommerce-checkout-payment');
+
+            // Fill in form data.
+            Object.keys(data).forEach((key) => {
+                formData.set(key, data[key]);
+            });
+
+            fetch(wc_checkout_params.checkout_url, { // TODO: maybe create a new endpoint to process_payment.
+                method: "POST",
+                body: formData
+            })
+                .then(response => response.json())
+                .then(responseData => {
+                    if (responseData.redirect) {
+                        window.location.href = responseData.redirect;
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    enable('.woocommerce-checkout-payment');
+                });
+
+        } else {
+            // Gary flow.
+            this.el.defaultSubmitButton.click();
+        }
+
     }
 
     useEmailWidget() {

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

@@ -131,8 +131,7 @@ class FormFieldGroup {
         return el ? el.value : '';
     }
 
-    copyDataToForm() {
-
+    toSubmitData(data) {
         Object.keys(this.fields).forEach((fieldKey) => {
             const field = this.fields[fieldKey];
 
@@ -146,11 +145,8 @@ class FormFieldGroup {
                 return true;
             }
 
-            jQuery(inputElement).val(
-                this.dataValue(fieldKey)
-            );
+            data[inputElement.name] = this.dataValue(fieldKey);
         });
-
     }
 
 }

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

@@ -51,11 +51,11 @@ class BillingView {
                 },
                 firstName: {
                     'selector': '#billing_first_name_field',
-                    'valuePath': 'billing.name.firstName',
+                    'valuePath': null
                 },
                 lastName: {
                     'selector': '#billing_last_name_field',
-                    'valuePath': 'billing.name.lastName',
+                    'valuePath': null
                 },
                 street1: {
                     'selector': '#billing_address_1_field',
@@ -117,8 +117,8 @@ class BillingView {
         return `${this.inputValue('firstName')} ${this.inputValue('lastName')}`.trim();
     }
 
-    copyDataToForm() {
-        return this.group.copyDataToForm();
+    toSubmitData(data) {
+        return this.group.toSubmitData(data);
     }
 
 }

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

@@ -91,14 +91,14 @@ class CardView {
         this.group.setData(data);
     }
 
-    copyDataToForm() {
+    toSubmitData(data) {
         const name = this.group.dataValue('name');
         const { firstName, lastName } = this.splitName(name);
 
-        jQuery('#billing_first_name').val(firstName);
-        jQuery('#billing_last_name').val(lastName);
+        data['firstName'] = firstName;
+        data['lastName'] = lastName;
 
-        return this.group.copyDataToForm();
+        return this.group.toSubmitData(data);
     }
 
     splitName(fullName) {

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

@@ -125,8 +125,8 @@ class ShippingView {
         this.group.setData(data);
     }
 
-    copyDataToForm() {
-        return this.group.copyDataToForm();
+    toSubmitData(data) {
+        return this.group.toSubmitData(data);
     }
 
 }

modules/ppcp-axo/src/Assets/AxoManager.php

@@ -203,7 +203,7 @@ class AxoManager {
 
 		printf(
 			'<div id="%1$s" style="display: none;">
-				<button type="submit" class="button alt ppcp-axo-order-button">%2$s</button>
+				<button type="button" class="button alt ppcp-axo-order-button">%2$s</button>
 			</div>',
 			esc_attr( $id ),
 			esc_html( $label )