feat(payment): INT-2181 Add secured fields to support TSV with hosted…

… fields
bigcommerce · Dec 31, 2019 · 69d4753 · 69d4753
1 parent 581eb7c
commit 69d4753
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/bigcommerce/checkout-js#readme",
   "dependencies": {
-    "@bigcommerce/checkout-sdk": "^1.46.1",
+    "@bigcommerce/checkout-sdk": "^1.47.0",
     "@bigcommerce/citadel": "^2.15.1",
     "@bigcommerce/form-poster": "^1.2.2",
     "@bigcommerce/memoize": "^1.0.0",

diff --git a/src/app/payment/paymentMethod/AdyenV2CardValidation.spec.tsx b/src/app/payment/paymentMethod/AdyenV2CardValidation.spec.tsx
@@ -0,0 +1,30 @@
+import { mount } from 'enzyme';
+import React, { FunctionComponent } from 'react';
+
+import AdyenV2CardValidation, { AdyenV2CardValidationProps } from './AdyenV2CardValidation';
+
+describe('AdyenV2CardValidation', () => {
+    let defaultProps: AdyenV2CardValidationProps;
+    let AdyenV2CardValidationTest: FunctionComponent<AdyenV2CardValidationProps>;
+
+    beforeEach(() => {
+        defaultProps = {
+            verificationFieldsContainerId: 'container',
+            shouldShowNumberField: true,
+        };
+
+        AdyenV2CardValidationTest = props => (
+            <AdyenV2CardValidation { ...props } />
+        );
+    });
+
+    it('renders Adyen V2 secured fields', () => {
+        const container = mount(<AdyenV2CardValidationTest { ...defaultProps } />);
+
+        expect(container.props())
+            .toEqual(expect.objectContaining({
+                verificationFieldsContainerId: 'container',
+                shouldShowNumberField: true,
+            }));
+    });
+});
diff --git a/src/app/payment/paymentMethod/AdyenV2CardValidation.tsx b/src/app/payment/paymentMethod/AdyenV2CardValidation.tsx
@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { TranslatedString } from '../../locale';
+
+export interface AdyenV2CardValidationProps {
+    verificationFieldsContainerId?: string;
+    shouldShowNumberField: boolean;
+}
+
+const AdyenV2CardValidation: React.FunctionComponent<AdyenV2CardValidationProps> = ({
+    verificationFieldsContainerId,
+    shouldShowNumberField,
+}) => (
+    <div>
+        { shouldShowNumberField && <p>
+            <strong>
+                <TranslatedString id="payment.instrument_trusted_shipping_address_title_text" />
+            </strong>
+
+            <br />
+
+            <TranslatedString id="payment.instrument_trusted_shipping_address_text" />
+        </p> }
+
+        <div className="form-ccFields" id={ verificationFieldsContainerId }>
+            { <div className="form-field form-field--ccNumber" style={ { display: (shouldShowNumberField) ? undefined : 'none' } }>
+                <label htmlFor="encryptedCardNumber">
+                    <TranslatedString id="payment.credit_card_number_label" />
+                </label>
+                <div className="form-input optimizedCheckout-form-input has-icon" data-cse="encryptedCardNumber" id="encryptedCardNumber" />
+            </div> }
+            <div className="form-field form-ccFields-field--ccCvv">
+                <label htmlFor="encryptedSecurityCode">
+                    <TranslatedString id="payment.credit_card_cvv_label" />
+                </label>
+                <div
+                    className={ classNames(
+                        'form-input',
+                        'optimizedCheckout-form-input',
+                        'has-icon'
+                    ) }
+                    data-cse="encryptedSecurityCode"
+                    id="encryptedSecurityCode"
+                />
+            </div>
+        </div>
+    </div>
+);
+
+export default AdyenV2CardValidation;
diff --git a/src/app/payment/paymentMethod/AdyenV2PaymentMethod.spec.tsx b/src/app/payment/paymentMethod/AdyenV2PaymentMethod.spec.tsx
@@ -84,6 +84,7 @@ describe('when using Adyen V2 payment', () => {
         expect(checkoutService.initializePayment)
             .toHaveBeenCalledWith(expect.objectContaining({
                 adyenv2: {
+                    cardVerificationContainerId: undefined,
                     containerId: 'scheme-adyen-component-field',
                     options: {
                         hasHolderName: true,

diff --git a/src/app/payment/paymentMethod/AdyenV2PaymentMethod.tsx b/src/app/payment/paymentMethod/AdyenV2PaymentMethod.tsx
@@ -1,10 +1,11 @@
-import { AdyenCreditCardComponentOptions, PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { AdyenCreditCardComponentOptions } from '@bigcommerce/checkout-sdk';
 import React, { createRef, useCallback, useRef, useState, FunctionComponent, RefObject } from 'react';
 import { Omit } from 'utility-types';
 
 import { TranslatedString } from '../../locale';
 import { Modal } from '../../ui/modal';
 
+import AdyenV2CardValidation from './AdyenV2CardValidation';
 import HostedWidgetPaymentMethod, { HostedWidgetPaymentMethodProps } from './HostedWidgetPaymentMethod';
 
 export type AdyenPaymentMethodProps = Omit<HostedWidgetPaymentMethodProps, 'containerId' | 'hideContentWhenSignedOut'>;
@@ -35,6 +36,7 @@ const AdyenV2PaymentMethod: FunctionComponent<AdyenPaymentMethodProps> = ({
     const [threeDSecureContent, setThreeDSecureContent] = useState<HTMLElement>();
     const containerId = `${method.id}-adyen-component-field`;
     const threeDS2ContainerId = `${containerId}-3ds`;
+    const cardVerificationContainerId = `${method.id}-tsv`;
     const component = method.id as AdyenMethodType;
     const adyenOptions: AdyenOptions = {
         [AdyenMethodType.scheme]: {
@@ -73,23 +75,29 @@ const AdyenV2PaymentMethod: FunctionComponent<AdyenPaymentMethodProps> = ({
         }
     }, []);
 
-    const adyenv2 = {
-        containerId,
-        threeDS2ContainerId,
-        options: adyenOptions[component],
-        threeDS2Options: {
-            widgetSize: '05',
-            onLoad,
-            onComplete,
-        },
-    };
-
-    const initializeAdyenPayment = useCallback((options: PaymentInitializeOptions) => {
+    const initializeAdyenPayment: HostedWidgetPaymentMethodProps['initializePayment'] = useCallback((options, selectedInstrumentId) => {
         return initializePayment({
             ...options,
-            adyenv2,
+            adyenv2: {
+                cardVerificationContainerId: selectedInstrumentId && cardVerificationContainerId,
+                containerId,
+                options: adyenOptions[component],
+                threeDS2ContainerId,
+                threeDS2Options: {
+                    widgetSize: '05',
+                    onLoad,
+                    onComplete,
+                },
+            },
         });
-    }, [initializePayment, adyenv2]);
+    }, [initializePayment, component, cardVerificationContainerId, containerId, threeDS2ContainerId, adyenOptions, onLoad, onComplete]);
+
+    const validateInstrument = (shouldShowNumberField: boolean) => {
+        return <AdyenV2CardValidation
+            shouldShowNumberField={ shouldShowNumberField }
+            verificationFieldsContainerId={ cardVerificationContainerId }
+        />;
+    };
 
     return <>
         <HostedWidgetPaymentMethod
@@ -98,6 +106,7 @@ const AdyenV2PaymentMethod: FunctionComponent<AdyenPaymentMethodProps> = ({
             hideContentWhenSignedOut
             initializePayment={ initializeAdyenPayment }
             method={ method }
+            validateInstrument={ validateInstrument }
         />
 
         <Modal

diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.spec.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.spec.tsx
@@ -265,16 +265,6 @@ describe('HostedWidgetPaymentMethod', () => {
                 .toHaveLength(1);
         });
 
-        it('does not show instruments fieldset when there are no stored instruments', () => {
-            jest.spyOn(checkoutState.data, 'getInstruments')
-                .mockReturnValue([]);
-
-            const component = mount(<HostedWidgetPaymentMethodTest { ...defaultProps } />);
-
-            expect(component.find(storedInstrumentModule.CardInstrumentFieldset))
-                .toHaveLength(0);
-        });
-
         it('uses PaymentMethod to retrieve instruments', () => {
             mount(<HostedWidgetPaymentMethodTest { ...defaultProps } />);
 

diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
@@ -23,10 +23,11 @@ export interface HostedWidgetPaymentMethodProps {
     isUsingMultiShipping?: boolean;
     isSignInRequired?: boolean;
     method: PaymentMethod;
+    validateInstrument?(shouldShowNumberField: boolean): React.ReactNode;
     deinitializeCustomer?(options: CustomerRequestOptions): Promise<CheckoutSelectors>;
     deinitializePayment(options: PaymentRequestOptions): Promise<CheckoutSelectors>;
     initializeCustomer?(options: CustomerInitializeOptions): Promise<CheckoutSelectors>;
-    initializePayment(options: PaymentInitializeOptions): Promise<CheckoutSelectors>;
+    initializePayment(options: PaymentInitializeOptions, selectedInstrumentId?: string): Promise<CheckoutSelectors>;
     onPaymentSelect?(): void;
     onSignOut?(): void;
     onSignOutError?(error: Error): void;
@@ -121,13 +122,10 @@ class HostedWidgetPaymentMethod extends Component<
             instruments,
             containerId,
             hideContentWhenSignedOut = false,
-            hideVerificationFields = false,
             isInitializing = false,
             isSignedIn = false,
             isSignInRequired = false,
             method,
-            isInstrumentCardCodeRequired: isInstrumentCardCodeRequiredProp,
-            isInstrumentCardNumberRequired: isInstrumentCardNumberRequiredProp,
             isInstrumentFeatureAvailable: isInstrumentFeatureAvailableProp,
             isLoadingInstruments,
         } = this.props;
@@ -137,11 +135,9 @@ class HostedWidgetPaymentMethod extends Component<
             selectedInstrumentId = this.getDefaultInstrumentId(),
         } = this.state;
 
-        const selectedInstrument = find(instruments, { bigpayToken: selectedInstrumentId });
         const shouldShowInstrumentFieldset = isInstrumentFeatureAvailableProp && instruments.length > 0;
         const shouldShowCreditCardFieldset = !shouldShowInstrumentFieldset || isAddingNewCard;
         const isLoading = isInitializing || isLoadingInstruments;
-        const shouldShowNumberField = selectedInstrument ? isInstrumentCardNumberRequiredProp(selectedInstrument) : false;
 
         return (
             <LoadingOverlay
@@ -153,10 +149,7 @@ class HostedWidgetPaymentMethod extends Component<
                     onSelectInstrument={ this.handleSelectInstrument }
                     onUseNewInstrument={ this.handleUseNewCard }
                     selectedInstrumentId={ selectedInstrumentId }
-                    validateInstrument={ !hideVerificationFields && <CreditCardValidation
-                        shouldShowCardCodeField={ isInstrumentCardCodeRequiredProp }
-                        shouldShowNumberField={ shouldShowNumberField }
-                    /> }
+                    validateInstrument={ this.getValidateInstrument() }
                 /> }
 
                 <div
@@ -182,6 +175,35 @@ class HostedWidgetPaymentMethod extends Component<
         );
     }
 
+    getValidateInstrument(): ReactNode | undefined {
+        const {
+            hideVerificationFields,
+            instruments,
+            isInstrumentCardCodeRequired: isInstrumentCardCodeRequiredProp,
+            isInstrumentCardNumberRequired: isInstrumentCardNumberRequiredProp,
+            validateInstrument,
+        } = this.props;
+
+        const { selectedInstrumentId = this.getDefaultInstrumentId() } = this.state;
+        const selectedInstrument = find(instruments, { bigpayToken: selectedInstrumentId });
+        const shouldShowNumberField = selectedInstrument ? isInstrumentCardNumberRequiredProp(selectedInstrument) : false;
+
+        if (hideVerificationFields) {
+            return;
+        }
+
+        if (validateInstrument) {
+            return validateInstrument(shouldShowNumberField);
+        }
+
+        return (
+            <CreditCardValidation
+                shouldShowCardCodeField={ isInstrumentCardCodeRequiredProp }
+                shouldShowNumberField={ shouldShowNumberField }
+            />
+        );
+    }
+
     private async initializeMethod(): Promise<CheckoutSelectors | void> {
         const {
             isPaymentDataRequired,
@@ -194,6 +216,8 @@ class HostedWidgetPaymentMethod extends Component<
             signInCustomer = noop,
         } = this.props;
 
+        const { selectedInstrumentId = this.getDefaultInstrumentId() } = this.state;
+
         if (!isPaymentDataRequired) {
             setSubmit(method, null);
 
@@ -213,7 +237,7 @@ class HostedWidgetPaymentMethod extends Component<
         return initializePayment({
             gatewayId: method.gateway,
             methodId: method.id,
-        });
+        }, selectedInstrumentId);
     }
 
     private getDefaultInstrumentId(): string | undefined {

diff --git a/src/app/payment/storedInstrument/CardInstrumentFieldset.spec.tsx b/src/app/payment/storedInstrument/CardInstrumentFieldset.spec.tsx
@@ -87,6 +87,6 @@ describe('CardInstrumentFieldset', () => {
         );
 
         expect(component.find(ValidateInstrument).length)
-            .toEqual(0);
+            .toEqual(1);
     });
 });
diff --git a/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx b/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx
@@ -75,7 +75,9 @@ const CardInstrumentFieldset: FunctionComponent<CardInstrumentFieldsetProps> = (
             render={ renderInput }
         />
 
-        { selectedInstrumentId && validateInstrument }
+        <div style={ {display: selectedInstrumentId ? undefined : 'none'} }>
+            { validateInstrument }
+        </div>
     </Fieldset>;
 };