Storage add-ons v2: Expose the extended storage add-ons behind the feature flag. #97794

southp · 2024-12-26T06:39:44Z

Related to #97221

Proposed Changes

This PR exposes the extended storage add-ons to the client side behind the feature flag, upgrades/storage-add-on-v2. The flag will be enabled by default in the development environment.

/add-ons with the feature flag on:

/plans with the feature flag on:

Caution:

It's known issue that a Business site can't purchase the add-ons over 200G. It will be fixed from the backend.
Another known issue is that the total spaces shown in the storage dropdown are wrong for a site owning a storage add-on. This will also be fixed as a follow-up.

Why are these changes being made?

For establishing the foundation of exposing the extended storage add-ons, i.e. 150G, 200G, 250G, 300G and 350G. It is feature-gated for now so we will be able to continuously deploy improvements without disturbing the production experience.

Testing Instructions

Without the feature flag in any environment except for the development, the extended storage add-ons are not available in /add-ons or the storage dropdown in /plans.
Enabling the feature flag by appending ?flags=upgrades/storage-add-on-v2 , the extended storage add-ons should be available in /add-ons and the storage dropdown in /plans.

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 · 2024-12-26T06:39:56Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-12-26T06:41:51Z

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

Sections (~1784 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
update-design-flow           +1008 B  (+0.1%)     +195 B  (+0.0%)
plugins                      +1008 B  (+0.0%)     +196 B  (+0.0%)
plans                        +1008 B  (+0.1%)     +199 B  (+0.0%)
link-in-bio-tld-flow         +1008 B  (+0.0%)     +195 B  (+0.0%)
jetpack-app                  +1008 B  (+0.2%)     +199 B  (+0.2%)
site-overview                 +898 B  (+0.1%)     +208 B  (+0.0%)
hosting                       +898 B  (+0.1%)     +208 B  (+0.0%)
add-ons                       +898 B  (+0.3%)     +153 B  (+0.1%)
theme                         +896 B  (+0.1%)     +166 B  (+0.1%)
stats                         +896 B  (+0.1%)     +184 B  (+0.1%)
site-purchases                +896 B  (+0.1%)     +165 B  (+0.0%)
purchases                     +896 B  (+0.0%)     +165 B  (+0.0%)
posts-custom                  +896 B  (+0.1%)     +163 B  (+0.1%)
posts                         +896 B  (+0.1%)     +163 B  (+0.1%)
migrate                       +896 B  (+0.2%)     +166 B  (+0.1%)
import-hosted-site-flow       +896 B  (+0.1%)     +183 B  (+0.1%)
domains                       +896 B  (+0.0%)     +205 B  (+0.0%)
checkout                      +896 B  (+0.0%)     +165 B  (+0.0%)
tailored-ecommerce-flow       +170 B  (+0.2%)      +54 B  (+0.7%)
signup                        +170 B  (+0.1%)      +46 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 (~312 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-design-blocks                              +896 B  (+0.0%)     +163 B  (+0.0%)
async-load-signup-steps-plans-theme-preselected       +838 B  (+0.2%)     +149 B  (+0.1%)
async-load-signup-steps-plans                         +838 B  (+0.2%)     +149 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.

matticbot · 2024-12-26T06:42:34Z

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

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

notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/expose-the-extended-storage-addons on your sandbox.

aneeshd16

Tested that the additional storage add-ons are displayed correctly when the flag is enabled. However, I was not able to add the 350GB addon to the cart. All other storage options worked.

Kapture.2024-12-30.at.16.00.32.mp4

aneeshd16 · 2024-12-30T23:46:07Z

packages/data-stores/src/add-ons/add-ons-list.ts

+				featureSlugs: null,
+				icon: spaceUpgradeIcon,
+				quantity: 150,
+				name: i18n.translate( '150 GB Storage' ),


Nit: I know that 100 GB Storage and 50 GB Storage are already translated, but I am wondering if changing the string to i18n.translate( '%d GB Storage', [ 150 ] ) could result in fewer strings to be translated.

Great point. I've added it here: 6e34a48. For 100G and 50G, I can update them later when everything is translated :)

aneeshd16 · 2024-12-30T23:47:06Z

packages/data-stores/src/add-ons/constants.ts

@@ -1,17 +1,35 @@
-export const STORAGE_LIMIT = 203;
+export const STORAGE_LIMIT = 403;


Can you please explain this change? 🤔

It's the client side filter used here: https://github.com/Automattic/wp-calypso/blob/trunk/packages/data-stores/src/add-ons/hooks/use-available-storage-add-ons.ts#L19. From what I recall, that 3 was from when the Free plan had 3GB of storage. More details can be found here: fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Snqzva%2Qcyhtvaf%2Sjcpbz%2Qovyyvat%2Sqrsnhyg%2Qfubccvat%2Qpneg%2Qinyvqngbe.cuc%3Se%3Qn9n7n897%232327-og

While I'm thinking it's worth confirming whether it is needed from the client side, I choose to keep it for now.

Does that make sense to you?

Thanks! Going by my naive logic, when the max addon size was 100GB, the storage limit was 203. So if we increase the max addon size to 350GB, should it be 453 instead?

southp · 2024-12-31T08:01:12Z

@aneeshd16 Thanks for the review 🙇🏼

Re:

Tested that the additional storage add-ons are displayed correctly when the flag is enabled. However, I was not able to add the 350GB addon to the cart. All other storage options worked.

I've confirmed that it is part of the same known issue as I described in the PR description:

It's known issue that a Business site can't purchase the add-ons over 200G. It will be fixed from the backend.

I will open a follow-up backend PR for fixing it later.

aneeshd16 · 2024-12-31T19:12:35Z

packages/data-stores/src/add-ons/hooks/use-available-storage-add-ons.ts

+	const isWithinStorageLimit = STORAGE_LIMIT >= currentMaxStorage - existingAddOnStorage + quantity;

-	return existingAddOnStorage < quantity && quantity <= availableStorageUpgrade;
+	return existingAddOnStorage < quantity && isWithinStorageLimit;


I missed this in my first pass - is there a way to test this change?

Rewriting the existing code, it should be:

const isWithinStorageLimit = STORAGE_LIMIT >= currentMaxStorage + quantity;

I do not understand why we subtract existingAddOnStorage here. 🤔

aneeshd16 · 2024-12-31T19:17:50Z

packages/data-stores/src/add-ons/constants.ts

@@ -1,17 +1,35 @@
-export const STORAGE_LIMIT = 203;
+export const STORAGE_LIMIT = 403;


Thanks! Going by my naive logic, when the max addon size was 100GB, the storage limit was 203. So if we increase the max addon size to 350GB, should it be 453 instead?

southp added 4 commits December 26, 2024 10:26

Add the constants required for the extended storage add-ons

6b061f0

Add the extended storage add-ons to the list

39052c5

Rename addons-list to add-ons-list for naming consistency

7a18bca

Feature-gate the extended storage add-ons

60ff17f

southp added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 26, 2024

southp requested a review from a team December 26, 2024 06:39

southp self-assigned this Dec 26, 2024

southp requested a review from aneeshd16 December 26, 2024 06:39

southp added the Storage Addon label Dec 26, 2024

Add the new storage add-on to the storage string switch case

4cec8c3

aneeshd16 reviewed Dec 31, 2024

View reviewed changes

This was referenced Dec 31, 2024

The pro-rated price of a higher-tiered storage add-on is not correctly shown. #97229

Open

Correct the storage dropdown list data #97862

Open

Generalize the translatable string of the storage add-on name

6e34a48

aneeshd16 reviewed Dec 31, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storage add-ons v2: Expose the extended storage add-ons behind the feature flag. #97794

Storage add-ons v2: Expose the extended storage add-ons behind the feature flag. #97794

southp commented Dec 26, 2024 •

edited

Loading

github-actions bot commented Dec 26, 2024 •

edited by matticbot

Loading

matticbot commented Dec 26, 2024 •

edited

Loading

matticbot commented Dec 26, 2024

aneeshd16 left a comment

aneeshd16 Dec 30, 2024

southp Dec 31, 2024

aneeshd16 Dec 30, 2024

southp Dec 31, 2024

aneeshd16 Dec 31, 2024

southp commented Dec 31, 2024

aneeshd16 Dec 31, 2024

aneeshd16 Dec 31, 2024

		@@ -1,17 +1,35 @@
		export const STORAGE_LIMIT = 203;
		export const STORAGE_LIMIT = 403;

Storage add-ons v2: Expose the extended storage add-ons behind the feature flag. #97794

Are you sure you want to change the base?

Storage add-ons v2: Expose the extended storage add-ons behind the feature flag. #97794

Conversation

southp commented Dec 26, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Dec 26, 2024 • edited by matticbot Loading

matticbot commented Dec 26, 2024 • edited Loading

matticbot commented Dec 26, 2024

aneeshd16 left a comment

Choose a reason for hiding this comment

aneeshd16 Dec 30, 2024

Choose a reason for hiding this comment

southp Dec 31, 2024

Choose a reason for hiding this comment

aneeshd16 Dec 30, 2024

Choose a reason for hiding this comment

southp Dec 31, 2024

Choose a reason for hiding this comment

aneeshd16 Dec 31, 2024

Choose a reason for hiding this comment

southp commented Dec 31, 2024

aneeshd16 Dec 31, 2024

Choose a reason for hiding this comment

aneeshd16 Dec 31, 2024

Choose a reason for hiding this comment

southp commented Dec 26, 2024 •

edited

Loading

github-actions bot commented Dec 26, 2024 •

edited by matticbot

Loading

matticbot commented Dec 26, 2024 •

edited

Loading