413 lines
14 KiB
TypeScript
413 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { Loader2, ArrowLeft, ArrowRight, Check, Calendar } from "lucide-react";
|
||
import { format } from "date-fns";
|
||
import { ru } from "date-fns/locale";
|
||
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 { Badge } from "@/components/ui/badge";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import {
|
||
Calendar as CalendarComponent,
|
||
} from "@/components/ui/calendar";
|
||
import {
|
||
Popover,
|
||
PopoverContent,
|
||
PopoverTrigger,
|
||
} from "@/components/ui/popover";
|
||
import { cn } from "@/lib/utils";
|
||
import { placementsApi, creativesApi, channelsApi } from "@/lib/api";
|
||
import { ChannelInput, type ParsedChannel } from "@/components/channel-input";
|
||
import type { Creative } from "@/lib/types/api";
|
||
|
||
interface PlacementWizardProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
workspaceId: string;
|
||
projectId: string;
|
||
initialCreativeId?: string | null;
|
||
onSuccess?: () => void;
|
||
}
|
||
|
||
export function PlacementWizard({
|
||
open,
|
||
onOpenChange,
|
||
workspaceId,
|
||
projectId,
|
||
initialCreativeId,
|
||
onSuccess,
|
||
}: PlacementWizardProps) {
|
||
const router = useRouter();
|
||
|
||
const [step, setStep] = useState(1);
|
||
const [creatives, setCreatives] = useState<Creative[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
// Step 1: Creative
|
||
const [selectedCreative, setSelectedCreative] = useState<Creative | null>(null);
|
||
|
||
// Step 2: Channels (parsed from input)
|
||
const [parsedChannels, setParsedChannels] = useState<ParsedChannel[]>([]);
|
||
|
||
// Step 3: Details
|
||
const [placementDate, setPlacementDate] = useState<Date>(new Date());
|
||
const [cost, setCost] = useState("");
|
||
const [comment, setComment] = useState("");
|
||
const [inviteLinkType, setInviteLinkType] = useState<"approval" | "public">("approval");
|
||
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (open) {
|
||
loadData();
|
||
} else {
|
||
// Reset on close
|
||
setStep(1);
|
||
setParsedChannels([]);
|
||
setCost("");
|
||
setComment("");
|
||
}
|
||
}, [open]);
|
||
|
||
useEffect(() => {
|
||
if (initialCreativeId && creatives.length > 0) {
|
||
const creative = creatives.find(c => c.id === initialCreativeId);
|
||
if (creative) {
|
||
setSelectedCreative(creative);
|
||
setStep(2);
|
||
}
|
||
}
|
||
}, [initialCreativeId, creatives]);
|
||
|
||
const loadData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await creativesApi.list(workspaceId, { project_id: projectId, size: 100 });
|
||
setCreatives(response.items);
|
||
} catch (err) {
|
||
console.error("Failed to load data:", err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const getValidChannelIds = () => {
|
||
return parsedChannels
|
||
.filter((c) => c.isValid && c.channel)
|
||
.map((c) => c.channel!.id);
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
if (!selectedCreative) return;
|
||
|
||
const validChannels = parsedChannels.filter((c) => c.isValid);
|
||
const existingChannelIds = validChannels.filter((c) => c.channel).map((c) => c.channel!.id);
|
||
const newChannels = validChannels.filter((c) => !c.channel && c.normalized);
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
setError(null);
|
||
|
||
// Create new channels first
|
||
const newChannelIds: string[] = [];
|
||
|
||
if (newChannels.length > 0) {
|
||
const channelInputs = newChannels.map((c) => {
|
||
if (c.type === "invite_link") {
|
||
return { invite_link: `https://t.me/+${c.normalized}` };
|
||
}
|
||
return { username: c.normalized! };
|
||
});
|
||
|
||
const createResult = await channelsApi.create(channelInputs);
|
||
for (const result of createResult.results) {
|
||
if ((result.status === "created" || result.status === "updated") && result.channel) {
|
||
newChannelIds.push(result.channel.id);
|
||
}
|
||
}
|
||
}
|
||
|
||
const allChannelIds = [...existingChannelIds, ...newChannelIds];
|
||
|
||
if (allChannelIds.length === 0) {
|
||
setError("Не выбрано ни одного канала");
|
||
setSubmitting(false);
|
||
return;
|
||
}
|
||
|
||
// Create placements
|
||
await placementsApi.createInProject(workspaceId, projectId, {
|
||
creative_id: selectedCreative.id,
|
||
channels: allChannelIds.map((channelId) => ({
|
||
channel_id: channelId,
|
||
status: "Без статуса",
|
||
comment: undefined,
|
||
details: {
|
||
placement_at: placementDate.toISOString(),
|
||
cost: cost ? { type: "fixed" as const, value: parseFloat(cost) } : undefined,
|
||
invite_link_type: inviteLinkType,
|
||
},
|
||
})),
|
||
});
|
||
|
||
onOpenChange(false);
|
||
onSuccess?.();
|
||
} catch (err: any) {
|
||
setError(err?.detail || "Ошибка создания размещения");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleClose = () => {
|
||
onOpenChange(false);
|
||
router.push(`/dashboard/${workspaceId}/purchase-plans/${projectId}`);
|
||
};
|
||
|
||
if (!open) return null;
|
||
|
||
const validChannels = parsedChannels.filter((c) => c.isValid);
|
||
const canProceedStep2 = validChannels.length > 0;
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={handleClose}>
|
||
<DialogContent className="max-w-2xl">
|
||
<DialogHeader>
|
||
<DialogTitle>Создание размещения</DialogTitle>
|
||
<DialogDescription>
|
||
Шаг {step} из 3
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{loading ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* Progress */}
|
||
<div className="flex items-center gap-2 mb-6">
|
||
{[1, 2, 3].map((s) => (
|
||
<div key={s} className="flex items-center gap-2">
|
||
<div
|
||
className={cn(
|
||
"w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium",
|
||
step >= s
|
||
? "bg-primary text-primary-foreground"
|
||
: "bg-muted text-muted-foreground"
|
||
)}
|
||
>
|
||
{step > s ? <Check className="h-4 w-4" /> : s}
|
||
</div>
|
||
{s < 3 && (
|
||
<div
|
||
className={cn(
|
||
"w-12 h-0.5",
|
||
step > s ? "bg-primary" : "bg-muted"
|
||
)}
|
||
/>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Step 1: Creative */}
|
||
{step === 1 && (
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-medium">Выберите креатив</h3>
|
||
<div className="grid gap-3 max-h-96 overflow-y-auto">
|
||
{creatives.filter(c => c.status === "active").map((creative) => (
|
||
<button
|
||
key={creative.id}
|
||
type="button"
|
||
className={cn(
|
||
"text-left p-4 rounded-lg border transition-colors",
|
||
selectedCreative?.id === creative.id
|
||
? "border-primary bg-primary/5"
|
||
: "hover:bg-muted"
|
||
)}
|
||
onClick={() => setSelectedCreative(creative)}
|
||
>
|
||
<div className="font-medium">{creative.name}</div>
|
||
<div className="text-sm text-muted-foreground line-clamp-2 mt-1">
|
||
{creative.text.replace("{invite_link}", "[ссылка]")}
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="flex justify-end pt-4">
|
||
<Button
|
||
onClick={() => setStep(2)}
|
||
disabled={!selectedCreative}
|
||
>
|
||
Далее <ArrowRight className="h-4 w-4 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 2: Channels */}
|
||
{step === 2 && (
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-medium">Добавьте каналы</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
Введите каналы в любом формате, например:
|
||
</p>
|
||
<p className="text-xs font-mono">
|
||
t.me/username, @username, tgstat.ru/channel/@username, telemetr.me/content/username
|
||
</p>
|
||
|
||
<ChannelInput
|
||
value={parsedChannels}
|
||
onChange={setParsedChannels}
|
||
maxItems={50}
|
||
/>
|
||
|
||
<div className="flex justify-between pt-4">
|
||
<Button variant="outline" onClick={() => setStep(1)}>
|
||
<ArrowLeft className="h-4 w-4 mr-2" /> Назад
|
||
</Button>
|
||
<Button
|
||
onClick={() => setStep(3)}
|
||
disabled={!canProceedStep2}
|
||
>
|
||
Далее <ArrowRight className="h-4 w-4 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 3: Details */}
|
||
{step === 3 && (
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-medium">Детали размещения</h3>
|
||
|
||
{/* Summary of selected channels */}
|
||
<div className="p-3 bg-muted rounded-lg">
|
||
<p className="text-sm font-medium mb-2">Выбрано каналов: {validChannels.length}</p>
|
||
<div className="flex flex-wrap gap-1">
|
||
{validChannels.slice(0, 5).map((c, i) => (
|
||
<Badge key={i} variant="secondary">
|
||
{c.normalized}
|
||
</Badge>
|
||
))}
|
||
{validChannels.length > 5 && (
|
||
<Badge variant="secondary">+{validChannels.length - 5} ещё</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label>Дата публикации</Label>
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
className={cn(
|
||
"w-full justify-start text-left font-normal",
|
||
!placementDate && "text-muted-foreground"
|
||
)}
|
||
>
|
||
<Calendar className="mr-2 h-4 w-4" />
|
||
{placementDate
|
||
? format(placementDate, "PPP", { locale: ru })
|
||
: "Выберите дату"}
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent className="w-auto p-0">
|
||
<CalendarComponent
|
||
mode="single"
|
||
selected={placementDate}
|
||
onSelect={(date) => date && setPlacementDate(date)}
|
||
locale={ru}
|
||
disabled={(date) => date < new Date()}
|
||
/>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>Стоимость (₽)</Label>
|
||
<Input
|
||
type="number"
|
||
placeholder="0"
|
||
value={cost}
|
||
onChange={(e) => setCost(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>Тип ссылки</Label>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
type="button"
|
||
variant={inviteLinkType === "approval" ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => setInviteLinkType("approval")}
|
||
>
|
||
Согласование
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant={inviteLinkType === "public" ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => setInviteLinkType("public")}
|
||
>
|
||
Публичная
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>Комментарий</Label>
|
||
<Textarea
|
||
placeholder="Дополнительная информация..."
|
||
value={comment}
|
||
onChange={(e) => setComment(e.target.value)}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="p-3 rounded bg-destructive/10 text-destructive text-sm">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-between pt-4">
|
||
<Button variant="outline" onClick={() => setStep(2)}>
|
||
<ArrowLeft className="h-4 w-4 mr-2" /> Назад
|
||
</Button>
|
||
<Button onClick={handleSubmit} disabled={submitting}>
|
||
{submitting ? (
|
||
<>
|
||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||
Создание...
|
||
</>
|
||
) : (
|
||
<>Создать размещение ({validChannels.length})</>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|