feat(payment): Stripe Shipping Form component migrated to functional

Author: bc-dronov

packages/core/src/app/shipping/stripeUPE/StripeShipping.tsx

@@ -8,7 +8,6 @@ import { useCheckout } from '@bigcommerce/checkout/payment-integration-api';
 import { AddressFormSkeleton } from '@bigcommerce/checkout/ui';
 
 import type CheckoutStepStatus from '../../checkout/CheckoutStepStatus';
-import { EMPTY_ARRAY } from '../../common/utility';
 import ShippingHeader from '../ShippingHeader';
 
 import StripeShippingForm, { type SingleShippingFormValues } from './StripeShippingForm';
@@ -48,25 +47,17 @@ const StripeShipping = ({
   isShippingMethodLoading,
   ...shippingFormProps
 }: StripeShippingProps): ReactNode => {
-  const { checkoutService, checkoutState } = useCheckout();
+  const { checkoutState } = useCheckout();
 
   const {
     data: {
       getCheckout,
       getCustomer,
-      getConsignments,
       getShippingAddressFields,
-      getShippingCountries,
     },
   } = checkoutState;
   const checkout = getCheckout();
-  const consignments = getConsignments() || [];
   const customer = getCustomer();
-
-  const initialize = checkoutService.initializeShipping;
-  const deinitialize = checkoutService.deinitializeShipping;
-
-  const countries = getShippingCountries() || EMPTY_ARRAY;
   const getFields = getShippingAddressFields;
 
   const [isStripeLoading, setIsStripeLoading] = useState(true);
@@ -101,13 +92,9 @@ const StripeShipping = ({
           shouldShowMultiShipping={shouldShowMultiShipping}
         />
         <StripeShippingForm
-          consignments={consignments}
-          countries={countries}
           customerMessage={customerMessage}
           getFields={getFields}
           {...shippingFormProps}
-          deinitialize={deinitialize}
-          initialize={initialize}
           isBillingSameAsShipping={isBillingSameAsShipping}
           isLoading={isLoading}
           isMultiShippingMode={isMultiShippingMode}

packages/core/src/app/shipping/stripeUPE/StripeShippingForm.test.tsx

@@ -1,4 +1,8 @@
-import { createCheckoutService, type StripeShippingEvent } from '@bigcommerce/checkout-sdk';
+import {
+  type CheckoutSelectors,
+  createCheckoutService,
+  type StripeShippingEvent,
+} from '@bigcommerce/checkout-sdk';
 import userEvent from '@testing-library/user-event';
 import React, { act } from 'react';
 
@@ -14,6 +18,8 @@ import { getStoreConfig } from '../../config/config.mock';
 import { getShippingAddress } from '../shipping-addresses.mock';
 
 import StripeShippingForm from './StripeShippingForm';
+import { getCustomer } from '../../customer/customers.mock';
+import { getCheckout } from '../../checkout/checkouts.mock';
 
 let hasSelectedShippingOptionsReturn = false;
 
@@ -28,6 +34,10 @@ describe('StripeShippingForm', () => {
     const errorLogger = new ConsoleErrorLogger();
     const { customFields, ...rest } = getShippingAddress();
     const localeContext = createLocaleContext(getStoreConfig());
+    let checkoutState: CheckoutSelectors;
+
+    const initialize = jest.fn();
+    checkoutService.initializeShipping = initialize;
 
     const defaultProps = {
         isShippingMethodLoading: false,
@@ -42,7 +52,6 @@ describe('StripeShippingForm', () => {
         isBillingSameAsShipping: false,
         isInitialValueLoaded: false,
         isMultiShippingMode: false,
-        countries: [],
         countriesWithAutocomplete: [],
         shippingAddress: rest,
         customerMessage: '',
@@ -55,9 +64,7 @@ describe('StripeShippingForm', () => {
         onSubmit: jest.fn(),
         getFields: jest.fn(() => addressFormFields),
         onUnhandledError: jest.fn(),
-        deinitialize: jest.fn(),
         signOut: jest.fn(),
-        initialize: jest.fn(),
         updateAddress: jest.fn(),
         deleteConsignments: jest.fn(),
     };
@@ -72,14 +79,20 @@ describe('StripeShippingForm', () => {
      </CheckoutProvider>
      );
 
+   beforeEach(() => {
+     checkoutState = checkoutService.getState();
+     jest.spyOn(checkoutState.data, 'getCustomer').mockReturnValue(getCustomer());
+     jest.spyOn(checkoutState.data, 'getCheckout').mockReturnValue(getCheckout());
+   })
+
    afterEach(() => {
        jest.clearAllMocks();
    })
 
     it('renders form with a correct parameters', async () => {
         const { container } = renderContainer({ isLoading: false });
 
-        expect(defaultProps.initialize).toHaveBeenCalled();
+        expect(initialize).toHaveBeenCalled();
         expect(defaultProps.getFields).toHaveBeenCalledTimes(2);
         expect(defaultProps.getFields).toHaveBeenCalledWith("US");
         // eslint-disable-next-line testing-library/no-node-access,testing-library/no-container
@@ -159,7 +172,7 @@ describe('StripeShippingForm', () => {
         renderContainer({ isLoading: false });
 
         await act(async () => {
-            const { stripeupe } = defaultProps.initialize.mock.calls[0][0];
+            const { stripeupe } = initialize.mock.calls[0][0];
 
             await stripeupe.onChangeShipping(shippingChangeEvent);
         });
@@ -210,7 +223,7 @@ describe('StripeShippingForm', () => {
         renderContainer({ isLoading: false });
 
         await act(async () => {
-            const { stripeupe } = defaultProps.initialize.mock.calls[0][0];
+            const { stripeupe } = initialize.mock.calls[0][0];
 
             await stripeupe.onChangeShipping(shippingChangeEvent);
         });