Big Sky GF: Add AI Copy to big sky plans step (#99127)

* add AI copy to plans grid for big sky plans * remove strong element * Add a separate feature to display in checkout since the copy displayed on plans page should be bold * show the copy only when in the goals first experiment * Switch from goals-first to big sky experiment * Add hacks to get AI copy to only appear when user chooses Big Sky * fix typescript --------- Co-authored-by: Philip Jackson <[email protected]>
Automattic · Feb 2, 2025 · 2c0643a · 2c0643a
1 parent 50c4358
commit 2c0643a
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 0 deletions.
diff --git a/client/landing/stepper/declarative-flow/helpers/use-bigsky-before-plans-experiment.ts b/client/landing/stepper/declarative-flow/helpers/use-bigsky-before-plans-experiment.ts
@@ -1,4 +1,5 @@
 import { isEnabled } from '@automattic/calypso-config';
+import { setPlansListExperiment } from '@automattic/calypso-products';
 import { ONBOARDING_FLOW } from '@automattic/onboarding';
 import { useMemo } from 'react';
 import { useExperiment } from 'calypso/lib/explat';
@@ -25,6 +26,7 @@ export function useBigSkyBeforePlans(): [ boolean, boolean ] {
 	} );
 
 	if ( isEnabled( 'onboarding/force-big-sky-before-plan' ) ) {
+		setPlansListExperiment( EXPERIMENT_NAME, 'treatment' );
 		return [ false, true ];
 	}
 
@@ -34,5 +36,7 @@ export function useBigSkyBeforePlans(): [ boolean, boolean ] {
 	 */
 	const variationName = experimentAssignment?.variationName ?? 'control';
 
+	setPlansListExperiment( EXPERIMENT_NAME, variationName );
+
 	return [ isLoading, variationName === 'treatment' ];
 }
diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts
@@ -35,6 +35,12 @@ import { recordStepNavigation } from './internals/analytics/record-step-navigati
 import { STEPS } from './internals/steps';
 import { AssertConditionState, Flow, ProvidedDependencies } from './internals/types';
 
+declare global {
+	interface Window {
+		__a8cBigSkyOnboarding?: boolean;
+	}
+}
+
 const SiteIntent = Onboard.SiteIntent;
 
 const clearUseMyDomainsQueryParams = ( currentStepSlug: string | undefined ) => {
@@ -230,11 +236,20 @@ const onboarding: Flow = {
 				}
 
 				case 'design-choices': {
+					// __a8cBigSkyOnboarding is set as a hack so that the @automattic/calypso-products can know what the users
+					// selection was. Accessing the data store is tricky from there.
+					// See is-big-sky-onboarding.ts
 					if ( providedDependencies.destination === 'launch-big-sky' ) {
 						setCreateWithBigSky( true );
+						if ( typeof window !== 'undefined' ) {
+							window.__a8cBigSkyOnboarding = true;
+						}
 						return navigate( 'domains' );
 					}
 					setCreateWithBigSky( false );
+					if ( typeof window !== 'undefined' ) {
+						window.__a8cBigSkyOnboarding = false;
+					}
 					return navigate( providedDependencies.destination as string );
 				}
 
@@ -367,6 +382,9 @@ const onboarding: Flow = {
 								signup: 1,
 								checkoutBackUrl: pathToUrl( backDestination ),
 								coupon,
+								...( createWithBigSky && isBigSkyBeforePlansExperiment && isGoalsAtFrontExperiment
+									? { [ 'big-sky-checkout' ]: 1 }
+									: {} ),
 							} )
 						);
 					} else {
@@ -454,6 +472,10 @@ const onboarding: Flow = {
 				clearSignupDestinationCookie();
 				clearSignupCompleteFlowName();
 				clearSignupCompleteSlug();
+
+				if ( typeof window !== 'undefined' ) {
+					delete window.__a8cBigSkyOnboarding;
+				}
 			}
 		}, [ currentStepSlug, reduxDispatch, resetOnboardStore ] );
 

diff --git a/client/my-sites/checkout/checkout-main-wrapper.tsx b/client/my-sites/checkout/checkout-main-wrapper.tsx
@@ -6,6 +6,7 @@ import { CheckoutErrorBoundary } from '@automattic/composite-checkout';
 import { styled } from '@automattic/wpcom-checkout';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect } from 'react';
+import { useBigSkyBeforePlans } from 'calypso/landing/stepper/declarative-flow/helpers/use-bigsky-before-plans-experiment';
 import { logToLogstash } from 'calypso/lib/logstash';
 import { getStripeConfiguration, getRazorpayConfiguration } from 'calypso/lib/store-transactions';
 import Recaptcha from 'calypso/signup/recaptcha';
@@ -80,6 +81,7 @@ export default function CheckoutMainWrapper( {
 	const translate = useTranslate();
 	const locale = useSelector( getCurrentUserLocale );
 	const selectedSiteId = useSelector( getSelectedSiteId ) ?? undefined;
+	useBigSkyBeforePlans();
 
 	useEffect( () => {
 		window.scrollTo( 0, 0 );

diff --git a/packages/calypso-products/src/constants/feature-group.ts b/packages/calypso-products/src/constants/feature-group.ts
@@ -40,3 +40,4 @@ export const FEATURE_GROUP_INSTALL_PLUGINS = 'feature-group-install-plugins';
 export const FEATURE_GROUP_PERFORMANCE = 'feature-group-performance';
 export const FEATURE_GROUP_THEMES = 'feature-group-themes';
 export const FEATURE_GROUP_WOO = 'feature-group-woo';
+export const FEATURE_GROUP_BIG_SKY = 'feature-group-big-sky';
diff --git a/packages/calypso-products/src/constants/features.ts b/packages/calypso-products/src/constants/features.ts
@@ -500,3 +500,5 @@ export const FEATURE_WOO_AUTOMATE = 'feature-woo-automate';
 export const FEATURE_GOOGLE_LISTING_ADS = 'feature-google-listing-ads';
 export const FEATURE_CONNECT_ANALYTICS = 'feature-connect-analytics';
 export const FEATURE_LIMITED_SITE_ACTIVITY_LOG = 'feature-limited-site-activity-log';
+export const FEATURE_BIG_SKY_WEBSITE_BUILDER = 'feature-big-sky-website-builder';
+export const FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT = 'feature-big-sky-website-builder-checkout';
diff --git a/packages/calypso-products/src/feature-group-plan-map.ts b/packages/calypso-products/src/feature-group-plan-map.ts
@@ -135,6 +135,8 @@ import {
 	FEATURE_CONNECT_ANALYTICS,
 	FEATURE_GROUP_DEV_TOOLS,
 	FEATURE_UNLTD_SOCIAL_MEDIA_JP,
+	FEATURE_BIG_SKY_WEBSITE_BUILDER,
+	FEATURE_GROUP_BIG_SKY,
 } from './constants';
 import { FeatureGroupMap } from './types';
 
@@ -374,11 +376,17 @@ export const featureGroups: Partial< FeatureGroupMap > = {
 			WPCOM_FEATURES_PREMIUM_THEMES_LIMITED,
 		],
 	},
+	[ FEATURE_GROUP_BIG_SKY ]: {
+		slug: FEATURE_GROUP_BIG_SKY,
+		getTitle: () => null,
+		getFeatures: () => [ FEATURE_BIG_SKY_WEBSITE_BUILDER ],
+	},
 	[ FEATURE_GROUP_ENTITIES ]: {
 		slug: FEATURE_GROUP_ENTITIES,
 		getTitle: () => null,
 		getFeatures: () => [ FEATURE_UNLIMITED_ENTITIES ],
 	},
+
 	[ FEATURE_GROUP_ADS ]: {
 		slug: FEATURE_GROUP_ADS,
 		getTitle: () => null,
@@ -424,6 +432,7 @@ export function resolveFeatureGroupsForFeaturesGrid( {
 	if ( showSimplifiedFeatures ) {
 		return {
 			[ FEATURE_GROUP_STORAGE ]: featureGroups[ FEATURE_GROUP_STORAGE ],
+			[ FEATURE_GROUP_BIG_SKY ]: featureGroups[ FEATURE_GROUP_BIG_SKY ],
 			[ FEATURE_GROUP_ENTITIES ]: featureGroups[ FEATURE_GROUP_ENTITIES ],
 			[ FEATURE_GROUP_DOMAIN ]: featureGroups[ FEATURE_GROUP_DOMAIN ],
 			[ FEATURE_GROUP_ADS ]: featureGroups[ FEATURE_GROUP_ADS ],

diff --git a/packages/calypso-products/src/features-list.tsx b/packages/calypso-products/src/features-list.tsx
@@ -327,6 +327,8 @@ import {
 	FEATURE_WOO_AUTOMATE,
 	FEATURE_CONNECT_ANALYTICS,
 	FEATURE_LIMITED_SITE_ACTIVITY_LOG,
+	FEATURE_BIG_SKY_WEBSITE_BUILDER,
+	FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT,
 } from './constants';
 import type { FeatureList } from './types';
 
@@ -2630,6 +2632,22 @@ const FEATURES_LIST: FeatureList = {
 	},
 	/* END: Sensei Features */
 
+	[ FEATURE_BIG_SKY_WEBSITE_BUILDER ]: {
+		getSlug: () => FEATURE_BIG_SKY_WEBSITE_BUILDER,
+		getTitle: () =>
+			i18n.translate( '{{strong}}Unlimited AI Website Builder edits{{/strong}}', {
+				components: {
+					strong: <strong />,
+				},
+			} ),
+		getDescription: () => i18n.translate( 'Build your site with our AI Website Builder.' ),
+	},
+	[ FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT ]: {
+		getSlug: () => FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT,
+		getTitle: () => i18n.translate( 'Unlimited AI Website Builder edits' ),
+		getDescription: () => i18n.translate( 'Build your site with our AI Website Builder.' ),
+	},
+
 	[ FEATURE_UNLIMITED_ENTITIES ]: {
 		getSlug: () => FEATURE_UNLIMITED_ENTITIES,
 		getTitle: () => i18n.translate( 'Unlimited pages, posts, users, and visitors' ),

diff --git a/packages/calypso-products/src/is-big-sky-onboarding.ts b/packages/calypso-products/src/is-big-sky-onboarding.ts
@@ -0,0 +1,26 @@
+import { getPlansListExperiment } from './experiments';
+
+declare global {
+	interface Window {
+		__a8cBigSkyOnboarding?: boolean;
+	}
+}
+
+export function isBigSkyOnboarding(): boolean {
+	if ( new URLSearchParams( location.search ).has( 'big-sky-checkout' ) ) {
+		return true;
+	}
+
+	if (
+		getPlansListExperiment( 'calypso_signup_onboarding_goals_first_bigsky_202501_v1' ) !==
+		'treatment'
+	) {
+		return false;
+	}
+
+	if ( typeof window === 'undefined' ) {
+		return false;
+	}
+
+	return Boolean( window.__a8cBigSkyOnboarding );
+}
diff --git a/packages/calypso-products/src/plans-list.tsx b/packages/calypso-products/src/plans-list.tsx
@@ -440,7 +440,10 @@ import {
 	JETPACK_TAG_FOR_BLOGGERS,
 	FEATURE_CONNECT_ANALYTICS,
 	FEATURE_JETPACK_SOCIAL_V1_MONTHLY,
+	FEATURE_BIG_SKY_WEBSITE_BUILDER,
+	FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT,
 } from './constants';
+import { isBigSkyOnboarding } from './is-big-sky-onboarding';
 import { isGlobalStylesOnPersonalEnabled } from './is-global-styles-on-personal-enabled';
 import {
 	getPlanBusinessTitle,
@@ -792,6 +795,7 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( {
 	},
 	get2023PricingGridSignupWpcomFeatures: () => {
 		const baseFeatures = [
+			...( isBigSkyOnboarding() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER ] : [] ),
 			FEATURE_UNLIMITED_ENTITIES,
 			FEATURE_CUSTOM_DOMAIN,
 			FEATURE_AD_FREE_EXPERIENCE,
@@ -858,6 +862,7 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( {
 	],
 	getCheckoutFeatures: () => {
 		const baseFeatures = [
+			...( isBigSkyOnboarding() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT ] : [] ),
 			FEATURE_CUSTOM_DOMAIN,
 			FEATURE_AD_FREE_EXPERIENCE,
 			FEATURE_FAST_DNS,
@@ -1363,6 +1368,7 @@ const getPlanPremiumDetails = (): IncompleteWPcomPlan => ( {
 		].filter( isValueTruthy ),
 	get2023PricingGridSignupWpcomFeatures: () => {
 		return [
+			...( isBigSkyOnboarding() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER ] : [] ),
 			FEATURE_UNLIMITED_ENTITIES,
 			FEATURE_CUSTOM_DOMAIN,
 			FEATURE_AD_FREE_EXPERIENCE,
@@ -1383,6 +1389,7 @@ const getPlanPremiumDetails = (): IncompleteWPcomPlan => ( {
 		];
 	},
 	getCheckoutFeatures: () => [
+		...( isBigSkyOnboarding() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT ] : [] ),
 		FEATURE_CUSTOM_DOMAIN,
 		FEATURE_FAST_SUPPORT_FROM_EXPERTS,
 		WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED,
@@ -1532,6 +1539,7 @@ const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( {
 		].filter( isValueTruthy ),
 	get2023PricingGridSignupWpcomFeatures: () => {
 		return [
+			...( isBigSkyOnboarding() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER ] : [] ),
 			FEATURE_UNLIMITED_ENTITIES,
 			FEATURE_CUSTOM_DOMAIN,
 			FEATURE_AD_FREE_EXPERIENCE,
@@ -1575,6 +1583,7 @@ const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( {
 		];
 	},
 	getCheckoutFeatures: () => [
+		...( isBigSkyOnboarding() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT ] : [] ),
 		FEATURE_CUSTOM_DOMAIN,
 		FEATURE_PLUGINS_THEMES,
 		FEATURE_BANDWIDTH,

diff --git a/packages/calypso-products/src/types.ts b/packages/calypso-products/src/types.ts
@@ -55,6 +55,7 @@ import {
 	FEATURE_GROUP_CUSTOMIZE_STYLE,
 	FEATURE_GROUP_CUSTOM_PLUGINS,
 	FEATURE_GROUP_DEV_TOOLS,
+	FEATURE_GROUP_BIG_SKY,
 } from './constants';
 import { PriceTierEntry } from './get-price-tier-for-units';
 import type { TranslateResult } from 'i18n-calypso';
@@ -264,6 +265,7 @@ export type FeatureGroupSlug =
 	| typeof FEATURE_GROUP_CUSTOMIZE_STYLE
 	| typeof FEATURE_GROUP_DOMAIN
 	| typeof FEATURE_GROUP_ENTITIES
+	| typeof FEATURE_GROUP_BIG_SKY
 	| typeof FEATURE_GROUP_PERFORMANCE
 	| typeof FEATURE_GROUP_THEMES
 	| typeof FEATURE_GROUP_WOO