Plans (Storage): Always reflect selected storage option in the plan price

[chriskmnds]

Part of addressing #90905
Presumably fixes #90947 (although cannot stand on its own 🤷 )

Proposed Changes

This PR makes the pricing on plans always reflect the selected storage option, irrespective of conditions that may allow a certain storage add-on to be purchasable. These are different concerns i.e. if something would "exceed storage limits" or is not "repurchasable", then these are things to be reflected in the UI that allows selections of that option.

In effect, the changes here make the pricing hook cleaner, more deterministic -> "if a storage add-on has been selected, then reflect its price in the plan price". It shouldn't be bothered with more context.

Media

Before/After...

Why are these changes being made?

Storage options/dropdowns coupled with site context are a pretty broken mess right now. There is really no way to enable storage selection in the plans-grid without introducing ambiguity / stemming from existing storage purchased, site storage limits, and weak UI (we'll get to that later).

This PR is part of (hopefully) a series of PRs to make storage selection in the plans-grid cleaner and less ambiguous when in admin (or in a "site" context) - and to eventually enable selection over the current/spotlight plan (per #90905). We will likely not be shipping anything individually. If the whole in the end doesn't make sense, then we won't ship anything.

Testing Instructions

• Go to /add-ons with a site on the Creator plan
• Purchase 50GB storage add-on
• In /plans/[site]:
  • Confirm the spotlight/current plan price reflects the additional cost of 50GB when "yearly" term selected
  • Go to Entrepreneur plan column and select the 100GB add-on upgrade. It should force the price of the plan to be updated.

See #91050 for testing instead as it brings more of the puzzle together

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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

Sections (~117 bytes removed 📉 [gzipped])

name                  parsed_size           gzip_size
update-design-flow          -43 B  (-0.0%)      -19 B  (-0.0%)
theme                       -43 B  (-0.0%)      -33 B  (-0.0%)
stats                       -43 B  (-0.0%)      -33 B  (-0.0%)
plugins                     -43 B  (-0.0%)      -19 B  (-0.0%)
plans                       -43 B  (-0.0%)      -19 B  (-0.0%)
link-in-bio-tld-flow        -43 B  (-0.0%)      -19 B  (-0.0%)
jetpack-app                 -43 B  (-0.0%)      -19 B  (-0.0%)
import-flow                 -43 B  (-0.0%)      -32 B  (-0.0%)
hosting                     -43 B  (-0.0%)      -19 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 (~19 bytes removed 📉 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected        -43 B  (-0.0%)      -19 B  (-0.0%)
async-load-signup-steps-plans                          -43 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.

[matticbot]

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

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

• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/plans-next-always-reflect-selected-storage-option-on-price on your sandbox.

[chriskmnds]

Going to close this and just ship the child PR #91050
I could have done it differently, but there's really no need to bother for a single PR.