include initial billing limit info on subscribe success

PostHog · Nov 16, 2023 · 1d58ed7 · 1d58ed7
1 parent 7c1f62d
commit 1d58ed7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
@@ -6,7 +6,7 @@ import { OnboardingStepKey, onboardingLogic } from './onboardingLogic'
 import { BillingProductV2Type } from '~/types'
 import { Spinner } from 'lib/lemon-ui/Spinner'
 import { BillingHero } from 'scenes/billing/BillingHero'
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonBanner, LemonButton } from '@posthog/lemon-ui'
 import { getUpgradeProductLink } from 'scenes/billing/billing-utils'
 import { billingProductLogic } from 'scenes/billing/billingProductLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
@@ -25,6 +25,7 @@ export const OnboardingBillingStep = ({
     const { currentAndUpgradePlans } = useValues(billingProductLogic({ product }))
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
     const plan = currentAndUpgradePlans?.upgradePlan
+    const currentPlan = currentAndUpgradePlans?.currentPlan
 
     return (
         <OnboardingStep
@@ -52,7 +53,7 @@ export const OnboardingBillingStep = ({
                 <div className="mt-6">
                     {product.subscribed ? (
                         <div className="mb-8">
-                            <div className="bg-success-highlight rounded-lg p-6 flex justify-between items-center mb-8">
+                            <div className="bg-success-highlight rounded p-6 flex justify-between items-center">
                                 <div className="flex gap-x-4">
                                     <IconCheckCircleOutline className="text-success text-3xl mb-6" />
                                     <div>
@@ -64,6 +65,15 @@ export const OnboardingBillingStep = ({
                                     <StarHog className="h-full w-full" />
                                 </div>
                             </div>
+                            {currentPlan.initial_billing_limit && (
+                                <div className="mt-2">
+                                    <LemonBanner type="info">
+                                        To protect your costs and ours, this product has an initial billing limit of $
+                                        {currentPlan.initial_billing_limit}. You can change or remove this limit on the
+                                        Billing page.
+                                    </LemonBanner>
+                                </div>
+                            )}
                         </div>
                     ) : (
                         <>

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -1272,6 +1272,7 @@ export interface BillingV2PlanType {
     current_plan?: any
     tiers?: BillingV2TierType[]
     included_if?: 'no_active_subscription' | 'has_subscription' | null
+    initial_billing_limit?: number
 }
 
 export interface PlanInterface {