callix-dialer-widget 1.3.0 → 1.3.2

package/dist-widget/callix-dialer.es.js

@@ -53813,16 +53813,32 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
   }, []);
   useEffect(() => {
     if (!currentCall || callState !== "callInProgress") {
+      if (callDurationSeconds > 0) {
+        console.log("[FloatingDialer] ⏱️ Timer resetado (chamada não está em progresso)");
+      }
       setCallDurationSeconds(0);
       setNetworkMetric(INITIAL_NETWORK_METRIC);
       setAudioMetric(INITIAL_AUDIO_METRIC);
       return;
     }
-    setCallDurationSeconds(Math.floor(currentCall.currentDurationSeconds ?? 0));
+    const initialDuration = Math.floor(currentCall.currentDurationSeconds ?? 0);
+    setCallDurationSeconds(initialDuration);
+    console.log("[FloatingDialer] ⏱️ Timer iniciado:", {
+      initialDuration,
+      currentDurationSeconds: currentCall.currentDurationSeconds,
+      callState
+    });
     const timer = window.setInterval(() => {
-      setCallDurationSeconds(Math.floor(currentCall.currentDurationSeconds ?? 0));
+      const duration = Math.floor(currentCall.currentDurationSeconds ?? 0);
+      setCallDurationSeconds(duration);
+      if (duration % 5 === 0 && duration > 0) {
+        console.log("[FloatingDialer] ⏱️ Timer atualizado:", duration, "segundos");
+      }
     }, 1e3);
-    return () => window.clearInterval(timer);
+    return () => {
+      console.log("[FloatingDialer] ⏱️ Timer parado");
+      window.clearInterval(timer);
+    };
   }, [currentCall, callState]);
   useEffect(() => {
     if (!currentCall || callState !== "callInProgress") {
@@ -54375,88 +54391,90 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     if (callState === "afterCall") {
       const options = afterCallResult === "success" ? successQualifications : discardQualifications;
       const hasOptions = options.length > 0;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      console.log("[FloatingDialer Mini] 🎯 TELA DE QUALIFICAÇÃO:", {
+        callState,
+        afterCallResult,
+        successQualifications: successQualifications.length,
+        discardQualifications: discardQualifications.length,
+        hasOptions,
+        selectedQualificationId
+      });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: ["callix", "mode", "min", tw`flex w-full max-w-full flex-col gap-3 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-sm text-slate-800`].join(" "),
+          className: ["callix", "mode", "min", tw`flex w-full max-w-full flex-col gap-2 rounded-2xl border border-slate-200 bg-white/95 p-2.5 shadow-sm text-slate-800`].join(" "),
           "data-callix-variant": "min",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`text-center space-y-1`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] uppercase tracking-wide text-slate-500`, children: "Logado como" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-800`, children: username })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2 rounded-xl border border-slate-200 bg-slate-50 px-2.5 py-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] font-semibold text-slate-700`, children: "Qualifique a chamada" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[9px] text-slate-500`, children: "Esta etapa e obrigatoria." })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-3`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-semibold text-slate-700`, children: "Qualifique a chamada" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-slate-500`, children: "Esta etapa e obrigatoria para registrar o desfecho do atendimento." })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-1.5`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setAfterCallResult("success"),
-                    className: tw`${afterCallResult === "success" ? "bg-emerald-500 text-white shadow-md" : "bg-white text-slate-600"} rounded-lg border border-slate-200 px-2 py-1.5 text-[10px] font-semibold transition`,
-                    children: "Atendimento concluido"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setAfterCallResult("failure"),
-                    className: tw`${afterCallResult === "failure" ? "bg-rose-500 text-white shadow-md" : "bg-white text-slate-600"} rounded-lg border border-slate-200 px-2 py-1.5 text-[10px] font-semibold transition`,
-                    children: "Atendimento descartado"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1.5`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] font-medium text-slate-700`, children: "Selecione uma qualificacao" }),
-                hasOptions ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`max-h-40 space-y-1.5 overflow-y-auto pr-0.5`, children: options.map((qualification) => {
-                  const isSelected = selectedQualificationId === qualification.id;
-                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setSelectedQualificationId(qualification.id),
-                      className: tw`${isSelected ? "ring-1 ring-primary bg-primary/10 border-primary" : "border-slate-200 bg-white"} w-full rounded-lg border px-2 py-1.5 text-left transition`,
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] font-semibold text-slate-800`, children: qualification.name })
-                    },
-                    qualification.id
-                  );
-                }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-lg border border-amber-200 bg-amber-50 px-2 py-1.5 text-[10px] text-amber-700`, children: "Nenhuma qualificacao disponivel." })
-              ] }),
-              afterCallError && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-red-500`, children: afterCallError }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-1.5`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: handleFinishAfterCall,
-                  disabled: !hasOptions || !selectedQualificationId || isSubmittingAfterCall,
-                  className: tw`flex w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-[11px] font-bold text-white shadow-md transition disabled:cursor-not-allowed disabled:opacity-60`,
-                  children: [
-                    isSubmittingAfterCall && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-3 w-3 animate-spin rounded-full border-2 border-white/40 border-t-white` }),
-                    "Finalizar atendimento"
-                  ]
+                  onClick: () => setAfterCallResult("success"),
+                  className: tw`${afterCallResult === "success" ? "bg-emerald-500 text-white shadow-md" : "bg-white text-slate-600"} rounded-lg border border-slate-200 px-2 py-1 text-[9px] font-semibold transition`,
+                  children: "Atendimento concluido"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setAfterCallResult("failure"),
+                  className: tw`${afterCallResult === "failure" ? "bg-rose-500 text-white shadow-md" : "bg-white text-slate-600"} rounded-lg border border-slate-200 px-2 py-1 text-[9px] font-semibold transition`,
+                  children: "Atendimento descartado"
                 }
               )
             ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[9px] font-medium text-slate-700`, children: "Selecione uma qualificacao" }),
+              hasOptions ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`max-h-32 space-y-1 overflow-y-auto pr-0.5`, children: options.map((qualification) => {
+                const isSelected = selectedQualificationId === qualification.id;
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSelectedQualificationId(qualification.id),
+                    className: tw`${isSelected ? "ring-1 ring-primary bg-primary/10 border-primary" : "border-slate-200 bg-white"} w-full rounded-lg border px-2 py-1 text-left transition`,
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] font-semibold text-slate-800 leading-tight`, children: qualification.name })
+                  },
+                  qualification.id
+                );
+              }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-lg border border-amber-200 bg-amber-50 px-2 py-1 text-[9px] text-amber-700`, children: "Nenhuma qualificacao disponivel." })
+            ] }),
+            afterCallError && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[9px] text-red-500`, children: afterCallError }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "button",
               {
                 type: "button",
-                onClick: onLogout,
-                className: tw`flex w-full items-center justify-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-[11px] font-semibold text-slate-600 transition hover:text-red-500`,
+                onClick: handleFinishAfterCall,
+                disabled: !hasOptions || !selectedQualificationId || isSubmittingAfterCall,
+                className: tw`flex w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-[10px] font-bold text-white shadow-md transition disabled:cursor-not-allowed disabled:opacity-60`,
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiLogOut, { className: tw`text-xs` }),
-                  "Sair"
+                  isSubmittingAfterCall && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-3 w-3 animate-spin rounded-full border-2 border-white/40 border-t-white` }),
+                  "Finalizar atendimento"
                 ]
               }
             )
-          ]
+          ] })
         }
       );
     }
+    console.log("[FloatingDialer Mini] 📞 Estado da Chamada:", {
+      isCallActive,
+      callState,
+      statusLabel,
+      isInCall,
+      isConnecting,
+      isRinging,
+      callDurationSeconds,
+      callTarget,
+      statusVisualUsed: isCallActive ? "GREEN (emerald)" : "statusVisual",
+      timerVisible: isCallActive && callDurationSeconds > 0
+    });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -54464,7 +54482,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
         "data-callix-variant": "min",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between gap-2`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`${statusVisual.badgeClass} flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase leading-tight`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`${isCallActive ? "border-emerald-200 bg-emerald-50 text-emerald-700" : statusVisual.badgeClass} flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase leading-tight`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(statusVisual.Icon, { className: tw`text-xs` }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: statusLabel })
             ] }),