103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useTransition } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import { toast } from "sonner";
|
|
import { updateForm } from "@/app/actions/form";
|
|
import { Loader2, Save } from "lucide-react";
|
|
|
|
interface FormExtraClientProps {
|
|
form: {
|
|
id: string;
|
|
discordWebhookUrl: string | null;
|
|
discordWebhookTemplate: string | null;
|
|
discordWebhookUpdateTemplate: string | null;
|
|
};
|
|
}
|
|
|
|
export default function FormExtraClient({ form }: FormExtraClientProps) {
|
|
const router = useRouter();
|
|
const [webhookUrl, setWebhookUrl] = useState(form.discordWebhookUrl || "");
|
|
const [webhookTemplate, setWebhookTemplate] = useState(form.discordWebhookTemplate || "");
|
|
const [webhookUpdateTemplate, setWebhookUpdateTemplate] = useState(form.discordWebhookUpdateTemplate || "");
|
|
const [isSaving, startSaveTransition] = useTransition();
|
|
|
|
const handleSave = () => {
|
|
startSaveTransition(async () => {
|
|
try {
|
|
await updateForm(form.id, {
|
|
discordWebhookUrl: webhookUrl.trim() || null,
|
|
discordWebhookTemplate: webhookTemplate.trim() || null,
|
|
discordWebhookUpdateTemplate: webhookUpdateTemplate.trim() || null,
|
|
});
|
|
toast.success("Extra settings saved!");
|
|
router.refresh();
|
|
} catch (err: any) {
|
|
toast.error(err.message || "Failed to update settings.");
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Discord Webhook</CardTitle>
|
|
<CardDescription>
|
|
Send notifications to a Discord channel when a new submission is received.
|
|
Leave URL empty to disable.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="webhook-url">Webhook URL</Label>
|
|
<Input
|
|
id="webhook-url"
|
|
value={webhookUrl}
|
|
onChange={(e) => setWebhookUrl(e.target.value)}
|
|
placeholder="https://discord.com/api/webhooks/..."
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="webhook-template">New Submission Template</Label>
|
|
<Textarea
|
|
id="webhook-template"
|
|
value={webhookTemplate}
|
|
onChange={(e) => setWebhookTemplate(e.target.value)}
|
|
placeholder="New submission received from {Name} for skill: {skill}!"
|
|
className="min-h-24"
|
|
/>
|
|
<p className="text-sm text-muted-foreground">
|
|
Use <code>{`{1}`}</code>, <code>{`{2}`}</code> to insert answers according to question order, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="webhook-update-template">Update Submission Template</Label>
|
|
<Textarea
|
|
id="webhook-update-template"
|
|
value={webhookUpdateTemplate}
|
|
onChange={(e) => setWebhookUpdateTemplate(e.target.value)}
|
|
placeholder="Submission updated by {Name} for skill: {skill}!"
|
|
className="min-h-24"
|
|
/>
|
|
<p className="text-sm text-muted-foreground">
|
|
Used when a user updates their existing submission. Use <code>{`{1}`}</code>, <code>{`{2}`}</code> for answers, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-end pt-2">
|
|
<Button onClick={handleSave} disabled={isSaving} className="gap-2">
|
|
{isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
|
Save Settings
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|