@automattic/data-stores 3.1.0 → 3.1.2

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

@@ -1,38 +1,48 @@
 import { useMemo } from '@wordpress/element';
-import { useSiteMediaStorage } from '../../site';
+import { SiteMediaStorage, useSiteMediaStorage } from '../../site';
 import { STORAGE_LIMIT } from '../constants';
+import { AddOnMeta } from '../types';
 import useStorageAddOns from './use-storage-add-ons';
 
 interface Props {
 	siteId?: number | null;
 }
 
+/**
+ * Check if the quantity for a storage add-on is available for purchase.
+ * @param quantity The number of gigabytes the given add-on adds to the site's storage
+ * @param storage Data returned from
+ */
+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 isWithinStorageLimit = STORAGE_LIMIT >= currentMaxStorage - existingAddOnStorage + quantity;
+
+	return existingAddOnStorage < quantity && isWithinStorageLimit;
+}
+
 /**
  * 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 useAvailableStorageAddOns = ( { siteId }: Props ): AddOnMeta[] => {
 	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
-		);
+		const nonNullAddOns = storageAddOns.filter( ( addOn ): addOn is AddOnMeta => addOn !== null );
+		const siteMediaStorageData = siteMediaStorage.data;
 
-		return availableStorageAddOns?.length ? availableStorageAddOns : null;
-	}, [ availableStorageUpgrade, storageAddOns ] );
+		if ( ! siteMediaStorageData ) {
+			return nonNullAddOns;
+		}
+
+		return nonNullAddOns.filter( ( addOn ) =>
+			isStorageQuantityAvailable( addOn?.quantity ?? 0, siteMediaStorageData )
+		);
+	}, [ siteMediaStorage.data, storageAddOns ] );
 };
 
 export default useAvailableStorageAddOns;

package/src/add-ons/hooks/use-get-purchased-storage-add-on.ts

@@ -0,0 +1,24 @@
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
+import * as Purchases from '../../purchases';
+import useStorageAddOns from './use-storage-add-ons';
+import type { AddOnMeta } from '../..';
+
+export default function useGetPurchasedStorageAddOn( {
+	siteId,
+}: {
+	siteId?: number | null;
+} ): AddOnMeta | null {
+	const storageAddOns = useStorageAddOns( { siteId } );
+	const matchingPurchases = Purchases.useSitePurchasesByProductSlug( {
+		siteId,
+		productSlug: PRODUCT_1GB_SPACE,
+	} );
+
+	if ( ! matchingPurchases ) {
+		return null;
+	}
+
+	const purchase: Purchases.Purchase = Object.values( matchingPurchases )[ 0 ];
+	const storageAddOnQuantity = purchase.purchaseRenewalQuantity;
+	return storageAddOns.find( ( addOn ) => addOn?.quantity === storageAddOnQuantity ) ?? null;
+}

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

@@ -0,0 +1,38 @@
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
+import { useSiteMediaStorage } from '../../site';
+import { AddOnMeta } from '../types';
+import { isStorageQuantityAvailable } from './use-available-storage-add-ons';
+
+interface Props {
+	addOnMeta: AddOnMeta;
+	selectedSiteId?: number | null;
+}
+
+export enum StorageAddOnAvailability {
+	NotAStorageAddOn,
+	DataLoading,
+	Unavailable,
+	Available,
+}
+
+/**
+ * Check if an add-on is a storage add-on, and if so, if the quantity is available for purchase.
+ */
+export default function useStorageAddOnAvailability( {
+	addOnMeta,
+	selectedSiteId,
+}: Props ): StorageAddOnAvailability {
+	const mediaStorage = useSiteMediaStorage( { siteIdOrSlug: selectedSiteId } );
+
+	if ( addOnMeta.productSlug !== PRODUCT_1GB_SPACE ) {
+		return StorageAddOnAvailability.NotAStorageAddOn;
+	}
+
+	if ( ! mediaStorage.data ) {
+		return StorageAddOnAvailability.DataLoading;
+	}
+
+	return isStorageQuantityAvailable( addOnMeta.quantity ?? 0, mediaStorage.data )
+		? StorageAddOnAvailability.Available
+		: StorageAddOnAvailability.Unavailable;
+}

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

@@ -1,18 +1,10 @@
 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">
+	<SVG width="24" height="24" viewBox="0 0 24 24" 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"
+			d="M20.8008 11.2004L16.5008 6.90039L15.4008 8.00039L19.7008 12.3004C19.8008 12.4004 19.8008 12.6004 19.7008 12.7004L15.4008 17.0004L16.5008 18.1004L20.8008 13.8004C21.5008 13.0004 21.5008 11.9004 20.8008 11.2004ZM4.20078 12.3004L8.50078 8.00039L7.50078 7.00039L3.20078 11.3004C2.50078 12.0004 2.50078 13.1004 3.20078 13.8004L7.50078 18.1004L8.60078 17.0004L4.30078 12.7004C4.10078 12.6004 4.10078 12.4004 4.20078 12.3004Z"
+			fill="#3858E9"
 		/>
 	</SVG>
 );

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

@@ -1,19 +1,10 @@
 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">
+	<SVG width="24" height="24" viewBox="0 0 24 24" 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"
+			d="M4 20.5008H12V19.0008H4V20.5008ZM18.9 4.00078C18.3 3.40078 17.4 3.40078 16.8 4.00078L9.6 11.2008C9.2 11.1008 8.9 11.2008 8.5 11.3008C8 11.5008 7 12.0008 6.6 13.5008C6.2 15.2008 5.8 15.7008 5.5 16.2008C5.4 16.3008 5.3 16.5008 5.2 16.6008L4.6 17.7008H6C8 17.7008 9.4 17.3008 10.7 16.3008C11.5 15.7008 11.9 14.9008 12 14.0008C12 13.7008 12 13.5008 11.9 13.3008L19 6.20078C19.5 5.60078 19.5 4.60078 18.9 4.00078ZM9.7 15.2008C9 15.7008 8.2 16.0008 7.3 16.2008C7.5 15.7008 7.8 15.0008 8.1 13.9008C8.3 13.3008 8.5 12.9008 8.9 12.8008C9.4 12.7008 9.9 12.9008 10.2 13.1008C10.4 13.3008 10.5 13.6008 10.4 13.9008C10.4 14.2008 10.3 14.8008 9.7 15.2008Z"
+			fill="#3858E9"
 		/>
 	</SVG>
 );

package/src/add-ons/index.ts

@@ -4,6 +4,11 @@ export { default as useAddOnCheckoutLink } from './hooks/use-add-on-checkout-lin
 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 {
+	default as useStorageAddOnAvailability,
+	StorageAddOnAvailability,
+} from './hooks/use-storage-add-on-availability';
+export { default as useGetPurchasedStorageAddOn } from './hooks/use-get-purchased-storage-add-on';
 export * from './constants';
 
 /** Types */

package/src/add-ons/mocks.ts

@@ -0,0 +1,29 @@
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
+import { ADD_ON_50GB_STORAGE } from './constants';
+import spaceUpgradeIcon from './icons/space-upgrade';
+import type { AddOnMeta } from './types';
+
+const STORAGE_ADD_ONS_MOCK: AddOnMeta[] = [
+	{
+		addOnSlug: ADD_ON_50GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 50,
+		name: '50 GB Storage',
+		displayCost: '50',
+		prices: {
+			monthlyPrice: 10,
+			yearlyPrice: 120,
+			formattedMonthlyPrice: 'USD10',
+			formattedYearlyPrice: 'USD120',
+			currencyCode: 'USD',
+		},
+		description: 'Make more space for high-quality photos, videos, and other media. ',
+		featured: false,
+		purchased: false,
+		checkoutLink: 'checkout:storage-50gb',
+	},
+];
+
+export { STORAGE_ADD_ONS_MOCK };

package/src/add-ons/types.ts

@@ -6,12 +6,11 @@ export interface AddOnMeta {
 	addOnSlug: AddOnSlug;
 	productSlug: StoreProductSlug;
 	featureSlugs?: string[] | null;
-	icon: JSX.Element;
+	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;
+	name?: TranslateResult; // when the name is optional, it will be filled by the product list data
+	description?: TranslateResult; // same as the above.
+	displayCost?: TranslateResult;
 	purchased?: boolean;
 	isLoading?: boolean;
 	prices?: {
@@ -19,9 +18,10 @@ export interface AddOnMeta {
 		yearlyPrice: number;
 		formattedMonthlyPrice: string;
 		formattedYearlyPrice: string;
+		currencyCode: string;
 	} | null;
+	quantity?: number; // used for determining checkout costs for quantity based products
 	checkoutLink?: string;
-	exceedsSiteStorageLimits?: boolean;
 }
 
 export type AddOnSlug = ( typeof ADD_ONS )[ number ];

package/src/contextual-help/admin-sections.ts

@@ -91,7 +91,7 @@ export function generateAdminSections(
 		},
 		{
 			title: __( 'Cancel my plan', __i18n_text_domain__ ),
-			link: `/me/purchases`,
+			link: '/me/purchases',
 			synonyms: [ 'upgrade', 'business', 'professional', 'personal' ],
 			icon: 'plans',
 		},
@@ -104,7 +104,7 @@ export function generateAdminSections(
 		{
 			/* translators: %(googleMailService)s can be either "G Suite" or "Google Workspace */
 			title: sprintf( __( 'Cancel %s', __i18n_text_domain__ ), googleMailService ),
-			link: `/me/purchases`,
+			link: '/me/purchases',
 			synonyms: [ 'upgrade', 'business', 'professional', 'personal', 'google' ],
 			icon: 'plans',
 		},
@@ -353,7 +353,7 @@ export function generateAdminSections(
 		},
 		{
 			title: __( 'New post', __i18n_text_domain__ ),
-			description: __( `Create a new blog post on your site.` ),
+			description: __( 'Create a new blog post on your site.' ),
 			link: `/post/${ siteSlug }`,
 			synonyms: [ 'lists', 'posts' ],
 			icon: 'my-sites',
@@ -390,7 +390,7 @@ export function generateAdminSections(
 		},
 		{
 			title: __( 'View contact form messages', __i18n_text_domain__ ),
-			link: `https://${ siteSlug }/wp-admin/edit.php?post_type=feedback&calypsoify=1`,
+			link: `https://${ siteSlug }/wp-admin/admin.php?page=jetpack-forms-admin`,
 			synonyms: [ 'contact', 'form' ],
 			icon: 'cog',
 		},

package/src/contextual-help/contextual-help.tsx

@@ -1,6 +1,9 @@
 import { __ } from '@wordpress/i18n';
+import debugFactory from 'debug';
 import { RESULT_TOUR, RESULT_VIDEO } from './constants';
 
+const debug = debugFactory( 'calypso:data-stores:contextual-help' );
+
 export type LinksForSection = {
 	readonly link: string;
 	post_id?: number;
@@ -611,8 +614,7 @@ export function getContextResults( section: string, siteIntent: string ) {
 	}
 
 	if ( siteIntent ) {
-		// eslint-disable-next-line no-console
-		console.warn( 'Site intent is', siteIntent );
+		debug( `Site intent: ${ siteIntent }` );
 	}
 
 	// make sure editorially to show at most one tour and one video at once

package/src/domain-suggestions/index.ts

@@ -1,4 +1,4 @@
-import { registerStore } from '@wordpress/data';
+import { register, createReduxStore } from '@wordpress/data';
 import { controls } from '../wpcom-request-controls';
 import * as actions from './actions';
 import { STORE_KEY } from './constants';
@@ -12,18 +12,11 @@ export * from './queries';
 export { getFormattedPrice } from './utils';
 export type { State };
 
-let isRegistered = false;
-
-export function register(): typeof STORE_KEY {
-	if ( ! isRegistered ) {
-		isRegistered = true;
-		registerStore( STORE_KEY, {
-			actions,
-			controls,
-			reducer,
-			resolvers,
-			selectors,
-		} );
-	}
-	return STORE_KEY;
-}
+export const store = createReduxStore( STORE_KEY, {
+	actions,
+	controls,
+	reducer,
+	resolvers,
+	selectors,
+} );
+register( store );

package/src/domain-suggestions/test/selectors.ts

@@ -1,6 +1,6 @@
 import { select, subscribe } from '@wordpress/data';
 import wpcomRequest from 'wpcom-proxy-request';
-import { register } from '..';
+import { store } from '..';
 import { DataStatus } from '../constants';
 
 jest.mock( 'wpcom-proxy-request', () => ( {
@@ -9,8 +9,6 @@ jest.mock( 'wpcom-proxy-request', () => ( {
 	requestAllBlogsAccess: jest.fn( () => Promise.resolve() ),
 } ) );
 
-let store: ReturnType< typeof register >;
-
 const options = {
 	category_slug: undefined,
 	include_dotblogsubdomain: false,
@@ -27,7 +25,10 @@ const apiResponse = [
 		match_reasons: [ 'tld-common', 'tld-exact' ],
 		product_id: 78,
 		product_slug: 'dotsite_domain',
-		cost: '$25.00',
+		cost: '$25',
+		raw_price: 25,
+		currency_code: 'USD',
+		unavailable: false,
 	},
 	{
 		domain_name: 'hot-test-site.com',
@@ -37,14 +38,13 @@ const apiResponse = [
 		match_reasons: [ 'tld-common' ],
 		product_id: 6,
 		product_slug: 'domain_reg',
-		cost: '$18.00',
+		cost: '$18',
+		raw_price: 18,
+		currency_code: 'USD',
+		unavailable: false,
 	},
 ];
 
-beforeAll( () => {
-	store = register();
-} );
-
 beforeEach( () => {
 	( wpcomRequest as jest.Mock ).mockReset();
 } );
@@ -55,7 +55,7 @@ describe( 'getDomainSuggestions', () => {
 
 		const query = 'test query one';
 		const listenForStateUpdate = () => {
-			return new Promise( ( resolve ) => {
+			return new Promise< void >( ( resolve ) => {
 				const unsubscribe = subscribe( () => {
 					unsubscribe();
 					resolve();
@@ -88,7 +88,7 @@ describe( 'getDomainSuggestions', () => {
 
 		expect(
 			select( 'core/data' ).isResolving( store, 'getDomainSuggestions', [ query, options ] )
-		).toStrictEqual( false );
+		).toEqual( false );
 	} );
 } );
 
@@ -102,7 +102,7 @@ describe( 'getDomainErrorMessage', () => {
 
 		const query = 'test query two';
 		const listenForStateUpdate = () => {
-			return new Promise( ( resolve ) => {
+			return new Promise< void >( ( resolve ) => {
 				const unsubscribe = subscribe( () => {
 					unsubscribe();
 					resolve();

package/src/domain-suggestions/types.ts

@@ -1,6 +1,4 @@
-import * as selectors from './selectors';
 import type { DataStatus } from './constants';
-import type { SelectFromMap } from '../mapped-types';
 
 export interface DomainSuggestionQuery {
 	/**
@@ -254,5 +252,3 @@ export interface DomainSuggestionState {
 export type DomainAvailabilities = Record< string, DomainAvailability | undefined >;
 
 export type DomainSuggestionSelectorOptions = Partial< Exclude< DomainSuggestionQuery, 'query' > >;
-
-export type DomainSuggestionsSelect = SelectFromMap< typeof selectors >;

package/src/domain-suggestions/utils.ts

@@ -1,10 +1,9 @@
-import formatCurrency from '@automattic/format-currency';
+import { formatCurrency } from '@automattic/number-formatters';
 import deterministicStringify from 'fast-json-stable-stringify';
 import type { DomainSuggestionQuery, DomainSuggestionSelectorOptions } from './types';
 
 /**
  * Stable transform to an object key for storage and access.
- * @see client/state/domains/suggestions/utils.js
  */
 export const stringifyDomainQueryObject: ( q: DomainSuggestionQuery ) => string =
 	deterministicStringify;
@@ -26,8 +25,6 @@ export function getFormattedPrice( price: number, currencyCode: string ): string
  *
  * It's important to have a consistent, reproduceable representation of a domains query so that the result can be
  * stored and retrieved.
- * @see client/state/domains/suggestions/utils.js
- * @see client/components/data/query-domains-suggestions/index.jsx
  * @param search       Domain search string
  * @param queryOptions Optional paramaters for the query
  * @returns Normalized query object