Hide the shipping address form from Checkout Block in Editor and ren…

…ame the Billing Address label when "Force shipping to the customer billing address" is enabled. (#7800)

* Rename billing address labels and hide shipping address from the editor when Force shipping to the customer billing address is enabled

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;

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,17 +39,36 @@ 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 ) {
 			setBillingPhone( '' );
 		}
 	}, [ 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',
+							} );
+						}
 					} }
 				/>
 			) }

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'
+);

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 (
 		<FormStepBlock

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx

@@ -14,6 +14,10 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
 import Block from './block';
 import attributes from './attributes';
 import { useCheckoutBlockContext } from '../../context';
+import {
+	getBillingAddresssBlockTitle,
+	getBillingAddresssBlockDescription,
+} from './utils';
 
 const FrontendBlock = ( {
 	title,
@@ -43,7 +47,11 @@ const FrontendBlock = ( {
 	if ( ! showBillingFields && ! forcedBillingAddress ) {
 		return null;
 	}
-
+	title = getBillingAddresssBlockTitle( title, forcedBillingAddress );
+	description = getBillingAddresssBlockDescription(
+		description,
+		forcedBillingAddress
+	);
 	return (
 		<FormStep
 			id="billing-fields"

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/index.tsx

@@ -3,7 +3,6 @@
  */
 import { Icon, mapMarker } from '@wordpress/icons';
 import { registerBlockType } from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/utils.tsx

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_TITLE,
+	DEFAULT_DESCRIPTION,
+	DEFAULT_FORCED_BILLING_DESCRIPTION,
+	DEFAULT_FORCED_BILLING_TITLE,
+} from './constants';
+
+export const getBillingAddresssBlockTitle = (
+	title: string,
+	forcedBillingAddress: boolean
+): string => {
+	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;
+};

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 (
 		<FormStepBlock
 			setAttributes={ setAttributes }