Conexiones Meta (rama feat/meta_connections)
La rama feat/meta_connections del frontend extiende la pantalla Conexiones (/connections) para gestionar el canal Instagram y deja al chat preparado para mostrar mensajes rechazados por el canal. Se compone de 29 archivos modificados respecto a main (git diff --stat origin/main origin/feat/meta_connections: 807 inserciones, 43 borrados).
| Tema | Página |
|---|---|
| Pantalla de conexiones, tarjetas, modales (Web, WhatsApp QR, Instagram), servicio | UI de conexiones |
| Flujo OAuth de Instagram, retorno por query params, errores, aviso de expiración | OAuth de Instagram |
| Iconos y colores por canal en conexiones y chat | Iconos de canal |
Estado failed de mensajes y su motivo | Estado failed de mensajes |
Qué cambió en la rama
| Área | Archivos | Cambio |
|---|---|---|
| Conexiones | features/connections/connections.constants.ts | Instagram pasa a enabled: true; constantes META_OAUTH_QUERY, META_OAUTH_RESULT, META_OAUTH_REASONS, META_NOT_CONFIGURED_CODE, INSTAGRAM_EXPIRY_WARNING_DAYS |
| Conexiones | connection-instagram-modal/* (nuevo) | Modal de configuración de la conexión de Instagram |
| Conexiones | connections-table/* | Flujo OAuth, retorno de Meta, menú y acciones de Instagram, aviso de expiración |
| Conexiones | connections.module.ts | Declara ConnectionInstagramModalComponent |
| Servicio | core/services/api/connection.service.ts | findConnectionById, authorizeInstagram |
| Servicio | core/helpers/global/global.constant.ts | API_URLS.META_OAUTH_INSTAGRAM = '/meta/oauth/instagram' |
| Interfaces | core/interfaces/api/connection.interface.ts | ConnectionMetaConfig y Connection.metaConfig |
| Mensajes | message.interfaces.ts, ticket.interface.ts, chat-socket.interface.ts, message-chat.interface.ts | MessageAck incluye failed; tipo MessageFailureReason; failureReason / failureDetail |
| Estado | ticket.actions.ts, ticket.reducers.ts | ticketLastMessageAckChanged; ticketUpdatedFromSocket con messageId y ack |
| Chat | chat-conversation.*, chat-list-item.*, chat-list.component.ts | Icono de fallo, acuse de la lista y enlaces clicables |
| Utilidad | core/helpers/global/whatsapp-markup.util.ts | linkify opcional |
| i18n y estilos | assets/i18n/{es,en}.json, src/styles.scss | Claves connections.instagram.*, messages.failure.* y variable --zg-chat-ack-failed |
| Menor | shared/components/header/header.component.ts | Texto de notificaciones bloqueadas en español neutro |
Arquitectura
Usuario (Conexiones) ──► ConnectionsTableComponent
│ "Instagram" en el selector / "Reautorizar"
▼
ConnectionService.authorizeInstagram() ──► POST /meta/oauth/instagram/authorize ──► url
│ window.location.href = url (navegación completa a Instagram)
▼
Instagram (consentimiento) ──► GET /meta/oauth/instagram/callback (backend)
│ 302 → <FRONTEND_URL>/connections?meta=...
▼
ConnectionsTableComponent.handleMetaOAuthReturn()
├─ meta=connected&connectionId=X ─► toast + GET /connections/get-one/X ─► ConnectionInstagramModalComponent
└─ meta=error&reason=R ───────────► toast con connections.instagram.errors.R
Del lado del servidor, la integración (webhooks, envío por Graph API, renovación del token) está en el módulo Meta y el recurso Connection; las sesiones de WhatsApp QR en WhatsApp; el campo ack: failed en Message.
Permisos usados
| Acrónimo | Dónde |
|---|---|
CONNECTION_READ | Ruta connections (content.routes.ts y connections-routing.module.ts) |
CONNECTION_CREATE | Botón "Agregar conexión" y acción "Reautorizar" de Instagram |
CONNECTION_UPDATE | Editar conexiones Web, WhatsApp e Instagram |
CONNECTION_DELETE | Eliminar y cerrar sesión de WhatsApp |
El endpoint POST /meta/oauth/instagram/authorize exige CONNECTION_CREATE en el backend; la reautorización de una conexión existente usa el mismo endpoint, por eso la acción del frontend está bajo CONNECTION_CREATE.
Estado por canal en el frontend
Canal (ConnectionChannelType) | enabled en CONNECTION_CHANNELS | Cómo se crea |
|---|---|---|
web | sí | POST /connections/create con webConfig |
whatsapp-qr | sí | POST /connections/create + sesión QR por socket |
instagram | sí (nuevo en esta rama) | OAuth; no hay create |
whatsapp-cloud | no ("Próximamente") | — |
facebook | no ("Próximamente") | — |