Kickoff MC and Ads account creation

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

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import AccountDetails from './account-details';
+import CreatingAccounts from './creating-accounts';
+import useAccountsData from '.~/hooks/useAccountsData';
+
+/**
+ * AccountCardDescription component.
+ * @return {JSX.Element} AccountCardDescription component.
+ */
+const AccountCardDescription = () => {
+	const { creatingWhich, google, googleAdsAccount, googleMCAccount } =
+		useAccountsData();
+
+	return (
+		<>
+			{ creatingWhich ? (
+				<CreatingAccounts creatingAccounts={ creatingWhich } />
+			) : (
+				<AccountDetails
+					email={ google.email }
+					googleAdsID={ googleAdsAccount.id }
+					googleMerchantCenterID={ googleMCAccount.id }
+				/>
+			) }
+		</>
+	);
+};
+
+export default AccountCardDescription;

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

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Account details.
+ *
+ * @param {Object} props Component props.
+ * @param {string} props.email Google account email address.
+ * @param {number} props.googleAdsID Google Ads account ID.
+ * @param {number} props.googleMerchantCenterID Google Merchant Center account ID.
+ * @return {JSX.Element} JSX markup.
+ */
+const AccountDetails = ( { email, googleAdsID, googleMerchantCenterID } ) => {
+	return (
+		<div className="gla-account-card__account_details">
+			<span>{ email }</span>
+			<span>
+				{ sprintf(
+					// Translators: %s is the Merchant Center ID
+					__( 'Merchant Center ID: %s', 'google-listings-and-ads' ),
+					googleMerchantCenterID
+				) }
+			</span>
+			<span>
+				{ sprintf(
+					// Translators: %s is the Google Ads ID
+					__( 'Google Ads ID: %s', 'google-listings-and-ads' ),
+					googleAdsID
+				) }
+			</span>
+		</div>
+	);
+};
+
+export default AccountDetails;

js/src/components/google-combo-account-card/account-card-description/creating-accounts.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	CREATING_ADS_ACCOUNT,
+	CREATING_BOTH_ACCOUNTS,
+	CREATING_MC_ACCOUNT,
+} from '../constants';
+
+/**
+ * Account creation in progress description.
+ * @param {Object} props Component props.
+ * @param {string|null} props.creatingAccounts Whether the accounts are being created. Possible values are: 'both', 'ads', 'mc'.
+ * @return {JSX.Element|null} JSX markup.
+ */
+const CreatingAccounts = ( { creatingAccounts } ) => {
+	let text = null;
+	let subText = null;
+
+	switch ( creatingAccounts ) {
+		case CREATING_BOTH_ACCOUNTS:
+			text = __(
+				'You don’t have Merchant Center nor Google Ads accounts, so we’re creating them for you.',
+				'google-listings-and-ads'
+			);
+			subText = __(
+				'Merchant Center is required to sync products so they show on Google. Google Ads is required to set up conversion measurement for your store.',
+				'google-listings-and-ads'
+			);
+			break;
+
+		case CREATING_ADS_ACCOUNT:
+			text = __(
+				'You don’t have Google Ads account, so we’re creating one for you.',
+				'google-listings-and-ads'
+			);
+			subText = __(
+				'Required to set up conversion measurement for your store.',
+				'google-listings-and-ads'
+			);
+			break;
+
+		case CREATING_MC_ACCOUNT:
+			text = __(
+				'You don’t have Merchant Center account, so we’re creating one for you.',
+				'google-listings-and-ads'
+			);
+			subText = __(
+				'Required to sync products so they show on Google.',
+				'google-listings-and-ads'
+			);
+			break;
+	}
+
+	return (
+		<>
+			<p>{ text }</p>
+			<em>{ subText }</em>
+		</>
+	);
+};
+
+export default CreatingAccounts;

js/src/components/google-combo-account-card/account-card-description/index.js

@@ -0,0 +1,4 @@
+export { default } from './account-card-description';
+export { default as CreatingAccounts } from './creating-accounts.js';
+export { default as AccountDetails } from './account-details';
+export { default as Indicator } from './indicator.js';

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

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ConnectedIconLabel from '.~/components/connected-icon-label';
+import LoadingLabel from '.~/components/loading-label/loading-label';
+import useAccountsData from '.~/hooks/useAccountsData';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
+import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
+
+/**
+ * Account creation indicator.
+ * Displays a loading indicator when accounts are being created or a connected icon when accounts are connected.
+ * @return {JSX.Element|null} Indicator component.
+ */
+const Indicator = () => {
+	const { creatingWhich } = useAccountsData();
+	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
+	const { googleMCAccount, isPreconditionReady } = useGoogleMCAccount();
+	const { hasAccess, step } = useGoogleAdsAccountStatus();
+
+	const isGoogleAdsConnected =
+		hasGoogleAdsConnection &&
+		hasAccess &&
+		[ '', 'billing', 'link_merchant' ].includes( step );
+
+	const isGoogleMCConnected =
+		isPreconditionReady &&
+		( googleMCAccount?.status === 'connected' ||
+			( googleMCAccount?.status === 'incomplete' &&
+				googleMCAccount?.step === 'link_ads' ) );
+
+	if ( creatingWhich ) {
+		return (
+			<LoadingLabel
+				text={ __( 'Creating…', 'google-listings-and-ads' ) }
+			/>
+		);
+	}
+
+	if ( isGoogleAdsConnected && isGoogleMCConnected ) {
+		return <ConnectedIconLabel />;
+	}
+
+	return null;
+};
+
+export default Indicator;

js/src/components/google-combo-account-card/account-creation-context.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * @typedef {Object} AccountCreationContext
+ * @property {boolean} accountsCreated - `true` if the accounts have been created, `false` otherwise.
+ * @property {('ads'|'mc'|'both'|null)} creatingWhich - The accounts that are being created.
+ */
+
+/**
+ * @type {AccountCreationContext}
+ */
+const defaultContext = {
+	accountsCreated: undefined,
+	creatingWhich: undefined,
+};
+
+export const AccountCreationContext = createContext( defaultContext );
+
+/**
+ * AccountCreation's context hook.
+ * @return {AccountCreationContext} The current context value for AccountCreation.
+ * @throws Will throw an error if the context provider is missing in the component's ancestors.
+ */
+export function useAccountCreationContext() {
+	const adaptiveFormContext = useContext( AccountCreationContext );
+
+	if (
+		adaptiveFormContext.accountsCreated === undefined ||
+		adaptiveFormContext.creatingWhich === undefined
+	) {
+		throw new Error(
+			'useAccountCreationContext was used outside of its context provider ConnectedGoogleComboAccountCard.'
+		);
+	}
+
+	return adaptiveFormContext;
+}

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

@@ -14,7 +14,6 @@ import AppButton from '.~/components/app-button';
 import readMoreLink from '../google-account-card/read-more-link';
 import useGoogleConnectFlow from '../google-account-card/use-google-connect-flow';
 import AppDocumentationLink from '../app-documentation-link';
-import './connect-google-combo-account-card.scss';
 
 /**
  * @param {Object} props React props
@@ -34,7 +33,6 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => {
 	return (
 		<AccountCard
 			appearance={ APPEARANCE.GOOGLE }
-			className="gla-connect-google-combo-account-card"
 			disabled={ disabled }
 			alignIcon="top"
 			description={

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

@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import AccountCard, { APPEARANCE } from '../account-card';
+import AccountCardDescription, { Indicator } from './account-card-description';
+import { AccountCreationContext } from './account-creation-context';
+import AppSpinner from '../app-spinner';
+import useAutoCreateAdsMCAccounts from '.~/hooks/useAutoCreateAdsMCAccounts';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
+import './connected-google-combo-account-card.scss';
+
+/**
+ * Renders a Google account card UI with connected account information.
+ * It will also kickoff Ads and Merchant Center account creation if the user does not have accounts.
+ */
+const ConnectedGoogleComboAccountCard = () => {
+	const { hasFinishedResolution: hasFinishedResolutionForCurrentAdsAccount } =
+		useGoogleAdsAccount();
+
+	const { hasFinishedResolution: hasFinishedResolutionForCurrentMCAccount } =
+		useGoogleMCAccount();
+
+	const { accountsCreated, hasDetermined, creatingWhich } =
+		useAutoCreateAdsMCAccounts();
+
+	if (
+		! accountsCreated &&
+		( ! hasDetermined ||
+			! hasFinishedResolutionForCurrentAdsAccount ||
+			! hasFinishedResolutionForCurrentMCAccount )
+	) {
+		return <AccountCard description={ <AppSpinner /> } />;
+	}
+
+	const accountCreationData = {
+		accountsCreated,
+		creatingWhich,
+	};
+
+	return (
+		<AccountCreationContext.Provider value={ accountCreationData }>
+			<AccountCard
+				appearance={ APPEARANCE.GOOGLE }
+				alignIcon="top"
+				className="gla-google-combo-account-card--connected"
+				helper={ <AccountCardDescription /> }
+				indicator={ <Indicator /> }
+			/>
+		</AccountCreationContext.Provider>
+	);
+};
+
+export default ConnectedGoogleComboAccountCard;

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

@@ -0,0 +1,19 @@
+.gla-google-combo-account-card--connected {
+
+	.gla-account-card__helper {
+		font-style: normal;
+		font-size: $gla-font-base;
+		color: $black;
+
+		em {
+			font-style: italic;
+			color: $gray-700;
+		}
+	}
+
+	.gla-account-card__account_details {
+		display: flex;
+		flex-direction: column;
+		gap: $grid-unit;
+	}
+}

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

@@ -0,0 +1,3 @@
+export const CREATING_BOTH_ACCOUNTS = 'both';
+export const CREATING_ADS_ACCOUNT = 'ads';
+export const CREATING_MC_ACCOUNT = 'mc';

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

@@ -5,8 +5,8 @@ import useGoogleAccount from '.~/hooks/useGoogleAccount';
 import AppSpinner from '.~/components/app-spinner';
 import AccountCard from '.~/components/account-card';
 import RequestFullAccessGoogleAccountCard from '../google-account-card/request-full-access-google-account-card';
-import { ConnectedGoogleAccountCard } from '../google-account-card';
 import ConnectGoogleComboAccountCard from './connect-google-combo-account-card';
+import ConnectedGoogleComboAccountCard from './connected-google-combo-account-card';
 
 export default function GoogleComboAccountCard( { disabled = false } ) {
 	const { google, scope, hasFinishedResolution } = useGoogleAccount();
@@ -18,7 +18,7 @@ export default function GoogleComboAccountCard( { disabled = false } ) {
 	const isConnected = google?.active === 'yes';
 
 	if ( isConnected && scope.glaRequired ) {
-		return <ConnectedGoogleAccountCard googleAccount={ google } />;
+		return <ConnectedGoogleComboAccountCard />;
 	}
 
 	if ( isConnected && ! scope.glaRequired ) {

js/src/components/google-mc-account-card/connect-mc/index.js

@@ -18,7 +18,7 @@ import ReclaimUrlCard from '../reclaim-url-card';
 import AccountCard, { APPEARANCE } from '.~/components/account-card';
 import CreateAccountButton from '../create-account-button';
 import useConnectMCAccount from '../useConnectMCAccount';
-import useCreateMCAccount from '../useCreateMCAccount';
+import useCreateMCAccount from '.~/hooks/useCreateMCAccount';
 import CreatingCard from '../creating-card';
 import './index.scss';
 

js/src/components/google-mc-account-card/create-account.js

@@ -4,7 +4,7 @@
 import CreateAccountCard from './create-account-card';
 import CreatingCard from './creating-card';
 import ReclaimUrlCard from './reclaim-url-card';
-import useCreateMCAccount from './useCreateMCAccount';
+import useCreateMCAccount from '.~/hooks/useCreateMCAccount';
 
 /**
  * Create Account flow.

js/src/constants.js

@@ -70,6 +70,12 @@ export const GOOGLE_ADS_ACCOUNT_STATUS = {
 	INCOMPLETE: 'incomplete',
 };
 
+export const GOOGLE_MC_ACCOUNT_STATUS = {
+	CONNECTED: 'connected',
+	DISCONNECTED: 'disconnected',
+	INCOMPLETE: 'incomplete',
+};
+
 export const GOOGLE_ADS_BILLING_STATUS = {
 	UNKNOWN: 'unknown',
 	PENDING: 'pending',