@automattic/data-stores 3.1.0 → 3.1.1

package/src/reader/contexts/site-subscriptions-query-props.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext } from 'react';
+import React, { createContext, useState, useContext, useMemo } from 'react';
 import { SiteSubscriptionsFilterBy, SiteSubscriptionsSortBy } from '../constants';
 
 type SiteSubscriptionsQueryPropsType = {
@@ -19,24 +19,33 @@ export const SiteSubscriptionsQueryProps = createContext< SiteSubscriptionsQuery
 	setFilterOption: () => undefined,
 } );
 
-export const SiteSubscriptionsQueryPropsProvider: React.FC< { children: React.ReactNode } > = ( {
+type SiteSubscriptionsQueryPropsProviderProps = {
+	// initializer for `searchTerm` state, either a value or a callback, a standard initializer arg for `useState`
+	initialSearchTermState?: string | ( () => string );
+	children: React.ReactNode;
+};
+
+export const SiteSubscriptionsQueryPropsProvider = ( {
+	initialSearchTermState = '',
 	children,
-} ) => {
-	const [ searchTerm, setSearchTerm ] = useState( '' );
+}: SiteSubscriptionsQueryPropsProviderProps ) => {
+	const [ searchTerm, setSearchTerm ] = useState( initialSearchTermState );
 	const [ sortTerm, setSortTerm ] = useState( SiteSubscriptionsSortBy.DateSubscribed );
 	const [ filterOption, setFilterOption ] = useState( SiteSubscriptionsFilterBy.All );
 
+	const value = useMemo(
+		() => ( {
+			searchTerm,
+			setSearchTerm,
+			sortTerm,
+			setSortTerm,
+			filterOption,
+			setFilterOption,
+		} ),
+		[ searchTerm, setSearchTerm, sortTerm, setSortTerm, filterOption, setFilterOption ]
+	);
 	return (
-		<SiteSubscriptionsQueryProps.Provider
-			value={ {
-				searchTerm,
-				setSearchTerm,
-				sortTerm,
-				setSortTerm,
-				filterOption,
-				setFilterOption,
-			} }
-		>
+		<SiteSubscriptionsQueryProps.Provider value={ value }>
 			{ children }
 		</SiteSubscriptionsQueryProps.Provider>
 	);

package/src/reader/hooks/use-is-logged-in.ts

@@ -4,19 +4,12 @@ import type { UserSelect } from '../../user';
 
 const USER_STORE = registerUserStore();
 
-const useIsLoggedIn = () => {
-	const currentUser = useSelect(
-		( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(),
-		[]
-	);
-
-	return {
-		id: currentUser?.ID,
-		isLoggedIn: useSelect(
-			( select ) => ( select( USER_STORE ) as UserSelect ).isCurrentUserLoggedIn(),
-			[]
-		),
-	};
-};
-
-export default useIsLoggedIn;
+export default function useIsLoggedIn() {
+	return useSelect( ( select ) => {
+		const user = select( USER_STORE ) as UserSelect;
+		return {
+			id: user.getCurrentUser()?.ID,
+			isLoggedIn: user.isCurrentUserLoggedIn(),
+		};
+	}, [] );
+}

package/src/reader/queries/use-read-feed-query.ts

@@ -22,11 +22,13 @@ export type ReadFeedResponse = {
 	name: string;
 	next_refresh_time: string | null;
 	organization_id: number;
+	subscribe_URL: string;
 	subscribers_count: number;
 	unseen_count: number;
+	subscription_id?: number; // Only present if the user is subscribed to the feed.
 };
 
-const useReadFeedQuery = ( feedId?: number | string ) => {
+const useReadFeedQuery = ( enabled: boolean, feedId?: number | string ) => {
 	return useQuery( {
 		queryKey: [ 'read', 'feeds', Number( feedId ) ],
 		queryFn: async () => {
@@ -36,7 +38,7 @@ const useReadFeedQuery = ( feedId?: number | string ) => {
 				method: 'GET',
 			} );
 		},
-		enabled: isValidId( feedId ),
+		enabled: enabled && isValidId( feedId ),
 	} );
 };
 

package/src/reader/queries/use-read-feed-site-query.ts

@@ -20,7 +20,7 @@ const urlQuery = buildQueryString( {
 const useReadFeedSiteQuery = ( siteId?: number ) => {
 	return useQuery( {
 		queryKey: [ 'read', 'sites', siteId, urlQuery ],
-		queryFn: async () => {
+		queryFn: async (): Promise< ReadFeedSiteResponse > => {
 			return wpcomRequest< ReadFeedSiteResponse >( {
 				path: `/read/sites/${ siteId }`,
 				query: urlQuery,
@@ -28,7 +28,7 @@ const useReadFeedSiteQuery = ( siteId?: number ) => {
 				method: 'GET',
 			} );
 		},
-		enabled: typeof siteId === 'number' && siteId >= 0,
+		enabled: typeof siteId === 'number' && siteId > 0,
 	} );
 };
 

package/src/site/actions.ts

@@ -1,4 +1,4 @@
-import { isEnabled } from '@automattic/calypso-config';
+import { DEFAULT_GLOBAL_STYLES_VARIATION_SLUG } from '@automattic/global-styles/src/constants';
 import { __ } from '@wordpress/i18n';
 import { SiteGoal } from '../onboard';
 import { wpcomRequest } from '../wpcom-request-controls';
@@ -249,6 +249,28 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		}
 	}
 
+	function* resetGlobalStyles(
+		siteIdOrSlug: number | string,
+		stylesheet: string,
+		activatedTheme?: ActiveTheme
+	) {
+		const globalStylesId: number =
+			activatedTheme?.global_styles_id || ( yield getGlobalStylesId( siteIdOrSlug, stylesheet ) );
+
+		const updatedGlobalStyles: GlobalStyles = yield wpcomRequest( {
+			path: `/sites/${ encodeURIComponent( siteIdOrSlug ) }/global-styles/${ globalStylesId }`,
+			apiNamespace: 'wp/v2',
+			method: 'POST',
+			body: {
+				id: globalStylesId,
+				settings: {},
+				styles: {},
+			},
+		} );
+
+		return updatedGlobalStyles;
+	}
+
 	function* getGlobalStylesId( siteIdOrSlug: number | string, stylesheet: string ) {
 		const theme: ActiveTheme = yield wpcomRequest( {
 			path: `/sites/${ encodeURIComponent( siteIdOrSlug ) }/themes/${ stylesheet }`,
@@ -373,6 +395,14 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		} );
 	}
 
+	/**
+	 * Set the design on the site.
+	 * @param siteSlug The site slug.
+	 * @param selectedDesign The selected design.
+	 * @param options The options.
+	 * @returns The activated theme.
+	 * @yields Yields effects for theme activation and global styles reset, including API calls and Redux actions.
+	 */
 	function* setDesignOnSite(
 		siteSlug: string,
 		selectedDesign: Design,
@@ -382,7 +412,7 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 			selectedDesign.slug ||
 			selectedDesign.recipe?.stylesheet?.split( '/' )[ 1 ] ||
 			selectedDesign.theme;
-		const { styleVariation, globalStyles } = options;
+		const { styleVariation, globalStyles, enableThemeSetup } = options;
 		const activatedTheme: ActiveTheme = yield wpcomRequest( {
 			path: `/sites/${ siteSlug }/themes/mine?_locale=user`,
 			apiVersion: '1.1',
@@ -391,12 +421,16 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 			},
 			method: 'POST',
 		} );
+		const activatedThemeId = activatedTheme.stylesheet ?? activatedTheme.id;
 
+		if ( styleVariation?.slug === DEFAULT_GLOBAL_STYLES_VARIATION_SLUG ) {
+			yield* resetGlobalStyles( siteSlug, activatedThemeId, activatedTheme );
+		}
 		// @todo Always use the global styles for consistency
-		if ( styleVariation?.slug ) {
+		else if ( styleVariation?.slug ) {
 			const variations: GlobalStyles[] = yield* getGlobalStylesVariations(
 				siteSlug,
-				activatedTheme.stylesheet
+				activatedThemeId
 			);
 			const currentVariation = variations.find(
 				( variation ) =>
@@ -405,22 +439,19 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 			);
 
 			if ( currentVariation ) {
-				yield* setGlobalStyles(
-					siteSlug,
-					activatedTheme.stylesheet,
-					currentVariation,
-					activatedTheme
-				);
+				yield* setGlobalStyles( siteSlug, activatedThemeId, currentVariation, activatedTheme );
 			}
 		}
 
 		if ( globalStyles ) {
-			yield* setGlobalStyles( siteSlug, activatedTheme.stylesheet, globalStyles, activatedTheme );
+			yield* setGlobalStyles( siteSlug, activatedThemeId, globalStyles, activatedTheme );
 		}
 
 		// Potentially runs Headstart.
 		// E.g. if the homepage has a Query Loop block, we insert placeholder posts on the new site.
-		yield* runThemeSetupOnSite( siteSlug );
+		if ( enableThemeSetup ) {
+			yield* runThemeSetupOnSite( siteSlug );
+		}
 
 		return activatedTheme;
 	}
@@ -500,10 +531,8 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 			},
 		].filter( Boolean ) as RequestTemplate[];
 
-		const endpointSuffix = isEnabled( 'pattern-assembler/perf-test' ) ? '-perf-test' : '';
-
 		yield wpcomRequest( {
-			path: `/sites/${ encodeURIComponent( siteSlug ) }/site-assembler${ endpointSuffix }`,
+			path: `/sites/${ encodeURIComponent( siteSlug ) }/site-assembler`,
 			apiNamespace: 'wpcom/v2',
 			body: {
 				templates,

package/src/site/constants.ts

@@ -1,8 +1,2 @@
-import { isEnabled } from '@automattic/calypso-config';
-
 export const STORE_KEY = 'automattic/site';
-
-export const getPlaceholderSiteID = () =>
-	isEnabled( 'pattern-assembler/v2' )
-		? '226011606' // assemblerdemo
-		: '224076220'; // creatio2demo
+export const getPlaceholderSiteID = () => '226011606'; // assemblerdemo

package/src/site/queries/use-site-media-storage.ts

@@ -25,6 +25,7 @@ function useSiteMediaStorage( {
 			} );
 
 			return {
+				maxStorageBytesFromAddOns: Number( mediaStorage.max_storage_bytes_from_add_ons ),
 				maxStorageBytes: Number( mediaStorage.max_storage_bytes ),
 				storageUsedBytes: Number( mediaStorage.storage_used_bytes ),
 			};

package/src/site/test/actions.ts

@@ -437,17 +437,47 @@ describe( 'Site Actions', () => {
 			recipe: mockedRecipe,
 		};
 		const mockedStyleVariation = {
+			title: 'Parrot',
+			slug: 'parrot',
+			settings: {
+				color: {
+					palette: {
+						theme: [
+							{
+								color: '#FF0000',
+								name: 'Red',
+								slug: 'red',
+							},
+						],
+					},
+				},
+			},
+			styles: {
+				spacing: {
+					blockGap: '0.5rem',
+				},
+			},
+		};
+		const mockedDefaultVariation = {
 			title: 'Default',
 			slug: 'default',
 			settings: {
 				color: {
 					palette: {
-						theme: [],
+						theme: [
+							{
+								color: '#880000',
+								name: 'Red',
+								slug: 'red',
+							},
+						],
 					},
 				},
 			},
 			styles: {
-				color: {},
+				spacing: {
+					blockGap: '1rem',
+				},
 			},
 		};
 
@@ -520,13 +550,49 @@ describe( 'Site Actions', () => {
 			);
 		} );
 
-		it( 'should call theme-setup api', () => {
+		it( 'should call global styles API to reset styles when user selects default variation', () => {
 			const { setDesignOnSite } = createActions( mockedClientCredentials );
-			const generator = setDesignOnSite( siteSlug, {
-				...mockedDesign,
-				slug: 'arbutus',
+			const generator = setDesignOnSite( siteSlug, mockedDesign, {
+				styleVariation: mockedDefaultVariation,
 			} );
 
+			// 1st iteration: WP_COM_REQUEST to /sites/${ siteSlug }/themes/mine is fired
+			expect( generator.next().value ).toEqual(
+				createMockedThemeSwitchApiRequest( {
+					theme: 'zoologist',
+				} )
+			);
+
+			// 2nd iteration: WP_COM_REQUEST to /sites/${ siteSlug }/global-styles/${ globalStylesId } is fired
+			expect(
+				generator.next( {
+					stylesheet: mockedDesign.recipe.stylesheet,
+					global_styles_id: mockedGlobalStylesId,
+				} ).value
+			).toEqual(
+				createMockedSetGlobalStylesApiRequest( mockedGlobalStylesId, {
+					id: mockedGlobalStylesId,
+					// Resetting styles means these values are empty, regrdless of the base styles
+					// specified in the `mockedDefaultVariation` object.
+					settings: {},
+					styles: {},
+				} )
+			);
+		} );
+
+		it( 'should call theme-setup api', () => {
+			const { setDesignOnSite } = createActions( mockedClientCredentials );
+			const generator = setDesignOnSite(
+				siteSlug,
+				{
+					...mockedDesign,
+					slug: 'arbutus',
+				},
+				{
+					enableThemeSetup: true,
+				}
+			);
+
 			// First iteration: WP_COM_REQUEST to /sites/${ siteSlug }/themes/mine is fired
 			expect( generator.next().value ).toEqual(
 				createMockedThemeSwitchApiRequest( {
@@ -535,7 +601,7 @@ describe( 'Site Actions', () => {
 			);
 
 			// Second iteration: WP_COM_REQUEST to /sites/${ siteSlug }/theme-setup is fired
-			expect( generator.next().value ).toEqual( createMockedThemeSetupApiRequest() );
+			expect( generator.next( {} ).value ).toEqual( createMockedThemeSetupApiRequest() );
 
 			// Second iteration: Complete the cycle
 			expect( generator.next().done ).toEqual( true );

package/src/site/types.ts

@@ -73,6 +73,7 @@ export interface CreateSiteParams {
 		is_blank_canvas?: boolean;
 		is_videopress_initial_purchase?: boolean;
 		wpcom_admin_interface?: string;
+		wpcom_hide_action_bar?: boolean;
 	};
 }
 
@@ -134,6 +135,7 @@ export interface SiteDetails {
 	is_a4a_client?: boolean;
 	is_a4a_dev_site?: boolean;
 	jetpack: boolean;
+	jetpack_connection?: boolean;
 	lang?: string;
 	launch_status: string;
 	locale: string;
@@ -156,10 +158,10 @@ export interface SiteDetails {
 	user_interactions?: string[];
 
 	// Jetpack computed properties
-	canAutoupdateFiles?: boolean;
-	canUpdateFiles?: boolean;
-	isMainNetworkSite?: boolean;
-	isSecondaryNetworkSite?: boolean;
+	canAutoupdateFiles?: boolean | null;
+	canUpdateFiles?: boolean | null;
+	isMainNetworkSite?: boolean | null;
+	isSecondaryNetworkSite?: boolean | null;
 
 	// Migration
 	site_migration?: SourceSiteMigrationBase;
@@ -273,9 +275,11 @@ export interface SiteDetailsOptions {
 	selected_features?: FeatureId[];
 	show_on_front?: string;
 	site_intent?: string;
+	site_partner_bundle?: string;
 	site_goals?: SiteGoal[];
 	site_segment?: string | null;
 	site_vertical_id?: string | null;
+	site_creation_flow?: string;
 	software_version?: string;
 	theme_slug?: string;
 	timezone?: string;
@@ -288,8 +292,9 @@ export interface SiteDetailsOptions {
 	was_created_with_blank_canvas_design?: boolean;
 	woocommerce_is_active?: boolean;
 	wordads?: boolean;
-	launchpad_screen?: false | 'off' | 'full' | 'minimized';
+	launchpad_screen?: false | 'off' | 'full' | 'minimized' | 'skipped';
 	launchpad_checklist_tasks_statuses?: LaunchPadCheckListTasksStatuses;
+	migration_source_site_domain?: string;
 	wpcom_production_blog_id?: number;
 	wpcom_staging_blog_ids?: number[];
 	can_blaze?: boolean;
@@ -297,6 +302,7 @@ export interface SiteDetailsOptions {
 	is_commercial?: boolean | null;
 	is_commercial_reasons?: string[];
 	wpcom_admin_interface?: string;
+	wpcom_hide_action_bar?: boolean;
 }
 
 export type SiteOption = keyof NonNullable< SiteDetails[ 'options' ] >;
@@ -347,7 +353,6 @@ export interface Domain {
 	expired: boolean;
 	auto_renewing: boolean;
 	pending_registration: boolean;
-	pending_registration_time: string;
 	has_registration: boolean;
 	points_to_wpcom: boolean;
 	privacy_available: boolean;
@@ -500,14 +505,14 @@ interface PaletteColor {
 	slug: string;
 	color: string;
 	name: string;
-	default: string;
+	default?: string;
 }
 
 export interface GlobalStyles {
 	slug?: string;
 	title?: string;
 	settings: {
-		color: {
+		color?: {
 			palette: {
 				default: PaletteColor[];
 				theme: PaletteColor[];
@@ -532,6 +537,7 @@ export interface LaunchPadCheckListTasksStatuses {
 }
 
 export interface ActiveTheme {
+	id: string;
 	stylesheet: string;
 	_links: {
 		'wp:user-global-styles': { href: string }[];
@@ -621,39 +627,6 @@ export interface SourceSiteMigrationBase {
 	migration_status?: string;
 }
 
-export interface SourceSiteMigrationDetails extends SourceSiteMigrationBase {
-	target_blog_id?: number;
-	site_migration_id: number;
-	percent: number;
-	created: string;
-	is_atomic: boolean;
-	// Statistics
-	backup_percent?: number;
-	backup_size?: number;
-	backup_started?: string;
-	site_size?: number;
-	restore_percent?: number;
-	restore_message?: string;
-	restore_failure?: string;
-	restore_started?: number;
-	comments_count?: number;
-	plugins_count?: number;
-	posts_count?: number;
-	tables_count?: number;
-	themes_count?: number;
-	uploads_count?: number;
-	real_percent?: number;
-	wp_version?: string;
-	// Source site details
-	is_target_blog_admin?: boolean;
-	is_target_blog_upgraded?: boolean;
-	target_blog_slug?: string;
-	// Steps details
-	step?: number;
-	step_name?: string;
-	total_steps?: number;
-}
-
 export interface Page {
 	title: string;
 	content: string;
@@ -673,6 +646,7 @@ export interface AssembleSiteOptions {
  * Site media storage from `/sites/[ siteIdOrSlug ]/media-storage` endpoint
  */
 export interface RawSiteMediaStorage {
+	max_storage_bytes_from_add_ons: number;
 	max_storage_bytes: number;
 	storage_used_bytes: number;
 }
@@ -681,6 +655,7 @@ export interface RawSiteMediaStorage {
  * Site media storage transformed for frontend use
  */
 export interface SiteMediaStorage {
+	maxStorageBytesFromAddOns: number;
 	maxStorageBytes: number;
 	storageUsedBytes: number;
 }

package/src/starter-designs-queries/types.ts

@@ -1,15 +1,4 @@
-import type { Category, DesignRecipe, Design } from '@automattic/design-picker/src/types';
-
-export interface StarterDesignsGeneratedQueryParams {
-	seed?: string;
-	_locale: string;
-}
-
-export interface StarterDesignsGenerated {
-	slug: string;
-	title: string;
-	recipe: DesignRecipe;
-}
+import type { Category, Design } from '@automattic/design-picker/src/types';
 
 export interface StarterDesigns {
 	filters: { subject: Record< string, Category > };

package/src/starter-designs-queries/use-starter-designs-query.ts

@@ -14,6 +14,7 @@ import type {
 
 interface StarterDesignsQueryParams {
 	seed?: string;
+	goals?: string[];
 	_locale: string;
 }
 
@@ -48,6 +49,7 @@ interface StarterDesign {
 	theme_type?: string;
 	screenshot?: string;
 	theme_tier: ThemeTier;
+	demo_uri?: string;
 }
 
 export function useStarterDesignsQuery(
@@ -97,6 +99,7 @@ function apiStarterDesignsToDesign( design: StarterDesign ): Design {
 		design_type,
 		screenshot,
 		theme_tier,
+		demo_uri,
 	} = design;
 
 	const is_externally_managed = design.theme_type === 'managed-external';
@@ -121,5 +124,6 @@ function apiStarterDesignsToDesign( design: StarterDesign ): Design {
 		theme: '',
 		screenshot,
 		design_tier: theme_tier?.slug,
+		demo_uri,
 	};
 }

package/src/stepper-internal/reducer.ts

@@ -7,6 +7,7 @@ type StepData = Record< string, unknown > & {
 	path: string;
 	intent: SiteIntent;
 	previousStep: string;
+	nextStep?: string;
 };
 
 export const stepData: Reducer< StepData | null, StepperInternalAction > = (