}
+ actions={ getCardActions() }
helper={ subText }
indicator={
}
detail={
diff --git a/js/src/components/google-combo-account-card/connected-google-combo-account-card.scss b/js/src/components/google-combo-account-card/connected-google-combo-account-card.scss
index 9c65e53adf..2fa9639124 100644
--- a/js/src/components/google-combo-account-card/connected-google-combo-account-card.scss
+++ b/js/src/components/google-combo-account-card/connected-google-combo-account-card.scss
@@ -1,6 +1,26 @@
+.gla-google-combo-account-card-wrapper {
+
+ .components-card {
+ &:not(:last-child) {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &:not(:first-child) {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+}
+
.gla-google-combo-account-card--connected {
.gla-account-card__description {
gap: 0;
}
+
+ .gla-google-combo-account-card__description-actions {
+ display: flex;
+ gap: var(--large-gap);
+ }
}
diff --git a/js/src/components/google-mc-account-card/connect-mc/actions.js b/js/src/components/google-mc-account-card/connect-mc/actions.js
index 30517e839c..c6932ae911 100644
--- a/js/src/components/google-mc-account-card/connect-mc/actions.js
+++ b/js/src/components/google-mc-account-card/connect-mc/actions.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
*/
import CreateAccountButton from '../create-account-button';
import DisconnectAccountButton from '../disconnect-account-button';
+import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts';
/**
* Actions component.
@@ -27,7 +28,9 @@ const Actions = ( {
resultCreateAccount,
onCreateAccount,
} ) => {
- if ( isConnected ) {
+ const { data: existingGoogleMCAccounts } = useExistingGoogleMCAccounts();
+
+ if ( isConnected && existingGoogleMCAccounts.length > 0 ) {
const handleOnDisconnected = () => {
resultConnectMC.reset();
resultCreateAccount.reset();
diff --git a/js/src/components/google-mc-account-card/connect-mc/index.js b/js/src/components/google-mc-account-card/connect-mc/index.js
index d8eb62d52e..751dbf46c3 100644
--- a/js/src/components/google-mc-account-card/connect-mc/index.js
+++ b/js/src/components/google-mc-account-card/connect-mc/index.js
@@ -52,13 +52,14 @@ const ConnectMC = ( { createAccount, resultCreateAccount, className } ) => {
googleMCAccount,
hasFinishedResolution,
isReady: isGoogleMCReady,
+ hasGoogleMCConnection,
} = useGoogleMCAccount();
useEffect( () => {
- if ( isGoogleMCReady ) {
+ if ( hasGoogleMCConnection ) {
setValue( googleMCAccount.id );
}
- }, [ googleMCAccount, isGoogleMCReady ] );
+ }, [ googleMCAccount, hasGoogleMCConnection ] );
if ( ! isGoogleMCReady ) {
if ( resultConnectMC.response?.status === 409 ) {
@@ -152,14 +153,14 @@ const ConnectMC = ( { createAccount, resultCreateAccount, className } ) => {
indicator={ getIndicator() }
detail={
}
actions={
{
{
data: { id },
} );
const homeUrl = getSetting( 'homeUrl' );
+ const { data: existingGoogleMCAccounts } = useExistingGoogleMCAccounts();
+ const hasExistingGoogleMCAccounts = existingGoogleMCAccounts?.length > 0;
const handleReclaimClick = async () => {
reset();
@@ -65,17 +68,19 @@ const ReclaimUrlCard = ( { id, websiteUrl, onSwitchAccount = noop } ) => {
id
) }
indicator={
-
- { __( 'Switch account', 'google-listings-and-ads' ) }
-
+ hasExistingGoogleMCAccounts ? (
+
+ { __( 'Switch account', 'google-listings-and-ads' ) }
+
+ ) : null
}
>
diff --git a/js/src/hooks/useGoogleMCAccount.js b/js/src/hooks/useGoogleMCAccount.js
index 22a4ecbc24..aabc752315 100644
--- a/js/src/hooks/useGoogleMCAccount.js
+++ b/js/src/hooks/useGoogleMCAccount.js
@@ -59,10 +59,12 @@ const useGoogleMCAccount = () => {
googleMCAccountSelector
);
- const hasGoogleMCConnection = [
- GOOGLE_MC_ACCOUNT_STATUS.CONNECTED,
- GOOGLE_MC_ACCOUNT_STATUS.INCOMPLETE,
- ].includes( acc?.status );
+ const hasGoogleMCConnection =
+ Boolean( acc?.id ) &&
+ [
+ GOOGLE_MC_ACCOUNT_STATUS.CONNECTED,
+ GOOGLE_MC_ACCOUNT_STATUS.INCOMPLETE,
+ ].includes( acc?.status );
const isReady =
acc?.status === GOOGLE_MC_ACCOUNT_STATUS.CONNECTED ||
diff --git a/tests/e2e/global-setup.js b/tests/e2e/global-setup.js
index 26870e5aaa..6cf36e5a4a 100644
--- a/tests/e2e/global-setup.js
+++ b/tests/e2e/global-setup.js
@@ -55,7 +55,7 @@ module.exports = async ( config ) => {
await adminPage
.locator( 'input[name="pwd"]' )
.fill( admin.password );
- await adminPage.locator( 'text=Log In' ).click();
+ await adminPage.getByRole( 'button', { name: 'Log In' } ).click();
await adminPage.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
await adminPage.goto( `/wp-admin` );
await adminPage.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
diff --git a/tests/e2e/specs/setup-mc/step-1-accounts.test.js b/tests/e2e/specs/setup-mc/step-1-accounts.test.js
index a8bc132a12..0abda36ce5 100644
--- a/tests/e2e/specs/setup-mc/step-1-accounts.test.js
+++ b/tests/e2e/specs/setup-mc/step-1-accounts.test.js
@@ -233,9 +233,11 @@ test.describe( 'Set up accounts', () => {
await once.mockAdsHasNoAccounts();
await once.mockMCHasNoAccounts();
await once.mockAdsAccountDisconnected();
+ await once.mockAdsStatusDisconnected();
await once.mockMCNotConnected();
await setUpAccountsPage.goto();
+
const googleAccountCard = setUpAccountsPage.getGoogleAccountCard();
await expect(
@@ -248,6 +250,37 @@ test.describe( 'Set up accounts', () => {
).toBeVisible();
} );
+ test( 'should show Ads claim and MC Reclaim after auto-creation, when appropriate', async () => {
+ await setUpAccountsPage.mockJetpackConnected();
+ await setUpAccountsPage.mockGoogleConnected();
+ await setUpAccountsPage.mockMCCreateAccountWebsiteClaimed();
+ await setUpAccountsPage.mockAdsCreateAccount();
+ await setUpAccountsPage.mockAdsAccountIncomplete( 'claim_account' );
+ await setUpAccountsPage.mockAdsStatusNotClaimed();
+
+ const once = setUpAccountsPage.fulfillTimes( 1 );
+
+ await once.mockAdsHasNoAccounts();
+ await once.mockMCHasNoAccounts();
+ await once.mockAdsAccountDisconnected();
+ await once.mockAdsStatusDisconnected();
+ await once.mockMCNotConnected();
+
+ await setUpAccountsPage.goto();
+
+ const googleAccountCard = setUpAccountsPage.getGoogleAccountCard();
+ const googleMCReclaimButton =
+ setUpAccountsPage.getReclaimMyURLButton();
+
+ await expect(
+ googleAccountCard.getByRole( 'button', {
+ name: 'Claim account in Google Ads',
+ } )
+ ).toBeVisible();
+
+ await expect( googleMCReclaimButton ).toBeVisible();
+ } );
+
test.describe( 'After connecting Google account', () => {
test.beforeEach( async () => {
await setUpAccountsPage.mockJetpackConnected();
@@ -886,6 +919,7 @@ test.describe( 'Set up accounts', () => {
test.beforeAll( async () => {
await setUpAccountsPage.mockAdsAccountConnected();
await setUpAccountsPage.mockMCConnected();
+ await setUpAccountsPage.mockAdsStatusClaimed();
await setUpAccountsPage.mockContactInformation( {} );
await setUpAccountsPage.goto();
@@ -921,6 +955,142 @@ test.describe( 'Set up accounts', () => {
} );
} );
+ test.describe( 'Edit button', () => {
+ test.beforeAll( async () => {
+ await setUpAccountsPage.mockJetpackConnected();
+ await setUpAccountsPage.mockGoogleConnected();
+ await setUpAccountsPage.mockMCConnected();
+ await setUpAccountsPage.mockMCHasAccounts();
+ await setUpAccountsPage.mockContactInformation();
+ await setUpAccountsPage.mockAdsAccountConnected();
+ await setUpAccountsPage.fulfillAdsAccounts( ADS_ACCOUNTS );
+ await setUpAccountsPage.mockAdsStatusClaimed();
+ await setUpAccountsPage.goto();
+ } );
+
+ test( 'should display the Edit button and the Ads and MC account cards are not visible', async () => {
+ const editButton = setUpAccountsPage.getEditButton();
+ await expect( editButton ).toBeVisible();
+
+ const googleMcAccountCard = setUpAccountsPage.getMCAccountCard();
+ await expect( googleMcAccountCard ).not.toBeVisible();
+
+ const googleAdsAccountCard =
+ setUpAccountsPage.getGoogleAdsAccountCard();
+ await expect( googleAdsAccountCard ).not.toBeVisible();
+ } );
+
+ test.describe( 'clicking the Edit button', async () => {
+ test( 'the "Or, connect to a different Google account" button is visible', async () => {
+ const editButton = setUpAccountsPage.getEditButton();
+ await editButton.click();
+
+ const connectDifferentGoogleAccountButton =
+ setUpAccountsPage.getConnectDifferentGoogleAccountButton();
+ await expect(
+ connectDifferentGoogleAccountButton
+ ).toBeVisible();
+ } );
+
+ test( 'the "Cancel" button is visible', async () => {
+ const cancelButton = setUpAccountsPage.getCancelButton();
+ await expect( cancelButton ).toBeVisible();
+ } );
+
+ test( 'MC and Ads account cards are visible', async () => {
+ const googleMcAccountCard =
+ setUpAccountsPage.getMCAccountCard();
+ await expect( googleMcAccountCard ).toBeVisible();
+
+ const googleAdsAccountCard =
+ setUpAccountsPage.getGoogleAdsAccountCard();
+ await expect( googleAdsAccountCard ).toBeVisible();
+ } );
+ } );
+
+ test.describe( 'clicking the Cancel button', async () => {
+ test( 'the "Edit" button is visible', async () => {
+ const cancelButton = setUpAccountsPage.getCancelButton();
+ await cancelButton.click();
+
+ const editButton = setUpAccountsPage.getEditButton();
+ await expect( editButton ).toBeVisible();
+ } );
+
+ test( 'MC and Ads account cards are not visible', async () => {
+ const googleMcAccountCard =
+ setUpAccountsPage.getMCAccountCard();
+ await expect( googleMcAccountCard ).not.toBeVisible();
+
+ const googleAdsAccountCard =
+ setUpAccountsPage.getGoogleAdsAccountCard();
+ await expect( googleAdsAccountCard ).not.toBeVisible();
+ } );
+ } );
+
+ test.describe( 'clicking "Edit" when an Ads account is being claimed', async () => {
+ test( 'should let you connect to a different account', async () => {
+ await setUpAccountsPage.mockAdsStatusNotClaimed();
+ await setUpAccountsPage.mockAdsAccountIncomplete(
+ 'claim_account'
+ );
+
+ await setUpAccountsPage.goto();
+
+ const editButton = setUpAccountsPage.getEditButton();
+ await editButton.click();
+
+ const connectDifferentGoogleAdsAccountButton =
+ setUpAccountsPage.getConnectDifferentAdsAccountButton();
+
+ await expect(
+ connectDifferentGoogleAdsAccountButton
+ ).toBeVisible();
+ } );
+
+ test( 'should disable the create new account button if there are no other existing accounts', async () => {
+ await setUpAccountsPage.mockAdsStatusNotClaimed();
+ await setUpAccountsPage.mockAdsHasNoAccounts();
+ await setUpAccountsPage.mockAdsAccountIncomplete(
+ 'claim_account'
+ );
+
+ await setUpAccountsPage.goto();
+
+ const editButton = setUpAccountsPage.getEditButton();
+ await editButton.click();
+
+ const createNewAdsAccountButton =
+ setUpAccountsPage.getCreateNewAdsAccountButton();
+
+ await expect( createNewAdsAccountButton ).toBeDisabled();
+ } );
+ } );
+
+ test.describe( 'clicking "Edit" when there are no other existing accounts', async () => {
+ test( 'should let you create new accounts', async () => {
+ await setUpAccountsPage.mockAdsStatusClaimed();
+ await setUpAccountsPage.mockAdsAccountConnected();
+ await setUpAccountsPage.mockAdsHasNoAccounts();
+ await setUpAccountsPage.mockMCHasNoAccounts();
+ await setUpAccountsPage.mockMCConnected();
+
+ await setUpAccountsPage.goto();
+
+ const editButton = setUpAccountsPage.getEditButton();
+ await editButton.click();
+
+ const createNewAdsAccountButton =
+ setUpAccountsPage.getCreateNewAdsAccountButton();
+ const createNewMCAccountButton =
+ setUpAccountsPage.getCreateNewMCAccountButton();
+
+ await expect( createNewAdsAccountButton ).toBeVisible();
+ await expect( createNewMCAccountButton ).toBeVisible();
+ } );
+ } );
+ } );
+
test.describe( 'Links', () => {
test( 'should contain the correct URL for "Google Merchant Center Help" link', async () => {
await setUpAccountsPage.goto();
diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js
index 29306ad059..a1f7d52869 100644
--- a/tests/e2e/utils/mock-requests.js
+++ b/tests/e2e/utils/mock-requests.js
@@ -241,10 +241,17 @@ export default class MockRequests {
* Fulfill the Ads Account request.
*
* @param {Object} payload
+ * @param {number} [status=200]
+ * @param {string[]} [methods]
* @return {Promise}
*/
- async fulfillAdsAccounts( payload ) {
- await this.fulfillRequest( /\/wc\/gla\/ads\/accounts\b/, payload );
+ async fulfillAdsAccounts( payload, status = 200, methods ) {
+ await this.fulfillRequest(
+ /\/wc\/gla\/ads\/accounts\b/,
+ payload,
+ status,
+ methods
+ );
}
/**
@@ -525,13 +532,13 @@ export default class MockRequests {
*
* @return {Promise}
*/
- async mockAdsAccountIncomplete() {
+ async mockAdsAccountIncomplete( step = 'billing' ) {
await this.fulfillAdsConnection( {
id: 12345,
currency: 'TWD',
symbol: 'NT$',
status: 'incomplete',
- step: 'billing',
+ step,
} );
}
@@ -550,6 +557,23 @@ export default class MockRequests {
} );
}
+ /**
+ * Mock Ads create account.
+ *
+ * @return {Promise}
+ */
+ async mockAdsCreateAccount() {
+ await this.fulfillAdsAccounts(
+ {
+ has_access: false,
+ invite_link: 'https://test.com',
+ step: 'claim_account',
+ },
+ 200,
+ [ 'POST' ]
+ );
+ }
+
/**
* Mock the Ads accounts response.
*
diff --git a/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js b/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
index 4411e96f63..c11ea2caf3 100644
--- a/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
+++ b/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
@@ -299,6 +299,18 @@ export default class SetUpAccountsPage extends MockRequests {
return this.getMCCardFooter().getByRole( 'button' );
}
+ /**
+ * Get create a new Merchant Center account button.
+ *
+ * @return {import('@playwright/test').Locator} Get create a new Merchant Center account button.
+ */
+ getCreateNewMCAccountButton() {
+ return this.page.getByRole( 'button', {
+ name: 'Or, create a new Merchant Center account',
+ exact: true,
+ } );
+ }
+
/**
* Get "Continue" button.
*
@@ -383,6 +395,30 @@ export default class SetUpAccountsPage extends MockRequests {
);
}
+ /**
+ * Get connect to a different Google Ads account button.
+ *
+ * @return {import('@playwright/test').Locator} Get connect to a different Google Ads account button.
+ */
+ getConnectDifferentAdsAccountButton() {
+ return this.page.getByRole( 'button', {
+ name: 'Or, connect to a different Google Ads account',
+ exact: true,
+ } );
+ }
+
+ /**
+ * Get create a new Google Ads account button.
+ *
+ * @return {import('@playwright/test').Locator} Get create a new Google Ads account button.
+ */
+ getCreateNewAdsAccountButton() {
+ return this.page.getByRole( 'button', {
+ name: 'Or, create a new Google Ads account',
+ exact: true,
+ } );
+ }
+
/**
* Get terms checkbox.
*
@@ -392,6 +428,18 @@ export default class SetUpAccountsPage extends MockRequests {
return this.page.getByLabel( /I accept the terms and conditions/ );
}
+ /**
+ * Get "Edit" button.
+ *
+ * @return {import('@playwright/test').Locator} Get "Edit" button.
+ */
+ getEditButton() {
+ return this.page.getByRole( 'button', {
+ name: 'Edit',
+ exact: true,
+ } );
+ }
+
/**
* Get store address card.
*
@@ -414,6 +462,30 @@ export default class SetUpAccountsPage extends MockRequests {
}
/**
+ * Get "Or, connect to a different Google account" button.
+ *
+ * @return {import('@playwright/test').Locator} Get "Or, connect to a different Google account" button.
+ */
+ getConnectDifferentGoogleAccountButton() {
+ return this.page.getByRole( 'button', {
+ name: 'Or, connect to a different Google account',
+ exact: true,
+ } );
+ }
+
+ /**
+ * Get "Cancel" button.
+ *
+ * @return {import('@playwright/test').Locator} Get "Cancel" button.
+ */
+ getCancelButton() {
+ return this.page.getByRole( 'button', {
+ name: 'Cancel',
+ exact: true,
+ } );
+ }
+
+ /*
* Register the response when connecting an Ads account.
*
* @return {Promise} The response.