@automattic/onboarding 1.0.0 → 1.0.1

package/dist/types/wpcom-request.d.ts

@@ -0,0 +1,7 @@
+import { type WpcomRequestParams } from 'wpcom-proxy-request';
+type WpcomRequester = <T>(params: WpcomRequestParams) => Promise<T>;
+export declare function setRequester(requester: WpcomRequester): void;
+export default function wpcomRequest<T>(params: WpcomRequestParams): Promise<T>;
+export declare function canAccessWpcomApis(): boolean;
+export {};
+//# sourceMappingURL=wpcom-request.d.ts.map

package/dist/types/wpcom-request.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wpcom-request.d.ts","sourceRoot":"","sources":["../../src/wpcom-request.ts"],"names":[],"mappings":"AAAA,OAA0B,EACzB,KAAK,kBAAkB,EAEvB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,cAAc,GAAG,CAAE,CAAC,EAAI,MAAM,EAAE,kBAAkB,KAAM,OAAO,CAAE,CAAC,CAAE,CAAC;AAI1E,wBAAgB,YAAY,CAAE,SAAS,EAAE,cAAc,GAAI,IAAI,CAE9D;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EAAI,MAAM,EAAE,kBAAkB,GAAI,OAAO,CAAE,CAAC,CAAE,CAKpF;AAED,wBAAgB,kBAAkB,IAAI,OAAO,CAK5C"}

package/jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
 	preset: '../../test/packages/jest-preset.js',
 	testEnvironment: 'jsdom',
-	transformIgnorePatterns: [ 'node_modules/(?!gridicons)(?!.*\\.svg)' ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/onboarding",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Onboarding components for WordPress.com.",
   "homepage": "https://github.com/Automattic/wp-calypso",
   "license": "GPL-2.0-or-later",
@@ -8,6 +8,20 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "calypso:src": "src/index.ts",
+  "exports": {
+    ".": {
+      "calypso:src": "./src/index.ts",
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./src/*": {
+      "calypso:src": "./src/*"
+    },
+    "./styles/*": {
+      "calypso:src": "./styles/*"
+    }
+  },
   "sideEffects": [
     "*.css",
     "*.scss"
@@ -26,38 +40,45 @@
     "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
     "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && yarn run -T copy-assets && npx copyfiles ./styles/** dist",
     "prepack": "yarn run clean && yarn run build",
-    "watch": "tsc --build ./tsconfig.json --watch"
+    "watch": "tsc --build ./tsconfig.json --watch",
+    "storybook:start": "storybook dev"
   },
   "dependencies": {
     "@automattic/calypso-config": "^1.0.0-alpha.0",
-    "@automattic/components": "^2.1.1",
-    "@automattic/data-stores": "^3.0.1",
-    "@wordpress/components": "^28.2.0",
-    "@wordpress/data": "^10.2.0",
-    "@wordpress/icons": "^10.2.0",
-    "@wordpress/react-i18n": "^4.2.0",
+    "@automattic/components": "^3.0.4",
+    "@automattic/data-stores": "^3.2.1",
+    "@automattic/domain-search": "^1.0.1",
+    "@wordpress/components": "^35.0.0",
+    "@wordpress/data": "^10.48.0",
+    "@wordpress/icons": "^13.3.0",
+    "@wordpress/react-i18n": "^4.48.0",
     "clsx": "^2.1.1",
-    "react-router-dom": "^6.23.1",
-    "tslib": "^2.5.0",
-    "wpcom-proxy-request": "^7.0.5"
+    "react-router-dom": "6.30.4",
+    "tslib": "^2.8.1",
+    "wpcom-proxy-request": "^7.0.7"
   },
   "devDependencies": {
+    "@automattic/calypso-storybook": "^1.0.1",
     "@automattic/calypso-typescript-config": "^1.0.0",
     "@automattic/typography": "^1.0.0",
-    "@testing-library/react": "^15.0.7",
-    "@wordpress/base-styles": "^5.2.0",
-    "copyfiles": "^2.3.0",
-    "css-loader": "^3.6.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "redux": "^4.2.1",
-    "sass-loader": "^10.1.1",
+    "@automattic/viewport": "^1.1.1",
+    "@storybook/addon-a11y": "^9.1.20",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@wordpress/base-styles": "^9.1.0",
+    "copyfiles": "^2.4.1",
+    "css-loader": "^6.11.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "redux": "^5.0.1",
+    "sass-loader": "^14.2.1",
+    "storybook": "^9.1.20",
     "style-loader": "^1.3.0",
-    "typescript": "^5.3.3",
-    "webpack": "^5.91.0"
+    "typescript": "^6.0.3",
+    "webpack": "^5.99.8"
   },
   "peerDependencies": {
-    "@wordpress/i18n": "^5.2.0",
-    "react": "^18.2.0"
+    "@wordpress/i18n": "^6.21.0",
+    "react": "^18.3.1 || ^19.0.0"
   }
 }

package/src/action-buttons/index.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import * as React from 'react';
@@ -72,42 +71,3 @@ export const NextButton: React.FunctionComponent< React.ComponentProps< typeof B
 		</Button>
 	);
 };
-
-export const SkipButton: React.FunctionComponent< React.ComponentProps< typeof Button > > = ( {
-	className,
-	children,
-	...buttonProps
-} ) => {
-	const { __ } = useI18n();
-
-	return (
-		<Button
-			className={ clsx( 'action_buttons__button action-buttons__skip', className ) }
-			{ ...buttonProps }
-		>
-			{ children ||
-				/* translators: Button label for skipping a step in onboarding */
-				__( 'Skip for now', __i18n_text_domain__ ) }
-		</Button>
-	);
-};
-
-export const ArrowButton: React.FunctionComponent<
-	React.ComponentProps< typeof Button > & {
-		arrow: 'left' | 'right';
-	}
-> = ( { className, children, arrow = 'right', ...buttonProps } ) => {
-	return (
-		<Button
-			className={ clsx(
-				`action_buttons__button action-buttons__arrow action-buttons__arrow--${ arrow }`,
-				className
-			) }
-			{ ...buttonProps }
-		>
-			{ arrow === 'left' && <Icon icon={ chevronLeft } /> }
-			{ children }
-			{ arrow === 'right' && <Icon icon={ chevronRight } /> }
-		</Button>
-	);
-};

package/src/action-buttons/style.scss

@@ -1,6 +1,6 @@
-@import "../../styles/variables.scss";
-@import "../../styles/mixins.scss";
-@import "../../styles/z-index.scss";
+@import "../../styles/variables";
+@import "../../styles/mixins";
+@import "../../styles/z-index";
 
 .action-buttons {
 	padding: 0 20px;
@@ -21,6 +21,7 @@
 		margin-left: 20px;
 		position: static;
 		border: none;
+		z-index: initial;
 
 		.action_buttons__button {
 			margin-left: 20px;
@@ -65,43 +66,6 @@ button.action_buttons__button.components-button {
 		height: auto;
 	}
 
-	&.action-buttons__skip {
-		color: var(--studio-gray-50);
-		box-shadow: inset 0 0 0 1px var(--studio-gray-50);
-
-		&:active,
-		&:hover {
-			color: var(--studio-gray-60);
-			box-shadow: inset 0 0 0 1px var(--studio-gray-60);
-		}
-
-		&:focus {
-			color: var(--studio-gray-60);
-			box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px var(--highlightColor);
-		}
-	}
-
-	&.action-buttons__arrow {
-		justify-content: flex-start;
-
-		text-decoration: underline;
-		font-weight: 600;
-		color: var(--mainColor);
-
-		// @TODO: We have to revisit the ArrowButton's padding when we pick up #48568 (https://github.com/Automattic/wp-calypso/issues/48568)
-		padding: 0;
-		margin-right: 0;
-
-		@include break-medium {
-			justify-content: flex-end;
-		}
-
-		svg {
-			// The viewbox has a 5px margin and we have to crop it to align it with the ArrowButton's copy properly.
-			margin: 0 -5px -4px;
-		}
-	}
-
 	@include break-small {
 		min-width: 160px;
 	}

package/src/cart/create-cart-manager-client.ts

@@ -1,5 +1,5 @@
 import { createShoppingCartManagerClient } from '@automattic/shopping-cart';
-import wpcomRequest from 'wpcom-proxy-request';
+import wpcomRequest from '../wpcom-request';
 import type {
 	RequestCart,
 	CartKey,

package/src/cart/index.tsx

@@ -1,26 +1,28 @@
 import config from '@automattic/calypso-config';
 import { getUrlParts } from '@automattic/calypso-url';
-import { DomainSuggestion, NewSiteSuccessResponse, Site } from '@automattic/data-stores';
+import { NewSiteSuccessResponse, Site } from '@automattic/data-stores';
+import { SiteGoal } from '@automattic/data-stores/src/onboard';
+import { getTld, isFreeSubdomainQuery } from '@automattic/domain-search';
 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 { isEmpty } from 'lodash';
 import {
 	setupSiteAfterCreation,
 	isTailoredSignupFlow,
-	isMigrationFlow,
 	HUNDRED_YEAR_PLAN_FLOW,
 	isAnyHostingFlow,
+	AI_SITE_BUILDER_FLOW,
 } from '../';
+import wpcomRequest from '../wpcom-request';
 import cartManagerClient from './create-cart-manager-client';
+import type { DomainSuggestion } from '@automattic/api-core';
 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;
@@ -28,7 +30,9 @@ interface GetNewSiteParams {
 	useThemeHeadstart: boolean;
 	siteVisibility: Site.Visibility;
 	username: string;
+	partnerBundle: string | null;
 	sourceSlug?: string;
+	siteIntent?: string;
 }
 
 type NewSiteParams = {
@@ -49,6 +53,7 @@ type NewSiteParams = {
 		timezone_string?: string;
 		wpcom_public_coming_soon: 0 | 1;
 		site_accent_color?: string;
+		site_intent?: string;
 	};
 	validate: boolean;
 };
@@ -58,21 +63,15 @@ const getBlogNameGenerationParams = ( {
 	siteTitle,
 	flowToCheck,
 	username,
-	isPurchasingDomainItem,
 }: GetNewSiteParams ) => {
 	if ( siteUrl ) {
-		const blog_name = siteUrl.replace( '.wordpress.com', '' );
-
-		if ( isMigrationFlow( flowToCheck ) ) {
-			return {
-				blog_name,
-				find_available_url: true,
-			};
-		}
+		const blogName = siteUrl.replace( '.wordpress.com', '' );
 
 		return {
-			blog_name,
-			find_available_url: !! isPurchasingDomainItem,
+			blog_name: blogName,
+			// Free subdomains (.wordpress.com and .blog) should use the exact URL.
+			// Only paid domains need find_available_url to generate a fallback free subdomain.
+			find_available_url: ! isFreeSubdomainQuery( siteUrl ) && !! getTld( blogName ),
 		};
 	}
 
@@ -105,6 +104,8 @@ export const getNewSiteParams = ( params: GetNewSiteParams ) => {
 		useThemeHeadstart = false,
 		siteVisibility,
 		sourceSlug,
+		siteIntent,
+		partnerBundle,
 	} = params;
 
 	// We will use the default annotation instead of theme annotation as fallback,
@@ -127,6 +128,8 @@ export const getNewSiteParams = ( params: GetNewSiteParams ) => {
 			...( sourceSlug && { site_source_slug: sourceSlug } ),
 			...( siteAccentColor && { site_accent_color: siteAccentColor } ),
 			...( themeSlugWithRepo && { theme: themeSlugWithRepo } ),
+			...( siteIntent && { site_intent: siteIntent } ),
+			...( partnerBundle && { site_partner_bundle: partnerBundle } ),
 		},
 		validate: false,
 	};
@@ -134,26 +137,29 @@ export const getNewSiteParams = ( params: GetNewSiteParams ) => {
 	return newSiteParams;
 };
 
-export const createSiteWithCart = async (
+export const createSite = async (
 	flowName: string,
-	userIsLoggedIn: boolean,
-	isPurchasingDomainItem: boolean,
 	themeSlugWithRepo: string,
 	siteVisibility: Site.Visibility,
 	siteTitle: string,
 	siteAccentColor: string,
 	useThemeHeadstart: boolean,
 	username: string,
+	partnerBundle: string | null,
+	storedSiteUrl?: string,
 	domainItem?: DomainSuggestion,
-	domainCartItem?: MinimalRequestCartProduct,
-	sourceSlug?: string
+	sourceSlug?: string,
+	siteIntent?: string,
+	siteGoals?: SiteGoal[],
+	gardenName?: string | null,
+	gardenPartnerName?: string | null,
+	specId?: string | null,
+	ref?: string
 ) => {
-	const siteUrl = domainItem?.domain_name;
-	const isFreeThemePreselected = startsWith( themeSlugWithRepo, 'pub' );
+	const siteUrl = storedSiteUrl || domainItem?.domain_name;
 
 	const newSiteParams = getNewSiteParams( {
 		flowToCheck: flowName,
-		isPurchasingDomainItem,
 		themeSlugWithRepo,
 		siteUrl,
 		siteTitle,
@@ -162,6 +168,8 @@ export const createSiteWithCart = async (
 		siteVisibility,
 		username,
 		sourceSlug,
+		siteIntent,
+		partnerBundle,
 	} );
 
 	// if ( isEmpty( bearerToken ) && 'onboarding-registrationless' === flowToCheck ) {
@@ -175,6 +183,9 @@ export const createSiteWithCart = async (
 	const segmentationSurveyAnswersAnonId = localStorage.getItem( 'ss-anon-id' );
 	localStorage.removeItem( 'ss-anon-id' );
 
+	// This is the parameter that will contain the internal referral, e.g. a landing page.
+	const refParam = new URLSearchParams( document.location.search ).get( 'ref' );
+
 	const siteCreationResponse: NewSiteSuccessResponse = await wpcomRequest( {
 		path: '/sites/new',
 		apiVersion: '1.1',
@@ -185,12 +196,28 @@ export const createSiteWithCart = async (
 			lang_id: getLanguage( locale as string )?.value,
 			client_id: config( 'wpcom_signup_id' ),
 			client_secret: config( 'wpcom_signup_key' ),
+			...( gardenName &&
+				gardenPartnerName && {
+					garden_name: gardenName,
+					garden_partner_name: gardenPartnerName,
+				} ),
+			...( specId && {
+				spec_id: specId,
+			} ),
 			options: {
 				...newSiteParams.options,
 				has_segmentation_survey: hasSegmentationSurvey,
 				...( hasSegmentationSurvey && segmentationSurveyAnswersAnonId
 					? { segmentation_survey_answers_anon_id: segmentationSurveyAnswersAnonId }
 					: {} ),
+				...( siteGoals && { site_goals: siteGoals } ),
+				...( ( ref ?? refParam ) && { ref: ref ?? refParam } ),
+				// Trigger backend build for ai-site-builder flow with commerce garden and spec_id
+				...( flowName === AI_SITE_BUILDER_FLOW &&
+					gardenName === 'commerce' &&
+					specId && {
+						trigger_backend_build: false,
+					} ),
 			},
 		},
 	} );
@@ -200,6 +227,15 @@ export const createSiteWithCart = async (
 		return;
 	}
 
+	// TODO - This is a temporary fix to ensure garden site URLs use HTTPS.
+	// Ensure garden site URLs use HTTPS
+	if ( gardenName && siteCreationResponse?.blog_details?.url ) {
+		siteCreationResponse.blog_details.url = siteCreationResponse.blog_details.url.replace(
+			'http://',
+			'https://'
+		);
+	}
+
 	const parsedBlogURL = getUrlParts( siteCreationResponse?.blog_details.url );
 	const siteSlug = parsedBlogURL.hostname;
 	const siteId = siteCreationResponse?.blog_details.blogid;
@@ -213,15 +249,6 @@ export const createSiteWithCart = async (
 		await setupSiteAfterCreation( { siteId, flowName } );
 	}
 
-	await processItemCart(
-		siteSlug,
-		isFreeThemePreselected,
-		themeSlugWithRepo,
-		flowName,
-		userIsLoggedIn,
-		domainCartItem
-	);
-
 	return providedDependencies;
 };
 
@@ -236,30 +263,6 @@ function prepareItemForAddingToCart( item: MinimalRequestCartProduct, lastKnownF
 	};
 }
 
-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[]
@@ -277,33 +280,6 @@ export async function replaceProductsInCart(
 	}
 }
 
-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,
@@ -354,22 +330,3 @@ export async function setThemeOnSite(
 		//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

@@ -1,12 +1,11 @@
 import { Visibility } from '@automattic/data-stores';
 import { getNewSiteParams } from '..';
-import { HOSTING_LP_FLOW, MIGRATION_FLOW } from '../../utils/flows';
+import { HOSTING_LP_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',
@@ -14,6 +13,7 @@ describe( 'getNewSiteParams', () => {
 			siteVisibility: Visibility.Private,
 			username: 'testuser',
 			...partialParams,
+			partnerBundle: partialParams.partnerBundle ?? null,
 		} satisfies Parameters< typeof getNewSiteParams >[ 0 ];
 	}
 
@@ -126,46 +126,46 @@ describe( 'getNewSiteParams', () => {
 					siteUrl: 'testing123.wordpress.com',
 					siteTitle: 'Testing Inc.',
 					username: 'janedoe',
-					isPurchasingDomainItem: true,
 				} )
 			)
 		).toEqual(
 			expect.objectContaining( {
 				blog_name: 'testing123',
-				find_available_url: true,
+				find_available_url: false,
 			} )
 		);
+	} );
 
+	test( 'find_available_url is true when siteUrl is a custom domain', () => {
 		expect(
 			getNewSiteParams(
 				testParams( {
-					siteUrl: 'testing123.wordpress.com',
+					siteUrl: 'example.com',
 					siteTitle: 'Testing Inc.',
 					username: 'janedoe',
-					isPurchasingDomainItem: false,
 				} )
 			)
 		).toEqual(
 			expect.objectContaining( {
-				blog_name: 'testing123',
-				find_available_url: false,
+				blog_name: 'example.com',
+				find_available_url: true,
 			} )
 		);
 	} );
 
-	test( 'Migration flow uses find_available_url', () => {
+	test( 'find_available_url is false when siteUrl is a free .blog subdomain', () => {
 		expect(
 			getNewSiteParams(
 				testParams( {
-					flowToCheck: MIGRATION_FLOW,
-					siteUrl: 'testing123.wordpress.com',
-					isPurchasingDomainItem: false,
+					siteUrl: 'mysite.tech.blog',
+					siteTitle: 'Testing Inc.',
+					username: 'janedoe',
 				} )
 			)
 		).toEqual(
 			expect.objectContaining( {
-				blog_name: 'testing123',
-				find_available_url: true, // True despite the fact isPurchasingDomainItem is false
+				blog_name: 'mysite.tech.blog',
+				find_available_url: false,
 			} )
 		);
 	} );

package/src/confetti/index.tsx

@@ -62,7 +62,7 @@ const Index: React.FunctionComponent< { className?: string } > = ( { className }
 			height="15"
 			rx="2.386"
 			transform="rotate(-32 97 2.53)"
-			fill="#117AC9"
+			fill="var(--studio-blue-50)"
 		/>
 		<Rect
 			x="323.638"