fix(payment): CHECKOUT-5161 Re-initialise credit card form after dele…

…ting last stored card
bigcommerce · Sep 14, 2020 · 306ae2a · 306ae2a
1 parent 8c0d274
commit 306ae2a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 4 deletions.
diff --git a/src/app/payment/paymentMethod/CreditCardPaymentMethod.spec.tsx b/src/app/payment/paymentMethod/CreditCardPaymentMethod.spec.tsx
@@ -1,7 +1,8 @@
 import { createCheckoutService, CheckoutSelectors, CheckoutService } from '@bigcommerce/checkout-sdk';
 import { mount, ReactWrapper } from 'enzyme';
+import { EventEmitter } from 'events';
 import { Formik } from 'formik';
-import { noop } from 'lodash';
+import { merge, noop } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { object, string, Schema } from 'yup';
 
@@ -36,6 +37,7 @@ describe('CreditCardPaymentMethod', () => {
     let initialValues: CreditCardPaymentMethodValues;
     let localeContext: LocaleContextType;
     let paymentContext: PaymentContextProps;
+    let subscribeEventEmitter: EventEmitter;
     let CreditCardPaymentMethodTest: FunctionComponent<CreditCardPaymentMethodProps>;
 
     beforeEach(() => {
@@ -66,13 +68,15 @@ describe('CreditCardPaymentMethod', () => {
             isSubmitted: false,
             setSubmitted: jest.fn(),
         };
+        subscribeEventEmitter = new EventEmitter();
 
         jest.spyOn(checkoutService, 'getState')
             .mockReturnValue(checkoutState);
 
         jest.spyOn(checkoutService, 'subscribe')
             .mockImplementation(subscriber => {
-                subscriber(checkoutState);
+                subscribeEventEmitter.on('change', () => subscriber(checkoutState));
+                subscribeEventEmitter.emit('change');
 
                 return noop;
             });
@@ -324,5 +328,30 @@ describe('CreditCardPaymentMethod', () => {
             expect(component.find(CreditCardFieldset))
                 .toHaveLength(1);
         });
+
+        it('switches to "use new card" view if all instruments are deleted', () => {
+            const component = mount(<CreditCardPaymentMethodTest { ...defaultProps } />);
+
+            expect(component.find(CreditCardFieldset))
+                .toHaveLength(0);
+
+            // Update state
+            checkoutState = merge({}, checkoutState, {
+                data: {
+                    getInstruments: jest.fn(() => []),
+                },
+            });
+
+            subscribeEventEmitter.emit('change');
+
+            component.find(CardInstrumentFieldset)
+                // tslint:disable-next-line:no-non-null-assertion
+                .prop('onDeleteInstrument')!(getInstruments()[0].bigpayToken);
+
+            component.update();
+
+            expect(component.find(CreditCardFieldset))
+                .toHaveLength(1);
+        });
     });
 });
diff --git a/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx b/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx
@@ -175,6 +175,7 @@ class CreditCardPaymentMethod extends Component<
                 <div className="paymentMethod paymentMethod--creditCard">
                     { shouldShowInstrumentFieldset && <CardInstrumentFieldset
                         instruments={ instruments }
+                        onDeleteInstrument={ this.handleDeleteInstrument }
                         onSelectInstrument={ this.handleSelectInstrument }
                         onUseNewInstrument={ this.handleUseNewCard }
                         selectedInstrumentId={ selectedInstrument && selectedInstrument.bigpayToken }
@@ -271,6 +272,26 @@ class CreditCardPaymentMethod extends Component<
             selectedInstrumentId: id,
         });
     };
+
+    private handleDeleteInstrument: (id: string) => void = id => {
+        const { instruments, formik: { setFieldValue } } = this.props;
+        const { selectedInstrumentId } = this.state;
+
+        if (instruments.length === 0) {
+            this.setState({
+                isAddingNewCard: true,
+                selectedInstrumentId: undefined,
+            });
+
+            setFieldValue('instrumentId', '');
+        } else if (selectedInstrumentId === id) {
+            this.setState({
+                selectedInstrumentId: this.getDefaultInstrumentId(),
+            });
+
+            setFieldValue('instrumentId', this.getDefaultInstrumentId());
+        }
+    };
 }
 
 const mapFromCheckoutProps: MapToPropsFactory<

diff --git a/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx b/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx
@@ -16,6 +16,7 @@ export interface CardInstrumentFieldsetProps {
     selectedInstrumentId?: string;
     shouldHideExpiryDate?: boolean;
     validateInstrument?: React.ReactNode;
+    onDeleteInstrument?(instrumentId: string): void;
     onSelectInstrument(id: string): void;
     onUseNewInstrument(): void;
 }
@@ -26,6 +27,7 @@ export type CardInstrumentFieldsetValues = {
 
 const CardInstrumentFieldset: FunctionComponent<CardInstrumentFieldsetProps> = ({
     instruments,
+    onDeleteInstrument,
     onSelectInstrument,
     onUseNewInstrument,
     selectedInstrumentId,
@@ -52,9 +54,13 @@ const CardInstrumentFieldset: FunctionComponent<CardInstrumentFieldsetProps> = (
     const renderModal = useCallback((props: ModalTriggerModalProps) => (
         <ManageInstrumentsModal
             instruments={ instruments }
+            onDeleteInstrument={ onDeleteInstrument }
             { ...props }
         />
-    ), [instruments]);
+    ), [
+        instruments,
+        onDeleteInstrument,
+    ]);
 
     return <Fieldset
         additionalClassName="instrumentFieldset"

diff --git a/src/app/payment/storedInstrument/ManageInstrumentsModal.tsx b/src/app/payment/storedInstrument/ManageInstrumentsModal.tsx
@@ -18,6 +18,7 @@ export interface ManageInstrumentsModalProps {
     isOpen: boolean;
     instruments: PaymentInstrument[];
     onAfterOpen?(): void;
+    onDeleteInstrument?(instrumentId: string): void;
     onDeleteInstrumentError?(error: Error): void;
     onRequestClose?(): void;
 }
@@ -165,7 +166,7 @@ class ManageInstrumentsModal extends Component<ManageInstrumentsModalProps & Wit
     };
 
     private handleConfirmDelete: () => void = async () => {
-        const { deleteInstrument, onDeleteInstrumentError = noop, onRequestClose = noop } = this.props;
+        const { deleteInstrument, onDeleteInstrument = noop, onDeleteInstrumentError = noop, onRequestClose = noop } = this.props;
         const { selectedInstrumentId } = this.state;
 
         if (!selectedInstrumentId) {
@@ -174,6 +175,7 @@ class ManageInstrumentsModal extends Component<ManageInstrumentsModalProps & Wit
 
         try {
             await deleteInstrument(selectedInstrumentId);
+            onDeleteInstrument(selectedInstrumentId);
             onRequestClose();
         } catch (error) {
             onDeleteInstrumentError(error);