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

package/src/domain-suggestions/actions.ts

@@ -1,13 +1,51 @@
-/**
- * Internal dependencies
- */
-import { ActionType, DomainSuggestion, DomainSuggestionQuery } from './types';
+import type {
+	DomainSuggestion,
+	DomainSuggestionQuery,
+	DomainCategory,
+	DomainAvailability,
+} from './types';
 
-export const receiveDomainSuggestions = (
+export const receiveCategories = ( categories: DomainCategory[] ) =>
+	( {
+		type: 'RECEIVE_CATEGORIES',
+		categories,
+	} as const );
+
+export const fetchDomainSuggestions = () =>
+	( {
+		type: 'FETCH_DOMAIN_SUGGESTIONS',
+		timeStamp: Date.now(),
+	} as const );
+
+export const receiveDomainAvailability = ( domainName: string, availability: DomainAvailability ) =>
+	( {
+		type: 'RECEIVE_DOMAIN_AVAILABILITY',
+		domainName,
+		availability,
+	} as const );
+
+export const receiveDomainSuggestionsSuccess = (
 	queryObject: DomainSuggestionQuery,
 	suggestions: DomainSuggestion[] | undefined
-) => ( {
-	type: ActionType.RECEIVE_DOMAIN_SUGGESTIONS as const,
-	queryObject,
-	suggestions,
-} );
+) =>
+	( {
+		type: 'RECEIVE_DOMAIN_SUGGESTIONS_SUCCESS',
+		queryObject,
+		suggestions,
+		timeStamp: Date.now(),
+	} as const );
+
+export const receiveDomainSuggestionsError = ( errorMessage: string ) =>
+	( {
+		type: 'RECEIVE_DOMAIN_SUGGESTIONS_ERROR',
+		errorMessage,
+		timeStamp: Date.now(),
+	} as const );
+
+export type Action = ReturnType<
+	| typeof receiveCategories
+	| typeof fetchDomainSuggestions
+	| typeof receiveDomainSuggestionsSuccess
+	| typeof receiveDomainSuggestionsError
+	| typeof receiveDomainAvailability
+>;

package/src/domain-suggestions/constants.ts

@@ -1 +1,8 @@
 export const STORE_KEY = 'automattic/domains/suggestions';
+
+export enum DataStatus {
+	Failure = 'failure',
+	Pending = 'pending',
+	Success = 'success',
+	Uninitialized = 'uninitialized',
+}

package/src/domain-suggestions/index.ts

@@ -1,29 +1,25 @@
-/**
- * External dependencies
- */
-import { controls } from '@wordpress/data-controls';
 import { registerStore } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
+import { controls } from '../wpcom-request-controls';
+import * as actions from './actions';
 import { STORE_KEY } from './constants';
 import reducer, { State } from './reducer';
-import * as actions from './actions';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
-import { DispatchFromMap, SelectFromMap } from '../mapped-types';
+import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 
 export * from './types';
-export { State };
+export * from './constants';
+export { getFormattedPrice } from './utils';
+export type { State };
 
 let isRegistered = false;
+
 export function register(): typeof STORE_KEY {
 	if ( ! isRegistered ) {
 		isRegistered = true;
 		registerStore< State >( STORE_KEY, {
 			actions,
-			controls,
+			controls: controls as any,
 			reducer: reducer as any,
 			resolvers,
 			selectors,

package/src/domain-suggestions/reducer.ts

@@ -1,30 +1,76 @@
-/**
- * External dependencies
- */
-import { Reducer } from 'redux';
 import { combineReducers } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { ActionType, DomainSuggestion } from './types';
-import * as Actions from './actions';
+import { DataStatus } from './constants';
 import { stringifyDomainQueryObject } from './utils';
+import type { Action } from './actions';
+import type { DomainCategory, DomainSuggestionState, DomainAvailabilities } from './types';
+import type { Reducer } from 'redux';
+
+const initialDomainSuggestionState: DomainSuggestionState = {
+	state: DataStatus.Uninitialized,
+	data: {},
+	errorMessage: null,
+	lastUpdated: -Infinity,
+	pendingSince: undefined,
+};
+
+export const domainSuggestions: Reducer< DomainSuggestionState, Action > = (
+	state = initialDomainSuggestionState,
+	action
+) => {
+	if ( action.type === 'FETCH_DOMAIN_SUGGESTIONS' ) {
+		return {
+			...state,
+			state: DataStatus.Pending,
+			errorMessage: null,
+			pendingSince: action.timeStamp,
+		};
+	}
+
+	if ( action.type === 'RECEIVE_DOMAIN_SUGGESTIONS_SUCCESS' ) {
+		return {
+			...state,
+			state: DataStatus.Success,
+			data: {
+				...state.data,
+				[ stringifyDomainQueryObject( action.queryObject ) ]: action.suggestions,
+			},
+			errorMessage: null,
+			lastUpdated: action.timeStamp,
+			pendingSince: undefined,
+		};
+	}
+
+	if ( action.type === 'RECEIVE_DOMAIN_SUGGESTIONS_ERROR' ) {
+		return {
+			...state,
+			state: DataStatus.Failure,
+			errorMessage: action.errorMessage,
+			lastUpdated: action.timeStamp,
+			pendingSince: undefined,
+		};
+	}
+
+	return state;
+};
+
+const categories: Reducer< DomainCategory[], Action > = ( state = [], action ) => {
+	if ( action.type === 'RECEIVE_CATEGORIES' ) {
+		return action.categories;
+	}
+	return state;
+};
 
-const domainSuggestions: Reducer<
-	Record< string, DomainSuggestion[] | undefined >,
-	ReturnType< typeof Actions[ 'receiveDomainSuggestions' ] >
-> = ( state = {}, action ) => {
-	if ( action.type === ActionType.RECEIVE_DOMAIN_SUGGESTIONS ) {
+const availability: Reducer< DomainAvailabilities, Action > = ( state = {}, action ) => {
+	if ( action.type === 'RECEIVE_DOMAIN_AVAILABILITY' ) {
 		return {
 			...state,
-			[ stringifyDomainQueryObject( action.queryObject ) ]: action.suggestions,
+			[ action.domainName ]: action.availability,
 		};
 	}
 	return state;
 };
 
-const reducer = combineReducers( { domainSuggestions } );
+const reducer = combineReducers( { categories, domainSuggestions, availability } );
 
 export type State = ReturnType< typeof reducer >;
 

package/src/domain-suggestions/resolvers.ts

@@ -1,35 +1,110 @@
-/**
- * External dependencies
- */
-import { addQueryArgs, InputArgsObject } from '@wordpress/url';
-import { apiFetch } from '@wordpress/data-controls';
-
-/**
- * Internal dependencies
- */
-import { receiveDomainSuggestions } from './actions';
-
-export function* __internalGetDomainSuggestions(
-	// Resolver has the same signature as corresponding selector without the initial state argument
-	queryObject: Parameters< typeof import('./selectors').__internalGetDomainSuggestions >[ 1 ]
-) {
-	const url = 'https://public-api.wordpress.com/rest/v1.1/domains/suggestions';
+import { translate } from 'i18n-calypso';
+import { stringify } from 'qs';
+import validator from 'validator';
+import { fetchAndParse, wpcomRequest } from '../wpcom-request-controls';
+import {
+	receiveCategories,
+	receiveDomainSuggestionsSuccess,
+	receiveDomainSuggestionsError,
+	fetchDomainSuggestions,
+	receiveDomainAvailability,
+} from './actions';
+import { getFormattedPrice } from './utils';
+import type { DomainSuggestion, DomainSuggestionQuery } from './types';
 
+function getAvailabilityURL( domainName: string ) {
+	return `https://public-api.wordpress.com/rest/v1.3/domains/${ encodeURIComponent(
+		domainName
+	) }/is-available?is_cart_pre_check=true`;
+}
+
+function suggestionsLackThisFQDN( suggestions: DomainSuggestion[], domainName: string ) {
+	return (
+		validator.isFQDN( domainName ) &&
+		! suggestions.some( ( s ) => s.domain_name.toLowerCase() === domainName )
+	);
+}
+
+export const isAvailable = function* isAvailable( domainName: string ) {
+	const url = getAvailabilityURL( domainName );
+
+	try {
+		const { body } = yield fetchAndParse( url );
+		return receiveDomainAvailability( domainName, body );
+	} catch {
+		// the API returns a status of 'unknown' if it can not accurately determine
+		// availability, we will return the same status if the API request fails.
+		return receiveDomainAvailability( domainName, {
+			domain_name: domainName,
+			mappable: 'unknown',
+			status: 'unknown',
+			supports_privacy: false,
+		} );
+	}
+};
+
+export function* getCategories() {
+	const { body } = yield fetchAndParse(
+		'https://public-api.wordpress.com/wpcom/v2/onboarding/domains/categories'
+	);
+	return receiveCategories( body );
+}
+
+export function* __internalGetDomainSuggestions( queryObject: DomainSuggestionQuery ) {
 	// If normalized search string (`query`) contains no alphanumerics, endpoint 404s
 	if ( ! queryObject.query ) {
-		return receiveDomainSuggestions( queryObject, [] );
+		return receiveDomainSuggestionsError( 'Empty query' );
 	}
 
-	// `credentials` and `mode` args are needed since we're accessing the WP.com REST API
-	// (rather than the WP Core REST API)
-	const suggestions = yield apiFetch( {
-		credentials: 'same-origin',
-		mode: 'cors',
-		// Cast so we can use our closed interface without an index type.
-		// It's likely the type definitions could be improved upstream to allow this:
-		// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/dd4b4bf26c3bf43ea2df913efe70a427969f3731/types/wordpress__url/index.d.ts#L7-L54
-		url: addQueryArgs( url, ( queryObject as unknown ) as InputArgsObject ),
-	} );
-
-	return receiveDomainSuggestions( queryObject, suggestions );
+	yield fetchDomainSuggestions();
+
+	try {
+		const suggestions: DomainSuggestion[] = yield wpcomRequest( {
+			apiVersion: '1.1',
+			path: '/domains/suggestions',
+			query: stringify( queryObject ),
+		} );
+
+		if ( ! Array.isArray( suggestions ) ) {
+			// Other internal server errors
+			return receiveDomainSuggestionsError(
+				translate( 'Invalid response from the server' ) as string
+			);
+		}
+
+		// if the query is a FQDN and the results don't have it,
+		// this implies that the user is searching for an unavailable domain name
+		// TODO: query the availability endpoint to find the exact reason why it's unavailable
+		// all the possible responses can be found here https://github.com/Automattic/wp-calypso/blob/trunk/client/lib/domains/registration/availability-messages.js#L40-L390
+		if ( suggestionsLackThisFQDN( suggestions, queryObject.query ) ) {
+			const unavailableSuggestion: DomainSuggestion = {
+				domain_name: queryObject.query,
+				unavailable: true,
+				cost: '',
+				raw_price: 0,
+				currency_code: '',
+			};
+			suggestions.unshift( unavailableSuggestion );
+		}
+
+		const processedSuggestions = suggestions.map( ( suggestion: DomainSuggestion ) => {
+			if ( suggestion.unavailable ) {
+				return suggestion;
+			}
+			return {
+				...suggestion,
+				...( suggestion.raw_price &&
+					suggestion.currency_code && {
+						cost: getFormattedPrice( suggestion.raw_price, suggestion.currency_code ),
+					} ),
+			};
+		} );
+
+		return receiveDomainSuggestionsSuccess( queryObject, processedSuggestions );
+	} catch ( e ) {
+		// e.g. no connection, or JSON parsing error
+		return receiveDomainSuggestionsError(
+			( e as Error ).message || ( translate( 'Error while fetching server response' ) as string )
+		);
+	}
 }

package/src/domain-suggestions/selectors.ts

@@ -1,36 +1,54 @@
-/**
- * External dependencies
- */
 import { select } from '@wordpress/data';
+import { STORE_KEY, DataStatus } from './constants';
+import { stringifyDomainQueryObject, normalizeDomainSuggestionQuery } from './utils';
+import type { State } from './reducer';
+import type {
+	DomainAvailability,
+	DomainAvailabilities,
+	DomainCategory,
+	DomainSuggestion,
+	DomainSuggestionQuery,
+	DomainSuggestionSelectorOptions,
+} from './types';
 
-/**
- * Internal dependencies
- */
-import { STORE_KEY } from './constants';
-import { DomainSuggestionQuery } from './types';
-import { State } from './reducer';
-import { stringifyDomainQueryObject } from './utils';
-
-export const getState = ( state: State ) => state;
-
-type DomainSuggestionSelectorOptions = Partial< Exclude< DomainSuggestionQuery, 'query' > >;
+export const getCategories = ( state: State ): DomainCategory[] => {
+	// Sort domain categories by tier, then by title.
+	return [
+		...state.categories
+			.filter( ( { tier } ) => tier !== null )
+			.sort( ( a, b ) => ( a > b ? 1 : -1 ) ),
+		...state.categories
+			.filter( ( { tier } ) => tier === null )
+			.sort( ( a, b ) => a.title.localeCompare( b.title ) ),
+	];
+};
 
 export const getDomainSuggestions = (
 	_state: State,
 	search: string,
 	options: DomainSuggestionSelectorOptions = {}
-) => {
+): DomainSuggestion[] | undefined => {
 	const normalizedQuery = normalizeDomainSuggestionQuery( search, options );
 
 	// We need to go through the `select` store to get the resolver action
 	return select( STORE_KEY ).__internalGetDomainSuggestions( normalizedQuery );
 };
 
+export const getDomainState = ( state: State ): DataStatus => {
+	return state.domainSuggestions.state;
+};
+
+export const getDomainErrorMessage = ( state: State ): string | null => {
+	return state.domainSuggestions.errorMessage;
+};
+
+// TODO: reconcile this function with "Pending" status?
+// It doesn't seem to be used
 export const isLoadingDomainSuggestions = (
 	_state: State,
 	search: string,
 	options: DomainSuggestionSelectorOptions = {}
-) => {
+): boolean => {
 	const normalizedQuery = normalizeDomainSuggestionQuery( search, options );
 
 	return select( 'core/data' ).isResolving( STORE_KEY, '__internalGetDomainSuggestions', [
@@ -41,8 +59,6 @@ export const isLoadingDomainSuggestions = (
 /**
  * Do not use this selector. It is for internal use.
  *
- * @private
- *
  * @param state Store state
  * @param queryObject Normalized object representing the query
  * @returns suggestions
@@ -50,39 +66,14 @@ export const isLoadingDomainSuggestions = (
 export const __internalGetDomainSuggestions = (
 	state: State,
 	queryObject: DomainSuggestionQuery
-) => {
-	return state.domainSuggestions[ stringifyDomainQueryObject( queryObject ) ];
+): DomainSuggestion[] | undefined => {
+	return state.domainSuggestions.data[ stringifyDomainQueryObject( queryObject ) ];
 };
 
-/**
- * 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
- */
-function normalizeDomainSuggestionQuery(
-	search: string,
-	queryOptions: DomainSuggestionSelectorOptions
-): DomainSuggestionQuery {
-	return {
-		// Defaults
-		include_wordpressdotcom: queryOptions.only_wordpressdotcom || false,
-		include_dotblogsubdomain: ! queryOptions.only_wordpressdotcom || false,
-		only_wordpressdotcom: false,
-		quantity: 5,
-		vendor: 'variation2_front',
-
-		// Merge options
-		...queryOptions,
+export const isAvailable = ( state: State, domainName: string ): DomainAvailability | undefined => {
+	return state.availability[ domainName ];
+};
 
-		// Add the search query
-		query: search.trim().toLocaleLowerCase(),
-	};
-}
+export const getDomainAvailabilities = ( state: State ): DomainAvailabilities => {
+	return state.availability;
+};

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

@@ -0,0 +1,105 @@
+import { DataStatus } from '../constants';
+import { domainSuggestions } from '../reducer';
+import type { DomainSuggestionState, DomainSuggestion } from '../types';
+
+describe( 'domainSuggestions', () => {
+	const initialTimeStamp = Date.now();
+	const initialState: DomainSuggestionState = {
+		state: DataStatus.Uninitialized,
+		data: undefined,
+		errorMessage: null,
+		lastUpdated: initialTimeStamp,
+		pendingSince: undefined,
+	};
+
+	it( 'goes into a state of pending when fetching results', () => {
+		const now = Date.now();
+		const state = domainSuggestions( initialState, {
+			type: 'FETCH_DOMAIN_SUGGESTIONS',
+			timeStamp: now,
+		} );
+
+		const expectedState: DomainSuggestionState = {
+			state: DataStatus.Pending,
+			data: undefined,
+			errorMessage: null,
+			lastUpdated: initialTimeStamp,
+			pendingSince: now,
+		};
+		expect( state ).toEqual( expectedState );
+	} );
+
+	it( 'goes into a state of errored when fetching results have failed', () => {
+		const now = Date.now();
+		const errorMessage = 'An unexpected error has occured';
+		const state = domainSuggestions( initialState, {
+			type: 'RECEIVE_DOMAIN_SUGGESTIONS_ERROR',
+			timeStamp: now,
+			errorMessage,
+		} );
+
+		const expectedState: DomainSuggestionState = {
+			state: DataStatus.Failure,
+			data: undefined,
+			errorMessage: errorMessage,
+			lastUpdated: now,
+			pendingSince: undefined,
+		};
+		expect( state ).toEqual( expectedState );
+	} );
+
+	it( 'goes into a state of success when fetching results have returned results', () => {
+		const queryObject = {
+			include_dotblogsubdomain: false,
+			include_wordpressdotcom: true,
+			locale: 'en',
+			only_wordpressdotcom: false,
+			quantity: 11,
+			query: 'test site',
+			vendor: 'variation4_front',
+		};
+		const suggestions: DomainSuggestion[] = [
+			{
+				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',
+				raw_price: 25,
+				currency_code: 'USD',
+			},
+			{
+				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',
+				raw_price: 18,
+				currency_code: 'USD',
+			},
+		];
+		const now = Date.now();
+		const state = domainSuggestions( initialState, {
+			type: 'RECEIVE_DOMAIN_SUGGESTIONS_SUCCESS',
+			queryObject,
+			suggestions,
+			timeStamp: now,
+		} );
+
+		const expectedState: DomainSuggestionState = {
+			state: DataStatus.Success,
+			data: { [ JSON.stringify( queryObject ) ]: suggestions },
+			errorMessage: null,
+			lastUpdated: now,
+			pendingSince: undefined,
+		};
+		expect( state ).toEqual( expectedState );
+		expect( state.data[ JSON.stringify( queryObject ) ].length ).toEqual( suggestions.length );
+	} );
+} );