call-control-sdk 5.0.3 → 5.0.4
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.
- package/dist/index.js +2 -2954
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2 -2972
- package/dist/index.mjs.map +1 -0
- package/package.json +33 -12
package/dist/index.js
CHANGED
|
@@ -1,2954 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
var __export = (target, all) => {
|
|
26
|
-
for (var name in all)
|
|
27
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
28
|
-
};
|
|
29
|
-
var __copyProps = (to, from, except, desc) => {
|
|
30
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
31
|
-
for (let key of __getOwnPropNames(from))
|
|
32
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
33
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
34
|
-
}
|
|
35
|
-
return to;
|
|
36
|
-
};
|
|
37
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
38
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
39
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
40
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
41
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
42
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
43
|
-
mod
|
|
44
|
-
));
|
|
45
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
46
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
47
|
-
|
|
48
|
-
// call-control-sdk/index.ts
|
|
49
|
-
var index_exports = {};
|
|
50
|
-
__export(index_exports, {
|
|
51
|
-
CallControlPanel: () => CallControlPanel,
|
|
52
|
-
initSDK: () => initSDK,
|
|
53
|
-
useLogout: () => useLogout_default
|
|
54
|
-
});
|
|
55
|
-
module.exports = __toCommonJS(index_exports);
|
|
56
|
-
|
|
57
|
-
// call-control-sdk/lib/components/callControlPanel.tsx
|
|
58
|
-
var import_icons_material2 = require("@mui/icons-material");
|
|
59
|
-
var import_material4 = require("@mui/material");
|
|
60
|
-
var import_react6 = require("react");
|
|
61
|
-
|
|
62
|
-
// call-control-sdk/lib/hooks/sdk-state.ts
|
|
63
|
-
var SDKStateManager = class {
|
|
64
|
-
constructor() {
|
|
65
|
-
__publicField(this, "state");
|
|
66
|
-
__publicField(this, "listeners", []);
|
|
67
|
-
__publicField(this, "STORAGE_KEY", "call-control-sdk-state");
|
|
68
|
-
this.state = this.getInitialState();
|
|
69
|
-
this.loadFromStorage();
|
|
70
|
-
}
|
|
71
|
-
getInitialState() {
|
|
72
|
-
return {
|
|
73
|
-
apiKey: null,
|
|
74
|
-
process: null,
|
|
75
|
-
agentId: "",
|
|
76
|
-
isInitialized: false,
|
|
77
|
-
isHolding: false,
|
|
78
|
-
isMuted: false,
|
|
79
|
-
status: "idle",
|
|
80
|
-
callStartTime: null,
|
|
81
|
-
controlPanelPosition: { x: 10, y: 10 },
|
|
82
|
-
iframePosition: { x: 10, y: 80 },
|
|
83
|
-
callData: {
|
|
84
|
-
agent_id: "",
|
|
85
|
-
status: "",
|
|
86
|
-
type: "",
|
|
87
|
-
event_time: "",
|
|
88
|
-
phone_number: ""
|
|
89
|
-
},
|
|
90
|
-
conferenceLine: [
|
|
91
|
-
{
|
|
92
|
-
line: 1,
|
|
93
|
-
status: "IDLE",
|
|
94
|
-
type: "",
|
|
95
|
-
phone: "",
|
|
96
|
-
isMute: false,
|
|
97
|
-
isHold: false,
|
|
98
|
-
isCallStart: false,
|
|
99
|
-
isMergeCall: false
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
line: 2,
|
|
103
|
-
status: "IDLE",
|
|
104
|
-
type: "",
|
|
105
|
-
phone: "",
|
|
106
|
-
isMute: false,
|
|
107
|
-
isHold: false,
|
|
108
|
-
isCallStart: false,
|
|
109
|
-
isMergeCall: false
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
line: 3,
|
|
113
|
-
status: "IDLE",
|
|
114
|
-
type: "",
|
|
115
|
-
phone: "",
|
|
116
|
-
isMute: false,
|
|
117
|
-
isHold: false,
|
|
118
|
-
isCallStart: false,
|
|
119
|
-
isMergeCall: false
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
line: 4,
|
|
123
|
-
status: "IDLE",
|
|
124
|
-
type: "",
|
|
125
|
-
phone: "",
|
|
126
|
-
isMute: false,
|
|
127
|
-
isHold: false,
|
|
128
|
-
isCallStart: false,
|
|
129
|
-
isMergeCall: false
|
|
130
|
-
},
|
|
131
|
-
{
|
|
132
|
-
line: 5,
|
|
133
|
-
status: "IDLE",
|
|
134
|
-
type: "",
|
|
135
|
-
phone: "",
|
|
136
|
-
isMute: false,
|
|
137
|
-
isHold: false,
|
|
138
|
-
isCallStart: false,
|
|
139
|
-
isMergeCall: false
|
|
140
|
-
}
|
|
141
|
-
]
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
loadFromStorage() {
|
|
145
|
-
try {
|
|
146
|
-
const stored = localStorage.getItem(this.STORAGE_KEY);
|
|
147
|
-
if (stored) {
|
|
148
|
-
const parsedState = JSON.parse(stored);
|
|
149
|
-
this.state = __spreadProps(__spreadValues({}, this.state), {
|
|
150
|
-
apiKey: parsedState.apiKey || "",
|
|
151
|
-
agentId: parsedState.agentId || "",
|
|
152
|
-
process: parsedState.process || null,
|
|
153
|
-
isInitialized: parsedState.isInitialized || false,
|
|
154
|
-
isHolding: parsedState.isHolding || false,
|
|
155
|
-
isMuted: parsedState.isMuted || false,
|
|
156
|
-
status: parsedState.status || "idle",
|
|
157
|
-
callStartTime: parsedState.callStartTime || null,
|
|
158
|
-
controlPanelPosition: parsedState.controlPanelPosition || {
|
|
159
|
-
x: 10,
|
|
160
|
-
y: 10
|
|
161
|
-
},
|
|
162
|
-
iframePosition: parsedState.iframePosition || { x: 10, y: 80 },
|
|
163
|
-
callData: parsedState.callData || {
|
|
164
|
-
mobileNumber: "",
|
|
165
|
-
callReferenceId: "",
|
|
166
|
-
agentLoginId: ""
|
|
167
|
-
},
|
|
168
|
-
// Fix: Properly handle conferenceLine with fallback to initial state
|
|
169
|
-
conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine
|
|
170
|
-
});
|
|
171
|
-
}
|
|
172
|
-
} catch (error) {
|
|
173
|
-
console.warn("Failed to load SDK state from localStorage:", error);
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
saveToStorage() {
|
|
177
|
-
try {
|
|
178
|
-
const persistentState = {
|
|
179
|
-
apiKey: this.state.apiKey,
|
|
180
|
-
agentId: this.state.agentId,
|
|
181
|
-
process: this.state.process,
|
|
182
|
-
isInitialized: this.state.isInitialized,
|
|
183
|
-
isHolding: this.state.isHolding,
|
|
184
|
-
isMuted: this.state.isMuted,
|
|
185
|
-
status: this.state.status,
|
|
186
|
-
callStartTime: this.state.callStartTime,
|
|
187
|
-
controlPanelPosition: this.state.controlPanelPosition,
|
|
188
|
-
iframePosition: this.state.iframePosition,
|
|
189
|
-
callData: this.state.callData,
|
|
190
|
-
conferenceLine: this.state.conferenceLine
|
|
191
|
-
};
|
|
192
|
-
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
|
|
193
|
-
} catch (error) {
|
|
194
|
-
console.warn("Failed to save SDK state to localStorage:", error);
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
notifyListeners() {
|
|
198
|
-
this.listeners.forEach((listener) => listener());
|
|
199
|
-
}
|
|
200
|
-
initialize(apiKey, agentId) {
|
|
201
|
-
if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
|
|
202
|
-
throw new Error("API key not available");
|
|
203
|
-
}
|
|
204
|
-
this.state.apiKey = apiKey;
|
|
205
|
-
this.state.agentId = agentId;
|
|
206
|
-
this.state.isInitialized = true;
|
|
207
|
-
this.saveToStorage();
|
|
208
|
-
this.notifyListeners();
|
|
209
|
-
}
|
|
210
|
-
getState() {
|
|
211
|
-
return __spreadValues({}, this.state);
|
|
212
|
-
}
|
|
213
|
-
subscribe(listener) {
|
|
214
|
-
this.listeners.push(listener);
|
|
215
|
-
return () => {
|
|
216
|
-
const index = this.listeners.indexOf(listener);
|
|
217
|
-
if (index > -1) {
|
|
218
|
-
this.listeners.splice(index, 1);
|
|
219
|
-
}
|
|
220
|
-
};
|
|
221
|
-
}
|
|
222
|
-
setHolding(isHolding) {
|
|
223
|
-
this.state.isHolding = isHolding;
|
|
224
|
-
this.saveToStorage();
|
|
225
|
-
this.notifyListeners();
|
|
226
|
-
}
|
|
227
|
-
setMuted(isMuted) {
|
|
228
|
-
this.state.isMuted = isMuted;
|
|
229
|
-
this.saveToStorage();
|
|
230
|
-
this.notifyListeners();
|
|
231
|
-
}
|
|
232
|
-
setStatus(status) {
|
|
233
|
-
this.state.status = status;
|
|
234
|
-
this.saveToStorage();
|
|
235
|
-
this.notifyListeners();
|
|
236
|
-
}
|
|
237
|
-
setProcess(process) {
|
|
238
|
-
this.state.process = process;
|
|
239
|
-
this.saveToStorage();
|
|
240
|
-
this.notifyListeners();
|
|
241
|
-
}
|
|
242
|
-
setControlPanelPosition(position) {
|
|
243
|
-
this.state.controlPanelPosition = position;
|
|
244
|
-
this.saveToStorage();
|
|
245
|
-
this.notifyListeners();
|
|
246
|
-
}
|
|
247
|
-
setIframePosition(position) {
|
|
248
|
-
this.state.iframePosition = position;
|
|
249
|
-
this.saveToStorage();
|
|
250
|
-
this.notifyListeners();
|
|
251
|
-
}
|
|
252
|
-
startCall() {
|
|
253
|
-
this.state.callStartTime = Date.now();
|
|
254
|
-
this.state.status = "on call";
|
|
255
|
-
this.saveToStorage();
|
|
256
|
-
this.notifyListeners();
|
|
257
|
-
}
|
|
258
|
-
endCall() {
|
|
259
|
-
this.state.callStartTime = null;
|
|
260
|
-
this.state.status = "idle";
|
|
261
|
-
this.state.isHolding = false;
|
|
262
|
-
this.state.isMuted = false;
|
|
263
|
-
this.saveToStorage();
|
|
264
|
-
this.notifyListeners();
|
|
265
|
-
}
|
|
266
|
-
updateCallData(data) {
|
|
267
|
-
this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
|
|
268
|
-
this.saveToStorage();
|
|
269
|
-
this.notifyListeners();
|
|
270
|
-
}
|
|
271
|
-
setConferenceLine(line) {
|
|
272
|
-
var _a;
|
|
273
|
-
if (!this.state.conferenceLine || !Array.isArray(this.state.conferenceLine)) {
|
|
274
|
-
console.warn("Conference line data corrupted, resetting to initial state");
|
|
275
|
-
this.state.conferenceLine = this.getInitialState().conferenceLine;
|
|
276
|
-
}
|
|
277
|
-
const conferenceLineData = (_a = this.state.conferenceLine) == null ? void 0 : _a.map((each) => {
|
|
278
|
-
if (each.line === line.line) {
|
|
279
|
-
return line;
|
|
280
|
-
}
|
|
281
|
-
return each;
|
|
282
|
-
});
|
|
283
|
-
this.state.conferenceLine = conferenceLineData;
|
|
284
|
-
this.saveToStorage();
|
|
285
|
-
this.notifyListeners();
|
|
286
|
-
}
|
|
287
|
-
resetConferenceLines() {
|
|
288
|
-
this.state.conferenceLine = this.getInitialState().conferenceLine;
|
|
289
|
-
this.saveToStorage();
|
|
290
|
-
this.notifyListeners();
|
|
291
|
-
}
|
|
292
|
-
clearStorageAndReset() {
|
|
293
|
-
try {
|
|
294
|
-
localStorage.removeItem(this.STORAGE_KEY);
|
|
295
|
-
this.state = this.getInitialState();
|
|
296
|
-
this.notifyListeners();
|
|
297
|
-
} catch (error) {
|
|
298
|
-
console.warn("Failed to clear localStorage:", error);
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
// Debug methods
|
|
302
|
-
debugStorage() {
|
|
303
|
-
try {
|
|
304
|
-
const stored = localStorage.getItem(this.STORAGE_KEY);
|
|
305
|
-
console.log("Current localStorage data:", stored);
|
|
306
|
-
if (stored) {
|
|
307
|
-
console.log("Parsed localStorage data:", JSON.parse(stored));
|
|
308
|
-
}
|
|
309
|
-
console.log("Current state:", this.state);
|
|
310
|
-
} catch (error) {
|
|
311
|
-
console.error("Error debugging storage:", error);
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
getConferenceLines() {
|
|
315
|
-
return this.state.conferenceLine || [];
|
|
316
|
-
}
|
|
317
|
-
};
|
|
318
|
-
var sdkStateManager = new SDKStateManager();
|
|
319
|
-
|
|
320
|
-
// call-control-sdk/lib/hooks/useDraggable.ts
|
|
321
|
-
var import_react = require("react");
|
|
322
|
-
function useDraggable(initialPosition, onPositionChange) {
|
|
323
|
-
const [position, setPosition] = (0, import_react.useState)(initialPosition);
|
|
324
|
-
const [isDragging, setIsDragging] = (0, import_react.useState)(false);
|
|
325
|
-
const dragRef = (0, import_react.useRef)();
|
|
326
|
-
const dragStart = (0, import_react.useRef)({ x: 0, y: 0 });
|
|
327
|
-
const elementStart = (0, import_react.useRef)({ x: 0, y: 0 });
|
|
328
|
-
const updatePosition = (0, import_react.useCallback)(
|
|
329
|
-
(newPosition) => {
|
|
330
|
-
const element = dragRef.current;
|
|
331
|
-
if (!element) return;
|
|
332
|
-
const rect = element.getBoundingClientRect();
|
|
333
|
-
const viewportWidth = window.innerWidth;
|
|
334
|
-
const viewportHeight = window.innerHeight;
|
|
335
|
-
const constrainedPosition = {
|
|
336
|
-
x: Math.max(0, Math.min(newPosition.x, viewportWidth - rect.width)),
|
|
337
|
-
y: Math.max(0, Math.min(newPosition.y, viewportHeight - rect.height))
|
|
338
|
-
};
|
|
339
|
-
setPosition(constrainedPosition);
|
|
340
|
-
onPositionChange == null ? void 0 : onPositionChange(constrainedPosition);
|
|
341
|
-
},
|
|
342
|
-
[onPositionChange]
|
|
343
|
-
);
|
|
344
|
-
const handleStart = (0, import_react.useCallback)(
|
|
345
|
-
(clientX, clientY) => {
|
|
346
|
-
setIsDragging(true);
|
|
347
|
-
dragStart.current = { x: clientX, y: clientY };
|
|
348
|
-
elementStart.current = position;
|
|
349
|
-
const handleMove = (moveClientX, moveClientY) => {
|
|
350
|
-
const deltaX = moveClientX - dragStart.current.x;
|
|
351
|
-
const deltaY = moveClientY - dragStart.current.y;
|
|
352
|
-
updatePosition({
|
|
353
|
-
x: elementStart.current.x + deltaX,
|
|
354
|
-
y: elementStart.current.y + deltaY
|
|
355
|
-
});
|
|
356
|
-
};
|
|
357
|
-
const handleMouseMove = (e) => {
|
|
358
|
-
e.preventDefault();
|
|
359
|
-
handleMove(e.clientX, e.clientY);
|
|
360
|
-
};
|
|
361
|
-
const handleTouchMove = (e) => {
|
|
362
|
-
e.preventDefault();
|
|
363
|
-
const touch = e.touches[0];
|
|
364
|
-
if (touch) {
|
|
365
|
-
handleMove(touch.clientX, touch.clientY);
|
|
366
|
-
}
|
|
367
|
-
};
|
|
368
|
-
const handleEnd = () => {
|
|
369
|
-
setIsDragging(false);
|
|
370
|
-
document.removeEventListener("mousemove", handleMouseMove);
|
|
371
|
-
document.removeEventListener("mouseup", handleEnd);
|
|
372
|
-
document.removeEventListener("touchmove", handleTouchMove);
|
|
373
|
-
document.removeEventListener("touchend", handleEnd);
|
|
374
|
-
};
|
|
375
|
-
document.addEventListener("mousemove", handleMouseMove);
|
|
376
|
-
document.addEventListener("mouseup", handleEnd);
|
|
377
|
-
document.addEventListener("touchmove", handleTouchMove, {
|
|
378
|
-
passive: false
|
|
379
|
-
});
|
|
380
|
-
document.addEventListener("touchend", handleEnd);
|
|
381
|
-
},
|
|
382
|
-
[position, updatePosition]
|
|
383
|
-
);
|
|
384
|
-
const handleMouseDown = (0, import_react.useCallback)(
|
|
385
|
-
(e) => {
|
|
386
|
-
e.preventDefault();
|
|
387
|
-
handleStart(e.clientX, e.clientY);
|
|
388
|
-
},
|
|
389
|
-
[handleStart]
|
|
390
|
-
);
|
|
391
|
-
const handleTouchStart = (0, import_react.useCallback)(
|
|
392
|
-
(e) => {
|
|
393
|
-
e.preventDefault();
|
|
394
|
-
const touch = e.touches[0];
|
|
395
|
-
if (touch) {
|
|
396
|
-
handleStart(touch.clientX, touch.clientY);
|
|
397
|
-
}
|
|
398
|
-
},
|
|
399
|
-
[handleStart]
|
|
400
|
-
);
|
|
401
|
-
return {
|
|
402
|
-
position,
|
|
403
|
-
isDragging,
|
|
404
|
-
dragRef,
|
|
405
|
-
handleMouseDown,
|
|
406
|
-
handleTouchStart
|
|
407
|
-
};
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
// call-control-sdk/lib/hooks/useSDKState.ts
|
|
411
|
-
var import_react2 = require("react");
|
|
412
|
-
function useSDKState() {
|
|
413
|
-
const [state, setState] = (0, import_react2.useState)(sdkStateManager.getState());
|
|
414
|
-
(0, import_react2.useEffect)(() => {
|
|
415
|
-
const unsubscribe = sdkStateManager.subscribe(() => {
|
|
416
|
-
setState(sdkStateManager.getState());
|
|
417
|
-
});
|
|
418
|
-
return unsubscribe;
|
|
419
|
-
}, []);
|
|
420
|
-
return state;
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
// call-control-sdk/lib/services/endPoint.ts
|
|
424
|
-
var BASE_URL = "http://192.168.101.177:8095";
|
|
425
|
-
var WS_BASE_URL = "ws://192.168.101.177:8095";
|
|
426
|
-
var VERSION = {
|
|
427
|
-
v1: "/api/v1"
|
|
428
|
-
};
|
|
429
|
-
var END_POINT = {
|
|
430
|
-
LOGIN: `${BASE_URL}${VERSION.v1}/cti/login?provider=convox`,
|
|
431
|
-
READY_AGENT: `${BASE_URL}${VERSION.v1}/cti/ready-agent?provider=convox`,
|
|
432
|
-
UPDATE_AGENT_BREAK: `${BASE_URL}${VERSION.v1}/cti/update-agent-break?provider=convox`,
|
|
433
|
-
CLICK_TO_CALL: `${BASE_URL}${VERSION.v1}/cti/click-to-call?provider=convox`,
|
|
434
|
-
HOLD_CALL: `${BASE_URL}${VERSION.v1}/cti/hold-call?provider=convox`,
|
|
435
|
-
MUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/mute-call?provider=convox`,
|
|
436
|
-
UNMUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/unmute-call?provider=convox`,
|
|
437
|
-
END_CALL: `${BASE_URL}${VERSION.v1}/cti/end-call?provider=convox`,
|
|
438
|
-
LOGOUT: `${BASE_URL}${VERSION.v1}/cti/logout?provider=convox`,
|
|
439
|
-
CONFERENCE_CALL: `${BASE_URL}${VERSION.v1}/cti/conference-call?provider=convox`,
|
|
440
|
-
CONFERENCE_CALL_HOLD_OR_UN_HOLD: `${BASE_URL}${VERSION.v1}/cti/conference-call/hold-unhold?provider=convox`,
|
|
441
|
-
CONFERENCE_CALL_MUTE_OT_UN_MUTE: `${BASE_URL}${VERSION.v1}/cti/conference-call/mute-unmute?provider=convox`,
|
|
442
|
-
CONFERENCE_CALL_END: `${BASE_URL}${VERSION.v1}/cti/conference-call/hangup?provider=convox`,
|
|
443
|
-
CONFERENCE_CALL_END_ALL: `${BASE_URL}${VERSION.v1}/cti/conference-call/hangup-all-call?provider=convox`,
|
|
444
|
-
TRANSFER_CALL: `${BASE_URL}${VERSION.v1}/cti/transfer?provider=convox`,
|
|
445
|
-
AGENTS_LIST: `${BASE_URL}${VERSION.v1}/cti/users`,
|
|
446
|
-
PROCESS_LIST: `${BASE_URL}${VERSION.v1}/cti/processes-list`,
|
|
447
|
-
TRANSFER_TO_DETAILS: `${BASE_URL}${VERSION.v1}/cti/trasnfer-to-details?provider=convox`
|
|
448
|
-
};
|
|
449
|
-
var WS_END_POINT = {
|
|
450
|
-
WS: `${WS_BASE_URL}${VERSION.v1}/cti/ws`
|
|
451
|
-
};
|
|
452
|
-
|
|
453
|
-
// call-control-sdk/lib/services/request.ts
|
|
454
|
-
var import_react4 = require("react");
|
|
455
|
-
|
|
456
|
-
// call-control-sdk/lib/services/axios.ts
|
|
457
|
-
var import_axios = __toESM(require("axios"));
|
|
458
|
-
var token = "12345";
|
|
459
|
-
var axiosInstance = import_axios.default.create({
|
|
460
|
-
baseURL: BASE_URL,
|
|
461
|
-
// Base URL from Vite environment variables
|
|
462
|
-
headers: {
|
|
463
|
-
"Content-Type": "application/json",
|
|
464
|
-
// Default content type for requests
|
|
465
|
-
Authorization: token
|
|
466
|
-
// Attach token if available (as raw, without Bearer prefix)
|
|
467
|
-
},
|
|
468
|
-
timeout: 1e4
|
|
469
|
-
// Request timeout in milliseconds (10 seconds)
|
|
470
|
-
});
|
|
471
|
-
axiosInstance.interceptors.request.use(
|
|
472
|
-
(config) => {
|
|
473
|
-
const token2 = "12345";
|
|
474
|
-
if (token2 && config.headers) {
|
|
475
|
-
config.headers.Authorization = `Bearer ${token2}`;
|
|
476
|
-
}
|
|
477
|
-
return config;
|
|
478
|
-
},
|
|
479
|
-
/**
|
|
480
|
-
* @here Handles request errors.
|
|
481
|
-
* @description Converts unknown request error types into standardized JavaScript Error.
|
|
482
|
-
*/
|
|
483
|
-
(error) => Promise.reject(error instanceof Error ? error : new Error(String(error)))
|
|
484
|
-
);
|
|
485
|
-
axiosInstance.interceptors.response.use(
|
|
486
|
-
(response) => response,
|
|
487
|
-
// Pass through successful response
|
|
488
|
-
async (error) => {
|
|
489
|
-
var _a;
|
|
490
|
-
const originalRequest = error.config;
|
|
491
|
-
if (((_a = error.response) == null ? void 0 : _a.status) === 401 && !originalRequest._retry) {
|
|
492
|
-
originalRequest._retry = true;
|
|
493
|
-
}
|
|
494
|
-
return Promise.reject(
|
|
495
|
-
error instanceof Error ? error : new Error(String(error))
|
|
496
|
-
);
|
|
497
|
-
}
|
|
498
|
-
);
|
|
499
|
-
var axios_default = axiosInstance;
|
|
500
|
-
|
|
501
|
-
// call-control-sdk/lib/services/toastMessage.tsx
|
|
502
|
-
var import_material = require("@mui/material");
|
|
503
|
-
var import_react3 = require("react");
|
|
504
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
505
|
-
function useToast() {
|
|
506
|
-
const [open, setOpen] = (0, import_react3.useState)(false);
|
|
507
|
-
const handleClose = (_event, reason) => {
|
|
508
|
-
if (reason === "clickaway") {
|
|
509
|
-
return;
|
|
510
|
-
}
|
|
511
|
-
setOpen(false);
|
|
512
|
-
};
|
|
513
|
-
const showToast = (message, type) => {
|
|
514
|
-
setOpen(true);
|
|
515
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
516
|
-
import_material.Snackbar,
|
|
517
|
-
{
|
|
518
|
-
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
519
|
-
open,
|
|
520
|
-
onClose: handleClose,
|
|
521
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
522
|
-
import_material.Alert,
|
|
523
|
-
{
|
|
524
|
-
onClose: handleClose,
|
|
525
|
-
severity: type,
|
|
526
|
-
variant: "filled",
|
|
527
|
-
sx: { width: "100%" },
|
|
528
|
-
children: message
|
|
529
|
-
}
|
|
530
|
-
)
|
|
531
|
-
}
|
|
532
|
-
);
|
|
533
|
-
};
|
|
534
|
-
return { showToast };
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
// call-control-sdk/lib/services/request.ts
|
|
538
|
-
var initialState = {
|
|
539
|
-
isLoading: false,
|
|
540
|
-
// Initially not loading
|
|
541
|
-
isSuccess: false,
|
|
542
|
-
// Initially no success
|
|
543
|
-
isError: false,
|
|
544
|
-
// Initially no error
|
|
545
|
-
error: null,
|
|
546
|
-
// No error to show
|
|
547
|
-
data: null
|
|
548
|
-
// No data to show
|
|
549
|
-
};
|
|
550
|
-
var reducer = (state, action) => {
|
|
551
|
-
if (action.type === "isLoading") {
|
|
552
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
553
|
-
isLoading: action.payload
|
|
554
|
-
});
|
|
555
|
-
} else if (action.type === "isSuccess") {
|
|
556
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
557
|
-
isSuccess: true,
|
|
558
|
-
data: action.payload
|
|
559
|
-
});
|
|
560
|
-
} else if (action.type === "isError") {
|
|
561
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
562
|
-
isError: true,
|
|
563
|
-
error: action.payload
|
|
564
|
-
});
|
|
565
|
-
} else if (action.type === "reset") {
|
|
566
|
-
return {
|
|
567
|
-
isLoading: false,
|
|
568
|
-
isSuccess: false,
|
|
569
|
-
isError: false,
|
|
570
|
-
error: null,
|
|
571
|
-
data: null
|
|
572
|
-
};
|
|
573
|
-
}
|
|
574
|
-
throw Error("Unknown action.");
|
|
575
|
-
};
|
|
576
|
-
var usePostRequest = (props = {}) => {
|
|
577
|
-
const { onSuccess = null, onError = null } = props;
|
|
578
|
-
const { showToast } = useToast();
|
|
579
|
-
const [state, dispatch] = (0, import_react4.useReducer)(reducer, initialState);
|
|
580
|
-
const postRequest = (0, import_react4.useCallback)(
|
|
581
|
-
(url, payload, config = {}) => {
|
|
582
|
-
dispatch({
|
|
583
|
-
type: "isLoading",
|
|
584
|
-
payload: true
|
|
585
|
-
});
|
|
586
|
-
axios_default.post(url, payload, config).then((res) => {
|
|
587
|
-
dispatch({
|
|
588
|
-
type: "isSuccess",
|
|
589
|
-
payload: res.data
|
|
590
|
-
});
|
|
591
|
-
onSuccess == null ? void 0 : onSuccess(res.data, payload);
|
|
592
|
-
}).catch((err) => {
|
|
593
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
594
|
-
const error = {
|
|
595
|
-
status: (_b = (_a = err.response) == null ? void 0 : _a.status) != null ? _b : 500,
|
|
596
|
-
message: ((_d = (_c = err.response) == null ? void 0 : _c.data) == null ? void 0 : _d.detail) || ((_f = (_e = err.response) == null ? void 0 : _e.data) == null ? void 0 : _f.message) || err.message || "An unknown error occurred",
|
|
597
|
-
data: (_h = (_g = err.response) == null ? void 0 : _g.data) != null ? _h : null,
|
|
598
|
-
statusText: (_j = (_i = err.response) == null ? void 0 : _i.statusText) != null ? _j : "",
|
|
599
|
-
code: (_k = err == null ? void 0 : err.code) != null ? _k : "",
|
|
600
|
-
name: (_l = err == null ? void 0 : err.name) != null ? _l : ""
|
|
601
|
-
};
|
|
602
|
-
showToast(error.message, "error");
|
|
603
|
-
dispatch({
|
|
604
|
-
type: "isError",
|
|
605
|
-
payload: error
|
|
606
|
-
});
|
|
607
|
-
onError == null ? void 0 : onError(error, payload);
|
|
608
|
-
}).finally(() => {
|
|
609
|
-
dispatch({
|
|
610
|
-
type: "isLoading",
|
|
611
|
-
payload: false
|
|
612
|
-
});
|
|
613
|
-
});
|
|
614
|
-
},
|
|
615
|
-
[onSuccess, onError, showToast]
|
|
616
|
-
// Dependencies for memoization
|
|
617
|
-
);
|
|
618
|
-
return [postRequest, state];
|
|
619
|
-
};
|
|
620
|
-
|
|
621
|
-
// call-control-sdk/lib/components/dialog.tsx
|
|
622
|
-
var import_icons_material = require("@mui/icons-material");
|
|
623
|
-
var import_material3 = require("@mui/material");
|
|
624
|
-
var import_react5 = require("react");
|
|
625
|
-
|
|
626
|
-
// call-control-sdk/lib/components/styles.ts
|
|
627
|
-
var import_material2 = require("@mui/material");
|
|
628
|
-
var useMyStyles = () => {
|
|
629
|
-
const theme = (0, import_material2.useTheme)();
|
|
630
|
-
return {
|
|
631
|
-
disabled: {
|
|
632
|
-
padding: "0px",
|
|
633
|
-
margin: "0px",
|
|
634
|
-
minWidth: "40px !important",
|
|
635
|
-
borderRadius: "16px",
|
|
636
|
-
border: `1px solid rgb(206, 204, 204)`,
|
|
637
|
-
height: "40px",
|
|
638
|
-
"&:hover": {
|
|
639
|
-
boxShadow: " 0px 2px 2px rgba(0, 0, 0, 0.79)",
|
|
640
|
-
border: `1px solid ${theme.palette.primary.main}`
|
|
641
|
-
},
|
|
642
|
-
"&:active": {
|
|
643
|
-
bgcolor: "primary.main",
|
|
644
|
-
boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
|
|
645
|
-
}
|
|
646
|
-
},
|
|
647
|
-
enabled: {
|
|
648
|
-
padding: "0px",
|
|
649
|
-
margin: "0px",
|
|
650
|
-
minWidth: "40px !important",
|
|
651
|
-
borderRadius: "16px",
|
|
652
|
-
boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
|
|
653
|
-
border: `1px solid ${theme.palette.primary.main}`,
|
|
654
|
-
height: "40px",
|
|
655
|
-
"&:hover": {
|
|
656
|
-
boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
|
|
657
|
-
border: `1px solid ${theme.palette.primary.main}`
|
|
658
|
-
},
|
|
659
|
-
"&:active": {
|
|
660
|
-
bgcolor: "primary.main",
|
|
661
|
-
boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
|
|
662
|
-
}
|
|
663
|
-
},
|
|
664
|
-
outlined: {
|
|
665
|
-
padding: "0px",
|
|
666
|
-
margin: "0px",
|
|
667
|
-
minWidth: "40px !important",
|
|
668
|
-
borderRadius: "16px",
|
|
669
|
-
backgroundColor: theme.palette.grey[200],
|
|
670
|
-
boxShadow: `0px 2px 1px ${theme.palette.primary.light}`,
|
|
671
|
-
border: `0px solid ${theme.palette.primary.main}`,
|
|
672
|
-
height: "40px",
|
|
673
|
-
"&:hover": {
|
|
674
|
-
boxShadow: `0px 2px 1px ${theme.palette.primary.main}`,
|
|
675
|
-
border: `0px solid ${theme.palette.primary.main}`
|
|
676
|
-
},
|
|
677
|
-
"&:active": {
|
|
678
|
-
bgcolor: "primary.main",
|
|
679
|
-
boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
};
|
|
683
|
-
};
|
|
684
|
-
var styles_default = useMyStyles;
|
|
685
|
-
|
|
686
|
-
// call-control-sdk/lib/components/dialog.tsx
|
|
687
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
688
|
-
function ConferenceDialog({ open, setOpen }) {
|
|
689
|
-
var _a, _b;
|
|
690
|
-
const state = useSDKState();
|
|
691
|
-
const { disabled, enabled, outlined } = styles_default();
|
|
692
|
-
const theme = (0, import_material3.useTheme)();
|
|
693
|
-
const handleClose = () => {
|
|
694
|
-
setOpen(false);
|
|
695
|
-
};
|
|
696
|
-
const onConferenceLineUpdate = (line, data) => {
|
|
697
|
-
sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
|
|
698
|
-
};
|
|
699
|
-
const onConferenceCallStart = (line, data) => {
|
|
700
|
-
var _a2, _b2, _c, _d;
|
|
701
|
-
const line_used = __spreadValues(__spreadValues({}, line), data);
|
|
702
|
-
const payload = {
|
|
703
|
-
action: "EXTERNAL_CONFERENCE",
|
|
704
|
-
operation: `CALL${line_used.line}`,
|
|
705
|
-
line_used: String(line_used.line),
|
|
706
|
-
thirdparty_no: line_used.phone,
|
|
707
|
-
userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
|
|
708
|
-
process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
|
|
709
|
-
};
|
|
710
|
-
axios_default.post(END_POINT.CONFERENCE_CALL, payload).then(() => {
|
|
711
|
-
sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
|
|
712
|
-
});
|
|
713
|
-
};
|
|
714
|
-
const onMergeConferenceCall = (line, data) => {
|
|
715
|
-
var _a2, _b2, _c, _d;
|
|
716
|
-
const line_used = __spreadValues(__spreadValues({}, line), data);
|
|
717
|
-
const payload = {
|
|
718
|
-
action: "EXTERNAL_CONFERENCE",
|
|
719
|
-
operation: `CONFERENCE`,
|
|
720
|
-
line_used: String(line_used.line),
|
|
721
|
-
thirdparty_no: line_used.phone,
|
|
722
|
-
userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
|
|
723
|
-
process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
|
|
724
|
-
};
|
|
725
|
-
axios_default.post(END_POINT.CONFERENCE_CALL, payload).then(() => {
|
|
726
|
-
sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
|
|
727
|
-
});
|
|
728
|
-
};
|
|
729
|
-
const onHoldOrUnHoldConferenceCall = (line, data, type) => {
|
|
730
|
-
var _a2, _b2, _c, _d;
|
|
731
|
-
const line_used = __spreadValues(__spreadValues({}, line), data);
|
|
732
|
-
const payload = {
|
|
733
|
-
action: "EXTERNAL_CONFERENCE",
|
|
734
|
-
operation: type,
|
|
735
|
-
hold_channel_no: type === "HOLDUSER" ? `hold${line_used.line}` : `unhold${line_used.line}`,
|
|
736
|
-
// Change the line according where u intiated firstly
|
|
737
|
-
userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
|
|
738
|
-
process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
|
|
739
|
-
};
|
|
740
|
-
axios_default.post(END_POINT.CONFERENCE_CALL_HOLD_OR_UN_HOLD, payload).then(() => {
|
|
741
|
-
sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
|
|
742
|
-
});
|
|
743
|
-
};
|
|
744
|
-
const onMuteOrUnMuteConferenceCall = (line, data, type) => {
|
|
745
|
-
var _a2, _b2, _c, _d;
|
|
746
|
-
const line_used = __spreadValues(__spreadValues({}, line), data);
|
|
747
|
-
const payload = {
|
|
748
|
-
action: "EXTERNAL_CONFERENCE",
|
|
749
|
-
operation: type,
|
|
750
|
-
channel_no: type === "MUTEUSER" ? `mute${line_used.line}` : `play${line_used.line}`,
|
|
751
|
-
userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
|
|
752
|
-
thirdparty_no: line_used.phone,
|
|
753
|
-
process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
|
|
754
|
-
};
|
|
755
|
-
axios_default.post(END_POINT.CONFERENCE_CALL_MUTE_OT_UN_MUTE, payload).then(() => {
|
|
756
|
-
sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
|
|
757
|
-
});
|
|
758
|
-
};
|
|
759
|
-
const onEndConferenceCall = (line, data) => {
|
|
760
|
-
var _a2, _b2, _c, _d;
|
|
761
|
-
const line_used = __spreadValues(__spreadValues({}, line), data);
|
|
762
|
-
const payload = {
|
|
763
|
-
action: "EXTERNAL_CONFERENCE",
|
|
764
|
-
operation: "HANGUP_CHANNEL",
|
|
765
|
-
line_used: String(line_used.line - 1),
|
|
766
|
-
user_type: `THIRDPARTY${line_used.line - 1}`,
|
|
767
|
-
thirdparty_no: line_used.phone,
|
|
768
|
-
userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
|
|
769
|
-
process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
|
|
770
|
-
};
|
|
771
|
-
axios_default.post(END_POINT.CONFERENCE_CALL_END, payload).then(() => {
|
|
772
|
-
sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
|
|
773
|
-
});
|
|
774
|
-
};
|
|
775
|
-
const onEndAllConferenceCalls = () => {
|
|
776
|
-
var _a2, _b2, _c, _d;
|
|
777
|
-
const payload = {
|
|
778
|
-
action: "EXTERNAL_CONFERENCE",
|
|
779
|
-
operation: "ENDCONFERENCE",
|
|
780
|
-
userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
|
|
781
|
-
process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
|
|
782
|
-
};
|
|
783
|
-
axios_default.post(END_POINT.CONFERENCE_CALL_END_ALL, payload).then(() => {
|
|
784
|
-
sdkStateManager.resetConferenceLines();
|
|
785
|
-
handleClose();
|
|
786
|
-
});
|
|
787
|
-
};
|
|
788
|
-
(0, import_react5.useEffect)(() => {
|
|
789
|
-
var _a2, _b2, _c, _d;
|
|
790
|
-
const obj = {
|
|
791
|
-
line: 1,
|
|
792
|
-
status: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) != null ? _b2 : "",
|
|
793
|
-
type: "internal",
|
|
794
|
-
phone: (_d = (_c = state.callData) == null ? void 0 : _c.phone_number) != null ? _d : "",
|
|
795
|
-
isMute: false,
|
|
796
|
-
isHold: false,
|
|
797
|
-
isMergeCall: false,
|
|
798
|
-
isCallStart: true
|
|
799
|
-
};
|
|
800
|
-
sdkStateManager.setConferenceLine(obj);
|
|
801
|
-
}, []);
|
|
802
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
803
|
-
import_material3.Dialog,
|
|
804
|
-
{
|
|
805
|
-
open,
|
|
806
|
-
"aria-labelledby": "alert-dialog-title",
|
|
807
|
-
"aria-describedby": "alert-dialog-description",
|
|
808
|
-
fullWidth: true,
|
|
809
|
-
maxWidth: "md",
|
|
810
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
|
|
811
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
812
|
-
import_material3.Box,
|
|
813
|
-
{
|
|
814
|
-
sx: {
|
|
815
|
-
display: "flex",
|
|
816
|
-
justifyContent: "space-between",
|
|
817
|
-
alignItems: "center",
|
|
818
|
-
padding: "4px 16px"
|
|
819
|
-
},
|
|
820
|
-
children: [
|
|
821
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { variant: "body1", children: [
|
|
822
|
-
(_a = state == null ? void 0 : state.agentId) != null ? _a : "",
|
|
823
|
-
" conference"
|
|
824
|
-
] }),
|
|
825
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
|
|
826
|
-
]
|
|
827
|
-
}
|
|
828
|
-
),
|
|
829
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
830
|
-
import_material3.Box,
|
|
831
|
-
{
|
|
832
|
-
sx: {
|
|
833
|
-
boxShadow: "0px 1px 2px #e7e5e5ff",
|
|
834
|
-
padding: "2px 6px",
|
|
835
|
-
margin: "0px 10px",
|
|
836
|
-
borderRadius: "20px"
|
|
837
|
-
},
|
|
838
|
-
children: (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.map((each, index) => {
|
|
839
|
-
var _a2, _b2;
|
|
840
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
841
|
-
import_material3.Box,
|
|
842
|
-
{
|
|
843
|
-
sx: {
|
|
844
|
-
p: 1,
|
|
845
|
-
display: "flex",
|
|
846
|
-
alignItems: "center",
|
|
847
|
-
justifyContent: "space-between",
|
|
848
|
-
gap: 1
|
|
849
|
-
},
|
|
850
|
-
children: [
|
|
851
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
852
|
-
import_material3.Box,
|
|
853
|
-
{
|
|
854
|
-
sx: {
|
|
855
|
-
color: "white",
|
|
856
|
-
bgcolor: "warning.main",
|
|
857
|
-
fontWeight: "bold",
|
|
858
|
-
fontSize: 14,
|
|
859
|
-
minWidth: 70,
|
|
860
|
-
textAlign: "center",
|
|
861
|
-
border: "2px solid primary.main",
|
|
862
|
-
borderRadius: "10px 50px 50px 10px"
|
|
863
|
-
},
|
|
864
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { children: (_a2 = each == null ? void 0 : each.line) != null ? _a2 : "" })
|
|
865
|
-
}
|
|
866
|
-
),
|
|
867
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
868
|
-
import_material3.Typography,
|
|
869
|
-
{
|
|
870
|
-
variant: "body2",
|
|
871
|
-
sx: {
|
|
872
|
-
px: 1,
|
|
873
|
-
border: "2px solid gray",
|
|
874
|
-
borderRadius: "10px",
|
|
875
|
-
textAlign: "center",
|
|
876
|
-
width: "80px",
|
|
877
|
-
maxWidth: "100px"
|
|
878
|
-
},
|
|
879
|
-
children: (_b2 = each == null ? void 0 : each.status) != null ? _b2 : ""
|
|
880
|
-
}
|
|
881
|
-
),
|
|
882
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
883
|
-
import_material3.Button,
|
|
884
|
-
{
|
|
885
|
-
sx: {
|
|
886
|
-
textTransform: "capitalize"
|
|
887
|
-
},
|
|
888
|
-
size: "small",
|
|
889
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body2", children: (each == null ? void 0 : each.line) === 1 ? "Internal" : "External" })
|
|
890
|
-
}
|
|
891
|
-
),
|
|
892
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
893
|
-
import_material3.TextField,
|
|
894
|
-
{
|
|
895
|
-
size: "small",
|
|
896
|
-
placeholder: "Phone Number",
|
|
897
|
-
value: (each == null ? void 0 : each.phone) || "",
|
|
898
|
-
disabled: (each == null ? void 0 : each.line) === 1,
|
|
899
|
-
onChange: (e) => {
|
|
900
|
-
onConferenceLineUpdate(each, { phone: e.target.value });
|
|
901
|
-
}
|
|
902
|
-
}
|
|
903
|
-
),
|
|
904
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
905
|
-
import_material3.Button,
|
|
906
|
-
{
|
|
907
|
-
variant: (each == null ? void 0 : each.isCallStart) ? "outlined" : "contained",
|
|
908
|
-
color: "success",
|
|
909
|
-
sx: (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : __spreadProps(__spreadValues({}, enabled), {
|
|
910
|
-
border: `0px solid ${theme.palette.success.light}`,
|
|
911
|
-
"&:hover": {
|
|
912
|
-
bgcolor: "error.light",
|
|
913
|
-
boxShadow: `0px 2px 1px ${theme.palette.success.light}`,
|
|
914
|
-
border: `0px solid ${theme.palette.success.light}`
|
|
915
|
-
},
|
|
916
|
-
"&:active": {
|
|
917
|
-
bgcolor: "error.light",
|
|
918
|
-
boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
|
|
919
|
-
}
|
|
920
|
-
}),
|
|
921
|
-
onClick: () => {
|
|
922
|
-
onConferenceCallStart(each, {
|
|
923
|
-
isCallStart: true,
|
|
924
|
-
status: "ONCALL"
|
|
925
|
-
});
|
|
926
|
-
},
|
|
927
|
-
disabled: each == null ? void 0 : each.isCallStart,
|
|
928
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
929
|
-
import_icons_material.Call,
|
|
930
|
-
{
|
|
931
|
-
sx: { color: (each == null ? void 0 : each.isCallStart) ? "defalult" : "#fff" }
|
|
932
|
-
}
|
|
933
|
-
)
|
|
934
|
-
}
|
|
935
|
-
) }),
|
|
936
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
937
|
-
import_material3.Button,
|
|
938
|
-
{
|
|
939
|
-
variant: (each == null ? void 0 : each.isMergeCall) ? "contained" : "outlined",
|
|
940
|
-
sx: (each == null ? void 0 : each.isMergeCall) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
|
|
941
|
-
onClick: () => {
|
|
942
|
-
onMergeConferenceCall(each, {
|
|
943
|
-
isMergeCall: true,
|
|
944
|
-
status: "ONCALL"
|
|
945
|
-
});
|
|
946
|
-
},
|
|
947
|
-
disabled: !(each == null ? void 0 : each.isCallStart),
|
|
948
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
|
|
949
|
-
}
|
|
950
|
-
) }),
|
|
951
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: each.isHold ? "Hold" : "Un Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
952
|
-
import_material3.Button,
|
|
953
|
-
{
|
|
954
|
-
variant: (each == null ? void 0 : each.isHold) ? "contained" : "outlined",
|
|
955
|
-
sx: (each == null ? void 0 : each.isHold) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
|
|
956
|
-
onClick: () => {
|
|
957
|
-
if (each.isHold) {
|
|
958
|
-
onHoldOrUnHoldConferenceCall(
|
|
959
|
-
each,
|
|
960
|
-
{ isHold: false },
|
|
961
|
-
"UNHOLDUSER"
|
|
962
|
-
);
|
|
963
|
-
} else {
|
|
964
|
-
onHoldOrUnHoldConferenceCall(
|
|
965
|
-
each,
|
|
966
|
-
{ isHold: true },
|
|
967
|
-
"HOLDUSER"
|
|
968
|
-
);
|
|
969
|
-
}
|
|
970
|
-
},
|
|
971
|
-
disabled: !(each == null ? void 0 : each.isCallStart),
|
|
972
|
-
children: each.isHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Pause, {})
|
|
973
|
-
}
|
|
974
|
-
) }),
|
|
975
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: each.isMute ? "Mute" : "Un Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
976
|
-
import_material3.Button,
|
|
977
|
-
{
|
|
978
|
-
variant: (each == null ? void 0 : each.isMute) ? "contained" : "outlined",
|
|
979
|
-
sx: (each == null ? void 0 : each.isMute) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
|
|
980
|
-
onClick: () => {
|
|
981
|
-
if (each.isMute) {
|
|
982
|
-
onMuteOrUnMuteConferenceCall(
|
|
983
|
-
each,
|
|
984
|
-
{ isMute: false },
|
|
985
|
-
"PLAYUSER"
|
|
986
|
-
);
|
|
987
|
-
} else {
|
|
988
|
-
onMuteOrUnMuteConferenceCall(
|
|
989
|
-
each,
|
|
990
|
-
{ isMute: true },
|
|
991
|
-
"MUTEUSER"
|
|
992
|
-
);
|
|
993
|
-
}
|
|
994
|
-
},
|
|
995
|
-
disabled: !(each == null ? void 0 : each.isCallStart),
|
|
996
|
-
children: each.isMute ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Mic, {})
|
|
997
|
-
}
|
|
998
|
-
) }),
|
|
999
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "End Call", children: (each == null ? void 0 : each.line) !== 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1000
|
-
import_material3.Button,
|
|
1001
|
-
{
|
|
1002
|
-
variant: (each == null ? void 0 : each.isCallStart) ? "contained" : "outlined",
|
|
1003
|
-
color: "error",
|
|
1004
|
-
sx: (each == null ? void 0 : each.isCallStart) ? __spreadProps(__spreadValues({}, enabled), {
|
|
1005
|
-
minWidth: "60px !important",
|
|
1006
|
-
border: `0px solid ${theme.palette.error.light}`,
|
|
1007
|
-
"&:hover": {
|
|
1008
|
-
bgcolor: "error.light",
|
|
1009
|
-
boxShadow: `0px 2px 1px ${theme.palette.error.light}`,
|
|
1010
|
-
border: `0px solid ${theme.palette.error.light}`
|
|
1011
|
-
},
|
|
1012
|
-
"&:active": {
|
|
1013
|
-
bgcolor: "error.light",
|
|
1014
|
-
boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
|
|
1015
|
-
}
|
|
1016
|
-
}) : __spreadProps(__spreadValues({}, disabled), { minWidth: "60px !important" }),
|
|
1017
|
-
onClick: () => {
|
|
1018
|
-
onEndConferenceCall(each, {
|
|
1019
|
-
isCallStart: false,
|
|
1020
|
-
isMergeCall: false,
|
|
1021
|
-
isMute: false,
|
|
1022
|
-
isHold: false,
|
|
1023
|
-
status: "IDLE"
|
|
1024
|
-
});
|
|
1025
|
-
},
|
|
1026
|
-
disabled: !(each == null ? void 0 : each.isCallStart),
|
|
1027
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
|
|
1028
|
-
}
|
|
1029
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1030
|
-
import_material3.Button,
|
|
1031
|
-
{
|
|
1032
|
-
variant: (each == null ? void 0 : each.isCallStart) ? "contained" : "outlined",
|
|
1033
|
-
sx: __spreadProps(__spreadValues({}, disabled), {
|
|
1034
|
-
visibility: "hidden",
|
|
1035
|
-
minWidth: "60px !important"
|
|
1036
|
-
}),
|
|
1037
|
-
onClick: () => {
|
|
1038
|
-
onEndConferenceCall(each, {
|
|
1039
|
-
isCallStart: false,
|
|
1040
|
-
isMergeCall: false,
|
|
1041
|
-
isMute: false,
|
|
1042
|
-
isHold: false,
|
|
1043
|
-
status: "IDLE"
|
|
1044
|
-
});
|
|
1045
|
-
},
|
|
1046
|
-
disabled: !(each == null ? void 0 : each.isCallStart),
|
|
1047
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1048
|
-
import_icons_material.CallEnd,
|
|
1049
|
-
{
|
|
1050
|
-
sx: {
|
|
1051
|
-
visibility: "hidden"
|
|
1052
|
-
}
|
|
1053
|
-
}
|
|
1054
|
-
) })
|
|
1055
|
-
}
|
|
1056
|
-
) })
|
|
1057
|
-
]
|
|
1058
|
-
},
|
|
1059
|
-
index
|
|
1060
|
-
);
|
|
1061
|
-
})
|
|
1062
|
-
}
|
|
1063
|
-
),
|
|
1064
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1065
|
-
import_material3.Button,
|
|
1066
|
-
{
|
|
1067
|
-
variant: "outlined",
|
|
1068
|
-
color: "error",
|
|
1069
|
-
size: "large",
|
|
1070
|
-
onClick: onEndAllConferenceCalls,
|
|
1071
|
-
sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
|
|
1072
|
-
children: [
|
|
1073
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1074
|
-
import_material3.IconButton,
|
|
1075
|
-
{
|
|
1076
|
-
sx: {
|
|
1077
|
-
bgcolor: "error.main",
|
|
1078
|
-
"&:hover": { bgcolor: "error.dark" },
|
|
1079
|
-
marginRight: "8px",
|
|
1080
|
-
width: "28px",
|
|
1081
|
-
height: "28px",
|
|
1082
|
-
fontSize: "12px",
|
|
1083
|
-
fontWeight: "600",
|
|
1084
|
-
lineHeight: "16px",
|
|
1085
|
-
letterSpacing: "0.02em",
|
|
1086
|
-
textTransform: "capitalize",
|
|
1087
|
-
color: "white",
|
|
1088
|
-
display: "flex",
|
|
1089
|
-
alignItems: "center",
|
|
1090
|
-
justifyContent: "center",
|
|
1091
|
-
borderRadius: "50%"
|
|
1092
|
-
},
|
|
1093
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1094
|
-
import_icons_material.PhoneDisabled,
|
|
1095
|
-
{
|
|
1096
|
-
sx: {
|
|
1097
|
-
color: "white",
|
|
1098
|
-
fontSize: "16px",
|
|
1099
|
-
fontWeight: "600"
|
|
1100
|
-
}
|
|
1101
|
-
}
|
|
1102
|
-
)
|
|
1103
|
-
}
|
|
1104
|
-
),
|
|
1105
|
-
"End Conference"
|
|
1106
|
-
]
|
|
1107
|
-
}
|
|
1108
|
-
) })
|
|
1109
|
-
] })
|
|
1110
|
-
}
|
|
1111
|
-
) });
|
|
1112
|
-
}
|
|
1113
|
-
function CallTransferDialog({ open, setOpen }) {
|
|
1114
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1115
|
-
const [transferCall] = usePostRequest({
|
|
1116
|
-
onSuccess: (res) => {
|
|
1117
|
-
console.log("res", res);
|
|
1118
|
-
setOpen(false);
|
|
1119
|
-
},
|
|
1120
|
-
onError: (error) => {
|
|
1121
|
-
console.log("error", error);
|
|
1122
|
-
}
|
|
1123
|
-
});
|
|
1124
|
-
const state = useSDKState();
|
|
1125
|
-
const [currentselecteTab, setCurrentselecteTab] = (0, import_react5.useState)("process");
|
|
1126
|
-
const [getIdelAgentsList, { data: idleAgentsList }] = usePostRequest();
|
|
1127
|
-
const [getProcessAndQueuesList, { data: processAndQueuesList }] = usePostRequest();
|
|
1128
|
-
const handleClose = () => {
|
|
1129
|
-
setOpen(false);
|
|
1130
|
-
};
|
|
1131
|
-
const handleTransferCall = (data, type) => {
|
|
1132
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G;
|
|
1133
|
-
console.log(data, "data34");
|
|
1134
|
-
if (type === "PROCESS") {
|
|
1135
|
-
const payload = {
|
|
1136
|
-
mobile_number: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.phone_number) != null ? _b2 : "",
|
|
1137
|
-
userid: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.agent_id) != null ? _d2 : "",
|
|
1138
|
-
type: "PROCESS",
|
|
1139
|
-
transfer_to: (_e2 = data == null ? void 0 : data.process_name) != null ? _e2 : "",
|
|
1140
|
-
callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
|
|
1141
|
-
processid: String((_i = (_h2 = state.callData) == null ? void 0 : _h2.process_id) != null ? _i : ""),
|
|
1142
|
-
process_name: (_k = (_j = state.callData) == null ? void 0 : _j.process_name) != null ? _k : ""
|
|
1143
|
-
};
|
|
1144
|
-
transferCall(END_POINT.TRANSFER_CALL, payload);
|
|
1145
|
-
} else if (type === "QUEUE") {
|
|
1146
|
-
const payload = {
|
|
1147
|
-
mobile_number: (_m = (_l = state.callData) == null ? void 0 : _l.phone_number) != null ? _m : "",
|
|
1148
|
-
userid: (_o = (_n = state.callData) == null ? void 0 : _n.agent_id) != null ? _o : "",
|
|
1149
|
-
type: "QUEUE",
|
|
1150
|
-
transfer_to: (_p = data == null ? void 0 : data.queue_name) != null ? _p : "",
|
|
1151
|
-
callreferenceid: (_r = (_q = state.callData) == null ? void 0 : _q.convox_id) != null ? _r : "",
|
|
1152
|
-
processid: String((_t = (_s = state.callData) == null ? void 0 : _s.process_id) != null ? _t : ""),
|
|
1153
|
-
process_name: (_v = (_u = state.callData) == null ? void 0 : _u.process_name) != null ? _v : ""
|
|
1154
|
-
};
|
|
1155
|
-
transferCall(END_POINT.TRANSFER_CALL, payload);
|
|
1156
|
-
} else if (type === "AGENT") {
|
|
1157
|
-
const payload = {
|
|
1158
|
-
mobile_number: (_x = (_w = state.callData) == null ? void 0 : _w.phone_number) != null ? _x : "",
|
|
1159
|
-
userid: (_z = (_y = state.callData) == null ? void 0 : _y.agent_id) != null ? _z : "",
|
|
1160
|
-
type: "AGENT",
|
|
1161
|
-
transfer_to: (_A = data == null ? void 0 : data.user_id) != null ? _A : "",
|
|
1162
|
-
callreferenceid: (_C = (_B = state.callData) == null ? void 0 : _B.convox_id) != null ? _C : "",
|
|
1163
|
-
processid: String((_E = (_D = state.callData) == null ? void 0 : _D.process_id) != null ? _E : ""),
|
|
1164
|
-
process_name: (_G = (_F = state.callData) == null ? void 0 : _F.process_name) != null ? _G : ""
|
|
1165
|
-
};
|
|
1166
|
-
transferCall(END_POINT.TRANSFER_CALL, payload);
|
|
1167
|
-
}
|
|
1168
|
-
};
|
|
1169
|
-
(0, import_react5.useEffect)(() => {
|
|
1170
|
-
getIdelAgentsList(END_POINT.AGENTS_LIST, {
|
|
1171
|
-
status: "IDLE",
|
|
1172
|
-
active: true
|
|
1173
|
-
});
|
|
1174
|
-
getProcessAndQueuesList(END_POINT.TRANSFER_TO_DETAILS, {
|
|
1175
|
-
status: "ACTIVE",
|
|
1176
|
-
active: true
|
|
1177
|
-
});
|
|
1178
|
-
}, []);
|
|
1179
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1180
|
-
import_material3.Dialog,
|
|
1181
|
-
{
|
|
1182
|
-
open,
|
|
1183
|
-
"aria-labelledby": "alert-dialog-title",
|
|
1184
|
-
"aria-describedby": "alert-dialog-description",
|
|
1185
|
-
fullWidth: true,
|
|
1186
|
-
maxWidth: "md",
|
|
1187
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
|
|
1188
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1189
|
-
import_material3.Box,
|
|
1190
|
-
{
|
|
1191
|
-
sx: {
|
|
1192
|
-
display: "flex",
|
|
1193
|
-
justifyContent: "space-between",
|
|
1194
|
-
alignItems: "center",
|
|
1195
|
-
padding: "4px 16px",
|
|
1196
|
-
boxShadow: "0px 1px 2px #f5f5f5ff"
|
|
1197
|
-
},
|
|
1198
|
-
children: [
|
|
1199
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call Transfer" }),
|
|
1200
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
|
|
1201
|
-
]
|
|
1202
|
-
}
|
|
1203
|
-
),
|
|
1204
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1205
|
-
import_material3.Box,
|
|
1206
|
-
{
|
|
1207
|
-
sx: {
|
|
1208
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1209
|
-
padding: "6px 10px",
|
|
1210
|
-
margin: "10px",
|
|
1211
|
-
borderRadius: "10px"
|
|
1212
|
-
},
|
|
1213
|
-
children: [
|
|
1214
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: [
|
|
1215
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1216
|
-
import_material3.Button,
|
|
1217
|
-
{
|
|
1218
|
-
variant: currentselecteTab === "process" ? "contained" : "outlined",
|
|
1219
|
-
onClick: () => setCurrentselecteTab("process"),
|
|
1220
|
-
children: "Process"
|
|
1221
|
-
}
|
|
1222
|
-
),
|
|
1223
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1224
|
-
import_material3.Button,
|
|
1225
|
-
{
|
|
1226
|
-
variant: currentselecteTab === "queues" ? "contained" : "outlined",
|
|
1227
|
-
onClick: () => setCurrentselecteTab("queues"),
|
|
1228
|
-
children: "Queues"
|
|
1229
|
-
}
|
|
1230
|
-
),
|
|
1231
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1232
|
-
import_material3.Button,
|
|
1233
|
-
{
|
|
1234
|
-
variant: currentselecteTab === "agents" ? "contained" : "outlined",
|
|
1235
|
-
onClick: () => setCurrentselecteTab("agents"),
|
|
1236
|
-
children: "Agents"
|
|
1237
|
-
}
|
|
1238
|
-
)
|
|
1239
|
-
] }),
|
|
1240
|
-
currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: ((_b = (_a = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a.process) == null ? void 0 : _b.length) > 0 ? (_d = (_c = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _c.process) == null ? void 0 : _d.map(
|
|
1241
|
-
(process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1242
|
-
import_material3.Box,
|
|
1243
|
-
{
|
|
1244
|
-
sx: {
|
|
1245
|
-
p: 1,
|
|
1246
|
-
display: "flex",
|
|
1247
|
-
alignItems: "center",
|
|
1248
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1249
|
-
padding: "6px",
|
|
1250
|
-
margin: "10px 0px",
|
|
1251
|
-
borderRadius: "10px",
|
|
1252
|
-
"&:hover": { bgcolor: "action.selected" }
|
|
1253
|
-
},
|
|
1254
|
-
children: [
|
|
1255
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1256
|
-
import_material3.Typography,
|
|
1257
|
-
{
|
|
1258
|
-
variant: "body1",
|
|
1259
|
-
sx: {
|
|
1260
|
-
mx: 1,
|
|
1261
|
-
width: "200px",
|
|
1262
|
-
maxWidth: "250px",
|
|
1263
|
-
display: "flex",
|
|
1264
|
-
alignItems: "center"
|
|
1265
|
-
},
|
|
1266
|
-
children: [
|
|
1267
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
|
|
1268
|
-
process.process_name
|
|
1269
|
-
]
|
|
1270
|
-
}
|
|
1271
|
-
),
|
|
1272
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1273
|
-
import_material3.IconButton,
|
|
1274
|
-
{
|
|
1275
|
-
color: "success",
|
|
1276
|
-
sx: {
|
|
1277
|
-
bgcolor: "action.hover",
|
|
1278
|
-
"&:hover": { bgcolor: "action.selected" }
|
|
1279
|
-
},
|
|
1280
|
-
onClick: () => {
|
|
1281
|
-
handleTransferCall(process, "PROCESS");
|
|
1282
|
-
},
|
|
1283
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
|
|
1284
|
-
}
|
|
1285
|
-
)
|
|
1286
|
-
]
|
|
1287
|
-
},
|
|
1288
|
-
index
|
|
1289
|
-
)
|
|
1290
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1291
|
-
import_material3.Typography,
|
|
1292
|
-
{
|
|
1293
|
-
variant: "body1",
|
|
1294
|
-
sx: {
|
|
1295
|
-
fontSize: "12px",
|
|
1296
|
-
fontWeight: "600",
|
|
1297
|
-
letterSpacing: "0.02em",
|
|
1298
|
-
textTransform: "capitalize",
|
|
1299
|
-
textAlign: "center",
|
|
1300
|
-
width: "100%",
|
|
1301
|
-
margin: "10px 0px",
|
|
1302
|
-
color: "gray"
|
|
1303
|
-
},
|
|
1304
|
-
children: "No Process Found"
|
|
1305
|
-
}
|
|
1306
|
-
) }),
|
|
1307
|
-
currentselecteTab === "queues" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: ((_f = (_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.queue) == null ? void 0 : _f.length) > 0 ? (_h = (_g = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _g.queue) == null ? void 0 : _h.map(
|
|
1308
|
-
(queue, index) => {
|
|
1309
|
-
var _a2, _b2, _c2, _d2, _e2, _f2;
|
|
1310
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1311
|
-
import_material3.Box,
|
|
1312
|
-
{
|
|
1313
|
-
sx: {
|
|
1314
|
-
p: 1,
|
|
1315
|
-
display: "flex",
|
|
1316
|
-
alignItems: "center",
|
|
1317
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1318
|
-
padding: "6px",
|
|
1319
|
-
margin: "10px 0px",
|
|
1320
|
-
borderRadius: "10px",
|
|
1321
|
-
"&:hover": { bgcolor: "action.selected" }
|
|
1322
|
-
},
|
|
1323
|
-
children: [
|
|
1324
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1325
|
-
import_material3.Typography,
|
|
1326
|
-
{
|
|
1327
|
-
variant: "body1",
|
|
1328
|
-
sx: {
|
|
1329
|
-
mx: 1,
|
|
1330
|
-
width: "200px",
|
|
1331
|
-
maxWidth: "250px",
|
|
1332
|
-
display: "flex",
|
|
1333
|
-
alignItems: "center"
|
|
1334
|
-
},
|
|
1335
|
-
children: [
|
|
1336
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
|
|
1337
|
-
queue.queue_name,
|
|
1338
|
-
((_c2 = (_b2 = (_a2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a2.process) == null ? void 0 : _b2.find(
|
|
1339
|
-
(process) => process.process_id === queue.process_id
|
|
1340
|
-
)) == null ? void 0 : _c2.process_name) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1341
|
-
import_material3.Typography,
|
|
1342
|
-
{
|
|
1343
|
-
variant: "body1",
|
|
1344
|
-
sx: {
|
|
1345
|
-
fontSize: "12px",
|
|
1346
|
-
fontWeight: "600",
|
|
1347
|
-
letterSpacing: "0.02em",
|
|
1348
|
-
textTransform: "capitalize",
|
|
1349
|
-
color: "gray"
|
|
1350
|
-
},
|
|
1351
|
-
children: "(" + ((_f2 = (_e2 = (_d2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d2.process) == null ? void 0 : _e2.find(
|
|
1352
|
-
(process) => process.process_id === queue.process_id
|
|
1353
|
-
)) == null ? void 0 : _f2.process_name) + ")"
|
|
1354
|
-
}
|
|
1355
|
-
) : ""
|
|
1356
|
-
]
|
|
1357
|
-
}
|
|
1358
|
-
),
|
|
1359
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1360
|
-
import_material3.IconButton,
|
|
1361
|
-
{
|
|
1362
|
-
color: "success",
|
|
1363
|
-
sx: {
|
|
1364
|
-
bgcolor: "action.hover",
|
|
1365
|
-
"&:hover": { bgcolor: "action.selected" }
|
|
1366
|
-
},
|
|
1367
|
-
onClick: () => {
|
|
1368
|
-
handleTransferCall(queue, "QUEUE");
|
|
1369
|
-
},
|
|
1370
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
|
|
1371
|
-
}
|
|
1372
|
-
)
|
|
1373
|
-
]
|
|
1374
|
-
},
|
|
1375
|
-
index
|
|
1376
|
-
);
|
|
1377
|
-
}
|
|
1378
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1379
|
-
import_material3.Typography,
|
|
1380
|
-
{
|
|
1381
|
-
variant: "body1",
|
|
1382
|
-
sx: {
|
|
1383
|
-
fontSize: "12px",
|
|
1384
|
-
fontWeight: "600",
|
|
1385
|
-
letterSpacing: "0.02em",
|
|
1386
|
-
textTransform: "capitalize",
|
|
1387
|
-
textAlign: "center",
|
|
1388
|
-
width: "100%",
|
|
1389
|
-
margin: "10px 0px",
|
|
1390
|
-
color: "gray"
|
|
1391
|
-
},
|
|
1392
|
-
children: "No Queues Found"
|
|
1393
|
-
}
|
|
1394
|
-
) }),
|
|
1395
|
-
currentselecteTab === "agents" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: (idleAgentsList == null ? void 0 : idleAgentsList.length) > 0 ? idleAgentsList.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1396
|
-
import_material3.Box,
|
|
1397
|
-
{
|
|
1398
|
-
sx: {
|
|
1399
|
-
p: 1,
|
|
1400
|
-
display: "flex",
|
|
1401
|
-
alignItems: "center",
|
|
1402
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1403
|
-
padding: "6px",
|
|
1404
|
-
margin: "10px 0px",
|
|
1405
|
-
borderRadius: "10px",
|
|
1406
|
-
"&:hover": { bgcolor: "action.selected" }
|
|
1407
|
-
},
|
|
1408
|
-
children: [
|
|
1409
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1410
|
-
import_material3.Typography,
|
|
1411
|
-
{
|
|
1412
|
-
variant: "body1",
|
|
1413
|
-
sx: {
|
|
1414
|
-
mx: 1,
|
|
1415
|
-
width: "200px",
|
|
1416
|
-
maxWidth: "250px",
|
|
1417
|
-
display: "flex",
|
|
1418
|
-
alignItems: "center"
|
|
1419
|
-
},
|
|
1420
|
-
children: [
|
|
1421
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
|
|
1422
|
-
agent.name
|
|
1423
|
-
]
|
|
1424
|
-
}
|
|
1425
|
-
),
|
|
1426
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1427
|
-
import_material3.IconButton,
|
|
1428
|
-
{
|
|
1429
|
-
color: "success",
|
|
1430
|
-
sx: {
|
|
1431
|
-
bgcolor: "action.hover",
|
|
1432
|
-
"&:hover": { bgcolor: "action.selected" }
|
|
1433
|
-
},
|
|
1434
|
-
onClick: () => {
|
|
1435
|
-
handleTransferCall(agent, "AGENT");
|
|
1436
|
-
},
|
|
1437
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
|
|
1438
|
-
}
|
|
1439
|
-
)
|
|
1440
|
-
]
|
|
1441
|
-
},
|
|
1442
|
-
index
|
|
1443
|
-
)) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1444
|
-
import_material3.Typography,
|
|
1445
|
-
{
|
|
1446
|
-
variant: "body1",
|
|
1447
|
-
sx: {
|
|
1448
|
-
fontSize: "12px",
|
|
1449
|
-
fontWeight: "600",
|
|
1450
|
-
letterSpacing: "0.02em",
|
|
1451
|
-
textTransform: "capitalize",
|
|
1452
|
-
textAlign: "center",
|
|
1453
|
-
width: "100%",
|
|
1454
|
-
margin: "10px 0px",
|
|
1455
|
-
color: "gray"
|
|
1456
|
-
},
|
|
1457
|
-
children: "No Agents Found"
|
|
1458
|
-
}
|
|
1459
|
-
) })
|
|
1460
|
-
]
|
|
1461
|
-
}
|
|
1462
|
-
)
|
|
1463
|
-
] })
|
|
1464
|
-
}
|
|
1465
|
-
) });
|
|
1466
|
-
}
|
|
1467
|
-
function EndCallDispositionDialog({
|
|
1468
|
-
open,
|
|
1469
|
-
setOpen,
|
|
1470
|
-
onSubmitDisposition
|
|
1471
|
-
}) {
|
|
1472
|
-
var _a, _b;
|
|
1473
|
-
const [formData, setFormData] = (0, import_react5.useState)({
|
|
1474
|
-
disposition: { label: "Resolved", value: "RES" },
|
|
1475
|
-
followUp: { label: "No", value: "N" },
|
|
1476
|
-
callbackDate: "",
|
|
1477
|
-
callbackHrs: "",
|
|
1478
|
-
callbackMins: ""
|
|
1479
|
-
});
|
|
1480
|
-
const dispositionOptions = [
|
|
1481
|
-
{ label: "Not Interested", value: "NI" },
|
|
1482
|
-
{ label: "Resolved", value: "RES" }
|
|
1483
|
-
];
|
|
1484
|
-
const followUpOptions = [
|
|
1485
|
-
{ label: "Yes", value: "Y" },
|
|
1486
|
-
{ label: "No", value: "N" }
|
|
1487
|
-
];
|
|
1488
|
-
const handleChange = (field, value) => {
|
|
1489
|
-
setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [field]: value }));
|
|
1490
|
-
};
|
|
1491
|
-
const handleReset = () => {
|
|
1492
|
-
setFormData({
|
|
1493
|
-
disposition: { label: "Resolved", value: "RES" },
|
|
1494
|
-
followUp: { label: "No", value: "N" },
|
|
1495
|
-
callbackDate: "",
|
|
1496
|
-
callbackHrs: "",
|
|
1497
|
-
callbackMins: ""
|
|
1498
|
-
});
|
|
1499
|
-
};
|
|
1500
|
-
const handleClose = () => {
|
|
1501
|
-
handleReset();
|
|
1502
|
-
setOpen(false);
|
|
1503
|
-
};
|
|
1504
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1505
|
-
import_material3.Dialog,
|
|
1506
|
-
{
|
|
1507
|
-
open,
|
|
1508
|
-
"aria-labelledby": "alert-dialog-title",
|
|
1509
|
-
"aria-describedby": "alert-dialog-description",
|
|
1510
|
-
fullWidth: true,
|
|
1511
|
-
maxWidth: "xs",
|
|
1512
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
|
|
1513
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1514
|
-
import_material3.Box,
|
|
1515
|
-
{
|
|
1516
|
-
sx: {
|
|
1517
|
-
display: "flex",
|
|
1518
|
-
justifyContent: "center",
|
|
1519
|
-
alignItems: "center",
|
|
1520
|
-
padding: "4px 16px",
|
|
1521
|
-
boxShadow: "0px 1px 2px #f5f5f5ff"
|
|
1522
|
-
},
|
|
1523
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { variant: "body1", m: 1, children: [
|
|
1524
|
-
" ",
|
|
1525
|
-
"Call Disposition"
|
|
1526
|
-
] })
|
|
1527
|
-
}
|
|
1528
|
-
),
|
|
1529
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1530
|
-
import_material3.Box,
|
|
1531
|
-
{
|
|
1532
|
-
sx: {
|
|
1533
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1534
|
-
padding: "10px",
|
|
1535
|
-
margin: "10px",
|
|
1536
|
-
borderRadius: "10px"
|
|
1537
|
-
},
|
|
1538
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Grid, { container: true, spacing: 2, children: [
|
|
1539
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1540
|
-
import_material3.Autocomplete,
|
|
1541
|
-
{
|
|
1542
|
-
value: formData.disposition,
|
|
1543
|
-
options: dispositionOptions,
|
|
1544
|
-
getOptionLabel: (opt) => opt.label,
|
|
1545
|
-
onChange: (_, val) => handleChange("disposition", val),
|
|
1546
|
-
size: "small",
|
|
1547
|
-
renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TextField, __spreadProps(__spreadValues({}, params), { label: "Disposition", fullWidth: true }))
|
|
1548
|
-
}
|
|
1549
|
-
) }),
|
|
1550
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1551
|
-
import_material3.Autocomplete,
|
|
1552
|
-
{
|
|
1553
|
-
options: followUpOptions,
|
|
1554
|
-
getOptionLabel: (opt) => opt.label,
|
|
1555
|
-
value: formData.followUp,
|
|
1556
|
-
onChange: (_, val) => handleChange("followUp", val),
|
|
1557
|
-
size: "small",
|
|
1558
|
-
renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TextField, __spreadProps(__spreadValues({}, params), { label: "Follow Up", fullWidth: true }))
|
|
1559
|
-
}
|
|
1560
|
-
) }),
|
|
1561
|
-
((_b = (_a = formData == null ? void 0 : formData.followUp) == null ? void 0 : _a.label) == null ? void 0 : _b.toLowerCase()) === "yes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
1562
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1563
|
-
import_material3.TextField,
|
|
1564
|
-
{
|
|
1565
|
-
size: "small",
|
|
1566
|
-
label: "Callback Date",
|
|
1567
|
-
type: "date",
|
|
1568
|
-
slotProps: {
|
|
1569
|
-
inputLabel: { shrink: true }
|
|
1570
|
-
},
|
|
1571
|
-
value: formData.callbackDate,
|
|
1572
|
-
onChange: (e) => handleChange("callbackDate", e.target.value),
|
|
1573
|
-
fullWidth: true
|
|
1574
|
-
}
|
|
1575
|
-
) }),
|
|
1576
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1577
|
-
import_material3.TextField,
|
|
1578
|
-
{
|
|
1579
|
-
size: "small",
|
|
1580
|
-
label: "Hours (0-23)",
|
|
1581
|
-
type: "text",
|
|
1582
|
-
inputProps: { min: 0, max: 23 },
|
|
1583
|
-
value: formData.callbackHrs,
|
|
1584
|
-
onChange: (e) => handleChange("callbackHrs", e.target.value),
|
|
1585
|
-
fullWidth: true
|
|
1586
|
-
}
|
|
1587
|
-
) }),
|
|
1588
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1589
|
-
import_material3.TextField,
|
|
1590
|
-
{
|
|
1591
|
-
size: "small",
|
|
1592
|
-
label: "Minutes (0-59)",
|
|
1593
|
-
type: "text",
|
|
1594
|
-
inputProps: { min: 0, max: 59 },
|
|
1595
|
-
value: formData.callbackMins,
|
|
1596
|
-
onChange: (e) => handleChange("callbackMins", e.target.value),
|
|
1597
|
-
fullWidth: true
|
|
1598
|
-
}
|
|
1599
|
-
) })
|
|
1600
|
-
] })
|
|
1601
|
-
] })
|
|
1602
|
-
}
|
|
1603
|
-
),
|
|
1604
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { textAlign: "right", m: 2, children: [
|
|
1605
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1606
|
-
import_material3.Button,
|
|
1607
|
-
{
|
|
1608
|
-
variant: "outlined",
|
|
1609
|
-
color: "error",
|
|
1610
|
-
size: "large",
|
|
1611
|
-
onClick: handleClose,
|
|
1612
|
-
sx: {
|
|
1613
|
-
px: 2,
|
|
1614
|
-
mx: 1,
|
|
1615
|
-
borderRadius: "10px",
|
|
1616
|
-
textTransform: "capitalize"
|
|
1617
|
-
},
|
|
1618
|
-
children: "cancel"
|
|
1619
|
-
}
|
|
1620
|
-
),
|
|
1621
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1622
|
-
import_material3.Button,
|
|
1623
|
-
{
|
|
1624
|
-
variant: "contained",
|
|
1625
|
-
color: "primary",
|
|
1626
|
-
size: "large",
|
|
1627
|
-
onClick: () => onSubmitDisposition(formData),
|
|
1628
|
-
sx: { px: 2, borderRadius: "10px", textTransform: "capitalize" },
|
|
1629
|
-
children: "Submit"
|
|
1630
|
-
}
|
|
1631
|
-
)
|
|
1632
|
-
] })
|
|
1633
|
-
] })
|
|
1634
|
-
}
|
|
1635
|
-
) });
|
|
1636
|
-
}
|
|
1637
|
-
function ProcessorListDialog({
|
|
1638
|
-
open,
|
|
1639
|
-
setOpen,
|
|
1640
|
-
processList = [],
|
|
1641
|
-
handleSelectedProcessor
|
|
1642
|
-
}) {
|
|
1643
|
-
const handleClose = () => {
|
|
1644
|
-
setOpen(false);
|
|
1645
|
-
};
|
|
1646
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1647
|
-
import_material3.Dialog,
|
|
1648
|
-
{
|
|
1649
|
-
open,
|
|
1650
|
-
"aria-labelledby": "alert-dialog-title",
|
|
1651
|
-
"aria-describedby": "alert-dialog-description",
|
|
1652
|
-
maxWidth: "xs",
|
|
1653
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
|
|
1654
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1655
|
-
import_material3.Box,
|
|
1656
|
-
{
|
|
1657
|
-
sx: {
|
|
1658
|
-
display: "flex",
|
|
1659
|
-
justifyContent: "space-between",
|
|
1660
|
-
alignItems: "center",
|
|
1661
|
-
padding: "4px 16px",
|
|
1662
|
-
boxShadow: "0px 1px 2px #f5f5f5ff"
|
|
1663
|
-
},
|
|
1664
|
-
children: [
|
|
1665
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Process List" }),
|
|
1666
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
|
|
1667
|
-
]
|
|
1668
|
-
}
|
|
1669
|
-
),
|
|
1670
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1671
|
-
import_material3.Box,
|
|
1672
|
-
{
|
|
1673
|
-
sx: {
|
|
1674
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1675
|
-
padding: "6px 10px",
|
|
1676
|
-
margin: "10px",
|
|
1677
|
-
borderRadius: "10px"
|
|
1678
|
-
},
|
|
1679
|
-
children: (processList == null ? void 0 : processList.length) > 0 ? processList == null ? void 0 : processList.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1680
|
-
import_material3.Box,
|
|
1681
|
-
{
|
|
1682
|
-
sx: {
|
|
1683
|
-
p: 1,
|
|
1684
|
-
display: "flex",
|
|
1685
|
-
alignItems: "center",
|
|
1686
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1687
|
-
padding: "6px",
|
|
1688
|
-
margin: "10px 0px",
|
|
1689
|
-
borderRadius: "10px",
|
|
1690
|
-
cursor: "pointer",
|
|
1691
|
-
"&:hover": { bgcolor: "action.selected" }
|
|
1692
|
-
},
|
|
1693
|
-
onClick: () => {
|
|
1694
|
-
handleSelectedProcessor(process);
|
|
1695
|
-
},
|
|
1696
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1697
|
-
import_material3.Typography,
|
|
1698
|
-
{
|
|
1699
|
-
variant: "body1",
|
|
1700
|
-
sx: {
|
|
1701
|
-
mx: 1,
|
|
1702
|
-
width: "200px",
|
|
1703
|
-
maxWidth: "250px",
|
|
1704
|
-
display: "flex",
|
|
1705
|
-
alignItems: "center"
|
|
1706
|
-
},
|
|
1707
|
-
children: [
|
|
1708
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
|
|
1709
|
-
process.process_name
|
|
1710
|
-
]
|
|
1711
|
-
}
|
|
1712
|
-
)
|
|
1713
|
-
},
|
|
1714
|
-
index
|
|
1715
|
-
)) : null
|
|
1716
|
-
}
|
|
1717
|
-
)
|
|
1718
|
-
] })
|
|
1719
|
-
}
|
|
1720
|
-
) });
|
|
1721
|
-
}
|
|
1722
|
-
function CallHistoryDialog({ open, setOpen }) {
|
|
1723
|
-
const handleClose = () => {
|
|
1724
|
-
setOpen(false);
|
|
1725
|
-
};
|
|
1726
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1727
|
-
import_material3.Dialog,
|
|
1728
|
-
{
|
|
1729
|
-
open,
|
|
1730
|
-
"aria-labelledby": "alert-dialog-title",
|
|
1731
|
-
"aria-describedby": "alert-dialog-description",
|
|
1732
|
-
fullWidth: true,
|
|
1733
|
-
maxWidth: "md",
|
|
1734
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
|
|
1735
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1736
|
-
import_material3.Box,
|
|
1737
|
-
{
|
|
1738
|
-
sx: {
|
|
1739
|
-
display: "flex",
|
|
1740
|
-
justifyContent: "space-between",
|
|
1741
|
-
alignItems: "center",
|
|
1742
|
-
padding: "4px 16px",
|
|
1743
|
-
boxShadow: "0px 1px 2px #f5f5f5ff"
|
|
1744
|
-
},
|
|
1745
|
-
children: [
|
|
1746
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call History" }),
|
|
1747
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
|
|
1748
|
-
]
|
|
1749
|
-
}
|
|
1750
|
-
),
|
|
1751
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1752
|
-
import_material3.Box,
|
|
1753
|
-
{
|
|
1754
|
-
sx: {
|
|
1755
|
-
boxShadow: "1px 1px 4px #d3d3d3ff",
|
|
1756
|
-
margin: "10px",
|
|
1757
|
-
borderRadius: "10px",
|
|
1758
|
-
textAlign: "center",
|
|
1759
|
-
fontSize: "16px",
|
|
1760
|
-
fontWeight: "bold"
|
|
1761
|
-
},
|
|
1762
|
-
p: 6,
|
|
1763
|
-
children: "Comming Soon..."
|
|
1764
|
-
}
|
|
1765
|
-
)
|
|
1766
|
-
] })
|
|
1767
|
-
}
|
|
1768
|
-
) });
|
|
1769
|
-
}
|
|
1770
|
-
|
|
1771
|
-
// call-control-sdk/lib/components/callControlPanel.tsx
|
|
1772
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
1773
|
-
function CallControlPanel({ onDataChange }) {
|
|
1774
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la;
|
|
1775
|
-
const theme = (0, import_material4.useTheme)();
|
|
1776
|
-
const { disabled, enabled, outlined } = styles_default();
|
|
1777
|
-
const state = useSDKState();
|
|
1778
|
-
const { showToast } = useToast();
|
|
1779
|
-
const webSocketRef = (0, import_react6.useRef)(null);
|
|
1780
|
-
const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
|
|
1781
|
-
const [showIframe, setShowIframe] = (0, import_react6.useState)(true);
|
|
1782
|
-
const [statusAnchorEl, setStatusAnchorEl] = (0, import_react6.useState)(null);
|
|
1783
|
-
const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react6.useState)(null);
|
|
1784
|
-
const [open, setOpen] = (0, import_react6.useState)(false);
|
|
1785
|
-
const [openCallTransfer, setOpenCallTransfer] = (0, import_react6.useState)(false);
|
|
1786
|
-
const [openCallDisposition, setOpenCallDisposition] = (0, import_react6.useState)(false);
|
|
1787
|
-
const [openProcessorDialog, setOpenProcessorDialog] = (0, import_react6.useState)(false);
|
|
1788
|
-
const [openCallHistoryDialog, setOpenCallHistoryDialog] = (0, import_react6.useState)(false);
|
|
1789
|
-
const [phoneNumber, setPhoneNumber] = (0, import_react6.useState)("");
|
|
1790
|
-
const [callDuration, setCallDuration] = (0, import_react6.useState)(0);
|
|
1791
|
-
const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
|
|
1792
|
-
state.controlPanelPosition,
|
|
1793
|
-
(newPosition) => sdkStateManager.setControlPanelPosition(newPosition)
|
|
1794
|
-
);
|
|
1795
|
-
const {
|
|
1796
|
-
position: iframePosition,
|
|
1797
|
-
isDragging: iframeIsDragging,
|
|
1798
|
-
dragRef: iframeDragRef,
|
|
1799
|
-
handleMouseDown: iframeHandleMouseDown,
|
|
1800
|
-
handleTouchStart: iframeHandleTouchStart
|
|
1801
|
-
} = useDraggable(
|
|
1802
|
-
state.iframePosition,
|
|
1803
|
-
(newPosition) => sdkStateManager.setIframePosition(newPosition)
|
|
1804
|
-
);
|
|
1805
|
-
const [getProcessList, { data: processList }] = usePostRequest({
|
|
1806
|
-
onSuccess: (res) => {
|
|
1807
|
-
var _a2;
|
|
1808
|
-
console.log("res", res);
|
|
1809
|
-
if (res && res.processes && ((_a2 = res == null ? void 0 : res.processes) == null ? void 0 : _a2.length) > 1) {
|
|
1810
|
-
setOpenProcessorDialog(true);
|
|
1811
|
-
} else {
|
|
1812
|
-
sdkStateManager.setProcess(res == null ? void 0 : res.processes[0]);
|
|
1813
|
-
setOpenProcessorDialog(false);
|
|
1814
|
-
}
|
|
1815
|
-
},
|
|
1816
|
-
onError: () => {
|
|
1817
|
-
setOpenProcessorDialog(false);
|
|
1818
|
-
}
|
|
1819
|
-
});
|
|
1820
|
-
const [clickToCall] = usePostRequest();
|
|
1821
|
-
const [holdOrUnHold] = usePostRequest({
|
|
1822
|
-
onSuccess: () => {
|
|
1823
|
-
sdkStateManager.setHolding(!state.isHolding);
|
|
1824
|
-
},
|
|
1825
|
-
onError: (error) => {
|
|
1826
|
-
console.log("error", error);
|
|
1827
|
-
}
|
|
1828
|
-
});
|
|
1829
|
-
const [muteOrUnMute] = usePostRequest({
|
|
1830
|
-
onSuccess: () => {
|
|
1831
|
-
sdkStateManager.setMuted(!state.isMuted);
|
|
1832
|
-
},
|
|
1833
|
-
onError: (error) => {
|
|
1834
|
-
console.log("error", error);
|
|
1835
|
-
}
|
|
1836
|
-
});
|
|
1837
|
-
const [readyAgentStatus] = usePostRequest();
|
|
1838
|
-
const [updateAgentStatus] = usePostRequest();
|
|
1839
|
-
const [endCall] = usePostRequest();
|
|
1840
|
-
const formatDuration = (0, import_react6.useCallback)((seconds) => {
|
|
1841
|
-
const mins = Math.floor(seconds / 60);
|
|
1842
|
-
const secs = seconds % 60;
|
|
1843
|
-
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
|
|
1844
|
-
}, []);
|
|
1845
|
-
const handleCloseQueueCounts = () => {
|
|
1846
|
-
setAnchorEl(null);
|
|
1847
|
-
};
|
|
1848
|
-
const handleOpenDialer = (event) => {
|
|
1849
|
-
setShowIframe(true);
|
|
1850
|
-
setDialerAnchorEl(event.currentTarget);
|
|
1851
|
-
sdkStateManager.setStatus("dial");
|
|
1852
|
-
};
|
|
1853
|
-
const handleCloseDialer = () => {
|
|
1854
|
-
if (state.status !== "on call") {
|
|
1855
|
-
sdkStateManager.setStatus("idle");
|
|
1856
|
-
}
|
|
1857
|
-
setDialerAnchorEl(null);
|
|
1858
|
-
};
|
|
1859
|
-
const handleOpenAgentStatus = (event) => {
|
|
1860
|
-
setStatusAnchorEl(event.currentTarget);
|
|
1861
|
-
};
|
|
1862
|
-
const handleCloseAgentStatus = () => {
|
|
1863
|
-
setStatusAnchorEl(null);
|
|
1864
|
-
};
|
|
1865
|
-
const handleAgentReady = () => {
|
|
1866
|
-
const payload = {
|
|
1867
|
-
action: "READYAGENT",
|
|
1868
|
-
userId: state.agentId
|
|
1869
|
-
};
|
|
1870
|
-
readyAgentStatus(END_POINT.READY_AGENT, payload);
|
|
1871
|
-
};
|
|
1872
|
-
const handleUpdateAgentStatus = (status) => {
|
|
1873
|
-
setStatusAnchorEl(null);
|
|
1874
|
-
const payload = {
|
|
1875
|
-
action: "AGENTBREAK",
|
|
1876
|
-
break_type: status,
|
|
1877
|
-
userId: state.agentId
|
|
1878
|
-
};
|
|
1879
|
-
updateAgentStatus(END_POINT.UPDATE_AGENT_BREAK, payload);
|
|
1880
|
-
};
|
|
1881
|
-
const handleStartCall = (number) => {
|
|
1882
|
-
if (number.length !== 10) {
|
|
1883
|
-
showToast("Invalid phone number", "error");
|
|
1884
|
-
alert("Invalid phone number");
|
|
1885
|
-
} else if (!/^\d+$/.test(number)) {
|
|
1886
|
-
showToast("Invalid phone number", "error");
|
|
1887
|
-
} else {
|
|
1888
|
-
const payload = {
|
|
1889
|
-
action: "CALL",
|
|
1890
|
-
phone_number: number,
|
|
1891
|
-
userId: state.agentId
|
|
1892
|
-
};
|
|
1893
|
-
clickToCall(END_POINT.CLICK_TO_CALL, payload);
|
|
1894
|
-
}
|
|
1895
|
-
};
|
|
1896
|
-
const handleHoldToggle = () => {
|
|
1897
|
-
const payload = {
|
|
1898
|
-
action: state.isHolding ? "UNHOLD" : "HOLD",
|
|
1899
|
-
userId: state.agentId
|
|
1900
|
-
};
|
|
1901
|
-
holdOrUnHold(END_POINT.HOLD_CALL, payload);
|
|
1902
|
-
};
|
|
1903
|
-
const handleMuteToggle = () => {
|
|
1904
|
-
const payload = {
|
|
1905
|
-
action: state.isMuted ? "UNMUTE" : "MUTE",
|
|
1906
|
-
userId: state.agentId
|
|
1907
|
-
};
|
|
1908
|
-
muteOrUnMute(END_POINT.MUTE_CALL, payload);
|
|
1909
|
-
};
|
|
1910
|
-
const handleEndCall = (data) => {
|
|
1911
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
|
|
1912
|
-
console.log("data", data);
|
|
1913
|
-
const payload = {
|
|
1914
|
-
action: "ENDCALL",
|
|
1915
|
-
userId: state.agentId,
|
|
1916
|
-
processid: (_c2 = (_b2 = (_a2 = state.process) == null ? void 0 : _a2.process_id) == null ? void 0 : _b2.toString()) != null ? _c2 : "",
|
|
1917
|
-
process_name: (_e2 = (_d2 = state.process) == null ? void 0 : _d2.process_name) != null ? _e2 : "",
|
|
1918
|
-
callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
|
|
1919
|
-
mobile_number: (_i2 = (_h2 = state.callData) == null ? void 0 : _h2.phone_number) != null ? _i2 : "",
|
|
1920
|
-
disposition: (_k2 = (_j2 = data == null ? void 0 : data.disposition) == null ? void 0 : _j2.value) != null ? _k2 : "",
|
|
1921
|
-
set_followUp: (_m2 = (_l2 = data == null ? void 0 : data.followUp) == null ? void 0 : _l2.value) != null ? _m2 : "",
|
|
1922
|
-
callback_date: (_n2 = data == null ? void 0 : data.callbackDate) != null ? _n2 : "",
|
|
1923
|
-
callback_hrs: (_o2 = data == null ? void 0 : data.callbackHrs) != null ? _o2 : "",
|
|
1924
|
-
callback_mins: (_p2 = data == null ? void 0 : data.callbackMins) != null ? _p2 : "",
|
|
1925
|
-
endcall_type: "CLOSE"
|
|
1926
|
-
};
|
|
1927
|
-
setPhoneNumber("");
|
|
1928
|
-
endCall(END_POINT.END_CALL, payload);
|
|
1929
|
-
sdkStateManager.endCall();
|
|
1930
|
-
setOpenCallDisposition(false);
|
|
1931
|
-
};
|
|
1932
|
-
(0, import_react6.useEffect)(() => {
|
|
1933
|
-
let interval;
|
|
1934
|
-
if (state.callData.status && state.callData.status === "ONCALL") {
|
|
1935
|
-
interval = setInterval(() => {
|
|
1936
|
-
const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
|
|
1937
|
-
setCallDuration(elapsed);
|
|
1938
|
-
}, 1e3);
|
|
1939
|
-
} else {
|
|
1940
|
-
setCallDuration(0);
|
|
1941
|
-
}
|
|
1942
|
-
return () => {
|
|
1943
|
-
if (interval) clearInterval(interval);
|
|
1944
|
-
};
|
|
1945
|
-
}, [state.callData.status]);
|
|
1946
|
-
(0, import_react6.useEffect)(() => {
|
|
1947
|
-
if (onDataChange) {
|
|
1948
|
-
onDataChange(state.callData);
|
|
1949
|
-
}
|
|
1950
|
-
}, [state.callData, onDataChange]);
|
|
1951
|
-
(0, import_react6.useEffect)(() => {
|
|
1952
|
-
if (state.agentId) {
|
|
1953
|
-
getProcessList(END_POINT.PROCESS_LIST, {
|
|
1954
|
-
userId: state.agentId,
|
|
1955
|
-
action: "GETAGENTPROCESSLIST",
|
|
1956
|
-
refno: "1234221233"
|
|
1957
|
-
});
|
|
1958
|
-
} else {
|
|
1959
|
-
console.log("No agentId available, skipping API call");
|
|
1960
|
-
}
|
|
1961
|
-
}, [state.agentId]);
|
|
1962
|
-
(0, import_react6.useEffect)(() => {
|
|
1963
|
-
if (state.agentId) {
|
|
1964
|
-
webSocketRef.current = new WebSocket(`${WS_END_POINT.WS}?agent_id=${state.agentId}`);
|
|
1965
|
-
webSocketRef.current.onopen = () => {
|
|
1966
|
-
console.log("WebSocket connection established");
|
|
1967
|
-
};
|
|
1968
|
-
webSocketRef.current.onmessage = (event) => {
|
|
1969
|
-
try {
|
|
1970
|
-
const data = JSON.parse(event.data);
|
|
1971
|
-
console.log("parsedJSON:", data);
|
|
1972
|
-
sdkStateManager.updateCallData(data);
|
|
1973
|
-
if (data.status === "ONCALL") {
|
|
1974
|
-
sdkStateManager.startCall();
|
|
1975
|
-
}
|
|
1976
|
-
if (data.status === "WRAPUP") {
|
|
1977
|
-
sdkStateManager.endCall();
|
|
1978
|
-
}
|
|
1979
|
-
} catch (e) {
|
|
1980
|
-
console.log("Raw message:", event.data);
|
|
1981
|
-
}
|
|
1982
|
-
};
|
|
1983
|
-
webSocketRef.current.onclose = () => {
|
|
1984
|
-
console.log("WebSocket connection closed");
|
|
1985
|
-
};
|
|
1986
|
-
webSocketRef.current.onerror = (error) => {
|
|
1987
|
-
console.error("WebSocket error:", error);
|
|
1988
|
-
};
|
|
1989
|
-
}
|
|
1990
|
-
return () => {
|
|
1991
|
-
var _a2;
|
|
1992
|
-
(_a2 = webSocketRef.current) == null ? void 0 : _a2.close();
|
|
1993
|
-
};
|
|
1994
|
-
}, [state.agentId]);
|
|
1995
|
-
if (!state.isInitialized || !state.process) {
|
|
1996
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: Boolean(openProcessorDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1997
|
-
ProcessorListDialog,
|
|
1998
|
-
{
|
|
1999
|
-
processList: processList == null ? void 0 : processList.processes,
|
|
2000
|
-
open: openProcessorDialog,
|
|
2001
|
-
setOpen: setOpenProcessorDialog,
|
|
2002
|
-
handleSelectedProcessor: (data) => {
|
|
2003
|
-
sdkStateManager.setProcess(data);
|
|
2004
|
-
}
|
|
2005
|
-
}
|
|
2006
|
-
) });
|
|
2007
|
-
}
|
|
2008
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
2009
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2010
|
-
import_material4.Fade,
|
|
2011
|
-
{
|
|
2012
|
-
in: true,
|
|
2013
|
-
timeout: 300,
|
|
2014
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2015
|
-
import_material4.Paper,
|
|
2016
|
-
{
|
|
2017
|
-
ref: dragRef,
|
|
2018
|
-
elevation: isDragging ? 4 : 1,
|
|
2019
|
-
sx: {
|
|
2020
|
-
position: "fixed",
|
|
2021
|
-
left: position.x,
|
|
2022
|
-
top: position.y,
|
|
2023
|
-
p: 0.5,
|
|
2024
|
-
borderRadius: 3,
|
|
2025
|
-
bgcolor: "background.paper",
|
|
2026
|
-
zIndex: 99999,
|
|
2027
|
-
transition: theme.transitions.create(["box-shadow", "transform"], {
|
|
2028
|
-
duration: theme.transitions.duration.short
|
|
2029
|
-
}),
|
|
2030
|
-
userSelect: "none"
|
|
2031
|
-
},
|
|
2032
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2033
|
-
import_material4.Box,
|
|
2034
|
-
{
|
|
2035
|
-
sx: {
|
|
2036
|
-
display: "flex",
|
|
2037
|
-
alignItems: "center"
|
|
2038
|
-
},
|
|
2039
|
-
children: [
|
|
2040
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2041
|
-
import_material4.Box,
|
|
2042
|
-
{
|
|
2043
|
-
sx: {
|
|
2044
|
-
display: "flex",
|
|
2045
|
-
justifyContent: "space-between",
|
|
2046
|
-
alignItems: "center"
|
|
2047
|
-
},
|
|
2048
|
-
children: [
|
|
2049
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2050
|
-
import_material4.IconButton,
|
|
2051
|
-
{
|
|
2052
|
-
component: "div",
|
|
2053
|
-
size: "small",
|
|
2054
|
-
sx: {
|
|
2055
|
-
cursor: "all-scroll"
|
|
2056
|
-
},
|
|
2057
|
-
onMouseDown: handleMouseDown,
|
|
2058
|
-
onTouchStart: handleTouchStart,
|
|
2059
|
-
children: [
|
|
2060
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.DragIndicator, {}),
|
|
2061
|
-
" "
|
|
2062
|
-
]
|
|
2063
|
-
}
|
|
2064
|
-
),
|
|
2065
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2066
|
-
import_material4.Box,
|
|
2067
|
-
{
|
|
2068
|
-
sx: {
|
|
2069
|
-
marginRight: "10px"
|
|
2070
|
-
},
|
|
2071
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2072
|
-
import_material4.IconButton,
|
|
2073
|
-
{
|
|
2074
|
-
size: "small",
|
|
2075
|
-
onClick: (e) => {
|
|
2076
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
|
|
2077
|
-
if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) !== "ONCALL" && ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) !== "BREAK" && ((_f2 = (_e2 = state.callData) == null ? void 0 : _e2.status) == null ? void 0 : _f2.toUpperCase()) !== "RINGING" && ((_h2 = (_g2 = state.callData) == null ? void 0 : _g2.status) == null ? void 0 : _h2.toUpperCase()) !== "WRAPUP") {
|
|
2078
|
-
handleOpenDialer(e);
|
|
2079
|
-
}
|
|
2080
|
-
},
|
|
2081
|
-
sx: {
|
|
2082
|
-
bgcolor: "action.hover",
|
|
2083
|
-
"&:hover": {
|
|
2084
|
-
bgcolor: "warning"
|
|
2085
|
-
}
|
|
2086
|
-
},
|
|
2087
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2088
|
-
import_icons_material2.WifiCalling3,
|
|
2089
|
-
{
|
|
2090
|
-
sx: {
|
|
2091
|
-
color: ((_b = (_a = state.callData) == null ? void 0 : _a.status) == null ? void 0 : _b.toUpperCase()) === "ONCALL" || ((_d = (_c = state.callData) == null ? void 0 : _c.status) == null ? void 0 : _d.toUpperCase()) === "BREAK" || ((_f = (_e = state.callData) == null ? void 0 : _e.status) == null ? void 0 : _f.toUpperCase()) === "RINGING" || ((_h = (_g = state.callData) == null ? void 0 : _g.status) == null ? void 0 : _h.toUpperCase()) === "WRAPUP" ? "action.selected" : "success.main"
|
|
2092
|
-
}
|
|
2093
|
-
}
|
|
2094
|
-
)
|
|
2095
|
-
}
|
|
2096
|
-
) })
|
|
2097
|
-
}
|
|
2098
|
-
),
|
|
2099
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2100
|
-
import_material4.Typography,
|
|
2101
|
-
{
|
|
2102
|
-
sx: {
|
|
2103
|
-
color: "success.main",
|
|
2104
|
-
width: "40px",
|
|
2105
|
-
marginRight: "10px"
|
|
2106
|
-
},
|
|
2107
|
-
children: formatDuration(callDuration)
|
|
2108
|
-
}
|
|
2109
|
-
),
|
|
2110
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2111
|
-
import_material4.Typography,
|
|
2112
|
-
{
|
|
2113
|
-
variant: "body2",
|
|
2114
|
-
sx: {
|
|
2115
|
-
fontWeight: "bold"
|
|
2116
|
-
},
|
|
2117
|
-
children: (_k = (_j = (_i = state.callData) == null ? void 0 : _i.status) == null ? void 0 : _j.toUpperCase()) != null ? _k : "N/A"
|
|
2118
|
-
}
|
|
2119
|
-
),
|
|
2120
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2121
|
-
import_material4.Button,
|
|
2122
|
-
{
|
|
2123
|
-
size: "small",
|
|
2124
|
-
variant: "text",
|
|
2125
|
-
onClick: handleOpenAgentStatus,
|
|
2126
|
-
disabled: Boolean(state.callStartTime),
|
|
2127
|
-
children: [
|
|
2128
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowDropDown, {}),
|
|
2129
|
-
" "
|
|
2130
|
-
]
|
|
2131
|
-
}
|
|
2132
|
-
)
|
|
2133
|
-
]
|
|
2134
|
-
}
|
|
2135
|
-
),
|
|
2136
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2137
|
-
import_material4.Box,
|
|
2138
|
-
{
|
|
2139
|
-
sx: {
|
|
2140
|
-
display: "flex",
|
|
2141
|
-
gap: 1,
|
|
2142
|
-
justifyContent: "center",
|
|
2143
|
-
alignItems: "center"
|
|
2144
|
-
},
|
|
2145
|
-
children: [
|
|
2146
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2147
|
-
import_material4.Button,
|
|
2148
|
-
{
|
|
2149
|
-
variant: ((_m = (_l = state.callData) == null ? void 0 : _l.status) == null ? void 0 : _m.toUpperCase()) === "BREAK" || ((_o = (_n = state.callData) == null ? void 0 : _n.status) == null ? void 0 : _o.toUpperCase()) === "MISSED" ? "outlined" : "contained",
|
|
2150
|
-
onClick: (e) => {
|
|
2151
|
-
var _a2, _b2, _c2, _d2;
|
|
2152
|
-
if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "BREAK" || ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) === "MISSED") {
|
|
2153
|
-
e.stopPropagation();
|
|
2154
|
-
handleAgentReady();
|
|
2155
|
-
}
|
|
2156
|
-
},
|
|
2157
|
-
classes: {
|
|
2158
|
-
root: ((_q = (_p = state.callData) == null ? void 0 : _p.status) == null ? void 0 : _q.toUpperCase()) === "BREAK" || ((_s = (_r = state.callData) == null ? void 0 : _r.status) == null ? void 0 : _s.toUpperCase()) === "MISSED" ? "outlined" : "enabled"
|
|
2159
|
-
},
|
|
2160
|
-
sx: __spreadValues({}, ((_u = (_t = state.callData) == null ? void 0 : _t.status) == null ? void 0 : _u.toUpperCase()) === "BREAK" || ((_w = (_v = state.callData) == null ? void 0 : _v.status) == null ? void 0 : _w.toUpperCase()) === "MISSED" ? outlined : enabled),
|
|
2161
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
|
|
2162
|
-
}
|
|
2163
|
-
) }),
|
|
2164
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2165
|
-
import_material4.Button,
|
|
2166
|
-
{
|
|
2167
|
-
variant: state.isHolding && ((_y = (_x = state.callData) == null ? void 0 : _x.status) == null ? void 0 : _y.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
|
|
2168
|
-
onClick: (e) => {
|
|
2169
|
-
e.stopPropagation();
|
|
2170
|
-
handleHoldToggle();
|
|
2171
|
-
},
|
|
2172
|
-
sx: state.isHolding && ((_A = (_z = state.callData) == null ? void 0 : _z.status) == null ? void 0 : _A.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_C = (_B = state.callData) == null ? void 0 : _B.status) == null ? void 0 : _C.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
|
|
2173
|
-
disabled: ((_E = (_D = state.callData) == null ? void 0 : _D.status) == null ? void 0 : _E.toUpperCase()) !== "ONCALL" && !state.isHolding,
|
|
2174
|
-
children: state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
|
|
2175
|
-
}
|
|
2176
|
-
) }),
|
|
2177
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2178
|
-
import_material4.Button,
|
|
2179
|
-
{
|
|
2180
|
-
variant: state.isMuted && ((_G = (_F = state.callData) == null ? void 0 : _F.status) == null ? void 0 : _G.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
|
|
2181
|
-
onClick: (e) => {
|
|
2182
|
-
e.stopPropagation();
|
|
2183
|
-
handleMuteToggle();
|
|
2184
|
-
},
|
|
2185
|
-
sx: state.isMuted && ((_I = (_H = state.callData) == null ? void 0 : _H.status) == null ? void 0 : _I.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_K = (_J = state.callData) == null ? void 0 : _J.status) == null ? void 0 : _K.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
|
|
2186
|
-
disabled: ((_M = (_L = state.callData) == null ? void 0 : _L.status) == null ? void 0 : _M.toUpperCase()) !== "ONCALL" && !state.isMuted,
|
|
2187
|
-
children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
|
|
2188
|
-
}
|
|
2189
|
-
) }),
|
|
2190
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2191
|
-
import_material4.Button,
|
|
2192
|
-
{
|
|
2193
|
-
variant: openCallTransfer ? "contained" : "outlined",
|
|
2194
|
-
onClick: (e) => {
|
|
2195
|
-
var _a2, _b2;
|
|
2196
|
-
if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL") {
|
|
2197
|
-
e.stopPropagation();
|
|
2198
|
-
setOpenCallTransfer(true);
|
|
2199
|
-
}
|
|
2200
|
-
},
|
|
2201
|
-
sx: openCallTransfer ? __spreadValues({}, enabled) : ((_O = (_N = state.callData) == null ? void 0 : _N.status) == null ? void 0 : _O.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
|
|
2202
|
-
disabled: ((_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()) !== "ONCALL",
|
|
2203
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
|
|
2204
|
-
}
|
|
2205
|
-
) }),
|
|
2206
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2207
|
-
import_material4.Button,
|
|
2208
|
-
{
|
|
2209
|
-
variant: open ? "contained" : "outlined",
|
|
2210
|
-
onClick: (e) => {
|
|
2211
|
-
var _a2, _b2;
|
|
2212
|
-
if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL") {
|
|
2213
|
-
e.stopPropagation();
|
|
2214
|
-
setOpen(true);
|
|
2215
|
-
}
|
|
2216
|
-
},
|
|
2217
|
-
sx: open ? __spreadValues({}, enabled) : ((_S = (_R = state.callData) == null ? void 0 : _R.status) == null ? void 0 : _S.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
|
|
2218
|
-
disabled: ((_U = (_T = state.callData) == null ? void 0 : _T.status) == null ? void 0 : _U.toUpperCase()) !== "ONCALL",
|
|
2219
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
|
|
2220
|
-
}
|
|
2221
|
-
) }),
|
|
2222
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Call History", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2223
|
-
import_material4.Button,
|
|
2224
|
-
{
|
|
2225
|
-
variant: openCallHistoryDialog ? "contained" : "outlined",
|
|
2226
|
-
onClick: (e) => {
|
|
2227
|
-
e.stopPropagation();
|
|
2228
|
-
setOpenCallHistoryDialog(true);
|
|
2229
|
-
},
|
|
2230
|
-
sx: openCallHistoryDialog ? __spreadValues({}, enabled) : __spreadValues({}, outlined),
|
|
2231
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.History, {})
|
|
2232
|
-
}
|
|
2233
|
-
) }),
|
|
2234
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2235
|
-
import_material4.Button,
|
|
2236
|
-
{
|
|
2237
|
-
variant: ((_W = (_V = state.callData) == null ? void 0 : _V.status) == null ? void 0 : _W.toUpperCase()) === "ONCALL" || ((_Y = (_X = state.callData) == null ? void 0 : _X.status) == null ? void 0 : _Y.toUpperCase()) === "RINGING" || ((__ = (_Z = state.callData) == null ? void 0 : _Z.status) == null ? void 0 : __.toUpperCase()) === "WRAPUP" ? "contained" : "outlined",
|
|
2238
|
-
onClick: (e) => {
|
|
2239
|
-
var _a2, _b2, _c2, _d2, _e2, _f2;
|
|
2240
|
-
if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" || ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) === "RINGING" || ((_f2 = (_e2 = state.callData) == null ? void 0 : _e2.status) == null ? void 0 : _f2.toUpperCase()) === "WRAPUP") {
|
|
2241
|
-
e.stopPropagation();
|
|
2242
|
-
setOpenCallDisposition(true);
|
|
2243
|
-
}
|
|
2244
|
-
},
|
|
2245
|
-
sx: ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) === "ONCALL" || ((_ca = (_ba = state.callData) == null ? void 0 : _ba.status) == null ? void 0 : _ca.toUpperCase()) === "RINGING" || ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) === "WRAPUP" ? __spreadProps(__spreadValues({}, enabled), {
|
|
2246
|
-
borderRight: "1px",
|
|
2247
|
-
backgroundColor: "error.main",
|
|
2248
|
-
minWidth: "60px !important",
|
|
2249
|
-
boxShadow: " 0px 2px 1px #5f3f3f",
|
|
2250
|
-
border: `1px solid ${theme.palette.error.light}`,
|
|
2251
|
-
height: "40px",
|
|
2252
|
-
"&:hover": {
|
|
2253
|
-
bgcolor: "error.light",
|
|
2254
|
-
boxShadow: " 0px 2px 1px #5f3f3f",
|
|
2255
|
-
border: `0px solid ${theme.palette.error.light}`
|
|
2256
|
-
},
|
|
2257
|
-
"&:active": {
|
|
2258
|
-
bgcolor: "error.light",
|
|
2259
|
-
boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
|
|
2260
|
-
}
|
|
2261
|
-
}) : __spreadProps(__spreadValues({}, disabled), {
|
|
2262
|
-
minWidth: "60px !important"
|
|
2263
|
-
}),
|
|
2264
|
-
disabled: ((_ga = (_fa = state.callData) == null ? void 0 : _fa.status) == null ? void 0 : _ga.toUpperCase()) !== "ONCALL" && ((_ia = (_ha = state.callData) == null ? void 0 : _ha.status) == null ? void 0 : _ia.toUpperCase()) !== "RINGING" && ((_ka = (_ja = state.callData) == null ? void 0 : _ja.status) == null ? void 0 : _ka.toUpperCase()) !== "WRAPUP",
|
|
2265
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {})
|
|
2266
|
-
}
|
|
2267
|
-
) })
|
|
2268
|
-
]
|
|
2269
|
-
}
|
|
2270
|
-
)
|
|
2271
|
-
]
|
|
2272
|
-
}
|
|
2273
|
-
)
|
|
2274
|
-
}
|
|
2275
|
-
)
|
|
2276
|
-
}
|
|
2277
|
-
),
|
|
2278
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2279
|
-
import_material4.Fade,
|
|
2280
|
-
{
|
|
2281
|
-
in: true,
|
|
2282
|
-
timeout: 300,
|
|
2283
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2284
|
-
import_material4.Paper,
|
|
2285
|
-
{
|
|
2286
|
-
ref: iframeDragRef,
|
|
2287
|
-
elevation: iframeIsDragging ? 4 : 1,
|
|
2288
|
-
sx: {
|
|
2289
|
-
position: "fixed",
|
|
2290
|
-
left: iframePosition.x,
|
|
2291
|
-
top: iframePosition.y,
|
|
2292
|
-
p: 1,
|
|
2293
|
-
height: "auto",
|
|
2294
|
-
borderRadius: 2,
|
|
2295
|
-
bgcolor: "background.paper",
|
|
2296
|
-
zIndex: 99999,
|
|
2297
|
-
transition: theme.transitions.create(["box-shadow", "transform"], {
|
|
2298
|
-
duration: theme.transitions.duration.short
|
|
2299
|
-
}),
|
|
2300
|
-
visibility: showIframe ? "visible" : "hidden",
|
|
2301
|
-
userSelect: "none"
|
|
2302
|
-
},
|
|
2303
|
-
children: [
|
|
2304
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2305
|
-
import_material4.Box,
|
|
2306
|
-
{
|
|
2307
|
-
sx: {
|
|
2308
|
-
display: "flex",
|
|
2309
|
-
alignItems: "center",
|
|
2310
|
-
justifyContent: "space-between",
|
|
2311
|
-
cursor: "all-scroll"
|
|
2312
|
-
},
|
|
2313
|
-
onMouseDown: iframeHandleMouseDown,
|
|
2314
|
-
onTouchStart: iframeHandleTouchStart,
|
|
2315
|
-
children: [
|
|
2316
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2317
|
-
import_icons_material2.DragIndicator,
|
|
2318
|
-
{
|
|
2319
|
-
sx: {
|
|
2320
|
-
transform: "rotate(90deg)"
|
|
2321
|
-
}
|
|
2322
|
-
}
|
|
2323
|
-
),
|
|
2324
|
-
" ",
|
|
2325
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.IconButton, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Close, {}) })
|
|
2326
|
-
]
|
|
2327
|
-
}
|
|
2328
|
-
),
|
|
2329
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2330
|
-
"iframe",
|
|
2331
|
-
{
|
|
2332
|
-
src: `https://h68.deepijatel.in/ConVoxCCS/iframe?agent_id=${state.agentId}&process_id=${(_la = state.process) == null ? void 0 : _la.process_id}`,
|
|
2333
|
-
height: 380,
|
|
2334
|
-
width: 420,
|
|
2335
|
-
allow: "camera; microphone; autoplay"
|
|
2336
|
-
}
|
|
2337
|
-
)
|
|
2338
|
-
]
|
|
2339
|
-
}
|
|
2340
|
-
)
|
|
2341
|
-
}
|
|
2342
|
-
),
|
|
2343
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2344
|
-
import_material4.Menu,
|
|
2345
|
-
{
|
|
2346
|
-
anchorEl: dialerAnchorEl,
|
|
2347
|
-
open: Boolean(dialerAnchorEl),
|
|
2348
|
-
onClose: handleCloseDialer,
|
|
2349
|
-
onClick: (e) => e.stopPropagation(),
|
|
2350
|
-
sx: {
|
|
2351
|
-
zIndex: 99999
|
|
2352
|
-
},
|
|
2353
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2354
|
-
import_material4.Box,
|
|
2355
|
-
{
|
|
2356
|
-
sx: {
|
|
2357
|
-
all: "unset",
|
|
2358
|
-
padding: "10px",
|
|
2359
|
-
"&hover": {
|
|
2360
|
-
backgroundColor: "white"
|
|
2361
|
-
}
|
|
2362
|
-
},
|
|
2363
|
-
children: [
|
|
2364
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2365
|
-
import_material4.TextField,
|
|
2366
|
-
{
|
|
2367
|
-
size: "small",
|
|
2368
|
-
value: phoneNumber,
|
|
2369
|
-
placeholder: "Enter Mobile No.",
|
|
2370
|
-
onChange: (e) => {
|
|
2371
|
-
setPhoneNumber(e.target.value);
|
|
2372
|
-
}
|
|
2373
|
-
}
|
|
2374
|
-
),
|
|
2375
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2376
|
-
import_material4.IconButton,
|
|
2377
|
-
{
|
|
2378
|
-
color: "info",
|
|
2379
|
-
onClick: () => {
|
|
2380
|
-
handleStartCall(phoneNumber);
|
|
2381
|
-
},
|
|
2382
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Phone, { color: "success" })
|
|
2383
|
-
}
|
|
2384
|
-
)
|
|
2385
|
-
]
|
|
2386
|
-
}
|
|
2387
|
-
)
|
|
2388
|
-
}
|
|
2389
|
-
),
|
|
2390
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2391
|
-
import_material4.Menu,
|
|
2392
|
-
{
|
|
2393
|
-
anchorEl: statusAnchorEl,
|
|
2394
|
-
open: Boolean(statusAnchorEl),
|
|
2395
|
-
onClose: handleCloseAgentStatus,
|
|
2396
|
-
onClick: (e) => e.stopPropagation(),
|
|
2397
|
-
sx: {
|
|
2398
|
-
zIndex: 99999
|
|
2399
|
-
},
|
|
2400
|
-
children: [
|
|
2401
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Lunch" }),
|
|
2402
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Tea"), children: "- Tea" })
|
|
2403
|
-
]
|
|
2404
|
-
}
|
|
2405
|
-
),
|
|
2406
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2407
|
-
import_material4.Menu,
|
|
2408
|
-
{
|
|
2409
|
-
anchorEl,
|
|
2410
|
-
open: Boolean(anchorEl),
|
|
2411
|
-
onClose: handleCloseQueueCounts,
|
|
2412
|
-
onClick: (e) => e.stopPropagation(),
|
|
2413
|
-
sx: {
|
|
2414
|
-
zIndex: 99999
|
|
2415
|
-
},
|
|
2416
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2417
|
-
import_material4.Box,
|
|
2418
|
-
{
|
|
2419
|
-
sx: {
|
|
2420
|
-
display: "flex",
|
|
2421
|
-
justifyContent: "flex-start",
|
|
2422
|
-
flexDirection: "column",
|
|
2423
|
-
padding: "0px 10px",
|
|
2424
|
-
"&hover": {
|
|
2425
|
-
backgroundColor: "white"
|
|
2426
|
-
}
|
|
2427
|
-
},
|
|
2428
|
-
children: [
|
|
2429
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2430
|
-
import_material4.Chip,
|
|
2431
|
-
{
|
|
2432
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Layers, { color: "secondary" }),
|
|
2433
|
-
variant: "outlined",
|
|
2434
|
-
label: "Waiting - 25",
|
|
2435
|
-
sx: {
|
|
2436
|
-
margin: "4px 2px"
|
|
2437
|
-
}
|
|
2438
|
-
}
|
|
2439
|
-
),
|
|
2440
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2441
|
-
import_material4.Chip,
|
|
2442
|
-
{
|
|
2443
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pending, { color: "info" }),
|
|
2444
|
-
label: "Pending - 99+",
|
|
2445
|
-
variant: "outlined",
|
|
2446
|
-
sx: {
|
|
2447
|
-
margin: "4px 2px"
|
|
2448
|
-
}
|
|
2449
|
-
}
|
|
2450
|
-
),
|
|
2451
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2452
|
-
import_material4.Chip,
|
|
2453
|
-
{
|
|
2454
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Upcoming, { color: "success" }),
|
|
2455
|
-
variant: "outlined",
|
|
2456
|
-
label: "Upcoming - 66",
|
|
2457
|
-
sx: {
|
|
2458
|
-
margin: "4px 2px"
|
|
2459
|
-
}
|
|
2460
|
-
}
|
|
2461
|
-
)
|
|
2462
|
-
]
|
|
2463
|
-
}
|
|
2464
|
-
)
|
|
2465
|
-
}
|
|
2466
|
-
),
|
|
2467
|
-
Boolean(open) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2468
|
-
ConferenceDialog,
|
|
2469
|
-
{
|
|
2470
|
-
open,
|
|
2471
|
-
setOpen
|
|
2472
|
-
}
|
|
2473
|
-
),
|
|
2474
|
-
Boolean(openCallTransfer) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2475
|
-
CallTransferDialog,
|
|
2476
|
-
{
|
|
2477
|
-
open: openCallTransfer,
|
|
2478
|
-
setOpen: setOpenCallTransfer
|
|
2479
|
-
}
|
|
2480
|
-
),
|
|
2481
|
-
Boolean(openCallDisposition) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2482
|
-
EndCallDispositionDialog,
|
|
2483
|
-
{
|
|
2484
|
-
open: openCallDisposition,
|
|
2485
|
-
setOpen: setOpenCallDisposition,
|
|
2486
|
-
onSubmitDisposition: handleEndCall
|
|
2487
|
-
}
|
|
2488
|
-
),
|
|
2489
|
-
Boolean(openCallHistoryDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2490
|
-
CallHistoryDialog,
|
|
2491
|
-
{
|
|
2492
|
-
open: openCallHistoryDialog,
|
|
2493
|
-
setOpen: setOpenCallHistoryDialog
|
|
2494
|
-
}
|
|
2495
|
-
)
|
|
2496
|
-
] });
|
|
2497
|
-
}
|
|
2498
|
-
|
|
2499
|
-
// call-control-sdk/lib/hooks/eventsTracker.ts
|
|
2500
|
-
var EventTrackerSDK = class {
|
|
2501
|
-
constructor() {
|
|
2502
|
-
__publicField(this, "config", null);
|
|
2503
|
-
__publicField(this, "ticketId", null);
|
|
2504
|
-
__publicField(this, "baseUrl", "");
|
|
2505
|
-
__publicField(this, "eventQueue", []);
|
|
2506
|
-
__publicField(this, "isOnline", true);
|
|
2507
|
-
__publicField(this, "retryQueue", []);
|
|
2508
|
-
__publicField(this, "flushTimer", null);
|
|
2509
|
-
}
|
|
2510
|
-
/**
|
|
2511
|
-
* Initialize the EventTracker SDK
|
|
2512
|
-
* @param config Configuration object
|
|
2513
|
-
*/
|
|
2514
|
-
async init(config) {
|
|
2515
|
-
this.config = __spreadValues({
|
|
2516
|
-
autoTrack: true,
|
|
2517
|
-
retryAttempts: 3,
|
|
2518
|
-
queueSize: 100,
|
|
2519
|
-
flushInterval: 5e3
|
|
2520
|
-
}, config);
|
|
2521
|
-
this.baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
|
|
2522
|
-
this.setupNetworkDetection();
|
|
2523
|
-
const ticket = await this.createTicket();
|
|
2524
|
-
this.startPeriodicFlush();
|
|
2525
|
-
console.log("EventTracker SDK initialized successfully");
|
|
2526
|
-
return ticket;
|
|
2527
|
-
}
|
|
2528
|
-
/**
|
|
2529
|
-
* Check if the SDK is initialized
|
|
2530
|
-
*/
|
|
2531
|
-
isInitialized() {
|
|
2532
|
-
return this.config !== null && this.ticketId !== null;
|
|
2533
|
-
}
|
|
2534
|
-
/**
|
|
2535
|
-
* Get the current configuration
|
|
2536
|
-
*/
|
|
2537
|
-
getConfig() {
|
|
2538
|
-
return this.config;
|
|
2539
|
-
}
|
|
2540
|
-
/**
|
|
2541
|
-
* Get the current ticket ID
|
|
2542
|
-
*/
|
|
2543
|
-
getTicketId() {
|
|
2544
|
-
return this.ticketId;
|
|
2545
|
-
}
|
|
2546
|
-
/**
|
|
2547
|
-
* Create a new ticket
|
|
2548
|
-
*/
|
|
2549
|
-
async createTicket() {
|
|
2550
|
-
if (!this.config) {
|
|
2551
|
-
throw new Error("EventTracker not initialized");
|
|
2552
|
-
}
|
|
2553
|
-
try {
|
|
2554
|
-
const response = await this.makeRequest("/api/v1/et/init", {
|
|
2555
|
-
method: "POST",
|
|
2556
|
-
headers: {
|
|
2557
|
-
"Content-Type": "application/json",
|
|
2558
|
-
"X-API-Key": this.config.apiKey
|
|
2559
|
-
},
|
|
2560
|
-
body: JSON.stringify({
|
|
2561
|
-
agentId: this.config.agentId,
|
|
2562
|
-
sessionId: this.config.sessionId
|
|
2563
|
-
})
|
|
2564
|
-
});
|
|
2565
|
-
if (!response.ok) {
|
|
2566
|
-
throw new Error(
|
|
2567
|
-
`Failed to initialize: ${response.status} ${response.statusText}`
|
|
2568
|
-
);
|
|
2569
|
-
}
|
|
2570
|
-
const data = await response.json();
|
|
2571
|
-
this.ticketId = data.ticketId;
|
|
2572
|
-
if (this.config.autoTrack) {
|
|
2573
|
-
this.setupAutoTracking();
|
|
2574
|
-
}
|
|
2575
|
-
return this.ticketId;
|
|
2576
|
-
} catch (error) {
|
|
2577
|
-
console.error("EventTracker initialization failed:", error);
|
|
2578
|
-
throw error;
|
|
2579
|
-
}
|
|
2580
|
-
}
|
|
2581
|
-
/**
|
|
2582
|
-
* Log an event
|
|
2583
|
-
* @param eventType The type of event
|
|
2584
|
-
* @param eventData Optional event data
|
|
2585
|
-
*/
|
|
2586
|
-
async logEvent(eventType, eventData) {
|
|
2587
|
-
if (!this.config || !this.ticketId) {
|
|
2588
|
-
console.warn("EventTracker not initialized, skipping event:", eventType);
|
|
2589
|
-
return;
|
|
2590
|
-
}
|
|
2591
|
-
const event = {
|
|
2592
|
-
eventType,
|
|
2593
|
-
eventData,
|
|
2594
|
-
timestamp: Date.now()
|
|
2595
|
-
};
|
|
2596
|
-
this.eventQueue.push(event);
|
|
2597
|
-
if (this.eventQueue.length > (this.config.queueSize || 100)) {
|
|
2598
|
-
this.eventQueue.shift();
|
|
2599
|
-
}
|
|
2600
|
-
if (this.isOnline) {
|
|
2601
|
-
try {
|
|
2602
|
-
await this.sendEvent(event);
|
|
2603
|
-
} catch (error) {
|
|
2604
|
-
console.warn("Failed to send event, will retry later:", error);
|
|
2605
|
-
}
|
|
2606
|
-
}
|
|
2607
|
-
}
|
|
2608
|
-
/**
|
|
2609
|
-
* Send an event to the server
|
|
2610
|
-
*/
|
|
2611
|
-
async sendEvent(event) {
|
|
2612
|
-
if (!this.config || !this.ticketId) return;
|
|
2613
|
-
try {
|
|
2614
|
-
const response = await this.makeRequest("/api/v1/et/event", {
|
|
2615
|
-
method: "POST",
|
|
2616
|
-
headers: {
|
|
2617
|
-
"Content-Type": "application/json",
|
|
2618
|
-
"X-API-Key": this.config.apiKey
|
|
2619
|
-
},
|
|
2620
|
-
body: JSON.stringify({
|
|
2621
|
-
ticketId: this.ticketId,
|
|
2622
|
-
eventType: event.eventType,
|
|
2623
|
-
eventData: event.eventData
|
|
2624
|
-
})
|
|
2625
|
-
});
|
|
2626
|
-
if (!response.ok) {
|
|
2627
|
-
throw new Error(
|
|
2628
|
-
`Failed to log event: ${response.status} ${response.statusText}`
|
|
2629
|
-
);
|
|
2630
|
-
}
|
|
2631
|
-
const index = this.eventQueue.findIndex(
|
|
2632
|
-
(e) => e.timestamp === event.timestamp
|
|
2633
|
-
);
|
|
2634
|
-
if (index > -1) {
|
|
2635
|
-
this.eventQueue.splice(index, 1);
|
|
2636
|
-
}
|
|
2637
|
-
} catch (error) {
|
|
2638
|
-
console.error("Event logging failed:", error);
|
|
2639
|
-
this.retryQueue.push(() => this.sendEvent(event));
|
|
2640
|
-
}
|
|
2641
|
-
}
|
|
2642
|
-
/**
|
|
2643
|
-
* Close the current ticket
|
|
2644
|
-
*/
|
|
2645
|
-
async closeTicket() {
|
|
2646
|
-
if (!this.config || !this.ticketId) {
|
|
2647
|
-
throw new Error("EventTracker not initialized");
|
|
2648
|
-
}
|
|
2649
|
-
await this.flush();
|
|
2650
|
-
try {
|
|
2651
|
-
const response = await this.makeRequest("/api/v1/et/close", {
|
|
2652
|
-
method: "POST",
|
|
2653
|
-
headers: {
|
|
2654
|
-
"Content-Type": "application/json",
|
|
2655
|
-
"X-API-Key": this.config.apiKey
|
|
2656
|
-
},
|
|
2657
|
-
body: JSON.stringify({
|
|
2658
|
-
ticketId: this.ticketId
|
|
2659
|
-
})
|
|
2660
|
-
});
|
|
2661
|
-
if (!response.ok) {
|
|
2662
|
-
throw new Error(
|
|
2663
|
-
`Failed to close ticket: ${response.status} ${response.statusText}`
|
|
2664
|
-
);
|
|
2665
|
-
}
|
|
2666
|
-
this.ticketId = null;
|
|
2667
|
-
this.stopPeriodicFlush();
|
|
2668
|
-
console.log("Ticket closed successfully");
|
|
2669
|
-
} catch (error) {
|
|
2670
|
-
console.error("Ticket close failed:", error);
|
|
2671
|
-
throw error;
|
|
2672
|
-
}
|
|
2673
|
-
}
|
|
2674
|
-
/**
|
|
2675
|
-
* Flush all pending events
|
|
2676
|
-
*/
|
|
2677
|
-
async flush() {
|
|
2678
|
-
if (!this.isOnline || this.eventQueue.length === 0) return;
|
|
2679
|
-
const eventsToFlush = [...this.eventQueue];
|
|
2680
|
-
for (const event of eventsToFlush) {
|
|
2681
|
-
await this.sendEvent(event);
|
|
2682
|
-
}
|
|
2683
|
-
const retryItems = [...this.retryQueue];
|
|
2684
|
-
this.retryQueue = [];
|
|
2685
|
-
for (const retryFn of retryItems) {
|
|
2686
|
-
try {
|
|
2687
|
-
await retryFn();
|
|
2688
|
-
} catch (error) {
|
|
2689
|
-
console.error("Retry failed:", error);
|
|
2690
|
-
}
|
|
2691
|
-
}
|
|
2692
|
-
}
|
|
2693
|
-
/**
|
|
2694
|
-
* Make an HTTP request with retry logic
|
|
2695
|
-
*/
|
|
2696
|
-
async makeRequest(url, options) {
|
|
2697
|
-
var _a;
|
|
2698
|
-
const fullUrl = `${this.baseUrl}${url}`;
|
|
2699
|
-
const maxRetries = ((_a = this.config) == null ? void 0 : _a.retryAttempts) || 3;
|
|
2700
|
-
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
|
2701
|
-
try {
|
|
2702
|
-
const response = await fetch(fullUrl, options);
|
|
2703
|
-
return response;
|
|
2704
|
-
} catch (error) {
|
|
2705
|
-
if (attempt === maxRetries) {
|
|
2706
|
-
throw error;
|
|
2707
|
-
}
|
|
2708
|
-
const delay = Math.min(1e3 * Math.pow(2, attempt - 1), 1e4);
|
|
2709
|
-
await new Promise((resolve) => setTimeout(resolve, delay));
|
|
2710
|
-
}
|
|
2711
|
-
}
|
|
2712
|
-
throw new Error("Max retries exceeded");
|
|
2713
|
-
}
|
|
2714
|
-
/**
|
|
2715
|
-
* Set up automatic event tracking
|
|
2716
|
-
*/
|
|
2717
|
-
setupAutoTracking() {
|
|
2718
|
-
var _a;
|
|
2719
|
-
if (typeof window === "undefined" || !((_a = this.config) == null ? void 0 : _a.autoTrack)) return;
|
|
2720
|
-
const autoTrackConfig = this.config.autoTrack === true ? {} : this.config.autoTrack;
|
|
2721
|
-
if (autoTrackConfig.pageVisits !== false) {
|
|
2722
|
-
this.logEvent("pageVisit", {
|
|
2723
|
-
url: window.location.href,
|
|
2724
|
-
title: document.title,
|
|
2725
|
-
referrer: document.referrer,
|
|
2726
|
-
userAgent: navigator.userAgent,
|
|
2727
|
-
viewport: {
|
|
2728
|
-
width: window.innerWidth,
|
|
2729
|
-
height: window.innerHeight
|
|
2730
|
-
},
|
|
2731
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2732
|
-
}).catch((error) => console.warn("Failed to track page visit:", error));
|
|
2733
|
-
}
|
|
2734
|
-
if (autoTrackConfig.clicks !== false) {
|
|
2735
|
-
document.addEventListener("click", (event) => {
|
|
2736
|
-
var _a2;
|
|
2737
|
-
const target = event.target;
|
|
2738
|
-
if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button" || target instanceof HTMLButtonElement && target.type === "button") {
|
|
2739
|
-
this.logEvent("click", {
|
|
2740
|
-
element: target.tagName,
|
|
2741
|
-
text: (_a2 = target.textContent) == null ? void 0 : _a2.trim().substring(0, 100),
|
|
2742
|
-
// Limit text length
|
|
2743
|
-
href: target.getAttribute("href"),
|
|
2744
|
-
id: target.id,
|
|
2745
|
-
className: target.className,
|
|
2746
|
-
role: target.getAttribute("role"),
|
|
2747
|
-
position: {
|
|
2748
|
-
x: event.clientX,
|
|
2749
|
-
y: event.clientY
|
|
2750
|
-
},
|
|
2751
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2752
|
-
}).catch((error) => console.warn("Failed to track click:", error));
|
|
2753
|
-
}
|
|
2754
|
-
});
|
|
2755
|
-
}
|
|
2756
|
-
if (autoTrackConfig.forms !== false) {
|
|
2757
|
-
document.addEventListener("submit", (event) => {
|
|
2758
|
-
const target = event.target;
|
|
2759
|
-
const formData = new FormData(target);
|
|
2760
|
-
const formFields = {};
|
|
2761
|
-
formData.forEach((value, key) => {
|
|
2762
|
-
formFields[key] = value.toString();
|
|
2763
|
-
});
|
|
2764
|
-
this.logEvent("formSubmission", {
|
|
2765
|
-
formId: target.id,
|
|
2766
|
-
action: target.action,
|
|
2767
|
-
method: target.method,
|
|
2768
|
-
fields: Object.keys(formFields),
|
|
2769
|
-
fieldCount: Object.keys(formFields).length,
|
|
2770
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2771
|
-
}).catch(
|
|
2772
|
-
(error) => console.warn("Failed to track form submission:", error)
|
|
2773
|
-
);
|
|
2774
|
-
});
|
|
2775
|
-
}
|
|
2776
|
-
if (autoTrackConfig.inputs !== false) {
|
|
2777
|
-
let inputTimer;
|
|
2778
|
-
document.addEventListener("input", (event) => {
|
|
2779
|
-
const target = event.target;
|
|
2780
|
-
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
|
|
2781
|
-
clearTimeout(inputTimer);
|
|
2782
|
-
inputTimer = setTimeout(() => {
|
|
2783
|
-
var _a2;
|
|
2784
|
-
this.logEvent("fieldChange", {
|
|
2785
|
-
element: target.tagName,
|
|
2786
|
-
type: target.getAttribute("type"),
|
|
2787
|
-
name: target.getAttribute("name"),
|
|
2788
|
-
id: target.id,
|
|
2789
|
-
valueLength: ((_a2 = target.value) == null ? void 0 : _a2.length) || 0,
|
|
2790
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2791
|
-
}).catch(
|
|
2792
|
-
(error) => console.warn("Failed to track field change:", error)
|
|
2793
|
-
);
|
|
2794
|
-
}, 1e3);
|
|
2795
|
-
}
|
|
2796
|
-
});
|
|
2797
|
-
}
|
|
2798
|
-
const sessionStartTime = Date.now();
|
|
2799
|
-
window.addEventListener("beforeunload", () => {
|
|
2800
|
-
const sessionDuration = Date.now() - sessionStartTime;
|
|
2801
|
-
this.logEvent("pageUnload", {
|
|
2802
|
-
url: window.location.href,
|
|
2803
|
-
sessionDuration,
|
|
2804
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2805
|
-
});
|
|
2806
|
-
if (this.ticketId) {
|
|
2807
|
-
navigator.sendBeacon(
|
|
2808
|
-
`${this.baseUrl}/api/v1/et/close`,
|
|
2809
|
-
JSON.stringify({
|
|
2810
|
-
ticketId: this.ticketId
|
|
2811
|
-
})
|
|
2812
|
-
);
|
|
2813
|
-
}
|
|
2814
|
-
});
|
|
2815
|
-
if (autoTrackConfig.visibility !== false) {
|
|
2816
|
-
document.addEventListener("visibilitychange", () => {
|
|
2817
|
-
this.logEvent("visibilityChange", {
|
|
2818
|
-
hidden: document.hidden,
|
|
2819
|
-
visibilityState: document.visibilityState,
|
|
2820
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2821
|
-
});
|
|
2822
|
-
});
|
|
2823
|
-
}
|
|
2824
|
-
if (autoTrackConfig.errors !== false) {
|
|
2825
|
-
window.addEventListener("error", (event) => {
|
|
2826
|
-
this.logEvent("jsError", {
|
|
2827
|
-
message: event.message,
|
|
2828
|
-
filename: event.filename,
|
|
2829
|
-
lineno: event.lineno,
|
|
2830
|
-
colno: event.colno,
|
|
2831
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2832
|
-
});
|
|
2833
|
-
});
|
|
2834
|
-
window.addEventListener("unhandledrejection", (event) => {
|
|
2835
|
-
var _a2;
|
|
2836
|
-
this.logEvent("unhandledRejection", {
|
|
2837
|
-
reason: (_a2 = event.reason) == null ? void 0 : _a2.toString(),
|
|
2838
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2839
|
-
});
|
|
2840
|
-
});
|
|
2841
|
-
}
|
|
2842
|
-
if (autoTrackConfig.performance !== false && typeof window.performance !== "undefined" && window.performance.navigation) {
|
|
2843
|
-
window.addEventListener("load", () => {
|
|
2844
|
-
setTimeout(() => {
|
|
2845
|
-
const navigation = window.performance.navigation;
|
|
2846
|
-
const timing = window.performance.timing;
|
|
2847
|
-
this.logEvent("performanceMetrics", {
|
|
2848
|
-
navigationTime: timing.navigationStart,
|
|
2849
|
-
loadTime: timing.loadEventEnd - timing.navigationStart,
|
|
2850
|
-
domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
|
|
2851
|
-
renderTime: timing.loadEventEnd - timing.domContentLoadedEventEnd,
|
|
2852
|
-
navigationType: navigation.type,
|
|
2853
|
-
redirectCount: navigation.redirectCount,
|
|
2854
|
-
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
2855
|
-
});
|
|
2856
|
-
}, 1e3);
|
|
2857
|
-
});
|
|
2858
|
-
}
|
|
2859
|
-
}
|
|
2860
|
-
/**
|
|
2861
|
-
* Set up network detection
|
|
2862
|
-
*/
|
|
2863
|
-
setupNetworkDetection() {
|
|
2864
|
-
if (typeof window === "undefined") return;
|
|
2865
|
-
this.isOnline = navigator.onLine;
|
|
2866
|
-
window.addEventListener("online", () => {
|
|
2867
|
-
this.isOnline = true;
|
|
2868
|
-
console.log("EventTracker: Back online, flushing queued events");
|
|
2869
|
-
this.flush();
|
|
2870
|
-
});
|
|
2871
|
-
window.addEventListener("offline", () => {
|
|
2872
|
-
this.isOnline = false;
|
|
2873
|
-
console.log("EventTracker: Offline, queueing events");
|
|
2874
|
-
});
|
|
2875
|
-
}
|
|
2876
|
-
/**
|
|
2877
|
-
* Start periodic flush timer
|
|
2878
|
-
*/
|
|
2879
|
-
startPeriodicFlush() {
|
|
2880
|
-
var _a;
|
|
2881
|
-
if (this.flushTimer) {
|
|
2882
|
-
clearInterval(this.flushTimer);
|
|
2883
|
-
}
|
|
2884
|
-
const interval = ((_a = this.config) == null ? void 0 : _a.flushInterval) || 5e3;
|
|
2885
|
-
this.flushTimer = setInterval(() => {
|
|
2886
|
-
this.flush();
|
|
2887
|
-
}, interval);
|
|
2888
|
-
}
|
|
2889
|
-
/**
|
|
2890
|
-
* Stop periodic flush timer
|
|
2891
|
-
*/
|
|
2892
|
-
stopPeriodicFlush() {
|
|
2893
|
-
if (this.flushTimer) {
|
|
2894
|
-
clearInterval(this.flushTimer);
|
|
2895
|
-
this.flushTimer = null;
|
|
2896
|
-
}
|
|
2897
|
-
}
|
|
2898
|
-
};
|
|
2899
|
-
var eventTracker = new EventTrackerSDK();
|
|
2900
|
-
if (typeof window !== "undefined") {
|
|
2901
|
-
window.EventTracker = eventTracker;
|
|
2902
|
-
}
|
|
2903
|
-
|
|
2904
|
-
// call-control-sdk/lib/hooks/useLogout.ts
|
|
2905
|
-
var import_react7 = require("react");
|
|
2906
|
-
var useLogout = (options = {}) => {
|
|
2907
|
-
const { onSuccess, onError, onComplete } = options;
|
|
2908
|
-
const state = useSDKState();
|
|
2909
|
-
const [logOutAgent, logoutState] = usePostRequest({
|
|
2910
|
-
onSuccess: (response) => {
|
|
2911
|
-
onSuccess == null ? void 0 : onSuccess(response);
|
|
2912
|
-
onComplete == null ? void 0 : onComplete();
|
|
2913
|
-
sdkStateManager.clearStorageAndReset();
|
|
2914
|
-
localStorage.clear();
|
|
2915
|
-
},
|
|
2916
|
-
onError: (error) => {
|
|
2917
|
-
onError == null ? void 0 : onError(error);
|
|
2918
|
-
onComplete == null ? void 0 : onComplete();
|
|
2919
|
-
}
|
|
2920
|
-
});
|
|
2921
|
-
const handleLogout = (0, import_react7.useCallback)(() => {
|
|
2922
|
-
const payload = {
|
|
2923
|
-
action: "LOGOUTUSER",
|
|
2924
|
-
userId: state.agentId || ""
|
|
2925
|
-
};
|
|
2926
|
-
logOutAgent(END_POINT.LOGOUT, payload);
|
|
2927
|
-
}, [logOutAgent]);
|
|
2928
|
-
return {
|
|
2929
|
-
logout: handleLogout,
|
|
2930
|
-
isLoading: logoutState.isLoading,
|
|
2931
|
-
isSuccess: logoutState.isSuccess,
|
|
2932
|
-
isError: logoutState.isError,
|
|
2933
|
-
error: logoutState.error,
|
|
2934
|
-
data: logoutState.data
|
|
2935
|
-
};
|
|
2936
|
-
};
|
|
2937
|
-
var useLogout_default = useLogout;
|
|
2938
|
-
|
|
2939
|
-
// call-control-sdk/index.ts
|
|
2940
|
-
function initSDK({ apiKey, tenantId, agentId }) {
|
|
2941
|
-
sdkStateManager.initialize(apiKey, agentId);
|
|
2942
|
-
eventTracker.init({
|
|
2943
|
-
apiKey,
|
|
2944
|
-
tenantId,
|
|
2945
|
-
agentId,
|
|
2946
|
-
baseUrl: BASE_URL
|
|
2947
|
-
});
|
|
2948
|
-
}
|
|
2949
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
2950
|
-
0 && (module.exports = {
|
|
2951
|
-
CallControlPanel,
|
|
2952
|
-
initSDK,
|
|
2953
|
-
useLogout
|
|
2954
|
-
});
|
|
1
|
+
"use strict";var _o=Object.create;var lt=Object.defineProperty,ko=Object.defineProperties,Ao=Object.getOwnPropertyDescriptor,No=Object.getOwnPropertyDescriptors,Po=Object.getOwnPropertyNames,po=Object.getOwnPropertySymbols,Oo=Object.getPrototypeOf,uo=Object.prototype.hasOwnProperty,Uo=Object.prototype.propertyIsEnumerable;var Ut=(r,t,n)=>t in r?lt(r,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[t]=n,d=(r,t)=>{for(var n in t||(t={}))uo.call(t,n)&&Ut(r,n,t[n]);if(po)for(var n of po(t))Uo.call(t,n)&&Ut(r,n,t[n]);return r},$=(r,t)=>ko(r,No(t));var Mo=(r,t)=>{for(var n in t)lt(r,n,{get:t[n],enumerable:!0})},go=(r,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of Po(t))!uo.call(r,p)&&p!==n&<(r,p,{get:()=>t[p],enumerable:!(l=Ao(t,p))||l.enumerable});return r};var Bo=(r,t,n)=>(n=r!=null?_o(Oo(r)):{},go(t||!r||!r.__esModule?lt(n,"default",{value:r,enumerable:!0}):n,r)),Ho=r=>go(lt({},"__esModule",{value:!0}),r);var q=(r,t,n)=>Ut(r,typeof t!="symbol"?t+"":t,n);var jo={};Mo(jo,{CallControlPanel:()=>Eo,initSDK:()=>Ko,useLogout:()=>Lo});module.exports=Ho(jo);var v=require("@mui/icons-material"),g=require("@mui/material"),P=require("react");var Mt=class{constructor(){q(this,"state");q(this,"listeners",[]);q(this,"STORAGE_KEY","call-control-sdk-state");this.state=this.getInitialState(),this.loadFromStorage()}getInitialState(){return{apiKey:null,process:null,agentId:"",isInitialized:!1,isHolding:!1,isMuted:!1,status:"idle",callStartTime:null,controlPanelPosition:{x:10,y:10},iframePosition:{x:10,y:80},callData:{agent_id:"",status:"",type:"",event_time:"",phone_number:""},conferenceLine:[{line:1,status:"IDLE",type:"",phone:"",isMute:!1,isHold:!1,isCallStart:!1,isMergeCall:!1},{line:2,status:"IDLE",type:"",phone:"",isMute:!1,isHold:!1,isCallStart:!1,isMergeCall:!1},{line:3,status:"IDLE",type:"",phone:"",isMute:!1,isHold:!1,isCallStart:!1,isMergeCall:!1},{line:4,status:"IDLE",type:"",phone:"",isMute:!1,isHold:!1,isCallStart:!1,isMergeCall:!1},{line:5,status:"IDLE",type:"",phone:"",isMute:!1,isHold:!1,isCallStart:!1,isMergeCall:!1}]}}loadFromStorage(){try{let t=localStorage.getItem(this.STORAGE_KEY);if(t){let n=JSON.parse(t);this.state=$(d({},this.state),{apiKey:n.apiKey||"",agentId:n.agentId||"",process:n.process||null,isInitialized:n.isInitialized||!1,isHolding:n.isHolding||!1,isMuted:n.isMuted||!1,status:n.status||"idle",callStartTime:n.callStartTime||null,controlPanelPosition:n.controlPanelPosition||{x:10,y:10},iframePosition:n.iframePosition||{x:10,y:80},callData:n.callData||{mobileNumber:"",callReferenceId:"",agentLoginId:""},conferenceLine:n.conferenceLine&&Array.isArray(n.conferenceLine)&&n.conferenceLine.length>0?n.conferenceLine:this.state.conferenceLine})}}catch(t){console.warn("Failed to load SDK state from localStorage:",t)}}saveToStorage(){try{let t={apiKey:this.state.apiKey,agentId:this.state.agentId,process:this.state.process,isInitialized:this.state.isInitialized,isHolding:this.state.isHolding,isMuted:this.state.isMuted,status:this.state.status,callStartTime:this.state.callStartTime,controlPanelPosition:this.state.controlPanelPosition,iframePosition:this.state.iframePosition,callData:this.state.callData,conferenceLine:this.state.conferenceLine};localStorage.setItem(this.STORAGE_KEY,JSON.stringify(t))}catch(t){console.warn("Failed to save SDK state to localStorage:",t)}}notifyListeners(){this.listeners.forEach(t=>t())}initialize(t,n){if(!t||typeof t!="string"||t.trim().length===0)throw new Error("API key not available");this.state.apiKey=t,this.state.agentId=n,this.state.isInitialized=!0,this.saveToStorage(),this.notifyListeners()}getState(){return d({},this.state)}subscribe(t){return this.listeners.push(t),()=>{let n=this.listeners.indexOf(t);n>-1&&this.listeners.splice(n,1)}}setHolding(t){this.state.isHolding=t,this.saveToStorage(),this.notifyListeners()}setMuted(t){this.state.isMuted=t,this.saveToStorage(),this.notifyListeners()}setStatus(t){this.state.status=t,this.saveToStorage(),this.notifyListeners()}setProcess(t){this.state.process=t,this.saveToStorage(),this.notifyListeners()}setControlPanelPosition(t){this.state.controlPanelPosition=t,this.saveToStorage(),this.notifyListeners()}setIframePosition(t){this.state.iframePosition=t,this.saveToStorage(),this.notifyListeners()}startCall(){this.state.callStartTime=Date.now(),this.state.status="on call",this.saveToStorage(),this.notifyListeners()}endCall(){this.state.callStartTime=null,this.state.status="idle",this.state.isHolding=!1,this.state.isMuted=!1,this.saveToStorage(),this.notifyListeners()}updateCallData(t){this.state.callData=d(d({},this.state.callData),t),this.saveToStorage(),this.notifyListeners()}setConferenceLine(t){var l;(!this.state.conferenceLine||!Array.isArray(this.state.conferenceLine))&&(console.warn("Conference line data corrupted, resetting to initial state"),this.state.conferenceLine=this.getInitialState().conferenceLine);let n=(l=this.state.conferenceLine)==null?void 0:l.map(p=>p.line===t.line?t:p);this.state.conferenceLine=n,this.saveToStorage(),this.notifyListeners()}resetConferenceLines(){this.state.conferenceLine=this.getInitialState().conferenceLine,this.saveToStorage(),this.notifyListeners()}clearStorageAndReset(){try{localStorage.removeItem(this.STORAGE_KEY),this.state=this.getInitialState(),this.notifyListeners()}catch(t){console.warn("Failed to clear localStorage:",t)}}debugStorage(){try{let t=localStorage.getItem(this.STORAGE_KEY);console.log("Current localStorage data:",t),t&&console.log("Parsed localStorage data:",JSON.parse(t)),console.log("Current state:",this.state)}catch(t){console.error("Error debugging storage:",t)}}getConferenceLines(){return this.state.conferenceLine||[]}},L=new Mt;var F=require("react");function Bt(r,t){let[n,l]=(0,F.useState)(r),[p,e]=(0,F.useState)(!1),f=(0,F.useRef)(),h=(0,F.useRef)({x:0,y:0}),E=(0,F.useRef)({x:0,y:0}),C=(0,F.useCallback)(T=>{let N=f.current;if(!N)return;let H=N.getBoundingClientRect(),B=window.innerWidth,o=window.innerHeight,m={x:Math.max(0,Math.min(T.x,B-H.width)),y:Math.max(0,Math.min(T.y,o-H.height))};l(m),t==null||t(m)},[t]),I=(0,F.useCallback)((T,N)=>{e(!0),h.current={x:T,y:N},E.current=n;let H=(x,u)=>{let y=x-h.current.x,R=u-h.current.y;C({x:E.current.x+y,y:E.current.y+R})},B=x=>{x.preventDefault(),H(x.clientX,x.clientY)},o=x=>{x.preventDefault();let u=x.touches[0];u&&H(u.clientX,u.clientY)},m=()=>{e(!1),document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",m),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",m)};document.addEventListener("mousemove",B),document.addEventListener("mouseup",m),document.addEventListener("touchmove",o,{passive:!1}),document.addEventListener("touchend",m)},[n,C]),M=(0,F.useCallback)(T=>{T.preventDefault(),I(T.clientX,T.clientY)},[I]),S=(0,F.useCallback)(T=>{T.preventDefault();let N=T.touches[0];N&&I(N.clientX,N.clientY)},[I]);return{position:n,isDragging:p,dragRef:f,handleMouseDown:M,handleTouchStart:S}}var At=require("react");function tt(){let[r,t]=(0,At.useState)(L.getState());return(0,At.useEffect)(()=>L.subscribe(()=>{t(L.getState())}),[]),r}var k="http://192.168.101.177:8095",$o="ws://192.168.101.177:8095",U={v1:"/api/v1"},A={LOGIN:`${k}${U.v1}/cti/login?provider=convox`,READY_AGENT:`${k}${U.v1}/cti/ready-agent?provider=convox`,UPDATE_AGENT_BREAK:`${k}${U.v1}/cti/update-agent-break?provider=convox`,CLICK_TO_CALL:`${k}${U.v1}/cti/click-to-call?provider=convox`,HOLD_CALL:`${k}${U.v1}/cti/hold-call?provider=convox`,MUTE_CALL:`${k}${U.v1}/cti/mute-call?provider=convox`,UNMUTE_CALL:`${k}${U.v1}/cti/unmute-call?provider=convox`,END_CALL:`${k}${U.v1}/cti/end-call?provider=convox`,LOGOUT:`${k}${U.v1}/cti/logout?provider=convox`,CONFERENCE_CALL:`${k}${U.v1}/cti/conference-call?provider=convox`,CONFERENCE_CALL_HOLD_OR_UN_HOLD:`${k}${U.v1}/cti/conference-call/hold-unhold?provider=convox`,CONFERENCE_CALL_MUTE_OT_UN_MUTE:`${k}${U.v1}/cti/conference-call/mute-unmute?provider=convox`,CONFERENCE_CALL_END:`${k}${U.v1}/cti/conference-call/hangup?provider=convox`,CONFERENCE_CALL_END_ALL:`${k}${U.v1}/cti/conference-call/hangup-all-call?provider=convox`,TRANSFER_CALL:`${k}${U.v1}/cti/transfer?provider=convox`,AGENTS_LIST:`${k}${U.v1}/cti/users`,PROCESS_LIST:`${k}${U.v1}/cti/processes-list`,TRANSFER_TO_DETAILS:`${k}${U.v1}/cti/trasnfer-to-details?provider=convox`},fo={WS:`${$o}${U.v1}/cti/ws`};var Pt=require("react");var mo=Bo(require("axios"));var zo="12345",Ht=mo.default.create({baseURL:k,headers:{"Content-Type":"application/json",Authorization:zo},timeout:1e4});Ht.interceptors.request.use(r=>{let t="12345";return t&&r.headers&&(r.headers.Authorization=`Bearer ${t}`),r},r=>Promise.reject(r instanceof Error?r:new Error(String(r))));Ht.interceptors.response.use(r=>r,async r=>{var n;let t=r.config;return((n=r.response)==null?void 0:n.status)===401&&!t._retry&&(t._retry=!0),Promise.reject(r instanceof Error?r:new Error(String(r)))});var j=Ht;var Nt=require("@mui/material"),xo=require("react"),$t=require("react/jsx-runtime");function ct(){let[r,t]=(0,xo.useState)(!1),n=(p,e)=>{e!=="clickaway"&&t(!1)};return{showToast:(p,e)=>(t(!0),(0,$t.jsx)(Nt.Snackbar,{anchorOrigin:{vertical:"top",horizontal:"right"},open:r,onClose:n,children:(0,$t.jsx)(Nt.Alert,{onClose:n,severity:e,variant:"filled",sx:{width:"100%"},children:p})}))}}var Wo={isLoading:!1,isSuccess:!1,isError:!1,error:null,data:null},qo=(r,t)=>{if(t.type==="isLoading")return $(d({},r),{isLoading:t.payload});if(t.type==="isSuccess")return $(d({},r),{isSuccess:!0,data:t.payload});if(t.type==="isError")return $(d({},r),{isError:!0,error:t.payload});if(t.type==="reset")return{isLoading:!1,isSuccess:!1,isError:!1,error:null,data:null};throw Error("Unknown action.")};var W=(r={})=>{let{onSuccess:t=null,onError:n=null}=r,{showToast:l}=ct(),[p,e]=(0,Pt.useReducer)(qo,Wo);return[(0,Pt.useCallback)((h,E,C={})=>{e({type:"isLoading",payload:!0}),j.post(h,E,C).then(I=>{e({type:"isSuccess",payload:I.data}),t==null||t(I.data,E)}).catch(I=>{var S,T,N,H,B,o,m,x,u,y,R,w;let M={status:(T=(S=I.response)==null?void 0:S.status)!=null?T:500,message:((H=(N=I.response)==null?void 0:N.data)==null?void 0:H.detail)||((o=(B=I.response)==null?void 0:B.data)==null?void 0:o.message)||I.message||"An unknown error occurred",data:(x=(m=I.response)==null?void 0:m.data)!=null?x:null,statusText:(y=(u=I.response)==null?void 0:u.statusText)!=null?y:"",code:(R=I==null?void 0:I.code)!=null?R:"",name:(w=I==null?void 0:I.name)!=null?w:""};l(M.message,"error"),e({type:"isError",payload:M}),n==null||n(M,E)}).finally(()=>{e({type:"isLoading",payload:!1})})},[t,n,l]),p]};var D=require("@mui/icons-material"),s=require("@mui/material"),ot=require("react");var ho=require("@mui/material"),Fo=()=>{let r=(0,ho.useTheme)();return{disabled:{padding:"0px",margin:"0px",minWidth:"40px !important",borderRadius:"16px",border:"1px solid rgb(206, 204, 204)",height:"40px","&:hover":{boxShadow:" 0px 2px 2px rgba(0, 0, 0, 0.79)",border:`1px solid ${r.palette.primary.main}`},"&:active":{bgcolor:"primary.main",boxShadow:`inset 1px -2px 4px ${r.palette.primary.light}`}},enabled:{padding:"0px",margin:"0px",minWidth:"40px !important",borderRadius:"16px",boxShadow:" 0px 2px 1px rgba(0, 0, 0, 0.507)",border:`1px solid ${r.palette.primary.main}`,height:"40px","&:hover":{boxShadow:" 0px 2px 1px rgba(0, 0, 0, 0.507)",border:`1px solid ${r.palette.primary.main}`},"&:active":{bgcolor:"primary.main",boxShadow:`inset 1px -2px 4px ${r.palette.primary.light}`}},outlined:{padding:"0px",margin:"0px",minWidth:"40px !important",borderRadius:"16px",backgroundColor:r.palette.grey[200],boxShadow:`0px 2px 1px ${r.palette.primary.light}`,border:`0px solid ${r.palette.primary.main}`,height:"40px","&:hover":{boxShadow:`0px 2px 1px ${r.palette.primary.main}`,border:`0px solid ${r.palette.primary.main}`},"&:active":{bgcolor:"primary.main",boxShadow:`inset 1px -2px 4px ${r.palette.primary.light}`}}}},Ot=Fo;var a=require("react/jsx-runtime");function yo({open:r,setOpen:t}){var H,B;let n=tt(),{disabled:l,enabled:p,outlined:e}=Ot(),f=(0,s.useTheme)(),h=()=>{t(!1)},E=(o,m)=>{L.setConferenceLine(d(d({},o),m))},C=(o,m)=>{var y,R,w,_;let x=d(d({},o),m),u={action:"EXTERNAL_CONFERENCE",operation:`CALL${x.line}`,line_used:String(x.line),thirdparty_no:x.phone,userid:(R=(y=n.callData)==null?void 0:y.agent_id)!=null?R:"",process:(_=(w=n.callData)==null?void 0:w.process_name)!=null?_:""};j.post(A.CONFERENCE_CALL,u).then(()=>{L.setConferenceLine(d(d({},o),m))})},I=(o,m)=>{var y,R,w,_;let x=d(d({},o),m),u={action:"EXTERNAL_CONFERENCE",operation:"CONFERENCE",line_used:String(x.line),thirdparty_no:x.phone,userid:(R=(y=n.callData)==null?void 0:y.agent_id)!=null?R:"",process:(_=(w=n.callData)==null?void 0:w.process_name)!=null?_:""};j.post(A.CONFERENCE_CALL,u).then(()=>{L.setConferenceLine(d(d({},o),m))})},M=(o,m,x)=>{var R,w,_,z;let u=d(d({},o),m),y={action:"EXTERNAL_CONFERENCE",operation:x,hold_channel_no:x==="HOLDUSER"?`hold${u.line}`:`unhold${u.line}`,userid:(w=(R=n.callData)==null?void 0:R.agent_id)!=null?w:"",process:(z=(_=n.callData)==null?void 0:_.process_name)!=null?z:""};j.post(A.CONFERENCE_CALL_HOLD_OR_UN_HOLD,y).then(()=>{L.setConferenceLine(d(d({},o),m))})},S=(o,m,x)=>{var R,w,_,z;let u=d(d({},o),m),y={action:"EXTERNAL_CONFERENCE",operation:x,channel_no:x==="MUTEUSER"?`mute${u.line}`:`play${u.line}`,userid:(w=(R=n.callData)==null?void 0:R.agent_id)!=null?w:"",thirdparty_no:u.phone,process:(z=(_=n.callData)==null?void 0:_.process_name)!=null?z:""};j.post(A.CONFERENCE_CALL_MUTE_OT_UN_MUTE,y).then(()=>{L.setConferenceLine(d(d({},o),m))})},T=(o,m)=>{var y,R,w,_;let x=d(d({},o),m),u={action:"EXTERNAL_CONFERENCE",operation:"HANGUP_CHANNEL",line_used:String(x.line-1),user_type:`THIRDPARTY${x.line-1}`,thirdparty_no:x.phone,userid:(R=(y=n.callData)==null?void 0:y.agent_id)!=null?R:"",process:(_=(w=n.callData)==null?void 0:w.process_name)!=null?_:""};j.post(A.CONFERENCE_CALL_END,u).then(()=>{L.setConferenceLine(d(d({},o),m))})},N=()=>{var m,x,u,y;let o={action:"EXTERNAL_CONFERENCE",operation:"ENDCONFERENCE",userid:(x=(m=n.callData)==null?void 0:m.agent_id)!=null?x:"",process:(y=(u=n.callData)==null?void 0:u.process_name)!=null?y:""};j.post(A.CONFERENCE_CALL_END_ALL,o).then(()=>{L.resetConferenceLines(),h()})};return(0,ot.useEffect)(()=>{var m,x,u,y;let o={line:1,status:(x=(m=n.callData)==null?void 0:m.status)!=null?x:"",type:"internal",phone:(y=(u=n.callData)==null?void 0:u.phone_number)!=null?y:"",isMute:!1,isHold:!1,isMergeCall:!1,isCallStart:!0};L.setConferenceLine(o)},[]),(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(s.Dialog,{open:r,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",fullWidth:!0,maxWidth:"md",children:(0,a.jsxs)(s.Paper,{sx:{borderRadius:2},children:[(0,a.jsxs)(s.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 16px"},children:[(0,a.jsxs)(s.Typography,{variant:"body1",children:[(H=n==null?void 0:n.agentId)!=null?H:""," conference"]}),(0,a.jsx)(s.IconButton,{onClick:h,children:(0,a.jsx)(D.Close,{})})]}),(0,a.jsx)(s.Box,{sx:{boxShadow:"0px 1px 2px #e7e5e5ff",padding:"2px 6px",margin:"0px 10px",borderRadius:"20px"},children:(B=n==null?void 0:n.conferenceLine)==null?void 0:B.map((o,m)=>{var x,u;return(0,a.jsxs)(s.Box,{sx:{p:1,display:"flex",alignItems:"center",justifyContent:"space-between",gap:1},children:[(0,a.jsx)(s.Box,{sx:{color:"white",bgcolor:"warning.main",fontWeight:"bold",fontSize:14,minWidth:70,textAlign:"center",border:"2px solid primary.main",borderRadius:"10px 50px 50px 10px"},children:(0,a.jsx)(s.Typography,{children:(x=o==null?void 0:o.line)!=null?x:""})}),(0,a.jsx)(s.Typography,{variant:"body2",sx:{px:1,border:"2px solid gray",borderRadius:"10px",textAlign:"center",width:"80px",maxWidth:"100px"},children:(u=o==null?void 0:o.status)!=null?u:""}),(0,a.jsx)(s.Button,{sx:{textTransform:"capitalize"},size:"small",children:(0,a.jsx)(s.Typography,{variant:"body2",children:(o==null?void 0:o.line)===1?"Internal":"External"})}),(0,a.jsx)(s.TextField,{size:"small",placeholder:"Phone Number",value:(o==null?void 0:o.phone)||"",disabled:(o==null?void 0:o.line)===1,onChange:y=>{E(o,{phone:y.target.value})}}),(0,a.jsx)(s.Tooltip,{title:"Call",children:(0,a.jsx)(s.Button,{variant:o!=null&&o.isCallStart?"outlined":"contained",color:"success",sx:o!=null&&o.isCallStart?d({},l):$(d({},p),{border:`0px solid ${f.palette.success.light}`,"&:hover":{bgcolor:"error.light",boxShadow:`0px 2px 1px ${f.palette.success.light}`,border:`0px solid ${f.palette.success.light}`},"&:active":{bgcolor:"error.light",boxShadow:`inset 1px -2px 4px ${f.palette.primary.light}`}}),onClick:()=>{C(o,{isCallStart:!0,status:"ONCALL"})},disabled:o==null?void 0:o.isCallStart,children:(0,a.jsx)(D.Call,{sx:{color:o!=null&&o.isCallStart?"defalult":"#fff"}})})}),(0,a.jsx)(s.Tooltip,{title:"Merge Call",children:(0,a.jsx)(s.Button,{variant:o!=null&&o.isMergeCall?"contained":"outlined",sx:o!=null&&o.isMergeCall&&(o!=null&&o.isCallStart)?d({},l):o!=null&&o.isCallStart?d({},e):d({},l),onClick:()=>{I(o,{isMergeCall:!0,status:"ONCALL"})},disabled:!(o!=null&&o.isCallStart),children:(0,a.jsx)(D.CallSplit,{})})}),(0,a.jsx)(s.Tooltip,{title:o.isHold?"Hold":"Un Hold",children:(0,a.jsx)(s.Button,{variant:o!=null&&o.isHold?"contained":"outlined",sx:o!=null&&o.isHold&&(o!=null&&o.isCallStart)?d({},l):o!=null&&o.isCallStart?d({},e):d({},l),onClick:()=>{o.isHold?M(o,{isHold:!1},"UNHOLDUSER"):M(o,{isHold:!0},"HOLDUSER")},disabled:!(o!=null&&o.isCallStart),children:o.isHold?(0,a.jsx)(D.PlayArrow,{}):(0,a.jsx)(D.Pause,{})})}),(0,a.jsx)(s.Tooltip,{title:o.isMute?"Mute":"Un Mute",children:(0,a.jsx)(s.Button,{variant:o!=null&&o.isMute?"contained":"outlined",sx:o!=null&&o.isMute&&(o!=null&&o.isCallStart)?d({},l):o!=null&&o.isCallStart?d({},e):d({},l),onClick:()=>{o.isMute?S(o,{isMute:!1},"PLAYUSER"):S(o,{isMute:!0},"MUTEUSER")},disabled:!(o!=null&&o.isCallStart),children:o.isMute?(0,a.jsx)(D.MicOff,{}):(0,a.jsx)(D.Mic,{})})}),(0,a.jsx)(s.Tooltip,{title:"End Call",children:(o==null?void 0:o.line)!==1?(0,a.jsx)(s.Button,{variant:o!=null&&o.isCallStart?"contained":"outlined",color:"error",sx:o!=null&&o.isCallStart?$(d({},p),{minWidth:"60px !important",border:`0px solid ${f.palette.error.light}`,"&:hover":{bgcolor:"error.light",boxShadow:`0px 2px 1px ${f.palette.error.light}`,border:`0px solid ${f.palette.error.light}`},"&:active":{bgcolor:"error.light",boxShadow:`inset 1px -2px 4px ${f.palette.primary.light}`}}):$(d({},l),{minWidth:"60px !important"}),onClick:()=>{T(o,{isCallStart:!1,isMergeCall:!1,isMute:!1,isHold:!1,status:"IDLE"})},disabled:!(o!=null&&o.isCallStart),children:(0,a.jsx)(D.CallEnd,{})}):(0,a.jsx)(s.Button,{variant:o!=null&&o.isCallStart?"contained":"outlined",sx:$(d({},l),{visibility:"hidden",minWidth:"60px !important"}),onClick:()=>{T(o,{isCallStart:!1,isMergeCall:!1,isMute:!1,isHold:!1,status:"IDLE"})},disabled:!(o!=null&&o.isCallStart),children:(0,a.jsx)(s.Typography,{children:(0,a.jsx)(D.CallEnd,{sx:{visibility:"hidden"}})})})})]},m)})}),(0,a.jsx)(s.Box,{textAlign:"center",m:2,children:(0,a.jsxs)(s.Button,{variant:"outlined",color:"error",size:"large",onClick:N,sx:{px:2,borderRadius:"20px",textTransform:"capitalize"},children:[(0,a.jsx)(s.IconButton,{sx:{bgcolor:"error.main","&:hover":{bgcolor:"error.dark"},marginRight:"8px",width:"28px",height:"28px",fontSize:"12px",fontWeight:"600",lineHeight:"16px",letterSpacing:"0.02em",textTransform:"capitalize",color:"white",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%"},children:(0,a.jsx)(D.PhoneDisabled,{sx:{color:"white",fontSize:"16px",fontWeight:"600"}})}),"End Conference"]})})]})})})}function vo({open:r,setOpen:t}){var S,T,N,H,B,o,m,x;let[n]=W({onSuccess:u=>{console.log("res",u),t(!1)},onError:u=>{console.log("error",u)}}),l=tt(),[p,e]=(0,ot.useState)("process"),[f,{data:h}]=W(),[E,{data:C}]=W(),I=()=>{t(!1)},M=(u,y)=>{var R,w,_,z,Y,X,J,nt,at,pt,dt,ut,gt,st,ft,mt,xt,ht,yt,et,vt,Ct,bt,St,Et,Tt,Lt,Dt,It,Rt,wt,_t,kt;if(console.log(u,"data34"),y==="PROCESS"){let Q={mobile_number:(w=(R=l.callData)==null?void 0:R.phone_number)!=null?w:"",userid:(z=(_=l.callData)==null?void 0:_.agent_id)!=null?z:"",type:"PROCESS",transfer_to:(Y=u==null?void 0:u.process_name)!=null?Y:"",callreferenceid:(J=(X=l.callData)==null?void 0:X.convox_id)!=null?J:"",processid:String((at=(nt=l.callData)==null?void 0:nt.process_id)!=null?at:""),process_name:(dt=(pt=l.callData)==null?void 0:pt.process_name)!=null?dt:""};n(A.TRANSFER_CALL,Q)}else if(y==="QUEUE"){let Q={mobile_number:(gt=(ut=l.callData)==null?void 0:ut.phone_number)!=null?gt:"",userid:(ft=(st=l.callData)==null?void 0:st.agent_id)!=null?ft:"",type:"QUEUE",transfer_to:(mt=u==null?void 0:u.queue_name)!=null?mt:"",callreferenceid:(ht=(xt=l.callData)==null?void 0:xt.convox_id)!=null?ht:"",processid:String((et=(yt=l.callData)==null?void 0:yt.process_id)!=null?et:""),process_name:(Ct=(vt=l.callData)==null?void 0:vt.process_name)!=null?Ct:""};n(A.TRANSFER_CALL,Q)}else if(y==="AGENT"){let Q={mobile_number:(St=(bt=l.callData)==null?void 0:bt.phone_number)!=null?St:"",userid:(Tt=(Et=l.callData)==null?void 0:Et.agent_id)!=null?Tt:"",type:"AGENT",transfer_to:(Lt=u==null?void 0:u.user_id)!=null?Lt:"",callreferenceid:(It=(Dt=l.callData)==null?void 0:Dt.convox_id)!=null?It:"",processid:String((wt=(Rt=l.callData)==null?void 0:Rt.process_id)!=null?wt:""),process_name:(kt=(_t=l.callData)==null?void 0:_t.process_name)!=null?kt:""};n(A.TRANSFER_CALL,Q)}};return(0,ot.useEffect)(()=>{f(A.AGENTS_LIST,{status:"IDLE",active:!0}),E(A.TRANSFER_TO_DETAILS,{status:"ACTIVE",active:!0})},[]),(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(s.Dialog,{open:r,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",fullWidth:!0,maxWidth:"md",children:(0,a.jsxs)(s.Paper,{sx:{borderRadius:2},children:[(0,a.jsxs)(s.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 16px",boxShadow:"0px 1px 2px #f5f5f5ff"},children:[(0,a.jsx)(s.Typography,{variant:"body1",children:" Call Transfer"}),(0,a.jsx)(s.IconButton,{onClick:I,children:(0,a.jsx)(D.Close,{})})]}),(0,a.jsxs)(s.Box,{sx:{boxShadow:"1px 1px 4px #d3d3d3ff",padding:"6px 10px",margin:"10px",borderRadius:"10px"},children:[(0,a.jsxs)(s.Box,{sx:{display:"flex",gap:1},children:[(0,a.jsx)(s.Button,{variant:p==="process"?"contained":"outlined",onClick:()=>e("process"),children:"Process"}),(0,a.jsx)(s.Button,{variant:p==="queues"?"contained":"outlined",onClick:()=>e("queues"),children:"Queues"}),(0,a.jsx)(s.Button,{variant:p==="agents"?"contained":"outlined",onClick:()=>e("agents"),children:"Agents"})]}),p==="process"&&(0,a.jsx)(s.Box,{sx:{display:"flex",gap:1},children:((T=(S=C==null?void 0:C.data)==null?void 0:S.process)==null?void 0:T.length)>0?(H=(N=C==null?void 0:C.data)==null?void 0:N.process)==null?void 0:H.map((u,y)=>(0,a.jsxs)(s.Box,{sx:{p:1,display:"flex",alignItems:"center",boxShadow:"1px 1px 4px #d3d3d3ff",padding:"6px",margin:"10px 0px",borderRadius:"10px","&:hover":{bgcolor:"action.selected"}},children:[(0,a.jsxs)(s.Typography,{variant:"body1",sx:{mx:1,width:"200px",maxWidth:"250px",display:"flex",alignItems:"center"},children:[(0,a.jsx)(D.SupportAgent,{sx:{marginRight:"4px"}}),u.process_name]}),(0,a.jsx)(s.IconButton,{color:"success",sx:{bgcolor:"action.hover","&:hover":{bgcolor:"action.selected"}},onClick:()=>{M(u,"PROCESS")},children:(0,a.jsx)(D.Call,{})})]},y)):(0,a.jsx)(s.Typography,{variant:"body1",sx:{fontSize:"12px",fontWeight:"600",letterSpacing:"0.02em",textTransform:"capitalize",textAlign:"center",width:"100%",margin:"10px 0px",color:"gray"},children:"No Process Found"})}),p==="queues"&&(0,a.jsx)(s.Box,{sx:{display:"flex",gap:1},children:((o=(B=C==null?void 0:C.data)==null?void 0:B.queue)==null?void 0:o.length)>0?(x=(m=C==null?void 0:C.data)==null?void 0:m.queue)==null?void 0:x.map((u,y)=>{var R,w,_,z,Y,X;return(0,a.jsxs)(s.Box,{sx:{p:1,display:"flex",alignItems:"center",boxShadow:"1px 1px 4px #d3d3d3ff",padding:"6px",margin:"10px 0px",borderRadius:"10px","&:hover":{bgcolor:"action.selected"}},children:[(0,a.jsxs)(s.Typography,{variant:"body1",sx:{mx:1,width:"200px",maxWidth:"250px",display:"flex",alignItems:"center"},children:[(0,a.jsx)(D.SupportAgent,{sx:{marginRight:"4px"}}),u.queue_name,(_=(w=(R=C==null?void 0:C.data)==null?void 0:R.process)==null?void 0:w.find(J=>J.process_id===u.process_id))!=null&&_.process_name?(0,a.jsx)(s.Typography,{variant:"body1",sx:{fontSize:"12px",fontWeight:"600",letterSpacing:"0.02em",textTransform:"capitalize",color:"gray"},children:"("+((X=(Y=(z=C==null?void 0:C.data)==null?void 0:z.process)==null?void 0:Y.find(J=>J.process_id===u.process_id))==null?void 0:X.process_name)+")"}):""]}),(0,a.jsx)(s.IconButton,{color:"success",sx:{bgcolor:"action.hover","&:hover":{bgcolor:"action.selected"}},onClick:()=>{M(u,"QUEUE")},children:(0,a.jsx)(D.Call,{})})]},y)}):(0,a.jsx)(s.Typography,{variant:"body1",sx:{fontSize:"12px",fontWeight:"600",letterSpacing:"0.02em",textTransform:"capitalize",textAlign:"center",width:"100%",margin:"10px 0px",color:"gray"},children:"No Queues Found"})}),p==="agents"&&(0,a.jsx)(s.Box,{sx:{display:"flex",gap:1},children:(h==null?void 0:h.length)>0?h.map((u,y)=>(0,a.jsxs)(s.Box,{sx:{p:1,display:"flex",alignItems:"center",boxShadow:"1px 1px 4px #d3d3d3ff",padding:"6px",margin:"10px 0px",borderRadius:"10px","&:hover":{bgcolor:"action.selected"}},children:[(0,a.jsxs)(s.Typography,{variant:"body1",sx:{mx:1,width:"200px",maxWidth:"250px",display:"flex",alignItems:"center"},children:[(0,a.jsx)(D.SupportAgent,{sx:{marginRight:"4px"}}),u.name]}),(0,a.jsx)(s.IconButton,{color:"success",sx:{bgcolor:"action.hover","&:hover":{bgcolor:"action.selected"}},onClick:()=>{M(u,"AGENT")},children:(0,a.jsx)(D.Call,{})})]},y)):(0,a.jsx)(s.Typography,{variant:"body1",sx:{fontSize:"12px",fontWeight:"600",letterSpacing:"0.02em",textTransform:"capitalize",textAlign:"center",width:"100%",margin:"10px 0px",color:"gray"},children:"No Agents Found"})})]})]})})})}function Co({open:r,setOpen:t,onSubmitDisposition:n}){var I,M;let[l,p]=(0,ot.useState)({disposition:{label:"Resolved",value:"RES"},followUp:{label:"No",value:"N"},callbackDate:"",callbackHrs:"",callbackMins:""}),e=[{label:"Not Interested",value:"NI"},{label:"Resolved",value:"RES"}],f=[{label:"Yes",value:"Y"},{label:"No",value:"N"}],h=(S,T)=>{p(N=>$(d({},N),{[S]:T}))},E=()=>{p({disposition:{label:"Resolved",value:"RES"},followUp:{label:"No",value:"N"},callbackDate:"",callbackHrs:"",callbackMins:""})},C=()=>{E(),t(!1)};return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(s.Dialog,{open:r,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",fullWidth:!0,maxWidth:"xs",children:(0,a.jsxs)(s.Paper,{sx:{borderRadius:2},children:[(0,a.jsx)(s.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",padding:"4px 16px",boxShadow:"0px 1px 2px #f5f5f5ff"},children:(0,a.jsxs)(s.Typography,{variant:"body1",m:1,children:[" ","Call Disposition"]})}),(0,a.jsx)(s.Box,{sx:{boxShadow:"1px 1px 4px #d3d3d3ff",padding:"10px",margin:"10px",borderRadius:"10px"},children:(0,a.jsxs)(s.Grid,{container:!0,spacing:2,children:[(0,a.jsx)(s.Grid,{size:6,children:(0,a.jsx)(s.Autocomplete,{value:l.disposition,options:e,getOptionLabel:S=>S.label,onChange:(S,T)=>h("disposition",T),size:"small",renderInput:S=>(0,a.jsx)(s.TextField,$(d({},S),{label:"Disposition",fullWidth:!0}))})}),(0,a.jsx)(s.Grid,{size:6,children:(0,a.jsx)(s.Autocomplete,{options:f,getOptionLabel:S=>S.label,value:l.followUp,onChange:(S,T)=>h("followUp",T),size:"small",renderInput:S=>(0,a.jsx)(s.TextField,$(d({},S),{label:"Follow Up",fullWidth:!0}))})}),((M=(I=l==null?void 0:l.followUp)==null?void 0:I.label)==null?void 0:M.toLowerCase())==="yes"&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.Grid,{size:6,children:(0,a.jsx)(s.TextField,{size:"small",label:"Callback Date",type:"date",slotProps:{inputLabel:{shrink:!0}},value:l.callbackDate,onChange:S=>h("callbackDate",S.target.value),fullWidth:!0})}),(0,a.jsx)(s.Grid,{size:6,children:(0,a.jsx)(s.TextField,{size:"small",label:"Hours (0-23)",type:"text",inputProps:{min:0,max:23},value:l.callbackHrs,onChange:S=>h("callbackHrs",S.target.value),fullWidth:!0})}),(0,a.jsx)(s.Grid,{size:6,children:(0,a.jsx)(s.TextField,{size:"small",label:"Minutes (0-59)",type:"text",inputProps:{min:0,max:59},value:l.callbackMins,onChange:S=>h("callbackMins",S.target.value),fullWidth:!0})})]})]})}),(0,a.jsxs)(s.Box,{textAlign:"right",m:2,children:[(0,a.jsx)(s.Button,{variant:"outlined",color:"error",size:"large",onClick:C,sx:{px:2,mx:1,borderRadius:"10px",textTransform:"capitalize"},children:"cancel"}),(0,a.jsx)(s.Button,{variant:"contained",color:"primary",size:"large",onClick:()=>n(l),sx:{px:2,borderRadius:"10px",textTransform:"capitalize"},children:"Submit"})]})]})})})}function bo({open:r,setOpen:t,processList:n=[],handleSelectedProcessor:l}){return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(s.Dialog,{open:r,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",maxWidth:"xs",children:(0,a.jsxs)(s.Paper,{sx:{borderRadius:2},children:[(0,a.jsxs)(s.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 16px",boxShadow:"0px 1px 2px #f5f5f5ff"},children:[(0,a.jsx)(s.Typography,{variant:"body1",children:" Process List"}),(0,a.jsx)(s.IconButton,{onClick:()=>{t(!1)},children:(0,a.jsx)(D.Close,{})})]}),(0,a.jsx)(s.Box,{sx:{boxShadow:"1px 1px 4px #d3d3d3ff",padding:"6px 10px",margin:"10px",borderRadius:"10px"},children:(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,f)=>(0,a.jsx)(s.Box,{sx:{p:1,display:"flex",alignItems:"center",boxShadow:"1px 1px 4px #d3d3d3ff",padding:"6px",margin:"10px 0px",borderRadius:"10px",cursor:"pointer","&:hover":{bgcolor:"action.selected"}},onClick:()=>{l(e)},children:(0,a.jsxs)(s.Typography,{variant:"body1",sx:{mx:1,width:"200px",maxWidth:"250px",display:"flex",alignItems:"center"},children:[(0,a.jsx)(D.SupportAgent,{sx:{marginRight:"4px"}}),e.process_name]})},f)):null})]})})})}function So({open:r,setOpen:t}){return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(s.Dialog,{open:r,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",fullWidth:!0,maxWidth:"md",children:(0,a.jsxs)(s.Paper,{sx:{borderRadius:2},children:[(0,a.jsxs)(s.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 16px",boxShadow:"0px 1px 2px #f5f5f5ff"},children:[(0,a.jsx)(s.Typography,{variant:"body1",children:" Call History"}),(0,a.jsx)(s.IconButton,{onClick:()=>{t(!1)},children:(0,a.jsx)(D.Close,{})})]}),(0,a.jsx)(s.Box,{sx:{boxShadow:"1px 1px 4px #d3d3d3ff",margin:"10px",borderRadius:"10px",textAlign:"center",fontSize:"16px",fontWeight:"bold"},p:6,children:"Comming Soon..."})]})})})}var c=require("react/jsx-runtime");function Eo({onDataChange:r}){var qt,Ft,Gt,Kt,jt,Yt,Xt,Jt,Qt,Vt,Zt,te,ee,oe,ne,ae,se,ie,re,le,ce,pe,de,ue,ge,fe,me,xe,he,ye,ve,Ce,be,Se,Ee,Te,Le,De,Ie,Re,we,_e,ke,Ae,Ne,Pe,Oe,Ue,Me,Be,He,$e,ze,We,qe,Fe,Ge,Ke,je,Ye,Xe,Je,Qe,Ve,Ze,to;let t=(0,g.useTheme)(),{disabled:n,enabled:l,outlined:p}=Ot(),e=tt(),{showToast:f}=ct(),h=(0,P.useRef)(null),[E,C]=(0,P.useState)(null),[I,M]=(0,P.useState)(!0),[S,T]=(0,P.useState)(null),[N,H]=(0,P.useState)(null),[B,o]=(0,P.useState)(!1),[m,x]=(0,P.useState)(!1),[u,y]=(0,P.useState)(!1),[R,w]=(0,P.useState)(!1),[_,z]=(0,P.useState)(!1),[Y,X]=(0,P.useState)(""),[J,nt]=(0,P.useState)(0),{position:at,isDragging:pt,dragRef:dt,handleMouseDown:ut,handleTouchStart:gt}=Bt(e.controlPanelPosition,i=>L.setControlPanelPosition(i)),{position:st,isDragging:ft,dragRef:mt,handleMouseDown:xt,handleTouchStart:ht}=Bt(e.iframePosition,i=>L.setIframePosition(i)),[yt,{data:et}]=W({onSuccess:i=>{var b;console.log("res",i),i&&i.processes&&((b=i==null?void 0:i.processes)==null?void 0:b.length)>1?w(!0):(L.setProcess(i==null?void 0:i.processes[0]),w(!1))},onError:()=>{w(!1)}}),[vt]=W(),[Ct]=W({onSuccess:()=>{L.setHolding(!e.isHolding)},onError:i=>{console.log("error",i)}}),[bt]=W({onSuccess:()=>{L.setMuted(!e.isMuted)},onError:i=>{console.log("error",i)}}),[St]=W(),[Et]=W(),[Tt]=W(),Lt=(0,P.useCallback)(i=>{let b=Math.floor(i/60),O=i%60;return`${b.toString().padStart(2,"0")}:${O.toString().padStart(2,"0")}`},[]),Dt=()=>{C(null)},It=i=>{M(!0),H(i.currentTarget),L.setStatus("dial")},Rt=()=>{e.status!=="on call"&&L.setStatus("idle"),H(null)},wt=i=>{T(i.currentTarget)},_t=()=>{T(null)},kt=()=>{let i={action:"READYAGENT",userId:e.agentId};St(A.READY_AGENT,i)},Q=i=>{T(null);let b={action:"AGENTBREAK",break_type:i,userId:e.agentId};Et(A.UPDATE_AGENT_BREAK,b)},Do=i=>{if(i.length!==10)f("Invalid phone number","error"),alert("Invalid phone number");else if(!/^\d+$/.test(i))f("Invalid phone number","error");else{let b={action:"CALL",phone_number:i,userId:e.agentId};vt(A.CLICK_TO_CALL,b)}},Io=()=>{let i={action:e.isHolding?"UNHOLD":"HOLD",userId:e.agentId};Ct(A.HOLD_CALL,i)},Ro=()=>{let i={action:e.isMuted?"UNMUTE":"MUTE",userId:e.agentId};bt(A.MUTE_CALL,i)},wo=i=>{var O,G,K,V,Z,it,rt,eo,oo,no,ao,so,io,ro,lo,co;console.log("data",i);let b={action:"ENDCALL",userId:e.agentId,processid:(K=(G=(O=e.process)==null?void 0:O.process_id)==null?void 0:G.toString())!=null?K:"",process_name:(Z=(V=e.process)==null?void 0:V.process_name)!=null?Z:"",callreferenceid:(rt=(it=e.callData)==null?void 0:it.convox_id)!=null?rt:"",mobile_number:(oo=(eo=e.callData)==null?void 0:eo.phone_number)!=null?oo:"",disposition:(ao=(no=i==null?void 0:i.disposition)==null?void 0:no.value)!=null?ao:"",set_followUp:(io=(so=i==null?void 0:i.followUp)==null?void 0:so.value)!=null?io:"",callback_date:(ro=i==null?void 0:i.callbackDate)!=null?ro:"",callback_hrs:(lo=i==null?void 0:i.callbackHrs)!=null?lo:"",callback_mins:(co=i==null?void 0:i.callbackMins)!=null?co:"",endcall_type:"CLOSE"};X(""),Tt(A.END_CALL,b),L.endCall(),y(!1)};return(0,P.useEffect)(()=>{let i;return e.callData.status&&e.callData.status==="ONCALL"?i=setInterval(()=>{let b=Math.floor((Date.now()-e.callStartTime)/1e3);nt(b)},1e3):nt(0),()=>{i&&clearInterval(i)}},[e.callData.status]),(0,P.useEffect)(()=>{r&&r(e.callData)},[e.callData,r]),(0,P.useEffect)(()=>{e.agentId?yt(A.PROCESS_LIST,{userId:e.agentId,action:"GETAGENTPROCESSLIST",refno:"1234221233"}):console.log("No agentId available, skipping API call")},[e.agentId]),(0,P.useEffect)(()=>(e.agentId&&(h.current=new WebSocket(`${fo.WS}?agent_id=${e.agentId}`),h.current.onopen=()=>{console.log("WebSocket connection established")},h.current.onmessage=i=>{try{let b=JSON.parse(i.data);console.log("parsedJSON:",b),L.updateCallData(b),b.status==="ONCALL"&&L.startCall(),b.status==="WRAPUP"&&L.endCall()}catch(b){console.log("Raw message:",i.data)}},h.current.onclose=()=>{console.log("WebSocket connection closed")},h.current.onerror=i=>{console.error("WebSocket error:",i)}),()=>{var i;(i=h.current)==null||i.close()}),[e.agentId]),!e.isInitialized||!e.process?(0,c.jsx)(g.Box,{children:!!R&&(0,c.jsx)(bo,{processList:et==null?void 0:et.processes,open:R,setOpen:w,handleSelectedProcessor:i=>{L.setProcess(i)}})}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(g.Fade,{in:!0,timeout:300,children:(0,c.jsx)(g.Paper,{ref:dt,elevation:pt?4:1,sx:{position:"fixed",left:at.x,top:at.y,p:.5,borderRadius:3,bgcolor:"background.paper",zIndex:99999,transition:t.transitions.create(["box-shadow","transform"],{duration:t.transitions.duration.short}),userSelect:"none"},children:(0,c.jsxs)(g.Box,{sx:{display:"flex",alignItems:"center"},children:[(0,c.jsxs)(g.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[(0,c.jsxs)(g.IconButton,{component:"div",size:"small",sx:{cursor:"all-scroll"},onMouseDown:ut,onTouchStart:gt,children:[(0,c.jsx)(v.DragIndicator,{})," "]}),(0,c.jsx)(g.Box,{sx:{marginRight:"10px"},children:(0,c.jsx)(g.Tooltip,{title:"Dial",children:(0,c.jsx)(g.IconButton,{size:"small",onClick:i=>{var b,O,G,K,V,Z,it,rt;((O=(b=e.callData)==null?void 0:b.status)==null?void 0:O.toUpperCase())!=="ONCALL"&&((K=(G=e.callData)==null?void 0:G.status)==null?void 0:K.toUpperCase())!=="BREAK"&&((Z=(V=e.callData)==null?void 0:V.status)==null?void 0:Z.toUpperCase())!=="RINGING"&&((rt=(it=e.callData)==null?void 0:it.status)==null?void 0:rt.toUpperCase())!=="WRAPUP"&&It(i)},sx:{bgcolor:"action.hover","&:hover":{bgcolor:"warning"}},children:(0,c.jsx)(v.WifiCalling3,{sx:{color:((Ft=(qt=e.callData)==null?void 0:qt.status)==null?void 0:Ft.toUpperCase())==="ONCALL"||((Kt=(Gt=e.callData)==null?void 0:Gt.status)==null?void 0:Kt.toUpperCase())==="BREAK"||((Yt=(jt=e.callData)==null?void 0:jt.status)==null?void 0:Yt.toUpperCase())==="RINGING"||((Jt=(Xt=e.callData)==null?void 0:Xt.status)==null?void 0:Jt.toUpperCase())==="WRAPUP"?"action.selected":"success.main"}})})})}),(0,c.jsx)(g.Typography,{sx:{color:"success.main",width:"40px",marginRight:"10px"},children:Lt(J)}),(0,c.jsx)(g.Typography,{variant:"body2",sx:{fontWeight:"bold"},children:(Zt=(Vt=(Qt=e.callData)==null?void 0:Qt.status)==null?void 0:Vt.toUpperCase())!=null?Zt:"N/A"}),(0,c.jsxs)(g.Button,{size:"small",variant:"text",onClick:wt,disabled:!!e.callStartTime,children:[(0,c.jsx)(v.ArrowDropDown,{})," "]})]}),(0,c.jsxs)(g.Box,{sx:{display:"flex",gap:1,justifyContent:"center",alignItems:"center"},children:[(0,c.jsx)(g.Tooltip,{title:"Agent Ready",children:(0,c.jsx)(g.Button,{variant:((ee=(te=e.callData)==null?void 0:te.status)==null?void 0:ee.toUpperCase())==="BREAK"||((ne=(oe=e.callData)==null?void 0:oe.status)==null?void 0:ne.toUpperCase())==="MISSED"?"outlined":"contained",onClick:i=>{var b,O,G,K;(((O=(b=e.callData)==null?void 0:b.status)==null?void 0:O.toUpperCase())==="BREAK"||((K=(G=e.callData)==null?void 0:G.status)==null?void 0:K.toUpperCase())==="MISSED")&&(i.stopPropagation(),kt())},classes:{root:((se=(ae=e.callData)==null?void 0:ae.status)==null?void 0:se.toUpperCase())==="BREAK"||((re=(ie=e.callData)==null?void 0:ie.status)==null?void 0:re.toUpperCase())==="MISSED"?"outlined":"enabled"},sx:d({},((ce=(le=e.callData)==null?void 0:le.status)==null?void 0:ce.toUpperCase())==="BREAK"||((de=(pe=e.callData)==null?void 0:pe.status)==null?void 0:de.toUpperCase())==="MISSED"?p:l),children:(0,c.jsx)(v.SupportAgent,{})})}),(0,c.jsx)(g.Tooltip,{title:e.isHolding?"Resume":"Hold",children:(0,c.jsx)(g.Button,{variant:e.isHolding&&((ge=(ue=e.callData)==null?void 0:ue.status)==null?void 0:ge.toUpperCase())==="ONCALL"?"contained":"outlined",onClick:i=>{i.stopPropagation(),Io()},sx:e.isHolding&&((me=(fe=e.callData)==null?void 0:fe.status)==null?void 0:me.toUpperCase())==="ONCALL"?d({},l):((he=(xe=e.callData)==null?void 0:xe.status)==null?void 0:he.toUpperCase())==="ONCALL"?d({},p):d({},n),disabled:((ve=(ye=e.callData)==null?void 0:ye.status)==null?void 0:ve.toUpperCase())!=="ONCALL"&&!e.isHolding,children:e.isHolding?(0,c.jsx)(v.PlayArrow,{}):(0,c.jsx)(v.Pause,{})})}),(0,c.jsx)(g.Tooltip,{title:e.isMuted?"Unmute":"Mute",children:(0,c.jsx)(g.Button,{variant:e.isMuted&&((be=(Ce=e.callData)==null?void 0:Ce.status)==null?void 0:be.toUpperCase())==="ONCALL"?"contained":"outlined",onClick:i=>{i.stopPropagation(),Ro()},sx:e.isMuted&&((Ee=(Se=e.callData)==null?void 0:Se.status)==null?void 0:Ee.toUpperCase())==="ONCALL"?d({},l):((Le=(Te=e.callData)==null?void 0:Te.status)==null?void 0:Le.toUpperCase())==="ONCALL"?d({},p):d({},n),disabled:((Ie=(De=e.callData)==null?void 0:De.status)==null?void 0:Ie.toUpperCase())!=="ONCALL"&&!e.isMuted,children:e.isMuted?(0,c.jsx)(v.MicOff,{}):(0,c.jsx)(v.Mic,{})})}),(0,c.jsx)(g.Tooltip,{title:"Transfer Call",children:(0,c.jsx)(g.Button,{variant:m?"contained":"outlined",onClick:i=>{var b,O;((O=(b=e.callData)==null?void 0:b.status)==null?void 0:O.toUpperCase())==="ONCALL"&&(i.stopPropagation(),x(!0))},sx:m?d({},l):((we=(Re=e.callData)==null?void 0:Re.status)==null?void 0:we.toUpperCase())==="ONCALL"?d({},p):d({},n),disabled:((ke=(_e=e.callData)==null?void 0:_e.status)==null?void 0:ke.toUpperCase())!=="ONCALL",children:(0,c.jsx)(v.TransferWithinAStation,{})})}),(0,c.jsx)(g.Tooltip,{title:"Conference Call",children:(0,c.jsx)(g.Button,{variant:B?"contained":"outlined",onClick:i=>{var b,O;((O=(b=e.callData)==null?void 0:b.status)==null?void 0:O.toUpperCase())==="ONCALL"&&(i.stopPropagation(),o(!0))},sx:B?d({},l):((Ne=(Ae=e.callData)==null?void 0:Ae.status)==null?void 0:Ne.toUpperCase())==="ONCALL"?d({},p):d({},n),disabled:((Oe=(Pe=e.callData)==null?void 0:Pe.status)==null?void 0:Oe.toUpperCase())!=="ONCALL",children:(0,c.jsx)(v.Group,{})})}),(0,c.jsx)(g.Tooltip,{title:"Call History",children:(0,c.jsx)(g.Button,{variant:_?"contained":"outlined",onClick:i=>{i.stopPropagation(),z(!0)},sx:_?d({},l):d({},p),children:(0,c.jsx)(v.History,{})})}),(0,c.jsx)(g.Tooltip,{title:"End Call",children:(0,c.jsx)(g.Button,{variant:((Me=(Ue=e.callData)==null?void 0:Ue.status)==null?void 0:Me.toUpperCase())==="ONCALL"||((He=(Be=e.callData)==null?void 0:Be.status)==null?void 0:He.toUpperCase())==="RINGING"||((ze=($e=e.callData)==null?void 0:$e.status)==null?void 0:ze.toUpperCase())==="WRAPUP"?"contained":"outlined",onClick:i=>{var b,O,G,K,V,Z;(((O=(b=e.callData)==null?void 0:b.status)==null?void 0:O.toUpperCase())==="ONCALL"||((K=(G=e.callData)==null?void 0:G.status)==null?void 0:K.toUpperCase())==="RINGING"||((Z=(V=e.callData)==null?void 0:V.status)==null?void 0:Z.toUpperCase())==="WRAPUP")&&(i.stopPropagation(),y(!0))},sx:((qe=(We=e.callData)==null?void 0:We.status)==null?void 0:qe.toUpperCase())==="ONCALL"||((Ge=(Fe=e.callData)==null?void 0:Fe.status)==null?void 0:Ge.toUpperCase())==="RINGING"||((je=(Ke=e.callData)==null?void 0:Ke.status)==null?void 0:je.toUpperCase())==="WRAPUP"?$(d({},l),{borderRight:"1px",backgroundColor:"error.main",minWidth:"60px !important",boxShadow:" 0px 2px 1px #5f3f3f",border:`1px solid ${t.palette.error.light}`,height:"40px","&:hover":{bgcolor:"error.light",boxShadow:" 0px 2px 1px #5f3f3f",border:`0px solid ${t.palette.error.light}`},"&:active":{bgcolor:"error.light",boxShadow:`inset 1px -2px 4px ${t.palette.primary.light}`}}):$(d({},n),{minWidth:"60px !important"}),disabled:((Xe=(Ye=e.callData)==null?void 0:Ye.status)==null?void 0:Xe.toUpperCase())!=="ONCALL"&&((Qe=(Je=e.callData)==null?void 0:Je.status)==null?void 0:Qe.toUpperCase())!=="RINGING"&&((Ze=(Ve=e.callData)==null?void 0:Ve.status)==null?void 0:Ze.toUpperCase())!=="WRAPUP",children:(0,c.jsx)(v.CallEnd,{})})})]})]})})}),(0,c.jsx)(g.Fade,{in:!0,timeout:300,children:(0,c.jsxs)(g.Paper,{ref:mt,elevation:ft?4:1,sx:{position:"fixed",left:st.x,top:st.y,p:1,height:"auto",borderRadius:2,bgcolor:"background.paper",zIndex:99999,transition:t.transitions.create(["box-shadow","transform"],{duration:t.transitions.duration.short}),visibility:I?"visible":"hidden",userSelect:"none"},children:[(0,c.jsxs)(g.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"all-scroll"},onMouseDown:xt,onTouchStart:ht,children:[(0,c.jsx)(v.DragIndicator,{sx:{transform:"rotate(90deg)"}})," ",(0,c.jsx)(g.IconButton,{onClick:()=>M(!1),children:(0,c.jsx)(v.Close,{})})]}),(0,c.jsx)("iframe",{src:`https://h68.deepijatel.in/ConVoxCCS/iframe?agent_id=${e.agentId}&process_id=${(to=e.process)==null?void 0:to.process_id}`,height:380,width:420,allow:"camera; microphone; autoplay"})]})}),(0,c.jsx)(g.Menu,{anchorEl:N,open:!!N,onClose:Rt,onClick:i=>i.stopPropagation(),sx:{zIndex:99999},children:(0,c.jsxs)(g.Box,{sx:{all:"unset",padding:"10px","&hover":{backgroundColor:"white"}},children:[(0,c.jsx)(g.TextField,{size:"small",value:Y,placeholder:"Enter Mobile No.",onChange:i=>{X(i.target.value)}}),(0,c.jsx)(g.IconButton,{color:"info",onClick:()=>{Do(Y)},children:(0,c.jsx)(v.Phone,{color:"success"})})]})}),(0,c.jsxs)(g.Menu,{anchorEl:S,open:!!S,onClose:_t,onClick:i=>i.stopPropagation(),sx:{zIndex:99999},children:[(0,c.jsx)(g.MenuItem,{onClick:()=>Q("Lunch"),children:"- Lunch"}),(0,c.jsx)(g.MenuItem,{onClick:()=>Q("Tea"),children:"- Tea"})]}),(0,c.jsx)(g.Menu,{anchorEl:E,open:!!E,onClose:Dt,onClick:i=>i.stopPropagation(),sx:{zIndex:99999},children:(0,c.jsxs)(g.Box,{sx:{display:"flex",justifyContent:"flex-start",flexDirection:"column",padding:"0px 10px","&hover":{backgroundColor:"white"}},children:[(0,c.jsx)(g.Chip,{icon:(0,c.jsx)(v.Layers,{color:"secondary"}),variant:"outlined",label:"Waiting - 25",sx:{margin:"4px 2px"}}),(0,c.jsx)(g.Chip,{icon:(0,c.jsx)(v.Pending,{color:"info"}),label:"Pending - 99+",variant:"outlined",sx:{margin:"4px 2px"}}),(0,c.jsx)(g.Chip,{icon:(0,c.jsx)(v.Upcoming,{color:"success"}),variant:"outlined",label:"Upcoming - 66",sx:{margin:"4px 2px"}})]})}),!!B&&(0,c.jsx)(yo,{open:B,setOpen:o}),!!m&&(0,c.jsx)(vo,{open:m,setOpen:x}),!!u&&(0,c.jsx)(Co,{open:u,setOpen:y,onSubmitDisposition:wo}),!!_&&(0,c.jsx)(So,{open:_,setOpen:z})]})}var zt=class{constructor(){q(this,"config",null);q(this,"ticketId",null);q(this,"baseUrl","");q(this,"eventQueue",[]);q(this,"isOnline",!0);q(this,"retryQueue",[]);q(this,"flushTimer",null)}async init(t){this.config=d({autoTrack:!0,retryAttempts:3,queueSize:100,flushInterval:5e3},t),this.baseUrl=t.baseUrl||(typeof window!="undefined"?window.location.origin:""),this.setupNetworkDetection();let n=await this.createTicket();return this.startPeriodicFlush(),console.log("EventTracker SDK initialized successfully"),n}isInitialized(){return this.config!==null&&this.ticketId!==null}getConfig(){return this.config}getTicketId(){return this.ticketId}async createTicket(){if(!this.config)throw new Error("EventTracker not initialized");try{let t=await this.makeRequest("/api/v1/et/init",{method:"POST",headers:{"Content-Type":"application/json","X-API-Key":this.config.apiKey},body:JSON.stringify({agentId:this.config.agentId,sessionId:this.config.sessionId})});if(!t.ok)throw new Error(`Failed to initialize: ${t.status} ${t.statusText}`);let n=await t.json();return this.ticketId=n.ticketId,this.config.autoTrack&&this.setupAutoTracking(),this.ticketId}catch(t){throw console.error("EventTracker initialization failed:",t),t}}async logEvent(t,n){if(!this.config||!this.ticketId){console.warn("EventTracker not initialized, skipping event:",t);return}let l={eventType:t,eventData:n,timestamp:Date.now()};if(this.eventQueue.push(l),this.eventQueue.length>(this.config.queueSize||100)&&this.eventQueue.shift(),this.isOnline)try{await this.sendEvent(l)}catch(p){console.warn("Failed to send event, will retry later:",p)}}async sendEvent(t){if(!(!this.config||!this.ticketId))try{let n=await this.makeRequest("/api/v1/et/event",{method:"POST",headers:{"Content-Type":"application/json","X-API-Key":this.config.apiKey},body:JSON.stringify({ticketId:this.ticketId,eventType:t.eventType,eventData:t.eventData})});if(!n.ok)throw new Error(`Failed to log event: ${n.status} ${n.statusText}`);let l=this.eventQueue.findIndex(p=>p.timestamp===t.timestamp);l>-1&&this.eventQueue.splice(l,1)}catch(n){console.error("Event logging failed:",n),this.retryQueue.push(()=>this.sendEvent(t))}}async closeTicket(){if(!this.config||!this.ticketId)throw new Error("EventTracker not initialized");await this.flush();try{let t=await this.makeRequest("/api/v1/et/close",{method:"POST",headers:{"Content-Type":"application/json","X-API-Key":this.config.apiKey},body:JSON.stringify({ticketId:this.ticketId})});if(!t.ok)throw new Error(`Failed to close ticket: ${t.status} ${t.statusText}`);this.ticketId=null,this.stopPeriodicFlush(),console.log("Ticket closed successfully")}catch(t){throw console.error("Ticket close failed:",t),t}}async flush(){if(!this.isOnline||this.eventQueue.length===0)return;let t=[...this.eventQueue];for(let l of t)await this.sendEvent(l);let n=[...this.retryQueue];this.retryQueue=[];for(let l of n)try{await l()}catch(p){console.error("Retry failed:",p)}}async makeRequest(t,n){var e;let l=`${this.baseUrl}${t}`,p=((e=this.config)==null?void 0:e.retryAttempts)||3;for(let f=1;f<=p;f++)try{return await fetch(l,n)}catch(h){if(f===p)throw h;let E=Math.min(1e3*Math.pow(2,f-1),1e4);await new Promise(C=>setTimeout(C,E))}throw new Error("Max retries exceeded")}setupAutoTracking(){var l;if(typeof window=="undefined"||!((l=this.config)!=null&&l.autoTrack))return;let t=this.config.autoTrack===!0?{}:this.config.autoTrack;if(t.pageVisits!==!1&&this.logEvent("pageVisit",{url:window.location.href,title:document.title,referrer:document.referrer,userAgent:navigator.userAgent,viewport:{width:window.innerWidth,height:window.innerHeight},timestamp:new Date().toISOString()}).catch(p=>console.warn("Failed to track page visit:",p)),t.clicks!==!1&&document.addEventListener("click",p=>{var f;let e=p.target;(e.tagName==="BUTTON"||e.tagName==="A"||e.onclick||e.getAttribute("role")==="button"||e instanceof HTMLButtonElement&&e.type==="button")&&this.logEvent("click",{element:e.tagName,text:(f=e.textContent)==null?void 0:f.trim().substring(0,100),href:e.getAttribute("href"),id:e.id,className:e.className,role:e.getAttribute("role"),position:{x:p.clientX,y:p.clientY},timestamp:new Date().toISOString()}).catch(h=>console.warn("Failed to track click:",h))}),t.forms!==!1&&document.addEventListener("submit",p=>{let e=p.target,f=new FormData(e),h={};f.forEach((E,C)=>{h[C]=E.toString()}),this.logEvent("formSubmission",{formId:e.id,action:e.action,method:e.method,fields:Object.keys(h),fieldCount:Object.keys(h).length,timestamp:new Date().toISOString()}).catch(E=>console.warn("Failed to track form submission:",E))}),t.inputs!==!1){let p;document.addEventListener("input",e=>{let f=e.target;(f.tagName==="INPUT"||f.tagName==="TEXTAREA"||f.tagName==="SELECT")&&(clearTimeout(p),p=setTimeout(()=>{var h;this.logEvent("fieldChange",{element:f.tagName,type:f.getAttribute("type"),name:f.getAttribute("name"),id:f.id,valueLength:((h=f.value)==null?void 0:h.length)||0,timestamp:new Date().toISOString()}).catch(E=>console.warn("Failed to track field change:",E))},1e3))})}let n=Date.now();window.addEventListener("beforeunload",()=>{let p=Date.now()-n;this.logEvent("pageUnload",{url:window.location.href,sessionDuration:p,timestamp:new Date().toISOString()}),this.ticketId&&navigator.sendBeacon(`${this.baseUrl}/api/v1/et/close`,JSON.stringify({ticketId:this.ticketId}))}),t.visibility!==!1&&document.addEventListener("visibilitychange",()=>{this.logEvent("visibilityChange",{hidden:document.hidden,visibilityState:document.visibilityState,timestamp:new Date().toISOString()})}),t.errors!==!1&&(window.addEventListener("error",p=>{this.logEvent("jsError",{message:p.message,filename:p.filename,lineno:p.lineno,colno:p.colno,timestamp:new Date().toISOString()})}),window.addEventListener("unhandledrejection",p=>{var e;this.logEvent("unhandledRejection",{reason:(e=p.reason)==null?void 0:e.toString(),timestamp:new Date().toISOString()})})),t.performance!==!1&&typeof window.performance!="undefined"&&window.performance.navigation&&window.addEventListener("load",()=>{setTimeout(()=>{let p=window.performance.navigation,e=window.performance.timing;this.logEvent("performanceMetrics",{navigationTime:e.navigationStart,loadTime:e.loadEventEnd-e.navigationStart,domReady:e.domContentLoadedEventEnd-e.navigationStart,renderTime:e.loadEventEnd-e.domContentLoadedEventEnd,navigationType:p.type,redirectCount:p.redirectCount,timestamp:new Date().toISOString()})},1e3)})}setupNetworkDetection(){typeof window!="undefined"&&(this.isOnline=navigator.onLine,window.addEventListener("online",()=>{this.isOnline=!0,console.log("EventTracker: Back online, flushing queued events"),this.flush()}),window.addEventListener("offline",()=>{this.isOnline=!1,console.log("EventTracker: Offline, queueing events")}))}startPeriodicFlush(){var n;this.flushTimer&&clearInterval(this.flushTimer);let t=((n=this.config)==null?void 0:n.flushInterval)||5e3;this.flushTimer=setInterval(()=>{this.flush()},t)}stopPeriodicFlush(){this.flushTimer&&(clearInterval(this.flushTimer),this.flushTimer=null)}},Wt=new zt;typeof window!="undefined"&&(window.EventTracker=Wt);var To=require("react");var Go=(r={})=>{let{onSuccess:t,onError:n,onComplete:l}=r,p=tt(),[e,f]=W({onSuccess:E=>{t==null||t(E),l==null||l(),L.clearStorageAndReset(),localStorage.clear()},onError:E=>{n==null||n(E),l==null||l()}});return{logout:(0,To.useCallback)(()=>{let E={action:"LOGOUTUSER",userId:p.agentId||""};e(A.LOGOUT,E)},[e]),isLoading:f.isLoading,isSuccess:f.isSuccess,isError:f.isError,error:f.error,data:f.data}},Lo=Go;function Ko({apiKey:r,tenantId:t,agentId:n}){L.initialize(r,n),Wt.init({apiKey:r,tenantId:t,agentId:n,baseUrl:k})}0&&(module.exports={CallControlPanel,initSDK,useLogout});
|
|
2
|
+
//# sourceMappingURL=index.js.map
|