@automattic/data-stores 3.0.1 → 3.1.0-rc.1

package/src/onboard/actions.ts

@@ -1,14 +1,17 @@
+import config from '@automattic/calypso-config';
 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 '.';
+import { SiteGoal, STORE_KEY } from './constants';
+import { ProfilerData, ReadymadeTemplate } from './types';
+import type { DomainTransferData, State } from '.';
+import type { DomainSuggestion } from '../domain-suggestions';
+import type { FeatureId } from '../shared-types';
 // somewhat hacky, but resolves the circular dependency issue
-import type { Design, FontPair } from '@automattic/design-picker/src/types';
+import type { Design, StyleVariation } from '@automattic/design-picker/src/types';
+import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
 
 // copied from design picker to avoid a circular dependency
 function isBlankCanvasDesign( design: { slug: string } | undefined ): boolean {
@@ -27,32 +30,42 @@ export const addFeature = ( featureId: FeatureId ) => ( {
 	featureId,
 } );
 
-export interface CreateSiteActionParameters {
+export const setSiteUrl = ( siteUrl: string ) => ( {
+	type: 'SET_SITE_URL' as const,
+	siteUrl,
+} );
+
+export interface CreateSiteBaseActionParameters {
 	username: string;
 	languageSlug: string;
-	bearerToken?: string;
 	visibility: number;
+}
+
+export interface CreateSiteActionParameters extends CreateSiteBaseActionParameters {
+	bearerToken?: string;
 	anchorFmPodcastId: string | null;
 	anchorFmEpisodeId: string | null;
 	anchorFmSpotifyUrl: string | null;
 }
 
-export function* createSite( {
+export function* createVideoPressSite( {
 	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' );
+}: CreateSiteBaseActionParameters ) {
+	const { domain, selectedDesign, 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 isVideomakerTrial = config.isEnabled( 'videomaker-trial' );
+	const defaultTheme = selectedDesign?.theme || 'premium/videomaker';
+	const legacyVertical = 'premium/videomaker' === defaultTheme ? 'videomaker' : 'videomaker-white';
+	const siteVertical = isVideomakerTrial ? 'videomaker' : legacyVertical;
 	const blogTitle = siteTitle.trim() === '' ? __( 'Site Title' ) : siteTitle;
+	const themeSlug = isVideomakerTrial ? 'pub/videomaker' : 'pub/twentytwentytwo'; // NOTE: keep this a consistent, free theme so post ids during headstart re-run after premium theme switch remain consistent
 
 	const params: CreateSiteParams = {
 		blog_name: siteUrl?.split( '.wordpress' )[ 0 ],
@@ -63,31 +76,19 @@ export function* createSite( {
 				title: blogTitle,
 			},
 			lang_id: lang_id,
-			site_creation_flow: 'gutenboarding',
+			site_creation_flow: 'videopress',
 			enable_fse: true,
-			theme: `pub/${ selectedDesign?.theme || defaultTheme }`,
+			theme: themeSlug,
 			timezone_string: guessTimezone(),
-			...( selectedDesign?.template && { template: selectedDesign.template } ),
-			...( selectedFonts && {
-				font_base: selectedFonts.base,
-				font_headings: selectedFonts.headings,
-			} ),
 			use_patterns: true,
+			site_vertical_name: siteVertical,
 			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 ) } ),
+			is_videopress_initial_purchase: ! isVideomakerTrial,
 		},
-		...( bearerToken && { authToken: bearerToken } ),
 	};
+
 	const success: NewSiteBlogDetails | undefined = yield dispatch(
 		SITE_STORE,
 		'createSite',
@@ -97,6 +98,83 @@ export function* createSite( {
 	return success;
 }
 
+export function* createVideoPressTvSite( {
+	languageSlug,
+	visibility = Visibility.PublicNotIndexed,
+}: CreateSiteBaseActionParameters ) {
+	const { selectedDesign, selectedFeatures }: State = yield select( STORE_KEY, 'getState' );
+
+	const lang_id = ( getLanguage( languageSlug ) as Language )?.value;
+	const blogTitle = 'VideoPress TV';
+
+	const params: CreateSiteParams = {
+		blog_name: '', // will be replaced on server with random domain
+		blog_title: blogTitle,
+		public: visibility,
+		options: {
+			site_information: {
+				title: blogTitle,
+			},
+			lang_id: lang_id,
+			site_creation_flow: 'videopress-tv',
+			enable_fse: true,
+			theme: 'pub/videopress-hq',
+			timezone_string: guessTimezone(),
+			use_patterns: true,
+			selected_features: selectedFeatures,
+			wpcom_public_coming_soon: 1,
+			...( selectedDesign && { is_blank_canvas: isBlankCanvasDesign( selectedDesign ) } ),
+			is_videopress_initial_purchase: true,
+		},
+	};
+
+	const success: NewSiteBlogDetails | undefined = yield dispatch(
+		SITE_STORE,
+		'createSite',
+		params
+	);
+
+	return success;
+}
+
+export function* createSenseiSite( {
+	username = '',
+	languageSlug = '',
+	visibility = Visibility.PublicNotIndexed,
+} ) {
+	const { domain, selectedDesign, siteTitle, selectedFeatures }: State = yield select(
+		STORE_KEY,
+		'getState'
+	);
+
+	const siteUrl = domain?.domain_name || siteTitle || username;
+	const lang_id = ( getLanguage( languageSlug ) as Language )?.value;
+	const blogTitle = siteTitle.trim() === '' ? __( 'Site Title' ) : siteTitle;
+
+	const success: boolean | undefined = yield dispatch( SITE_STORE, 'createSite', {
+		blog_name: siteUrl?.split( '.wordpress' )[ 0 ],
+		blog_title: blogTitle,
+		public: visibility,
+		options: {
+			site_information: {
+				title: blogTitle,
+			},
+			lang_id: lang_id,
+			site_creation_flow: 'sensei',
+			enable_fse: true,
+			timezone_string: guessTimezone(),
+			use_patterns: true,
+			site_intent: 'sensei',
+			launchpad_screen: 'off',
+			selected_features: selectedFeatures,
+			wpcom_public_coming_soon: 1,
+			...( selectedDesign && { is_blank_canvas: isBlankCanvasDesign( selectedDesign ) } ),
+		},
+	} );
+
+	return success;
+}
+
 export const removeFeature = ( featureId: FeatureId ) => ( {
 	type: 'REMOVE_FEATURE' as const,
 	featureId,
@@ -108,6 +186,12 @@ export const resetFonts = () => ( {
 
 export const resetOnboardStore = () => ( {
 	type: 'RESET_ONBOARD_STORE' as const,
+	skipFlags: [] as string[],
+} );
+
+export const resetOnboardStoreWithSkipFlags = ( skipFlags: string[] ) => ( {
+	type: 'RESET_ONBOARD_STORE' as const,
+	skipFlags,
 } );
 
 export const setDomain = ( domain: DomainSuggestion | undefined ) => ( {
@@ -125,13 +209,6 @@ export const setDomainSearch = ( domainSearch: string ) => ( {
 	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,
@@ -157,6 +234,16 @@ export const setPlanProductId = ( planProductId: number | undefined ) => ( {
 	planProductId,
 } );
 
+export const setPlanCartItem = ( planCartItem: MinimalRequestCartProduct | null ) => ( {
+	type: 'SET_PLAN_CART_ITEM' as const,
+	planCartItem,
+} );
+
+export const setProductCartItems = ( productCartItems: MinimalRequestCartProduct[] | null ) => ( {
+	type: 'SET_PRODUCT_CART_ITEMS' as const,
+	productCartItems,
+} );
+
 export const setRandomizedDesigns = ( randomizedDesigns: { featured: Design[] } ) => ( {
 	type: 'SET_RANDOMIZED_DESIGNS' as const,
 	randomizedDesigns,
@@ -167,6 +254,18 @@ export const setSelectedDesign = ( selectedDesign: Design | undefined ) => ( {
 	selectedDesign,
 } );
 
+export const setSelectedStyleVariation = (
+	selectedStyleVariation: StyleVariation | undefined
+) => ( {
+	type: 'SET_SELECTED_STYLE_VARIATION' as const,
+	selectedStyleVariation,
+} );
+
+export const setSelectedReadymadeTemplate = ( readymadeTemplate: ReadymadeTemplate ) => ( {
+	type: 'SET_READYMADE_TEMPLATE' as const,
+	readymadeTemplate,
+} );
+
 export const setSelectedSite = ( selectedSite: number | undefined ) => ( {
 	type: 'SET_SELECTED_SITE' as const,
 	selectedSite,
@@ -182,19 +281,19 @@ export const setSiteTitle = ( siteTitle: string ) => ( {
 	siteTitle,
 } );
 
-export const setAnchorPodcastId = ( anchorPodcastId: string | null ) => ( {
-	type: 'SET_ANCHOR_PODCAST_ID' as const,
-	anchorPodcastId,
+export const setSiteDescription = ( siteDescription: string ) => ( {
+	type: 'SET_SITE_DESCRIPTION' as const,
+	siteDescription,
 } );
 
-export const setAnchorEpisodeId = ( anchorEpisodeId: string | null ) => ( {
-	type: 'SET_ANCHOR_PODCAST_EPISODE_ID' as const,
-	anchorEpisodeId,
+export const setSiteLogo = ( siteLogo: string | null ) => ( {
+	type: 'SET_SITE_LOGO' as const,
+	siteLogo,
 } );
 
-export const setAnchorSpotifyUrl = ( anchorSpotifyUrl: string | null ) => ( {
-	type: 'SET_ANCHOR_PODCAST_SPOTIFY_URL' as const,
-	anchorSpotifyUrl,
+export const setSiteAccentColor = ( siteAccentColor: string ) => ( {
+	type: 'SET_SITE_ACCENT_COLOR' as const,
+	siteAccentColor,
 } );
 
 export function updatePlan( planProductId: number ) {
@@ -230,6 +329,7 @@ export const setStoreAddressValue = (
 	store_address_value,
 } );
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const setPendingAction = ( pendingAction: undefined | ( () => Promise< any > ) ) => ( {
 	type: 'SET_PENDING_ACTION' as const,
 	pendingAction,
@@ -245,16 +345,135 @@ export const setProgressTitle = ( progressTitle: string | undefined ) => ( {
 	progressTitle,
 } );
 
-export const setStepProgress = (
-	stepProgress: { count: number; progress: number } | undefined
+export const setGoals = ( goals: SiteGoal[] ) => ( {
+	type: 'SET_GOALS' as const,
+	goals,
+} );
+
+export const clearImportGoal = () => ( {
+	type: 'CLEAR_IMPORT_GOAL' as const,
+} );
+
+export const clearDIFMGoal = () => ( {
+	type: 'CLEAR_DIFM_GOAL' as const,
+} );
+
+export const resetGoals = () => ( {
+	type: 'RESET_GOALS' as const,
+} );
+
+export const resetIntent = () => ( {
+	type: 'RESET_INTENT' as const,
+} );
+
+export const resetSelectedDesign = () => ( {
+	type: 'RESET_SELECTED_DESIGN' as const,
+} );
+
+export const setVerticalId = ( verticalId: string ) => ( {
+	type: 'SET_VERTICAL_ID' as const,
+	verticalId,
+} );
+
+export const setStoreLocationCountryCode = ( storeLocationCountryCode: string ) => ( {
+	type: 'SET_STORE_LOCATION_COUNTRY_CODE' as const,
+	storeLocationCountryCode,
+} );
+
+export const setEcommerceFlowRecurType = ( ecommerceFlowRecurType: string ) => ( {
+	type: 'SET_ECOMMERCE_FLOW_RECUR_TYPE' as const,
+	ecommerceFlowRecurType,
+} );
+
+export const setCouponCode = ( couponCode: string ) => ( {
+	type: 'SET_COUPON_CODE' as const,
+	couponCode,
+} );
+
+export const resetCouponCode = () => ( {
+	type: 'RESET_COUPON_CODE' as const,
+} );
+
+export const setStorageAddonSlug = ( storageAddonSlug: string ) => ( {
+	type: 'SET_STORAGE_ADDON_SLUG' as const,
+	storageAddonSlug,
+} );
+
+export const resetStorageAddonSlug = () => ( {
+	type: 'RESET_STORAGE_ADDON_SLUG' as const,
+} );
+
+export const setDomainForm = ( step: Record< string, string > ) => {
+	const lastUpdated = Date.now();
+
+	return {
+		type: 'SET_DOMAIN_FORM' as const,
+		step: { ...step, lastUpdated },
+	};
+};
+
+export const setDomainCartItem = ( domainCartItem: MinimalRequestCartProduct | undefined ) => ( {
+	type: 'SET_DOMAIN_CART_ITEM' as const,
+	domainCartItem,
+} );
+
+export const setDomainCartItems = (
+	domainCartItems: MinimalRequestCartProduct[] | undefined
 ) => ( {
-	type: 'SET_STEP_PROGRESS' as const,
-	stepProgress,
+	type: 'SET_DOMAIN_CART_ITEMS' as const,
+	domainCartItems,
 } );
 
-export const setGoals = ( goals: GoalKey[] ) => ( {
-	type: 'SET_GOALS' as const,
-	goals,
+export const setDomainsTransferData = ( bulkDomainsData: DomainTransferData | undefined ) => ( {
+	type: 'SET_DOMAINS_TRANSFER_DATA' as const,
+	bulkDomainsData,
+} );
+
+export const setSignupDomainOrigin = ( signupDomainOrigin: string | undefined ) => ( {
+	type: 'SET_SIGNUP_DOMAIN_ORIGIN' as const,
+	signupDomainOrigin,
+} );
+
+export const setShouldImportDomainTransferDnsRecords = (
+	shouldImportDomainTransferDnsRecords: boolean
+) => ( {
+	type: 'SET_SHOULD_IMPORT_DOMAIN_TRANSFER_DNS_RECORDS' as const,
+	shouldImportDomainTransferDnsRecords,
+} );
+
+export const setHideFreePlan = ( hideFreePlan: boolean ) => ( {
+	type: 'SET_HIDE_FREE_PLAN' as const,
+	hideFreePlan,
+} );
+
+export const setHidePlansFeatureComparison = ( hidePlansFeatureComparison: boolean ) => ( {
+	type: 'SET_HIDE_PLANS_FEATURE_COMPARISON' as const,
+	hidePlansFeatureComparison,
+} );
+
+export const setIsMigrateFromWp = ( isMigrateFromWp: boolean ) => ( {
+	type: 'SET_IS_MIGRATE_FROM_WP' as const,
+	isMigrateFromWp,
+} );
+
+export const setPluginsToVerify = ( pluginSlugs: string[] ) => ( {
+	type: 'SET_PLUGIN_SLUGS_TO_VERIFY' as const,
+	pluginSlugs,
+} );
+
+export const setProfilerData = ( profilerData: ProfilerData ) => ( {
+	type: 'SET_PROFILER_DATA' as const,
+	profilerData,
+} );
+
+export const setPaidSubscribers = ( paidSubscribers: boolean ) => ( {
+	type: 'SET_PAID_SUBSCRIBERS' as const,
+	paidSubscribers,
+} );
+
+export const setPartnerBundle = ( partnerBundle: string | null ) => ( {
+	type: 'SET_PARTNER_BUNDLE' as const,
+	partnerBundle,
 } );
 
 export type OnboardAction = ReturnType<
@@ -262,24 +481,29 @@ export type OnboardAction = ReturnType<
 	| typeof removeFeature
 	| typeof resetFonts
 	| typeof resetOnboardStore
+	| typeof resetOnboardStoreWithSkipFlags
+	| typeof resetStorageAddonSlug
+	| typeof resetCouponCode
 	| typeof setStoreType
+	| typeof setDomainsTransferData
+	| typeof setShouldImportDomainTransferDnsRecords
 	| typeof setDomain
 	| typeof setDomainCategory
 	| typeof setDomainSearch
-	| typeof setFonts
 	| typeof setHasUsedDomainsStep
 	| typeof setHasUsedPlansStep
 	| typeof setIsRedirecting
 	| typeof setLastLocation
 	| typeof setPlanProductId
+	| typeof setPluginsToVerify
+	| typeof setProfilerData
 	| typeof setRandomizedDesigns
 	| typeof setSelectedDesign
+	| typeof setSelectedStyleVariation
 	| typeof setSelectedSite
+	| typeof setSelectedReadymadeTemplate
 	| typeof setShowSignupDialog
 	| typeof setSiteTitle
-	| typeof setAnchorPodcastId
-	| typeof setAnchorEpisodeId
-	| typeof setAnchorSpotifyUrl
 	| typeof startOnboarding
 	| typeof setIntent
 	| typeof setStartingPoint
@@ -287,6 +511,30 @@ export type OnboardAction = ReturnType<
 	| typeof setPendingAction
 	| typeof setProgress
 	| typeof setProgressTitle
-	| typeof setStepProgress
 	| typeof setGoals
+	| typeof clearImportGoal
+	| typeof clearDIFMGoal
+	| typeof resetGoals
+	| typeof resetIntent
+	| typeof resetSelectedDesign
+	| typeof setDomainForm
+	| typeof setDomainCartItem
+	| typeof setDomainCartItems
+	| typeof setSiteDescription
+	| typeof setSiteLogo
+	| typeof setSiteUrl
+	| typeof setSiteAccentColor
+	| typeof setVerticalId
+	| typeof setStoreLocationCountryCode
+	| typeof setEcommerceFlowRecurType
+	| typeof setCouponCode
+	| typeof setStorageAddonSlug
+	| typeof setHideFreePlan
+	| typeof setHidePlansFeatureComparison
+	| typeof setProductCartItems
+	| typeof setPlanCartItem
+	| typeof setIsMigrateFromWp
+	| typeof setPaidSubscribers
+	| typeof setPartnerBundle
+	| typeof setSignupDomainOrigin
 >;

package/src/onboard/constants.ts

@@ -1,10 +1,33 @@
 export const STORE_KEY = 'automattic/onboard';
 
-export enum GoalKey {
+export enum SiteGoal {
 	Write = 'write',
 	Sell = 'sell',
 	Promote = 'promote',
-	DIFM = 'difm',
+	DIFM = 'difm', // "Do It For Me"
 	Import = 'import',
+	ImportSubscribers = 'import-subscribers',
 	Other = 'other',
+	PaidSubscribers = 'paid-subscribers',
+}
+
+export enum SiteIntent {
+	Write = 'write',
+	StartWriting = 'start-writing',
+	Sell = 'sell',
+	Build = 'build',
+	DIFM = 'difm', // "Do It For Me"
+	WpAdmin = 'wpadmin',
+	Import = 'import', // deprecated
+	WithThemeAssembler = 'with-theme-assembler',
+	AssemblerFirst = 'assembler-first',
+	ReadyMadeTemplate = 'readymade-template',
+	AIAssembler = 'ai-assembler',
+	Newsletter = 'newsletter',
+	FreePostSetup = 'free-post-setup', // non-signup flow
+	SiteMigration = 'site-migration',
+	LinkInBioPostSetup = 'link-in-bio-post-setup', // non-signup flow
+	NewsletterPostSetup = 'newsletter-post-setup', // non-signup flow
+	UpdateDesign = 'update-design', // non-signup flow
+	UpdateOptions = 'update-options', // non-signup flow
 }

package/src/onboard/index.ts

@@ -1,53 +1,69 @@
-import { plugins, registerStore, use } from '@wordpress/data';
+import { registerStore } from '@wordpress/data';
 import { controls } from '@wordpress/data-controls';
+import { registerPlugins } from '../plugins';
 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 type OnboardSelect = SelectFromMap< typeof selectors >;
+export type OnboardActions = DispatchFromMap< typeof actions >;
 
-export { GoalKey } from './constants';
+export { SiteGoal, SiteIntent } from './constants';
+export * as utils from './utils';
+export * from './types';
+let isRegistered = false;
 
 /**
  * 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 );
+	if ( isRegistered ) {
+		return STORE_KEY;
+	}
 
-	registerStore< State >( STORE_KEY, {
+	registerPlugins();
+
+	registerStore( STORE_KEY, {
 		actions,
 		controls,
-		reducer: reducer as any, // eslint-disable-line @typescript-eslint/no-explicit-any
+		reducer,
 		selectors,
 		persist: [
-			'anchorPodcastId',
-			'anchorEpisodeId',
-			'anchorSpotifyUrl',
+			'domainTransferNames',
+			'shouldImportDomainTransferDnsRecords',
 			'domain',
 			'domainSearch',
+			'domainForm',
 			'goals',
 			'hasUsedDomainsStep',
 			'hasUsedPlansStep',
 			'intent',
+			'paidSubscribers',
 			'lastLocation',
 			'planProductId',
 			'randomizedDesigns',
 			'selectedDesign',
 			'selectedFeatures',
-			'selectedFonts',
 			'selectedSite',
+			'readymadeTemplate',
 			'siteTitle',
+			'siteDescription',
+			'siteLogo',
+			'siteAccentColor',
 			'storeType',
+			'verticalId',
+			'storeLocationCountryCode',
+			'ecommerceFlowRecurType',
+			'couponCode',
+			'storageAddonSlug',
+			'domainCartItem',
+			'planCartItem',
+			'productCartItems',
 		],
 	} );
-
+	isRegistered = true;
 	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 >;
-}