Refactoring AXO module

2025-09-01 07:02:48 +08:00 · 2024-02-09 17:49:45 +00:00 · 2024-02-09 17:49:45 +00:00 · 7f93e5762d
commit 7f93e5762d
parent b4b5863cb4
5 changed files with 286 additions and 193 deletions
--- a/modules/ppcp-axo/resources/js/AxoManager.js
+++ b/modules/ppcp-axo/resources/js/AxoManager.js
@ -0,0 +1,194 @@
+import Fastlane from "./Entity/Fastlane";
+
+class AxoManager {
+
+    constructor() {
+        this.initialized = false;
+        this.fastlane = new Fastlane();
+
+
+        jQuery(document).on('change', '#payment_method_ppcp-axo-gateway', (ev) => {
+            if(ev.target.checked) {
+                let emailRow = document.querySelector('#billing_email_field');
+                jQuery(emailRow.parentNode).prepend(emailRow);
+                emailRow.querySelector('input').focus();
+
+                this.init();
+
+                // show stuff
+                jQuery('#place_order').hide();
+                jQuery('#axo-submit-button-container').show();
+                jQuery('#payment-container').show();
+            } else {
+                console.log('Checkbox is not checked.');
+
+                // hide stuff
+                jQuery('#place_order').show();
+                jQuery('#axo-submit-button-container').hide();
+                jQuery('#payment-container').hide();
+            }
+        });
+
+        let gatewaysRenderedInterval = setInterval(() => {
+            console.log('not rendered');
+            if (document.querySelector('.wc_payment_methods')) {
+                console.log('YES rendered');
+                clearInterval(gatewaysRenderedInterval);
+                jQuery('#payment_method_ppcp-axo-gateway').trigger('change');
+            }
+        }, 100);
+
+        jQuery(document.body).on('updated_checkout payment_method_selected', () => {
+            jQuery('#payment_method_ppcp-axo-gateway').trigger('change');
+        });
+
+        jQuery(document).on('click', '.ppcp-axo-order-button', () => {
+            try {
+
+                this.connectCardComponent.tokenize({
+                    name: {
+                        fullName: "John Doe"
+                    },
+                    billingAddress: {
+                        addressLine1: "2211 North 1st St",
+                        adminArea1: "San Jose",
+                        adminArea2: "CA",
+                        postalCode: "95131",
+                        countryCode: "US"
+                    }
+                }).then((response) => {
+
+                    // Send the nonce and previously captured device data to server to complete checkout
+                    this.log('nonce: ' + response.nonce);
+                    alert('nonce: ' + response.nonce);
+
+                    // fetch('submit.php', {
+                    //     method: 'POST',
+                    //     headers: {
+                    //         'Content-Type': 'application/json',
+                    //     },
+                    //     body: JSON.stringify({
+                    //         nonce: nonce
+                    //     }),
+                    // })
+                    //
+                    //     .then(response => {
+                    //         if (!response.ok) {
+                    //             throw new Error('Network response was not ok');
+                    //         }
+                    //         return response.json();
+                    //     })
+                    //     .then(data => {
+                    //         console.log('Submit response', data);
+                    //         this.log(JSON.stringify(data));
+                    //     })
+                    //     .catch(error => {
+                    //         console.error('There has been a problem with your fetch operation:', error);
+                    //     });
+
+                });
+
+            } catch (e) {
+                console.log('Error tokenizing.');
+            }
+
+            return false;
+        });
+
+    }
+
+    init() {
+        if (this.initialized) {
+            return;
+        }
+        this.initialized = true;
+
+        this.initManager();
+    }
+
+    async initManager() {
+        window.localStorage.setItem('axoEnv', 'sandbox');
+
+        const styles = {
+            root: {
+                backgroundColorPrimary: "#ffffff"
+            }
+        }
+
+        const locale = 'en_us';
+
+        await this.fastlane.connect({
+            locale,
+            styles
+        });
+
+        this.fastlane.setLocale('en_us');
+
+        this.emailInput = document.querySelector('#billing_email_field input');
+
+        jQuery(this.emailInput).after(`
+            <div id="watermark-container" style="max-width: 200px; margin-top: 10px;"></div>
+        `);
+
+        jQuery('.payment_method_ppcp-axo-gateway').append(`
+            <div id="payment-container"></div>
+        `);
+
+        this.fastlane.FastlaneWatermarkComponent({
+            includeAdditionalInfo: true
+        }).render('#watermark-container');
+
+        this.emailInput.addEventListener("change", async ()=> {
+            this.emailUpdated();
+        });
+
+        if (this.emailInput.value) {
+            this.emailUpdated();
+        }
+    }
+
+    async emailUpdated () {
+        this.log('Email changed: ' + this.emailInput.value);
+
+        if (!this.emailInput.checkValidity()) {
+            this.log('The email address is not valid.');
+            return;
+        }
+
+        const { customerContextId } = await this.fastlane.identity.lookupCustomerByEmail(this.emailInput.value);
+
+        if (customerContextId) {
+            // Email is associated with a Connect profile or aPayPal member
+            // Authenticate the customer to get access to their profile
+            this.log('Email is associated with a Connect profile or a PayPal member');
+        } else {
+            // No profile found with this email address.
+            // This is a guest customer.
+            this.log('No profile found with this email address.');
+
+            const fields = {
+                phoneNumber: {
+                    prefill: "1234567890"
+                },
+
+                cardholderName: {} // optionally pass this to show the card holder name
+            };
+
+            jQuery("#payment-container").css({
+                'padding': '1rem 0',
+                'background-color': '#ffffff',
+            });
+
+            this.connectCardComponent = await this.fastlane
+                .FastlaneCardComponent({fields})
+                .render("#payment-container");
+        }
+    }
+
+    log(message) {
+        console.log('[AXO] ', message);
+    }
+
+}
+
+export default AxoManager;