Refactor default editing state for customer address fields (#11765)

* Refactor default editing state for customer address fields * Exclude email from invalid props check * Merge conflict
woocommerce · Nov 15, 2023 · 38ae651 · 38ae651
1 parent 681c23a
commit 38ae651
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 41 deletions.
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx
@@ -17,6 +17,7 @@ import type {
 import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
 import { CART_STORE_KEY } from '@woocommerce/block-data';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -29,17 +30,19 @@ const Block = ( {
 	showPhoneField = false,
 	requireCompanyField = false,
 	requirePhoneField = false,
-	forceEditing = false,
 }: {
 	showCompanyField: boolean;
 	showApartmentField: boolean;
 	showPhoneField: boolean;
 	requireCompanyField: boolean;
 	requirePhoneField: boolean;
-	forceEditing?: boolean;
 } ): JSX.Element => {
-	const { billingAddress, setShippingAddress, useBillingAsShipping } =
-		useCheckoutAddress();
+	const {
+		shippingAddress,
+		billingAddress,
+		setShippingAddress,
+		useBillingAsShipping,
+	} = useCheckoutAddress();
 	const { isEditor } = useEditorContext();
 
 	// Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled.
@@ -95,14 +98,28 @@ const Block = ( {
 			cartDataLoaded: store.hasFinishedResolution( 'getCartData' ),
 		};
 	} );
+
+	// Default editing state for CustomerAddress component comes from the current address and whether or not we're in the editor.
+	const hasAddress = !! (
+		billingAddress.address_1 &&
+		( billingAddress.first_name || billingAddress.last_name )
+	);
+	const { email, ...billingAddressWithoutEmail } = billingAddress;
+	const billingMatchesShipping = isShallowEqual(
+		billingAddressWithoutEmail,
+		shippingAddress
+	);
+	const defaultEditingAddress =
+		isEditor || ! hasAddress || billingMatchesShipping;
+
 	return (
 		<>
 			<StoreNoticesContainer context={ noticeContext } />
 			<WrapperComponent>
 				{ cartDataLoaded ? (
 					<CustomerAddress
 						addressFieldsConfig={ addressFieldsConfig }
-						forceEditing={ forceEditing }
+						defaultEditing={ defaultEditingAddress }
 					/>
 				) : null }
 			</WrapperComponent>

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx
@@ -20,10 +20,10 @@ import AddressCard from '../../address-card';
 
 const CustomerAddress = ( {
 	addressFieldsConfig,
-	forceEditing = false,
+	defaultEditing = false,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
-	forceEditing?: boolean;
+	defaultEditing?: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
@@ -33,11 +33,7 @@ const CustomerAddress = ( {
 		useBillingAsShipping,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-	const hasAddress = !! (
-		billingAddress.address_1 &&
-		( billingAddress.first_name || billingAddress.last_name )
-	);
-	const [ editing, setEditing ] = useState( ! hasAddress || forceEditing );
+	const [ editing, setEditing ] = useState( defaultEditing );
 
 	// Forces editing state if store has errors.
 	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
@@ -47,8 +43,9 @@ const CustomerAddress = ( {
 			invalidProps: Object.keys( billingAddress )
 				.filter( ( key ) => {
 					return (
+						key !== 'email' &&
 						store.getValidationError( 'billing_' + key ) !==
-						undefined
+							undefined
 					);
 				} )
 				.filter( Boolean ),

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { useRef, useEffect } from '@wordpress/element';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
@@ -43,21 +42,8 @@ const FrontendBlock = ( {
 		showCompanyField,
 		showPhoneField,
 	} = useCheckoutBlockContext();
-	const {
-		showBillingFields,
-		forcedBillingAddress,
-		useBillingAsShipping,
-		useShippingAsBilling,
-	} = useCheckoutAddress();
-
-	// If initial state was true, force editing to true so address fields are visible if the useShippingAsBilling option is unchecked.
-	const toggledUseShippingAsBilling = useRef( useShippingAsBilling );
-
-	useEffect( () => {
-		if ( useShippingAsBilling ) {
-			toggledUseShippingAsBilling.current = true;
-		}
-	}, [ useShippingAsBilling ] );
+	const { showBillingFields, forcedBillingAddress, useBillingAsShipping } =
+		useCheckoutAddress();
 
 	if ( ! showBillingFields && ! useBillingAsShipping ) {
 		return null;
@@ -86,7 +72,6 @@ const FrontendBlock = ( {
 				showCompanyField={ showCompanyField }
 				showPhoneField={ showPhoneField }
 				requirePhoneField={ requirePhoneField }
-				forceEditing={ toggledUseShippingAsBilling.current }
 			/>
 			{ children }
 		</FormStep>

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx
@@ -109,13 +109,17 @@ const Block = ( {
 		};
 	} );
 
+	// Default editing state for CustomerAddress component comes from the current address and whether or not we're in the editor.
+	const defaultEditingAddress = isEditor || ! hasAddress;
+
 	return (
 		<>
 			<StoreNoticesContainer context={ noticeContext } />
 			<WrapperComponent>
 				{ cartDataLoaded ? (
 					<CustomerAddress
 						addressFieldsConfig={ addressFieldsConfig }
+						defaultEditing={ defaultEditingAddress }
 					/>
 				) : null }
 			</WrapperComponent>

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx
@@ -3,11 +3,7 @@
  */
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
-import {
-	useCheckoutAddress,
-	useStoreEvents,
-	useEditorContext,
-} from '@woocommerce/base-context';
+import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
 import type {
 	ShippingAddress,
 	AddressField,
@@ -24,8 +20,10 @@ import AddressCard from '../../address-card';
 
 const CustomerAddress = ( {
 	addressFieldsConfig,
+	defaultEditing = false,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
+	defaultEditing?: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
@@ -35,12 +33,7 @@ const CustomerAddress = ( {
 		useShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-	const { isEditor } = useEditorContext();
-	const hasAddress = !! (
-		shippingAddress.address_1 &&
-		( shippingAddress.first_name || shippingAddress.last_name )
-	);
-	const [ editing, setEditing ] = useState( ! hasAddress || isEditor );
+	const [ editing, setEditing ] = useState( defaultEditing );
 
 	// Forces editing state if store has errors.
 	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {