Copy shipping phone to billing phone if sync is checked (#10603)

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx

@@ -34,6 +34,7 @@ const CustomerAddress = ( {
 		setShippingAddress,
 		setBillingAddress,
 		setShippingPhone,
+		setBillingPhone,
 		useShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
@@ -129,6 +130,12 @@ const CustomerAddress = ( {
 							dispatchCheckoutEvent( 'set-phone-number', {
 								step: 'shipping',
 							} );
+							if ( useShippingAsBilling ) {
+								setBillingPhone( value );
+								dispatchCheckoutEvent( 'set-phone-number', {
+									step: 'billing',
+								} );
+							}
 						} }
 					/>
 				) }

tests/e2e/tests/checkout/checkout-block-shipping.block_theme.side_effects.spec.ts

@@ -57,7 +57,23 @@ test.describe( 'Shopper → Checkout block → Shipping', () => {
 				FLAT_RATE_SHIPPING_PRICE
 			)
 		).toBe( true );
-		await page.getByLabel( 'Use same address for billing' ).uncheck();
+
+		await pageObject.syncBillingWithShipping();
+		await pageObject.fillInCheckoutWithTestData( {
+			phone: '0987654322',
+		} );
+		await pageObject.unsyncBillingWithShipping();
+		const shippingForm = page.getByRole( 'group', {
+			name: 'Shipping address',
+		} );
+		const billingForm = page.getByRole( 'group', {
+			name: 'Billing address',
+		} );
+
+		await expect( shippingForm.getByLabel( 'Phone' ).inputValue ).toEqual(
+			billingForm.getByLabel( 'Phone' ).inputValue
+		);
+
 		await pageObject.fillInCheckoutWithTestData();
 		const overrideBillingDetails = {
 			firstname: 'Juan',

tests/e2e/tests/checkout/checkout.page.ts

@@ -332,6 +332,14 @@ export class CheckoutPage {
 		}
 	}
 
+	async syncBillingWithShipping() {
+		await this.page.getByLabel( 'Use same address for billing' ).check();
+	}
+
+	async unsyncBillingWithShipping() {
+		await this.page.getByLabel( 'Use same address for billing' ).uncheck();
+	}
+
 	getOrderId() {
 		// Get the current URL
 		const url = this.page.url();