refactor(checkout): CHECKOUT-9386 Convert ManageInstrumentsModal (#2554)

* refactor(checkout): CHECKOUT-9386 Refactor ManageInstrumentsModal

* Fix test

* Update useCallback

Author: bc-peng

packages/instrument-utils/src/storedInstrument/ManageInstrumentsModal/ManageInstrumentsModal.test.tsx

@@ -55,16 +55,6 @@ describe('ManageInstrumentsModal', () => {
         );
     });
 
-    it('throws an error if not wrapped in checkout context', () => {
-        expect(() =>
-            render(
-                <LocaleContext.Provider value={localeContext}>
-                    <ManageInstrumentsModal {...defaultProps} />
-                </LocaleContext.Provider>,
-            ),
-        ).toThrow('Need to wrap in checkout context');
-    });
-
     it('renders list of card instruments in table format', () => {
         render(
             <ManageInstrumentsModalTest

packages/instrument-utils/src/storedInstrument/ManageInstrumentsModal/ManageInstrumentsModal.tsx

@@ -1,9 +1,9 @@
 import { type PaymentInstrument } from '@bigcommerce/checkout-sdk';
 import { noop } from 'lodash';
-import React, { Component, type ReactNode } from 'react';
+import React, { type ReactElement, useState } from 'react';
 
 import { TranslatedString } from '@bigcommerce/checkout/locale';
-import { CheckoutContext } from '@bigcommerce/checkout/payment-integration-api';
+import { useCheckout } from '@bigcommerce/checkout/payment-integration-api';
 import { Button, ButtonSize, ButtonVariant, Modal, ModalHeader } from '@bigcommerce/checkout/ui';
 
 import {
@@ -26,71 +26,64 @@ export interface ManageInstrumentsModalProps {
     onRequestClose?(): void;
 }
 
-export interface ManageInstrumentsModalState {
-    isConfirmingDelete: boolean;
-    selectedInstrumentId?: string;
-}
-
-class ManageInstrumentsModal extends Component<
-    ManageInstrumentsModalProps,
-    ManageInstrumentsModalState
-> {
-    static contextType = CheckoutContext;
-    declare context: React.ContextType<typeof CheckoutContext>;
-
-    state: ManageInstrumentsModalState = {
-        isConfirmingDelete: false,
+const ManageInstrumentsModal = ({
+    isOpen,
+    instruments,
+    onAfterOpen,
+    onDeleteInstrument = noop,
+    onDeleteInstrumentError = noop,
+    onRequestClose,
+}: ManageInstrumentsModalProps): ReactElement => {
+    const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
+    const [selectedInstrumentId, setSelectedInstrumentId] = useState<string | undefined>();
+
+    const {
+        checkoutState: {
+            errors: { getDeleteInstrumentError },
+            statuses: { isDeletingInstrument, isLoadingInstruments },
+        },
+        checkoutService: { deleteInstrument, clearError },
+    } = useCheckout();
+
+    const deleteInstrumentError = getDeleteInstrumentError();
+
+    const handleAfterOpen = (): void => {
+        setIsConfirmingDelete(false);
+        onAfterOpen?.();
     };
 
-    render(): ReactNode {
-        if (!this.context) {
-            throw Error('Need to wrap in checkout context');
-        }
-
-        const {
-            checkoutState: {
-                errors: { getDeleteInstrumentError },
-            },
-        } = this.context;
+    const handleCancel = (): void => {
+        const existingError = getDeleteInstrumentError();
 
-        const deleteInstrumentError = getDeleteInstrumentError();
+        if (existingError) {
+            void clearError(existingError);
+        }
 
-        const { isOpen, onRequestClose } = this.props;
+        setIsConfirmingDelete(false);
+    };
 
-        return (
-            <Modal
-                closeButtonLabel={<TranslatedString id="common.close_action" />}
-                footer={this.renderFooter()}
-                header={
-                    <ModalHeader>
-                        <TranslatedString id="payment.instrument_manage_modal_title_text" />
-                    </ModalHeader>
-                }
-                isOpen={isOpen}
-                onAfterOpen={this.handleAfterOpen}
-                onRequestClose={onRequestClose}
-            >
-                {deleteInstrumentError && <ManageInstrumentsAlert error={deleteInstrumentError} />}
+    const handleConfirmDelete = async (): Promise<void> => {
+        if (!selectedInstrumentId) {
+            return;
+        }
 
-                {this.renderContent()}
-            </Modal>
-        );
-    }
+        try {
+            await deleteInstrument(selectedInstrumentId);
+            onDeleteInstrument(selectedInstrumentId);
+            onRequestClose?.();
+        } catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
 
-    private renderContent(): ReactNode {
-        if (!this.context) {
-            throw Error('Need to wrap in checkout context');
+            onDeleteInstrumentError(err);
         }
+    };
 
-        const {
-            checkoutState: {
-                statuses: { isDeletingInstrument },
-            },
-        } = this.context;
-        const { instruments } = this.props;
-
-        const { isConfirmingDelete } = this.state;
+    const handleDeleteInstrument = (id: string): void => {
+        setIsConfirmingDelete(true);
+        setSelectedInstrumentId(id);
+    };
 
+    const ModalContent = () => {
         if (isConfirmingDelete) {
             return (
                 <p>
@@ -109,7 +102,7 @@ class ManageInstrumentsModal extends Component<
                 <ManageAchInstrumentsTable
                     instruments={achInstrument}
                     isDeletingInstrument={isDeletingInstrument()}
-                    onDeleteInstrument={this.handleDeleteInstrument}
+                    onDeleteInstrument={handleDeleteInstrument}
                 />
             );
         }
@@ -121,7 +114,7 @@ class ManageInstrumentsModal extends Component<
                 <ManageAccountInstrumentsTable
                     instruments={bankAndAccountInstruments}
                     isDeletingInstrument={isDeletingInstrument()}
-                    onDeleteInstrument={this.handleDeleteInstrument}
+                    onDeleteInstrument={handleDeleteInstrument}
                 />
             );
         }
@@ -130,129 +123,60 @@ class ManageInstrumentsModal extends Component<
             <ManageCardInstrumentsTable
                 instruments={cardInstruments}
                 isDeletingInstrument={isDeletingInstrument()}
-                onDeleteInstrument={this.handleDeleteInstrument}
+                onDeleteInstrument={handleDeleteInstrument}
             />
         );
-    }
-
-    private renderFooter(): ReactNode {
-        if (!this.context) {
-            throw Error('Need to wrap in checkout context');
-        }
-
-        const {
-            checkoutState: {
-                statuses: { isDeletingInstrument, isLoadingInstruments },
-            },
-        } = this.context;
-
-        const { onRequestClose } = this.props;
-        const { isConfirmingDelete } = this.state;
-
-        if (isConfirmingDelete) {
-            return (
-                <>
-                    <Button
-                        onClick={this.handleCancel}
-                        size={ButtonSize.Small}
-                        testId="manage-instrument-cancel-button"
-                    >
-                        <TranslatedString id="common.cancel_action" />
-                    </Button>
-
-                    <Button
-                        disabled={isDeletingInstrument() || isLoadingInstruments()}
-                        onClick={this.handleConfirmDelete}
-                        size={ButtonSize.Small}
-                        testId="manage-instrument-confirm-button"
-                        variant={ButtonVariant.Primary}
-                    >
-                        <TranslatedString id="payment.instrument_manage_modal_confirmation_action" />
-                    </Button>
-                </>
-            );
-        }
+    };
 
-        return (
+    const ConfirmDelete = () => (
+        <>
             <Button
-                onClick={onRequestClose}
+                onClick={handleCancel}
                 size={ButtonSize.Small}
-                testId="manage-instrument-close-button"
+                testId="manage-instrument-cancel-button"
             >
-                <TranslatedString id="common.close_action" />
+                <TranslatedString id="common.cancel_action" />
             </Button>
-        );
-    }
 
-    private handleAfterOpen: () => void = () => {
-        const { onAfterOpen } = this.props;
-
-        this.setState(
-            {
-                isConfirmingDelete: false,
-            },
-            onAfterOpen,
-        );
-    };
-
-    private handleCancel: () => void = () => {
-        if (!this.context) {
-            throw Error('Need to wrap in checkout context');
-        }
-
-        const {
-            checkoutState: {
-                errors: { getDeleteInstrumentError },
-            },
-            checkoutService: { clearError },
-        } = this.context;
-
-        const deleteInstrumentError = getDeleteInstrumentError();
-
-        if (deleteInstrumentError) {
-            void clearError(deleteInstrumentError);
-        }
-
-        this.setState({
-            isConfirmingDelete: false,
-        });
-    };
-
-    private handleConfirmDelete: () => void = async () => {
-        if (!this.context) {
-            throw Error('Need to wrap in checkout context');
-        }
-
-        const {
-            checkoutService: { deleteInstrument },
-        } = this.context;
-
-        const {
-            onDeleteInstrument = noop,
-            onDeleteInstrumentError = noop,
-            onRequestClose = noop,
-        } = this.props;
-        const { selectedInstrumentId } = this.state;
-
-        if (!selectedInstrumentId) {
-            return;
-        }
-
-        try {
-            await deleteInstrument(selectedInstrumentId);
-            onDeleteInstrument(selectedInstrumentId);
-            onRequestClose();
-        } catch (error) {
-            onDeleteInstrumentError(error);
-        }
-    };
-
-    private handleDeleteInstrument: (id: string) => void = (id) => {
-        this.setState({
-            isConfirmingDelete: true,
-            selectedInstrumentId: id,
-        });
-    };
-}
+            <Button
+                disabled={isDeletingInstrument() || isLoadingInstruments()}
+                onClick={handleConfirmDelete}
+                size={ButtonSize.Small}
+                testId="manage-instrument-confirm-button"
+                variant={ButtonVariant.Primary}
+            >
+                <TranslatedString id="payment.instrument_manage_modal_confirmation_action" />
+            </Button>
+        </>
+    );
+    const CloseButton = () => (
+        <Button
+            onClick={onRequestClose}
+            size={ButtonSize.Small}
+            testId="manage-instrument-close-button"
+        >
+            <TranslatedString id="common.close_action" />
+        </Button>
+    );
+
+    return (
+        <Modal
+            closeButtonLabel={<TranslatedString id="common.close_action" />}
+            footer={isConfirmingDelete ? <ConfirmDelete /> : <CloseButton />}
+            header={
+                <ModalHeader>
+                    <TranslatedString id="payment.instrument_manage_modal_title_text" />
+                </ModalHeader>
+            }
+            isOpen={isOpen}
+            onAfterOpen={handleAfterOpen}
+            onRequestClose={onRequestClose}
+        >
+            {deleteInstrumentError && <ManageInstrumentsAlert error={deleteInstrumentError} />}
+
+            <ModalContent />
+        </Modal>
+    );
+};
 
 export default ManageInstrumentsModal;