Merge branch 'feature/2567-kickoff-mc-ads-account-creation' into upda…

…te/2596-connect-ads-account

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

@@ -23,18 +23,23 @@ const AccountDetails = () => {
 		<>
 			<p>{ google.email }</p>
 			<p>
-				{ sprintf(
-					// Translators: %s is the Merchant Center ID
-					__( 'Merchant Center ID: %s', 'google-listings-and-ads' ),
-					googleMCAccount.id
-				) }
+				{ googleMCAccount.id > 0 &&
+					sprintf(
+						// Translators: %s is the Merchant Center ID
+						__(
+							'Merchant Center ID: %s',
+							'google-listings-and-ads'
+						),
+						googleMCAccount.id
+					) }
 			</p>
 			<p>
-				{ sprintf(
-					// Translators: %s is the Google Ads ID
-					__( 'Google Ads ID: %s', 'google-listings-and-ads' ),
-					googleAdsAccount.id
-				) }
+				{ googleAdsAccount.id > 0 &&
+					sprintf(
+						// Translators: %s is the Google Ads ID
+						__( 'Google Ads ID: %s', 'google-listings-and-ads' ),
+						googleAdsAccount.id
+					) }
 			</p>
 		</>
 	);

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

@@ -11,7 +11,7 @@ import ConnectAds from './connect-ads';
 import AccountDetails from './account-details';
 import AppSpinner from '../app-spinner';
 import Indicator from './indicator';
-import getAccountCreationTexts from '.~/utils/getAccountCreationTexts';
+import getAccountCreationTexts from './getAccountCreationTexts';
 import useAutoCreateAdsMCAccounts from '.~/hooks/useAutoCreateAdsMCAccounts';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
@@ -26,15 +26,11 @@ const ConnectedGoogleComboAccountCard = () => {
 	const [ wasCreatingAccounts, setWasCreatingAccounts ] =
 		useState( undefined );
 
-	const {
-		googleAdsAccount,
-		hasFinishedResolution: hasFinishedResolutionForCurrentAdsAccount,
-	} = useGoogleAdsAccount();
+	const { hasFinishedResolution: hasFinishedResolutionForCurrentAdsAccount } =
+		useGoogleAdsAccount();
 
-	const {
-		googleMCAccount,
-		hasFinishedResolution: hasFinishedResolutionForCurrentMCAccount,
-	} = useGoogleMCAccount();
+	const { hasFinishedResolution: hasFinishedResolutionForCurrentMCAccount } =
+		useGoogleMCAccount();
 
 	const { hasDetermined, creatingWhich } = useAutoCreateAdsMCAccounts();
 	const { text, subText } = getAccountCreationTexts( wasCreatingAccounts );
@@ -44,24 +40,16 @@ const ConnectedGoogleComboAccountCard = () => {
 		hasFinishedResolutionForCurrentAdsAccount &&
 		hasFinishedResolutionForCurrentMCAccount;
 
-	const accountsCreated =
-		wasCreatingAccounts !== undefined && ! creatingWhich;
-
-	const accountsReady =
-		accountDetailsResolved &&
-		!! googleAdsAccount?.id &&
-		!! googleMCAccount?.id;
-
-	const displayAccountDetails = accountDetailsResolved && accountsReady;
+	const displayAccountDetails =
+		accountDetailsResolved && wasCreatingAccounts === null;
 
 	useEffect( () => {
-		if ( creatingWhich ) {
+		if ( hasDetermined ) {
 			setWasCreatingAccounts( creatingWhich );
 		}
-	}, [ creatingWhich ] );
+	}, [ creatingWhich, hasDetermined ] );
 
 	if (
-		! accountsCreated &&
 		wasCreatingAccounts === undefined &&
 		( ! hasDetermined ||
 			! hasFinishedResolutionForCurrentAdsAccount ||

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

@@ -1,7 +1,7 @@
 .gla-google-combo-account-card--connected {
 
 	.gla-account-card__description {
-		gap: 0.6em;
+		gap: 0;
 	}
 }
 

js/src/utils/getAccountCreationTexts.js → js/src/components/google-combo-account-card/getAccountCreationTexts.js

@@ -10,7 +10,7 @@ import {
 	CREATING_ADS_ACCOUNT,
 	CREATING_BOTH_ACCOUNTS,
 	CREATING_MC_ACCOUNT,
-} from '../components/google-combo-account-card/constants';
+} from './constants';
 
 /**
  * Account creation in progress description.

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

@@ -8,8 +8,8 @@ import { __ } from '@wordpress/i18n';
  */
 import ConnectedIconLabel from '.~/components/connected-icon-label';
 import LoadingLabel from '.~/components/loading-label/loading-label';
-import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
 import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
+import useGoogleMCAccountReady from '.~/hooks/useGoogleMCAccountReady';
 
 /**
  * Account creation indicator.
@@ -19,14 +19,8 @@ import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
  * @return {JSX.Element|null} Indicator component.
  */
 const Indicator = ( { showSpinner } ) => {
-	const { googleMCAccount, isPreconditionReady } = useGoogleMCAccount();
 	const isGoogleAdsConnected = useGoogleAdsAccountReady();
-
-	const isGoogleMCConnected =
-		isPreconditionReady &&
-		( googleMCAccount?.status === 'connected' ||
-			( googleMCAccount?.status === 'incomplete' &&
-				googleMCAccount?.step === 'link_ads' ) );
+	const isGoogleMCConnected = useGoogleMCAccountReady();
 
 	if ( showSpinner ) {
 		return (

js/src/hooks/useGoogleMCAccountReady.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import useGoogleMCAccount from './useGoogleMCAccount';
+import { GOOGLE_MC_ACCOUNT_STATUS } from '.~/constants';
+
+const useGoogleMCAccountReady = () => {
+	const { googleMCAccount } = useGoogleMCAccount();
+
+	return (
+		googleMCAccount?.status === GOOGLE_MC_ACCOUNT_STATUS.CONNECTED ||
+		( googleMCAccount?.status === GOOGLE_MC_ACCOUNT_STATUS.INCOMPLETE &&
+			googleMCAccount?.step === 'link_ads' )
+	);
+};
+
+export default useGoogleMCAccountReady;

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 useGoogleMCAccountReady from '.~/hooks/useGoogleMCAccountReady';
 
 /**
  * Renders the disclaimer of Comparison Shopping Service (CSS).
@@ -87,6 +88,10 @@ const SetupAccounts = ( props ) => {
 		useGoogleMCAccount();
 	const { hasFinishedResolution } = useGoogleAdsAccount();
 	const isGoogleAdsReady = useGoogleAdsAccountReady();
+	// MC is ready when we have a connection and preconditions are met.
+	// The `link_ads` step will be resolved when the Ads account is connected
+	// since these can be connected in any order.
+	const isGoogleMCReady = useGoogleMCAccountReady();
 
 	/**
 	 * When jetpack is loading, or when google account is loading,
@@ -109,15 +114,6 @@ const SetupAccounts = ( props ) => {
 		return <AppSpinner />;
 	}
 
-	// MC is ready when we have a connection and preconditions are met.
-	// The `link_ads` step will be resolved when the Ads account is connected
-	// since these can be connected in any order.
-	const isGoogleMCReady =
-		isGMCPreconditionReady &&
-		( googleMCAccount?.status === 'connected' ||
-			( googleMCAccount?.status === 'incomplete' &&
-				googleMCAccount?.step === 'link_ads' ) );
-
 	const isContinueButtonDisabled = ! (
 		hasFinishedResolution &&
 		isGoogleAdsReady &&