chore(3000): remove legacy billing gauge (#19679)

PostHog · Jan 10, 2024 · ac40380 · ac40380
1 parent 7cabe21
commit ac40380
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 95 deletions.
diff --git a/frontend/src/scenes/billing/BillingGauge.tsx b/frontend/src/scenes/billing/BillingGauge.tsx
@@ -7,7 +7,7 @@ import { useMemo } from 'react'
 
 import { BillingProductV2Type } from '~/types'
 
-import { BillingGaugeItemKind, BillingGaugeItemType } from './types'
+import { BillingGaugeItemType } from './types'
 
 /*
  * Billing Gauge Item: Individual bars on the billing gauge.
@@ -18,47 +18,8 @@ type BillingGaugeItemProps = {
     isWithinUsageLimit: boolean
 }
 
-const getBgColorClassForItem = (item: BillingGaugeItemType, isWithinUsageLimit: boolean): string => {
-    if (item.type === BillingGaugeItemKind.FreeTier) {
-        return 'bg-success-light'
-    } else if (item.type === BillingGaugeItemKind.CurrentUsage) {
-        return isWithinUsageLimit ? 'bg-success' : 'bg-danger'
-    } else if (item.type === BillingGaugeItemKind.ProjectedUsage) {
-        return 'bg-border'
-    } else if (item.type === BillingGaugeItemKind.BillingLimit) {
-        return 'bg-primary-alt-light'
-    } else {
-        throw new Error(`Unknown type: ${item.type}`)
-    }
-}
-
 const BillingGaugeItem = ({ item, maxValue, isWithinUsageLimit }: BillingGaugeItemProps): JSX.Element => {
     const width = `${(item.value / maxValue) * 100}%`
-    const bgColorClass = getBgColorClassForItem(item, isWithinUsageLimit)
-
-    return (
-        <div
-            className={`BillingGaugeItem absolute top-0 left-0 bottom-0 h-2 ${bgColorClass}`}
-            // eslint-disable-next-line react/forbid-dom-props
-            style={{ '--billing-gauge-item-width': width } as React.CSSProperties}
-        >
-            <div className="absolute right-0 w-px h-full bg-bg-light" />
-            <Tooltip title={item.value.toLocaleString()} placement={'right'}>
-                <div
-                    className={clsx('BillingGaugeItem__info', {
-                        'BillingGaugeItem__info--bottom': !item.top,
-                    })}
-                >
-                    <b>{item.text}</b>
-                    <div>{compactNumber(item.value)}</div>
-                </div>
-            </Tooltip>
-        </div>
-    )
-}
-
-const BillingGaugeItem3000 = ({ item, maxValue, isWithinUsageLimit }: BillingGaugeItemProps): JSX.Element => {
-    const width = `${(item.value / maxValue) * 100}%`
 
     return (
         <div
@@ -107,18 +68,3 @@ export function BillingGauge({ items, product }: BillingGaugeProps): JSX.Element
         </div>
     )
 }
-
-export function BillingGauge3000({ items, product }: BillingGaugeProps): JSX.Element {
-    const maxValue = useMemo(() => {
-        return Math.max(100, ...items.map((item) => item.value)) * 1.3
-    }, [items])
-    const isWithinUsageLimit = product.percentage_usage <= 1
-
-    return (
-        <div className="relative h-2 bg-border-light my-16">
-            {items.map((item, i) => (
-                <BillingGaugeItem3000 key={i} item={item} maxValue={maxValue} isWithinUsageLimit={isWithinUsageLimit} />
-            ))}
-        </div>
-    )
-}
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -23,7 +23,7 @@ import { getProductIcon } from 'scenes/products/Products'
 import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
 
 import { convertLargeNumberToWords, getUpgradeProductLink, summarizeUsage } from './billing-utils'
-import { BillingGauge3000 } from './BillingGauge'
+import { BillingGauge } from './BillingGauge'
 import { BillingLimitInput } from './BillingLimitInput'
 import { billingLogic } from './billingLogic'
 import { billingProductLogic } from './billingProductLogic'
@@ -193,7 +193,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
     const {
         customLimitUsd,
         showTierBreakdown,
-        billingGaugeItems3000,
+        billingGaugeItems,
         isPricingModalOpen,
         isPlanComparisonModalOpen,
         currentAndUpgradePlans,
@@ -457,7 +457,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                                 />
                                             )}
                                             <div className="grow">
-                                                <BillingGauge3000 items={billingGaugeItems3000} product={product} />
+                                                <BillingGauge items={billingGaugeItems} product={product} />
                                             </div>
                                             {product.current_amount_usd ? (
                                                 <div className="flex justify-end gap-8 flex-wrap items-end">

diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -163,43 +163,6 @@ export const billingProductLogic = kea<billingProductLogicType>([
             },
         ],
         billingGaugeItems: [
-            (s, p) => [p.product, s.freeTier, s.billingLimitAsUsage],
-            (product, freeTier, billingLimitAsUsage): BillingGaugeItemType[] => {
-                return [
-                    freeTier
-                        ? {
-                              type: BillingGaugeItemKind.FreeTier,
-                              text: 'Free tier limit',
-                              value: freeTier,
-                              top: true,
-                          }
-                        : undefined,
-                    {
-                        type: BillingGaugeItemKind.CurrentUsage,
-                        text: 'Current',
-                        value: product.current_usage || 0,
-                        top: false,
-                    },
-                    product.projected_usage && product.projected_usage > (product.current_usage || 0)
-                        ? {
-                              type: BillingGaugeItemKind.ProjectedUsage,
-                              text: 'Projected',
-                              value: product.projected_usage || 0,
-                              top: false,
-                          }
-                        : undefined,
-                    billingLimitAsUsage
-                        ? {
-                              type: BillingGaugeItemKind.BillingLimit,
-                              text: 'Billing limit',
-                              top: true,
-                              value: billingLimitAsUsage || 0,
-                          }
-                        : (undefined as any),
-                ].filter(Boolean)
-            },
-        ],
-        billingGaugeItems3000: [
             (s, p) => [p.product, s.freeTier, s.billingLimitAsUsage],
             (product, freeTier, billingLimitAsUsage): BillingGaugeItemType[] => {
                 return [