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