Consolidate accounts onboarding: Add edit mode to the combo card to enable it to disconnect accounts

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,46 @@
+/**
+ * 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'
+	),
+	...restProps
+} ) => {
+	const [ handleSwitch, { loading } ] = useSwitchGoogleAccount();
+
+	return (
+		<AppButton
+			isLink
+			disabled={ loading }
+			text={ text }
+			eventName="gla_google_account_connect_different_account_button_click"
+			onClick={ handleSwitch }
+			{ ...restProps }
+		/>
+	);
+};
+
+export default SwitchAccountButton;

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

@@ -7,16 +7,16 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import { useAppDispatch } from '.~/data';
+import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
 import AccountCard from '.~/components/account-card';
 import ConnectAdsFooter from './connect-ads-footer';
 import ConfirmCreateModal from './confirm-create-modal';
 import LoadingLabel from '.~/components/loading-label';
 import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
-import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
-import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
-import { useAppDispatch } from '.~/data';
-import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
 import AdsAccountSelectControl from '.~/components/ads-account-select-control';
 import ConnectedIconLabel from '.~/components/connected-icon-label';
 import ConnectButton from '.~/components/google-ads-account-card/connect-ads/connect-button';
@@ -37,8 +37,7 @@ const ConnectAds = ( { isConnecting, isCreating, onCreate } ) => {
 	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
 	const isConnected = useGoogleAdsAccountReady();
 	const [ showCreateNewModal, setShowCreateNewModal ] = useState( false );
-	const { existingAccounts: accounts, hasFinishedResolution } =
-		useExistingGoogleAdsAccounts();
+	const { hasFinishedResolution } = useExistingGoogleAdsAccounts();
 	const {
 		googleAdsAccount,
 		refetchGoogleAdsAccount,
@@ -92,10 +91,6 @@ const ConnectAds = ( { isConnecting, isCreating, onCreate } ) => {
 		}
 	};
 
-	if ( ! accounts?.length ) {
-		return null;
-	}
-
 	const getIndicator = () => {
 		if ( ! hasFinishedResolution || ! hasResolvedGoogleAdsAccount ) {
 			return <LoadingLabel />;

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

@@ -1,11 +1,13 @@
 /**
  * External dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import useAutoCreateAdsMCAccounts from '.~/hooks/useAutoCreateAdsMCAccounts';
 import { useAppDispatch } from '.~/data';
 import AccountCard, { APPEARANCE } from '../account-card';
 import ConnectAds from './connect-ads';
@@ -14,13 +16,14 @@ import ConnectedAdsAccountsActions from './connected-ads-account-actions';
 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 '.~/components/google-mc-account-card/connect-mc';
 import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
 import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
+import AppButton from '.~/components/app-button';
+import SwitchAccountButton from '.~/components/google-account-card/switch-account-button';
 import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useUpsertAdsAccount from '.~/hooks/useUpsertAdsAccount';
@@ -31,11 +34,13 @@ 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 [ editMode, setEditMode ] = useState( false );
 	const [
 		showConversionMeasurementNotice,
 		setShowConversionMeasurementNotice,
 	] = useState( false );
 	const initConnected = useRef( null );
+	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).
@@ -44,8 +49,6 @@ const ConnectedGoogleComboAccountCard = () => {
 	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();
@@ -91,17 +94,42 @@ const ConnectedGoogleComboAccountCard = () => {
 		return <SpinnerCard />;
 	}
 
-	// @TODO: edit mode implementation in 2605
-	const editMode = false;
-	const shouldClaimGoogleAdsAccount = Boolean(
-		googleAdsAccount?.id && hasAccess === false
+	const toggleEditMode = () => {
+		setEditMode( ! editMode );
+	};
+
+	const cardActions = (
+		<div className="gla-google-combo-account-card__description-actions">
+			{ editMode ? (
+				<>
+					<SwitchAccountButton
+						isTertiary
+						text={ __(
+							'Connect to a different Google account',
+							'google-listings-and-ads'
+						) }
+					/>
+					<AppButton isTertiary onClick={ toggleEditMode }>
+						{ __( 'Cancel', 'google-listings-and-ads' ) }
+					</AppButton>
+				</>
+			) : (
+				<AppButton
+					isTertiary
+					text={ __( 'Edit', 'google-listings-and-ads' ) }
+					onClick={ toggleEditMode }
+				/>
+			) }
+		</div>
 	);
 
 	const hasExistingGoogleMCAccounts = existingGoogleMCAccounts?.length > 0;
 	const showConnectMC =
 		( editMode && hasExistingGoogleMCAccounts ) ||
 		( ! isGoogleMCReady && hasExistingGoogleMCAccounts );
-
+	const shouldClaimGoogleAdsAccount = Boolean(
+		googleAdsAccount?.id && hasAccess === false
+	);
 	const hasExistingGoogleAdsAccounts = existingGoogleAdsAccounts?.length > 0;
 	const showConnectAds =
 		( ( editMode && hasExistingGoogleAdsAccounts ) ||
@@ -122,6 +150,7 @@ const ConnectedGoogleComboAccountCard = () => {
 				alignIcon="top"
 				className="gla-google-combo-account-card gla-google-combo-account-card--connected gla-google-combo-service-account-card--google"
 				description={ text || <AccountDetails /> }
+				actions={ cardActions }
 				helper={ subText }
 				indicator={ <Indicator showSpinner={ showSpinner } /> }
 			>

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

@@ -20,4 +20,9 @@
 			margin-bottom: calc((var(--large-gap)) / 2);
 		}
 	}
+
+	.gla-google-combo-account-card__description-actions {
+		display: flex;
+		gap: var(--large-gap);
+	}
 }

tests/e2e/specs/setup-mc/step-1-accounts.test.js

@@ -785,7 +785,6 @@ test.describe( 'Set up accounts', () => {
 			test.beforeAll( async () => {
 				await setUpAccountsPage.mockAdsAccountConnected();
 				await setUpAccountsPage.mockMCConnected();
-				await setUpAccountsPage.mockAdsAccountConnected();
 				await setUpAccountsPage.mockAdsStatusClaimed();
 
 				await setUpAccountsPage.goto();
@@ -800,6 +799,44 @@ test.describe( 'Set up accounts', () => {
 		} );
 	} );
 
+	test.describe( 'Edit button', () => {
+		test.beforeAll( async () => {
+			await setUpAccountsPage.mockMCConnected();
+			await setUpAccountsPage.mockAdsAccountConnected();
+			await setUpAccountsPage.mockAdsStatusClaimed();
+			await setUpAccountsPage.goto();
+
+			const editButton = setUpAccountsPage.getEditButton();
+			await editButton.click();
+		} );
+
+		test( 'should display "Connect to a different Google account" button when clicked', async () => {
+			const connectDifferentGoogleAccountButton =
+				setUpAccountsPage.getConnectDifferentGoogleAccountButton();
+			await expect( connectDifferentGoogleAccountButton ).toBeVisible();
+		} );
+
+		test( 'should render the Google MC account card', async () => {
+			const selectAccountTitle =
+				setUpAccountsPage.getSelectExistingMCAccountTitle();
+			await expect( selectAccountTitle ).toContainText(
+				'Connect to existing Merchant Center account'
+			);
+		} );
+
+		test( 'should render the Google Ads account', async () => {
+			const googleAdsAccountCard =
+				setUpAccountsPage.getGoogleAdsAccountCard();
+
+			await expect(
+				googleAdsAccountCard.getByText(
+					'Connect to existing Google Ads account',
+					{ exact: true }
+				)
+			).toBeVisible();
+		} );
+	} );
+
 	test.describe( 'Links', () => {
 		test( 'should contain the correct URL for "Google Merchant Center Help" link', async () => {
 			await setUpAccountsPage.goto();

tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js

@@ -382,15 +382,26 @@ export default class SetUpAccountsPage extends MockRequests {
 	}
 
 	/**
-	 * Register the responses when checking for account-status.
+	 * Get "Edit" button.
 	 *
-	 * @return {Promise<import('@playwright/test').Response>} The response.
+	 * @return {import('@playwright/test').Locator} Get "Edit" button.
 	 */
-	registerAdsAccountStatusResponse() {
-		return this.page.waitForResponse(
-			( response ) =>
-				response.url().includes( '/gla/ads/account-status' ) &&
-				response.status() === 200
-		);
+	getEditButton() {
+		return this.page.getByRole( 'button', {
+			name: 'Edit',
+			exact: true,
+		} );
+	}
+
+	/**
+	 * Get "Connect to a different Google account" button.
+	 *
+	 * @return {import('@playwright/test').Locator} Get "Connect to a different Google account" button.
+	 */
+	getConnectDifferentGoogleAccountButton() {
+		return this.page.getByRole( 'button', {
+			name: 'Connect to a different Google account',
+			exact: true,
+		} );
 	}
 }