From 6fb42ad0e0997761ebf3fa8e9d16c21034e5457e Mon Sep 17 00:00:00 2001 From: Vedant Mahajan Date: Fri, 29 May 2026 23:46:27 +0530 Subject: [PATCH 1/3] Remove redundant credits section (#1019) Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 4.5 --- apps/web/components/settings/billing.tsx | 508 ++++++++----------- apps/web/components/settings/org-context.tsx | 27 +- 2 files changed, 227 insertions(+), 308 deletions(-) diff --git a/apps/web/components/settings/billing.tsx b/apps/web/components/settings/billing.tsx index 0a650a15c..b03a6659e 100644 --- a/apps/web/components/settings/billing.tsx +++ b/apps/web/components/settings/billing.tsx @@ -31,6 +31,9 @@ const CREDIT_FEATURE_ID = "usd_credits" const TOP_UP_PLAN_ID = "credits_topup" const TOP_UP_AMOUNTS = [10, 25, 50, 100] as const +const SURFACE_SHADOW = + "0 2.842px 14.211px 0 rgba(0,0,0,0.25), 0.711px 0.711px 0.711px 0 rgba(255,255,255,0.10) inset" + type BillingInvoice = { planIds?: string[] stripeId: string @@ -694,322 +697,237 @@ export default function Billing() { -
- Credits + + +
+
+

+ Buy Credits +

+

+ Add USD to your balance for metered usage. +

+
+ + + +
- -
-
-

- Usage this period +

+
+

+ Choose an amount

-
- - {planUsagePct < 1 && planUsagePct > 0 - ? "< 1" - : Math.round(planUsagePct)} - % - - of monthly usage - - {daysRemaining !== null - ? `· resets in ${daysRemaining} day${daysRemaining !== 1 ? "s" : ""}` - : "· resets with your billing cycle"} - -
-
-
{ + setTopUpAmount(value) + setCustomTopUpAmount("") + }} + disabled={topUpPendingAmount !== null} + /> +
+ + setCustomTopUpAmount(event.target.value)} + placeholder="e.g. 75" + type="number" + value={customTopUpAmount} + className="h-11 rounded-[10px] border border-white/10 bg-[#080B10] px-3 text-[14px] text-[#FAFAFA] outline-none placeholder:text-[#737373] focus:border-[#0054AD]" />
-

- {planUsagePct > 0 - ? `${formatUsd(usdSpent)} used this period` - : "No usage yet this period"} -

-
- + +
+
+

+ Auto reload +

+ + {autoTopUpEnabled ? "on" : "off"} + +
+ +
+

+ Auto reload is {autoTopUpEnabled ? "enabled" : "disabled"} +

+ +
+ + {!hasPaymentMethod && !activeAutoTopUp?.enabled ? ( +

+ Save a card in Manage Billing to enable automatic reloads. +

+ ) : null} + +
- +
+ + { + const value = Number.parseFloat(event.target.value) + setAutoTopUpThreshold(Number.isFinite(value) ? value : 0) + }} + type="number" + value={ + Number.isFinite(autoTopUpThreshold) + ? autoTopUpThreshold + : "" + } + className="h-10 rounded-[8px] border border-white/10 bg-[#080B10] px-3 text-[13px] text-[#FAFAFA] outline-none focus:border-[#0054AD] disabled:opacity-60" + /> +
+
+ + { + const value = Number.parseFloat(event.target.value) + setAutoTopUpAmount(Number.isFinite(value) ? value : 0) + }} + type="number" + value={ + Number.isFinite(autoTopUpAmount) ? autoTopUpAmount : "" + } + className="h-10 rounded-[8px] border border-white/10 bg-[#080B10] px-3 text-[13px] text-[#FAFAFA] outline-none focus:border-[#0054AD] disabled:opacity-60" + /> +
+
- - -
-
-

- Buy Credits -

-

- Add USD to your balance for metered usage. -

-
- - - -
- -
-
-

- Choose an amount -

- { - setTopUpAmount(value) - setCustomTopUpAmount("") - }} - disabled={topUpPendingAmount !== null} - /> -
- - - setCustomTopUpAmount(event.target.value) - } - placeholder="e.g. 75" - type="number" - value={customTopUpAmount} - className="h-11 rounded-[10px] border border-white/10 bg-[#080B10] px-3 text-[14px] text-[#FAFAFA] outline-none placeholder:text-[#737373] focus:border-[#0054AD]" - /> -
-
- -
- -
-
-

- Auto reload -

- - {autoTopUpEnabled ? "on" : "off"} - -
- -
-

- Auto reload is{" "} - {autoTopUpEnabled ? "enabled" : "disabled"} -

- -
- - {!hasPaymentMethod && !activeAutoTopUp?.enabled ? ( -

- Save a card in Manage Billing to enable automatic - reloads. -

- ) : null} - -
-
- - { - const value = Number.parseFloat( - event.target.value, - ) - setAutoTopUpThreshold( - Number.isFinite(value) ? value : 0, - ) - }} - type="number" - value={ - Number.isFinite(autoTopUpThreshold) - ? autoTopUpThreshold - : "" - } - className="h-10 rounded-[8px] border border-white/10 bg-[#080B10] px-3 text-[13px] text-[#FAFAFA] outline-none focus:border-[#0054AD] disabled:opacity-60" - /> -
-
- - { - const value = Number.parseFloat( - event.target.value, - ) - setAutoTopUpAmount( - Number.isFinite(value) ? value : 0, - ) - }} - type="number" - value={ - Number.isFinite(autoTopUpAmount) - ? autoTopUpAmount - : "" - } - className="h-10 rounded-[8px] border border-white/10 bg-[#080B10] px-3 text-[13px] text-[#FAFAFA] outline-none focus:border-[#0054AD] disabled:opacity-60" - /> -
-
- -
-
-
+
+
+
- + - {!isAdmin ? ( -

- Only owners/admins can purchase credits. -

- ) : null} -
- -
- -
+ {!isAdmin ? ( +

+ Only owners/admins can purchase credits. +

+ ) : null}
- + +
- {hasPaidPlan ? ( + {hasPaidPlan ? ( +
+ Credits

- Top-up credits{" "} - - (optional) - + Top-up credits

- {creditRemaining > 0 ? "Add more" : "Add credits"} + {creditRemaining > 0 ? "Add more" : "Buy credits"}

- ) : null} -
+
+ ) : null}
Invoice history diff --git a/apps/web/components/settings/org-context.tsx b/apps/web/components/settings/org-context.tsx index dac97f7e7..8c17ed01d 100644 --- a/apps/web/components/settings/org-context.tsx +++ b/apps/web/components/settings/org-context.tsx @@ -94,7 +94,7 @@ function PillButton({ children: React.ReactNode onClick: () => void disabled?: boolean - variant?: "default" | "danger" | "primary" + variant?: "default" | "ghost" | "primary" }) { return (