@automattic/data-stores 3.2.0 → 3.2.1

package/src/help-center/resolvers.ts

@@ -1,45 +1,53 @@
-import { apiFetch } from '@wordpress/data-controls';
-import { canAccessWpcomApis } from 'wpcom-proxy-request';
-import { wpcomRequest } from '../wpcom-request-controls';
-import { setHelpCenterRouterHistory, setIsMinimized } from './actions';
-import type { APIFetchOptions } from './types';
-import type { Location } from 'history';
+import { HelpCenterThunkProps } from './types';
+import { getPersistedPreference } from './utils';
 
-type Preferences = {
-	calypso_preferences: {
-		help_center_open: boolean;
-		help_center_minimized: boolean;
-		help_center_router_history: {
-			entries: Location[];
-			index: number;
-		};
-	};
-};
-
-export function* isHelpCenterShown() {
-	try {
-		const { calypso_preferences: preferences }: Preferences = canAccessWpcomApis()
-			? yield wpcomRequest( {
-					path: '/me/preferences',
-					apiNamespace: 'wpcom/v2',
-			  } )
-			: yield apiFetch( {
-					global: true,
-					path: '/help-center/open-state',
-			  } as APIFetchOptions );
+export function isHelpCenterShown() {
+	return async ( { dispatch }: HelpCenterThunkProps ) => {
+		try {
+			const helpCenterOpen = await getPersistedPreference( 'help_center_open' );
 
-		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 ( helpCenterOpen ) {
+				dispatch( {
+					type: 'HELP_CENTER_SET_SHOW',
+					show: true,
+				} as const );
+			}
+		} catch {
+			dispatch( {
+				type: 'HELP_CENTER_SET_SHOW',
+				show: false,
+			} as const );
 		}
+	};
+}
 
-		yield setIsMinimized( preferences.help_center_minimized );
+export function getHelpCenterRouterHistory() {
+	return async ( { dispatch, select }: HelpCenterThunkProps ) => {
+		const route = select.getNavigateToRoute()?.route;
 
-		// 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;
+		// 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 );
+			}
 		}
-	} catch {}
+	};
+}
+
+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 );
+	};
 }

package/src/help-center/selectors.ts

@@ -11,6 +11,7 @@ export const getUnreadCount = ( state: State ) => state.unreadCount;
 export const getZendeskConnectionStatus = ( state: State ) => state.zendeskConnectionStatus;
 export const getIsMinimized = ( state: State ) => state.isMinimized;
 export const getIsChatLoaded = ( state: State ) => state.isChatLoaded;
+export const getLoggedOutOdieChat = ( state: State ) => state.loggedOutOdieChat;
 export const getAreSoundNotificationsEnabled = ( state: State ) =>
 	state.areSoundNotificationsEnabled;
 export const getZendeskClientId = ( state: State ) => state.zendeskClientId;
@@ -23,3 +24,5 @@ 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;

package/src/help-center/test/utils.ts

@@ -0,0 +1,99 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { PREFERENCES_KEY } from '../constants';
+
+jest.mock( '@wordpress/data', () => ( {
+	select: jest.fn(),
+} ) );
+
+jest.mock( '../../wpcom-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+	canAccessWpcomApis: jest.fn(),
+} ) );
+
+describe( 'help-center utils — localStorage persistence (logged out)', () => {
+	let utils: typeof import('../utils');
+
+	beforeEach( async () => {
+		jest.resetModules();
+		window.localStorage.clear();
+		utils = await import( '../utils' );
+	} );
+
+	it( 'persists and reads under the unscoped key when no appId is set', () => {
+		utils.persistValueSafely( 'help_center_open', true );
+
+		expect( window.localStorage.getItem( PREFERENCES_KEY + 'help_center_open' ) ).toBe( 'true' );
+		expect( utils.retrieveValueSafely( 'help_center_open' ) ).toBe( true );
+	} );
+
+	it( 'persists under the app-scoped key when an appId is set', () => {
+		utils.setHelpCenterAppId( 'a4a' );
+		utils.persistValueSafely( 'help_center_open', true );
+
+		expect( window.localStorage.getItem( PREFERENCES_KEY + 'help_center_open_a4a' ) ).toBe(
+			'true'
+		);
+		// The shared, unscoped field is left untouched.
+		expect( window.localStorage.getItem( PREFERENCES_KEY + 'help_center_open' ) ).toBeNull();
+	} );
+
+	it( 'falls back to the shared (unscoped) value when the scoped one is absent', () => {
+		// Value written by another, unscoped context.
+		window.localStorage.setItem( PREFERENCES_KEY + 'help_center_open', 'true' );
+		utils.setHelpCenterAppId( 'a4a' );
+
+		expect( utils.retrieveValueSafely( 'help_center_open' ) ).toBe( true );
+	} );
+
+	it( 'prefers the scoped value over the shared one once it exists', () => {
+		window.localStorage.setItem( PREFERENCES_KEY + 'help_center_open', 'false' );
+		window.localStorage.setItem( PREFERENCES_KEY + 'help_center_open_a4a', 'true' );
+		utils.setHelpCenterAppId( 'a4a' );
+
+		expect( utils.retrieveValueSafely( 'help_center_open' ) ).toBe( true );
+	} );
+} );
+
+describe( 'getPersistedPreference — server preferences (logged in)', () => {
+	async function setup(
+		preferences: Record< string, unknown >
+	): Promise< typeof import('../utils') > {
+		jest.resetModules();
+
+		const { select } = await import( '@wordpress/data' );
+		( select as jest.Mock ).mockReturnValue( { getIsLoggedIn: () => true } );
+
+		const wpcomRequest = await import( '../../wpcom-request' );
+		( wpcomRequest.canAccessWpcomApis as jest.Mock ).mockReturnValue( true );
+		( wpcomRequest.default as jest.Mock ).mockResolvedValue( {
+			calypso_preferences: preferences,
+		} );
+
+		return import( '../utils' );
+	}
+
+	it( 'returns the scoped value when present', async () => {
+		const utils = await setup( { help_center_open: false, help_center_open_a4a: true } );
+		utils.setHelpCenterAppId( 'a4a' );
+
+		await expect( utils.getPersistedPreference( 'help_center_open' ) ).resolves.toBe( true );
+	} );
+
+	it( 'falls back to the unscoped value when the scoped one is absent', async () => {
+		const utils = await setup( { help_center_open: true } );
+		utils.setHelpCenterAppId( 'a4a' );
+
+		await expect( utils.getPersistedPreference( 'help_center_open' ) ).resolves.toBe( true );
+	} );
+
+	it( 'reads the unscoped value when no appId is set', async () => {
+		const utils = await setup( { help_center_open: true, help_center_open_a4a: false } );
+		utils.setHelpCenterAppId( undefined );
+
+		await expect( utils.getPersistedPreference( 'help_center_open' ) ).resolves.toBe( true );
+	} );
+} );

package/src/help-center/types.ts

@@ -1,14 +1,8 @@
 import * as actions from './actions';
 import * as selectors from './selectors';
 import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
-
-export type Location = {
-	pathname: string;
-	search?: string;
-	hash?: string;
-	state?: unknown;
-	key?: string;
-};
+import type { HelpCenterAction } from './actions';
+import type { Location } from 'history';
 export interface HelpCenterShowOptions {
 	hasPremiumSupport: boolean;
 	hideBackButton: boolean;
@@ -45,13 +39,28 @@ export interface Dispatch {
 	dispatch: DispatchFromMap< typeof actions >;
 }
 
-export interface APIFetchOptions {
-	global: boolean;
-	path: string;
-}
+export type HelpCenterSelect = SelectFromMap< typeof selectors > & {
+	isResolving: ( key: string ) => boolean;
+};
 
-export type HelpCenterSelect = SelectFromMap< typeof selectors >;
+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 | undefined;
+		help_center_minimized: boolean;
+		help_center_router_history: {
+			entries: Location[];
+			index: number;
+		} | null;
+	};
+}

package/src/help-center/utils.ts

@@ -0,0 +1,156 @@
+import { default as apiFetchPromise } from '@wordpress/api-fetch';
+import { select } from '@wordpress/data';
+import { isE2ETest } from '../utils';
+import { default as wpcomRequestPromise, canAccessWpcomApis } from '../wpcom-request';
+import { PREFERENCES_KEY, STORE_KEY } from './constants';
+import type { HelpCenterSelect, Preferences } from './types';
+import type { APIFetchOptions } from '../shared-types';
+
+const memoryStore: Preferences[ 'calypso_preferences' ] = {
+	help_center_open: undefined,
+	help_center_minimized: false,
+	help_center_router_history: null,
+};
+
+let helpCenterAppId: string | undefined;
+
+export function setHelpCenterAppId( appId: string | undefined ): void {
+	helpCenterAppId = appId;
+}
+
+function scopedKey( key: string ): string {
+	return helpCenterAppId ? `${ key }_${ helpCenterAppId }` : key;
+}
+
+/**
+ * Reads the app-scoped preference, falling back to the shared (unscoped) one.
+ */
+function readScoped< T extends keyof Preferences[ 'calypso_preferences' ] >(
+	preferences: Preferences[ 'calypso_preferences' ],
+	key: T
+): Preferences[ 'calypso_preferences' ][ T ] | undefined {
+	// The scoped key is dynamic, so the cast is confined here to keep callers typed.
+	const scoped = (
+		preferences as unknown as Record< string, Preferences[ 'calypso_preferences' ][ T ] >
+	 )[ scopedKey( key ) ];
+	return scoped ?? preferences[ key ];
+}
+
+export function deleteValuesSafely(): void {
+	try {
+		window.localStorage.removeItem( PREFERENCES_KEY + scopedKey( 'help_center_open' ) );
+		window.localStorage.removeItem( PREFERENCES_KEY + scopedKey( 'help_center_minimized' ) );
+		window.localStorage.removeItem( PREFERENCES_KEY + scopedKey( 'help_center_router_history' ) );
+	} catch ( error ) {
+		memoryStore.help_center_open = undefined;
+		memoryStore.help_center_minimized = false;
+		memoryStore.help_center_router_history = null;
+	}
+}
+
+export function persistValueSafely< T extends keyof Preferences[ 'calypso_preferences' ] >(
+	key: T,
+	value: Preferences[ 'calypso_preferences' ][ T ]
+): void {
+	try {
+		window.localStorage.setItem( PREFERENCES_KEY + scopedKey( key ), JSON.stringify( value ) );
+	} catch ( error ) {
+		memoryStore[ key ] = value;
+	}
+}
+
+export function retrieveValueSafely< T extends keyof Preferences[ 'calypso_preferences' ] >(
+	key: T
+): Preferences[ 'calypso_preferences' ][ T ] | undefined {
+	try {
+		// Prefer this app's scoped value, falling back to the shared (unscoped)
+		// one when it hasn't stored its own yet.
+		const value =
+			window.localStorage.getItem( PREFERENCES_KEY + scopedKey( key ) ) ??
+			window.localStorage.getItem( PREFERENCES_KEY + key );
+		return value ? JSON.parse( value ) : undefined;
+	} catch ( error ) {
+		return memoryStore[ key ];
+	}
+}
+
+/**
+ * Cached promise to avoid multiple requests to the same endpoint. We only need preferences on boot.
+ */
+let cachedPreferencesPromise: Promise< Preferences[ 'calypso_preferences' ] > | undefined;
+
+function getCalypsoPreferences(): Promise< Preferences[ 'calypso_preferences' ] > {
+	// Caching the promise instead of the result allows parallel requests to queue and wait for one result.
+	if ( cachedPreferencesPromise ) {
+		return cachedPreferencesPromise;
+	} else if ( canAccessWpcomApis() ) {
+		cachedPreferencesPromise = wpcomRequestPromise< Preferences >( {
+			path: '/me/preferences',
+			apiNamespace: 'wpcom/v2',
+		} ).then( ( preferences ) => preferences.calypso_preferences );
+	} else {
+		cachedPreferencesPromise = apiFetchPromise< Preferences[ 'calypso_preferences' ] >( {
+			global: true,
+			path: '/help-center/open-state',
+		} as APIFetchOptions );
+	}
+
+	return cachedPreferencesPromise;
+}
+
+export async function getPersistedPreference<
+	T extends keyof Preferences[ 'calypso_preferences' ],
+>( key: T ): Promise< Preferences[ 'calypso_preferences' ][ T ] | undefined > {
+	const isLoggedIn = ( select( STORE_KEY ) as unknown as HelpCenterSelect ).getIsLoggedIn();
+
+	if ( isLoggedIn ) {
+		const preferences = await getCalypsoPreferences();
+		return readScoped( preferences, key );
+	}
+
+	return retrieveValueSafely( key );
+}
+
+/**
+ * Save the open state of the help center to the remote user preferences or localStorage based on logged in status.
+ * @param preference - The field to save.
+ * @param value - The value to save.
+ */
+export function persistPreference< T extends keyof Preferences[ 'calypso_preferences' ] >(
+	preference: T,
+	value: Preferences[ 'calypso_preferences' ][ T ]
+) {
+	if ( isE2ETest() ) {
+		return;
+	}
+
+	const newPreferences = { [ scopedKey( preference ) ]: value };
+
+	const isLoggedIn = ( select( STORE_KEY ) as unknown as HelpCenterSelect ).getIsLoggedIn();
+
+	if ( ! isLoggedIn ) {
+		// Retrieve the logged out help center preferences from localStorage to coalesce the state.
+		persistValueSafely( preference, value );
+	} else if ( isLoggedIn ) {
+		// Delete local preferences when logged in to avoid conflicts.
+		deleteValuesSafely();
+
+		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: newPreferences },
+			} ).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: newPreferences,
+			} as APIFetchOptions ).catch( () => {} );
+		}
+	}
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 import * as AddOns from './add-ons';
+import * as AgentsManager from './agents-manager';
 import * as HelpCenter from './help-center';
 import * as Onboard from './onboard';
 import * as Plans from './plans';
@@ -35,6 +36,7 @@ const { SubscriptionManager } = Reader;
 
 export {
 	AddOns,
+	AgentsManager,
 	User,
 	HelpCenter,
 	Site,
@@ -63,9 +65,17 @@ export type {
 	HelpCenterSelect,
 	Dispatch as HelpCenterDispatch,
 } from './help-center/types';
+export type {
+	AgentsManagerSelect,
+	AgentsManagerSite,
+	Dispatch as AgentsManagerDispatch,
+	PerSiteRouterHistory,
+	SingleRouterHistory,
+} from './agents-manager/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';
+export { isE2ETest, isInSupportSession } from './utils';
+export { setRequester } from './wpcom-request';

package/src/mutations/use-domains-bulk-actions-mutation.ts

@@ -1,9 +1,9 @@
 import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import wpcomRequest from 'wpcom-proxy-request';
 import { getAllDomainsQueryKey } from '../queries/use-all-domains-query';
 import { getBulkDomainUpdateStatusQueryKey } from '../queries/use-bulk-domain-update-status-query';
 import { getSiteDomainsQueryKey } from '../queries/use-site-domains-query';
+import wpcomRequest from '../wpcom-request';
 
 interface UpdateContactInfoVariables {
 	type: 'update-contact-info';

package/src/newsletter-categories/index.ts

@@ -1,5 +1,5 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
-import request from 'wpcom-proxy-request';
+import request from '../wpcom-request';
 
 export type NewsletterCategory = {
 	id: number;

package/src/newsletter-categories/test/index.tsx

@@ -4,10 +4,13 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 import React from 'react';
-import request from 'wpcom-proxy-request';
+import request from '../../wpcom-request';
 import { useNewsletterCategories } from '../index';
 
-jest.mock( 'wpcom-proxy-request', () => jest.fn() );
+jest.mock( '../../wpcom-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+} ) );
 
 describe( 'useNewsletterCategories', () => {
 	let queryClient: QueryClient;

package/src/onboard/actions.ts

@@ -8,8 +8,7 @@ import { ProfilerData, ReadymadeTemplate } from './types';
 import type { DomainTransferData, State } from '.';
 import type { FeatureId } from '../shared-types';
 import type { DomainSuggestion } from '@automattic/api-core';
-// somewhat hacky, but resolves the circular dependency issue
-import type { Design, StyleVariation } from '@automattic/design-picker/src/types';
+import type { Design, StyleVariation } from '@automattic/design-types';
 import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
 
 // copied from design picker to avoid a circular dependency
@@ -373,6 +372,11 @@ export const setGardenPartnerName = ( gardenPartnerName: string | null ) => ( {
 	gardenPartnerName,
 } );
 
+export const setBlueprint = ( blueprint: string | null ) => ( {
+	type: 'SET_BLUEPRINT' as const,
+	blueprint,
+} );
+
 export type OnboardAction = ReturnType<
 	| typeof addFeature
 	| typeof removeFeature
@@ -434,4 +438,5 @@ export type OnboardAction = ReturnType<
 	| typeof setSignupDomainOrigin
 	| typeof setGardenName
 	| typeof setGardenPartnerName
+	| typeof setBlueprint
 >;

package/src/onboard/reducer.ts

@@ -11,8 +11,7 @@ import type {
 import type { FeatureId } from '../shared-types';
 import type { GlobalStyles } from '../site';
 import type { DomainSuggestion } from '@automattic/api-core';
-// somewhat hacky, but resolves the circular dependency issue
-import type { Design, StyleVariation } from '@automattic/design-picker/src/types';
+import type { Design, StyleVariation } from '@automattic/design-types';
 import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
 import type { Reducer } from 'redux';
 
@@ -635,6 +634,16 @@ export const gardenPartnerName: Reducer< string | null, OnboardAction > = (
 	return state;
 };
 
+export const blueprint: Reducer< string | null, OnboardAction > = ( state = null, action ) => {
+	if ( action.type === 'SET_BLUEPRINT' ) {
+		return action.blueprint;
+	}
+	if ( action.type === 'RESET_ONBOARD_STORE' ) {
+		return null;
+	}
+	return state;
+};
+
 const reducer = combineReducers( {
 	domain,
 	domainCartItem,
@@ -685,6 +694,7 @@ const reducer = combineReducers( {
 	signupDomainOrigin,
 	gardenName,
 	gardenPartnerName,
+	blueprint,
 } );
 
 export type State = ReturnType< typeof reducer >;

package/src/onboard/selectors.ts

@@ -83,3 +83,4 @@ export const getPaidSubscribers = ( state: State ) => state.paidSubscribers;
 export const getPartnerBundle = ( state: State ) => state.partnerBundle;
 export const getGardenName = ( state: State ) => state.gardenName;
 export const getGardenPartnerName = ( state: State ) => state.gardenPartnerName;
+export const getBlueprint = ( state: State ) => state.blueprint;

package/src/plans/constants.ts

@@ -37,6 +37,7 @@ export const PLAN_BUSINESS_MONTHLY = 'business-bundle-monthly';
 export const PLAN_ECOMMERCE_MONTHLY = 'ecommerce-bundle-monthly';
 export const PLAN_ECOMMERCE_TRIAL_MONTHLY = 'ecommerce-trial-bundle-monthly';
 export const PLAN_MIGRATION_TRIAL_MONTHLY = 'wp_bundle_migration_trial_monthly';
+export const PLAN_PERSONAL_TRIAL_MONTHLY = 'wp-personal-bundle-free-trial-monthly';
 
 export const annualSlugs = [ PLAN_PERSONAL, PLAN_PREMIUM, PLAN_BUSINESS, PLAN_ECOMMERCE ] as const;
 
@@ -47,6 +48,7 @@ export const monthlySlugs = [
 	PLAN_ECOMMERCE_MONTHLY,
 	PLAN_ECOMMERCE_TRIAL_MONTHLY,
 	PLAN_MIGRATION_TRIAL_MONTHLY,
+	PLAN_PERSONAL_TRIAL_MONTHLY,
 ] as const;
 
 export const plansProductSlugs = [ PLAN_FREE, ...annualSlugs, ...monthlySlugs ] as const;