Hosted Flow: Hide billing term dropdown and upsell for Wordcamp flow …

…checkout (#94680)

* Hide billing term dropdown for new hosted site flow

* Hide product variant upsell

client/landing/stepper/declarative-flow/new-hosted-site-flow.ts

@@ -50,6 +50,9 @@ const hosting: Flow = {
 			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getCouponCode(),
 			[]
 		);
+
+		const query = useQuery();
+		const queryParams = Object.fromEntries( query );
 		const flowName = this.name;
 
 		const goBack = () => {
@@ -69,6 +72,11 @@ const hosting: Flow = {
 
 					setPlanCartItem( {
 						product_slug: productSlug,
+						extra: {
+							...( queryParams?.utm_source && {
+								hideProductVariants: queryParams.utm_source === 'wordcamp',
+							} ),
+						},
 					} );
 
 					if ( isFreeHostingTrial( productSlug ) ) {

client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/index.tsx

@@ -116,6 +116,10 @@ export function CheckoutSidebarPlanUpsell() {
 		return null;
 	}
 
+	if ( plan.extra?.hideProductVariants ) {
+		return null;
+	}
+
 	const currentVariant = variants?.find( ( product ) => product.productId === plan.product_id );
 
 	if ( ! currentVariant ) {

client/my-sites/checkout/src/components/wp-order-review-line-items.tsx

@@ -310,6 +310,9 @@ function LineItemWrapper( {
 		if ( has100YearPlanProduct ) {
 			return false;
 		}
+		if ( product.extra?.hideProductVariants ) {
+			return false;
+		}
 
 		return true;
 	} )();

packages/shopping-cart/src/types.ts

@@ -645,6 +645,16 @@ export interface ResponseCartProductExtra {
 	is_marketplace_product?: boolean;
 	product_slug?: string;
 	product_type?: 'marketplace_plugin' | 'marketplace_theme' | 'saas_plugin';
+
+	/**
+	 * True when:
+	 * - the product has variants ( e.g. annual plan vs. monthly plan vs. multi-year plan )
+	 * - we only want to show the single product selected by the user
+	 * - we want to prevent the user from switching to a variant
+	 *
+	 * This will hide product variant UI elements in checkout ( line item variant dropdown or variant upsells )
+	 */
+	hideProductVariants?: boolean;
 }
 
 export interface ResponseCartGiftDetails {