feat: platform update
This commit is contained in:
ivannoskov
317
components/channel-input.tsx
Normal file
317
components/channel-input.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useEffect } from "react";
|
||||
import { Loader2, Check, X, AlertCircle, ExternalLink, Plus, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { channelsApi } from "@/lib/api";
|
||||
import type { Channel } from "@/lib/types/api";
|
||||
|
||||
export type ParsedChannel = {
|
||||
input: string;
|
||||
type: "invite_link" | "username" | "telemetr" | "tgstat" | "unknown";
|
||||
normalized: string | null;
|
||||
isValid: boolean;
|
||||
channel?: Channel;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
interface ChannelInputProps {
|
||||
value: ParsedChannel[];
|
||||
onChange: (channels: ParsedChannel[]) => void;
|
||||
placeholder?: string;
|
||||
maxItems?: number;
|
||||
}
|
||||
|
||||
const CHANNEL_PATTERNS = [
|
||||
{ regex: /^https:\/\/t\.me\/(.+)$/i, type: "username", normalize: (m: string) => m.replace(/@/, "").toLowerCase() },
|
||||
{ regex: /^https:\/\/t\.me\/+([a-zA-Z0-9_]+)$/i, type: "invite_link", normalize: (m: string) => m.toUpperCase() },
|
||||
{ regex: /^@([a-zA-Z0-9_]+)$/i, type: "username", normalize: (m: string) => m.replace(/@/, "").toLowerCase() },
|
||||
{ regex: /^([a-zA-Z0-9_]+)$/i, type: "username", normalize: (m: string) => m.toLowerCase() },
|
||||
{ regex: /^https:\/\/telemetr\.me\/content\/([a-zA-Z0-9_]+)$/i, type: "telemetr", normalize: (m: string) => m.toLowerCase() },
|
||||
{ regex: /^https:\/\/tgstat\.ru\/channel\/@?([a-zA-Z0-9_]+)$/i, type: "tgstat", normalize: (m: string) => m.replace(/@/, "").toLowerCase() },
|
||||
];
|
||||
|
||||
export function ChannelInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Введите каналы (ссылки или @username), каждый с новой строки",
|
||||
maxItems = 50,
|
||||
}: ChannelInputProps) {
|
||||
const [input, setInput] = useState("");
|
||||
const [parsing, setParsing] = useState(false);
|
||||
const [validating, setValidating] = useState(false);
|
||||
|
||||
const parsedResults = useMemo(() => {
|
||||
return value;
|
||||
}, [value]);
|
||||
|
||||
const handleParse = async () => {
|
||||
if (!input.trim()) return;
|
||||
|
||||
setParsing(true);
|
||||
|
||||
const lines = input
|
||||
.split(/[\n,;]/)
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
const newChannels: ParsedChannel[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
let matched = false;
|
||||
|
||||
for (const pattern of CHANNEL_PATTERNS) {
|
||||
const match = line.match(pattern.regex);
|
||||
if (match) {
|
||||
const normalized = pattern.normalize(match[1]);
|
||||
newChannels.push({
|
||||
input: line,
|
||||
type: pattern.type as ParsedChannel["type"],
|
||||
normalized,
|
||||
isValid: false,
|
||||
});
|
||||
matched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!matched) {
|
||||
newChannels.push({
|
||||
input: line,
|
||||
type: "unknown",
|
||||
normalized: null,
|
||||
isValid: false,
|
||||
error: "Неизвестный формат",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setParsing(false);
|
||||
|
||||
// Validate through API
|
||||
await validateChannels(newChannels);
|
||||
};
|
||||
|
||||
const validateChannels = async (channels: ParsedChannel[]) => {
|
||||
setValidating(true);
|
||||
|
||||
const results: ParsedChannel[] = [];
|
||||
|
||||
for (const channel of channels) {
|
||||
if (!channel.normalized) {
|
||||
results.push(channel);
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
// Try to find channel by different identifiers
|
||||
let foundChannel: Channel | undefined;
|
||||
|
||||
if (channel.type === "invite_link") {
|
||||
// Search by invite link pattern
|
||||
const allChannels = await channelsApi.list({ size: 100 });
|
||||
foundChannel = allChannels.items.find(
|
||||
(c) => c.username?.toUpperCase() === channel.normalized?.toUpperCase()
|
||||
);
|
||||
} else {
|
||||
// Search by username
|
||||
const allChannels = await channelsApi.list({ size: 100 });
|
||||
foundChannel = allChannels.items.find(
|
||||
(c) => c.username?.toLowerCase() === channel.normalized?.toLowerCase()
|
||||
);
|
||||
}
|
||||
|
||||
if (foundChannel) {
|
||||
results.push({
|
||||
...channel,
|
||||
isValid: true,
|
||||
channel: foundChannel,
|
||||
});
|
||||
} else {
|
||||
results.push({
|
||||
...channel,
|
||||
isValid: false,
|
||||
error: "Канал не найден в базе",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
results.push({
|
||||
...channel,
|
||||
isValid: false,
|
||||
error: "Ошибка проверки",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setValidating(false);
|
||||
onChange([...parsedResults, ...results].slice(0, maxItems));
|
||||
setInput("");
|
||||
};
|
||||
|
||||
const handleRemove = (index: number) => {
|
||||
const newValue = [...parsedResults];
|
||||
newValue.splice(index, 1);
|
||||
onChange(newValue);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
onChange([]);
|
||||
setInput("");
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: ParsedChannel["type"]) => {
|
||||
switch (type) {
|
||||
case "invite_link":
|
||||
return "🔗";
|
||||
case "username":
|
||||
return "@";
|
||||
case "telemetr":
|
||||
return "📊";
|
||||
case "tgstat":
|
||||
return "📈";
|
||||
default:
|
||||
return "?";
|
||||
}
|
||||
};
|
||||
|
||||
const validCount = parsedResults.filter((c) => c.isValid).length;
|
||||
const invalidCount = parsedResults.filter((c) => !c.isValid).length;
|
||||
const existingCount = parsedResults.filter((c) => c.isValid && c.channel).length;
|
||||
const newCount = parsedResults.filter((c) => c.isValid && !c.channel).length;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Input area */}
|
||||
<div className="flex gap-2">
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="min-h-[100px] flex-1"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleParse();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Parse button */}
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={handleParse}
|
||||
disabled={!input.trim() || parsing || validating}
|
||||
variant="outline"
|
||||
>
|
||||
{parsing || validating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Проверка...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Добавить каналы
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Results summary */}
|
||||
{parsedResults.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 text-sm">
|
||||
{validCount > 0 && (
|
||||
<Badge variant="secondary" className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
|
||||
{validCount} найдено
|
||||
</Badge>
|
||||
)}
|
||||
{invalidCount > 0 && (
|
||||
<Badge variant="secondary" className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">
|
||||
{invalidCount} не найдено
|
||||
</Badge>
|
||||
)}
|
||||
{newCount > 0 && (
|
||||
<Badge variant="secondary" className="bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
|
||||
{newCount} новых
|
||||
</Badge>
|
||||
)}
|
||||
{existingCount > 0 && (
|
||||
<Badge variant="secondary">
|
||||
{existingCount} существующих
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results list */}
|
||||
{parsedResults.length > 0 && (
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto border rounded-lg">
|
||||
{parsedResults.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-3 border-b last:border-0",
|
||||
item.isValid
|
||||
? "bg-muted/30"
|
||||
: "bg-destructive/5"
|
||||
)}
|
||||
>
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-muted flex items-center justify-center text-sm">
|
||||
{item.isValid ? (
|
||||
item.channel ? (
|
||||
<Check className="h-4 w-4 text-green-600" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4 text-blue-600" />
|
||||
)
|
||||
) : (
|
||||
<X className="h-4 w-4 text-red-600" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium truncate">{getTypeIcon(item.type)} {item.normalized || item.input}</span>
|
||||
{!item.isValid && item.error && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
{item.error}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{item.channel && (
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{item.channel.title}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleRemove(index)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
{parsedResults.length > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<Button variant="ghost" size="sm" onClick={handleClear}>
|
||||
Очистить всё
|
||||
</Button>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Нажмите Enter для быстрого добавления
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Loader2, Plus, AlertCircle, CheckCircle2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { parseChannelInput } from "@/lib/utils/channel-parser";
|
||||
import { channelsApi, placementsApi } from "@/lib/api";
|
||||
import type { Placement } from "@/lib/types/api";
|
||||
|
||||
interface AddChannelDialogProps {
|
||||
workspaceId: string;
|
||||
projectId: string;
|
||||
existingPlacements: Placement[];
|
||||
onSuccess: () => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function AddChannelDialog({
|
||||
workspaceId,
|
||||
projectId,
|
||||
existingPlacements,
|
||||
onSuccess,
|
||||
children,
|
||||
}: AddChannelDialogProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const existingUsernames = new Set(
|
||||
existingPlacements
|
||||
.map((p) => p.channel.username?.toLowerCase())
|
||||
.filter(Boolean)
|
||||
);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
const username = parseChannelInput(inputValue);
|
||||
|
||||
if (!username) {
|
||||
setError("Не удалось распознать username из ссылки");
|
||||
return;
|
||||
}
|
||||
|
||||
if (existingUsernames.has(username.toLowerCase())) {
|
||||
setError("Этот канал уже добавлен в проект");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const username = parseChannelInput(inputValue);
|
||||
|
||||
if (!username) {
|
||||
setError("Не удалось распознать username из ссылки");
|
||||
return;
|
||||
}
|
||||
|
||||
if (existingUsernames.has(username.toLowerCase())) {
|
||||
setError("Этот канал уже добавлен в проект");
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 1: Create channel via API to get channel_id
|
||||
const createResponse = await channelsApi.create([{ username }]);
|
||||
const channelId = createResponse.results[0]?.channel.id;
|
||||
|
||||
if (!channelId) {
|
||||
setError("Не удалось получить ID канала");
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 2: Create empty placement with channel_id
|
||||
await placementsApi.createBulk(workspaceId, projectId, {
|
||||
channels: [
|
||||
{
|
||||
channel_id: channelId,
|
||||
status: "Без статуса",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
setSuccess(true);
|
||||
setInputValue("");
|
||||
|
||||
// Close dialog after short delay
|
||||
setTimeout(() => {
|
||||
setOpen(false);
|
||||
setSuccess(false);
|
||||
onSuccess();
|
||||
}, 1500);
|
||||
} catch (err: any) {
|
||||
console.error("Failed to add channel:", err);
|
||||
setError(err.detail || "Не удалось добавить канал");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
if (!isOpen) {
|
||||
setInputValue("");
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
}
|
||||
setOpen(isOpen);
|
||||
};
|
||||
|
||||
const examples = [
|
||||
"t.me/rian_ru",
|
||||
"@rian_ru",
|
||||
"telemetr.me/content/rian_ru",
|
||||
"tgstat.ru/channel/@rian_ru",
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Добавить канал</DialogTitle>
|
||||
<DialogDescription>
|
||||
Введите ссылку или username канала для проверки и добавления в проект
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="channel-input">Ссылка или username канала</Label>
|
||||
<Input
|
||||
id="channel-input"
|
||||
placeholder="https://t.me/rian_ru или @rian_ru"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
disabled={loading}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Поддерживаются: t.me, telemetr.me, tgstat.ru, а также username с @
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 rounded-md bg-destructive/10 text-destructive text-sm">
|
||||
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="flex items-center gap-2 p-3 rounded-md bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 text-sm">
|
||||
<CheckCircle2 className="h-4 w-4 shrink-0" />
|
||||
Канал успешно добавлен!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs text-muted-foreground">Примеры:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{examples.map((example) => (
|
||||
<button
|
||||
key={example}
|
||||
type="button"
|
||||
onClick={() => setInputValue(example)}
|
||||
className="text-xs px-2 py-1 rounded-md bg-muted hover:bg-muted/80 transition-colors"
|
||||
>
|
||||
{example}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setOpen(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading || !inputValue.trim()}>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Проверка...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Проверить и добавить
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,591 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Loader2, Plus, Check, ChevronRight, X, AlertCircle, BookOpen } from "lucide-react";
|
||||
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 {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { parseChannelInput } from "@/lib/utils/channel-parser";
|
||||
import { placementsApi, creativesApi, channelsApi } from "@/lib/api";
|
||||
import type { Placement, Creative, Channel } from "@/lib/types/api";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
interface ChannelInput {
|
||||
username: string;
|
||||
channelId: string;
|
||||
}
|
||||
|
||||
interface CreatePlacementsDialogProps {
|
||||
workspaceId: string;
|
||||
projectId: string;
|
||||
existingPlacements: Placement[];
|
||||
prefilledCreativeId?: string | null;
|
||||
prefilledChannelIds?: string[] | null;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
onSuccess: () => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const DEFAULT_STATUS = "Согласование условий";
|
||||
const DEFAULT_PLACEMENT_TYPE = "standard";
|
||||
|
||||
export function CreatePlacementsDialog({
|
||||
workspaceId,
|
||||
projectId,
|
||||
existingPlacements,
|
||||
prefilledCreativeId = null,
|
||||
prefilledChannelIds = null,
|
||||
open: controlledOpen,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
children,
|
||||
}: CreatePlacementsDialogProps) {
|
||||
const [internalOpen, setInternalOpen] = useState(false);
|
||||
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [newChannelInput, setNewChannelInput] = useState("");
|
||||
const [selectedChannels, setSelectedChannels] = useState<ChannelInput[]>([]);
|
||||
const [existingChannels, setExistingChannels] = useState<string[]>([]);
|
||||
const [projectChannels, setProjectChannels] = useState<Channel[]>([]);
|
||||
const [creativeId, setCreativeId] = useState<string | null>(prefilledCreativeId);
|
||||
const [format, setFormat] = useState("");
|
||||
const [cost, setCost] = useState("");
|
||||
const [placementDate, setPlacementDate] = useState("");
|
||||
const [comment, setComment] = useState("");
|
||||
const [creatives, setCreatives] = useState<Creative[]>([]);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createdCount, setCreatedCount] = useState<number | null>(null);
|
||||
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
setInternalOpen(isOpen);
|
||||
onOpenChange?.(isOpen);
|
||||
};
|
||||
|
||||
const handleTriggerClick = () => {
|
||||
resetForm();
|
||||
setInternalOpen(true);
|
||||
onOpenChange?.(true);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setStep(1);
|
||||
setNewChannelInput("");
|
||||
setSelectedChannels([]);
|
||||
setExistingChannels([]);
|
||||
setProjectChannels([]);
|
||||
setCreativeId(prefilledCreativeId);
|
||||
setFormat("");
|
||||
setCost("");
|
||||
setPlacementDate("");
|
||||
setComment("");
|
||||
setError(null);
|
||||
setCreatedCount(null);
|
||||
};
|
||||
|
||||
const existingUsernames = new Set(
|
||||
existingPlacements
|
||||
.map((p) => p.channel.username?.toLowerCase())
|
||||
.filter(Boolean)
|
||||
);
|
||||
|
||||
const getExistingChannelIdByUsername = (usernameLower: string): string | null => {
|
||||
const matched = existingPlacements.find(
|
||||
(p) => p.channel.username?.toLowerCase() === usernameLower
|
||||
);
|
||||
return matched?.channel.id ?? null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadCreatives();
|
||||
loadProjectChannels();
|
||||
loadPrefilledChannels();
|
||||
}
|
||||
}, [isOpen, workspaceId, projectId, prefilledCreativeId, prefilledChannelIds]);
|
||||
|
||||
const loadCreatives = async () => {
|
||||
try {
|
||||
const response = await creativesApi.list(workspaceId, {
|
||||
project_id: projectId,
|
||||
include_archived: false,
|
||||
size: 100,
|
||||
});
|
||||
setCreatives(response.items);
|
||||
|
||||
if (prefilledCreativeId && response.items.length > 0) {
|
||||
const prefilled = response.items.find((c) => c.id === prefilledCreativeId);
|
||||
if (prefilled) {
|
||||
setCreativeId(prefilled.id);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load creatives:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadProjectChannels = async () => {
|
||||
try {
|
||||
const projectPlacements = await placementsApi.getByProject(workspaceId, projectId);
|
||||
const channels = projectPlacements.map((p) => p.channel);
|
||||
setProjectChannels(channels);
|
||||
} catch (err) {
|
||||
console.error("Failed to load project channels:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadPrefilledChannels = async () => {
|
||||
if (!prefilledChannelIds || prefilledChannelIds.length === 0) return;
|
||||
|
||||
try {
|
||||
const projectPlacements = await placementsApi.getByProject(workspaceId, projectId);
|
||||
const prefilledChannels = projectPlacements
|
||||
.filter((p) => prefilledChannelIds.includes(p.channel.id))
|
||||
.map((p) => ({
|
||||
username: p.channel.username || p.channel.title,
|
||||
channelId: p.channel.id,
|
||||
}));
|
||||
|
||||
setSelectedChannels(prefilledChannels);
|
||||
} catch (err) {
|
||||
console.error("Failed to load prefilled channels:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const addChannel = async () => {
|
||||
const username = parseChannelInput(newChannelInput);
|
||||
if (!username) {
|
||||
setError("Не удалось распознать username");
|
||||
return;
|
||||
}
|
||||
|
||||
const lowerUsername = username.toLowerCase();
|
||||
if (selectedChannels.some((c) => c.username.toLowerCase() === lowerUsername)) {
|
||||
setError("Канал уже добавлен в список");
|
||||
return;
|
||||
}
|
||||
|
||||
const projectChannel = projectChannels.find((c) => c.username?.toLowerCase() === lowerUsername);
|
||||
if (projectChannel) {
|
||||
setSelectedChannels([...selectedChannels, { username, channelId: projectChannel.id }]);
|
||||
setNewChannelInput("");
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (existingUsernames.has(lowerUsername)) {
|
||||
const existingChannelId = getExistingChannelIdByUsername(lowerUsername);
|
||||
if (!existingChannelId) {
|
||||
setError("Не удалось найти ID канала в проекте");
|
||||
return;
|
||||
}
|
||||
setSelectedChannels([...selectedChannels, { username, channelId: existingChannelId }]);
|
||||
setNewChannelInput("");
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const createResponse = await channelsApi.create([{ username }]);
|
||||
const channelId = createResponse.results[0]?.channel.id;
|
||||
|
||||
if (!channelId) {
|
||||
setError("Не удалось получить ID канала");
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedChannels([...selectedChannels, { username, channelId }]);
|
||||
setNewChannelInput("");
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Failed to create channel:", err);
|
||||
setError("Не удалось создать канал");
|
||||
}
|
||||
};
|
||||
|
||||
const removeChannel = (username: string) => {
|
||||
setSelectedChannels(selectedChannels.filter((c) => c.username !== username));
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addChannel();
|
||||
}
|
||||
};
|
||||
|
||||
const canProceedStep1 = selectedChannels.length > 0;
|
||||
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
setCreating(true);
|
||||
setError(null);
|
||||
|
||||
const details: any = {};
|
||||
details.placement_type = DEFAULT_PLACEMENT_TYPE;
|
||||
if (format) details.format = format;
|
||||
if (cost) details.cost = { type: "fixed", value: parseFloat(cost) };
|
||||
if (placementDate) details.placement_at = new Date(placementDate).toISOString();
|
||||
if (comment) details.comment = comment;
|
||||
|
||||
await placementsApi.createBulk(workspaceId, projectId, {
|
||||
creative_id: creativeId || undefined,
|
||||
channels: selectedChannels.map((c) => ({
|
||||
channel_id: c.channelId,
|
||||
status: DEFAULT_STATUS,
|
||||
})),
|
||||
details: Object.keys(details).length > 0 ? details : undefined,
|
||||
});
|
||||
|
||||
setCreatedCount(selectedChannels.length);
|
||||
onSuccess();
|
||||
} catch (err: any) {
|
||||
console.error("Failed to create placements:", err);
|
||||
setError(err.detail || "Не удалось создать размещения");
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedCreative = creatives.find((c) => c.id === creativeId);
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild onClick={isControlled ? undefined : handleTriggerClick}>
|
||||
{children}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Создать размещения</DialogTitle>
|
||||
<DialogDescription>
|
||||
Шаг {step} из 3:{" "}
|
||||
{step === 1 && "Выберите каналы"}
|
||||
{step === 2 && "Укажите параметры"}
|
||||
{step === 3 && "Подтвердите создание"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{createdCount !== null ? (
|
||||
<div className="py-8 text-center">
|
||||
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-100 text-emerald-600 mb-4">
|
||||
<Check className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">
|
||||
Размещения созданы!
|
||||
</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Создано {createdCount} размещений
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-2 mb-6">
|
||||
{[1, 2, 3].map((s) => (
|
||||
<div
|
||||
key={s}
|
||||
className={cn(
|
||||
"flex items-center gap-2",
|
||||
s < 3 && "mr-4"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center h-8 w-8 rounded-full text-sm font-medium",
|
||||
step === s
|
||||
? "bg-primary text-primary-foreground"
|
||||
: step > s
|
||||
? "bg-emerald-500 text-white"
|
||||
: "bg-muted text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{step > s ? <Check className="h-4 w-4" /> : s}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 rounded-md bg-destructive/10 text-destructive text-sm mb-4">
|
||||
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Добавить канал</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="t.me/username или @username"
|
||||
value={newChannelInput}
|
||||
onChange={(e) => setNewChannelInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button type="button" onClick={addChannel} disabled={!newChannelInput.trim()}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Поддерживаются: t.me, telemetr.me, tgstat.ru, username с @
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{selectedChannels.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Выбранные каналы ({selectedChannels.length})</Label>
|
||||
<div className="max-h-48 overflow-y-auto space-y-2">
|
||||
{selectedChannels.map((channel) => (
|
||||
<div
|
||||
key={channel.username}
|
||||
className="flex items-center justify-between p-2 rounded-md bg-muted"
|
||||
>
|
||||
<span className="text-sm">@{channel.username}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removeChannel(channel.username)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{projectChannels.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-base">Существующие каналы проекта</Label>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{projectChannels.length}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto space-y-2">
|
||||
{projectChannels.map((channel) => (
|
||||
<div
|
||||
key={channel.id}
|
||||
className="flex items-center justify-between p-2 rounded-md bg-muted"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{channel.title}</span>
|
||||
{channel.username && (
|
||||
<span className="text-xs text-muted-foreground">@{channel.username}</span>
|
||||
)}
|
||||
</div>
|
||||
{selectedChannels.some((c) => c.channelId === channel.id) ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removeChannel(channel.username || channel.id)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const channelId = channel.id;
|
||||
const username = channel.username || channel.id;
|
||||
setSelectedChannels([...selectedChannels, { username, channelId }]);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Выбрать
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Креатив</Label>
|
||||
<Select value={creativeId || ""} onValueChange={setCreativeId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите креатив" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{creatives.map((creative) => (
|
||||
<SelectItem key={creative.id} value={creative.id}>
|
||||
{creative.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Формат</Label>
|
||||
<Input
|
||||
placeholder="Стандарт"
|
||||
value={format}
|
||||
onChange={(e) => setFormat(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Стоимость (₽)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="5000"
|
||||
value={cost}
|
||||
onChange={(e) => setCost(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Дата размещения</Label>
|
||||
<Input
|
||||
type="date"
|
||||
value={placementDate}
|
||||
onChange={(e) => setPlacementDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 space-y-2">
|
||||
<Label>Комментарий</Label>
|
||||
<Textarea
|
||||
placeholder="Дополнительные заметки..."
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Каналы ({selectedChannels.length})</Label>
|
||||
<div className="max-h-32 overflow-y-auto p-3 rounded-md bg-muted text-sm space-y-1">
|
||||
{selectedChannels.map((c) => (
|
||||
<div key={c.username}>@{c.username}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Параметры</Label>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm p-3 rounded-md bg-muted">
|
||||
{selectedCreative && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Креатив:</span>{" "}
|
||||
{selectedCreative.name}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="text-muted-foreground">Тип:</span>{" "}
|
||||
Стандартный
|
||||
</div>
|
||||
{format && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Формат:</span>{" "}
|
||||
{format}
|
||||
</div>
|
||||
)}
|
||||
{cost && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Стоимость:</span>{" "}
|
||||
{parseFloat(cost).toLocaleString("ru-RU")} ₽
|
||||
</div>
|
||||
)}
|
||||
{placementDate && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Дата:</span>{" "}
|
||||
{new Date(placementDate).toLocaleDateString("ru-RU")}
|
||||
</div>
|
||||
)}
|
||||
{comment && (
|
||||
<div className="col-span-2">
|
||||
<span className="text-muted-foreground">Комментарий:</span>{" "}
|
||||
{comment}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
{step > 1 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setStep(step - 1)}
|
||||
>
|
||||
Назад
|
||||
</Button>
|
||||
)}
|
||||
{step < 3 ? (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (step === 1 && !prefilledCreativeId) {
|
||||
loadCreatives();
|
||||
}
|
||||
setStep(step + 1);
|
||||
}}
|
||||
disabled={step === 1 && !canProceedStep1}
|
||||
>
|
||||
Далее
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="button" onClick={handleCreate} disabled={creating}>
|
||||
{creating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Создание...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать {selectedChannels.length} размещений
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
412
components/placement-wizard.tsx
Normal file
412
components/placement-wizard.tsx
Normal file
@@ -0,0 +1,412 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user