Merge pull request #45 from bold-commerce/INTER-4368

Payment Booster loads credit card section of Pigi when Fastlane is en…
bold-commerce · Jul 30, 2024 · e11da26 · e11da26
2 parents 1a3cf04 + 9f51b98
commit e11da26
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 41 deletions.
diff --git a/etc/csp_whitelist.xml b/etc/csp_whitelist.xml
@@ -21,6 +21,7 @@
             <values>
                 <value id="bold_commerce" type="host">api.boldcommerce.com</value>
                 <value id="bold_commerce_staging" type="host">api.staging.boldcommerce.com</value>
+                <value id="bold_paypal_frame" type="host">*.paypal.com</value>
             </values>
         </policy>
         <policy id="object-src">

diff --git a/view/frontend/web/js/view/payment/method-renderer/bold-fastlane-method.js b/view/frontend/web/js/view/payment/method-renderer/bold-fastlane-method.js
@@ -30,7 +30,7 @@ define(
         registry,
         _,
         ko,
-        $t
+        $t,
     ) {
         'use strict';
         return MagentoPayment.extend({
@@ -61,6 +61,17 @@ define(
                     }
                     this.renderPaymentContainer();
                 }, this);
+                quote.shippingAddress.subscribe(function () {
+                    const shippingAddress = this.getFastlaneShippingAddress();
+                    if (shippingAddress && this.fastlanePaymentComponent) {
+                        this.fastlanePaymentComponent.updatePrefills(
+                            {
+                                phoneNumber: this.getFormattedPhoneNumber(),
+                            },
+                        );
+                        this.fastlanePaymentComponent.setShippingAddress(shippingAddress);
+                    }
+                }, this);
             },
             /**
              * Wait for the payment container to be rendered before rendering the Fastlane component.
@@ -75,14 +86,11 @@ define(
                     if (addressFilled && document.querySelector(this.paymentContainer)) {
                         observer.disconnect();
                         this.renderCardComponent();
-                        if (window.checkoutConfig.bold.fastlane.memberAuthenticated === true) {
-                            this.selectPaymentMethod();
-                        }
                     }
                 }.bind(this));
                 observer.observe(document.body, {
                     childList: true,
-                    subtree: true
+                    subtree: true,
                 });
             },
             /**
@@ -97,24 +105,19 @@ define(
                         this.isVisible(false);
                         return;
                     }
-                    const quoteAddress = quote.isVirtual() ? quote.billingAddress() : quote.shippingAddress();
-                    let telephone = null;
-                    if (quoteAddress) {
-                        telephone = quoteAddress.telephone;
-                    }
                     const fields = {
                         phoneNumber: {
-                            prefill: telephone
-                        }
+                            prefill: this.getFormattedPhoneNumber(),
+                        },
                     };
                     const styles = window.checkoutConfig.bold.fastlane.styles || {};
-                    const shippingAddress = this.getFastlaneShippingAddress();
                     this.fastlanePaymentComponent = await fastlaneInstance.FastlanePaymentComponent(
                         {
                             styles,
-                            fields
-                        }
+                            fields,
+                        },
                     );
+                    const shippingAddress = this.getFastlaneShippingAddress();
                     if (shippingAddress) {
                         this.fastlanePaymentComponent.setShippingAddress(shippingAddress);
                     }
@@ -134,14 +137,14 @@ define(
                 this.fastlanePaymentComponent.getPaymentToken().then((tokenResponse) => {
                     this.processBoldOrder(tokenResponse).then(() => {
                         const orderPlacementResult = placeMagentoOrder(data, event);
-                        loader.stopLoader()
+                        loader.stopLoader();
                         return orderPlacementResult;
                     }).catch((error) => {
-                        let errorMessage
+                        let errorMessage;
                         try {
                             errorMessage = error.responseJSON && error.responseJSON.errors
-                              ? error.responseJSON.errors[0].message
-                              : error.message;
+                                ? error.responseJSON.errors[0].message
+                                : error.message;
                         } catch (e) {
                             errorMessage = this.error;
                         }
@@ -175,8 +178,8 @@ define(
                                     locale: navigator.language,
                                     payment_type: 'fastlane',
                                     token: tokenResponse.id,
-                                }
-                            }
+                                },
+                            },
                         );
                         if (walletPayResult.errors) {
                             return Promise.reject('An error occurred while processing your payment. Please try again.');
@@ -187,14 +190,14 @@ define(
                         'gateway_public_id': fastlane.getGatewayPublicId(),
                         'currency': quote.totals().quote_currency_code,
                         'amount': quote.totals().grand_total * 100,
-                        'token': tokenResponse.id
-                    }
+                        'token': tokenResponse.id,
+                    };
                     if (fastlane.getType() === 'braintree') {
-                        paymentPayload.type = 'fastlane'
+                        paymentPayload.type = 'fastlane';
                     }
                     const paymentResult = await boldFrontendClient.post(
                         'payments',
-                        paymentPayload
+                        paymentPayload,
                     );
                     const orderPlacementResult = await boldFrontendClient.post('process_order');
                     if (refreshResult.errors || taxesResult.errors || paymentResult.errors || orderPlacementResult.errors) {
@@ -209,19 +212,19 @@ define(
              *
              * @param {{paymentSource: {card: {billingAddress}}}}tokenResponse
              */
-            updateQuoteBillingAddress(tokenResponse) {
+            updateQuoteBillingAddress (tokenResponse) {
                 const fastlaneBillingAddress = tokenResponse.paymentSource && tokenResponse.paymentSource.card && tokenResponse.paymentSource.card.billingAddress
                     ? tokenResponse.paymentSource.card.billingAddress
                     : null;
                 if (!fastlaneBillingAddress) {
-                    throw new Error('Billing address is missing in the payment token response.');
+                    return;
                 }
                 let quoteAddress = quote.isVirtual() ? quote.billingAddress() : quote.shippingAddress();
                 if (!quoteAddress) {
                     quoteAddress = {
                         firstname: null,
                         lastname: null,
-                        telephone: null
+                        telephone: null,
                     };
                 }
                 let fastlaneFirstName;
@@ -278,7 +281,7 @@ define(
                     region: quoteAddress.regionCode,
                     postalCode: quoteAddress.postcode,
                     countryCodeAlpha2: quoteAddress.countryId,
-                    phoneNumber: quoteAddress.telephone
+                    phoneNumber: quoteAddress.telephone,
                 };
             },
             /**
@@ -290,16 +293,38 @@ define(
                 try {
                     await boldFrontendClient.post('customer/guest');
                 } catch (error) {
-                  let errorMessage;
-                  try {
-                    errorMessage = error.responseJSON && error.responseJSON.errors
-                      ? error.responseJSON.errors[0].message
-                      : error.message;
-                  } catch (e) {
-                    errorMessage = this.error;
-                  }
+                    let errorMessage;
+                    try {
+                        errorMessage = error.responseJSON && error.responseJSON.errors
+                            ? error.responseJSON.errors[0].message
+                            : error.message;
+                    } catch (e) {
+                        errorMessage = this.error;
+                    }
                     errorProcessor.process(errorMessage, this.messageContainer);
                 }
-            }
+            },
+            /**
+             * Remove country code from the Fastlane phone number.
+             *
+             * @return {string}
+             */
+            getFormattedPhoneNumber: function () {
+                let phoneNumber = '';
+                if (quote.isVirtual() && quote.billingAddress()) {
+                    phoneNumber = quote.billingAddress().telephone || '';
+                }
+                if (!phoneNumber && quote.shippingAddress()) {
+                    phoneNumber = quote.shippingAddress().telephone || '';
+                }
+                phoneNumber = phoneNumber.replace(/\D/g, '');
+                if (!phoneNumber) {
+                    return '';
+                }
+                if (phoneNumber.length === 11 && phoneNumber.startsWith('1')) {
+                    return phoneNumber.substring(1);
+                }
+                return phoneNumber;
+            },
         });
     });
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
@@ -275,12 +275,12 @@ define([
                                 return;
                             }
                             iframeElement.height = Math.round(data.payload.height) + 'px';
-                            break;
-                        case 'PIGI_INITIALIZED':
-                            this.iframeWindow = iframeElement.contentWindow;
                             if (fastlane.isEnabled()) {
                                 this.iframeWindow.postMessage({ actionType: 'PIGI_HIDE_CREDIT_CARD_OPTION' }, '*');
                             }
+                            break;
+                        case 'PIGI_INITIALIZED':
+                            this.iframeWindow = iframeElement.contentWindow;
                             if (data.payload && data.payload.height && iframeElement) {
                                 iframeElement.height = Math.round(data.payload.height) + 'px';
                             }