Guided Tours: Add Simple Payments Email Tour

[Copons]

Close #24594

Add a new Simple Payments tour that is supposed to be triggered by a direct link (/?tour=simplePaymentsEmailTour) from the Simple Payments email.

Testing Instructions

• Open /stats/day/{site} and make sure it doesn't open the simplePaymentsEmailTour guided tour.
• Open /stats/day/{site}?tour=simplePaymentsEmailTour.
• Make sure the first step of the tour is displayed correctly, and it points to the Add Page sidebar button.
• Add a new page, which will open the Editor.
• Make sure the second and last step of the tour is displayed correctly, and it points to the Add Content toolbar button.

[matticbot]

Test live: https://calypso.live/?branch=add/guided-tours/simple-payments

[gwwar]

The tour works as advertised, but it looks like there's 2 other simple payment tours. One in examples and another that appears to be in use.

@lsinger what is the suggested maintenance approach here? We want to run another email campaign with a tour. Should we reuse the old tour, as the query param will force the tour to start?

[gwwar]

@jancavan, @apeatling and I noted that we can probably drop the step 3, where we note that you added a payment button, since the user can see that in the editor directly.

Step 2 is a little awkward too in that the tour needs to be dismissed manually, but I feel tempted to click on the add dropdown first. If that's the case, the tour sits underneath the dropdown. We probably don't need to address this here, since I think it's a tour quirk, but wanted to note it.

[lsinger]

@gwwar I'd tend to do a new tour, since none of the previous ones were used for an email campaign. Content-wise they might be similar or even the same, but there's value in keeping intentions separate, too, in my opinion.

[gwwar]

In step 1, we have a continue button here which isn't quite right for this case since, the next step is to click on add vs showing the next tip on the same page. I think we need to remove the continue button (what the branch has currently) and add a call to action, probably an explicit sentence to click on the Page add button. We can see a similar pattern in other main tours.

After this is done I believe we can 🚢. @lsinger is it enough here to guard the display of this tour with a noop for the when value?

cc @jancavan

[lsinger]

is it enough here to guard the display

Yes, @Copons had already reached out about this on Slack. 👍

[gwwar]

Thanks @Copons let's go ahead and add this now. If folks have additional feedback we can follow up in another PR.

For future reference here's what step 1 now looks like:

[jancavan]

Sorry for chiming in late, I was in user interviews. Looks good when testing the steps mentioned in the description. A couple comments:

1. This is minor, but I see a tooltip that flashes on the left-hand corner immediately after adding a Page.
2. If I add a Post instead, the tooltip in the first step is displayed on the upper left:

I think this might be the exact same tooltip that flashes in (1).

Same thing happens if I head over to the Reader:

Also, If I navigate to the Customizer, the first tooltip is still floating on the page:

[gwwar]

@lsinger are the ^^ known issues with guided tours, or do we have anything else we should configure?

[Copons]

I think I should limit that step to only the paths with the sidebar visible (e.g. /pages, but not /page, etc.).

[lsinger]

Some thoughts:

• Guided Tours has a mechanism to prematurely quit a tour if we detect that the user is trying to move away from it. It's an imperfect heuristic and in this case it might not be firing. We tried to err on the side of allowing the user to continue the tour (rather have a few more false negatives than false positives with regards to exit intent detection).
• The post / page editor difference might just be a question of giving the target a selector that's generic enough / works on both pages. Also note that visual vs. html editor might make a difference regarding what nodes are a) findable and b) visible.
• Guided Tours will quit if it can't find a target element. Either this is failing here or it can find the target but it's hidden and / or offscreen.