CountMessageTemplate

src/components/meta/CountMessageTemplate.vue

Display Low 1 uso

Indicador de uso do limite diário de templates de mensagem Meta (WhatsApp Business API). Exibe um vs-chip colorido com o contador "X de Y conversas/24h", onde X é o número de mensagens enviadas e Y é o limite configurado na instância. A cor do chip muda conforme a proximidade do limite (success / warning / danger). Tooltip explica o significado do limite.

Indicador de Limite Diário de Templates

Único uso real — :instance recebe o objeto da instância WhatsApp com messaging_send e messaging_limit. A cor é calculada automaticamente pelo componente.

50 de 1.000 conversas/24h success — ≥35% restante

700 de 1.000 conversas/24h warning — 20-35% restante

900 de 1.000 conversas/24h danger — <20% restante

<count-message-template :instance="instance"></count-message-template>

Estado Success (≥35% restante)

Chip verde quando mais de 35% do limite diário ainda está disponível.

50 de 1.000 conversas/24h

<!-- Exemplo sintético — estado success: 50 de 1000 enviados -->
<count-message-template
  :instance="{ messaging_send: 50, messaging_limit: 1000 }"
></count-message-template>

Estado Warning (20-35% restante)

Chip amarelo quando entre 20% e 35% do limite ainda está disponível (uso entre 65% e 80%).

700 de 1.000 conversas/24h

<!-- Exemplo sintético — estado warning: 700 de 1000 enviados -->
<count-message-template
  :instance="{ messaging_send: 700, messaging_limit: 1000 }"
></count-message-template>

Limite Ilimitado

Chip verde quando messaging_limit inclui 'UNLIMITED' ou não existe. Sempre exibe success independente de messaging_send.

500 de Ilimitado conversas/24h

<!-- Exemplo sintético — limite ilimitado: chip sempre verde -->
<count-message-template
  :instance="{ messaging_send: 500, messaging_limit: 'UNLIMITED' }"
></count-message-template>

API

<!-- instance: objeto da instância WhatsApp com messaging_send e messaging_limit. -->
<!-- messaging_limit pode ser número ou a string 'UNLIMITED'. -->
<!-- Cor automática: success (>=35% restante), warning (20-35%), danger (<20%). -->
<count-message-template :instance="instance"></count-message-template>

Lógica de cores

Estado	Condição	Cor
success	`messaging_limit` inclui `'UNLIMITED'` ou não existe	Sempre verde
success	≥ 35% do limite restante	Verde
warning	Entre 20% e 35% restante (uso 65-80%)	Amarelo
danger	< 20% restante (uso >80%)	Vermelho

Props

Nome	Tipo	Default	Obrig.	Descrição
`instance`	Object	`{ messaging_send: 0, messaging_limit: 0 }`	Sim	Objeto de instância com `messaging_send` (enviados) e `messaging_limit` (limite). O limite pode ser numérico ou a string `'UNLIMITED'`.

Dependências

vs-chip (Vuesax) — chip colorido com a contagem
vx-tooltip — tooltip do ícone HelpCircle
feather-icon — HelpCircleIcon
maskLimitMessageTemplate — util em src/utils/index.js

Onde é usado

src/views/chat-attendance/MetaMessageTemplatePopUp.vue

Contexto de uso: Sempre no topo do popup de seleção de template Meta, antes do select-message-template. Recebe o mesmo objeto :instance passado ao select-message-template — não precisa de dados extras.