@automattic/data-stores 3.0.0 → 3.1.0-rc.1

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

@@ -0,0 +1,68 @@
+import formatCurrency from '@automattic/format-currency';
+import { useMemo } from '@wordpress/element';
+import * as ProductsList from '../../products-list';
+
+const useAddOnPrices = ( productSlug: ProductsList.StoreProductSlug, quantity?: number ) => {
+	const productsList = ProductsList.useProducts( [ productSlug ] );
+	const product = productsList.data?.[ productSlug ];
+
+	return useMemo( () => {
+		let cost = product?.costSmallestUnit;
+
+		if ( ! cost || ! product?.currencyCode ) {
+			return null;
+		}
+
+		// 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;
+		}
+
+		// 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;
+
+		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 ] );
+};
+
+export default useAddOnPrices;

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

@@ -0,0 +1,43 @@
+import { 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;
+}
+
+/**
+ * Returns whether add-on product has been purchased or included in site plan.
+ */
+const useAddOnPurchaseStatus = ( { addOnMeta, selectedSiteId }: Props ) => {
+	const translate = useTranslate();
+	const matchingPurchases = Purchases.useSitePurchasesByProductSlug( {
+		siteId: selectedSiteId,
+		productSlug: addOnMeta.productSlug,
+	} );
+	const siteFeatures = Site.useSiteFeatures( { siteIdOrSlug: selectedSiteId } );
+	const isSiteFeature = addOnMeta.featureSlugs?.find(
+		( 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.
+	 */
+
+	if ( matchingPurchases ) {
+		return { available: false, text: translate( 'Purchased' ) };
+	}
+
+	if ( isSiteFeature ) {
+		return { available: false, text: translate( 'Included in your plan' ) };
+	}
+
+	return { available: true };
+};
+
+export default useAddOnPurchaseStatus;

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

@@ -0,0 +1,275 @@
+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 { 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 useAddOnCheckoutLink from './use-add-on-checkout-link';
+import useAddOnDisplayCost from './use-add-on-display-cost';
+import 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 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;
+					}
+
+					/**
+					 * 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;
+						}
+
+						/**
+						 * 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 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,
+							};
+						}
+					}
+
+					/**
+					 * 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,
+		]
+	);
+};
+
+export default useAddOns;

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

@@ -0,0 +1,38 @@
+import { useMemo } from '@wordpress/element';
+import { useSiteMediaStorage } from '../../site';
+import { STORAGE_LIMIT } from '../constants';
+import useStorageAddOns from './use-storage-add-ons';
+
+interface Props {
+	siteId?: number | null;
+}
+
+/**
+ * Returns the storage add-ons that are available for purchase considering the current site when present.
+ * Conditions:
+ * - If the user has not purchased the storage add-on.
+ * - If the storage add-on does not exceed the site storage limits.
+ * - If the quantity of the storage add-on is less than or equal to the available storage upgrade.
+ */
+const useAvailableStorageAddOns = ( { siteId }: Props ) => {
+	const storageAddOns = useStorageAddOns( { siteId } );
+	const siteMediaStorage = useSiteMediaStorage( { siteIdOrSlug: siteId } );
+	const currentMaxStorage = siteMediaStorage.data?.maxStorageBytes
+		? siteMediaStorage.data.maxStorageBytes / Math.pow( 1024, 3 )
+		: 0;
+	const availableStorageUpgrade = STORAGE_LIMIT - currentMaxStorage;
+
+	return useMemo( () => {
+		const availableStorageAddOns = storageAddOns.filter( ( addOn ) =>
+			addOn
+				? ! addOn.purchased &&
+				  ! addOn.exceedsSiteStorageLimits &&
+				  ( addOn.quantity ?? 0 ) <= availableStorageUpgrade
+				: false
+		);
+
+		return availableStorageAddOns?.length ? availableStorageAddOns : null;
+	}, [ availableStorageUpgrade, storageAddOns ] );
+};
+
+export default useAvailableStorageAddOns;

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

@@ -0,0 +1,18 @@
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
+import { useMemo } from '@wordpress/element';
+import useAddOns from './use-add-ons';
+
+interface Props {
+	siteId?: number | null;
+}
+
+const useStorageAddOns = ( { siteId }: Props ) => {
+	const addOns = useAddOns( { selectedSiteId: siteId } );
+
+	return useMemo(
+		() => addOns.filter( ( addOn ) => addOn?.productSlug === PRODUCT_1GB_SPACE ),
+		[ addOns ]
+	);
+};
+
+export default useStorageAddOns;

package/src/add-ons/icons/custom-design.tsx

@@ -0,0 +1,20 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+const customDesign = (
+	<SVG width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M0 6.44C0 4.16204 0 3.02306 0.450346 2.1561C0.829848 1.42553 1.42553 0.829848 2.1561 0.450346C3.02306 0 4.16204 0 6.44 0H37.56C39.838 0 40.9769 0 41.8439 0.450346C42.5745 0.829848 43.1702 1.42553 43.5497 2.1561C44 3.02306 44 4.16204 44 6.44V37.56C44 39.838 44 40.9769 43.5497 41.8439C43.1702 42.5745 42.5745 43.1702 41.8439 43.5497C40.9769 44 39.838 44 37.56 44H6.44C4.16204 44 3.02306 44 2.1561 43.5497C1.42553 43.1702 0.829848 42.5745 0.450346 41.8439C0 40.9769 0 39.838 0 37.56V6.44Z"
+			fill="#E9EFF5"
+		/>
+		<Path
+			d="M26 27L30.2942 22.6902C30.684 22.299 30.6828 21.6658 30.2916 21.276L26 17"
+			fill="#0675C4"
+		/>
+		<Path
+			d="M18 27L13.7058 22.6902C13.316 22.299 13.3172 21.6658 13.7084 21.276L18 17"
+			fill="#0675C4"
+		/>
+	</SVG>
+);
+
+export default customDesign;

package/src/add-ons/icons/jetpack-ai.tsx

@@ -0,0 +1,24 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+const jetpackAI = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
+		<Path
+			d="M0 6.44C0 4.16204 0 3.02306 0.450346 2.1561C0.829848 1.42553 1.42553 0.829848 2.1561 0.450346C3.02306 0 4.16204 0 6.44 0H37.56C39.838 0 40.9769 0 41.8439 0.450346C42.5745 0.829848 43.1702 1.42553 43.5497 2.1561C44 3.02306 44 4.16204 44 6.44V37.56C44 39.838 44 40.9769 43.5497 41.8439C43.1702 42.5745 42.5745 43.1702 41.8439 43.5497C40.9769 44 39.838 44 37.56 44H6.44C4.16204 44 3.02306 44 2.1561 43.5497C1.42553 43.1702 0.829848 42.5745 0.450346 41.8439C0 40.9769 0 39.838 0 37.56V6.44Z"
+			fill="#E9EFF5"
+		/>
+		<Path
+			d="M14.4999 9L15.7727 12.2272L18.9999 13.4999L15.7727 14.7727L14.4999 17.9999L13.2272 14.7727L10 13.4999L13.2272 12.2272L14.4999 9Z"
+			fill="#0675C4"
+		/>
+		<Path
+			d="M27.9999 9L29.6969 13.3029L33.9998 14.9999L29.6969 16.6969L27.9999 20.9998L26.3029 16.6969L22 14.9999L26.3029 13.3029L27.9999 9Z"
+			fill="#0675C4"
+		/>
+		<Path
+			d="M20.4999 17.9998L22.6212 23.3784L27.9998 25.4996L22.6212 27.6209L20.4999 32.9995L18.3786 27.6209L13 25.4996L18.3786 23.3784L20.4999 17.9998Z"
+			fill="#0675C4"
+		/>
+	</SVG>
+);
+
+export default jetpackAI;

package/src/add-ons/icons/jetpack-stats.tsx

@@ -0,0 +1,19 @@
+// Slightly modified version of 'calypso/assets/images/jetpack/jetpack-product-icon-stats.svg'.
+// Now includes a rounded rectangle background.
+
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M0 6.44C0 4.16204 0 3.02306 0.450346 2.1561C0.829848 1.42553 1.42553 0.829848 2.1561 0.450346C3.02306 0 4.16204 0 6.44 0H37.56C39.838 0 40.9769 0 41.8439 0.450346C42.5745 0.829848 43.1702 1.42553 43.5497 2.1561C44 3.02306 44 4.16204 44 6.44V37.56C44 39.838 44 40.9769 43.5497 41.8439C43.1702 42.5745 42.5745 43.1702 41.8439 43.5497C40.9769 44 39.838 44 37.56 44H6.44C4.16204 44 3.02306 44 2.1561 43.5497C1.42553 43.1702 0.829848 42.5745 0.450346 41.8439C0 40.9769 0 39.838 0 37.56V6.44Z"
+			fill="#E9EFF5"
+		/>
+		<Path d="M21.25 15H22.75V30H21.25V15Z" fill="#0675C4" />
+		<Path d="M16 20H17.5V30H16V20Z" fill="#0675C4" />
+		<Path d="M28 24H26.5V30H28V24Z" fill="#0675C4" />
+		<Path d="M22.25 15H23.75V30H22.25V15Z" fill="#0675C4" />
+		<Path d="M17 20H18.5V30H17V20Z" fill="#0675C4" />
+		<Path d="M29 24H27.5V30H29V24Z" fill="#0675C4" />
+	</SVG>
+);

package/src/add-ons/icons/space-upgrade.tsx

@@ -0,0 +1,18 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+const spaceUpgrade = (
+	<SVG width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M0 6.44C0 4.16204 0 3.02306 0.450346 2.1561C0.829848 1.42553 1.42553 0.829848 2.1561 0.450346C3.02306 0 4.16204 0 6.44 0H37.56C39.838 0 40.9769 0 41.8439 0.450346C42.5745 0.829848 43.1702 1.42553 43.5497 2.1561C44 3.02306 44 4.16204 44 6.44V37.56C44 39.838 44 40.9769 43.5497 41.8439C43.1702 42.5745 42.5745 43.1702 41.8439 43.5497C40.9769 44 39.838 44 37.56 44H6.44C4.16204 44 3.02306 44 2.1561 43.5497C1.42553 43.1702 0.829848 42.5745 0.450346 41.8439C0 40.9769 0 39.838 0 37.56V6.44Z"
+			fill="#E9EFF5"
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M16.5116 17.9597C16.4451 17.957 16.3783 17.9556 16.3111 17.9556C13.562 17.9556 11.3334 20.2539 11.3334 23.0889C11.3334 25.924 13.562 28.2223 16.3111 28.2223L16.3408 28.2221H28.3759L28.3995 28.2223C30.7559 28.2223 32.6662 26.2523 32.6662 23.8223C32.6662 21.6421 31.1287 19.8323 29.1108 19.4831L29.1111 19.4223C29.1111 16.1823 26.2458 13.5557 22.7111 13.5557C19.7274 13.5557 17.2206 15.4273 16.5116 17.9597C16.5116 17.9597 16.5116 17.9597 16.5116 17.9597ZM27.0922 21.1635L27.111 19.4609L27.1111 19.4223C27.1111 17.4471 25.3086 15.5557 22.7111 15.5557C20.5415 15.5557 18.8831 16.9074 18.4376 18.4989L18.011 20.0227L16.43 19.958C16.3907 19.9564 16.3511 19.9556 16.3111 19.9556C14.7241 19.9556 13.3334 21.3 13.3334 23.0889C13.3334 24.876 14.7212 26.2194 16.3061 26.2223L16.3348 26.2221H28.3872L28.3995 26.2223C29.5938 26.2223 30.6662 25.2061 30.6662 23.8223C30.6662 22.5872 29.8016 21.6324 28.7698 21.4539L27.0922 21.1635Z"
+			fill="#0675C4"
+		/>
+	</SVG>
+);
+
+export default spaceUpgrade;

package/src/add-ons/icons/unlimited-themes.tsx

@@ -0,0 +1,21 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+const unlimitedThemes = (
+	<SVG width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M0 6.44C0 4.16204 0 3.02306 0.450346 2.1561C0.829848 1.42553 1.42553 0.829848 2.1561 0.450346C3.02306 0 4.16204 0 6.44 0H37.56C39.838 0 40.9769 0 41.8439 0.450346C42.5745 0.829848 43.1702 1.42553 43.5497 2.1561C44 3.02306 44 4.16204 44 6.44V37.56C44 39.838 44 40.9769 43.5497 41.8439C43.1702 42.5745 42.5745 43.1702 41.8439 43.5497C40.9769 44 39.838 44 37.56 44H6.44C4.16204 44 3.02306 44 2.1561 43.5497C1.42553 43.1702 0.829848 42.5745 0.450346 41.8439C0 40.9769 0 39.838 0 37.56V6.44Z"
+			fill="#E9EFF5"
+		/>
+		<Path d="M11.3333 31.9167, L21.9999 31.9167" stroke="#0675C4" strokeWidth="1.5" />
+		<Path
+			d="M21.1243 23.8018L31.2452 13.5665C32.0278 12.7751 32.0064 11.4899 31.2066 10.7159C30.419 9.95372 29.1574 9.96042 28.3866 10.7396L17.8223 21.4193L21.1243 23.8018Z"
+			fill="#0675C4"
+		/>
+		<Path
+			d="M14 28L13.3428 27.6386L12.7315 28.75H14V28ZM14.6572 28.3615C14.771 28.1544 14.8833 27.9815 15.0277 27.7486C15.1684 27.5213 15.323 27.2624 15.4873 26.9291C15.8158 26.2625 16.1642 25.3375 16.5622 23.7804L15.109 23.4088C14.7269 24.9034 14.4098 25.7222 14.1418 26.2659C14.0078 26.5378 13.8813 26.7507 13.7525 26.9587C13.6272 27.1609 13.4814 27.3867 13.3428 27.6386L14.6572 28.3615ZM16.5622 23.7804C16.7297 23.1254 16.9851 22.7308 17.2391 22.4943C17.4901 22.2605 17.7797 22.1436 18.0867 22.1083C18.7444 22.0326 19.4388 22.3387 19.7566 22.6565L20.8172 21.5958C20.1943 20.9728 19.0531 20.4873 17.9153 20.6181C17.3246 20.6861 16.7265 20.9219 16.2168 21.3966C15.71 21.8685 15.3316 22.5379 15.109 23.4088L16.5622 23.7804ZM19.7566 22.6565C20.33 23.2298 20.4426 24.7912 19.1458 25.773L20.0513 26.9689C21.9669 25.5185 22.1253 22.9039 20.8172 21.5958L19.7566 22.6565ZM19.1458 25.773C17.712 26.8586 16.1012 27.25 14 27.25V28.75C16.3042 28.75 18.2728 28.3154 20.0513 26.9689L19.1458 25.773Z"
+			fill="#0675C4"
+		/>
+	</SVG>
+);
+
+export default unlimitedThemes;

package/src/add-ons/index.ts

@@ -0,0 +1,10 @@
+/** Hooks/Selectors */
+export { default as useAddOns } from './hooks/use-add-ons';
+export { default as useAddOnCheckoutLink } from './hooks/use-add-on-checkout-link';
+export { default as useAddOnPurchaseStatus } from './hooks/use-add-on-purchase-status';
+export { default as useStorageAddOns } from './hooks/use-storage-add-ons';
+export { default as useAvailableStorageAddOns } from './hooks/use-available-storage-add-ons';
+export * from './constants';
+
+/** Types */
+export * from './types';

package/src/add-ons/lib/is-storage-addon-enabled.ts

@@ -0,0 +1,9 @@
+import config from '@automattic/calypso-config';
+
+/**
+ * Is the storage addon (space upgrade) available, based on config flag vs. environment.
+ * @returns {boolean} - Whether or not the storage addon is available
+ */
+const isStorageAddonEnabled = (): boolean => !! config.isEnabled( 'storage-addon' );
+
+export default isStorageAddonEnabled;

package/src/add-ons/types.ts

@@ -0,0 +1,28 @@
+import { TranslateResult } from 'i18n-calypso';
+import { STORAGE_ADD_ONS, ADD_ONS } from './constants';
+import type { StoreProductSlug } from '../products-list';
+
+export interface AddOnMeta {
+	addOnSlug: AddOnSlug;
+	productSlug: StoreProductSlug;
+	featureSlugs?: string[] | null;
+	icon: JSX.Element;
+	featured?: boolean; // used to display the popular badge in the add-ons grid
+	name: string | null;
+	quantity?: number; // used for determining checkout costs for quantity based products
+	description: string | null;
+	displayCost: TranslateResult | null;
+	purchased?: boolean;
+	isLoading?: boolean;
+	prices?: {
+		monthlyPrice: number;
+		yearlyPrice: number;
+		formattedMonthlyPrice: string;
+		formattedYearlyPrice: string;
+	} | null;
+	checkoutLink?: string;
+	exceedsSiteStorageLimits?: boolean;
+}
+
+export type AddOnSlug = ( typeof ADD_ONS )[ number ];
+export type StorageAddOnSlug = ( typeof STORAGE_ADD_ONS )[ number ];

package/src/analyzer/actions.ts

@@ -0,0 +1,50 @@
+import { wpcomRequest } from '../wpcom-request-controls';
+import { AnalyzeColorsResponse } from './types';
+
+export function createActions() {
+	const colorsAnalyzeStart = ( url: string ) => ( {
+		type: 'COLORS_ANALYZE_START' as const,
+		url,
+	} );
+
+	const colorsAnalyzeSuccess = ( url: string, data: AnalyzeColorsResponse ) => ( {
+		type: 'COLORS_ANALYZE_SUCCESS' as const,
+		data: { url, colors: data.colors },
+	} );
+
+	const colorsAnalyzeFailed = ( url: string ) => ( {
+		type: 'COLORS_ANALYZE_FAILED' as const,
+		url,
+	} );
+
+	function* analyzeColors( url: string ) {
+		yield colorsAnalyzeStart( url );
+
+		try {
+			const data: AnalyzeColorsResponse = yield wpcomRequest( {
+				path: '/imports/url-analyzer/colors/?url=' + encodeURIComponent( url ),
+				apiNamespace: 'wpcom/v2',
+				apiVersion: '2',
+			} );
+
+			yield colorsAnalyzeSuccess( url, data );
+		} catch ( err ) {
+			yield colorsAnalyzeFailed( url );
+		}
+	}
+
+	return {
+		colorsAnalyzeStart,
+		colorsAnalyzeSuccess,
+		colorsAnalyzeFailed,
+		analyzeColors,
+	};
+}
+
+export type ActionCreators = ReturnType< typeof createActions >;
+
+export type Action = ReturnType<
+	| ActionCreators[ 'colorsAnalyzeStart' ]
+	| ActionCreators[ 'colorsAnalyzeSuccess' ]
+	| ActionCreators[ 'colorsAnalyzeFailed' ]
+>;

package/src/analyzer/constants.ts

@@ -0,0 +1 @@
+export const STORE_KEY = 'automattic/analyzer';

package/src/analyzer/index.ts

@@ -0,0 +1,17 @@
+import { register, createReduxStore } from '@wordpress/data';
+import { controls } from '../wpcom-request-controls';
+import { createActions } from './actions';
+import { STORE_KEY } from './constants';
+import reducer, { State } from './reducers';
+import * as selectors from './selectors';
+export * from './types';
+export type { State };
+
+export const store = createReduxStore( STORE_KEY, {
+	actions: createActions(),
+	controls: controls,
+	reducer: reducer,
+	selectors,
+} );
+
+register( store );