Onboarding: Connect to existing Ads account in Google Accounts Card

js/src/components/ads-account-select-control/index.js

@@ -10,8 +10,9 @@ import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts'
  */
 const AdsAccountSelectControl = ( props ) => {
 	const { existingAccounts } = useExistingGoogleAdsAccounts();
+	const accounts = props.accounts || existingAccounts;
 
-	const options = existingAccounts?.map( ( acc ) => ( {
+	const options = accounts?.map( ( acc ) => ( {
 		value: acc.id,
 		label: `${ acc.name } (${ acc.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,74 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AdsAccountSelectControl from '.~/components/ads-account-select-control';
+import ContentButtonLayout from '.~/components/content-button-layout';
+import ConnectCTA from './connect-cta';
+import LoadingLabel from '.~/components/loading-label/loading-label';
+
+/**
+ * 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.
+ */
+
+/**
+ * ConnectAdsBody component.
+ *
+ * @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.
+ * @fires gla_ads_account_connect_button_click when "Connect" button is clicked.
+ * @return {JSX.Element} Body component.
+ */
+const ConnectAdsBody = ( {
+	accounts,
+	googleAdsAccount,
+	isConnected,
+	handleConnectClick,
+	isLoading,
+	setValue,
+	value,
+} ) => {
+	const connectedAccount = accounts.filter( ( account ) => {
+		return isConnected && account.id === value;
+	} );
+
+	return (
+		<ContentButtonLayout>
+			<AdsAccountSelectControl
+				accounts={ isConnected ? connectedAccount : accounts }
+				value={ value }
+				onChange={ setValue }
+				autoSelectFirstOption={ true }
+			/>
+			{ isLoading ? (
+				<LoadingLabel
+					text={ __( 'Connecting…', 'google-listings-and-ads' ) }
+				/>
+			) : (
+				<ConnectCTA
+					isConnected={ isConnected }
+					id={ googleAdsAccount.id }
+					handleConnectClick={ handleConnectClick }
+					value={ value }
+				/>
+			) }
+		</ContentButtonLayout>
+	);
+};
+
+export default ConnectAdsBody;

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

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+
+/**
+ * Footer component.
+ *
+ * @return {JSX.Element} Footer component.
+ */
+const ConnectAdsFooter = ( { isConnected } ) => {
+	const text = isConnected
+		? __(
+				'Or, connect to a different Google Ads account',
+				'google-listings-and-ads'
+		  )
+		: __(
+				'Or, create a new Google Ads account',
+				'google-listings-and-ads'
+		  );
+	return <AppButton isTertiary>{ text }</AppButton>;
+};
+
+export default ConnectAdsFooter;

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

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useRef, 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';
+
+/**
+ * ConnectAds component renders an account card to connect to an existing Google Ads account.
+ *
+ * @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 initialValueRef = useRef( null );
+
+	if ( googleAdsAccount?.id ) {
+		initialValueRef.current = googleAdsAccount.id;
+	}
+
+	useEffect( () => {
+		if ( initialValueRef.current ) {
+			setValue( initialValueRef.current );
+		}
+	}, [ initialValueRef ] );
+
+	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={ accounts }
+					googleAdsAccount={ googleAdsAccount }
+					isConnected={ isConnected }
+					handleConnectClick={ handleConnectClick }
+					isLoading={ isLoading }
+					setValue={ setValue }
+					value={ value }
+				/>
+			}
+			footer={ <ConnectAdsFooter isConnected={ isConnected } /> }
+		/>
+	);
+};
+
+export default ConnectAds;

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

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import ConnectedIconLabel from '.~/components/connected-icon-label';
+import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+import { FILTER_ONBOARDING } from '.~/utils/tracks';
+
+/**
+ * Connect CTA component.
+ *
+ * @param {Object} props Props.
+ * @param {boolean} props.isConnected Whether the account is connected.
+ * @param {number} props.id Account ID.
+ * @param {Function} props.handleConnectClick Callback to handle the connect click.
+ * @param {string} props.value Connected account ID.
+ *
+ * @return {JSX.Element} Connect CTA component.
+ */
+const ConnectCTA = ( { isConnected, id, handleConnectClick, value } ) => {
+	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
+
+	if ( isConnected && id === 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>
+	);
+};
+
+export default ConnectCTA;

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

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