fix(Address): only emit the Address form data for valid schema fields

.changeset/cold-dodos-taste.md

@@ -0,0 +1,5 @@
+---
+"@adyen/adyen-web": patch
+---
+
+Fix internal `Address` component to only emit the Address form data for schema specified fields.

packages/lib/src/components/BaseElement.test.ts

@@ -34,22 +34,6 @@ describe('BaseElement', () => {
             expect(baseElement.data).toEqual({ clientStateDataIndicator: true });
             expect(spy).toHaveBeenCalled();
         });
-
-        test('return correct billingAddress data', () => {
-            const Element = class extends BaseElement<{}> {
-                constructor(props) {
-                    super(props);
-                }
-                protected formatData(): any {
-                    return { billingAddress: { firstName: 'bla' } };
-                }
-            };
-            let element;
-            element = new Element({ type: 'riverty' });
-            expect(element.data).toEqual({ clientStateDataIndicator: true, billingAddress: { firstName: 'bla' } });
-            element = new Element({ type: 'card' });
-            expect(element.data).toEqual({ clientStateDataIndicator: true, billingAddress: {} });
-        });
     });
 
     describe('render', () => {

packages/lib/src/components/BaseElement.ts

@@ -65,14 +65,6 @@ class BaseElement<P extends BaseElementProps> {
             componentData.paymentMethod.checkoutAttemptId = checkoutAttemptId;
         }
 
-        // Workaround, to be fixed properly
-        // Remove the firstName & lastName in the billingAddress for non Riverty components
-        // @ts-ignore type exists
-        if (this.props.type !== 'riverty' && componentData.billingAddress) {
-            const { firstName, lastName, ...rest } = componentData.billingAddress;
-            componentData.billingAddress = { ...rest };
-        }
-
         return {
             ...(clientData && { riskData: { clientData } }),
             ...(order && { order: { orderData: order.orderData, pspReference: order.pspReference } }),

packages/lib/src/components/internal/Address/Address.test.tsx

@@ -40,7 +40,7 @@ describe('Address', () => {
             postalCode: '95014',
             city: 'Cupertino',
             houseNumberOrName: '1',
-            country: 'US',
+            country: 'NL',
             stateOrProvince: 'CA'
         };
 
@@ -171,4 +171,26 @@ describe('Address', () => {
         wrapper.update(null);
         expect(receivedData.stateOrProvince).toBe(undefined);
     });
+
+    test('does not include fields if they are not part of valid schema fields', () => {
+        const data = {
+            street: '1 Infinite Loop',
+            postalCode: '95014',
+            country: 'NL',
+            stateOrProvince: 'CA',
+            firstName: 'dummy',
+            invalidField: 'dummy'
+        };
+
+        const onChangeMock = jest.fn();
+        getWrapper({ data, onChange: onChangeMock });
+        const lastOnChangeCall = onChangeMock.mock.calls.pop();
+        const receivedData = lastOnChangeCall[0].data;
+        expect(receivedData.street).toBe(data.street);
+        expect(receivedData.postalCode).toBe(data.postalCode);
+        expect(receivedData.country).toBe(data.country);
+        expect(receivedData.stateOrProvince).toBe(data.stateOrProvince);
+        expect(receivedData.firstName).toBe(undefined);
+        expect(receivedData.invalidField).toBe(undefined);
+    });
 });

packages/lib/src/components/internal/Address/Address.tsx

@@ -120,7 +120,11 @@ export default function Address(props: AddressProps) {
 
     useEffect((): void => {
         const optionalFields = specifications.getOptionalFieldsForCountry(data.country);
+        // Country specific / default schema fields, include both required and optional fields.
+        const validSchemaFields = specifications.getAddressSchemaForCountryFlat(data.country);
         const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {
+            if (!validSchemaFields?.includes(cur)) return acc;
+
             const isOptional = optionalFields.includes(cur);
             const isRequired = requiredFields.includes(cur);
             const newValue = data[cur];

packages/lib/src/components/internal/Address/Specifications.ts

@@ -79,7 +79,6 @@ class Specifications {
      * Returns an array with the address schema of the selected country or the default address schema
      * Flat version of getAddressSchemaForCountry
      * @param country - The selected country
-     * @param mode - Address schema mode, can be 'full', 'partial' or 'none'
      * @returns Array
      */
     getAddressSchemaForCountryFlat(country: string): AddressField[] {