Consolidate accounts onboarding: Create new Google Ads account via the combo card

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

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppModal from '.~/components/app-modal';
+import AppButton from '.~/components/app-button';
+import WarningIcon from '.~/components/warning-icon';
+import './confirm-create-modal.scss';
+
+const ConfirmCreateModal = ( {
+	onContinue = () => {},
+	onRequestClose = () => {},
+} ) => {
+	const handleCreateAccountClick = () => {
+		onContinue();
+	};
+
+	return (
+		<AppModal
+			className="gla-ads-warning-modal"
+			title={ __(
+				'Create Google Ads Account',
+				'google-listings-and-ads'
+			) }
+			buttons={ [
+				<AppButton
+					key="confirm"
+					isSecondary
+					eventName="gla_ads_account_warning_modal_confirm_button_click"
+					onClick={ handleCreateAccountClick }
+				>
+					{ __(
+						'Yes, I want a new account',
+						'google-listings-and-ads'
+					) }
+				</AppButton>,
+				<AppButton key="cancel" isPrimary onClick={ onRequestClose }>
+					{ __( 'Cancel', 'google-listings-and-ads' ) }
+				</AppButton>,
+			] }
+			onRequestClose={ onRequestClose }
+		>
+			<p className="gla-ads-warning-modal__warning-text">
+				<WarningIcon />
+				<span>
+					{ __(
+						'Are you sure you want to create a new Google Ads account?',
+						'google-listings-and-ads'
+					) }
+				</span>
+			</p>
+			<p>
+				{ __(
+					'You already have another Ads account associated with this Google account.',
+					'google-listings-and-ads'
+				) }
+			</p>
+			<p>
+				{ __(
+					'If you create a new Google Ads account, you will need to accept an invite to the account before it can be used.',
+					'google-listings-and-ads'
+				) }
+			</p>
+		</AppModal>
+	);
+};
+
+export default ConfirmCreateModal;

js/src/components/google-combo-account-card/connect-ads/confirm-create-modal.scss

@@ -0,0 +1,8 @@
+.gla-ads-warning-modal {
+
+	.gla-ads-warning-modal__warning-text {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--main-gap) / 3);
+	}
+}

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { noop } from 'lodash';
 
 /**
  * Internal dependencies
@@ -14,14 +15,14 @@ import DisconnectAccount from '.~/components/google-ads-account-card/disconnect-
  *
  * @return {JSX.Element} Footer component.
  */
-const ConnectAdsFooter = ( { isConnected } ) => {
+const ConnectAdsFooter = ( { isConnected, onCreateNew = noop } ) => {
 	// If the account is connected, show the disconnect button.
 	if ( isConnected ) {
 		return <DisconnectAccount />;
 	}
 
 	return (
-		<AppButton isTertiary>
+		<AppButton onClick={ onCreateNew } isTertiary>
 			{ __(
 				'Or, create a new Google Ads account',
 				'google-listings-and-ads'

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

@@ -8,14 +8,18 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import AccountCard from '.~/components/account-card';
+import ConnectAccountCard from '../connect-account-card';
+import ConnectAdsFooter from './connect-ads-footer';
+import ConnectAdsBody from './connect-ads-body';
+import ConfirmCreateModal from './confirm-create-modal';
 import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
+import useCreateAccountActions from './useCreateAccountActions';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
 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';
+import LoadingLabel from '.~/components/loading-label/loading-label';
 
 /**
  * ConnectAds component renders an account card to connect to an existing Google Ads account.
@@ -31,13 +35,11 @@ const ConnectAds = () => {
 
 	const {
 		googleAdsAccount,
+		hasGoogleAdsConnection,
 		hasFinishedResolution: hasFinishedResolutionForCurrentAccount,
 	} = useGoogleAdsAccount();
 
-	const isConnected =
-		googleAdsAccount?.status === 'connected' ||
-		( googleAdsAccount?.status === 'incomplete' &&
-			googleAdsAccount?.step === 'link_merchant' );
+	const isConnected = useGoogleAdsAccountReady();
 
 	const [ value, setValue ] = useState();
 	const [ isLoading, setLoading ] = useState( false );
@@ -50,13 +52,25 @@ const ConnectAds = () => {
 	const { refetchGoogleAdsAccount } = useGoogleAdsAccount();
 	const { createNotice } = useDispatchCoreNotices();
 	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
+	const {
+		creatingNewAccount,
+		showCreateNewModal,
+		onContinue,
+		onCreateNew,
+		onRequestClose,
+	} = useCreateAccountActions();
 
 	useEffect( () => {
 		if ( isConnected ) {
 			setValue( googleAdsAccount.id );
 		}
 	}, [ googleAdsAccount, isConnected ] );
 
+	// If the account is in unclaimed state, we don't want to show the card.
+	if ( hasGoogleAdsConnection && ! isConnected ) {
+		return null;
+	}
+
 	const handleConnectClick = async () => {
 		if ( ! value ) {
 			return;
@@ -66,7 +80,7 @@ const ConnectAds = () => {
 		try {
 			await fetchConnectAdsAccount();
 			await fetchGoogleAdsAccountStatus();
-			await refetchGoogleAdsAccount();
+			refetchGoogleAdsAccount();
 			setLoading( false );
 		} catch ( error ) {
 			setLoading( false );
@@ -80,6 +94,21 @@ const ConnectAds = () => {
 		}
 	};
 
+	if ( creatingNewAccount ) {
+		return (
+			<AccountCard
+				description={
+					<LoadingLabel
+						text={ __(
+							'Creating new ads account',
+							'google-listings-and-ads'
+						) }
+					/>
+				}
+			/>
+		);
+	}
+
 	// If the accounts are still being fetched, we don't want to show the card.
 	if (
 		! hasFinishedResolutionForExistingAdsAccount ||
@@ -90,27 +119,40 @@ const ConnectAds = () => {
 	}
 
 	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
-					isConnected={ isConnected }
-					handleConnectClick={ handleConnectClick }
-					isLoading={ isLoading }
-					setValue={ setValue }
-					value={ value }
+		<>
+			<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
+						isConnected={ isConnected }
+						handleConnectClick={ handleConnectClick }
+						isLoading={ isLoading }
+						setValue={ setValue }
+						value={ value }
+					/>
+				}
+				footer={
+					<ConnectAdsFooter
+						onCreateNew={ onCreateNew }
+						isConnected={ isConnected }
+					/>
+				}
+			/>
+			{ showCreateNewModal && (
+				<ConfirmCreateModal
+					onContinue={ onContinue }
+					onRequestClose={ onRequestClose }
 				/>
-			}
-			footer={ <ConnectAdsFooter isConnected={ isConnected } /> }
-		/>
+			) }
+		</>
 	);
 };
 

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

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useUpsertAdsAccount from '.~/hooks/useUpsertAdsAccount';
+
+const useCreateAccountActions = () => {
+	const [ creatingNewAccount, setCreatingNewAccount ] = useState( false );
+	const [ showCreateNewModal, setShowCreateNewModal ] = useState( false );
+	const [ upsertAdsAccount ] = useUpsertAdsAccount();
+
+	const onCreateNew = () => {
+		setShowCreateNewModal( true );
+	};
+
+	const onRequestClose = () => {
+		setShowCreateNewModal( false );
+	};
+
+	const onContinue = async () => {
+		setShowCreateNewModal( false );
+		setCreatingNewAccount( true );
+		await upsertAdsAccount();
+		setCreatingNewAccount( false );
+	};
+
+	return {
+		creatingNewAccount,
+		onContinue,
+		onCreateNew,
+		onRequestClose,
+		showCreateNewModal,
+		setShowCreateNewModal,
+	};
+};
+
+export default useCreateAccountActions;