optimizes payment booster (#227)

--------- Co-authored-by: Kara Armstrong <kfalkowski11@gmail.com>
bold-commerce · Mar 25, 2024 · 1ca281f · 1ca281f
1 parent af453f6
commit 1ca281f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 46 deletions.
diff --git a/view/frontend/web/js/view/payment/method-renderer/bold-method.js b/view/frontend/web/js/view/payment/method-renderer/bold-method.js
@@ -23,6 +23,7 @@
                 paymentType: null,
                 isVisible: ko.observable(true),
                 iframeSrc: ko.observable(null),
+                isPigiLoading: ko.observable(true),
             },
 
             /**
@@ -37,38 +38,40 @@
                 this.subscribeToPIGI();
                 this.customerIsGuest = !!Number(window.checkoutConfig.bold.customerIsGuest);
                 this.awaitingRefreshBeforePlacingOrder = false;
-                this.iframeSrc(window.checkoutConfig.bold.payment.iframeSrc);
-                this.syncBillingData();
                 this.messageContainer.errorMessages.subscribe(function (errorMessages) {
                     if (errorMessages.length > 0) {
                         loader.stopLoader();
                     }
                 });
+
+                const sendRefreshOrder = _.debounce(
+                    function () {
+                        this.refreshOrder();
+                    }.bind(this),
+                    500
+                );
+
+                sendRefreshOrder();
+
                 quote.billingAddress.subscribe(function () {
-                    const sendBillingAddress = _.debounce(
-                        function () {
-                            this.syncBillingData();
-                        }.bind(this),
-                        1000
-                    );
-                    sendBillingAddress();
+                    sendRefreshOrder();
                 }, this);
                 const email = registry.get('index = customer-email');
                 if (email) {
                     email.email.subscribe(function () {
                         if (email.validateEmail()) {
-                            const sendGuestCustomerInfo = _.debounce(
-                                function () {
-                                    this.sendGuestCustomerInfo();
-                                }.bind(this),
-                                1000
-                            );
-                            sendGuestCustomerInfo();
+                            sendRefreshOrder();
                         }
                     }.bind(this));
                 }
             },
 
+            initializePaymentGateway: function () {
+                console.log('initializing pigi...');
+                // Set frame src once /refresh is done
+                this.iframeSrc(window.checkoutConfig.bold.payment.iframeSrc);
+            },
+
             /**
              * @inheritDoc
              */
@@ -151,28 +154,6 @@
                 };
                 iframeWindow.postMessage(action, '*');
             },
-            /**
-             * Send guest customer info to Bold.
-             *
-             * @private
-             * @returns void
-             */
-            sendGuestCustomerInfo: function () {
-                if (!this.customerIsGuest) {
-                    return;
-                }
-                boldClient.post('customer/guest').then(
-                    function () {
-                        this.messageContainer.errorMessages([]);
-                        if (!this.isRadioButtonVisible() && quote.shippingMethod()) {
-                            return this.selectPaymentMethod(); // some one-step checkout updates shipping lines only after payment method is selected.
-                        }
-                        if (this.iframeWindow) {
-                            this.iframeWindow.postMessage({actionType: 'PIGI_REFRESH_ORDER'}, '*');
-                        }
-                    }.bind(this)
-                );
-            },
 
             /**
              * Subscribe to PIGI events.
@@ -198,6 +179,7 @@
                                     iframeElement.height = Math.round(data.payload.height) + 'px';
                                 }
                                 this.iframeWindow = iframeElement ? iframeElement.contentWindow : null;
+                                this.isPigiLoading(false);
                                 break;
                             case 'PIGI_REFRESH_ORDER':
                                 if(this.awaitingRefreshBeforePlacingOrder){
@@ -220,21 +202,34 @@
             },
 
             /**
-             * Send billing address to Bold.
+             * Sync Magento order with Bold.
              *
              * @private
              * @returns {void}
              */
-            syncBillingData() {
-                this.sendGuestCustomerInfo();
-                boldClient.post('addresses/billing').then(
-                    function () {
+            refreshOrder() {
+                boldClient.get('refresh').then(
+                    function (response) {
                         this.messageContainer.errorMessages([]);
                         if (!this.isRadioButtonVisible() && !quote.shippingMethod()) {
                             return this.selectPaymentMethod(); // some one-step checkout updates shipping lines only after payment method is selected.
                         }
-                        if (this.iframeWindow) {
-                            this.iframeWindow.postMessage({actionType: 'PIGI_REFRESH_ORDER'}, '*');
+
+                        if (
+                            response &&
+                            response.data &&
+                            response.data.application_state &&
+                            response.data.application_state.customer &&
+                            response.data.application_state.customer.email_address &&
+                            response.data.application_state.addresses.billing &&
+                            response.data.application_state.addresses.billing.address_line_1
+                        ) {
+                            if (this.isPigiLoading()){
+                                this.initializePaymentGateway(); // don't initialize pigi until there's a customer on the order
+                            }
+                            if (this.iframeWindow) {
+                                this.iframeWindow.postMessage({actionType: 'PIGI_REFRESH_ORDER'}, '*');
+                            }
                         }
                     }.bind(this)
                 );

diff --git a/view/frontend/web/template/payment/bold.html b/view/frontend/web/template/payment/bold.html
@@ -21,7 +21,9 @@
                 <!-- ko template: getTemplate() --><!-- /ko -->
             <!--/ko-->
         </div>
-        <iframe id="PIGI" data-bind="attr: {src: iframeSrc()}" scrolling="no" frameborder="0" width="100%"></iframe>
+        <div data-bind="blockLoader: isPigiLoading">
+            <iframe id="PIGI" data-bind="attr: {src: iframeSrc()}" scrolling="no" frameborder="0" width="100%"></iframe>
+        </div>
         <div class="actions-toolbar">
             <div class="primary">
                 <button class="action primary checkout"