Merge pull request #2841 from bigcommerce/feat/google-pay-spinner

feat(payment): Added loadingIndicator to the google-pay-payment-strategy

Author: bc-dronov

packages/google-pay-integration/src/google-pay-payment-initialize-options.ts

@@ -38,6 +38,11 @@
  * ```
  */
 export default interface GooglePayPaymentInitializeOptions {
+    /**
+     * A container for loading spinner.
+     */
+    loadingContainerId?: string;
+
     /**
      * This walletButton is used to set an event listener, provide an element ID if you want
      * users to be able to launch the GooglePay wallet modal by clicking on a button.

packages/google-pay-integration/src/google-pay-payment-strategy.spec.ts

@@ -36,6 +36,16 @@ import {
     NewTransactionInfo,
 } from './types';
 
+const LoadingShow = jest.fn();
+const LoadingHide = jest.fn();
+
+jest.mock('@bigcommerce/checkout-sdk/ui', () => ({
+    LoadingIndicator: jest.fn().mockImplementation(() => ({
+        show: LoadingShow,
+        hide: LoadingHide,
+    })),
+}));
+
 describe('GooglePayPaymentStrategy', () => {
     const BUTTON_ID = 'my_awesome_google_pay_button';
 
@@ -99,6 +109,7 @@ describe('GooglePayPaymentStrategy', () => {
         options = {
             methodId: 'googlepayworldpayaccess',
             googlepayworldpayaccess: {
+                loadingContainerId: 'id',
                 walletButton: BUTTON_ID,
                 onError: jest.fn(),
                 onPaymentSelect: jest.fn(),
@@ -333,6 +344,7 @@ describe('GooglePayPaymentStrategy', () => {
 
             await new Promise((resolve) => process.nextTick(resolve));
 
+            expect(LoadingHide).toHaveBeenCalled();
             expect(rejectedInitializeWidgetMock).toHaveBeenCalledTimes(1);
             expect(options.googlepayworldpayaccess?.onError).toHaveBeenCalled();
         });
@@ -371,6 +383,7 @@ describe('GooglePayPaymentStrategy', () => {
 
                 expect(paymentIntegrationService.loadCheckout).toHaveBeenCalled();
                 expect(initializeWidgetMock).toHaveBeenCalledTimes(1);
+                expect(LoadingShow).toHaveBeenCalled();
             });
 
             it('should return updated transactionInfo', async () => {

packages/google-pay-integration/src/google-pay-payment-strategy.ts

@@ -16,6 +16,7 @@ import {
     PaymentMethodFailedError,
     PaymentStrategy,
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
+import { DEFAULT_CONTAINER_STYLES, LoadingIndicator } from '@bigcommerce/checkout-sdk/ui';
 
 import GooglePayPaymentInitializeOptions, {
     WithGooglePayPaymentInitializeOptions,
@@ -35,14 +36,20 @@ import {
 } from './types';
 
 export default class GooglePayPaymentStrategy implements PaymentStrategy {
+    private _loadingIndicator: LoadingIndicator;
+    private _loadingIndicatorContainer?: string;
     private _paymentButton?: HTMLElement;
     private _clickListener?: (event: MouseEvent) => unknown;
     private _methodId?: keyof WithGooglePayPaymentInitializeOptions;
 
     constructor(
         protected _paymentIntegrationService: PaymentIntegrationService,
         protected _googlePayPaymentProcessor: GooglePayPaymentProcessor,
-    ) {}
+    ) {
+        this._loadingIndicator = new LoadingIndicator({
+            containerStyles: DEFAULT_CONTAINER_STYLES,
+        });
+    }
 
     async initialize(
         options?: PaymentInitializeOptions & WithGooglePayPaymentInitializeOptions,
@@ -61,7 +68,9 @@ export default class GooglePayPaymentStrategy implements PaymentStrategy {
             throw new InvalidArgumentError('Unable to proceed without valid options.');
         }
 
-        const { walletButton, ...callbacks } = googlePayOptions;
+        const { walletButton, loadingContainerId, ...callbacks } = googlePayOptions;
+
+        this._loadingIndicatorContainer = loadingContainerId;
 
         await this._paymentIntegrationService.loadPaymentMethod(this._getMethodId());
 
@@ -147,6 +156,8 @@ export default class GooglePayPaymentStrategy implements PaymentStrategy {
             } catch (error) {
                 let err: unknown = error;
 
+                this._toggleLoadingIndicator(false);
+
                 if (isGooglePayErrorObject(error)) {
                     if (error.statusCode === 'CANCELED') {
                         throw new PaymentMethodCancelledError();
@@ -170,6 +181,9 @@ export default class GooglePayPaymentStrategy implements PaymentStrategy {
 
     protected async _interactWithPaymentSheet(): Promise<void> {
         const response = await this._googlePayPaymentProcessor.showPaymentSheet();
+
+        this._toggleLoadingIndicator(true);
+
         const billingAddress =
             this._googlePayPaymentProcessor.mapToBillingAddressRequestBody(response);
 
@@ -181,6 +195,7 @@ export default class GooglePayPaymentStrategy implements PaymentStrategy {
 
         await this._paymentIntegrationService.loadCheckout();
         await this._paymentIntegrationService.loadPaymentMethod(this._getMethodId());
+        this._toggleLoadingIndicator(false);
     }
 
     protected _getMethodId(): keyof WithGooglePayPaymentInitializeOptions {
@@ -298,4 +313,12 @@ export default class GooglePayPaymentStrategy implements PaymentStrategy {
             },
         };
     }
+
+    private _toggleLoadingIndicator(isLoading: boolean): void {
+        if (isLoading && this._loadingIndicatorContainer) {
+            this._loadingIndicator.show(this._loadingIndicatorContainer);
+        } else {
+            this._loadingIndicator.hide();
+        }
+    }
 }

packages/ui/src/index.ts

@@ -1,2 +1,6 @@
 export { Overlay } from './overlay';
-export { LoadingIndicator, LoadingIndicatorStyles } from './loading-indicator';
+export {
+    LoadingIndicator,
+    LoadingIndicatorStyles,
+    DEFAULT_CONTAINER_STYLES,
+} from './loading-indicator';

packages/ui/src/loading-indicator/index.ts

@@ -1,2 +1,3 @@
 export { default as LoadingIndicator } from './loading-indicator';
+export { DEFAULT_CONTAINER_STYLES } from './loading-indicator';
 export { LoadingIndicatorStyles } from './loading-indicator-styles';

packages/ui/src/loading-indicator/loading-indicator.ts

@@ -9,6 +9,12 @@ const DEFAULT_STYLES: LoadingIndicatorStyles = {
     backgroundColor: '#ffffff',
 };
 
+export const DEFAULT_CONTAINER_STYLES = {
+    position: 'fixed',
+    'background-color': 'rgba(0, 0, 0, 0.4)',
+    'z-index': '1000',
+};
+
 const ROTATION_ANIMATION = 'embedded-checkout-loading-indicator-rotation';
 
 interface LoadingIndicatorOptions {