@automattic/data-stores 2.0.0 → 3.0.1

package/src/launch/actions.ts

@@ -1,15 +1,9 @@
-/**
- * External dependencies
- */
-import type * as DomainSuggestions from '../domain-suggestions';
 import { select } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import type { LaunchStepType } from './types';
 import { PLANS_STORE } from './constants';
 import type { Plans } from '..';
+import type * as DomainSuggestions from '../domain-suggestions';
+import type { ReturnOrGeneratorYieldUnion } from '../mapped-types';
+import type { LaunchStepType } from './types';
 
 export const setSidebarFullscreen = () =>
 	( {
@@ -89,7 +83,6 @@ export const unsetPlanProductId = () =>
 		type: 'UNSET_PLAN_PRODUCT_ID',
 	} as const );
 
-/* eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types */
 export function updatePlan( planProductId: number | undefined ) {
 	// keep updatePlan for backwards compat
 	return setPlanProductId( planProductId );
@@ -155,19 +148,6 @@ export const disablePersistentSuccessView = () =>
 		type: 'DISABLE_SUCCESS_VIEW',
 	} as const );
 
-/**
- * Usually we use ReturnType of all the action creators to deduce all the actions.
- * This works until one of the action creators is a generator and doesn't actually "Return" an action.
- * This type helper allows for actions to be both functions and generators
- */
-type ReturnOrGeneratorYieldUnion< T extends ( ...args: any ) => any > = T extends (
-	...args: any
-) => infer Return
-	? Return extends Generator< infer T, infer U, any >
-		? T | U
-		: Return
-	: never;
-
 export type LaunchAction = ReturnOrGeneratorYieldUnion<
 	| typeof setSiteTitle
 	| typeof unsetDomain

package/src/launch/index.ts

@@ -1,17 +1,10 @@
-/**
- * External dependencies
- */
-import { controls } from '@wordpress/data-controls';
 import { plugins, registerStore, use } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
+import { controls } from '@wordpress/data-controls';
+import * as actions from './actions';
 import { STORE_KEY } from './constants';
+import persistOptions from './persist';
 import reducer, { State } from './reducer';
-import * as actions from './actions';
 import * as selectors from './selectors';
-import persistOptions from './persist';
 import type { SelectFromMap, DispatchFromMap } from '../mapped-types';
 
 export type { State };

package/src/launch/persist.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import persistenceConfigFactory from '../persistence-config-factory';
 
 export default persistenceConfigFactory( 'WP_LAUNCH' );

package/src/launch/reducer.ts

@@ -1,17 +1,10 @@
-/**
- * External dependencies
- */
-import type { Reducer } from 'redux';
 import { combineReducers } from '@wordpress/data';
-import type * as DomainSuggestions from '../domain-suggestions';
-
-/**
- * Internal dependencies
- */
 import { LaunchStep } from './data';
-import type { LaunchStepType } from './types';
-import type { LaunchAction } from './actions';
 import type { Plans } from '..';
+import type * as DomainSuggestions from '../domain-suggestions';
+import type { LaunchAction } from './actions';
+import type { LaunchStepType } from './types';
+import type { Reducer } from 'redux';
 
 const step: Reducer< LaunchStepType, LaunchAction > = ( state = LaunchStep.Name, action ) => {
 	if ( action.type === 'SET_STEP' ) {

package/src/launch/selectors.ts

@@ -1,18 +1,10 @@
-/**
- * External dependencies
- */
 import { select } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { LaunchSequence, LaunchStep } from './data';
 import { STORE_KEY as LAUNCH_STORE, PLANS_STORE } from './constants';
-
+import { LaunchSequence, LaunchStep } from './data';
+import type { Plans } from '..';
+import type * as DomainSuggestions from '../domain-suggestions';
 import type { State } from './reducer';
 import type { LaunchStepType } from './types';
-import type * as DomainSuggestions from '../domain-suggestions';
-import type { Plans } from '..';
 
 export const getLaunchSequence = (): typeof LaunchSequence => LaunchSequence;
 export const getLaunchStep = (): typeof LaunchStep => LaunchStep;
@@ -22,7 +14,7 @@ export const hasPaidDomain = ( state: State ): boolean => {
 	if ( ! state.domain ) {
 		return false;
 	}
-	return ! state.domain.is_free;
+	return ! state.domain.is_free; // @TODO: check if we are ever storing a paid domain
 };
 export const getSelectedDomain = ( state: State ): DomainSuggestions.DomainSuggestion | undefined =>
 	state.domain;
@@ -50,7 +42,7 @@ export const isSelectedPlanPaid = ( state: State ): boolean =>
  *
  * @param state State
  */
-export const hasSelectedDomain = ( state: State ): boolean =>
+export const hasSelectedDomainOrSubdomain = ( state: State ): boolean =>
 	!! getSelectedDomain( state ) || state.confirmedDomainSelection;
 
 // Completion status of steps is derived from the state of the launch flow
@@ -68,7 +60,7 @@ export const isStepCompleted = ( state: State, step: LaunchStepType ): boolean =
 		return !! site?.title;
 	}
 	if ( step === LaunchStep.Domain ) {
-		return select( LAUNCH_STORE ).hasSelectedDomain();
+		return select( LAUNCH_STORE ).hasSelectedDomainOrSubdomain();
 	}
 	return false;
 };

package/src/launch/types.ts

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
-import type { ValuesType } from 'utility-types';
-
-/**
- * Internal dependencies
- */
 import type { LaunchStep } from './data';
+import type { ValuesType } from 'utility-types';
 
 export type LaunchStepType = ValuesType< typeof LaunchStep >;

package/src/mapped-types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type { FunctionKeys } from 'utility-types';
 
 /**
@@ -17,15 +14,20 @@ import type { FunctionKeys } from 'utility-types';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+// See https://github.com/microsoft/TypeScript/issues/46855#issuecomment-974484444
+type Cast< T, U > = T extends U ? T : T & U;
+type CastToFunction< T > = Cast< T, ( ...args: any[] ) => any >;
+
 /**
  * Maps a "raw" selector object to the selectors available when registered on the @wordpress/data store.
  *
  * @template S Selector map, usually from `import * as selectors from './my-store/selectors';`
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 export type SelectFromMap< S extends object > = {
 	[ selector in FunctionKeys< S > ]: (
-		...args: TailParameters< S[ selector ] >
-	) => ReturnType< S[ selector ] >;
+		...args: TailParameters< CastToFunction< S[ selector ] > >
+	) => ReturnType< CastToFunction< S[ selector ] > >;
 };
 
 /**
@@ -47,6 +49,7 @@ export type DispatchFromMap< A extends Record< string, ( ...args: any[] ) => any
  * This is useful for typing some @wordpres/data functions that make a leading
  * `state` argument implicit.
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 export type TailParameters< F extends Function > = F extends ( head: any, ...tail: infer T ) => any
 	? T
 	: never;
@@ -59,3 +62,16 @@ export type GeneratorReturnType< T extends ( ...args: any[] ) => Generator > = T
 ) => Generator< any, infer R, any >
 	? R
 	: never;
+
+/**
+ * Usually we use ReturnType of all the action creators to deduce all the actions.
+ * This works until one of the action creators is a generator and doesn't actually "Return" an action.
+ * This type helper allows for actions to be both functions and generators
+ */
+export type ReturnOrGeneratorYieldUnion< T extends ( ...args: any ) => any > = T extends (
+	...args: any
+) => infer Return
+	? Return extends Generator< infer T, infer U, any >
+		? T | U
+		: Return
+	: never;

package/src/onboard/actions.ts

@@ -0,0 +1,292 @@
+import { guessTimezone, getLanguage } from '@automattic/i18n-utils';
+import { dispatch, select } from '@wordpress/data-controls';
+import { __ } from '@wordpress/i18n';
+import { DomainSuggestion } from '../domain-suggestions/types';
+import { STORE_KEY as SITE_STORE } from '../site';
+import { CreateSiteParams, Visibility, NewSiteBlogDetails } from '../site/types';
+import { FeatureId } from '../wpcom-features/types';
+import { GoalKey, STORE_KEY } from './constants';
+import type { State } from '.';
+// somewhat hacky, but resolves the circular dependency issue
+import type { Design, FontPair } from '@automattic/design-picker/src/types';
+
+// copied from design picker to avoid a circular dependency
+function isBlankCanvasDesign( design: { slug: string } | undefined ): boolean {
+	if ( ! design ) {
+		return false;
+	}
+	return /blank-canvas/i.test( design.slug );
+}
+
+type Language = {
+	value: number;
+};
+
+export const addFeature = ( featureId: FeatureId ) => ( {
+	type: 'ADD_FEATURE' as const,
+	featureId,
+} );
+
+export interface CreateSiteActionParameters {
+	username: string;
+	languageSlug: string;
+	bearerToken?: string;
+	visibility: number;
+	anchorFmPodcastId: string | null;
+	anchorFmEpisodeId: string | null;
+	anchorFmSpotifyUrl: string | null;
+}
+
+export function* createSite( {
+	username,
+	languageSlug,
+	bearerToken = undefined,
+	visibility = Visibility.PublicNotIndexed,
+	anchorFmPodcastId = null,
+	anchorFmEpisodeId = null,
+	anchorFmSpotifyUrl = null,
+}: CreateSiteActionParameters ) {
+	const { domain, selectedDesign, selectedFonts, siteTitle, selectedFeatures }: State =
+		yield select( STORE_KEY, 'getState' );
+
+	const siteUrl = domain?.domain_name || siteTitle || username;
+	const lang_id = ( getLanguage( languageSlug ) as Language )?.value;
+	const defaultTheme = 'zoologist';
+	const blogTitle = siteTitle.trim() === '' ? __( 'Site Title' ) : siteTitle;
+
+	const params: CreateSiteParams = {
+		blog_name: siteUrl?.split( '.wordpress' )[ 0 ],
+		blog_title: blogTitle,
+		public: visibility,
+		options: {
+			site_information: {
+				title: blogTitle,
+			},
+			lang_id: lang_id,
+			site_creation_flow: 'gutenboarding',
+			enable_fse: true,
+			theme: `pub/${ selectedDesign?.theme || defaultTheme }`,
+			timezone_string: guessTimezone(),
+			...( selectedDesign?.template && { template: selectedDesign.template } ),
+			...( selectedFonts && {
+				font_base: selectedFonts.base,
+				font_headings: selectedFonts.headings,
+			} ),
+			use_patterns: true,
+			selected_features: selectedFeatures,
+			wpcom_public_coming_soon: 1,
+			...( anchorFmPodcastId && {
+				anchor_fm_podcast_id: anchorFmPodcastId,
+			} ),
+			...( anchorFmEpisodeId && {
+				anchor_fm_episode_id: anchorFmEpisodeId,
+			} ),
+			...( anchorFmSpotifyUrl && {
+				anchor_fm_spotify_url: anchorFmSpotifyUrl,
+			} ),
+			...( selectedDesign && { is_blank_canvas: isBlankCanvasDesign( selectedDesign ) } ),
+		},
+		...( bearerToken && { authToken: bearerToken } ),
+	};
+	const success: NewSiteBlogDetails | undefined = yield dispatch(
+		SITE_STORE,
+		'createSite',
+		params
+	);
+
+	return success;
+}
+
+export const removeFeature = ( featureId: FeatureId ) => ( {
+	type: 'REMOVE_FEATURE' as const,
+	featureId,
+} );
+
+export const resetFonts = () => ( {
+	type: 'RESET_FONTS' as const,
+} );
+
+export const resetOnboardStore = () => ( {
+	type: 'RESET_ONBOARD_STORE' as const,
+} );
+
+export const setDomain = ( domain: DomainSuggestion | undefined ) => ( {
+	type: 'SET_DOMAIN' as const,
+	domain,
+} );
+
+export const setDomainCategory = ( domainCategory: string | undefined ) => ( {
+	type: 'SET_DOMAIN_CATEGORY' as const,
+	domainCategory,
+} );
+
+export const setDomainSearch = ( domainSearch: string ) => ( {
+	type: 'SET_DOMAIN_SEARCH_TERM' as const,
+	domainSearch,
+} );
+
+export const setFonts = ( fonts: FontPair | undefined ) => {
+	return {
+		type: 'SET_FONTS' as const,
+		fonts: fonts,
+	};
+};
+
+export const setHasUsedDomainsStep = ( hasUsedDomainsStep: boolean ) => ( {
+	type: 'SET_HAS_USED_DOMAINS_STEP' as const,
+	hasUsedDomainsStep,
+} );
+
+export const setHasUsedPlansStep = ( hasUsedPlansStep: boolean ) => ( {
+	type: 'SET_HAS_USED_PLANS_STEP' as const,
+	hasUsedPlansStep,
+} );
+
+export const setIsRedirecting = ( isRedirecting: boolean ) => ( {
+	type: 'SET_IS_REDIRECTING' as const,
+	isRedirecting,
+} );
+
+export const setLastLocation = ( path: string ) => ( {
+	type: 'SET_LAST_LOCATION' as const,
+	path,
+} );
+
+export const setPlanProductId = ( planProductId: number | undefined ) => ( {
+	type: 'SET_PLAN_PRODUCT_ID' as const,
+	planProductId,
+} );
+
+export const setRandomizedDesigns = ( randomizedDesigns: { featured: Design[] } ) => ( {
+	type: 'SET_RANDOMIZED_DESIGNS' as const,
+	randomizedDesigns,
+} );
+
+export const setSelectedDesign = ( selectedDesign: Design | undefined ) => ( {
+	type: 'SET_SELECTED_DESIGN' as const,
+	selectedDesign,
+} );
+
+export const setSelectedSite = ( selectedSite: number | undefined ) => ( {
+	type: 'SET_SELECTED_SITE' as const,
+	selectedSite,
+} );
+
+export const setShowSignupDialog = ( showSignup: boolean ) => ( {
+	type: 'SET_SHOW_SIGNUP_DIALOG' as const,
+	showSignup,
+} );
+
+export const setSiteTitle = ( siteTitle: string ) => ( {
+	type: 'SET_SITE_TITLE' as const,
+	siteTitle,
+} );
+
+export const setAnchorPodcastId = ( anchorPodcastId: string | null ) => ( {
+	type: 'SET_ANCHOR_PODCAST_ID' as const,
+	anchorPodcastId,
+} );
+
+export const setAnchorEpisodeId = ( anchorEpisodeId: string | null ) => ( {
+	type: 'SET_ANCHOR_PODCAST_EPISODE_ID' as const,
+	anchorEpisodeId,
+} );
+
+export const setAnchorSpotifyUrl = ( anchorSpotifyUrl: string | null ) => ( {
+	type: 'SET_ANCHOR_PODCAST_SPOTIFY_URL' as const,
+	anchorSpotifyUrl,
+} );
+
+export function updatePlan( planProductId: number ) {
+	// keep updatePlan for backwards compat
+	return setPlanProductId( planProductId );
+}
+
+export const startOnboarding = () => ( {
+	type: 'ONBOARDING_START' as const,
+} );
+
+export const setIntent = ( intent: string ) => ( {
+	type: 'SET_INTENT' as const,
+	intent,
+} );
+
+export const setStartingPoint = ( startingPoint: string ) => ( {
+	type: 'SET_STARTING_POINT' as const,
+	startingPoint,
+} );
+
+export const setStoreType = ( storeType: string ) => ( {
+	type: 'SET_STORE_TYPE' as const,
+	storeType,
+} );
+
+export const setStoreAddressValue = (
+	store_address_field: string,
+	store_address_value: string
+) => ( {
+	type: 'SET_STORE_ADDRESS_VALUE' as const,
+	store_address_field,
+	store_address_value,
+} );
+
+export const setPendingAction = ( pendingAction: undefined | ( () => Promise< any > ) ) => ( {
+	type: 'SET_PENDING_ACTION' as const,
+	pendingAction,
+} );
+
+export const setProgress = ( progress: number ) => ( {
+	type: 'SET_PROGRESS' as const,
+	progress,
+} );
+
+export const setProgressTitle = ( progressTitle: string | undefined ) => ( {
+	type: 'SET_PROGRESS_TITLE' as const,
+	progressTitle,
+} );
+
+export const setStepProgress = (
+	stepProgress: { count: number; progress: number } | undefined
+) => ( {
+	type: 'SET_STEP_PROGRESS' as const,
+	stepProgress,
+} );
+
+export const setGoals = ( goals: GoalKey[] ) => ( {
+	type: 'SET_GOALS' as const,
+	goals,
+} );
+
+export type OnboardAction = ReturnType<
+	| typeof addFeature
+	| typeof removeFeature
+	| typeof resetFonts
+	| typeof resetOnboardStore
+	| typeof setStoreType
+	| typeof setDomain
+	| typeof setDomainCategory
+	| typeof setDomainSearch
+	| typeof setFonts
+	| typeof setHasUsedDomainsStep
+	| typeof setHasUsedPlansStep
+	| typeof setIsRedirecting
+	| typeof setLastLocation
+	| typeof setPlanProductId
+	| typeof setRandomizedDesigns
+	| typeof setSelectedDesign
+	| typeof setSelectedSite
+	| typeof setShowSignupDialog
+	| typeof setSiteTitle
+	| typeof setAnchorPodcastId
+	| typeof setAnchorEpisodeId
+	| typeof setAnchorSpotifyUrl
+	| typeof startOnboarding
+	| typeof setIntent
+	| typeof setStartingPoint
+	| typeof setStoreAddressValue
+	| typeof setPendingAction
+	| typeof setProgress
+	| typeof setProgressTitle
+	| typeof setStepProgress
+	| typeof setGoals
+>;

package/src/onboard/constants.ts

@@ -0,0 +1,10 @@
+export const STORE_KEY = 'automattic/onboard';
+
+export enum GoalKey {
+	Write = 'write',
+	Sell = 'sell',
+	Promote = 'promote',
+	DIFM = 'difm',
+	Import = 'import',
+	Other = 'other',
+}

package/src/onboard/index.ts

@@ -0,0 +1,53 @@
+import { plugins, registerStore, use } from '@wordpress/data';
+import { controls } from '@wordpress/data-controls';
+import * as actions from './actions';
+import { STORE_KEY } from './constants';
+import persistOptions from './persist';
+import reducer, { State } from './reducer';
+import * as selectors from './selectors';
+import type { SelectFromMap, DispatchFromMap } from '../mapped-types';
+
+export type { State };
+
+export { GoalKey } from './constants';
+
+/**
+ * Onboard store depends on site-store. You should register the site before using this store.
+ */
+export function register(): typeof STORE_KEY {
+	use( plugins.persistence, persistOptions );
+
+	registerStore< State >( STORE_KEY, {
+		actions,
+		controls,
+		reducer: reducer as any, // eslint-disable-line @typescript-eslint/no-explicit-any
+		selectors,
+		persist: [
+			'anchorPodcastId',
+			'anchorEpisodeId',
+			'anchorSpotifyUrl',
+			'domain',
+			'domainSearch',
+			'goals',
+			'hasUsedDomainsStep',
+			'hasUsedPlansStep',
+			'intent',
+			'lastLocation',
+			'planProductId',
+			'randomizedDesigns',
+			'selectedDesign',
+			'selectedFeatures',
+			'selectedFonts',
+			'selectedSite',
+			'siteTitle',
+			'storeType',
+		],
+	} );
+
+	return STORE_KEY;
+}
+
+declare module '@wordpress/data' {
+	function dispatch( key: typeof STORE_KEY ): DispatchFromMap< typeof actions >;
+	function select( key: typeof STORE_KEY ): SelectFromMap< typeof selectors >;
+}

package/src/onboard/persist.ts

@@ -0,0 +1,3 @@
+import persistenceConfigFactory from '../persistence-config-factory';
+
+export default persistenceConfigFactory( 'WP_ONBOARD' );