Full screen merchant center set up screen/page

[jconroy]

Description:

Set up basic scaffolding for the merchant center set up screen/page

Upon clicking the "Get started" (or "Continue Setup") on the getting started page a full-page set up screen/page should be displayed

At the top left of the page will be a backlink with the text "< Get started with Google for eCommerce" - this will return the user to the getting started page

At the top right of the page will be a help link pointing to extension documentation (location to be confirmed).

The set up process will consist of 2 steps:

1. Set up your accounts
2. Configure your free listing

Each of these is essentially a tabbed content area (or equivalent approach).

• Start at Step 1.
• Step 2 is only available once Step 1 is completed (i.e. all accounts are connected/created).
• Step2 text etc. is not clickable (disabled) until step 1 is completed
• Once "Set up your accounts" is complete the number "1" becomes a blue checkmark and content from step 2 is displayed. it becomes clickable so that merchants can go back to step 1 if they wish (and vice versa). If they then disconnect an account I guess step 2 becomes unavailable again.
• At the top of each step is a label (Step 1, Step2), Heading (Set up your accounts), and a brief description of the step.
• On step 2 there is a mock product listing below the heading and description - for initial implementation use a placeholder image.
• Continue button at the bottom right is disabled until the steps are completed.

Note - during development, we may need to fake some of this logic initially (or options etc.) to avoid being blocked - actual functionality can be added as it is finalised.

---

Screenshots

Step 1

Step 2

---

Technical

• Button component should be used for (for example) the continue button
• We have a later flow/epic for Ads Account set up/creation which would use a similar full page view - just something to be considered
• Will need to be able to "link" to step 1 when redirecting after authentication
• "See other listings layouts" link is still TBC

---

Acceptance criteria:

• [ ] Logic above is followed
• [x] Button colors updates to reflect admin profile color scheme
• [x] Tracks event fired on clicking the back link, help button or continue button
• [x] Translatable text
• [ ] SVG for images provided size is acceptable.

---

Dependencies

• Getting started page

Out of bounds/rabbit holes

• For the Initial implementation lets just use a static placeholder image for the mock product listing on step 2- we'll look at dynamically generating mock product listings based on store products as a nice to have in a follow-up issue.
• Looking into the more complicated elements of the setup screen e.g. connect to wordpress, connect to google etc. etc. should be handled in separate PRs/issues

Event tracking:

• [x] Tracks event fired on clicking the back link, help button or continue button

[tomalec]

For the full-page architecture/dev setup, I'd take inspiration from http://wptest.local/wordpress/wp-admin/admin.php?page=wc-admin&path=%2Fsetup-wizard

For the UX/UI, I was thinking of re-using the Modal component, to improve consistency in UX by using the single component for an interface element that overlays the rest of the screen (WP-admin chrome, with sidebar, etc).

It could be stretched to 100%, with "< Get started with Google for eCommerce" acting as a "close" button, with isDismissible: false, shouldCloseOnEsc: false, shouldCloseOnClickOutside: false.

[tomalec]

It seems that the WP-admin's wizard is not quite re-usable yet, and very Profile specific. I'd try to come up with a more generic full-page wizard component, that could be used here and eventually there, to hopefully serve a consistent User- and Developer Experience.

[jconroy]

For the full-page architecture/dev setup, I'd take inspiration from http://wptest.local/wordpress/wp-admin/admin.php?page=wc-admin&path=%2Fsetup-wizard

I think that is the best thing we have to take inspiration from 👍

I'd try to come up with a more generic full-page wizard component, that could be used here and eventually there, to hopefully serve a consistent User- and Developer Experience.

Sounds great 🙇 just be conscious of balancing time investment in terms of making something that works for us to meet deadlines vs spending a lot of time architecting something to be super reusable.

---

Based on our slack convos I've pushed up some example code for setting up some "pages" similar to the onboarding wizard https://github.com/woocommerce/google-listings-and-ads/tree/menus

[ecgan]

@tomalec ,

For the UX/UI, I was thinking of re-using the Modal component, to improve consistency in UX by using the single component for an interface element that overlays the rest of the screen (WP-admin chrome, with sidebar, etc).

Do you mean putting the merchant center setup wizard into the Modal component? Personally I thought it's going to be a full page wizard like the "Welcome to WooCommmerce" setup wizard, not in a Modal.

[tomalec]

just be conscious of balancing time investment

Good point thanks. I just came from Web Components world, where extracting full-page layout and behavior to a separate component, like

<full-screen-wizard>
  <h1 slot="header"><a>‹ Get started with Google for eCommerce</a></h1>
  <a slot="corner-menu">Help</a>
  <wp-stepper></wp-stepper>
  <div>...steps...</div>
</full-screen-wizard>

would be faster and easier.

I hope, I'll learn the React content distribution and alternatives soon enough.

---

Based on our slack convos I've pushed up some example code for setting up some "pages" similar to the onboarding wizard menus

Thanks 👍

[tomalec]

Do you mean putting the merchant center setup wizard into the Modal component? Personally I thought it's going to be a full page wizard like the "Welcome to WooCommmerce" setup wizard, not in a Modal.

Fair point. The more I look into the setup wizard, the more I feel Modal was a bad idea. I was mostly thinking of the experience of a user that clicks "Get Started" button, and suddenly the WP chrome disappears. I thought modal-like transition, like an animation of a window asking over the screen, would be comforting.

In a slack conversation, @j111q suggested that for such wizard screen, the menus could slide away to the top and left respectively.

However, at this point, given, we do not have enough building blocks ready, and time pressing, such considerations and tweaks are overkill nice to haves.

[ecgan]

@tomalec ,

I was mostly thinking of the experience of a user that clicks "Get Started" button, and suddenly the WP chrome disappears.

I share the same opinion with you that it looks jarring and not a good experience.

Yeah, we can look into that in the future.

[jconroy]

for such wizard screen, the menus could slide away to the top and left respectively.

That sounds amazing ❤️ 😍 but like you say @tomalec I don't believe we have enough building blocks or prior art within WordPress or Woo for that sort of thing atm. I think for now it's best to stick with the onboarding and WCPay approaches for now.

[jconroy]

would be faster and easier.

Definitely not opposed to it, just wanted to provide some guidance if it's looking like something that would take a bunch of time 👍

[ecgan]

@jconroy , want to double check with you, I guess it's fine to close this issue? Or is there anything else that we should keep this issue open?

[jconroy]

I think we're good to close this one