fix(payment): INT-2672 Adjust verbiage when using Online Bank Transfe…

…r Payment Methods
bigcommerce · May 25, 2020 · 19f8d79 · 19f8d79
1 parent 40d1f6f
commit 19f8d79
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 2 deletions.
diff --git a/src/app/payment/paymentMethod/AdyenV2PaymentMethod.tsx b/src/app/payment/paymentMethod/AdyenV2PaymentMethod.tsx
@@ -127,12 +127,25 @@ const AdyenV2PaymentMethod: FunctionComponent<AdyenPaymentMethodProps> = ({
         />;
     };
 
+    const isAccountInstrument = () => {
+        switch (method.method) {
+        case 'directEbanking':
+        case 'giropay':
+        case 'ideal':
+        case 'sepadirectdebit':
+            return true;
+        default:
+            return false;
+        }
+    };
+
     return <>
         <HostedWidgetPaymentMethod
             { ...rest }
             containerId={ containerId }
             hideContentWhenSignedOut
             initializePayment={ initializeAdyenPayment }
+            isAccountInstrument={ isAccountInstrument() }
             method={ method }
             shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
             validateInstrument={ validateInstrument }

diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.spec.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.spec.tsx
@@ -286,5 +286,22 @@ describe('HostedWidgetPaymentMethod', () => {
             expect(creditCardStorageFieldComponent)
                 .toHaveLength(1);
         });
+
+        it('shows save account checkbox when has isAccountInstrument prop', () => {
+            defaultProps.isAccountInstrument = true;
+
+            jest.spyOn(checkoutState.data, 'getInstruments')
+                .mockReturnValue([]);
+
+            const container = mount(<HostedWidgetPaymentMethodTest { ...defaultProps } />);
+            const hostedWidgetComponent = container.find('#widget-container');
+            const accountInstrumentStorageFieldComponent = container.find(storedInstrumentModule.AccountInstrumentStorageField);
+
+            expect(hostedWidgetComponent)
+                .toHaveLength(1);
+
+            expect(accountInstrumentStorageFieldComponent)
+                .toHaveLength(1);
+        });
     });
 });
diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
@@ -9,7 +9,7 @@ import { connectFormik, ConnectFormikProps } from '../../common/form';
 import { MapToProps } from '../../common/hoc';
 import { LoadingOverlay } from '../../ui/loading';
 import { CreditCardStorageField } from '../creditCard';
-import { isBankAccountInstrument, isCardInstrument, isInstrumentCardCodeRequiredSelector, isInstrumentCardNumberRequiredSelector, isInstrumentFeatureAvailable, AccountInstrumentFieldset, CardInstrumentFieldset, CreditCardValidation } from '../storedInstrument';
+import { isBankAccountInstrument, isCardInstrument, isInstrumentCardCodeRequiredSelector, isInstrumentCardNumberRequiredSelector, isInstrumentFeatureAvailable, AccountInstrumentFieldset, AccountInstrumentStorageField, CardInstrumentFieldset, CreditCardValidation } from '../storedInstrument';
 import withPayment, { WithPaymentProps } from '../withPayment';
 import { PaymentFormValues } from '../PaymentForm';
 
@@ -20,6 +20,7 @@ export interface HostedWidgetPaymentMethodProps {
     containerId: string;
     hideContentWhenSignedOut?: boolean;
     hideVerificationFields?: boolean;
+    isAccountInstrument?: boolean;
     isInitializing?: boolean;
     isUsingMultiShipping?: boolean;
     isSignInRequired?: boolean;
@@ -159,6 +160,7 @@ class HostedWidgetPaymentMethod extends Component<
 
         const shouldShowInstrumentFieldset = isInstrumentFeatureAvailableProp && instruments.length > 0;
         const shouldShowCreditCardFieldset = !shouldShowInstrumentFieldset || isAddingNewCard;
+        const shouldShowSaveInstrument = isInstrumentFeatureAvailableProp && shouldShowCreditCardFieldset;
         const isLoading = isInitializing || isLoadingInstruments;
 
         const selectedAccountInstrument = selectedInstrumentId && selectedInstrument && isBankAccountInstrument(selectedInstrument) ? selectedInstrument : undefined;
@@ -198,7 +200,7 @@ class HostedWidgetPaymentMethod extends Component<
                     tabIndex={ -1 }
                 />
 
-                { shouldShowCreditCardFieldset && isInstrumentFeatureAvailableProp && <CreditCardStorageField name="shouldSaveInstrument" /> }
+                { shouldShowSaveInstrument && this.renderSaveInstrumentCheckbox() }
 
                 { isSignedIn && <SignOutLink
                     method={ method }
@@ -239,6 +241,16 @@ class HostedWidgetPaymentMethod extends Component<
         );
     }
 
+    private renderSaveInstrumentCheckbox() {
+        const { isAccountInstrument } = this.props;
+
+        if (isAccountInstrument) {
+            return <AccountInstrumentStorageField name="shouldSaveInstrument" />;
+        }
+
+        return <CreditCardStorageField name="shouldSaveInstrument" />;
+    }
+
     private async initializeMethod(): Promise<CheckoutSelectors | void> {
         const {
             isPaymentDataRequired,

diff --git a/src/app/payment/storedInstrument/AccountInstrumentStorageField.tsx b/src/app/payment/storedInstrument/AccountInstrumentStorageField.tsx
@@ -0,0 +1,22 @@
+import React, { memo, useMemo, FunctionComponent } from 'react';
+
+import { TranslatedString } from '../../locale';
+import { CheckboxFormField } from '../../ui/form';
+
+export interface AccountInstrumentStorageFieldProps {
+    name: string;
+}
+
+const AccountInstrumentStorageField: FunctionComponent<AccountInstrumentStorageFieldProps> = ({ name }) => {
+    const labelContent = useMemo(() => (
+        <TranslatedString id="payment.account_instrument_save_payment_method_label" />
+    ), []);
+
+    return <CheckboxFormField
+        additionalClassName="form-field--saveInstrument"
+        labelContent={ labelContent }
+        name={ name }
+    />;
+};
+
+export default memo(AccountInstrumentStorageField);
diff --git a/src/app/payment/storedInstrument/index.ts b/src/app/payment/storedInstrument/index.ts
@@ -10,6 +10,7 @@ export { default as isInstrumentCardCodeRequiredSelector } from './isInstrumentC
 export { default as isInstrumentCardNumberRequired } from './isInstrumentCardNumberRequired';
 export { default as isInstrumentCardNumberRequiredSelector } from './isInstrumentCardNumberRequiredSelector';
 export { default as AccountInstrumentFieldset } from './AccountInstrumentFieldset';
+export { default as AccountInstrumentStorageField } from './AccountInstrumentStorageField';
 export { default as CardInstrumentFieldset } from './CardInstrumentFieldset';
 export { default as CreditCardValidation } from './CreditCardValidation';
 export { default as HostedCreditCardValidation } from './HostedCreditCardValidation';