Hosted Flow: hide commerce plan and term selector for WordCamp promo (#…

…94655) * Hosted Flow: hide commerce plan and term selector for WordCamp promo * adjust spacing when plan type selector is hidden * Hide comparison table
Automattic · Sep 18, 2024 · 9db92b0 · 9db92b0
1 parent f39aa5e
commit 9db92b0
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/plans/plans-wrapper.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/plans/plans-wrapper.tsx
@@ -41,7 +41,7 @@ interface Props {
 	onSubmit: ( planCartItem: MinimalRequestCartProduct | null ) => void;
 }
 
-function getPlansIntent( flowName: string | null ): PlansIntent | null {
+function getPlansIntent( flowName: string | null, isWordCampPromo?: boolean ): PlansIntent | null {
 	switch ( flowName ) {
 		case START_WRITING_FLOW:
 		case DESIGN_FIRST_FLOW:
@@ -51,6 +51,9 @@ function getPlansIntent( flowName: string | null ): PlansIntent | null {
 		case LINK_IN_BIO_FLOW:
 			return 'plans-link-in-bio';
 		case NEW_HOSTED_SITE_FLOW:
+			if ( isWordCampPromo ) {
+				return 'plans-new-hosted-site-business-only';
+			}
 			return 'plans-new-hosted-site';
 		default:
 			return null;
@@ -90,11 +93,17 @@ const PlansWrapper: React.FC< Props > = ( props ) => {
 	const isDesktop = useDesktopBreakpoint();
 	const navigate = useNavigate();
 	const location = useLocation();
+
 	const stepName = 'plans';
 	const customerType = 'personal';
 	const headerText = __( 'Choose a plan' );
 	const isInSignup = isDomainUpsellFlow( flowName ) ? false : true;
-	const plansIntent = getPlansIntent( flowName );
+	/**
+	 * isWordCampPromo is temporary
+	 */
+	const isWordCampPromo = new URLSearchParams( location.search ).has( 'utm_source', 'wordcamp' );
+	const plansIntent = getPlansIntent( flowName, isWordCampPromo );
+
 	const hideFreePlan = plansIntent
 		? reduxHideFreePlan && 'plans-blog-onboarding' === plansIntent
 		: reduxHideFreePlan;
@@ -173,12 +182,13 @@ const PlansWrapper: React.FC< Props > = ( props ) => {
 					customerType={ customerType }
 					plansWithScroll={ isDesktop }
 					flowName={ flowName }
-					hidePlansFeatureComparison={ hidePlansFeatureComparison }
+					hidePlansFeatureComparison={ hidePlansFeatureComparison || isWordCampPromo }
 					intent={ plansIntent }
 					removePaidDomain={ removePaidDomain }
 					setSiteUrlAsFreeDomainSuggestion={ setSiteUrlAsFreeDomainSuggestion }
 					renderSiblingWhenLoaded={ () => props.shouldIncludeFAQ && <PlanFAQ /> }
 					showPlanTypeSelectorDropdown={ config.isEnabled( 'onboarding/interval-dropdown' ) }
+					hidePlanTypeSelector={ isWordCampPromo }
 					onPlanIntervalUpdate={ onPlanIntervalUpdate }
 					coupon={ couponCode }
 				/>

diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx
@@ -808,6 +808,7 @@ const PlansFeaturesMain = ( {
 						<div
 							className={ clsx( 'plans-features-main__group', 'is-wpcom', 'is-2023-pricing-grid', {
 								'is-scrollable': plansWithScroll,
+								'is-plan-type-selector-visible': ! hidePlanSelector,
 							} ) }
 							data-e2e-plans="wpcom"
 						>

diff --git a/client/my-sites/plans-features-main/style.scss b/client/my-sites/plans-features-main/style.scss
@@ -24,8 +24,8 @@ $plan-features-header-banner-height: 20px;
 	}
 }
 
-.plans-features-main__features-grid,
-.plans-features-main__comparison-grid {
+.is-plan-type-selector-visible .plans-features-main__features-grid,
+.is-plan-type-selector-visible .plans-features-main__comparison-grid {
 	margin-top: 50px;
 }
 

diff --git a/packages/plans-grid-next/src/hooks/data-store/use-grid-plans.tsx b/packages/plans-grid-next/src/hooks/data-store/use-grid-plans.tsx
@@ -153,6 +153,9 @@ const usePlanTypesWithIntent = ( {
 		case 'plans-new-hosted-site':
 			planTypes = [ TYPE_BUSINESS, TYPE_ECOMMERCE ];
 			break;
+		case 'plans-new-hosted-site-business-only':
+			planTypes = [ TYPE_BUSINESS ];
+			break;
 		case 'plans-import':
 			planTypes = [ TYPE_FREE, TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS ];
 			break;

diff --git a/packages/plans-grid-next/src/types.ts b/packages/plans-grid-next/src/types.ts
@@ -59,6 +59,7 @@ export type PlansIntent =
 	| 'plans-newsletter'
 	| 'plans-link-in-bio'
 	| 'plans-new-hosted-site'
+	| 'plans-new-hosted-site-business-only'
 	| 'plans-plugins'
 	| 'plans-jetpack-app'
 	| 'plans-jetpack-app-site-creation'