153 lines
5.8 KiB
TypeScript
153 lines
5.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { useSetupCampaign } from "@/modules/campaigns/hooks";
|
|
import { setupCampaignSchema, type SetupCampaignInput } from "@/modules/campaigns/schemas";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { ArrowLeft, Calendar } from "lucide-react";
|
|
|
|
export default function SetupCampaignPage() {
|
|
const router = useRouter();
|
|
const { toast } = useToast();
|
|
const setupMutation = useSetupCampaign();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm<SetupCampaignInput>({
|
|
resolver: zodResolver(setupCampaignSchema),
|
|
});
|
|
|
|
const onSubmit = async (data: SetupCampaignInput) => {
|
|
try {
|
|
const isoDate = data.date.includes('T') ? data.date + ':00.000Z' : data.date;
|
|
await setupMutation.mutateAsync({
|
|
...data,
|
|
date: isoDate,
|
|
});
|
|
toast({
|
|
title: "Campaign scheduled",
|
|
description: "Campaign has been scheduled successfully",
|
|
});
|
|
reset();
|
|
router.push("/campaigns");
|
|
} catch (error) {
|
|
toast({
|
|
title: "Setup failed",
|
|
description: "Failed to schedule campaign",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => router.push("/campaigns")}
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Setup Campaign</h1>
|
|
<p className="text-muted-foreground">
|
|
Schedule a campaign to be sent at a specific time
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="max-w-2xl">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Calendar className="h-5 w-5" />
|
|
Schedule Campaign
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Create a scheduled campaign that will be sent to all users at the
|
|
specified date and time
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title">Title</Label>
|
|
<Input
|
|
id="title"
|
|
{...register("title")}
|
|
placeholder="Campaign title"
|
|
/>
|
|
{errors.title && (
|
|
<p className="text-sm text-destructive">
|
|
{errors.title.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="content">Content</Label>
|
|
<Input
|
|
id="content"
|
|
{...register("content")}
|
|
placeholder="Campaign message content"
|
|
/>
|
|
{errors.content && (
|
|
<p className="text-sm text-destructive">
|
|
{errors.content.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="date">Scheduled Date & Time</Label>
|
|
<Input
|
|
id="date"
|
|
type="datetime-local"
|
|
{...register("date")}
|
|
/>
|
|
{errors.date && (
|
|
<p className="text-sm text-destructive">
|
|
{errors.date.message}
|
|
</p>
|
|
)}
|
|
<p className="text-xs text-muted-foreground">
|
|
Format: ISO 8601 (e.g., 2025-11-26T08:15:00Z)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => router.push("/campaigns")}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={setupMutation.isPending}>
|
|
{setupMutation.isPending
|
|
? "Scheduling..."
|
|
: "Schedule Campaign"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|