feat(settings): add WhatsApp reconfiguration form to SettingsPage

Business owners can now connect or reconnect their WhatsApp account
directly from Settings without going through the onboarding wizard.
Form accepts WABA ID, System User Token, Phone Number ID, and phone number.

apps/admin/src/pages/SettingsPage.tsx

@@ -16,6 +16,9 @@ export default function SettingsPage() {
     const [saving, setSaving] = useState(false);
     const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
     const [waStatus, setWaStatus] = useState<{ tokenValid: boolean | null } | null>(null);
+    const [waForm, setWaForm] = useState({ wabaId: '', accessToken: '', phoneNumberId: '', phoneNumber: '' });
+    const [waFormOpen, setWaFormOpen] = useState(false);
+    const [waSaving, setWaSaving] = useState(false);
 
     const isValidId = !!selectedOrgId;
 
@@ -58,6 +61,28 @@ export default function SettingsPage() {
         }
     };
 
+    const handleWaSetup = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!waForm.wabaId || !waForm.accessToken) return;
+        setWaSaving(true);
+        try {
+            await api.post(`/v1/organizations/${selectedOrgId}/whatsapp-setup`, {
+                wabaId: waForm.wabaId.trim(),
+                accessToken: waForm.accessToken.trim(),
+                phoneNumberId: waForm.phoneNumberId.trim() || undefined,
+                phoneNumber: waForm.phoneNumber.trim() || undefined,
+            }, token);
+            setMessage({ type: 'success', text: 'WhatsApp connecté avec succès ✅' });
+            setWaFormOpen(false);
+            setWaForm({ wabaId: '', accessToken: '', phoneNumberId: '', phoneNumber: '' });
+            fetchOrg();
+        } catch {
+            setMessage({ type: 'error', text: 'Échec de la connexion WhatsApp. Vérifie le token et le WABA ID.' });
+        } finally {
+            setWaSaving(false);
+        }
+    };
+
     if (!isValidId) {
         return (
             <div className="p-12 text-center text-slate-400">
@@ -212,7 +237,15 @@ export default function SettingsPage() {
                     </details>
 
                     <section className="bg-slate-800 p-6 rounded-2xl text-white">
-                        <h2 className="text-lg font-semibold mb-3">{t('settings.whatsapp_config')}</h2>
+                        <div className="flex items-center justify-between mb-3">
+                            <h2 className="text-lg font-semibold">{t('settings.whatsapp_config')}</h2>
+                            <button
+                                onClick={() => setWaFormOpen(v => !v)}
+                                className="text-xs px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg text-slate-300 transition-all"
+                            >
+                                {waFormOpen ? 'Annuler' : org.wabaId ? '🔄 Reconfigurer' : '🔗 Connecter'}
+                            </button>
+                        </div>
                         <div className="space-y-2 text-sm">
                             <div className="flex items-center justify-between">
                                 <span className="text-slate-400">{t('settings.wa_account')}</span>
@@ -238,6 +271,56 @@ export default function SettingsPage() {
                                 ⚠️ {t('settings.token_expired_alert')}
                             </div>
                         )}
+                        {waFormOpen && (
+                            <form onSubmit={handleWaSetup} className="mt-5 space-y-3 border-t border-slate-700 pt-5">
+                                <div>
+                                    <label className="block text-xs text-slate-400 mb-1">WABA ID *</label>
+                                    <input
+                                        required
+                                        value={waForm.wabaId}
+                                        onChange={e => setWaForm(f => ({ ...f, wabaId: e.target.value }))}
+                                        placeholder="ex: 938685848818318"
+                                        className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-xs font-mono focus:ring-2 focus:ring-emerald-500 outline-none"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-xs text-slate-400 mb-1">System User Token *</label>
+                                    <input
+                                        required
+                                        type="password"
+                                        value={waForm.accessToken}
+                                        onChange={e => setWaForm(f => ({ ...f, accessToken: e.target.value }))}
+                                        placeholder="EAAxxxxxxx..."
+                                        className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-xs font-mono focus:ring-2 focus:ring-emerald-500 outline-none"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-xs text-slate-400 mb-1">Phone Number ID</label>
+                                    <input
+                                        value={waForm.phoneNumberId}
+                                        onChange={e => setWaForm(f => ({ ...f, phoneNumberId: e.target.value }))}
+                                        placeholder="ex: 969048009628694"
+                                        className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-xs font-mono focus:ring-2 focus:ring-emerald-500 outline-none"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-xs text-slate-400 mb-1">Numéro de téléphone</label>
+                                    <input
+                                        value={waForm.phoneNumber}
+                                        onChange={e => setWaForm(f => ({ ...f, phoneNumber: e.target.value }))}
+                                        placeholder="+221700000000"
+                                        className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-xs font-mono focus:ring-2 focus:ring-emerald-500 outline-none"
+                                    />
+                                </div>
+                                <button
+                                    type="submit"
+                                    disabled={waSaving}
+                                    className="w-full py-2.5 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 text-white text-sm font-semibold rounded-xl transition-all"
+                                >
+                                    {waSaving ? 'Connexion...' : 'Connecter WhatsApp'}
+                                </button>
+                            </form>
+                        )}
                     </section>
 
                     <section className="bg-white p-6 rounded-2xl border border-indigo-100 shadow-sm shadow-indigo-50">

apps/api/src/scripts/copy-wa-config.ts

@@ -0,0 +1,63 @@
+import { PrismaClient } from '@repo/database';
+
+const prisma = new PrismaClient();
+
+const TESTCRM_ID     = 'ba012b65-2289-4ded-956d-aeaaf908fb30';
+const XAMLE_GLOBAL   = 'default-org-id';
+
+const NEW_WABA_ID    = '1503271284790621';
+const NEW_PHONE_ID   = '1135406776315489';
+const NEW_PHONE_NUM  = '+221788227676';
+
+async function main() {
+    // Récupère le systemUserToken chiffré de xamlé global (pour l'API Meta)
+    const source = await prisma.organization.findUnique({
+        where: { id: XAMLE_GLOBAL },
+        select: { systemUserToken: true, openAiApiKey: true, googleAiApiKey: true }
+    });
+
+    if (!source?.systemUserToken) {
+        console.error('[ERROR] XAMLÉ Global systemUserToken not found.');
+        process.exit(1);
+    }
+    console.log(`[OK] systemUserToken récupéré de XAMLÉ Global (${source.systemUserToken.length} chars)`);
+
+    // 1. Mettre à jour testcrm avec le nouveau WABA et le même token
+    await prisma.organization.update({
+        where: { id: TESTCRM_ID },
+        data: {
+            wabaId:          NEW_WABA_ID,
+            systemUserToken: source.systemUserToken,
+            openAiApiKey:    source.openAiApiKey,
+            googleAiApiKey:  source.googleAiApiKey,
+        }
+    });
+    console.log(`[1/2] testcrm: wabaId=${NEW_WABA_ID}, token + AI keys copiés`);
+
+    // 2. Créer le WhatsAppPhoneNumber pour testcrm
+    await prisma.whatsAppPhoneNumber.upsert({
+        where: { id: NEW_PHONE_ID },
+        update: { organizationId: TESTCRM_ID, displayPhone: NEW_PHONE_NUM },
+        create: {
+            id:             NEW_PHONE_ID,
+            displayPhone:   NEW_PHONE_NUM,
+            organizationId: TESTCRM_ID,
+        }
+    });
+    console.log(`[2/2] phoneNumber ${NEW_PHONE_NUM} (${NEW_PHONE_ID}) → testcrm`);
+
+    // Vérification finale
+    const result = await prisma.organization.findUnique({
+        where: { id: TESTCRM_ID },
+        select: {
+            name: true,
+            wabaId: true,
+            phoneNumbers: { select: { id: true, displayPhone: true } }
+        }
+    });
+    console.log('\n[RESULT testcrm]', JSON.stringify(result, null, 2));
+}
+
+main()
+    .catch(e => { console.error(e); process.exit(1); })
+    .finally(() => prisma.$disconnect());