import { Head, Link, useForm } from '@inertiajs/react'; import { ArrowLeft, FileText, Plus, Trash2 } 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 { 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; waba_id: string; } const WHATSAPP_LANGUAGES = [ { code: 'af', name: 'Afrikaans (af)' }, { code: 'sq', name: 'Albanian (sq)' }, { code: 'ar', name: 'Arabic (ar)' }, { code: 'az', name: 'Azerbaijani (az)' }, { code: 'bn', name: 'Bengali (bn)' }, { code: 'bg', name: 'Bulgarian (bg)' }, { code: 'ca', name: 'Catalan (ca)' }, { code: 'zh_CN', name: 'Chinese (Simplified) (zh_CN)' }, { code: 'zh_HK', name: 'Chinese (Hong Kong) (zh_HK)' }, { code: 'zh_TW', name: 'Chinese (Traditional) (zh_TW)' }, { code: 'hr', name: 'Croatian (hr)' }, { code: 'cs', name: 'Czech (cs)' }, { code: 'da', name: 'Danish (da)' }, { code: 'nl', name: 'Dutch (nl)' }, { code: 'en', name: 'English (en)' }, { code: 'en_GB', name: 'English (UK) (en_GB)' }, { code: 'en_US', name: 'English (US) (en_US)' }, { code: 'et', name: 'Estonian (et)' }, { code: 'fil', name: 'Filipino (fil)' }, { code: 'fi', name: 'Finnish (fi)' }, { code: 'fr', name: 'French (fr)' }, { code: 'ka', name: 'Georgian (ka)' }, { code: 'de', name: 'German (de)' }, { code: 'el', name: 'Greek (el)' }, { code: 'gu', name: 'Gujarati (gu)' }, { code: 'he', name: 'Hebrew (he)' }, { code: 'hi', name: 'Hindi (hi)' }, { code: 'hu', name: 'Hungarian (hu)' }, { code: 'id', name: 'Indonesian (id)' }, { code: 'ga', name: 'Irish (ga)' }, { code: 'it', name: 'Italian (it)' }, { code: 'ja', name: 'Japanese (ja)' }, { code: 'kn', name: 'Kannada (kn)' }, { code: 'kk', name: 'Kazakh (kk)' }, { code: 'ko', name: 'Korean (ko)' }, { code: 'lv', name: 'Latvian (lv)' }, { code: 'lt', name: 'Lithuanian (lt)' }, { code: 'mk', name: 'Macedonian (mk)' }, { code: 'ms', name: 'Malay (ms)' }, { code: 'ml', name: 'Malayalam (ml)' }, { code: 'mr', name: 'Marathi (mr)' }, { code: 'nb', name: 'Norwegian (nb)' }, { code: 'fa', name: 'Persian (fa)' }, { code: 'pl', name: 'Polish (pl)' }, { code: 'pt_BR', name: 'Portuguese (Brazil) (pt_BR)' }, { code: 'pt_PT', name: 'Portuguese (Portugal) (pt_PT)' }, { code: 'pa', name: 'Punjabi (pa)' }, { code: 'ro', name: 'Romanian (ro)' }, { code: 'ru', name: 'Russian (ru)' }, { code: 'sr', name: 'Serbian (sr)' }, { code: 'sk', name: 'Slovak (sk)' }, { code: 'sl', name: 'Slovenian (sl)' }, { code: 'es', name: 'Spanish (es)' }, { code: 'es_AR', name: 'Spanish (Argentina) (es_AR)' }, { code: 'es_ES', name: 'Spanish (Spain) (es_ES)' }, { code: 'es_MX', name: 'Spanish (Mexico) (es_MX)' }, { code: 'sw', name: 'Swahili (sw)' }, { code: 'sv', name: 'Swedish (sv)' }, { code: 'ta', name: 'Tamil (ta)' }, { code: 'te', name: 'Telugu (te)' }, { code: 'th', name: 'Thai (th)' }, { code: 'tr', name: 'Turkish (tr)' }, { code: 'uk', name: 'Ukrainian (uk)' }, { code: 'ur', name: 'Urdu (ur)' }, { code: 'uz', name: 'Uzbek (uz)' }, { code: 'vi', name: 'Vietnamese (vi)' }, { code: 'zu', name: 'Zulu (zu)' }, ]; interface TemplateCreateProps { accounts: WabaAccount[]; } interface ButtonItem { type: 'QUICK_REPLY' | 'PHONE_NUMBER' | 'URL'; text: string; phone_number?: string; url?: string; } export default function TemplateCreate({ accounts }: TemplateCreateProps) { const [headerType, setHeaderType] = React.useState<'TEXT' | 'NONE'>('NONE'); const [headerText, setHeaderText] = React.useState(''); const [bodyText, setBodyText] = React.useState(''); const [footerText, setFooterText] = React.useState(''); const [buttons, setButtons] = React.useState([]); const [sampleVariables, setSampleVariables] = React.useState>({}); const detectedBodyVariables = React.useMemo(() => { const matches = bodyText.match(/\{\{\s*([^}]+)\s*\}\}/g); if (!matches) return []; const vars = matches.map((m) => m.replace(/^\{\{\s*|\s*\}\}$/g, '').trim()); return Array.from(new Set(vars)).filter(Boolean); }, [bodyText]); const { data, setData, post, processing, errors } = useForm({ whatsapp_account_id: accounts.length > 0 ? String(accounts[0].id) : '', name: '', language: 'en', category: 'MARKETING', components: [] as any[], }); const handleAddButton = () => { if (buttons.length >= 10) { toast.error('Template WhatsApp mendukung maksimal 10 tombol.'); return; } setButtons([...buttons, { type: 'QUICK_REPLY', text: '' }]); }; const handleRemoveButton = (index: number) => { setButtons(buttons.filter((_, idx) => idx !== index)); }; const handleButtonChange = ( index: number, key: keyof ButtonItem, val: string, ) => { const updated = [...buttons]; updated[index] = { ...updated[index], [key]: val }; setButtons(updated); }; const [submittingWithComponents, setSubmittingWithComponents] = React.useState(null); React.useEffect(() => { if (submittingWithComponents !== null) { setData('components', submittingWithComponents); } }, [submittingWithComponents, setData]); React.useEffect(() => { if ( submittingWithComponents !== null && data.components === submittingWithComponents ) { post('/dashboard/templates', { onSuccess: () => { toast.success('Template berhasil diajukan ke Meta!'); setSubmittingWithComponents(null); }, onError: (err) => { setSubmittingWithComponents(null); if (err.name) { toast.error(err.name); } if (err.components) { toast.error( 'Gagal memvalidasi struktur komponen template.', ); } }, }); } }, [data.components, submittingWithComponents, post]); const handleFormSubmit = (e: React.FormEvent) => { e.preventDefault(); // Validate template name const snakeCaseRegex = /^[a-z0-9_]+$/; if (!snakeCaseRegex.test(data.name)) { toast.error( 'Nama template harus berformat huruf_kecil_dan_garis_bawah (hanya huruf kecil, angka, dan garis bawah).', ); return; } // Build Meta Components Array const componentsArray: any[] = []; if (headerType === 'TEXT' && headerText.trim()) { componentsArray.push({ type: 'HEADER', format: 'TEXT', text: headerText.trim(), }); } if (!bodyText.trim()) { toast.error('Isi pesan (body) template wajib diisi.'); return; } const bodyComp: any = { type: 'BODY', text: bodyText.trim(), }; if (detectedBodyVariables.length > 0) { const samples = detectedBodyVariables.map( (v) => sampleVariables[v]?.trim() || `Contoh_${v}`, ); bodyComp.example = { body_text: [samples], }; } componentsArray.push(bodyComp); if (footerText.trim()) { componentsArray.push({ type: 'FOOTER', text: footerText.trim(), }); } if (buttons.length > 0) { // Check button validation const hasEmptyText = buttons.some((btn) => !btn.text.trim()); if (hasEmptyText) { toast.error('Silakan isi teks label untuk semua tombol.'); return; } try { const formattedButtons = buttons.map((btn) => { const b: any = { type: btn.type, text: btn.text.trim(), }; if (btn.type === 'PHONE_NUMBER') { b.phone_number = btn.phone_number?.trim(); } else if (btn.type === 'URL') { b.url = btn.url?.trim(); } return b; }); componentsArray.push({ type: 'BUTTONS', buttons: formattedButtons, }); } catch { return; } } // Put components in form data and trigger async submit setSubmittingWithComponents(componentsArray); }; return ( <>
{/* Back Link */}

Buat Template WhatsApp

Rancang template pesan WhatsApp resmi. Semua template akan diajukan ke Meta untuk ditinjau dan disetujui.

{/* Form Input Card */}
Penyusun Template
Susun header, isi pesan teks, variabel khusus, dan tombol tindakan interaktif.
{/* Basic Meta Details */}
{errors.whatsapp_account_id && ( {errors.whatsapp_account_id} )}
setData( 'name', e.target.value .toLowerCase() .replace(/\s+/g, '_'), ) } placeholder="contoh: konfirmasi_pesanan_baru" required /> Hanya huruf kecil, angka, dan garis bawah yang diperbolehkan. {errors.name && ( {errors.name} )}
{/* Header section */}

Header (Opsional)

{headerType === 'TEXT' && (
setHeaderText( e.target.value, ) } placeholder="contoh: Informasi Status Pesanan" maxLength={60} /> {headerText.length}/60 karakter. Mendukung satu variabel (misal `{'{{1}}'}`).
)}
{/* Body Section */}

Isi Pesan / Body (Wajib)