Plans overhaul Phase 1: Rename Managed plan to Pro on Plan grid (#61958)

* Replace Managed plan naming with Pro

* Adds copy adjustments for the new Pro plan

* Adds small copy fix

client/blocks/product-purchase-features-list/index.jsx

@@ -8,7 +8,6 @@ import {
 	TYPE_PREMIUM,
 	TYPE_PERSONAL,
 	TYPE_BLOGGER,
-	TYPE_MANAGED,
 	TYPE_FREE,
 	PLAN_BUSINESS_2_YEARS,
 	PLAN_BUSINESS_ONBOARDING_EXPIRE,
@@ -18,6 +17,7 @@ import {
 	TYPE_ALL,
 	TERM_MONTHLY,
 	getPlans,
+	TYPE_PRO,
 } from '@automattic/calypso-products';
 import PropTypes from 'prop-types';
 import { Component, Fragment } from 'react';
@@ -208,15 +208,15 @@ export class ProductPurchaseFeaturesList extends Component {
 		);
 	}
 
-	getManagedFeatuers() {
+	getProFeatuers() {
 		const { isPlaceholder, selectedSite, planHasDomainCredit } = this.props;
 
 		return (
 			<Fragment>
 				<HappinessSupportCard
 					isPlaceholder={ isPlaceholder }
 					showLiveChatButton
-					liveChatButtonEventName={ 'calypso_livechat_my_plan_managed' }
+					liveChatButtonEventName={ 'calypso_livechat_my_plan_pro' }
 				/>
 				<CustomDomain selectedSite={ selectedSite } hasDomainCredit={ planHasDomainCredit } />
 				<GoogleAnalyticsStats selectedSite={ selectedSite } />
@@ -366,7 +366,7 @@ export class ProductPurchaseFeaturesList extends Component {
 				[ TYPE_PREMIUM ]: () => this.getPremiumFeatures(),
 				[ TYPE_PERSONAL ]: () => this.getPersonalFeatures(),
 				[ TYPE_BLOGGER ]: () => this.getBloggerFeatures(),
-				[ TYPE_MANAGED ]: () => this.getManagedFeatuers(),
+				[ TYPE_PRO ]: () => this.getProFeatuers(),
 			},
 			[ GROUP_JETPACK ]: {
 				[ TYPE_BUSINESS ]: () => this.getJetpackBusinessFeatures(),

client/lib/plans/features-list.js

@@ -1440,7 +1440,7 @@ export const FEATURES_LIST = {
 	},
 	/* END - Jetpack tiered product-specific features */
 
-	/* START - New features Flexible and Managed plans introduced. */
+	/* START - New features Flexible and Pro plans introduced. */
 	[ FEATURE_UNLIMITED_USERS ]: {
 		getSlug: () => FEATURE_UNLIMITED_USERS,
 		getTitle: () => i18n.translate( 'Unlimited users' ),
@@ -1477,7 +1477,7 @@ export const FEATURES_LIST = {
 		getSlug: () => FEATURE_WOOCOMMERCE,
 		getTitle: () => i18n.translate( 'WooCommerce' ),
 	},
-	/* END - New features Flexible and Managed plans introduced. */
+	/* END - New features Flexible and Pro plans introduced. */
 };
 
 export const getPlanFeaturesObject = ( planFeaturesList ) => {

client/my-sites/marketplace/pages/marketplace-plugin-install/index.tsx

@@ -1,4 +1,4 @@
-import { isBusiness, isEcommerce, isEnterprise, isManaged } from '@automattic/calypso-products';
+import { isBusiness, isEcommerce, isEnterprise, isPro } from '@automattic/calypso-products';
 import { Button } from '@automattic/components';
 import { ThemeProvider } from '@emotion/react';
 import { useTranslate } from 'i18n-calypso';
@@ -126,7 +126,7 @@ const MarketplacePluginInstall = ( {
 	useEffect( () => {
 		supportsAtomicUpgrade.current =
 			selectedSite?.plan &&
-			( isManaged( selectedSite.plan ) ||
+			( isPro( selectedSite.plan ) ||
 				isBusiness( selectedSite.plan ) ||
 				isEnterprise( selectedSite.plan ) ||
 				isEcommerce( selectedSite.plan ) );

client/my-sites/plans-comparison/index.tsx

@@ -1,2 +1,2 @@
 export { PlansComparison as default, globalOverrides } from './plans-comparison';
-export { isEligibleForManagedPlan } from './is-eligible-for-managed-plan';
+export { isEligibleForProPlan } from './is-eligible-for-pro-plan';

client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts → client/my-sites/plans-comparison/is-eligible-for-pro-plan.ts

@@ -4,7 +4,7 @@ import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams';
 import { isJetpackSite } from 'calypso/state/sites/selectors';
 import type { AppState } from 'calypso/types';
 
-export function isEligibleForManagedPlan( state: AppState, siteId?: number ): boolean {
+export function isEligibleForProPlan( state: AppState, siteId?: number ): boolean {
 	if ( isE2ETest() ) {
 		return false;
 	}
@@ -13,5 +13,5 @@ export function isEligibleForManagedPlan( state: AppState, siteId?: number ): bo
 		return false;
 	}
 
-	return isEnabled( 'plans/managed-plan' );
+	return isEnabled( 'plans/pro-plan' );
 }

client/my-sites/plans-comparison/plans-comparison-action.tsx

@@ -1,5 +1,5 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import { TYPE_FREE, TYPE_FLEXIBLE } from '@automattic/calypso-products';
+import { TYPE_FREE, TYPE_FLEXIBLE, PLAN_WPCOM_PRO } from '@automattic/calypso-products';
 import { Button } from '@automattic/components';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
@@ -23,12 +23,15 @@ interface Props {
 type TranslateFunc = ReturnType< typeof useTranslate >;
 
 function getButtonText( props: Partial< Props >, translate: TranslateFunc ): TranslateResult {
-	const { isCurrentPlan, isInSignup, plan } = props;
+	const { isCurrentPlan, plan } = props;
 
-	if ( isInSignup ) {
-		return translate( 'Start with %(plan)s', {
+	const planTitle = plan?.getTitle();
+	const planSlug = plan?.getStoreSlug();
+
+	if ( planSlug === PLAN_WPCOM_PRO ) {
+		return translate( 'Try %(plan)s risk-free', {
 			args: {
-				plan: plan?.getTitle(),
+				plan: planTitle,
 			},
 		} );
 	}
@@ -37,11 +40,10 @@ function getButtonText( props: Partial< Props >, translate: TranslateFunc ): Tra
 		return props.canPurchase ? translate( 'Manage plan' ) : translate( 'View plan' );
 	}
 
-	return translate( 'Select %(plan)s', {
+	return translate( 'Start with %(plan)s', {
 		args: {
-			plan: plan?.getTitle(),
+			plan: planTitle,
 		},
-		comment: 'Button to select a paid plan by plan name, e.g., "Select Managed"',
 	} );
 }
 

client/my-sites/plans-comparison/plans-comparison-features.tsx

@@ -156,9 +156,9 @@ export const planComparisonFeatures: PlanComparisonFeature[] = [
 		},
 	},
 	{
-		title: translate( 'Storage space' ),
+		title: translate( 'Storage' ),
 		description: translate(
-			'The free plan allows a maximum storage of 500MB, which equals to approximately 100 high quality images, whilst with Managed WordPress you may go all the way up to 50GB, enough space for 10,000 high quality images of the same size.'
+			'The free plan allows a maximum storage of 500MB, which equals to approximately 100 high quality images, while with Pro you may go all the way up to 50GB, enough space for 10,000 high quality images of the same size.'
 		),
 		features: [ FEATURE_500MB_STORAGE, FEATURE_50GB_STORAGE ],
 		getCellText: ( feature, isMobile = false ) => {
@@ -191,7 +191,7 @@ export const planComparisonFeatures: PlanComparisonFeature[] = [
 	{
 		title: translate( 'Visits per month' ),
 		description: translate(
-			"WordPress Managed bundles up to 100,000 visits a month to help you rest assured traffic won't be a concern."
+			"WordPress Pro bundles up to 100,000 visits a month to help you rest assured traffic won't be a concern."
 		),
 		features: [ FEATURE_10K_VISITS, FEATURE_100K_VISITS ],
 		getCellText: ( feature, isMobile = false ) => {

client/my-sites/plans-comparison/plans-comparison.tsx

@@ -1,10 +1,10 @@
 import {
 	getPlan,
 	PLAN_WPCOM_FLEXIBLE,
-	PLAN_WPCOM_MANAGED,
+	PLAN_WPCOM_PRO,
 	TYPE_FREE,
 	TYPE_FLEXIBLE,
-	TYPE_MANAGED,
+	TYPE_PRO,
 } from '@automattic/calypso-products';
 import { Gridicon } from '@automattic/components';
 import { css } from '@emotion/react';
@@ -429,7 +429,7 @@ export const PlansComparison: React.FunctionComponent< Props > = ( {
 	const sitePlan = useSelector( ( state ) => getSitePlan( state, selectedSiteId || null ) );
 	const [ showCollapsibleRows, setShowCollapsibleRows ] = useState( false );
 	const currencyCode = useSelector( getCurrentUserCurrencyCode ) ?? '';
-	const plans = [ getPlan( PLAN_WPCOM_FLEXIBLE ), getPlan( PLAN_WPCOM_MANAGED ) ] as WPComPlan[];
+	const plans = [ getPlan( PLAN_WPCOM_FLEXIBLE ), getPlan( PLAN_WPCOM_PRO ) ] as WPComPlan[];
 	const prices: PlanPrices[] = [ { price: 0 }, usePlanPrices( plans[ 1 ], selectedSiteId ) ];
 	const translate = useTranslate();
 
@@ -467,7 +467,7 @@ export const PlansComparison: React.FunctionComponent< Props > = ( {
 								currentSitePlanSlug={ sitePlan?.product_slug }
 								plan={ plan }
 								isInSignup={ isInSignup }
-								isPrimary={ plan.type === TYPE_MANAGED }
+								isPrimary={ plan.type === TYPE_PRO }
 								isCurrentPlan={ sitePlan?.product_slug === plan.getStoreSlug() }
 								manageHref={ manageHref }
 								onClick={ () => onSelectPlan( planToCartItem( plan ) ) }

client/my-sites/plans/controller.jsx

@@ -1,7 +1,7 @@
 import { isFreePlanProduct, isFlexiblePlanProduct } from '@automattic/calypso-products';
 import page from 'page';
 import { isValidFeatureKey } from 'calypso/lib/plans/features-list';
-import { isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison';
+import { isEligibleForProPlan } from 'calypso/my-sites/plans-comparison';
 import { productSelect } from 'calypso/my-sites/plans/jetpack-plans/controller';
 import setJetpackPlansHeader from 'calypso/my-sites/plans/jetpack-plans/plans-header';
 import isSiteWpcom from 'calypso/state/selectors/is-site-wpcom';
@@ -30,10 +30,10 @@ export function plans( context, next ) {
 	const state = context.store.getState();
 	const siteId = getSelectedSiteId( state );
 	const selectedSite = getSite( state, siteId );
-	const eligibleForManagedPlan = isEligibleForManagedPlan( state, siteId );
+	const eligibleForProPlan = isEligibleForProPlan( state, siteId );
 
 	if (
-		eligibleForManagedPlan &&
+		eligibleForProPlan &&
 		! isFreePlanProduct( selectedSite.plan ) &&
 		! isFlexiblePlanProduct( selectedSite.plan )
 	) {

client/my-sites/plans/current-plan/controller.jsx

@@ -1,6 +1,6 @@
 import { isFreePlanProduct, isFlexiblePlanProduct } from '@automattic/calypso-products';
 import page from 'page';
-import { isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison';
+import { isEligibleForProPlan } from 'calypso/my-sites/plans-comparison';
 import { getSite } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import CurrentPlan from './';
@@ -10,7 +10,7 @@ export function currentPlan( context, next ) {
 
 	const siteId = getSelectedSiteId( state );
 	const selectedSite = getSite( state, siteId );
-	const eligibleForManagedPlan = isEligibleForManagedPlan( state, siteId );
+	const eligibleForProPlan = isEligibleForProPlan( state, siteId );
 
 	if ( ! selectedSite ) {
 		page.redirect( '/plans/' );
@@ -20,7 +20,7 @@ export function currentPlan( context, next ) {
 
 	if (
 		isFreePlanProduct( selectedSite.plan ) ||
-		( eligibleForManagedPlan && isFlexiblePlanProduct( selectedSite.plan ) )
+		( eligibleForProPlan && isFlexiblePlanProduct( selectedSite.plan ) )
 	) {
 		page.redirect( `/plans/${ selectedSite.slug }` );
 

client/my-sites/plans/current-plan/index.jsx

@@ -15,7 +15,7 @@ import {
 	isFreeJetpackPlan,
 	isFreePlanProduct,
 	isFlexiblePlanProduct,
-	isManaged,
+	isPro,
 } from '@automattic/calypso-products';
 import { Dialog } from '@automattic/components';
 import { Global } from '@emotion/react';
@@ -40,7 +40,7 @@ import TrackComponentView from 'calypso/lib/analytics/track-component-view';
 import { isCloseToExpiration } from 'calypso/lib/purchases';
 import { getPurchaseByProductSlug } from 'calypso/lib/purchases/utils';
 import DomainWarnings from 'calypso/my-sites/domains/components/domain-warnings';
-import { globalOverrides, isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison';
+import { globalOverrides, isEligibleForProPlan } from 'calypso/my-sites/plans-comparison';
 import JetpackChecklist from 'calypso/my-sites/plans/current-plan/jetpack-checklist';
 import PlanRenewalMessage from 'calypso/my-sites/plans/jetpack-plans/plan-renewal-message';
 import PlansNavigation from 'calypso/my-sites/plans/navigation';
@@ -166,7 +166,7 @@ class CurrentPlan extends Component {
 			showJetpackChecklist,
 			showThankYou,
 			translate,
-			eligibleForManagedPlan,
+			eligibleForProPlan,
 		} = this.props;
 
 		const currentPlanSlug = selectedSite.plan.product_slug;
@@ -190,16 +190,16 @@ class CurrentPlan extends Component {
 		}
 
 		if (
-			eligibleForManagedPlan &&
+			eligibleForProPlan &&
 			! isFlexiblePlanProduct( selectedSite.plan ) &&
-			! isManaged( selectedSite.plan )
+			! isPro( selectedSite.plan )
 		) {
 			showLegacyPlanNotice = true;
 		}
 
 		return (
 			<Main className="current-plan" wideLayout>
-				{ eligibleForManagedPlan && <Global styles={ globalOverrides } /> }
+				{ eligibleForProPlan && <Global styles={ globalOverrides } /> }
 				<DocumentHead title={ translate( 'My Plan' ) } />
 				<FormattedHeader
 					brandFont
@@ -277,7 +277,7 @@ class CurrentPlan extends Component {
 						</Fragment>
 					) }
 
-					{ ! eligibleForManagedPlan && (
+					{ ! eligibleForProPlan && (
 						<>
 							<div
 								className={ classNames( 'current-plan__header-text current-plan__text', {
@@ -313,7 +313,7 @@ export default connect( ( state, { requestThankYou } ) => {
 	const isJetpackNotAtomic = false === isAutomatedTransfer && isJetpack;
 
 	const currentPlan = getCurrentPlan( state, selectedSiteId );
-	const eligibleForManagedPlan = isEligibleForManagedPlan( state, selectedSiteId );
+	const eligibleForProPlan = isEligibleForProPlan( state, selectedSiteId );
 
 	return {
 		currentPlan,
@@ -328,6 +328,6 @@ export default connect( ( state, { requestThankYou } ) => {
 		showJetpackChecklist: isJetpackNotAtomic,
 		showThankYou: requestThankYou && isJetpackNotAtomic,
 		scheduleId: getConciergeScheduleId( state ),
-		eligibleForManagedPlan,
+		eligibleForProPlan,
 	};
 } )( localize( CurrentPlan ) );

client/my-sites/plans/current-plan/purchases-listing.jsx

@@ -34,7 +34,7 @@ import {
 } from 'calypso/lib/purchases';
 import { managePurchase } from 'calypso/me/purchases/paths';
 import OwnerInfo from 'calypso/me/purchases/purchase-item/owner-info';
-import { isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison';
+import { isEligibleForProPlan } from 'calypso/my-sites/plans-comparison';
 import { getManagePurchaseUrlFor } from 'calypso/my-sites/purchases/paths';
 import { getCurrentUserId } from 'calypso/state/current-user/selectors';
 import { getSitePurchases } from 'calypso/state/purchases/selectors';
@@ -174,7 +174,7 @@ class PurchasesListing extends Component {
 	}
 
 	getActionButton( purchase ) {
-		const { selectedSiteSlug, translate, currentUserId, eligibleForManagedPlan } = this.props;
+		const { selectedSiteSlug, translate, currentUserId, eligibleForProPlan } = this.props;
 
 		// No action button if there's no site selected.
 		if ( ! selectedSiteSlug || ! purchase ) {
@@ -228,7 +228,7 @@ class PurchasesListing extends Component {
 						: '#'
 				}
 				disabled={ ! userIsPurchaseOwner }
-				compact={ ! eligibleForManagedPlan }
+				compact={ ! eligibleForProPlan }
 			>
 				{ label }
 				 
@@ -334,11 +334,11 @@ class PurchasesListing extends Component {
 	}
 
 	renderPlan() {
-		const { currentPlan, isPlanExpiring, translate, eligibleForManagedPlan } = this.props;
+		const { currentPlan, isPlanExpiring, translate, eligibleForProPlan } = this.props;
 
 		return (
 			<Fragment>
-				{ ! eligibleForManagedPlan && (
+				{ ! eligibleForProPlan && (
 					<Card compact>
 						<strong>{ translate( 'My Plan' ) }</strong>
 					</Card>
@@ -426,6 +426,6 @@ export default connect( ( state ) => {
 		selectedSiteSlug: getSelectedSiteSlug( state ),
 		isCloudEligible: isJetpackCloudEligible( state, selectedSiteId ),
 		currentUserId: getCurrentUserId( state ),
-		eligibleForManagedPlan: isEligibleForManagedPlan( state, selectedSiteId ),
+		eligibleForProPlan: isEligibleForProPlan( state, selectedSiteId ),
 	};
 } )( localize( withLocalizedMoment( PurchasesListing ) ) );