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

package/src/plugins/index.ts

@@ -0,0 +1,17 @@
+import { plugins, use } from '@wordpress/data';
+import persistOptions from './one-week-persistence-config';
+
+let isRegistered = false;
+
+export const registerPlugins = () => {
+	if ( isRegistered ) {
+		return;
+	}
+
+	isRegistered = true;
+
+	/**
+	 * Register plugins for data-stores
+	 */
+	use( plugins.persistence, persistOptions );
+};

package/src/plugins/one-week-persistence-config.ts

@@ -0,0 +1,79 @@
+/*
+    Defines the options used for the @wp/data persistence plugin, 
+    which include a persistent storage implementation to add data expiration handling.
+*/
+const storageKey = 'WPCOM_7_DAYS_PERSISTENCE';
+const PERSISTENCE_INTERVAL = 7 * 24 * 3600000; // days * hours in days * ms in hour
+const STORAGE_KEY = storageKey;
+const STORAGE_TS_KEY = storageKey + '_TS';
+
+// A plain object fallback if localStorage is not available
+const objStore: { [ key: string ]: string } = {};
+
+const objStorage: Pick< Storage, 'getItem' | 'setItem' | 'removeItem' > = {
+	getItem( key ) {
+		if ( objStore.hasOwnProperty( key ) ) {
+			return objStore[ key ];
+		}
+
+		return null;
+	},
+	setItem( key, value ) {
+		objStore[ key ] = String( value );
+	},
+	removeItem( key ) {
+		delete objStore[ key ];
+	},
+};
+
+// Make sure localStorage support exists
+const localStorageSupport = (): boolean => {
+	try {
+		window.localStorage.setItem( 'WP_ONBOARD_TEST', '1' );
+		window.localStorage.removeItem( 'WP_ONBOARD_TEST' );
+		return true;
+	} catch ( e ) {
+		return false;
+	}
+};
+
+// Choose the right storage implementation
+const storageHandler = localStorageSupport() ? window.localStorage : objStorage;
+
+// Persisted data expires after seven days
+const isNotExpired = ( timestampStr: string ): boolean => {
+	const timestamp = Number( timestampStr );
+	return Boolean( timestamp ) && timestamp + PERSISTENCE_INTERVAL > Date.now();
+};
+
+// Check for "fresh" query param
+const hasFreshParam = (): boolean => {
+	return new URLSearchParams( window.location.search ).has( 'fresh' );
+};
+
+// Handle data expiration by providing a storage object override to the @wp/data persistence plugin.
+const storage: Pick< Storage, 'getItem' | 'setItem' > = {
+	getItem( key ) {
+		const timestamp = storageHandler.getItem( STORAGE_TS_KEY );
+
+		if ( timestamp && isNotExpired( timestamp ) && ! hasFreshParam() ) {
+			return storageHandler.getItem( key );
+		}
+
+		storageHandler.removeItem( STORAGE_KEY );
+		storageHandler.removeItem( STORAGE_TS_KEY );
+
+		return null;
+	},
+	setItem( key, value ) {
+		storageHandler.setItem( STORAGE_TS_KEY, JSON.stringify( Date.now() ) );
+		storageHandler.setItem( key, value );
+	},
+};
+
+const persistOptions = {
+	storageKey: STORAGE_KEY,
+	storage,
+};
+
+export default persistOptions;

package/src/products-list/actions.ts

@@ -1,6 +1,6 @@
-import type { ProductsList, ProductsListFailure } from './types';
+import type { RawAPIProductsList, ProductsListFailure } from './types';
 
-export const receiveProductsList = ( productsList: ProductsList ) => {
+export const receiveProductsList = ( productsList: RawAPIProductsList ) => {
 	return {
 		type: 'PRODUCTS_LIST_RECEIVE' as const,
 		productsList,

package/src/products-list/index.ts

@@ -1,32 +1,24 @@
-import { registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 import { controls } from '../wpcom-request-controls';
 import * as actions from './actions';
 import { STORE_KEY } from './constants';
 import reducer, { State } from './reducer';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
-import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 
 export * from './types';
 export type { State };
 export { STORE_KEY };
 
-let isRegistered = false;
-export function register(): typeof STORE_KEY {
-	if ( ! isRegistered ) {
-		isRegistered = true;
-		registerStore< State >( STORE_KEY, {
-			actions,
-			controls: controls as any, // eslint-disable-line @typescript-eslint/no-explicit-any
-			reducer: reducer as any, // eslint-disable-line @typescript-eslint/no-explicit-any
-			resolvers,
-			selectors,
-		} );
-	}
-	return STORE_KEY;
-}
+export const store = createReduxStore( STORE_KEY, {
+	actions,
+	controls,
+	reducer,
+	resolvers,
+	selectors,
+} );
 
-declare module '@wordpress/data' {
-	function dispatch( key: typeof STORE_KEY ): DispatchFromMap< typeof actions >;
-	function select( key: typeof STORE_KEY ): SelectFromMap< typeof selectors >;
-}
+/** Queries */
+export { default as useProducts } from './queries/use-products';
+
+register( store );

package/src/products-list/queries/lib/use-query-keys-factory.ts

@@ -0,0 +1,5 @@
+const useQueryKeysFactory = () => ( {
+	products: () => [ 'products' ],
+} );
+
+export default useQueryKeysFactory;

package/src/products-list/queries/use-products.ts

@@ -0,0 +1,65 @@
+import { useLocale } from '@automattic/i18n-utils';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import * as ProductsList from '../../products-list';
+import useQueryKeysFactory from './lib/use-query-keys-factory';
+import type { StoreProductSlug, Product, RawAPIProductsList } from '../types';
+
+type ProductsIndex = {
+	[ productSlug in StoreProductSlug ]?: Product;
+};
+
+/**
+ * Fetches all products, transformed into a map of productSlug => Product (with camelCased props)
+ * - Only properties needed by the UI are included (which can gradually be expanded as needed)
+ * @returns Query result
+ */
+function useProducts(
+	productSlugs?: ProductsList.StoreProductSlug[]
+): UseQueryResult< ProductsIndex > {
+	const queryKeys = useQueryKeysFactory();
+	const product_slugs = productSlugs?.join( ',' ) ?? null;
+	const locale = useLocale();
+
+	return useQuery( {
+		queryKey: [ ...queryKeys.products(), product_slugs, locale ],
+		queryFn: async (): Promise< ProductsIndex > => {
+			const apiProducts: RawAPIProductsList = await wpcomRequest( {
+				path: `/products`,
+				apiVersion: '1.1',
+				...( product_slugs
+					? { query: new URLSearchParams( { product_slugs, locale } ).toString() }
+					: {} ),
+			} );
+
+			return Object.fromEntries(
+				Object.keys( apiProducts ).map( ( productSlug ) => {
+					const product = apiProducts[ productSlug ];
+
+					return [
+						productSlug,
+						{
+							id: Number( product.product_id ),
+							name: product.product_name,
+							term: product.product_term,
+							description: product.description,
+							productSlug: product.product_slug,
+							costSmallestUnit: Number( product.cost_smallest_unit ),
+							currencyCode: product.currency_code,
+							priceTierList: product.price_tier_list?.map( ( priceTier ) => ( {
+								minimumUnits: Number( priceTier.minimum_units ),
+								maximumUnits: Number( priceTier.maximum_units ),
+								minimumPrice: Number( priceTier.minimum_price ),
+								maximumPrice: Number( priceTier.maximum_price ),
+								minimumPriceDisplay: priceTier.minimum_price_display,
+								maximumPriceDisplay: priceTier.maximum_price_display,
+							} ) ),
+						},
+					];
+				} )
+			);
+		},
+	} );
+}
+
+export default useProducts;

package/src/products-list/reducer.ts

@@ -1,10 +1,13 @@
 import { combineReducers } from '@wordpress/data';
-import { ProductsList } from './types';
+import { RawAPIProductsList } from './types';
 import type { Action } from './actions';
 import type { Reducer } from 'redux';
 
 // Stores the complete list of products, indexed by the product key
-export const productsList: Reducer< ProductsList | undefined, Action > = ( state, action ) => {
+export const productsList: Reducer< RawAPIProductsList | undefined, Action > = (
+	state,
+	action
+) => {
 	switch ( action.type ) {
 		case 'PRODUCTS_LIST_RECEIVE':
 			return action.productsList;

package/src/products-list/resolvers.ts

@@ -1,5 +1,5 @@
 import wpcomRequest from 'wpcom-proxy-request';
-import { ProductsList, ProductsListFailure, Dispatch } from './types';
+import { RawAPIProductsList, ProductsListFailure, Dispatch } from './types';
 
 /**
  * Requests the list of all products from the WPCOM API.
@@ -10,7 +10,7 @@ export const getProductsList =
 		dispatch.requestProductsList();
 
 		try {
-			const productsList: ProductsList = await wpcomRequest( {
+			const productsList: RawAPIProductsList = await wpcomRequest( {
 				path: '/products',
 				apiVersion: '1.1',
 			} );

package/src/products-list/selectors.ts

@@ -1,3 +1,6 @@
+import { select } from '@wordpress/data';
+import { STORE_KEY } from './constants';
+import { RawAPIProductsList } from './types';
 import type { State } from './reducer';
 
 export const getState = ( state: State ) => state;
@@ -6,6 +9,17 @@ export const getProductsList = ( state: State ) => {
 	return state.productsList;
 };
 
-export const getProductBySlug = ( state: State, slug: string ) => {
-	return state.productsList?.[ slug ];
+export const getProductBySlug = ( _state: State, slug: string ) => {
+	if ( ! slug ) {
+		return undefined;
+	}
+	const products = (
+		select( STORE_KEY ) as { getProductsList: () => RawAPIProductsList | undefined }
+	 ).getProductsList();
+
+	if ( ! products ) {
+		return undefined;
+	}
+
+	return products?.[ slug ];
 };

package/src/products-list/test/actions.ts

@@ -1,5 +1,5 @@
 import { requestProductsList, receiveProductsListFailure, receiveProductsList } from '../actions';
-import { ProductsList } from '../types';
+import { RawAPIProductsList } from '../types';
 
 describe( 'actions', () => {
 	it( 'should return a PRODUCTS_LIST_REQUEST action', () => {
@@ -29,6 +29,7 @@ describe( 'actions', () => {
 				available: true,
 				combined_cost_display: '$20.00',
 				cost: 20,
+				cost_smallest_unit: 2000,
 				cost_display: '$20.00',
 				currency_code: 'USD',
 				description: 'test product',
@@ -43,7 +44,7 @@ describe( 'actions', () => {
 				product_term: 'year',
 				product_type: 'space',
 			},
-		} as ProductsList;
+		} as RawAPIProductsList;
 
 		const expected = {
 			type: 'PRODUCTS_LIST_RECEIVE',

package/src/products-list/test/selectors.ts

@@ -7,19 +7,13 @@
  */
 import { select, subscribe } from '@wordpress/data';
 import wpcomRequest from 'wpcom-proxy-request';
-import { register } from '..';
+import { store } from '../';
 
 jest.mock( 'wpcom-proxy-request', () => ( {
 	__esModule: true,
 	default: jest.fn(),
 } ) );
 
-let store: ReturnType< typeof register >;
-
-beforeAll( () => {
-	store = register();
-} );
-
 beforeEach( () => {
 	( wpcomRequest as jest.Mock ).mockReset();
 } );
@@ -52,7 +46,7 @@ describe( 'selectors', () => {
 		// First call returns undefined
 		expect( select( store ).getProductsList() ).toEqual( undefined );
 
-		await new Promise( ( resolve ) => {
+		await new Promise< void >( ( resolve ) => {
 			const unsubscribe = subscribe( () => {
 				if ( select( store ).getProductsList() === undefined ) {
 					return;
@@ -64,5 +58,6 @@ describe( 'selectors', () => {
 		} );
 
 		expect( select( store ).getProductsList() ).toEqual( apiResponse );
+		expect( select( store ).getProductBySlug( 'free_plan' ) ).toEqual( apiResponse[ 'free_plan' ] );
 	} );
 } );

package/src/products-list/types.ts

@@ -1,29 +1,65 @@
 import * as actions from './actions';
 import type { DispatchFromMap } from '../mapped-types';
+import type {
+	PriceTierEntry,
+	ProductSlug,
+	WPComOtherProductSlug,
+	WPComSpaceUpgradeProductSlug,
+} from '@automattic/calypso-products';
 
 export interface Dispatch {
 	dispatch: DispatchFromMap< typeof actions >;
 }
 
-export interface ProductsListItem {
+export type StoreProductSlug = ProductSlug | WPComSpaceUpgradeProductSlug | WPComOtherProductSlug;
+
+export interface ProductPriceTier {
+	minimumUnits: number;
+	maximumUnits?: undefined | null | number;
+	minimumPrice: number;
+	maximumPrice: number;
+	minimumPriceDisplay: string;
+	maximumPriceDisplay?: string | null | undefined;
+}
+
+/**
+ * Product data as transformed for the UI
+ * - Only properties needed by the UI are included (which can gradually be expanded as needed)
+ */
+export interface Product {
+	id: number;
+	name: string;
+	term?: string;
+	description: string;
+	productSlug: StoreProductSlug;
+	costSmallestUnit: number;
+	currencyCode: string;
+	priceTierList: ProductPriceTier[];
+}
+
+/**
+ * Product data as returned by the API
+ */
+export interface RawAPIProduct {
 	available: boolean;
 	combined_cost_display: string;
 	cost: number;
+	cost_smallest_unit: number;
 	currency_code: string;
 	description: string;
 	is_domain_registration: boolean;
-	price_tier_list: any;
-	price_tier_lug: string;
+	price_tier_list: PriceTierEntry[];
+	price_tier_slug: string;
 	price_tier_usage_quantity: number | null;
 	price_tiers: any;
 	product_id: number;
 	product_name: string;
-	product_slug: string;
-	product_term: string;
+	product_slug: StoreProductSlug;
+	product_term?: string;
 	product_type: string;
 }
 
-export type ProductsList = Record< string, ProductsListItem >;
+export type RawAPIProductsList = Record< string, RawAPIProduct >;
 
 export interface ProductsListFailure {
 	message: string;

package/src/purchases/hooks/test/use-site-purchases-by-product-slug.ts

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { renderHook } from '@testing-library/react';
+import useSitePurchases from '../../queries/use-site-purchases';
+import useSitePurchasesByProductSlug from '../use-site-purchases-by-product-slug';
+
+jest.mock( '../../queries/use-site-purchases' );
+
+describe( 'useSitePurchasesByProductSlug', () => {
+	const mockData = {
+		1: { id: 1, productSlug: 'foo' },
+		2: { id: 2, productSlug: 'bar' },
+		3: { id: 3, productSlug: 'foo' },
+	};
+
+	beforeEach( () => {
+		jest.resetAllMocks();
+	} );
+
+	it( 'should return undefined when sitePurchases.data is undefined', () => {
+		( useSitePurchases as jest.Mock ).mockReturnValue( {} );
+
+		const { result } = renderHook( () =>
+			useSitePurchasesByProductSlug( { siteId: 1, productSlug: 'foo' } )
+		);
+
+		expect( result.current ).toBeUndefined();
+	} );
+
+	it( 'should filter site purchases based on the provided slug', () => {
+		( useSitePurchases as jest.Mock ).mockReturnValue( { data: mockData } );
+
+		const { result } = renderHook( () =>
+			useSitePurchasesByProductSlug( { siteId: 1, productSlug: 'foo' } )
+		);
+
+		expect( result.current ).toEqual( {
+			1: { id: 1, productSlug: 'foo' },
+			3: { id: 3, productSlug: 'foo' },
+		} );
+	} );
+
+	it( 'should return null if no match', () => {
+		( useSitePurchases as jest.Mock ).mockReturnValue( { data: mockData } );
+
+		// No match
+		expect(
+			renderHook( () =>
+				useSitePurchasesByProductSlug( { siteId: 1, productSlug: 'notfoonotbar' } )
+			).result.current
+		).toEqual( null );
+
+		// Undefined product slug
+		expect(
+			renderHook( () => useSitePurchasesByProductSlug( { siteId: 1, productSlug: undefined } ) )
+				.result.current
+		).toEqual( null );
+	} );
+} );

package/src/purchases/hooks/use-site-purchase-by-id.ts

@@ -0,0 +1,17 @@
+import useSitePurchases from '../queries/use-site-purchases';
+import type { Purchase } from '../types';
+
+interface Props {
+	purchaseId?: number | null;
+	siteId?: string | number | null;
+}
+
+const useSitePurchaseById = ( { siteId, purchaseId }: Props ): Purchase | undefined => {
+	const sitePurchases = useSitePurchases( { siteId } );
+
+	return sitePurchases?.data && typeof purchaseId === 'number'
+		? sitePurchases?.data[ purchaseId ]
+		: undefined;
+};
+
+export default useSitePurchaseById;

package/src/purchases/hooks/use-site-purchases-by-product-slug.ts

@@ -0,0 +1,34 @@
+import { useMemo } from '@wordpress/element';
+import useSitePurchases, { PurchasesIndex } from '../queries/use-site-purchases';
+
+interface Props {
+	productSlug: string | null | undefined;
+	siteId?: string | number | null;
+}
+
+/**
+ * Fetches site-purchases matching product slug for a given site
+ * @returns `PurchasesIndex` if found, `null` if none found, `undefined` if sitePurchases is undefined
+ */
+const useSitePurchasesByProductSlug = ( {
+	siteId,
+	productSlug,
+}: Props ): PurchasesIndex | null | undefined => {
+	const sitePurchases = useSitePurchases( { siteId } );
+
+	return useMemo( () => {
+		if ( ! sitePurchases.data ) {
+			return undefined;
+		}
+
+		const found = Object.fromEntries(
+			Object.entries( sitePurchases.data ).filter(
+				( [ , purchase ] ) => purchase.productSlug === productSlug
+			)
+		);
+
+		return Object.keys( found ).length ? found : null;
+	}, [ sitePurchases.data, productSlug ] );
+};
+
+export default useSitePurchasesByProductSlug;

package/src/purchases/index.ts

@@ -0,0 +1,17 @@
+import { createPurchaseObject, createPurchasesArray } from './lib/assembler';
+
+/** Queries */
+export { default as useSitePurchases } from './queries/use-site-purchases';
+
+/** Hooks/Selectors */
+export { default as useSitePurchaseById } from './hooks/use-site-purchase-by-id';
+export { default as useSitePurchasesByProductSlug } from './hooks/use-site-purchases-by-product-slug';
+
+/** Types */
+export * from './types';
+
+/** Utils */
+export const utils = {
+	createPurchaseObject,
+	createPurchasesArray,
+};