Consolidate accounts onboarding: Set up Google Merchant Center account via the combo card #2639

asvinb · 2024-10-03T17:55:05Z

Changes proposed in this Pull Request:

Closes #2597 .

Replace this with a good description of your changes & reasoning.

Detailed test instructions:

Go through the onboarding process and make sure you have at least one MC account.
The card to connect your MC account should be displayed where you can connect a MC account
The user should also be able to create a new account or disconnect their MC account.
Designs: https://www.figma.com/design/fqR0EHi63lWahRcVTKCcba/Google-Listings-%26-Ads-v2.x?node-id=7447-22280&node-type=frame&t=tKJkit0BKc6985PH-0

Additional details:

There are no designs to reclaim a URL and existing components have been used as is.

Changelog entry

…te/2597-connect-mc-account

codecov · 2024-10-03T17:58:05Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 62.7%. Comparing base (4f5bb47) to head (dacbd04).
Report is 88 commits behind head on feature/2509-consolidate-google-account-cards.

Additional details and impacted files

@@                               Coverage Diff                               @@
##           feature/2509-consolidate-google-account-cards   #2639     +/-   ##
===============================================================================
- Coverage                                           62.7%   62.7%   -0.0%     
===============================================================================
  Files                                                325     325             
  Lines                                               5162    5161      -1     
  Branches                                            1265    1265             
===============================================================================
- Hits                                                3239    3238      -1     
  Misses                                              1746    1746             
  Partials                                             177     177

Flag	Coverage Δ
js-unit-tests	`62.7% <100.0%> (-<0.1%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
js/src/hooks/useAutoCreateAdsMCAccounts.js	`93.6% <100.0%> (-0.1%)`	⬇️

…ate/2597-connect-mc-account

…te/2597-connect-mc-account

asvinb · 2024-10-08T12:35:39Z

@joemcgill Can you review PR please? The failing unit tests are from the parent branch.

joemcgill

Thanks @asvinb This is looking pretty good, but I've got a few questions/suggestions inline.

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

joemcgill · 2024-10-08T21:44:33Z

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

+	if ( ! isConnected && resultConnectMC.response?.status === 409 ) {
+		return (
+			<SwitchUrlCard
+				id={ resultConnectMC.error.id }
+				message={ resultConnectMC.error.message }
+				claimedUrl={ resultConnectMC.error.claimed_url }
+				newUrl={ resultConnectMC.error.new_url }
+				onSelectAnotherAccount={ resultConnectMC.reset }
+			/>
+		);
+	}
+
+	if (
+		! isConnected &&
+		( resultConnectMC.response?.status === 403 ||
+			resultCreateAccount.response?.status === 403 )
+	) {
+		return (
+			<ReclaimUrlCard
+				id={
+					resultConnectMC.error?.id || resultCreateAccount.error?.id
+				}
+				websiteUrl={
+					resultConnectMC.error?.website_url ||
+					resultCreateAccount.error?.website_url
+				}
+				onSwitchAccount={ () => {
+					resultConnectMC.reset();
+					resultCreateAccount.reset();
+				} }
+			/>
+		);
+	}
+
+	if (
+		! isConnected &&
+		( resultCreateAccount.loading ||
+			resultCreateAccount.response?.status === 503 )
+	) {
+		return (
+			<CreatingCard
+				retryAfter={ resultCreateAccount.error?.retry_after }
+				onRetry={ handleCreateAccount }
+			/>
+		);
+	}


This duplicates a lot of logic directly from js/src/components/google-mc-account-card/connect-mc/index.js. Curious if we could abstract some of this into a shared component and avoid the redundant isConnected check in the process?

@joemcgill I've introduced a new AccountConnectionStatus where we have this logic.
https://github.com/woocommerce/google-listings-and-ads/pull/2639/files#diff-398198aee87feb6f89983540431ac7e76d24a4d36793dd440d8758a287e190bbR1

However am not sure if there's an easier way to have the conditions to render that component:
https://github.com/woocommerce/google-listings-and-ads/pull/2639/files#diff-adf83b7ae2454ff433c2f50eb0f115c58b3a97776516764ef0ec88707353d177R45-R51

joemcgill · 2024-10-08T22:05:33Z

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

+				indicator={ getIndicator() }
+			/>
+
+			<ConnectMC />


Rather than making this a sibling component of the AccountCard above, I would have expected ConnectMC to return a Section.Card.Body component that is passed as a child of the AccountCard above.

@joemcgill We synced in Slack about that. We'll have a group of cars, so it'll be siblings.

…te/2597-connect-mc-account

…ctor 2597: Refactor ConnectMC with updated AccountCard

…ate/2597-connect-mc-account

asvinb · 2024-10-31T13:16:31Z

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

@@ -39,7 +56,7 @@ const ConnectedGoogleComboAccountCard = () => {
 			<AccountCard
 				appearance={ APPEARANCE.GOOGLE }
 				alignIcon="top"
-				className="gla-google-combo-account-card--connected"
+				className="gla-google-combo-account-card gla-google-combo-account-card--connected"


Adding the gla-google-combo-account-card to be consistent with the other cards.

js/src/components/google-combo-account-card/connect-mc/merchant-center-select.js

js/src/data/resolvers.js

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

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

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

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

eason9487

Most of the original components under the js/src/components/google-mc-account-card directory are only used for the Onboarding accounts step, except for ConnectedGoogleMCAccountCard which is shared by the Setting page. Given this, extracting some code into shared components or functions and creating another ConnectedMC component would make for unnecessary redundant code and reduce maintainability.

This PR should be able to be done based on the original existing code and minimize code changes to optimally leverage codes that have been run for 2-3 years.

Suggest exploring possibilities in this direction:

Adjust the google-mc-account-card/connect-mc/index.js to fulfill the new UI and functionality rather than creating google-combo-account-card/connect-mc/connect-mc.js
Revert the extraction of AccountConnectionStatus and hasAccountConnectionIssue
ConnectedGoogleMCAccountCard will only be used on the Settings page and its hideAccountSwitch prop will no longer be needed
- Remove code related to hideAccountSwitch
- Rename to specify that this component is dedicated to the Settings page

asvinb · 2024-11-04T12:48:12Z

@eason9487 I've updated the PR to use the existing ConnectMC component. Let me know what you think.

js/src/components/google-mc-account-card/connect-mc/index.js

js/src/components/google-mc-account-card/connect-mc/actions.js

js/src/components/google-mc-account-card/disconnect-account-button.js

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

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

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

…ted account.

js/src/components/google-mc-account-card/connect-mc/index.js

eason9487

Thanks for the work. LGTM.

There is only one #2639 (comment) left to be confirmed for now. Perhaps it needs a bit of tweaking and I believe that even then, it won't need another review. I will be approving in advance.

joemcgill · 2024-11-06T16:56:38Z

I confirmed with @fblascogarma today that the current wording, "Required to sync products so they show on Google." is preferred. Thanks all!

asvinb added 3 commits October 3, 2024 20:28

Save WIP.

874ef00

Merge branch 'feature/2567-kickoff-mc-ads-account-creation' into upda…

1ead7f9

…te/2597-connect-mc-account

Extract DisconnectAccount button.

4428639

github-actions bot added the changelog: update Big changes to something that wasn't broken. label Oct 3, 2024

asvinb added 15 commits October 4, 2024 12:15

Add ConnectAccountCard component.

bebfaed

Add ConnectMCBody and ConnectMCFooter component.

872787e

Save WIP.

9475ec2

Check for non connected state.

3965234

Add preConditionReady check.

8a4ba4c

Revert dev temp changes.

8b850fd

Save E2E tests,

176a4a8

Merge branch 'feature/2509-consolidate-google-account-cards' into upd…

b4b4347

…ate/2597-connect-mc-account

Save WIP.

e9626f0

Merge branch 'feature/2567-kickoff-mc-ads-account-creation' into upda…

57c4693

…te/2597-connect-mc-account

Review class names.

e86de9b

Merge branch 'feature/2567-kickoff-mc-ads-account-creation' into upda…

9ad469a

…te/2597-connect-mc-account

Fix e2e tests.

75723e2

Merge branch 'feature/2567-kickoff-mc-ads-account-creation' into upda…

9923f70

…te/2597-connect-mc-account

Use mock functions available.

406f028

asvinb marked this pull request as ready for review October 8, 2024 12:35

joemcgill linked an issue Oct 8, 2024 that may be closed by this pull request

Onboarding: Connect to existing MC account in Google Accounts Card #2597

Closed

5 tasks

joemcgill requested changes Oct 8, 2024

View reviewed changes

asvinb added 6 commits October 9, 2024 15:49

Merge branch 'feature/2567-kickoff-mc-ads-account-creation' into upda…

26ec13a

…te/2597-connect-mc-account

Address CR feedback.

acedda6

Cast googleMCAccount?.id to a boolean.

13d8d2b

Add description when connecting extra account.

9e8649b

Fix card when reclaiming URL.

2981067

Fix E2E tests.

e03f3c3

asvinb added 6 commits October 31, 2024 14:54

Use correct button variant.

c40800b

Merge pull request #2657 from woocommerce/update/2597-connect-mc-refa…

7a757a2

…ctor 2597: Refactor ConnectMC with updated AccountCard

Sync changes.

cc3e804

Merge branch 'feature/2509-consolidate-google-account-cards' into upd…

8c4cd7a

…ate/2597-connect-mc-account

Update JSDocs.

a3040fe

Fix E2E tests.

e75a930

asvinb commented Oct 31, 2024

View reviewed changes

Remove unused functions.

8fba3e4

eason9487 reviewed Nov 1, 2024

View reviewed changes

asvinb added 6 commits November 1, 2024 15:25

Address CR feedback.

17e7c84

Add MerchantCenterAccountInfoCard component.

0e15813

Fix linting errors.

4e201c1

Remove unused component.

65e6854

Reorder imports.

4b777bc

Use correcct prop name.

9a368f1

asvinb mentioned this pull request Nov 4, 2024

Onboarding: Create new MC account when there are existing accounts in Google Accounts Card #2604

Closed

7 tasks

eason9487 reviewed Nov 5, 2024

View reviewed changes

asvinb added 2 commits November 5, 2024 15:31

Address CR feedback.

66de193

Add condition to not render the claim components if there's no connec…

dacbd04

…ted account.

eason9487 reviewed Nov 6, 2024

View reviewed changes

js/src/components/google-mc-account-card/connect-mc/index.js Show resolved Hide resolved

js/src/components/google-mc-account-card/connect-mc/index.js Show resolved Hide resolved

eason9487 approved these changes Nov 6, 2024

View reviewed changes

joemcgill merged commit 900d45d into feature/2509-consolidate-google-account-cards Nov 6, 2024
7 checks passed

joemcgill deleted the update/2597-connect-mc-account branch November 6, 2024 16:56

eason9487 mentioned this pull request Nov 20, 2024

Feature: Consolidate Google accounts setup during onboarding #2634

Merged

eason9487 changed the title ~~Connect MC Account within combo card~~ Consolidate accounts onboarding: Set up Google Merchant Center account within the combo card Nov 20, 2024

eason9487 changed the title ~~Consolidate accounts onboarding: Set up Google Merchant Center account within the combo card~~ Consolidate accounts onboarding: Set up Google Merchant Center account via the combo card Nov 20, 2024

ianlin mentioned this pull request Nov 26, 2024

Release 2.9.0 #2694

Merged

22 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Consolidate accounts onboarding: Set up Google Merchant Center account via the combo card #2639

Consolidate accounts onboarding: Set up Google Merchant Center account via the combo card #2639

asvinb commented Oct 3, 2024 •

edited by eason9487

Loading

codecov bot commented Oct 3, 2024 •

edited

Loading

asvinb commented Oct 8, 2024

joemcgill left a comment

joemcgill Oct 8, 2024

asvinb Oct 9, 2024

joemcgill Oct 8, 2024

asvinb Oct 9, 2024

asvinb Oct 25, 2024

asvinb Oct 31, 2024

eason9487 left a comment •

edited

Loading

asvinb commented Nov 4, 2024

eason9487 left a comment

joemcgill commented Nov 6, 2024

Consolidate accounts onboarding: Set up Google Merchant Center account via the combo card #2639

Consolidate accounts onboarding: Set up Google Merchant Center account via the combo card #2639

Conversation

asvinb commented Oct 3, 2024 • edited by eason9487 Loading

Changes proposed in this Pull Request:

Detailed test instructions:

Additional details:

Changelog entry

codecov bot commented Oct 3, 2024 • edited Loading

Codecov Report

asvinb commented Oct 8, 2024

joemcgill left a comment

Choose a reason for hiding this comment

joemcgill Oct 8, 2024

Choose a reason for hiding this comment

asvinb Oct 9, 2024

Choose a reason for hiding this comment

joemcgill Oct 8, 2024

Choose a reason for hiding this comment

asvinb Oct 9, 2024

Choose a reason for hiding this comment

asvinb Oct 25, 2024

Choose a reason for hiding this comment

asvinb Oct 31, 2024

Choose a reason for hiding this comment

eason9487 left a comment • edited Loading

Choose a reason for hiding this comment

asvinb commented Nov 4, 2024

eason9487 left a comment

Choose a reason for hiding this comment

joemcgill commented Nov 6, 2024

asvinb commented Oct 3, 2024 •

edited by eason9487

Loading

codecov bot commented Oct 3, 2024 •

edited

Loading

eason9487 left a comment •

edited

Loading