Plans: Update "free domain with plan" sidebar upsell to go to domains first

[sirbrillig]

Proposed Changes

In #51609, we updated the "Free domain with annual plan" sidebar upsell nudge to direct users to pick a plan before searching for a domain (instead of adding one silently in the background). This was to address user confusion and refund requests. However, since the primary goal of users clicking on that upsell is to get a domain, the intervening plans page can itself be confusing.

The current flow is: Upsell button > Plans page > Domain search > (maybe) Email upsell > Checkout.

In this PR we modify the upsell flow so that we go to the domains search page first, then the plans page, then directly to checkout.

The new flow is: Upsell button > Domain search > Plans page > Checkout.

There are a few other differences as well:

1. An informational banner will be displayed on the plans page to explain that we are in the upsell flow (see the screenshot below).
2. The email upsell after selecting a domain is skipped in this flow to simplify the steps as requested in Domain Upsell Nudge: redirect users to domain search first #66017.

Some possible problems with this change:

• The plans page supports a redirectTo prop that would be used by checkout after the product has been added. This flow will ignore that prop, but since it is added by the ?redirect_to= query string and this flow is started from a hard-coded link I don't think they will ever be combined.
• The plans page supports a withDiscount prop to add a coupon to the cart along with the plan. This flow will ignore that prop, but since it is added by the ?discount= query string and this flow is started from a hard-coded link I don't think they will ever be combined.
• If you select a domain transfer or domain mapping from the domains search page, you'll effectively leave the upsell flow and will not end up on the plans page when adding the domain product is complete.

Fixes #66017

This must be merged first, but the change will not be active until D84928-code is merged to change where the upsell link goes.

Screenshots

Testing Instructions

• First, apply D84928-code and sandbox the API.
• Start with a site that has no paid plan.
• Visit the customer home page for the site, eg: http://calypso.localhost:3000/home/example.com
• Click the "Upgrade" button in the sidebar notification that reads "Free domain with an annual plan" (see first screenshot above).
• Verify that you are redirected to the domains page for your site (see second screenshot above).
• Click to select a domain.
• Verify that you are redirected to the plans page (see third screenshot above).
• Click the "Upgrade" button on a plan's card to select that plan.
• Verify that you arrive at checkout with both the plan and the domain in your cart.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~2309 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
plans        +8278 B  (+1.0%)    +2171 B  (+0.9%)
domains       +619 B  (+0.0%)     +138 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~104 bytes added 📈 [gzipped])

name                                        parsed_size           gzip_size
async-load-signup-steps-plans                    +327 B  (+0.1%)      +52 B  (+0.1%)
async-load-signup-steps-plans-atomic-store       +254 B  (+0.1%)      +27 B  (+0.0%)
async-load-signup-steps-domains                  +231 B  (+0.1%)      +52 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[michaeldcain]

Thanks for the quick turnaround on this - the flow feels better.

If a plan is not selected, the domain will not be added to the cart either; they are added together at the end of the flow. This avoids the original issue where users would end up aborting the flow and have an unexpected product in their cart.

I think this is slightly different than the original issue, where we were adding a plan to the cart in the background, and the user never explicitly knew that they had added it. I think it's completely reasonable to add the domain to the cart when they select the domain - especially if the domain CTA says "add to cart" or something like that. I guess I could go either way - we could wait for feedback from the P2 post.

[sirbrillig]

Per @michaeldcain's suggestions, I made the following changes (now reflected in the description and screenshots):

1. Clicking to add the domain will now add it to the cart immediately rather than waiting until the end of the flow.
2. The domain search page will now display "Free for the first year" next to most domain options.

[dzver]

This feels like a major improvement! Given that the plan is not auto-added, the conversion rate of the link might not be as good as it previously was, but it should go up. We can monitor the stats after the change is merged.

It looks good to me but I'll leave the final review to be from a person from Payments. I checked the code, and also tested it by following the test plan and trying a couple of other things that are not on the test plan.

I also think this is safe to ship without an experiment, as long as we do a follow-up data request or analysis and see what happened.

[michaeldcain]

This works well for me, and is a definite improvement.

I tested the main flow (CTA > Domain > Plan > Checkout) and everything worked correctly. I also tested exiting the flow after picking a domain (correctly added to cart), mapping and transferring domains (this forked to the existing flows smoothly), and exiting before selecting a domain (no items in cart).

I updated the plans banner to use a title and hopefully reuse existing translation strings. If you don't like the look of it, you can revert to how you had it: