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 && ( +
+
+ You've unlocked enterprise-grade perks: +
+ + Save 20% by switching to up-front annual billing +
+
+ + Discounts for bundling subscriptions to multiple products +
+
+ + Team training +
+
+ + Dedicated support in a Slack channel +
+
+ + Free merch +
+
+ + Get in touch! + + setPerksCTADismissed(true)}> + Dismiss + +
+
+
+ +
+
+ )} +
)} - {!isOnboarding && over20kAnnual && ( -
-
- -
-
- You're elgibile for PostHog perks! - - - - - -
- - Get in touch! - -
-
-
- )} - {!cloudOrDev && (billing?.license?.plan || !billing?.has_active_subscription) && (
{!isOnboarding && billing?.has_active_subscription && ( -
+
([ registerInstrumentationProps: true, setRedirectPath: true, setIsOnboarding: true, + setPerksCTADismissed: (perksCTADismissed: boolean) => ({ perksCTADismissed }), }), connect({ values: [featureFlagLogic, ['featureFlags'], preflightLogic, ['preflight']], @@ -107,6 +108,13 @@ export const billingLogic = kea([ setIsOnboarding: () => window.location.pathname.includes('/onboarding'), }, ], + perksCTADismissed: [ + false, + { persist: true }, + { + setPerksCTADismissed: (_, { perksCTADismissed }) => perksCTADismissed, + }, + ], }), loaders(({ actions }) => ({ billing: [ diff --git a/frontend/src/styles/utilities.scss b/frontend/src/styles/utilities.scss index 04d595ea54910..dd4850969830f 100644 --- a/frontend/src/styles/utilities.scss +++ b/frontend/src/styles/utilities.scss @@ -1408,3 +1408,7 @@ $decorations: underline, overline, line-through, no-underline; .aspect-video { aspect-ratio: 16 / 9; } + +.-scale-x-1 { + transform: scaleX(-1); +}