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

Author: bc-dronov

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

@@ -1,28 +1,27 @@
 import {
-    type Address,
-    type CheckoutParams,
-    type CheckoutSelectors,
-    type Consignment,
-    type Country,
-    type FormField,
-    type RequestOptions,
-    type ShippingInitializeOptions,
-    type ShippingRequestOptions,
+  type Address,
+  type CheckoutParams,
+  type CheckoutSelectors,
+  type Consignment,
+  type Country,
+  type FormField,
+  type RequestOptions,
+  type ShippingInitializeOptions,
+  type ShippingRequestOptions,
 } from '@bigcommerce/checkout-sdk';
 import { type FormikProps } from 'formik';
 import { noop } from 'lodash';
-import React, { PureComponent, type ReactNode } from 'react';
+import React, { useCallback, useState } from 'react';
 import { lazy, object } from 'yup';
-
 import { withLanguage, type WithLanguageProps } from '@bigcommerce/checkout/locale';
-import { FormContext } from '@bigcommerce/checkout/ui';
 
 import {
-    type AddressFormValues,
-    getAddressFormFieldsValidationSchema,
-    getTranslateAddressError,
-    mapAddressToFormValues,
+  type AddressFormValues,
+  getAddressFormFieldsValidationSchema,
+  getTranslateAddressError,
+  mapAddressToFormValues,
 } from '../../address';
+
 import type CheckoutStepStatus from '../../checkout/CheckoutStepStatus';
 import { withFormikExtended } from '../../common/form';
 import { getCustomFormFieldsValidationSchema } from '../../formFields';
@@ -34,190 +33,169 @@ import ShippingFormFooter from '../ShippingFormFooter';
 import StripeShippingAddress from './StripeShippingAddress';
 
 export interface SingleShippingFormProps {
-    isBillingSameAsShipping: boolean;
-    cartHasChanged: boolean;
-    consignments: Consignment[];
-    countries: Country[];
-    customerMessage: string;
-    isLoading: boolean;
-    isShippingMethodLoading: boolean;
-    isMultiShippingMode: boolean;
-    methodId?: string;
-    shippingAddress?: Address;
-    shouldShowOrderComments: boolean;
-    step: CheckoutStepStatus;
-    isInitialValueLoaded: boolean;
-    isStripeLoading?(): void;
-    isStripeAutoStep?(): void;
-    deinitialize(options: ShippingRequestOptions): Promise<CheckoutSelectors>;
-    getFields(countryCode?: string): FormField[];
-    initialize(options: ShippingInitializeOptions): Promise<CheckoutSelectors>;
-    onSubmit(values: SingleShippingFormValues): void;
-    onUnhandledError?(error: Error): void;
-    updateAddress(
-        address: Partial<Address>,
-        options?: RequestOptions<CheckoutParams>,
-    ): Promise<CheckoutSelectors>;
+  isBillingSameAsShipping: boolean;
+  cartHasChanged: boolean;
+  consignments: Consignment[];
+  countries: Country[];
+  customerMessage: string;
+  isLoading: boolean;
+  isShippingMethodLoading: boolean;
+  isMultiShippingMode: boolean;
+  methodId?: string;
+  shippingAddress?: Address;
+  shouldShowOrderComments: boolean;
+  step: CheckoutStepStatus;
+  isInitialValueLoaded: boolean;
+  isStripeLoading?(): void;
+  isStripeAutoStep?(): void;
+  deinitialize(options: ShippingRequestOptions): Promise<CheckoutSelectors>;
+  getFields(countryCode?: string): FormField[];
+  initialize(options: ShippingInitializeOptions): Promise<CheckoutSelectors>;
+  onSubmit(values: SingleShippingFormValues): void;
+  onUnhandledError?(error: Error): void;
+  updateAddress(
+    address: Partial<Address>,
+    options?: RequestOptions<CheckoutParams>,
+  ): Promise<CheckoutSelectors>;
 }
 
 export interface SingleShippingFormValues {
-    billingSameAsShipping: boolean;
-    shippingAddress?: AddressFormValues;
-    orderComment: string;
-}
-
-interface SingleShippingFormState {
-    isUpdatingShippingData: boolean;
+  billingSameAsShipping: boolean;
+  shippingAddress?: AddressFormValues;
+  orderComment: string;
 }
 
-class StripeShippingForm extends PureComponent<
-    SingleShippingFormProps & WithLanguageProps & FormikProps<SingleShippingFormValues>
-    > {
-    static contextType = FormContext;
-
-    state: SingleShippingFormState = {
-        isUpdatingShippingData: false,
-    };
-
-    render(): ReactNode {
-        const {
-            cartHasChanged,
-            isInitialValueLoaded,
-            isLoading,
-            countries,
-            isStripeLoading,
-            shippingAddress,
-            consignments,
-            shouldShowOrderComments,
-            initialize,
-            isValid,
-            deinitialize,
-            onSubmit,
-            isStripeAutoStep,
-            step,
-            isShippingMethodLoading,
-        } = this.props;
-
-        const { isUpdatingShippingData } = this.state;
-
-        return (
-            <Form autoComplete="on">
-                <Fieldset>
-                    <StripeShippingAddress
-                        consignments={consignments}
-                        countries={countries}
-                        deinitialize={deinitialize}
-                        initialize={initialize}
-                        isShippingMethodLoading={isShippingMethodLoading}
-                        isStripeAutoStep={isStripeAutoStep}
-                        isStripeLoading={isStripeLoading}
-                        onAddressSelect={this.handleAddressSelect}
-                        onSubmit={onSubmit}
-                        shippingAddress={shippingAddress}
-                        shouldDisableSubmit={this.shouldDisableSubmit()}
-                        step={step}
-                    />
-                    <div className="form-body">
-                        <BillingSameAsShippingField />
-                    </div>
-                </Fieldset>
-
-                <ShippingFormFooter
-                    cartHasChanged={cartHasChanged}
-                    isInitialValueLoaded={isInitialValueLoaded}
-                    isLoading={isLoading || isUpdatingShippingData}
-                    isMultiShippingMode={false}
-                    shouldDisableSubmit={this.shouldDisableSubmit()}
-                    shouldShowOrderComments={shouldShowOrderComments}
-                    shouldShowShippingOptions={isValid}
-                />
-            </Form>
-        );
+const StripeShippingForm: React.FC<SingleShippingFormProps & WithLanguageProps & FormikProps<SingleShippingFormValues>> = (props) => {
+  const [isUpdatingShippingData] = useState(false);
+
+  const {
+    cartHasChanged,
+    isInitialValueLoaded,
+    isLoading,
+    countries,
+    isStripeLoading,
+    shippingAddress,
+    consignments,
+    shouldShowOrderComments,
+    initialize,
+    isValid,
+    deinitialize,
+    onSubmit,
+    isStripeAutoStep,
+    step,
+    isShippingMethodLoading,
+    updateAddress,
+    onUnhandledError = noop,
+    values,
+    setValues,
+    getFields,
+  } = props;
+
+  const shouldDisableSubmit = () => {
+    if (!isValid) {
+      return false;
     }
 
-    private shouldDisableSubmit: () => boolean = () => {
-        const { isLoading, consignments, isValid } = this.props;
-
-        const { isUpdatingShippingData } = this.state;
-
-        if (!isValid) {
-            return false;
-        }
-
-        return isLoading || isUpdatingShippingData || !hasSelectedShippingOptions(consignments);
-    };
-
-    private handleAddressSelect: (address: Address) => void = async (address) => {
-        const { updateAddress, onUnhandledError = noop, values, setValues } = this.props;
-
-        try {
-            await updateAddress(address);
-
-            setValues({
-                ...values,
-                shippingAddress: mapAddressToFormValues(
-                    this.getFields(address.countryCode),
-                    address,
-                ),
-            });
-        } catch (error) {
-            onUnhandledError(error);
-        }
-    };
-
-    private getFields(countryCode: string | undefined): FormField[] {
-        const { getFields } = this.props;
-
-        return getFields(countryCode);
+    return isLoading || isUpdatingShippingData || !hasSelectedShippingOptions(consignments);
+  };
+
+  const handleAddressSelect = useCallback(async (address: Address) => {
+    try {
+      await updateAddress(address);
+
+      setValues({
+        ...values,
+        shippingAddress: mapAddressToFormValues(
+          getFields(address.countryCode),
+          address,
+        ),
+      });
+    } catch (error) {
+      onUnhandledError(error);
     }
-}
-
+  }, [values, setValues, onUnhandledError]);
+
+  return (
+    <Form autoComplete="on">
+      <Fieldset>
+        <StripeShippingAddress
+          consignments={consignments}
+          countries={countries}
+          deinitialize={deinitialize}
+          initialize={initialize}
+          isShippingMethodLoading={isShippingMethodLoading}
+          isStripeAutoStep={isStripeAutoStep}
+          isStripeLoading={isStripeLoading}
+          onAddressSelect={handleAddressSelect}
+          onSubmit={onSubmit}
+          shippingAddress={shippingAddress}
+          shouldDisableSubmit={shouldDisableSubmit()}
+          step={step}
+        />
+
+        <div className="form-body">
+          <BillingSameAsShippingField />
+        </div>
+      </Fieldset>
+
+      <ShippingFormFooter
+        cartHasChanged={cartHasChanged}
+        isInitialValueLoaded={isInitialValueLoaded}
+        isLoading={isLoading || isUpdatingShippingData}
+        isMultiShippingMode={false}
+        shouldDisableSubmit={shouldDisableSubmit()}
+        shouldShowOrderComments={shouldShowOrderComments}
+        shouldShowShippingOptions={isValid}
+      />
+    </Form>
+  );
+};
 export default withLanguage(
-    withFormikExtended<SingleShippingFormProps & WithLanguageProps, SingleShippingFormValues>({
-        handleSubmit: (values, { props: { onSubmit } }) => {
-            onSubmit(values);
-        },
-        mapPropsToValues: ({
-                               getFields,
-                               shippingAddress,
-                               isBillingSameAsShipping,
-                               customerMessage,
-                           }) => ({
-            billingSameAsShipping: isBillingSameAsShipping,
-            orderComment: customerMessage,
-            shippingAddress: mapAddressToFormValues(
-                getFields(shippingAddress && shippingAddress.countryCode),
-                shippingAddress,
-            ),
-        }),
-        isInitialValid: ({ shippingAddress, getFields, language }) =>
-            !!shippingAddress &&
+  withFormikExtended<SingleShippingFormProps & WithLanguageProps, SingleShippingFormValues>({
+    handleSubmit: (values, { props: { onSubmit } }) => {
+      onSubmit(values);
+    },
+    mapPropsToValues: ({
+         getFields,
+         shippingAddress,
+         isBillingSameAsShipping,
+         customerMessage,
+       }) => ({
+      billingSameAsShipping: isBillingSameAsShipping,
+      orderComment: customerMessage,
+      shippingAddress: mapAddressToFormValues(
+        getFields(shippingAddress && shippingAddress.countryCode),
+        shippingAddress,
+      ),
+    }),
+    isInitialValid: ({ shippingAddress, getFields, language }) =>
+      !!shippingAddress &&
+      getAddressFormFieldsValidationSchema({
+        language,
+        formFields: getFields(shippingAddress.countryCode),
+      }).isValidSync(shippingAddress),
+    validationSchema: ({
+         language,
+         getFields,
+         methodId,
+       }: SingleShippingFormProps & WithLanguageProps) =>
+      methodId
+        ? object({
+          shippingAddress: lazy<Partial<AddressFormValues>>((formValues) =>
+            getCustomFormFieldsValidationSchema({
+              translate: getTranslateAddressError(language),
+              formFields: getFields(formValues && formValues.countryCode),
+            }),
+          ),
+        })
+        : object({
+          shippingAddress: lazy<Partial<AddressFormValues>>((formValues) =>
             getAddressFormFieldsValidationSchema({
-                language,
-                formFields: getFields(shippingAddress.countryCode),
-            }).isValidSync(shippingAddress),
-        validationSchema: ({
-                               language,
-                               getFields,
-                               methodId,
-                           }: SingleShippingFormProps & WithLanguageProps) =>
-            methodId
-                ? object({
-                    shippingAddress: lazy<Partial<AddressFormValues>>((formValues) =>
-                        getCustomFormFieldsValidationSchema({
-                            translate: getTranslateAddressError(language),
-                            formFields: getFields(formValues && formValues.countryCode),
-                        }),
-                    ),
-                })
-                : object({
-                    shippingAddress: lazy<Partial<AddressFormValues>>((formValues) =>
-                        getAddressFormFieldsValidationSchema({
-                            language,
-                            formFields: getFields(formValues && formValues.countryCode),
-                        }),
-                    ),
-                }),
-        enableReinitialize: false,
-    })(StripeShippingForm),
+              language,
+              formFields: getFields(formValues && formValues.countryCode),
+            }),
+          ),
+        }),
+    enableReinitialize: false,
+  })(StripeShippingForm),
 );