Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ Menu Hover no Layout Rail, Twilio, Sms, Email, Templates, LNovo Layout Configurações

Browse Source
This commit is contained in:
Leonardo
2026-03-25 08:39:45 -03:00
parent 53a4980396
commit 3f1786c9bf
59 changed files with 2553 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
+460
View File
@@ -0,0 +1,460 @@
<!--
|--------------------------------------------------------------------------
| 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 { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useTwilioWhatsappStore } from '@/stores/twilioWhatsappStore';
import { useTenantStore } from '@/stores/tenantStore';
const toast = useToast();
const confirm = useConfirm();
const store = useTwilioWhatsappStore();
const tenant = useTenantStore();
// ── 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>
<div class="flex flex-col gap-4 p-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>Twilio WhatsApp Business</span>
</div>
<div class="info-row">
<span class="info-label">Subconta ID</span>
<span class="font-mono text-xs text-(--text-color-secondary)">
{{ store.myChannel?.twilio_subaccount_sid?.slice(0, 20) ?? '—' }}…
</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>