@automattic/data-stores 3.1.0 → 3.1.2

package/src/add-ons/add-ons-list.ts

@@ -0,0 +1,109 @@
+import {
+	PRODUCT_WPCOM_CUSTOM_DESIGN,
+	PRODUCT_WPCOM_UNLIMITED_THEMES,
+	PRODUCT_1GB_SPACE,
+	WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED,
+	WPCOM_FEATURES_CUSTOM_DESIGN,
+} 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,
+	ADD_ON_UNLIMITED_THEMES,
+} from './constants';
+import customDesignIcon from './icons/custom-design';
+import spaceUpgradeIcon from './icons/space-upgrade';
+import unlimitedThemesIcon from './icons/unlimited-themes';
+import type { AddOnMeta, AddOnSlug } from './types';
+
+const defaultAddOns: AddOnMeta[] = [
+	{
+		addOnSlug: ADD_ON_UNLIMITED_THEMES,
+		productSlug: PRODUCT_WPCOM_UNLIMITED_THEMES,
+		featureSlugs: [ WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED ] as string[],
+		icon: unlimitedThemesIcon,
+		featured: true,
+	},
+	{
+		addOnSlug: ADD_ON_CUSTOM_DESIGN,
+		productSlug: PRODUCT_WPCOM_CUSTOM_DESIGN,
+		featureSlugs: [ WPCOM_FEATURES_CUSTOM_DESIGN ] as string[],
+		icon: customDesignIcon,
+	},
+	{
+		addOnSlug: ADD_ON_50GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 50,
+		name: i18n.translate( '50 GB Storage' ),
+		description: i18n.translate(
+			'Make more space for high-quality photos, videos, and other media. '
+		),
+	},
+	{
+		addOnSlug: ADD_ON_100GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 100,
+		name: i18n.translate( '100 GB Storage' ),
+		description: i18n.translate(
+			'Take your site to the next level. Store all your media in one place without worrying about running out of space.'
+		),
+	},
+	{
+		addOnSlug: ADD_ON_150GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 150,
+		name: i18n.translate( '%d GB Storage', { args: [ 150 ] } ),
+	},
+	{
+		addOnSlug: ADD_ON_200GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 200,
+		name: i18n.translate( '%d GB Storage', { args: [ 200 ] } ),
+	},
+	{
+		addOnSlug: ADD_ON_250GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 250,
+		name: i18n.translate( '%d GB Storage', { args: [ 250 ] } ),
+	},
+	{
+		addOnSlug: ADD_ON_300GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 300,
+		name: i18n.translate( '%d GB Storage', { args: [ 300 ] } ),
+	},
+	{
+		addOnSlug: ADD_ON_350GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 350,
+		name: i18n.translate( '%d GB Storage', { args: [ 350 ] } ),
+	},
+];
+
+export const getAddOnsList = (): AddOnMeta[] => {
+	return defaultAddOns;
+};
+
+export const getAddOn = ( addOnSlug: AddOnSlug ): AddOnMeta | undefined => {
+	return getAddOnsList().find( ( addOn ) => addOn.addOnSlug === addOnSlug );
+};

package/src/add-ons/constants.ts

@@ -1,10 +1,15 @@
-export const STORAGE_LIMIT = 200;
+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,
@@ -12,6 +17,19 @@ export const ADD_ONS = < const >[
 	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,
+];

package/src/add-ons/hooks/use-add-on-prices.ts

@@ -1,68 +1,81 @@
-import formatCurrency from '@automattic/format-currency';
+import { formatCurrency } from '@automattic/number-formatters';
 import { useMemo } from '@wordpress/element';
 import * as ProductsList from '../../products-list';
+import type { AddOnMeta } from '../types';
 
-const useAddOnPrices = ( productSlug: ProductsList.StoreProductSlug, quantity?: number ) => {
-	const productsList = ProductsList.useProducts( [ productSlug ] );
-	const product = productsList.data?.[ productSlug ];
+type AddOnPrices = {
+	[ key in string ]?: {
+		monthlyPrice: number;
+		yearlyPrice: number;
+		formattedMonthlyPrice: string;
+		formattedYearlyPrice: string;
+		currencyCode: string;
+	} | null;
+};
+
+export const createAddOnPriceKey = ( { productSlug, quantity }: AddOnMeta ) => {
+	return `${ productSlug }_${ quantity ?? 0 }`;
+};
+
+export const useAddOnPrices = ( addOnMetas: AddOnMeta[] ) => {
+	const productSlugs = useMemo(
+		() => addOnMetas.map( ( { productSlug } ) => productSlug ),
+		[ addOnMetas ]
+	);
+	const productsList = ProductsList.useProducts( productSlugs );
 
 	return useMemo( () => {
-		let cost = product?.costSmallestUnit;
+		return addOnMetas.reduce< AddOnPrices >( ( accum, addOnMeta ) => {
+			const { productSlug, quantity } = addOnMeta;
+			const product = productsList.data?.[ productSlug ];
+			let cost = product?.costSmallestUnit;
 
-		if ( ! cost || ! product?.currencyCode ) {
-			return null;
-		}
+			if ( ! cost || ! product?.currencyCode ) {
+				return {
+					[ productSlug ]: null,
+					...accum,
+				};
+			}
 
-		// Finds the applicable tiered price for the quantity.
-		const priceTier =
-			quantity &&
-			product?.priceTierList.find( ( tier ) => {
-				if ( quantity >= tier.minimumUnits && quantity <= ( tier.maximumUnits ?? 0 ) ) {
-					return tier;
-				}
-			} );
+			// Finds the applicable tiered price for the quantity.
+			const priceTier =
+				quantity &&
+				product?.priceTierList.find( ( tier ) => {
+					if ( quantity >= tier.minimumUnits && quantity <= ( tier.maximumUnits ?? 0 ) ) {
+						return tier;
+					}
+				} );
 
-		if ( priceTier ) {
-			cost = priceTier?.maximumPrice;
-		}
+			if ( priceTier ) {
+				cost = priceTier?.maximumPrice;
+			}
 
-		// Although memoized, it appears that add-on prices are unnecessarily recalculated dozens of
-		// times when invoked as part of the PlansFeaturesMain component.
-		//
-		// When we format the cost before displaying it to the end user, the formatting library warns us
-		// that it will round decimal values for smallest currency unit calculations. Because of the
-		// unnecessary recalculations, this warning is repeated and floods the console.
-		//
-		// The ideal answer is to trace the root cause of the recalculations and prevent them, but after
-		// taking a cursory look, it seems as if this will require deeper investigation. For now, because
-		// we are always working with smallest currency units for add-ons, we explicitly round decimal add-on
-		// monthly prices to suppress the warnings ( something that was already happening in the library ).
-		//
-		// Once https://github.com/Automattic/wp-calypso/issues/95416 is resolved, we can remove this rounding.
-		const initialMonthlyPrice = cost / 12;
-		let monthlyPrice = Number.isInteger( initialMonthlyPrice )
-			? initialMonthlyPrice
-			: Math.round( initialMonthlyPrice );
-		let yearlyPrice = cost;
+			let monthlyPrice = cost / 12;
+			let yearlyPrice = cost;
 
-		if ( product?.term === 'month' ) {
-			monthlyPrice = cost;
-			yearlyPrice = cost * 12;
-		}
+			if ( product?.term === 'month' ) {
+				monthlyPrice = cost;
+				yearlyPrice = cost * 12;
+			}
 
-		return {
-			monthlyPrice,
-			yearlyPrice,
-			formattedMonthlyPrice: formatCurrency( monthlyPrice, product?.currencyCode, {
-				stripZeros: true,
-				isSmallestUnit: true,
-			} ),
-			formattedYearlyPrice: formatCurrency( yearlyPrice, product?.currencyCode, {
-				stripZeros: true,
-				isSmallestUnit: true,
-			} ),
-		};
-	}, [ product, quantity ] );
+			return {
+				[ createAddOnPriceKey( addOnMeta ) ]: {
+					monthlyPrice,
+					yearlyPrice,
+					formattedMonthlyPrice: formatCurrency( monthlyPrice, product?.currencyCode, {
+						stripZeros: true,
+						isSmallestUnit: true,
+					} ),
+					formattedYearlyPrice: formatCurrency( yearlyPrice, product?.currencyCode, {
+						stripZeros: true,
+						isSmallestUnit: true,
+					} ),
+					currencyCode: product?.currencyCode,
+				},
+				...accum,
+			};
+		}, {} );
+	}, [ addOnMetas, productsList.data ] );
 };
 
 export default useAddOnPrices;

package/src/add-ons/hooks/use-add-on-purchase-status.ts

@@ -1,17 +1,22 @@
-import { useTranslate } from 'i18n-calypso';
+import i18n, { useTranslate } from 'i18n-calypso';
 import * as Purchases from '../../purchases';
 import * as Site from '../../site';
 import type { AddOnMeta } from '../types';
 
 interface Props {
 	addOnMeta: AddOnMeta;
-	selectedSiteId?: number | null | undefined;
+	selectedSiteId?: number | null;
 }
 
+type AddOnPurchaseStatus = {
+	available: boolean;
+	text?: ReturnType< typeof i18n.translate >;
+};
+
 /**
  * Returns whether add-on product has been purchased or included in site plan.
  */
-const useAddOnPurchaseStatus = ( { addOnMeta, selectedSiteId }: Props ) => {
+const useAddOnPurchaseStatus = ( { addOnMeta, selectedSiteId }: Props ): AddOnPurchaseStatus => {
 	const translate = useTranslate();
 	const matchingPurchases = Purchases.useSitePurchasesByProductSlug( {
 		siteId: selectedSiteId,
@@ -22,15 +27,21 @@ const useAddOnPurchaseStatus = ( { addOnMeta, selectedSiteId }: Props ) => {
 		( slug ) => siteFeatures.data?.active?.includes( slug )
 	);
 
-	/*
-	 * Order matters below:
-	 * 	1. Check if purchased first.
-	 * 	2. Check if site feature next.
-	 * Reason: `siteFeatures.active` involves both purchases and plan features.
+	/**
+	 * First, check if the add-on has a matching purchase. If storage add-on, check matching
+	 * quantity. Secondly, check if the feature is active on the site. If there's no matching
+	 * purchase but `siteFeatures.active` still contains the feature, it's because the feature is
+	 * included in the plan.
 	 */
-
 	if ( matchingPurchases ) {
-		return { available: false, text: translate( 'Purchased' ) };
+		if ( addOnMeta.quantity ) {
+			const purchase: Purchases.Purchase = Object.values( matchingPurchases )[ 0 ];
+			if ( purchase.purchaseRenewalQuantity === addOnMeta.quantity ) {
+				return { available: false, text: translate( 'Purchased' ) };
+			}
+		} else {
+			return { available: false, text: translate( 'Purchased' ) };
+		}
 	}
 
 	if ( isSiteFeature ) {

package/src/add-ons/hooks/use-add-ons.ts

@@ -1,274 +1,76 @@
-import {
-	PRODUCT_JETPACK_AI_MONTHLY,
-	PRODUCT_WPCOM_CUSTOM_DESIGN,
-	PRODUCT_WPCOM_UNLIMITED_THEMES,
-	PRODUCT_1GB_SPACE,
-	WPCOM_FEATURES_AI_ASSISTANT,
-	WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED,
-	WPCOM_FEATURES_CUSTOM_DESIGN,
-} from '@automattic/calypso-products';
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
 import { useMemo } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
 import * as ProductsList from '../../products-list';
-import * as Purchases from '../../purchases';
 import * as Site from '../../site';
-import {
-	ADD_ON_100GB_STORAGE,
-	ADD_ON_50GB_STORAGE,
-	ADD_ON_CUSTOM_DESIGN,
-	ADD_ON_JETPACK_AI_MONTHLY,
-	ADD_ON_UNLIMITED_THEMES,
-	STORAGE_LIMIT,
-} from '../constants';
-import customDesignIcon from '../icons/custom-design';
-import jetpackAIIcon from '../icons/jetpack-ai';
-import spaceUpgradeIcon from '../icons/space-upgrade';
-import unlimitedThemesIcon from '../icons/unlimited-themes';
-import isStorageAddonEnabled from '../lib/is-storage-addon-enabled';
+import { getAddOnsList } from '../add-ons-list';
 import useAddOnCheckoutLink from './use-add-on-checkout-link';
-import useAddOnDisplayCost from './use-add-on-display-cost';
-import useAddOnPrices from './use-add-on-prices';
+import { createAddOnPriceKey, useAddOnPrices } from './use-add-on-prices';
 import type { AddOnMeta } from '../types';
 
-const useActiveAddOnsDefs = ( selectedSiteId: Props[ 'selectedSiteId' ] ) => {
-	const translate = useTranslate();
-	const checkoutLink = useAddOnCheckoutLink();
-
-	/*
-	 * TODO: `useAddOnDisplayCost` be refactored instead to return an index of `{ [ slug ]: "display cost" }`
-	 */
-	const displayCostJetpackAIMonthly = useAddOnDisplayCost( PRODUCT_JETPACK_AI_MONTHLY );
-	const displayCostUnlimitedThemes = useAddOnDisplayCost( PRODUCT_WPCOM_UNLIMITED_THEMES );
-	const displayCostCustomDesign = useAddOnDisplayCost( PRODUCT_WPCOM_CUSTOM_DESIGN );
-	const displayCost1GBSpace50 = useAddOnDisplayCost( PRODUCT_1GB_SPACE, 50 );
-	const displayCost1GBSpace100 = useAddOnDisplayCost( PRODUCT_1GB_SPACE, 100 );
-
-	/*
-	 * TODO: `useAddOnPrices` be refactored instead to return an index of `{ [ slug ]: AddOnPrice }`
-	 */
-	const addOnPrices1GBSpace50 = useAddOnPrices( PRODUCT_1GB_SPACE, 50 );
-	const addOnPrices1GBSpace100 = useAddOnPrices( PRODUCT_1GB_SPACE, 100 );
-
-	return useMemo(
-		() =>
-			[
-				{
-					addOnSlug: ADD_ON_JETPACK_AI_MONTHLY,
-					productSlug: PRODUCT_JETPACK_AI_MONTHLY,
-					featureSlugs: null,
-					icon: jetpackAIIcon,
-					overrides: null,
-					displayCost: displayCostJetpackAIMonthly,
-					featured: true,
-					description: translate(
-						'Elevate your content with Jetpack AI, your AI assistant in the WordPress Editor. Save time writing with effortless content crafting, tone adjustment, title generation, grammar checks, translation, and more.'
-					),
-					name: undefined,
-				},
-				{
-					addOnSlug: ADD_ON_UNLIMITED_THEMES,
-					productSlug: PRODUCT_WPCOM_UNLIMITED_THEMES,
-					featureSlugs: [ WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED ] as string[],
-					icon: unlimitedThemesIcon,
-					overrides: null,
-					displayCost: displayCostUnlimitedThemes,
-					featured: true,
-					name: undefined,
-					description: undefined,
-				},
-				{
-					addOnSlug: ADD_ON_CUSTOM_DESIGN,
-					productSlug: PRODUCT_WPCOM_CUSTOM_DESIGN,
-					featureSlugs: [ WPCOM_FEATURES_CUSTOM_DESIGN ] as string[],
-					icon: customDesignIcon,
-					overrides: null,
-					displayCost: displayCostCustomDesign,
-					featured: false,
-					name: undefined,
-					description: undefined,
-				},
-				{
-					addOnSlug: ADD_ON_50GB_STORAGE,
-					productSlug: PRODUCT_1GB_SPACE,
-					featureSlugs: null,
-					icon: spaceUpgradeIcon,
-					quantity: 50,
-					name: translate( '50 GB Storage' ),
-					displayCost: displayCost1GBSpace50,
-					prices: addOnPrices1GBSpace50,
-					description: translate(
-						'Make more space for high-quality photos, videos, and other media. '
-					),
-					featured: false,
-					purchased: false,
-					checkoutLink: checkoutLink( selectedSiteId ?? null, PRODUCT_1GB_SPACE, 50 ),
-				},
-				{
-					addOnSlug: ADD_ON_100GB_STORAGE,
-					productSlug: PRODUCT_1GB_SPACE,
-					featureSlugs: null,
-					icon: spaceUpgradeIcon,
-					quantity: 100,
-					name: translate( '100 GB Storage' ),
-					displayCost: displayCost1GBSpace100,
-					prices: addOnPrices1GBSpace100,
-					description: translate(
-						'Take your site to the next level. Store all your media in one place without worrying about running out of space.'
-					),
-					featured: false,
-					purchased: false,
-					checkoutLink: checkoutLink( selectedSiteId ?? null, PRODUCT_1GB_SPACE, 100 ),
-				},
-			] as const,
-		[
-			addOnPrices1GBSpace100,
-			addOnPrices1GBSpace50,
-			checkoutLink,
-			displayCost1GBSpace100,
-			displayCost1GBSpace50,
-			displayCostCustomDesign,
-			displayCostJetpackAIMonthly,
-			displayCostUnlimitedThemes,
-			selectedSiteId,
-			translate,
-		]
-	);
-};
-
 interface Props {
 	selectedSiteId?: number | null | undefined;
-	enableStorageAddOns?: boolean;
 }
 
-const useAddOns = ( {
-	selectedSiteId,
-	enableStorageAddOns,
-}: Props = {} ): ( AddOnMeta | null )[] => {
-	const activeAddOns = useActiveAddOnsDefs( selectedSiteId );
-	const productSlugs = activeAddOns.map( ( item ) => item.productSlug );
+const useAddOns = ( { selectedSiteId }: Props = {} ): ( AddOnMeta | null )[] => {
+	const translate = useTranslate();
+	const checkoutLink = useAddOnCheckoutLink();
+	const addOns = getAddOnsList();
+	const addOnPrices = useAddOnPrices( addOns );
+	const productSlugs = addOns.map( ( item ) => item.productSlug );
 	const productsList = ProductsList.useProducts( productSlugs );
 	const mediaStorage = Site.useSiteMediaStorage( { siteIdOrSlug: selectedSiteId } );
-	const siteFeatures = Site.useSiteFeatures( { siteIdOrSlug: selectedSiteId } );
-	const sitePurchases = Purchases.useSitePurchases( { siteId: selectedSiteId } );
-	const spaceUpgradesPurchased = Purchases.useSitePurchasesByProductSlug( {
-		siteId: selectedSiteId,
-		productSlug: PRODUCT_1GB_SPACE,
-	} );
 
 	return useMemo(
 		() =>
-			activeAddOns
-				.filter( ( addOn ) => {
-					/**
-					 * Remove the Jetpack AI add-on if the site already supports the feature.
-					 * TODO: Potentially another candidate for migrating to `use-add-on-purchase-status`.
-					 * The intention is to have a single source of truth. The add-on can be removed from display
-					 * instead with an appropriate flag, but kept in list of add-ons.
-					 */
-					if (
-						addOn.productSlug === PRODUCT_JETPACK_AI_MONTHLY &&
-						siteFeatures.data?.active?.includes( WPCOM_FEATURES_AI_ASSISTANT )
-					) {
-						return false;
-					}
-
-					return true;
-				} )
-				.map( ( addOn ) => {
-					const product = productsList.data?.[ addOn.productSlug ];
-					const name = addOn.name ? addOn.name : product?.name || '';
-					const description = addOn.description ?? ( product?.description || '' );
-
-					/**
-					 * If siteFeatures, sitePurchases, or productsList are still loading, show the add-on as loading.
-					 * TODO: Potentially another candidate for migrating to `use-add-on-purchase-status`, and attach
-					 * that to the add-on's meta if need to.
-					 */
-					if ( siteFeatures.isLoading || sitePurchases.isLoading || productsList.isLoading ) {
-						return {
-							...addOn,
-							name,
-							description,
-							isLoading: true,
-						};
-					}
-
-					/**
-					 * If the product is not found in the products list, remove the add-on.
-					 * This should signal a wrong slug or a product that doesn't exist i.e. some sort of Bug.
-					 * (not sure if add-on without a connected product is a valid use case)
-					 */
-					if ( ! product ) {
-						return null;
-					}
+			addOns.map( ( addOnMeta ) => {
+				const { productSlug, quantity } = addOnMeta;
+				const key = createAddOnPriceKey( addOnMeta );
 
-					/**
-					 * If it's a storage add-on.
-					 */
-					if ( addOn.productSlug === PRODUCT_1GB_SPACE ) {
-						// if storage add-ons are not enabled in the config or disabled via hook prop, remove them
-						if (
-							( 'boolean' === typeof enableStorageAddOns && ! enableStorageAddOns ) ||
-							( ! isStorageAddonEnabled() && 'boolean' !== typeof enableStorageAddOns )
-						) {
-							return null;
-						}
+				// TODO: can we not specify the product slug here for the storage add-on?
+				const isLoading =
+					productsList.isLoading || ( productSlug === PRODUCT_1GB_SPACE && mediaStorage.isLoading );
+				const product = productsList.data?.[ productSlug ];
+				const name = addOnMeta.name ? addOnMeta.name : product?.name || '';
+				const description = addOnMeta.description ?? ( product?.description || '' );
 
-						/**
-						 * If storage add-on is already purchased.
-						 * TODO: Consider migrating this part to `use-add-on-purchase-status` and attach
-						 * that to the add-on's meta if need to. The intention is to have a single source of truth.
-						 */
-						const isStorageAddOnPurchased = Object.values( spaceUpgradesPurchased ?? [] ).some(
-							( purchase ) => purchase.purchaseRenewalQuantity === addOn.quantity
-						);
-						if ( isStorageAddOnPurchased ) {
-							return {
-								...addOn,
-								name,
-								description,
-								purchased: true,
-							};
-						}
+				/**
+				 * If the product is not found in the products list, remove the add-on.
+				 * This should signal a wrong slug or a product that doesn't exist i.e. some sort of Bug.
+				 * (not sure if add-on without a connected product is a valid use case)
+				 */
+				if ( ! product ) {
+					return null;
+				}
 
-						/**
-						 * If the current storage add-on option is greater than the available upgrade.
-						 * TODO: This is also potentially a candidate for `use-add-on-purchase-status`.
-						 */
-						const currentMaxStorage = mediaStorage.data?.maxStorageBytes
-							? mediaStorage.data.maxStorageBytes / Math.pow( 1024, 3 )
-							: 0;
-						const availableStorageUpgrade = STORAGE_LIMIT - currentMaxStorage;
-						if ( ( addOn.quantity ?? 0 ) > availableStorageUpgrade ) {
-							return {
-								...addOn,
-								name,
-								description,
-								exceedsSiteStorageLimits: true,
-							};
-						}
-					}
+				const prices = addOnPrices[ key ];
+				const formattedCost = prices?.formattedMonthlyPrice || '';
+				const displayCost =
+					product.term === 'month'
+						? /* Translators: %(formattedCost)s: monthly price formatted with currency */
+						  translate( '%(formattedCost)s/month, billed monthly', {
+								args: {
+									formattedCost,
+								},
+						  } )
+						: /* Translators: %(monthlyCost)s: monthly price formatted with currency */
+						  translate( '%(monthlyCost)s/month, billed yearly', {
+								args: {
+									monthlyCost: formattedCost,
+								},
+						  } );
 
-					/**
-					 * Regular product add-ons.
-					 */
-					return {
-						...addOn,
-						name,
-						description,
-					};
-				} ),
-		[
-			activeAddOns,
-			enableStorageAddOns,
-			mediaStorage.data?.maxStorageBytes,
-			productsList.data,
-			productsList.isLoading,
-			siteFeatures.data?.active,
-			siteFeatures.isLoading,
-			sitePurchases.isLoading,
-			spaceUpgradesPurchased,
-		]
+				return {
+					...addOnMeta,
+					name,
+					description,
+					isLoading,
+					prices,
+					displayCost,
+					checkoutLink: checkoutLink( selectedSiteId ?? null, productSlug, quantity ),
+				};
+			} ),
+		[ addOnPrices, productsList.data, productsList.isLoading, checkoutLink, selectedSiteId ]
 	);
 };