Experiment: Change Starter plan name to Beginner (#89535)

* Plan name change

* Fix comment

client/controller/index.web.js

@@ -1,4 +1,5 @@
 import config from '@automattic/calypso-config';
+import { setPlansListExperiment } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import {
 	getLanguage,
@@ -7,13 +8,15 @@ import {
 } from '@automattic/i18n-utils';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { translate } from 'i18n-calypso';
+import { useEffect } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import CalypsoI18nProvider from 'calypso/components/calypso-i18n-provider';
 import EmptyContent from 'calypso/components/empty-content';
 import MomentProvider from 'calypso/components/localized-moment/provider';
 import { RouteProvider } from 'calypso/components/route';
 import Layout from 'calypso/layout';
 import LayoutLoggedOut from 'calypso/layout/logged-out';
+import { useExperiment } from 'calypso/lib/explat';
 import { login, createAccountUrl } from 'calypso/lib/paths';
 import { CalypsoReactQueryDevtools } from 'calypso/lib/react-query-devtools-helper';
 import { getSiteFragment } from 'calypso/lib/route';
@@ -47,6 +50,19 @@ export const ProviderWrappedLayout = ( {
 	const state = store.getState();
 	const userLoggedIn = isUserLoggedIn( state );
 
+	const [ isLoading, experimentAssignment ] = useExperiment(
+		'wpcom_plan_name_change_starter_to_beginner'
+	);
+
+	useEffect( () => {
+		if ( ! isLoading ) {
+			setPlansListExperiment(
+				'wpcom_plan_name_change_starter_to_beginner',
+				experimentAssignment?.variationName
+			);
+		}
+	}, [ isLoading ] );
+
 	const layout = userLoggedIn ? (
 		<Layout primary={ primary } secondary={ secondary } />
 	) : (

packages/calypso-products/src/plans-list.tsx

@@ -445,6 +445,7 @@ import {
 	FEATURE_SECURITY_VULNERABILITY_NOTIFICATIONS,
 	FEATURE_WOOCOMMERCE_HOSTING,
 } from './constants';
+import { getPlansListExperiment } from './experiments';
 import type {
 	BillingTerm,
 	Plan,
@@ -723,8 +724,11 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( {
 	group: GROUP_WPCOM,
 	type: TYPE_PERSONAL,
 	getTitle: () =>
-		// translators: Starter is a plan name
-		i18n.translate( 'Starter' ),
+		getPlansListExperiment( 'wpcom_plan_name_change_starter_to_beginner' ) === 'treatment'
+			? // translators: Beginner is a plan name
+			  i18n.translate( 'Beginner' )
+			: // translators: Starter is a plan name
+			  i18n.translate( 'Starter' ),
 	getAudience: () => i18n.translate( 'Best for personal use' ),
 	getBlogAudience: () => i18n.translate( 'Best for personal use' ),
 	getPortfolioAudience: () => i18n.translate( 'Best for personal use' ),