From 32833d937235ed159e824f3bc0540a2491a907bb Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Thu, 30 Jan 2025 14:15:07 -0500 Subject: [PATCH 1/4] add AI copy to plans grid for big sky plans --- .../calypso-products/src/constants/feature-group.ts | 1 + packages/calypso-products/src/constants/features.ts | 1 + .../calypso-products/src/feature-group-plan-map.ts | 9 +++++++++ packages/calypso-products/src/features-list.tsx | 12 ++++++++++++ packages/calypso-products/src/plans-list.tsx | 7 +++++++ packages/calypso-products/src/types.ts | 2 ++ 6 files changed, 32 insertions(+) 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..5c9d72bae092c 100644 --- a/packages/calypso-products/src/constants/features.ts +++ b/packages/calypso-products/src/constants/features.ts @@ -500,3 +500,4 @@ 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'; 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..d52b6e03c2129 100644 --- a/packages/calypso-products/src/features-list.tsx +++ b/packages/calypso-products/src/features-list.tsx @@ -327,6 +327,7 @@ import { FEATURE_WOO_AUTOMATE, FEATURE_CONNECT_ANALYTICS, FEATURE_LIMITED_SITE_ACTIVITY_LOG, + FEATURE_BIG_SKY_WEBSITE_BUILDER, } from './constants'; import type { FeatureList } from './types'; @@ -2630,6 +2631,17 @@ 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_UNLIMITED_ENTITIES ]: { getSlug: () => FEATURE_UNLIMITED_ENTITIES, getTitle: () => i18n.translate( 'Unlimited pages, posts, users, and visitors' ), diff --git a/packages/calypso-products/src/plans-list.tsx b/packages/calypso-products/src/plans-list.tsx index f5863b3037505..7c3e1b7f79743 100644 --- a/packages/calypso-products/src/plans-list.tsx +++ b/packages/calypso-products/src/plans-list.tsx @@ -440,6 +440,7 @@ import { JETPACK_TAG_FOR_BLOGGERS, FEATURE_CONNECT_ANALYTICS, FEATURE_JETPACK_SOCIAL_V1_MONTHLY, + FEATURE_BIG_SKY_WEBSITE_BUILDER, } from './constants'; import { isGlobalStylesOnPersonalEnabled } from './is-global-styles-on-personal-enabled'; import { @@ -792,6 +793,7 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( { }, get2023PricingGridSignupWpcomFeatures: () => { const baseFeatures = [ + FEATURE_BIG_SKY_WEBSITE_BUILDER, FEATURE_UNLIMITED_ENTITIES, FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, @@ -858,6 +860,7 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( { ], getCheckoutFeatures: () => { const baseFeatures = [ + FEATURE_BIG_SKY_WEBSITE_BUILDER, FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, FEATURE_FAST_DNS, @@ -1363,6 +1366,7 @@ const getPlanPremiumDetails = (): IncompleteWPcomPlan => ( { ].filter( isValueTruthy ), get2023PricingGridSignupWpcomFeatures: () => { return [ + FEATURE_BIG_SKY_WEBSITE_BUILDER, FEATURE_UNLIMITED_ENTITIES, FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, @@ -1383,6 +1387,7 @@ const getPlanPremiumDetails = (): IncompleteWPcomPlan => ( { ]; }, getCheckoutFeatures: () => [ + FEATURE_BIG_SKY_WEBSITE_BUILDER, FEATURE_CUSTOM_DOMAIN, FEATURE_FAST_SUPPORT_FROM_EXPERTS, WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED, @@ -1532,6 +1537,7 @@ const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( { ].filter( isValueTruthy ), get2023PricingGridSignupWpcomFeatures: () => { return [ + FEATURE_BIG_SKY_WEBSITE_BUILDER, FEATURE_UNLIMITED_ENTITIES, FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, @@ -1575,6 +1581,7 @@ const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( { ]; }, getCheckoutFeatures: () => [ + FEATURE_BIG_SKY_WEBSITE_BUILDER, 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 From 307d43371e86fc4e82fb3abb6d480801820167ad Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Thu, 30 Jan 2025 17:04:36 -0500 Subject: [PATCH 2/4] remove strong element --- packages/calypso-products/src/features-list.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/calypso-products/src/features-list.tsx b/packages/calypso-products/src/features-list.tsx index d52b6e03c2129..2b0e56dc1cb03 100644 --- a/packages/calypso-products/src/features-list.tsx +++ b/packages/calypso-products/src/features-list.tsx @@ -2633,12 +2633,7 @@ const FEATURES_LIST: FeatureList = { [ FEATURE_BIG_SKY_WEBSITE_BUILDER ]: { getSlug: () => FEATURE_BIG_SKY_WEBSITE_BUILDER, - getTitle: () => - i18n.translate( '{{strong}}Unlimited AI Website Builder edits{{/strong}}', { - components: { - strong: , - }, - } ), + getTitle: () => i18n.translate( 'Unlimited AI Website Builder edits' ), getDescription: () => i18n.translate( 'Build your site with our AI Website Builder.' ), }, From 4f550bab55b9c65c077134a5bb3d2f4ec385d946 Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Fri, 31 Jan 2025 16:26:30 -0500 Subject: [PATCH 3/4] Add a separate feature to display in checkout since the copy displayed on plans page should be bold --- packages/calypso-products/src/constants/features.ts | 1 + packages/calypso-products/src/features-list.tsx | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/packages/calypso-products/src/constants/features.ts b/packages/calypso-products/src/constants/features.ts index 5c9d72bae092c..f53d6b2f317c1 100644 --- a/packages/calypso-products/src/constants/features.ts +++ b/packages/calypso-products/src/constants/features.ts @@ -501,3 +501,4 @@ 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/features-list.tsx b/packages/calypso-products/src/features-list.tsx index 2b0e56dc1cb03..f4b9468fc655f 100644 --- a/packages/calypso-products/src/features-list.tsx +++ b/packages/calypso-products/src/features-list.tsx @@ -328,6 +328,7 @@ import { 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'; @@ -2633,6 +2634,16 @@ const FEATURES_LIST: FeatureList = { [ 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.' ), }, From 4635b1da0701eef993729f73b239fdb70e77384f Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Fri, 31 Jan 2025 16:27:31 -0500 Subject: [PATCH 4/4] show the copy only when in the goals first experiment --- .../helpers/use-goals-first-experiment.ts | 3 +++ client/my-sites/checkout/checkout-main-wrapper.tsx | 2 ++ packages/calypso-products/src/is-goals-first.ts | 8 ++++++++ packages/calypso-products/src/plans-list.tsx | 14 ++++++++------ 4 files changed, 21 insertions(+), 6 deletions(-) create mode 100644 packages/calypso-products/src/is-goals-first.ts diff --git a/client/landing/stepper/declarative-flow/helpers/use-goals-first-experiment.ts b/client/landing/stepper/declarative-flow/helpers/use-goals-first-experiment.ts index ea3b70c50c740..045d0caf04700 100644 --- a/client/landing/stepper/declarative-flow/helpers/use-goals-first-experiment.ts +++ b/client/landing/stepper/declarative-flow/helpers/use-goals-first-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'; @@ -31,5 +32,7 @@ export function useGoalsFirstExperiment(): [ boolean, boolean ] { */ const variationName = experimentAssignment?.variationName ?? 'control'; + setPlansListExperiment( EXPERIMENT_NAME, variationName ); + return [ isLoading, variationName === 'treatment' ]; } diff --git a/client/my-sites/checkout/checkout-main-wrapper.tsx b/client/my-sites/checkout/checkout-main-wrapper.tsx index be0cd62c66ebf..4a9202d5154d4 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 { useGoalsFirstExperiment } from 'calypso/landing/stepper/declarative-flow/helpers/use-goals-first-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; + useGoalsFirstExperiment(); useEffect( () => { window.scrollTo( 0, 0 ); diff --git a/packages/calypso-products/src/is-goals-first.ts b/packages/calypso-products/src/is-goals-first.ts new file mode 100644 index 0000000000000..17cf9fdc32bd6 --- /dev/null +++ b/packages/calypso-products/src/is-goals-first.ts @@ -0,0 +1,8 @@ +import { getPlansListExperiment } from './experiments'; + +export function isGoalsFirst(): boolean { + return ( + getPlansListExperiment( 'calypso_signup_onboarding_goals_first_flow_holdout_20241220' ) === + 'treatment_cumulative' + ); +} diff --git a/packages/calypso-products/src/plans-list.tsx b/packages/calypso-products/src/plans-list.tsx index 7c3e1b7f79743..14f498e173032 100644 --- a/packages/calypso-products/src/plans-list.tsx +++ b/packages/calypso-products/src/plans-list.tsx @@ -441,8 +441,10 @@ import { FEATURE_CONNECT_ANALYTICS, FEATURE_JETPACK_SOCIAL_V1_MONTHLY, FEATURE_BIG_SKY_WEBSITE_BUILDER, + FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT, } from './constants'; import { isGlobalStylesOnPersonalEnabled } from './is-global-styles-on-personal-enabled'; +import { isGoalsFirst } from './is-goals-first'; import { getPlanBusinessTitle, getPlanEcommerceTitle, @@ -793,7 +795,7 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( { }, get2023PricingGridSignupWpcomFeatures: () => { const baseFeatures = [ - FEATURE_BIG_SKY_WEBSITE_BUILDER, + ...( isGoalsFirst() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER ] : [] ), FEATURE_UNLIMITED_ENTITIES, FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, @@ -860,7 +862,7 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( { ], getCheckoutFeatures: () => { const baseFeatures = [ - FEATURE_BIG_SKY_WEBSITE_BUILDER, + ...( isGoalsFirst() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT ] : [] ), FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, FEATURE_FAST_DNS, @@ -1366,7 +1368,7 @@ const getPlanPremiumDetails = (): IncompleteWPcomPlan => ( { ].filter( isValueTruthy ), get2023PricingGridSignupWpcomFeatures: () => { return [ - FEATURE_BIG_SKY_WEBSITE_BUILDER, + ...( isGoalsFirst() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER ] : [] ), FEATURE_UNLIMITED_ENTITIES, FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, @@ -1387,7 +1389,7 @@ const getPlanPremiumDetails = (): IncompleteWPcomPlan => ( { ]; }, getCheckoutFeatures: () => [ - FEATURE_BIG_SKY_WEBSITE_BUILDER, + ...( isGoalsFirst() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT ] : [] ), FEATURE_CUSTOM_DOMAIN, FEATURE_FAST_SUPPORT_FROM_EXPERTS, WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED, @@ -1537,7 +1539,7 @@ const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( { ].filter( isValueTruthy ), get2023PricingGridSignupWpcomFeatures: () => { return [ - FEATURE_BIG_SKY_WEBSITE_BUILDER, + ...( isGoalsFirst() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER ] : [] ), FEATURE_UNLIMITED_ENTITIES, FEATURE_CUSTOM_DOMAIN, FEATURE_AD_FREE_EXPERIENCE, @@ -1581,7 +1583,7 @@ const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( { ]; }, getCheckoutFeatures: () => [ - FEATURE_BIG_SKY_WEBSITE_BUILDER, + ...( isGoalsFirst() ? [ FEATURE_BIG_SKY_WEBSITE_BUILDER_CHECKOUT ] : [] ), FEATURE_CUSTOM_DOMAIN, FEATURE_PLUGINS_THEMES, FEATURE_BANDWIDTH,