callix-dialer-widget 1.3.4 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -48278,6 +48278,9 @@ function IconBase(props) {
48278
48278
  function FiActivity(props) {
48279
48279
  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "polyline", "attr": { "points": "22 12 18 12 15 21 9 3 6 12 2 12" }, "child": [] }] })(props);
48280
48280
  }
48281
+ function FiAlertCircle(props) {
48282
+ return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "10" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "8", "x2": "12", "y2": "12" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "16", "x2": "12.01", "y2": "16" }, "child": [] }] })(props);
48283
+ }
48281
48284
  function FiAlertTriangle(props) {
48282
48285
  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "9", "x2": "12", "y2": "13" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "17", "x2": "12.01", "y2": "17" }, "child": [] }] })(props);
48283
48286
  }
@@ -48293,6 +48296,9 @@ function FiDelete(props) {
48293
48296
  function FiHeadphones(props) {
48294
48297
  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M3 18v-6a9 9 0 0 1 18 0v6" }, "child": [] }, { "tag": "path", "attr": { "d": "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" }, "child": [] }] })(props);
48295
48298
  }
48299
+ function FiInfo(props) {
48300
+ return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "10" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "16", "x2": "12", "y2": "12" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "8", "x2": "12.01", "y2": "8" }, "child": [] }] })(props);
48301
+ }
48296
48302
  function FiLogOut(props) {
48297
48303
  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }, "child": [] }, { "tag": "polyline", "attr": { "points": "16 17 21 12 16 7" }, "child": [] }, { "tag": "line", "attr": { "x1": "21", "y1": "12", "x2": "9", "y2": "12" }, "child": [] }] })(props);
48298
48304
  }
@@ -48338,6 +48344,9 @@ function FiVolume2(props) {
48338
48344
  function FiVolumeX(props) {
48339
48345
  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "polygon", "attr": { "points": "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }, "child": [] }, { "tag": "line", "attr": { "x1": "23", "y1": "9", "x2": "17", "y2": "15" }, "child": [] }, { "tag": "line", "attr": { "x1": "17", "y1": "9", "x2": "23", "y2": "15" }, "child": [] }] })(props);
48340
48346
  }
48347
+ function FiXCircle(props) {
48348
+ return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "10" }, "child": [] }, { "tag": "line", "attr": { "x1": "15", "y1": "9", "x2": "9", "y2": "15" }, "child": [] }, { "tag": "line", "attr": { "x1": "9", "y1": "9", "x2": "15", "y2": "15" }, "child": [] }] })(props);
48349
+ }
48341
48350
  function FiX(props) {
48342
48351
  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "line", "attr": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" }, "child": [] }, { "tag": "line", "attr": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" }, "child": [] }] })(props);
48343
48352
  }
@@ -53039,6 +53048,35 @@ function useOperatorBreak() {
53039
53048
  goOffBreak: becomeAvailable
53040
53049
  };
53041
53050
  }
53051
+ function normalizePhoneNumberPaste(pastedText) {
53052
+ let cleaned = pastedText.replace(/[^\d+]/g, "");
53053
+ if (cleaned.startsWith("+55")) {
53054
+ cleaned = cleaned.substring(3);
53055
+ } else if (cleaned.startsWith("55") && cleaned.length > 11) {
53056
+ cleaned = cleaned.substring(2);
53057
+ }
53058
+ if (cleaned.length === 11 && cleaned.startsWith("0")) {
53059
+ cleaned = cleaned.substring(1);
53060
+ }
53061
+ if (cleaned.length === 10) {
53062
+ const ddd = cleaned.substring(0, 2);
53063
+ const restante = cleaned.substring(2);
53064
+ if (restante[0] !== "9") {
53065
+ cleaned = ddd + "9" + restante;
53066
+ }
53067
+ }
53068
+ if (cleaned.length === 8) {
53069
+ if (cleaned[0] !== "9") {
53070
+ cleaned = "489" + cleaned;
53071
+ } else {
53072
+ cleaned = "48" + cleaned;
53073
+ }
53074
+ }
53075
+ if (cleaned.length === 9 && cleaned[0] === "9") {
53076
+ cleaned = "48" + cleaned;
53077
+ }
53078
+ return cleaned;
53079
+ }
53042
53080
  const DEFAULT_COUNTRY_PREFIX = "+55";
53043
53081
  const MAX_DIAL_LENGTH = 32;
53044
53082
  const DEFAULT_DIALER_DIMENSIONS = { width: 448, height: 640 };
@@ -53116,14 +53154,14 @@ function FloatingDialer({
53116
53154
  const widthRatio = observedSize.width / DEFAULT_DIALER_DIMENSIONS.width;
53117
53155
  const heightRatio = observedSize.height / DEFAULT_DIALER_DIMENSIONS.height;
53118
53156
  const ratio = Math.min(widthRatio, heightRatio);
53119
- return clamp(ratio, MIN_DIALER_SCALE, MAX_DIALER_SCALE);
53157
+ return clamp$2(ratio, MIN_DIALER_SCALE, MAX_DIALER_SCALE);
53120
53158
  }, [observedSize]);
53121
53159
  const clampSizeToViewport = useCallback(
53122
53160
  (proposed) => {
53123
53161
  if (typeof window === "undefined") {
53124
53162
  return {
53125
- width: clamp(proposed.width, MIN_DIALER_WIDTH, MAX_DIALER_WIDTH),
53126
- height: clamp(proposed.height, MIN_DIALER_HEIGHT, MAX_DIALER_HEIGHT)
53163
+ width: clamp$2(proposed.width, MIN_DIALER_WIDTH, MAX_DIALER_WIDTH),
53164
+ height: clamp$2(proposed.height, MIN_DIALER_HEIGHT, MAX_DIALER_HEIGHT)
53127
53165
  };
53128
53166
  }
53129
53167
  const viewportWidth = window.innerWidth;
@@ -53132,8 +53170,8 @@ function FloatingDialer({
53132
53170
  const maxWidth = Math.min(MAX_DIALER_WIDTH, viewportWidth - margin2 * 2);
53133
53171
  const maxHeight = Math.min(MAX_DIALER_HEIGHT, viewportHeight - margin2 * 2);
53134
53172
  return {
53135
- width: clamp(proposed.width, MIN_DIALER_WIDTH, Math.max(MIN_DIALER_WIDTH, maxWidth)),
53136
- height: clamp(proposed.height, MIN_DIALER_HEIGHT, Math.max(MIN_DIALER_HEIGHT, maxHeight))
53173
+ width: clamp$2(proposed.width, MIN_DIALER_WIDTH, Math.max(MIN_DIALER_WIDTH, maxWidth)),
53174
+ height: clamp$2(proposed.height, MIN_DIALER_HEIGHT, Math.max(MIN_DIALER_HEIGHT, maxHeight))
53137
53175
  };
53138
53176
  },
53139
53177
  []
@@ -53168,8 +53206,8 @@ function FloatingDialer({
53168
53206
  nextY = margin2;
53169
53207
  }
53170
53208
  return {
53171
- x: clamp(nextX, minX, maxX),
53172
- y: clamp(nextY, minY, maxY)
53209
+ x: clamp$2(nextX, minX, maxX),
53210
+ y: clamp$2(nextY, minY, maxY)
53173
53211
  };
53174
53212
  },
53175
53213
  [isOpen, manualSize, observedSize]
@@ -53262,8 +53300,8 @@ function FloatingDialer({
53262
53300
  const safeMaxX = Math.max(margin2, maxX);
53263
53301
  const safeMaxY = Math.max(margin2, maxY);
53264
53302
  setPosition({
53265
- x: clamp(nextX, margin2, safeMaxX),
53266
- y: clamp(nextY, margin2, safeMaxY)
53303
+ x: clamp$2(nextX, margin2, safeMaxX),
53304
+ y: clamp$2(nextY, margin2, safeMaxY)
53267
53305
  });
53268
53306
  };
53269
53307
  const handlePointerUp = (event2) => {
@@ -54270,6 +54308,15 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
54270
54308
  setIsDialerFocused(false);
54271
54309
  }
54272
54310
  }, []);
54311
+ const handlePaste = useCallback((event2) => {
54312
+ event2.preventDefault();
54313
+ const pastedText = event2.clipboardData.getData("text");
54314
+ if (!pastedText) {
54315
+ return;
54316
+ }
54317
+ const normalized = normalizePhoneNumberPaste(pastedText);
54318
+ setDialValue(normalized);
54319
+ }, [setDialValue]);
54273
54320
  const handleSelectInputDevice = useCallback((event2) => {
54274
54321
  const value = event2.target.value;
54275
54322
  setSelectedInputId(value || null);
@@ -54478,6 +54525,20 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
54478
54525
  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(" "),
54479
54526
  "data-callix-variant": "min",
54480
54527
  children: [
54528
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
54529
+ "input",
54530
+ {
54531
+ ref: hiddenInputRef,
54532
+ type: "tel",
54533
+ inputMode: "tel",
54534
+ value: sanitizedDialValue,
54535
+ onChange: (event2) => setDialValue(event2.target.value),
54536
+ onPaste: handlePaste,
54537
+ className: tw`sr-only`,
54538
+ tabIndex: -1,
54539
+ "aria-hidden": "true"
54540
+ }
54541
+ ),
54481
54542
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between gap-2`, children: [
54482
54543
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`${isCallActive ? "border-green-200 bg-green-50 text-green-700" : statusVisual.badgeClass} flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase leading-tight`, children: [
54483
54544
  /* @__PURE__ */ jsxRuntimeExports.jsx(statusVisual.Icon, { className: tw`text-xs` }),
@@ -54515,36 +54576,46 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
54515
54576
  ] }),
54516
54577
  callDurationSeconds > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex shrink-0 items-center gap-1 rounded-lg bg-green-500 px-2 py-1`, children: [
54517
54578
  /* @__PURE__ */ jsxRuntimeExports.jsx(FiClock, { className: tw`text-[10px] text-white` }),
54518
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`tabular-nums text-xs font-bold text-white`, children: formatDuration(callDurationSeconds) })
54579
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`tabular-nums text-xs font-bold text-white`, children: formatDuration$1(callDurationSeconds) })
54519
54580
  ] })
54520
- ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2`, children: [
54521
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[10px] font-semibold uppercase tracking-wide text-slate-500`, children: "Numero" }),
54522
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
54523
- /* @__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" }) }),
54524
- /* @__PURE__ */ jsxRuntimeExports.jsx(
54525
- "button",
54526
- {
54527
- type: "button",
54528
- onClick: handleBackspace,
54529
- disabled: !miniCanUseKeypad,
54530
- className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-600 transition hover:border-slate-400 hover:text-slate-800 disabled:opacity-40 disabled:cursor-not-allowed`,
54531
- "aria-label": "Apagar ultimo digito",
54532
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiDelete, { className: tw`text-base` })
54533
- }
54534
- ),
54535
- /* @__PURE__ */ jsxRuntimeExports.jsx(
54536
- "button",
54537
- {
54538
- type: "button",
54539
- onClick: handleClear,
54540
- disabled: !miniCanUseKeypad,
54541
- className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-rose-300 bg-rose-50 text-rose-600 transition hover:border-rose-400 hover:bg-rose-100 disabled:opacity-40 disabled:cursor-not-allowed`,
54542
- "aria-label": "Limpar numero",
54543
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-sm` })
54544
- }
54545
- )
54546
- ] })
54547
- ] }),
54581
+ ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
54582
+ "div",
54583
+ {
54584
+ className: tw`space-y-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 cursor-text`,
54585
+ onClick: () => {
54586
+ var _a3;
54587
+ return (_a3 = hiddenInputRef.current) == null ? void 0 : _a3.focus();
54588
+ },
54589
+ children: [
54590
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[10px] font-semibold uppercase tracking-wide text-slate-500`, children: "Numero" }),
54591
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
54592
+ /* @__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 ou cole um numero" }) }),
54593
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
54594
+ "button",
54595
+ {
54596
+ type: "button",
54597
+ onClick: handleBackspace,
54598
+ disabled: !miniCanUseKeypad,
54599
+ className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-600 transition hover:border-slate-400 hover:text-slate-800 disabled:opacity-40 disabled:cursor-not-allowed`,
54600
+ "aria-label": "Apagar ultimo digito",
54601
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiDelete, { className: tw`text-base` })
54602
+ }
54603
+ ),
54604
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
54605
+ "button",
54606
+ {
54607
+ type: "button",
54608
+ onClick: handleClear,
54609
+ disabled: !miniCanUseKeypad,
54610
+ className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-rose-300 bg-rose-50 text-rose-600 transition hover:border-rose-400 hover:bg-rose-100 disabled:opacity-40 disabled:cursor-not-allowed`,
54611
+ "aria-label": "Limpar numero",
54612
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-sm` })
54613
+ }
54614
+ )
54615
+ ] })
54616
+ ]
54617
+ }
54618
+ ),
54548
54619
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid grid-cols-3 gap-2`, children: keypadKeys.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
54549
54620
  "button",
54550
54621
  {
@@ -54677,6 +54748,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
54677
54748
  inputMode: "tel",
54678
54749
  value: sanitizedDialValue,
54679
54750
  onChange: (event2) => setDialValue(event2.target.value),
54751
+ onPaste: handlePaste,
54680
54752
  className: tw`sr-only`,
54681
54753
  tabIndex: -1,
54682
54754
  "aria-hidden": "true"
@@ -55126,7 +55198,7 @@ function getStatusVisual(state) {
55126
55198
  };
55127
55199
  }
55128
55200
  }
55129
- function clamp(value, min2, max2) {
55201
+ function clamp$2(value, min2, max2) {
55130
55202
  if (!Number.isFinite(value)) {
55131
55203
  return min2;
55132
55204
  }
@@ -55161,7 +55233,7 @@ function getStatusLabel(state) {
55161
55233
  return "Aguardando";
55162
55234
  }
55163
55235
  }
55164
- function formatDuration(seconds) {
55236
+ function formatDuration$1(seconds) {
55165
55237
  const safeSeconds = Math.max(0, Math.floor(seconds));
55166
55238
  const minutes = Math.floor(safeSeconds / 60).toString().padStart(2, "0");
55167
55239
  const remaining = (safeSeconds % 60).toString().padStart(2, "0");
@@ -55262,7 +55334,7 @@ function ActiveCallSummary({
55262
55334
  callTarget,
55263
55335
  durationSeconds
55264
55336
  }) {
55265
- const durationLabel = durationSeconds > 0 ? formatDuration(durationSeconds) : "00:00";
55337
+ const durationLabel = durationSeconds > 0 ? formatDuration$1(durationSeconds) : "00:00";
55266
55338
  const cleanNumber = (callTarget == null ? void 0 : callTarget.replace(/^\+55/, "")) || "Conectando...";
55267
55339
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-lg border border-green-200 bg-gradient-to-br from-green-50 to-white px-3 py-2`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between gap-3`, children: [
55268
55340
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2.5 min-w-0 flex-1`, children: [
@@ -55278,7 +55350,576 @@ function ActiveCallSummary({
55278
55350
  ] })
55279
55351
  ] }) });
55280
55352
  }
55281
- function InlineDialer({ variant = "default", ...props }) {
55353
+ const VIEWPORT_MARGIN$1 = 16;
55354
+ function clamp$1(value, min2, max2) {
55355
+ return Math.min(Math.max(value, min2), max2);
55356
+ }
55357
+ function formatDuration(seconds) {
55358
+ const hrs = Math.floor(seconds / 3600);
55359
+ const mins = Math.floor(seconds % 3600 / 60);
55360
+ const secs = seconds % 60;
55361
+ if (hrs > 0) {
55362
+ return `${hrs}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
55363
+ }
55364
+ return `${mins}:${secs.toString().padStart(2, "0")}`;
55365
+ }
55366
+ function DraggableClientInfoModal({
55367
+ isOpen,
55368
+ clientInfo,
55369
+ callDuration,
55370
+ isCallActive,
55371
+ onClose
55372
+ }) {
55373
+ const containerRef = useRef(null);
55374
+ const pointerRef = useRef({ pointerId: null, offsetX: 0, offsetY: 0 });
55375
+ const dragMovedRef = useRef(false);
55376
+ const [position2, setPosition] = useState({ x: 100, y: 100 });
55377
+ const [isDragging, setIsDragging] = useState(false);
55378
+ const clampPositionToViewport = useCallback((proposed) => {
55379
+ if (typeof window === "undefined") {
55380
+ return proposed;
55381
+ }
55382
+ const viewportWidth = window.innerWidth;
55383
+ const viewportHeight = window.innerHeight;
55384
+ const element = containerRef.current;
55385
+ const width = (element == null ? void 0 : element.offsetWidth) ?? 400;
55386
+ const height = (element == null ? void 0 : element.offsetHeight) ?? 300;
55387
+ const minX = VIEWPORT_MARGIN$1;
55388
+ const minY = VIEWPORT_MARGIN$1;
55389
+ const maxX = Math.max(minX, viewportWidth - width - VIEWPORT_MARGIN$1);
55390
+ const maxY = Math.max(minY, viewportHeight - height - VIEWPORT_MARGIN$1);
55391
+ return {
55392
+ x: clamp$1(proposed.x, minX, maxX),
55393
+ y: clamp$1(proposed.y, minY, maxY)
55394
+ };
55395
+ }, []);
55396
+ useEffect(() => {
55397
+ if (isOpen && typeof window !== "undefined") {
55398
+ const element = containerRef.current;
55399
+ const width = (element == null ? void 0 : element.offsetWidth) ?? 400;
55400
+ const height = (element == null ? void 0 : element.offsetHeight) ?? 300;
55401
+ const centerX = (window.innerWidth - width) / 2;
55402
+ const centerY = (window.innerHeight - height) / 2;
55403
+ setPosition(clampPositionToViewport({ x: centerX, y: centerY }));
55404
+ }
55405
+ }, [isOpen, clampPositionToViewport]);
55406
+ useEffect(() => {
55407
+ if (!isOpen || typeof window === "undefined") {
55408
+ return;
55409
+ }
55410
+ const handleViewportChange = () => {
55411
+ setPosition((prev) => clampPositionToViewport(prev));
55412
+ };
55413
+ window.addEventListener("resize", handleViewportChange);
55414
+ window.addEventListener("orientationchange", handleViewportChange);
55415
+ return () => {
55416
+ window.removeEventListener("resize", handleViewportChange);
55417
+ window.removeEventListener("orientationchange", handleViewportChange);
55418
+ };
55419
+ }, [isOpen, clampPositionToViewport]);
55420
+ useEffect(() => {
55421
+ if (!isDragging) {
55422
+ return;
55423
+ }
55424
+ const handlePointerMove = (event2) => {
55425
+ var _a2, _b;
55426
+ if (pointerRef.current.pointerId !== event2.pointerId) {
55427
+ return;
55428
+ }
55429
+ dragMovedRef.current = true;
55430
+ const modalWidth = ((_a2 = containerRef.current) == null ? void 0 : _a2.offsetWidth) ?? 0;
55431
+ const modalHeight = ((_b = containerRef.current) == null ? void 0 : _b.offsetHeight) ?? 0;
55432
+ const nextX = event2.clientX - pointerRef.current.offsetX;
55433
+ const nextY = event2.clientY - pointerRef.current.offsetY;
55434
+ const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
55435
+ const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0;
55436
+ const maxX = viewportWidth - modalWidth - VIEWPORT_MARGIN$1;
55437
+ const maxY = viewportHeight - modalHeight - VIEWPORT_MARGIN$1;
55438
+ const safeMaxX = Math.max(VIEWPORT_MARGIN$1, maxX);
55439
+ const safeMaxY = Math.max(VIEWPORT_MARGIN$1, maxY);
55440
+ setPosition({
55441
+ x: clamp$1(nextX, VIEWPORT_MARGIN$1, safeMaxX),
55442
+ y: clamp$1(nextY, VIEWPORT_MARGIN$1, safeMaxY)
55443
+ });
55444
+ };
55445
+ const handlePointerUp = (event2) => {
55446
+ if (pointerRef.current.pointerId !== event2.pointerId) {
55447
+ return;
55448
+ }
55449
+ setIsDragging(false);
55450
+ pointerRef.current = { pointerId: null, offsetX: 0, offsetY: 0 };
55451
+ };
55452
+ window.addEventListener("pointermove", handlePointerMove);
55453
+ window.addEventListener("pointerup", handlePointerUp);
55454
+ return () => {
55455
+ window.removeEventListener("pointermove", handlePointerMove);
55456
+ window.removeEventListener("pointerup", handlePointerUp);
55457
+ };
55458
+ }, [isDragging]);
55459
+ const beginDrag = useCallback((event2) => {
55460
+ if (event2.button !== 0 && event2.pointerType !== "touch") {
55461
+ return;
55462
+ }
55463
+ const element = containerRef.current;
55464
+ if (!element) {
55465
+ return;
55466
+ }
55467
+ const rect = element.getBoundingClientRect();
55468
+ pointerRef.current = {
55469
+ pointerId: event2.pointerId,
55470
+ offsetX: event2.clientX - rect.left,
55471
+ offsetY: event2.clientY - rect.top
55472
+ };
55473
+ dragMovedRef.current = false;
55474
+ setIsDragging(true);
55475
+ }, []);
55476
+ const handleCloseClick = useCallback(() => {
55477
+ if (!isCallActive && onClose) {
55478
+ onClose();
55479
+ }
55480
+ }, [isCallActive, onClose]);
55481
+ if (!isOpen) {
55482
+ return null;
55483
+ }
55484
+ const hasClientInfo = clientInfo && (clientInfo.name || clientInfo.phoneNumber || clientInfo.email);
55485
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(
55486
+ "div",
55487
+ {
55488
+ ref: containerRef,
55489
+ className: tw`fixed z-[9999] flex flex-col overflow-hidden rounded-xl border border-slate-300 bg-white shadow-2xl`,
55490
+ style: {
55491
+ left: `${position2.x}px`,
55492
+ top: `${position2.y}px`,
55493
+ width: "380px",
55494
+ maxWidth: "calc(100vw - 32px)"
55495
+ },
55496
+ children: [
55497
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
55498
+ "div",
55499
+ {
55500
+ onPointerDown: beginDrag,
55501
+ className: tw`flex cursor-move items-center justify-between border-b border-slate-200 bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-3 text-white`,
55502
+ children: [
55503
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
55504
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`h-5 w-5` }),
55505
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-sm font-bold`, children: "Informações do Cliente" })
55506
+ ] }),
55507
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
55508
+ "button",
55509
+ {
55510
+ type: "button",
55511
+ onClick: handleCloseClick,
55512
+ disabled: isCallActive,
55513
+ className: tw`rounded-full p-1 transition hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-40`,
55514
+ title: isCallActive ? "Aguarde o fim da chamada para fechar" : "Fechar",
55515
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`h-5 w-5` })
55516
+ }
55517
+ )
55518
+ ]
55519
+ }
55520
+ ),
55521
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 space-y-4 overflow-y-auto p-4`, children: [
55522
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-3 py-2`, children: [
55523
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-xs font-medium text-slate-600`, children: "Duração da chamada:" }),
55524
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-sm font-bold text-slate-800`, children: formatDuration(callDuration) })
55525
+ ] }),
55526
+ hasClientInfo ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-3`, children: [
55527
+ clientInfo.name && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1`, children: [
55528
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: tw`flex items-center gap-1 text-xs font-semibold text-slate-600`, children: [
55529
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`h-3.5 w-3.5` }),
55530
+ "Nome"
55531
+ ] }),
55532
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800`, children: clientInfo.name })
55533
+ ] }),
55534
+ clientInfo.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1`, children: [
55535
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: tw`flex items-center gap-1 text-xs font-semibold text-slate-600`, children: [
55536
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhone, { className: tw`h-3.5 w-3.5` }),
55537
+ "Telefone"
55538
+ ] }),
55539
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800`, children: clientInfo.phoneNumber })
55540
+ ] }),
55541
+ clientInfo.email && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1`, children: [
55542
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: tw`flex items-center gap-1 text-xs font-semibold text-slate-600`, children: [
55543
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiInfo, { className: tw`h-3.5 w-3.5` }),
55544
+ "E-mail"
55545
+ ] }),
55546
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800`, children: clientInfo.email })
55547
+ ] }),
55548
+ clientInfo.customFields && Object.keys(clientInfo.customFields).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2`, children: [
55549
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: tw`text-xs font-semibold text-slate-600`, children: "Campos adicionais" }),
55550
+ Object.entries(clientInfo.customFields).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1`, children: [
55551
+ /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: tw`text-xs font-medium text-slate-500`, children: key }),
55552
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800`, children: String(value) })
55553
+ ] }, key))
55554
+ ] })
55555
+ ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-col items-center justify-center rounded-lg border border-slate-200 bg-slate-50 px-4 py-8 text-center`, children: [
55556
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiInfo, { className: tw`mb-2 h-8 w-8 text-slate-400` }),
55557
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-slate-500`, children: "Nenhuma informação do cliente disponível" })
55558
+ ] })
55559
+ ] }),
55560
+ isCallActive && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`border-t border-slate-200 bg-slate-50 px-4 py-2`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-center text-xs text-slate-500`, children: "Aguarde o fim da chamada para fechar" }) })
55561
+ ]
55562
+ }
55563
+ );
55564
+ }
55565
+ const VIEWPORT_MARGIN = 16;
55566
+ function clamp(value, min2, max2) {
55567
+ return Math.min(Math.max(value, min2), max2);
55568
+ }
55569
+ function DraggableQualificationModal({
55570
+ isOpen,
55571
+ result: result2,
55572
+ onChangeResult,
55573
+ successQualifications,
55574
+ discardQualifications,
55575
+ selectedQualificationId,
55576
+ onSelectQualification,
55577
+ onSubmit,
55578
+ isSubmitting,
55579
+ errorMessage
55580
+ }) {
55581
+ const containerRef = useRef(null);
55582
+ const pointerRef = useRef({ pointerId: null, offsetX: 0, offsetY: 0 });
55583
+ const dragMovedRef = useRef(false);
55584
+ const [position2, setPosition] = useState({ x: 100, y: 100 });
55585
+ const [isDragging, setIsDragging] = useState(false);
55586
+ const options = result2 === "success" ? successQualifications : discardQualifications;
55587
+ const hasOptions = options.length > 0;
55588
+ const clampPositionToViewport = useCallback((proposed) => {
55589
+ if (typeof window === "undefined") {
55590
+ return proposed;
55591
+ }
55592
+ const viewportWidth = window.innerWidth;
55593
+ const viewportHeight = window.innerHeight;
55594
+ const element = containerRef.current;
55595
+ const width = (element == null ? void 0 : element.offsetWidth) ?? 400;
55596
+ const height = (element == null ? void 0 : element.offsetHeight) ?? 500;
55597
+ const minX = VIEWPORT_MARGIN;
55598
+ const minY = VIEWPORT_MARGIN;
55599
+ const maxX = Math.max(minX, viewportWidth - width - VIEWPORT_MARGIN);
55600
+ const maxY = Math.max(minY, viewportHeight - height - VIEWPORT_MARGIN);
55601
+ return {
55602
+ x: clamp(proposed.x, minX, maxX),
55603
+ y: clamp(proposed.y, minY, maxY)
55604
+ };
55605
+ }, []);
55606
+ useEffect(() => {
55607
+ if (isOpen && typeof window !== "undefined") {
55608
+ const element = containerRef.current;
55609
+ const width = (element == null ? void 0 : element.offsetWidth) ?? 400;
55610
+ const height = (element == null ? void 0 : element.offsetHeight) ?? 500;
55611
+ const centerX = (window.innerWidth - width) / 2;
55612
+ const centerY = (window.innerHeight - height) / 2;
55613
+ setPosition(clampPositionToViewport({ x: centerX, y: centerY }));
55614
+ }
55615
+ }, [isOpen, clampPositionToViewport]);
55616
+ useEffect(() => {
55617
+ if (!isOpen || typeof window === "undefined") {
55618
+ return;
55619
+ }
55620
+ const handleViewportChange = () => {
55621
+ setPosition((prev) => clampPositionToViewport(prev));
55622
+ };
55623
+ window.addEventListener("resize", handleViewportChange);
55624
+ window.addEventListener("orientationchange", handleViewportChange);
55625
+ return () => {
55626
+ window.removeEventListener("resize", handleViewportChange);
55627
+ window.removeEventListener("orientationchange", handleViewportChange);
55628
+ };
55629
+ }, [isOpen, clampPositionToViewport]);
55630
+ useEffect(() => {
55631
+ if (!isDragging) {
55632
+ return;
55633
+ }
55634
+ const handlePointerMove = (event2) => {
55635
+ var _a2, _b;
55636
+ if (pointerRef.current.pointerId !== event2.pointerId) {
55637
+ return;
55638
+ }
55639
+ dragMovedRef.current = true;
55640
+ const modalWidth = ((_a2 = containerRef.current) == null ? void 0 : _a2.offsetWidth) ?? 0;
55641
+ const modalHeight = ((_b = containerRef.current) == null ? void 0 : _b.offsetHeight) ?? 0;
55642
+ const nextX = event2.clientX - pointerRef.current.offsetX;
55643
+ const nextY = event2.clientY - pointerRef.current.offsetY;
55644
+ const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
55645
+ const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0;
55646
+ const maxX = viewportWidth - modalWidth - VIEWPORT_MARGIN;
55647
+ const maxY = viewportHeight - modalHeight - VIEWPORT_MARGIN;
55648
+ const safeMaxX = Math.max(VIEWPORT_MARGIN, maxX);
55649
+ const safeMaxY = Math.max(VIEWPORT_MARGIN, maxY);
55650
+ setPosition({
55651
+ x: clamp(nextX, VIEWPORT_MARGIN, safeMaxX),
55652
+ y: clamp(nextY, VIEWPORT_MARGIN, safeMaxY)
55653
+ });
55654
+ };
55655
+ const handlePointerUp = (event2) => {
55656
+ if (pointerRef.current.pointerId !== event2.pointerId) {
55657
+ return;
55658
+ }
55659
+ setIsDragging(false);
55660
+ pointerRef.current = { pointerId: null, offsetX: 0, offsetY: 0 };
55661
+ };
55662
+ window.addEventListener("pointermove", handlePointerMove);
55663
+ window.addEventListener("pointerup", handlePointerUp);
55664
+ return () => {
55665
+ window.removeEventListener("pointermove", handlePointerMove);
55666
+ window.removeEventListener("pointerup", handlePointerUp);
55667
+ };
55668
+ }, [isDragging]);
55669
+ const beginDrag = useCallback((event2) => {
55670
+ if (event2.button !== 0 && event2.pointerType !== "touch") {
55671
+ return;
55672
+ }
55673
+ const element = containerRef.current;
55674
+ if (!element) {
55675
+ return;
55676
+ }
55677
+ const rect = element.getBoundingClientRect();
55678
+ pointerRef.current = {
55679
+ pointerId: event2.pointerId,
55680
+ offsetX: event2.clientX - rect.left,
55681
+ offsetY: event2.clientY - rect.top
55682
+ };
55683
+ dragMovedRef.current = false;
55684
+ setIsDragging(true);
55685
+ }, []);
55686
+ if (!isOpen) {
55687
+ return null;
55688
+ }
55689
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(
55690
+ "div",
55691
+ {
55692
+ ref: containerRef,
55693
+ className: tw`fixed z-[9999] flex flex-col overflow-hidden rounded-xl border border-slate-300 bg-white shadow-2xl`,
55694
+ style: {
55695
+ left: `${position2.x}px`,
55696
+ top: `${position2.y}px`,
55697
+ width: "420px",
55698
+ maxWidth: "calc(100vw - 32px)",
55699
+ maxHeight: "calc(100vh - 32px)"
55700
+ },
55701
+ children: [
55702
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
55703
+ "div",
55704
+ {
55705
+ onPointerDown: beginDrag,
55706
+ className: tw`flex cursor-move items-center justify-center border-b border-slate-200 bg-gradient-to-r from-indigo-500 to-indigo-600 px-4 py-3 text-white`,
55707
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-sm font-bold`, children: "Qualificar Chamada" })
55708
+ }
55709
+ ),
55710
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 space-y-4 overflow-y-auto p-5`, children: [
55711
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`text-center`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-slate-600`, children: "Esta etapa é obrigatória para registrar o desfecho do atendimento." }) }),
55712
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2`, children: [
55713
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-700`, children: "Resultado da chamada" }),
55714
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-3`, children: [
55715
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
55716
+ "button",
55717
+ {
55718
+ type: "button",
55719
+ onClick: () => onChangeResult("success"),
55720
+ className: tw`${result2 === "success" ? "border-emerald-500 bg-emerald-50 ring-2 ring-emerald-500" : "border-slate-200 bg-white hover:border-emerald-300"} flex flex-col items-center justify-center gap-2 rounded-lg border px-4 py-3 transition`,
55721
+ children: [
55722
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
55723
+ FiCheckCircle,
55724
+ {
55725
+ className: tw`h-6 w-6 ${result2 === "success" ? "text-emerald-600" : "text-slate-400"}`
55726
+ }
55727
+ ),
55728
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
55729
+ "span",
55730
+ {
55731
+ className: tw`text-sm font-semibold ${result2 === "success" ? "text-emerald-700" : "text-slate-600"}`,
55732
+ children: "Sucesso"
55733
+ }
55734
+ )
55735
+ ]
55736
+ }
55737
+ ),
55738
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
55739
+ "button",
55740
+ {
55741
+ type: "button",
55742
+ onClick: () => onChangeResult("failure"),
55743
+ className: tw`${result2 === "failure" ? "border-rose-500 bg-rose-50 ring-2 ring-rose-500" : "border-slate-200 bg-white hover:border-rose-300"} flex flex-col items-center justify-center gap-2 rounded-lg border px-4 py-3 transition`,
55744
+ children: [
55745
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiXCircle, { className: tw`h-6 w-6 ${result2 === "failure" ? "text-rose-600" : "text-slate-400"}` }),
55746
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-sm font-semibold ${result2 === "failure" ? "text-rose-700" : "text-slate-600"}`, children: "Falha" })
55747
+ ]
55748
+ }
55749
+ )
55750
+ ] })
55751
+ ] }),
55752
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2`, children: [
55753
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold text-slate-700`, children: "Selecione uma qualificação" }),
55754
+ hasOptions ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`max-h-64 space-y-2 overflow-y-auto rounded-lg border border-slate-200 bg-slate-50 p-2`, children: options.map((qualification) => {
55755
+ const isSelected = selectedQualificationId === qualification.id;
55756
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
55757
+ "button",
55758
+ {
55759
+ type: "button",
55760
+ onClick: () => onSelectQualification(qualification.id),
55761
+ className: tw`${isSelected ? "border-blue-400 bg-blue-100 ring-2 ring-blue-400" : "border-slate-200 bg-white hover:border-blue-300"} w-full rounded-lg border px-4 py-3 text-left transition`,
55762
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold ${isSelected ? "text-blue-800" : "text-slate-800"}`, children: qualification.name })
55763
+ },
55764
+ qualification.id
55765
+ );
55766
+ }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700`, children: [
55767
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertCircle, { className: tw`h-5 w-5 flex-shrink-0` }),
55768
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Nenhuma qualificação disponível para este tipo de resultado." })
55769
+ ] })
55770
+ ] }),
55771
+ errorMessage && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700`, children: [
55772
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertCircle, { className: tw`h-5 w-5 flex-shrink-0` }),
55773
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: errorMessage })
55774
+ ] })
55775
+ ] }),
55776
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`border-t border-slate-200 bg-slate-50 px-5 py-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
55777
+ "button",
55778
+ {
55779
+ type: "button",
55780
+ onClick: onSubmit,
55781
+ disabled: !hasOptions || !selectedQualificationId || isSubmitting,
55782
+ className: tw`flex w-full items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-3 text-sm font-bold text-white shadow-md transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50`,
55783
+ children: [
55784
+ isSubmitting && /* @__PURE__ */ jsxRuntimeExports.jsxs(
55785
+ "svg",
55786
+ {
55787
+ className: tw`h-4 w-4 animate-spin text-white`,
55788
+ xmlns: "http://www.w3.org/2000/svg",
55789
+ fill: "none",
55790
+ viewBox: "0 0 24 24",
55791
+ children: [
55792
+ /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { className: tw`opacity-25`, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
55793
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
55794
+ "path",
55795
+ {
55796
+ className: tw`opacity-75`,
55797
+ fill: "currentColor",
55798
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
55799
+ }
55800
+ )
55801
+ ]
55802
+ }
55803
+ ),
55804
+ isSubmitting ? "Enviando..." : "Confirmar Qualificação"
55805
+ ]
55806
+ }
55807
+ ) })
55808
+ ]
55809
+ }
55810
+ );
55811
+ }
55812
+ function InlineDialer({ variant = "default", isAuthenticated, ...props }) {
55813
+ const isMiniMode = variant === "min";
55814
+ const operatorState = isMiniMode && isAuthenticated ? clientSdkReactExports.useCallOperatorState() : null;
55815
+ const currentCall = isMiniMode && isAuthenticated ? clientSdkReactExports.useCallOperatorCurrentCall() : null;
55816
+ const currentCallInfo = isMiniMode && isAuthenticated ? clientSdkReactExports.useCallOperatorCurrentCallInfo() : null;
55817
+ const successQualifications = isMiniMode && isAuthenticated ? clientSdkReactExports.useCallOperatorSuccessQualifications() : [];
55818
+ const discardQualifications = isMiniMode && isAuthenticated ? clientSdkReactExports.useCallOperatorDiscardQualifications() : [];
55819
+ const { finishAfterCall } = isMiniMode && isAuthenticated ? clientSdkReactExports.useCallOperatorControls() : { finishAfterCall: void 0 };
55820
+ const [isClientInfoModalOpen, setIsClientInfoModalOpen] = useState(false);
55821
+ const [isQualificationModalOpen, setIsQualificationModalOpen] = useState(false);
55822
+ const [callDurationSeconds, setCallDurationSeconds] = useState(0);
55823
+ const [afterCallResult, setAfterCallResult] = useState("success");
55824
+ const [selectedQualificationId, setSelectedQualificationId] = useState(null);
55825
+ const [isSubmittingAfterCall, setIsSubmittingAfterCall] = useState(false);
55826
+ const [afterCallError, setAfterCallError] = useState(null);
55827
+ const callState = operatorState == null ? void 0 : operatorState.state;
55828
+ const isInCall = callState === "callInProgress";
55829
+ const isRinging = callState === "manualCallRinging" || callState === "callRinging";
55830
+ const isConnecting = callState === "manualCallSetup" || isRinging;
55831
+ const isIncomingCall = (currentCall == null ? void 0 : currentCall.direction) === "incoming";
55832
+ const isAfterCall = callState === "afterCall";
55833
+ useEffect(() => {
55834
+ if (!isMiniMode || !isInCall) {
55835
+ if (!isInCall) {
55836
+ setCallDurationSeconds(0);
55837
+ }
55838
+ return;
55839
+ }
55840
+ const interval = setInterval(() => {
55841
+ setCallDurationSeconds((prev) => prev + 1);
55842
+ }, 1e3);
55843
+ return () => clearInterval(interval);
55844
+ }, [isMiniMode, isInCall]);
55845
+ useEffect(() => {
55846
+ if (!isMiniMode) return;
55847
+ if ((isInCall || isConnecting) && isIncomingCall && (currentCallInfo == null ? void 0 : currentCallInfo.type) === "campaign") {
55848
+ setIsClientInfoModalOpen(true);
55849
+ }
55850
+ }, [isMiniMode, isInCall, isConnecting, isIncomingCall, currentCallInfo]);
55851
+ useEffect(() => {
55852
+ if (!isMiniMode) return;
55853
+ if (isAfterCall) {
55854
+ const shouldSkipQualification = (currentCallInfo == null ? void 0 : currentCallInfo.type) === "campaign" && currentCallInfo.info.campaign.skipCallQualification === true;
55855
+ if (shouldSkipQualification && finishAfterCall) {
55856
+ void Promise.resolve(
55857
+ finishAfterCall({
55858
+ result: "success",
55859
+ qualificationId: void 0
55860
+ })
55861
+ );
55862
+ return;
55863
+ }
55864
+ const hasSuccessQualification = successQualifications.length > 0;
55865
+ setAfterCallResult(hasSuccessQualification ? "success" : "failure");
55866
+ setSelectedQualificationId(null);
55867
+ setAfterCallError(null);
55868
+ setIsQualificationModalOpen(true);
55869
+ } else {
55870
+ setIsQualificationModalOpen(false);
55871
+ }
55872
+ }, [isMiniMode, isAfterCall, currentCallInfo, finishAfterCall, successQualifications]);
55873
+ useEffect(() => {
55874
+ if (!isMiniMode) return;
55875
+ if (!isInCall && !isConnecting && !isAfterCall) {
55876
+ setIsClientInfoModalOpen(false);
55877
+ }
55878
+ }, [isMiniMode, isInCall, isConnecting, isAfterCall]);
55879
+ const clientInfo = useMemo(() => {
55880
+ if (!currentCallInfo || currentCallInfo.type !== "campaign") {
55881
+ return null;
55882
+ }
55883
+ const contact = currentCallInfo.info.campaignContact;
55884
+ return {
55885
+ name: contact.label || null,
55886
+ phoneNumber: contact.phoneNumber || null,
55887
+ email: null,
55888
+ // Não disponível na estrutura atual
55889
+ customFields: contact.customer ? { customerId: contact.customer.id, formId: contact.customer.formId } : void 0
55890
+ };
55891
+ }, [currentCallInfo]);
55892
+ const handleFinishAfterCall = async () => {
55893
+ const qualifications = afterCallResult === "success" ? successQualifications : discardQualifications;
55894
+ if (!qualifications.length) {
55895
+ setAfterCallError("Nenhuma qualificação configurada para este resultado.");
55896
+ return;
55897
+ }
55898
+ if (!selectedQualificationId) {
55899
+ setAfterCallError("Selecione uma qualificação para finalizar.");
55900
+ return;
55901
+ }
55902
+ if (typeof finishAfterCall !== "function") {
55903
+ setAfterCallError("Não foi possível enviar a qualificação.");
55904
+ return;
55905
+ }
55906
+ setIsSubmittingAfterCall(true);
55907
+ setAfterCallError(null);
55908
+ try {
55909
+ await Promise.resolve(
55910
+ finishAfterCall({
55911
+ result: afterCallResult,
55912
+ qualificationId: selectedQualificationId
55913
+ })
55914
+ );
55915
+ setIsQualificationModalOpen(false);
55916
+ } catch (error2) {
55917
+ setAfterCallError("Erro ao enviar qualificacao.");
55918
+ console.error("Erro ao finalizar afterCall:", error2);
55919
+ } finally {
55920
+ setIsSubmittingAfterCall(false);
55921
+ }
55922
+ };
55282
55923
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
55283
55924
  /* @__PURE__ */ jsxRuntimeExports.jsx(
55284
55925
  "style",
@@ -55400,7 +56041,34 @@ function InlineDialer({ variant = "default", ...props }) {
55400
56041
  }
55401
56042
  }
55402
56043
  ),
55403
- /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props, variant })
56044
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { isAuthenticated, ...props, variant }),
56045
+ isMiniMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
56046
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
56047
+ DraggableClientInfoModal,
56048
+ {
56049
+ isOpen: isClientInfoModalOpen,
56050
+ clientInfo,
56051
+ callDuration: callDurationSeconds,
56052
+ isCallActive: isInCall || isConnecting,
56053
+ onClose: () => setIsClientInfoModalOpen(false)
56054
+ }
56055
+ ),
56056
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
56057
+ DraggableQualificationModal,
56058
+ {
56059
+ isOpen: isQualificationModalOpen,
56060
+ result: afterCallResult,
56061
+ onChangeResult: setAfterCallResult,
56062
+ successQualifications,
56063
+ discardQualifications,
56064
+ selectedQualificationId,
56065
+ onSelectQualification: setSelectedQualificationId,
56066
+ onSubmit: handleFinishAfterCall,
56067
+ isSubmitting: isSubmittingAfterCall,
56068
+ errorMessage: afterCallError
56069
+ }
56070
+ )
56071
+ ] })
55404
56072
  ] });
55405
56073
  }
55406
56074
  function deriveOptionsFromElement(element) {