Storage Add Ons: Implement Plans 2023 Features Grid Functionality

[jeyip]

Related to #79041 (comment)
Issue https://github.com/Automattic/martech/issues/2025
Tracking https://github.com/Automattic/martech/issues/2023

Proposed Changes

• Update use-add-on hook to return monthly and yearly add-on costs
• Implement use add-on hook in plan-features-main component
• Add storageAddOns data to gridPlans
• Consume storage add-on data in the storage dropdown component, header pricing component, and billing timeframe component

GIFs

Needs to be fixed

• Mobile view layout and styling

Will Follow Up in Future PR

• Comparison grid storage add on dropdown width is too narrow for tablet resolutions ( longer currency values are wonky )
• Make the storage add-on in checkout cart a dropdown ( to allow user to switch between storage add-ons )
• Fix plans upgrades button in /plans page. They currently don't add the storage add-on into the checkout cart properly
• Add storage add-on dropdown to the /plans spotlight card

Testing Instructions

• Smoke test signup flows with business or ecommerce plans:
  • /start?flags=plans%2Fupgradeable-storage
  • /start/domain?flags=plans%2Fupgradeable-storage
  • /start/plans-import?flags=plans%2Fupgradeable-storage
  • /start/onboarding-pm?flags=plans%2Fupgradeable-storage
• Smoke test stepper flows with business or ecommerce plans:
  • setup/onboarding-media?flags=plans%2Fupgradeable-storage
  • /setup/link-in-bio-tld?flags=plans%2Fupgradeable-storage
• Verify that the storage add-on dropdown only renders for business and ecommerce plans
• Verify that the dropdown is only rendered for annual plans ( not monthly )
• Verify that the header pricing and billing timeframe changes appropriately when storage add-ons are selected
• Verify that the checkout cart is loaded with the selected storage add-on when a plan is selected

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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-ajp-p2)?

[matticbot]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~5503 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
update-design-flow                    +17681 B  (+1.7%)    +5072 B  (+1.8%)
link-in-bio-tld-flow                  +17577 B  (+1.1%)    +5038 B  (+1.2%)
plans                                 +17471 B  (+1.4%)    +5000 B  (+1.4%)
plugins                               +16634 B  (+0.8%)    +4930 B  (+0.9%)
signup                                  +692 B  (+0.2%)      +31 B  (+0.0%)
accept-invite                           +692 B  (+0.2%)      +31 B  (+0.0%)
write-flow                              +678 B  (+0.1%)      +24 B  (+0.0%)
videopress-flow                         +678 B  (+0.1%)      +24 B  (+0.0%)
home                                    +678 B  (+0.1%)      +24 B  (+0.0%)
build-flow                              +678 B  (+0.1%)      +24 B  (+0.0%)
tailored-ecommerce-flow                 +622 B  (+0.1%)      +10 B  (+0.0%)
sensei-flow                             +622 B  (+0.1%)      +10 B  (+0.0%)
podcasts-flow                           +622 B  (+0.2%)      +10 B  (+0.0%)
gutenberg-editor                        +622 B  (+0.1%)      +10 B  (+0.0%)
copy-site-flow                          +622 B  (+0.1%)      +10 B  (+0.0%)
site-setup-flow                         -574 B  (-0.0%)      -67 B  (-0.0%)
site-purchases                          -574 B  (-0.0%)      -67 B  (-0.0%)
settings-jetpack                        -574 B  (-0.1%)      -67 B  (-0.0%)
scan                                    -574 B  (-0.1%)      -36 B  (-0.0%)
purchases                               -574 B  (-0.0%)      -67 B  (-0.0%)
purchase-product                        -574 B  (-0.3%)      -67 B  (-0.1%)
marketing                               -574 B  (-0.1%)      -67 B  (-0.0%)
jetpack-search                          -574 B  (-0.1%)      -67 B  (-0.1%)
jetpack-cloud-settings                  -574 B  (-0.1%)      -67 B  (-0.0%)
jetpack-cloud-pricing                   -574 B  (-0.1%)      -67 B  (-0.0%)
jetpack-cloud-plugin-management         -574 B  (-0.1%)      -31 B  (-0.0%)
jetpack-cloud-partner-portal            -574 B  (-0.1%)      -67 B  (-0.0%)
jetpack-cloud-features-comparison       -574 B  (-0.1%)      -67 B  (-0.0%)
jetpack-cloud-agency-dashboard          -574 B  (-0.1%)      -67 B  (-0.0%)
import-hosted-site-flow                 -574 B  (-0.0%)      -67 B  (-0.0%)
import-flow                             -574 B  (-0.0%)      -67 B  (-0.0%)
backup                                  -574 B  (-0.1%)      -36 B  (-0.0%)
activity                                -574 B  (-0.1%)      -67 B  (-0.0%)
add-ons                                 +340 B  (+0.1%)     +109 B  (+0.1%)
jetpack-connect                         +118 B  (+0.0%)      -36 B  (-0.0%)
free-flow                               +104 B  (+0.0%)      -43 B  (-0.0%)
checkout                                 +62 B  (+0.0%)      -51 B  (-0.0%)
domains                                  +48 B  (+0.0%)      -57 B  (-0.0%)
settings-performance                     +13 B  (+0.0%)      +29 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 (~5309 bytes added 📈 [gzipped])

name                                                            parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected                    +17188 B  (+4.2%)    +5083 B  (+4.1%)
async-load-signup-steps-plans                                      +17188 B  (+4.2%)    +5084 B  (+4.1%)
async-load-calypso-blocks-app-banner                                 +622 B  (+0.3%)      +10 B  (+0.0%)
async-load-calypso-my-sites-stats-jetpack-upsell-section             -574 B  (-0.8%)      -67 B  (-0.4%)
async-load-signup-steps-plans-atomic-store                           -560 B  (-0.3%)      -60 B  (-0.1%)
async-load-calypso-blocks-editor-checkout-modal                      -560 B  (-0.1%)      -60 B  (-0.0%)
async-load-signup-steps-add-ons                                      +354 B  (+0.6%)     +116 B  (+0.6%)
async-load-calypso-my-sites-checkout-modal                            +62 B  (+0.0%)      -50 B  (-0.0%)
async-load-signup-steps-woocommerce-install-transfer                  +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-woocommerce-install-step-store-address        +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-woocommerce-install-step-business-info        +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-woocommerce-install-confirm                   +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-website-content                               +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-user                                          +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-theme-selection                               +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-test-step                                     +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-store-features                                +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-starting-point                                +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-social-profiles                               +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-site-picker                                   +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-site-or-domain                                +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-site-options                                  +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-site                                          +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-rewind-were-backing                           +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-rewind-migrate                                +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-rewind-form-creds                             +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-reader-landing                                +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-page-picker                                   +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-p2-site                                       +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-p2-join-workspace                             +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-p2-get-started                                +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-p2-details                                    +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-p2-confirm-email                              +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-p2-complete-profile                           +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-new-or-existing-site                          +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-launch-site                                   +14 B  (+0.4%)       +6 B  (+0.4%)
async-load-signup-steps-intent                                        +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-emails                                        +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-domains                                       +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-difm-site-picker                              +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-design-picker                                 +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-creds-permission                              +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-creds-confirm                                 +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-creds-complete                                +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-courses                                       +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-clone-start                                   +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-clone-ready                                   +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-clone-point                                   +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-clone-jetpack                                 +14 B  (+0.1%)       +7 B  (+0.1%)
async-load-signup-steps-clone-destination                             +14 B  (+0.0%)       +7 B  (+0.1%)
async-load-signup-steps-clone-credentials                             +14 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-clone-cloning                                 +14 B  (+0.1%)       +7 B  (+0.1%)

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.

[jeyip]

I'll be adding notes to this PR shortly. Hopefully it'll make it easier to code review 🤞

[jeyip]

Hey @saygunnyc 👋 I have a few design questions.

For the storage add-on mobile layout in p9Jlb4-7Ui-p2, there were designs for the dropdown in a plan card

Since the dropdown is only shown for business and ecommerce plans, I was wondering if you could elaborate on if we'd expect storage labels for other plan cards ( personal, premium, etc. )

I was also curious if we could figure out how to handle larger cost strings in the storage add on dropdown. My first thought is to round the cost up or down to the nearest dollar, or to hide the cost after selection

[jeyip]

Closing in favor of #81338 and #81340