Tableau de bord
Aperçu de vos clients et abonnements WhatsApp.
{err &&
{err}
}
{!stats ?
: (
<>
Abonnements actifs
{stats.active_subscriptions}
MRR (revenu)
{fmt(stats.mrr_cents)}
par mois
Coût grossiste
{fmt(stats.wholesale_cost_cents)}
facturé par Vocal
Marge brute
{fmt(stats.margin_cents)}
{stats.mrr_cents > 0 ? Math.round((stats.margin_cents/stats.mrr_cents)*100) : 0}% de marge
Messages WA consommés
{stats.messages_used_period}
période en cours
Bienvenue 👋
Ajoutez vos clients dans Clients , définissez vos prix dans Packs & tarifs ,
puis renseignez vos clés Stripe dans Stripe pour encaisser vos abonnements WhatsApp.
)}
);
}
// ---------- Clients ----------
function ClientsView() {
const [clients, setClients] = useState([]);
const [loading, setLoading] = useState(true);
const [err, setErr] = useState('');
const [showCreate, setShowCreate] = useState(false);
const [form, setForm] = useState({ email: '', company_name: '', first_name: '', last_name: '', phone: '' });
const [packs, setPacks] = useState([]);
const load = useCallback(() => {
setLoading(true);
api('/reseller/clients').then(d => setClients(d.clients || [])).catch(e => setErr(e.message)).finally(() => setLoading(false));
}, []);
useEffect(() => { load(); api('/reseller/packs').then(d => setPacks(d.packs||[])).catch(()=>{}); }, [load]);
async function createClient(e) {
e.preventDefault();
setErr('');
try {
await api('/reseller/clients', { method: 'POST', body: JSON.stringify(form) });
setShowCreate(false);
setForm({ email: '', company_name: '', first_name: '', last_name: '', phone: '' });
load();
} catch (e2) { setErr(e2.message); }
}
async function assignPack(clientId, packId) {
if (!packId) return;
try {
await api('/reseller/subscriptions', { method: 'POST', body: JSON.stringify({ client_id: clientId, pack_id: packId }) });
load();
} catch (e) { alert(e.message); }
}
return (
);
}
// ---------- Domain wizard ----------
function DomainWizard({ initialHost, onChange }) {
const [host, setHost] = useState(initialHost || '');
const [status, setStatus] = useState(null); // { host, status, cname_ok, cname_target, ... }
const [loading, setLoading] = useState(false);
const [busy, setBusy] = useState(false);
const [err, setErr] = useState('');
const [msg, setMsg] = useState('');
const refresh = useCallback(async () => {
setLoading(true); setErr('');
try {
const s = await api('/reseller/domain/status');
setStatus(s);
if (s.host && !host) { setHost(s.host); onChange?.(s.host); }
} catch (e) { setErr(e.message); }
finally { setLoading(false); }
}, [host, onChange]);
useEffect(() => { refresh(); }, []);
// Re-check toutes les 15s tant qu'on est en verifying/cname_missing
useEffect(() => {
if (!status || ['active', 'none'].includes(status.status)) return;
const t = setInterval(refresh, 15000);
return () => clearInterval(t);
}, [status, refresh]);
async function attach() {
setErr(''); setMsg(''); setBusy(true);
try {
const r = await api('/reseller/domain/attach', { method: 'POST', body: JSON.stringify({ host }) });
setMsg(r.next || 'Domaine attaché.');
onChange?.(r.host);
await refresh();
} catch (e) { setErr(e.message); }
finally { setBusy(false); }
}
function copy(t) { navigator.clipboard?.writeText(t); setMsg('Copié ✓'); setTimeout(() => setMsg(''), 1500); }
const target = status?.cname_target || 'ch-vocal-manager.pages.dev';
const isActive = status?.status === 'active';
const isVerifying = status?.status === 'verifying';
const isCnameMissing = status?.status === 'cname_missing';
const isError = status?.status === 'error';
const hasHost = !!status?.host;
return (
Faites pointer votre propre sous-domaine (ex : manager.votre-agence.ch) sur votre espace.
{err &&
{err}
}
{msg &&
{msg}
}
{/* Étape 1 : saisir le host */}
{!hasHost && (
<>
Votre sous-domaine
{busy ? 'Activation…' : 'Activer ce domaine'}
)}
{/* Étapes 2/3 : instructions CNAME + statut */}
{hasHost && (
<>
{status.host}
{isActive && ● Actif - TLS émis - prêt à servir }
{isVerifying && ● Vérification en cours (TLS en cours d'émission)… }
{isCnameMissing && ● En attente du CNAME chez votre registrar }
{isError && ● Erreur : {status.error} }
{loading ? '…' : 'Vérifier'}
{isActive &&
Ouvrir → }
{!isActive && (
Créez ce CNAME chez votre registrar :
Type Nom Valeur
CNAME{status.host.split('.').slice(0,-2).join('.') || status.host}{target} copy(target)} title="Copier">{I.copy}
Une fois le CNAME en place, la vérification est automatique (toutes les 15s).
Le certificat TLS est ensuite émis automatiquement par Cloudflare (1-5 min).
{status.cname_answers?.length > 0 && (
Actuellement, votre DNS répond : {status.cname_answers.join(', ')}
)}
)}
{isActive && (
)}
)}
);
}
// ---------- Branding ----------
function BrandingView({ me, reload }) {
const r = me.reseller || {};
const [form, setForm] = useState({
brand_name: r.brand_name || '',
logo_url: r.logo_url || '',
favicon_url: r.favicon_url || '',
primary_color: r.primary_color || '#6366f1',
accent_color: r.accent_color || '',
support_email: r.support_email || '',
support_phone: r.support_phone || '',
email_from: r.email_from || '',
email_from_name: r.email_from_name || '',
host: r.host || '',
});
const [err, setErr] = useState('');
const [success, setSuccess] = useState('');
async function save(e) {
e.preventDefault();
setErr(''); setSuccess('');
try {
await api('/reseller/branding', { method: 'PUT', body: JSON.stringify(form) });
setSuccess('Image de marque enregistrée ✓');
reload?.();
setTimeout(() => setSuccess(''), 2000);
} catch (e2) { setErr(e2.message); }
}
return (
Configuration Stripe
Vos propres clés Stripe : vous encaissez directement vos clients.
{err &&
{err}
}
{success &&
{success}
}
Webhook à configurer dans Stripe
Dans votre Dashboard Stripe > Developers > Webhooks, ajoutez un endpoint :
{data.webhook_url}
copy(data.webhook_url)} title="Copier">{I.copy}
Événements à écouter : customer.subscription.created, customer.subscription.updated, customer.subscription.deleted, invoice.payment_succeeded, invoice.payment_failed.
Récupérez le signing secret (whsec_...) et collez-le ci-dessus.
);
}
// ---------- Root ----------
function App() {
const [branding, setBranding] = useState(null);
const [me, setMe] = useState(null);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState('dashboard');
useEffect(() => {
// Branding (par host)
fetch(`${API}/v1/branding?host=${encodeURIComponent(location.host)}`)
.then(r => r.json()).then(b => {
setBranding(b);
if (b.primary_color) document.documentElement.style.setProperty('--brand', b.primary_color);
if (b.accent_color) document.documentElement.style.setProperty('--brand-light', b.accent_color);
if (b.brand_name) document.title = `${b.brand_name} - Espace revendeur`;
const tc = document.getElementById('theme-color-tag');
if (tc && b.primary_color) tc.setAttribute('content', b.primary_color);
if (b.favicon_url) {
const fav = document.getElementById('favicon');
if (fav) fav.setAttribute('href', b.favicon_url);
}
}).catch(()=>{});
// Session
if (localStorage.getItem(TOKEN_KEY)) {
api('/reseller/me').then(setMe).catch(() => { localStorage.removeItem(TOKEN_KEY); }).finally(() => setLoading(false));
} else {
setLoading(false);
}
}, []);
function logout() {
api('/reseller/logout', { method: 'POST' }).catch(()=>{});
localStorage.removeItem(TOKEN_KEY);
setMe(null);
}
function reloadMe() { api('/reseller/me').then(setMe).catch(()=>{}); }
if (loading) return