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

config/development.json

@@ -236,6 +236,7 @@
 		"titan/iframe-control-panel": false,
 		"two-factor/enhanced-security": true,
 		"upgrades/redirect-payments": true,
+		"upgrades/storage-add-on-v2": true,
 		"upgrades/upcoming-renewals-notices": true,
 		"upgrades/wpcom-monthly-plans": true,
 		"untangling/hosting-menu": false,

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

@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import {
 	PRODUCT_WPCOM_CUSTOM_DESIGN,
 	PRODUCT_WPCOM_UNLIMITED_THEMES,
@@ -7,6 +8,11 @@ import {
 } from '@automattic/calypso-products';
 import i18n from 'i18n-calypso';
 import {
+	ADD_ON_350GB_STORAGE,
+	ADD_ON_300GB_STORAGE,
+	ADD_ON_250GB_STORAGE,
+	ADD_ON_200GB_STORAGE,
+	ADD_ON_150GB_STORAGE,
 	ADD_ON_100GB_STORAGE,
 	ADD_ON_50GB_STORAGE,
 	ADD_ON_CUSTOM_DESIGN,
@@ -18,7 +24,7 @@ import unlimitedThemesIcon from './icons/unlimited-themes';
 import type { AddOnMeta } from './types';
 
 export const getAddOnsList = (): AddOnMeta[] => {
-	return [
+	const defaultAddOns: AddOnMeta[] = [
 		{
 			addOnSlug: ADD_ON_UNLIMITED_THEMES,
 			productSlug: PRODUCT_WPCOM_UNLIMITED_THEMES,
@@ -55,4 +61,52 @@ export const getAddOnsList = (): AddOnMeta[] => {
 			),
 		},
 	];
+
+	if ( config.isEnabled( 'upgrades/storage-add-on-v2' ) ) {
+		return [
+			...defaultAddOns,
+			{
+				addOnSlug: ADD_ON_150GB_STORAGE,
+				productSlug: PRODUCT_1GB_SPACE,
+				featureSlugs: null,
+				icon: spaceUpgradeIcon,
+				quantity: 150,
+				name: i18n.translate( '150 GB Storage' ),
+			},
+			{
+				addOnSlug: ADD_ON_200GB_STORAGE,
+				productSlug: PRODUCT_1GB_SPACE,
+				featureSlugs: null,
+				icon: spaceUpgradeIcon,
+				quantity: 200,
+				name: i18n.translate( '200 GB Storage' ),
+			},
+			{
+				addOnSlug: ADD_ON_250GB_STORAGE,
+				productSlug: PRODUCT_1GB_SPACE,
+				featureSlugs: null,
+				icon: spaceUpgradeIcon,
+				quantity: 250,
+				name: i18n.translate( '250 GB Storage' ),
+			},
+			{
+				addOnSlug: ADD_ON_300GB_STORAGE,
+				productSlug: PRODUCT_1GB_SPACE,
+				featureSlugs: null,
+				icon: spaceUpgradeIcon,
+				quantity: 300,
+				name: i18n.translate( '300 GB Storage' ),
+			},
+			{
+				addOnSlug: ADD_ON_350GB_STORAGE,
+				productSlug: PRODUCT_1GB_SPACE,
+				featureSlugs: null,
+				icon: spaceUpgradeIcon,
+				quantity: 350,
+				name: i18n.translate( '350 GB Storage' ),
+			},
+		];
+	}
+
+	return defaultAddOns;
 };

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

@@ -1,17 +1,35 @@
-export const STORAGE_LIMIT = 203;
+export const STORAGE_LIMIT = 403;
 
 export const ADD_ON_JETPACK_AI_MONTHLY = 'jetpack_ai_monthly-add-on';
 export const ADD_ON_UNLIMITED_THEMES = 'unlimited_themes-add-on';
 export const ADD_ON_CUSTOM_DESIGN = 'custom_design-add-on';
 export const ADD_ON_50GB_STORAGE = '50gb-storage-add-on';
 export const ADD_ON_100GB_STORAGE = '100gb-storage-add-on';
+export const ADD_ON_150GB_STORAGE = '150gb-storage-add-on';
+export const ADD_ON_200GB_STORAGE = '200gb-storage-add-on';
+export const ADD_ON_250GB_STORAGE = '250gb-storage-add-on';
+export const ADD_ON_300GB_STORAGE = '300gb-storage-add-on';
+export const ADD_ON_350GB_STORAGE = '350gb-storage-add-on';
 
 export const ADD_ONS = < const >[
 	ADD_ON_JETPACK_AI_MONTHLY,
 	ADD_ON_UNLIMITED_THEMES,
 	ADD_ON_CUSTOM_DESIGN,
 	ADD_ON_50GB_STORAGE,
 	ADD_ON_100GB_STORAGE,
+	ADD_ON_150GB_STORAGE,
+	ADD_ON_200GB_STORAGE,
+	ADD_ON_250GB_STORAGE,
+	ADD_ON_300GB_STORAGE,
+	ADD_ON_350GB_STORAGE,
 ];
 
-export const STORAGE_ADD_ONS = < const >[ ADD_ON_50GB_STORAGE, ADD_ON_100GB_STORAGE ];
+export const STORAGE_ADD_ONS = < const >[
+	ADD_ON_50GB_STORAGE,
+	ADD_ON_100GB_STORAGE,
+	ADD_ON_150GB_STORAGE,
+	ADD_ON_200GB_STORAGE,
+	ADD_ON_250GB_STORAGE,
+	ADD_ON_300GB_STORAGE,
+	ADD_ON_350GB_STORAGE,
+];

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

@@ -3,7 +3,7 @@ import { useMemo } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
 import * as ProductsList from '../../products-list';
 import * as Site from '../../site';
-import { getAddOnsList } from '../addons-list';
+import { getAddOnsList } from '../add-ons-list';
 import useAddOnCheckoutLink from './use-add-on-checkout-link';
 import { createAddOnPriceKey, useAddOnPrices } from './use-add-on-prices';
 import type { AddOnMeta } from '../types';

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

@@ -16,9 +16,9 @@ interface Props {
 export function isStorageQuantityAvailable( quantity: number, storage: SiteMediaStorage ): boolean {
 	const existingAddOnStorage = storage.maxStorageBytesFromAddOns / Math.pow( 1024, 3 );
 	const currentMaxStorage = storage.maxStorageBytes / Math.pow( 1024, 3 );
-	const availableStorageUpgrade = STORAGE_LIMIT - currentMaxStorage;
+	const isWithinStorageLimit = STORAGE_LIMIT >= currentMaxStorage - existingAddOnStorage + quantity;
 
-	return existingAddOnStorage < quantity && quantity <= availableStorageUpgrade;
+	return existingAddOnStorage < quantity && isWithinStorageLimit;
 }
 
 /**

packages/plans-grid-next/src/components/shared/storage/hooks/use-storage-string-from-feature.ts

@@ -43,6 +43,16 @@ const getIntegerVolume = (
 			 * TODO: the default 50GB should be coming from plan context, not hardcoded here
 			 */
 			return 150;
+		case AddOns.ADD_ON_150GB_STORAGE:
+			return 200;
+		case AddOns.ADD_ON_200GB_STORAGE:
+			return 250;
+		case AddOns.ADD_ON_250GB_STORAGE:
+			return 300;
+		case AddOns.ADD_ON_300GB_STORAGE:
+			return 350;
+		case AddOns.ADD_ON_350GB_STORAGE:
+			return 400;
 		default:
 			return 0;
 	}