Skip to main content

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).

TemaPágina
Pantalla de conexiones, tarjetas, modales (Web, WhatsApp QR, Instagram), servicioUI de conexiones
Flujo OAuth de Instagram, retorno por query params, errores, aviso de expiraciónOAuth de Instagram
Iconos y colores por canal en conexiones y chatIconos de canal
Estado failed de mensajes y su motivoEstado failed de mensajes

Qué cambió en la rama​

ÁreaArchivosCambio
Conexionesfeatures/connections/connections.constants.tsInstagram pasa a enabled: true; constantes META_OAUTH_QUERY, META_OAUTH_RESULT, META_OAUTH_REASONS, META_NOT_CONFIGURED_CODE, INSTAGRAM_EXPIRY_WARNING_DAYS
Conexionesconnection-instagram-modal/* (nuevo)Modal de configuración de la conexión de Instagram
Conexionesconnections-table/*Flujo OAuth, retorno de Meta, menú y acciones de Instagram, aviso de expiración
Conexionesconnections.module.tsDeclara ConnectionInstagramModalComponent
Serviciocore/services/api/connection.service.tsfindConnectionById, authorizeInstagram
Serviciocore/helpers/global/global.constant.tsAPI_URLS.META_OAUTH_INSTAGRAM = '/meta/oauth/instagram'
Interfacescore/interfaces/api/connection.interface.tsConnectionMetaConfig y Connection.metaConfig
Mensajesmessage.interfaces.ts, ticket.interface.ts, chat-socket.interface.ts, message-chat.interface.tsMessageAck incluye failed; tipo MessageFailureReason; failureReason / failureDetail
Estadoticket.actions.ts, ticket.reducers.tsticketLastMessageAckChanged; ticketUpdatedFromSocket con messageId y ack
Chatchat-conversation.*, chat-list-item.*, chat-list.component.tsIcono de fallo, acuse de la lista y enlaces clicables
Utilidadcore/helpers/global/whatsapp-markup.util.tslinkify opcional
i18n y estilosassets/i18n/{es,en}.json, src/styles.scssClaves connections.instagram.*, messages.failure.* y variable --zg-chat-ack-failed
Menorshared/components/header/header.component.tsTexto 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ónimoDónde
CONNECTION_READRuta connections (content.routes.ts y connections-routing.module.ts)
CONNECTION_CREATEBotón "Agregar conexión" y acción "Reautorizar" de Instagram
CONNECTION_UPDATEEditar conexiones Web, WhatsApp e Instagram
CONNECTION_DELETEEliminar 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_CHANNELSCómo se crea
websíPOST /connections/create con webConfig
whatsapp-qrsíPOST /connections/create + sesión QR por socket
instagramsí (nuevo en esta rama)OAuth; no hay create
whatsapp-cloudno ("Próximamente")—
facebookno ("Próximamente")—