Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9966b5f175268b5f870c287b1064cea2c109d85c
agenciapsilmno/src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
T
Leonardo 9966b5f175 Melissa: paginas nativas cfg-* + temas + textos com fundo + drawer WA 
CHROME COMPARTILHADO + 18 PAGINAS NATIVAS
- MelissaConfigPage: chrome unico (header, drawer mobile, sidebar com Configuracoes
  + FAQ slot, main com Suspense). Replica fake-dialog right rule e fica flush
  com o config-aside global.
- 18 wrappers finos (~25 linhas cada): cfg-precificacao, cfg-descontos,
  cfg-excecoes, cfg-convenios, cfg-wa, cfg-wa-pessoal, cfg-wa-oficial,
  cfg-wa-templates, cfg-conversas-tags/autoreply/optouts/sla/bots,
  cfg-lembretes, cfg-creditos-wa, cfg-sms, cfg-email-templates,
  cfg-recursos-extras, cfg-recursos-extras-extrato, cfg-auditoria.
- Cada wrapper usa defineAsyncComponent + Suspense pra evitar race com
  tenantStore no boot (loading travado em alguns chooser-style pages).
- MelissaLayout: imports + SECOES + MELISSA_NON_CONFIG_SLUGS + render
  conditions atualizados pra cobrir os 18 slugs.

PAGINAS LEGADAS DETECTAM CONTEXTO MELISSA
- ConfiguracoesWhatsappChooserPage, WhatsappPage, TwilioWhatsappPage,
  SmsPage, RecursosExtrasPage, EmailTemplatesPage, AddonsExtratoPage,
  AgendadorPage, ConversasAutoreplyPage: route.startsWith('/melissa')
  decide se router.push vai pro slug Melissa ou /configuracoes legado.
- Anchors <a href="/configuracoes/..."> (que recarregavam pagina e
  vazavam o usuario do Melissa) trocados por RouterLink context-aware.
- MelissaAgenda.goSettings agora vai pra /melissa/agenda-config.

PERSONALIZAR > TEMAS
- melissaThemes.js: catalogo Freud/Klein/Jung (wallpaper + cor primaria
  + preset Lara/Nora + surface).
- Toggle de tema aplica tudo de uma vez; persistido em melissa_prefs.themeName.
- Boot resolve themeName -> imagem via fetch + data URL (sem guardar
  data URL gigante no DB).
- onCustomFileChange/onClearBg invalidam themeName quando user mexe no bg.

PERSONALIZAR > FUNDO NOS TEXTOS
- Pref textBgEnabled em melissa_prefs.
- MelissaHeroClock: prop textBg envolve relogio/data/saudacao/resumo
  em <span class="hero-text"> que ganha bg branco/preto 60% + borda
  + padding + radius quando o toggle esta on.
- Vars --m-hero-text-bg / --m-hero-text-border flipam com light/dark.

TOP + DOCK COM GRADIENT HORIZONTAL
- Var --m-band: preto 80% (dark) / branco 80% (light).
- .melissa-topbar-band: gradiente cor->transparente (right->left) atras
  dos botoes do topo.
- .melissa-dock: gradiente cor->transparente (left->right) atras dos pins.

MELISSANEGOCIO ABSORVE MINHA EMPRESA
- Adiciona logo upload + preview "cartao de visita" (computeds
  enderecoLinhas/redesValidas/temDados/logoDisplay + redeIcon helper).
- Normaliza dados legados do cfg-empresa: redes_sociais.{rede} virou {name}.
- Preview teleporta entre 3 destinos baseado no viewport:
  mobile -> drawer; mid-desktop -> sidebar; wide-desktop (>=1340px) ->
  painel flutuante FORA do fake dialog (ancora no right edge + 14px gap,
  altura segue conteudo, header alinhado com header do dialog).
- Remove cfg-empresa de melissaConfigGrupos.js + COMPONENT_MAP do
  MelissaConfiguracoes; grupo "Empresa & Plataforma" -> "Plataforma".

CRONOMETRO -> SESSAO AGENDADA
- MelissaCronometro emite session-end ao parar com paciente selecionado
  (threshold 5s pra ignorar start/stop acidental).
- MelissaLayout.onCronometroSessionEnd busca agenda_eventos do paciente
  no dia (tipo='sessao'), pega o mais recente e grava em
  extra_fields.cronometro_duracao_seg + cronometro_parado_em.
- Toast: sucesso ("X min salvos") ou warn ("sessao nao encontrada").

CONVERSATIONDRAWER WHATSAPP-LIKE
- Nova imagem whatsapp-bg.jpg (renomeada de hash random) usada como
  tile (380px) no .cd-msgs.
- Light: bege #efeae2 + multiply blend.
- Dark: #0b141a + camada 78% sobre o doodle.
- Bubbles WA-style (verde out / branco-dark in com tails) ja existiam.

EXTRATO RECURSOS EXTRAS
- Filtros 2-por-linha em Melissa (vs 1/4 no /configuracoes).
- Cards de Resumo teleportam pro #cfg-page-side em Melissa
  (1-col empilhado no drawer; 4-col inline no /configuracoes).
- Botoes de exportar com flex-1 distribuidos em uma unica linha em
  desktop, wrap no mobile.
- DataTable scrollable em ambos os layouts.

OUTROS AJUSTES MENORES
- Cfg-conversas-autoreply: dias semana 4-cols em Melissa (vs 7-cols
  no /configuracoes).
- Cfg-creditos-wa: 1/2 por linha (vs 1/2/4) em Melissa.
- Cfg-recursos-extras: pacotes 1/2 (vs 1/2/4); "Em breve" 1-col.
- WhatsAppPage aba Templates: guia de formatacao teleporta pro side
  drawer em Melissa, deixando textareas full-width.
- ConfigPage chrome agora tem #cfg-page-actions target pros Teleport
  de acoes (refresh button etc).
- Imagens renomeadas em src/assets/themes/ (freudwebp/melainewebp/
  jungwebp.webp) e src/assets/whatsapp-bg.jpg.
- JoditTextEditor.vue novo (wrapper Jodit generico, sem features de email).
- MelissaConfigList.vue novo (lista compartilhada de configs pro drawer).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-07 23:48:18 -03:00

467 lines
24 KiB
Vue
Raw Blame History

<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Arquivo: src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
| Data: 2026
|--------------------------------------------------------------------------
| Painel self-service — WhatsApp via Twilio para o tenant.
| A clínica/terapeuta ativa, testa e monitora seu WhatsApp sem suporte.
|
| Estados:
| not_provisioned — nunca foi ativado → botão "Ativar WhatsApp"
| connected — ativo e funcionando
| suspended — suspenso pelo admin SaaS
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useTwilioWhatsappStore } from '@/stores/twilioWhatsappStore';
import { useTenantStore } from '@/stores/tenantStore';
const route = useRoute();
const toast = useToast();
const confirm = useConfirm();
const store = useTwilioWhatsappStore();
const tenant = useTenantStore();
// "Trocar canal" preserva o layout (Melissa vs /configuracoes).
const inMelissa = computed(() => String(route.path || '').startsWith('/melissa'));
const chooserPath = computed(() => (inMelissa.value ? '/melissa/cfg-wa' : '/configuracoes/whatsapp'));
// ── Computed ───────────────────────────────────────────────────────────────
const tenantId = computed(() => tenant.tenantId);
const statusConfig = computed(() => {
switch (store.myChannelStatus) {
case 'not_provisioned':
return {
icon: 'pi-whatsapp',
color: 'text-gray-400',
bg: 'bg-gray-100',
label: 'WhatsApp não ativado',
sub: 'Ative para enviar lembretes automáticos aos seus pacientes.',
severity: 'secondary',
};
case 'connected':
return {
icon: 'pi-check-circle',
color: 'text-green-600',
bg: 'bg-green-50',
label: 'WhatsApp ativo',
sub: `Enviando de ${store.myChannel?.twilio_phone_number ?? '—'}`,
severity: 'success',
};
case 'suspended':
return {
icon: 'pi-pause-circle',
color: 'text-orange-500',
bg: 'bg-orange-50',
label: 'WhatsApp suspenso',
sub: 'Sua conta está temporariamente suspensa. Entre em contato com o suporte.',
severity: 'warn',
};
default:
return {
icon: 'pi-exclamation-circle',
color: 'text-red-500',
bg: 'bg-red-50',
label: 'Erro de conexão',
sub: 'Verifique as configurações ou entre em contato com o suporte.',
severity: 'danger',
};
}
});
// ── Ativação ───────────────────────────────────────────────────────────────
const activateDialog = ref(false);
const activateForm = ref({ display_name: '' });
function openActivateDialog() {
activateForm.value.display_name = '';
activateDialog.value = true;
}
async function doActivate() {
try {
const result = await store.provisionMyChannel(tenantId.value, {
display_name: activateForm.value.display_name || undefined,
});
toast.add({
severity: 'success',
summary: 'WhatsApp ativado!',
detail: result.message,
life: 6000,
});
activateDialog.value = false;
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro ao ativar', detail: e.message, life: 6000 });
}
}
// ── Teste de envio ─────────────────────────────────────────────────────────
const testToNumber = ref('');
const testMessage = ref('Olá! Esta é uma mensagem de teste do AgenciaPsi. ✓');
async function doTest() {
if (!testToNumber.value) {
toast.add({ severity: 'warn', summary: 'Informe o número', life: 3000 });
return;
}
if (!store.myChannel?.id) return;
try {
const result = await store.testSendMessage(store.myChannel.id, testToNumber.value, testMessage.value);
toast.add({
severity: 'success',
summary: 'Mensagem enviada!',
detail: `SID: ${result.message_sid} — Status: ${result.status}`,
life: 5000,
});
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro no envio', detail: e.message, life: 5000 });
}
}
// ── Logs ───────────────────────────────────────────────────────────────────
async function loadLogs() {
if (!tenantId.value) return;
try {
await store.loadMyLogs(tenantId.value);
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro ao carregar histórico', detail: e.message, life: 4000 });
}
}
// ── Helpers ────────────────────────────────────────────────────────────────
function logStatusTag(status) {
switch (status) {
case 'sent': return { label: 'Enviado', severity: 'info' };
case 'delivered': return { label: 'Entregue', severity: 'success' };
case 'read': return { label: 'Lido', severity: 'success' };
case 'failed': return { label: 'Falhou', severity: 'danger' };
case 'bounced': return { label: 'Bounced', severity: 'danger' };
default: return { label: status, severity: 'secondary' };
}
}
function fmtDateTime(dt) {
if (!dt) return '—';
const d = new Date(dt);
return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' })
+ ' ' + d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}
function fmtPhone(p) {
if (!p) return '—';
return p.replace('whatsapp:', '');
}
// ── Tabs ───────────────────────────────────────────────────────────────────
const activeTab = ref(0);
function onTabChange(val) {
activeTab.value = val;
if (val === 1 && !store.messageLogs.length) loadLogs();
}
// ── Init ───────────────────────────────────────────────────────────────────
onMounted(async () => {
if (tenantId.value) {
await store.loadMyChannel(tenantId.value);
}
});
</script>
<template>
<Teleport to="#cfg-page-actions" defer>
<router-link :to="chooserPath">
<Button label="Trocar canal" icon="pi pi-arrow-left" severity="secondary" outlined size="small" class="rounded-full" />
</router-link>
</Teleport>
<div class="flex flex-col gap-4">
<!-- Loading inicial ───────────────────────────────────────────── -->
<div v-if="store.loadingMyChannel" class="flex justify-center py-12">
<ProgressSpinner style="width: 40px; height: 40px" />
</div>
<template v-else>
<!-- Card de status ─────────────────────────────────────────── -->
<div class="status-card" :class="`status-card--${statusConfig.severity}`">
<div class="flex items-start gap-4 flex-wrap">
<div :class="['status-icon', statusConfig.bg, statusConfig.color]">
<i :class="`pi ${statusConfig.icon} text-xl`" />
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<h3 class="status-title">{{ statusConfig.label }}</h3>
<Tag :value="statusConfig.label" :severity="statusConfig.severity" class="text-xs" />
</div>
<p class="status-sub">{{ statusConfig.sub }}</p>
</div>
<!-- Ação principal -->
<div class="flex gap-2 items-center">
<!-- Não provisionado: botão ativar -->
<Button
v-if="store.myChannelStatus === 'not_provisioned'"
label="Ativar WhatsApp"
icon="pi pi-whatsapp"
:loading="store.provisioning"
@click="openActivateDialog"
/>
<!-- Ativo: mostrar número -->
<template v-if="store.myChannelStatus === 'connected'">
<div class="flex flex-col items-end gap-1">
<div class="flex items-center gap-2">
<i class="pi pi-phone text-green-600 text-sm" />
<span class="font-mono font-bold text-sm">{{ store.myChannel?.twilio_phone_number }}</span>
</div>
<span class="text-xs text-(--text-color-secondary)">Seu número WhatsApp exclusivo</span>
</div>
</template>
<!-- Suspenso: contatar suporte -->
<Button
v-if="store.myChannelStatus === 'suspended'"
label="Contatar suporte"
icon="pi pi-envelope"
severity="secondary"
outlined
tag="a"
href="mailto:suporte@agenciapsi.com.br"
/>
</div>
</div>
</div>
<!-- Tabs (só aparecem quando provisionado) ──────────────────── -->
<template v-if="store.myChannelStatus !== 'not_provisioned'">
<Tabs :value="activeTab" @update:value="onTabChange">
<TabList>
<Tab :value="0"><i class="pi pi-cog mr-2" />Configurações</Tab>
<Tab :value="1"><i class="pi pi-list mr-2" />Histórico</Tab>
</TabList>
<TabPanels>
<!-- ══ ABA 1 — Configurações ══════════════════════ -->
<TabPanel :value="0">
<div class="flex flex-col gap-4 pt-3">
<!-- Informações do canal ──────────────────── -->
<div class="info-card">
<div class="info-card__header">
<i class="pi pi-info-circle opacity-60 text-sm" />
<span class="text-sm font-semibold">Informações da conta</span>
</div>
<div class="info-card__body">
<div class="info-row">
<span class="info-label">Número WhatsApp</span>
<span class="font-mono font-bold">{{ store.myChannel?.twilio_phone_number ?? '—' }}</span>
</div>
<div class="info-row">
<span class="info-label">Provedor</span>
<span>WhatsApp Business Oficial — AgenciaPSI</span>
</div>
<div class="info-row">
<span class="info-label">Ativado em</span>
<span>{{ fmtDateTime(store.myChannel?.provisioned_at) }}</span>
</div>
<div class="info-row">
<span class="info-label">Preço por mensagem</span>
<span class="font-semibold">
{{ new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(store.myChannel?.price_per_message_brl ?? 0) }}
</span>
</div>
</div>
</div>
<!-- Envio de teste ────────────────────────── -->
<div v-if="store.myChannelStatus === 'connected'" class="info-card">
<div class="info-card__header">
<i class="pi pi-send opacity-60 text-sm" />
<span class="text-sm font-semibold">Envio de teste</span>
</div>
<div class="info-card__body">
<p class="text-sm text-(--text-color-secondary) m-0 mb-3">
Envie uma mensagem de teste para confirmar que seu WhatsApp está funcionando.
</p>
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-1.5">
<label class="field-label">Número destino (E.164)</label>
<InputText v-model="testToNumber" placeholder="+5511999990000" class="w-full max-w-xs" />
</div>
<div class="flex flex-col gap-1.5">
<label class="field-label">Mensagem</label>
<Textarea v-model="testMessage" rows="2" class="w-full max-w-lg" auto-resize />
</div>
<div>
<Button
label="Enviar teste"
icon="pi pi-send"
size="small"
:loading="store.testingSend"
:disabled="!testToNumber || store.testingSend"
@click="doTest"
/>
</div>
</div>
</div>
</div>
<!-- Informações de uso ────────────────────── -->
<Message severity="info" :closable="false">
<template #messageicon><i class="pi pi-whatsapp" /></template>
<div class="text-sm">
<strong>Como funciona:</strong> Seu número WhatsApp Business exclusivo é usado para enviar
lembretes de sessão, confirmações e outras notificações automáticas aos seus pacientes.
Os envios são cobrados por mensagem conforme seu plano.
</div>
</Message>
</div>
</TabPanel>
<!-- ══ ABA 2 — Histórico ═══════════════════════════ -->
<TabPanel :value="1">
<div class="flex flex-col gap-3 pt-3">
<div class="flex items-center gap-2">
<span class="text-sm text-(--text-color-secondary)">
Últimas {{ store.messageLogs.length }} mensagens
</span>
<Button icon="pi pi-refresh" size="small" severity="secondary" outlined :loading="store.loadingLogs" class="ml-auto" @click="loadLogs" />
</div>
<DataTable :value="store.messageLogs" :loading="store.loadingLogs" striped-rows responsive-layout="scroll" class="text-sm">
<Column header="Destinatário" style="min-width: 140px">
<template #body="{ data }">
<span class="font-mono text-sm">{{ fmtPhone(data.recipient_address) }}</span>
</template>
</Column>
<Column header="Status" style="min-width: 100px">
<template #body="{ data }">
<Tag :value="logStatusTag(data.status).label" :severity="logStatusTag(data.status).severity" class="text-[0.7rem]" />
</template>
</Column>
<Column header="Enviado em" style="min-width: 140px">
<template #body="{ data }">
<span class="text-xs">{{ fmtDateTime(data.sent_at || data.created_at) }}</span>
</template>
</Column>
<Column header="Entregue" style="min-width: 140px">
<template #body="{ data }">
<span class="text-xs">{{ fmtDateTime(data.delivered_at) }}</span>
</template>
</Column>
<Column header="Motivo de falha" style="min-width: 180px">
<template #body="{ data }">
<span v-if="data.failure_reason" class="text-xs text-red-500">{{ data.failure_reason }}</span>
<span v-else class="text-xs text-(--text-color-secondary)">—</span>
</template>
</Column>
<template #empty>
<div class="text-center py-8 text-sm text-(--text-color-secondary)">
Nenhuma mensagem enviada ainda.
</div>
</template>
</DataTable>
</div>
</TabPanel>
</TabPanels>
</Tabs>
</template>
</template>
<!-- Dialog: Ativar WhatsApp ──────────────────────────────────── -->
<Dialog
v-model:visible="activateDialog"
header="Ativar WhatsApp"
modal
:style="{ width: '440px', maxWidth: '96vw' }"
:draggable="false"
>
<div class="flex flex-col gap-4 py-2">
<Message severity="success" :closable="false">
<template #messageicon><i class="pi pi-whatsapp" /></template>
<div class="text-sm">
Você receberá um <strong>número WhatsApp exclusivo</strong> para sua clínica.
Suas mensagens automáticas aos pacientes serão enviadas por este número.
</div>
</Message>
<div class="field-group">
<label class="field-label">Nome de exibição (opcional)</label>
<InputText
v-model="activateForm.display_name"
placeholder="Ex: Clínica Bem Estar"
class="w-full"
/>
<small class="text-(--text-color-secondary)">Identificação interna do seu canal.</small>
</div>
<div class="border border-(--surface-border) rounded-lg p-3 bg-(--surface-ground)">
<div class="text-xs font-semibold mb-2">O que está incluído:</div>
<ul class="text-sm text-(--text-color-secondary) flex flex-col gap-1 m-0 pl-4">
<li>Número WhatsApp Business exclusivo</li>
<li>Envio de lembretes de sessão automáticos</li>
<li>Confirmações e cancelamentos por WhatsApp</li>
<li>Histórico completo de mensagens</li>
</ul>
</div>
</div>
<template #footer>
<Button label="Cancelar" text @click="activateDialog = false" />
<Button
label="Ativar agora"
icon="pi pi-check"
:loading="store.provisioning"
:disabled="store.provisioning"
@click="doActivate"
/>
</template>
</Dialog>
<Toast />
<ConfirmDialog />
</div>
</template>
<style scoped>
.status-card {
padding: 1.25rem; border-radius: 8px;
border: 1px solid var(--surface-border);
background: var(--surface-card);
}
.status-card--success { border-color: color-mix(in srgb, #22c55e 30%, transparent); }
.status-card--warn { border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
.status-card--danger { border-color: color-mix(in srgb, #ef4444 30%, transparent); }
.status-icon {
display: grid; place-items: center;
width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0;
}
.status-title { font-size: 1rem; font-weight: 700; margin: 0; }
.status-sub { font-size: 0.8rem; color: var(--text-color-secondary); margin: 4px 0 0; }
.info-card {
border: 1px solid var(--surface-border); border-radius: 8px; overflow: hidden;
}
.info-card__header {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.625rem 1rem; background: var(--surface-ground);
}
.info-card__body { padding: 0.875rem 1rem; }
.info-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; padding: 0.375rem 0;
border-bottom: 1px solid var(--surface-border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 0.75rem; color: var(--text-color-secondary); flex-shrink: 0; }
.field-group { display: flex; flex-direction: column; gap: 0.375rem; }
.field-label { font-size: 0.75rem; font-weight: 600; }
</style>
Reference in New Issue View Git Blame Copy Permalink