@automattic/data-stores 3.2.0 → 3.2.1

package/src/agents-manager/test/persist-state.test.ts

@@ -0,0 +1,81 @@
+import apiFetch from '@wordpress/api-fetch';
+import wpcomRequest, { canAccessWpcomApis } from '../../wpcom-request';
+import { persistAgentsManagerState } from '../persist-state';
+
+jest.mock( '@wordpress/api-fetch', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+} ) );
+
+jest.mock( '../../wpcom-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+	canAccessWpcomApis: jest.fn(),
+} ) );
+
+const mockRequest = wpcomRequest as unknown as jest.Mock;
+const mockApiFetch = apiFetch as unknown as jest.Mock;
+const mockCanAccess = canAccessWpcomApis as unknown as jest.Mock;
+
+// Let the queued flush chain (microtasks) run to completion.
+const tick = () => new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+
+describe( 'persistAgentsManagerState', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockCanAccess.mockReturnValue( true );
+		mockRequest.mockResolvedValue( undefined );
+		mockApiFetch.mockResolvedValue( undefined );
+	} );
+
+	it( 'sends a single save as one wpcom request', async () => {
+		persistAgentsManagerState( { agents_manager_minimized: false } );
+
+		expect( mockRequest ).toHaveBeenCalledTimes( 1 );
+		expect( mockRequest ).toHaveBeenCalledWith(
+			expect.objectContaining( { body: { state: { agents_manager_minimized: false } } } )
+		);
+		await tick();
+	} );
+
+	it( 'coalesces saves that arrive mid-flight into one merged follow-up request', async () => {
+		let finishFirst: () => void = () => {};
+		mockRequest.mockReturnValueOnce(
+			new Promise< void >( ( resolve ) => ( finishFirst = resolve ) )
+		);
+
+		// First save goes out immediately and stays in flight.
+		persistAgentsManagerState( { agents_manager_router_history: 'a' } );
+		// These arrive while it's in flight — they must not race; they merge.
+		persistAgentsManagerState( { agents_manager_minimized: false } );
+		persistAgentsManagerState( { agents_manager_router_history: 'b' } );
+
+		expect( mockRequest ).toHaveBeenCalledTimes( 1 );
+
+		finishFirst();
+		await tick();
+
+		// One follow-up carrying the merged state (last value wins per key).
+		expect( mockRequest ).toHaveBeenCalledTimes( 2 );
+		expect( mockRequest ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				body: { state: { agents_manager_minimized: false, agents_manager_router_history: 'b' } },
+			} )
+		);
+	} );
+
+	it( 'falls back to apiFetch when wpcom APIs are unavailable', async () => {
+		mockCanAccess.mockReturnValue( false );
+
+		persistAgentsManagerState( { agents_manager_open: true } );
+
+		expect( mockRequest ).not.toHaveBeenCalled();
+		expect( mockApiFetch ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				path: '/agents-manager/open-state',
+				data: { agents_manager_open: true },
+			} )
+		);
+		await tick();
+	} );
+} );

package/src/agents-manager/test/reducer.test.ts

@@ -0,0 +1,69 @@
+import { isMinimized, isSplitScreen } from '../reducer';
+import { getIsMinimized, getIsSplitScreen } from '../selectors';
+import type { State } from '../reducer';
+
+const setSplit = ( isSplit: boolean ) =>
+	( { type: 'AGENTS_MANAGER_SET_SPLIT_SCREEN', isSplitScreen: isSplit } ) as const;
+
+const setMinimized = ( minimized: boolean ) =>
+	( { type: 'AGENTS_MANAGER_SET_MINIMIZED', isMinimized: minimized } ) as const;
+
+describe( 'isSplitScreen reducer slice', () => {
+	it( 'defaults to false', () => {
+		expect( isSplitScreen( undefined, { type: '@@INIT' } as never ) ).toBe( false );
+	} );
+
+	it( 'returns the action value on `AGENTS_MANAGER_SET_SPLIT_SCREEN`', () => {
+		expect( isSplitScreen( false, setSplit( true ) ) ).toBe( true );
+		expect( isSplitScreen( true, setSplit( false ) ) ).toBe( false );
+	} );
+
+	it( 'leaves state untouched on unrelated actions', () => {
+		expect(
+			isSplitScreen( true, { type: 'AGENTS_MANAGER_SET_OPEN', isOpen: false } as never )
+		).toBe( true );
+	} );
+
+	it( 'resets to false when the sidebar is undocked', () => {
+		const undock = { type: 'AGENTS_MANAGER_SET_DOCKED', isDocked: false } as never;
+		expect( isSplitScreen( true, undock ) ).toBe( false );
+	} );
+
+	it( 'preserves state when the sidebar is (re-)docked', () => {
+		const dock = { type: 'AGENTS_MANAGER_SET_DOCKED', isDocked: true } as never;
+		expect( isSplitScreen( true, dock ) ).toBe( true );
+		expect( isSplitScreen( false, dock ) ).toBe( false );
+	} );
+} );
+
+describe( 'getIsSplitScreen selector', () => {
+	it( 'returns the slice value', () => {
+		const state = { isSplitScreen: true } as State;
+		expect( getIsSplitScreen( state ) ).toBe( true );
+		expect( getIsSplitScreen( { isSplitScreen: false } as State ) ).toBe( false );
+	} );
+} );
+
+describe( 'isMinimized reducer slice', () => {
+	it( 'defaults to false', () => {
+		expect( isMinimized( undefined, { type: '@@INIT' } as never ) ).toBe( false );
+	} );
+
+	it( 'returns the action value on `AGENTS_MANAGER_SET_MINIMIZED`', () => {
+		expect( isMinimized( undefined, setMinimized( true ) ) ).toBe( true );
+		expect( isMinimized( true, setMinimized( false ) ) ).toBe( false );
+	} );
+
+	it( 'leaves state untouched on unrelated actions', () => {
+		expect( isMinimized( true, { type: 'AGENTS_MANAGER_SET_OPEN', isOpen: false } as never ) ).toBe(
+			true
+		);
+	} );
+} );
+
+describe( 'getIsMinimized selector', () => {
+	it( 'returns the slice value', () => {
+		expect( getIsMinimized( { isMinimized: true } as State ) ).toBe( true );
+		expect( getIsMinimized( { isMinimized: false } as State ) ).toBe( false );
+	} );
+} );

package/src/agents-manager/types.ts

@@ -0,0 +1,24 @@
+import { Location } from 'history';
+import * as actions from './actions';
+import * as selectors from './selectors';
+import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
+
+/**
+ * Minimal site data needed by AgentsManager.
+ */
+export interface AgentsManagerSite {
+	ID: number | string;
+	domain: string;
+}
+
+export type Dispatch = DispatchFromMap< typeof actions >;
+export type AgentsManagerSelect = SelectFromMap< typeof selectors >;
+
+export type SingleRouterHistory = {
+	entries: Location[];
+	index: number;
+};
+
+export type PerSiteRouterHistory = Record< string, SingleRouterHistory >;
+
+export type PerSiteLastActivity = Record< string, number >;

package/src/contextual-help/admin-sections.ts

@@ -150,7 +150,7 @@ export function generateAdminSections(
 				__(
 					"By upgrading to the %s plan, you'll be able to monetize your site through the WordAds program."
 				),
-				getPlan( PLAN_PREMIUM )?.getTitle()
+				String( getPlan( PLAN_PREMIUM )?.getTitle() ?? '' )
 			),
 			link: `/earn/${ siteSlug }`,
 			synonyms: [ 'monetize', 'wordads', 'premium', 'explorer' ],

package/src/help-center/actions.ts

@@ -1,71 +1,42 @@
-import { default as apiFetchPromise } from '@wordpress/api-fetch';
-import { select } from '@wordpress/data';
+import { controls } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
-import { default as wpcomRequestPromise, canAccessWpcomApis } from 'wpcom-proxy-request';
+import { Location } from 'history';
 import { GeneratorReturnType } from '../mapped-types';
 import { SiteDetails } from '../site';
+import { CurrentUser } from '../user/types';
 import { STORE_KEY } from './constants';
-import { isE2ETest } from '.';
-import type {
-	APIFetchOptions,
-	HelpCenterOptions,
-	HelpCenterSelect,
-	HelpCenterShowOptions,
-} from './types';
-import type { Location } from 'history';
-
-/**
- * Save the open state of the help center to the remote user preferences.
- * @param isShown - Whether the help center is shown.
- * @param isMinimized - Whether the help center is minimized.
- */
-export const saveOpenState = ( isShown: boolean | undefined, isMinimized: boolean | undefined ) => {
-	const saveState: Record< string, boolean | null > = {};
-
-	if ( typeof isShown === 'boolean' ) {
-		saveState.help_center_open = isShown;
-		if ( ! isShown ) {
-			// Delete the remote version of the navigation history when closing the help center
-			saveState.help_center_router_history = null;
-		}
-	}
-
-	if ( typeof isMinimized === 'boolean' ) {
-		saveState.help_center_minimized = isMinimized;
-	}
-
-	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: saveState },
-		} ).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: saveState,
-		} as APIFetchOptions ).catch( () => {} );
+import { persistPreference } from './utils';
+import type { HelpCenterOptions, HelpCenterShowOptions } from './types';
+
+declare global {
+	interface Window {
+		_sva?: {
+			closeSurvey?: () => void;
+		};
 	}
-};
+}
 
 export function setHelpCenterRouterHistory(
-	history: { entries: Location[]; index: number } | undefined
+	history: { entries: Location[]; index: number } | null
 ) {
+	persistPreference( 'help_center_router_history', history );
 	return {
 		type: 'HELP_CENTER_SET_HELP_CENTER_ROUTER_HISTORY',
 		history,
 	} as const;
 }
 
-export const setNavigateToRoute = ( route?: string ) =>
+/**
+ * Set the navigate to route action.
+ * @param route - The route to navigate to.
+ * @param coalesceParams - Whether to coalesce the parameters with the existing parameters.
+ * @returns The action object.
+ */
+export const setNavigateToRoute = ( route?: string, coalesceParams = false ) =>
 	( {
 		type: 'HELP_CENTER_SET_NAVIGATE_TO_ROUTE',
 		route,
+		coalesceParams,
 	} ) as const;
 
 export const setUnreadCount = ( count: number ) =>
@@ -86,14 +57,22 @@ export const setOdieBotNameSlug = ( odieBotNameSlug: string ) =>
 		odieBotNameSlug,
 	} ) as const;
 
-export const setIsMinimized = function* ( minimized: boolean ) {
-	yield saveOpenState( undefined, minimized );
+export const setIsMinimized = function ( minimized: boolean ) {
+	persistPreference( 'help_center_minimized', minimized );
 	return {
 		type: 'HELP_CENTER_SET_MINIMIZED',
 		minimized,
 	} as const;
 };
 
+export const setLoggedOutOdieChat = (
+	session: { odieId: number; sessionId: string; botSlug: string } | undefined
+) =>
+	( {
+		type: 'HELP_CENTER_SET_LOGGED_OUT_ODIE_CHAT',
+		session,
+	} ) as const;
+
 export const setIsChatLoaded = ( isChatLoaded: boolean ) =>
 	( {
 		type: 'HELP_CENTER_SET_IS_CHAT_LOADED',
@@ -162,6 +141,26 @@ export const setHelpCenterOptions = ( options: HelpCenterOptions ) => ( {
 	options,
 } );
 
+/**
+ * Set the current user in the help center store.
+ * This value is needed because the store makes decisions based on the logged in status.
+ * @param user - The current user to set.
+ * @returns The action object.
+ */
+export const setCurrentUser = ( user: CurrentUser | undefined ) =>
+	( {
+		type: 'HELP_CENTER_SET_CURRENT_USER',
+		user,
+	} ) as const;
+
+export const showHelpCenter = function ( show: boolean ) {
+	persistPreference( 'help_center_open', show );
+	return {
+		type: 'HELP_CENTER_SET_SHOW',
+		show,
+	} as const;
+};
+
 export const setShowHelpCenter = function* (
 	show: boolean,
 	options: HelpCenterShowOptions = {
@@ -175,34 +174,28 @@ export const setShowHelpCenter = function* (
 	 * `forceClose` listens to the show value always. Which the (x) button sets to true.
 	 */
 	forceClose = false
-): Generator< unknown, { type: 'HELP_CENTER_SET_SHOW'; show: boolean }, unknown > {
-	let isMinimized = ( select( STORE_KEY ) as HelpCenterSelect ).getIsMinimized();
+) {
+	const isMinimized: boolean = yield controls.resolveSelect( STORE_KEY, 'getIsMinimized' );
 
 	// Opening or closing the Help Center should reset the minimized state.
 	if ( ! show && ! forceClose && isMinimized ) {
 		yield setIsMinimized( false );
-		isMinimized = false;
-
-		return {
-			type: 'HELP_CENTER_SET_SHOW',
-			show: true,
-		} as const;
-	}
-
-	if ( ! isE2ETest() ) {
-		saveOpenState( show, isMinimized );
+		return showHelpCenter( true );
 	}
 
 	if ( ! show ) {
 		yield setNavigateToRoute( undefined );
 		// Reset the local navigation history when closing the help center.
-		yield setHelpCenterRouterHistory( undefined );
-	} else {
-		yield setShowMessagingWidget( false );
+		yield setHelpCenterRouterHistory( null );
+		return showHelpCenter( false );
 	}
 
+	yield setShowMessagingWidget( false );
 	yield setContextTerm( options?.contextTerm || '' );
-	yield setIsMinimized( false );
+
+	if ( isMinimized ) {
+		yield setIsMinimized( false );
+	}
 
 	if ( options?.hasPremiumSupport ) {
 		yield setHasPremiumSupport( true );
@@ -212,10 +205,14 @@ export const setShowHelpCenter = function* (
 		yield setHelpCenterOptions( options );
 	}
 
-	return {
-		type: 'HELP_CENTER_SET_SHOW',
-		show,
-	} as const;
+	// Close any Survicate survey that may already be visible.
+	// This covers the case where Survicate loads before the Help Center store
+	// is registered, so invokeSurvicateEvent's store-based guard can't catch it.
+	if ( typeof window !== 'undefined' ) {
+		window._sva?.closeSurvey?.();
+	}
+
+	return showHelpCenter( true );
 };
 
 export const setSubject = ( subject: string ) =>
@@ -271,6 +268,31 @@ export const setNavigateToOdie = function* () {
 	yield setShowHelpCenter( true );
 };
 
+/**
+ * Open the Help Center on the Odie (AI) assistant with optional context.
+ * Does not add provider=zendesk, so the user stays in the AI chat instead of human support.
+ */
+export const setOpenOdieWithContext = function* ( {
+	initialMessage,
+	section,
+	siteUrl,
+	siteId,
+}: {
+	initialMessage: string;
+	section?: string;
+	siteUrl?: string;
+	siteId?: string | number;
+} ) {
+	const url = addQueryArgs( '/odie', {
+		userFieldMessage: initialMessage,
+		section,
+		siteUrl,
+		siteId: siteId != null ? String( siteId ) : undefined,
+	} );
+	yield setNavigateToRoute( url );
+	yield setShowHelpCenter( true );
+};
+
 export const setShowSupportDoc = function* ( link: string, postId?: number, blogId?: number ) {
 	const params = new URLSearchParams( {
 		link,
@@ -290,21 +312,24 @@ export type HelpCenterAction =
 			| typeof setSubject
 			| typeof resetStore
 			| typeof setMessage
+			| typeof setLoggedOutOdieChat
 			| typeof setContextTerm
 			| typeof setUserDeclaredSite
 			| typeof setUserDeclaredSiteUrl
 			| typeof setUnreadCount
-			| typeof setHelpCenterRouterHistory
 			| typeof setIsChatLoaded
 			| typeof setAreSoundNotificationsEnabled
 			| typeof setZendeskClientId
+			| typeof setLoggedOutOdieChat
 			| typeof setSupportTypingStatus
 			| typeof setZendeskConnectionStatus
 			| typeof setNavigateToRoute
 			| typeof setOdieInitialPromptText
+			| typeof setHelpCenterRouterHistory
+			| typeof setIsMinimized
 			| typeof setOdieBotNameSlug
 			| typeof setHasPremiumSupport
 			| typeof setHelpCenterOptions
+			| typeof setCurrentUser
 	  >
-	| GeneratorReturnType< typeof setShowHelpCenter >
-	| GeneratorReturnType< typeof setIsMinimized >;
+	| GeneratorReturnType< typeof setShowHelpCenter >;

package/src/help-center/constants.ts

@@ -1 +1,2 @@
 export const STORE_KEY = 'automattic/help-center';
+export const PREFERENCES_KEY = 'logged_out_help_center_preferences_';

package/src/help-center/index.ts

@@ -1,45 +1,17 @@
 import { registerStore } from '@wordpress/data';
 import { controls } from '@wordpress/data-controls';
 import { registerPlugins } from '../plugins';
+import { isE2ETest, isInSupportSession } from '../utils';
 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 resolvers 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();
 
@@ -51,9 +23,15 @@ export function register(): typeof STORE_KEY {
 			reducer,
 			controls: { ...controls, ...wpcomRequestControls },
 			selectors,
-			persist: [ 'message', 'userDeclaredSite', 'userDeclaredSiteUrl', 'subject' ],
+			persist: [
+				'message',
+				'userDeclaredSite',
+				'userDeclaredSiteUrl',
+				'subject',
+				'loggedOutOdieChat',
+			],
 			// Don't persist the open state for e2e users, because parallel tests will start interfering with each other.
-			resolvers: enabledPersistedOpenState ? { isHelpCenterShown } : undefined,
+			resolvers: enabledPersistedOpenState ? resolvers : undefined,
 		} );
 		isRegistered = true;
 	}
@@ -61,4 +39,5 @@ export function register(): typeof STORE_KEY {
 	return STORE_KEY;
 }
 
+export { setHelpCenterAppId } from './utils';
 export type { HelpCenterSite } from './types';

package/src/help-center/reducer.ts

@@ -1,8 +1,9 @@
 import { combineReducers } from '@wordpress/data';
+import { Location } from 'history';
 import { SiteDetails } from '../site';
+import { CurrentUser } from '../user/types';
 import type { HelpCenterAction } from './actions';
 import type { HelpCenterOptions } from './types';
-import type { Location } from 'history';
 import type { Reducer } from 'redux';
 
 const showHelpCenter: Reducer< boolean | undefined, HelpCenterAction > = ( state, action ) => {
@@ -47,9 +48,9 @@ const showMessagingLauncher: Reducer< boolean | undefined, HelpCenterAction > =
 };
 
 const helpCenterRouterHistory: Reducer<
-	{ entries: Location[]; index: number } | undefined,
+	{ entries: Location[]; index: number } | null,
 	HelpCenterAction
-> = ( state, action ) => {
+> = ( state = null, action ) => {
 	switch ( action.type ) {
 		case 'HELP_CENTER_SET_HELP_CENTER_ROUTER_HISTORY':
 			return action.history;
@@ -57,6 +58,17 @@ const helpCenterRouterHistory: Reducer<
 	return state;
 };
 
+const loggedOutOdieChat: Reducer<
+	{ odieId: number; sessionId: string; botSlug: string } | undefined,
+	HelpCenterAction
+> = ( state = undefined, action ) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_LOGGED_OUT_ODIE_CHAT':
+			return action.session;
+	}
+	return state;
+};
+
 const showMessagingWidget: Reducer< boolean | undefined, HelpCenterAction > = ( state, action ) => {
 	switch ( action.type ) {
 		case 'HELP_CENTER_SET_SHOW_MESSAGING_WIDGET':
@@ -148,9 +160,12 @@ const userDeclaredSite: Reducer< SiteDetails | undefined, HelpCenterAction > = (
 	return state;
 };
 
-const navigateToRoute: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
+const navigateToRoute: Reducer<
+	{ route: string | undefined; coalesceParams: boolean } | undefined,
+	HelpCenterAction
+> = ( state, action ) => {
 	if ( action.type === 'HELP_CENTER_SET_NAVIGATE_TO_ROUTE' ) {
-		return action.route;
+		return { route: action.route, coalesceParams: action.coalesceParams };
 	}
 	return state;
 };
@@ -197,6 +212,13 @@ const helpCenterOptions: Reducer< HelpCenterOptions, HelpCenterAction > = (
 	return state;
 };
 
+const currentUser: Reducer< CurrentUser | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_SET_CURRENT_USER' ) {
+		return action.user;
+	}
+	return state;
+};
+
 const reducer = combineReducers( {
 	showHelpCenter,
 	showMessagingLauncher,
@@ -216,9 +238,11 @@ const reducer = combineReducers( {
 	odieInitialPromptText,
 	odieBotNameSlug,
 	helpCenterRouterHistory,
+	loggedOutOdieChat,
 	hasPremiumSupport,
 	contextTerm,
 	helpCenterOptions,
+	currentUser,
 } );
 
 export type State = ReturnType< typeof reducer >;