@automattic/onboarding 1.0.0

package/src/cart/index.tsx

@@ -0,0 +1,375 @@
+import config from '@automattic/calypso-config';
+import { getUrlParts } from '@automattic/calypso-url';
+import { DomainSuggestion, NewSiteSuccessResponse, Site } from '@automattic/data-stores';
+import { guessTimezone, getLanguage } from '@automattic/i18n-utils';
+import debugFactory from 'debug';
+import { getLocaleSlug } from 'i18n-calypso';
+import { startsWith, isEmpty } from 'lodash';
+import wpcomRequest from 'wpcom-proxy-request';
+import {
+	setupSiteAfterCreation,
+	isTailoredSignupFlow,
+	isMigrationFlow,
+	HUNDRED_YEAR_PLAN_FLOW,
+	isAnyHostingFlow,
+} from '../';
+import cartManagerClient from './create-cart-manager-client';
+import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
+
+const debug = debugFactory( 'calypso:signup:step-actions' );
+
+interface GetNewSiteParams {
+	flowToCheck: string;
+	isPurchasingDomainItem: boolean;
+	themeSlugWithRepo: string;
+	siteUrl?: string;
+	siteTitle: string;
+	siteAccentColor: string;
+	useThemeHeadstart: boolean;
+	siteVisibility: Site.Visibility;
+	username: string;
+	sourceSlug?: string;
+}
+
+type NewSiteParams = {
+	blog_title: string;
+	public: Site.Visibility;
+	blog_name: string;
+	find_available_url: boolean;
+	options: {
+		designType: string;
+		theme?: string;
+		use_theme_annotation: boolean;
+		default_annotation_as_primary_fallback: boolean;
+		site_segment: undefined;
+		site_information: {
+			title: string;
+		};
+		site_creation_flow: string;
+		timezone_string?: string;
+		wpcom_public_coming_soon: 0 | 1;
+		site_accent_color?: string;
+	};
+	validate: boolean;
+};
+
+const getBlogNameGenerationParams = ( {
+	siteUrl,
+	siteTitle,
+	flowToCheck,
+	username,
+	isPurchasingDomainItem,
+}: GetNewSiteParams ) => {
+	if ( siteUrl ) {
+		const blog_name = siteUrl.replace( '.wordpress.com', '' );
+
+		if ( isMigrationFlow( flowToCheck ) ) {
+			return {
+				blog_name,
+				find_available_url: true,
+			};
+		}
+
+		return {
+			blog_name,
+			find_available_url: !! isPurchasingDomainItem,
+		};
+	}
+
+	if ( siteTitle ) {
+		return {
+			blog_name: siteTitle,
+			find_available_url: true,
+		};
+	}
+
+	if ( isAnyHostingFlow( flowToCheck ) ) {
+		return {
+			blog_name: '',
+			find_available_url: true,
+		};
+	}
+
+	return {
+		blog_name: username,
+		find_available_url: true,
+	};
+};
+
+export const getNewSiteParams = ( params: GetNewSiteParams ) => {
+	const {
+		flowToCheck,
+		themeSlugWithRepo,
+		siteTitle,
+		siteAccentColor,
+		useThemeHeadstart = false,
+		siteVisibility,
+		sourceSlug,
+	} = params;
+
+	// We will use the default annotation instead of theme annotation as fallback,
+	// when segment and vertical values are not sent. Check pbAok1-p2#comment-834.
+	const newSiteParams: NewSiteParams = {
+		...getBlogNameGenerationParams( params ),
+		blog_title: siteTitle,
+		public: siteVisibility,
+		options: {
+			designType: '',
+			use_theme_annotation: useThemeHeadstart,
+			default_annotation_as_primary_fallback: true,
+			site_segment: undefined,
+			site_information: {
+				title: siteTitle,
+			},
+			site_creation_flow: flowToCheck,
+			timezone_string: guessTimezone(),
+			wpcom_public_coming_soon: siteVisibility === 0 ? 1 : 0,
+			...( sourceSlug && { site_source_slug: sourceSlug } ),
+			...( siteAccentColor && { site_accent_color: siteAccentColor } ),
+			...( themeSlugWithRepo && { theme: themeSlugWithRepo } ),
+		},
+		validate: false,
+	};
+
+	return newSiteParams;
+};
+
+export const createSiteWithCart = async (
+	flowName: string,
+	userIsLoggedIn: boolean,
+	isPurchasingDomainItem: boolean,
+	themeSlugWithRepo: string,
+	siteVisibility: Site.Visibility,
+	siteTitle: string,
+	siteAccentColor: string,
+	useThemeHeadstart: boolean,
+	username: string,
+	domainItem?: DomainSuggestion,
+	domainCartItem?: MinimalRequestCartProduct,
+	sourceSlug?: string
+) => {
+	const siteUrl = domainItem?.domain_name;
+	const isFreeThemePreselected = startsWith( themeSlugWithRepo, 'pub' );
+
+	const newSiteParams = getNewSiteParams( {
+		flowToCheck: flowName,
+		isPurchasingDomainItem,
+		themeSlugWithRepo,
+		siteUrl,
+		siteTitle,
+		siteAccentColor,
+		useThemeHeadstart,
+		siteVisibility,
+		username,
+		sourceSlug,
+	} );
+
+	// if ( isEmpty( bearerToken ) && 'onboarding-registrationless' === flowToCheck ) {
+	// 	saveToLocalStorageAndProceed( state, domainItem, themeItem, newSiteParams, callback );
+	// 	return;
+	// }
+
+	const locale = getLocaleSlug();
+	const hasSegmentationSurvey: boolean =
+		newSiteParams[ 'options' ][ 'site_creation_flow' ] === 'entrepreneur';
+	const segmentationSurveyAnswersAnonId = localStorage.getItem( 'ss-anon-id' );
+	localStorage.removeItem( 'ss-anon-id' );
+
+	const siteCreationResponse: NewSiteSuccessResponse = await wpcomRequest( {
+		path: '/sites/new',
+		apiVersion: '1.1',
+		method: 'POST',
+		body: {
+			...newSiteParams,
+			locale,
+			lang_id: getLanguage( locale as string )?.value,
+			client_id: config( 'wpcom_signup_id' ),
+			client_secret: config( 'wpcom_signup_key' ),
+			options: {
+				...newSiteParams.options,
+				has_segmentation_survey: hasSegmentationSurvey,
+				...( hasSegmentationSurvey && segmentationSurveyAnswersAnonId
+					? { segmentation_survey_answers_anon_id: segmentationSurveyAnswersAnonId }
+					: {} ),
+			},
+		},
+	} );
+
+	if ( ! siteCreationResponse.success ) {
+		// TODO ebuccelli: Manage siteCreationResponse.errors
+		return;
+	}
+
+	const parsedBlogURL = getUrlParts( siteCreationResponse?.blog_details.url );
+	const siteSlug = parsedBlogURL.hostname;
+	const siteId = siteCreationResponse?.blog_details.blogid;
+	const providedDependencies = {
+		siteId,
+		siteSlug,
+		domainItem,
+	};
+
+	if ( isTailoredSignupFlow( flowName ) || HUNDRED_YEAR_PLAN_FLOW === flowName ) {
+		await setupSiteAfterCreation( { siteId, flowName } );
+	}
+
+	await processItemCart(
+		siteSlug,
+		isFreeThemePreselected,
+		themeSlugWithRepo,
+		flowName,
+		userIsLoggedIn,
+		domainCartItem
+	);
+
+	return providedDependencies;
+};
+
+function prepareItemForAddingToCart( item: MinimalRequestCartProduct, lastKnownFlow?: string ) {
+	return {
+		...item,
+		extra: {
+			...item.extra,
+			context: 'signup',
+			...( lastKnownFlow && { signup_flow: lastKnownFlow } ),
+		},
+	};
+}
+
+export async function addPlanToCart(
+	siteSlug: string,
+	flowName: string,
+	userIsLoggedIn: boolean,
+	themeSlugWithRepo: string,
+	cartItem: MinimalRequestCartProduct
+) {
+	if ( isEmpty( cartItem ) ) {
+		// the user selected the free plan
+		return;
+	}
+
+	const isFreeThemePreselected = startsWith( themeSlugWithRepo, 'pub' );
+
+	await processItemCart(
+		siteSlug,
+		isFreeThemePreselected,
+		themeSlugWithRepo,
+		flowName,
+		userIsLoggedIn,
+		cartItem
+	);
+}
+
+export async function replaceProductsInCart(
+	siteSlug: string,
+	cartItems: MinimalRequestCartProduct[]
+) {
+	const cartKey = await cartManagerClient.getCartKeyForSiteSlug( siteSlug );
+
+	try {
+		const updatedCart = await cartManagerClient
+			.forCartKey( cartKey )
+			.actions.replaceProductsInCart( cartItems );
+
+		debug( 'product replace request complete', updatedCart );
+	} catch ( error ) {
+		debug( 'product replace request had an error', error );
+	}
+}
+
+const addToCartAndProceed = async (
+	newCartItem: MinimalRequestCartProduct,
+	siteSlug: string,
+	flowName: string
+) => {
+	const cartItem = prepareItemForAddingToCart( newCartItem, flowName );
+
+	if ( cartItem ) {
+		debug( 'adding products to cart', cartItem );
+		const cartKey = await cartManagerClient.getCartKeyForSiteSlug( siteSlug );
+
+		try {
+			const updatedCart = await cartManagerClient
+				.forCartKey( cartKey )
+				.actions.addProductsToCart( [ cartItem ] );
+
+			debug( 'product add request complete', updatedCart );
+		} catch ( error ) {
+			debug( 'product add request had an error', error );
+			//TODO Manage error
+			// reduxStore.dispatch( errorNotice( error.message ) );
+		}
+	} else {
+		debug( 'no cart items to add' );
+	}
+};
+
+export async function addProductsToCart(
+	siteSlug: string,
+	flowName: string,
+	cartItems: MinimalRequestCartProduct[] | null
+) {
+	if ( Array.isArray( cartItems ) ) {
+		const cartItemsToAdd = cartItems.map( ( cartItem ) =>
+			prepareItemForAddingToCart( cartItem, flowName )
+		);
+
+		debug( 'adding products to cart', cartItems );
+		const cartKey = await cartManagerClient.getCartKeyForSiteSlug( siteSlug );
+
+		try {
+			const updatedCart = await cartManagerClient
+				.forCartKey( cartKey )
+				.actions.addProductsToCart( cartItemsToAdd );
+
+			debug( 'product add request complete', updatedCart );
+		} catch ( error ) {
+			debug( 'product add request had an error', error );
+		}
+	}
+}
+
+export async function setThemeOnSite(
+	siteSlug: string,
+	themeSlugWithRepo: string,
+	themeStyleVariation?: string
+) {
+	if ( isEmpty( themeSlugWithRepo ) ) {
+		return;
+	}
+
+	const theme = themeSlugWithRepo.split( '/' )[ 1 ];
+
+	try {
+		await wpcomRequest( {
+			path: `/sites/${ siteSlug }/themes/mine`,
+			method: 'POST',
+			apiVersion: '1.1',
+			body: {
+				theme,
+				...( themeStyleVariation && { style_variation_slug: themeStyleVariation } ),
+			},
+		} );
+	} catch ( error ) {
+		//TODO: Manage error
+	}
+}
+
+async function processItemCart(
+	siteSlug: string,
+	isFreeThemePreselected: boolean,
+	themeSlugWithRepo: string,
+	lastKnownFlow: string,
+	userIsLoggedIn: boolean,
+	newCartItem?: MinimalRequestCartProduct
+) {
+	if ( ! userIsLoggedIn && isFreeThemePreselected ) {
+		await setThemeOnSite( siteSlug, themeSlugWithRepo );
+		newCartItem && ( await addToCartAndProceed( newCartItem, siteSlug, lastKnownFlow ) );
+	} else if ( userIsLoggedIn && isFreeThemePreselected ) {
+		await setThemeOnSite( siteSlug, themeSlugWithRepo );
+		newCartItem && ( await addToCartAndProceed( newCartItem, siteSlug, lastKnownFlow ) );
+	} else {
+		newCartItem && ( await addToCartAndProceed( newCartItem, siteSlug, lastKnownFlow ) );
+	}
+}

package/src/cart/test/index.ts

@@ -0,0 +1,172 @@
+import { Visibility } from '@automattic/data-stores';
+import { getNewSiteParams } from '..';
+import { HOSTING_LP_FLOW, MIGRATION_FLOW } from '../../utils/flows';
+
+describe( 'getNewSiteParams', () => {
+	function testParams( partialParams: Partial< Parameters< typeof getNewSiteParams >[ 0 ] > = {} ) {
+		return {
+			flowToCheck: 'test-flow',
+			isPurchasingDomainItem: false,
+			themeSlugWithRepo: 'pub/test-theme',
+			siteTitle: 'test site title',
+			siteAccentColor: '#deface',
+			useThemeHeadstart: false,
+			siteVisibility: Visibility.Private,
+			username: 'testuser',
+			...partialParams,
+		} satisfies Parameters< typeof getNewSiteParams >[ 0 ];
+	}
+
+	test( 'siteVisibility set to publicly indexed', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					siteVisibility: Visibility.PublicIndexed,
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				public: Visibility.PublicIndexed,
+				options: expect.objectContaining( {
+					wpcom_public_coming_soon: 0,
+				} ),
+			} )
+		);
+	} );
+
+	test( 'siteVisibility set to public but not indexed', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					siteVisibility: Visibility.PublicNotIndexed,
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				public: Visibility.PublicNotIndexed,
+				options: expect.objectContaining( {
+					wpcom_public_coming_soon: 1,
+				} ),
+			} )
+		);
+	} );
+
+	test( 'siteVisibility set to private', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					siteVisibility: Visibility.Private,
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				public: Visibility.Private,
+				options: expect.objectContaining( {
+					wpcom_public_coming_soon: 0, // Private sites are not "private" from all traffic
+				} ),
+			} )
+		);
+	} );
+
+	test( 'blog_name hint uses the site title when no site URL is present', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					siteUrl: undefined,
+					siteTitle: 'Testing Inc.',
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				blog_name: 'Testing Inc.',
+				find_available_url: true,
+			} )
+		);
+	} );
+
+	test( 'blog_name hint falls back to the username when no site URL or title is present', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					flowToCheck: HOSTING_LP_FLOW,
+					siteUrl: undefined,
+					siteTitle: '',
+					username: 'janedoe',
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				blog_name: '',
+				find_available_url: true,
+			} )
+		);
+	} );
+
+	test( 'Hosting flow does not fall back to username when site title and URL are missing', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					siteUrl: undefined,
+					siteTitle: '',
+					username: 'janedoe',
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				blog_name: 'janedoe',
+				find_available_url: true,
+			} )
+		);
+	} );
+
+	test( 'blog_name hint uses the site URL when present', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					siteUrl: 'testing123.wordpress.com',
+					siteTitle: 'Testing Inc.',
+					username: 'janedoe',
+					isPurchasingDomainItem: true,
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				blog_name: 'testing123',
+				find_available_url: true,
+			} )
+		);
+
+		expect(
+			getNewSiteParams(
+				testParams( {
+					siteUrl: 'testing123.wordpress.com',
+					siteTitle: 'Testing Inc.',
+					username: 'janedoe',
+					isPurchasingDomainItem: false,
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				blog_name: 'testing123',
+				find_available_url: false,
+			} )
+		);
+	} );
+
+	test( 'Migration flow uses find_available_url', () => {
+		expect(
+			getNewSiteParams(
+				testParams( {
+					flowToCheck: MIGRATION_FLOW,
+					siteUrl: 'testing123.wordpress.com',
+					isPurchasingDomainItem: false,
+				} )
+			)
+		).toEqual(
+			expect.objectContaining( {
+				blog_name: 'testing123',
+				find_available_url: true, // True despite the fact isPurchasingDomainItem is false
+			} )
+		);
+	} );
+} );

package/src/confetti/index.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+
+import { SVG, Rect, Circle } from '@wordpress/components';
+import * as React from 'react';
+
+const Index: React.FunctionComponent< { className?: string } > = ( { className } ) => (
+	<SVG
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 356 136"
+		role="presentation"
+		className={ className }
+	>
+		<Rect
+			x="314.913"
+			y="59.963"
+			width="7"
+			height="22"
+			rx="3.5"
+			transform="rotate(-50 314.913 59.963)"
+			fill="#984A9C"
+		/>
+		<Rect
+			y="121.876"
+			width="5.091"
+			height="16"
+			rx="2.545"
+			transform="rotate(-50 0 121.876)"
+			fill="#64CA43"
+		/>
+		<Rect
+			x="21.447"
+			y="85.104"
+			width="7"
+			height="22"
+			rx="3.5"
+			transform="rotate(-120 21.447 85.104)"
+			fill="#37E788"
+		/>
+		<Rect
+			x="75"
+			y="61.64"
+			width="4"
+			height="12.571"
+			rx="2"
+			transform="rotate(130 75 61.64)"
+			fill="#FF2D55"
+		/>
+		<Rect
+			x="247.461"
+			y="63.86"
+			width="4.773"
+			height="15"
+			rx="2.386"
+			transform="rotate(118 247.461 63.86)"
+			fill="#E7C037"
+		/>
+		<Rect
+			x="97"
+			y="2.529"
+			width="4.773"
+			height="15"
+			rx="2.386"
+			transform="rotate(-32 97 2.53)"
+			fill="#117AC9"
+		/>
+		<Rect
+			x="323.638"
+			y="110.513"
+			width="5.091"
+			height="16"
+			rx="2.545"
+			transform="rotate(40 323.638 110.513)"
+			fill="#3361CC"
+		/>
+		<Rect
+			x="160.138"
+			y="27"
+			width="7"
+			height="22"
+			rx="3.5"
+			transform="rotate(40 160.138 27)"
+			fill="#FF8085"
+		/>
+		<Circle cx="40.5" cy="101.095" r="4.5" fill="#F0B849" />
+		<Circle cx="20.928" cy="47.751" r="3" fill="#BF5AF2" />
+		<Circle cx="341" cy="134" r="2" fill="#F0C930" />
+		<Circle cx="131" cy="83" r="2" fill="#3361CC" />
+		<Circle cx="214.5" cy="13.5" r="2.5" fill="#37E688" />
+		<Circle cx="352.763" cy="98.263" r="3" fill="#009E73" />
+		<Circle cx="285.181" cy="60.541" r="3" fill="#FF3B30" />
+	</SVG>
+);
+
+export default Index;