diff --git a/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx b/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx index 4cdb535e242f7..3119e70f76106 100644 --- 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 (
@@ -94,7 +98,7 @@ export const OnboardingProductIntro = ({ ))}
-
+

Pricing

{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.

)} -
    +
      {pricingBenefits.map((benefit, i) => (
    • - + {benefit}
    • ))}
    + {!product.subscribed && freePlan.free_allocation && ( +

    + Or stick with our generous free plan and get{' '} + {convertLargeNumberToWords(freePlan.free_allocation, null)} {product.unit}s free every + month, forever.{' '} + { + toggleIsPlanComparisonModalOpen() + }} + > + View plan comparison. + + toggleIsPlanComparisonModalOpen()} + /> +

    + )}

    Resources

    diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx index 1935606a55b77..1c79b751d48ef 100644 --- 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({ props: {} as OnboardingLogicProps, path: ['scenes', 'onboarding', 'onboardingLogic'], @@ -82,16 +95,7 @@ export const onboardingLogic = kea({ 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 index b1f525c5fe9d5..80cc121d8bd7d 100644 --- a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx +++ b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx @@ -76,11 +76,11 @@ export const sdksLogic = kea({ }, selectors: { showSourceOptionsSelect: [ - (selectors) => [selectors.sourceOptions, selectors.sdks], - (sourceOptions: LemonSelectOptions, sdks: SDK[]): boolean => { + (selectors) => [selectors.sourceOptions, selectors.availableSDKInstructionsMap], + (sourceOptions: LemonSelectOptions, 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 index 404ad83e5dc48..fd1d9fe160a9f 100644 --- 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

    {product.description}

    {onboardingCompleted ? ( - + ) : ( )}