85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import { Badge } from "@workspace/ui/components/badge";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
} from "@workspace/ui/components/sheet";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableRow,
|
|
} from "@workspace/ui/components/table";
|
|
import { useTranslation } from "react-i18next";
|
|
import { formatDate } from "@/utils/common";
|
|
|
|
interface RuleDetailProps {
|
|
open: boolean;
|
|
rule?: API.PromoRule;
|
|
onOpenChange: (open: boolean) => void;
|
|
}
|
|
|
|
export default function RuleDetail({
|
|
open,
|
|
rule,
|
|
onOpenChange,
|
|
}: RuleDetailProps) {
|
|
const { t } = useTranslation("promo");
|
|
|
|
return (
|
|
<Sheet onOpenChange={onOpenChange} open={open}>
|
|
<SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
|
|
<SheetHeader>
|
|
<SheetTitle>
|
|
{rule?.name || t("ruleDetail", "Rule Detail")}
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
{rule && (
|
|
<div className="px-6 pt-4">
|
|
<Table>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell>{t("type", "Type")}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline">
|
|
{t(`types.${rule.type}`, rule.type)}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>{t("priority", "Priority")}</TableCell>
|
|
<TableCell>{rule.priority}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>{t("enabled", "Enabled")}</TableCell>
|
|
<TableCell>
|
|
{rule.enabled ? t("yes", "Yes") : t("no", "No")}
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>{t("params", "Params")}</TableCell>
|
|
<TableCell>
|
|
<code className="whitespace-pre-wrap rounded bg-muted px-2 py-1 text-xs">
|
|
{JSON.stringify(rule.params || {}, null, 2)}
|
|
</code>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>
|
|
{t("validityPeriod", "Validity Period")}
|
|
</TableCell>
|
|
<TableCell>
|
|
{rule.start_time ? formatDate(rule.start_time) : "--"} -{" "}
|
|
{rule.end_time ? formatDate(rule.end_time) : "--"}
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|