minor ux improvement

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx

@@ -9,6 +9,7 @@ import {
   cn,
   Switch,
   toast,
+  Tooltip,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { isOrgAdminRole } from '@sim/platform-authz/predicates'
@@ -18,7 +19,12 @@ import { useParams, useRouter } from 'next/navigation'
 import { useSession, useSubscription } from '@/lib/auth/auth-client'
 import { ON_DEMAND_UNLIMITED } from '@/lib/billing/constants'
 import { CREDIT_MULTIPLIER } from '@/lib/billing/credits/conversion'
-import { getCoveredUsage, getIsOnDemandActive, getOnDemandOffLimit } from '@/lib/billing/on-demand'
+import {
+  getCoveredUsage,
+  getIsOnDemandActive,
+  getOnDemandOffLimit,
+  isOnDemandOffDisabled,
+} from '@/lib/billing/on-demand'
 import {
   getDisplayPlanName,
   getPlanTierCredits,
@@ -223,6 +229,19 @@ export function Billing() {
     covered,
   })
 
+  /**
+   * When usage already sits above `covered`, turning on-demand off would re-cap
+   * the limit at current usage and the switch would bounce straight back on
+   * (see `getOnDemandOffLimit`). Disable it and explain why via tooltip instead
+   * of accepting a no-op click; it re-enables once usage drops back to/below
+   * covered (e.g. the next billing reset).
+   */
+  const onDemandLockedOn = isOnDemandOffDisabled({
+    isOnDemandActive,
+    effectiveCurrentUsage,
+    covered,
+  })
+
   const permissions = getSubscriptionPermissions(
     {
       isFree: subscription.isFree,
@@ -452,11 +471,28 @@ export function Billing() {
             <span className='text-[var(--text-body)] text-small'>
               Allow usage to go past included usage
             </span>
-            <Switch
-              checked={isOnDemandActive}
-              disabled={isTogglingOnDemand || !canManageBilling}
-              onCheckedChange={handleToggleOnDemand}
-            />
+            {onDemandLockedOn ? (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Switch checked disabled onCheckedChange={handleToggleOnDemand} />
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content className='max-w-[260px]'>
+                  <p>
+                    {
+                      "Your usage is above your plan's included amount, so on-demand can't be turned off yet. It turns off once usage drops below it — at the latest when your billing period resets."
+                    }
+                  </p>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            ) : (
+              <Switch
+                checked={isOnDemandActive}
+                disabled={isTogglingOnDemand || !canManageBilling}
+                onCheckedChange={handleToggleOnDemand}
+              />
+            )}
           </div>
         </SettingsSection>
       )}

apps/sim/lib/billing/on-demand.test.ts

@@ -9,6 +9,7 @@ import {
   getIsOnDemandActive,
   getOnDemandOffLimit,
   getPooledCreditsRemaining,
+  isOnDemandOffDisabled,
 } from '@/lib/billing/on-demand'
 
 describe('getPooledCreditsRemaining', () => {
@@ -130,3 +131,27 @@ describe('getOnDemandOffLimit', () => {
     expect(getOnDemandOffLimit(120, 120)).toBe(120)
   })
 })
+
+describe('isOnDemandOffDisabled', () => {
+  it('disables the toggle when on-demand is on and usage is above covered', () => {
+    // Turning off here would re-cap at usage (150) and bounce back on, so lock it.
+    expect(
+      isOnDemandOffDisabled({ isOnDemandActive: true, effectiveCurrentUsage: 150, covered: 120 })
+    ).toBe(true)
+  })
+
+  it('allows turning off when usage is at or below covered', () => {
+    expect(
+      isOnDemandOffDisabled({ isOnDemandActive: true, effectiveCurrentUsage: 120, covered: 120 })
+    ).toBe(false)
+    expect(
+      isOnDemandOffDisabled({ isOnDemandActive: true, effectiveCurrentUsage: 62, covered: 120 })
+    ).toBe(false)
+  })
+
+  it('never disables when on-demand is already off (turning on stays allowed)', () => {
+    expect(
+      isOnDemandOffDisabled({ isOnDemandActive: false, effectiveCurrentUsage: 150, covered: 120 })
+    ).toBe(false)
+  })
+})

apps/sim/lib/billing/on-demand.ts

@@ -63,3 +63,20 @@ export function getIsOnDemandActive(params: {
 export function getOnDemandOffLimit(currentUsage: number, covered: number): number {
   return Math.max(currentUsage, covered)
 }
+
+/**
+ * Whether the on-demand toggle should render disabled: it is on, but usage has
+ * already passed the covered ceiling, so turning it off would only re-cap the
+ * limit at current usage ({@link getOnDemandOffLimit}) and the control would
+ * spring straight back on. The UI disables it with an explanatory tooltip rather
+ * than accepting a no-op click. The state clears on its own once usage drops back
+ * to or below covered (e.g. at the next billing reset).
+ */
+export function isOnDemandOffDisabled(params: {
+  isOnDemandActive: boolean
+  effectiveCurrentUsage: number
+  covered: number
+}): boolean {
+  const { isOnDemandActive, effectiveCurrentUsage, covered } = params
+  return isOnDemandActive && effectiveCurrentUsage > covered
+}