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 index 61c9b1ac3aa99..8010c862ba6f7 100644 --- 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 index 4425b0f9dce6c..fb7584958c365 100644 --- 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 index be0cd62c66ebf..7032020a5a176 100644 --- 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 index ecaa981c16cb4..7668f4c24b8b2 100644 --- 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 index 977d99df103d5..f53d6b2f317c1 100644 --- 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 index 8c1d337895841..bc6e9e85c215c 100644 --- 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 index 39c85b53fed82..f4b9468fc655f 100644 --- 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: , + }, + } ), + 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 new file mode 100644 index 0000000000000..7a33b086ab454 --- /dev/null +++ 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 index f5863b3037505..9ccae0f565136 100644 --- 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 index c589274094939..8b9cbb98338b0 100644 --- 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