InteractiveMessagePopup

src/components/attendance/InteractiveMessagePopup.vue

Overlay Medium 2 usos

Popup 820px para composição e envio de mensagens interativas do WhatsApp (botões de resposta rápida ou CTA URL). Duas seções: (1) corpo da mensagem com contador de caracteres; (2) configuração de botões. O modo quick_reply vs cta_url é alternado internamente pelo usuário — não há prop para definir o modo inicial. Valida e emite payload estruturado para a API WhatsApp.

Modo Quick Reply (Resposta Rápida)

Modo padrão ao abrir. Lista de inputs de texto para botões de resposta rápida. Máximo 10 botões (configurável). Ao menos 1 botão obrigatório — botão delete desabilitado quando só restam 1. Payload: actions = [{ id, title }].

<interactive-message-popup
  :active.sync="interactiveMessagePopupActive"
  :is-sending-interactive-message="isSendingInteractiveMessage"
  @submit="sendInteractiveMessage"
/>

Modo CTA URL (Link Externo)

Alternado pelo usuário via radio. Dois campos: texto do botão (displayText, máx 20 chars) + URL. URL normalizada automaticamente — adiciona https:// se não houver protocolo. Payload: actions = [{ name: 'cta_url', parameters: [{ display_text, url }] }].

<!-- Exemplo sintético — props opcionais não usadas no admin (defaults suficientes) -->
<interactive-message-popup
  :active.sync="interactiveMessagePopupActive"
  :is-sending-interactive-message="isSendingInteractiveMessage"
  :max-quick-reply-buttons="5"
  :max-quick-reply-title-length="20"
  :max-body-length="512"
  @submit="sendInteractiveMessage"
/>

Estado Enviando

Quando isSendingInteractiveMessage=true, o botão Enviar fica desabilitado e exibe "Enviando..." para evitar duplo envio.

<interactive-message-popup
  :active.sync="interactiveMessagePopupActive"
  :is-sending-interactive-message="true"
  @submit="sendInteractiveMessage"
/>

Estrutura do Payload (@submit)

O evento @submit emite objetos com estrutura diferente dependendo do modo. Botões vazios são filtrados automaticamente no payload do quick_reply.

quick_reply

{
  "components": {
    "body": {
      "text": "Como posso..."
    }
  },
  "actions": [
    {
      "id": "btn_0",
      "title": "Ver pedidos"
    },
    {
      "id": "btn_1",
      "title": "Falar com atendente"
    }
  ]
}

cta_url

{
  "components": {
    "body": {
      "text": "Acesse nosso..."
    }
  },
  "actions": [
    {
      "name": "cta_url",
      "parameters": [{
        "display_text": "Ver Catálogo",
        "url": "https://..."
      }]
    }
  ]
}

API

<!-- active: controla visibilidade com .sync. -->
<!-- isSendingInteractiveMessage: desabilita botão Enviar → mostra 'Enviando...'. -->
<!-- @submit: payload { components: { body: { text } }, actions: [...] } -->
<interactive-message-popup
  :active.sync="interactiveMessagePopupActive"
  :is-sending-interactive-message="isSendingInteractiveMessage"
  @submit="sendInteractiveMessage"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`active`	Boolean	false	Não	Controla visibilidade. Usar com `.sync` (emite `update:active` ao fechar).
`isSendingInteractiveMessage`	Boolean	false	Não	Quando true: botão Enviar disabled + texto "Enviando...". Previne duplo envio.
`maxQuickReplyButtons`	Number	10	Não	Máximo de botões quick_reply. Botão "+ Adicionar" desabilitado ao atingir.
`maxQuickReplyTitleLength`	Number	20	Não	Máximo de caracteres no texto de cada botão (quick_reply e cta_url).
`maxBodyLength`	Number	1024	Não	Máximo de caracteres no corpo da mensagem.

Eventos

Evento	Payload	Descrição
`@update:active`	Boolean	Suporte a `.sync` — fecha ou abre o popup.
`@submit`	`{ components, actions }`	Payload formatado para a API WhatsApp. Ver estrutura acima.

Validações internas

Campo	Regra	Comportamento ao falhar
Corpo	Obrigatório, não vazio	`$vs.notify` warning
CTA URL — displayText	Obrigatório	`$vs.notify` warning
CTA URL — url	URL válida via `isUrl()`	`$vs.notify` warning
Quick reply	Ao menos 1 botão com texto	`$vs.notify` warning

Dependências

vs-popup vs-radio vs-input vs-button $vs.notify isUrl (src/utils/index.js)

Onde é usado (2 usos)

src/views/chat-attendance/Index.vue:1087

src/views/chat-attendance/NewIndex.vue (uso idêntico)