Move phone to default fields section instead of being handled inline. (…

…#11651) * Move phone to default fields section * remove unused files and actions
woocommerce · Nov 14, 2023 · bdae8e9 · bdae8e9
1 parent f0a195a
commit bdae8e9
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 171 deletions.
diff --git a/assets/js/base/components/cart-checkout/address-form/address-form.tsx b/assets/js/base/components/cart-checkout/address-form/address-form.tsx
@@ -180,6 +180,7 @@ const AddressForm = ( {
 							( fieldsRef.current[ field.key ] = el )
 						}
 						{ ...fieldProps }
+						type={ field.type }
 						value={ values[ field.key ] }
 						onChange={ ( newValue: string ) =>
 							onChange( {

diff --git a/assets/js/base/context/hooks/use-checkout-address.ts b/assets/js/base/context/hooks/use-checkout-address.ts
@@ -24,8 +24,6 @@ interface CheckoutAddress {
 	setShippingAddress: ( data: Partial< ShippingAddress > ) => void;
 	setBillingAddress: ( data: Partial< BillingAddress > ) => void;
 	setEmail: ( value: string ) => void;
-	setBillingPhone: ( value: string ) => void;
-	setShippingPhone: ( value: string ) => void;
 	useShippingAsBilling: boolean;
 	setUseShippingAsBilling: ( useShippingAsBilling: boolean ) => void;
 	defaultAddressFields: AddressFields;
@@ -59,28 +57,13 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 	} = useCustomerData();
 
 	const setEmail = useCallback(
-		( value ) =>
+		( value: string ) =>
 			void setBillingAddress( {
 				email: value,
 			} ),
 		[ setBillingAddress ]
 	);
 
-	const setBillingPhone = useCallback(
-		( value ) =>
-			void setBillingAddress( {
-				phone: value,
-			} ),
-		[ setBillingAddress ]
-	);
-
-	const setShippingPhone = useCallback(
-		( value ) =>
-			void setShippingAddress( {
-				phone: value,
-			} ),
-		[ setShippingAddress ]
-	);
 	const forcedBillingAddress: boolean = getSetting(
 		'forcedBillingAddress',
 		false
@@ -91,8 +74,6 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 		setShippingAddress,
 		setBillingAddress,
 		setEmail,
-		setBillingPhone,
-		setShippingPhone,
 		defaultAddressFields,
 		useShippingAsBilling,
 		setUseShippingAsBilling: __internalSetUseShippingAsBilling,
@@ -101,8 +82,8 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 			! forcedBillingAddress && needsShipping && ! prefersCollection,
 		showShippingMethods: needsShipping && ! prefersCollection,
 		showBillingFields:
-			! needsShipping || ! useShippingAsBilling || prefersCollection,
+			! needsShipping || ! useShippingAsBilling || !! prefersCollection,
 		forcedBillingAddress,
-		useBillingAsShipping: forcedBillingAddress || prefersCollection,
+		useBillingAsShipping: forcedBillingAddress || !! prefersCollection,
 	};
 };
diff --git a/assets/js/blocks/checkout/address-card/index.tsx b/assets/js/blocks/checkout/address-card/index.tsx
@@ -7,6 +7,7 @@ import type {
 	CartShippingAddress,
 	CartBillingAddress,
 } from '@woocommerce/types';
+import { AddressFields, AddressField } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
@@ -17,12 +18,12 @@ const AddressCard = ( {
 	address,
 	onEdit,
 	target,
-	showPhoneField,
+	fieldConfig,
 }: {
 	address: CartShippingAddress | CartBillingAddress;
 	onEdit: () => void;
 	target: string;
-	showPhoneField: boolean;
+	fieldConfig: Record< keyof AddressFields, Partial< AddressField > >;
 } ): JSX.Element | null => {
 	return (
 		<div className="wc-block-components-address-card">
@@ -33,7 +34,7 @@ const AddressCard = ( {
 				<div className="wc-block-components-address-card__address-section">
 					{ [
 						address.address_1,
-						address.address_2,
+						! fieldConfig.address_2.hidden && address.address_2,
 						address.city,
 						address.state,
 						address.postcode,
@@ -46,7 +47,7 @@ const AddressCard = ( {
 							<span key={ `address-` + index }>{ field }</span>
 						) ) }
 				</div>
-				{ address.phone && showPhoneField ? (
+				{ address.phone && ! fieldConfig.phone.hidden ? (
 					<div
 						key={ `address-phone` }
 						className="wc-block-components-address-card__address-section"

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
@@ -71,11 +71,17 @@ const Block = ( {
 			address_2: {
 				hidden: ! showApartmentField,
 			},
+			phone: {
+				hidden: ! showPhoneField,
+				required: requirePhoneField,
+			},
 		};
 	}, [
 		showCompanyField,
 		requireCompanyField,
 		showApartmentField,
+		showPhoneField,
+		requirePhoneField,
 	] ) as Record< keyof AddressFields, Partial< AddressField > >;
 
 	const WrapperComponent = isEditor ? Noninteractive : Fragment;
@@ -96,8 +102,6 @@ const Block = ( {
 				{ cartDataLoaded ? (
 					<CustomerAddress
 						addressFieldsConfig={ addressFieldsConfig }
-						showPhoneField={ showPhoneField }
-						requirePhoneField={ requirePhoneField }
 						forceEditing={ forceEditing }
 					/>
 				) : null }

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
@@ -16,27 +16,20 @@ import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
  * Internal dependencies
  */
 import AddressWrapper from '../../address-wrapper';
-import PhoneNumber from '../../phone-number';
 import AddressCard from '../../address-card';
 
 const CustomerAddress = ( {
 	addressFieldsConfig,
-	showPhoneField,
-	requirePhoneField,
 	forceEditing = false,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
-	showPhoneField: boolean;
-	requirePhoneField: boolean;
 	forceEditing?: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
 		billingAddress,
 		setShippingAddress,
 		setBillingAddress,
-		setBillingPhone,
-		setShippingPhone,
 		useBillingAsShipping,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
@@ -97,10 +90,10 @@ const CustomerAddress = ( {
 				onEdit={ () => {
 					setEditing( true );
 				} }
-				showPhoneField={ showPhoneField }
+				fieldConfig={ addressFieldsConfig }
 			/>
 		),
-		[ billingAddress, showPhoneField ]
+		[ billingAddress, addressFieldsConfig ]
 	);
 
 	const renderAddressFormComponent = useCallback(
@@ -114,39 +107,13 @@ const CustomerAddress = ( {
 					fields={ addressFieldKeys }
 					fieldConfig={ addressFieldsConfig }
 				/>
-				{ showPhoneField && (
-					<PhoneNumber
-						id="billing-phone"
-						errorId={ 'billing_phone' }
-						isRequired={ requirePhoneField }
-						value={ billingAddress.phone }
-						onChange={ ( value ) => {
-							setBillingPhone( value );
-							dispatchCheckoutEvent( 'set-phone-number', {
-								step: 'billing',
-							} );
-							if ( useBillingAsShipping ) {
-								setShippingPhone( value );
-								dispatchCheckoutEvent( 'set-phone-number', {
-									step: 'billing',
-								} );
-							}
-						} }
-					/>
-				) }
 			</>
 		),
 		[
 			addressFieldKeys,
 			addressFieldsConfig,
 			billingAddress,
-			dispatchCheckoutEvent,
 			onChangeAddress,
-			requirePhoneField,
-			setBillingPhone,
-			setShippingPhone,
-			showPhoneField,
-			useBillingAsShipping,
 		]
 	);
 

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
@@ -80,11 +80,17 @@ const Block = ( {
 			address_2: {
 				hidden: ! showApartmentField,
 			},
+			phone: {
+				hidden: ! showPhoneField,
+				required: requirePhoneField,
+			},
 		};
 	}, [
 		showCompanyField,
 		requireCompanyField,
 		showApartmentField,
+		showPhoneField,
+		requirePhoneField,
 	] ) as Record< keyof AddressFields, Partial< AddressField > >;
 
 	const WrapperComponent = isEditor ? Noninteractive : Fragment;
@@ -110,8 +116,6 @@ const Block = ( {
 				{ cartDataLoaded ? (
 					<CustomerAddress
 						addressFieldsConfig={ addressFieldsConfig }
-						showPhoneField={ showPhoneField }
-						requirePhoneField={ requirePhoneField }
 					/>
 				) : 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
@@ -20,25 +20,18 @@ import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
  * Internal dependencies
  */
 import AddressWrapper from '../../address-wrapper';
-import PhoneNumber from '../../phone-number';
 import AddressCard from '../../address-card';
 
 const CustomerAddress = ( {
 	addressFieldsConfig,
-	showPhoneField,
-	requirePhoneField,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
-	showPhoneField: boolean;
-	requirePhoneField: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
 		shippingAddress,
 		setShippingAddress,
 		setBillingAddress,
-		setShippingPhone,
-		setBillingPhone,
 		useShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
@@ -74,19 +67,11 @@ const CustomerAddress = ( {
 	const addressFieldKeys = Object.keys(
 		defaultAddressFields
 	) as ( keyof AddressFields )[];
-
 	const onChangeAddress = useCallback(
 		( values: Partial< ShippingAddress > ) => {
 			setShippingAddress( values );
 			if ( useShippingAsBilling ) {
-				// Sync billing with shipping. Ensure unwanted properties are omitted.
-				const { ...syncBilling } = values;
-
-				if ( ! showPhoneField ) {
-					delete syncBilling.phone;
-				}
-
-				setBillingAddress( syncBilling );
+				setBillingAddress( values );
 				dispatchCheckoutEvent( 'set-billing-address' );
 			}
 			dispatchCheckoutEvent( 'set-shipping-address' );
@@ -96,7 +81,6 @@ const CustomerAddress = ( {
 			setBillingAddress,
 			setShippingAddress,
 			useShippingAsBilling,
-			showPhoneField,
 		]
 	);
 
@@ -108,56 +92,28 @@ const CustomerAddress = ( {
 				onEdit={ () => {
 					setEditing( true );
 				} }
-				showPhoneField={ showPhoneField }
+				fieldConfig={ addressFieldsConfig }
 			/>
 		),
-		[ shippingAddress, showPhoneField ]
+		[ shippingAddress, addressFieldsConfig ]
 	);
 
 	const renderAddressFormComponent = useCallback(
 		() => (
-			<>
-				<AddressForm
-					id="shipping"
-					type="shipping"
-					onChange={ onChangeAddress }
-					values={ shippingAddress }
-					fields={ addressFieldKeys }
-					fieldConfig={ addressFieldsConfig }
-				/>
-				{ showPhoneField && (
-					<PhoneNumber
-						id="shipping-phone"
-						errorId={ 'shipping_phone' }
-						isRequired={ requirePhoneField }
-						value={ shippingAddress.phone }
-						onChange={ ( value ) => {
-							setShippingPhone( value );
-							dispatchCheckoutEvent( 'set-phone-number', {
-								step: 'shipping',
-							} );
-							if ( useShippingAsBilling ) {
-								setBillingPhone( value );
-								dispatchCheckoutEvent( 'set-phone-number', {
-									step: 'billing',
-								} );
-							}
-						} }
-					/>
-				) }
-			</>
+			<AddressForm
+				id="shipping"
+				type="shipping"
+				onChange={ onChangeAddress }
+				values={ shippingAddress }
+				fields={ addressFieldKeys }
+				fieldConfig={ addressFieldsConfig }
+			/>
 		),
 		[
 			addressFieldKeys,
 			addressFieldsConfig,
-			dispatchCheckoutEvent,
 			onChangeAddress,
-			requirePhoneField,
-			setBillingPhone,
-			setShippingPhone,
 			shippingAddress,
-			showPhoneField,
-			useShippingAsBilling,
 		]
 	);