diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx index 22f07a3380b..a25b8e95fa5 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx @@ -1,20 +1,18 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; +import { BlockAttributes } from '@wordpress/blocks'; /** * Internal dependencies */ import formStepAttributes from '../../form-step/attributes'; +import { DEFAULT_TITLE, DEFAULT_DESCRIPTION } from './constants'; -export default { +const attributes: BlockAttributes = { ...formStepAttributes( { - defaultTitle: __( 'Billing address', 'woo-gutenberg-products-block' ), - defaultDescription: __( - 'Enter the billing address that matches your payment method.', - 'woo-gutenberg-products-block' - ), + defaultTitle: DEFAULT_TITLE, + defaultDescription: DEFAULT_DESCRIPTION, } ), className: { type: 'string', @@ -28,3 +26,4 @@ export default { }, }, }; +export default attributes; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx index f60f7f3df7e..1fcb04e3410 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { useMemo, useEffect, Fragment } from '@wordpress/element'; +import { useMemo, useEffect, Fragment, useState } from '@wordpress/element'; import { useCheckoutAddress, useStoreEvents, @@ -39,10 +39,11 @@ const Block = ( { setBillingAddress, setShippingAddress, setBillingPhone, + setShippingPhone, + forcedBillingAddress, } = useCheckoutAddress(); const { dispatchCheckoutEvent } = useStoreEvents(); const { isEditor } = useEditorContext(); - const { forcedBillingAddress } = useCheckoutAddress(); // Clears data if fields are hidden. useEffect( () => { if ( ! showPhoneField ) { @@ -50,6 +51,24 @@ const Block = ( { } }, [ showPhoneField, setBillingPhone ] ); + const [ addressesSynced, setAddressesSynced ] = useState( false ); + + // Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled. + useEffect( () => { + if ( addressesSynced ) { + return; + } + if ( forcedBillingAddress ) { + setShippingAddress( billingAddress ); + } + setAddressesSynced( true ); + }, [ + addressesSynced, + setShippingAddress, + billingAddress, + forcedBillingAddress, + ] ); + const addressFieldsConfig = useMemo( () => { return { company: { @@ -77,6 +96,7 @@ const Block = ( { setBillingAddress( values ); if ( forcedBillingAddress ) { setShippingAddress( values ); + dispatchCheckoutEvent( 'set-shipping-address' ); } dispatchCheckoutEvent( 'set-billing-address' ); } } @@ -97,6 +117,12 @@ const Block = ( { dispatchCheckoutEvent( 'set-phone-number', { step: 'billing', } ); + if ( forcedBillingAddress ) { + setShippingPhone( value ); + dispatchCheckoutEvent( 'set-phone-number', { + step: 'shipping', + } ); + } } } /> ) } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/constants.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/constants.tsx new file mode 100644 index 00000000000..7bcb41512b1 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/constants.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +export const DEFAULT_TITLE = __( + 'Billing address', + 'woo-gutenberg-products-block' +); +export const DEFAULT_DESCRIPTION = __( + 'Enter the billing address that matches your payment method.', + 'woo-gutenberg-products-block' +); + +export const DEFAULT_FORCED_BILLING_TITLE = __( + 'Billing and shipping address', + 'woo-gutenberg-products-block' +); +export const DEFAULT_FORCED_BILLING_DESCRIPTION = __( + 'Enter the billing and shipping address that matches your payment method.', + 'woo-gutenberg-products-block' +); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx index 692b9c4f20c..69fb63bf3e5 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; import { useBlockProps } from '@wordpress/block-editor'; import { useCheckoutAddress } from '@woocommerce/base-context/hooks'; import { innerBlockAreas } from '@woocommerce/blocks-checkout'; - +import { BlockAttributes } from '@wordpress/blocks'; /** * Internal dependencies */ @@ -19,6 +19,10 @@ import { useCheckoutBlockControlsContext, } from '../../context'; import Block from './block'; +import { + getBillingAddresssBlockTitle, + getBillingAddresssBlockDescription, +} from './utils'; export const Edit = ( { attributes, @@ -30,7 +34,7 @@ export const Edit = ( { showStepNumber: boolean; className: string; }; - setAttributes: ( attributes: Record< string, unknown > ) => void; + setAttributes: ( attributes: BlockAttributes ) => void; } ): JSX.Element | null => { const { showCompanyField, @@ -41,11 +45,19 @@ export const Edit = ( { } = useCheckoutBlockContext(); const { addressFieldControls: Controls } = useCheckoutBlockControlsContext(); - const { showBillingFields } = useCheckoutAddress(); + const { showBillingFields, forcedBillingAddress } = useCheckoutAddress(); - if ( ! showBillingFields ) { + if ( ! showBillingFields && ! forcedBillingAddress ) { return null; } + attributes.title = getBillingAddresssBlockTitle( + attributes.title, + forcedBillingAddress + ); + attributes.description = getBillingAddresssBlockDescription( + attributes.description, + forcedBillingAddress + ); return ( { + if ( forcedBillingAddress ) { + // Returns default forced billing title when forced billing address is enabled and there is no title set. + return title === DEFAULT_TITLE ? DEFAULT_FORCED_BILLING_TITLE : title; + } + // Returns default title when forced billing address is disabled and there is no title set. + return title === DEFAULT_FORCED_BILLING_TITLE ? DEFAULT_TITLE : title; +}; + +export const getBillingAddresssBlockDescription = ( + description: string, + forcedBillingAddress: boolean +): string => { + if ( forcedBillingAddress ) { + // Returns default forced billing description when forced billing address is enabled and there is no description set. + return description === DEFAULT_DESCRIPTION + ? DEFAULT_FORCED_BILLING_DESCRIPTION + : description; + } + + // Returns default description when forced billing address is disabled and there is no description set. + return description === DEFAULT_FORCED_BILLING_DESCRIPTION + ? DEFAULT_DESCRIPTION + : description; +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx index 645f5541623..3b491a8bd84 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import { useBlockProps } from '@wordpress/block-editor'; import { innerBlockAreas } from '@woocommerce/blocks-checkout'; - +import { useCheckoutAddress } from '@woocommerce/base-context/hooks'; /** * Internal dependencies */ @@ -30,7 +30,7 @@ export const Edit = ( { className: string; }; setAttributes: ( attributes: Record< string, unknown > ) => void; -} ): JSX.Element => { +} ): JSX.Element | null => { const { showCompanyField, showApartmentField, @@ -40,6 +40,10 @@ export const Edit = ( { } = useCheckoutBlockContext(); const { addressFieldControls: Controls } = useCheckoutBlockControlsContext(); + const { showShippingFields } = useCheckoutAddress(); + if ( ! showShippingFields ) { + return null; + } return (