466 lines
17 KiB
TypeScript
466 lines
17 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Button } from "@workspace/ui/components/button";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@workspace/ui/components/form";
|
|
import { ScrollArea } from "@workspace/ui/components/scroll-area";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetFooter,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@workspace/ui/components/sheet";
|
|
import { Combobox } from "@workspace/ui/composed/combobox";
|
|
import { DatePicker } from "@workspace/ui/composed/date-picker";
|
|
import { ArrayInput } from "@workspace/ui/composed/dynamic-inputs";
|
|
import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
|
|
import { Icon } from "@workspace/ui/composed/icon";
|
|
import { unitConversion } from "@workspace/ui/utils/unit-conversions";
|
|
import { type KeyboardEvent, type ReactNode, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
import { z } from "zod";
|
|
import { useSubscribe } from "@/stores/subscribe";
|
|
|
|
interface Props {
|
|
trigger: ReactNode;
|
|
title: string;
|
|
loading?: boolean;
|
|
initialData?: API.UserSubscribe;
|
|
onSubmit: (values: SubscriptionFormValues) => Promise<boolean>;
|
|
}
|
|
|
|
type SubscriptionTrafficLimitRule = API.UserSubscribeTrafficLimitRule;
|
|
|
|
const defaultLimitRule: SubscriptionTrafficLimitRule = {
|
|
stat_type: "day",
|
|
stat_value: 1,
|
|
traffic_usage: 0,
|
|
speed_limit: 0,
|
|
};
|
|
|
|
const formSchema = z.object({
|
|
subscribe_id: z.number().optional(),
|
|
traffic: z.number().min(0).optional(),
|
|
speed_limit: z.number().min(0).optional(),
|
|
device_limit: z.number().min(0).optional(),
|
|
expired_at: z.number().nullish().optional(),
|
|
upload: z.number().min(0).optional(),
|
|
download: z.number().min(0).optional(),
|
|
id: z.number().optional(),
|
|
traffic_limit: z
|
|
.array(
|
|
z.object({
|
|
stat_type: z.string(),
|
|
stat_value: z.number().int().min(1),
|
|
traffic_usage: z.number().min(0),
|
|
speed_limit: z.number().min(0),
|
|
})
|
|
)
|
|
.optional(),
|
|
});
|
|
|
|
type SubscriptionFormValues = z.infer<typeof formSchema>;
|
|
|
|
export type { SubscriptionFormValues };
|
|
|
|
const normalizeLimitRule = (
|
|
item: SubscriptionTrafficLimitRule
|
|
): SubscriptionTrafficLimitRule => ({
|
|
stat_type: item.stat_type || "day",
|
|
stat_value: Math.max(1, Math.floor(Number(item.stat_value) || 1)),
|
|
traffic_usage: Math.max(0, Number(item.traffic_usage) || 0),
|
|
speed_limit: Math.max(0, Number(item.speed_limit) || 0),
|
|
});
|
|
|
|
export function SubscriptionForm({
|
|
trigger,
|
|
title,
|
|
loading,
|
|
initialData,
|
|
onSubmit,
|
|
}: Props) {
|
|
const { t } = useTranslation("user");
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const form = useForm<SubscriptionFormValues>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
subscribe_id: initialData?.subscribe_id || 0,
|
|
traffic: initialData?.traffic || 0,
|
|
speed_limit: initialData?.speed_limit || 0,
|
|
device_limit: initialData?.device_limit || 0,
|
|
traffic_limit: initialData?.traffic_limit || [],
|
|
upload: initialData?.upload || 0,
|
|
download: initialData?.download || 0,
|
|
expired_at: initialData?.expire_time || 0,
|
|
...(initialData && { id: initialData.id }),
|
|
},
|
|
});
|
|
|
|
const handleSubmit = async (values: SubscriptionFormValues) => {
|
|
const success = await onSubmit(values);
|
|
if (success) {
|
|
setOpen(false);
|
|
form.reset();
|
|
}
|
|
};
|
|
|
|
const { subscribes } = useSubscribe();
|
|
|
|
return (
|
|
<Sheet onOpenChange={setOpen} open={open}>
|
|
<SheetTrigger asChild>
|
|
<Button
|
|
onClick={() => {
|
|
form.reset();
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
{trigger}
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right">
|
|
<SheetHeader>
|
|
<SheetTitle>{title}</SheetTitle>
|
|
</SheetHeader>
|
|
<ScrollArea className="h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-4">
|
|
<div className="pr-4">
|
|
<Form {...form}>
|
|
<form
|
|
className="mt-4 space-y-4"
|
|
onSubmit={form.handleSubmit(handleSubmit)}
|
|
>
|
|
<FormField
|
|
control={form.control}
|
|
name="subscribe_id"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("subscription", "Subscription")}</FormLabel>
|
|
<FormControl>
|
|
<Combobox<number, false>
|
|
onChange={(value) => {
|
|
form.setValue(field.name, value);
|
|
}}
|
|
options={subscribes?.map((item) => ({
|
|
value: item.id!,
|
|
label: item.name!,
|
|
}))}
|
|
placeholder="Select Subscription"
|
|
value={field.value}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="traffic"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>
|
|
{t("trafficLimit", "Traffic Limit")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<EnhancedInput
|
|
min={0}
|
|
placeholder={t("unlimited", "Unlimited")}
|
|
type="number"
|
|
{...field}
|
|
formatInput={(value) =>
|
|
unitConversion("bytesToGb", value)
|
|
}
|
|
formatOutput={(value) =>
|
|
unitConversion("gbToBytes", value)
|
|
}
|
|
onValueChange={(value) => {
|
|
form.setValue(field.name, value as number);
|
|
}}
|
|
suffix="GB"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="speed_limit"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("speedLimit", "Speed Limit")}</FormLabel>
|
|
<FormControl>
|
|
<EnhancedInput
|
|
min={0}
|
|
placeholder={t("unlimited", "Unlimited")}
|
|
type="number"
|
|
{...field}
|
|
onValueChange={(value) => {
|
|
form.setValue(field.name, value as number);
|
|
}}
|
|
suffix="Mbps"
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t(
|
|
"userSpeedLimitDescription",
|
|
"Set to 0 to use the subscription default speed limit."
|
|
)}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="device_limit"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("deviceLimit", "Device Limit")}</FormLabel>
|
|
<FormControl>
|
|
<EnhancedInput
|
|
min={0}
|
|
placeholder={t("unlimited", "Unlimited")}
|
|
step={1}
|
|
type="number"
|
|
{...field}
|
|
onValueChange={(value) => {
|
|
form.setValue(field.name, value as number);
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="upload"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>
|
|
{t("uploadTraffic", "Upload Traffic")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<EnhancedInput
|
|
min={0}
|
|
placeholder="0"
|
|
type="number"
|
|
{...field}
|
|
formatInput={(value) =>
|
|
unitConversion("bytesToGb", value)
|
|
}
|
|
formatOutput={(value) =>
|
|
unitConversion("gbToBytes", value)
|
|
}
|
|
onValueChange={(value) => {
|
|
form.setValue(field.name, value as number);
|
|
}}
|
|
suffix="GB"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="download"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>
|
|
{t("downloadTraffic", "Download Traffic")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<EnhancedInput
|
|
min={0}
|
|
placeholder="0"
|
|
type="number"
|
|
{...field}
|
|
formatInput={(value) =>
|
|
unitConversion("bytesToGb", value)
|
|
}
|
|
formatOutput={(value) =>
|
|
unitConversion("gbToBytes", value)
|
|
}
|
|
onValueChange={(value) => {
|
|
form.setValue(field.name, value as number);
|
|
}}
|
|
suffix="GB"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="traffic_limit"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>
|
|
{t("trafficLimitRules", "Traffic Limit Rules")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<ArrayInput<SubscriptionTrafficLimitRule>
|
|
className="grid grid-cols-2 gap-3 lg:grid-cols-4"
|
|
fields={[
|
|
{
|
|
name: "stat_type",
|
|
type: "select",
|
|
placeholder: t("statType", "Statistics Type"),
|
|
value: "day",
|
|
options: [
|
|
{
|
|
label: t("statTypeHour", "Hour"),
|
|
value: "hour",
|
|
},
|
|
{
|
|
label: t("statTypeDay", "Day"),
|
|
value: "day",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "stat_value",
|
|
type: "number",
|
|
placeholder: t("statValue", "Time Value"),
|
|
min: 1,
|
|
step: 1,
|
|
onKeyDown: (
|
|
e: KeyboardEvent<HTMLInputElement>
|
|
) => {
|
|
if (e.key === "." || e.key === ",") {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
formatOutput: (value: string | number) => {
|
|
const num = Number(value);
|
|
return String(
|
|
Number.isNaN(num) ? 1 : Math.floor(num)
|
|
);
|
|
},
|
|
},
|
|
{
|
|
name: "traffic_usage",
|
|
type: "number",
|
|
placeholder: t(
|
|
"trafficUsage",
|
|
"Traffic Usage (GB)"
|
|
),
|
|
min: 0,
|
|
onKeyDown: (
|
|
e: KeyboardEvent<HTMLInputElement>
|
|
) => {
|
|
if (e.key === "." || e.key === ",") {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
formatOutput: (value: string | number) => {
|
|
const num = Number(value);
|
|
return String(
|
|
Number.isNaN(num) ? 0 : Math.floor(num)
|
|
);
|
|
},
|
|
},
|
|
{
|
|
name: "speed_limit",
|
|
type: "number",
|
|
placeholder: t(
|
|
"speedLimitMbps",
|
|
"Speed Limit (Mbps)"
|
|
),
|
|
min: 0,
|
|
onKeyDown: (
|
|
e: KeyboardEvent<HTMLInputElement>
|
|
) => {
|
|
if (e.key === "." || e.key === ",") {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
formatOutput: (value: string | number) => {
|
|
const num = Number(value);
|
|
return String(
|
|
Number.isNaN(num) ? 0 : Math.floor(num)
|
|
);
|
|
},
|
|
},
|
|
]}
|
|
onChange={(items) => {
|
|
field.onChange(items.map(normalizeLimitRule));
|
|
}}
|
|
value={
|
|
field.value && field.value.length > 0
|
|
? field.value
|
|
: [defaultLimitRule]
|
|
}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t(
|
|
"trafficLimitDescription",
|
|
"Limit speed when usage reaches the configured amount in the selected time window."
|
|
)}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="expired_at"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("expiredAt", "Expired At")}</FormLabel>
|
|
<FormControl>
|
|
<DatePicker
|
|
onChange={(value: number | null | undefined) => {
|
|
form.setValue(field.name, value || 0);
|
|
}}
|
|
placeholder={t("permanent", "Permanent")}
|
|
value={
|
|
field.value && field.value > 0
|
|
? field.value
|
|
: undefined
|
|
}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
</ScrollArea>
|
|
<SheetFooter className="flex-row justify-end gap-2 pt-3">
|
|
<Button
|
|
disabled={loading}
|
|
onClick={() => {
|
|
setOpen(false);
|
|
}}
|
|
variant="outline"
|
|
>
|
|
{t("cancel", "Cancel")}
|
|
</Button>
|
|
<Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
|
|
{loading && (
|
|
<Icon className="mr-2 animate-spin" icon="mdi:loading" />
|
|
)}
|
|
{t("confirm", "Confirm")}
|
|
</Button>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|