Merge pull request #1140 from useautumn/frontend-customer-cleanup

Frontend customer cleanup

Author: ay-rod

server/src/internal/balances/updateBalance/runRedisUpdateBalanceV2.ts

@@ -70,18 +70,19 @@ export const runRedisUpdateBalanceV2 = async ({
 		throw error;
 	}
 
-	const { updates } = result;
+	const { updates, rolloverUpdates } = result;
 
-	// Sync to Postgres (update balance doesn't touch rollovers)
 	const modifiedCusEntIds = deductionUpdatesToModifiedIds({ updates });
+	const modifiedRolloverIds = Object.keys(rolloverUpdates);
 
-	if (modifiedCusEntIds.length > 0) {
+	if (modifiedCusEntIds.length > 0 || modifiedRolloverIds.length > 0) {
 		await syncItemV3({
 			payload: {
 				customerId,
 				orgId: org.id,
 				env,
 				cusEntIds: modifiedCusEntIds,
+				rolloverIds: modifiedRolloverIds,
 				region: currentRegion,
 				timestamp: Date.now(),
 			},

vite/src/views/customers2/components/CustomerBillingControlsSection.tsx

@@ -1,5 +1,6 @@
 import type {
 	AutoTopup,
+	DbOverageAllowed,
 	DbSpendLimit,
 	DbUsageAlert,
 	Entity,
@@ -150,7 +151,9 @@ const UsageAlertRow = ({
 				})}
 			</span>
 			{usageAlert.name && (
-				<span className="truncate text-xs text-t3 font-mono ml-4">{usageAlert.name}</span>
+				<span className="truncate text-xs text-t3 font-mono ml-4">
+					{usageAlert.name}
+				</span>
 			)}
 			<div className="ml-auto flex items-center gap-1.5 shrink-0">
 				<Pill>At: {thresholdLabel}</Pill>
@@ -164,6 +167,24 @@ const UsageAlertRow = ({
 	);
 };
 
+const OverageAllowedRow = ({
+	overageAllowed,
+	featureNameById,
+}: {
+	overageAllowed: DbOverageAllowed;
+	featureNameById: Map<string, string>;
+}) => (
+	<div className={rowClassName}>
+		<StatusPill enabled={overageAllowed.enabled} />
+		<span className="truncate text-sm text-t1 font-medium">
+			{getFeatureLabel({
+				featureId: overageAllowed.feature_id,
+				featureNameById,
+			})}
+		</span>
+	</div>
+);
+
 export function CustomerBillingControlsSection() {
 	const { customer, features, isLoading } = useCusQuery();
 	const { entityId } = useCustomerContext();
@@ -194,15 +215,22 @@ export function CustomerBillingControlsSection() {
 	const usageAlerts = selectedEntity
 		? (selectedEntity.usage_alerts ?? [])
 		: (fullCustomer?.usage_alerts ?? []);
+	const overageAllowed = selectedEntity
+		? (selectedEntity.overage_allowed ?? [])
+		: (fullCustomer?.overage_allowed ?? []);
 
 	const hasAnyControls =
-		autoTopups.length > 0 || spendLimits.length > 0 || usageAlerts.length > 0;
+		autoTopups.length > 0 ||
+		spendLimits.length > 0 ||
+		usageAlerts.length > 0 ||
+		overageAllowed.length > 0;
 
 	const entitiesWithControlsCount =
 		fullCustomer?.entities?.filter(
 			(entity: Entity) =>
 				(entity.spend_limits?.length ?? 0) > 0 ||
-				(entity.usage_alerts?.length ?? 0) > 0,
+				(entity.usage_alerts?.length ?? 0) > 0 ||
+				(entity.overage_allowed?.length ?? 0) > 0,
 		).length ?? 0;
 
 	if (!isLoading && !hasAnyControls && selectedEntity) return null;
@@ -216,11 +244,7 @@ export function CustomerBillingControlsSection() {
 		<Table.Container>
 			<Table.Toolbar>
 				<Table.Heading>
-					<GavelIcon
-						size={16}
-						weight="fill"
-						className="text-subtle"
-					/>
+					<GavelIcon size={16} weight="fill" className="text-subtle" />
 					Billing controls
 				</Table.Heading>
 			</Table.Toolbar>
@@ -232,11 +256,7 @@ export function CustomerBillingControlsSection() {
 			) : (
 				<div className="flex flex-col gap-4">
 					{autoTopups.length > 0 && (
-						<BillingControlsGroup
-							title="Auto top-ups"
-							emptyText=""
-							hasItems
-						>
+						<BillingControlsGroup title="Auto top-ups" emptyText="" hasItems>
 							<div className="flex flex-col gap-1.5">
 								{autoTopups.map((autoTopup) => (
 									<AutoTopupRow
@@ -250,11 +270,7 @@ export function CustomerBillingControlsSection() {
 					)}
 
 					{spendLimits.length > 0 && (
-						<BillingControlsGroup
-							title="Spend limits"
-							emptyText=""
-							hasItems
-						>
+						<BillingControlsGroup title="Spend limits" emptyText="" hasItems>
 							<div className="flex flex-col gap-1.5">
 								{spendLimits.map((spendLimit, index) => (
 									<SpendLimitRow
@@ -268,11 +284,7 @@ export function CustomerBillingControlsSection() {
 					)}
 
 					{usageAlerts.length > 0 && (
-						<BillingControlsGroup
-							title="Usage alerts"
-							emptyText=""
-							hasItems
-						>
+						<BillingControlsGroup title="Usage alerts" emptyText="" hasItems>
 							<div className="flex flex-col gap-1.5">
 								{usageAlerts.map((usageAlert, index) => (
 									<UsageAlertRow
@@ -284,6 +296,20 @@ export function CustomerBillingControlsSection() {
 							</div>
 						</BillingControlsGroup>
 					)}
+
+					{overageAllowed.length > 0 && (
+						<BillingControlsGroup title="Overage enabled" emptyText="" hasItems>
+							<div className="flex flex-col gap-1.5">
+								{overageAllowed.map((item) => (
+									<OverageAllowedRow
+										key={`overage-allowed-${item.feature_id}`}
+										overageAllowed={item}
+										featureNameById={featureNameById}
+									/>
+								))}
+							</div>
+						</BillingControlsGroup>
+					)}
 				</div>
 			)}
 		</Table.Container>

vite/src/views/customers2/components/sheets/BalanceEditSheet.tsx

@@ -8,6 +8,7 @@ import {
 	isUnlimitedCusEnt,
 	numberWithCommas,
 } from "@autumn/shared";
+import { ClockCountdownIcon } from "@phosphor-icons/react";
 
 import { useStore } from "@tanstack/react-form";
 import { useState } from "react";
@@ -129,6 +130,7 @@ function UnlimitedBalanceInfo({
 					isUnlimited
 				/>
 			</SheetSection>
+			<RolloversSection selectedCusEnt={selectedCusEnt} />
 		</div>
 	);
 }
@@ -166,6 +168,8 @@ function BalanceEditForm({
 				/>
 			</SheetSection>
 
+			<RolloversSection selectedCusEnt={selectedCusEnt} entityId={entityId} />
+
 			<SheetSection withSeparator={false}>
 				<BalanceFields
 					form={form}
@@ -186,6 +190,61 @@ function BalanceEditForm({
 	);
 }
 
+/* ─── Rollovers Section ─── */
+
+function RolloversSection({
+	selectedCusEnt,
+	entityId,
+}: {
+	selectedCusEnt: FullCustomerEntitlement;
+	entityId?: string | null;
+}) {
+	const rolloverFields = getRolloverFields({
+		cusEnt: selectedCusEnt,
+		entityId: entityId ?? undefined,
+	});
+
+	if (!rolloverFields || rolloverFields.rollovers.length === 0) return null;
+
+	const { rollovers } = rolloverFields;
+
+	return (
+		<SheetSection withSeparator>
+			<div className="flex flex-col gap-2">
+				<div className="flex items-center gap-1.5 text-t3 text-sm font-medium">
+					<ClockCountdownIcon size={14} weight="duotone" />
+					Rollovers
+				</div>
+				<div className="flex flex-col gap-1.5">
+					{rollovers.map((rollover, index) => {
+						const expiryText = rollover.expires_at
+							? `${formatUnixToDateTime(rollover.expires_at, { withYear: true }).date}, ${formatUnixToDateTime(rollover.expires_at).time}`
+							: "No expiry";
+
+						return (
+							<div
+								key={`rollover-${index}-${rollover.expires_at}`}
+								className="flex items-center justify-between text-sm px-2 py-0.5 rounded-md"
+							>
+								<span className="text-t1 font-medium">
+									+{numberWithCommas(rollover.balance)}
+								</span>
+								<span className="text-t3 text-xs">
+									{rollover.expires_at ? `Expires ${expiryText}` : expiryText}
+								</span>
+							</div>
+						);
+					})}
+				</div>
+				<div className="flex items-center justify-between text-xs text-t4 px-2">
+					<span>Total rollover</span>
+					<span>+{numberWithCommas(rolloverFields.balance)}</span>
+				</div>
+			</div>
+		</SheetSection>
+	);
+}
+
 /* ─── Entitlement Info Rows ─── */
 
 function EntitlementInfoRows({
@@ -328,9 +387,6 @@ function SetBalanceFields({
 	const balance = useStore(form.store, (s) => s.values.balance);
 	const gpb = useStore(form.store, (s) => s.values.grantedAndPurchasedBalance);
 
-	const rolloverBalance =
-		getRolloverFields({ cusEnt: selectedCusEnt })?.balance ?? 0;
-
 	return (
 		<div className="flex flex-col gap-3">
 			<div className="flex items-end gap-2 w-full">
@@ -368,13 +424,11 @@ function SetBalanceFields({
 					)}
 					<div className="text-t4 text-sm truncate mb-1 flex justify-center max-w-full w-full">
 						<span className="truncate">
-							{numberWithCommas((gpb ?? 0) - (balance ?? 0))} used
+							{numberWithCommas(
+								(gpb ?? 0) + form.rolloverBalance - (balance ?? 0),
+							)}{" "}
+							used
 						</span>
-						{/* {rolloverBalance > 0 && (
-							<span className="truncate">
-								+{numberWithCommas(rolloverBalance)} rollover
-							</span>
-						)} */}
 					</div>
 				</div>
 			</div>
@@ -503,11 +557,14 @@ function SubmitButton({
 						prepaidAllowance: form.prepaidAllowance,
 					});
 
+					const targetBalance =
+						parseFloat(String(values.balance)) - form.rolloverBalance;
+
 					promises.push(
 						axiosInstance.post("/v1/balances/update", {
 							customer_id: customer.id || customer.internal_id,
 							feature_id: featureId,
-							current_balance: parseFloat(String(values.balance)),
+							current_balance: targetBalance,
 							included_grant: grantedBalanceInput ?? undefined,
 							granted_balance: grantedBalanceInput ?? undefined,
 							customer_entitlement_id: selectedCusEnt.id,

vite/src/views/customers2/components/sheets/SubscriptionDetailSheet.tsx

@@ -3,6 +3,7 @@ import {
 	type Entity,
 	isCustomerProductTrialing,
 	type ProductItem,
+	UsageModel,
 } from "@autumn/shared";
 import {
 	ArrowSquareOutIcon,
@@ -152,22 +153,24 @@ export function SubscriptionDetailSheet() {
 							</div>
 						)}
 
-						<div className="space-y-2">
-							{productV2.items.map((item: ProductItem, index: number) => {
-								if (!item.feature_id) return null;
-								const prepaidQuantity =
-									prepaidDisplayQuantities[item.feature_id] ?? null;
+					<div className="space-y-2">
+						{productV2.items.map((item: ProductItem, index: number) => {
+							if (!item.feature_id) return null;
+							const prepaidQuantity =
+								item.usage_model === UsageModel.Prepaid
+									? (prepaidDisplayQuantities[item.feature_id] ?? null)
+									: null;
 
-								return (
-									<PlanFeatureRow
-										key={item.feature_id || item.price_id || index}
-										item={item}
-										index={index}
-										readOnly={true}
-										prepaidQuantity={prepaidQuantity}
-									/>
-								);
-							})}
+							return (
+								<PlanFeatureRow
+									key={item.feature_id || item.price_id || index}
+									item={item}
+									index={index}
+									readOnly={true}
+									prepaidQuantity={prepaidQuantity}
+								/>
+							);
+						})}
 						</div>
 					</SheetSection>
 				)}

vite/src/views/customers2/components/sheets/useBalanceEditForm.ts

@@ -3,6 +3,7 @@ import {
 	cusEntsToGrantedBalance,
 	cusEntsToPrepaidQuantity,
 	type FullCusEntWithFullCusProduct,
+	getRolloverFields,
 	nullish,
 } from "@autumn/shared";
 import { useAppForm } from "@/hooks/form/form";
@@ -26,7 +27,7 @@ export function useBalanceEditForm({
 	const balance = cusEntsToBalance({
 		cusEnts: [selectedCusEnt],
 		entityId: entityId ?? undefined,
-		withRollovers: false,
+		withRollovers: true,
 	});
 
 	const grantedBalance = cusEntsToGrantedBalance({
@@ -36,6 +37,12 @@ export function useBalanceEditForm({
 
 	const grantedAndPurchasedBalance = grantedBalance + prepaidAllowance;
 
+	const rolloverBalance =
+		getRolloverFields({
+			cusEnt: selectedCusEnt,
+			entityId: entityId ?? undefined,
+		})?.balance ?? 0;
+
 	const form = useAppForm({
 		defaultValues: {
 			mode: "set",
@@ -49,7 +56,7 @@ export function useBalanceEditForm({
 		},
 	});
 
-	return Object.assign(form, { prepaidAllowance });
+	return Object.assign(form, { prepaidAllowance, rolloverBalance });
 }
 
 export type BalanceEditFormInstance = ReturnType<typeof useBalanceEditForm>;

vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTableColumns.tsx

@@ -189,6 +189,8 @@ function SubRowUsageCell({
 		return <span className="text-t4">Unlimited</span>;
 	}
 
+	
+
 	const { balance, allowance, rolloverBalance } = getIndividualEntValues({
 		ent,
 		entityId,