@automattic/data-stores 1.0.0-alpha.0 → 3.0.0

package/src/launch/selectors.ts

@@ -0,0 +1,86 @@
+import { select } from '@wordpress/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';
+
+export const getLaunchSequence = (): typeof LaunchSequence => LaunchSequence;
+export const getLaunchStep = (): typeof LaunchStep => LaunchStep;
+
+export const getState = ( state: State ): State => state;
+export const hasPaidDomain = ( state: State ): boolean => {
+	if ( ! state.domain ) {
+		return false;
+	}
+	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;
+export const getSelectedPlanProductId = ( state: State ): number | undefined => state.planProductId;
+
+/**
+ * This returns the readonly value of the billing period.
+ * This value is automatically inferred from the selected paid plan.
+ * If the user picks a free plan, this value will remain unchanged and
+ * will return the billing period of the previously selected paid plan.
+ *
+ * @param state the state
+ */
+export const getLastPlanBillingPeriod = ( state: State ): Plans.PlanBillingPeriod =>
+	state.planBillingPeriod;
+
+export const isSelectedPlanPaid = ( state: State ): boolean =>
+	typeof state.planProductId !== 'undefined' &&
+	! select( PLANS_STORE ).isPlanProductFree( state.planProductId );
+
+// Check if a domain has been explicitly selected (including free subdomain)
+/**
+ * Check if the user has selected a domain, including explicitly selecting the subdomain
+ * This is useful for step/flow completion in the context of highlighting steps or enabling Launch button
+ *
+ * @param state State
+ */
+export const hasSelectedDomainOrSubdomain = ( state: State ): boolean =>
+	!! getSelectedDomain( state ) || state.confirmedDomainSelection;
+
+// Completion status of steps is derived from the state of the launch flow
+// Warning: because it's using getEntityRecord it works only inside the editor
+export const isStepCompleted = ( state: State, step: LaunchStepType ): boolean => {
+	if ( step === LaunchStep.Plan ) {
+		return !! getSelectedPlanProductId( state );
+	}
+	if ( step === LaunchStep.Name ) {
+		const site: { title?: string } | undefined = select( 'core' ).getEntityRecord(
+			'root',
+			'site',
+			undefined
+		);
+		return !! site?.title;
+	}
+	if ( step === LaunchStep.Domain ) {
+		return select( LAUNCH_STORE ).hasSelectedDomainOrSubdomain();
+	}
+	return false;
+};
+
+// Check if all steps are completed except the last one
+export const isFlowCompleted = ( state: State ): boolean =>
+	LaunchSequence.slice( 0, LaunchSequence.length - 1 ).every( ( step ) =>
+		isStepCompleted( state, step )
+	);
+
+// Check if at least one step is completed
+export const isFlowStarted = ( state: State ): boolean =>
+	LaunchSequence.some( ( step ) => isStepCompleted( state, step ) );
+
+// Get first incomplete step
+export const getFirstIncompleteStep = ( state: State ): LaunchStepType | undefined =>
+	LaunchSequence.find( ( step ) => ! isStepCompleted( state, step ) );
+
+export const getSiteTitle = ( state: State ): string | undefined => state?.siteTitle;
+
+export const getCurrentStep = ( state: State ): string => state.step;
+
+export const getDomainSearch = ( state: State ): string => state.domainSearch;

package/src/launch/types.ts

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

package/src/mapped-types.ts

@@ -1,3 +1,5 @@
+import type { FunctionKeys } from 'utility-types';
+
 /**
  * Mapped types
  *
@@ -12,15 +14,20 @@
 
 /* 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';`
  */
-export type SelectFromMap< S extends Record< string, ( ...args: any[] ) => any > > = {
-	[ selector in keyof S ]: (
-		...args: TailParameters< S[ selector ] >
-	) => ReturnType< S[ selector ] >;
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type SelectFromMap< S extends object > = {
+	[ selector in FunctionKeys< S > ]: (
+		...args: TailParameters< CastToFunction< S[ selector ] > >
+	) => ReturnType< CastToFunction< S[ selector ] > >;
 };
 
 /**
@@ -29,7 +36,11 @@ export type SelectFromMap< S extends Record< string, ( ...args: any[] ) => any >
  * @template A Selector map, usually from `import * as actions from './my-store/actions';`
  */
 export type DispatchFromMap< A extends Record< string, ( ...args: any[] ) => any > > = {
-	[ actionCreator in keyof A ]: ( ...args: Parameters< A[ actionCreator ] > ) => void;
+	[ actionCreator in keyof A ]: (
+		...args: Parameters< A[ actionCreator ] >
+	) => A[ actionCreator ] extends ( ...args: any[] ) => Generator
+		? Promise< GeneratorReturnType< A[ actionCreator ] > >
+		: void;
 };
 
 /**
@@ -38,9 +49,29 @@ 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.
  */
-export type TailParameters< F extends ( head: any, ...tail: any[] ) => any > = F extends (
-	head: any,
-	...tail: infer PS
-) => any
-	? PS
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type TailParameters< F extends Function > = F extends ( head: any, ...tail: infer T ) => any
+	? T
+	: never;
+
+/**
+ * Obtain the type finally returned by the generator when it's done iterating.
+ */
+export type GeneratorReturnType< T extends ( ...args: any[] ) => Generator > = T extends (
+	...args: any
+) => 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' );