fix(payment): INT-2754 adding conditional for updateFieldValue on

ComponentWillUnmount()
bigcommerce · Aug 17, 2020 · 6f349d3 · 6f349d3
1 parent 207f668
commit 6f349d3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/src/app/payment/storedInstrument/AccountInstrumentSelect.spec.tsx b/src/app/payment/storedInstrument/AccountInstrumentSelect.spec.tsx
@@ -207,21 +207,22 @@ describe('AccountInstrumentSelect', () => {
         const submit = jest.fn();
         initialValues.instrumentId = '1234';
 
-        const Component = ({ show }: { show: boolean }) =>
+        const Component = ({ show, selectedInstrumentId }: { show: boolean; selectedInstrumentId?: string }) =>
             <Formik initialValues={ initialValues } onSubmit={ submit }>
                 { ({ handleSubmit }) => <form onSubmit={ handleSubmit }>
                     { show && <Field name="instrumentId">
                         { (field: FieldProps<string>) => (
                             <AccountInstrumentSelect
                                 { ...field }
                                 { ...defaultProps }
+                                selectedInstrumentId={ selectedInstrumentId }
                             />
                         ) }
                     </Field> }
                 </form> }
             </Formik>;
 
-        const component = mount(<Component show={ true } />);
+        const component = mount(<Component selectedInstrumentId={ defaultProps.selectedInstrumentId } show={ true } />);
 
         component.find('form')
             .simulate('submit')
@@ -231,6 +232,10 @@ describe('AccountInstrumentSelect', () => {
 
         expect(submit).toHaveBeenCalledWith({ instrumentId: '1234' }, expect.anything());
 
+        component
+            .setProps({ selectedInstrumentId: '' })
+            .update();
+
         component
             .setProps({ show: false })
             .update();

diff --git a/src/app/payment/storedInstrument/AccountInstrumentSelect.tsx b/src/app/payment/storedInstrument/AccountInstrumentSelect.tsx
@@ -41,7 +41,11 @@ class AccountInstrumentSelect extends PureComponent<AccountInstrumentSelectProps
     }
 
     componentWillUnmount() {
-        this.updateFieldValue();
+        const { selectedInstrumentId, field } = this.props;
+
+        if (field.value === '' && selectedInstrumentId !== undefined) {
+            this.updateFieldValue();
+        }
     }
 
     render(): ReactNode {

diff --git a/src/app/payment/storedInstrument/InstrumentSelect.spec.tsx b/src/app/payment/storedInstrument/InstrumentSelect.spec.tsx
@@ -245,21 +245,22 @@ describe('InstrumentSelect', () => {
         const submit = jest.fn();
         initialValues.instrumentId = '1234';
 
-        const Component = ({ show }: { show: boolean }) =>
+        const Component = ({ show, selectedInstrumentId }: { show: boolean; selectedInstrumentId?: string }) =>
             <Formik initialValues={ initialValues } onSubmit={ submit }>
                 { ({ handleSubmit }) => <form onSubmit={ handleSubmit }>
                     { show && <Field name="instrumentId">
                         { (field: FieldProps<string>) => (
                             <InstrumentSelect
                                 { ...field }
                                 { ...defaultProps }
+                                selectedInstrumentId={ selectedInstrumentId }
                             />
                         ) }
                     </Field> }
                 </form> }
             </Formik>;
 
-        const component = mount(<Component show={ true } />);
+        const component = mount(<Component selectedInstrumentId={ defaultProps.selectedInstrumentId } show={ true } />);
 
         component.find('form')
             .simulate('submit')
@@ -269,6 +270,10 @@ describe('InstrumentSelect', () => {
 
         expect(submit).toHaveBeenCalledWith({ instrumentId: '1234' }, expect.anything());
 
+        component
+            .setProps({ selectedInstrumentId: '' })
+            .update();
+
         component
             .setProps({ show: false })
             .update();

diff --git a/src/app/payment/storedInstrument/InstrumentSelect.tsx b/src/app/payment/storedInstrument/InstrumentSelect.tsx
@@ -44,7 +44,11 @@ class InstrumentSelect extends PureComponent<InstrumentSelectProps> {
     }
 
     componentWillUnmount() {
-        this.updateFieldValue();
+        const { selectedInstrumentId, field } = this.props;
+
+        if (field.value === '' && selectedInstrumentId !== undefined) {
+            this.updateFieldValue();
+        }
     }
 
     render(): ReactNode {