Kickoff MC and Ads account creation

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

@@ -0,0 +1,120 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useGoogleAccount from '.~/hooks/useGoogleAccount';
+
+/**
+ * Renders the description for the account creation card.
+ *
+ * @param {*} param0 Props.
+ * @param {boolean} param0.isCreatingAccounts Whether accounts are being created.
+ * @param {boolean} param0.isCreatingMCAccount Whether Merchant Center account is being created.
+ * @param {boolean} param0.isCreatingAdsAccount Whether Google Ads account is being created.
+ * @param {Object} param0.googleMCAccount Google Merchant Center account.
+ * @param {Object} param0.googleAdsAccount Google Ads account.
+ */
+const AccountCreationDescription = ( {
+	isCreatingAccounts,
+	isCreatingMCAccount,
+	isCreatingAdsAccount,
+	googleMCAccount = {},
+	googleAdsAccount = {},
+} ) => {
+	const { google } = useGoogleAccount();
+
+	const getDescription = () => {
+		let description;
+
+		if ( isCreatingAccounts ) {
+			if ( isCreatingMCAccount && isCreatingAdsAccount ) {
+				description = (
+					<p>
+						{ __(
+							'You don’t have Merchant Center nor Google Ads accounts, so we’re creating them for you.',
+							'google-listings-and-ads'
+						) }
+					</p>
+				);
+			} else if ( isCreatingAdsAccount ) {
+				description = (
+					<>
+						<p>
+							{ __(
+								'You don’t have Google Ads account, so we’re creating one for you.',
+								'google-listings-and-ads'
+							) }
+						</p>
+						<em>
+							{ __(
+								'Required to set up conversion measurement for your store.',
+								'google-listings-and-ads'
+							) }
+						</em>
+					</>
+				);
+			} else if ( isCreatingMCAccount ) {
+				description = (
+					<>
+						<p>
+							{ __(
+								'You don’t have Merchant Center account, so we’re creating one for you.',
+								'google-listings-and-ads'
+							) }
+						</p>
+						<em>
+							{ __(
+								'Required to sync products so they show on Google.',
+								'google-listings-and-ads'
+							) }
+						</em>
+					</>
+				);
+			}
+		} else {
+			description = (
+				<>
+					<p>{ google?.email }</p>
+					{ googleMCAccount?.id && (
+						<p>
+							{ sprintf(
+								// Translators: %s is the Merchant Center ID
+								__(
+									'Merchant Center ID: %s',
+									'google-listings-and-ads'
+								),
+								googleMCAccount.id
+							) }
+						</p>
+					) }
+					{ googleAdsAccount?.id && (
+						<p>
+							{ sprintf(
+								// Translators: %s is the Google Ads ID
+								__(
+									'Google Ads ID: %s',
+									'google-listings-and-ads'
+								),
+								googleAdsAccount.id
+							) }
+						</p>
+					) }
+				</>
+			);
+		}
+
+		return description;
+	};
+
+	return (
+		<div className="gla-connected-google-combo-account-card__description">
+			{ getDescription() }
+		</div>
+	);
+};
+
+export default AccountCreationDescription;

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

@@ -1,6 +1,10 @@
-.gla-connect-google-combo-account-card {
+.gla-google-combo-account-card--connected {
 
-	.gla-account-card__helper {
-		font-size: $gla-font-base;
+	.gla-account-card__icon {
+		align-self: flex-start;
+	}
+
+	.gla-account-card__description p {
+		margin: 0;
 	}
 }

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

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AccountCard, { APPEARANCE } from '../account-card';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
+import AppSpinner from '../app-spinner';
+import useAutoCreateAdsMCAccounts from '../../hooks/useAutoCreateAdsMCAccounts';
+import LoadingLabel from '../loading-label/loading-label';
+import AccountCreationDescription from './account-creation-description';
+
+/**
+ * Clicking on the "connect to a different Google account" button.
+ *
+ * @event gla_google_account_connect_different_account_button_click
+ */
+
+/**
+ * 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.
+ *
+ * @param {Object} props React props.
+ * @param {{ googleAccount: object }} props.googleAccount The Google account.
+ *
+ * @fires gla_google_account_connect_different_account_button_click
+ */
+const ConnectedGoogleComboAccountCard = ( { googleAccount } ) => {
+	const {
+		googleMCAccount,
+		hasFinishedResolution: hasFinishedResolutionForCurrentMCAccount,
+	} = useGoogleMCAccount();
+
+	const {
+		googleAdsAccount,
+		hasFinishedResolution: hasFinishedResolutionForCurrentAdsAccount,
+	} = useGoogleAdsAccount();
+
+	const {
+		accountsCreated,
+		accountCreationChecksResolved,
+		isCreatingAdsAccount,
+		isCreatingMCAccount,
+	} = useAutoCreateAdsMCAccounts();
+
+	const isCreatingAccounts = isCreatingAdsAccount || isCreatingMCAccount;
+
+	if (
+		! accountsCreated &&
+		( ! hasFinishedResolutionForCurrentAdsAccount ||
+			! hasFinishedResolutionForCurrentMCAccount ||
+			! accountCreationChecksResolved )
+	) {
+		return <AccountCard description={ <AppSpinner /> } />;
+	}
+
+	const creatingAccounts =
+		isCreatingAccounts ||
+		( accountsCreated &&
+			( ! hasFinishedResolutionForCurrentMCAccount ||
+				! hasFinishedResolutionForCurrentAdsAccount ) );
+
+	const getHelper = () =>
+		isCreatingAdsAccount &&
+		isCreatingMCAccount && (
+			<p>
+				{ __(
+					'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'
+				) }
+			</p>
+		);
+
+	const getIndicator = () => {
+		if ( creatingAccounts ) {
+			return (
+				<LoadingLabel
+					text={ __( 'Creating…', 'google-listings-and-ads' ) }
+				/>
+			);
+		}
+
+		return null;
+	};
+
+	return (
+		<AccountCard
+			appearance={ APPEARANCE.GOOGLE }
+			className="gla-google-combo-account-card--connected"
+			description={
+				<AccountCreationDescription
+					isCreatingAccounts={ creatingAccounts }
+					isCreatingAdsAccount={ isCreatingAdsAccount }
+					isCreatingMCAccount={ isCreatingMCAccount }
+					googleAccount={ googleAccount }
+					googleMCAccount={ googleMCAccount }
+					googleAdsAccount={ googleAdsAccount }
+				/>
+			}
+			helper={ getHelper() }
+			indicator={ getIndicator() }
+		/>
+	);
+};
+
+export default ConnectedGoogleComboAccountCard;

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 googleAccount={ google } />;
 	}
 
 	if ( isConnected && ! scope.glaRequired ) {

js/src/hooks/useAutoCreateAdsMCAccounts.js

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useCreateMCAccount from '../components/google-mc-account-card/useCreateMCAccount';
+import useUpsertAdsAccount from '.~/hooks/useUpsertAdsAccount';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
+import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts';
+
+/**
+ * Custom hook to handle the creation of Google Merchant Center (MC) and Google Ads accounts.
+ *
+ * @typedef {Object} AutoCreateAccountsStatus
+ * @property {boolean} isCreatingAdsAccount Indicates if the Google Ads account is currently being created.
+ * @property {boolean} isCreatingMCAccount Indicates if the Google Merchant Center account is currently being created.
+ * @property {boolean} accountCreationChecksResolved Indicates if the account creation checks (for existing accounts) have been resolved.
+ * @property {boolean} accountsCreated Indicates if both the Google Ads and Google Merchant Center accounts have been successfully created.
+ *
+ * @return {AutoCreateAccountsStatus} Object containing properties related to the account creation status.
+ */
+const useAutoCreateAdsMCAccounts = () => {
+	/**
+	 * Refs are used to avoid the re-render of the parent component.
+	 *
+	 * accountCreationChecksResolvedRef - Indicates if the account creation checks have been resolved.
+	 * isCreatingAccountsRef - Indicates if the accounts are being created.
+	 * accountsCreatedRef - Indicates if the accounts have been created.
+	 */
+	const accountCreationChecksResolvedRef = useRef( false );
+	const isCreatingAccountsRef = useRef( false );
+	const isCreatingAdsAccountsRef = useRef( false );
+	const isCreatingMCAccountsRef = useRef( false );
+	const accountsCreatedRef = useRef( false );
+
+	const {
+		data: existingMCAccounts,
+		hasFinishedResolution: hasFinishedResolutionForExistingMCAccounts,
+	} = useExistingGoogleMCAccounts();
+
+	const {
+		existingAccounts: existingAdsAccount,
+		isResolving: isResolvingExistingAdsAccount,
+	} = useExistingGoogleAdsAccounts();
+
+	const [ handleCreateAccount, { response } ] = useCreateMCAccount();
+	const [ upsertAdsAccount, { loading } ] = useUpsertAdsAccount();
+
+	const createAccounts = async () => {
+		const hasExistingMCAccount = existingMCAccounts.length > 0;
+		const hasExistingAdsAccount = existingAdsAccount.length > 0;
+
+		isCreatingMCAccountsRef.current = ! hasExistingMCAccount;
+		isCreatingAdsAccountsRef.current = ! hasExistingAdsAccount;
+		isCreatingAccountsRef.current =
+			! hasExistingAdsAccount || ! hasExistingMCAccount;
+
+		if ( ! hasExistingMCAccount ) {
+			await handleCreateAccount();
+		}
+
+		if ( ! hasExistingAdsAccount ) {
+			await upsertAdsAccount();
+		}
+	};
+
+	useEffect( () => {
+		if (
+			isCreatingAccountsRef.current === true &&
+			response?.status === 200 &&
+			! loading
+		) {
+			isCreatingMCAccountsRef.current = false;
+			isCreatingAdsAccountsRef.current = false;
+			isCreatingAccountsRef.current = false;
+			accountsCreatedRef.current = true;
+		}
+	}, [ response, loading ] );
+
+	useEffect( () => {
+		const existingAccountsResolved =
+			! isResolvingExistingAdsAccount &&
+			hasFinishedResolutionForExistingMCAccounts;
+
+		accountCreationChecksResolvedRef.current = existingAccountsResolved;
+
+		if (
+			existingAccountsResolved &&
+			isCreatingAccountsRef.current === false
+		) {
+			const hasExistingMCAccount = existingMCAccounts?.length > 0;
+			const hasExistingAdsAccount = existingAdsAccount?.length > 0;
+
+			if ( ! hasExistingMCAccount || ! hasExistingAdsAccount ) {
+				createAccounts();
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		isResolvingExistingAdsAccount,
+		hasFinishedResolutionForExistingMCAccounts,
+	] );
+
+	return {
+		accountsCreated: accountsCreatedRef.current,
+		accountCreationChecksResolved: accountCreationChecksResolvedRef.current,
+		isCreatingAdsAccount: isCreatingAdsAccountsRef.current,
+		isCreatingMCAccount: isCreatingMCAccountsRef.current,
+	};
+};
+
+export default useAutoCreateAdsMCAccounts;