From d38b6fa1a64182698f6fdb09c95da256278a0dc2 Mon Sep 17 00:00:00 2001
From: Raquel Smith <raquelmsmith@users.noreply.github.com>
Date: Thu, 14 Mar 2024 12:35:31 -0700
Subject: [PATCH] fix: don't show pricing section on unlicensed product intro
 (#20914)

don't show pricing section on unlicensed product intro
---
 .../OnboardingProductIntroduction.tsx          | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx b/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx
index 235c0e76599..5402f8fe7d7 100644
--- a/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx
@@ -8,6 +8,7 @@ import React from 'react'
 import { convertLargeNumberToWords } from 'scenes/billing/billing-utils'
 import { billingProductLogic } from 'scenes/billing/billingProductLogic'
 import { ProductPricingModal } from 'scenes/billing/ProductPricingModal'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { getProductIcon } from 'scenes/products/Products'
 import { userLogic } from 'scenes/userLogic'
 
@@ -150,7 +151,7 @@ const PricingSection = ({ product }: { product: BillingProductV2Type }): JSX.Ele
             <b>
                 {convertLargeNumberToWords(
                     currentAndUpgradePlans.currentPlan?.free_allocation ||
-                        currentAndUpgradePlans.downgradePlan.free_allocation ||
+                        currentAndUpgradePlans.downgradePlan?.free_allocation ||
                         0,
                     null
                 )}{' '}
@@ -183,6 +184,7 @@ const PricingSection = ({ product }: { product: BillingProductV2Type }): JSX.Ele
 
 export function OnboardingProductIntroduction({ stepKey }: { stepKey: OnboardingStepKey }): JSX.Element | null {
     const { product } = useValues(onboardingLogic)
+    const { isCloudOrDev } = useValues(preflightLogic)
     const websiteSlug: Partial<Record<ProductKey, string>> = {
         [ProductKey.SESSION_REPLAY]: 'session-replay',
         [ProductKey.FEATURE_FLAGS]: 'feature-flags',
@@ -223,8 +225,8 @@ export function OnboardingProductIntroduction({ stepKey }: { stepKey: Onboarding
                         <div className="max-w-screen-xl">
                             <h3 className="mb-6 text-2xl font-bold">Features</h3>
                             <ul className="list-none p-0 grid grid-cols-2 md:grid-cols-3 gap-8 mb-8 ">
-                                {product.features
-                                    .filter((feature) => feature.type == 'primary')
+                                {product?.features
+                                    ?.filter((feature) => feature.type == 'primary')
                                     .map((feature, i) => {
                                         return (
                                             <React.Fragment key={`${product.type}-feature-${i}`}>
@@ -276,11 +278,13 @@ export function OnboardingProductIntroduction({ stepKey }: { stepKey: Onboarding
                             </div>
                         </div>
                     </div>
-                    <div className="p-8 py-12 border-t border-border">
-                        <div className="max-w-screen-xl m-auto">
-                            <PricingSection product={product} />
+                    {isCloudOrDev && (
+                        <div className="p-8 py-12 border-t border-border">
+                            <div className="max-w-screen-xl m-auto">
+                                <PricingSection product={product} />
+                            </div>
                         </div>
-                    </div>
+                    )}
                     <div className="mb-12 flex justify-center px-8">
                         <div className="w-full max-w-screen-xl rounded bg-primary-alt-highlight border border-border p-6 flex justify-between items-center gap-x-12">
                             <div>