import { Head, Link, router, useForm } from '@inertiajs/react'; import { ArrowLeft, Megaphone, Calendar, MessageSquare, FileText, RefreshCw, Sparkles, } from 'lucide-react'; import * as React from 'react'; import { toast } from 'sonner'; import { TemplatePreview } from '@/components/template-preview'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { FileUpload } from '@/components/ui/file-upload'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Textarea } from '@/components/ui/textarea'; interface WabaAccount { id: number; phone_number: string; display_name: string | null; } interface TemplateComponent { type: string; format?: string; text?: string; buttons?: any[]; } interface MessageTemplate { id: number; name: string; language: string; category: string; whatsapp_account_id: number; components: TemplateComponent[]; } interface Group { id: number; name: string; contacts_count: number; } interface CampaignCreateProps { accounts: WabaAccount[]; templates: MessageTemplate[]; groups: Group[]; timezones: string[]; defaultTimezone: string; } interface ParsedRecipient { phone_number: string; variables?: string[] | null; named_variables?: Record | null; } export default function CampaignCreate({ accounts, templates, groups, timezones, defaultTimezone, }: CampaignCreateProps) { const [selectedAccId, setSelectedAccId] = React.useState( accounts.length > 0 ? String(accounts[0].id) : '', ); const [selectedTempId, setSelectedTempId] = React.useState(''); const [messageType, setMessageType] = React.useState<'template' | 'direct'>( 'template', ); const [targetType, setTargetType] = React.useState<'file' | 'group'>( 'file', ); const [recipients, setRecipients] = React.useState([]); const [detectedVariables, setDetectedVariables] = React.useState([]); const [syncingTemplates, setSyncingTemplates] = React.useState(false); const [parsing, setParsing] = React.useState(false); const browserTimezone = React.useMemo(() => { return ( Intl.DateTimeFormat().resolvedOptions().timeZone || defaultTimezone ); }, [defaultTimezone]); const { data, setData, post, processing, errors } = useForm({ name: '', whatsapp_account_id: '', message_type: 'template', message_template_id: '', direct_message_body: '', scheduled_at: '', scheduled_timezone: timezones.includes(browserTimezone) ? browserTimezone : defaultTimezone, contact_group_id: '', recipients: [] as any[], }); // Filter templates to only show the ones created for the selected phone number const filteredTemplates = React.useMemo(() => { if (!selectedAccId) { return []; } return templates.filter( (t) => String(t.whatsapp_account_id) === selectedAccId, ); }, [templates, selectedAccId]); // Update form state when selected ids change React.useEffect(() => { setData('whatsapp_account_id', selectedAccId); }, [selectedAccId, setData]); React.useEffect(() => { setData('message_template_id', selectedTempId); }, [selectedTempId, setData]); React.useEffect(() => { setData('message_type', messageType); if (messageType === 'direct') { setTimeout(() => setSelectedTempId(''), 0); setData('message_template_id', ''); } else { setData('direct_message_body', ''); } }, [messageType, setData]); React.useEffect(() => { if (targetType === 'file') { setData('contact_group_id', ''); setTimeout(() => { setRecipients([]); setDetectedVariables([]); }, 0); } else { setData('recipients', []); setTimeout(() => { setRecipients([]); setDetectedVariables([]); }, 0); } }, [targetType, setData]); const handleSyncTemplates = () => { setSyncingTemplates(true); router.post( '/dashboard/templates/sync', {}, { preserveScroll: true, onSuccess: () => { toast.success('Status template berhasil disinkronkan dengan Meta!'); }, onError: () => { toast.error('Gagal menyinkronkan status template.'); }, onFinish: () => setSyncingTemplates(false), }, ); }; const handleGroupSelect = (val: string) => { setData('contact_group_id', val); const selectedGroup = groups.find((g) => String(g.id) === val); if (selectedGroup) { // Set dummy preview recipient mapping name as first parameter setRecipients([ { phone_number: '+6281234567890', variables: ['[Nama Kontak]'], named_variables: { nama: '[Nama Kontak]' }, }, ]); setDetectedVariables(['nama']); } else { setRecipients([]); setDetectedVariables([]); } }; const activeTemplate = React.useMemo(() => { return templates.find((t) => String(t.id) === selectedTempId); }, [templates, selectedTempId]); // Handle recipient Excel/CSV file upload const handleFileSelect = async (file: File | null) => { if (!file) { setRecipients([]); setDetectedVariables([]); setData('recipients', []); return; } setParsing(true); const formData = new FormData(); formData.append('file', file); try { // Get CSRF Token from cookie const response = await fetch( '/dashboard/campaigns/upload-recipients', { method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest', }, }, ); if (!response.ok) { const errJson = await response.json().catch(() => null); throw new Error(errJson?.error || errJson?.message || 'Gagal memproses file spreadsheet.'); } const resData = await response.json(); setRecipients(resData.recipients || []); setData('recipients', resData.recipients || []); setDetectedVariables(resData.variable_columns || []); toast.success(`Berhasil memuat ${resData.count} kontak penerima!`); } catch (e: any) { toast.error(e.message || 'Gagal memproses file kontak penerima.'); setRecipients([]); setDetectedVariables([]); setData('recipients', []); } finally { setParsing(false); } }; const handleFormSubmit = (e: React.FormEvent) => { e.preventDefault(); if (targetType === 'file' && recipients.length === 0) { toast.error( 'Silakan unggah file CSV valid yang berisi nomor telepon penerima.', ); return; } if (targetType === 'group' && !data.contact_group_id) { toast.error('Silakan pilih grup kontak penerima.'); return; } if (messageType === 'template' && !data.message_template_id) { toast.error('Silakan pilih template resmi yang telah disetujui.'); return; } if (messageType === 'direct' && !data.direct_message_body.trim()) { toast.error('Silakan tulis isi pesan langsung.'); return; } post('/dashboard/campaigns', { onSuccess: () => { toast.success('Kampanye berhasil dibuat / dijadwalkan!'); }, }); }; // Render preview variable values from the first recipient in list const firstRecipientVars = React.useMemo(() => { if (recipients.length === 0) { return {}; } const first = recipients[0]; const vars: Record = {}; if (first.variables) { first.variables.forEach((val, idx) => { vars[String(idx + 1)] = val; }); } if (first.named_variables) { Object.entries(first.named_variables).forEach(([key, val]) => { vars[key] = val; }); } return vars; }, [recipients]); // Simulated direct message preview with replaced variables const directMessagePreview = React.useMemo(() => { let text = data.direct_message_body; if (!text) { return 'Tulis pesan langsung untuk melihat simulasi tampilan di sini.'; } if (recipients.length > 0) { const first = recipients[0]; if (first.named_variables) { Object.entries(first.named_variables).forEach(([key, val]) => { text = text.replace( new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'gi'), val || `[${key}]`, ); text = text.replace( new RegExp(`\\{${key}\\}`, 'gi'), val || `[${key}]`, ); }); } if (first.variables) { first.variables.forEach((val, idx) => { text = text.replace( new RegExp(`\\{\\{\\s*${idx + 1}\\s*\\}\\}`, 'g'), val || `[var${idx + 1}]`, ); }); } } return text; }, [data.direct_message_body, recipients]); // Extract template specs for visual mockup preview const templateSpecs = React.useMemo(() => { if (!activeTemplate) { return null; } const headerComponent = activeTemplate.components.find( (c) => c.type === 'HEADER', ); const bodyComponent = activeTemplate.components.find( (c) => c.type === 'BODY', ); const footerComponent = activeTemplate.components.find( (c) => c.type === 'FOOTER', ); const buttonsComponent = activeTemplate.components.find( (c) => c.type === 'BUTTONS', ); return { headerType: (headerComponent?.format === 'TEXT' ? 'TEXT' : 'NONE') as 'TEXT' | 'NONE', headerText: headerComponent?.text || '', bodyText: bodyComponent?.text || '', footerText: footerComponent?.text || '', buttons: buttonsComponent?.buttons || [], }; }, [activeTemplate]); return ( <>
{/* Back Link */}

Mulai Kampanye Siaran

Kirim pesan siaran massal menggunakan template resmi WhatsApp atau pesan teks langsung ke daftar kontak.

{/* Setup Form */}
Konfigurasi Kampanye
Masukkan nama kampanye, pilih daftar kontak target, dan tentukan jadwal siaran.
{/* Basic Name & Outbound */}
setData('name', e.target.value) } placeholder="contoh: Promo Diskon Hari Raya" required /> {errors.name && ( {errors.name} )}

Tipe Pesan

Pesan langsung hanya untuk obrolan yang memiliki izin.
{errors.message_type && ( {errors.message_type} )}
{errors.whatsapp_account_id && ( {errors.whatsapp_account_id} )}
{messageType === 'template' ? (
{errors.message_template_id && ( {errors.message_template_id} )}
) : (
{data.direct_message_body.length}/4096