@automattic/data-stores 3.1.0 → 3.1.2

package/src/help-center/actions.ts

@@ -1,39 +1,34 @@
-import { apiFetch } from '@wordpress/data-controls';
-import { canAccessWpcomApis } from 'wpcom-proxy-request';
+import { default as apiFetchPromise } from '@wordpress/api-fetch';
+import { select } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
+import { default as wpcomRequestPromise, 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 receiveHasSeenWhatsNewModal = ( value: boolean | undefined ) =>
-	( {
-		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 );
-	}
+import { STORE_KEY } from './constants';
+import { isE2ETest } from '.';
+import type {
+	APIFetchOptions,
+	HelpCenterOptions,
+	HelpCenterSelect,
+	HelpCenterShowOptions,
+} from './types';
+import type { SupportInteraction } from '@automattic/odie-client/src/types';
+import type { Location } from 'history';
+
+export function setCurrentSupportInteraction( supportInteraction: SupportInteraction ) {
+	return {
+		type: 'HELP_CENTER_SET_CURRENT_SUPPORT_INTERACTION',
+		supportInteraction,
+	} as const;
+}
 
-	return receiveHasSeenWhatsNewModal( response.has_seen_whats_new_modal );
+export function setHelpCenterRouterHistory(
+	history: { entries: Location[]; index: number } | undefined
+) {
+	return {
+		type: 'HELP_CENTER_SET_HELP_CENTER_ROUTER_HISTORY',
+		history,
+	} as const;
 }
 
 export const setNavigateToRoute = ( route?: string ) =>
@@ -72,6 +67,18 @@ export const setIsChatLoaded = ( isChatLoaded: boolean ) =>
 		isChatLoaded,
 	} ) as const;
 
+export const setAreSoundNotificationsEnabled = ( areSoundNotificationsEnabled: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_ARE_SOUND_NOTIFICATIONS_ENABLED',
+		areSoundNotificationsEnabled,
+	} ) as const;
+
+export const setZendeskClientId = ( zendeskClientId: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_ZENDESK_CLIENT_ID',
+		zendeskClientId,
+	} ) as const;
+
 export const setShowMessagingLauncher = ( show: boolean ) =>
 	( {
 		type: 'HELP_CENTER_SET_SHOW_MESSAGING_LAUNCHER',
@@ -84,15 +91,93 @@ export const setShowMessagingWidget = ( show: boolean ) =>
 		show,
 	} ) as const;
 
-export const setShowHelpCenter = function* ( show: boolean ) {
+export const setMessage = ( message: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_MESSAGE',
+		message,
+	} ) as const;
+
+export const setContextTerm = ( contextTerm: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_CONTEXT_TERM',
+		contextTerm,
+	} ) as const;
+
+export const setAllowPremiumSupport = ( allow: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_ALLOW_PREMIUM_SUPPORT',
+		allow,
+	} ) as const;
+
+export const setHelpCenterOptions = ( options: HelpCenterOptions ) => ( {
+	type: 'HELP_CENTER_SET_OPTIONS' as const,
+	options,
+} );
+
+export const setShowHelpCenter = function* (
+	show: boolean,
+	allowPremiumSupport = false,
+	options: HelpCenterShowOptions = { hideBackButton: false, contextTerm: '' }
+): Generator< unknown, { type: 'HELP_CENTER_SET_SHOW'; show: boolean }, unknown > {
+	const isMinimized = ( select( STORE_KEY ) as HelpCenterSelect ).getIsMinimized();
+
+	if ( ! show && isMinimized ) {
+		yield setIsMinimized( false );
+
+		return {
+			type: 'HELP_CENTER_SET_SHOW',
+			show: true,
+		} as const;
+	}
+
+	if ( ! isE2ETest() ) {
+		if ( canAccessWpcomApis() ) {
+			// Use the promise version to do that action without waiting for the result.
+			wpcomRequestPromise( {
+				path: '/me/preferences',
+				apiNamespace: 'wpcom/v2',
+				method: 'PUT',
+				body: {
+					calypso_preferences: {
+						help_center_open: show,
+						// Delete the remote version of the navigation history when closing the help center
+						...( ! show ? { help_center_router_history: null } : {} ),
+					},
+				},
+			} ).catch( () => {} );
+		} else {
+			// Use the promise version to do that action without waiting for the result.
+			apiFetchPromise( {
+				global: true,
+				path: '/help-center/open-state',
+				method: 'PUT',
+				data: {
+					help_center_open: show, // Delete the remote version of the navigation history when closing the help center
+					...( ! show ? { help_center_router_history: null } : {} ),
+				},
+			} as APIFetchOptions ).catch( () => {} );
+		}
+	}
+
 	if ( ! show ) {
 		yield setNavigateToRoute( undefined );
+		// Reset the local navigation history when closing the help center
+		yield setHelpCenterRouterHistory( undefined );
 	} else {
 		yield setShowMessagingWidget( false );
 	}
 
+	yield setContextTerm( options?.contextTerm || '' );
 	yield setIsMinimized( false );
 
+	if ( allowPremiumSupport ) {
+		yield setAllowPremiumSupport( true );
+	}
+
+	if ( options?.hideBackButton ) {
+		yield setHelpCenterOptions( options );
+	}
+
 	return {
 		type: 'HELP_CENTER_SET_SHOW',
 		show,
@@ -105,12 +190,6 @@ export const setSubject = ( subject: string ) =>
 		subject,
 	} ) as const;
 
-export const setMessage = ( message: string ) =>
-	( {
-		type: 'HELP_CENTER_SET_MESSAGE',
-		message,
-	} ) as const;
-
 export const setUserDeclaredSiteUrl = ( url: string ) =>
 	( {
 		type: 'HELP_CENTER_SET_USER_DECLARED_SITE_URL',
@@ -128,11 +207,34 @@ export const resetStore = () =>
 		type: 'HELP_CENTER_RESET_STORE',
 	} ) as const;
 
-export const setShowMessagingChat = function* () {
-	yield setShowHelpCenter( false );
-	yield setShowMessagingLauncher( true );
-	yield setShowMessagingWidget( true );
-	yield resetStore();
+export const setNewMessagingChat = function* ( {
+	initialMessage,
+	section,
+	siteUrl,
+	siteId,
+	userFieldFlowName,
+}: {
+	initialMessage: string;
+	section?: string;
+	siteUrl?: string;
+	siteId?: string;
+	userFieldFlowName?: string;
+} ) {
+	const url = addQueryArgs( '/odie', {
+		provider: 'zendesk',
+		userFieldMessage: initialMessage,
+		section,
+		siteUrl,
+		siteId,
+		userFieldFlowName,
+	} );
+	yield setNavigateToRoute( url );
+	yield setShowHelpCenter( true );
+};
+
+export const setNavigateToOdie = function* () {
+	yield setNavigateToRoute( '/odie' );
+	yield setShowHelpCenter( true );
 };
 
 export const setShowSupportDoc = function* ( link: string, postId?: number, blogId?: number ) {
@@ -153,15 +255,21 @@ export type HelpCenterAction =
 			| typeof setShowMessagingWidget
 			| typeof setSubject
 			| typeof resetStore
-			| typeof receiveHasSeenWhatsNewModal
 			| typeof setMessage
+			| typeof setContextTerm
 			| typeof setUserDeclaredSite
 			| typeof setUserDeclaredSiteUrl
 			| typeof setUnreadCount
 			| typeof setIsMinimized
+			| typeof setHelpCenterRouterHistory
 			| typeof setIsChatLoaded
+			| typeof setAreSoundNotificationsEnabled
+			| typeof setZendeskClientId
 			| typeof setNavigateToRoute
 			| typeof setOdieInitialPromptText
 			| typeof setOdieBotNameSlug
+			| typeof setCurrentSupportInteraction
+			| typeof setAllowPremiumSupport
+			| typeof setHelpCenterOptions
 	  >
-	| GeneratorReturnType< typeof setShowHelpCenter | typeof setHasSeenWhatsNewModal >;
+	| GeneratorReturnType< typeof setShowHelpCenter >;

package/src/help-center/index.ts

@@ -5,12 +5,44 @@ import { controls as wpcomRequestControls } from '../wpcom-request-controls';
 import * as actions from './actions';
 import { STORE_KEY } from './constants';
 import reducer, { State } from './reducer';
+import { isHelpCenterShown } from './resolvers';
 import * as selectors from './selectors';
 export type { State };
 
+declare const helpCenterData: { isProxied: boolean; isSU: boolean; isSSP: boolean } | undefined;
+declare const isSupportSession: boolean;
+declare const isSSP: boolean;
+
 let isRegistered = false;
 
+// All end-to-end tests use a custom user agent containing this string.
+const E2E_USER_AGENT = 'wp-e2e-tests';
+
+export const isE2ETest = () =>
+	typeof window !== 'undefined' && window.navigator.userAgent.includes( E2E_USER_AGENT );
+
+export const isInSupportSession = () => {
+	if ( typeof window !== 'undefined' ) {
+		return (
+			// A bit hacky but much easier than passing down data from PHP in Jetpack
+			// Simple
+			!! document.querySelector( '#wp-admin-bar-support-session-details' ) ||
+			!! document.querySelector( '#a8c-support-session-overlay' ) ||
+			// Atomic
+			document.body.classList.contains( 'support-session' ) ||
+			document.querySelector( '#wpcom > .is-support-session' ) ||
+			( typeof isSupportSession !== 'undefined' && !! isSupportSession ) ||
+			( typeof helpCenterData !== 'undefined' && helpCenterData?.isSU ) ||
+			( typeof helpCenterData !== 'undefined' && helpCenterData?.isSSP ) ||
+			( typeof isSSP !== 'undefined' && !! isSSP )
+		);
+	}
+	return false;
+};
+
 export function register(): typeof STORE_KEY {
+	const enabledPersistedOpenState = ! isE2ETest() && ! isInSupportSession();
+
 	registerPlugins();
 
 	if ( ! isRegistered ) {
@@ -20,6 +52,8 @@ export function register(): typeof STORE_KEY {
 			controls: { ...controls, ...wpcomRequestControls },
 			selectors,
 			persist: [ 'message', 'userDeclaredSite', 'userDeclaredSiteUrl', 'subject' ],
+			// Don't persist the open state for e2e users, because parallel tests will start interfering with each other.
+			resolvers: enabledPersistedOpenState ? { isHelpCenterShown } : undefined,
 		} );
 		isRegistered = true;
 	}

package/src/help-center/reducer.ts

@@ -1,6 +1,9 @@
 import { combineReducers } from '@wordpress/data';
 import { SiteDetails } from '../site';
 import type { HelpCenterAction } from './actions';
+import type { HelpCenterOptions } from './types';
+import type { SupportInteraction } from '@automattic/odie-client/src/types';
+import type { Location } from 'history';
 import type { Reducer } from 'redux';
 
 const showHelpCenter: Reducer< boolean | undefined, HelpCenterAction > = ( state, action ) => {
@@ -22,6 +25,17 @@ const showMessagingLauncher: Reducer< boolean | undefined, HelpCenterAction > =
 	return state;
 };
 
+const helpCenterRouterHistory: Reducer<
+	{ entries: Location[]; index: number } | undefined,
+	HelpCenterAction
+> = ( state, action ) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_HELP_CENTER_ROUTER_HISTORY':
+			return action.history;
+	}
+	return state;
+};
+
 const showMessagingWidget: Reducer< boolean | undefined, HelpCenterAction > = ( state, action ) => {
 	switch ( action.type ) {
 		case 'HELP_CENTER_SET_SHOW_MESSAGING_WIDGET':
@@ -30,13 +44,12 @@ const showMessagingWidget: Reducer< boolean | undefined, HelpCenterAction > = (
 	return state;
 };
 
-const hasSeenWhatsNewModal: Reducer< boolean | undefined, HelpCenterAction > = (
+const currentSupportInteraction: Reducer< SupportInteraction | undefined, HelpCenterAction > = (
 	state,
 	action
 ) => {
-	switch ( action.type ) {
-		case 'HELP_CENTER_SET_SEEN_WHATS_NEW_MODAL':
-			return action.value;
+	if ( action.type === 'HELP_CENTER_SET_CURRENT_SUPPORT_INTERACTION' ) {
+		return action.supportInteraction;
 	}
 	return state;
 };
@@ -57,6 +70,25 @@ const isChatLoaded: Reducer< boolean, HelpCenterAction > = ( state = false, acti
 	return state;
 };
 
+const areSoundNotificationsEnabled: Reducer< boolean, HelpCenterAction > = (
+	state = true,
+	action
+) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_ARE_SOUND_NOTIFICATIONS_ENABLED':
+			return action.areSoundNotificationsEnabled;
+	}
+	return state;
+};
+
+const zendeskClientId: Reducer< string, HelpCenterAction > = ( state = '', action ) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_ZENDESK_CLIENT_ID':
+			return action.zendeskClientId;
+	}
+	return state;
+};
+
 const subject: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
 	if ( action.type === 'HELP_CENTER_RESET_STORE' ) {
 		return undefined;
@@ -129,7 +161,33 @@ const odieBotNameSlug: Reducer< string | undefined, HelpCenterAction > = ( state
 	return state;
 };
 
+const allowPremiumSupport: Reducer< boolean, HelpCenterAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_ALLOW_PREMIUM_SUPPORT':
+			return action.allow;
+	}
+	return state;
+};
+
+const contextTerm: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_SET_CONTEXT_TERM' ) {
+		return action.contextTerm;
+	}
+	return state;
+};
+
+const helpCenterOptions: Reducer< HelpCenterOptions, HelpCenterAction > = (
+	state = {},
+	action
+) => {
+	if ( action.type === 'HELP_CENTER_SET_OPTIONS' ) {
+		return { ...state, ...action.options };
+	}
+	return state;
+};
+
 const reducer = combineReducers( {
+	currentSupportInteraction,
 	showHelpCenter,
 	showMessagingLauncher,
 	showMessagingWidget,
@@ -137,13 +195,18 @@ const reducer = combineReducers( {
 	message,
 	userDeclaredSite,
 	userDeclaredSiteUrl,
-	hasSeenWhatsNewModal,
 	isMinimized,
 	isChatLoaded,
+	areSoundNotificationsEnabled,
+	zendeskClientId,
 	unreadCount,
 	navigateToRoute,
 	odieInitialPromptText,
 	odieBotNameSlug,
+	helpCenterRouterHistory,
+	allowPremiumSupport,
+	contextTerm,
+	helpCenterOptions,
 } );
 
 export type State = ReturnType< typeof reducer >;

package/src/help-center/resolvers.ts

@@ -0,0 +1,38 @@
+import { apiFetch } from '@wordpress/data-controls';
+import { canAccessWpcomApis } from 'wpcom-proxy-request';
+import { wpcomRequest } from '../wpcom-request-controls';
+import { setHelpCenterRouterHistory } from './actions';
+import type { APIFetchOptions } from './types';
+import type { Location } from 'history';
+
+export function* isHelpCenterShown() {
+	try {
+		const preferences: {
+			help_center_open: boolean;
+			help_center_router_history: {
+				entries: Location[];
+				index: number;
+			};
+		} = canAccessWpcomApis()
+			? yield wpcomRequest( {
+					path: '/me/preferences',
+					apiNamespace: 'wpcom/v2',
+			  } )
+			: yield apiFetch( {
+					global: true,
+					path: '/help-center/open-state',
+			  } as APIFetchOptions );
+
+		if ( preferences.help_center_router_history ) {
+			yield setHelpCenterRouterHistory( preferences.help_center_router_history );
+		}
+
+		// We only want to auto-open, we don't want to auto-close (and potentially overrule the user's action).
+		if ( preferences.help_center_open ) {
+			return {
+				type: 'HELP_CENTER_SET_SHOW',
+				show: true,
+			} as const;
+		}
+	} catch {}
+}

package/src/help-center/selectors.ts

@@ -10,7 +10,14 @@ export const getUserDeclaredSite = ( state: State ) => state.userDeclaredSite;
 export const getUnreadCount = ( state: State ) => state.unreadCount;
 export const getIsMinimized = ( state: State ) => state.isMinimized;
 export const getIsChatLoaded = ( state: State ) => state.isChatLoaded;
-export const getHasSeenWhatsNewModal = ( state: State ) => state.hasSeenWhatsNewModal;
+export const getAreSoundNotificationsEnabled = ( state: State ) =>
+	state.areSoundNotificationsEnabled;
+export const getZendeskClientId = ( state: State ) => state.zendeskClientId;
+export const getHelpCenterRouterHistory = ( state: State ) => state.helpCenterRouterHistory;
 export const getNavigateToRoute = ( state: State ) => state.navigateToRoute;
 export const getOdieInitialPromptText = ( state: State ) => state.odieInitialPromptText;
 export const getOdieBotNameSlug = ( state: State ) => state.odieBotNameSlug;
+export const getCurrentSupportInteraction = ( state: State ) => state.currentSupportInteraction;
+export const getAllowPremiumSupport = ( state: State ) => state.allowPremiumSupport;
+export const getHelpCenterOptions = ( state: State ) => state.helpCenterOptions;
+export const getContextTerm = ( state: State ) => state.contextTerm;

package/src/help-center/types.ts

@@ -9,7 +9,10 @@ export type Location = {
 	state?: unknown;
 	key?: string;
 };
-
+export interface HelpCenterShowOptions {
+	hideBackButton: boolean;
+	contextTerm: string;
+}
 export interface SiteLogo {
 	id: number;
 	sizes: never[];
@@ -24,10 +27,12 @@ export interface HelpCenterSite {
 	ID: number | string;
 	name: string;
 	URL: string;
+	domain: string;
 	plan: Plan;
 	is_wpcom_atomic: boolean;
 	jetpack: boolean;
 	logo: SiteLogo;
+	site_owner: number;
 	options: {
 		launchpad_screen: string;
 		site_intent: string;
@@ -45,3 +50,7 @@ export interface APIFetchOptions {
 }
 
 export type HelpCenterSelect = SelectFromMap< typeof selectors >;
+
+export interface HelpCenterOptions {
+	hideBackButton?: boolean;
+}

package/src/index.ts

@@ -1,9 +1,6 @@
 import * as AddOns from './add-ons';
-import * as Analyzer from './analyzer';
-import * as AutomatedTransferEligibility from './automated-transfer-eligibility';
 import * as DomainSuggestions from './domain-suggestions';
 import * as HelpCenter from './help-center';
-import * as LaunchpadNavigator from './launchpad-navigator';
 import * as Onboard from './onboard';
 import * as Plans from './plans';
 import * as ProductsList from './products-list';
@@ -28,30 +25,27 @@ export * from './theme';
 export * from './user/types';
 export * from './wpcom-plans-ui/types';
 export * from './queries/use-launchpad';
-export * from './queries/use-launchpad-navigator';
 export * from './queries/use-all-domains-query';
 export * from './queries/use-site-domains-query';
 export * from './queries/use-site-query';
 export * from './mutations/use-domains-bulk-actions-mutation';
 export * from './queries/use-bulk-domain-update-status-query';
 export * from './site-reset';
+export { useNewsletterCategories } from './newsletter-categories';
 
 const { SubscriptionManager } = Reader;
 
 export {
 	AddOns,
-	Analyzer,
 	User,
 	DomainSuggestions,
 	HelpCenter,
-	LaunchpadNavigator,
 	Site,
 	Plans,
 	Purchases,
 	WpcomPlansUI,
 	Onboard,
 	ProductsList,
-	AutomatedTransferEligibility,
 	Reader,
 	StepperInternal,
 	Subscriber,
@@ -67,9 +61,14 @@ export type { Section } from './contextual-help/contextual-help';
 export { generateAdminSections } from './contextual-help/admin-sections';
 export type { LinksForSection } from './contextual-help/contextual-help';
 export * from './contextual-help/constants';
-export type { HelpCenterSite, HelpCenterSelect } from './help-center/types';
+export type {
+	HelpCenterSite,
+	HelpCenterSelect,
+	Dispatch as HelpCenterDispatch,
+} from './help-center/types';
 export type { OnboardSelect, OnboardActions } from './onboard';
 export type { StepperInternalSelect } from './stepper-internal';
 export type { SiteActions } from './site';
 export type { UserActions } from './user';
 export type { Member, UseQuery, UsersQuery } from './users/types';
+export { isInSupportSession } from './help-center';

package/src/newsletter-categories/index.ts

@@ -0,0 +1,54 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import request from 'wpcom-proxy-request';
+
+export type NewsletterCategory = {
+	id: number;
+	name: string;
+	slug: string;
+	description: string;
+	parent: number;
+	subscribed?: boolean;
+};
+
+export type NewsletterCategories = {
+	enabled: boolean;
+	newsletterCategories: NewsletterCategory[];
+	error?: string;
+};
+
+type NewsletterCategoryResponse = {
+	enabled: boolean;
+	newsletter_categories: NewsletterCategory[];
+};
+
+/**
+ * React hook to fetch newsletter categories for a site.
+ */
+export const useNewsletterCategories = ( {
+	siteId,
+}: {
+	siteId?: string | number;
+} ): UseQueryResult< NewsletterCategories > => {
+	return useQuery( {
+		queryKey: [ 'newsletter-categories', siteId ] as const, // Make tuple readonly for better caching.
+		queryFn: async () => {
+			try {
+				const response = await request< NewsletterCategoryResponse >( {
+					path: `/sites/${ siteId }/newsletter-categories`,
+					apiNamespace: 'wpcom/v2',
+				} );
+				return {
+					enabled: response.enabled,
+					newsletterCategories: response.newsletter_categories,
+				};
+			} catch ( e ) {
+				return {
+					enabled: false,
+					newsletterCategories: [],
+					error: e instanceof Error ? e.message : 'Unknown error',
+				};
+			}
+		},
+		enabled: Boolean( siteId ),
+	} );
+};