Merge branch 'update/2582-claim-ads-account' into update/2603-create-…

…ads-account
woocommerce · Nov 6, 2024 · 75c7827 · 75c7827
2 parents 50e36fd + b42286d
commit 75c7827
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 51 deletions.
diff --git a/js/src/components/google-ads-account-card/claim-account-button.js b/js/src/components/google-ads-account-card/claim-account-button.js
@@ -35,7 +35,7 @@ const ClaimAccountButton = ( {
 	loading = false,
 	...restProps
 } ) => {
-	const { inviteLink } = useGoogleAdsAccountStatus();
+	const { inviteLink, hasFinishedResolution } = useGoogleAdsAccountStatus();
 	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
 
 	const handleClaimAccountClick = ( event ) => {
@@ -47,13 +47,17 @@ const ClaimAccountButton = ( {
 		onClick( event );
 	};
 
+	if ( ! hasFinishedResolution ) {
+		return null;
+	}
+
 	return (
 		<AppButton
 			{ ...restProps }
 			eventName="gla_open_ads_account_claim_invitation_button_click"
 			eventProps={ getEventProps() }
 			onClick={ handleClaimAccountClick }
-			loading={ ! inviteLink || loading }
+			loading={ loading }
 		/>
 	);
 };

diff --git a/js/src/components/google-ads-account-card/claim-account-button.test.js b/js/src/components/google-ads-account-card/claim-account-button.test.js
@@ -32,6 +32,7 @@ describe( 'ClaimAccountButton', () => {
 
 		useGoogleAdsAccountStatus.mockReturnValue( {
 			inviteLink: 'https://example.com',
+			hasFinishedResolution: true,
 		} );
 	} );
 

diff --git a/js/src/components/google-combo-account-card/connected-google-combo-account-card.js b/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,6 +31,7 @@ const ConnectedGoogleComboAccountCard = () => {
 		showConversionMeasurementNotice,
 		setShowConversionMeasurementNotice,
 	] = useState( false );
+	const initConnected = useRef( null );
 	const { hasDetermined, creatingWhich } = useAutoCreateAdsMCAccounts();
 	const { text, subText } = getAccountCreationTexts( creatingWhich );
 	const { existingAccounts: existingGoogleAdsAccounts } =
@@ -44,14 +45,29 @@ const ConnectedGoogleComboAccountCard = () => {
 	const finalizeAdsAccountCreation =
 		hasAccess === true && step === 'conversion_action';
 
+	// Show the conversion measurement notice after the account is ready.
+	useEffect( () => {
+		if ( isConnected === null ) {
+			return;
+		}
+
+		if ( isConnected && initConnected.current === false ) {
+			setShowConversionMeasurementNotice( true );
+		}
+
+		// Store the initial isConnected state.
+		if ( initConnected.current === null ) {
+			initConnected.current = isConnected;
+		}
+	}, [ initConnected, isConnected ] );
+
 	// Ideally updating the account should be done in ConnectMC component but the latter is not always rendered,
 	// (for e.g when the user is creating the first account).
 	useEffect( () => {
 		const upsertAccount = async () => {
 			if ( finalizeAdsAccountCreation ) {
 				await upsertAdsAccount();
 				invalidateResolution( 'getExistingGoogleAdsAccounts', [] );
-				setShowConversionMeasurementNotice( true );
 			}
 		};
 

diff --git a/tests/e2e/specs/setup-mc/step-1-accounts.test.js b/tests/e2e/specs/setup-mc/step-1-accounts.test.js
@@ -209,34 +209,34 @@ test.describe( 'Set up accounts', () => {
 			expect( page.url() ).toMatch( baseURL + 'google_auth' );
 		} );
 
-		test( 'should create merchant center and ads account if does not exist for the user', async () => {
-			await setUpAccountsPage.mockJetpackConnected();
-			await setUpAccountsPage.mockGoogleConnected();
-
-			await setUpAccountsPage.fulfillAdsAccounts( [ { id: 1 } ] );
-			await setUpAccountsPage.mockMCHasAccounts();
-			await setUpAccountsPage.mockAdsAccountIncomplete();
-			await setUpAccountsPage.mockMCConnected();
-
-			const once = setUpAccountsPage.fulfillTimes( 1 );
-
-			await once.mockAdsHasNoAccounts();
-			await once.mockMCHasNoAccounts();
-			await once.mockAdsAccountDisconnected();
-			await once.mockMCNotConnected();
-
-			await setUpAccountsPage.goto();
-			const googleAccountCard = setUpAccountsPage.getGoogleAccountCard();
-
-			await expect(
-				googleAccountCard.getByText(
-					'You don’t have Merchant Center nor Google Ads accounts, so we’re creating them for you.',
-					{
-						exact: true,
-					}
-				)
-			).toBeVisible();
-		} );
+		// test( 'should create merchant center and ads account if does not exist for the user', async () => {
+		// 	await setUpAccountsPage.mockJetpackConnected();
+		// 	await setUpAccountsPage.mockGoogleConnected();
+
+		// 	await setUpAccountsPage.fulfillAdsAccounts( [ { id: 1 } ] );
+		// 	await setUpAccountsPage.mockMCHasAccounts();
+		// 	await setUpAccountsPage.mockAdsAccountIncomplete();
+		// 	await setUpAccountsPage.mockMCConnected();
+
+		// 	const once = setUpAccountsPage.fulfillTimes( 1 );
+
+		// 	await once.mockAdsHasNoAccounts();
+		// 	await once.mockMCHasNoAccounts();
+		// 	await once.mockAdsAccountDisconnected();
+		// 	await once.mockMCNotConnected();
+
+		// 	await setUpAccountsPage.goto();
+		// 	const googleAccountCard = setUpAccountsPage.getGoogleAccountCard();
+
+		// 	await expect(
+		// 		googleAccountCard.getByText(
+		// 			'You don’t have Merchant Center nor Google Ads accounts, so we’re creating them for you.',
+		// 			{
+		// 				exact: true,
+		// 			}
+		// 		)
+		// 	).toBeVisible();
+		// } );
 
 		test.describe( 'After connecting Google account', () => {
 			test.beforeEach( async () => {
@@ -425,6 +425,19 @@ test.describe( 'Set up accounts', () => {
 					googleAccountCard.getByText( 'Google Ads ID: 12345' )
 				).toBeVisible();
 			} );
+
+			test( 'should see the conversion action notice', async () => {
+				const googleAccountCard =
+					setUpAccountsPage.getGoogleAccountCard();
+				await expect(
+					googleAccountCard.getByText(
+						'Google Ads conversion measurement has been set up for your store.',
+						{
+							exact: true,
+						}
+					)
+				).toBeVisible();
+			} );
 		} );
 	} );
 
@@ -467,26 +480,15 @@ test.describe( 'Set up accounts', () => {
 			expect( url ).toMatch( /^https:\/\/example\.com(\/|\?|$)/ );
 		} );
 
-		test.describe( 'Account claimed', () => {
-			test.beforeEach( async () => {
-				await setUpAccountsPage.mockAdsStatusClaimed();
-				await setUpAccountsPage.mockAdsAccountConnected();
-
-				await setUpAccountsPage.goto();
-			} );
+		test( 'should see the merchant center id once account has been claimed', async () => {
+			await setUpAccountsPage.mockAdsStatusClaimed();
+			await setUpAccountsPage.mockAdsAccountConnected();
 
-			test( 'should see conversion action notice', async () => {
-				const googleAccountCard =
-					setUpAccountsPage.getGoogleAccountCard();
-				await expect(
-					googleAccountCard.getByText(
-						'Google Ads conversion measurement has been set up for your store.',
-						{
-							exact: true,
-						}
-					)
-				).toBeVisible();
-			} );
+			await setUpAccountsPage.goto();
+			const googleAccountCard = setUpAccountsPage.getGoogleAccountCard();
+			await expect( googleAccountCard ).toContainText(
+				'Google Ads ID: 12345'
+			);
 		} );
 	} );