Edit combo accounts

js/src/components/account-card/index.js

@@ -121,7 +121,7 @@ const appearanceDict = {
 // The `center` is the default alignment, and no need to append any additional class name.
 const alignStyleName = {
 	center: false,
-	top: `gla-account-card__styled--align-top`,
+	top: 'gla-account-card__styled--align-top',
 };
 
 const indicatorAlignStyleName = {

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

@@ -1,22 +1,10 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import AccountCard, { APPEARANCE } from '.~/components/account-card';
-import AppButton from '.~/components/app-button';
 import ConnectedIconLabel from '.~/components/connected-icon-label';
 import Section from '.~/wcdl/section';
-import useSwitchGoogleAccount from './useSwitchGoogleAccount';
-
-/**
- * Clicking on the "connect to a different Google account" button.
- *
- * @event gla_google_account_connect_different_account_button_click
- */
+import SwitchAccountButton from './switch-account-button';
 
 /**
  * Renders a Google account card UI with connected account information.
@@ -26,16 +14,12 @@ import useSwitchGoogleAccount from './useSwitchGoogleAccount';
  * @param {{ email: string }} props.googleAccount A data payload object containing the user's Google account email.
  * @param {JSX.Element} [props.helper] Helper content below the Google account email.
  * @param {boolean} [props.hideAccountSwitch=false] Indicate whether hide the account switch block at the card footer.
- *
- * @fires gla_google_account_connect_different_account_button_click
  */
 const ConnectedGoogleAccountCard = ( {
 	googleAccount,
 	helper,
 	hideAccountSwitch = false,
 } ) => {
-	const [ handleSwitch, { loading } ] = useSwitchGoogleAccount();
-
 	return (
 		<AccountCard
 			appearance={ APPEARANCE.GOOGLE }
@@ -45,16 +29,7 @@ const ConnectedGoogleAccountCard = ( {
 		>
 			{ ! hideAccountSwitch && (
 				<Section.Card.Footer>
-					<AppButton
-						isLink
-						disabled={ loading }
-						text={ __(
-							'Or, connect to a different Google account',
-							'google-listings-and-ads'
-						) }
-						eventName="gla_google_account_connect_different_account_button_click"
-						onClick={ handleSwitch }
-					/>
+					<SwitchAccountButton />
 				</Section.Card.Footer>
 			) }
 		</AccountCard>

js/src/components/google-account-card/switch-account-button.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import useSwitchGoogleAccount from './useSwitchGoogleAccount';
+
+/**
+ * Clicking on the "connect to a different Google account" button.
+ *
+ * @event gla_google_account_connect_different_account_button_click
+ */
+
+/**
+ * Renders a switch button that lets user connect with another Google account.
+ *
+ * @fires gla_google_account_connect_different_account_button_click
+ * @param {Object} props React props
+ * @param {string} [props.text="Or, connect to a different Google account"] Text to display on the button
+ */
+const SwitchAccountButton = ( {
+	text = __(
+		'Or, connect to a different Google account',
+		'google-listings-and-ads'
+	),
+} ) => {
+	const [ handleSwitch, { loading } ] = useSwitchGoogleAccount();
+
+	return (
+		<AppButton
+			isLink
+			disabled={ loading }
+			text={ text }
+			eventName="gla_google_account_connect_different_account_button_click"
+			onClick={ handleSwitch }
+		/>
+	);
+};
+
+export default SwitchAccountButton;

js/src/components/google-ads-account-card/claim-account-button.js

@@ -27,10 +27,15 @@
  *
  * @param {Object} props React props.
  * @param {Function} [props.onClick] Function called back when the button is clicked.
+ * @param {boolean} [props.loading] Whether the button is in a loading state.
  * @param {Object} props.restProps Props to be forwarded to AppButton.
  */
-const ClaimAccountButton = ( { onClick = noop, ...restProps } ) => {
-	const { inviteLink } = useGoogleAdsAccountStatus();
+const ClaimAccountButton = ( {
+	onClick = noop,
+	loading = false,
+	...restProps
+} ) => {
+	const { inviteLink, hasFinishedResolution } = useGoogleAdsAccountStatus();
 	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
 
 	const handleClaimAccountClick = ( event ) => {
@@ -42,12 +47,17 @@
 		onClick( event );
 	};
 
+	if ( ! hasFinishedResolution ) {
+		return null;
+	}
+
 	return (
 		<AppButton
 			{ ...restProps }
 			eventName="gla_open_ads_account_claim_invitation_button_click"
 			eventProps={ getEventProps() }
 			onClick={ handleClaimAccountClick }
+			loading={ loading }
 		/>
 	);
 };

js/src/components/google-ads-account-card/claim-account-button.test.js

@@ -32,6 +32,7 @@ describe( 'ClaimAccountButton', () => {
 
 		useGoogleAdsAccountStatus.mockReturnValue( {
 			inviteLink: 'https://example.com',
+			hasFinishedResolution: true,
 		} );
 	} );
 

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/claim-ads-account/claim-ads-account.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ClaimAccountButton from '.~/components/google-ads-account-card/claim-account-button';
+import Section from '.~/wcdl/section';
+import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
+import { useAppDispatch } from '.~/data';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import useWindowFocusCallbackIntervalEffect from '.~/hooks/useWindowFocusCallbackIntervalEffect';
+import './claim-ads-account.scss';
+
+/**
+ * ClaimAdsAccount component.
+ *
+ * @return {JSX.Element} ClaimAdsAccount component.
+ */
+const ClaimAdsAccount = () => {
+	const [ updating, setUpdating ] = useState( false );
+	const { googleAdsAccount } = useGoogleAdsAccount();
+	const { hasAccess } = useGoogleAdsAccountStatus();
+	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
+
+	const shouldClaimGoogleAdsAccount = Boolean(
+		googleAdsAccount?.id && hasAccess === false
+	);
+
+	const checkUpdatedAdsAccountStatus = useCallback( async () => {
+		if ( ! shouldClaimGoogleAdsAccount ) {
+			return;
+		}
+
+		await fetchGoogleAdsAccountStatus();
+	}, [ fetchGoogleAdsAccountStatus, shouldClaimGoogleAdsAccount ] );
+
+	useWindowFocusCallbackIntervalEffect( checkUpdatedAdsAccountStatus, 30 );
+
+	const handleOnClick = () => {
+		setUpdating( true );
+	};
+
+	return (
+		<Section.Card.Body className="gla-claim-ads-account-section">
+			<div className="gla-claim-ads-account-box">
+				<h4>
+					{ __(
+						'Claim your Google Ads account',
+						'google-listings-and-ads'
+					) }
+				</h4>
+				<p>
+					{ __(
+						'You need to accept the invitation to the Google Ads account we created for you. This gives you access to Google Ads and sets up conversion measurement. You must claim your account in the next 20 days.',
+						'google-listings-and-ads'
+					) }
+				</p>
+				<p className="gla-ads-post-claim-instructions">
+					{ __(
+						'After accepting the invitation, you’ll be prompted to set up billing. We highly recommend doing this to avoid having to do it later on.',
+						'google-listings-and-ads'
+					) }
+				</p>
+				<ClaimAccountButton
+					loading={ updating }
+					text={
+						updating
+							? __( 'Waiting…', 'google-listings-and-ads' )
+							: __(
+									'Claim your Google Ads account',
+									'google-listings-and-ads'
+							  )
+					}
+					isPrimary={ ! updating }
+					onClick={ handleOnClick }
+				/>
+			</div>
+		</Section.Card.Body>
+	);
+};
+
+export default ClaimAdsAccount;

js/src/components/google-combo-account-card/claim-ads-account/claim-ads-account.scss

@@ -0,0 +1,29 @@
+.gla-claim-ads-account-section {
+	padding-top: 0;
+}
+
+.gla-claim-ads-account-box {
+	border: 1px solid $gray-300;
+	font-size: $gla-font-small;
+	padding: $grid-unit-30;
+
+	> * + * {
+		margin: $grid-unit-10 0 0;
+	}
+
+	h4 {
+		font-size: $gla-font-small;
+		margin-top: 0;
+	}
+
+	.gla-ads-post-claim-instructions {
+		color: $gray-700;
+		font-style: italic;
+	}
+
+	button,
+	.gla-loading-label {
+		display: flex;
+		margin-left: auto;
+	}
+}

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

@@ -0,0 +1 @@
+export { default } from './claim-ads-account';

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

@@ -0,0 +1,69 @@
+/**
+ * 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';
+
+/**
+ * Google Ads account creation confirmation modal.
+ * This modal is shown when the user tries to create a new Google Ads account.
+ *
+ * @param {Object} props Component props.
+ * @param {Function} props.onContinue Callback to continue with account creation.
+ * @param {Function} props.onRequestClose Callback to close the modal.
+ * @return {JSX.Element} Confirmation modal.
+ */
+const ConfirmCreateModal = ( { onContinue, onRequestClose } ) => {
+	return (
+		<AppModal
+			className="gla-ads-warning-modal"
+			title={ __(
+				'Create Google Ads Account',
+				'google-listings-and-ads'
+			) }
+			buttons={ [
+				<AppButton key="confirm" isSecondary onClick={ onContinue }>
+					{ __(
+						'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

@@ -14,17 +14,17 @@ import DisconnectAccount from '.~/components/google-ads-account-card/disconnect-
  *
  * @param {Object} props Props.
  * @param {boolean} props.isConnected Whether the account is connected.
+ * @param {Function} props.onCreateNew Callback to create a new account.
  * @param {Object} props.restProps Rest props. Passed to AppButton.
  * @return {JSX.Element} Footer component.
  */
-const ConnectAdsFooter = ( { isConnected, ...restProps } ) => {
-	// If the account is connected, show the disconnect button.
+const ConnectAdsFooter = ( { isConnected, onCreateNew, ...restProps } ) => {
 	if ( isConnected ) {
 		return <DisconnectAccount />;
 	}
 
 	return (
-		<AppButton isTertiary { ...restProps }>
+		<AppButton isTertiary onClick={ onCreateNew } { ...restProps }>
 			{ __(
 				'Or, create a new Google Ads account',
 				'google-listings-and-ads'