Consolidate accounts onboarding: Set up Google Merchant Center account via the combo card

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

@@ -17,13 +17,13 @@ import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
 const AccountDetails = () => {
 	const { google } = useGoogleAccount();
 	const { googleAdsAccount } = useGoogleAdsAccount();
-	const { googleMCAccount } = useGoogleMCAccount();
+	const { googleMCAccount, isReady: isGoogleMCReady } = useGoogleMCAccount();
 
 	return (
 		<>
 			<p>{ google.email }</p>
 			<p>
-				{ googleMCAccount?.id > 0 &&
+				{ isGoogleMCReady &&
 					sprintf(
 						// Translators: %s is the Merchant Center ID
 						__(

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

@@ -11,7 +11,6 @@ import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import { useAppDispatch } from '.~/data';
-import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
 import AccountCard from '.~/components/account-card';
 import AdsAccountSelectControl from '.~/components/ads-account-select-control';
@@ -32,14 +31,7 @@ const ConnectAds = () => {
 	const { createNotice } = useDispatchCoreNotices();
 	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
 	const isConnected = useGoogleAdsAccountReady();
-	const {
-		existingAccounts: accounts,
-		hasFinishedResolution: hasFinishedResolutionForExistingAdsAccount,
-	} = useExistingGoogleAdsAccounts();
-	const {
-		googleAdsAccount,
-		hasFinishedResolution: hasFinishedResolutionForCurrentAccount,
-	} = useGoogleAdsAccount();
+	const { googleAdsAccount, hasFinishedResolution } = useGoogleAdsAccount();
 	const [ connectGoogleAdsAccount ] = useApiFetchCallback( {
 		path: '/wc/gla/ads/accounts',
 		method: 'POST',
@@ -75,16 +67,11 @@ const ConnectAds = () => {
 		}
 	};
 
-	// If the accounts are still being fetched, we don't want to show the card.
-	if (
-		! hasFinishedResolutionForExistingAdsAccount ||
-		! hasFinishedResolutionForCurrentAccount ||
-		! accounts?.length
-	) {
-		return null;
-	}
-
 	const getIndicator = () => {
+		if ( ! hasFinishedResolution ) {
+			return <LoadingLabel />;
+		}
+
 		if ( isLoading ) {
 			return (
 				<LoadingLabel

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

@@ -35,6 +35,7 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => {
 			appearance={ APPEARANCE.GOOGLE }
 			disabled={ disabled }
 			alignIcon="top"
+			className="gla-google-combo-service-account-card--google"
 			description={
 				<>
 					<p>

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

@@ -8,6 +8,10 @@ import Indicator from './indicator';
 import getAccountCreationTexts from './getAccountCreationTexts';
 import SpinnerCard from '.~/components/spinner-card';
 import useAutoCreateAdsMCAccounts from '.~/hooks/useAutoCreateAdsMCAccounts';
+import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
+import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts';
+import useCreateMCAccount from '.~/hooks/useCreateMCAccount';
+import ConnectMC from '.~/components/google-mc-account-card/connect-mc';
 import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
 import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 import './connected-google-combo-account-card.scss';
@@ -17,7 +21,15 @@ import './connected-google-combo-account-card.scss';
  * It will also kickoff Ads and Merchant Center account creation if the user does not have accounts.
  */
 const ConnectedGoogleComboAccountCard = () => {
-	const { hasDetermined, creatingWhich } = useAutoCreateAdsMCAccounts();
+	// We use a single instance of the hook to create a MC (Merchant Center) account,
+	// ensuring consistent results across both the main component (ConnectedGoogleComboAccountCard) and its child component (ConnectMC).
+	// This approach is especially useful when an MC account is automatically created, and the URL needs to be reclaimed.
+	// The URL reclaim component is rendered within the ConnectMC component.
+	const [ createMCAccount, resultCreateMCAccount ] = useCreateMCAccount();
+	const { data: existingGoogleMCAccounts } = useExistingGoogleMCAccounts();
+	const { isReady: isGoogleMCReady } = useGoogleMCAccount();
+	const { hasDetermined, creatingWhich } =
+		useAutoCreateAdsMCAccounts( createMCAccount );
 	const { text, subText } = getAccountCreationTexts( creatingWhich );
 	const { existingAccounts: existingGoogleAdsAccounts } =
 		useExistingGoogleAdsAccounts();
@@ -28,7 +40,12 @@ const ConnectedGoogleComboAccountCard = () => {
 	}
 
 	// @TODO: edit mode implementation in 2605
-	const editMode = false;
+	const editMode = true;
+	const hasExistingGoogleMCAccounts = existingGoogleMCAccounts?.length > 0;
+	const showConnectMC =
+		( editMode && hasExistingGoogleMCAccounts ) ||
+		( ! isGoogleMCReady && hasExistingGoogleMCAccounts );
+
 	const hasExistingGoogleAdsAccounts = existingGoogleAdsAccounts?.length > 0;
 	const showConnectAds =
 		( editMode && hasExistingGoogleAdsAccounts ) ||
@@ -39,7 +56,7 @@ const ConnectedGoogleComboAccountCard = () => {
 			<AccountCard
 				appearance={ APPEARANCE.GOOGLE }
 				alignIcon="top"
-				className="gla-google-combo-account-card--connected"
+				className="gla-google-combo-account-card gla-google-combo-account-card--connected gla-google-combo-service-account-card--google"
 				description={ text || <AccountDetails /> }
 				helper={ subText }
 				indicator={
@@ -48,6 +65,14 @@ const ConnectedGoogleComboAccountCard = () => {
 			/>
 
 			{ showConnectAds && <ConnectAds /> }
+
+			{ showConnectMC && (
+				<ConnectMC
+					createAccount={ createMCAccount }
+					resultCreateAccount={ resultCreateMCAccount }
+					className="gla-google-combo-account-card gla-google-combo-service-account-card--mc"
+				/>
+			) }
 		</div>
 	);
 };

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

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import CreateAccountButton from '../create-account-button';
+import DisconnectAccountButton from '../disconnect-account-button';
+
+/**
+ * Actions component.
+ *
+ * Conditionally renders either a button to disconnect the account if already
+ * connected, or a button to create a new Merchant Center account.
+ *
+ * @param {Object}   props
+ * @param {boolean}  props.isConnected Whether the Merchant Center account is connected.
+ * @param {Object}   props.resultConnectMC The result of the connection request, used to handle loading state.
+ * @param {Object}   props.resultCreateAccount The result of the create account request.
+ * @param {Function} props.onCreateAccount Callback function for creating a new Merchant Center account.
+ */
+const Actions = ( {
+	isConnected,
+	resultConnectMC,
+	resultCreateAccount,
+	onCreateAccount,
+} ) => {
+	if ( isConnected ) {
+		const handleOnDisconnected = () => {
+			resultConnectMC.reset();
+			resultCreateAccount.reset();
+		};
+
+		return (
+			<DisconnectAccountButton
+				onDisconnected={ handleOnDisconnected }
+				isTertiary
+			/>
+		);
+	}
+
+	return (
+		<CreateAccountButton
+			isTertiary
+			disabled={ resultConnectMC.loading }
+			onCreateAccount={ onCreateAccount }
+		>
+			{ __(
+				'Or, create a new Merchant Center account',
+				'google-listings-and-ads'
+			) }
+		</CreateAccountButton>
+	);
+};
+
+export default Actions;