[WIP] Seller-experience: Add new step to editor welcome tour

[nelsonec87]

Changes proposed in this Pull Request

Closing PR in favor of 61771

• Add new 'Payment block' step to editor welcome tour

Testing instructions

To see the new step:

• Sync calypso's editing-toolkit app to your sandbox
• Sandbox a new site url
• Create this new site using the simple seller flow
• Its editor should open on the end of the flow https://wordpress.com/site-editor/<your-site>
• There should be a "Payments block" step (the second-to-last step)
• If you follow any other flow, you shouldn't get the Payments step.

Closes #61466

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-28911

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-28911&env=jetpack

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[kwight]

This will need a gif, like the other steps: #61466 (comment)

[nelsonec87]

This will need a gif, like the other steps: #61466 (comment)

@kwight , The images src point to the CDN. I Couldn't find the docs on how to deploy those images.

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/seller-experience-step-to-editor-welcome-tour on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[kwight]

The images src point to the CDN. I Couldn't find the docs on how to deploy those images.

Oh, those static CDN domains are functionally the same as wordpress.com, so they're modified on our sandboxes. You can find that directory on OpenGrok at /source/xref/wpcom/i/editor-welcome-tour/.

[sixhours]

I'm seeing the correct card with this patch and the links work as expected:

Nitpicky q, we refer to it as the "payment block" in the card heading and the "Payments block" in the card copy; different pluralization and capitalization for each. Looks like this is the way it is written in the mockup; @SaxonF do you know which version we should use here?

[nelsonec87]

In order to focus on the new card when the user finishes the "Simple" seller flow I'm getting the intent value and checking it for seller (using the hook from this PR).

I'm now trying to differentiate between the simple and the powerful (Woo) flows.

[blackjackkent]

In order to focus on the new card when the user finishes the "Simple" seller flow I'm getting the intent value and checking it for seller (using the hook from this PR).

I'm now trying to differentiate between the simple and the powerful (Woo) flows.

You might want to take a look at the work that @markbiek did for that purpose in #61713. :)

[nelsonec87]

In order to focus on the new card when the user finishes the "Simple" seller flow I'm getting the intent value and checking it for seller (using the hook from this PR).
I'm now trying to differentiate between the simple and the powerful (Woo) flows.

You might want to take a look at the work that @markbiek did for that purpose in #61713. :)

The problem was getting the site plan info, since it's not running on calypso. I ended up making a proxied rest request.

[kwight]

we refer to it as the "payment block" in the card heading and the "Payments block" in the card copy; different pluralization and capitalization for each.

Let's go with "Payments block" (the most popular usage in the support docs).

In order to focus on the new card when the user finishes the "Simple" seller flow

Hm, do you mean the user starts the tour on step 9 or something? I would expect to still start the tour at step one – for a new user, those first steps are important context and tips for everything else. 🤔

[nelsonec87]

Hm, do you mean the user starts the tour on step 9 or something? I would expect to still start the tour at step one – for a new user, those first steps are important context and tips for everything else. 🤔

I think I misinterpreted this part of the issue description:

The second-to-last step in the tour should be focused on the Payments Block for users who arrived in the site editor as a seller who followed the "Start Simple" onboarding pathway