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 ? (
-
+
) : (
)}