Consolidate accounts onboarding: Connect to existing Google Ads account via the combo card

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

@@ -106,15 +106,15 @@ const AccountCreationDescription = ( {
 							'Merchant Center ID: %s',
 							'google-listings-and-ads'
 						),
-						googleMCAccount.id
+						googleMCAccount?.id
 					) }
 				/>
 				<AccountInfo
 					account={ googleAdsAccount }
 					text={ sprintf(
 						// Translators: %s is the Google Ads ID
 						__( 'Google Ads ID: %s', 'google-listings-and-ads' ),
-						googleAdsAccount.id
+						googleAdsAccount?.id
 					) }
 				/>
 			</>

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

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Section from '.~/wcdl/section';
+import AccountCard from '.~/components/account-card';
+import './connect-account-card.scss';
+
+/**
+ * ConnectAccountCard component renders an account card with a title, helper text, body, and footer sections.
+ *
+ * @param {Object} props Props.
+ * @param {string} props.title The title of the account card.
+ * @param {string} props.helperText The helper text for the account card.
+ * @param {JSX.Element} props.body The content for the body of the account card.
+ * @param {JSX.Element} props.footer The content for the footer of the account card.
+ * @param {string} props.className Additional class names for the account card.
+ * @return {JSX.Element} ConnectAccountCard component.
+ */
+const ConnectAccountCard = ( {
+	title,
+	helperText,
+	body,
+	footer,
+	className = '',
+} ) => {
+	return (
+		<AccountCard
+			className={ classNames(
+				'gla-google-combo-service-account-card',
+				className
+			) }
+			title={ title }
+			helper={ helperText }
+		>
+			<Section.Card.Body className="gla-google-combo-service-account-card__body">
+				{ body }
+			</Section.Card.Body>
+			<Section.Card.Footer className="gla-google-combo-service-account-card__footer">
+				{ footer }
+			</Section.Card.Footer>
+		</AccountCard>
+	);
+};
+
+export default ConnectAccountCard;

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

@@ -0,0 +1,27 @@
+.gla-google-combo-service-account-card {
+	padding: var(--large-gap);
+
+	> div {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--main-gap) / 2);
+	}
+
+	.wcdl-section-card-body,
+	.gla-google-combo-service-account-card__body {
+		padding: 0;
+
+		.app-select-control {
+			flex-grow: 1;
+		}
+	}
+
+	.gla-google-combo-service-account-card__footer {
+		border: 0;
+		padding: 0;
+	}
+
+	.gla-connected-icon-label {
+		flex-basis: content;
+	}
+}

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

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AdsAccountSelectControl from '.~/components/ads-account-select-control';
+import AppButton from '.~/components/app-button';
+import ContentButtonLayout from '.~/components/content-button-layout';
+import ConnectedIconLabel from '.~/components/connected-icon-label';
+import LoadingLabel from '.~/components/loading-label/loading-label';
+import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+import { FILTER_ONBOARDING } from '.~/utils/tracks';
+
+/**
+ *
+ * @param {Object} props Props.
+ * @param {Array} props.accounts Accounts.
+ * @param {Object} props.googleAdsAccount Google Ads account object.
+ * @param {boolean} props.isConnected Whether the account is connected.
+ * @param {Function} props.handleConnectClick Callback to handle the connect click.
+ * @param {boolean} props.isLoading Whether the card is in a loading state.
+ * @param {Function} props.setValue Callback to set the value.
+ * @param {string} props.value Ads account ID.
+ * @return {JSX.Element} Body component.
+ */
+const ConnectAdsBody = ( {
+	accounts,
+	googleAdsAccount,
+	isConnected,
+	handleConnectClick,
+	isLoading,
+	setValue,
+	value,
+} ) => {
+	const initialValueRef = useRef( googleAdsAccount.id );
+	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
+
+	useEffect( () => {
+		setValue( initialValueRef.current );
+	}, [ initialValueRef, setValue ] );
+
+	const ConnectCTA = () => {
+		if ( isConnected && initialValueRef.current === Number( value ) ) {
+			return <ConnectedIconLabel />;
+		}
+
+		return (
+			<AppButton
+				isSecondary
+				disabled={ ! value }
+				eventName="gla_ads_account_connect_button_click"
+				eventProps={ getEventProps( {
+					id: Number( value ),
+				} ) }
+				onClick={ handleConnectClick }
+			>
+				{ __( 'Connect', 'google-listings-and-ads' ) }
+			</AppButton>
+		);
+	};
+
+	return (
+		<ContentButtonLayout>
+			<AdsAccountSelectControl
+				accounts={ accounts }
+				value={ value }
+				onChange={ setValue }
+			/>
+			{ isLoading ? (
+				<LoadingLabel
+					text={ __( 'Connecting…', 'google-listings-and-ads' ) }
+				/>
+			) : (
+				<ConnectCTA />
+			) }
+		</ContentButtonLayout>
+	);
+};
+
+export default ConnectAdsBody;

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

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+
+/**
+ *
+ * @param {Object} props Props.
+ * @param {boolean} props.isLoading Whether the footer is in a loading state.
+ * @param {Function} props.onCreateNew Callback to handle the new ads account creation.
+ * @return {JSX.Element} Footer component.
+ */
+const ConnectAdsFooter = ( { isLoading, onCreateNew = () => {} } ) => (
+	<AppButton isTertiary disabled={ isLoading } onClick={ onCreateNew }>
+		{ __(
+			'Or, create a new Google Ads account',
+			'google-listings-and-ads'
+		) }
+	</AppButton>
+);
+
+export default ConnectAdsFooter;

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

@@ -0,0 +1,124 @@
+/**
+ * External dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AccountCard from '.~/components/account-card';
+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 ConnectAccountCard from '../connect-account-card';
+import ConnectAdsFooter from './connect-ads-footer';
+import ConnectAdsBody from './connect-ads-body';
+
+/**
+ * Clicking on the button to connect an existing Google Ads account.
+ *
+ * @event gla_ads_account_connect_button_click
+ * @property {number} id The account ID to be connected.
+ * @property {string} [context] Indicates the place where the button is located.
+ * @property {string} [step] Indicates the step in the onboarding process.
+ */
+
+/**
+ * ConnectAds component renders an account card to connect to an existing Google Ads account.
+ *
+ * @fires gla_ads_account_connect_button_click when "Connect" button is clicked.
+ * @fires gla_documentation_link_click with `{ context: 'setup-ads-connect-account', link_id: 'connect-sub-account', href: 'https://support.google.com/google-ads/answer/6139186' }`
+ * @return {JSX.Element} {@link AccountCard} filled with content.
+ */
+const ConnectAds = () => {
+	const {
+		existingAccounts: accounts,
+		hasFinishedResolution: hasFinishedResolutionForExistingAdsAccount,
+	} = useExistingGoogleAdsAccounts();
+
+	const {
+		googleAdsAccount,
+		hasFinishedResolution: hasFinishedResolutionForCurrentAccount,
+	} = useGoogleAdsAccount();
+
+	const isConnected =
+		googleAdsAccount?.status === 'connected' ||
+		( googleAdsAccount?.status === 'incomplete' &&
+			googleAdsAccount?.step === 'link_merchant' );
+
+	const [ value, setValue ] = useState();
+	const [ isLoading, setLoading ] = useState( false );
+	const [ fetchConnectAdsAccount ] = useApiFetchCallback( {
+		path: `/wc/gla/ads/accounts`,
+		method: 'POST',
+		data: { id: value },
+	} );
+	const { refetchGoogleAdsAccount } = useGoogleAdsAccount();
+	const { createNotice } = useDispatchCoreNotices();
+	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
+
+	const handleConnectClick = async () => {
+		if ( ! value ) {
+			return;
+		}
+
+		setLoading( true );
+		try {
+			await fetchConnectAdsAccount();
+			await fetchGoogleAdsAccountStatus();
+			await refetchGoogleAdsAccount();
+			setLoading( false );
+		} catch ( error ) {
+			setLoading( false );
+			createNotice(
+				'error',
+				__(
+					'Unable to connect your Google Ads account. Please try again later.',
+					'google-listings-and-ads'
+				)
+			);
+		}
+	};
+
+	// If the accounts are still being fetched, we don't want to show the card.
+	if (
+		! hasFinishedResolutionForExistingAdsAccount ||
+		! hasFinishedResolutionForCurrentAccount ||
+		accounts.length === 0
+	) {
+		return null;
+	}
+
+	return (
+		<ConnectAccountCard
+			className="gla-google-combo-service-account-card--ads"
+			title={ __(
+				'Connect to existing Google Ads account',
+				'google-listings-and-ads'
+			) }
+			helperText={ __(
+				'Required to set up conversion measurement for your store.',
+				'google-listings-and-ads'
+			) }
+			body={
+				<ConnectAdsBody
+					{ ...{
+						accounts,
+						googleAdsAccount,
+						isConnected,
+						handleConnectClick,
+						isLoading,
+						setValue,
+						value,
+					} }
+				/>
+			}
+			footer={ <ConnectAdsFooter /> }
+		/>
+	);
+};
+
+export default ConnectAds;

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

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+
+export { default as ConnectAds } from './connect-ads';

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

@@ -11,6 +11,7 @@ import AppSpinner from '../app-spinner';
 import useAutoCreateAdsMCAccounts from '../../hooks/useAutoCreateAdsMCAccounts';
 import LoadingLabel from '../loading-label/loading-label';
 import AccountCreationDescription from './account-creation-description';
+import { ConnectAds } from './connect-ads';
 import './connected-google-combo-account-card.scss';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount';
@@ -109,20 +110,24 @@ const ConnectedGoogleComboAccountCard = () => {
 	};
 
 	return (
-		<AccountCard
-			appearance={ APPEARANCE.GOOGLE }
-			className="gla-google-combo-account-card--connected"
-			description={
-				<AccountCreationDescription
-					isCreatingBothAccounts={ isCreatingBothAccounts }
-					isCreatingAdsAccount={ isCreatingAdsAccount }
-					isCreatingMCAccount={ isCreatingMCAccount }
-					accountsCreated={ accountsCreated }
-				/>
-			}
-			helper={ getHelper() }
-			indicator={ getIndicator() }
-		/>
+		<div className="gla-google-combo-account-card gla-account-card">
+			<AccountCard
+				appearance={ APPEARANCE.GOOGLE }
+				className="gla-google-combo-account-card--connected"
+				description={
+					<AccountCreationDescription
+						isCreatingBothAccounts={ isCreatingBothAccounts }
+						isCreatingAdsAccount={ isCreatingAdsAccount }
+						isCreatingMCAccount={ isCreatingMCAccount }
+						accountsCreated={ accountsCreated }
+					/>
+				}
+				helper={ getHelper() }
+				indicator={ getIndicator() }
+			/>
+
+			<ConnectAds />
+		</div>
 	);
 };