/* ==================== Vocal Mobile App ==================== */ const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment } = React; const api = window.api; const CONFIG = window.CONFIG; /* ==================== Constants ==================== */ const LINE_TYPES = { forward: { label: 'Redirection', color: 'badge-info', icon: 'arrow-right' }, ivr: { label: 'Menu IVR', color: 'badge-warning', icon: 'menu' }, voice_ai: { label: 'IA Vocale', color: 'badge-primary', icon: 'sparkles' }, voicemail: { label: 'Messagerie', color: 'badge-gray', icon: 'inbox' }, browser: { label: 'Navigateur', color: 'badge-success', icon: 'globe' }, link: { label: 'Lien SMS', color: 'badge-purple', icon: 'link' }, webhook: { label: 'Webhook', color: 'badge-orange', icon: 'code' }, external_api: { label: 'API externe', color: 'badge-dark', icon: 'cloud' }, }; const CALL_STATUS = { completed: { label: 'Terminé', color: 'badge-success' }, ringing: { label: 'Sonne', color: 'badge-info' }, 'in-progress': { label: 'En cours', color: 'badge-info' }, busy: { label: 'Occupé', color: 'badge-warning' }, 'no-answer': { label: 'Sans réponse', color: 'badge-warning' }, failed: { label: 'Échoué', color: 'badge-danger' }, canceled: { label: 'Annulé', color: 'badge-gray' }, missed: { label: 'Manqué', color: 'badge-danger' }, }; const RECHARGE_PACKS = [ { amount: 10, bonus: 0 }, { amount: 25, bonus: 0 }, { amount: 50, bonus: 2 }, { amount: 100, bonus: 5, popular: true }, { amount: 250, bonus: 20 }, { amount: 500, bonus: 50 }, ]; const SUB_PRICE_MONTHLY = 9; const SUB_PRICE_YEARLY = 90; /* ==================== Formatters ==================== */ const fmtDate = (d) => d ? new Date(d).toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '-'; const fmtDateShort = (d) => { if (!d) return ''; const x = new Date(d); return `${String(x.getDate()).padStart(2,'0')}/${String(x.getMonth()+1).padStart(2,'0')}`; }; const fmtTime = (d) => d ? new Date(d).toLocaleTimeString('fr-CH', { hour: '2-digit', minute: '2-digit' }) : ''; const fmtDateTime = (d) => d ? `${fmtDate(d)} ${fmtTime(d)}` : '-'; const fmtAmount = (n, c = 'CHF', sign = false) => { if (n === null || n === undefined) return '-'; const v = Number(n); const p = sign && v > 0 ? '+' : ''; return `${p}${v.toFixed(2)} ${c}`; }; const fmtDuration = (s) => { if (!s) return '-'; const m = Math.floor(s / 60); const sec = s % 60; if (m === 0) return `${sec}s`; return `${m}m${sec > 0 ? String(sec).padStart(2, '0') + 's' : ''}`; }; const fmtRelative = (d) => { if (!d) return '-'; const diff = (Date.now() - new Date(d).getTime()) / 1000; if (diff < 60) return 'à l\'instant'; if (diff < 3600) return `${Math.floor(diff / 60)} min`; if (diff < 86400) return `${Math.floor(diff / 3600)} h`; if (diff < 604800) return `${Math.floor(diff / 86400)} j`; return fmtDate(d); }; const fmtPhone = (n) => { if (!n) return ''; let s = String(n).replace(/[^\d+]/g, ''); if (s.startsWith('+41') && s.length >= 12) { return `${s.slice(0, 3)} ${s.slice(3, 5)} ${s.slice(5, 8)} ${s.slice(8, 10)} ${s.slice(10)}`; } return s; }; /* ==================== Icons ==================== */ const I = { Home: (p) => , Phone: (p) => , PhoneIn: (p) => , PhoneOut: (p) => , Activity: (p) => , Wallet: (p) => , Card: (p) => , Send: (p) => , Chat: (p) => , Key: (p) => , Settings: (p) => , More: (p) => , User: (p) => , Logout: (p) => , Plus: (p) => , Refresh: (p) => , Back: (p) => , ChevronRight: (p) => , Check: (p) => , X: (p) => , Search: (p) => , Eye: (p) => , EyeOff: (p) => , Copy: (p) => , Trash: (p) => , Bell: (p) => , Edit: (p) => , Star: (p) => , Alert: (p) => , Clock: (p) => , ArrowDown: (p) => , ArrowUp: (p) => , Globe: (p) => , Mail: (p) => , Cog: (p) => , Logo: (p) => , }; /* ==================== Toast / Notifications ==================== */ const ToastContext = createContext(); const useToast = () => useContext(ToastContext); const ToastProvider = ({ children }) => { const [toasts, setToasts] = useState([]); const push = useCallback((message, type = 'info') => { const id = Math.random().toString(36).slice(2); setToasts(t => [...t, { id, message, type }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3500); }, []); const ctx = useMemo(() => ({ success: m => push(m, 'success'), error: m => push(m, 'error'), info: m => push(m, 'info'), }), [push]); return ( {children}
{toasts.map(t =>
{t.message}
)}
); }; /* ==================== App Context ==================== */ const AppContext = createContext(); const useApp = () => useContext(AppContext); const TABS = [ { id: 'home', label: 'Accueil', icon: I.Home }, { id: 'lines', label: 'Lignes', icon: I.Phone }, { id: 'activity', label: 'Activité', icon: I.Activity }, { id: 'billing', label: 'Crédits', icon: I.Wallet }, { id: 'more', label: 'Plus', icon: I.More }, ]; const AppProvider = ({ children }) => { const [user, setUser] = useState(() => { const saved = localStorage.getItem(CONFIG.STORAGE_KEYS.USER); const token = localStorage.getItem(CONFIG.STORAGE_KEYS.TOKEN); if (saved && token) { api.token = token; try { return { ...JSON.parse(saved), token }; } catch (e) {} } return null; }); const initialHash = (window.location.hash || '').replace('#', ''); const initialTab = ['home', 'lines', 'activity', 'billing', 'more'].includes(initialHash) ? initialHash : 'home'; const [tab, setTab] = useState(initialTab); const [stack, setStack] = useState([]); const toast = useToast(); const push = useCallback((screen, params = {}) => { setStack(s => [...s, { screen, params, key: Math.random().toString(36).slice(2) }]); }, []); const pop = useCallback(() => setStack(s => s.slice(0, -1)), []); const popAll = useCallback(() => setStack([]), []); const switchTab = useCallback((id) => { setTab(id); setStack([]); try { window.history.replaceState(null, '', `#${id}`); } catch (e) {} }, []); const login = useCallback((userData, token) => { api.token = token; const u = { ...userData, token }; setUser(u); localStorage.setItem(CONFIG.STORAGE_KEYS.USER, JSON.stringify(userData)); localStorage.setItem(CONFIG.STORAGE_KEYS.TOKEN, token); toast.success('Bienvenue sur Vocal'); }, [toast]); const logout = useCallback(() => { api.logout().catch(() => {}); api.token = null; setUser(null); setStack([]); setTab('home'); localStorage.removeItem(CONFIG.STORAGE_KEYS.USER); localStorage.removeItem(CONFIG.STORAGE_KEYS.TOKEN); toast.info('À bientôt'); }, [toast]); const refreshProfile = useCallback(async () => { try { const data = await api.me(); if (data?.success && data.user) { setUser(prev => ({ ...prev, ...data.user, token: prev?.token })); localStorage.setItem(CONFIG.STORAGE_KEYS.USER, JSON.stringify(data.user)); } } catch (e) {} }, []); useEffect(() => { if (user) refreshProfile(); }, [user?.token]); const value = useMemo(() => ({ user, login, logout, refreshProfile, setUser, tab, switchTab, stack, push, pop, popAll, toast, }), [user, login, logout, refreshProfile, tab, switchTab, stack, push, pop, popAll, toast]); return {children}; }; /* ==================== Shared UI ==================== */ const TopHeader = ({ title, right, transparent, left = false }) => (

{title}

{right}
); const StackHeader = ({ title, right }) => { const { pop } = useApp(); return (

{title}

{right}
); }; const TabBar = () => { const { tab, switchTab, stack } = useApp(); if (stack.length > 0) return null; return (
{TABS.map(t => ( ))}
); }; const Sheet = ({ open, onClose, title, children }) => { if (!open) return null; return (
e.stopPropagation()}>
{title &&

{title}

} {children}
); }; const Skeleton = ({ w = '100%', h = 14, r = 6, style = {} }) => (   ); const EmptyState = ({ icon: Icon = I.Activity, title, message, action }) => (

{title}

{message &&

{message}

} {action}
); const Badge = ({ children, color = 'gray' }) => ( {children} ); const PressableRow = ({ icon: Icon, iconColor = 'indigo', title, subtitle, trail, onClick }) => ( ); const useCopy = () => { const toast = useToast(); return useCallback((text, label = 'Copié') => { try { navigator.clipboard.writeText(text); toast.success(label); } catch (e) { toast.error('Impossible de copier'); } }, [toast]); }; /* ==================== Login ==================== */ const LoginScreen = () => { const { login } = useApp(); const toast = useToast(); const [email, setEmail] = useState(''); const [code, setCode] = useState(''); const [step, setStep] = useState('email'); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); useEffect(() => { const params = new URLSearchParams(window.location.search); const magicEmail = params.get('email'); const magicCode = params.get('code'); if (magicEmail && magicCode) { window.history.replaceState({}, '', window.location.pathname); setLoading(true); api.verifyCode(magicEmail, magicCode).then(data => { if (data.success && data.token) login(data.user || { email: magicEmail }, data.token); else { setEmail(magicEmail); setStep('code'); setError('Lien expiré. Saisissez le code reçu.'); } }).finally(() => setLoading(false)); } }, []); const sendCode = async (e) => { e?.preventDefault(); if (!email) return; setLoading(true); setError(''); const data = await api.requestCode(email); setLoading(false); if (data.success) { setStep('code'); toast.info('Code envoyé par email'); } else setError(data.error || 'Erreur'); }; const verify = async (e) => { e?.preventDefault(); if (code.length < 4) return; setLoading(true); setError(''); const data = await api.verifyCode(email, code); setLoading(false); if (data.success && data.token) login(data.user || { email }, data.token); else setError(data.error || 'Code invalide'); }; return (

Vocal

Téléphonie cloud suisse pour vos lignes pros

{step === 'email' ? (

Connexion

Recevez un code à 6 chiffres par email. Pas de mot de passe.

setEmail(e.target.value)} autoFocus required />
{error &&
{error}
}
) : (

Code de vérification

Code envoyé à {email}

setCode(e.target.value.replace(/\D/g, ''))} autoFocus />
{error &&
{error}
}
)}
📞
Lignes IVR & IA
💳
Crédits Stripe
📊
Stats temps réel
🔐
Magic link
); }; /* ==================== Home (Dashboard) ==================== */ const HomeScreen = () => { const { user, push, switchTab } = useApp(); const toast = useToast(); const [stats, setStats] = useState(null); const [balance, setBalance] = useState(null); const [recent, setRecent] = useState([]); const [loading, setLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const load = useCallback(async (bg = false) => { bg ? setRefreshing(true) : setLoading(true); try { const [s, c, b] = await Promise.all([api.stats(), api.calls(1, 5), api.balance()]); setStats(s); setBalance(b); setRecent(c?.calls || []); } catch (e) { toast.error('Erreur de chargement'); } finally { setLoading(false); setRefreshing(false); } }, []); useEffect(() => { load(); }, [load]); const greeting = (() => { const h = new Date().getHours(); if (h < 6) return 'Bonsoir'; if (h < 12) return 'Bonjour'; if (h < 18) return 'Bon après-midi'; return 'Bonsoir'; })(); const name = user?.name || user?.client?.name || (user?.email ? user.email.split('@')[0] : ''); const balLevel = balance ? (balance.balance < (balance.critical_threshold || 1) ? 'critical' : balance.balance < (balance.low_threshold || 5) ? 'warning' : 'ok') : 'ok'; return (
load(true)} aria-label="Rafraîchir"> } />
{greeting}
{name || 'Utilisateur'}
{loading ? (
) : balance ? (
Solde wallet
{(balance.balance || 0).toFixed(2)} {balance.currency || 'CHF'}
{balLevel === 'critical' &&
⚠️ Solde critique - rechargez maintenant
} {balLevel === 'warning' &&
Solde faible - pensez à recharger
} {balLevel === 'ok' && balance.total_consumed != null &&
Total consommé : {fmtAmount(balance.total_consumed)}
}
) : null}
Vue d'ensemble
{loading ? (
{[0,1,2,3].map(i =>
)}
) : (
)}
Derniers appels
{loading ? (
{[0,1,2].map(i =>
)}
) : recent.length === 0 ? (
Aucun appel récent
) : (
{recent.slice(0, 5).map(c => )}
)}
); }; const CallRow = ({ call, onClick }) => { const dir = call.direction === 'outbound' ? 'red' : 'green'; const Icon = call.direction === 'outbound' ? I.PhoneOut : I.PhoneIn; const status = CALL_STATUS[call.status] || { label: call.status, color: 'gray' }; const phone = call.direction === 'outbound' ? (call.to_number || call.to) : (call.from_number || call.from); return ( ); }; /* ==================== Lines ==================== */ const LinesScreen = () => { const { push } = useApp(); const toast = useToast(); const [lines, setLines] = useState([]); const [subs, setSubs] = useState([]); const [loading, setLoading] = useState(true); const [search, setSearch] = useState(''); const load = useCallback(async () => { setLoading(true); try { const [l, s] = await Promise.all([api.lines(), api.subscriptions()]); setLines(l?.lines || []); setSubs(s?.subscriptions || []); } catch (e) { toast.error('Erreur'); } finally { setLoading(false); } }, []); useEffect(() => { load(); }, [load]); const filtered = useMemo(() => { if (!search) return lines; const q = search.toLowerCase(); return lines.filter(l => (l.name || '').toLowerCase().includes(q) || (l.phone_number || '').toLowerCase().includes(q) || (l.type || '').toLowerCase().includes(q) ); }, [lines, search]); return (
} />
setSearch(e.target.value)} />
{loading ? (
{[0,1,2,3].map(i =>
)}
) : filtered.length === 0 ? ( ) : (
{filtered.map(line => { const sub = subs.find(s => s.line_id === line.id); const subActive = sub && (sub.status === 'active' || sub.status === 'trialing'); const type = LINE_TYPES[line.type] || { label: line.type, color: 'gray' }; return ( ); })}
)}
); }; const LineDetailScreen = ({ params }) => { const { push } = useApp(); const toast = useToast(); const copy = useCopy(); const lineId = params?.lineId; const [line, setLine] = useState(null); const [loading, setLoading] = useState(true); const [tab, setTab] = useState('summary'); const [editing, setEditing] = useState(false); const [form, setForm] = useState({}); const [saving, setSaving] = useState(false); const load = useCallback(async () => { setLoading(true); const d = await api.line(lineId); if (d?.success && d.line) { setLine(d.line); setForm({ name: d.line.name || '', forward_number: d.line.forward_number || '', voicemail_email: d.line.voicemail_email || '', webhook_url: d.line.webhook_url || '', custom_link: d.line.custom_link || '', }); } else if (d?.error) toast.error(d.error); setLoading(false); }, [lineId]); useEffect(() => { load(); }, [load]); const save = async () => { setSaving(true); const r = await api.updateLine(lineId, form); setSaving(false); if (r?.success) { toast.success('Ligne mise à jour'); setEditing(false); load(); } else toast.error(r?.error || 'Erreur'); }; if (loading || !line) { return (
); } const type = LINE_TYPES[line.type] || { label: line.type, color: 'gray' }; const sub = line.subscription; const subActive = sub && (sub.status === 'active' || sub.status === 'trialing'); return (
{ setEditing(false); load(); }}> ) : ( ) ) } />
{type.label}
{fmtPhone(line.phone_number) || '-'}
{line.phone_number && ( )}
État
{line.is_active ? 'Active' : 'Inactive'}
Abonnement
{subActive ? 'Actif' : 'Aucun'}
{tab === 'summary' && (
Type{type.label}
Numéro{fmtPhone(line.phone_number) || '-'}
Nom{line.name || '-'}
{line.forward_number &&
Renvoi vers{fmtPhone(line.forward_number)}
} {line.voicemail_email &&
Email vocal{line.voicemail_email}
} {line.webhook_url &&
Webhook{line.webhook_url}
}
Créée le{fmtDate(line.created_at)}
)} {tab === 'config' && ( editing ? (
setForm({ ...form, name: e.target.value })} />
{(line.type === 'forward' || form.forward_number) && (
setForm({ ...form, forward_number: e.target.value })} />
)} {(line.type === 'voicemail' || form.voicemail_email) && (
setForm({ ...form, voicemail_email: e.target.value })} />
)} {(line.type === 'webhook' || form.webhook_url) && (
setForm({ ...form, webhook_url: e.target.value })} />
)} {(line.type === 'link' || form.custom_link) && (
setForm({ ...form, custom_link: e.target.value })} />
)}
) : (
Nom{line.name || '-'}
Numéro de renvoi{fmtPhone(line.forward_number) || '-'}
Email messagerie{line.voicemail_email || '-'}
URL webhook{line.webhook_url || '-'}
Lien personnalisé{line.custom_link || '-'}
) )} {tab === 'sub' && }
); }; const SubscriptionPanel = ({ line, sub, reload }) => { const toast = useToast(); const [busy, setBusy] = useState(false); const subActive = sub && (sub.status === 'active' || sub.status === 'trialing'); const subscribe = async (period) => { setBusy(true); const r = await api.subscribe(line.id, period); setBusy(false); if (r?.success && r.url) window.location.href = r.url; else toast.error(r?.error || 'Erreur'); }; const cancel = async () => { if (!confirm('Annuler cet abonnement à la fin de la période en cours ?')) return; setBusy(true); const r = await api.cancelSub(sub.id); setBusy(false); if (r?.success) { toast.success('Annulé'); reload(); } else toast.error(r?.error || 'Erreur'); }; const reactivate = async () => { setBusy(true); const r = await api.reactivateSub(sub.id); setBusy(false); if (r?.success) { toast.success('Réactivé'); reload(); } else toast.error(r?.error || 'Erreur'); }; if (!subActive) { return (

Aucun abonnement actif

Activez un abonnement pour utiliser cette ligne

); } return (
Statut{sub.cancel_at_period_end ? 'Se termine bientôt' : 'Actif'}
Formule{sub.billing_period === 'yearly' ? `Annuel - ${SUB_PRICE_YEARLY} CHF/an` : `Mensuel - ${SUB_PRICE_MONTHLY} CHF/mois`}
{sub.current_period_end &&
{sub.cancel_at_period_end ? 'Fin' : 'Prochaine échéance'}{fmtDate(sub.current_period_end)}
}
{sub.cancel_at_period_end ? ( ) : ( )}
); }; /* ==================== Activity (Calls + SMS) ==================== */ const ActivityScreen = () => { const [tab, setTab] = useState('calls'); return (
{tab === 'calls' && } {tab === 'sms' && } {tab === 'whatsapp' && }
); }; const CallsList = () => { const { push } = useApp(); const toast = useToast(); const [calls, setCalls] = useState([]); const [loading, setLoading] = useState(true); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(false); const load = useCallback(async (p = 1, append = false) => { if (!append) setLoading(true); const d = await api.calls(p, 30); if (d?.calls) { setCalls(prev => append ? [...prev, ...d.calls] : d.calls); setHasMore((d.calls?.length || 0) === 30); } else { toast.error('Erreur'); } setLoading(false); }, []); useEffect(() => { load(1, false); }, [load]); if (loading) return
{[0,1,2,3,4].map(i =>
)}
; if (!calls.length) return ; return (
{calls.map(c => push('call-detail', { call: c })} />)} {hasMore && ( )}
); }; const MessagesList = ({ type }) => { const { push } = useApp(); const toast = useToast(); const [items, setItems] = useState([]); const [loading, setLoading] = useState(true); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(false); const load = useCallback(async (p = 1, append = false) => { if (!append) setLoading(true); const d = type === 'sms' ? await api.sms(p, 30) : await api.whatsapp(p, 30); const list = d?.messages || d?.sms || d?.whatsapp || d?.items || []; setItems(prev => append ? [...prev, ...list] : list); setHasMore(list.length === 30); setLoading(false); }, [type]); useEffect(() => { load(1, false); }, [load]); if (loading) return
{[0,1,2].map(i =>
)}
; if (!items.length) return ; return (
{items.map(m => ( ))} {hasMore && }
); }; const CallDetailScreen = ({ params }) => { const c = params?.call || {}; const status = CALL_STATUS[c.status] || { label: c.status, color: 'gray' }; const phone = c.direction === 'outbound' ? (c.to_number || c.to) : (c.from_number || c.from); return (
{c.direction === 'outbound' ? : }
{fmtPhone(phone)}
{status.label}
Direction{c.direction === 'outbound' ? 'Sortant' : 'Entrant'}
De{fmtPhone(c.from_number || c.from) || '-'}
Vers{fmtPhone(c.to_number || c.to) || '-'}
Durée{fmtDuration(c.duration)}
Coût{fmtAmount(c.cost)}
Date{fmtDateTime(c.start_time || c.created_at)}
{c.line_name &&
Ligne{c.line_name}
}
); }; const MessageDetailScreen = ({ params }) => { const m = params?.message || {}; const isWA = params?.type === 'whatsapp'; return (
De{fmtPhone(m.from_number || m.from) || '-'}
Vers{fmtPhone(m.to_number || m.to) || '-'}
Statut{m.status || 'envoyé'}
Coût{fmtAmount(m.cost)}
Date{fmtDateTime(m.created_at || m.sent_at)}
Contenu

{m.body || m.message || '(vide)'}

); }; /* ==================== Billing ==================== */ const BillingScreen = () => { const { push } = useApp(); const toast = useToast(); const [balance, setBalance] = useState(null); const [tx, setTx] = useState([]); const [recharges, setRecharges] = useState([]); const [loading, setLoading] = useState(true); const [tab, setTab] = useState('overview'); const [sheetOpen, setSheetOpen] = useState(false); const [customAmount, setCustomAmount] = useState(''); const [busy, setBusy] = useState(false); const load = useCallback(async () => { setLoading(true); const [b, t, r] = await Promise.all([api.balance(), api.transactions(50), api.recharges()]); setBalance(b); setTx(t?.transactions || []); setRecharges(r?.recharges || []); setLoading(false); }, []); useEffect(() => { load(); }, [load]); const recharge = async (amount) => { if (!amount || amount < 5) { toast.error('Min. 5 CHF'); return; } if (amount > 1000) { toast.error('Max. 1000 CHF'); return; } setBusy(true); const r = await api.createRecharge({ amount: Number(amount) }); setBusy(false); if (r?.success && r.url) window.location.href = r.url; else toast.error(r?.error || 'Erreur'); }; const balLevel = balance ? (balance.balance < (balance.critical_threshold || 1) ? 'critical' : balance.balance < (balance.low_threshold || 5) ? 'warning' : 'ok') : 'ok'; return (
{loading ? ( ) : balance && (
Solde disponible
{(balance.balance || 0).toFixed(2)} {balance.currency || 'CHF'}
Total rechargé : {fmtAmount(balance.total_recharged)} - Consommé : {fmtAmount(balance.total_consumed)}
)}
{tab === 'overview' && (
Recharges Stripe
{recharges.length === 0 ? (
Aucune recharge pour le moment
) : (
{recharges.map(r => (
Recharge {fmtAmount(r.amount, r.currency || 'CHF')} {r.status} {fmtDate(r.created_at)}
))}
)}
)} {tab === 'tx' && (
Mouvements récents
{tx.length === 0 ? (
Aucune transaction
) : (
{tx.map(t => { const credit = (t.type || '').includes('credit') || (t.type || '').includes('recharge') || Number(t.amount) > 0; return (
{credit ? : } {t.description || (credit ? 'Crédit' : 'Débit')} {fmtRelative(t.created_at)} {credit ? '+' : '-'}{Math.abs(Number(t.amount) || 0).toFixed(2)} {t.currency || 'CHF'} Solde : {Number(t.balance_after || 0).toFixed(2)}
); })}
)}
)}
Abonnements de lignes

Gérez les abonnements mensuels et annuels de chacune de vos lignes.

setSheetOpen(false)} title="Recharger mon compte">

Choisissez un montant ou saisissez le vôtre. Min. 5 CHF - Max. 1000 CHF.

{RECHARGE_PACKS.map(p => ( ))}
setCustomAmount(e.target.value)} placeholder="Ex. 75" />

Paiement sécurisé Stripe
); }; /* ==================== Subscriptions ==================== */ const SubscriptionsScreen = () => { const { push } = useApp(); const toast = useToast(); const [lines, setLines] = useState([]); const [subs, setSubs] = useState([]); const [loading, setLoading] = useState(true); const load = useCallback(async () => { setLoading(true); const [l, s] = await Promise.all([api.lines(), api.subscriptions()]); setLines(l?.lines || []); setSubs(s?.subscriptions || []); setLoading(false); }, []); useEffect(() => { load(); }, [load]); const linesWithSub = useMemo(() => { return (lines || []).map(l => { const sub = subs.find(s => s.line_id === l.id); return { ...l, sub, subActive: sub && (sub.status === 'active' || sub.status === 'trialing') }; }); }, [lines, subs]); const active = linesWithSub.filter(l => l.subActive); const inactive = linesWithSub.filter(l => !l.subActive); if (loading) return (
); return (
Actifs
{active.length}
Inactifs
{inactive.length}
{active.length > 0 && ( <>
Abonnements actifs
{active.map(l => ( ))}
)} {inactive.length > 0 && ( <>
Sans abonnement
{inactive.map(l => ( ))}
)} {linesWithSub.length === 0 && }
); }; /* ==================== More menu ==================== */ const MoreScreen = () => { const { user, logout, push } = useApp(); return (
{(user?.name || user?.email || 'U')[0].toUpperCase()}
{user?.name || user?.client?.name || 'Mon compte'}
{user?.email}
Compte
push('settings')} /> push('subscriptions')} />
Outils
push('api-keys')} /> push('whatsapp')} />
Aide
window.location.href = 'mailto:support@helvia.app'} /> window.open('https://helvia.app', '_blank')} />

Vocal v2 - Téléphonie cloud suisse

); }; /* ==================== Settings (Profile) ==================== */ const SettingsScreen = () => { const { user, refreshProfile } = useApp(); const toast = useToast(); const [form, setForm] = useState({ name: '', phone: '', company: '' }); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); useEffect(() => { (async () => { const d = await api.profile(); if (d?.success && d.profile) setForm({ name: d.profile.name || '', phone: d.profile.phone || '', company: d.profile.company || '' }); else if (user) setForm({ name: user.name || '', phone: user.phone || '', company: user.client?.name || '' }); setLoading(false); })(); }, []); const save = async () => { setSaving(true); const r = await api.updateProfile(form); setSaving(false); if (r?.success) { toast.success('Profil mis à jour'); refreshProfile(); } else toast.error(r?.error || 'Erreur'); }; return (
{loading ? : (
setForm({ ...form, name: e.target.value })} />
setForm({ ...form, phone: e.target.value })} />
setForm({ ...form, company: e.target.value })} />
)}
); }; /* ==================== API Keys ==================== */ const ApiKeysScreen = () => { const toast = useToast(); const copy = useCopy(); const [keys, setKeys] = useState([]); const [lines, setLines] = useState([]); const [loading, setLoading] = useState(true); const [sheetOpen, setSheetOpen] = useState(false); const [newLabel, setNewLabel] = useState(''); const [newLineIds, setNewLineIds] = useState([]); const [newKey, setNewKey] = useState(null); const [revealId, setRevealId] = useState(null); const load = useCallback(async () => { setLoading(true); const [k, l] = await Promise.all([api.apiKeys(), api.lines()]); setKeys(k?.api_keys || k?.keys || []); setLines(l?.lines || []); setLoading(false); }, []); useEffect(() => { load(); }, [load]); const create = async () => { if (!newLabel) { toast.error('Nom requis'); return; } const r = await api.createApiKey(newLabel, newLineIds); if (r?.success) { setNewKey(r.api_key || r.key); setNewLabel(''); setNewLineIds([]); load(); } else toast.error(r?.error || 'Erreur'); }; const toggle = async (k) => { const r = await api.updateApiKey(k.id, { is_active: k.is_active ? 0 : 1 }); if (r?.success) { toast.success('Mis à jour'); load(); } }; const remove = async (k) => { if (!confirm(`Supprimer la clé "${k.label}" ?`)) return; const r = await api.deleteApiKey(k.id); if (r?.success) { toast.success('Supprimée'); load(); } }; return (
{ setSheetOpen(true); setNewKey(null); }}> } />
{loading ?
{[0,1].map(i =>
)}
: keys.length === 0 ? setSheetOpen(true)}> Créer une clé} /> : (
{keys.map(k => (
{k.label}
{k.line_ids?.length || 0} ligne(s) - {fmtDate(k.created_at)}
{k.is_active ? 'Active' : 'Inactive'}
{k.key && (
{revealId === k.id ? k.key : k.key.slice(0, 12) + '••••••••'}
)}
))}
)}
{ setSheetOpen(false); setNewKey(null); }} title={newKey ? 'Clé créée' : 'Nouvelle clé API'}> {newKey ? (
Clé créée. Conservez-la précieusement, elle ne sera plus affichée en entier.
{newKey.key || newKey}
) : (
setNewLabel(e.target.value)} placeholder="Ex. Intégration CRM" />
{lines.map(l => ( ))}
)}
); }; /* ==================== WhatsApp ==================== */ const WhatsAppScreen = () => (
); /* ==================== Stack Renderer ==================== */ const renderStackScreen = ({ screen, params }) => { switch (screen) { case 'line-detail': return ; case 'call-detail': return ; case 'message-detail': return ; case 'subscriptions': return ; case 'api-keys': return ; case 'settings': return ; case 'whatsapp': return ; default: return null; } }; const renderTabScreen = (tab) => { switch (tab) { case 'home': return ; case 'lines': return ; case 'activity': return ; case 'billing': return ; case 'more': return ; default: return ; } }; /* ==================== Root App ==================== */ const App = () => { const { user, tab, stack } = useApp(); if (!user) return ; const top = stack[stack.length - 1]; return (
{top ? renderStackScreen(top) : renderTabScreen(tab)}
); }; const Root = () => ( ); ReactDOM.createRoot(document.getElementById('root')).render();