feat(ux): interactive buttons for language choice + LIST menu for sector selection (8 sectors FR/Wolof)

apps/api/src/services/queue.ts

@@ -15,27 +15,34 @@ const connection = process.env.REDIS_URL
 export const whatsappQueue = new Queue('whatsapp-queue', { connection: connection as any });
 
 export async function scheduleMessage(userId: string, text: string, delayMs: number = 0) {
-    await whatsappQueue.add('send-message', {
-        userId,
-        text
-    }, {
-        delay: delayMs
-    });
+    await whatsappQueue.add('send-message', { userId, text }, { delay: delayMs });
 }
 
 export async function scheduleTrackDay(userId: string, trackId: string, dayNumber: number, delayMs: number = 0) {
-    await whatsappQueue.add('send-content', {
-        userId,
-        trackId,
-        dayNumber
-    }, {
-        delay: delayMs
-    });
+    await whatsappQueue.add('send-content', { userId, trackId, dayNumber }, { delay: delayMs });
 }
 
 export async function enrollUser(userId: string, trackId: string) {
-    await whatsappQueue.add('enroll-user', {
-        userId,
-        trackId
-    });
+    await whatsappQueue.add('enroll-user', { userId, trackId });
+}
+
+/** Send a WhatsApp interactive BUTTON message (max 3 buttons). */
+export async function scheduleInteractiveButtons(
+    userId: string,
+    bodyText: string,
+    buttons: Array<{ id: string; title: string }>
+) {
+    await whatsappQueue.add('send-interactive-buttons', { userId, bodyText, buttons });
+}
+
+/** Send a WhatsApp interactive LIST message (up to 10 rows, grouped in sections). */
+export async function scheduleInteractiveList(
+    userId: string,
+    headerText: string,
+    bodyText: string,
+    buttonLabel: string,
+    sections: Array<{ title: string; rows: Array<{ id: string; title: string; description?: string }> }>
+) {
+    await whatsappQueue.add('send-interactive-list', { userId, headerText, bodyText, buttonLabel, sections });
 }
+

apps/api/src/services/whatsapp.ts

@@ -1,5 +1,5 @@
 import { prisma } from './prisma';
-import { scheduleMessage, enrollUser, whatsappQueue, scheduleTrackDay } from './queue';
+import { scheduleMessage, enrollUser, whatsappQueue, scheduleTrackDay, scheduleInteractiveButtons, scheduleInteractiveList } from './queue';
 import { QuotaExceededError } from './ai/openai-provider';
 
 export class WhatsAppService {
@@ -12,11 +12,14 @@ export class WhatsAppService {
 
         if (!user) {
             if (normalizedText === 'INSCRIPTION') {
-                user = await prisma.user.create({
-                    data: { phone }
-                });
-                await scheduleMessage(user.id, "Bienvenue sur SafeTrack Edu ! 🎉\nChoisissez votre langue / Tànnal sa làkk:\n1. Français 🇫🇷\n2. Wolof 🇸🇳");
-                console.log('New user created, asked for language.');
+                user = await prisma.user.create({ data: { phone } });
+                await scheduleInteractiveButtons(user.id,
+                    "Bienvenue sur Xamle ! 🎉\nChoisissez votre langue / Tànnal sa làkk :",
+                    [
+                        { id: 'LANG_FR', title: 'Français 🇫🇷' },
+                        { id: 'LANG_WO', title: 'Wolof 🇸🇳' }
+                    ]
+                );
                 return;
             } else {
                 console.log(`Unregistered user ${phone} sent a message. Need INSCRIPTION.`);
@@ -32,7 +35,13 @@ export class WhatsAppService {
                 where: { id: user.id },
                 data: { city: null, activity: null }
             });
-            await scheduleMessage(user.id, "Réinitialisation réussie. Choisissez votre langue :\n1. Français 🇫🇷\n2. Wolof 🇸🇳");
+            await scheduleInteractiveButtons(user.id,
+                "Réinitialisation réussie – choisissez votre langue / Tànnal sa làkk :",
+                [
+                    { id: 'LANG_FR', title: 'Français 🇫🇷' },
+                    { id: 'LANG_WO', title: 'Wolof 🇸🇳' }
+                ]
+            );
             return;
         }
 
@@ -169,35 +178,90 @@ export class WhatsAppService {
 
         // 2. Check Onboarding State (Missing Language -> Missing Activity)
         if (!user.city) {
-            // First time after INSCRIPTION they should answer 1 or 2
-            if (normalizedText === '1' || normalizedText === '2') {
-                const lang = normalizedText === '1' ? 'FR' : 'WOLOF';
+            // Accept button ID or legacy text
+            const isLangFR = normalizedText === 'LANG_FR' || normalizedText === '1';
+            const isLangWO = normalizedText === 'LANG_WO' || normalizedText === '2';
+
+            if (isLangFR || isLangWO) {
+                const lang = isLangFR ? 'FR' : 'WOLOF';
                 user = await prisma.user.update({
                     where: { id: user.id },
-                    data: { language: lang, city: 'SET' } // Using city as a step flag for MVP
+                    data: { language: lang, city: 'SET' }
                 });
 
-                const prompt = lang === 'FR'
-                    ? "Parfait ! Pour personnaliser votre expérience, quel est votre secteur d'activité ou projet professionnel ? (ex: Agriculture, Commerce, Tech...)"
-                    : "Baax na ! Ngir gën a waajal sa njàng, ban mbir ngay def ? (Mbay, Njaay, Tech...)";
-                await scheduleMessage(user.id, prompt);
+                // Sector LIST — 8 common business types
+                const isWolof = lang === 'WOLOF';
+                await scheduleInteractiveList(
+                    user.id,
+                    isWolof ? 'Ban mbir ngay def ?' : 'Ton secteur d\'activité',
+                    isWolof
+                        ? 'Tànnal sa mbir ci suuf ngir waajal sa njàng :'
+                        : 'Choisis ton secteur pour personnaliser ta formation :',
+                    isWolof ? 'Tànnal' : 'Choisir',
+                    [{
+                        title: isWolof ? 'Mbir yi' : 'Secteurs',
+                        rows: [
+                            { id: 'SEC_COMMERCE', title: isWolof ? '🛒 Njaay / Commerce' : '🛒 Commerce / Vente', description: isWolof ? 'Njaay yëgël, boutik...' : 'Boutique, marché, revente...' },
+                            { id: 'SEC_AGRI', title: isWolof ? '🌾 Mbay / Agriculture' : '🌾 Agriculture / Élevage', description: isWolof ? 'Mbay, génaaw-génaaw...' : 'Cultures, ferme, élevage...' },
+                            { id: 'SEC_FOOD', title: isWolof ? '🍲 Lekk / Restauration' : '🍲 Alimentation / Restauration', description: isWolof ? 'Dëkk, thiébou djeun...' : 'Cuisine, livraison, snack...' },
+                            { id: 'SEC_TECH', title: isWolof ? '💻 Tech / Digital' : '💻 Tech / Digital', description: isWolof ? 'App, internet, design...' : 'App, web, réseaux sociaux...' },
+                            { id: 'SEC_BEAUTE', title: isWolof ? '💅 Rafet / Beauté' : '💅 Beauté / Bien-être', description: isWolof ? 'Sèp bu rafet...' : 'Salon, cosmétique, soins...' },
+                            { id: 'SEC_COUTURE', title: isWolof ? '🧵 Couture / Mode' : '🧵 Couture / Mode', description: isWolof ? 'Njiit, fac...' : 'Confection, stylisme...' },
+                            { id: 'SEC_TRANSPORT', title: isWolof ? '🚗 Yëgël / Transport' : '🚗 Transport / Livraison', description: isWolof ? 'Taxi, delivery...' : 'Moto, camion, coursier...' },
+                            { id: 'SEC_AUTRE', title: isWolof ? '💡 Yeneen' : '💡 Autre secteur', description: isWolof ? 'Wax ma ci kanam...' : 'Décris ton activité ensuite' }
+                        ]
+                    }]
+                );
                 return;
             } else {
-                await scheduleMessage(user.id, "Veuillez choisir votre langue / Tànnal sa làkk:\n1. Français 🇫🇷\n2. Wolof 🇸🇳");
+                // Re-send the language buttons instead of plain text
+                await scheduleInteractiveButtons(user.id,
+                    user.language === 'WOLOF'
+                        ? 'Tànnal sa làkk / Choisissez votre langue :'
+                        : 'Veuillez choisir votre langue / Tànnal sa làkk :',
+                    [
+                        { id: 'LANG_FR', title: 'Français 🇫🇷' },
+                        { id: 'LANG_WO', title: 'Wolof 🇸🇳' }
+                    ]
+                );
                 return;
             }
         }
 
         if (!user.activity) {
-            // Whatever they type now (or dictated via audio) is their activity
+            // Resolve sector LIST reply IDs → human-readable label
+            const SECTOR_LABELS: Record<string, { fr: string; wo: string }> = {
+                SEC_COMMERCE: { fr: 'Commerce / Vente', wo: 'Njaay' },
+                SEC_AGRI: { fr: 'Agriculture / Élevage', wo: 'Mbay' },
+                SEC_FOOD: { fr: 'Alimentation / Restauration', wo: 'Lekk / Restauration' },
+                SEC_TECH: { fr: 'Tech / Digital', wo: 'Tech / Digital' },
+                SEC_BEAUTE: { fr: 'Beauté / Bien-être', wo: 'Rafet' },
+                SEC_COUTURE: { fr: 'Couture / Mode', wo: 'Couture' },
+                SEC_TRANSPORT: { fr: 'Transport / Livraison', wo: 'Transport / Yëgël' },
+            };
+
+            if (normalizedText === 'SEC_AUTRE') {
+                // Ask them to describe in their own words
+                await scheduleMessage(user.id, user.language === 'WOLOF'
+                    ? 'Waaw ! Wax ma ban mbir ngay def ci ab kàddu gatt :'
+                    : 'Parfait ! Décris ton activité en quelques mots :'
+                );
+                return;
+            }
+
+            const sectorLabel = SECTOR_LABELS[normalizedText];
+            const activity = sectorLabel
+                ? (user.language === 'WOLOF' ? sectorLabel.wo : sectorLabel.fr)
+                : text.trim(); // free-form text fallback
+
             user = await prisma.user.update({
                 where: { id: user.id },
-                data: { activity: text.trim() }
+                data: { activity }
             });
 
             const welcomeMsg = user.language === 'FR'
-                ? `Merci ! Nous avons noté votre secteur : *${user.activity}*.\nJe vous inscris maintenant à notre formation d'introduction !`
-                : `Jërëjëf ! Bind nanu la ci: *${user.activity}*.\nLéegi dinanu la dugal ci njàng mi !`;
+                ? `Parfait ! Secteur noté : *${activity}*.\nJe t'inscris à ta formation personnalisée !`
+                : `Baax na ! Bind nanu la ci: *${activity}*.\nLéegi dinanu la dugal ci njàng mi !`;
 
             await scheduleMessage(user.id, welcomeMsg);
 

apps/whatsapp-worker/src/index.ts

@@ -4,7 +4,7 @@ dns.setDefaultResultOrder('ipv4first');
 import { Worker, Job } from 'bullmq';
 import dotenv from 'dotenv';
 import { PrismaClient } from '@prisma/client';
-import { sendTextMessage, sendDocumentMessage, downloadMedia } from './whatsapp-cloud';
+import { sendTextMessage, sendDocumentMessage, downloadMedia, sendInteractiveButtonMessage, sendInteractiveListMessage } from './whatsapp-cloud';
 
 dotenv.config();
 
@@ -36,6 +36,20 @@ const worker = new Worker('whatsapp-queue', async (job: Job) => {
                 console.warn(`[WORKER] User ${userId} not found or missing phone — skipping send.`);
             }
         }
+        else if (job.name === 'send-interactive-buttons') {
+            const { userId, bodyText, buttons } = job.data;
+            const user = await prisma.user.findUnique({ where: { id: userId } });
+            if (user?.phone) {
+                await sendInteractiveButtonMessage(user.phone, bodyText, buttons);
+            }
+        }
+        else if (job.name === 'send-interactive-list') {
+            const { userId, headerText, bodyText, buttonLabel, sections } = job.data;
+            const user = await prisma.user.findUnique({ where: { id: userId } });
+            if (user?.phone) {
+                await sendInteractiveListMessage(user.phone, headerText, bodyText, buttonLabel, sections);
+            }
+        }
         else if (job.name === 'enroll-user') {
             const { userId, trackId } = job.data;