Connect MC Account within 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-mc/connect-mc-footer.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import CreateAccountButton from '.~/components/google-mc-account-card/create-account-button';
+import DisconnectAccountButton from '.~/components/google-mc-account-card/disconnect-account-button';
+
+/**
+ * ConnectMCFooter component.
+ *
+ * This component renders the footer for the Merchant Center connection section.
+ * It 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.handleCreateAccount Callback function for creating a new Merchant Center account.
+ */
+const ConnectMCFooter = ( {
+	isConnected,
+	resultConnectMC,
+	resultCreateAccount,
+	handleCreateAccount,
+} ) => {
+	if ( isConnected ) {
+		const handleDisconnect = () => {
+			resultConnectMC.reset();
+			resultCreateAccount.reset();
+		};
+
+		return (
+			<DisconnectAccountButton
+				onDisconnect={ handleDisconnect }
+				isTertiary
+			/>
+		);
+	}
+
+	return (
+		<CreateAccountButton
+			isTertiary
+			disabled={ resultConnectMC.loading }
+			onCreateAccount={ handleCreateAccount }
+		>
+			{ __(
+				'Or, create a new Merchant Center account',
+				'google-listings-and-ads'
+			) }
+		</CreateAccountButton>
+	);
+};
+
+export default ConnectMCFooter;

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

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
+import AccountCard from '.~/components/account-card';
+import AppButton from '.~/components/app-button';
+import ConnectedIconLabel from '.~/components/connected-icon-label';
+import ConnectMCFooter from './connect-mc-footer';
+import LoadingLabel from '.~/components/loading-label';
+import AccountConnectionStatus from '.~/components/google-mc-account-card/connect-mc/account-connection-status';
+import MerchantCenterSelect from './merchant-center-select';
+import useConnectMCAccount from '.~/hooks/useConnectMCAccount';
+import { hasAccountConnectionIssue } from '.~/components/google-mc-account-card/connect-mc/utils';
+
+/**
+ * Clicking on the "Switch account" button to select a different Google Merchant Center account to connect.
+ *
+ * @event gla_mc_account_switch_account_button_click
+ * @property {string} context (`switch-url`|`reclaim-url`) - indicate the button is clicked from which step.
+ */
+
+/**
+ * Clicking on the button to connect an existing Google Merchant Center account.
+ *
+ * @event gla_mc_account_connect_button_click
+ * @property {number} id The account ID to be connected.
+ */
+
+/**
+ * ConnectMC component.
+ *
+ * This component renders Merchant Center connection section.
+ * It is using createMCAccount and resultCreateMCAccount from the parent component.
+ * @fires gla_mc_account_connect_button_click
+ * @param {Object} props
+ * @param {Function} props.createMCAccount Callback function for creating a new Merchant Center account.
+ * @param {Object} props.resultCreateMCAccount The result of the create account request.
+ */
+const ConnectMC = ( { createMCAccount, resultCreateMCAccount } ) => {
+	const {
+		googleMCAccount,
+		hasFinishedResolution,
+		isReady: isGoogleMCReady,
+	} = useGoogleMCAccount();
+	const [ accountID, setAccountID ] = useState();
+	const [ handleConnectMC, resultConnectMC ] =
+		useConnectMCAccount( accountID );
+
+	useEffect( () => {
+		if ( isGoogleMCReady ) {
+			setAccountID( googleMCAccount.id );
+		}
+	}, [ googleMCAccount, isGoogleMCReady ] );
+
+	const accountConnectionIssue = hasAccountConnectionIssue(
+		resultConnectMC,
+		resultCreateMCAccount
+	);
+
+	if ( ! isGoogleMCReady && accountConnectionIssue ) {
+		return (
+			<AccountConnectionStatus
+				resultConnectMC={ resultConnectMC }
+				resultCreateAccount={ resultCreateMCAccount }
+				onRetry={ createMCAccount }
+			/>
+		);
+	}
+
+	const getIndicator = () => {
+		if ( ! hasFinishedResolution ) {
+			return <LoadingLabel />;
+		}
+
+		if ( isGoogleMCReady ) {
+			return <ConnectedIconLabel />;
+		}
+
+		if ( resultConnectMC.loading ) {
+			return (
+				<LoadingLabel
+					text={ __( 'Connecting…', 'google-listings-and-ads' ) }
+				/>
+			);
+		}
+
+		return (
+			<AppButton
+				isSecondary
+				eventName="gla_mc_account_connect_button_click"
+				eventProps={ { id: Number( accountID ) } }
+				onClick={ handleConnectMC }
+			>
+				{ __( 'Connect', 'google-listings-and-ads' ) }
+			</AppButton>
+		);
+	};
+
+	return (
+		<AccountCard
+			className="gla-google-combo-account-card gla-google-combo-service-account-card--mc"
+			title={ __(
+				'Connect to existing Merchant Center account',
+				'google-listings-and-ads'
+			) }
+			helper={ __(
+				'Required to sync products so they show on Google.',
+				'google-listings-and-ads'
+			) }
+			alignIndicator="toDetail"
+			indicator={ getIndicator() }
+			detail={
+				<MerchantCenterSelect
+					isConnected={ isGoogleMCReady }
+					value={ accountID }
+					onChange={ setAccountID }
+				/>
+			}
+			actions={
+				<ConnectMCFooter
+					isConnected={ isGoogleMCReady }
+					resultConnectMC={ resultConnectMC }
+					resultCreateAccount={ resultCreateMCAccount }
+					handleCreateAccount={ createMCAccount }
+				/>
+			}
+		/>
+	);
+};
+
+export default ConnectMC;

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

@@ -0,0 +1 @@
+export { default } from './connect-mc';

js/src/components/google-combo-account-card/connect-mc/merchant-center-select.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { getSetting } from '@woocommerce/settings'; // eslint-disable-line import/no-unresolved
+
+/**
+ * Internal dependencies
+ */
+import MerchantCenterSelectControl from '.~/components/merchant-center-select-control';
+import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts';
+import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
+import AppSelectControl from '.~/components/app-select-control';
+
+/**
+ * Renders the connected Merchant Center details, leveraging existing functionality
+ * and styles from AppSelectControl.
+ *
+ * Ideally, using MerchantCenterSelectControl only to display the list of MC accounts would be fine. However, during testing,
+ * we found that when a URL is reclaimed for Merchant Center (MC), the Google API does not
+ * return the newly reclaimed account immediately in the list provided by the useExistingGoogleMCAccounts hook,
+ * even though the data in the store is invalidated. In that case, thus we end up having an account ID
+ * which is not in the list of existing accounts. We then fake the connected select by manually providing
+ * the connected ID.
+ *
+ * @param {Object} props
+ * @param {boolean} props.isConnected Whether the Merchant Center account is connected.
+ */
+const MerchantCenterSelect = ( { isConnected, ...rest } ) => {
+	const { data: existingAccounts } = useExistingGoogleMCAccounts();
+	const { googleMCAccount } = useGoogleMCAccount();
+	const domain = new URL( getSetting( 'homeUrl' ) ).host;
+
+	const accountIdExists = existingAccounts?.some(
+		( existingAccount ) => existingAccount.id === googleMCAccount.id
+	);
+
+	// If the account ID is not in the list of existing accounts, fake the select options by displaying the connected account ID only.
+	if ( ! accountIdExists && isConnected ) {
+		return (
+			<AppSelectControl
+				autoSelectFirstOption
+				nonInteractive
+				value={ googleMCAccount.id }
+				options={ [
+					{
+						value: googleMCAccount.id,
+						label: sprintf(
+							// translators: 1: account domain, 2: account ID.
+							__( '%1$s (%2$s)', 'google-listings-and-ads' ),
+							domain,
+							googleMCAccount.id
+						),
+					},
+				] }
+			/>
+		);
+	}
+
+	return (
+		<MerchantCenterSelectControl
+			nonInteractive={ isConnected }
+			{ ...rest }
+		/>
+	);
+};
+
+export default MerchantCenterSelect;

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 './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();
@@ -29,6 +41,11 @@ const ConnectedGoogleComboAccountCard = () => {
 
 	// @TODO: edit mode implementation in 2605
 	const editMode = false;
+	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"
 				description={ text || <AccountDetails /> }
 				helper={ subText }
 				indicator={
@@ -48,6 +65,13 @@ const ConnectedGoogleComboAccountCard = () => {
 			/>
 
 			{ showConnectAds && <ConnectAds /> }
+
+			{ showConnectMC && (
+				<ConnectMC
+					createMCAccount={ createMCAccount }
+					resultCreateMCAccount={ resultCreateMCAccount }
+				/>
+			) }
 		</div>
 	);
 };