Introduce Additional Fields extensibility API.

assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -17,32 +17,22 @@ import {
 import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { useShallowEqual } from '@woocommerce/base-hooks';
-import { defaultAddressFields } from '@woocommerce/settings';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
-import {
-	AddressFormProps,
-	FieldType,
-	FieldConfig,
-	AddressFormFields,
-} from './types';
+import { AddressFormProps, FieldConfig, AddressFormFields } from './types';
 import prepareAddressFields from './prepare-address-fields';
 import validateShippingCountry from './validate-shipping-country';
 import customValidationHandler from './custom-validation-handler';
 
-const defaultFields = Object.keys(
-	defaultAddressFields
-) as unknown as FieldType[];
-
 /**
  * Checkout address form.
  */
 const AddressForm = ( {
 	id = '',
-	fields = defaultFields,
+	fields,
 	fieldConfig = {} as FieldConfig,
 	onChange,
 	type = 'shipping',

assets/js/base/components/cart-checkout/address-form/prepare-address-fields.ts

@@ -7,7 +7,7 @@ import {
 	AddressField,
 	AddressFields,
 	CountryAddressFields,
-	defaultAddressFields,
+	defaultFields,
 	KeyedAddressField,
 	LocaleSpecificAddressField,
 } from '@woocommerce/settings';
@@ -114,7 +114,7 @@ const prepareAddressFields = (
 
 	return fields
 		.map( ( field ) => {
-			const defaultConfig = defaultAddressFields[ field ] || {};
+			const defaultConfig = defaultFields[ field ] || {};
 			const localeConfig = localeConfigs[ field ] || {};
 			const fieldConfig = fieldConfigs[ field ] || {};
 

assets/js/base/components/cart-checkout/address-form/test/index.js

@@ -5,6 +5,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CheckoutProvider } from '@woocommerce/base-context';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
+import { ADDRESS_FIELDS_KEYS } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -81,15 +82,14 @@ const inputAddress = async ( {
 
 describe( 'AddressForm Component', () => {
 	const WrappedAddressForm = ( { type } ) => {
-		const { defaultAddressFields, setShippingAddress, shippingAddress } =
-			useCheckoutAddress();
+		const { setShippingAddress, shippingAddress } = useCheckoutAddress();
 
 		return (
 			<AddressForm
 				type={ type }
 				onChange={ setShippingAddress }
 				values={ shippingAddress }
-				fields={ Object.keys( defaultAddressFields ) }
+				fields={ ADDRESS_FIELDS_KEYS }
 			/>
 		);
 	};

assets/js/base/context/hooks/use-checkout-address.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import {
-	defaultAddressFields,
+	defaultFields,
 	AddressFields,
 	ShippingAddress,
 	BillingAddress,
@@ -26,7 +26,7 @@ interface CheckoutAddress {
 	setEmail: ( value: string ) => void;
 	useShippingAsBilling: boolean;
 	setUseShippingAsBilling: ( useShippingAsBilling: boolean ) => void;
-	defaultAddressFields: AddressFields;
+	defaultFields: AddressFields;
 	showShippingFields: boolean;
 	showBillingFields: boolean;
 	forcedBillingAddress: boolean;
@@ -74,7 +74,7 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 		setShippingAddress,
 		setBillingAddress,
 		setEmail,
-		defaultAddressFields,
+		defaultFields,
 		useShippingAsBilling,
 		setUseShippingAsBilling: __internalSetUseShippingAsBilling,
 		needsShipping,

assets/js/base/utils/address.ts

@@ -7,16 +7,12 @@ import type {
 	CartResponseBillingAddress,
 	CartResponseShippingAddress,
 } from '@woocommerce/types';
-import {
-	AddressFields,
-	defaultAddressFields,
-	ShippingAddress,
-	BillingAddress,
-} from '@woocommerce/settings';
+import { ShippingAddress, BillingAddress } from '@woocommerce/settings';
 import { decodeEntities } from '@wordpress/html-entities';
 import {
 	SHIPPING_COUNTRIES,
 	SHIPPING_STATES,
+	ADDRESS_FIELDS_KEYS,
 } from '@woocommerce/block-settings';
 
 /**
@@ -26,10 +22,9 @@ export const isSameAddress = < T extends ShippingAddress | BillingAddress >(
 	address1: T,
 	address2: T
 ): boolean => {
-	return Object.keys( defaultAddressFields ).every(
-		( field: string ) =>
-			address1[ field as keyof T ] === address2[ field as keyof T ]
-	);
+	return Object.keys( ADDRESS_FIELDS_KEYS ).every( ( field: string ) => {
+		return address1[ field as keyof T ] === address2[ field as keyof T ];
+	} );
 };
 
 /**
@@ -94,10 +89,11 @@ export const emptyHiddenAddressFields = <
 >(
 	address: T
 ): T => {
-	const fields = Object.keys(
-		defaultAddressFields
-	) as ( keyof AddressFields )[];
-	const addressFields = prepareAddressFields( fields, {}, address.country );
+	const addressFields = prepareAddressFields(
+		ADDRESS_FIELDS_KEYS,
+		{},
+		address.country
+	);
 	const newAddress = Object.assign( {}, address ) as T;
 
 	addressFields.forEach( ( { key = '', hidden = false } ) => {
@@ -160,10 +156,11 @@ export const isAddressComplete = (
 	if ( ! address.country ) {
 		return false;
 	}
-	const fields = Object.keys(
-		defaultAddressFields
-	) as ( keyof AddressFields )[];
-	const addressFields = prepareAddressFields( fields, {}, address.country );
+	const addressFields = prepareAddressFields(
+		ADDRESS_FIELDS_KEYS,
+		{},
+		address.country
+	);
 
 	return addressFields.every(
 		( { key = '', hidden = false, required = false } ) => {

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx

@@ -11,6 +11,7 @@
 } from '@woocommerce/settings';
 import { useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { ADDRESS_FIELDS_KEYS } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -26,7 +27,6 @@
 	defaultEditing?: boolean;
 } ) => {
 	const {
-		defaultAddressFields,
 		billingAddress,
 		setShippingAddress,
 		setBillingAddress,
@@ -58,10 +58,6 @@
 		}
 	}, [ editing, hasValidationErrors, invalidProps.length ] );
 
-	const addressFieldKeys = Object.keys(
-		defaultAddressFields
-	) as ( keyof AddressFields )[];
-
 	const onChangeAddress = useCallback(
 		( values: Partial< BillingAddress > ) => {
 			setBillingAddress( values );
@@ -101,17 +97,16 @@
 					type="billing"
 					onChange={ onChangeAddress }
 					values={ billingAddress }
-					fields={ addressFieldKeys }
+					fields={ ADDRESS_FIELDS_KEYS }
 					fieldConfig={ addressFieldsConfig }
 				/>
 			</>
 		),
 		[
-			addressFieldKeys,
 			addressFieldsConfig,
 			billingAddress,
 			onChangeAddress,
 		]
 	);
 
 	return (

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx

@@ -11,6 +11,7 @@ import type {
 } from '@woocommerce/settings';
 import { useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { ADDRESS_FIELDS_KEYS } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -26,7 +27,6 @@ const CustomerAddress = ( {
 	defaultEditing?: boolean;
 } ) => {
 	const {
-		defaultAddressFields,
 		shippingAddress,
 		setShippingAddress,
 		setBillingAddress,
@@ -57,9 +57,6 @@ const CustomerAddress = ( {
 		}
 	}, [ editing, hasValidationErrors, invalidProps.length ] );
 
-	const addressFieldKeys = Object.keys(
-		defaultAddressFields
-	) as ( keyof AddressFields )[];
 	const onChangeAddress = useCallback(
 		( values: Partial< ShippingAddress > ) => {
 			setShippingAddress( values );
@@ -98,16 +95,11 @@ const CustomerAddress = ( {
 				type="shipping"
 				onChange={ onChangeAddress }
 				values={ shippingAddress }
-				fields={ addressFieldKeys }
+				fields={ ADDRESS_FIELDS_KEYS }
 				fieldConfig={ addressFieldsConfig }
 			/>
 		),
-		[
-			addressFieldKeys,
-			addressFieldsConfig,
-			onChangeAddress,
-			shippingAddress,
-		]
+		[ addressFieldsConfig, onChangeAddress, shippingAddress ]
 	);
 
 	return (

assets/js/data/cart/utils.ts

@@ -45,7 +45,8 @@ export const shippingAddressHasValidationErrors = () => {
 
 export type BaseAddressKey =
 	| keyof CartBillingAddress
-	| keyof CartShippingAddress;
+	| keyof CartShippingAddress
+	| string; // string here because custom checkout fields can be added with arbitrary keys.
 
 /**
  * Normalizes address values before push.
@@ -82,12 +83,23 @@ export const getDirtyKeys = <
 		previousAddress
 	) as BaseAddressKey[];
 
-	return previousAddressKeys.filter( ( key: BaseAddressKey ) => {
-		return (
-			normalizeAddressProp( key, previousAddress[ key ] ) !==
-			normalizeAddressProp( key, address[ key ] )
-		);
-	} );
+	const addedKeys = Object.keys( address ).filter(
+		( key ) => ! previousAddressKeys.includes( key )
+	);
+
+	const removedKeys = previousAddressKeys.filter(
+		( key ) => ! Object.keys( address ).includes( key )
+	);
+
+	return previousAddressKeys
+		.filter( ( key: BaseAddressKey ) => {
+			return (
+				normalizeAddressProp( key, previousAddress[ key ] ) !==
+				normalizeAddressProp( key, address[ key ] )
+			);
+		} )
+		.concat( removedKeys )
+		.concat( addedKeys );
 };
 
 /**

assets/js/settings/blocks/constants.ts

@@ -57,6 +57,12 @@ type CountryData = {
 	locale: Record< string, LocaleSpecificAddressField >;
 };
 
+type FieldsLocations = {
+	address: string[];
+	contact: string[];
+	additional: string[];
+};
+
 // Contains country names.
 const countries = getSetting< Record< string, string > >( 'countries', {} );
 
@@ -111,3 +117,35 @@ export const COUNTRY_LOCALE = Object.fromEntries(
 		return [ countryCode, countryData[ countryCode ].locale || [] ];
 	} )
 );
+
+const defaultFieldsLocations: FieldsLocations = {
+	address: [
+		'first_name',
+		'last_name',
+		'company',
+		'address_1',
+		'address_2',
+		'city',
+		'postcode',
+		'country',
+		'state',
+		'phone',
+	],
+	contact: [ 'email' ],
+	additional: [],
+};
+
+export const ADDRESS_FIELDS_KEYS = getSetting< FieldsLocations >(
+	'addressFieldsLocations',
+	defaultFieldsLocations
+).address;
+
+export const CONTACT_FIELDS_KEYS = getSetting< FieldsLocations >(
+	'addressFieldsLocations',
+	defaultFieldsLocations
+).contact;
+
+export const ADDITIONAL_FIELDS_KEYS = getSetting< FieldsLocations >(
+	'addressFieldsLocations',
+	defaultFieldsLocations
+).additional;