From b5574cb4e217ff7ae6fe67074b9571087245e088 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 11 Sep 2024 17:02:07 +0530 Subject: [PATCH 01/17] Onboarding: Create New Google Combo Accounts Card. --- .../connect-google-combo-account-card.js | 115 ++++++++++++++++++ .../google-combo-account-card/index.js | 34 ++++++ .../google-combo-account-card/index.scss | 9 ++ .../setup-stepper/setup-accounts/index.js | 4 +- 4 files changed, 160 insertions(+), 2 deletions(-) create mode 100644 js/src/components/google-combo-account-card/connect-google-combo-account-card.js create mode 100644 js/src/components/google-combo-account-card/index.js create mode 100644 js/src/components/google-combo-account-card/index.scss diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js new file mode 100644 index 0000000000..732be7e8b1 --- /dev/null +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -0,0 +1,115 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { createInterpolateElement, useState } from '@wordpress/element'; +import { CheckboxControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { glaData } from '.~/constants'; +import AccountCard, { APPEARANCE } from '.~/components/account-card'; +import AppButton from '.~/components/app-button'; +import readMoreLink from '../google-account-card/read-more-link'; +import useGoogleConnectFlow from '../google-account-card/use-google-connect-flow'; +import AppDocumentationLink from '../app-documentation-link'; + +/** + * @param {Object} props React props + * @param {boolean} props.disabled + * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'reconnect' }` + * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'setup-mc' }` + * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'required-google-permissions', href: 'https://woocommerce.com/document/google-for-woocommerce/get-started/setup-and-configuration/#required-google-permissions' }` + */ +const ConnectGoogleComboAccountCard = ( { disabled } ) => { + const pageName = glaData.mcSetupComplete ? 'reconnect' : 'setup-mc'; + const [ handleConnect, { loading, data } ] = + useGoogleConnectFlow( pageName ); + const [ termsAccepted, setTermsAccepted ] = useState( false ); + + const CheckboxLabel = () => { + const label = createInterpolateElement( + __( + 'I accept the terms and conditions of Merchant Center and Google Ads', + 'google-listings-and-ads' + ), + { + linkMerchant: ( + + ), + linkAds: ( + + ), + } + ); + + return label; + }; + + return ( + + { __( + 'Required to sync with Google Merchant Center and Google Ads.', + 'google-listings-and-ads' + ) } +
+ setTermsAccepted( !! val ) } + disabled={ disabled } + /> + +
+

+ + { createInterpolateElement( + __( + 'You will be prompted to give WooCommerce access to your Google account. Please check all the checkboxes to give WooCommerce all required permissions. Read more', + 'google-listings-and-ads' + ), + { + link: readMoreLink, + } + ) } + +

+ + } + alignIndicator="top" + indicator={ + + } + /> + ); +}; + +export default ConnectGoogleComboAccountCard; diff --git a/js/src/components/google-combo-account-card/index.js b/js/src/components/google-combo-account-card/index.js new file mode 100644 index 0000000000..1fee516470 --- /dev/null +++ b/js/src/components/google-combo-account-card/index.js @@ -0,0 +1,34 @@ +/** + * Internal dependencies + */ +import useGoogleAccount from '.~/hooks/useGoogleAccount'; +import AppSpinner from '.~/components/app-spinner'; +import AccountCard from '.~/components/account-card'; +import RequestFullAccessGoogleAccountCard from '../google-account-card/request-full-access-google-account-card'; +import { ConnectedGoogleAccountCard } from '../google-account-card'; +import ConnectGoogleComboAccountCard from './connect-google-combo-account-card'; +import './index.scss'; + +export default function GoogleComboAccountCard( { disabled = false } ) { + const { google, scope, hasFinishedResolution } = useGoogleAccount(); + + if ( ! hasFinishedResolution ) { + return } />; + } + + const isConnected = google?.active === 'yes'; + + if ( isConnected && scope.glaRequired ) { + return ; + } + + if ( isConnected && ! scope.glaRequired ) { + return ( + + ); + } + + return ; +} diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss new file mode 100644 index 0000000000..c2ee7e1cc4 --- /dev/null +++ b/js/src/components/google-combo-account-card/index.scss @@ -0,0 +1,9 @@ +.google-combo-account-card { + + .gla-account-card__description { + + .components-checkbox-control { + display: inline-block; + } + } +} \ No newline at end of file diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index a1be26f4ba..6dae2700ab 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -20,7 +20,7 @@ import Section from '.~/wcdl/section'; import AppDocumentationLink from '.~/components/app-documentation-link'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; import WPComAccountCard from '.~/components/wpcom-account-card'; -import GoogleAccountCard from '.~/components/google-account-card'; +import GoogleComboAccountCard from '.~/components/google-combo-account-card'; import GoogleMCAccountCard from '.~/components/google-mc-account-card'; import GoogleAdsAccountCard from '.~/components/google-ads-account-card'; import Faqs from './faqs'; @@ -159,7 +159,7 @@ const SetupAccounts = ( props ) => { { ! isJetpackActive && ( ) } - + From 303aeb44eebd9d149ca975f2345dd0eaf5bff376 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 11 Sep 2024 18:44:23 +0530 Subject: [PATCH 02/17] Fix linting issues. --- js/src/components/google-combo-account-card/index.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss index c2ee7e1cc4..17f4cbaee9 100644 --- a/js/src/components/google-combo-account-card/index.scss +++ b/js/src/components/google-combo-account-card/index.scss @@ -1,9 +1,7 @@ .google-combo-account-card { - .gla-account-card__description { - .components-checkbox-control { display: inline-block; } } -} \ No newline at end of file +} From fdcadb460a4657b1cec179c5122613ef2abfb8d7 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 11 Sep 2024 18:52:06 +0530 Subject: [PATCH 03/17] Fix linting issues. --- js/src/components/google-combo-account-card/index.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss index 17f4cbaee9..2f026fd892 100644 --- a/js/src/components/google-combo-account-card/index.scss +++ b/js/src/components/google-combo-account-card/index.scss @@ -1,7 +1,7 @@ .google-combo-account-card { - .gla-account-card__description { - .components-checkbox-control { - display: inline-block; - } - } + .gla-account-card__description { + .components-checkbox-control { + display: inline-block; + } + } } From 4b9ee7a34c223117a1995419dbb227c95030cc22 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 11 Sep 2024 19:00:11 +0530 Subject: [PATCH 04/17] Fix js lint. --- .../connect-google-combo-account-card.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index 732be7e8b1..6e0043c2d8 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -28,6 +28,7 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { useGoogleConnectFlow( pageName ); const [ termsAccepted, setTermsAccepted ] = useState( false ); + const checkboxId = 'gla-account-card-terms-conditions'; const CheckboxLabel = () => { const label = createInterpolateElement( __( @@ -69,12 +70,12 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { ) }
setTermsAccepted( !! val ) } disabled={ disabled } /> -
From 71fb4c79141701a23766726c9a9c047b9be1cdfc Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 11 Sep 2024 19:21:22 +0530 Subject: [PATCH 05/17] Disable eslint error. --- .../connect-google-combo-account-card.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index 6e0043c2d8..76af47ed76 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -75,9 +75,12 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { onChange={ ( val ) => setTermsAccepted( !! val ) } disabled={ disabled } /> - + { + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + }

From 0dcb4a56efe707745e12f88954e8aa08e63b24a1 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 11 Sep 2024 21:45:20 +0530 Subject: [PATCH 06/17] Fix failing tests. Remove ads and merchant center tests. --- .../specs/setup-mc/step-1-accounts.test.js | 541 +----------------- 1 file changed, 3 insertions(+), 538 deletions(-) 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 6e84aa2ab1..da483bf06c 100644 --- a/tests/e2e/specs/setup-mc/step-1-accounts.test.js +++ b/tests/e2e/specs/setup-mc/step-1-accounts.test.js @@ -172,17 +172,7 @@ test.describe( 'Set up accounts', () => { await expect( googleAccountCard.getByRole( 'button', { name: 'Connect' } ) - ).toBeEnabled(); - - const mcAccountCard = setUpAccountsPage.getMCAccountCard(); - await expect( - mcAccountCard.getByRole( 'button' ) - ).not.toBeVisible(); - - const adsAccountCard = setUpAccountsPage.getGoogleAdsAccountCard(); - await expect( - adsAccountCard.getByRole( 'button' ) - ).not.toBeVisible(); + ).toBeDisabled(); const continueButton = setUpAccountsPage.getContinueButton(); await expect( continueButton ).toBeDisabled(); @@ -196,6 +186,8 @@ test.describe( 'Set up accounts', () => { baseURL + 'google_auth' ); + await page.locator( '#gla-account-card-terms-conditions' ).check(); + // Click the enabled connect button page.locator( "//button[text()='Connect'][not(@disabled)]" @@ -209,533 +201,6 @@ test.describe( 'Set up accounts', () => { } ); } ); - test.describe( 'Google Ads', () => { - test.beforeAll( async () => { - // Mock Jetpack as connected - await setUpAccountsPage.mockJetpackConnected( - 'Test user', - 'jetpack@example.com' - ); - - // Mock google as connected. - await setUpAccountsPage.mockGoogleConnected(); - - // Start with no Ads account connected. - await setupAdsAccountPage.mockAdsAccountDisconnected(); - await setupAdsAccountPage.mockAdsStatusDisconnected(); - await setupAdsAccountPage.mockAdsHasNoAccounts(); - - // Mock MC as not connected and has not existing accounts - // to avoid errors when attempting to fetch accounts. - await setUpAccountsPage.mockMCNotConnected(); - await setUpAccountsPage.mockMCHasNoAccounts(); - - await setUpAccountsPage.goto(); - await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED ); - } ); - - test( 'should see Google Ads section', async () => { - const section = setUpAccountsPage.getGoogleAdsAccountCard(); - await expect( section ).toBeVisible(); - } ); - - test.describe( 'Google Ads account', () => { - test.describe( 'Create account', () => { - test.beforeAll( async () => { - await setUpAccountsPage.clickCreateAdsAccountButton(); - } ); - - test( 'should see "Create Google Ads Account" modal', async () => { - const modal = setupAdsAccountPage.getCreateAccountModal(); - await expect( modal ).toBeVisible(); - } ); - - test( 'should see "ToS checkbox" from modal is unchecked', async () => { - const checkbox = - setupAdsAccountPage.getAcceptTermCreateAccount(); - await expect( checkbox ).toBeVisible(); - await expect( checkbox ).not.toBeChecked(); - } ); - - test( 'should see "Create account" from modal is disabled', async () => { - const button = - setupAdsAccountPage.getCreateAdsAccountButtonModal(); - await expect( button ).toBeVisible(); - await expect( button ).toBeDisabled(); - } ); - - test( 'should see "Create account" from modal is enabled when ToS checkbox is checked', async () => { - const button = - setupAdsAccountPage.getCreateAdsAccountButtonModal(); - await setupAdsAccountPage.clickToSCheckboxFromModal(); - await expect( button ).toBeEnabled(); - } ); - - test( 'should see "Accept invitation" modal after creating account', async () => { - // Mock Ads account not claimed. - await setupAdsAccountPage.mockAdsAccountConnected(); - await setupAdsAccountPage.mockAdsStatusNotClaimed(); - - await setupAdsAccountPage.clickCreateAccountButtonFromModal(); - - const modal = setupAdsAccountPage.getAcceptAccountModal(); - await expect( modal ).toBeVisible(); - } ); - - test( 'should see ads account claim message until ads account is accepted', async () => { - await setupAdsAccountPage.clickCloseAcceptAccountButtonFromModal(); - - const claimButton = - await setupAdsAccountPage.getAdsClaimAccountButton(); - const claimText = - await setupAdsAccountPage.getAdsClaimAccountText(); - - await expect( claimButton ).toBeVisible(); - await expect( claimText ).toBeVisible(); - } ); - } ); - - test.describe( 'Create an ads account with invitation accepted', () => { - test.beforeAll( async () => { - // Mock the ads account as claimed. - await setupAdsAccountPage.mockAdsStatusClaimed(); - - await setUpAccountsPage.goto(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - } ); - - test( 'should see ads account connected message once ads account is accepted', async () => { - const connectedText = - setUpAccountsPage.getAdsAccountConnectedText(); - - const connectedNotice = - setUpAccountsPage.getAdsAccountConnectedNotice(); - - await expect( connectedText ).toBeVisible(); - await expect( connectedNotice ).toBeVisible(); - } ); - } ); - - test.describe( 'Connect to an existing account', () => { - test.beforeAll( async () => { - await setupAdsAccountPage.mockAdsAccountsResponse( [ - { - id: 12345, - name: 'Test Ad 1', - }, - { - id: 23456, - name: 'Test Ad 2', - }, - ] ); - - await setupAdsAccountPage.mockAdsAccountDisconnected(); - await setupAdsAccountPage.clickConnectDifferentAccountButton(); - } ); - - test( 'should see the ads account select', async () => { - const select = setupAdsAccountPage.getAdsAccountSelect(); - await expect( select ).toBeVisible(); - } ); - - test( 'should see connect button is disabled when no ads account is selected', async () => { - const button = setupAdsAccountPage.getConnectAdsButton(); - await expect( button ).toBeVisible(); - await expect( button ).toBeDisabled(); - } ); - - test( 'should see connect button is enabled when an ads account is selected', async () => { - await setupAdsAccountPage.selectAnExistingAdsAccount( - '23456' - ); - const button = setupAdsAccountPage.getConnectAdsButton(); - await expect( button ).toBeVisible(); - await expect( button ).toBeEnabled(); - } ); - - test( 'should see ads account connected text and ads/accounts request is triggered after clicking connect button', async () => { - await setupAdsAccountPage.mockAdsAccountsResponse( [ - { - id: 23456, - name: 'Test Ad 2', - }, - ] ); - - await setupAdsAccountPage.mockAdsAccountConnected( 23456 ); - - const requestPromise = - setupAdsAccountPage.registerConnectAdsAccountRequests( - '23456' - ); - - await setupAdsAccountPage.clickConnectAds(); - - await requestPromise; - - const connectedText = - setUpAccountsPage.getAdsAccountConnectedText(); - await expect( connectedText ).toBeVisible(); - } ); - } ); - } ); - } ); - - test.describe( 'Connect Merchant Center account', () => { - test.beforeAll( async () => { - await Promise.all( [ - // Mock Jetpack as connected. - setUpAccountsPage.mockJetpackConnected( - 'Test user', - 'jetpack@example.com' - ), - - // Mock google as connected. - setUpAccountsPage.mockGoogleConnected( 'google@example.com' ), - - // Mock Google Ads as not connected. - setupAdsAccountPage.mockAdsAccountDisconnected(), - setupAdsAccountPage.mockAdsHasNoAccounts(), - - // Mock merchant center as not connected. - setUpAccountsPage.mockMCNotConnected(), - ] ); - } ); - - test.describe( 'Merchant Center has no existing accounts', () => { - test.beforeAll( async () => { - // Mock merchant center has no accounts - await setUpAccountsPage.mockMCHasNoAccounts(); - await setUpAccountsPage.goto(); - } ); - - test( 'should see their WPORG email, Google email, "Google Merchant Center" title & "Create account" button', async () => { - const googleDescriptionRow = - setUpAccountsPage.getGoogleDescriptionRow(); - await expect( googleDescriptionRow ).toContainText( - 'google@example.com' - ); - - const mcTitleRow = setUpAccountsPage.getMCTitleRow(); - await expect( mcTitleRow ).toContainText( - 'Google Merchant Center' - ); - - const createAccountButton = - setUpAccountsPage.getMCCreateAccountButtonFromPage(); - await expect( createAccountButton ).toBeEnabled(); - - const continueButton = setUpAccountsPage.getContinueButton(); - await expect( continueButton ).toBeDisabled(); - } ); - - test( 'click "Create account" button should see the modal of confirmation of creating account', async () => { - // Click the create account button - const createAccountButton = - setUpAccountsPage.getMCCreateAccountButtonFromPage(); - await createAccountButton.click(); - await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED ); - - const modalHeader = setUpAccountsPage.getModalHeader(); - await expect( modalHeader ).toContainText( - 'Create Google Merchant Center Account' - ); - - const modalCheckbox = setUpAccountsPage.getModalCheckbox(); - await expect( modalCheckbox ).toBeEnabled(); - - const createAccountButtonFromModal = - setUpAccountsPage.getMCCreateAccountButtonFromModal(); - await expect( createAccountButtonFromModal ).toBeDisabled(); - - // Click the checkbox of accepting ToS, the create account button will be enabled. - await modalCheckbox.click(); - await expect( createAccountButtonFromModal ).toBeEnabled(); - } ); - - test.describe( 'click "Create account" button from the modal', () => { - test( 'should see Merchant Center "Connected" when the website is not claimed', async ( { - baseURL, - } ) => { - await Promise.all( [ - // Mock Merchant Center create accounts - setUpAccountsPage.mockMCCreateAccountWebsiteNotClaimed(), - - // Mock Merchant Center as connected with ID 12345 - setUpAccountsPage.mockMCConnected( 12345 ), - ] ); - - const createAccountButtonFromModal = - setUpAccountsPage.getMCCreateAccountButtonFromModal(); - await createAccountButtonFromModal.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - const mcConnectedLabel = - setUpAccountsPage.getMCConnectedLabel(); - await expect( mcConnectedLabel ).toContainText( - 'Connected' - ); - - const host = new URL( baseURL ).host; - const mcDescriptionRow = - setUpAccountsPage.getMCDescriptionRow(); - await expect( mcDescriptionRow ).toContainText( - `${ host } (12345)` - ); - } ); - - test.describe( 'when the website is already claimed', () => { - test( 'should see "Reclaim my URL" button, "Switch account" button, and site URL input', async ( { - baseURL, - } ) => { - const host = new URL( baseURL ).host; - - await Promise.all( [ - // Mock merchant center has no accounts - setUpAccountsPage.mockMCHasNoAccounts(), - - // Mock Merchant Center as not connected - setUpAccountsPage.mockMCNotConnected(), - ] ); - - await page.reload(); - - // Mock Merchant Center create accounts - await setUpAccountsPage.mockMCCreateAccountWebsiteClaimed( - 12345, - host - ); - - // Click "Create account" button from the page. - const createAccountButton = - setUpAccountsPage.getMCCreateAccountButtonFromPage(); - await createAccountButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - // Check the checkbox to accept ToS. - const modalCheckbox = - setUpAccountsPage.getModalCheckbox(); - await modalCheckbox.click(); - - // Click "Create account" button from the modal. - const createAccountButtonFromModal = - setUpAccountsPage.getMCCreateAccountButtonFromModal(); - await createAccountButtonFromModal.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const reclaimButton = - setUpAccountsPage.getReclaimMyURLButton(); - await expect( reclaimButton ).toBeVisible(); - - const switchAccountButton = - setUpAccountsPage.getSwitchAccountButton(); - await expect( switchAccountButton ).toBeVisible(); - - const reclaimingURLInput = - setUpAccountsPage.getReclaimingURLInput(); - await expect( reclaimingURLInput ).toHaveValue( - baseURL - ); - - const continueButton = - setUpAccountsPage.getContinueButton(); - await expect( continueButton ).toBeDisabled(); - } ); - - test( 'click "Reclaim my URL" should send a claim overwrite request and see Merchant Center "Connected"', async ( { - baseURL, - } ) => { - await Promise.all( [ - // Mock Merchant Center accounts claim overwrite - setUpAccountsPage.mockMCAccountsClaimOverwrite( - 12345 - ), - - // Mock Merchant Center as connected with ID 12345 - setUpAccountsPage.mockMCConnected( 12345 ), - ] ); - - const reclaimButton = - setUpAccountsPage.getReclaimMyURLButton(); - await reclaimButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const mcConnectedLabel = - setUpAccountsPage.getMCConnectedLabel(); - await expect( mcConnectedLabel ).toContainText( - 'Connected' - ); - - const host = new URL( baseURL ).host; - const mcDescriptionRow = - setUpAccountsPage.getMCDescriptionRow(); - await expect( mcDescriptionRow ).toContainText( - `${ host } (12345)` - ); - } ); - } ); - } ); - } ); - - test.describe( 'Merchant Center has existing accounts', () => { - test.beforeAll( async () => { - await Promise.all( [ - // Mock merchant center as not connected. - setUpAccountsPage.mockMCNotConnected(), - - // Mock merchant center has accounts - setUpAccountsPage.fulfillMCAccounts( [ - { - id: 12345, - subaccount: true, - name: 'MC Account 1', - domain: 'https://example.com', - }, - { - id: 23456, - subaccount: true, - name: 'MC Account 2', - domain: 'https://example.com', - }, - ] ), - ] ); - - await setUpAccountsPage.goto(); - } ); - - test.describe( 'connect to an existing account', () => { - test( 'should see "Select an existing account" title', async () => { - const selectAccountTitle = - setUpAccountsPage.getSelectExistingMCAccountTitle(); - await expect( selectAccountTitle ).toContainText( - 'Select an existing account' - ); - } ); - - test( 'should see "Or, create a new Merchant Center account" text', async () => { - const mcFooter = setUpAccountsPage.getMCCardFooter(); - await expect( mcFooter ).toContainText( - 'Or, create a new Merchant Center account' - ); - } ); - - test( 'should see "Connect" button', async () => { - const connectButton = setUpAccountsPage.getConnectButton(); - await expect( connectButton ).toBeEnabled(); - } ); - - test( 'should see "Continue" button is disabled', async () => { - const continueButton = - setUpAccountsPage.getContinueButton(); - await expect( continueButton ).toBeDisabled(); - } ); - - test( 'select MC Account 2 and click "Connect" button should see Merchant Center "Connected"', async ( { - baseURL, - } ) => { - await Promise.all( [ - // Mock Merchant Center create accounts - setUpAccountsPage.mockMCCreateAccountWebsiteNotClaimed(), - - // Mock Merchant Center as connected with ID 12345 - setUpAccountsPage.mockMCConnected( 23456 ), - ] ); - - // Select MC Account 2 from the options - const mcAccountsSelect = - setUpAccountsPage.getMCAccountsSelect(); - await mcAccountsSelect.selectOption( { - label: 'MC Account 2 ・ https://example.com (23456)', - } ); - - // Click connect button - const connectButton = setUpAccountsPage.getConnectButton(); - await connectButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const mcConnectedLabel = - setUpAccountsPage.getMCConnectedLabel(); - await expect( mcConnectedLabel ).toContainText( - 'Connected' - ); - - const host = new URL( baseURL ).host; - const mcDescriptionRow = - setUpAccountsPage.getMCDescriptionRow(); - await expect( mcDescriptionRow ).toContainText( - `${ host } (23456)` - ); - } ); - } ); - - test.describe( 'click "Or, create a new Merchant Center account"', () => { - test.beforeAll( async () => { - await Promise.all( [ - // Mock merchant center as not connected. - setUpAccountsPage.mockMCNotConnected(), - - // Mock merchant center has accounts - setUpAccountsPage.fulfillMCAccounts( [ - { - id: 12345, - subaccount: true, - name: 'MC Account 1', - domain: 'https://example.com', - }, - { - id: 23456, - subaccount: true, - name: 'MC Account 2', - domain: 'https://example.com', - }, - ] ), - ] ); - - await setUpAccountsPage.goto(); - } ); - - test( 'should see see a modal to ensure the intention of creating a new account', async () => { - // Click 'Or, create a new Merchant Center account' - const mcFooterButton = - setUpAccountsPage.getMCCardFooterButton(); - await mcFooterButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const modalHeader = setUpAccountsPage.getModalHeader(); - await expect( modalHeader ).toContainText( - 'Create Google Merchant Center Account' - ); - - const modalCheckbox = setUpAccountsPage.getModalCheckbox(); - await expect( modalCheckbox ).toBeEnabled(); - - const modalPrimaryButton = - setUpAccountsPage.getModalPrimaryButton(); - await expect( modalPrimaryButton ).toContainText( - 'Create account' - ); - await expect( modalPrimaryButton ).toBeDisabled(); - - // Select the checkbox, the button should be enabled. - await modalCheckbox.click(); - await expect( modalPrimaryButton ).toBeEnabled(); - } ); - } ); - } ); - } ); - test.describe( 'Continue button', () => { test.beforeAll( async () => { // Mock Jetpack as connected From 85dadb0cbff6aab7931a9d9353b2e42bfbab5747 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 11 Sep 2024 23:00:36 +0530 Subject: [PATCH 07/17] Update links. --- .../connect-google-combo-account-card.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index 76af47ed76..f087fa6bce 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -39,15 +39,15 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { linkMerchant: ( ), linkAds: ( ), } From 780daf2fade6aef3be91b86ac52f33102c42b16a Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Thu, 12 Sep 2024 10:24:37 +0530 Subject: [PATCH 08/17] Add E2E tests for combo card. --- .../specs/setup-mc/step-1-accounts.test.js | 31 +++++++++++++++++-- tests/e2e/utils/mock-requests.js | 11 +++++++ .../pages/setup-mc/step-1-set-up-accounts.js | 9 ++++++ 3 files changed, 49 insertions(+), 2 deletions(-) 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 da483bf06c..6b789bc644 100644 --- a/tests/e2e/specs/setup-mc/step-1-accounts.test.js +++ b/tests/e2e/specs/setup-mc/step-1-accounts.test.js @@ -147,7 +147,7 @@ test.describe( 'Set up accounts', () => { } ); test.describe( 'Connect Google account', () => { - test.beforeAll( async () => { + test.beforeEach( async () => { // Mock Jetpack as connected await setUpAccountsPage.mockJetpackConnected( 'Test user', @@ -178,6 +178,33 @@ test.describe( 'Set up accounts', () => { await expect( continueButton ).toBeDisabled(); } ); + test( 'should see the terms and conditions checkbox unchecked by default', async () => { + const termsCheckbox = setUpAccountsPage.getTermsCheckbox(); + await expect( termsCheckbox ).not.toBeChecked(); + + // Also ensure that connect button is disabled. + const connectButton = setUpAccountsPage.getConnectButton(); + await expect( connectButton ).toBeDisabled(); + } ); + + test( 'should see the connect button and terms and conditions checkbox disabled when jetpack is not connected', async () => { + // Mock Jetpack as disconnected + await setUpAccountsPage.mockJetpackNotConnected(); + + await setUpAccountsPage.goto(); + + const connectButton = page + .getByRole( 'button', { + name: 'Connect', + exact: true, + } ) + .nth( 1 ); + await expect( connectButton ).toBeDisabled(); + + const termsCheckbox = setUpAccountsPage.getTermsCheckbox(); + await expect( termsCheckbox ).toBeDisabled(); + } ); + test( 'after clicking the "Connect your Google account" button should send an API request to connect Google account, and redirect to the returned URL', async ( { baseURL, } ) => { @@ -186,7 +213,7 @@ test.describe( 'Set up accounts', () => { baseURL + 'google_auth' ); - await page.locator( '#gla-account-card-terms-conditions' ).check(); + setUpAccountsPage.getTermsCheckbox().check(); // Click the enabled connect button page.locator( diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js index 2cd4b45222..9149338898 100644 --- a/tests/e2e/utils/mock-requests.js +++ b/tests/e2e/utils/mock-requests.js @@ -392,6 +392,17 @@ export default class MockRequests { } ); } + /** + * Mock Jetpack as connected. + */ + async mockJetpackNotConnected() { + await this.fulfillJetPackConnection( { + active: 'no', + displayName: '', + email: '', + } ); + } + /** * Mock the request to connect Google. * 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 5c90f321cb..304eded13d 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 @@ -367,4 +367,13 @@ export default class SetUpAccountsPage extends MockRequests { 'Conversion measurement has been set up. You can create a campaign later.' ); } + + /** + * Get terms checkbox. + * + * @return {import('@playwright/test').Locator} Terms checkbox. + */ + getTermsCheckbox() { + return this.page.locator( '#gla-account-card-terms-conditions' ); + } } From 3cfb09ea5c9720cc75e3e3cc823b0f0a7bacbec0 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Thu, 12 Sep 2024 18:04:21 +0530 Subject: [PATCH 09/17] Styling changes --- .../connect-google-combo-account-card.js | 51 +++++++++---------- .../google-combo-account-card/index.scss | 3 ++ 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index f087fa6bce..0c2983dbcd 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -21,6 +21,8 @@ import AppDocumentationLink from '../app-documentation-link'; * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'reconnect' }` * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'setup-mc' }` * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'required-google-permissions', href: 'https://woocommerce.com/document/google-for-woocommerce/get-started/setup-and-configuration/#required-google-permissions' }` + * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'google-mc-terms-of-service', href: 'https://support.google.com/merchants/answer/160173' }` + * @fires gla_documentation_link_click with `{ context: 'setup-ads', link_id: 'google-ads-terms-of-service', href: 'https://support.google.com/adspolicy/answer/54818' }` */ const ConnectGoogleComboAccountCard = ( { disabled } ) => { const pageName = glaData.mcSetupComplete ? 'reconnect' : 'setup-mc'; @@ -29,32 +31,6 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { const [ termsAccepted, setTermsAccepted ] = useState( false ); const checkboxId = 'gla-account-card-terms-conditions'; - const CheckboxLabel = () => { - const label = createInterpolateElement( - __( - 'I accept the terms and conditions of Merchant Center and Google Ads', - 'google-listings-and-ads' - ), - { - linkMerchant: ( - - ), - linkAds: ( - - ), - } - ); - - return label; - }; return ( { { // eslint-disable-next-line jsx-a11y/label-has-associated-control } diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss index 2f026fd892..2d9ceda12b 100644 --- a/js/src/components/google-combo-account-card/index.scss +++ b/js/src/components/google-combo-account-card/index.scss @@ -4,4 +4,7 @@ display: inline-block; } } + p { + color: #757575; + } } From 204a3dabdc46655fc1236bd285b5441b8405d776 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Fri, 13 Sep 2024 20:21:49 +0530 Subject: [PATCH 10/17] Use label prop for checkbox. --- .../connect-google-combo-account-card.js | 65 +++++++++---------- .../google-combo-account-card/index.scss | 8 +-- 2 files changed, 31 insertions(+), 42 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index 0c2983dbcd..3eb3fa77e6 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -35,7 +35,7 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { return ( { 'Required to sync with Google Merchant Center and Google Ads.', 'google-listings-and-ads' ) } -

- setTermsAccepted( !! val ) } - disabled={ disabled } - /> - { - // eslint-disable-next-line jsx-a11y/label-has-associated-control - - } -
+ Merchant Center and Google Ads', + 'google-listings-and-ads' + ), + { + linkMerchant: ( + + ), + linkAds: ( + + ), + } + ) } + checked={ termsAccepted } + onChange={ setTermsAccepted } + disabled={ disabled } + />

{ createInterpolateElement( diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss index 2d9ceda12b..42c94fcc75 100644 --- a/js/src/components/google-combo-account-card/index.scss +++ b/js/src/components/google-combo-account-card/index.scss @@ -1,10 +1,6 @@ .google-combo-account-card { - .gla-account-card__description { - .components-checkbox-control { - display: inline-block; - } - } + p { - color: #757575; + color: $gray-700; } } From 52eaa9b38afb16d7c1574b784ab356a81e6103c8 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Fri, 13 Sep 2024 20:55:04 +0530 Subject: [PATCH 11/17] Styling fixes. --- .../connect-google-combo-account-card.js | 12 +++++++----- .../components/google-combo-account-card/index.scss | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index 3eb3fa77e6..c7ea1393f7 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -40,10 +40,12 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { alignIcon="top" description={ <> - { __( - 'Required to sync with Google Merchant Center and Google Ads.', - 'google-listings-and-ads' - ) } +

+ { __( + 'Required to sync with Google Merchant Center and Google Ads.', + 'google-listings-and-ads' + ) } +

{ onChange={ setTermsAccepted } disabled={ disabled } /> -

+

{ createInterpolateElement( __( diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss index 42c94fcc75..f65cac73cb 100644 --- a/js/src/components/google-combo-account-card/index.scss +++ b/js/src/components/google-combo-account-card/index.scss @@ -1,6 +1,6 @@ .google-combo-account-card { - p { + .google-combo-account-card-description { color: $gray-700; } } From 6e5e09f4d4f904c893c4ecc826bf83393b5920f8 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Fri, 13 Sep 2024 21:09:36 +0530 Subject: [PATCH 12/17] Remove unused variable. --- .../connect-google-combo-account-card.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index c7ea1393f7..6686735cbd 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -30,8 +30,6 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { useGoogleConnectFlow( pageName ); const [ termsAccepted, setTermsAccepted ] = useState( false ); - const checkboxId = 'gla-account-card-terms-conditions'; - return ( Date: Fri, 13 Sep 2024 21:12:20 +0530 Subject: [PATCH 13/17] Update connect-google-combo-account-card.js --- .../connect-google-combo-account-card.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index 6686735cbd..56c570df45 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -45,7 +45,6 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { ) }

Merchant Center and Google Ads', From f9564ad9773888dfccd02385b569e5848659328b Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 18 Sep 2024 10:17:20 +0530 Subject: [PATCH 14/17] Update css class names and fix tests. --- .../connect-google-combo-account-card.js | 5 +++-- .../connect-google-combo-account-card.scss | 6 ++++++ js/src/components/google-combo-account-card/index.js | 1 - .../components/google-combo-account-card/index.scss | 6 ------ tests/e2e/specs/setup-mc/step-1-accounts.test.js | 12 +++++------- tests/e2e/utils/mock-requests.js | 2 +- 6 files changed, 15 insertions(+), 17 deletions(-) create mode 100644 js/src/components/google-combo-account-card/connect-google-combo-account-card.scss delete mode 100644 js/src/components/google-combo-account-card/index.scss diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index c7ea1393f7..155f11adb7 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -14,6 +14,7 @@ import AppButton from '.~/components/app-button'; import readMoreLink from '../google-account-card/read-more-link'; import useGoogleConnectFlow from '../google-account-card/use-google-connect-flow'; import AppDocumentationLink from '../app-documentation-link'; +import './connect-google-combo-account-card.scss'; /** * @param {Object} props React props @@ -35,7 +36,7 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { return ( { onChange={ setTermsAccepted } disabled={ disabled } /> -

+

{ createInterpolateElement( __( diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss b/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss new file mode 100644 index 0000000000..a2227b3dcc --- /dev/null +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss @@ -0,0 +1,6 @@ +.gla-connect-google-combo-account-card { + + .gla-connect-google-combo-account-card-instruction { + color: $gray-700; + } +} diff --git a/js/src/components/google-combo-account-card/index.js b/js/src/components/google-combo-account-card/index.js index 1fee516470..098fb7b4ef 100644 --- a/js/src/components/google-combo-account-card/index.js +++ b/js/src/components/google-combo-account-card/index.js @@ -7,7 +7,6 @@ import AccountCard from '.~/components/account-card'; import RequestFullAccessGoogleAccountCard from '../google-account-card/request-full-access-google-account-card'; import { ConnectedGoogleAccountCard } from '../google-account-card'; import ConnectGoogleComboAccountCard from './connect-google-combo-account-card'; -import './index.scss'; export default function GoogleComboAccountCard( { disabled = false } ) { const { google, scope, hasFinishedResolution } = useGoogleAccount(); diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss deleted file mode 100644 index f65cac73cb..0000000000 --- a/js/src/components/google-combo-account-card/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -.google-combo-account-card { - - .google-combo-account-card-description { - color: $gray-700; - } -} 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 6b789bc644..5755618114 100644 --- a/tests/e2e/specs/setup-mc/step-1-accounts.test.js +++ b/tests/e2e/specs/setup-mc/step-1-accounts.test.js @@ -193,12 +193,10 @@ test.describe( 'Set up accounts', () => { await setUpAccountsPage.goto(); - const connectButton = page - .getByRole( 'button', { - name: 'Connect', - exact: true, - } ) - .nth( 1 ); + const connectButton = setUpAccountsPage + .getGoogleAccountCard() + .getByRole( 'button', { name: 'Connect' } ); + await expect( connectButton ).toBeDisabled(); const termsCheckbox = setUpAccountsPage.getTermsCheckbox(); @@ -213,7 +211,7 @@ test.describe( 'Set up accounts', () => { baseURL + 'google_auth' ); - setUpAccountsPage.getTermsCheckbox().check(); + await setUpAccountsPage.getTermsCheckbox().check(); // Click the enabled connect button page.locator( diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js index 9149338898..050da0bc4e 100644 --- a/tests/e2e/utils/mock-requests.js +++ b/tests/e2e/utils/mock-requests.js @@ -393,7 +393,7 @@ export default class MockRequests { } /** - * Mock Jetpack as connected. + * Mock Jetpack as not connected. */ async mockJetpackNotConnected() { await this.fulfillJetPackConnection( { From 301c5e0107d0aea46341cf6cb7fdb95ec6b77f95 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 18 Sep 2024 11:13:07 +0530 Subject: [PATCH 15/17] Fix: e2e checkbox locator. --- .../connect-google-combo-account-card.js | 22 ++++++++----------- .../connect-google-combo-account-card.scss | 7 +++++- .../specs/setup-mc/step-1-accounts.test.js | 6 ----- .../pages/setup-mc/step-1-set-up-accounts.js | 2 +- 4 files changed, 16 insertions(+), 21 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js index 14d755c44c..dfff4dd2c9 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -72,21 +72,17 @@ const ConnectGoogleComboAccountCard = ( { disabled } ) => { onChange={ setTermsAccepted } disabled={ disabled } /> -

- - { createInterpolateElement( - __( - 'You will be prompted to give WooCommerce access to your Google account. Please check all the checkboxes to give WooCommerce all required permissions. Read more', - 'google-listings-and-ads' - ), - { - link: readMoreLink, - } - ) } - -

} + helper={ createInterpolateElement( + __( + 'You will be prompted to give WooCommerce access to your Google account. Please check all the checkboxes to give WooCommerce all required permissions. Read more', + 'google-listings-and-ads' + ), + { + link: readMoreLink, + } + ) } alignIndicator="top" indicator={ { const googleAccountCard = setUpAccountsPage.getGoogleAccountCard(); await expect( googleAccountCard.getByRole( 'button' ) ).toBeDisabled(); - const mcAccountCard = setUpAccountsPage.getMCAccountCard(); - await expect( mcAccountCard.getByRole( 'button' ) ).not.toBeVisible(); - - const adsAccountCard = setUpAccountsPage.getGoogleAdsAccountCard(); - await expect( adsAccountCard.getByRole( 'button' ) ).not.toBeVisible(); - const continueButton = setUpAccountsPage.getContinueButton(); await expect( continueButton ).toBeDisabled(); } ); 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 304eded13d..e3e5d4e74e 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 @@ -374,6 +374,6 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Terms checkbox. */ getTermsCheckbox() { - return this.page.locator( '#gla-account-card-terms-conditions' ); + return this.page.getByLabel( /I accept the terms and conditions/ ) } } From f39648733997f2c48e43d35b095241638e20e052 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 18 Sep 2024 11:17:18 +0530 Subject: [PATCH 16/17] Fix: JS lint. --- tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e3e5d4e74e..1876de366c 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 @@ -374,6 +374,6 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Terms checkbox. */ getTermsCheckbox() { - return this.page.getByLabel( /I accept the terms and conditions/ ) + return this.page.getByLabel( /I accept the terms and conditions/ ); } } From 1b8940fb7bf27f4f87d7e02bd13d56c69409ad43 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Wed, 18 Sep 2024 17:38:51 +0530 Subject: [PATCH 17/17] Remove redundant css rules. --- .../connect-google-combo-account-card.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss b/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss index 50dc20f640..9260eecaf1 100644 --- a/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss @@ -1,11 +1,6 @@ .gla-connect-google-combo-account-card { .gla-account-card__helper { - color: $gray-700; font-size: $gla-font-base; - - p { - margin-bottom: 0; - } } }