SelectMessageTemplate

src/components/meta/SelectMessageTemplate.vue

Form High 10 usos

Seletor de templates de mensagem Meta (WhatsApp Business API). Exibe tabela paginada de templates com busca e ordenação. Ao selecionar um template, mostra preview completo (cabeçalho, corpo, rodapé, botões) e formulário de preenchimento de parâmetros variáveis ({{1}}, {{2}}, etc.). Suporta dois modos de parâmetros: via tagList (botões de seleção de variáveis) ou input livre. Upload de mídia para headers não-TEXT. Usado amplamente em fluxos de disparo ativo de mensagens no WhatsApp.

No Chat (com envio)

Uso dentro do chat ativo. Botão "Nome" insere o contactName nos parâmetros. Botão "Enviar Mensagem" visível. sending=true desabilita o botão durante o envio. Sempre use ref para poder chamar cleanData(true) ao fechar o popup.

Selecione Modelo de Mensagens

Nome ↕	Status ↕	Categoria ↕	Custo ↕
Boas-vindas novo cliente	Aprovado	MARKETING	R$ 0,49
Confirmação de pedido	Aprovado	UTILITY	R$ 0,19
Atualização de status	Pendente	UTILITY	R$ 0,19
Recuperação de carrinho abandonado	Rejeitado	MARKETING	R$ 0,49

›

Preview — Confirmação de pedido

Cabeçalho (TEXT)

Seu pedido foi confirmado!

Corpo

Olá {{1}}, seu pedido {{2}} foi confirmado e está sendo preparado. Previsão de entrega: {{3}} dias úteis.

Rodapé

Pedbot Commerce

Botões

Rastrear pedido Falar com suporte

Parâmetros

Parâmetro {{1}}

Parâmetro {{2}}

Parâmetro {{3}}

<select-message-template
  :itemsPerPage="6"
  :instance="instance"
  :filterByRole="true"
  ref="select-message-template"
  title="Selecione Modelo de Mensagens"
  :contact-name="customerName"
  :sending="submitData"
  @on-select-template="selectTemplate"
  @sendMessageTemplate="sendMessageTemplate()"
></select-message-template>

<!-- Para limpar ao fechar o popup: -->
<!-- this.$refs['select-message-template'].cleanData(true) -->

Apenas Seleção (sem botão Enviar)

showSendMessage=false oculta o botão "Enviar Mensagem" — o pai controla o envio. Padrão em agendamentos e finalizações onde o envio está integrado ao fluxo do popup pai.

Selecione Modelo de Mensagens

Nome ↕	Status ↕	Categoria ↕	Custo ↕
Notificação de pagamento	Aprovado	UTILITY	R$ 0,19
Lembrete de agendamento	Aprovado	UTILITY	R$ 0,19
Promoção especial	Aprovado	MARKETING	R$ 0,49

›

Preview — Lembrete de agendamento

Corpo

Olá {{1}}, lembramos que você tem um agendamento marcado para {{2}} às {{3}}. Por favor, confirme sua presença.

Botões

Confirmar Cancelar

Parâmetros

Parâmetro {{1}}

Parâmetro {{2}}

showSendMessage=false — botão Enviar oculto. Pai controla o envio via @on-select-template.

<select-message-template
  :itemsPerPage="6"
  :showSendMessage="false"
  :filterByRole="true"
  :instance="currentInstance"
  :contact-name="customerName"
  ref="select-message-template"
  title="Selecione Modelo de Mensagens"
  @on-select-template="selectTemplate"
></select-message-template>

Fora do Chat (campanhas com statusVariables)

outChat=true substitui o botão "Nome" por botões de statusVariables — variáveis dinâmicas da campanha (ex: nome, email, status_pedido). Padrão em campanhas e disparos automáticos de ERP.

Selecione Modelo de Mensagens

Preview — Atualização de status do pedido

Corpo

Olá {{1}}, o status do seu pedido {{2}} foi atualizado para: {{3}}. Acesse seu painel para mais detalhes.

Rodapé

Pedbot ERP Integrations

Parâmetros — modo campanha (outChat=true)

Parâmetro {{1}}

Parâmetro {{2}}

<select-message-template
  :itemsPerPage="6"
  :instance="selectedInstance"
  ref="select-message-template"
  title="Selecione Modelo de Mensagens"
  :outChat="true"
  :showSendMessage="true"
  :statusVariables="variables"
  @on-select-template="selectTemplate"
/>

Colunas Customizadas

viewCollumns restringe as colunas visíveis na tabela. Padrão em agendamentos: exibe apenas Nome e Status, ocultando Categoria e Custo.

Nome ↕	Status ↕
Boas-vindas novo cliente	Aprovado
Confirmação de pedido	Aprovado
Atualização de status	Pendente
Promoção relâmpago Black Friday	Rejeitado

<select-message-template
  title=""
  :itemsPerPage="4"
  :instance="instance"
  :filterByRole="true"
  v-if="openSelectTemplate"
  :showSendMessage="false"
  ref="select-message-template"
  :viewCollumns="['name', 'status']"
  @on-select-template="selectTemplate"
></select-message-template>

Com Tag List (parâmetros via botões)

tagList com nomes de variáveis substitui os inputs livres por botões flat para seleção de parâmetros. Útil quando os parâmetros têm valores pré-definidos (ex: campos de planilha). Nota: sem uso real encontrado para SelectMessageTemplate — tagList aparece no admin apenas para Vue2Editor.

Preview — Template selecionado

Corpo

Olá {{1}}, seu pedido {{2}} no valor de {{3}} foi processado com sucesso.

Parâmetros — modo tag list

Parâmetro {{1}} — selecione a variável:

Parâmetro {{2}} — selecione a variável:

Parâmetro {{3}} — selecione a variável:

<!-- Exemplo sintético — tagList no SelectMessageTemplate sem uso real encontrado -->
<select-message-template
  :instance="instance"
  :showSendMessage="false"
  :tagList="['nome', 'email', 'status_pedido', 'valor_total']"
  ref="select-message-template"
  title="Selecione Modelo"
  @on-select-template="selectTemplate"
/>

API

<!-- instance: {id, waba_id} da conexão WhatsApp. filterByRole: filtra por perfil. -->
<!-- contact-name: nome inserido com botão 'Nome' nos parâmetros. -->
<!-- outChat + statusVariables: modo campanha com variáveis dinâmicas. -->
<!-- showSendMessage: false quando pai controla o envio. sending: desabilita botão Enviar. -->
<!-- viewCollumns: colunas visíveis ['name','status','category','cost']. -->
<!-- @on-select-template: emitido a cada mudança. -->
<!-- ref + cleanData(true): limpar ao fechar o popup. -->
<select-message-template
  :instance="instance"
  :itemsPerPage="6"
  :filterByRole="true"
  :showSendMessage="false"
  :contact-name="customerName"
  :sending="isSending"
  :viewCollumns="['name', 'status', 'category']"
  ref="select-message-template"
  title="Selecione Modelo de Mensagens"
  @on-select-template="onSelectTemplate"
  @sendMessageTemplate="sendMessage"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`instance`	Object	`{ id: null, waba_id: null }`	—	Objeto de instância WhatsApp com `id` e `waba_id`. Usado para filtrar templates da instância correta.
`title`	String	`"Selecionar Modelo de Mensagens"`	—	Título exibido acima da tabela.
`contactName`	String	`null`	—	Nome do contato. Botão "Nome" insere este valor no campo de parâmetro correspondente.
`viewCollumns`	Array	`['name', 'status', 'category', 'cost']`	—	Colunas visíveis na tabela. Possibilidades: `'name'`, `'status'`, `'category'`, `'cost'`.
`itemsPerPage`	Number	`10`	—	Itens por página na tabela de templates.
`showSendMessage`	Boolean	`true`	—	Quando `true`, exibe botão "Enviar Mensagem" após preenchimento dos parâmetros.
`outChat`	Boolean	`false`	—	Modo "fora do chat" (campanhas). Substitui botão "Nome" por botões de `statusVariables`.
`statusVariables`	Array	`[]`	—	Variáveis exibidas como botões quando `outChat=true`. Ex: `['nome', 'email', 'status_pedido']`.
`sending`	Boolean	`false`	—	Quando `true`, desabilita o botão "Enviar Mensagem" (previne duplo envio).
`filterByRole`	Boolean	`false`	—	Filtra templates pelo role do usuário logado ao buscar da API.

Eventos

Nome	Payload	Descrição
`on-select-template`	`{ selectedTemplate, templateParameters, headerParameters, headerImageType, requireHeaders, paramsCount }`	Emitido a cada mudança na seleção ou nos parâmetros. Payload completo com tudo que o pai precisa para enviar a mensagem. Atenção: emitido continuamente, não só ao clicar Enviar.
`sendMessageTemplate`	—	Emitido quando usuário clica em "Enviar Mensagem". Delegado ao pai.

Métodos expostos via ref

Método	Parâmetros	Descrição
`cleanData(resetPage)`	`resetPage: Boolean`	Limpa a seleção e parâmetros. Chamar com `true` ao fechar o popup pai. Padrão obrigatório no admin: todos os usos com `ref="select-message-template"`.

Estados internos

Estado	Descrição
`loading-templates`	fetchMessageTemplate() em progresso. vs-table com noDataText visível se lista vazia.
`template-list`	Tabela com templates paginados. Busca e ordenação por coluna habilitadas.
`template-selected`	Template selecionado. Preview completo visível abaixo da tabela: cabeçalho + corpo + rodapé + botões.
`filling-params`	Template com parâmetros selecionado. Formulário de parâmetros exibido. Body atualizado em tempo real.
`header-media-upload`	Header não-TEXT: componente Upload visível. Aguardando upload de imagem/vídeo/documento.
`ready-to-send`	Todos os parâmetros preenchidos. Botão "Enviar Mensagem" habilitado.
`sending`	`sending=true`. Botão "Enviar Mensagem" desabilitado.

Dependências

Vuesax: vs-table, vs-th, vs-tr, vs-td, vs-chip, vs-button, vs-input, vs-pagination, $vs.notify
Custom: Upload (src/components/upload/Upload.vue) — para header de mídia; vx-tooltip — tooltip de ajuda no CountMessageTemplate
Vuex: metaMessageTemplate (módulo dinâmico), auth.bearer, plan (getter), chatTicketCosts/fetch
Utils: optionsHeader() — formatos de header; parseModelTemplateStatusOrColor() — status em texto/cor

Onde é usado

src/views/chat-attendance/MetaMessageTemplatePopUp.vue
src/views/chat-attendance/FinalizePopup.vue
src/views/schedules/ScheduleMessagePopup.vue
src/views/orders/erp-integrations/StatusNotification.vue
src/views/orders/erp-integrations/PixSelectMessageTemplate.vue
+ 5 outros arquivos (10 usos totais)

Custo por categoria (on-demand): UTILITY = R$ 0,19 · MARKETING = R$ 0,49 · AUTHENTICATION = R$ 0,29. Em outros planos, custo é exibido como "1 atendimento". Os valores padrão são sobrescritos por fetchTicketCosts() que busca chatTicketCosts.sum_costs_by_type da API. O pai deve verificar requireHeaders no payload de @on-select-template para saber se precisa aguardar upload de mídia antes de habilitar o envio.