Move phone to default fields section

woocommerce · Nov 7, 2023 · 6fddfa4 · 6fddfa4
1 parent 77684da
commit 6fddfa4
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 110 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
@@ -179,6 +179,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/inner-blocks/checkout-billing-address-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx
@@ -69,11 +69,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;
@@ -87,8 +93,6 @@ const Block = ( {
 			<WrapperComponent>
 				<CustomerAddress
 					addressFieldsConfig={ addressFieldsConfig }
-					showPhoneField={ showPhoneField }
-					requirePhoneField={ requirePhoneField }
 					forceEditing={ forceEditing }
 				/>
 			</WrapperComponent>

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();
@@ -113,26 +106,6 @@ 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',
-								} );
-							}
-						} }
-					/>
-				) }
 			</>
 		),
 		[
@@ -141,10 +114,6 @@ const CustomerAddress = ( {
 			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;
@@ -100,11 +106,7 @@ const Block = ( {
 		<>
 			<StoreNoticesContainer context={ noticeContext } />
 			<WrapperComponent>
-				<CustomerAddress
-					addressFieldsConfig={ addressFieldsConfig }
-					showPhoneField={ showPhoneField }
-					requirePhoneField={ requirePhoneField }
-				/>
+				<CustomerAddress addressFieldsConfig={ addressFieldsConfig } />
 			</WrapperComponent>
 			{ hasAddress && (
 				<CheckboxControl

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
@@ -16,25 +16,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,14 +67,7 @@ const CustomerAddress = ( {
 		( 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' );
@@ -91,7 +77,6 @@ const CustomerAddress = ( {
 			setBillingAddress,
 			setShippingAddress,
 			useShippingAsBilling,
-			showPhoneField,
 		]
 	);
 
@@ -110,46 +95,21 @@ const CustomerAddress = ( {
 
 	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,
-			setShippingPhone,
 			shippingAddress,
-			showPhoneField,
 		]
 	);
 

diff --git a/assets/js/settings/shared/default-address-fields.ts b/assets/js/settings/shared/default-address-fields.ts
@@ -18,6 +18,8 @@ export interface AddressField {
 	hidden: boolean;
 	// Fields will be sorted and render in this order, lowest to highest.
 	index: number;
+	// The type of input to render. Defaults to text.
+	type?: string;
 }
 
 export interface LocaleSpecificAddressField extends Partial< AddressField > {
@@ -34,6 +36,7 @@ export interface AddressFields {
 	city: AddressField;
 	state: AddressField;
 	postcode: AddressField;
+	phone: AddressField;
 }
 
 export type AddressType = 'billing' | 'shipping';
@@ -167,6 +170,15 @@ export const defaultAddressFields: AddressFields = {
 		hidden: false,
 		index: 90,
 	},
+	phone: {
+		label: __( 'Phone', 'woo-gutenberg-products-block' ),
+		optionalLabel: __( 'Phone (optional)', 'woo-gutenberg-products-block' ),
+		autocomplete: 'tel',
+		type: 'tel',
+		required: true,
+		hidden: false,
+		index: 100,
+	},
 };
 
 export default defaultAddressFields;
diff --git a/packages/checkout/components/text-input/types.ts b/packages/checkout/components/text-input/types.ts
@@ -12,6 +12,8 @@ export interface ValidatedTextInputProps
 	id?: string;
 	// Unique instance ID. id will be used instead if provided.
 	instanceId: string;
+	// Type of input, defaults to text.
+	type?: string;
 	// Class name to add to the input.
 	className?: string | undefined;
 	// aria-describedby attribute to add to the input.

diff --git a/packages/checkout/components/text-input/validated-text-input.tsx b/packages/checkout/components/text-input/validated-text-input.tsx
@@ -40,6 +40,7 @@ const ValidatedTextInput = forwardRef<
 		{
 			className,
 			id,
+			type = 'text',
 			ariaDescribedBy,
 			errorId,
 			focusOnMount = false,
@@ -228,6 +229,7 @@ const ValidatedTextInput = forwardRef<
 				} ) }
 				aria-invalid={ hasError === true }
 				id={ textInputId }
+				type={ type }
 				feedback={
 					showError && (
 						<ValidationInputError
@@ -254,7 +256,7 @@ const ValidatedTextInput = forwardRef<
 				onBlur={ () => validateInput( false ) }
 				ariaDescribedBy={ describedBy }
 				value={ value }
-				title=""
+				title="" // This prevents the same error being shown on hover.
 				label={ label }
 				{ ...rest }
 			/>