@automattic/data-stores 2.0.0 → 3.0.1

package/src/products-list/constants.ts

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

package/src/products-list/index.ts

@@ -0,0 +1,32 @@
+import { registerStore } 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;
+}
+
+declare module '@wordpress/data' {
+	function dispatch( key: typeof STORE_KEY ): DispatchFromMap< typeof actions >;
+	function select( key: typeof STORE_KEY ): SelectFromMap< typeof selectors >;
+}

package/src/products-list/reducer.ts

@@ -0,0 +1,40 @@
+import { combineReducers } from '@wordpress/data';
+import { ProductsList } 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 ) => {
+	switch ( action.type ) {
+		case 'PRODUCTS_LIST_RECEIVE':
+			return action.productsList;
+	}
+
+	return state;
+};
+
+// Tracks product list fetching state
+export const isFetchingProductsList: Reducer< boolean | undefined, Action > = (
+	state = false,
+	action
+) => {
+	switch ( action.type ) {
+		case 'PRODUCTS_LIST_REQUEST':
+			return true;
+		case 'PRODUCTS_LIST_RECEIVE':
+			return false;
+		case 'PRODUCTS_LIST_REQUEST_FAILURE':
+			return false;
+	}
+
+	return state;
+};
+
+const reducer = combineReducers( {
+	isFetchingProductsList,
+	productsList,
+} );
+
+export type State = ReturnType< typeof reducer >;
+
+export default reducer;

package/src/products-list/resolvers.ts

@@ -0,0 +1,28 @@
+import wpcomRequest from 'wpcom-proxy-request';
+import { ProductsList, ProductsListFailure, Dispatch } from './types';
+
+/**
+ * Requests the list of all products from the WPCOM API.
+ */
+export const getProductsList =
+	() =>
+	async ( { dispatch }: Dispatch ) => {
+		dispatch.requestProductsList();
+
+		try {
+			const productsList: ProductsList = await wpcomRequest( {
+				path: '/products',
+				apiVersion: '1.1',
+			} );
+
+			// Since the request succeeded, productsList should be guaranteed non-null;
+			// thus, we don't have any safety checks before this line.
+			for ( const product of Object.values( productsList ) ) {
+				product.cost = Number( product.cost );
+			}
+
+			dispatch.receiveProductsList( productsList );
+		} catch ( err ) {
+			dispatch.receiveProductsListFailure( err as ProductsListFailure );
+		}
+	};

package/src/products-list/selectors.ts

@@ -0,0 +1,11 @@
+import type { State } from './reducer';
+
+export const getState = ( state: State ) => state;
+
+export const getProductsList = ( state: State ) => {
+	return state.productsList;
+};
+
+export const getProductBySlug = ( state: State, slug: string ) => {
+	return state.productsList?.[ slug ];
+};

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

@@ -0,0 +1,55 @@
+import { requestProductsList, receiveProductsListFailure, receiveProductsList } from '../actions';
+import { ProductsList } from '../types';
+
+describe( 'actions', () => {
+	it( 'should return a PRODUCTS_LIST_REQUEST action', () => {
+		const expected = {
+			type: 'PRODUCTS_LIST_REQUEST',
+		};
+
+		expect( requestProductsList() ).toEqual( expected );
+	} );
+
+	it( 'should return a PRODUCTS_LIST_REQUEST_FAILURE action', () => {
+		const error = {
+			message: 'test error',
+		};
+
+		const expected = {
+			type: 'PRODUCTS_LIST_REQUEST_FAILURE',
+			error,
+		};
+
+		expect( receiveProductsListFailure( error ) ).toEqual( expected );
+	} );
+
+	it( 'should return a PRODUCTS_LIST_RECEIVE action', () => {
+		const productsList = {
+			test_product: {
+				available: true,
+				combined_cost_display: '$20.00',
+				cost: 20,
+				cost_display: '$20.00',
+				currency_code: 'USD',
+				description: 'test product',
+				is_domain_registration: false,
+				price_tier_list: [],
+				price_tier_slug: '',
+				price_tier_usage_quantity: null,
+				price_tiers: [],
+				product_id: 9,
+				product_name: '10GB',
+				product_slug: '1gb_space_upgrade',
+				product_term: 'year',
+				product_type: 'space',
+			},
+		} as ProductsList;
+
+		const expected = {
+			type: 'PRODUCTS_LIST_RECEIVE',
+			productsList,
+		};
+
+		expect( receiveProductsList( productsList ) ).toEqual( expected );
+	} );
+} );

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

@@ -0,0 +1,25 @@
+import { productsList } from '../reducer';
+import { ProductsList } from '../types';
+
+describe( 'reducer', () => {
+	it( 'returns the correct default state', () => {
+		const state = productsList( undefined, { type: 'TEST_ACTION' } );
+		expect( state ).toEqual( undefined );
+	} );
+
+	it( 'returns the products list', () => {
+		const expectedProductsList = {
+			test_product: {
+				available: true,
+				cost: 20,
+			},
+		} as ProductsList;
+
+		const state = productsList( undefined, {
+			type: 'PRODUCTS_LIST_RECEIVE',
+			productsList: expectedProductsList,
+		} );
+
+		expect( state ).toEqual( expectedProductsList );
+	} );
+} );

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

@@ -0,0 +1,68 @@
+/*
+ * These tests shouldn't require the jsdom environment,
+ * but we're waiting for this PR to merge:
+ * https://github.com/WordPress/gutenberg/pull/20486
+ *
+ * @jest-environment jsdom
+ */
+import { select, subscribe } from '@wordpress/data';
+import wpcomRequest from 'wpcom-proxy-request';
+import { register } 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();
+} );
+
+describe( 'selectors', () => {
+	it( 'resolves the state via an API call', async () => {
+		const apiResponse = {
+			free_plan: {
+				product_id: 1,
+				product_name: 'WordPress.com Free',
+				product_slug: 'free_plan',
+				description: '',
+				product_type: 'bundle',
+				available: true,
+				is_domain_registration: false,
+				cost_display: '$0.00',
+				combined_cost_display: '$0.00',
+				cost: 0,
+				currency_code: 'USD',
+				price_tier_list: [],
+				price_tier_usage_quantity: null,
+				product_term: 'one time',
+				price_tiers: [],
+				price_tier_slug: '',
+			},
+		};
+
+		( wpcomRequest as jest.Mock ).mockResolvedValue( apiResponse );
+
+		// First call returns undefined
+		expect( select( store ).getProductsList() ).toEqual( undefined );
+
+		await new Promise( ( resolve ) => {
+			const unsubscribe = subscribe( () => {
+				if ( select( store ).getProductsList() === undefined ) {
+					return;
+				}
+
+				unsubscribe();
+				resolve();
+			} );
+		} );
+
+		expect( select( store ).getProductsList() ).toEqual( apiResponse );
+	} );
+} );

package/src/products-list/types.ts

@@ -0,0 +1,30 @@
+import * as actions from './actions';
+import type { DispatchFromMap } from '../mapped-types';
+
+export interface Dispatch {
+	dispatch: DispatchFromMap< typeof actions >;
+}
+
+export interface ProductsListItem {
+	available: boolean;
+	combined_cost_display: string;
+	cost: number;
+	currency_code: string;
+	description: string;
+	is_domain_registration: boolean;
+	price_tier_list: any;
+	price_tier_lug: string;
+	price_tier_usage_quantity: number | null;
+	price_tiers: any;
+	product_id: number;
+	product_name: string;
+	product_slug: string;
+	product_term: string;
+	product_type: string;
+}
+
+export type ProductsList = Record< string, ProductsListItem >;
+
+export interface ProductsListFailure {
+	message: string;
+}

package/src/queries/use-happiness-engineers-query.ts

@@ -0,0 +1,18 @@
+import { useQuery } from 'react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+
+export const useHappinessEngineersQuery = () =>
+	useQuery<
+		{
+			display_name: string;
+			name: string;
+			avatar_URL: string;
+		}[]
+	>(
+		'happinessEngineers',
+		async () => await wpcomRequest( { path: '/meta/happiness-engineers/', apiVersion: '1.1' } ),
+		{
+			refetchOnWindowFocus: false,
+			staleTime: Infinity,
+		}
+	);

package/src/queries/use-has-3rd-party-cookies.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Cache the result for the entire session, since changing 3PC settings requires a refresh
+ */
+let result: boolean | undefined;
+
+/**
+ * Calls a widgets.wp.com endpoint from within an iframe to determine whether the user has 3rd party cookies allowed
+ *
+ * @returns true when cookies are allowed, false when not.
+ */
+export function useHas3PC() {
+	const [ hasCookies, setHasCookies ] = useState( Boolean( result ) );
+
+	useEffect( () => {
+		const iframe = document.createElement( 'iframe' );
+
+		function handler( event: MessageEvent ) {
+			const { data } = event;
+			if ( data.type === 'widgets.wp.com-cookie-check' ) {
+				// cache the result
+				result = data.result;
+				setHasCookies( data.result );
+				window.removeEventListener( 'message', handler );
+				iframe.remove();
+			}
+		}
+
+		// only inject the iframe if the result isn't already cached
+		if ( result === undefined ) {
+			iframe.src = 'https://widgets.wp.com/calypso-happychat/check-cookies.html';
+			iframe.style.display = 'none';
+
+			window.addEventListener( 'message', handler );
+			document.body.appendChild( iframe );
+			return () => window.removeEventListener( 'message', handler );
+		}
+	}, [] );
+
+	return { hasCookies, isLoading: result === undefined };
+}

package/src/queries/use-has-seen-whats-new-modal-query.ts

@@ -0,0 +1,68 @@
+import { useCallback } from 'react';
+import { useQuery, useQueryClient, useMutation } from 'react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+
+interface HasSeenWhatsNewModal {
+	hasSeenWhatsNewModal: boolean;
+}
+
+interface HasSeenWhatsNewModalResult {
+	has_seen_whats_new_modal: boolean;
+}
+
+interface UpdateError {
+	message: string;
+	error: string;
+}
+
+export const useHasSeenWhatsNewModalQuery = ( siteId: number | null ) => {
+	const queryKey = 'has-seen-whats-new-modal';
+
+	const { data, isLoading } = useQuery< { has_seen_whats_new_modal: boolean } >(
+		queryKey,
+		() =>
+			wpcomRequest( {
+				path: `/sites/${ siteId }/block-editor/has-seen-whats-new-modal`,
+				apiNamespace: 'wpcom/v2',
+			} ),
+		{
+			enabled: !! siteId,
+			refetchOnWindowFocus: false,
+		}
+	);
+
+	const queryClient = useQueryClient();
+	const mutation = useMutation< HasSeenWhatsNewModalResult, UpdateError, HasSeenWhatsNewModal >(
+		( { hasSeenWhatsNewModal } ) =>
+			wpcomRequest( {
+				path: `/sites/${ siteId }/block-editor/has-seen-whats-new-modal`,
+				apiNamespace: 'wpcom/v2',
+				method: 'post',
+				body: {
+					has_seen_whats_new_modal: hasSeenWhatsNewModal,
+				},
+			} ),
+		{
+			onSuccess( data ) {
+				queryClient.setQueryData( queryKey, {
+					...data,
+				} );
+			},
+		}
+	);
+
+	const { mutateAsync } = mutation;
+
+	const setHasSeenWhatsNewModal = useCallback(
+		( hasSeenWhatsNewModal: boolean ) => {
+			return mutateAsync( { hasSeenWhatsNewModal } );
+		},
+		[ mutateAsync ]
+	);
+
+	return {
+		data,
+		isLoading,
+		setHasSeenWhatsNewModal,
+	};
+};

package/src/queries/use-site-analysis.ts

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { useDebounce } from 'use-debounce';
+import wpcomRequest from 'wpcom-proxy-request';
+import { SiteDetails } from '../site';
+
+type ResultType = 'WPCOM' | 'WPORG' | 'UNKNOWN' | 'NOT_OWNED_BY_USER' | 'UNKNOWN';
+
+export type AnalysisReport = {
+	result: ResultType;
+	site?: SiteDetails;
+};
+
+type Analysis = {
+	url: string;
+	platform: string;
+	meta: {
+		title: string;
+		favicon: string;
+	};
+	platform_data?: { is_wpcom: boolean };
+};
+
+// a simple way to check if a string is host to save on API calls
+function isHost( string: string | undefined ) {
+	if ( string ) {
+		return string.length > 4 && Boolean( string?.match( /\w{2,}\.\w{2,16}/ ) );
+	}
+	return false;
+}
+
+/**
+ * Analyses a site to determine whether its a WPCOM site, and if yes, it would fetch and return the site information (SiteDetails).
+ *
+ * @param siteURL the site URL
+ */
+export function useSiteAnalysis( siteURL: string | undefined ) {
+	const [ analysis, setAnalysis ] = useState< AnalysisReport | undefined >();
+	const [ debouncedSiteUrl ] = useDebounce( siteURL, 500 );
+
+	useEffect( () => {
+		setAnalysis( undefined );
+		if ( ! isHost( debouncedSiteUrl ) ) {
+			return;
+		}
+		if ( debouncedSiteUrl ) {
+			( async () => {
+				try {
+					const analysis = await wpcomRequest< Analysis >( {
+						path: `/imports/analyze-url?site_url=${ encodeURIComponent( debouncedSiteUrl ) }`,
+						apiNamespace: 'wpcom/v2',
+					} );
+
+					if ( analysis.platform_data?.is_wpcom ) {
+						try {
+							// if a wpcom site, get its info
+							const site = await wpcomRequest< SiteDetails >( {
+								path: '/sites/' + encodeURIComponent( debouncedSiteUrl ),
+								apiVersion: '1.1',
+							} );
+							setAnalysis( { site, result: 'WPCOM' } );
+						} catch ( error ) {
+							// wpcom site, but not owned by user
+							setAnalysis( { result: 'NOT_OWNED_BY_USER' } );
+						}
+					} else if ( analysis.platform === 'wordpress' ) {
+						setAnalysis( { result: 'WPORG' } );
+					} else {
+						setAnalysis( { result: 'UNKNOWN' } );
+					}
+				} catch ( error ) {
+					setAnalysis( { result: 'UNKNOWN' } );
+				}
+			} )();
+		}
+	}, [ debouncedSiteUrl ] );
+
+	return { ...analysis, isLoading: ! analysis };
+}

package/src/queries/use-site-intent.ts

@@ -0,0 +1,20 @@
+import { useQuery } from 'react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+
+export function useSiteIntent( siteId: string | number | undefined ) {
+	return useQuery< {
+		site_intent: '';
+	} >(
+		'site-intent-' + siteId,
+		async () =>
+			await wpcomRequest( {
+				path: `/sites/${ encodeURIComponent( siteId as string ) }/site-intent`,
+				apiNamespace: 'wpcom/v2',
+			} ),
+		{
+			refetchOnWindowFocus: false,
+			staleTime: Infinity,
+			enabled: !! siteId,
+		}
+	);
+}

package/src/reader/actions.ts

@@ -0,0 +1,20 @@
+export interface ReaderTeam {
+	slug: string;
+	team: string;
+}
+
+export interface ReaderTeamsResponse {
+	number: number;
+	teams: ReaderTeam[];
+}
+
+export const fetchReaderTeamsSuccess = ( response: ReaderTeamsResponse ) =>
+	( {
+		type: 'FETCH_READER_TEAMS_SUCCESS',
+		response,
+	} as const );
+
+export type ReaderAction =
+	| ReturnType< typeof fetchReaderTeamsSuccess >
+	// Dummy action used during testing
+	| { type: 'DUMMY_ACTION' };

package/src/reader/constants.ts

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

package/src/reader/index.ts

@@ -0,0 +1,36 @@
+import { plugins, registerStore, use } from '@wordpress/data';
+import { controls } from '../wpcom-request-controls';
+import * as actions from './actions';
+import { STORE_KEY } from './constants';
+import persistOptions from './persist';
+import reducer, { State } from './reducer';
+import * as resolvers from './resolvers';
+import * as selectors from './selectors';
+import type { SelectFromMap, DispatchFromMap } from '../mapped-types';
+
+export type { State };
+export { STORE_KEY };
+
+use( plugins.persistence, persistOptions );
+
+let isRegistered = false;
+
+export function register(): typeof STORE_KEY {
+	if ( ! isRegistered ) {
+		isRegistered = true;
+		registerStore< State >( STORE_KEY, {
+			actions,
+			controls: controls as any,
+			reducer: reducer as any,
+			resolvers,
+			selectors,
+			persist: [ 'teams' ],
+		} );
+	}
+	return STORE_KEY;
+}
+
+declare module '@wordpress/data' {
+	function dispatch( key: typeof STORE_KEY ): DispatchFromMap< typeof actions >;
+	function select( key: typeof STORE_KEY ): SelectFromMap< typeof selectors >;
+}

package/src/reader/persist.ts

@@ -0,0 +1,3 @@
+import persistenceConfigFactory from '../persistence-config-factory';
+
+export default persistenceConfigFactory( 'WP_READER' );

package/src/reader/reducer.ts

@@ -0,0 +1,18 @@
+import { combineReducers } from '@wordpress/data';
+import type { ReaderTeam, ReaderAction } from './actions';
+import type { Reducer } from 'redux';
+
+const teams: Reducer< ReaderTeam[] | null, ReaderAction > = ( state = null, action ) => {
+	if ( action.type === 'FETCH_READER_TEAMS_SUCCESS' ) {
+		return action.response.teams;
+	}
+	return state;
+};
+
+const reducer = combineReducers( {
+	teams,
+} );
+
+export type State = ReturnType< typeof reducer >;
+
+export default reducer;

package/src/reader/resolvers.ts

@@ -0,0 +1,15 @@
+import { wpcomRequest } from '../wpcom-request-controls';
+import { fetchReaderTeamsSuccess, ReaderTeamsResponse } from './actions';
+
+export function* isA8cTeamMember(): Generator {
+	try {
+		const response = yield wpcomRequest( {
+			method: 'GET',
+			path: '/read/teams',
+			apiVersion: '1.2',
+		} );
+		yield fetchReaderTeamsSuccess( response as ReaderTeamsResponse );
+	} catch {
+		// Ignore errors
+	}
+}

package/src/reader/selectors.ts

@@ -0,0 +1,4 @@
+import type { State } from './reducer';
+
+export const isA8cTeamMember = ( state: State ): boolean =>
+	!! ( state.teams || [] ).find( ( team ) => team.slug === 'a8c' );

package/src/reader/test/reader-store.test.ts

@@ -0,0 +1,43 @@
+import { dispatch, select } from '@wordpress/data';
+import waitForExpect from 'wait-for-expect';
+import wpcomRequest from 'wpcom-proxy-request';
+import { STORE_KEY } from '../constants';
+import { register } from '../index';
+import readerReducer from '../reducer';
+
+jest.mock( 'wpcom-proxy-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+	requestAllBlogsAccess: jest.fn( () => Promise.resolve() ),
+} ) );
+
+beforeAll( () => {
+	register();
+} );
+
+beforeEach( () => {
+	// Reset the store back to default state
+	dispatch( STORE_KEY ).fetchReaderTeamsSuccess( { teams: null } as any );
+} );
+
+test( 'teams state defaults to `null`', () => {
+	const defaultState = readerReducer( undefined, { type: 'DUMMY_ACTION' } );
+	expect( defaultState.teams ).toBe( null );
+} );
+
+test( 'selecting isA8cTeamMember requests teams data from API', async () => {
+	( wpcomRequest as jest.Mock ).mockResolvedValue( {
+		count: 0,
+		teams: [ { name: '', slug: 'a8c' } ],
+	} );
+
+	const isTeamMember = select( STORE_KEY ).isA8cTeamMember();
+
+	// Returns false while response is loading
+	expect( isTeamMember ).toBe( false );
+
+	await waitForExpect( () => {
+		const isTeamMember = select( STORE_KEY ).isA8cTeamMember();
+		expect( isTeamMember ).toBe( true );
+	} );
+} );