Rename billingData to billingAddress (#6369)

* Rename billingData to billingAddress

* Add unit test to ensure billingData remains accessible

* add integration tests for slots

* Keep billingData in usePaymentMethodRegistration for backwards compatibility

* Gate `billingData` in deprecation gate

* Replace deprecation call

Co-authored-by: Nadir Seghir <[email protected]>

Author: nielslange

assets/js/base/context/hooks/cart/test/use-store-cart.js

@@ -39,6 +39,19 @@ describe( 'useStoreCart', () => {
 		cartIsLoading: false,
 		cartItemErrors: [],
 		cartErrors: [],
+		billingData: {
+			first_name: '',
+			last_name: '',
+			company: '',
+			address_1: '',
+			address_2: '',
+			city: '',
+			state: '',
+			postcode: '',
+			country: '',
+			email: '',
+			phone: '',
+		},
 		billingAddress: {
 			first_name: '',
 			last_name: '',
@@ -108,6 +121,7 @@ describe( 'useStoreCart', () => {
 		cartIsLoading: mockCartIsLoading,
 		cartErrors: mockCartErrors,
 		cartFees: [],
+		billingData: {},
 		billingAddress: {},
 		shippingAddress: mockShippingAddress,
 		shippingRates: [],

assets/js/base/context/hooks/cart/use-store-cart.ts

@@ -159,6 +159,7 @@ export const useStoreCart = (
 					cartTotals: previewCart.totals,
 					cartIsLoading: false,
 					cartErrors: EMPTY_CART_ERRORS,
+					billingData: defaultBillingAddress,
 					billingAddress: defaultBillingAddress,
 					shippingAddress: defaultShippingAddress,
 					extensions: EMPTY_EXTENSIONS,
@@ -220,6 +221,7 @@ export const useStoreCart = (
 				cartTotals,
 				cartIsLoading,
 				cartErrors,
+				billingData: emptyHiddenAddressFields( billingAddress ),
 				billingAddress: emptyHiddenAddressFields( billingAddress ),
 				shippingAddress: emptyHiddenAddressFields( shippingAddress ),
 				extensions: cartData.extensions,

assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts

@@ -65,7 +65,7 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 		needsShipping,
 	} = useShippingData();
 	const {
-		billingData,
+		billingAddress,
 		shippingAddress,
 		setShippingAddress,
 	} = useCustomerDataContext();
@@ -111,7 +111,8 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 		activePaymentMethod,
 		billing: {
 			appliedCoupons,
-			billingData,
+			billingAddress,
+			billingData: billingAddress,
 			cartTotal: currentCartTotal.current,
 			cartTotalItems: currentCartTotals.current,
 			currency: getCurrencyFromPriceResponse( cartTotals ),

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

@@ -19,9 +19,9 @@ import { useShippingData } from './shipping/use-shipping-data';
 
 interface CheckoutAddress {
 	shippingAddress: ShippingAddress;
-	billingData: BillingAddress;
+	billingAddress: BillingAddress;
 	setShippingAddress: ( data: Partial< EnteredAddress > ) => void;
-	setBillingData: ( data: Partial< EnteredAddress > ) => void;
+	setBillingAddress: ( data: Partial< EnteredAddress > ) => void;
 	setEmail: ( value: string ) => void;
 	setBillingPhone: ( value: string ) => void;
 	setShippingPhone: ( value: string ) => void;
@@ -42,26 +42,26 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 		setUseShippingAsBilling,
 	} = useCheckoutContext();
 	const {
-		billingData,
-		setBillingData,
+		billingAddress,
+		setBillingAddress,
 		shippingAddress,
 		setShippingAddress,
 	} = useCustomerData();
 
 	const setEmail = useCallback(
 		( value ) =>
-			void setBillingData( {
+			void setBillingAddress( {
 				email: value,
 			} ),
-		[ setBillingData ]
+		[ setBillingAddress ]
 	);
 
 	const setBillingPhone = useCallback(
 		( value ) =>
-			void setBillingData( {
+			void setBillingAddress( {
 				phone: value,
 			} ),
-		[ setBillingData ]
+		[ setBillingAddress ]
 	);
 
 	const setShippingPhone = useCallback(
@@ -74,9 +74,9 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 
 	return {
 		shippingAddress,
-		billingData,
+		billingAddress,
 		setShippingAddress,
-		setBillingData,
+		setBillingAddress,
 		setEmail,
 		setBillingPhone,
 		setShippingPhone,

assets/js/base/context/hooks/use-customer-data.ts

@@ -7,9 +7,9 @@ import type { BillingAddress, ShippingAddress } from '@woocommerce/settings';
 
 export interface CustomerDataType {
 	isInitialized: boolean;
-	billingData: BillingAddress;
+	billingAddress: BillingAddress;
 	shippingAddress: ShippingAddress;
-	setBillingData: ( data: Partial< BillingAddress > ) => void;
+	setBillingAddress: ( data: Partial< BillingAddress > ) => void;
 	setShippingAddress: ( data: Partial< ShippingAddress > ) => void;
 }
 
@@ -24,13 +24,13 @@ export const useCustomerData = (): CustomerDataType => {
 			isInitialized: store.hasFinishedResolution( 'getCartData' ),
 		};
 	} );
-	const { setShippingAddress, setBillingData } = useDispatch( storeKey );
+	const { setShippingAddress, setBillingAddress } = useDispatch( storeKey );
 
 	return {
 		isInitialized,
-		billingData: customerData.billingData,
+		billingAddress: customerData.billingAddress,
 		shippingAddress: customerData.shippingAddress,
-		setBillingData,
+		setBillingAddress,
 		setShippingAddress,
 	};
 };

assets/js/base/context/providers/cart-checkout/checkout-processor.js

@@ -47,7 +47,7 @@ const CheckoutProcessor = () => {
 	} = useCheckoutContext();
 	const { hasValidationErrors } = useValidationContext();
 	const { shippingErrorStatus } = useShippingDataContext();
-	const { billingData, shippingAddress } = useCustomerDataContext();
+	const { billingAddress, shippingAddress } = useCustomerDataContext();
 	const { cartNeedsPayment, cartNeedsShipping, receiveCart } = useStoreCart();
 	const {
 		activePaymentMethod,
@@ -60,7 +60,7 @@ const CheckoutProcessor = () => {
 	} = usePaymentMethodDataContext();
 	const { setIsSuppressed } = useStoreNoticesContext();
 	const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
-	const currentBillingData = useRef( billingData );
+	const currentBillingAddress = useRef( billingAddress );
 	const currentShippingAddress = useRef( shippingAddress );
 	const currentRedirectUrl = useRef( redirectUrl );
 	const [ isProcessingOrder, setIsProcessingOrder ] = useState( false );
@@ -105,10 +105,10 @@ const CheckoutProcessor = () => {
 	] );
 
 	useEffect( () => {
-		currentBillingData.current = billingData;
+		currentBillingAddress.current = billingAddress;
 		currentShippingAddress.current = shippingAddress;
 		currentRedirectUrl.current = redirectUrl;
-	}, [ billingData, shippingAddress, redirectUrl ] );
+	}, [ billingAddress, shippingAddress, redirectUrl ] );
 
 	const checkValidation = useCallback( () => {
 		if ( hasValidationErrors ) {
@@ -184,7 +184,7 @@ const CheckoutProcessor = () => {
 
 		const data = {
 			billing_address: emptyHiddenAddressFields(
-				currentBillingData.current
+				currentBillingAddress.current
 			),
 			customer_note: orderNotes,
 			create_account: shouldCreateAccount,

assets/js/base/context/providers/cart-checkout/customer/constants.ts

@@ -3,7 +3,7 @@
  */
 import type { CustomerDataType } from '../../../hooks/use-customer-data';
 
-export const defaultBillingData: CustomerDataType[ 'billingData' ] = {
+export const defaultBillingAddress: CustomerDataType[ 'billingAddress' ] = {
 	first_name: '',
 	last_name: '',
 	company: '',

assets/js/base/context/providers/cart-checkout/customer/index.tsx

@@ -6,17 +6,17 @@ import { createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { defaultBillingData, defaultShippingAddress } from './constants';
+import { defaultBillingAddress, defaultShippingAddress } from './constants';
 import {
 	useCustomerData,
 	CustomerDataType,
 } from '../../../hooks/use-customer-data';
 
 const CustomerDataContext = createContext< CustomerDataType >( {
 	isInitialized: false,
-	billingData: defaultBillingData,
+	billingAddress: defaultBillingAddress,
 	shippingAddress: defaultShippingAddress,
-	setBillingData: () => void 0,
+	setBillingAddress: () => void 0,
 	setShippingAddress: () => void 0,
 } );
 

assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts

@@ -45,8 +45,8 @@ export const DEFAULT_PAYMENT_METHOD_DATA: PaymentMethodDataContextType = {
 		error: ( errorMessage: string ) => void errorMessage,
 		failed: ( errorMessage, paymentMethodData ) =>
 			void [ errorMessage, paymentMethodData ],
-		success: ( paymentMethodData, billingData ) =>
-			void [ paymentMethodData, billingData ],
+		success: ( paymentMethodData, billingAddress ) =>
+			void [ paymentMethodData, billingAddress ],
 	} ),
 	currentStatus: {
 		isPristine: true,

assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx

@@ -283,7 +283,7 @@ export const PaymentMethodDataProvider = ( {
 				if ( successResponse && ! errorResponse ) {
 					setPaymentStatus().success(
 						successResponse?.meta?.paymentMethodData,
-						successResponse?.meta?.billingData,
+						successResponse?.meta?.billingAddress,
 						successResponse?.meta?.shippingData
 					);
 				} else if ( errorResponse && isFailResponse( errorResponse ) ) {
@@ -302,7 +302,7 @@ export const PaymentMethodDataProvider = ( {
 					setPaymentStatus().failed(
 						errorResponse?.message,
 						errorResponse?.meta?.paymentMethodData,
-						errorResponse?.meta?.billingData
+						errorResponse?.meta?.billingAddress
 					);
 				} else if ( errorResponse ) {
 					if (