Sync shipping address with billing address when shipping address fields are disabled

assets/js/base/context/cart-checkout/checkout/index.js

@@ -3,7 +3,7 @@
  */
 import { PaymentMethodDataProvider } from '../payment-methods';
 import { ShippingDataProvider } from '../shipping';
-import { BillingDataProvider } from '../billing';
+import { CustomerDataProvider } from '../customer';
 import { CheckoutStateProvider } from '../checkout-state';
 import CheckoutProcessor from './processor';
 
@@ -27,14 +27,14 @@ export const CheckoutProvider = ( {
 } ) => {
 	return (
 		<CheckoutStateProvider redirectUrl={ redirectUrl } isCart={ isCart }>
-			<BillingDataProvider>
+			<CustomerDataProvider>
 				<ShippingDataProvider>
 					<PaymentMethodDataProvider>
 						{ children }
 						<CheckoutProcessor />
 					</PaymentMethodDataProvider>
 				</ShippingDataProvider>
-			</BillingDataProvider>
+			</CustomerDataProvider>
 		</CheckoutStateProvider>
 	);
 };

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

@@ -6,7 +6,7 @@ import triggerFetch from '@wordpress/api-fetch';
 import {
 	useCheckoutContext,
 	useShippingDataContext,
-	useBillingDataContext,
+	useCustomerDataContext,
 	usePaymentMethodDataContext,
 	useValidationContext,
 } from '@woocommerce/base-context';
@@ -20,31 +20,9 @@ import {
 import { useStoreCart, useStoreNotices } from '@woocommerce/base-hooks';
 
 /**
- * @typedef {import('@woocommerce/type-defs/payments').PaymentDataItem} PaymentDataItem
+ * Internal dependencies
  */
-
-/**
- * Utility function for preparing payment data for the request.
- *
- * @param {Object}  paymentData          Arbitrary payment data provided by the payment method.
- * @param {boolean} shouldSave           Whether to save the payment method info to user account.
- * @param {Object}  activePaymentMethod  The current active payment method.
- *
- * @return {PaymentDataItem[]} Returns the payment data as an array of
- *                             PaymentDataItem objects.
- */
-const preparePaymentData = ( paymentData, shouldSave, activePaymentMethod ) => {
-	const apiData = Object.keys( paymentData ).map( ( property ) => {
-		const value = paymentData[ property ];
-		return { key: property, value };
-	}, [] );
-	const savePaymentMethodKey = `wc-${ activePaymentMethod }-new-payment-method`;
-	apiData.push( {
-		key: savePaymentMethodKey,
-		value: shouldSave,
-	} );
-	return apiData;
-};
+import { preparePaymentData } from './utils';
 
 /**
  * CheckoutProcessor component.
@@ -66,8 +44,8 @@ const CheckoutProcessor = () => {
 		shouldCreateAccount,
 	} = useCheckoutContext();
 	const { hasValidationErrors } = useValidationContext();
-	const { shippingAddress, shippingErrorStatus } = useShippingDataContext();
-	const { billingData } = useBillingDataContext();
+	const { shippingErrorStatus } = useShippingDataContext();
+	const { billingData, shippingAddress } = useCustomerDataContext();
 	const { cartNeedsPayment, receiveCart } = useStoreCart();
 	const {
 		activePaymentMethod,

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

@@ -0,0 +1,30 @@
+/**
+ * @typedef {import('@woocommerce/type-defs/payments').PaymentDataItem} PaymentDataItem
+ */
+
+/**
+ * Utility function for preparing payment data for the request.
+ *
+ * @param {Object}  paymentData          Arbitrary payment data provided by the payment method.
+ * @param {boolean} shouldSave           Whether to save the payment method info to user account.
+ * @param {Object}  activePaymentMethod  The current active payment method.
+ *
+ * @return {PaymentDataItem[]} Returns the payment data as an array of
+ *                             PaymentDataItem objects.
+ */
+export const preparePaymentData = (
+	paymentData,
+	shouldSave,
+	activePaymentMethod
+) => {
+	const apiData = Object.keys( paymentData ).map( ( property ) => {
+		const value = paymentData[ property ];
+		return { key: property, value };
+	}, [] );
+	const savePaymentMethodKey = `wc-${ activePaymentMethod }-new-payment-method`;
+	apiData.push( {
+		key: savePaymentMethodKey,
+		value: shouldSave,
+	} );
+	return apiData;
+};

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

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+import { useCustomerData } from '@woocommerce/base-hooks';
+
+/**
+ * @typedef {import('@woocommerce/type-defs/contexts').CustomerDataContext} CustomerDataContext
+ * @typedef {import('@woocommerce/type-defs/billing').BillingData} BillingData
+ * @typedef {import('@woocommerce/type-defs/shipping').ShippingAddress} ShippingAddress
+ */
+
+/**
+ * @type {BillingData}
+ */
+const defaultBillingData = {
+	first_name: '',
+	last_name: '',
+	company: '',
+	address_1: '',
+	address_2: '',
+	city: '',
+	state: '',
+	postcode: '',
+	country: '',
+	email: '',
+	phone: '',
+};
+
+/**
+ * @type {ShippingAddress}
+ */
+export const defaultShippingAddress = {
+	first_name: '',
+	last_name: '',
+	company: '',
+	address_1: '',
+	address_2: '',
+	city: '',
+	state: '',
+	postcode: '',
+	country: '',
+};
+
+/**
+ * Creates CustomerDataContext
+ */
+const CustomerDataContext = createContext( {
+	billingData: defaultBillingData,
+	shippingAddress: defaultShippingAddress,
+	setBillingData: () => null,
+	setShippingAddress: () => null,
+} );
+
+/**
+ * @return {CustomerDataContext} Returns data and functions related to customer billing and shipping addresses.
+ */
+export const useCustomerDataContext = () => {
+	return useContext( CustomerDataContext );
+};
+
+/**
+ * Customer Data context provider.
+ *
+ * @param {Object}  props          Incoming props for the provider.
+ * @param {Object}  props.children The children being wrapped.
+ */
+export const CustomerDataProvider = ( { children } ) => {
+	const {
+		billingData,
+		shippingAddress,
+		setBillingData,
+		setShippingAddress,
+	} = useCustomerData();
+
+	/**
+	 * @type {CustomerDataContext}
+	 */
+	const contextValue = {
+		billingData,
+		shippingAddress,
+		setBillingData,
+		setShippingAddress,
+	};
+
+	return (
+		<CustomerDataContext.Provider value={ contextValue }>
+			{ children }
+		</CustomerDataContext.Provider>
+	);
+};

assets/js/base/context/cart-checkout/index.js

@@ -1,6 +1,6 @@
 export * from './payment-methods';
 export * from './shipping';
-export * from './billing';
+export * from './customer';
 export * from './checkout';
 export * from './cart';
 export { useCheckoutContext } from './checkout-state';

assets/js/base/context/cart-checkout/payment-methods/actions.js

@@ -3,10 +3,6 @@
  */
 import { ACTION_TYPES } from './constants';
 
-/**
- * @typedef {import('@woocommerce/type-defs/cart').CartBillingData} CartBillingData
- */
-
 const {
 	ERROR,
 	FAILED,

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

@@ -37,7 +37,7 @@ import {
 	usePaymentMethods,
 	useExpressPaymentMethods,
 } from './use-payment-method-registration';
-import { useBillingDataContext } from '../billing';
+import { useCustomerDataContext } from '../customer';
 import { useCheckoutContext } from '../checkout-state';
 import { useShippingDataContext } from '../shipping';
 import {
@@ -116,7 +116,7 @@ const getCustomerPaymentMethods = ( availablePaymentMethods = [] ) => {
  *                                           provider.
  */
 export const PaymentMethodDataProvider = ( { children } ) => {
-	const { setBillingData } = useBillingDataContext();
+	const { setBillingData } = useCustomerDataContext();
 	const {
 		isProcessing: checkoutIsProcessing,
 		isIdle: checkoutIsIdle,

assets/js/base/context/cart-checkout/shipping/constants.js

@@ -1,6 +1,6 @@
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').ShippingErrorTypes} ShippingErrorTypes
- * @typedef {import('@woocommerce/type-defs/cart').CartShippingAddress} CartShippingAddress
+ * @typedef {import('@woocommerce/type-defs/shipping').ShippingAddress} ShippingAddress
  * @typedef {import('@woocommerce/type-defs/contexts').ShippingDataContext} ShippingDataContext
  */
 
@@ -20,7 +20,7 @@ export const shippingErrorCodes = {
 };
 
 /**
- * @type {CartShippingAddress}
+ * @type {ShippingAddress}
  */
 export const DEFAULT_SHIPPING_ADDRESS = {
 	first_name: '',

assets/js/base/context/cart-checkout/shipping/index.js

@@ -9,12 +9,11 @@ import {
 	useMemo,
 	useRef,
 } from '@wordpress/element';
+import { useStoreCart, useSelectShippingRate } from '@woocommerce/base-hooks';
 import {
-	useShippingAddress,
-	useStoreCart,
-	useSelectShippingRate,
-} from '@woocommerce/base-hooks';
-import { useCheckoutContext } from '@woocommerce/base-context';
+	useCheckoutContext,
+	useCustomerDataContext,
+} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
@@ -83,6 +82,7 @@ const hasInvalidShippingAddress = ( errors ) => {
  */
 export const ShippingDataProvider = ( { children } ) => {
 	const { dispatchActions } = useCheckoutContext();
+	const { shippingAddress, setShippingAddress } = useCustomerDataContext();
 	const {
 		cartNeedsShipping: needsShipping,
 		cartHasCalculatedShipping: hasCalculatedShipping,
@@ -95,7 +95,6 @@ export const ShippingDataProvider = ( { children } ) => {
 		NONE
 	);
 	const [ observers, subscriber ] = useReducer( emitReducer, {} );
-	const { shippingAddress, setShippingAddress } = useShippingAddress();
 	const currentObservers = useRef( observers );
 	const {
 		selectShippingRate: setSelectedRates,