fix(shipping): INT-2832 Add custom fields support for AmazonPayV2

src/app/shipping/ShippingAddress.tsx

@@ -105,9 +105,11 @@ const ShippingAddress: FunctionComponent<ShippingAddressProps> = props => {
                     address={ shippingAddress }
                     buttonId={ editAddressButtonId }
                     deinitialize={ deinitialize }
+                    formFields={ formFields }
                     initialize={ initializeShipping(options) }
                     isLoading={ isLoading }
                     methodId={ methodId }
+                    onFieldChange={ onFieldChange }
                 />
             );
         }

src/app/shipping/StaticAddressEditable.scss

@@ -7,3 +7,7 @@
     margin-bottom: 0;
     margin-left: 0;
 }
+
+#customFieldset {
+    margin-top: 1rem;
+}

src/app/shipping/StaticAddressEditable.spec.tsx

@@ -1,32 +1,50 @@
 import { mount, shallow } from 'enzyme';
+import { Formik } from 'formik';
+import { noop } from 'lodash';
 import React from 'react';
 
-import { StaticAddress } from '../address/';
+import { DynamicFormField, StaticAddress } from '../address/';
 import { getAddress } from '../address/address.mock';
+import { getFormFields } from '../address/formField.mock';
 import { Button } from '../ui/button';
 
 import StaticAddressEditable, { StaticAddressEditableProps } from './StaticAddressEditable';
 
 describe('StaticAddressEditable Component', () => {
-    let defaultProps: StaticAddressEditableProps;
-
-    defaultProps = {
+    const defaultProps: StaticAddressEditableProps = {
         address: getAddress(),
         buttonId: 'foo',
+        formFields: getFormFields(),
         isLoading: false,
         methodId: 'bar',
         initialize: jest.fn(),
         deinitialize: jest.fn(),
+        onFieldChange: jest.fn(),
     };
 
-    it('renders static address and button to edit', () => {
-        const component = mount(<StaticAddressEditable { ...defaultProps } />);
+    const initialFormikValues = {
+        shippingAddress: {
+            customFields: {
+                field_25: '',
+            },
+        },
+    };
 
-        expect(component.find(StaticAddress).length)
-            .toEqual(1);
+    it('renders a static address, an edit button, and custom form fields', () => {
+        const wrapper = shallow(<StaticAddressEditable { ...defaultProps } />);
 
-        expect(component.find(Button).length)
-            .toEqual(1);
+        expect(wrapper.find(StaticAddress)).toHaveLength(1);
+        expect(wrapper.find(Button)).toHaveLength(1);
+        expect(wrapper.find('#customFieldset')).toHaveLength(1);
+    });
+
+    it('does not render custom form fields', () => {
+        const builtInFormFields = getFormFields().filter(({ custom }) => !custom);
+        const wrapper = shallow(<StaticAddressEditable { ...defaultProps } formFields={ builtInFormFields } />);
+
+        expect(wrapper.find(StaticAddress)).toHaveLength(1);
+        expect(wrapper.find(Button)).toHaveLength(1);
+        expect(wrapper.find('#customFieldset')).toHaveLength(0);
     });
 
     it('calls initialize prop on mount', () => {
@@ -40,4 +58,35 @@ describe('StaticAddressEditable Component', () => {
 
         expect(defaultProps.initialize).toHaveBeenCalled();
     });
+
+    it('renders correct number of custom form fields', () => {
+        const component = mount(
+            <Formik
+                initialValues={ initialFormikValues }
+                onSubmit={ noop }
+            >
+                <StaticAddressEditable { ...defaultProps } />
+            </Formik>
+        );
+
+        expect(component.find(DynamicFormField)).toHaveLength(3);
+    });
+
+    it('calls method to set field value on change in custom form field', () => {
+        const component = mount(
+            <Formik
+                initialValues={ initialFormikValues }
+                onSubmit={ noop }
+            >
+                <StaticAddressEditable { ...defaultProps } />
+            </Formik>
+        );
+
+        const inputFieldName = getFormFields()[4].name;
+
+        component.find(`input[name="shippingAddress.customFields.${inputFieldName}"]`)
+            .simulate('change', { target: { value: 'foo', name: 'shippingAddress.customFields.field_25' } });
+
+        expect(defaultProps.onFieldChange).toHaveBeenCalledWith(inputFieldName, 'foo');
+    });
 });

src/app/shipping/StaticAddressEditable.tsx

@@ -1,22 +1,25 @@
-import { Address, CheckoutSelectors, ShippingInitializeOptions, ShippingRequestOptions } from '@bigcommerce/checkout-sdk';
+import { Address, CheckoutSelectors, FormField, ShippingInitializeOptions, ShippingRequestOptions } from '@bigcommerce/checkout-sdk';
 import { noop } from 'lodash';
 import React, { PureComponent, ReactNode } from 'react';
 
-import { StaticAddress } from '../address/';
+import { AddressFormField, StaticAddress } from '../address/';
 import { preventDefault } from '../common/dom';
 import { TranslatedString } from '../locale';
 import { Button, ButtonSize, ButtonVariant } from '../ui/button';
+import { Fieldset } from '../ui/form';
 import { LoadingOverlay } from '../ui/loading';
 
 import './StaticAddressEditable.scss';
 
 export interface StaticAddressEditableProps {
     address: Address;
     buttonId: string;
+    formFields: FormField[];
     isLoading: boolean;
     methodId?: string;
     deinitialize(options?: ShippingRequestOptions): Promise<CheckoutSelectors>;
     initialize(options?: ShippingInitializeOptions): Promise<CheckoutSelectors>;
+    onFieldChange(fieldName: string, value: string): void;
     onUnhandledError?(error: Error): void;
 }
 
@@ -53,9 +56,13 @@ class StaticAddressEditable extends PureComponent<StaticAddressEditableProps> {
         const {
             address,
             buttonId,
+            formFields,
             isLoading,
         } = this.props;
 
+        const customFormFields = formFields.filter(({ custom }) => custom);
+        const shouldShowCustomFormFields = customFormFields.length > 0;
+
         return (
             <LoadingOverlay isLoading={ isLoading }>
                 <div className="stepHeader" style={ { padding: 0 } }>
@@ -77,9 +84,27 @@ class StaticAddressEditable extends PureComponent<StaticAddressEditableProps> {
                         </Button>
                     </div>
                 </div>
+
+                { shouldShowCustomFormFields && <Fieldset id="customFieldset">
+                    {
+                        customFormFields.map(field => (
+                            <AddressFormField
+                                field={ field }
+                                key={ `${field.id}-${field.name}` }
+                                onChange={ this.handleFieldValueChange(field.name) }
+                                parentFieldName="shippingAddress.customFields"
+                            />
+                        ))
+                    }
+                </Fieldset> }
             </LoadingOverlay>
         );
     }
+
+    private handleFieldValueChange: (name: string) => (value: string) => void = name => value => {
+        const { onFieldChange } = this.props;
+        onFieldChange(name, value);
+    };
 }
 
 export default StaticAddressEditable;