callix-dialer-widget 1.3.4 → 1.3.6
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(
|
|
54521
|
-
|
|
54522
|
-
|
|
54523
|
-
|
|
54524
|
-
|
|
54525
|
-
|
|
54526
|
-
|
|
54527
|
-
|
|
54528
|
-
|
|
54529
|
-
|
|
54530
|
-
|
|
54531
|
-
"
|
|
54532
|
-
|
|
54533
|
-
|
|
54534
|
-
|
|
54535
|
-
|
|
54536
|
-
|
|
54537
|
-
|
|
54538
|
-
|
|
54539
|
-
|
|
54540
|
-
|
|
54541
|
-
|
|
54542
|
-
|
|
54543
|
-
|
|
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
|
-
|
|
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) {
|