Consolidate accounts onboarding: Merge the store address setting in Step 3 into Step 1 and remove Step 3 along with the phone verification

js/src/components/contact-information/store-address-card.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, createInterpolateElement } from '@wordpress/element';
+import { useRef, createInterpolateElement, useState } from '@wordpress/element';
 import { CardDivider } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { update as updateIcon } from '@wordpress/icons';
@@ -11,6 +11,7 @@ import { getPath, getQuery } from '@woocommerce/navigation';
 /**
  * Internal dependencies
  */
+import { useAppDispatch } from '.~/data';
 import useStoreAddress from '.~/hooks/useStoreAddress';
 import Section from '.~/wcdl/section';
 import Subsection from '.~/wcdl/subsection';
@@ -20,6 +21,7 @@ import ValidationErrors from '.~/components/validation-errors';
 import ContactInformationPreviewCard from './contact-information-preview-card';
 import TrackableLink from '.~/components/trackable-link';
 import mapStoreAddressErrors from './mapStoreAddressErrors';
+import LoadingLabel from '.~/components/loading-label';
 import { recordGlaEvent } from '.~/utils/tracks';
 import './store-address-card.scss';
 
@@ -55,6 +57,8 @@ import './store-address-card.scss';
  */
 const StoreAddressCard = ( { showValidation = false } ) => {
 	const { loaded, data, refetch } = useStoreAddress();
+	const [ isSaving, setSaving ] = useState( false );
+	const { updateGoogleMCContactInformation } = useAppDispatch();
 	const path = getPath();
 	const { subpath } = getQuery();
 
@@ -66,7 +70,10 @@ const StoreAddressCard = ( { showValidation = false } ) => {
 	}
 
 	const handleRefreshClick = () => {
-		refetch();
+		setSaving( true );
+		updateGoogleMCContactInformation()
+			.then( refetch )
+			.catch( () => setSaving( false ) );
 
 		refetchedCallbackRef.current = ( storeAddress ) => {
 			const eventProps = {
@@ -80,7 +87,9 @@ const StoreAddressCard = ( { showValidation = false } ) => {
 		};
 	};
 
-	const refreshButton = (
+	const refreshButton = isSaving ? (
+		<LoadingLabel />
+	) : (
 		<AppButton
 			isSecondary
 			icon={ updateIcon }

js/src/components/google-combo-account-card/connected-google-combo-account-card.js

@@ -6,6 +6,7 @@ import AccountDetails from './account-details';
 import Indicator from './indicator';
 import getAccountCreationTexts from './getAccountCreationTexts';
 import SpinnerCard from '.~/components/spinner-card';
+import SyncStoreAddress from './sync-store-address';
 import useAutoCreateAdsMCAccounts from '.~/hooks/useAutoCreateAdsMCAccounts';
 import './connected-google-combo-account-card.scss';
 
@@ -22,14 +23,20 @@ const ConnectedGoogleComboAccountCard = () => {
 	}
 
 	return (
-		<AccountCard
-			appearance={ APPEARANCE.GOOGLE }
-			alignIcon="top"
-			className="gla-google-combo-account-card--connected"
-			description={ text || <AccountDetails /> }
-			helper={ subText }
-			indicator={ <Indicator showSpinner={ Boolean( creatingWhich ) } /> }
-		/>
+		<div className="gla-google-combo-account-cards">
+			<AccountCard
+				appearance={ APPEARANCE.GOOGLE }
+				alignIcon="top"
+				className="gla-google-combo-account-card--connected"
+				description={ text || <AccountDetails /> }
+				helper={ subText }
+				indicator={
+					<Indicator showSpinner={ Boolean( creatingWhich ) } />
+				}
+			/>
+
+			<SyncStoreAddress />
+		</div>
 	);
 };
 

js/src/components/google-combo-account-card/sync-store-address.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import StoreAddressCard from '.~/components/contact-information/store-address-card';
+import useStoreAddressSynced from '.~/hooks/useStoreAddressSynced';
+
+/*
+ * Renders StoreAddressCard to sync the store address if we have a connected MC account and the address needs to be synced.
+ * If there's no connected account or the store address has been synced, it will return null.
+ */
+const SyncStoreAddress = () => {
+	const storeAddressSynced = useStoreAddressSynced();
+
+	if ( storeAddressSynced === null || storeAddressSynced ) {
+		return null;
+	}
+
+	return <StoreAddressCard />;
+};
+
+export default SyncStoreAddress;

js/src/hooks/useStoreAddressSynced.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
+import { STORE_KEY } from '.~/data/constants';
+
+/**
+ * Checks if the store address is synchronized with the Merchant Center (GMC) account address.
+ *
+ * @return {boolean|null} Returns `true` if the store address matches the GMC account address, otherwise, returns `false`. If the MC account is not connected or if the state is not yet determined, returns `null`.
+ */
+export default function useStoreAddressSynced() {
+	const { isReady } = useGoogleMCAccount();
+
+	return useSelect(
+		( select ) => {
+			if ( ! isReady ) {
+				return null;
+			}
+
+			const { getGoogleMCContactInformation } = select( STORE_KEY );
+			const contact = getGoogleMCContactInformation();
+
+			if ( ! contact ) {
+				return null;
+			}
+
+			const {
+				is_mc_address_different: isMCAddressDifferent,
+				wc_address_errors: missingRequiredFields,
+			} = contact;
+
+			return (
+				! Boolean( isMCAddressDifferent ) &&
+				! missingRequiredFields.length
+			);
+		},
+		[ isReady ]
+	);
+}

js/src/setup-mc/setup-stepper/setup-accounts/index.js

@@ -25,6 +25,7 @@ import Faqs from './faqs';
 import './index.scss';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
+import useStoreAddressSynced from '.~/hooks/useStoreAddressSynced';
 
 /**
  * Renders the disclaimer of Comparison Shopping Service (CSS).
@@ -89,6 +90,7 @@ const SetupAccounts = ( props ) => {
 		isReady: isGoogleMCReady,
 	} = useGoogleMCAccount();
 	const { hasFinishedResolution } = useGoogleAdsAccount();
+	const storeAddressSynced = useStoreAddressSynced();
 	const isGoogleAdsReady = useGoogleAdsAccountReady();
 
 	/**
@@ -115,7 +117,8 @@ const SetupAccounts = ( props ) => {
 	const isContinueButtonDisabled = ! (
 		hasFinishedResolution &&
 		isGoogleAdsReady &&
-		isGoogleMCReady
+		isGoogleMCReady &&
+		storeAddressSynced
 	);
 
 	return (

tests/e2e/specs/setup-mc/step-1-accounts.test.js

@@ -291,6 +291,10 @@ test.describe( 'Set up accounts', () => {
 			test.beforeAll( async () => {
 				await setUpAccountsPage.mockAdsAccountConnected();
 				await setUpAccountsPage.mockMCNotConnected();
+				await setUpAccountsPage.mockContactInformation( {
+					wcAddressErrors: [],
+					isMCAddressDifferent: false,
+				} );
 
 				await setUpAccountsPage.goto();
 			} );
@@ -306,6 +310,10 @@ test.describe( 'Set up accounts', () => {
 			test.beforeAll( async () => {
 				await setUpAccountsPage.mockAdsAccountDisconnected();
 				await setUpAccountsPage.mockMCConnected();
+				await setUpAccountsPage.mockContactInformation( {
+					wcAddressErrors: [],
+					isMCAddressDifferent: false,
+				} );
 
 				await setUpAccountsPage.goto();
 			} );
@@ -317,11 +325,33 @@ test.describe( 'Set up accounts', () => {
 			} );
 		} );
 
-		test.describe( 'When all accounts are connected', async () => {
+		test.describe( 'When the store address needs to be synced and accounts are connected', async () => {
 			test.beforeAll( async () => {
 				await setUpAccountsPage.mockAdsAccountConnected();
 				await setUpAccountsPage.mockMCConnected();
+				await setUpAccountsPage.mockContactInformation( {
+					wcAddressErrors: [],
+					isMCAddressDifferent: true,
+				} );
+
+				await setUpAccountsPage.goto();
+			} );
+
+			test( 'should see "Continue" button disabled when the store address needs to be synced', async () => {
+				const continueButton =
+					await setUpAccountsPage.getContinueButton();
+				await expect( continueButton ).toBeDisabled();
+			} );
+		} );
+
+		test.describe( 'When all accounts are connected and store address is synced', async () => {
+			test.beforeAll( async () => {
 				await setUpAccountsPage.mockAdsAccountConnected();
+				await setUpAccountsPage.mockMCConnected();
+				await setUpAccountsPage.mockContactInformation( {
+					wcAddressErrors: [],
+					isMCAddressDifferent: false,
+				} );
 
 				await setUpAccountsPage.goto();
 			} );

tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js

@@ -376,4 +376,25 @@ export default class SetUpAccountsPage extends MockRequests {
 	getTermsCheckbox() {
 		return this.page.getByLabel( /I accept the terms and conditions/ );
 	}
+
+	/**
+	 * Get store address card.
+	 *
+	 * @return {import('@playwright/test').Locator} Get store address card.
+	 */
+	getStoreAddressCard() {
+		return this.page.locator( '.gla-store-address-card' );
+	}
+
+	/**
+	 * Get store address refresh to sync button.
+	 *
+	 * @return {import('@playwright/test').Locator} Get store address refresh to sync button.
+	 */
+	getStoreAddressRefreshToSyncButton() {
+		return this.getStoreAddressCard().getByRole( 'button', {
+			name: 'Refresh to sync',
+			exact: true,
+		} );
+	}
 }