Sfoglia il codice sorgente

feat: remoção do qr code de conexão devido a migração para API oficial

leonardo 1 mese fa
parent
commit
9c0f2c6227

+ 0 - 8
src/api/whatsappConexao.js

@@ -3,11 +3,3 @@ import { apiFetch } from "./client.js";
 export function statusWhatsapp() {
   return apiFetch("/api/whatsapp/status");
 }
-
-export function conectarWhatsapp() {
-  return apiFetch("/api/whatsapp/conectar", { method: "POST" });
-}
-
-export function desconectarWhatsapp() {
-  return apiFetch("/api/whatsapp/desconectar", { method: "POST" });
-}

+ 0 - 61
src/components/ModalWhatsappConexao.vue

@@ -1,61 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div class="fixed inset-0 z-[9999] flex items-center justify-center p-4" @click="$emit('close')">
-      <div class="absolute inset-0 bg-black/40 dark:bg-black/60" />
-      <div
-        class="relative w-full max-w-sm overflow-hidden rounded-2xl border border-gray-200 bg-background text-foreground shadow-xl dark:border-gray-700"
-        @click.stop
-      >
-        <div class="flex items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-700">
-          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Conectar WhatsApp</h3>
-          <button
-            type="button"
-            class="rounded-lg border border-transparent p-1.5 text-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-100 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-white/5"
-            @click="$emit('close')"
-          >
-            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        <div class="flex flex-col items-center gap-4 p-6">
-          <template v-if="status === 'qr_pendente' && qrDataUrl">
-            <img :src="qrDataUrl" alt="QR code de conexão do WhatsApp" class="h-56 w-56 rounded-lg border border-gray-200 dark:border-gray-700" />
-            <p class="text-center text-sm text-gray-600 dark:text-gray-300">
-              Abra o WhatsApp no celular que vai atender → Configurações → Aparelhos conectados → Conectar aparelho e escaneie o código acima.
-            </p>
-          </template>
-
-          <template v-else-if="status === 'conectando'">
-            <p class="text-sm text-gray-500 dark:text-gray-400">Gerando código de conexão...</p>
-          </template>
-
-          <template v-else-if="status === 'conectado'">
-            <p class="text-sm font-medium text-emerald-600 dark:text-emerald-400">Conectado com sucesso!</p>
-            <p class="text-sm text-gray-500 dark:text-gray-400">Número: {{ telefone }}</p>
-          </template>
-
-          <template v-else>
-            <p class="text-sm text-gray-500 dark:text-gray-400">Sem conexão ativa.</p>
-          </template>
-
-          <p v-if="erro" class="w-full rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
-            {{ erro }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-defineProps({
-  status: { type: String, default: "desconectado" },
-  qrDataUrl: { type: String, default: null },
-  telefone: { type: String, default: null },
-  erro: { type: String, default: "" }
-});
-
-defineEmits(["close"]);
-</script>

+ 11 - 58
src/composables/useWhatsappConexao.js

@@ -1,69 +1,25 @@
 import { ref } from "vue";
-import { statusWhatsapp, conectarWhatsapp, desconectarWhatsapp } from "../api/whatsappConexao.js";
-
-const POLL_INTERVAL_MS = 2500;
+import { statusWhatsapp } from "../api/whatsappConexao.js";
 
 export function useWhatsappConexao() {
-  const status = ref("desconectado");
-  const qrDataUrl = ref(null);
+  const status = ref("nao_configurado");
   const telefone = ref(null);
+  const verifiedName = ref(null);
   const ultimoErro = ref(null);
   const carregando = ref(false);
   const erro = ref("");
 
-  let pollTimer = null;
-
-  function aplicarEstado(estado) {
-    status.value = estado.status;
-    qrDataUrl.value = estado.qrDataUrl;
-    telefone.value = estado.telefone;
-    ultimoErro.value = estado.ultimoErro;
-  }
-
-  function pararPolling() {
-    if (pollTimer) {
-      clearInterval(pollTimer);
-      pollTimer = null;
-    }
-  }
-
   async function atualizarStatus() {
-    try {
-      aplicarEstado(await statusWhatsapp());
-    } catch (err) {
-      erro.value = err?.message ?? "Falha ao consultar status do WhatsApp";
-    }
-  }
-
-  function iniciarPolling() {
-    pararPolling();
-    pollTimer = setInterval(async () => {
-      await atualizarStatus();
-      if (status.value === "conectado" || status.value === "desconectado") pararPolling();
-    }, POLL_INTERVAL_MS);
-  }
-
-  async function conectar() {
-    carregando.value = true;
-    erro.value = "";
-    try {
-      aplicarEstado(await conectarWhatsapp());
-      iniciarPolling();
-    } catch (err) {
-      erro.value = err?.message ?? "Falha ao iniciar conexão do WhatsApp";
-    } finally {
-      carregando.value = false;
-    }
-  }
-
-  async function desconectar() {
     carregando.value = true;
     erro.value = "";
     try {
-      pararPolling();
-      aplicarEstado(await desconectarWhatsapp());
+      const estado = await statusWhatsapp();
+      status.value = estado.status;
+      telefone.value = estado.telefone;
+      verifiedName.value = estado.verifiedName;
+      ultimoErro.value = estado.ultimoErro;
     } catch (err) {
-      erro.value = err?.message ?? "Falha ao desconectar o WhatsApp";
+      erro.value = err?.message ?? "Falha ao consultar status do WhatsApp";
     } finally {
       carregando.value = false;
     }
@@ -71,14 +27,11 @@ export function useWhatsappConexao() {
 
   return {
     status,
-    qrDataUrl,
     telefone,
+    verifiedName,
     ultimoErro,
     carregando,
     erro,
-    atualizarStatus,
-    conectar,
-    desconectar,
-    pararPolling
+    atualizarStatus
   };
 }

+ 16 - 61
src/views/configuracoes/ConfiguracoesView.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref, onMounted } from "vue";
 import LayoutSistema from "../../layout/LayoutSistema.vue";
 import BotaoAlterarTema from "../../components/BotaoAlterarTema.vue";
 import BaseButton from "../../components/base/BaseButton.vue";
 import BaseBadge from "../../components/base/BaseBadge.vue";
-import ModalWhatsappConexao from "../../components/ModalWhatsappConexao.vue";
 import { useAuth } from "../../composables/useAuth.js";
 import { useWhatsappConexao } from "../../composables/useWhatsappConexao.js";
 import { sincronizarAtendimentos, sincronizarTodosAtendimentos } from "../../api/atendimentos.js";
@@ -14,56 +13,28 @@ const isAdmin = computed(() => String(user.value?.Nivel) === "3");
 
 const {
   status: whatsappStatus,
-  qrDataUrl,
   telefone: whatsappTelefone,
-  carregando: conectandoWhatsapp,
+  carregando: verificandoWhatsapp,
   erro: erroWhatsapp,
-  atualizarStatus: atualizarStatusWhatsapp,
-  conectar: conectarWhatsapp,
-  desconectar: desconectarWhatsapp,
-  pararPolling: pararPollingWhatsapp
+  atualizarStatus: atualizarStatusWhatsapp
 } = useWhatsappConexao();
 
-const mostrarModalConexao = ref(false);
-
 const badgeConexaoVariant = computed(() => {
   if (whatsappStatus.value === "conectado") return "success";
-  if (whatsappStatus.value === "qr_pendente" || whatsappStatus.value === "conectando") return "warning";
+  if (whatsappStatus.value === "nao_configurado") return "warning";
   return "danger";
 });
 
 const badgeConexaoTexto = computed(() => {
-  if (whatsappStatus.value === "conectado") return `Conectado — ${whatsappTelefone.value}`;
-  if (whatsappStatus.value === "qr_pendente") return "Aguardando leitura do QR";
-  if (whatsappStatus.value === "conectando") return "Conectando...";
-  return "Desconectado";
+  if (whatsappStatus.value === "conectado") return `Configurado — ${whatsappTelefone.value}`;
+  if (whatsappStatus.value === "nao_configurado") return "Não configurado";
+  return "Erro ao verificar";
 });
 
-async function abrirConexao() {
-  mostrarModalConexao.value = true;
-  await conectarWhatsapp();
-  // modal pode ter sido fechado enquanto conectarWhatsapp() estava em voo —
-  // conectar() só arma o polling depois do await, então para aqui se já fechou
-  if (!mostrarModalConexao.value) pararPollingWhatsapp();
-}
-
-function fecharConexao() {
-  mostrarModalConexao.value = false;
-  pararPollingWhatsapp();
-}
-
-async function desconectar() {
-  await desconectarWhatsapp();
-}
-
 onMounted(() => {
   if (isAdmin.value) atualizarStatusWhatsapp();
 });
 
-onUnmounted(() => {
-  pararPollingWhatsapp();
-});
-
 const sincronizando = ref(false);
 const importandoTudo = ref(false);
 const syncOcupado = computed(() => sincronizando.value || importandoTudo.value);
@@ -229,32 +200,25 @@ async function importarTudo() {
                   </svg>
                 </div>
                 <div>
-                  <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Número conectado</div>
-                  <div class="text-xs text-gray-500 dark:text-gray-400">Gerencie a conexão do WhatsApp usada no Atendimento.</div>
+                  <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Número (WhatsApp Cloud API)</div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">Status do número oficial usado no Atendimento.</div>
                 </div>
               </div>
               <div class="flex shrink-0 items-center gap-3">
                 <BaseBadge :variant="badgeConexaoVariant">{{ badgeConexaoTexto }}</BaseBadge>
                 <button
-                  v-if="whatsappStatus === 'conectado'"
                   type="button"
-                  class="rounded-xl border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-white/5"
-                  :disabled="conectandoWhatsapp"
-                  @click="desconectar"
+                  class="rounded-xl border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-white/5"
+                  :disabled="verificandoWhatsapp"
+                  @click="atualizarStatusWhatsapp"
                 >
-                  Desconectar
-                </button>
-                <button
-                  v-else
-                  type="button"
-                  class="rounded-xl bg-primary px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50"
-                  :disabled="conectandoWhatsapp"
-                  @click="abrirConexao"
-                >
-                  Conectar número
+                  Verificar status
                 </button>
               </div>
             </div>
+            <div v-if="erroWhatsapp" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
+              {{ erroWhatsapp }}
+            </div>
           </div>
         </section>
 
@@ -282,14 +246,5 @@ async function importarTudo() {
         </section>
       </div>
     </div>
-
-    <ModalWhatsappConexao
-      v-if="mostrarModalConexao"
-      :status="whatsappStatus"
-      :qr-data-url="qrDataUrl"
-      :telefone="whatsappTelefone"
-      :erro="erroWhatsapp"
-      @close="fecharConexao"
-    />
   </LayoutSistema>
 </template>