Ensure addresses sync when loading the checkout shipping address block (https://github.com/woocommerce/woocommerce-blocks/pull/6773)

This commit is contained in:
Thomas Roberts 2022-07-28 07:38:29 -07:00 committed by GitHub
parent a03487d9ad
commit 89022e18f8
1 changed files with 17 additions and 1 deletions

View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useMemo, useEffect, Fragment } from '@wordpress/element';
import { useMemo, useEffect, Fragment, useState } from '@wordpress/element';
import { AddressForm } from '@woocommerce/base-components/cart-checkout';
import {
useCheckoutAddress,
@ -48,6 +48,10 @@ const Block = ( {
const { dispatchCheckoutEvent } = useStoreEvents();
const { isEditor } = useEditorContext();
// This is used to track whether the "Use shipping as billing" checkbox was checked on first load and if we synced
// the shipping address to the billing address if it was. This is not used on further toggles of the checkbox.
const [ addressesSynced, setAddressesSynced ] = useState( false );
// Clears data if fields are hidden.
useEffect( () => {
if ( ! showPhoneField ) {
@ -55,6 +59,18 @@ const Block = ( {
}
}, [ showPhoneField, setShippingPhone ] );
// Run this on first render to ensure addresses sync if needed, there is no need to re-run this when toggling the
// checkbox.
useEffect( () => {
if ( addressesSynced ) {
return;
}
if ( useShippingAsBilling ) {
setBillingAddress( shippingAddress );
}
setAddressesSynced( true );
}, [ setBillingAddress, shippingAddress, useShippingAsBilling ] );
const addressFieldsConfig = useMemo( () => {
return {
company: {