File size: 2,683 Bytes
0f2f80a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | # 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.
```typescript
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.
|