@automattic/data-stores 1.0.0-alpha.0 → 3.0.0

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

@@ -0,0 +1,127 @@
+import { select, subscribe } from '@wordpress/data';
+import wpcomRequest from 'wpcom-proxy-request';
+import { register } from '..';
+import { DataStatus } from '../constants';
+
+jest.mock( 'wpcom-proxy-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+	requestAllBlogsAccess: jest.fn( () => Promise.resolve() ),
+} ) );
+
+let store: ReturnType< typeof register >;
+
+const options = {
+	category_slug: undefined,
+	include_dotblogsubdomain: false,
+	include_wordpressdotcom: true,
+	locale: 'en',
+	quantity: 11,
+};
+const apiResponse = [
+	{
+		domain_name: 'test.site',
+		relevance: 1,
+		supports_privacy: true,
+		vendor: 'donuts',
+		match_reasons: [ 'tld-common', 'tld-exact' ],
+		product_id: 78,
+		product_slug: 'dotsite_domain',
+		cost: '$25.00',
+	},
+	{
+		domain_name: 'hot-test-site.com',
+		relevance: 1,
+		supports_privacy: true,
+		vendor: 'donuts',
+		match_reasons: [ 'tld-common' ],
+		product_id: 6,
+		product_slug: 'domain_reg',
+		cost: '$18.00',
+	},
+];
+
+beforeAll( () => {
+	store = register();
+} );
+
+beforeEach( () => {
+	( wpcomRequest as jest.Mock ).mockReset();
+} );
+
+describe( 'getDomainSuggestions', () => {
+	it( 'resolves the state via an API call and caches the resolver on success', async () => {
+		( wpcomRequest as jest.Mock ).mockResolvedValue( apiResponse );
+
+		const query = 'test query one';
+		const listenForStateUpdate = () => {
+			return new Promise( ( resolve ) => {
+				const unsubscribe = subscribe( () => {
+					unsubscribe();
+					resolve();
+				} );
+			} );
+		};
+
+		// Status should be uninitialized before first call
+		expect( select( store ).getDomainState() ).toEqual( DataStatus.Uninitialized );
+
+		// First call returns undefined
+		expect( select( store ).getDomainSuggestions( query, options ) ).toEqual( undefined );
+
+		await listenForStateUpdate();
+
+		// Status should be pending while we wait for the response
+		expect( select( store ).getDomainState() ).toEqual( DataStatus.Pending );
+
+		await listenForStateUpdate();
+
+		// Status should be successful once we get the response
+		expect( select( store ).getDomainState() ).toEqual( DataStatus.Success );
+
+		// By the second call, the resolver will have resolved
+		expect( select( store ).getDomainSuggestions( query, options ) ).toEqual( apiResponse );
+
+		await listenForStateUpdate();
+
+		// The resolver should now be cached with an `isStarting` value of false
+
+		expect(
+			select( 'core/data' ).isResolving( store, 'getDomainSuggestions', [ query, options ] )
+		).toStrictEqual( false );
+	} );
+} );
+
+describe( 'getDomainErrorMessage', () => {
+	it( 'should return null if no error message', () => {
+		expect( select( store ).getDomainErrorMessage() ).toEqual( null );
+	} );
+
+	it( 'should return correct error message if no suggestions are returned', async () => {
+		( wpcomRequest as jest.Mock ).mockResolvedValue( null );
+
+		const query = 'test query two';
+		const listenForStateUpdate = () => {
+			return new Promise( ( resolve ) => {
+				const unsubscribe = subscribe( () => {
+					unsubscribe();
+					resolve();
+				} );
+			} );
+		};
+
+		// The error message should start off as a null value
+		expect( select( store ).getDomainErrorMessage() ).toBeFalsy();
+
+		// First call returns undefined
+		select( store ).getDomainSuggestions( query, options );
+		await listenForStateUpdate();
+
+		// By the second call, the resolver will have resolved
+		select( store ).getDomainSuggestions( query, options );
+		await listenForStateUpdate();
+
+		// The promise resolves null suggestions so we should now have an error message
+		expect( select( store ).getDomainErrorMessage() ).toBeTruthy();
+	} );
+} );

package/src/domain-suggestions/types.ts

@@ -1,6 +1,4 @@
-export const enum ActionType {
-	RECEIVE_DOMAIN_SUGGESTIONS = 'RECEIVE_DOMAIN_SUGGESTIONS',
-}
+import type { DataStatus } from './constants';
 
 export interface DomainSuggestionQuery {
 	/**
@@ -19,6 +17,11 @@ export interface DomainSuggestionQuery {
 	 */
 	include_wordpressdotcom: boolean;
 
+	/**
+	 * Localizes domain results, e.g., price format
+	 */
+	locale?: string;
+
 	/**
 	 * True to only provide a wordpress.com subdomain
 	 *
@@ -48,6 +51,16 @@ export interface DomainSuggestionQuery {
 	 * The vertical id or slug
 	 */
 	vertical?: string;
+
+	/**
+	 * An array of tlds
+	 */
+	tlds?: readonly string[];
+
+	/**
+	 * Domain category slug
+	 */
+	category_slug?: string;
 }
 
 export type DomainName = string;
@@ -60,49 +73,173 @@ export interface DomainSuggestion {
 	 */
 	domain_name: DomainName;
 
+	/**
+	 * Rendered formatted cost
+	 *
+	 * @example "Free" or "€15.00"
+	 */
+	cost: string;
+
+	/**
+	 * Raw price
+	 *
+	 * @example 40
+	 */
+	raw_price: number;
+
+	/**
+	 * Currency code
+	 *
+	 * @example USD
+	 */
+	currency_code: string;
+
 	/**
 	 * Relevance as a percent: 0 <= relevance <= 1
 	 *
 	 * @example 0.9
 	 */
-	relevance: number;
+	relevance?: number;
 
 	/**
 	 * Whether the domain supports privacy
 	 */
-	supports_privacy: boolean;
+	supports_privacy?: boolean;
 
 	/**
 	 * The domain vendor
 	 */
-	vendor: string;
+	vendor?: string;
 
 	/**
 	 * Reasons for suggestion the domain
 	 *
 	 * @example [ "exact-match" ]
 	 */
-	match_reasons: string[];
+	match_reasons?: readonly string[];
+
+	/**
+	 * The product ID
+	 */
+	product_id?: number;
+
+	/**
+	 * The product slug
+	 */
+	product_slug?: string;
+
+	/**
+	 * Whether the domain is free
+	 */
+	is_free?: boolean;
+
+	/**
+	 * Whether the domain requires HSTS
+	 */
+	hsts_required?: boolean;
+
+	/**
+	 * Whether the domain is unavailable
+	 */
+	unavailable: boolean;
+}
+export interface DomainCategory {
+	/**
+	 * The domain category title
+	 */
+	title: string;
+
+	/**
+	 * The domain category slug
+	 */
+	slug: string;
+
+	/**
+	 * The domain category tier
+	 */
+	tier: number | null;
+}
+
+export interface DomainAvailability {
+	/**
+	 * The domain name the availability was checked for.
+	 */
+	domain_name: string;
+
+	/**
+	 * The mappability status of the domain.
+	 */
+	mappable: string;
+
+	/**
+	 * The availability status of the domain.
+	 */
+	status: string;
+
+	/**
+	 * Whether the domain supports privacy.
+	 */
+	supports_privacy: boolean;
+
+	/**
+	 * ID of the product
+	 */
+	product_id?: number;
+
+	/**
+	 * The product slug
+	 */
+	product_slug?: string;
 
 	/**
 	 * Rendered cost with currency
 	 *
 	 * @example "€15.00"
 	 */
-	cost: string;
+	cost?: string;
 
 	/**
-	 * The product ID
+	 * Vendor
 	 */
-	product_id: number;
+	vendor?: string;
 
 	/**
-	 * The product slug
+	 * Whether the domain requires HSTS
+	 */
+	hsts_required?: boolean;
+}
+
+export type TimestampMS = ReturnType< typeof Date.now >;
+
+export type DomainSuggestions = Record< string, DomainSuggestion[] | undefined >;
+
+export interface DomainSuggestionState {
+	/**
+	 * The state of the DomainSuggestions e.g. pending, failure etc
 	 */
-	product_slug: string;
+	state: DataStatus;
 
 	/**
-	 * Whether the domain is free
+	 * Domain suggestion data typically returned from the API
 	 */
-	is_free?: true;
+	data: DomainSuggestions;
+
+	/**
+	 * Error message
+	 */
+	errorMessage: string | null;
+
+	/**
+	 * Timestamp from last updated attempt
+	 */
+	lastUpdated: TimestampMS;
+
+	/**
+	 * Pending timestamp
+	 */
+	pendingSince: TimestampMS | undefined;
 }
+
+export type DomainAvailabilities = Record< string, DomainAvailability | undefined >;
+
+export type DomainSuggestionSelectorOptions = Partial< Exclude< DomainSuggestionQuery, 'query' > >;

package/src/domain-suggestions/utils.ts

@@ -1,18 +1,57 @@
+import formatCurrency from '@automattic/format-currency';
+import deterministicStringify from 'fast-json-stable-stringify';
+import type { DomainSuggestionQuery, DomainSuggestionSelectorOptions } from './types';
+
 /**
- * External dependencies
+ * Stable transform to an object key for storage and access.
+ *
+ * @see client/state/domains/suggestions/utils.js
  */
-import deterministicStringify from 'fast-json-stable-stringify';
+export const stringifyDomainQueryObject: ( q: DomainSuggestionQuery ) => string =
+	deterministicStringify;
 
 /**
- * Internal dependencies
+ * Formats the domain suggestion price according to 'format-currency' package rules
+ * We use this for consistency in prices formats across plans and domains
+ *
+ * @param price the domain suggestion raw price
+ * @param currencyCode the currency code to be used when formatting price
  */
-import { DomainSuggestionQuery } from './types';
+export function getFormattedPrice( price: number, currencyCode: string ): string {
+	return formatCurrency( price, currencyCode, {
+		stripZeros: true,
+	} ) as string;
+}
 
 /**
- * Stable transform to an object key for storage and access.
+ * Normalize domain query
+ *
+ * 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
  */
-export const stringifyDomainQueryObject: (
-	q: DomainSuggestionQuery
-) => string = deterministicStringify;
+export function normalizeDomainSuggestionQuery(
+	search: string,
+	queryOptions: DomainSuggestionSelectorOptions
+): DomainSuggestionQuery {
+	return {
+		// Defaults
+		include_wordpressdotcom: queryOptions.only_wordpressdotcom || false,
+		include_dotblogsubdomain: false,
+		only_wordpressdotcom: false,
+		quantity: 5,
+		vendor: 'variation2_front',
+
+		// Merge options
+		...queryOptions,
+
+		// Add the search query
+		query: search.trim().toLocaleLowerCase(),
+	};
+}

package/src/help-center/README.md

@@ -0,0 +1,11 @@
+# Help Center store
+
+This store includes behavior for handling the help center.
+
+## Usage
+
+```js
+import { HelpCenter } from '@automattic/data-stores';
+
+const HELPCENTER_STORE = HelpCenter.register();
+```

package/src/help-center/actions.ts

@@ -0,0 +1,72 @@
+import { SiteDetails } from '../site';
+
+export const setShowHelpCenter = ( show: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_SHOW',
+		show,
+	} as const );
+
+export const setDirectlyData = ( data: { isLoaded: boolean; hasSession: boolean } ) =>
+	( {
+		type: 'HELP_CENTER_SET_DIRECTLY_DATA',
+		data,
+	} as const );
+
+export const setSite = ( site: SiteDetails | undefined ) =>
+	( {
+		type: 'HELP_CENTER_SET_SITE',
+		site,
+	} as const );
+
+export const setSubject = ( subject: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_SUBJECT',
+		subject,
+	} as const );
+
+export const setMessage = ( message: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_MESSAGE',
+		message,
+	} as const );
+
+export const setPopup = ( popup: Window ) =>
+	( {
+		type: 'HELP_CENTER_SET_POPUP',
+		popup,
+	} as const );
+
+export const resetPopup = () =>
+	( {
+		type: 'HELP_CENTER_RESET_POPUP',
+	} as const );
+
+export const setUserDeclaredSiteUrl = ( url: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_USER_DECLARED_SITE_URL',
+		url,
+	} as const );
+
+export const setUserDeclaredSite = ( site: SiteDetails | undefined ) =>
+	( {
+		type: 'HELP_CENTER_SET_USER_DECLARED_SITE',
+		site,
+	} as const );
+
+export const resetStore = () =>
+	( {
+		type: 'HELP_CENTER_RESET_STORE',
+	} as const );
+
+export type HelpCenterAction = ReturnType<
+	| typeof setShowHelpCenter
+	| typeof setDirectlyData
+	| typeof setSite
+	| typeof setSubject
+	| typeof resetStore
+	| typeof setMessage
+	| typeof setUserDeclaredSite
+	| typeof setUserDeclaredSiteUrl
+	| typeof resetPopup
+	| typeof setPopup
+>;

package/src/help-center/constants.ts

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

package/src/help-center/index.ts

@@ -0,0 +1,30 @@
+import { registerStore } from '@wordpress/data';
+import { controls } from '@wordpress/data-controls';
+import * as actions from './actions';
+import { STORE_KEY } from './constants';
+import reducer, { State } from './reducer';
+import * as selectors from './selectors';
+export type { State };
+import type { SelectFromMap, DispatchFromMap } from '../mapped-types';
+
+let isRegistered = false;
+
+export function register(): typeof STORE_KEY {
+	if ( ! isRegistered ) {
+		registerStore< State >( STORE_KEY, {
+			actions,
+			reducer: reducer as any, // eslint-disable-line @typescript-eslint/no-explicit-any
+			controls,
+			selectors,
+			persist: [ 'site' ],
+		} );
+		isRegistered = true;
+	}
+
+	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/help-center/reducer.ts

@@ -0,0 +1,98 @@
+import { combineReducers } from '@wordpress/data';
+import { SiteDetails } from '../site';
+import type { HelpCenterAction } from './actions';
+import type { Reducer } from 'redux';
+
+const showHelpCenter: Reducer< boolean | undefined, HelpCenterAction > = ( state, action ) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_SHOW':
+			return action.show;
+	}
+	return state;
+};
+
+const directlyData: Reducer<
+	{ isLoaded: boolean; hasSession: boolean } | undefined,
+	HelpCenterAction
+> = ( state, action ) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_DIRECTLY_DATA':
+			return action.data;
+	}
+	return state;
+};
+
+const site: Reducer< SiteDetails | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_RESET_STORE' ) {
+		return undefined;
+	} else if ( action.type === 'HELP_CENTER_SET_SITE' ) {
+		return action.site;
+	}
+	return state;
+};
+
+const subject: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_RESET_STORE' ) {
+		return undefined;
+	} else if ( action.type === 'HELP_CENTER_SET_SUBJECT' ) {
+		return action.subject;
+	}
+	return state;
+};
+
+const message: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_RESET_STORE' ) {
+		return undefined;
+	} else if ( action.type === 'HELP_CENTER_SET_MESSAGE' ) {
+		return action.message;
+	}
+	return state;
+};
+
+const userDeclaredSiteUrl: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_RESET_STORE' ) {
+		return undefined;
+	} else if ( action.type === 'HELP_CENTER_SET_USER_DECLARED_SITE_URL' ) {
+		return action.url;
+	}
+	return state;
+};
+
+const userDeclaredSite: Reducer< SiteDetails | undefined, HelpCenterAction > = (
+	state,
+	action
+) => {
+	if ( action.type === 'HELP_CENTER_RESET_STORE' ) {
+		return undefined;
+	} else if ( action.type === 'HELP_CENTER_SET_USER_DECLARED_SITE' ) {
+		return action.site;
+	}
+	return state;
+};
+
+const popup: Reducer< Window | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_SET_POPUP' ) {
+		return action.popup;
+	} else if (
+		action.type === 'HELP_CENTER_RESET_POPUP' ||
+		action.type === 'HELP_CENTER_RESET_STORE'
+	) {
+		return undefined;
+	}
+	return state;
+};
+
+const reducer = combineReducers( {
+	directlyData,
+	showHelpCenter,
+	site,
+	subject,
+	message,
+	userDeclaredSite,
+	userDeclaredSiteUrl,
+	popup,
+} );
+
+export type State = ReturnType< typeof reducer >;
+
+export default reducer;

package/src/help-center/selectors.ts

@@ -0,0 +1,10 @@
+import type { State } from './reducer';
+
+export const isHelpCenterShown = ( state: State ) => state.showHelpCenter;
+export const getSite = ( state: State ) => state.site;
+export const getSubject = ( state: State ) => state.subject;
+export const getMessage = ( state: State ) => state.message;
+export const getUserDeclaredSiteUrl = ( state: State ) => state.userDeclaredSiteUrl;
+export const getPopup = ( state: State ) => state.popup;
+export const getDirectly = ( state: State ) => state.directlyData;
+export const getUserDeclaredSite = ( state: State ) => state.userDeclaredSite;

package/src/i18n/actions.ts

@@ -0,0 +1,13 @@
+import type { LocalizedLanguageNames } from './types';
+
+export const setLocalizedLanguageNames = (
+	i18nLocale: string,
+	localizedLanguageNames: LocalizedLanguageNames
+) =>
+	( {
+		type: 'SET_LOCALIZED_LANGUAGE_NAMES' as const,
+		localizedLanguageNames,
+		i18nLocale,
+	} as const );
+
+export type I18nAction = ReturnType< typeof setLocalizedLanguageNames >;

package/src/i18n/constants.ts

@@ -0,0 +1,2 @@
+export const STORE_KEY = 'automattic/i18n';
+export const LANGUAGE_NAMES_URL = 'https://public-api.wordpress.com/wpcom/v2/i18n/language-names';

package/src/i18n/index.ts

@@ -0,0 +1,32 @@
+import { registerStore } from '@wordpress/data';
+import { controls } from '@wordpress/data-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 { SelectFromMap, DispatchFromMap } from '../mapped-types';
+
+export type { State };
+export type { LocalizedLanguageNames } from './types';
+
+let isRegistered = false;
+
+export function register(): typeof STORE_KEY {
+	if ( ! isRegistered ) {
+		isRegistered = true;
+		registerStore< State >( STORE_KEY, {
+			resolvers,
+			actions,
+			controls,
+			reducer: reducer as any,
+			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 >;
+}