diff --git a/frontend/src/scenes/billing/Billing.scss b/frontend/src/scenes/billing/Billing.scss index b904cffb8b845..40e358f9060a6 100644 --- a/frontend/src/scenes/billing/Billing.scss +++ b/frontend/src/scenes/billing/Billing.scss @@ -1,3 +1,5 @@ +@import '../../styles/vars'; + .BillingPlan { flex-grow: 1; max-width: 500px; @@ -30,3 +32,15 @@ } } } + +.LargeCustomerCTA { + @media screen and (max-width: $lg) { + float: unset; + padding-left: 0; + } + + @media screen and (min-width: $lg) { + float: right; + padding-left: 2rem; + } +} diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx index e484b750a6fe4..e414f6ff90ab6 100644 --- a/frontend/src/scenes/billing/Billing.tsx +++ b/frontend/src/scenes/billing/Billing.tsx @@ -1,12 +1,15 @@ -import { LemonButton, LemonCheckbox, LemonDivider, LemonInput, Link } from '@posthog/lemon-ui' +import './Billing.scss' + +import { LemonButton, LemonDivider, LemonInput, Link } from '@posthog/lemon-ui' import clsx from 'clsx' import { useActions, useValues } from 'kea' import { Field, Form } from 'kea-forms' +import { SurprisedHog } from 'lib/components/hedgehogs' import { PageHeader } from 'lib/components/PageHeader' import { supportLogic } from 'lib/components/Support/supportLogic' import { dayjs } from 'lib/dayjs' import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' -import { IconPlus } from 'lib/lemon-ui/icons' +import { IconCheckCircleOutline, IconPlus } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner' @@ -19,7 +22,6 @@ import { SceneExport } from 'scenes/sceneTypes' import { BillingHero } from './BillingHero' import { billingLogic } from './billingLogic' import { BillingProduct } from './BillingProduct' -import { BuilderHogWavingSmiling } from 'lib/components/hedgehogs' export const scene: SceneExport = { component: Billing, @@ -40,8 +42,9 @@ export function Billing(): JSX.Element { isActivateLicenseSubmitting, isUnlicensedDebug, over20kAnnual, + perksCTADismissed, } = useValues(billingLogic) - const { reportBillingV2Shown } = useActions(billingLogic) + const { reportBillingV2Shown, setPerksCTADismissed } = useActions(billingLogic) const { preflight } = useValues(preflightLogic) const cloudOrDev = preflight?.cloud || preflight?.is_debug const { openSupportForm } = useActions(supportLogic) @@ -159,8 +162,48 @@ export function Billing(): JSX.Element { > )} + + {!isOnboarding && over20kAnnual && !perksCTADismissed && ( +