import { Head, router, usePage, Link } from '@inertiajs/react'; import ClientLayout from '@/Layouts/ClientLayout'; import { Check, Copy, Link2, AlertTriangle, Phone, Inbox, Webhook, FileText, Trash2, RefreshCw, Bot, ChevronDown, ExternalLink, Edit3, Clock, ShieldCheck, ShieldAlert, Wifi, WifiOff, X, } from 'lucide-react'; import { useState, useCallback, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; /* brand logos (accurate official paths) */ function WhatsAppLogo({ className = 'h-5 w-5' }) { return ( ); } function InstagramLogo({ className = 'h-5 w-5' }) { return ( ); } function MessengerLogo({ className = 'h-5 w-5' }) { return ( ); } /* â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ shared helpers â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */ function CopyButton({ text }) { const { t } = useTranslation(); const [copied, setCopied] = useState(false); const copy = () => navigator.clipboard.writeText(text).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); return ( ); } function StatusBadge({ status }) { const { t } = useTranslation(); const map = { active: 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-800', inactive: 'bg-neutral-100 text-neutral-500 ring-1 ring-neutral-200 dark:bg-neutral-800 dark:text-neutral-400 dark:ring-neutral-700', error: 'bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-900/30 dark:text-red-300 dark:ring-red-800', }; const dot = { active: 'bg-emerald-500', inactive: 'bg-neutral-400', error: 'bg-red-500', }; const labelMap = { active: t('common.active'), inactive: t('common.inactive'), error: t('inbox.status_error'), }; return ( {labelMap[status] ?? status} ); } function ChannelCard({ icon: Icon, iconBg, title, count, children }) { const { t } = useTranslation(); return (

{title}

{count != null && ( 0 ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' : 'bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400'}`}> {t('inbox.count_connected', { count })} )}
{children ?? (

{emptyText}

)}
); } /* â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ chatbot selector â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */ function ChatbotSelector({ channelAccountId, currentChatbotId, chatbots }) { const { t } = useTranslation(); const [saving, setSaving] = useState(false); const [value, setValue] = useState(currentChatbotId ? String(currentChatbotId) : ''); const handleChange = (e) => { const next = e.target.value; setValue(next); setSaving(true); router.patch( route('client.inbox.setup.assign-chatbot', { channelAccount: channelAccountId }), { chatbot_id: next === '' ? null : Number(next) }, { preserveScroll: true, onFinish: () => setSaving(false) }, ); }; return (
{saving && {t('inbox.saving')}}
); } /* â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ WhatsApp section â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */ /* ─────────────────── Phone number status helpers ─────────────────── */ const NAME_STATUS = { APPROVED: { labelKey: 'inbox.name_status_approved', color: 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-800', icon: ShieldCheck }, AVAILABLE_WITHOUT_MOCK_UP: { labelKey: 'inbox.name_status_approved', color: 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-800', icon: ShieldCheck }, PENDING_REVIEW: { labelKey: 'inbox.name_status_under_review', color: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-800', icon: Clock }, DECLINED: { labelKey: 'inbox.name_status_declined', color: 'bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-900/30 dark:text-red-300 dark:ring-red-800', icon: ShieldAlert }, EXPIRED: { labelKey: 'inbox.name_status_expired', color: 'bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-900/30 dark:text-red-300 dark:ring-red-800', icon: ShieldAlert }, }; const QUALITY_COLOR = { GREEN: 'text-emerald-600 dark:text-emerald-400', YELLOW: 'text-amber-500 dark:text-amber-400', RED: 'text-red-500 dark:text-red-400', }; function NameStatusBadge({ status }) { const { t } = useTranslation(); const info = NAME_STATUS[status]; if (!info) return null; const Icon = info.icon; return ( {Icon && } {t(info.labelKey)} ); } function PhoneStatusCard({ num, wabaId, onRefreshed }) { const { t } = useTranslation(); const phoneId = num.phone_number_id ?? num.id; const [refreshing, setRefreshing] = useState(false); const [showNameForm, setShowNameForm] = useState(false); const [newName, setNewName] = useState(''); const [submitting, setSubmitting] = useState(false); const [nameMsg, setNameMsg] = useState(null); const [liveData, setLiveData] = useState(null); const data = liveData ?? num; const nameStatus = data.name_status ?? null; const requestedName = data.requested_verified_name ?? null; const verifiedName = data.verified_name ?? null; const qualityRating = data.quality_rating ?? null; const accountMode = data.account_mode ?? null; const codeStatus = data.code_verification_status ?? null; // Auto-fetch from Meta on first render if name_status is unknown useEffect(() => { if (!nameStatus && !refreshing) { refresh(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [phoneId]); const overallStatus = (() => { if (nameStatus === 'PENDING_REVIEW') return { label: t('inbox.overall_pending_review'), color: 'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300', dot: 'bg-amber-400' }; if (nameStatus === 'DECLINED') return { label: t('inbox.overall_name_declined'), color: 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300', dot: 'bg-red-500' }; if (qualityRating === 'RED') return { label: t('inbox.overall_quality_issue'), color: 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300', dot: 'bg-red-500' }; if (codeStatus === 'NOT_VERIFIED') return { label: t('inbox.overall_not_verified'), color: 'bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400', dot: 'bg-neutral-400' }; if (nameStatus === 'APPROVED' || nameStatus === 'AVAILABLE_WITHOUT_MOCK_UP') return { label: t('common.active'), color: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300', dot: 'bg-emerald-500' }; return { label: t('inbox.overall_unknown'), color: 'bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400', dot: 'bg-neutral-400' }; })(); const refresh = async () => { setRefreshing(true); try { const res = await fetch( route('client.whatsapp.setup.refresh-phone-status', { waba: wabaId, phoneNumberId: phoneId }), { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' } } ); const json = await res.json(); if (res.ok && json.data) { setLiveData({ ...num, ...json.data }); onRefreshed?.(); } } finally { setRefreshing(false); } }; const submitNameChange = async () => { if (!newName.trim()) return; setSubmitting(true); setNameMsg(null); try { const res = await fetch( route('client.whatsapp.setup.change-display-name', { waba: wabaId, phoneNumberId: phoneId }), { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }, body: JSON.stringify({ name: newName.trim() }), } ); let json = {}; try { json = await res.json(); } catch { /* non-JSON response */ } if (res.ok) { setNameMsg({ type: 'success', text: json.message ?? t('inbox.submitted_successfully') }); setLiveData(prev => ({ ...(prev ?? num), name_status: 'PENDING_REVIEW', requested_verified_name: newName.trim() })); setShowNameForm(false); setNewName(''); } else { setNameMsg({ type: 'error', text: json.error ?? t('inbox.request_failed_http', { status: res.status }) }); } } catch (err) { setNameMsg({ type: 'error', text: t('inbox.network_error_detail', { message: err?.message ?? t('inbox.unknown') }) }); } finally { setSubmitting(false); } }; return (
{data.display_phone ?? data.display_phone_number ?? '—'} {overallStatus.label} {qualityRating && ( {qualityRating} )} {accountMode && ( {accountMode === 'LIVE' ? : } {accountMode} )}
{verifiedName ?? '—'} {nameStatus && }
{nameStatus === 'PENDING_REVIEW' && requestedName && requestedName !== verifiedName && (
{t('inbox.requested_label')} {requestedName} {t('inbox.under_review_suffix')}
)} {nameStatus === 'DECLINED' && (
{t('inbox.name_declined_submit_new')}
)}
{t('inbox.id_label')} {phoneId}
{nameMsg && (
{nameMsg.type === 'success' ? : } {nameMsg.text}
)} {showNameForm && (

{t('inbox.change_display_name')}

{t('inbox.change_display_name_help')}

setNewName(e.target.value)} placeholder={verifiedName ?? t('inbox.business_name_placeholder')} maxLength={100} className="flex-1 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-500/30 focus:border-brand-400" />
)}
); } function CodeField({ label, value, icon: Icon }) { return (

{Icon && } {label}

{value}
); } function WabaCard({ waba, webhookGlobalUrl, channelAccounts, chatbots }) { const { t } = useTranslation(); const [confirmDelete, setConfirmDelete] = useState(false); const [deleting, setDeleting] = useState(false); const [syncingPhones, setSyncingPhones] = useState(false); const [reregistering, setReregistering] = useState(false); const [reregisterMsg, setReregisterMsg] = useState(null); const phoneList = waba.phone_numbers ?? waba.phoneNumbers ?? []; const caByPhone = {}; (channelAccounts ?? []).forEach(ca => { caByPhone[String(ca.phone_number_id)] = ca; }); const handleDelete = () => { setDeleting(true); router.delete(route('client.whatsapp.setup.destroy', { waba: waba.id }), { preserveScroll: true, onFinish: () => { setDeleting(false); setConfirmDelete(false); }, }); }; const syncPhones = () => { setSyncingPhones(true); router.post(route('client.whatsapp.setup.sync-phone-numbers', { waba: waba.id }), {}, { preserveScroll: true, onFinish: () => setSyncingPhones(false), }); }; const reregisterWebhook = async () => { setReregistering(true); setReregisterMsg(null); try { const res = await fetch(route('client.whatsapp.setup.reregister-webhook', { waba: waba.id }), { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json', }, }); const json = await res.json(); setReregisterMsg(res.ok ? (json.message ?? t('inbox.webhook_reregistered')) : (json.message ?? t('inbox.failed'))); } catch { setReregisterMsg(t('inbox.network_error')); } finally { setReregistering(false); } }; return (
{/* Header row */}
WABA {waba.waba_id}
{t('inbox.templates')} {confirmDelete ? (
) : ( )}
{confirmDelete && (
{t('inbox.remove_waba_warning')}
)}
{/* Webhook — always global for embedded signup */}

{t('inbox.registered_via_embedded')}

{reregisterMsg && ( {reregisterMsg} )}
{/* Phone numbers */}

{t('inbox.phone_numbers')} {phoneList.length}

{phoneList.length > 0 ? (
{phoneList.map((num, i) => { const phoneId = num.phone_number_id ?? num.id; const ca = caByPhone[String(phoneId)]; return (
{}} /> {ca && (
{t('inbox.active_in_inbox')} {chatbots.length > 0 && ( )}
)}
); })}
) : (

{t('inbox.no_phone_numbers')}

)}
); } function WhatsAppSection({ wabas, webhookGlobalUrl, channelAccountsByWaba, chatbots, showForm, setShowForm, metaConfigIdWhatsapp, metaAppId }) { const { t } = useTranslation(); const [waApiError, setWaApiError] = useState(null); const [waSubmitting, setWaSubmitting] = useState(false); const handleWaEmbeddedCode = useCallback(async (code, wabaId, phoneNumberId = null) => { setWaApiError(null); if (!wabaId) { setWaApiError(t('inbox.could_not_detect_waba')); return; } setWaSubmitting(true); try { const res = await fetch(route('client.whatsapp.setup.embedded-signup'), { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json', }, body: JSON.stringify({ code, waba_id: wabaId, phone_number_id: phoneNumberId }), }); const json = await res.json(); if (!res.ok) { setWaApiError(json.message ?? t('inbox.connection_failed')); } else { if (json.webhook_warning) setWaApiError(json.webhook_warning); router.reload({ preserveScroll: true }); setShowForm(false); } } catch { setWaApiError(t('inbox.network_error_retry')); } finally { setWaSubmitting(false); } }, [setShowForm, t]); return ( {wabas.length > 0 && (
{wabas.map(waba => ( ))}
)} {!showForm && wabas.length === 0 && (

{t('inbox.no_whatsapp_accounts')}

)} {showForm && (
0 ? 'mt-4 pt-4 border-t border-neutral-100 dark:border-neutral-800' : ''} space-y-3`}> {metaConfigIdWhatsapp ? ( <>

{t('inbox.authorize_whatsapp_help')}

{waSubmitting &&

{t('inbox.connecting_whatsapp')}

} {waApiError && (

{waApiError}

)} ) : (
{t('inbox.meta_app_not_configured')}
)}
)} ); } /* â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ Instagram / Messenger sections â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */ function AccountRow({ account, channel, chatbots }) { const { t } = useTranslation(); const [confirmDelete, setConfirmDelete] = useState(false); const [deleting, setDeleting] = useState(false); const pageId = channel === 'instagram' ? account.meta_json?.instagram_page_id : account.meta_json?.page_id; const handleDelete = () => { setDeleting(true); router.delete(route('client.inbox.setup.destroy', { channelAccount: account.id }), { preserveScroll: true, onFinish: () => { setDeleting(false); setConfirmDelete(false); }, }); }; return (
{account.display_name}
{pageId &&
{t('inbox.page_id_label')} {pageId}
} {chatbots.length > 0 && ( )}
{confirmDelete ? ( <> ) : ( )}
{confirmDelete && (
{t('inbox.account_remove_warning')}
)}
); } /* ─────────────────── Meta Embedded Signup helpers ─────────────────── */ /** * Listens for the WA_EMBEDDED_SIGNUP postMessage that Meta sends when * sessionInfoVersion:'3' is set. Resolves with { waba_id, phone_number_id }. */ function waitForWabaSessionInfo(timeout = 120000) { return new Promise((resolve, reject) => { const timer = setTimeout(() => { window.removeEventListener('message', handler); reject(new Error('Timed out waiting for WABA session info')); }, timeout); function handler(event) { if (event.origin !== 'https://www.facebook.com') return; try { const parsed = typeof event.data === 'string' ? JSON.parse(event.data) : event.data; if (parsed?.type === 'WA_EMBEDDED_SIGNUP') { clearTimeout(timer); window.removeEventListener('message', handler); resolve(parsed.data ?? {}); } } catch (_) {} } window.addEventListener('message', handler); }); } function initFbSdk(appId) { if (typeof window.FB === 'undefined' || !appId) return false; try { FB.init({ appId, autoLogAppEvents: true, xfbml: false, version: 'v20.0' }); window.__fbSdkReady = true; return true; } catch (_) { return false; } } /** * Loads the Facebook JS SDK on demand and resolves when FB.init() is done. * Safe to call multiple times — returns immediately if SDK is already ready. */ function loadFbSdk(appId) { if (!appId) { return Promise.reject(new Error( 'Meta App ID is not configured. Ask your administrator to set App ID in Admin → Integrations → Meta App.' )); } if (window.__fbSdkReady && typeof window.FB !== 'undefined') { return Promise.resolve(); } if (typeof window.FB !== 'undefined' && initFbSdk(appId)) { return Promise.resolve(); } if (window.__fbSdkPromise) return window.__fbSdkPromise; const blockedMsg = 'Facebook SDK could not load. Disable ad blockers or privacy shields for this site, ' + 'or ask your administrator to allow https://connect.facebook.net in the Content-Security-Policy.'; window.__fbSdkPromise = new Promise((resolve, reject) => { let settled = false; const settle = (fn, val) => { if (settled) return; settled = true; clearInterval(poll); clearTimeout(timer); fn(val); }; const tryReady = () => { if (window.__fbSdkReady && typeof window.FB !== 'undefined') { settle(resolve); return true; } if (typeof window.FB !== 'undefined' && initFbSdk(appId)) { settle(resolve); return true; } return false; }; const poll = setInterval(() => { tryReady(); }, 100); const existingScript = document.querySelector('script[src*="connect.facebook.net"]'); const alreadyInjected = !!existingScript; const onScriptError = () => settle(reject, new Error(blockedMsg)); if (existingScript) { existingScript.addEventListener('error', onScriptError, { once: true }); } if (!alreadyInjected) { window.fbAsyncInit = () => { try { initFbSdk(appId); settle(resolve); } catch (e) { settle(reject, e); } }; const script = document.createElement('script'); script.src = 'https://connect.facebook.net/en_US/sdk.js'; script.async = true; script.defer = true; script.crossOrigin = 'anonymous'; script.onerror = onScriptError; document.body.appendChild(script); } const timer = setTimeout(() => { settle(reject, new Error( 'Facebook SDK did not load within 15 seconds. ' + blockedMsg )); }, 15000); }); window.__fbSdkPromise.catch(() => { window.__fbSdkPromise = null; }); return window.__fbSdkPromise; } function EmbeddedSignupButton({ configId, appId, channel, label, color, onCode, children }) { const { t } = useTranslation(); const { props } = usePage(); const resolvedAppId = appId || props.metaAppId; const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const launch = useCallback(async () => { setError(null); if (!configId) { setError(t('inbox.embedded_signup_not_configured')); return; } setLoading(true); try { await loadFbSdk(resolvedAppId); } catch (e) { setLoading(false); setError(e?.message ?? t('inbox.could_not_load_fb_sdk')); return; } const isWhatsapp = channel === 'whatsapp'; const sessionInfoPromise = isWhatsapp ? waitForWabaSessionInfo() : Promise.resolve(null); const extrasMap = { whatsapp: { setup: {}, featureType: '', sessionInfoVersion: '3' }, instagram: { feature_type: 'instagram_management' }, messenger: { feature_type: 'messenger_chat' }, }; window.FB.login( (response) => { if (response.authResponse && response.authResponse.code) { const code = response.authResponse.code; if (isWhatsapp) { sessionInfoPromise .then((info) => { setLoading(false); onCode(code, info?.waba_id ?? null, info?.phone_number_id ?? null); }) .catch(() => { setLoading(false); onCode(code, null, null); }); } else { setLoading(false); onCode(code); } } else { setLoading(false); if (response.status !== 'connected') { setError(t('inbox.authorization_cancelled')); } } }, { config_id: configId, response_type: 'code', override_default_response_type: true, extras: extrasMap[channel] ?? {}, }, ); }, [configId, resolvedAppId, channel, onCode, t]); const colors = { green: 'bg-[#25D366] hover:bg-[#1ebe5d] text-white', blue: 'bg-[#0866FF] hover:bg-[#0759e0] text-white', purple: 'bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white', }; return (
{error && (

{error}

)} {children}
); } /* ─────────────────── Instagram connect drawer ─────────────────── */ function AddInstagramForm({ onSuccess, metaConfigIdSocial, metaAppId, metaConfigIdWhatsapp }) { const { t } = useTranslation(); const [apiError, setApiError] = useState(null); const [submitting, setSubmitting] = useState(false); const configMismatch = metaConfigIdSocial && metaConfigIdWhatsapp && metaConfigIdSocial === metaConfigIdWhatsapp; const handleEmbeddedCode = useCallback(async (code) => { setApiError(null); setSubmitting(true); try { const res = await fetch(route('client.inbox.setup.embedded-signup.instagram'), { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json', }, body: JSON.stringify({ code }), }); const json = await res.json(); if (!res.ok) { setApiError(json.message ?? t('inbox.connection_failed')); } else { router.reload({ preserveScroll: true }); onSuccess?.(); } } catch { setApiError(t('inbox.network_error_retry')); } finally { setSubmitting(false); } }, [onSuccess, t]); if (!metaConfigIdSocial) { return (
{t('inbox.meta_app_social_not_configured')}
); } return (
{configMismatch && (
{t('inbox.misconfiguration_label')} {t('inbox.config_mismatch_instagram')}
)}

{t('inbox.authorize_instagram_help')}

{submitting &&

{t('inbox.connecting_accounts')}

} {apiError && (

{apiError}

)}
); } function AddMessengerForm({ onSuccess, metaConfigIdSocial, metaAppId, metaConfigIdWhatsapp }) { const { t } = useTranslation(); const [apiError, setApiError] = useState(null); const [submitting, setSubmitting] = useState(false); const configMismatch = metaConfigIdSocial && metaConfigIdWhatsapp && metaConfigIdSocial === metaConfigIdWhatsapp; const handleEmbeddedCode = useCallback(async (code) => { setApiError(null); setSubmitting(true); try { const res = await fetch(route('client.inbox.setup.embedded-signup.messenger'), { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json', }, body: JSON.stringify({ code }), }); const json = await res.json(); if (!res.ok) { setApiError(json.message ?? t('inbox.connection_failed')); } else { router.reload({ preserveScroll: true }); onSuccess?.(); } } catch { setApiError(t('inbox.network_error_retry')); } finally { setSubmitting(false); } }, [onSuccess, t]); if (!metaConfigIdSocial) { return (
{t('inbox.meta_app_social_not_configured')}
); } return (
{configMismatch && (
{t('inbox.misconfiguration_label')} {t('inbox.config_mismatch_messenger')}
)}

{t('inbox.authorize_messenger_help')}

{submitting &&

{t('inbox.connecting_pages')}

} {apiError && (

{apiError}

)}
); } function ConnectDrawer({ open, onClose, title, icon: Icon, iconBg, children }) { if (!open) return null; return ( <>

{title}

{children}
); } /* â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ page root â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */ export default function ChannelSetup({ wabas, whatsappWebhookGlobalUrl, channelAccountsByWaba, instagramAccounts, messengerAccounts, metaWebhookUrl, metaAppId = null, metaConfigIdWhatsapp = null, metaConfigIdSocial = null, chatbots = [], }) { const { t } = useTranslation(); const { props } = usePage(); const flash = props.flash ?? {}; const [drawer, setDrawer] = useState(null); const [showWabaForm, setShowWabaForm] = useState(false); const openDrawer = (key) => { setDrawer(key); if (key === 'whatsapp') setShowWabaForm(true); }; const closeDrawer = () => { setDrawer(null); setShowWabaForm(false); }; return ( {/* Page header */}

{t('inbox.channel_setup')}

{t('inbox.channel_setup_subtitle')}

{/* Flash message */} {flash.success && (
{flash.success}
)} {/* No chatbots warning */} {chatbots.length === 0 && (
{t('inbox.no_active_chatbots')} {t('inbox.create_one')} {t('inbox.to_enable_ai_replies')}
)} {/* Row 1 — 3-column channel cards */}
{/* WhatsApp */} {}} metaConfigIdWhatsapp={metaConfigIdWhatsapp} metaAppId={metaAppId} /> {/* Instagram */} {instagramAccounts.length > 0 ? (
{instagramAccounts.map(a => )}
) : (

{t('inbox.no_instagram_accounts')}

)} {/* Messenger */} {messengerAccounts.length > 0 ? (
{messengerAccounts.map(a => )}
) : (

{t('inbox.no_messenger_accounts')}

)}
{/* Row 2 — guide + resources (only shown when no channels connected) */} {(wabas.length === 0 && instagramAccounts.length === 0 && messengerAccounts.length === 0) && (
{/* Setup guide */}

{t('inbox.getting_started')}

{t('inbox.getting_started_subtitle')}

{[ { step: 1, title: t('inbox.step1_title'), desc: t('inbox.step1_desc') }, { step: 2, title: t('inbox.step2_title'), desc: t('inbox.step2_desc') }, { step: 3, title: t('inbox.step3_title'), desc: t('inbox.step3_desc') }, ].map(({ step, title, desc }) => (
{step}

{title}

{desc}

))}
{/* Sidebar: webhook + resources */}
{metaWebhookUrl && (

{t('inbox.meta_webhook')}

{t('inbox.meta_webhook_help')}

)}

{t('inbox.resources')}

{[ { label: 'WhatsApp Business API', href: 'https://developers.facebook.com/docs/whatsapp' }, { label: 'Meta Webhooks guide', href: 'https://developers.facebook.com/docs/graph-api/webhooks' }, { label: 'Instagram Messaging API', href: 'https://developers.facebook.com/docs/messenger-platform/instagram' }, ].map(({ label, href }) => ( {label} ))}
)} {/* Connect WhatsApp drawer */} {/* Connect Instagram drawer */} {/* Connect Messenger drawer */} ); }