From 577279eb37ef18ccfba9653181c26f0eb3f54a49 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Fri, 20 Oct 2023 12:41:57 +0200
Subject: [PATCH] Copy shipping phone to billing phone if sync is checked
 (#10603)

---
 .../customer-address.tsx                       |  7 +++++++
 ...k-shipping.block_theme.side_effects.spec.ts | 18 +++++++++++++++++-
 tests/e2e/tests/checkout/checkout.page.ts      |  8 ++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

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
index f041c54d369..c5095fa80f9 100644
--- 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
@@ -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',
+								} );
+							}
 						} }
 					/>
 				) }
diff --git a/tests/e2e/tests/checkout/checkout-block-shipping.block_theme.side_effects.spec.ts b/tests/e2e/tests/checkout/checkout-block-shipping.block_theme.side_effects.spec.ts
index 3374a03246f..b855a0ccc91 100644
--- a/tests/e2e/tests/checkout/checkout-block-shipping.block_theme.side_effects.spec.ts
+++ b/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',
diff --git a/tests/e2e/tests/checkout/checkout.page.ts b/tests/e2e/tests/checkout/checkout.page.ts
index 52990872a41..0f035125a07 100644
--- a/tests/e2e/tests/checkout/checkout.page.ts
+++ b/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();