Skip to content

Commit 214fb2d

Browse files
charlietlambcharlietlamb
committed
refactor(dashboard): one basis select shared by the alert forms
1 parent c100e27 commit 214fb2d

5 files changed

Lines changed: 76 additions & 70 deletions

File tree

‎vite/src/components/billing-controls/UsageAlertBasisSelect.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import type { UsageAlertBasis } from "@autumn/shared";
2+
import {
3+
FormLabel,
4+
Select,
5+
SelectContent,
6+
SelectItem,
7+
SelectTrigger,
8+
SelectValue,
9+
} from "@autumn/ui";
10+
import {
11+
USAGE_ALERT_BASIS_DESCRIPTIONS,
12+
type UsageAlertBasisOption,
13+
} from "./usageAlertBasisOptions";
14+
15+
export const UsageAlertBasisSelect = ({
16+
value,
17+
options,
18+
onChange,
19+
}: {
20+
value: UsageAlertBasis;
21+
options: readonly UsageAlertBasisOption[];
22+
onChange: (basis: UsageAlertBasis) => void;
23+
}) => (
24+
<div>
25+
<FormLabel>Measured against</FormLabel>
26+
<Select
27+
value={value}
28+
onValueChange={(next) => onChange(next as UsageAlertBasis)}
29+
items={Object.fromEntries(
30+
options.map((option) => [option.value, option.label]),
31+
)}
32+
>
33+
<SelectTrigger className="w-full">
34+
<SelectValue />
35+
</SelectTrigger>
36+
<SelectContent>
37+
{options.map((option) => (
38+
<SelectItem key={option.value} value={option.value}>
39+
{option.label}
40+
</SelectItem>
41+
))}
42+
</SelectContent>
43+
</Select>
44+
<p className="mt-1 text-tertiary-foreground text-xs">
45+
{USAGE_ALERT_BASIS_DESCRIPTIONS[value]}
46+
</p>
47+
</div>
48+
);

‎vite/src/components/billing-controls/usageAlertBasisOptions.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { UsageAlertBasis } from "@autumn/shared";
1+
import { USAGE_ALERT_BASES, type UsageAlertBasis } from "@autumn/shared";
22

33
export const USAGE_ALERT_BASIS_LABELS: Record<UsageAlertBasis, string> = {
44
balance: "Total balance",
@@ -15,10 +15,16 @@ export const USAGE_ALERT_BASIS_DESCRIPTIONS: Record<UsageAlertBasis, string> = {
1515
"The cap of the usage limit with the same feature and conditions.",
1616
};
1717

18-
export const BALANCE_BASIS_OPTIONS = (
19-
["balance", "included", "recurring"] as const
20-
).map((basis) => ({ value: basis, label: USAGE_ALERT_BASIS_LABELS[basis] }));
18+
export type UsageAlertBasisOption = { value: UsageAlertBasis; label: string };
2119

22-
export const ALL_BASIS_OPTIONS = (
23-
["balance", "included", "recurring", "usage_limit"] as const
24-
).map((basis) => ({ value: basis, label: USAGE_ALERT_BASIS_LABELS[basis] }));
20+
const toOption = (basis: UsageAlertBasis): UsageAlertBasisOption => ({
21+
value: basis,
22+
label: USAGE_ALERT_BASIS_LABELS[basis],
23+
});
24+
25+
export const ALL_BASIS_OPTIONS: UsageAlertBasisOption[] =
26+
USAGE_ALERT_BASES.map(toOption);
27+
28+
/** Org alerts have no single cap to measure, so usage_limit is not offered. */
29+
export const BALANCE_BASIS_OPTIONS: UsageAlertBasisOption[] =
30+
USAGE_ALERT_BASES.filter((basis) => basis !== "usage_limit").map(toOption);

‎vite/src/views/customers2/components/sheets/BillingUsageAlertSheet.tsx‎

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,8 @@ import {
2323
} from "@autumn/ui";
2424
import { useMemo, useState } from "react";
2525
import { toast } from "sonner";
26-
import {
27-
ALL_BASIS_OPTIONS,
28-
USAGE_ALERT_BASIS_DESCRIPTIONS,
29-
} from "@/components/billing-controls/usageAlertBasisOptions";
26+
import { UsageAlertBasisSelect } from "@/components/billing-controls/UsageAlertBasisSelect";
27+
import { ALL_BASIS_OPTIONS } from "@/components/billing-controls/usageAlertBasisOptions";
3028
import { FeatureSearchDropdown } from "@/components/v2/dropdowns/FeatureSearchDropdown";
3129
import {
3230
LayoutGroup,
@@ -334,35 +332,11 @@ export function BillingUsageAlertSheet() {
334332
</Select>
335333
</div>
336334

337-
<div>
338-
<FormLabel>Measured against</FormLabel>
339-
<Select
340-
value={basis}
341-
onValueChange={(value) =>
342-
setBasis(value as DbUsageAlert["basis"])
343-
}
344-
items={Object.fromEntries(
345-
ALL_BASIS_OPTIONS.map((option) => [
346-
option.value,
347-
option.label,
348-
]),
349-
)}
350-
>
351-
<SelectTrigger className="w-full">
352-
<SelectValue />
353-
</SelectTrigger>
354-
<SelectContent>
355-
{ALL_BASIS_OPTIONS.map((option) => (
356-
<SelectItem key={option.value} value={option.value}>
357-
{option.label}
358-
</SelectItem>
359-
))}
360-
</SelectContent>
361-
</Select>
362-
<p className="mt-1 text-tertiary-foreground text-xs">
363-
{USAGE_ALERT_BASIS_DESCRIPTIONS[basis]}
364-
</p>
365-
</div>
335+
<UsageAlertBasisSelect
336+
value={basis}
337+
options={ALL_BASIS_OPTIONS}
338+
onChange={setBasis}
339+
/>
366340

367341
{measuresUsageLimit && (
368342
<div>

‎vite/src/views/products/plan/components/edit-plan-details/PlanBillingControlsSection.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,6 @@ const USAGE_INTERVAL_OPTIONS: SelectOption[] = [
7676
{ value: ResetInterval.Year, label: "Year" },
7777
];
7878

79-
const ALERT_BASIS_OPTIONS: SelectOption[] = ALL_BASIS_OPTIONS;
80-
8179
const THRESHOLD_TYPE_OPTIONS: SelectOption[] = [
8280
{ value: "usage", label: "Absolute usage" },
8381
{ value: "usage_percentage", label: "% used of allowance" },
@@ -489,7 +487,7 @@ function UsageAlertFields({ form }: { form: UsePlanBillingControlForm }) {
489487
name="alert_basis"
490488
label="Measured against"
491489
placeholder="Measured against"
492-
options={ALERT_BASIS_OPTIONS}
490+
options={ALL_BASIS_OPTIONS}
493491
/>
494492
</div>
495493
);

‎vite/src/views/settings/sections/components/OrgUsageAlertDialog.tsx‎

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,8 @@ import {
1717
} from "@autumn/ui";
1818
import { useState } from "react";
1919
import { toast } from "sonner";
20-
import {
21-
BALANCE_BASIS_OPTIONS,
22-
USAGE_ALERT_BASIS_DESCRIPTIONS,
23-
} from "@/components/billing-controls/usageAlertBasisOptions";
20+
import { UsageAlertBasisSelect } from "@/components/billing-controls/UsageAlertBasisSelect";
21+
import { BALANCE_BASIS_OPTIONS } from "@/components/billing-controls/usageAlertBasisOptions";
2422
import { FeatureSearchDropdown } from "@/components/v2/dropdowns/FeatureSearchDropdown";
2523

2624
type ThresholdType = DbUsageAlert["threshold_type"];
@@ -150,29 +148,11 @@ export const OrgUsageAlertDialog = ({
150148
</Select>
151149
</div>
152150

153-
<div>
154-
<FormLabel>Measured against</FormLabel>
155-
<Select
156-
value={draft.basis ?? "balance"}
157-
onValueChange={(value) =>
158-
updateDraft({ basis: value as DbUsageAlert["basis"] })
159-
}
160-
>
161-
<SelectTrigger className="w-full">
162-
<SelectValue />
163-
</SelectTrigger>
164-
<SelectContent>
165-
{BALANCE_BASIS_OPTIONS.map((option) => (
166-
<SelectItem key={option.value} value={option.value}>
167-
{option.label}
168-
</SelectItem>
169-
))}
170-
</SelectContent>
171-
</Select>
172-
<p className="mt-1 text-tertiary-foreground text-xs">
173-
{USAGE_ALERT_BASIS_DESCRIPTIONS[draft.basis ?? "balance"]}
174-
</p>
175-
</div>
151+
<UsageAlertBasisSelect
152+
value={draft.basis ?? "balance"}
153+
options={BALANCE_BASIS_OPTIONS}
154+
onChange={(basis) => updateDraft({ basis })}
155+
/>
176156

177157
<div>
178158
<FormLabel>

0 commit comments

Comments
 (0)