146 lines
5.3 KiB
TypeScript
146 lines
5.3 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 { useSendCampaign } from "@/modules/campaigns/hooks";
|
|
import { sendCampaignSchema, type SendCampaignInput } from "@/modules/campaigns/schemas";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { ArrowLeft, Send } from "lucide-react";
|
|
|
|
export default function SendCampaignPage() {
|
|
const router = useRouter();
|
|
const { toast } = useToast();
|
|
const sendMutation = useSendCampaign();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm<SendCampaignInput>({
|
|
resolver: zodResolver(sendCampaignSchema),
|
|
defaultValues: {
|
|
data: {},
|
|
},
|
|
});
|
|
|
|
const onSubmit = async (data: SendCampaignInput) => {
|
|
try {
|
|
await sendMutation.mutateAsync(data);
|
|
toast({
|
|
title: "Campaign sent",
|
|
description: "Campaign has been sent successfully to the user",
|
|
});
|
|
reset();
|
|
router.push("/campaigns");
|
|
} catch (error) {
|
|
toast({
|
|
title: "Send failed",
|
|
description: "Failed to send 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">Send Single Campaign</h1>
|
|
<p className="text-muted-foreground">
|
|
Send an immediate campaign to a specific user
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="max-w-2xl">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Send className="h-5 w-5" />
|
|
Send Campaign
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Send a notification campaign immediately to a specific user
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="userID">User ID</Label>
|
|
<Input
|
|
id="userID"
|
|
{...register("userID")}
|
|
placeholder="CH9QX5WB"
|
|
/>
|
|
{errors.userID && (
|
|
<p className="text-sm text-destructive">
|
|
{errors.userID.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title">Title</Label>
|
|
<Input
|
|
id="title"
|
|
{...register("title")}
|
|
placeholder="Notification title"
|
|
/>
|
|
{errors.title && (
|
|
<p className="text-sm text-destructive">
|
|
{errors.title.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="body">Body</Label>
|
|
<Input
|
|
id="body"
|
|
{...register("body")}
|
|
placeholder="Notification message"
|
|
/>
|
|
{errors.body && (
|
|
<p className="text-sm text-destructive">
|
|
{errors.body.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => router.push("/campaigns")}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={sendMutation.isPending}>
|
|
{sendMutation.isPending ? "Sending..." : "Send Campaign"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|