Plans overhaul Phase 1: apply new design changes #61757

claudiucelfilip · 2022-03-09T10:11:19Z

Changes proposed in this Pull Request

More info: pdgrnI-kt-p2

This adds visual changes to the /plans and /start/plans pages to match the new designs for the overhauled Plans.
On top of the design, a few other changes have been included, based on this discussion p1646677120279239-slack-C036P6ULFNU

updated the first 6 features:
- Custom domain name: Not included / Free for one year!
- Premium themes
- Premium support
- Plugins
- Storage
- Sell products with WooCommerce
the other features are hidden behind a toggle
the tabs on /plans pages will reflect the behavior from Plans overhaul Phase 1: apply new plans mix #61656

Pricing.page.i2.-.table.version.mov

Testing instructions

checkout this branch to enable the Plans overhaul

New site plans

go to /start/plans
the page should match the design on all screens sizes

* make sure the `Show full plan comparison` toggle works

Free Plans

go to the /plans page on a Free plan site
you should see the overhauled Plan comparison table
make sure the Show full plan comparison toggle works

Paid Plans

go to the /plans page on a new Managed plan site

similar behavior is expected with an old Plan site (ex. eCommerce) but a placeholder notification should show

Staging

you should not see any changes in any non-development environments

github-actions · 2022-03-09T10:11:39Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-03-09T10:11:44Z

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

App Entrypoints (~4625 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-stepper             +23473 B  (+3.8%)    +7376 B  (+4.0%)
entry-main                 -3866 B  (-0.3%)     +217 B  (+0.1%)
entry-gutenboarding        -1577 B  (-0.1%)    -1089 B  (-0.2%)
entry-domains-landing      -1384 B  (-0.2%)     -573 B  (-0.3%)
entry-browsehappy          -1311 B  (-1.4%)     -509 B  (-1.8%)
entry-login                -1085 B  (-0.1%)     +446 B  (+0.2%)

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

Sections (~75950 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
purchase-product                 +13326 B  (+8.8%)    +4166 B  (+10.4%)
woocommerce-installation         +13186 B  (+3.9%)    +4037 B   (+3.8%)
migrate                          +13132 B  (+3.8%)    +4089 B   (+4.0%)
concierge                        +13056 B  (+3.0%)    +4331 B   (+3.5%)
hosting                          +12962 B  (+3.1%)    +1939 B   (+1.5%)
plans                             +7832 B  (+1.0%)    +2521 B   (+1.1%)
jetpack-connect                   +5475 B  (+0.5%)    +1050 B   (+0.4%)
signup                            +5299 B  (+1.1%)     +899 B   (+1.2%)
accept-invite                     +5299 B  (+1.0%)     +900 B   (+1.0%)
jetpack-cloud-partner-portal      +2808 B  (+0.8%)     +572 B   (+0.5%)
export                            +2745 B  (+1.0%)     +561 B   (+0.6%)
home                              +2549 B  (+0.4%)     -440 B   (-0.2%)
settings-jetpack                   +650 B  (+0.2%)     -766 B   (-0.7%)
checkout                           -492 B  (-0.0%)     +974 B   (+0.2%)
pages                              +423 B  (+0.1%)    +2265 B   (+1.7%)
plugins                            -388 B  (-0.1%)     -227 B   (-0.1%)
settings-performance               +384 B  (+0.1%)    +2689 B   (+1.9%)
settings                           +368 B  (+0.1%)     -888 B   (-0.5%)
backup                             +357 B  (+0.0%)     +906 B   (+0.4%)
activity                           +357 B  (+0.0%)     +911 B   (+0.5%)
gutenberg-editor                   -328 B  (-0.1%)      -64 B   (-0.0%)
settings-discussion                +317 B  (+0.1%)    +1496 B   (+1.4%)
import                             +317 B  (+0.1%)    +1174 B   (+1.0%)
media                              +239 B  (+0.0%)     -170 B   (-0.0%)
google-my-business                 +238 B  (+0.0%)    +1977 B   (+1.4%)
email                              +237 B  (+0.0%)     +482 B   (+0.3%)
site-purchases                     -236 B  (-0.0%)     -890 B   (-0.2%)
purchases                          -236 B  (-0.0%)     -862 B   (-0.2%)
theme                              -204 B  (-0.0%)     +190 B   (+0.1%)
marketing                          +200 B  (+0.0%)    +1165 B   (+0.6%)
devdocs                            -198 B  (-0.1%)      -78 B   (-0.2%)
help                               +196 B  (+0.0%)     +121 B   (+0.1%)
account-close                      +196 B  (+0.0%)     +114 B   (+0.1%)
site-blocks                        +184 B  (+0.0%)     +110 B   (+0.1%)
security                           +184 B  (+0.0%)     +118 B   (+0.1%)
privacy                            +184 B  (+0.1%)     +106 B   (+0.1%)
notification-settings              +184 B  (+0.0%)     +118 B   (+0.1%)
me                                 +184 B  (+0.1%)     +122 B   (+0.1%)
happychat                          +184 B  (+0.1%)     +119 B   (+0.1%)
domains                            +156 B  (+0.0%)    +1058 B   (+0.3%)
marketplace                        -151 B  (-0.0%)     -905 B   (-0.5%)
stats                              +136 B  (+0.0%)    -2014 B   (-1.0%)
settings-security                  +128 B  (+0.0%)     -177 B   (-0.1%)
earn                               -101 B  (-0.0%)    -1425 B   (-1.0%)
settings-writing                    +95 B  (+0.0%)     +278 B   (+0.1%)
scan                                +95 B  (+0.0%)      +35 B   (+0.0%)
jetpack-search                      +95 B  (+0.0%)      +35 B   (+0.0%)
themes                              -88 B  (-0.0%)    -1635 B   (-0.9%)
preview                             -85 B  (-0.0%)      -34 B   (-0.0%)
account                             +81 B  (+0.0%)      +63 B   (+0.0%)
people                              +78 B  (+0.0%)    -2023 B   (-1.3%)
posts-custom                        +73 B  (+0.0%)     +429 B   (+0.2%)
posts                               +73 B  (+0.0%)     +429 B   (+0.2%)
woocommerce                         -63 B  (-0.0%)      -51 B   (-0.1%)
sites                               -63 B  (-0.0%)      -21 B   (-0.0%)
jetpack-cloud-settings              -63 B  (-0.0%)      -21 B   (-0.0%)
jetpack-cloud-pricing               +63 B  (+0.0%)      +26 B   (+0.0%)
jetpack-cloud                       -63 B  (-0.0%)      -21 B   (-0.0%)
customize                           -63 B  (-0.0%)      -21 B   (-0.0%)
reader                              -22 B  (-0.0%)     +446 B   (+0.3%)
comments                            -18 B  (-0.0%)     -541 B   (-0.3%)

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

name                                                               parsed_size            gzip_size
async-load-signup-steps-woocommerce-install-transfer                  +13636 B  (+15.9%)    +5020 B  (+18.5%)
async-load-signup-steps-site-picker                                   +13614 B   (+7.5%)    +4885 B   (+8.4%)
async-load-signup-steps-difm-site-picker                              +13614 B   (+7.3%)    +4882 B   (+8.1%)
async-load-signup-steps-woocommerce-install-step-store-address        +13613 B  (+10.3%)    +4868 B  (+11.6%)
async-load-signup-steps-woocommerce-install-step-business-info        +13613 B   (+9.3%)    +4746 B  (+10.4%)
async-load-signup-steps-woocommerce-install-confirm                   +13612 B  (+12.2%)    +4695 B  (+13.2%)
async-load-signup-steps-site                                          +13511 B  (+14.3%)    +4878 B  (+16.7%)
async-load-signup-steps-store-features                                +13510 B  (+14.9%)    +4634 B  (+16.2%)
async-load-signup-steps-starting-point                                +13510 B  (+16.0%)    +4634 B  (+17.3%)
async-load-signup-steps-intent                                        +13510 B  (+15.5%)    +4634 B  (+16.8%)
async-load-signup-steps-new-or-existing-site                          +13454 B  (+17.2%)    +4707 B  (+18.7%)
async-load-signup-steps-rewind-were-backing                           +13453 B  (+18.2%)    +4801 B  (+20.4%)
async-load-signup-steps-clone-destination                             +13451 B  (+15.8%)    +4865 B  (+18.5%)
async-load-signup-steps-creds-permission                              +13450 B  (+14.0%)    +4861 B  (+16.0%)
async-load-signup-steps-rewind-form-creds                             +13449 B  (+12.1%)    +4875 B  (+14.1%)
async-load-signup-steps-site-or-domain                                +13448 B  (+14.8%)    +4910 B  (+17.4%)
async-load-signup-steps-reader-landing                                +13448 B  (+17.4%)    +4845 B  (+20.0%)
async-load-signup-steps-creds-complete                                +13448 B  (+18.2%)    +4797 B  (+20.3%)
async-load-signup-steps-creds-confirm                                 +13447 B  (+14.0%)    +4864 B  (+16.0%)
async-load-signup-steps-clone-jetpack                                 +13447 B  (+17.7%)    +4866 B  (+20.4%)
async-load-signup-steps-clone-cloning                                 +13447 B  (+17.1%)    +4751 B  (+19.0%)
async-load-signup-steps-site-options                                  +13446 B  (+15.7%)    +4805 B  (+18.2%)
async-load-signup-steps-clone-start                                   +13445 B  (+17.0%)    +4796 B  (+19.1%)
async-load-signup-steps-site-topic                                    +13444 B  (+14.4%)    +4912 B  (+17.2%)
async-load-signup-steps-site-title                                    +13444 B  (+17.6%)    +4852 B  (+20.1%)
async-load-signup-steps-test-step                                     +13443 B  (+18.3%)    +4760 B  (+20.4%)
async-load-signup-steps-site-type                                     +13443 B  (+17.6%)    +4875 B  (+20.2%)
async-load-signup-steps-courses                                       +13441 B  (+16.6%)    +4777 B  (+18.6%)
async-load-signup-steps-survey                                        +13440 B  (+16.2%)    +4977 B  (+19.4%)
async-load-signup-steps-emails                                        +13440 B  (+15.2%)    +4969 B  (+17.9%)
async-load-signup-steps-rewind-migrate                                +13411 B  (+14.2%)    +4791 B  (+16.2%)
async-load-signup-steps-clone-ready                                   +13408 B  (+13.7%)    +4729 B  (+15.5%)
async-load-signup-steps-import                                        +13403 B  (+11.6%)    +4712 B  (+12.8%)
async-load-signup-steps-p2-site                                       +13346 B  (+13.3%)    +4313 B  (+13.6%)
async-load-signup-steps-design-picker                                 +13345 B  (+10.1%)    +4890 B  (+12.0%)
async-load-signup-steps-clone-point                                   +13318 B   (+6.0%)    +4789 B   (+8.4%)
async-load-signup-steps-p2-confirm-email                              +13285 B  (+16.9%)    +4196 B  (+16.5%)
async-load-signup-steps-p2-get-started                                +13283 B  (+17.3%)    +4210 B  (+16.8%)
async-load-signup-steps-p2-details                                    +13279 B  (+17.2%)    +4216 B  (+16.8%)
async-load-signup-steps-import-from-wordpress-content-chooser         +13275 B  (+17.2%)    +4298 B  (+17.8%)
async-load-signup-steps-import-from-wordpress-import-everything       +13239 B   (+5.4%)    +4160 B   (+5.9%)
async-load-calypso-my-sites-checkout-modal                            -13142 B   (-1.3%)    -3608 B   (-1.3%)
async-load-signup-steps-website-content                               +11802 B   (+8.9%)    +4262 B   (+9.9%)
async-load-signup-steps-site-info-collection                          +11802 B  (+13.2%)    +4262 B  (+15.0%)
async-load-signup-steps-plans                                          +5473 B   (+1.8%)    +1244 B   (+1.4%)
async-load-signup-steps-user                                           +2839 B   (+1.4%)     +749 B   (+1.3%)
async-load-design-blocks                                                -522 B   (-0.0%)     +600 B   (+0.1%)
async-load-signup-steps-import-from-wix                                 +435 B   (+0.0%)     +941 B   (+0.2%)
async-load-signup-steps-theme-selection                                 +380 B   (+0.3%)    +1019 B   (+2.5%)
async-load-signup-steps-clone-credentials                               +378 B   (+0.3%)     +852 B   (+2.1%)
async-load-signup-steps-import-from-squarespace                         +367 B   (+0.0%)     +896 B   (+0.2%)
async-load-signup-steps-import-from-medium                              +367 B   (+0.0%)     +896 B   (+0.2%)
async-load-signup-steps-import-from-blogger                             +367 B   (+0.0%)     +910 B   (+0.2%)
async-load-signup-steps-import-from-components-progress-screen          +342 B   (+0.0%)     +381 B   (+0.1%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                 -284 B   (-0.4%)      -56 B   (-0.3%)
async-load-calypso-blocks-jitm-templates-notice                         -284 B   (-0.4%)      -55 B   (-0.3%)
async-load-calypso-blocks-jitm-templates-default                        -284 B   (-0.4%)      -57 B   (-0.3%)
async-load-design-playground                                            +251 B   (+0.0%)     +270 B   (+0.1%)
async-load-signup-steps-domains                                         +249 B   (+0.1%)      -75 B   (-0.1%)
async-load-signup-steps-import-from-wordpress-import-content-only       +239 B   (+0.0%)      +23 B   (+0.0%)
async-load-signup-steps-import-from                                     +204 B   (+0.0%)     +508 B   (+0.1%)
async-load-signup-steps-import-from-components-importer-drag            +196 B   (+0.2%)    +1078 B   (+4.1%)
async-load-calypso-reader-list-manage                                   +184 B   (+0.5%)      +77 B   (+0.7%)
async-load-signup-steps-plans-atomic-store                              +183 B   (+0.1%)      -76 B   (-0.1%)
async-load-calypso-blocks-editor-checkout-modal                         -178 B   (-0.0%)      +66 B   (+0.0%)
async-load-calypso-my-sites-sidebar                                     -176 B   (-0.1%)    -1060 B   (-1.3%)
async-load-calypso-post-editor-editor-media-modal                       +158 B   (+0.0%)     +256 B   (+0.1%)
async-load-design                                                       -141 B   (-0.0%)     -616 B   (-0.1%)
async-load-store-app-store-stats-listview                               +131 B   (+0.3%)     +800 B   (+6.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice        -113 B   (-0.2%)     -237 B   (-1.4%)
async-load-signup-steps-import-from-wordpress                           +111 B   (+0.0%)     -237 B   (-0.1%)
async-load-store-app-store-stats                                         +67 B   (+0.0%)     -189 B   (-0.4%)
async-load-calypso-components-web-preview-component                      -48 B   (-0.0%)     +323 B   (+0.2%)
async-load-signup-steps-import-ready                                     -37 B   (-0.0%)     +103 B   (+0.4%)
async-load-calypso-my-sites-sidebar-unified                              -37 B   (-0.0%)      -16 B   (-0.1%)
async-load-calypso-components-jetpack-sidebar                            -37 B   (-0.1%)      -16 B   (-0.1%)
async-load-calypso-reader-sidebar                                        -26 B   (-0.0%)       -5 B   (-0.0%)
async-load-calypso-my-sites-current-site-notice                          -26 B   (-0.0%)       -5 B   (-0.0%)
async-load-calypso-my-sites-site-settings-seo-settings-form              -22 B   (-0.0%)      -15 B   (-0.0%)
async-load-masterbar-cart-masterbar-cart-wrapper                         +12 B   (+0.0%)      -35 B   (-0.1%)
async-load-calypso-blocks-inline-help-popover                            +12 B   (+0.0%)      +29 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.

claudiucelfilip · 2022-03-09T10:32:16Z

Make visual adjustments to the Calypso Plans presentation to match the design

… tooltip property

southp

I've gone through the test plan and it works as expected. The code also LGTM.
One thing to note is that the new My Plans page doesn't show on an Atomic site for me:

It can be a hairy calypso vs wp-admin issue, so let's not hold for this but iterate it in a follow-up PR.

a8ci18n · 2022-03-10T10:20:06Z

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

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

a8ci18n · 2022-03-24T23:33:02Z

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

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

a8ci18n · 2022-04-08T10:29:07Z

Translation for this Pull Request has now been finished.

claudiucelfilip self-assigned this Mar 9, 2022

claudiucelfilip requested review from southp and dzver March 9, 2022 10:15

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 9, 2022

claudiucelfilip mentioned this pull request Mar 9, 2022

Plans overhaul Phase 1 #61336

Merged

claudiucelfilip requested review from tyxla and enejb March 9, 2022 12:13

claudiucelfilip added 8 commits March 9, 2022 14:50

Apply Global styles overrides to Plans and My Plan pages

1a18ab0

Adds more style improvements to better match the design

52c1367

Add Plan comparison toggle

9088716

Update the first 6 features with latest copy

941803a

Adds more improvements to the layout towards matching the design

e60b185

Update FormattedHeader-related snapshot to include the new, optional,…

6598d97

… tooltip property

Restore development feature flag

12ffcc8

Replace lodash isNumber usage

4b88d94

claudiucelfilip force-pushed the update/plans-overhaul-design branch from 1d8b2b4 to 4b88d94 Compare March 9, 2022 12:50

Fix faulty number type check for rawPrice

db5cb33

southp approved these changes Mar 10, 2022

View reviewed changes

claudiucelfilip merged commit ac7299b into trunk Mar 10, 2022

claudiucelfilip deleted the update/plans-overhaul-design branch March 10, 2022 08:45

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plans overhaul Phase 1: apply new design changes #61757

Plans overhaul Phase 1: apply new design changes #61757

claudiucelfilip commented Mar 9, 2022 •

edited

github-actions bot commented Mar 9, 2022 •

edited by matticbot

matticbot commented Mar 9, 2022 •

edited

claudiucelfilip commented Mar 9, 2022

southp left a comment

a8ci18n commented Mar 10, 2022

a8ci18n commented Mar 24, 2022 •

edited

a8ci18n commented Apr 8, 2022

Plans overhaul Phase 1: apply new design changes #61757

Plans overhaul Phase 1: apply new design changes #61757

Conversation

claudiucelfilip commented Mar 9, 2022 • edited

Changes proposed in this Pull Request

Testing instructions

New site plans

Free Plans

Paid Plans

Staging

github-actions bot commented Mar 9, 2022 • edited by matticbot

matticbot commented Mar 9, 2022 • edited

claudiucelfilip commented Mar 9, 2022

southp left a comment

Choose a reason for hiding this comment

a8ci18n commented Mar 10, 2022

a8ci18n commented Mar 24, 2022 • edited

a8ci18n commented Apr 8, 2022

claudiucelfilip commented Mar 9, 2022 •

edited

github-actions bot commented Mar 9, 2022 •

edited by matticbot

matticbot commented Mar 9, 2022 •

edited

a8ci18n commented Mar 24, 2022 •

edited