feat(payment): PAYPAL-5097 created BraintreeMessages class and added …

…Braintree BNPL Styles implementation
bigcommerce · Feb 14, 2025 · b680b8c · b680b8c
1 parent 7364957
commit b680b8c
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 152 deletions.
diff --git a/...egration/src/braintree-paypal-credit/braintree-paypal-credit-button-initialize-options.ts b/...egration/src/braintree-paypal-credit/braintree-paypal-credit-button-initialize-options.ts
@@ -18,6 +18,11 @@ export default interface BraintreePaypalCreditButtonInitializeOptions {
      */
     currencyCode?: string;
 
+    /**
+     * The ID of a container which the messaging should be inserted.
+     */
+    messagingContainerId?: string;
+
     /**
      * @internal
      * This is an internal property and therefore subject to change. DO NOT USE.

diff --git a/...e-integration/src/braintree-paypal-credit/braintree-paypal-credit-button-strategy.spec.ts b/...e-integration/src/braintree-paypal-credit/braintree-paypal-credit-button-strategy.spec.ts
@@ -7,6 +7,7 @@ import {
     BraintreeError,
     BraintreeHostWindow,
     BraintreeIntegrationService,
+    BraintreeMessages,
     BraintreePaypalCheckout,
     BraintreePaypalCheckoutCreator,
     BraintreeScriptLoader,
@@ -50,6 +51,7 @@ describe('BraintreePaypalCreditButtonStrategy', () => {
     let dataCollector: BraintreeDataCollector;
     let eventEmitter: EventEmitter;
     let braintreeIntegrationService: BraintreeIntegrationService;
+    let braintreeMessages: BraintreeMessages;
     let braintreePaypalCheckoutMock: BraintreePaypalCheckout;
     let braintreePaypalCheckoutCreatorMock: BraintreePaypalCheckoutCreator;
     let braintreeScriptLoader: BraintreeScriptLoader;
@@ -160,11 +162,13 @@ describe('BraintreePaypalCreditButtonStrategy', () => {
             braintreeScriptLoader,
             window,
         );
+        braintreeMessages = new BraintreeMessages(paymentIntegrationService);
 
         strategy = new BraintreePaypalCreditButtonStrategy(
             paymentIntegrationService,
             formPoster,
             braintreeIntegrationService,
+            braintreeMessages,
             window,
         );
 
@@ -186,6 +190,7 @@ describe('BraintreePaypalCreditButtonStrategy', () => {
             dataCollector,
         );
         jest.spyOn(braintreeIntegrationService, 'removeElement').mockImplementation(jest.fn());
+        jest.spyOn(braintreeMessages, 'render').mockImplementation(jest.fn());
         jest.spyOn(braintreeScriptLoader, 'loadPaypalCheckout').mockResolvedValue(
             braintreePaypalCheckoutCreatorMock,
         );

diff --git a/...intree-integration/src/braintree-paypal-credit/braintree-paypal-credit-button-strategy.ts b/...intree-integration/src/braintree-paypal-credit/braintree-paypal-credit-button-strategy.ts
@@ -5,6 +5,7 @@ import {
     BraintreeHostWindow,
     BraintreeInitializationData,
     BraintreeIntegrationService,
+    BraintreeMessages,
     BraintreePaypalCheckout,
     BraintreePaypalSdkCreatorConfig,
     BraintreeTokenizePayload,
@@ -39,6 +40,7 @@ export default class BraintreePaypalCreditButtonStrategy implements CheckoutButt
         private paymentIntegrationService: PaymentIntegrationService,
         private formPoster: FormPoster,
         private braintreeIntegrationService: BraintreeIntegrationService,
+        private braintreeMessages: BraintreeMessages,
         private braintreeHostWindow: BraintreeHostWindow,
     ) {}
 
@@ -99,6 +101,14 @@ export default class BraintreePaypalCreditButtonStrategy implements CheckoutButt
         const paypalCheckoutSuccessCallback = (
             braintreePaypalCheckout: BraintreePaypalCheckout,
         ) => {
+            if (braintreepaypalcredit.messagingContainerId) {
+                this.braintreeMessages.render(
+                    methodId,
+                    braintreepaypalcredit.messagingContainerId,
+                    'cart',
+                );
+            }
+
             this.renderPayPalButton(
                 braintreePaypalCheckout,
                 braintreepaypalcredit,

diff --git a/...integration/src/braintree-paypal-credit/create-braintree-paypal-credit-button-strategy.ts b/...integration/src/braintree-paypal-credit/create-braintree-paypal-credit-button-strategy.ts
@@ -4,6 +4,7 @@ import { getScriptLoader } from '@bigcommerce/script-loader';
 import {
     BraintreeHostWindow,
     BraintreeIntegrationService,
+    BraintreeMessages,
     BraintreeScriptLoader,
 } from '@bigcommerce/checkout-sdk/braintree-utils';
 import {
@@ -21,11 +22,13 @@ const createBraintreePaypalCreditButtonStrategy: CheckoutButtonStrategyFactory<
         new BraintreeScriptLoader(getScriptLoader(), braintreeHostWindow),
         braintreeHostWindow,
     );
+    const braintreeMessages = new BraintreeMessages(paymentIntegrationService);
 
     return new BraintreePaypalCreditButtonStrategy(
         paymentIntegrationService,
         createFormPoster(),
         braintreeIntegrationService,
+        braintreeMessages,
         braintreeHostWindow,
     );
 };

diff --git a/.../braintree-integration/src/braintree-paypal/braintree-paypal-button-initialize-options.ts b/.../braintree-integration/src/braintree-paypal/braintree-paypal-button-initialize-options.ts
@@ -18,11 +18,6 @@ export default interface BraintreePaypalButtonInitializeOptions {
      */
     currencyCode?: string;
 
-    /**
-     * The ID of a container which the messaging should be inserted.
-     */
-    messagingContainerId?: string;
-
     /**
      * @internal
      * This is an internal property and therefore subject to change. DO NOT USE.

diff --git a/packages/braintree-integration/src/braintree-paypal/braintree-paypal-button-strategy.spec.ts b/packages/braintree-integration/src/braintree-paypal/braintree-paypal-button-strategy.spec.ts
@@ -57,15 +57,12 @@ describe('BraintreePaypalButtonStrategy', () => {
     let paymentIntegrationService: PaymentIntegrationService;
     let paymentMethod: PaymentMethod;
     let paypalButtonElement: HTMLDivElement;
-    let paypalMessageElement: HTMLDivElement;
     let paypalSdkMock: PaypalSDK;
     let strategy: BraintreePaypalButtonStrategy;
 
     const defaultButtonContainerId = 'braintree-paypal-button-mock-id';
-    const defaultMessageContainerId = 'braintree-paypal-message-mock-id';
 
     const braintreePaypalOptions: BraintreePaypalButtonInitializeOptions = {
-        messagingContainerId: defaultMessageContainerId, // only available on cart page
         shouldProcessPayment: false,
         style: { height: 45 },
         onAuthorizeError: jest.fn(),
@@ -157,10 +154,6 @@ describe('BraintreePaypalButtonStrategy', () => {
         paypalButtonElement.id = defaultButtonContainerId;
         document.body.appendChild(paypalButtonElement);
 
-        paypalMessageElement = document.createElement('div');
-        paypalMessageElement.id = defaultMessageContainerId;
-        document.body.appendChild(paypalMessageElement);
-
         formPoster = createFormPoster();
         paymentIntegrationService = new PaymentIntegrationServiceMock();
         braintreeScriptLoader = new BraintreeScriptLoader(getScriptLoader(), window);
@@ -222,10 +215,6 @@ describe('BraintreePaypalButtonStrategy', () => {
                 render: jest.fn(),
             };
         });
-
-        jest.spyOn(paypalSdkMock, 'Messages').mockImplementation(() => ({
-            render: jest.fn(),
-        }));
     });
 
     afterEach(() => {
@@ -236,10 +225,6 @@ describe('BraintreePaypalButtonStrategy', () => {
         if (document.getElementById(defaultButtonContainerId)) {
             document.body.removeChild(paypalButtonElement);
         }
-
-        if (document.getElementById(defaultMessageContainerId)) {
-            document.body.removeChild(paypalMessageElement);
-        }
     });
 
     it('creates an instance of the braintree paypal button button strategy', () => {
@@ -436,15 +421,6 @@ describe('BraintreePaypalButtonStrategy', () => {
             );
         });
 
-        it('renders Braintree PayPal message', async () => {
-            await strategy.initialize(initializationOptions);
-
-            expect(paypalSdkMock.Messages).toHaveBeenCalledWith({
-                amount: cart.cartAmount,
-                placement: 'cart',
-            });
-        });
-
         it('renders Braintree PayPal button', async () => {
             await strategy.initialize(initializationOptions);
 
@@ -460,14 +436,11 @@ describe('BraintreePaypalButtonStrategy', () => {
             });
         });
 
-        it('removes Braintree PayPal button and message containers when paypal is not available in window', async () => {
+        it('removes Braintree PayPal button when paypal is not available in window', async () => {
             delete (window as BraintreeHostWindow).paypal;
 
             await strategy.initialize(initializationOptions);
 
-            expect(braintreeIntegrationService.removeElement).toHaveBeenCalledWith(
-                defaultMessageContainerId,
-            );
             expect(braintreeIntegrationService.removeElement).toHaveBeenCalledWith(
                 defaultButtonContainerId,
             );

diff --git a/packages/braintree-integration/src/braintree-paypal/braintree-paypal-button-strategy.ts b/packages/braintree-integration/src/braintree-paypal/braintree-paypal-button-strategy.ts
@@ -98,7 +98,6 @@ export default class BraintreePaypalButtonStrategy implements CheckoutButtonStra
         const paypalCheckoutSuccessCallback = (
             braintreePaypalCheckout: BraintreePaypalCheckout,
         ) => {
-            this.renderPayPalMessages(braintreepaypal.messagingContainerId);
             this.renderPayPalButton(
                 braintreePaypalCheckout,
                 braintreepaypal,
@@ -122,26 +121,6 @@ export default class BraintreePaypalButtonStrategy implements CheckoutButtonStra
         await this.braintreeIntegrationService.teardown();
     }
 
-    private renderPayPalMessages(messagingContainerId?: string): void {
-        const isMessageContainerAvailable =
-            messagingContainerId && Boolean(document.getElementById(messagingContainerId));
-        const { paypal } = this.braintreeHostWindow;
-
-        if (isMessageContainerAvailable && paypal) {
-            const state = this.paymentIntegrationService.getState();
-            const amount = state.getCartOrThrow().cartAmount;
-
-            const paypalMessagesRender = paypal.Messages({
-                amount,
-                placement: 'cart',
-            });
-
-            paypalMessagesRender.render(`#${messagingContainerId}`);
-        } else {
-            this.braintreeIntegrationService.removeElement(messagingContainerId);
-        }
-    }
-
     private renderPayPalButton(
         braintreePaypalCheckout: BraintreePaypalCheckout,
         braintreepaypal: BraintreePaypalButtonInitializeOptions,