340 lines
11 KiB
TypeScript
340 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "sonner";
|
|
|
|
import {
|
|
getAdminSettings,
|
|
updateAdminSetting,
|
|
} from "@/api/admin-settings";
|
|
import { WalletConfigDocScreen } from "@/modules/config/doc/wallet-config-doc-screen";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { LotteryApiBizError } from "@/types/api/errors";
|
|
|
|
const DRAW_GROUP = "draw";
|
|
const SETTLEMENT_GROUP = "settlement";
|
|
|
|
const DRAW_KEYS = {
|
|
REQUIRE_MANUAL_REVIEW: "draw.require_manual_review",
|
|
COOLDOWN_MINUTES: "draw.cooldown_minutes",
|
|
AUTO_SETTLEMENT: "settlement.auto_run_on_tick",
|
|
} as const;
|
|
|
|
const FRONTEND_GROUP = "frontend";
|
|
const FRONTEND_KEYS = {
|
|
PLAY_RULES_HTML: "frontend.play_rules_html",
|
|
PLAY_RULES_HTML_ZH: "frontend.play_rules_html_zh",
|
|
PLAY_RULES_HTML_EN: "frontend.play_rules_html_en",
|
|
PLAY_RULES_HTML_NE: "frontend.play_rules_html_ne",
|
|
} as const;
|
|
|
|
interface RuntimeDraft {
|
|
requireManualReview: boolean;
|
|
cooldownMinutes: string;
|
|
autoSettlement: boolean;
|
|
playRulesHtmlZh: string;
|
|
playRulesHtmlEn: string;
|
|
playRulesHtmlNe: string;
|
|
}
|
|
|
|
function BinaryChoice({
|
|
active,
|
|
disabled,
|
|
onChange,
|
|
leftLabel,
|
|
rightLabel,
|
|
}: {
|
|
active: boolean;
|
|
disabled: boolean;
|
|
onChange: (value: boolean) => void;
|
|
leftLabel: string;
|
|
rightLabel: string;
|
|
}) {
|
|
return (
|
|
<div className="inline-flex rounded-full border border-border/60 bg-background p-1">
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant={!active ? "default" : "ghost"}
|
|
className={!active ? "h-8 rounded-full px-3" : "h-8 rounded-full px-3 text-muted-foreground"}
|
|
disabled={disabled}
|
|
onClick={() => onChange(false)}
|
|
>
|
|
{leftLabel}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant={active ? "default" : "ghost"}
|
|
className={active ? "h-8 rounded-full px-3" : "h-8 rounded-full px-3 text-muted-foreground"}
|
|
disabled={disabled}
|
|
onClick={() => onChange(true)}
|
|
>
|
|
{rightLabel}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SaveActions({
|
|
dirty,
|
|
loading,
|
|
saving,
|
|
onSave,
|
|
onDiscard,
|
|
saveLabel,
|
|
savingLabel,
|
|
discardLabel,
|
|
}: {
|
|
dirty: boolean;
|
|
loading: boolean;
|
|
saving: boolean;
|
|
onSave: () => void;
|
|
onDiscard: () => void;
|
|
saveLabel: string;
|
|
savingLabel: string;
|
|
discardLabel: string;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3 pt-2">
|
|
<Button type="button" onClick={onSave} disabled={!dirty || loading || saving}>
|
|
{saving ? savingLabel : saveLabel}
|
|
</Button>
|
|
{dirty ? (
|
|
<Button type="button" variant="outline" onClick={onDiscard}>
|
|
{discardLabel}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SystemSettingsScreen() {
|
|
const { t } = useTranslation(["common", "config", "adminUsers"]);
|
|
const [draft, setDraft] = useState<RuntimeDraft>({
|
|
requireManualReview: false,
|
|
cooldownMinutes: "15",
|
|
autoSettlement: true,
|
|
playRulesHtmlZh: "",
|
|
playRulesHtmlEn: "",
|
|
playRulesHtmlNe: "",
|
|
});
|
|
const [saved, setSaved] = useState<RuntimeDraft>({
|
|
requireManualReview: false,
|
|
cooldownMinutes: "15",
|
|
autoSettlement: true,
|
|
playRulesHtmlZh: "",
|
|
playRulesHtmlEn: "",
|
|
playRulesHtmlNe: "",
|
|
});
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [dirty, setDirty] = useState(false);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [drawRes, settlementRes, frontendRes] = await Promise.all([
|
|
getAdminSettings(DRAW_GROUP),
|
|
getAdminSettings(SETTLEMENT_GROUP),
|
|
getAdminSettings(FRONTEND_GROUP),
|
|
]);
|
|
|
|
const kv: Record<string, unknown> = {};
|
|
for (const item of [...drawRes.items, ...settlementRes.items, ...frontendRes.items]) {
|
|
kv[item.key] = item.value;
|
|
}
|
|
|
|
const legacyHtml = String(kv[FRONTEND_KEYS.PLAY_RULES_HTML] ?? "");
|
|
const nextDraft: RuntimeDraft = {
|
|
requireManualReview: Boolean(kv[DRAW_KEYS.REQUIRE_MANUAL_REVIEW] ?? false),
|
|
cooldownMinutes: String(kv[DRAW_KEYS.COOLDOWN_MINUTES] ?? 15),
|
|
autoSettlement: Boolean(kv[DRAW_KEYS.AUTO_SETTLEMENT] ?? true),
|
|
playRulesHtmlZh: String(kv[FRONTEND_KEYS.PLAY_RULES_HTML_ZH] ?? legacyHtml),
|
|
playRulesHtmlEn: String(kv[FRONTEND_KEYS.PLAY_RULES_HTML_EN] ?? ""),
|
|
playRulesHtmlNe: String(kv[FRONTEND_KEYS.PLAY_RULES_HTML_NE] ?? ""),
|
|
};
|
|
setDraft(nextDraft);
|
|
setSaved(nextDraft);
|
|
setDirty(false);
|
|
} catch {
|
|
toast.error(t("system.loadFailed", { ns: "config" }));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
void load();
|
|
});
|
|
}, [load]);
|
|
|
|
const updateDraft = <K extends keyof RuntimeDraft>(field: K, value: RuntimeDraft[K]) => {
|
|
setDraft((prev) => ({ ...prev, [field]: value }));
|
|
setDirty(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
await updateAdminSetting(DRAW_KEYS.REQUIRE_MANUAL_REVIEW, draft.requireManualReview);
|
|
await updateAdminSetting(
|
|
DRAW_KEYS.COOLDOWN_MINUTES,
|
|
Math.max(0, Number.parseInt(draft.cooldownMinutes || "0", 10) || 0),
|
|
);
|
|
await updateAdminSetting(DRAW_KEYS.AUTO_SETTLEMENT, draft.autoSettlement);
|
|
await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML_ZH, draft.playRulesHtmlZh);
|
|
await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML_EN, draft.playRulesHtmlEn);
|
|
await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML_NE, draft.playRulesHtmlNe);
|
|
await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML, draft.playRulesHtmlZh);
|
|
toast.success(t("system.saveSuccess", { ns: "config" }));
|
|
setSaved(draft);
|
|
setDirty(false);
|
|
} catch (error) {
|
|
toast.error(
|
|
error instanceof LotteryApiBizError ? error.message : t("system.saveFailed", { ns: "config" }),
|
|
);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const saveLabel = t("actions.save", { ns: "adminUsers" });
|
|
const savingLabel = t("saving", { ns: "adminUsers" });
|
|
const discardLabel = t("system.discard", { ns: "config" });
|
|
|
|
return (
|
|
<div className="flex flex-col gap-10">
|
|
<section className="space-y-4">
|
|
<h2 className="border-b border-border/60 pb-3 text-base font-semibold text-foreground">
|
|
{t("system.title", { ns: "config" })}
|
|
</h2>
|
|
|
|
<div className="space-y-5">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<Label className="text-sm font-medium">{t("system.fields.manualReview", { ns: "config" })}</Label>
|
|
<BinaryChoice
|
|
active={draft.requireManualReview}
|
|
disabled={loading || saving}
|
|
onChange={(value) => updateDraft("requireManualReview", value)}
|
|
leftLabel={t("system.states.disabled", { ns: "config" })}
|
|
rightLabel={t("system.states.enabled", { ns: "config" })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="h-px bg-border/60" />
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<Label className="text-sm font-medium">{t("system.fields.autoSettlement", { ns: "config" })}</Label>
|
|
<BinaryChoice
|
|
active={draft.autoSettlement}
|
|
disabled={loading || saving}
|
|
onChange={(value) => updateDraft("autoSettlement", value)}
|
|
leftLabel={t("system.states.disabled", { ns: "config" })}
|
|
rightLabel={t("system.states.enabled", { ns: "config" })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="h-px bg-border/60" />
|
|
|
|
<div className="grid max-w-xs gap-2">
|
|
<Label htmlFor="cooldown-minutes" className="text-sm font-medium">
|
|
{t("system.fields.cooldownMinutes", { ns: "config" })}
|
|
</Label>
|
|
<Input
|
|
id="cooldown-minutes"
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
value={draft.cooldownMinutes}
|
|
onChange={(e) => updateDraft("cooldownMinutes", e.target.value)}
|
|
disabled={loading || saving}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section className="space-y-4">
|
|
<h2 className="border-b border-border/60 pb-3 text-base font-semibold text-foreground">
|
|
{t("wallet.title", { ns: "config" })}
|
|
</h2>
|
|
<WalletConfigDocScreen embedded />
|
|
</section>
|
|
|
|
<section className="space-y-4">
|
|
<h2 className="border-b border-border/60 pb-3 text-base font-semibold text-foreground">
|
|
{t("system.frontendConfig", { ns: "config" })}
|
|
</h2>
|
|
|
|
<div className="grid gap-2">
|
|
<Label className="text-sm font-medium">
|
|
{t("system.fields.playRulesHtml", { ns: "config" })}
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("system.fields.playRulesHtmlDesc", { ns: "config" })}
|
|
</p>
|
|
<Tabs defaultValue="zh" className="w-full">
|
|
<TabsList className="w-full max-w-md">
|
|
<TabsTrigger value="zh">{t("play.locales.zh", { ns: "config" })}</TabsTrigger>
|
|
<TabsTrigger value="en">{t("play.locales.en", { ns: "config" })}</TabsTrigger>
|
|
<TabsTrigger value="ne">{t("play.locales.ne", { ns: "config" })}</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="zh" className="mt-3">
|
|
<Textarea
|
|
id="play-rules-html-zh"
|
|
value={draft.playRulesHtmlZh}
|
|
onChange={(e) => updateDraft("playRulesHtmlZh", e.target.value)}
|
|
disabled={loading || saving}
|
|
className="min-h-[200px] font-mono text-xs"
|
|
placeholder="<div>...</div>"
|
|
/>
|
|
</TabsContent>
|
|
<TabsContent value="en" className="mt-3">
|
|
<Textarea
|
|
id="play-rules-html-en"
|
|
value={draft.playRulesHtmlEn}
|
|
onChange={(e) => updateDraft("playRulesHtmlEn", e.target.value)}
|
|
disabled={loading || saving}
|
|
className="min-h-[200px] font-mono text-xs"
|
|
placeholder="<div>...</div>"
|
|
/>
|
|
</TabsContent>
|
|
<TabsContent value="ne" className="mt-3">
|
|
<Textarea
|
|
id="play-rules-html-ne"
|
|
value={draft.playRulesHtmlNe}
|
|
onChange={(e) => updateDraft("playRulesHtmlNe", e.target.value)}
|
|
disabled={loading || saving}
|
|
className="min-h-[200px] font-mono text-xs"
|
|
placeholder="<div>...</div>"
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<SaveActions
|
|
dirty={dirty}
|
|
loading={loading}
|
|
saving={saving}
|
|
onSave={() => void handleSave()}
|
|
onDiscard={() => {
|
|
setDraft(saved);
|
|
setDirty(false);
|
|
}}
|
|
saveLabel={saveLabel}
|
|
savingLabel={savingLabel}
|
|
discardLabel={discardLabel}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|