WIP: Migration Flow Improvements: Offer 50% off for the first year

[merkushin]

Related to #

Proposed Changes

Why are these changes being made?

Testing Instructions

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 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[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[merkushin]

Current state (flag enabled)

[matticbot]

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

App Entrypoints (~103 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                  -441 B  (-0.0%)     -115 B  (-0.0%)
entry-stepper               -333 B  (-0.0%)     -103 B  (-0.0%)
entry-subscriptions         -135 B  (-0.0%)      -31 B  (-0.0%)
entry-login                 -135 B  (-0.0%)      -31 B  (-0.0%)
entry-domains-landing       -135 B  (-0.0%)      -31 B  (-0.0%)
entry-browsehappy           -135 B  (-0.1%)      -31 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~888 bytes added 📈 [gzipped])

name                        parsed_size           gzip_size
import-hosted-site-flow        +12931 B  (+1.6%)    +4089 B  (+1.6%)
with-theme-assembler-flow        +216 B  (+0.3%)       +3 B  (+0.0%)
update-options-flow              +216 B  (+0.5%)       +4 B  (+0.1%)
update-design-flow               +216 B  (+0.0%)     +567 B  (+0.2%)
trial-wooexpress-flow            +216 B  (+0.5%)       +7 B  (+0.1%)
tailored-ecommerce-flow          +216 B  (+0.5%)       +6 B  (+0.1%)
site-setup-wg                    +216 B  (+0.3%)       +7 B  (+0.0%)
site-setup-flow                  +216 B  (+0.3%)      +10 B  (+0.1%)
site-migration-flow              +216 B  (+0.4%)       +5 B  (+0.1%)
readymade-template-flow          +216 B  (+0.1%)       +7 B  (+0.0%)
migration-signup                 +216 B  (+0.4%)       +7 B  (+0.1%)
import-flow                      +216 B  (+0.4%)       +0 B
hosted-site-migration-flow       +216 B  (+0.4%)       +5 B  (+0.1%)
free-post-setup-flow             +216 B  (+0.5%)       +4 B  (+0.1%)
free-flow                        +216 B  (+0.4%)       +8 B  (+0.1%)
entrepreneur-flow                +216 B  (+0.2%)       +7 B  (+0.0%)
assembler-first-flow             +216 B  (+0.3%)       +6 B  (+0.0%)
ai-assembler-flow                +216 B  (+0.3%)       +7 B  (+0.0%)
staging-site                     +156 B  (+0.0%)     -165 B  (-0.0%)
site-monitoring                   -45 B  (-0.0%)       -4 B  (-0.0%)
site-logs                         -45 B  (-0.0%)       -4 B  (-0.0%)
hosting                           -40 B  (-0.0%)     -421 B  (-0.1%)

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 (~19 bytes removed 📉 [gzipped])

name               parsed_size           gzip_size
async-load-design        -13 B  (-0.0%)      -19 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.

[merkushin]

Current state

With intro:

Without intro:

[merkushin]

Current state

---

Feature enabled, introductory offer available:

Feature enabled, introductory offer not available:

Feature disabled:

[merkushin]

Thanks for your feedback @daledupreez! I believe I addressed all your comments and suggestions. In this version I removed the usage of the Redux state, so we use only useSitePlans. I also added the mention of taxes as we discussed in our conversation. Could you take another look at it?

[merkushin]

Current state

---

Intro offer available:

---

Intro offer available (Spanish)

---

Intro offer not available:

[daledupreez]

As a side note for testing, you can use &flags=someflag as a URL parameter to enable a feature flag, and &flags=-someflag to disable a feature flag in any environment. So you can then test the code in the Calypso.live environment linked in this comment without needing to (re)build the UI locally.

[matticbot]

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

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

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/migration-flow-display-intro-offer on your sandbox.

[a8ci18n]

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

Some locales (Hebrew) 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 @merkushin for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.