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

package/src/domain-suggestions/actions.ts

@@ -9,20 +9,20 @@ export const receiveCategories = ( categories: DomainCategory[] ) =>
 	( {
 		type: 'RECEIVE_CATEGORIES',
 		categories,
-	} as const );
+	} ) as const;
 
 export const fetchDomainSuggestions = () =>
 	( {
 		type: 'FETCH_DOMAIN_SUGGESTIONS',
 		timeStamp: Date.now(),
-	} as const );
+	} ) as const;
 
 export const receiveDomainAvailability = ( domainName: string, availability: DomainAvailability ) =>
 	( {
 		type: 'RECEIVE_DOMAIN_AVAILABILITY',
 		domainName,
 		availability,
-	} as const );
+	} ) as const;
 
 export const receiveDomainSuggestionsSuccess = (
 	queryObject: DomainSuggestionQuery,
@@ -33,14 +33,14 @@ export const receiveDomainSuggestionsSuccess = (
 		queryObject,
 		suggestions,
 		timeStamp: Date.now(),
-	} as const );
+	} ) as const;
 
 export const receiveDomainSuggestionsError = ( errorMessage: string ) =>
 	( {
 		type: 'RECEIVE_DOMAIN_SUGGESTIONS_ERROR',
 		errorMessage,
 		timeStamp: Date.now(),
-	} as const );
+	} ) as const;
 
 export type Action = ReturnType<
 	| typeof receiveCategories

package/src/domain-suggestions/index.ts

@@ -5,10 +5,10 @@ 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 * from './constants';
+export * from './queries';
 export { getFormattedPrice } from './utils';
 export type { State };
 
@@ -17,18 +17,13 @@ let isRegistered = false;
 export function register(): typeof STORE_KEY {
 	if ( ! isRegistered ) {
 		isRegistered = true;
-		registerStore< State >( STORE_KEY, {
+		registerStore( STORE_KEY, {
 			actions,
-			controls: controls as any,
-			reducer: reducer as any,
+			controls,
+			reducer,
 			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/domain-suggestions/queries.ts

@@ -0,0 +1,85 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { stringify } from 'qs';
+import wpcomProxyRequest from 'wpcom-proxy-request';
+import { getFormattedPrice, normalizeDomainSuggestionQuery } from './utils';
+import type { DomainSuggestion, DomainSuggestionSelectorOptions } from './types';
+
+const STALE_TIME = 1000 * 60 * 5; // 5 minutes
+
+export function useGetDomainSuggestions(
+	search?: string | null,
+	searchOptions: DomainSuggestionSelectorOptions = {},
+	queryOptions = {}
+) {
+	const queryClient = useQueryClient();
+	const result = useQuery( {
+		queryKey: [ 'domain-suggestions', search, searchOptions ],
+		queryFn: async () => {
+			if ( ! search ) {
+				return [];
+			}
+			const queryObject = normalizeDomainSuggestionQuery( search, searchOptions );
+
+			const suggestions: DomainSuggestion[] = await wpcomProxyRequest( {
+				apiVersion: '1.1',
+				path: '/domains/suggestions',
+				query: stringify( queryObject ),
+			} );
+			if ( ! Array.isArray( suggestions ) ) {
+				throw new Error( 'Invalid response from the server' );
+			}
+
+			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 processedSuggestions;
+		},
+		enabled: !! search,
+		staleTime: STALE_TIME,
+		...queryOptions,
+	} );
+
+	return {
+		...result,
+		invalidateCache: () =>
+			queryClient.invalidateQueries( {
+				queryKey: [ 'domain-suggestions', search, searchOptions ],
+			} ),
+	};
+}
+
+/**
+ * Returns the expected *.wordpress.com for a given domain name
+ */
+export function useGetWordPressSubdomain( paidDomainName?: string | null ) {
+	return useGetDomainSuggestions( paidDomainName, {
+		quantity: 1,
+		include_wordpressdotcom: true,
+		include_dotblogsubdomain: false,
+		only_wordpressdotcom: false,
+		vendor: 'dot',
+	} );
+}
+
+/**
+ * Returns a custom .com domain suggestion for a given query
+ */
+export function useGetSingleCustomDotComDomainSuggestion( query?: string | null, locale?: string ) {
+	return useGetDomainSuggestions( query, {
+		quantity: 1,
+		include_wordpressdotcom: false,
+		include_dotblogsubdomain: false,
+		locale,
+		tlds: [ 'com' ],
+	} );
+}

package/src/domain-suggestions/selectors.ts

@@ -31,7 +31,13 @@ export const getDomainSuggestions = (
 	const normalizedQuery = normalizeDomainSuggestionQuery( search, options );
 
 	// We need to go through the `select` store to get the resolver action
-	return select( STORE_KEY ).__internalGetDomainSuggestions( normalizedQuery );
+	return (
+		select( STORE_KEY ) as {
+			__internalGetDomainSuggestions: (
+				queryObject: DomainSuggestionQuery
+			) => DomainSuggestion[] | undefined;
+		}
+	 ).__internalGetDomainSuggestions( normalizedQuery );
 };
 
 export const getDomainState = ( state: State ): DataStatus => {
@@ -51,14 +57,15 @@ export const isLoadingDomainSuggestions = (
 ): boolean => {
 	const normalizedQuery = normalizeDomainSuggestionQuery( search, options );
 
-	return select( 'core/data' ).isResolving( STORE_KEY, '__internalGetDomainSuggestions', [
-		normalizedQuery,
-	] );
+	return (
+		select( 'core/data' ) as {
+			isResolving: ( storeKey: string, resolverName: string, args: unknown[] ) => boolean;
+		}
+	 ).isResolving( STORE_KEY, '__internalGetDomainSuggestions', [ normalizedQuery ] );
 };
 
 /**
  * Do not use this selector. It is for internal use.
- *
  * @param state Store state
  * @param queryObject Normalized object representing the query
  * @returns suggestions

package/src/domain-suggestions/types.ts

@@ -1,9 +1,10 @@
+import * as selectors from './selectors';
 import type { DataStatus } from './constants';
+import type { SelectFromMap } from '../mapped-types';
 
 export interface DomainSuggestionQuery {
 	/**
 	 * True to include .blog subdomain suggestions
-	 *
 	 * @example
 	 * example.photo.blog
 	 */
@@ -11,12 +12,16 @@ export interface DomainSuggestionQuery {
 
 	/**
 	 * True to include WordPress.com subdomain suggestions
-	 *
 	 * @example
 	 * example.wordpress.com
 	 */
 	include_wordpressdotcom: boolean;
 
+	/**
+	 * True to include domains registered with wpcom in the response
+	 */
+	include_internal_move_eligible?: boolean;
+
 	/**
 	 * Localizes domain results, e.g., price format
 	 */
@@ -24,7 +29,6 @@ export interface DomainSuggestionQuery {
 
 	/**
 	 * True to only provide a wordpress.com subdomain
-	 *
 	 * @example
 	 * example.wordpress.com
 	 */
@@ -68,35 +72,30 @@ export type DomainName = string;
 export interface DomainSuggestion {
 	/**
 	 * The domain name
-	 *
 	 * @example "example.com"
 	 */
 	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;
@@ -113,7 +112,6 @@ export interface DomainSuggestion {
 
 	/**
 	 * Reasons for suggestion the domain
-	 *
 	 * @example [ "exact-match" ]
 	 */
 	match_reasons?: readonly string[];
@@ -138,10 +136,19 @@ export interface DomainSuggestion {
 	 */
 	hsts_required?: boolean;
 
+	/**
+	 * Whether the domain requires to show the notice for .gay tld
+	 */
+	is_dot_gay_notice_required?: boolean;
+
 	/**
 	 * Whether the domain is unavailable
 	 */
 	unavailable: boolean;
+
+	isRecommended?: boolean;
+	isBestAlternative?: boolean;
+	is_premium?: boolean;
 }
 export interface DomainCategory {
 	/**
@@ -193,7 +200,6 @@ export interface DomainAvailability {
 
 	/**
 	 * Rendered cost with currency
-	 *
 	 * @example "€15.00"
 	 */
 	cost?: string;
@@ -207,6 +213,11 @@ export interface DomainAvailability {
 	 * Whether the domain requires HSTS
 	 */
 	hsts_required?: boolean;
+
+	/**
+	 * Whether the domain requires to show the notice for .gay tld
+	 */
+	is_dot_gay_notice_required?: boolean;
 }
 
 export type TimestampMS = ReturnType< typeof Date.now >;
@@ -243,3 +254,5 @@ 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

@@ -4,7 +4,6 @@ import type { DomainSuggestionQuery, DomainSuggestionSelectorOptions } from './t
 
 /**
  * Stable transform to an object key for storage and access.
- *
  * @see client/state/domains/suggestions/utils.js
  */
 export const stringifyDomainQueryObject: ( q: DomainSuggestionQuery ) => string =
@@ -13,7 +12,6 @@ export const stringifyDomainQueryObject: ( q: DomainSuggestionQuery ) => string
 /**
  * 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
  */
@@ -28,10 +26,8 @@ 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

package/src/help-center/actions.ts

@@ -1,72 +1,160 @@
+import { apiFetch } from '@wordpress/data-controls';
+import { canAccessWpcomApis } from 'wpcom-proxy-request';
+import { GeneratorReturnType } from '../mapped-types';
 import { SiteDetails } from '../site';
+import { wpcomRequest } from '../wpcom-request-controls';
+import type { APIFetchOptions } from './types';
 
-export const setShowHelpCenter = ( show: boolean ) =>
+export const receiveHasSeenWhatsNewModal = ( value: boolean | undefined ) =>
 	( {
-		type: 'HELP_CENTER_SET_SHOW',
-		show,
-	} as const );
+		type: 'HELP_CENTER_SET_SEEN_WHATS_NEW_MODAL',
+		value,
+	} ) as const;
+
+export function* setHasSeenWhatsNewModal( value: boolean ) {
+	let response: {
+		has_seen_whats_new_modal: boolean;
+	};
+	if ( canAccessWpcomApis() ) {
+		response = yield wpcomRequest( {
+			path: `/block-editor/has-seen-whats-new-modal`,
+			apiNamespace: 'wpcom/v2',
+			method: 'PUT',
+			body: {
+				has_seen_whats_new_modal: value,
+			},
+		} );
+	} else {
+		response = yield apiFetch( {
+			global: true,
+			path: `/wpcom/v2/block-editor/has-seen-whats-new-modal`,
+			method: 'PUT',
+			data: { has_seen_whats_new_modal: value },
+		} as APIFetchOptions );
+	}
+
+	return receiveHasSeenWhatsNewModal( response.has_seen_whats_new_modal );
+}
 
-export const setDirectlyData = ( data: { isLoaded: boolean; hasSession: boolean } ) =>
+export const setNavigateToRoute = ( route?: string ) =>
 	( {
-		type: 'HELP_CENTER_SET_DIRECTLY_DATA',
-		data,
-	} as const );
+		type: 'HELP_CENTER_SET_NAVIGATE_TO_ROUTE',
+		route,
+	} ) as const;
 
-export const setSite = ( site: SiteDetails | undefined ) =>
+export const setUnreadCount = ( count: number ) =>
 	( {
-		type: 'HELP_CENTER_SET_SITE',
-		site,
-	} as const );
+		type: 'HELP_CENTER_SET_UNREAD_COUNT',
+		count,
+	} ) as const;
+
+export const setOdieInitialPromptText = ( text: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_ODIE_INITIAL_PROMPT_TEXT',
+		text,
+	} ) as const;
+
+export const setOdieBotNameSlug = ( odieBotNameSlug: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_ODIE_BOT_NAME_SLUG',
+		odieBotNameSlug,
+	} ) as const;
+
+export const setIsMinimized = ( minimized: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_MINIMIZED',
+		minimized,
+	} ) as const;
+
+export const setShowMessagingLauncher = ( show: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_SHOW_MESSAGING_LAUNCHER',
+		show,
+	} ) as const;
+
+export const setShowMessagingWidget = ( show: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_SHOW_MESSAGING_WIDGET',
+		show,
+	} ) as const;
+
+export const setShowHelpCenter = function* ( show: boolean ) {
+	if ( ! show ) {
+		yield setNavigateToRoute( undefined );
+	} else {
+		yield setShowMessagingWidget( false );
+	}
+
+	yield setIsMinimized( false );
+
+	return {
+		type: 'HELP_CENTER_SET_SHOW',
+		show,
+	} as const;
+};
 
 export const setSubject = ( subject: string ) =>
 	( {
 		type: 'HELP_CENTER_SET_SUBJECT',
 		subject,
-	} as const );
+	} ) 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 );
+	} ) as const;
 
 export const setUserDeclaredSiteUrl = ( url: string ) =>
 	( {
 		type: 'HELP_CENTER_SET_USER_DECLARED_SITE_URL',
 		url,
-	} as const );
+	} ) as const;
 
 export const setUserDeclaredSite = ( site: SiteDetails | undefined ) =>
 	( {
 		type: 'HELP_CENTER_SET_USER_DECLARED_SITE',
 		site,
-	} as const );
+	} ) 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
->;
+	} ) as const;
+
+export const setShowMessagingChat = function* () {
+	yield setShowHelpCenter( false );
+	yield setShowMessagingLauncher( true );
+	yield setShowMessagingWidget( true );
+	yield resetStore();
+};
+
+export const setShowSupportDoc = function* ( link: string, postId?: number, blogId?: number ) {
+	const params = new URLSearchParams( {
+		link,
+		...( postId && { postId: String( postId ) } ),
+		...( blogId && { blogId: String( blogId ) } ), // Conditionally add blogId if it exists, the default is support blog
+	} );
+
+	yield setNavigateToRoute( `/post/?${ params }` );
+	yield setShowHelpCenter( true );
+	yield setIsMinimized( false );
+};
+
+export type HelpCenterAction =
+	| ReturnType<
+			| typeof setShowMessagingLauncher
+			| typeof setShowMessagingWidget
+			| typeof setSubject
+			| typeof resetStore
+			| typeof receiveHasSeenWhatsNewModal
+			| typeof setMessage
+			| typeof setUserDeclaredSite
+			| typeof setUserDeclaredSiteUrl
+			| typeof setUnreadCount
+			| typeof setIsMinimized
+			| typeof setNavigateToRoute
+			| typeof setOdieInitialPromptText
+			| typeof setOdieBotNameSlug
+	  >
+	| GeneratorReturnType< typeof setShowHelpCenter | typeof setHasSeenWhatsNewModal >;

package/src/help-center/index.ts

@@ -1,22 +1,25 @@
 import { registerStore } from '@wordpress/data';
 import { controls } from '@wordpress/data-controls';
+import { registerPlugins } from '../plugins';
+import { controls as wpcomRequestControls } from '../wpcom-request-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 {
+	registerPlugins();
+
 	if ( ! isRegistered ) {
-		registerStore< State >( STORE_KEY, {
+		registerStore( STORE_KEY, {
 			actions,
-			reducer: reducer as any, // eslint-disable-line @typescript-eslint/no-explicit-any
-			controls,
+			reducer,
+			controls: { ...controls, ...wpcomRequestControls },
 			selectors,
-			persist: [ 'site' ],
+			persist: [ 'message', 'userDeclaredSite', 'userDeclaredSiteUrl', 'subject' ],
 		} );
 		isRegistered = true;
 	}
@@ -24,7 +27,4 @@ export function register(): typeof STORE_KEY {
 	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 >;
-}
+export type { HelpCenterSite } from './types';