Help Center: Logged-Out Support for Support Guides and Odie

packages/data-stores/src/help-center/actions.ts

@@ -1,20 +1,17 @@
-import { select } from '@wordpress/data';
+import { controls } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { Location } from 'history';
 import { GeneratorReturnType } from '../mapped-types';
 import { SiteDetails } from '../site';
 import { CurrentUser } from '../user/types';
 import { STORE_KEY } from './constants';
-import type {
-	HelpCenterOptions,
-	HelpCenterSelect,
-	HelpCenterShowOptions,
-	Preferences,
-} from './types';
+import { persistPreference } from './utils';
+import type { HelpCenterOptions, HelpCenterShowOptions } from './types';
 
 export function setHelpCenterRouterHistory(
 	history: { entries: Location[]; index: number } | null
 ) {
+	persistPreference( 'help_center_router_history', history );
 	return {
 		type: 'HELP_CENTER_SET_HELP_CENTER_ROUTER_HISTORY',
 		history,
@@ -33,12 +30,6 @@ export const setUnreadCount = ( count: number ) =>
 		count,
 	} ) as const;
 
-export const setHelpCenterPreferences = ( preferences: Preferences[ 'calypso_preferences' ] ) =>
-	( {
-		type: 'HELP_CENTER_SET_HELP_CENTER_PREFERENCES',
-		preferences,
-	} ) as const;
-
 export const setOdieInitialPromptText = ( text: string ) =>
 	( {
 		type: 'HELP_CENTER_SET_ODIE_INITIAL_PROMPT_TEXT',
@@ -52,6 +43,7 @@ export const setOdieBotNameSlug = ( odieBotNameSlug: string ) =>
 	} ) as const;
 
 export const setIsMinimized = function ( minimized: boolean ) {
+	persistPreference( 'help_center_minimized', minimized );
 	return {
 		type: 'HELP_CENTER_SET_MINIMIZED',
 		minimized,
@@ -146,6 +138,14 @@ export const setCurrentUser = ( user: CurrentUser | undefined ) =>
 		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 = {
@@ -159,33 +159,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;
+		return showHelpCenter( true );
 	}
 
 	if ( ! show ) {
 		yield setNavigateToRoute( undefined );
 		// Reset the local navigation history when closing the help center.
 		yield setHelpCenterRouterHistory( null );
-		return {
-			type: 'HELP_CENTER_SET_SHOW',
-			show: false,
-		} as const;
+		return showHelpCenter( false );
 	}
 
 	yield setShowMessagingWidget( false );
 	yield setContextTerm( options?.contextTerm || '' );
-	yield setIsMinimized( false );
+
+	if ( isMinimized ) {
+		yield setIsMinimized( false );
+	}
 
 	if ( options?.hasPremiumSupport ) {
 		yield setHasPremiumSupport( true );
@@ -195,10 +190,7 @@ export const setShowHelpCenter = function* (
 		yield setHelpCenterOptions( options );
 	}
 
-	return {
-		type: 'HELP_CENTER_SET_SHOW',
-		show,
-	} as const;
+	return showHelpCenter( true );
 };
 
 export const setSubject = ( subject: string ) =>
@@ -272,7 +264,6 @@ export type HelpCenterAction =
 			| typeof setShowMessagingWidget
 			| typeof setSubject
 			| typeof resetStore
-			| typeof setHelpCenterPreferences
 			| typeof setMessage
 			| typeof setLoggedOutOdieChat
 			| typeof setContextTerm

packages/data-stores/src/help-center/constants.ts

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

packages/data-stores/src/help-center/index.ts

@@ -8,7 +8,6 @@ import { STORE_KEY } from './constants';
 import reducer, { State } from './reducer';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
-import { subscribeToPersist } from './utils';
 export type { State };
 
 let isRegistered = false;
@@ -19,7 +18,7 @@ export function register(): typeof STORE_KEY {
 	registerPlugins();
 
 	if ( ! isRegistered ) {
-		const store = registerStore( STORE_KEY, {
+		registerStore( STORE_KEY, {
 			actions,
 			reducer,
 			controls: { ...controls, ...wpcomRequestControls },
@@ -35,7 +34,6 @@ export function register(): typeof STORE_KEY {
 			resolvers: enabledPersistedOpenState ? resolvers : undefined,
 		} );
 		isRegistered = true;
-		subscribeToPersist( store );
 	}
 
 	return STORE_KEY;

packages/data-stores/src/help-center/reducer.ts

@@ -3,7 +3,7 @@ import { Location } from 'history';
 import { SiteDetails } from '../site';
 import { CurrentUser } from '../user/types';
 import type { HelpCenterAction } from './actions';
-import type { HelpCenterOptions, Preferences } from './types';
+import type { HelpCenterOptions } from './types';
 import type { Reducer } from 'redux';
 
 const showHelpCenter: Reducer< boolean | undefined, HelpCenterAction > = ( state, action ) => {
@@ -25,17 +25,6 @@ const typingConversationStatus: Reducer<
 	return state;
 };
 
-const helpCenterPreferences: Reducer< Preferences[ 'calypso_preferences' ], HelpCenterAction > = (
-	state = {},
-	action
-) => {
-	switch ( action.type ) {
-		case 'HELP_CENTER_SET_HELP_CENTER_PREFERENCES':
-			return action.preferences;
-	}
-	return state;
-};
-
 const zendeskConnectionStatus: Reducer<
 	'disconnected' | 'reconnecting' | 'connected' | undefined,
 	HelpCenterAction
@@ -233,7 +222,6 @@ const reducer = combineReducers( {
 	showMessagingWidget,
 	zendeskConnectionStatus,
 	subject,
-	helpCenterPreferences,
 	message,
 	userDeclaredSite,
 	userDeclaredSiteUrl,

packages/data-stores/src/help-center/resolvers.ts

@@ -1,93 +1,53 @@
-import { controls } from '@wordpress/data';
-import { apiFetch } from '@wordpress/data-controls';
-import { canAccessWpcomApis } from 'wpcom-proxy-request';
-import { CurrentUser } from '../user/types';
-import { retrieveValueSafely } from '../utils';
-import { wpcomRequest } from '../wpcom-request-controls';
-import { setHelpCenterPreferences } from './actions';
-import { STORE_KEY } from './constants';
-import { Preferences } from './types';
-import type { APIFetchOptions } from '../shared-types';
-
-/**
- * Retrieves the help center persisted preferences from the remote user preferences or localStorage based on logged in status.
- * @yields {Preferences} The help center persisted preferences.
- */
-export function* getHelpCenterPreferences() {
-	const currentUser: CurrentUser | undefined = yield controls.select( STORE_KEY, 'getCurrentUser' );
-	const isLoggedIn = !! currentUser?.ID;
-
-	if ( isLoggedIn ) {
-		if ( canAccessWpcomApis() ) {
-			const preferences: Preferences = yield wpcomRequest( {
-				path: '/me/preferences',
-				apiNamespace: 'wpcom/v2',
-			} );
-			// project the preferences to the expected shape
-			const projectedPreferences = {
-				help_center_open: preferences.calypso_preferences.help_center_open,
-				help_center_minimized: preferences.calypso_preferences.help_center_minimized,
-				help_center_router_history: preferences.calypso_preferences.help_center_router_history,
-			};
-			yield setHelpCenterPreferences( projectedPreferences );
-		} else {
-			const preferences: Preferences[ 'calypso_preferences' ] = yield apiFetch( {
-				global: true,
-				path: '/help-center/open-state',
-			} as APIFetchOptions );
-			yield setHelpCenterPreferences( preferences );
-		}
-	} else {
-		yield setHelpCenterPreferences(
-			retrieveValueSafely< Preferences[ 'calypso_preferences' ] >(
-				'logged_out_help_center_preferences'
-			) ?? {}
-		);
-	}
-}
-
-export function* isHelpCenterShown() {
-	try {
-		const preferences: Preferences[ 'calypso_preferences' ] = yield controls.resolveSelect(
-			STORE_KEY,
-			'getHelpCenterPreferences'
-		);
-
-		// 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 {
+import { HelpCenterThunkProps } from './types';
+import { getPersistedPreference } from './utils';
+
+export function isHelpCenterShown() {
+	return async ( { dispatch }: HelpCenterThunkProps ) => {
+		try {
+			const helpCenterOpen = await getPersistedPreference( 'help_center_open' );
+
+			// We only want to auto-open, we don't want to auto-close (and potentially overrule the user's action).
+			if ( helpCenterOpen ) {
+				dispatch( {
+					type: 'HELP_CENTER_SET_SHOW',
+					show: true,
+				} as const );
+			}
+		} catch {
+			dispatch( {
 				type: 'HELP_CENTER_SET_SHOW',
-				show: true,
-			} as const;
+				show: false,
+			} as const );
 		}
-	} catch {}
+	};
 }
 
-export function* getHelpCenterRouterHistory() {
-	const route: string | null | undefined = yield controls.select( STORE_KEY, 'getNavigateToRoute' );
-
-	// Don't use the history from the preferences if route is defined to avoid a race condition between restoring
-	// persisted data and setting the support doc data. Persisted values could overwrite freshly fetched data.
-	if ( typeof route === 'undefined' ) {
-		const preferences: Preferences[ 'calypso_preferences' ] = yield controls.resolveSelect(
-			STORE_KEY,
-			'getHelpCenterPreferences'
-		);
-
-		yield {
-			type: 'HELP_CENTER_SET_HELP_CENTER_ROUTER_HISTORY',
-			history: preferences.help_center_router_history,
-		} as const;
-	}
+export function getHelpCenterRouterHistory() {
+	return async ( { dispatch, select }: HelpCenterThunkProps ) => {
+		const route = select.getNavigateToRoute();
+
+		// Don't use the history from the preferences if route is defined to avoid a race condition between restoring
+		// persisted data and setting the support doc data. Persisted values could overwrite freshly fetched data.
+		if ( typeof route === 'undefined' ) {
+			const routerHistory = await getPersistedPreference( '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 ( routerHistory ) {
+				dispatch( {
+					type: 'HELP_CENTER_SET_HELP_CENTER_ROUTER_HISTORY',
+					history: routerHistory,
+				} as const );
+			}
+		}
+	};
 }
 
-export function* getIsMinimized() {
-	const preferences: Preferences[ 'calypso_preferences' ] = yield controls.resolveSelect(
-		STORE_KEY,
-		'getHelpCenterPreferences'
-	);
-	return {
-		type: 'HELP_CENTER_SET_MINIMIZED',
-		minimized: preferences.help_center_minimized,
-	} as const;
+export function getIsMinimized() {
+	return async ( { dispatch }: HelpCenterThunkProps ) => {
+		const minimized = await getPersistedPreference( 'help_center_minimized' );
+		dispatch( {
+			type: 'HELP_CENTER_SET_MINIMIZED',
+			minimized: minimized ?? false,
+		} as const );
+	};
 }

packages/data-stores/src/help-center/selectors.ts

@@ -20,9 +20,9 @@ export const getNavigateToRoute = ( state: State ) => state.navigateToRoute;
 export const getOdieInitialPromptText = ( state: State ) => state.odieInitialPromptText;
 export const getOdieBotNameSlug = ( state: State ) => state.odieBotNameSlug;
 export const getHasPremiumSupport = ( state: State ) => state.hasPremiumSupport;
-export const getHelpCenterPreferences = ( state: State ) => state.helpCenterPreferences;
 export const getHelpCenterOptions = ( state: State ) => state.helpCenterOptions;
 export const getContextTerm = ( state: State ) => state.contextTerm;
 export const getSupportTypingStatus = ( state: State, conversationId: string ) =>
 	state.typingConversationStatus?.[ conversationId ];
 export const getCurrentUser = ( state: State ) => state.currentUser;
+export const getIsLoggedIn = ( state: State ) => !! state.currentUser?.ID;

packages/data-stores/src/help-center/types.ts

@@ -1,6 +1,7 @@
 import * as actions from './actions';
 import * as selectors from './selectors';
 import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
+import type { HelpCenterAction } from './actions';
 import type { Location } from 'history';
 export interface HelpCenterShowOptions {
 	hasPremiumSupport: boolean;
@@ -42,15 +43,22 @@ export type HelpCenterSelect = SelectFromMap< typeof selectors > & {
 	isResolving: ( key: string ) => boolean;
 };
 
+export type HelpCenterThunkDispatch = ( action: HelpCenterAction ) => void;
+
+export type HelpCenterThunkProps = {
+	dispatch: HelpCenterThunkDispatch;
+	select: HelpCenterSelect;
+};
+
 export interface HelpCenterOptions {
 	hideBackButton?: boolean;
 }
 
 export interface Preferences {
 	calypso_preferences: {
-		help_center_open?: boolean;
-		help_center_minimized?: boolean;
-		help_center_router_history?: {
+		help_center_open: boolean | undefined;
+		help_center_minimized: boolean;
+		help_center_router_history: {
 			entries: Location[];
 			index: number;
 		} | null;