diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx index cb5831d6a05..29105a42624 100644 --- a/frontend/src/lib/constants.tsx +++ b/frontend/src/lib/constants.tsx @@ -230,6 +230,7 @@ export const FEATURE_FLAGS = { EDIT_DWH_SOURCE_CONFIG: 'edit_dwh_source_config', // owner: @Gilbert09 #team-data-warehouse AI_SURVEY_RESPONSE_SUMMARY: 'ai-survey-response-summary', // owner: @pauldambra CUSTOM_CHANNEL_TYPE_RULES: 'custom-channel-type-rules', // owner: @robbie-c #team-web-analytics + SELF_SERVE_CREDIT_OVERRIDE: 'self-serve-credit-override', // owner: @zach EXPERIMENTS_MIGRATION_DISABLE_UI: 'experiments-migration-disable-ui', // owner: @jurajmajerik #team-experiments } as const export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS] diff --git a/frontend/src/scenes/billing/CreditCTAHero.tsx b/frontend/src/scenes/billing/CreditCTAHero.tsx index 0f076245c0a..85742aa8ef1 100644 --- a/frontend/src/scenes/billing/CreditCTAHero.tsx +++ b/frontend/src/scenes/billing/CreditCTAHero.tsx @@ -2,19 +2,25 @@ import { IconX } from '@posthog/icons' import { LemonButton, LemonDivider } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { BurningMoneyHog } from 'lib/components/hedgehogs' +import { FEATURE_FLAGS } from 'lib/constants' +import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import useResizeObserver from 'use-resize-observer' import { billingLogic } from './billingLogic' import { PurchaseCreditsModal } from './PurchaseCreditsModal' +export const DEFAULT_ESTIMATED_MONTHLY_CREDIT_AMOUNT_USD = 500 + export const CreditCTAHero = (): JSX.Element | null => { const { width, ref: heroRef } = useResizeObserver() + const { featureFlags } = useValues(featureFlagLogic) const { creditOverview, isPurchaseCreditsModalOpen, isCreditCTAHeroDismissed, computedDiscount } = useValues(billingLogic) const { showPurchaseCreditsModal, toggleCreditCTAHeroDismissed } = useActions(billingLogic) - if (!creditOverview.eligible || creditOverview.status === 'paid') { + const isEligible = creditOverview.eligible || featureFlags[FEATURE_FLAGS.SELF_SERVE_CREDIT_OVERRIDE] + if (creditOverview.status === 'paid' || !isEligible) { return null } @@ -37,6 +43,8 @@ export const CreditCTAHero = (): JSX.Element | null => { ) } + const estimatedMonthlyCreditAmountUsd = + creditOverview?.estimated_monthly_credit_amount_usd || DEFAULT_ESTIMATED_MONTHLY_CREDIT_AMOUNT_USD return (
@@ -78,7 +86,7 @@ export const CreditCTAHero = (): JSX.Element | null => { )} > )} - {creditOverview.eligible && creditOverview.status === 'none' && ( + {isEligible && (!creditOverview || creditOverview.status === 'none') && ( <>
Based on your usage, your monthly bill is forecasted to be an average of{' '} - ${creditOverview.estimated_monthly_credit_amount_usd.toFixed(0)}/month over - the next year. + ${estimatedMonthlyCreditAmountUsd.toFixed(0)}/month over the next year.
This qualifies you for a {computedDiscount * 100}% discount by pre-purchasing usage credits. Which gives you a net savings of{' '} $ - {Math.round( - creditOverview.estimated_monthly_credit_amount_usd * computedDiscount * 12 - ).toLocaleString('en-US', { - minimumFractionDigits: 0, - maximumFractionDigits: 0, - })} + {Math.round(estimatedMonthlyCreditAmountUsd * computedDiscount * 12).toLocaleString( + 'en-US', + { + minimumFractionDigits: 0, + maximumFractionDigits: 0, + } + )} {' '} over the next year.
diff --git a/frontend/src/scenes/billing/PurchaseCreditsModal.tsx b/frontend/src/scenes/billing/PurchaseCreditsModal.tsx index 5c2d36dc79a..60eb63fc2b0 100644 --- a/frontend/src/scenes/billing/PurchaseCreditsModal.tsx +++ b/frontend/src/scenes/billing/PurchaseCreditsModal.tsx @@ -8,6 +8,7 @@ import { LemonRadio } from 'lib/lemon-ui/LemonRadio' import { BillingGauge } from './BillingGauge' import { billingLogic } from './billingLogic' +import { DEFAULT_ESTIMATED_MONTHLY_CREDIT_AMOUNT_USD } from './CreditCTAHero' import { BillingGaugeItemKind } from './types' export const PurchaseCreditsModal = (): JSX.Element | null => { @@ -16,6 +17,8 @@ export const PurchaseCreditsModal = (): JSX.Element | null => { const { openSupportForm } = useActions(supportLogic) const creditInputValue: number = +creditForm.creditInput || 0 + const estimatedMonthlyCreditAmountUsd = + creditOverview.estimated_monthly_credit_amount_usd || DEFAULT_ESTIMATED_MONTHLY_CREDIT_AMOUNT_USD return (