docs/implementation_plan_whatsapp_templates.md

Implementation Plan: WhatsApp Templates Management & Security Hardening

This document outlines the technical implementation for the WhatsApp Message Templates management interface and the prerequisite security hardening of the administrative routes.

1. Objectives

• Security First: Fix tenant isolation vulnerabilities in administrative routes.
• Meta Compliance: Provide a UI to Sync and Create templates to justify whatsapp_business_management permission.
• Global Readiness: Ensure 100% i18n coverage (EN/FR) for the Meta App Review screencast.

2. Step 0: Security Hardening (Prerequisite)

Audit findings revealed that apps/api/src/routes/admin.ts lacks tenant isolation in several GET/POST handlers.

• Action: Update all queries to include where: { organizationId: request.organizationId }.
• Affected Endpoints: /stats, /users, /enrollments, /live-feed.

3. Backend Architecture (API)

3.1 Service Layer (apps/api/src/services/whatsapp.ts)

• fetchMetaTemplates: Fetches existing templates from Meta.
• createMetaTemplate: New method to submit a template for approval.

async createMetaTemplate(config: { accessToken: string; wabaId: string }, template: any) {
    const url = `${this.baseUrl}/${config.wabaId}/message_templates`;
    return axios.post(url, template, {
        headers: { 'Authorization': `Bearer ${config.accessToken}` }
    });
}

3.2 API Routes (apps/api/src/routes/whatsapp.ts)

• GET /v1/whatsapp/templates: Lists and syncs templates.
• POST /v1/whatsapp/templates: Accepts name, language, category, and components to create a new template on Meta.

---

4. Frontend Architecture (Admin)

4.1 Templates Page (TemplatesPage.tsx)

• i18n Implementation: Mandatory use of useTranslation() for all labels.
• Template Creation Form:
  • Fields: Name (uppercase/underscores), Category (MARKETING/UTILITY), Language, Body Text.
  • Submit: Triggers the Meta approval workflow.
• Sync Logic: Integration with React Query invalidateQueries to refresh the table after creation or manual sync.

4.2 Translation Keys (en.json)

Add keys for:

• whatsapp.templates.title
• whatsapp.templates.sync_button
• whatsapp.templates.create_button
• whatsapp.templates.status_approved
• etc.

---

5. Implementation Steps

1. Phase 1: Security: Patch admin.ts routes.
2. Phase 2: Backend: Extend WhatsAppService and add Template routes.
3. Phase 3: Frontend: Build TemplatesPage.tsx with creation form and full i18n.
4. Phase 4: Validation: Verify the flow with a real Meta Business account for the screencast.