callix-dialer-widget 1.2.6 → 1.3.0

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

@@ -54136,7 +54136,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     }
   }, [goOffBreak]);
   useEffect(() => {
-    if (!isDialerFocused) {
+    if (!isMiniMode && !isDialerFocused) {
       return;
     }
     const handleKeyDown = (event2) => {
@@ -54190,7 +54190,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isDialerFocused, handleBackspace, handleClear, handleDial, handleCall, isIdle]);
+  }, [isMiniMode, isDialerFocused, handleBackspace, handleClear, handleDial, handleCall, isIdle]);
   const handleHangup = useCallback(async () => {
     try {
       await hangup();
@@ -54372,6 +54372,91 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
       callState,
       operatorState: operatorState == null ? void 0 : operatorState.state
     });
+    if (callState === "afterCall") {
+      const options = afterCallResult === "success" ? successQualifications : discardQualifications;
+      const hasOptions = options.length > 0;
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "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(" "),
+          "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 })
+            ] }),
+            /* @__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(
+                "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"
+                  ]
+                }
+              )
+            ] }),
+            /* @__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`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiLogOut, { className: tw`text-xs` }),
+                  "Sair"
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -54407,10 +54492,20 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2`, children: [
+          isCallActive ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-white px-3 py-2`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-500 ${callDurationSeconds > 0 ? "animate-pulse" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xs text-white` }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex min-w-0 flex-1 flex-col gap-0.5`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`truncate font-mono text-sm font-bold text-slate-800`, children: (callTarget == null ? void 0 : callTarget.replace(/^\+55/, "")) || "Conectando..." }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[9px] font-medium uppercase tracking-wider text-emerald-600`, children: statusLabel })
+            ] }),
+            callDurationSeconds > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex shrink-0 items-center gap-1 rounded-lg bg-emerald-500 px-2 py-1`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FiClock, { className: tw`text-[10px] text-white` }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`tabular-nums text-xs font-bold text-white`, children: formatDuration(callDurationSeconds) })
+            ] })
+          ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2`, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[10px] font-semibold uppercase tracking-wide text-slate-500`, children: "Numero" }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`flex-1 truncate text-lg font-semibold text-slate-800`, children: dialDisplayText || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-slate-400 text-base font-normal`, children: "Digite um numero" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`flex-1 truncate text-sm font-semibold text-slate-800`, children: dialDisplayText || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-slate-400 text-xs font-normal`, children: "Digite um numero" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
@@ -55202,6 +55297,15 @@ function InlineDialer({ variant = "default", ...props }) {
               box-sizing: border-box !important;
             }
 
+            /* Visor de número - fonte menor para caber todos os dígitos */
+            .callix.mode.min [class*="truncate"] {
+              font-size: 0.875rem !important; /* text-sm */
+              line-height: 1.25rem !important;
+              overflow: hidden !important;
+              text-overflow: ellipsis !important;
+              white-space: nowrap !important;
+            }
+
             /* Botões do modo mini */
             .callix.mode.min button {
               cursor: pointer !important;