diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index 510f2818b35c1..af3328e34eb66 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -298,6 +298,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
{product.addons
+ // TODO: enhanced_persons: remove this filter
.filter((addon) => !addon.inclusion_only)
.map((addon, i) => {
return
diff --git a/frontend/src/scenes/billing/BillingProductAddon.tsx b/frontend/src/scenes/billing/BillingProductAddon.tsx
index 17a1ad981611b..abcf5a5c26968 100644
--- a/frontend/src/scenes/billing/BillingProductAddon.tsx
+++ b/frontend/src/scenes/billing/BillingProductAddon.tsx
@@ -1,5 +1,5 @@
import { IconCheckCircle, IconDocument, IconPlus } from '@posthog/icons'
-import { LemonButton, LemonSelectOptions, LemonTag, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, LemonSelectOptions, LemonTag, Link, Tooltip } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
import { More } from 'lib/lemon-ui/LemonButton/More'
@@ -35,6 +35,10 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
// Filter out the addon itself from the features list
const addonFeatures = addon.features?.filter((feature) => feature.name !== addon.name)
+ const is_enhanced_persons_og_customer =
+ addon.type === 'enhanced_persons' &&
+ addon.plans?.find((plan) => plan.plan_key === 'addon-20240404-og-customers')
+
return (
@@ -60,6 +64,18 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
)}
{addon.description}
+ {is_enhanced_persons_og_customer && (
+
+
+ Why is this here?{' '}
+
+
+ )}
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
index 54f19f2dd2b0a..8ad7220eaa0f3 100644
--- a/frontend/src/scenes/billing/PlanComparison.tsx
+++ b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -9,7 +9,7 @@ import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
import { dayjs } from 'lib/dayjs'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import React from 'react'
+import React, { useState } from 'react'
import { getProductIcon } from 'scenes/products/Products'
import { urls } from 'scenes/urls'
import useResizeObserver from 'use-resize-observer'
@@ -55,10 +55,13 @@ export function PlanIcon({
)
}
-const getProductTiers = (
- plan: BillingV2PlanType,
+const PricingTiers = ({
+ plan,
+ product,
+}: {
+ plan: BillingV2PlanType
product: BillingProductV2Type | BillingProductV2AddonType
-): JSX.Element => {
+}): JSX.Element => {
const { width, ref: tiersRef } = useResizeObserver()
const tiers = plan?.tiers
@@ -262,43 +265,74 @@ export const PlanComparison = ({
Priced per {product.unit}
{plans?.map((plan) => (
-
{getProductTiers(plan, product)}
+
+
+
))}
)}
+
+
+ {upgradeButtons}
+
+ {includeAddons && product.addons.length > 0 && (
+
+
+ Available add-ons:
+
+
+ )}
{includeAddons &&
product.addons?.map((addon) => {
- // TODO: enhanced_persons: addon will show up here when we add a price plan. Make sure this can handle it.
return addon.tiered ? (
- {addon.name}
-
- addon
-
+
+ {addon.name}
+
+
+
+ {addon.inclusion_only ? 'config' : 'add-on'}
+
+
Priced per {addon.unit}
- {plans?.map((plan) =>
- // If the plan is free, the addon isn't available
- plan.free_allocation && !plan.tiers ? (
+ {plans?.map((plan, i) => {
+ // If the parent plan is free, the addon isn't available
+ return !addon.inclusion_only ? (
+ plan.free_allocation && !plan.tiers ? (
+
+ Not available on this plan.
+
+ ) : (
+
+
+
+ )
+ ) : plan.free_allocation && !plan.tiers ? (
- Not available on this plan.
+
) : (
- {getProductTiers(addon.plans?.[0], addon)}
+
)
- )}
+ })}
) : null
})}
-
-
- {upgradeButtons}
-
Product Features:
@@ -465,3 +499,38 @@ export const PlanComparisonModal = ({
)
}
+
+const AddonPlanTiers = ({
+ plan,
+ addon,
+}: {
+ plan: BillingV2PlanType
+ addon: BillingProductV2AddonType
+}): JSX.Element => {
+ const [showTiers, setShowTiers] = useState(false)
+
+ return showTiers ? (
+ <>
+
+
+ setShowTiers(false)} className="text-xs">
+ Hide volume discounts
+
+
+ >
+ ) : (
+ <>
+
+
+ First {convertLargeNumberToWords(plan?.tiers?.[0].up_to || 0, null)} {addon.unit}s free
+
+ , then just ${plan?.tiers?.[1].unit_amount_usd}.
+
+
+ setShowTiers(true)} className="text-xs">
+ Show volume discounts
+
+
+ >
+ )
+}