fix: onboarding sdk source select, button, free pricing (#17705)

* fix sdk selector disappearing * make button work * show free plan info on pricing page if not sub'd
PostHog · Oct 2, 2023 · 2f3c432 · 2f3c432
1 parent a5e2ec2
commit 2f3c432
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 20 deletions.
diff --git a/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx b/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx
@@ -8,6 +8,7 @@ import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard'
 import { ProductPricingModal } from 'scenes/billing/ProductPricingModal'
 import { IconArrowLeft, IconCheckCircleOutline, IconOpenInNew } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
+import { PlanComparisonModal } from 'scenes/billing/PlanComparison'
 
 export const OnboardingProductIntro = ({
     product,
@@ -16,8 +17,10 @@ export const OnboardingProductIntro = ({
     product: BillingProductV2Type
     onStart?: () => void
 }): JSX.Element => {
-    const { currentAndUpgradePlans, isPricingModalOpen } = useValues(billingProductLogic({ product }))
-    const { toggleIsPricingModalOpen } = useActions(billingProductLogic({ product }))
+    const { currentAndUpgradePlans, isPricingModalOpen, isPlanComparisonModalOpen } = useValues(
+        billingProductLogic({ product })
+    )
+    const { toggleIsPricingModalOpen, toggleIsPlanComparisonModalOpen } = useActions(billingProductLogic({ product }))
     const { setCurrentOnboardingStepNumber } = useActions(onboardingLogic)
     const { currentOnboardingStepNumber } = useValues(onboardingLogic)
 
@@ -35,6 +38,7 @@ export const OnboardingProductIntro = ({
 
     const upgradePlan = currentAndUpgradePlans?.upgradePlan
     const plan = upgradePlan ? upgradePlan : currentAndUpgradePlans?.currentPlan
+    const freePlan = currentAndUpgradePlans?.downgradePlan || currentAndUpgradePlans?.currentPlan
 
     return (
         <div className="w-full">
@@ -94,7 +98,7 @@ export const OnboardingProductIntro = ({
                         ))}
                     </div>
                 </div>
-                <div>
+                <div className="max-w-80">
                     <LemonCard hoverEffect={false}>
                         <h2 className="text-3xl">Pricing</h2>
                         {plan?.tiers?.[0].unit_amount_usd && parseInt(plan?.tiers?.[0].unit_amount_usd) === 0 && (
@@ -114,14 +118,34 @@ export const OnboardingProductIntro = ({
                                 after {convertLargeNumberToWords(plan?.tiers?.[1].up_to, null)}/mo.
                             </p>
                         )}
-                        <ul>
+                        <ul className="mt-4">
                             {pricingBenefits.map((benefit, i) => (
                                 <li className="flex mb-2 ml-6" key={`pricing-benefits-${i}`}>
-                                    <IconCheckCircleOutline className="text-success mr-2 mt-1" />
+                                    <IconCheckCircleOutline className="text-success mr-2 mt-1 min-w-4" />
                                     {benefit}
                                 </li>
                             ))}
                         </ul>
+                        {!product.subscribed && freePlan.free_allocation && (
+                            <p>
+                                Or stick with our <strong>generous free plan</strong> and get{' '}
+                                {convertLargeNumberToWords(freePlan.free_allocation, null)} {product.unit}s free every
+                                month, forever.{' '}
+                                <Link
+                                    onClick={() => {
+                                        toggleIsPlanComparisonModalOpen()
+                                    }}
+                                >
+                                    <span className="font-bold text-brand-red">View plan comparison.</span>
+                                </Link>
+                                <PlanComparisonModal
+                                    product={product}
+                                    modalOpen={isPlanComparisonModalOpen}
+                                    includeAddons
+                                    onClose={() => toggleIsPlanComparisonModalOpen()}
+                                />
+                            </p>
+                        )}
                     </LemonCard>
                     <LemonCard className="mt-8" hoverEffect={false}>
                         <h2 className="text-3xl">Resources</h2>

diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -31,6 +31,19 @@ const onboardingStepMap: OnboardingStepMap = {
 
 export type AllOnboardingSteps = JSX.Element[]
 
+export const getProductUri = (productKey: ProductKey): string => {
+    switch (productKey) {
+        case 'product_analytics':
+            return combineUrl(urls.events(), { onboarding_completed: true }).url
+        case 'session_replay':
+            return urls.replay()
+        case 'feature_flags':
+            return urls.featureFlags()
+        default:
+            return urls.default()
+    }
+}
+
 export const onboardingLogic = kea<onboardingLogicType>({
     props: {} as OnboardingLogicProps,
     path: ['scenes', 'onboarding', 'onboardingLogic'],
@@ -82,16 +95,7 @@ export const onboardingLogic = kea<onboardingLogicType>({
             urls.default() as string,
             {
                 setProductKey: (_, { productKey }) => {
-                    switch (productKey) {
-                        case 'product_analytics':
-                            return combineUrl(urls.events(), { onboarding_completed: true }).url
-                        case 'session_replay':
-                            return urls.replay()
-                        case 'feature_flags':
-                            return urls.featureFlags()
-                        default:
-                            return urls.default()
-                    }
+                    return productKey ? getProductUri(productKey as ProductKey) : urls.default()
                 },
             },
         ],

diff --git a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
@@ -76,11 +76,11 @@ export const sdksLogic = kea<sdksLogicType>({
     },
     selectors: {
         showSourceOptionsSelect: [
-            (selectors) => [selectors.sourceOptions, selectors.sdks],
-            (sourceOptions: LemonSelectOptions<string>, sdks: SDK[]): boolean => {
+            (selectors) => [selectors.sourceOptions, selectors.availableSDKInstructionsMap],
+            (sourceOptions: LemonSelectOptions<string>, availableSDKInstructionsMap: SDKInstructionsMap): boolean => {
                 // more than two source options since one will almost always be "recommended"
                 // more than 5 sdks since with fewer you don't really need to filter
-                return sdks.length > 5 && sourceOptions.length > 2
+                return Object.keys(availableSDKInstructionsMap).length > 5 && sourceOptions.length > 2
             },
         ],
     },

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
@@ -1,7 +1,7 @@
 import { LemonButton } from '@posthog/lemon-ui'
 import { IconBarChart } from 'lib/lemon-ui/icons'
 import { SceneExport } from 'scenes/sceneTypes'
-import { BillingProductV2Type } from '~/types'
+import { BillingProductV2Type, ProductKey } from '~/types'
 import { useActions, useValues } from 'kea'
 import { teamLogic } from 'scenes/teamLogic'
 import { useEffect } from 'react'
@@ -12,6 +12,7 @@ import { billingLogic } from 'scenes/billing/billingLogic'
 import { Spinner } from 'lib/lemon-ui/Spinner'
 import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard'
 import { router } from 'kea-router'
+import { getProductUri } from 'scenes/onboarding/onboardingLogic'
 
 export const scene: SceneExport = {
     component: Products,
@@ -65,7 +66,10 @@ function ProductCard({ product }: { product: BillingProductV2Type }): JSX.Elemen
             <p className="grow">{product.description}</p>
             <div className="flex gap-x-2">
                 {onboardingCompleted ? (
-                    <OnboardingCompletedButton productUrl={''} onboardingUrl={urls.onboarding(product.type)} />
+                    <OnboardingCompletedButton
+                        productUrl={getProductUri(product.type as ProductKey)}
+                        onboardingUrl={urls.onboarding(product.type)}
+                    />
                 ) : (
                     <OnboardingNotCompletedButton url={urls.onboarding(product.type)} />
                 )}