Site Migration: Update Plans page for migrations flow

[sixhours]

Proposed Changes

• Add monthly and biennial plans to the importer upgrade step, shown only when the migration-flow/experiment feature flag is true.
• Since the upgrade step is mostly hard-coded to the Business plan, this adds panels on either side of the main plan with monthly and biennial plan details.
• Updates the loader to better resemble the new content being loaded.
• Lots of visual tweaks to better match the mockup at ay0fZYgdXxPDbZbgPlz3hu-fi-1_3529
• Still to do: Consider this a first draft, please. :) Updating tests, making any visual tweaks, etc. still need to be done.

Why are these changes being made?

• p9Jlb4-fiH-p2

Testing Instructions

• Switch to this branch locally or via calypso.live
• Set the feature flag in session storage via the console and reload: window.sessionStorage.setItem('flags', 'migration-flow/experiment');
• Go through the migration flow until you get to the upgrade step
• It should look like this with the flag enabled:

• Ensure the Monthly/Yearly/Biennially buttons add the correct products to the cart, respectively, and the prices match.
• Disable the flag in session storage: window.sessionStorage.setItem('flags', false); and reload the screen.
• You should see the original screen, and it should work as expected:

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127069&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/plans-page-behind-flag on your sandbox.

[matticbot]

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

Sections (~1197 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
import-hosted-site-flow      +5680 B  (+0.7%)    +1223 B  (+0.5%)
import                        -103 B  (-0.0%)      -26 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.

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.

[fditrapani]

Thanks for getting this started @sixhours! I saw your comments about the visual tweaks so I'll hold off on those comments. I don't know if you caught this but the back button covers some of the content on mobile. We might need to artificially add some space to account for it:

[sixhours]

@fditrapani I'll take a look! Feel free to hit me up with any other visual feedback, too.

I had a question about the refund copy placement; it changes depending on the frequency (monthly gets up to 7 days, the others up to 14 days) so I left it in the old spot. Let me know if that should move.

I also wasn't sure if you wanted the plan details auto-expanded like they are right now or not.

[andres-blanco]

This is coming along nicely @sixhours !
I noticed screen flicker between the skeletons. Maybe this is due to Calypso not picking up the feature flag on time, but worth looking into it.

Screen.Recording.2024-12-05.at.10.05.44.AM.mov

I've also added the string freeze label so translation starts

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17047877

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @sixhours for including a screenshot in the description! This is really helpful for our translators.

[fditrapani]

I noticed screen flicker between the skeletons. Maybe this is due to Calypso not picking up the feature flag on time, but worth looking into it.

I didn't see this extra state because mine loaded before it flipped. I agree that we need to not show the old layout.

Feel free to hit me up with any other visual feedback, too.

Sure. I'll let you get things closer to finished before getting too fine grained but there were alignment issues and the contents of the plans, and offers, need to be updated for the migration audience. Let me know if you want to pair on a session to go through this stuff together. Happy to do it on a call if it's easier.

I had a question about the refund copy placement; it changes depending on the frequency (monthly gets up to 7 days, the others up to 14 days) so I left it in the old spot. Let me know if that should move.

Good catch. I didn't notice that. What if we add a "feature" for the refund duration and make the copy below generic like this:

I also wasn't sure if you wanted the plan details auto-expanded like they are right now or not.

I'm fine with leaving that out since I cherry picked the top features this audience. We recently updated our regular plan onboarding flow to show less features and it did better than showing everything.

[sixhours]

@fditrapani I think this is ready for another look 👀 :)

The features are currently served from the same set of feature constants we use for all plans for consistency. If we want to customize them for migrations we'll probably need to hard-code them just for this screen.

[fditrapani]

Thanks @sixhours! I don't mind if we do it in a separate PR but let's go ahead and customize them for here only. There are specific differences we want to call out for each option and I hand picked the features to cater to our migration audience too.

[fditrapani]

I can take a closer look at the updates a little later today or by tomorrow the latest!

[sixhours]

@fditrapani Is the annual savings % discount mentioned in the features consistent or is it dependent on the currency/location? 🤔

[fditrapani]

@fditrapani Is the annual savings % discount mentioned in the features consistent or is it dependent on the currency/location?

That's a good question! @bohdankit07 @niranjan-uma-shankar would either of you know if our annual discounts are consistent across currencies?

[fditrapani]

Nice work on this @sixhours! I found two minor things:

1. There's a weird alignment issue that's causing things to be off ever so slightly:
   
   It's weird because it corrects itself and then goes out of alignment again.

2. The main CTA is using an off white colour:
   

[andres-blanco]

LGTM! I removed the String Freeze label since this will be deployed behind a feature flag. We should make sure that everything is translated when this is shipped.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17047877

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @sixhours for including a screenshot in the description! This is really helpful for our translators.