Store billing address to local state and persist globally to prevent loss of data (#2374)

* Remove unused shippingAsBilling prop from billing data context

* Move functions out of component and add docblocks

* Local address state

* Refactor into new custom hook

* Remove TODO and code fixed in core

* useShallowEqual to prevent updates on all field changes

* Fix stale validation errors

* cleanup

* Should be setting local state not global state for email and phone

* Combine useEffects and pass correct deps

* Update assets/js/base/hooks/checkout/use-checkout-address.js

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

* Prettier

* Move validation update check into updateValidationError

* Fix state updaters

* Fix context definition for setShippingAddress

* Fix validation updates

* errorId dep

* Reapply changes to checkout block

* Update equality checks

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

Author: mikejolley

assets/js/base/components/select/validated.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useEffect } from 'react';
 import { useValidationContext } from '@woocommerce/base-context';
+import { useShallowEqual } from '@woocommerce/base-hooks';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
@@ -30,13 +31,18 @@ const ValidatedSelect = ( {
 } ) => {
 	const selectId = id || 'select-' + instanceId;
 	errorId = errorId || selectId;
+
+	// Prevents re-renders when value is an object, e.g. {key: "NY", name: "New York"}
+	const currentValue = useShallowEqual( value );
+
 	const {
 		getValidationError,
 		setValidationErrors,
 		clearValidationError,
 	} = useValidationContext();
+
 	const validateSelect = () => {
-		if ( ! required || value ) {
+		if ( ! required || currentValue ) {
 			clearValidationError( errorId );
 		} else {
 			setValidationErrors( {
@@ -50,14 +56,14 @@ const ValidatedSelect = ( {
 
 	useEffect( () => {
 		validateSelect();
-	}, [ value ] );
+	}, [ currentValue ] );
 
 	// Remove validation errors when unmounted.
 	useEffect( () => {
 		return () => {
 			clearValidationError( errorId );
 		};
-	}, [] );
+	}, [ errorId ] );
 
 	const error = getValidationError( errorId ) || {};
 
@@ -68,7 +74,7 @@ const ValidatedSelect = ( {
 				'has-error': error.message && ! error.hidden,
 			} ) }
 			feedback={ <ValidationInputError propertyName={ errorId } /> }
-			value={ value }
+			value={ currentValue }
 			{ ...rest }
 		/>
 	);

assets/js/base/components/state-input/state-input.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useCallback, useEffect } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,15 +30,7 @@ const StateInput = ( {
 				name: decodeEntities( countryStates[ key ] ),
 		  } ) )
 		: [];
-	// @todo: remove this code block when issue https://github.com/woocommerce/woocommerce/issues/25854 is merged
-	// Defaults to the first state when selecting a country with states, this is here
-	// until a bug in Woo core is fixed.
-	// see: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/1919
-	useEffect( () => {
-		if ( ! value && options.length ) {
-			onChangeState( options[ 0 ].key );
-		}
-	}, [ country ] );
+
 	/**
 	 * Handles state selection onChange events. Finds a matching state by key or value.
 	 *

assets/js/base/components/text-input/validated.js

@@ -37,6 +37,7 @@ const ValidatedTextInput = ( {
 
 	const textInputId = id || 'textinput-' + instanceId;
 	errorId = errorId || textInputId;
+
 	const validateInput = ( errorsHidden = true ) => {
 		if ( inputRef.current.checkValidity() ) {
 			clearValidationError( errorId );
@@ -63,7 +64,7 @@ const ValidatedTextInput = ( {
 		return () => {
 			clearValidationError( errorId );
 		};
-	}, [] );
+	}, [ errorId ] );
 
 	const errorMessage = getValidationError( errorId ) || {};
 	const hasError = errorMessage.message && ! errorMessage.hidden;

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

@@ -27,7 +27,6 @@ export const DEFAULT_BILLING_DATA = {
 	country: '',
 	email: '',
 	phone: '',
-	shippingAsBilling: true,
 };
 
 const billingAddress = mapValues( checkoutData.billing_address, ( value ) =>

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

@@ -8,6 +8,7 @@ import {
 	useState,
 } from '@wordpress/element';
 import { omit, pickBy } from 'lodash';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * @typedef { import('@woocommerce/type-defs/contexts').ValidationContext } ValidationContext
@@ -49,7 +50,29 @@ export const ValidationContextProvider = ( { children } ) => {
 	 *
 	 * @return {Object} The error object for the given property.
 	 */
-	const getValidationError = ( property ) => validationErrors[ property ];
+	const getValidationError = useCallback(
+		( property ) => validationErrors[ property ],
+		[ validationErrors ]
+	);
+
+	/**
+	 * Provides an id for the validation error that can be used to fill out
+	 * aria-describedby attribute values.
+	 *
+	 * @param {string} errorId The input css id the validation error is related
+	 *                         to.
+	 * @return {string} The id to use for the validation error container.
+	 */
+	const getValidationErrorId = useCallback(
+		( errorId ) => {
+			const error = validationErrors[ errorId ];
+			if ( ! error || error.hidden ) {
+				return '';
+			}
+			return `validate-error-${ errorId }`;
+		},
+		[ validationErrors ]
+	);
 
 	/**
 	 * Clears any validation error that exists in state for the given property
@@ -59,9 +82,12 @@ export const ValidationContextProvider = ( { children } ) => {
 	 *                           validation error state.
 	 */
 	const clearValidationError = ( property ) => {
-		if ( validationErrors[ property ] ) {
-			updateValidationErrors( omit( validationErrors, [ property ] ) );
-		}
+		updateValidationErrors( ( prevErrors ) => {
+			if ( ! prevErrors[ property ] ) {
+				return prevErrors;
+			}
+			return omit( prevErrors, [ property ] );
+		} );
 	};
 
 	/**
@@ -76,38 +102,51 @@ export const ValidationContextProvider = ( { children } ) => {
 	 *                           validation error is for and values are the
 	 *                           validation error message displayed to the user.
 	 */
-	const setValidationErrors = useCallback(
-		( newErrors ) => {
-			if ( ! newErrors ) {
-				return;
-			}
-			// all values must be a string.
-			newErrors = pickBy(
-				newErrors,
-				( { message } ) => typeof message === 'string'
-			);
-			if ( Object.values( newErrors ).length > 0 ) {
-				updateValidationErrors( ( prevErrors ) => ( {
-					...prevErrors,
-					...newErrors,
-				} ) );
+	const setValidationErrors = ( newErrors ) => {
+		if ( ! newErrors ) {
+			return;
+		}
+		updateValidationErrors( ( prevErrors ) => {
+			newErrors = pickBy( newErrors, ( error, property ) => {
+				if ( typeof error.message !== 'string' ) {
+					return false;
+				}
+				if ( prevErrors.hasOwnProperty( property ) ) {
+					return ! isShallowEqual( prevErrors[ property ], error );
+				}
+				return true;
+			} );
+			if ( Object.values( newErrors ).length === 0 ) {
+				return prevErrors;
 			}
-		},
-		[ updateValidationErrors ]
-	);
+			return {
+				...prevErrors,
+				...newErrors,
+			};
+		} );
+	};
 
+	/**
+	 * Used to update a validation error.
+	 *
+	 * @param {string} property The name of the property to update.
+	 * @param {Object} newError New validation error object.
+	 */
 	const updateValidationError = ( property, newError ) => {
 		updateValidationErrors( ( prevErrors ) => {
 			if ( ! prevErrors.hasOwnProperty( property ) ) {
 				return prevErrors;
 			}
-			return {
-				...prevErrors,
-				[ property ]: {
-					...prevErrors[ property ],
-					...newError,
-				},
+			const updatedError = {
+				...prevErrors[ property ],
+				...newError,
 			};
+			return isShallowEqual( prevErrors[ property ], updatedError )
+				? prevErrors
+				: {
+						...prevErrors,
+						[ property ]: updatedError,
+				  };
 		} );
 	};
 
@@ -118,11 +157,10 @@ export const ValidationContextProvider = ( { children } ) => {
 	 * @param {string} property  The name of the property to set the `hidden`
 	 *                           value to true.
 	 */
-	const hideValidationError = ( property ) => {
-		updateValidationError( property, {
+	const hideValidationError = ( property ) =>
+		void updateValidationError( property, {
 			hidden: true,
 		} );
-	};
 
 	/**
 	 * Given a property name and if an associated error exists, it sets its
@@ -131,43 +169,36 @@ export const ValidationContextProvider = ( { children } ) => {
 	 * @param {string} property  The name of the property to set the `hidden`
 	 *                           value to false.
 	 */
-	const showValidationError = ( property ) => {
-		updateValidationError( property, {
+	const showValidationError = ( property ) =>
+		void updateValidationError( property, {
 			hidden: false,
 		} );
-	};
 
 	/**
 	 * Sets the `hidden` value of all errors to `false`.
 	 */
-	const showAllValidationErrors = () => {
-		updateValidationErrors( ( prevErrors ) => {
-			const newErrors = {};
+	const showAllValidationErrors = () =>
+		void updateValidationErrors( ( prevErrors ) => {
+			const updatedErrors = {};
+
 			Object.keys( prevErrors ).forEach( ( property ) => {
-				newErrors[ property ] = {
-					...prevErrors[ property ],
-					hidden: false,
-				};
+				if ( prevErrors[ property ].hidden ) {
+					updatedErrors[ property ] = {
+						...prevErrors[ property ],
+						hidden: false,
+					};
+				}
 			} );
-			return newErrors;
-		} );
-	};
 
-	/**
-	 * Provides an id for the validation error that can be used to fill out
-	 * aria-describedby attribute values.
-	 *
-	 * @param {string} errorId The input css id the validation error is related
-	 *                         to.
-	 * @return {string} The id to use for the validation error container.
-	 */
-	const getValidationErrorId = ( errorId ) => {
-		const error = getValidationError( errorId );
-		if ( ! error || error.hidden ) {
-			return '';
-		}
-		return `validate-error-${ errorId }`;
-	};
+			if ( Object.values( updatedErrors ).length === 0 ) {
+				return prevErrors;
+			}
+
+			return {
+				...prevErrors,
+				...updatedErrors,
+			};
+		} );
 
 	const context = {
 		getValidationError,
@@ -180,6 +211,7 @@ export const ValidationContextProvider = ( { children } ) => {
 		hasValidationErrors: Object.keys( validationErrors ).length > 0,
 		getValidationErrorId,
 	};
+
 	return (
 		<ValidationContext.Provider value={ context }>
 			{ children }

assets/js/base/hooks/checkout/index.js

@@ -1,3 +1,4 @@
 export * from './use-checkout-redirect-url';
+export * from './use-checkout-address';
 export * from './use-checkout-submit';
 export * from './use-emit-response';