call-control-sdk 4.0.0 → 5.0.0

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.
Files changed (6) hide show
  1. package/README.md +3 -4
  2. package/dist/index.d.mts +39 -8
  3. package/dist/index.d.ts +39 -8
  4. package/dist/index.js +1600 -840
  5. package/dist/index.mjs +1546 -791
  6. package/package.json +67 -57
package/dist/index.js CHANGED
@@ -49,17 +49,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
49
49
  var index_exports = {};
50
50
  __export(index_exports, {
51
51
  CallControlPanel: () => CallControlPanel,
52
- initSDK: () => initSDK
52
+ initSDK: () => initSDK,
53
+ useLogout: () => useLogout_default
53
54
  });
54
55
  module.exports = __toCommonJS(index_exports);
55
56
 
56
57
  // call-control-sdk/lib/components/callControlPanel.tsx
57
- var import_react6 = require("react");
58
- var import_material3 = require("@mui/material");
59
58
  var import_icons_material2 = require("@mui/icons-material");
60
-
61
- // call-control-sdk/lib/hooks/useSDKState.ts
62
- var import_react = require("react");
59
+ var import_material4 = require("@mui/material");
60
+ var import_react6 = require("react");
63
61
 
64
62
  // call-control-sdk/lib/hooks/sdk-state.ts
65
63
  var SDKStateManager = class {
@@ -73,18 +71,74 @@ var SDKStateManager = class {
73
71
  getInitialState() {
74
72
  return {
75
73
  apiKey: null,
74
+ process: null,
75
+ agentId: "",
76
76
  isInitialized: false,
77
77
  isHolding: false,
78
78
  isMuted: false,
79
79
  status: "idle",
80
80
  callStartTime: null,
81
- controlPanelPosition: { x: 0, y: 0 },
82
- iframePosition: { x: 0, y: 0 },
81
+ controlPanelPosition: { x: 10, y: 10 },
82
+ iframePosition: { x: 10, y: 80 },
83
83
  callData: {
84
- mobileNumber: "",
85
- callReferenceId: "",
86
- agentLoginId: ""
87
- }
84
+ agent_id: "",
85
+ status: "",
86
+ type: "",
87
+ event_time: "",
88
+ phone_number: ""
89
+ },
90
+ conferenceLine: [
91
+ {
92
+ line: 1,
93
+ status: "IDLE",
94
+ type: "",
95
+ phone: "",
96
+ isMute: false,
97
+ isHold: false,
98
+ isCallStart: false,
99
+ isMergeCall: false
100
+ },
101
+ {
102
+ line: 2,
103
+ status: "IDLE",
104
+ type: "",
105
+ phone: "",
106
+ isMute: false,
107
+ isHold: false,
108
+ isCallStart: false,
109
+ isMergeCall: false
110
+ },
111
+ {
112
+ line: 3,
113
+ status: "IDLE",
114
+ type: "",
115
+ phone: "",
116
+ isMute: false,
117
+ isHold: false,
118
+ isCallStart: false,
119
+ isMergeCall: false
120
+ },
121
+ {
122
+ line: 4,
123
+ status: "IDLE",
124
+ type: "",
125
+ phone: "",
126
+ isMute: false,
127
+ isHold: false,
128
+ isCallStart: false,
129
+ isMergeCall: false
130
+ },
131
+ {
132
+ line: 5,
133
+ status: "IDLE",
134
+ type: "",
135
+ phone: "",
136
+ isMute: false,
137
+ isHold: false,
138
+ isCallStart: false,
139
+ isMergeCall: false
140
+ }
141
+ ]
88
142
  };
89
143
  }
90
144
  loadFromStorage() {
@@ -93,15 +147,26 @@ var SDKStateManager = class {
93
147
  if (stored) {
94
148
  const parsedState = JSON.parse(stored);
95
149
  this.state = __spreadProps(__spreadValues({}, this.state), {
150
+ apiKey: parsedState.apiKey || "",
151
+ agentId: parsedState.agentId || "",
152
+ process: parsedState.process || null,
153
+ isInitialized: parsedState.isInitialized || false,
96
154
  isHolding: parsedState.isHolding || false,
97
155
  isMuted: parsedState.isMuted || false,
98
156
  status: parsedState.status || "idle",
157
+ callStartTime: parsedState.callStartTime || null,
99
158
  controlPanelPosition: parsedState.controlPanelPosition || {
100
- x: 50,
101
- y: 50
159
+ x: 10,
160
+ y: 10
102
161
  },
103
- iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
104
- callStartTime: parsedState.callStartTime || null
162
+ iframePosition: parsedState.iframePosition || { x: 10, y: 80 },
163
+ callData: parsedState.callData || {
164
+ mobileNumber: "",
165
+ callReferenceId: "",
166
+ agentLoginId: ""
167
+ },
168
+ // Fix: Properly handle conferenceLine with fallback to initial state
169
+ conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine
105
170
  });
106
171
  }
107
172
  } catch (error) {
@@ -111,12 +176,18 @@ var SDKStateManager = class {
111
176
  saveToStorage() {
112
177
  try {
113
178
  const persistentState = {
179
+ apiKey: this.state.apiKey,
180
+ agentId: this.state.agentId,
181
+ process: this.state.process,
182
+ isInitialized: this.state.isInitialized,
114
183
  isHolding: this.state.isHolding,
115
184
  isMuted: this.state.isMuted,
116
185
  status: this.state.status,
186
+ callStartTime: this.state.callStartTime,
117
187
  controlPanelPosition: this.state.controlPanelPosition,
118
188
  iframePosition: this.state.iframePosition,
119
- callStartTime: this.state.callStartTime
189
+ callData: this.state.callData,
190
+ conferenceLine: this.state.conferenceLine
120
191
  };
121
192
  localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
122
193
  } catch (error) {
@@ -126,12 +197,14 @@ var SDKStateManager = class {
126
197
  notifyListeners() {
127
198
  this.listeners.forEach((listener) => listener());
128
199
  }
129
- initialize(apiKey) {
200
+ initialize(apiKey, agentId) {
130
201
  if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
131
202
  throw new Error("API key not available");
132
203
  }
133
204
  this.state.apiKey = apiKey;
205
+ this.state.agentId = agentId;
134
206
  this.state.isInitialized = true;
207
+ this.saveToStorage();
135
208
  this.notifyListeners();
136
209
  }
137
210
  getState() {
@@ -161,6 +234,11 @@ var SDKStateManager = class {
161
234
  this.saveToStorage();
162
235
  this.notifyListeners();
163
236
  }
237
+ setProcess(process) {
238
+ this.state.process = process;
239
+ this.saveToStorage();
240
+ this.notifyListeners();
241
+ }
164
242
  setControlPanelPosition(position) {
165
243
  this.state.controlPanelPosition = position;
166
244
  this.saveToStorage();
@@ -187,32 +265,67 @@ var SDKStateManager = class {
187
265
  }
188
266
  updateCallData(data) {
189
267
  this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
268
+ this.saveToStorage();
269
+ this.notifyListeners();
270
+ }
271
+ setConferenceLine(line) {
272
+ var _a;
273
+ if (!this.state.conferenceLine || !Array.isArray(this.state.conferenceLine)) {
274
+ console.warn("Conference line data corrupted, resetting to initial state");
275
+ this.state.conferenceLine = this.getInitialState().conferenceLine;
276
+ }
277
+ const conferenceLineData = (_a = this.state.conferenceLine) == null ? void 0 : _a.map((each) => {
278
+ if (each.line === line.line) {
279
+ return line;
280
+ }
281
+ return each;
282
+ });
283
+ this.state.conferenceLine = conferenceLineData;
284
+ this.saveToStorage();
285
+ this.notifyListeners();
286
+ }
287
+ resetConferenceLines() {
288
+ this.state.conferenceLine = this.getInitialState().conferenceLine;
289
+ this.saveToStorage();
190
290
  this.notifyListeners();
191
291
  }
292
+ clearStorageAndReset() {
293
+ try {
294
+ localStorage.removeItem(this.STORAGE_KEY);
295
+ this.state = this.getInitialState();
296
+ this.notifyListeners();
297
+ } catch (error) {
298
+ console.warn("Failed to clear localStorage:", error);
299
+ }
300
+ }
301
+ // Debug methods
302
+ debugStorage() {
303
+ try {
304
+ const stored = localStorage.getItem(this.STORAGE_KEY);
305
+ console.log("Current localStorage data:", stored);
306
+ if (stored) {
307
+ console.log("Parsed localStorage data:", JSON.parse(stored));
308
+ }
309
+ console.log("Current state:", this.state);
310
+ } catch (error) {
311
+ console.error("Error debugging storage:", error);
312
+ }
313
+ }
314
+ getConferenceLines() {
315
+ return this.state.conferenceLine || [];
316
+ }
192
317
  };
193
318
  var sdkStateManager = new SDKStateManager();
194
319
 
195
- // call-control-sdk/lib/hooks/useSDKState.ts
196
- function useSDKState() {
197
- const [state, setState] = (0, import_react.useState)(sdkStateManager.getState());
198
- (0, import_react.useEffect)(() => {
199
- const unsubscribe = sdkStateManager.subscribe(() => {
200
- setState(sdkStateManager.getState());
201
- });
202
- return unsubscribe;
203
- }, []);
204
- return state;
205
- }
206
-
207
320
  // call-control-sdk/lib/hooks/useDraggable.ts
208
- var import_react2 = require("react");
321
+ var import_react = require("react");
209
322
  function useDraggable(initialPosition, onPositionChange) {
210
- const [position, setPosition] = (0, import_react2.useState)(initialPosition);
211
- const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
212
- const dragRef = (0, import_react2.useRef)(null);
213
- const dragStart = (0, import_react2.useRef)({ x: 0, y: 0 });
214
- const elementStart = (0, import_react2.useRef)({ x: 0, y: 0 });
215
- const updatePosition = (0, import_react2.useCallback)(
323
+ const [position, setPosition] = (0, import_react.useState)(initialPosition);
324
+ const [isDragging, setIsDragging] = (0, import_react.useState)(false);
325
+ const dragRef = (0, import_react.useRef)();
326
+ const dragStart = (0, import_react.useRef)({ x: 0, y: 0 });
327
+ const elementStart = (0, import_react.useRef)({ x: 0, y: 0 });
328
+ const updatePosition = (0, import_react.useCallback)(
216
329
  (newPosition) => {
217
330
  const element = dragRef.current;
218
331
  if (!element) return;
@@ -228,7 +341,7 @@ function useDraggable(initialPosition, onPositionChange) {
228
341
  },
229
342
  [onPositionChange]
230
343
  );
231
- const handleStart = (0, import_react2.useCallback)(
344
+ const handleStart = (0, import_react.useCallback)(
232
345
  (clientX, clientY) => {
233
346
  setIsDragging(true);
234
347
  dragStart.current = { x: clientX, y: clientY };
@@ -268,14 +381,14 @@ function useDraggable(initialPosition, onPositionChange) {
268
381
  },
269
382
  [position, updatePosition]
270
383
  );
271
- const handleMouseDown = (0, import_react2.useCallback)(
384
+ const handleMouseDown = (0, import_react.useCallback)(
272
385
  (e) => {
273
386
  e.preventDefault();
274
387
  handleStart(e.clientX, e.clientY);
275
388
  },
276
389
  [handleStart]
277
390
  );
278
- const handleTouchStart = (0, import_react2.useCallback)(
391
+ const handleTouchStart = (0, import_react.useCallback)(
279
392
  (e) => {
280
393
  e.preventDefault();
281
394
  const touch = e.touches[0];
@@ -294,14 +407,22 @@ function useDraggable(initialPosition, onPositionChange) {
294
407
  };
295
408
  }
296
409
 
297
- // call-control-sdk/lib/services/request.ts
298
- var import_react4 = require("react");
299
-
300
- // call-control-sdk/lib/services/axios.ts
301
- var import_axios = __toESM(require("axios"));
410
+ // call-control-sdk/lib/hooks/useSDKState.ts
411
+ var import_react2 = require("react");
412
+ function useSDKState() {
413
+ const [state, setState] = (0, import_react2.useState)(sdkStateManager.getState());
414
+ (0, import_react2.useEffect)(() => {
415
+ const unsubscribe = sdkStateManager.subscribe(() => {
416
+ setState(sdkStateManager.getState());
417
+ });
418
+ return unsubscribe;
419
+ }, []);
420
+ return state;
421
+ }
302
422
 
303
423
  // call-control-sdk/lib/services/endPoint.ts
304
- var BASE_URL = "http://192.168.100.143:3010";
424
+ var BASE_URL = "http://192.168.100.143:8095";
425
+ var WS_BASE_URL = "ws://192.168.100.143:8095";
305
426
  var VERSION = {
306
427
  v1: "/api/v1"
307
428
  };
@@ -314,15 +435,26 @@ var END_POINT = {
314
435
  MUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/mute-call?provider=convox`,
315
436
  UNMUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/unmute-call?provider=convox`,
316
437
  END_CALL: `${BASE_URL}${VERSION.v1}/cti/end-call?provider=convox`,
317
- LOGOUT: `${BASE_URL}${VERSION.v1}/cti//logout?provider=convox`,
438
+ LOGOUT: `${BASE_URL}${VERSION.v1}/cti/logout?provider=convox`,
318
439
  CONFERENCE_CALL: `${BASE_URL}${VERSION.v1}/cti/conference-call?provider=convox`,
319
440
  CONFERENCE_CALL_HOLD_OR_UN_HOLD: `${BASE_URL}${VERSION.v1}/cti/conference-call/hold-unhold?provider=convox`,
320
441
  CONFERENCE_CALL_MUTE_OT_UN_MUTE: `${BASE_URL}${VERSION.v1}/cti/conference-call/mute-unmute?provider=convox`,
321
442
  CONFERENCE_CALL_END: `${BASE_URL}${VERSION.v1}/cti/conference-call/hangup?provider=convox`,
322
- TRANSFER_CALL: `${BASE_URL}${VERSION.v1}/cti/transfer?provider=convox`
443
+ CONFERENCE_CALL_END_ALL: `${BASE_URL}${VERSION.v1}/cti/conference-call/hangup-all-call?provider=convox`,
444
+ TRANSFER_CALL: `${BASE_URL}${VERSION.v1}/cti/transfer?provider=convox`,
445
+ AGENTS_LIST: `${BASE_URL}${VERSION.v1}/cti/users`,
446
+ PROCESS_LIST: `${BASE_URL}${VERSION.v1}/cti/processes-list`,
447
+ TRANSFER_TO_DETAILS: `${BASE_URL}${VERSION.v1}/cti/trasnfer-to-details?provider=convox`
448
+ };
449
+ var WS_END_POINT = {
450
+ WS: `${WS_BASE_URL}${VERSION.v1}/cti/ws`
323
451
  };
324
452
 
453
+ // call-control-sdk/lib/services/request.ts
454
+ var import_react4 = require("react");
455
+
325
456
  // call-control-sdk/lib/services/axios.ts
457
+ var import_axios = __toESM(require("axios"));
326
458
  var token = "12345";
327
459
  var axiosInstance = import_axios.default.create({
328
460
  baseURL: BASE_URL,
@@ -452,21 +584,11 @@ var usePostRequest = (props = {}) => {
452
584
  payload: true
453
585
  });
454
586
  axios_default.post(url, payload, config).then((res) => {
455
- var _a, _b;
456
- if ((_a = res.data) == null ? void 0 : _a.success) {
457
- dispatch({
458
- type: "isSuccess",
459
- payload: res.data
460
- });
461
- onSuccess == null ? void 0 : onSuccess(res.data, payload);
462
- } else {
463
- dispatch({
464
- type: "isError",
465
- payload: res.data
466
- });
467
- showToast((_b = res.data) == null ? void 0 : _b.message, "error");
468
- onError == null ? void 0 : onError(res.data, payload);
469
- }
587
+ dispatch({
588
+ type: "isSuccess",
589
+ payload: res.data
590
+ });
591
+ onSuccess == null ? void 0 : onSuccess(res.data, payload);
470
592
  }).catch((err) => {
471
593
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
472
594
  const error = {
@@ -498,32 +620,196 @@ var usePostRequest = (props = {}) => {
498
620
 
499
621
  // call-control-sdk/lib/components/dialog.tsx
500
622
  var import_icons_material = require("@mui/icons-material");
501
- var import_material2 = require("@mui/material");
623
+ var import_material3 = require("@mui/material");
502
624
  var import_react5 = require("react");
625
+
626
+ // call-control-sdk/lib/components/styles.ts
627
+ var import_material2 = require("@mui/material");
628
+ var useMyStyles = () => {
629
+ const theme = (0, import_material2.useTheme)();
630
+ return {
631
+ disabled: {
632
+ padding: "0px",
633
+ margin: "0px",
634
+ minWidth: "40px !important",
635
+ borderRadius: "16px",
636
+ border: `1px solid rgb(206, 204, 204)`,
637
+ height: "40px",
638
+ "&:hover": {
639
+ boxShadow: " 0px 2px 2px rgba(0, 0, 0, 0.79)",
640
+ border: `1px solid ${theme.palette.primary.main}`
641
+ },
642
+ "&:active": {
643
+ bgcolor: "primary.main",
644
+ boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
645
+ }
646
+ },
647
+ enabled: {
648
+ padding: "0px",
649
+ margin: "0px",
650
+ minWidth: "40px !important",
651
+ borderRadius: "16px",
652
+ boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
653
+ border: `1px solid ${theme.palette.primary.main}`,
654
+ height: "40px",
655
+ "&:hover": {
656
+ boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
657
+ border: `1px solid ${theme.palette.primary.main}`
658
+ },
659
+ "&:active": {
660
+ bgcolor: "primary.main",
661
+ boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
662
+ }
663
+ },
664
+ outlined: {
665
+ padding: "0px",
666
+ margin: "0px",
667
+ minWidth: "40px !important",
668
+ borderRadius: "16px",
669
+ backgroundColor: theme.palette.grey[200],
670
+ boxShadow: `0px 2px 1px ${theme.palette.primary.light}`,
671
+ border: `0px solid ${theme.palette.primary.main}`,
672
+ height: "40px",
673
+ "&:hover": {
674
+ boxShadow: `0px 2px 1px ${theme.palette.primary.main}`,
675
+ border: `0px solid ${theme.palette.primary.main}`
676
+ },
677
+ "&:active": {
678
+ bgcolor: "primary.main",
679
+ boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
680
+ }
681
+ }
682
+ };
683
+ };
684
+ var styles_default = useMyStyles;
685
+
686
+ // call-control-sdk/lib/components/dialog.tsx
503
687
  var import_jsx_runtime2 = require("react/jsx-runtime");
504
- function ConferenceDialog({
505
- agentName = "agent_ravi",
506
- lines = [],
507
- onConference,
508
- onExit,
509
- onEndAllCalls,
510
- open,
511
- setOpen
512
- }) {
688
+ function ConferenceDialog({ open, setOpen }) {
689
+ var _a, _b;
690
+ const state = useSDKState();
691
+ const { disabled, enabled, outlined } = styles_default();
692
+ const theme = (0, import_material3.useTheme)();
513
693
  const handleClose = () => {
514
694
  setOpen(false);
515
695
  };
696
+ const onConferenceLineUpdate = (line, data) => {
697
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
698
+ };
699
+ const onConferenceCallStart = (line, data) => {
700
+ var _a2, _b2, _c, _d;
701
+ const line_used = __spreadValues(__spreadValues({}, line), data);
702
+ const payload = {
703
+ action: "EXTERNAL_CONFERENCE",
704
+ operation: `CALL${line_used.line}`,
705
+ line_used: String(line_used.line),
706
+ thirdparty_no: line_used.phone,
707
+ userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
708
+ process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
709
+ };
710
+ axios_default.post(END_POINT.CONFERENCE_CALL, payload).then(() => {
711
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
712
+ });
713
+ };
714
+ const onMergeConferenceCall = (line, data) => {
715
+ var _a2, _b2, _c, _d;
716
+ const line_used = __spreadValues(__spreadValues({}, line), data);
717
+ const payload = {
718
+ action: "EXTERNAL_CONFERENCE",
719
+ operation: `CONFERENCE`,
720
+ line_used: String(line_used.line),
721
+ thirdparty_no: line_used.phone,
722
+ userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
723
+ process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
724
+ };
725
+ axios_default.post(END_POINT.CONFERENCE_CALL, payload).then(() => {
726
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
727
+ });
728
+ };
729
+ const onHoldOrUnHoldConferenceCall = (line, data, type) => {
730
+ var _a2, _b2, _c, _d;
731
+ const line_used = __spreadValues(__spreadValues({}, line), data);
732
+ const payload = {
733
+ action: "EXTERNAL_CONFERENCE",
734
+ operation: type,
735
+ hold_channel_no: type === "HOLDUSER" ? `hold${line_used.line}` : `unhold${line_used.line}`,
736
+ // Change the line according where u intiated firstly
737
+ userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
738
+ process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
739
+ };
740
+ axios_default.post(END_POINT.CONFERENCE_CALL_HOLD_OR_UN_HOLD, payload).then(() => {
741
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
742
+ });
743
+ };
744
+ const onMuteOrUnMuteConferenceCall = (line, data, type) => {
745
+ var _a2, _b2, _c, _d;
746
+ const line_used = __spreadValues(__spreadValues({}, line), data);
747
+ const payload = {
748
+ action: "EXTERNAL_CONFERENCE",
749
+ operation: type,
750
+ channel_no: type === "MUTEUSER" ? `mute${line_used.line}` : `play${line_used.line}`,
751
+ userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
752
+ thirdparty_no: line_used.phone,
753
+ process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
754
+ };
755
+ axios_default.post(END_POINT.CONFERENCE_CALL_MUTE_OT_UN_MUTE, payload).then(() => {
756
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
757
+ });
758
+ };
759
+ const onEndConferenceCall = (line, data) => {
760
+ var _a2, _b2, _c, _d;
761
+ const line_used = __spreadValues(__spreadValues({}, line), data);
762
+ const payload = {
763
+ action: "EXTERNAL_CONFERENCE",
764
+ operation: "HANGUP_CHANNEL",
765
+ line_used: String(line_used.line - 1),
766
+ user_type: `THIRDPARTY${line_used.line - 1}`,
767
+ thirdparty_no: line_used.phone,
768
+ userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
769
+ process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
770
+ };
771
+ axios_default.post(END_POINT.CONFERENCE_CALL_END, payload).then(() => {
772
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
773
+ });
774
+ };
775
+ const onEndAllConferenceCalls = () => {
776
+ var _a2, _b2, _c, _d;
777
+ const payload = {
778
+ action: "EXTERNAL_CONFERENCE",
779
+ operation: "ENDCONFERENCE",
780
+ userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
781
+ process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
782
+ };
783
+ axios_default.post(END_POINT.CONFERENCE_CALL_END_ALL, payload).then(() => {
784
+ sdkStateManager.resetConferenceLines();
785
+ handleClose();
786
+ });
787
+ };
788
+ (0, import_react5.useEffect)(() => {
789
+ var _a2, _b2, _c, _d;
790
+ const obj = {
791
+ line: 1,
792
+ status: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) != null ? _b2 : "",
793
+ type: "internal",
794
+ phone: (_d = (_c = state.callData) == null ? void 0 : _c.phone_number) != null ? _d : "",
795
+ isMute: false,
796
+ isHold: false,
797
+ isMergeCall: false,
798
+ isCallStart: true
799
+ };
800
+ sdkStateManager.setConferenceLine(obj);
801
+ }, []);
516
802
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
517
- import_material2.Dialog,
803
+ import_material3.Dialog,
518
804
  {
519
805
  open,
520
806
  "aria-labelledby": "alert-dialog-title",
521
807
  "aria-describedby": "alert-dialog-description",
522
808
  fullWidth: true,
523
809
  maxWidth: "md",
524
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Paper, { sx: { borderRadius: 2 }, children: [
810
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
525
811
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
526
- import_material2.Box,
812
+ import_material3.Box,
527
813
  {
528
814
  sx: {
529
815
  display: "flex",
@@ -532,276 +818,375 @@ function ConferenceDialog({
532
818
  padding: "4px 16px"
533
819
  },
534
820
  children: [
535
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { variant: "body1", children: [
536
- agentName,
537
- " Conference"
821
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { variant: "body1", children: [
822
+ (_a = state == null ? void 0 : state.agentId) != null ? _a : "",
823
+ " conference"
538
824
  ] }),
539
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
825
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
540
826
  ]
541
827
  }
542
828
  ),
543
829
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
544
- import_material2.Stack,
545
- {
546
- direction: "row",
547
- alignItems: "center",
548
- justifyContent: "flex-end",
549
- mr: 2,
550
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
551
- import_material2.Stack,
552
- {
553
- display: "flex",
554
- direction: "row",
555
- alignItems: "center",
556
- justifyContent: "center",
557
- spacing: 1,
558
- children: [
559
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
560
- import_material2.Button,
561
- {
562
- variant: "contained",
563
- color: "success",
564
- onClick: onConference,
565
- sx: {
566
- borderRadius: "10px",
567
- textTransform: "capitalize"
568
- },
569
- children: [
570
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Group, { sx: { px: 0.5 } }),
571
- "Conference"
572
- ]
573
- }
574
- ),
575
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
576
- import_material2.Button,
577
- {
578
- variant: "contained",
579
- color: "error",
580
- onClick: onExit,
581
- sx: {
582
- borderRadius: "10px",
583
- textTransform: "capitalize"
584
- },
585
- children: [
586
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Logout, { sx: { px: 0.5 } }),
587
- "Exit Conference"
588
- ]
589
- }
590
- )
591
- ]
592
- }
593
- )
594
- }
595
- ),
596
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
597
- import_material2.Box,
830
+ import_material3.Box,
598
831
  {
599
832
  sx: {
600
833
  boxShadow: "0px 1px 2px #e7e5e5ff",
601
- padding: "6px",
834
+ padding: "2px 6px",
602
835
  margin: "0px 10px",
603
836
  borderRadius: "20px"
604
837
  },
605
- children: lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
606
- import_material2.Box,
607
- {
608
- sx: {
609
- p: 1,
610
- display: "flex",
611
- alignItems: "center",
612
- justifyContent: "space-between",
613
- gap: 1
614
- },
615
- children: [
616
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
617
- import_material2.Box,
618
- {
619
- sx: {
620
- color: "white",
621
- bgcolor: "warning.main",
622
- fontWeight: "bold",
623
- fontSize: 14,
624
- minWidth: 70,
625
- textAlign: "center",
626
- border: "2px solid primary.main",
627
- borderRadius: "10px 50px 50px 10px"
628
- },
629
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { children: [
630
- "Line ",
631
- index + 1
632
- ] })
633
- }
634
- ),
635
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
636
- import_material2.Typography,
637
- {
638
- variant: "body2",
639
- sx: {
640
- px: 1,
641
- border: "2px solid gray",
642
- borderRadius: "10px",
643
- textAlign: "center",
644
- width: "80px",
645
- maxWidth: "100px"
646
- },
647
- children: line.status
648
- }
649
- ),
650
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { display: "flex", alignItems: "center", children: [
651
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: line.type === "Internal" }),
652
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "Internal" })
653
- ] }),
654
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { display: "flex", alignItems: "center", children: [
655
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: line.type === "External" }),
656
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "External" })
657
- ] }),
658
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
659
- import_material2.TextField,
660
- {
661
- size: "small",
662
- placeholder: "Phone Number",
663
- value: line.phone || ""
664
- }
665
- ),
666
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
667
- import_material2.IconButton,
668
- {
669
- color: "success",
670
- sx: {
671
- bgcolor: "action.hover",
672
- "&:hover": { bgcolor: "action.selected" }
673
- },
674
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
675
- }
676
- ),
677
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
678
- import_material2.IconButton,
679
- {
680
- color: "info",
681
- sx: {
682
- bgcolor: "action.hover",
683
- "&:hover": { bgcolor: "action.selected" }
684
- },
685
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
686
- }
687
- ),
688
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
689
- import_material2.IconButton,
690
- {
691
- color: "warning",
692
- sx: {
693
- bgcolor: "action.hover",
694
- "&:hover": { bgcolor: "action.selected" }
695
- },
696
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PauseCircle, {})
697
- }
698
- ),
699
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
700
- import_material2.IconButton,
701
- {
702
- color: "error",
703
- sx: {
704
- bgcolor: "action.hover",
705
- "&:hover": { bgcolor: "action.selected" }
706
- },
707
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
708
- }
709
- )
710
- ]
711
- },
712
- index
713
- ))
714
- }
715
- ),
716
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
717
- import_material2.Button,
718
- {
719
- variant: "outlined",
720
- color: "error",
721
- size: "large",
722
- onClick: onEndAllCalls,
723
- sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
724
- children: [
725
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
726
- import_material2.IconButton,
838
+ children: (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.map((each, index) => {
839
+ var _a2, _b2;
840
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
841
+ import_material3.Box,
727
842
  {
728
843
  sx: {
729
- bgcolor: "error.main",
730
- "&:hover": { bgcolor: "error.dark" },
731
- marginRight: "8px",
732
- width: "28px",
733
- height: "28px",
734
- fontSize: "12px",
735
- fontWeight: "600",
736
- lineHeight: "16px",
737
- letterSpacing: "0.02em",
738
- textTransform: "capitalize",
739
- color: "white",
844
+ p: 1,
740
845
  display: "flex",
741
846
  alignItems: "center",
742
- justifyContent: "center",
743
- borderRadius: "50%"
847
+ justifyContent: "space-between",
848
+ gap: 1
744
849
  },
745
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
746
- import_icons_material.PhoneDisabled,
747
- {
748
- sx: {
749
- color: "white",
750
- fontSize: "16px",
751
- fontWeight: "600"
850
+ children: [
851
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
852
+ import_material3.Box,
853
+ {
854
+ sx: {
855
+ color: "white",
856
+ bgcolor: "warning.main",
857
+ fontWeight: "bold",
858
+ fontSize: 14,
859
+ minWidth: 70,
860
+ textAlign: "center",
861
+ border: "2px solid primary.main",
862
+ borderRadius: "10px 50px 50px 10px"
863
+ },
864
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { children: (_a2 = each == null ? void 0 : each.line) != null ? _a2 : "" })
752
865
  }
753
- }
754
- )
755
- }
756
- ),
757
- "End Calls"
758
- ]
759
- }
760
- ) })
761
- ] })
762
- }
763
- ) });
764
- }
765
- function CallTransferDialog({ open, setOpen }) {
766
- const [transferCall] = usePostRequest();
767
- const agentList = [
768
- { name: "agent_ravi", status: "IDLE" },
769
- { name: "rajesh", status: "IDLE" },
770
- { name: "sudheer", status: "IDLE" },
771
- { name: "test_user", status: "IDLE" }
772
- ];
773
- const handleClose = () => {
774
- setOpen(false);
775
- };
776
- const handleTransferCall = () => {
777
- const payload = {
778
- action: "CALL",
779
- endcall_type: "",
780
- mobile_number: "",
781
- userid: "",
782
- type: "",
783
- transfer_to_agent_id: "",
784
- transfer_to: "",
785
- disposition: "",
786
- set_followUp: "",
787
- callreferenceid: "",
788
- processid: "",
789
- process_name: "",
790
- refno: "",
791
- transfer_to_queue: ""
792
- };
793
- transferCall(END_POINT.TRANSFER_CALL, payload);
794
- };
795
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
796
- import_material2.Dialog,
797
- {
798
- open,
866
+ ),
867
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
868
+ import_material3.Typography,
869
+ {
870
+ variant: "body2",
871
+ sx: {
872
+ px: 1,
873
+ border: "2px solid gray",
874
+ borderRadius: "10px",
875
+ textAlign: "center",
876
+ width: "80px",
877
+ maxWidth: "100px"
878
+ },
879
+ children: (_b2 = each == null ? void 0 : each.status) != null ? _b2 : ""
880
+ }
881
+ ),
882
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
883
+ import_material3.Button,
884
+ {
885
+ sx: {
886
+ textTransform: "capitalize"
887
+ },
888
+ size: "small",
889
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body2", children: (each == null ? void 0 : each.line) === 1 ? "Internal" : "External" })
890
+ }
891
+ ),
892
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
893
+ import_material3.TextField,
894
+ {
895
+ size: "small",
896
+ placeholder: "Phone Number",
897
+ value: (each == null ? void 0 : each.phone) || "",
898
+ disabled: (each == null ? void 0 : each.line) === 1,
899
+ onChange: (e) => {
900
+ onConferenceLineUpdate(each, { phone: e.target.value });
901
+ }
902
+ }
903
+ ),
904
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
905
+ import_material3.Button,
906
+ {
907
+ variant: (each == null ? void 0 : each.isCallStart) ? "outlined" : "contained",
908
+ color: "success",
909
+ sx: (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : __spreadProps(__spreadValues({}, enabled), {
910
+ border: `0px solid ${theme.palette.success.light}`,
911
+ "&:hover": {
912
+ bgcolor: "error.light",
913
+ boxShadow: `0px 2px 1px ${theme.palette.success.light}`,
914
+ border: `0px solid ${theme.palette.success.light}`
915
+ },
916
+ "&:active": {
917
+ bgcolor: "error.light",
918
+ boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
919
+ }
920
+ }),
921
+ onClick: () => {
922
+ onConferenceCallStart(each, {
923
+ isCallStart: true,
924
+ status: "ONCALL"
925
+ });
926
+ },
927
+ disabled: each == null ? void 0 : each.isCallStart,
928
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
929
+ import_icons_material.Call,
930
+ {
931
+ sx: { color: (each == null ? void 0 : each.isCallStart) ? "defalult" : "#fff" }
932
+ }
933
+ )
934
+ }
935
+ ) }),
936
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
937
+ import_material3.Button,
938
+ {
939
+ variant: (each == null ? void 0 : each.isMergeCall) ? "contained" : "outlined",
940
+ sx: (each == null ? void 0 : each.isMergeCall) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
941
+ onClick: () => {
942
+ onMergeConferenceCall(each, {
943
+ isMergeCall: true,
944
+ status: "ONCALL"
945
+ });
946
+ },
947
+ disabled: !(each == null ? void 0 : each.isCallStart),
948
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
949
+ }
950
+ ) }),
951
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: each.isHold ? "Hold" : "Un Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
952
+ import_material3.Button,
953
+ {
954
+ variant: (each == null ? void 0 : each.isHold) ? "contained" : "outlined",
955
+ sx: (each == null ? void 0 : each.isHold) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
956
+ onClick: () => {
957
+ if (each.isHold) {
958
+ onHoldOrUnHoldConferenceCall(
959
+ each,
960
+ { isHold: false },
961
+ "UNHOLDUSER"
962
+ );
963
+ } else {
964
+ onHoldOrUnHoldConferenceCall(
965
+ each,
966
+ { isHold: true },
967
+ "HOLDUSER"
968
+ );
969
+ }
970
+ },
971
+ disabled: !(each == null ? void 0 : each.isCallStart),
972
+ children: each.isHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Pause, {})
973
+ }
974
+ ) }),
975
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: each.isMute ? "Mute" : "Un Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
976
+ import_material3.Button,
977
+ {
978
+ variant: (each == null ? void 0 : each.isMute) ? "contained" : "outlined",
979
+ sx: (each == null ? void 0 : each.isMute) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
980
+ onClick: () => {
981
+ if (each.isMute) {
982
+ onMuteOrUnMuteConferenceCall(
983
+ each,
984
+ { isMute: false },
985
+ "PLAYUSER"
986
+ );
987
+ } else {
988
+ onMuteOrUnMuteConferenceCall(
989
+ each,
990
+ { isMute: true },
991
+ "MUTEUSER"
992
+ );
993
+ }
994
+ },
995
+ disabled: !(each == null ? void 0 : each.isCallStart),
996
+ children: each.isMute ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Mic, {})
997
+ }
998
+ ) }),
999
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "End Call", children: (each == null ? void 0 : each.line) !== 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1000
+ import_material3.Button,
1001
+ {
1002
+ variant: (each == null ? void 0 : each.isCallStart) ? "contained" : "outlined",
1003
+ color: "error",
1004
+ sx: (each == null ? void 0 : each.isCallStart) ? __spreadProps(__spreadValues({}, enabled), {
1005
+ minWidth: "60px !important",
1006
+ border: `0px solid ${theme.palette.error.light}`,
1007
+ "&:hover": {
1008
+ bgcolor: "error.light",
1009
+ boxShadow: `0px 2px 1px ${theme.palette.error.light}`,
1010
+ border: `0px solid ${theme.palette.error.light}`
1011
+ },
1012
+ "&:active": {
1013
+ bgcolor: "error.light",
1014
+ boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
1015
+ }
1016
+ }) : __spreadProps(__spreadValues({}, disabled), { minWidth: "60px !important" }),
1017
+ onClick: () => {
1018
+ onEndConferenceCall(each, {
1019
+ isCallStart: false,
1020
+ isMergeCall: false,
1021
+ isMute: false,
1022
+ isHold: false,
1023
+ status: "IDLE"
1024
+ });
1025
+ },
1026
+ disabled: !(each == null ? void 0 : each.isCallStart),
1027
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
1028
+ }
1029
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1030
+ import_material3.Button,
1031
+ {
1032
+ variant: (each == null ? void 0 : each.isCallStart) ? "contained" : "outlined",
1033
+ sx: __spreadProps(__spreadValues({}, disabled), {
1034
+ visibility: "hidden",
1035
+ minWidth: "60px !important"
1036
+ }),
1037
+ onClick: () => {
1038
+ onEndConferenceCall(each, {
1039
+ isCallStart: false,
1040
+ isMergeCall: false,
1041
+ isMute: false,
1042
+ isHold: false,
1043
+ status: "IDLE"
1044
+ });
1045
+ },
1046
+ disabled: !(each == null ? void 0 : each.isCallStart),
1047
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1048
+ import_icons_material.CallEnd,
1049
+ {
1050
+ sx: {
1051
+ visibility: "hidden"
1052
+ }
1053
+ }
1054
+ ) })
1055
+ }
1056
+ ) })
1057
+ ]
1058
+ },
1059
+ index
1060
+ );
1061
+ })
1062
+ }
1063
+ ),
1064
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1065
+ import_material3.Button,
1066
+ {
1067
+ variant: "outlined",
1068
+ color: "error",
1069
+ size: "large",
1070
+ onClick: onEndAllConferenceCalls,
1071
+ sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
1072
+ children: [
1073
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1074
+ import_material3.IconButton,
1075
+ {
1076
+ sx: {
1077
+ bgcolor: "error.main",
1078
+ "&:hover": { bgcolor: "error.dark" },
1079
+ marginRight: "8px",
1080
+ width: "28px",
1081
+ height: "28px",
1082
+ fontSize: "12px",
1083
+ fontWeight: "600",
1084
+ lineHeight: "16px",
1085
+ letterSpacing: "0.02em",
1086
+ textTransform: "capitalize",
1087
+ color: "white",
1088
+ display: "flex",
1089
+ alignItems: "center",
1090
+ justifyContent: "center",
1091
+ borderRadius: "50%"
1092
+ },
1093
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1094
+ import_icons_material.PhoneDisabled,
1095
+ {
1096
+ sx: {
1097
+ color: "white",
1098
+ fontSize: "16px",
1099
+ fontWeight: "600"
1100
+ }
1101
+ }
1102
+ )
1103
+ }
1104
+ ),
1105
+ "End Conference"
1106
+ ]
1107
+ }
1108
+ ) })
1109
+ ] })
1110
+ }
1111
+ ) });
1112
+ }
1113
+ function CallTransferDialog({ open, setOpen }) {
1114
+ var _a, _b, _c, _d, _e, _f, _g, _h;
1115
+ const [transferCall] = usePostRequest({
1116
+ onSuccess: (res) => {
1117
+ console.log("res", res);
1118
+ setOpen(false);
1119
+ },
1120
+ onError: (error) => {
1121
+ console.log("error", error);
1122
+ }
1123
+ });
1124
+ const state = useSDKState();
1125
+ const [currentselecteTab, setCurrentselecteTab] = (0, import_react5.useState)("process");
1126
+ const [getIdelAgentsList, { data: idleAgentsList }] = usePostRequest();
1127
+ const [getProcessAndQueuesList, { data: processAndQueuesList }] = usePostRequest();
1128
+ const handleClose = () => {
1129
+ setOpen(false);
1130
+ };
1131
+ const handleTransferCall = (data, type) => {
1132
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G;
1133
+ console.log(data, "data34");
1134
+ if (type === "PROCESS") {
1135
+ const payload = {
1136
+ mobile_number: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.phone_number) != null ? _b2 : "",
1137
+ userid: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.agent_id) != null ? _d2 : "",
1138
+ type: "PROCESS",
1139
+ transfer_to: (_e2 = data == null ? void 0 : data.process_name) != null ? _e2 : "",
1140
+ callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
1141
+ processid: String((_i = (_h2 = state.callData) == null ? void 0 : _h2.process_id) != null ? _i : ""),
1142
+ process_name: (_k = (_j = state.callData) == null ? void 0 : _j.process_name) != null ? _k : ""
1143
+ };
1144
+ transferCall(END_POINT.TRANSFER_CALL, payload);
1145
+ } else if (type === "QUEUE") {
1146
+ const payload = {
1147
+ mobile_number: (_m = (_l = state.callData) == null ? void 0 : _l.phone_number) != null ? _m : "",
1148
+ userid: (_o = (_n = state.callData) == null ? void 0 : _n.agent_id) != null ? _o : "",
1149
+ type: "QUEUE",
1150
+ transfer_to: (_p = data == null ? void 0 : data.queue_name) != null ? _p : "",
1151
+ callreferenceid: (_r = (_q = state.callData) == null ? void 0 : _q.convox_id) != null ? _r : "",
1152
+ processid: String((_t = (_s = state.callData) == null ? void 0 : _s.process_id) != null ? _t : ""),
1153
+ process_name: (_v = (_u = state.callData) == null ? void 0 : _u.process_name) != null ? _v : ""
1154
+ };
1155
+ transferCall(END_POINT.TRANSFER_CALL, payload);
1156
+ } else if (type === "AGENT") {
1157
+ const payload = {
1158
+ mobile_number: (_x = (_w = state.callData) == null ? void 0 : _w.phone_number) != null ? _x : "",
1159
+ userid: (_z = (_y = state.callData) == null ? void 0 : _y.agent_id) != null ? _z : "",
1160
+ type: "AGENT",
1161
+ transfer_to: (_A = data == null ? void 0 : data.user_id) != null ? _A : "",
1162
+ callreferenceid: (_C = (_B = state.callData) == null ? void 0 : _B.convox_id) != null ? _C : "",
1163
+ processid: String((_E = (_D = state.callData) == null ? void 0 : _D.process_id) != null ? _E : ""),
1164
+ process_name: (_G = (_F = state.callData) == null ? void 0 : _F.process_name) != null ? _G : ""
1165
+ };
1166
+ transferCall(END_POINT.TRANSFER_CALL, payload);
1167
+ }
1168
+ };
1169
+ (0, import_react5.useEffect)(() => {
1170
+ getIdelAgentsList(END_POINT.AGENTS_LIST, {
1171
+ status: "IDLE",
1172
+ active: true
1173
+ });
1174
+ getProcessAndQueuesList(END_POINT.TRANSFER_TO_DETAILS, {
1175
+ status: "ACTIVE",
1176
+ active: true
1177
+ });
1178
+ }, []);
1179
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1180
+ import_material3.Dialog,
1181
+ {
1182
+ open,
799
1183
  "aria-labelledby": "alert-dialog-title",
800
1184
  "aria-describedby": "alert-dialog-description",
801
- maxWidth: "xs",
802
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Paper, { sx: { borderRadius: 2 }, children: [
1185
+ fullWidth: true,
1186
+ maxWidth: "md",
1187
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
803
1188
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
804
- import_material2.Box,
1189
+ import_material3.Box,
805
1190
  {
806
1191
  sx: {
807
1192
  display: "flex",
@@ -811,13 +1196,13 @@ function CallTransferDialog({ open, setOpen }) {
811
1196
  boxShadow: "0px 1px 2px #f5f5f5ff"
812
1197
  },
813
1198
  children: [
814
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body1", children: " Call Transfer" }),
815
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
1199
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call Transfer" }),
1200
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
816
1201
  ]
817
1202
  }
818
1203
  ),
819
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
820
- import_material2.Box,
1204
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1205
+ import_material3.Box,
821
1206
  {
822
1207
  sx: {
823
1208
  boxShadow: "1px 1px 4px #d3d3d3ff",
@@ -825,55 +1210,254 @@ function CallTransferDialog({ open, setOpen }) {
825
1210
  margin: "10px",
826
1211
  borderRadius: "10px"
827
1212
  },
828
- children: agentList.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
829
- import_material2.Box,
830
- {
831
- sx: {
832
- p: 1,
833
- display: "flex",
834
- alignItems: "center",
835
- boxShadow: "1px 1px 4px #d3d3d3ff",
836
- padding: "6px",
837
- margin: "10px 0px",
838
- borderRadius: "10px",
839
- "&:hover": { bgcolor: "action.selected" }
840
- },
841
- children: [
842
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
843
- import_material2.Typography,
1213
+ children: [
1214
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: [
1215
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1216
+ import_material3.Button,
1217
+ {
1218
+ variant: currentselecteTab === "process" ? "contained" : "outlined",
1219
+ onClick: () => setCurrentselecteTab("process"),
1220
+ children: "Process"
1221
+ }
1222
+ ),
1223
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1224
+ import_material3.Button,
1225
+ {
1226
+ variant: currentselecteTab === "queues" ? "contained" : "outlined",
1227
+ onClick: () => setCurrentselecteTab("queues"),
1228
+ children: "Queues"
1229
+ }
1230
+ ),
1231
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1232
+ import_material3.Button,
1233
+ {
1234
+ variant: currentselecteTab === "agents" ? "contained" : "outlined",
1235
+ onClick: () => setCurrentselecteTab("agents"),
1236
+ children: "Agents"
1237
+ }
1238
+ )
1239
+ ] }),
1240
+ currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: ((_b = (_a = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a.process) == null ? void 0 : _b.length) > 0 ? (_d = (_c = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _c.process) == null ? void 0 : _d.map(
1241
+ (process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1242
+ import_material3.Box,
1243
+ {
1244
+ sx: {
1245
+ p: 1,
1246
+ display: "flex",
1247
+ alignItems: "center",
1248
+ boxShadow: "1px 1px 4px #d3d3d3ff",
1249
+ padding: "6px",
1250
+ margin: "10px 0px",
1251
+ borderRadius: "10px",
1252
+ "&:hover": { bgcolor: "action.selected" }
1253
+ },
1254
+ children: [
1255
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1256
+ import_material3.Typography,
1257
+ {
1258
+ variant: "body1",
1259
+ sx: {
1260
+ mx: 1,
1261
+ width: "200px",
1262
+ maxWidth: "250px",
1263
+ display: "flex",
1264
+ alignItems: "center"
1265
+ },
1266
+ children: [
1267
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
1268
+ process.process_name
1269
+ ]
1270
+ }
1271
+ ),
1272
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1273
+ import_material3.IconButton,
1274
+ {
1275
+ color: "success",
1276
+ sx: {
1277
+ bgcolor: "action.hover",
1278
+ "&:hover": { bgcolor: "action.selected" }
1279
+ },
1280
+ onClick: () => {
1281
+ handleTransferCall(process, "PROCESS");
1282
+ },
1283
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
1284
+ }
1285
+ )
1286
+ ]
1287
+ },
1288
+ index
1289
+ )
1290
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1291
+ import_material3.Typography,
1292
+ {
1293
+ variant: "body1",
1294
+ sx: {
1295
+ fontSize: "12px",
1296
+ fontWeight: "600",
1297
+ letterSpacing: "0.02em",
1298
+ textTransform: "capitalize",
1299
+ textAlign: "center",
1300
+ width: "100%",
1301
+ margin: "10px 0px",
1302
+ color: "gray"
1303
+ },
1304
+ children: "No Process Found"
1305
+ }
1306
+ ) }),
1307
+ currentselecteTab === "queues" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: ((_f = (_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.queue) == null ? void 0 : _f.length) > 0 ? (_h = (_g = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _g.queue) == null ? void 0 : _h.map(
1308
+ (queue, index) => {
1309
+ var _a2, _b2, _c2, _d2, _e2, _f2;
1310
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1311
+ import_material3.Box,
844
1312
  {
845
- variant: "body1",
846
1313
  sx: {
847
- mx: 1,
848
- width: "200px",
849
- maxWidth: "250px",
1314
+ p: 1,
850
1315
  display: "flex",
851
- alignItems: "center"
1316
+ alignItems: "center",
1317
+ boxShadow: "1px 1px 4px #d3d3d3ff",
1318
+ padding: "6px",
1319
+ margin: "10px 0px",
1320
+ borderRadius: "10px",
1321
+ "&:hover": { bgcolor: "action.selected" }
852
1322
  },
853
1323
  children: [
854
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
855
- line.name
1324
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1325
+ import_material3.Typography,
1326
+ {
1327
+ variant: "body1",
1328
+ sx: {
1329
+ mx: 1,
1330
+ width: "200px",
1331
+ maxWidth: "250px",
1332
+ display: "flex",
1333
+ alignItems: "center"
1334
+ },
1335
+ children: [
1336
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
1337
+ queue.queue_name,
1338
+ ((_c2 = (_b2 = (_a2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a2.process) == null ? void 0 : _b2.find(
1339
+ (process) => process.process_id === queue.process_id
1340
+ )) == null ? void 0 : _c2.process_name) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1341
+ import_material3.Typography,
1342
+ {
1343
+ variant: "body1",
1344
+ sx: {
1345
+ fontSize: "12px",
1346
+ fontWeight: "600",
1347
+ letterSpacing: "0.02em",
1348
+ textTransform: "capitalize",
1349
+ color: "gray"
1350
+ },
1351
+ children: "(" + ((_f2 = (_e2 = (_d2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d2.process) == null ? void 0 : _e2.find(
1352
+ (process) => process.process_id === queue.process_id
1353
+ )) == null ? void 0 : _f2.process_name) + ")"
1354
+ }
1355
+ ) : ""
1356
+ ]
1357
+ }
1358
+ ),
1359
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1360
+ import_material3.IconButton,
1361
+ {
1362
+ color: "success",
1363
+ sx: {
1364
+ bgcolor: "action.hover",
1365
+ "&:hover": { bgcolor: "action.selected" }
1366
+ },
1367
+ onClick: () => {
1368
+ handleTransferCall(queue, "QUEUE");
1369
+ },
1370
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
1371
+ }
1372
+ )
856
1373
  ]
857
- }
858
- ),
859
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
860
- import_material2.IconButton,
861
- {
862
- color: "success",
863
- sx: {
864
- bgcolor: "action.hover",
865
- "&:hover": { bgcolor: "action.selected" }
866
- },
867
- onClick: () => {
868
- handleTransferCall();
869
- },
870
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
871
- }
872
- )
873
- ]
874
- },
875
- index
876
- ))
1374
+ },
1375
+ index
1376
+ );
1377
+ }
1378
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1379
+ import_material3.Typography,
1380
+ {
1381
+ variant: "body1",
1382
+ sx: {
1383
+ fontSize: "12px",
1384
+ fontWeight: "600",
1385
+ letterSpacing: "0.02em",
1386
+ textTransform: "capitalize",
1387
+ textAlign: "center",
1388
+ width: "100%",
1389
+ margin: "10px 0px",
1390
+ color: "gray"
1391
+ },
1392
+ children: "No Queues Found"
1393
+ }
1394
+ ) }),
1395
+ currentselecteTab === "agents" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: (idleAgentsList == null ? void 0 : idleAgentsList.length) > 0 ? idleAgentsList.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1396
+ import_material3.Box,
1397
+ {
1398
+ sx: {
1399
+ p: 1,
1400
+ display: "flex",
1401
+ alignItems: "center",
1402
+ boxShadow: "1px 1px 4px #d3d3d3ff",
1403
+ padding: "6px",
1404
+ margin: "10px 0px",
1405
+ borderRadius: "10px",
1406
+ "&:hover": { bgcolor: "action.selected" }
1407
+ },
1408
+ children: [
1409
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1410
+ import_material3.Typography,
1411
+ {
1412
+ variant: "body1",
1413
+ sx: {
1414
+ mx: 1,
1415
+ width: "200px",
1416
+ maxWidth: "250px",
1417
+ display: "flex",
1418
+ alignItems: "center"
1419
+ },
1420
+ children: [
1421
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
1422
+ agent.name
1423
+ ]
1424
+ }
1425
+ ),
1426
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1427
+ import_material3.IconButton,
1428
+ {
1429
+ color: "success",
1430
+ sx: {
1431
+ bgcolor: "action.hover",
1432
+ "&:hover": { bgcolor: "action.selected" }
1433
+ },
1434
+ onClick: () => {
1435
+ handleTransferCall(agent, "AGENT");
1436
+ },
1437
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
1438
+ }
1439
+ )
1440
+ ]
1441
+ },
1442
+ index
1443
+ )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1444
+ import_material3.Typography,
1445
+ {
1446
+ variant: "body1",
1447
+ sx: {
1448
+ fontSize: "12px",
1449
+ fontWeight: "600",
1450
+ letterSpacing: "0.02em",
1451
+ textTransform: "capitalize",
1452
+ textAlign: "center",
1453
+ width: "100%",
1454
+ margin: "10px 0px",
1455
+ color: "gray"
1456
+ },
1457
+ children: "No Agents Found"
1458
+ }
1459
+ ) })
1460
+ ]
877
1461
  }
878
1462
  )
879
1463
  ] })
@@ -885,27 +1469,29 @@ function EndCallDispositionDialog({
885
1469
  setOpen,
886
1470
  onSubmitDisposition
887
1471
  }) {
1472
+ var _a, _b;
888
1473
  const [formData, setFormData] = (0, import_react5.useState)({
889
- disposition: null,
890
- followUp: { label: "no" },
1474
+ disposition: { label: "Resolved", value: "RES" },
1475
+ followUp: { label: "No", value: "N" },
891
1476
  callbackDate: "",
892
1477
  callbackHrs: "",
893
1478
  callbackMins: ""
894
1479
  });
895
1480
  const dispositionOptions = [
896
- { label: "Interested" },
897
- { label: "Not Interested" },
898
- { label: "Callback Later" },
899
- { label: "Wrong Number" }
1481
+ { label: "Not Interested", value: "NI" },
1482
+ { label: "Resolved", value: "RES" }
1483
+ ];
1484
+ const followUpOptions = [
1485
+ { label: "Yes", value: "Y" },
1486
+ { label: "No", value: "N" }
900
1487
  ];
901
- const followUpOptions = [{ label: "yes" }, { label: "no" }];
902
1488
  const handleChange = (field, value) => {
903
1489
  setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [field]: value }));
904
1490
  };
905
1491
  const handleReset = () => {
906
1492
  setFormData({
907
- disposition: null,
908
- followUp: { label: "no" },
1493
+ disposition: { label: "Resolved", value: "RES" },
1494
+ followUp: { label: "No", value: "N" },
909
1495
  callbackDate: "",
910
1496
  callbackHrs: "",
911
1497
  callbackMins: ""
@@ -916,16 +1502,16 @@ function EndCallDispositionDialog({
916
1502
  setOpen(false);
917
1503
  };
918
1504
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
919
- import_material2.Dialog,
1505
+ import_material3.Dialog,
920
1506
  {
921
1507
  open,
922
1508
  "aria-labelledby": "alert-dialog-title",
923
1509
  "aria-describedby": "alert-dialog-description",
924
1510
  fullWidth: true,
925
1511
  maxWidth: "xs",
926
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Paper, { sx: { borderRadius: 2 }, children: [
1512
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
927
1513
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
928
- import_material2.Box,
1514
+ import_material3.Box,
929
1515
  {
930
1516
  sx: {
931
1517
  display: "flex",
@@ -934,14 +1520,14 @@ function EndCallDispositionDialog({
934
1520
  padding: "4px 16px",
935
1521
  boxShadow: "0px 1px 2px #f5f5f5ff"
936
1522
  },
937
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { variant: "body1", m: 1, children: [
1523
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { variant: "body1", m: 1, children: [
938
1524
  " ",
939
1525
  "Call Disposition"
940
1526
  ] })
941
1527
  }
942
1528
  ),
943
1529
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
944
- import_material2.Box,
1530
+ import_material3.Box,
945
1531
  {
946
1532
  sx: {
947
1533
  boxShadow: "1px 1px 4px #d3d3d3ff",
@@ -949,32 +1535,32 @@ function EndCallDispositionDialog({
949
1535
  margin: "10px",
950
1536
  borderRadius: "10px"
951
1537
  },
952
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Grid, { container: true, spacing: 2, children: [
953
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
954
- import_material2.Autocomplete,
1538
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Grid, { container: true, spacing: 2, children: [
1539
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1540
+ import_material3.Autocomplete,
955
1541
  {
956
1542
  value: formData.disposition,
957
1543
  options: dispositionOptions,
958
1544
  getOptionLabel: (opt) => opt.label,
959
1545
  onChange: (_, val) => handleChange("disposition", val),
960
1546
  size: "small",
961
- renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TextField, __spreadProps(__spreadValues({}, params), { label: "Disposition", fullWidth: true }))
1547
+ renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TextField, __spreadProps(__spreadValues({}, params), { label: "Disposition", fullWidth: true }))
962
1548
  }
963
1549
  ) }),
964
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
965
- import_material2.Autocomplete,
1550
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1551
+ import_material3.Autocomplete,
966
1552
  {
967
1553
  options: followUpOptions,
968
1554
  getOptionLabel: (opt) => opt.label,
969
1555
  value: formData.followUp,
970
1556
  onChange: (_, val) => handleChange("followUp", val),
971
1557
  size: "small",
972
- renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TextField, __spreadProps(__spreadValues({}, params), { label: "Follow Up", fullWidth: true }))
1558
+ renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TextField, __spreadProps(__spreadValues({}, params), { label: "Follow Up", fullWidth: true }))
973
1559
  }
974
1560
  ) }),
975
- formData.followUp.label === "yes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
976
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
977
- import_material2.TextField,
1561
+ ((_b = (_a = formData == null ? void 0 : formData.followUp) == null ? void 0 : _a.label) == null ? void 0 : _b.toLowerCase()) === "yes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
1562
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1563
+ import_material3.TextField,
978
1564
  {
979
1565
  size: "small",
980
1566
  label: "Callback Date",
@@ -987,8 +1573,8 @@ function EndCallDispositionDialog({
987
1573
  fullWidth: true
988
1574
  }
989
1575
  ) }),
990
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
991
- import_material2.TextField,
1576
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1577
+ import_material3.TextField,
992
1578
  {
993
1579
  size: "small",
994
1580
  label: "Hours (0-23)",
@@ -999,8 +1585,8 @@ function EndCallDispositionDialog({
999
1585
  fullWidth: true
1000
1586
  }
1001
1587
  ) }),
1002
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1003
- import_material2.TextField,
1588
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1589
+ import_material3.TextField,
1004
1590
  {
1005
1591
  size: "small",
1006
1592
  label: "Minutes (0-59)",
@@ -1015,9 +1601,9 @@ function EndCallDispositionDialog({
1015
1601
  ] })
1016
1602
  }
1017
1603
  ),
1018
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { textAlign: "right", m: 2, children: [
1604
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { textAlign: "right", m: 2, children: [
1019
1605
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1020
- import_material2.Button,
1606
+ import_material3.Button,
1021
1607
  {
1022
1608
  variant: "outlined",
1023
1609
  color: "error",
@@ -1033,7 +1619,7 @@ function EndCallDispositionDialog({
1033
1619
  }
1034
1620
  ),
1035
1621
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1036
- import_material2.Button,
1622
+ import_material3.Button,
1037
1623
  {
1038
1624
  variant: "contained",
1039
1625
  color: "primary",
@@ -1048,23 +1634,158 @@ function EndCallDispositionDialog({
1048
1634
  }
1049
1635
  ) });
1050
1636
  }
1637
+ function ProcessorListDialog({
1638
+ open,
1639
+ setOpen,
1640
+ processList = [],
1641
+ handleSelectedProcessor
1642
+ }) {
1643
+ const handleClose = () => {
1644
+ setOpen(false);
1645
+ };
1646
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1647
+ import_material3.Dialog,
1648
+ {
1649
+ open,
1650
+ "aria-labelledby": "alert-dialog-title",
1651
+ "aria-describedby": "alert-dialog-description",
1652
+ maxWidth: "xs",
1653
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
1654
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1655
+ import_material3.Box,
1656
+ {
1657
+ sx: {
1658
+ display: "flex",
1659
+ justifyContent: "space-between",
1660
+ alignItems: "center",
1661
+ padding: "4px 16px",
1662
+ boxShadow: "0px 1px 2px #f5f5f5ff"
1663
+ },
1664
+ children: [
1665
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Process List" }),
1666
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
1667
+ ]
1668
+ }
1669
+ ),
1670
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1671
+ import_material3.Box,
1672
+ {
1673
+ sx: {
1674
+ boxShadow: "1px 1px 4px #d3d3d3ff",
1675
+ padding: "6px 10px",
1676
+ margin: "10px",
1677
+ borderRadius: "10px"
1678
+ },
1679
+ children: (processList == null ? void 0 : processList.length) > 0 ? processList == null ? void 0 : processList.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1680
+ import_material3.Box,
1681
+ {
1682
+ sx: {
1683
+ p: 1,
1684
+ display: "flex",
1685
+ alignItems: "center",
1686
+ boxShadow: "1px 1px 4px #d3d3d3ff",
1687
+ padding: "6px",
1688
+ margin: "10px 0px",
1689
+ borderRadius: "10px",
1690
+ cursor: "pointer",
1691
+ "&:hover": { bgcolor: "action.selected" }
1692
+ },
1693
+ onClick: () => {
1694
+ handleSelectedProcessor(process);
1695
+ },
1696
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1697
+ import_material3.Typography,
1698
+ {
1699
+ variant: "body1",
1700
+ sx: {
1701
+ mx: 1,
1702
+ width: "200px",
1703
+ maxWidth: "250px",
1704
+ display: "flex",
1705
+ alignItems: "center"
1706
+ },
1707
+ children: [
1708
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
1709
+ process.process_name
1710
+ ]
1711
+ }
1712
+ )
1713
+ },
1714
+ index
1715
+ )) : null
1716
+ }
1717
+ )
1718
+ ] })
1719
+ }
1720
+ ) });
1721
+ }
1722
+ function CallHistoryDialog({ open, setOpen }) {
1723
+ const handleClose = () => {
1724
+ setOpen(false);
1725
+ };
1726
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1727
+ import_material3.Dialog,
1728
+ {
1729
+ open,
1730
+ "aria-labelledby": "alert-dialog-title",
1731
+ "aria-describedby": "alert-dialog-description",
1732
+ fullWidth: true,
1733
+ maxWidth: "md",
1734
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
1735
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1736
+ import_material3.Box,
1737
+ {
1738
+ sx: {
1739
+ display: "flex",
1740
+ justifyContent: "space-between",
1741
+ alignItems: "center",
1742
+ padding: "4px 16px",
1743
+ boxShadow: "0px 1px 2px #f5f5f5ff"
1744
+ },
1745
+ children: [
1746
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call History" }),
1747
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
1748
+ ]
1749
+ }
1750
+ ),
1751
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1752
+ import_material3.Box,
1753
+ {
1754
+ sx: {
1755
+ boxShadow: "1px 1px 4px #d3d3d3ff",
1756
+ margin: "10px",
1757
+ borderRadius: "10px",
1758
+ textAlign: "center",
1759
+ fontSize: "16px",
1760
+ fontWeight: "bold"
1761
+ },
1762
+ p: 6,
1763
+ children: "Comming Soon..."
1764
+ }
1765
+ )
1766
+ ] })
1767
+ }
1768
+ ) });
1769
+ }
1051
1770
 
1052
1771
  // call-control-sdk/lib/components/callControlPanel.tsx
1053
1772
  var import_jsx_runtime3 = require("react/jsx-runtime");
1054
1773
  function CallControlPanel({ onDataChange }) {
1055
- const theme = (0, import_material3.useTheme)();
1774
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la;
1775
+ const theme = (0, import_material4.useTheme)();
1776
+ const { disabled, enabled, outlined } = styles_default();
1056
1777
  const state = useSDKState();
1778
+ const { showToast } = useToast();
1779
+ const webSocketRef = (0, import_react6.useRef)(null);
1057
1780
  const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
1058
1781
  const [showIframe, setShowIframe] = (0, import_react6.useState)(true);
1059
- const [statusAnchorEl, setStatusAnchorEl] = (0, import_react6.useState)(
1060
- null
1061
- );
1062
- const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react6.useState)(
1063
- null
1064
- );
1782
+ const [statusAnchorEl, setStatusAnchorEl] = (0, import_react6.useState)(null);
1783
+ const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react6.useState)(null);
1065
1784
  const [open, setOpen] = (0, import_react6.useState)(false);
1066
1785
  const [openCallTransfer, setOpenCallTransfer] = (0, import_react6.useState)(false);
1067
1786
  const [openCallDisposition, setOpenCallDisposition] = (0, import_react6.useState)(false);
1787
+ const [openProcessorDialog, setOpenProcessorDialog] = (0, import_react6.useState)(false);
1788
+ const [openCallHistoryDialog, setOpenCallHistoryDialog] = (0, import_react6.useState)(false);
1068
1789
  const [phoneNumber, setPhoneNumber] = (0, import_react6.useState)("");
1069
1790
  const [callDuration, setCallDuration] = (0, import_react6.useState)(0);
1070
1791
  const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
@@ -1081,39 +1802,46 @@ function CallControlPanel({ onDataChange }) {
1081
1802
  state.iframePosition,
1082
1803
  (newPosition) => sdkStateManager.setIframePosition(newPosition)
1083
1804
  );
1805
+ const [getProcessList, { data: processList }] = usePostRequest({
1806
+ onSuccess: (res) => {
1807
+ var _a2;
1808
+ console.log("res", res);
1809
+ if (res && res.processes && ((_a2 = res == null ? void 0 : res.processes) == null ? void 0 : _a2.length) > 1) {
1810
+ setOpenProcessorDialog(true);
1811
+ } else {
1812
+ sdkStateManager.setProcess(res == null ? void 0 : res.processes[0]);
1813
+ setOpenProcessorDialog(false);
1814
+ }
1815
+ },
1816
+ onError: () => {
1817
+ setOpenProcessorDialog(false);
1818
+ }
1819
+ });
1084
1820
  const [clickToCall] = usePostRequest();
1085
- const [holdOrUnHold] = usePostRequest();
1086
- const [muteOrUnMute] = usePostRequest();
1821
+ const [holdOrUnHold] = usePostRequest({
1822
+ onSuccess: () => {
1823
+ sdkStateManager.setHolding(!state.isHolding);
1824
+ },
1825
+ onError: (error) => {
1826
+ console.log("error", error);
1827
+ }
1828
+ });
1829
+ const [muteOrUnMute] = usePostRequest({
1830
+ onSuccess: () => {
1831
+ sdkStateManager.setMuted(!state.isMuted);
1832
+ },
1833
+ onError: (error) => {
1834
+ console.log("error", error);
1835
+ }
1836
+ });
1087
1837
  const [readyAgentStatus] = usePostRequest();
1088
1838
  const [updateAgentStatus] = usePostRequest();
1089
1839
  const [endCall] = usePostRequest();
1090
- (0, import_react6.useEffect)(() => {
1091
- let interval;
1092
- if (state.callStartTime) {
1093
- interval = setInterval(() => {
1094
- const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
1095
- setCallDuration(elapsed);
1096
- }, 1e3);
1097
- } else {
1098
- setCallDuration(0);
1099
- }
1100
- return () => {
1101
- if (interval) clearInterval(interval);
1102
- };
1103
- }, [state.callStartTime]);
1104
- (0, import_react6.useEffect)(() => {
1105
- if (onDataChange) {
1106
- onDataChange(state.callData);
1107
- }
1108
- }, [state.callData, onDataChange]);
1109
1840
  const formatDuration = (0, import_react6.useCallback)((seconds) => {
1110
1841
  const mins = Math.floor(seconds / 60);
1111
1842
  const secs = seconds % 60;
1112
1843
  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
1113
1844
  }, []);
1114
- const handleOpenQueueCounts = (event) => {
1115
- setAnchorEl(event.currentTarget);
1116
- };
1117
1845
  const handleCloseQueueCounts = () => {
1118
1846
  setAnchorEl(null);
1119
1847
  };
@@ -1134,445 +1862,449 @@ function CallControlPanel({ onDataChange }) {
1134
1862
  const handleCloseAgentStatus = () => {
1135
1863
  setStatusAnchorEl(null);
1136
1864
  };
1137
- const handleAgentReady = (status) => {
1865
+ const handleAgentReady = () => {
1138
1866
  const payload = {
1139
1867
  action: "READYAGENT",
1140
- username: "string",
1141
- refno: "string"
1868
+ userId: state.agentId
1142
1869
  };
1143
1870
  readyAgentStatus(END_POINT.READY_AGENT, payload);
1144
- sdkStateManager.setStatus(status);
1145
1871
  };
1146
1872
  const handleUpdateAgentStatus = (status) => {
1147
- sdkStateManager.setStatus(status);
1148
1873
  setStatusAnchorEl(null);
1149
1874
  const payload = {
1150
- action: "AGENTSTATUS",
1151
- phone_number: "string",
1152
- refno: "string",
1153
- username: "string",
1154
- ticket_id: 0
1875
+ action: "AGENTBREAK",
1876
+ break_type: status,
1877
+ userId: state.agentId
1155
1878
  };
1156
1879
  updateAgentStatus(END_POINT.UPDATE_AGENT_BREAK, payload);
1157
1880
  };
1158
1881
  const handleStartCall = (number) => {
1159
1882
  if (number.length !== 10) {
1883
+ showToast("Invalid phone number", "error");
1160
1884
  alert("Invalid phone number");
1161
1885
  } else if (!/^\d+$/.test(number)) {
1162
- alert("Invalid phone number");
1886
+ showToast("Invalid phone number", "error");
1163
1887
  } else {
1164
1888
  const payload = {
1165
1889
  action: "CALL",
1166
1890
  phone_number: number,
1167
- refno: "string",
1168
- username: "string",
1169
- ticket_id: 0
1891
+ userId: state.agentId
1170
1892
  };
1171
1893
  clickToCall(END_POINT.CLICK_TO_CALL, payload);
1172
- sdkStateManager.startCall();
1173
1894
  }
1174
1895
  };
1175
1896
  const handleHoldToggle = () => {
1176
1897
  const payload = {
1177
1898
  action: state.isHolding ? "UNHOLD" : "HOLD",
1178
- username: "string",
1179
- refno: "string"
1899
+ userId: state.agentId
1180
1900
  };
1181
1901
  holdOrUnHold(END_POINT.HOLD_CALL, payload);
1182
- sdkStateManager.setHolding(!state.isHolding);
1183
1902
  };
1184
1903
  const handleMuteToggle = () => {
1185
1904
  const payload = {
1186
1905
  action: state.isMuted ? "UNMUTE" : "MUTE",
1187
- username: "string",
1188
- refno: "string"
1906
+ userId: state.agentId
1907
+ };
1908
+ muteOrUnMute(END_POINT.MUTE_CALL, payload);
1909
+ };
1910
+ const handleEndCall = (data) => {
1911
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
1912
+ console.log("data", data);
1913
+ const payload = {
1914
+ action: "ENDCALL",
1915
+ userId: state.agentId,
1916
+ processid: (_c2 = (_b2 = (_a2 = state.process) == null ? void 0 : _a2.process_id) == null ? void 0 : _b2.toString()) != null ? _c2 : "",
1917
+ process_name: (_e2 = (_d2 = state.process) == null ? void 0 : _d2.process_name) != null ? _e2 : "",
1918
+ callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
1919
+ mobile_number: (_i2 = (_h2 = state.callData) == null ? void 0 : _h2.phone_number) != null ? _i2 : "",
1920
+ disposition: (_k2 = (_j2 = data == null ? void 0 : data.disposition) == null ? void 0 : _j2.value) != null ? _k2 : "",
1921
+ set_followUp: (_m2 = (_l2 = data == null ? void 0 : data.followUp) == null ? void 0 : _l2.value) != null ? _m2 : "",
1922
+ callback_date: (_n2 = data == null ? void 0 : data.callbackDate) != null ? _n2 : "",
1923
+ callback_hrs: (_o2 = data == null ? void 0 : data.callbackHrs) != null ? _o2 : "",
1924
+ callback_mins: (_p2 = data == null ? void 0 : data.callbackMins) != null ? _p2 : "",
1925
+ endcall_type: "CLOSE"
1189
1926
  };
1190
- if (state.isMuted) {
1191
- muteOrUnMute(END_POINT.UNMUTE_CALL, payload);
1927
+ setPhoneNumber("");
1928
+ endCall(END_POINT.END_CALL, payload);
1929
+ sdkStateManager.endCall();
1930
+ setOpenCallDisposition(false);
1931
+ };
1932
+ (0, import_react6.useEffect)(() => {
1933
+ let interval;
1934
+ if (state.callData.status && state.callData.status === "ONCALL") {
1935
+ interval = setInterval(() => {
1936
+ const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
1937
+ setCallDuration(elapsed);
1938
+ }, 1e3);
1939
+ } else {
1940
+ setCallDuration(0);
1941
+ }
1942
+ return () => {
1943
+ if (interval) clearInterval(interval);
1944
+ };
1945
+ }, [state.callData.status]);
1946
+ (0, import_react6.useEffect)(() => {
1947
+ if (onDataChange) {
1948
+ onDataChange(state.callData);
1949
+ }
1950
+ }, [state.callData, onDataChange]);
1951
+ (0, import_react6.useEffect)(() => {
1952
+ if (state.agentId) {
1953
+ getProcessList(END_POINT.PROCESS_LIST, {
1954
+ userId: state.agentId,
1955
+ action: "GETAGENTPROCESSLIST",
1956
+ refno: "1234221233"
1957
+ });
1192
1958
  } else {
1193
- muteOrUnMute(END_POINT.MUTE_CALL, payload);
1959
+ console.log("No agentId available, skipping API call");
1194
1960
  }
1195
- sdkStateManager.setMuted(!state.isMuted);
1196
- };
1197
- const handleEndCall = (data) => {
1198
- var _a, _b, _c, _d, _e, _f, _g;
1199
- console.log(data);
1200
- const payload = {
1201
- action: "ENDCALL",
1202
- convoxid: "string",
1203
- username: "string",
1204
- processid: "101",
1205
- mobile_number: "string",
1206
- refno: "string",
1207
- disposition: (_b = (_a = data == null ? void 0 : data.disposition) == null ? void 0 : _a.label) != null ? _b : "",
1208
- set_followUp: (_d = (_c = data == null ? void 0 : data.followUp) == null ? void 0 : _c.label) != null ? _d : "",
1209
- callback_date: (_e = data == null ? void 0 : data.callbackDate) != null ? _e : "",
1210
- callback_hrs: (_f = data == null ? void 0 : data.callbackHrs) != null ? _f : "",
1211
- callback_mins: (_g = data == null ? void 0 : data.callbackMins) != null ? _g : ""
1961
+ }, [state.agentId]);
1962
+ (0, import_react6.useEffect)(() => {
1963
+ if (state.agentId) {
1964
+ webSocketRef.current = new WebSocket(`${WS_END_POINT.WS}?agent_id=${state.agentId}`);
1965
+ webSocketRef.current.onopen = () => {
1966
+ console.log("WebSocket connection established");
1967
+ };
1968
+ webSocketRef.current.onmessage = (event) => {
1969
+ try {
1970
+ const data = JSON.parse(event.data);
1971
+ console.log("parsedJSON:", data);
1972
+ sdkStateManager.updateCallData(data);
1973
+ if (data.status === "ONCALL") {
1974
+ sdkStateManager.startCall();
1975
+ }
1976
+ if (data.status === "WRAPUP") {
1977
+ sdkStateManager.endCall();
1978
+ }
1979
+ } catch (e) {
1980
+ console.log("Raw message:", event.data);
1981
+ }
1982
+ };
1983
+ webSocketRef.current.onclose = () => {
1984
+ console.log("WebSocket connection closed");
1985
+ };
1986
+ webSocketRef.current.onerror = (error) => {
1987
+ console.error("WebSocket error:", error);
1988
+ };
1989
+ }
1990
+ return () => {
1991
+ var _a2;
1992
+ (_a2 = webSocketRef.current) == null ? void 0 : _a2.close();
1212
1993
  };
1213
- setPhoneNumber("");
1214
- endCall(END_POINT.END_CALL, payload);
1215
- sdkStateManager.endCall();
1216
- setOpenCallDisposition(false);
1217
- };
1218
- if (!state.isInitialized) {
1219
- return null;
1994
+ }, [state.agentId]);
1995
+ if (!state.isInitialized || !state.process) {
1996
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: Boolean(openProcessorDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1997
+ ProcessorListDialog,
1998
+ {
1999
+ processList: processList == null ? void 0 : processList.processes,
2000
+ open: openProcessorDialog,
2001
+ setOpen: setOpenProcessorDialog,
2002
+ handleSelectedProcessor: (data) => {
2003
+ sdkStateManager.setProcess(data);
2004
+ }
2005
+ }
2006
+ ) });
1220
2007
  }
1221
2008
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
1222
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1223
- import_material3.Paper,
2009
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2010
+ import_material4.Fade,
1224
2011
  {
1225
- ref: dragRef,
1226
- elevation: isDragging ? 4 : 1,
1227
- sx: {
1228
- position: "fixed",
1229
- left: position.x,
1230
- top: position.y,
1231
- p: 1,
1232
- borderRadius: 3,
1233
- bgcolor: "background.paper",
1234
- zIndex: 99999,
1235
- transition: theme.transitions.create(["box-shadow", "transform"], {
1236
- duration: theme.transitions.duration.short
1237
- }),
1238
- minWidth: 320,
1239
- userSelect: "none"
1240
- },
1241
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1242
- import_material3.Box,
2012
+ in: true,
2013
+ timeout: 300,
2014
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2015
+ import_material4.Paper,
1243
2016
  {
2017
+ ref: dragRef,
2018
+ elevation: isDragging ? 4 : 1,
1244
2019
  sx: {
1245
- display: "flex",
1246
- alignItems: "center"
2020
+ position: "fixed",
2021
+ left: position.x,
2022
+ top: position.y,
2023
+ p: 0.5,
2024
+ borderRadius: 3,
2025
+ bgcolor: "background.paper",
2026
+ zIndex: 99999,
2027
+ transition: theme.transitions.create(["box-shadow", "transform"], {
2028
+ duration: theme.transitions.duration.short
2029
+ }),
2030
+ userSelect: "none"
1247
2031
  },
1248
- children: [
1249
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1250
- import_material3.Box,
1251
- {
1252
- sx: {
1253
- display: "flex",
1254
- justifyContent: "space-between",
1255
- alignItems: "center"
1256
- },
1257
- children: [
1258
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1259
- import_material3.Typography,
1260
- {
1261
- variant: "h6",
1262
- sx: {
1263
- color: state.status === "on call" ? "success.main" : "text.secondary",
1264
- marginRight: "8px",
1265
- display: "flex",
1266
- justifyContent: "space-between",
1267
- alignItems: "center"
1268
- },
1269
- children: [
1270
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1271
- import_material3.IconButton,
1272
- {
1273
- component: "div",
1274
- sx: {
1275
- cursor: "all-scroll"
1276
- },
1277
- onMouseDown: handleMouseDown,
1278
- onTouchStart: handleTouchStart,
1279
- children: [
1280
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.DragIndicator, {}),
1281
- " "
1282
- ]
1283
- }
1284
- ),
1285
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1286
- import_material3.Box,
1287
- {
1288
- sx: {
1289
- marginRight: "10px"
1290
- },
1291
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1292
- import_material3.IconButton,
1293
- {
1294
- onClick: (e) => {
1295
- if (state.status !== "on call" && state.status !== "break") {
1296
- handleOpenDialer(e);
1297
- }
1298
- },
1299
- sx: {
1300
- bgcolor: "action.hover",
1301
- "&:hover": {
1302
- bgcolor: "warning"
1303
- }
1304
- },
1305
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1306
- import_icons_material2.WifiCalling3,
1307
- {
1308
- sx: {
1309
- color: state.status === "on call" || state.status === "break" ? "action.selected" : "success.main"
1310
- }
2032
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2033
+ import_material4.Box,
2034
+ {
2035
+ sx: {
2036
+ display: "flex",
2037
+ alignItems: "center"
2038
+ },
2039
+ children: [
2040
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2041
+ import_material4.Box,
2042
+ {
2043
+ sx: {
2044
+ display: "flex",
2045
+ justifyContent: "space-between",
2046
+ alignItems: "center"
2047
+ },
2048
+ children: [
2049
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2050
+ import_material4.IconButton,
2051
+ {
2052
+ component: "div",
2053
+ size: "small",
2054
+ sx: {
2055
+ cursor: "all-scroll"
2056
+ },
2057
+ onMouseDown: handleMouseDown,
2058
+ onTouchStart: handleTouchStart,
2059
+ children: [
2060
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.DragIndicator, {}),
2061
+ " "
2062
+ ]
2063
+ }
2064
+ ),
2065
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2066
+ import_material4.Box,
2067
+ {
2068
+ sx: {
2069
+ marginRight: "10px"
2070
+ },
2071
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2072
+ import_material4.IconButton,
2073
+ {
2074
+ size: "small",
2075
+ onClick: (e) => {
2076
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
2077
+ if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) !== "ONCALL" && ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) !== "BREAK" && ((_f2 = (_e2 = state.callData) == null ? void 0 : _e2.status) == null ? void 0 : _f2.toUpperCase()) !== "RINGING" && ((_h2 = (_g2 = state.callData) == null ? void 0 : _g2.status) == null ? void 0 : _h2.toUpperCase()) !== "WRAPUP") {
2078
+ handleOpenDialer(e);
2079
+ }
2080
+ },
2081
+ sx: {
2082
+ bgcolor: "action.hover",
2083
+ "&:hover": {
2084
+ bgcolor: "warning"
2085
+ }
2086
+ },
2087
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2088
+ import_icons_material2.WifiCalling3,
2089
+ {
2090
+ sx: {
2091
+ color: ((_b = (_a = state.callData) == null ? void 0 : _a.status) == null ? void 0 : _b.toUpperCase()) === "ONCALL" || ((_d = (_c = state.callData) == null ? void 0 : _c.status) == null ? void 0 : _d.toUpperCase()) === "BREAK" || ((_f = (_e = state.callData) == null ? void 0 : _e.status) == null ? void 0 : _f.toUpperCase()) === "RINGING" || ((_h = (_g = state.callData) == null ? void 0 : _g.status) == null ? void 0 : _h.toUpperCase()) === "WRAPUP" ? "action.selected" : "success.main"
1311
2092
  }
1312
- )
1313
- }
1314
- ) })
1315
- }
1316
- ),
1317
- formatDuration(callDuration)
1318
- ]
1319
- }
1320
- ),
1321
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1322
- import_material3.ButtonGroup,
1323
- {
1324
- disableElevation: true,
1325
- variant: "contained",
1326
- "aria-label": "Disabled button group",
1327
- sx: {
1328
- marginRight: "10px"
1329
- },
1330
- children: [
1331
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1332
- import_material3.Button,
1333
- {
1334
- sx: {
1335
- fontWeight: "bold",
1336
- borderRadius: "16px",
1337
- display: "flex",
1338
- alignItems: "center",
1339
- justifyContent: "space-between"
1340
- },
1341
- variant: "outlined",
1342
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1343
- import_material3.Typography,
1344
- {
1345
- width: 70,
1346
- variant: "body2",
1347
- sx: {
1348
- fontWeight: "bold"
1349
- },
1350
- children: state.status.toUpperCase()
1351
- }
1352
- )
1353
- }
1354
- ),
1355
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1356
- import_material3.Button,
1357
- {
1358
- sx: {
1359
- borderRadius: "16px",
1360
- width: 20
1361
- },
1362
- variant: "outlined",
1363
- onClick: handleOpenAgentStatus,
1364
- disabled: Boolean(state.callStartTime),
1365
- children: [
1366
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowDropDown, {}),
1367
- " "
1368
- ]
1369
- }
1370
- )
1371
- ]
1372
- }
1373
- )
1374
- ]
1375
- }
1376
- ),
1377
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1378
- import_material3.Box,
1379
- {
1380
- sx: {
1381
- display: "flex",
1382
- gap: 1,
1383
- justifyContent: "center",
1384
- alignItems: "center"
1385
- },
1386
- children: [
1387
- state.status === "break" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1388
- import_material3.IconButton,
1389
- {
1390
- onClick: (e) => {
1391
- e.stopPropagation();
1392
- handleAgentReady("idle");
1393
- },
1394
- color: "default",
1395
- sx: {
1396
- bgcolor: "error.dark",
1397
- "&:hover": {
1398
- bgcolor: "error.light"
2093
+ }
2094
+ )
2095
+ }
2096
+ ) })
1399
2097
  }
1400
- },
1401
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1402
- import_icons_material2.SupportAgent,
2098
+ ),
2099
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2100
+ import_material4.Typography,
1403
2101
  {
1404
2102
  sx: {
1405
- color: "white"
1406
- }
2103
+ color: "success.main",
2104
+ width: "40px",
2105
+ marginRight: "10px"
2106
+ },
2107
+ children: formatDuration(callDuration)
2108
+ }
2109
+ ),
2110
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2111
+ import_material4.Typography,
2112
+ {
2113
+ variant: "body2",
2114
+ sx: {
2115
+ fontWeight: "bold"
2116
+ },
2117
+ children: (_k = (_j = (_i = state.callData) == null ? void 0 : _i.status) == null ? void 0 : _j.toUpperCase()) != null ? _k : "N/A"
2118
+ }
2119
+ ),
2120
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2121
+ import_material4.Button,
2122
+ {
2123
+ size: "small",
2124
+ variant: "text",
2125
+ onClick: handleOpenAgentStatus,
2126
+ disabled: Boolean(state.callStartTime),
2127
+ children: [
2128
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowDropDown, {}),
2129
+ " "
2130
+ ]
1407
2131
  }
1408
2132
  )
1409
- }
1410
- ) }),
1411
- state.status === "wrap up" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Redial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1412
- import_material3.IconButton,
1413
- {
1414
- onClick: (e) => {
1415
- e.stopPropagation();
1416
- },
1417
- color: "default",
1418
- sx: {
1419
- bgcolor: "action.hover",
1420
- "&:hover": {
1421
- bgcolor: "warning"
2133
+ ]
2134
+ }
2135
+ ),
2136
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2137
+ import_material4.Box,
2138
+ {
2139
+ sx: {
2140
+ display: "flex",
2141
+ gap: 1,
2142
+ justifyContent: "center",
2143
+ alignItems: "center"
2144
+ },
2145
+ children: [
2146
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2147
+ import_material4.Button,
2148
+ {
2149
+ variant: ((_m = (_l = state.callData) == null ? void 0 : _l.status) == null ? void 0 : _m.toUpperCase()) === "BREAK" || ((_o = (_n = state.callData) == null ? void 0 : _n.status) == null ? void 0 : _o.toUpperCase()) === "MISSED" ? "outlined" : "contained",
2150
+ onClick: (e) => {
2151
+ var _a2, _b2, _c2, _d2;
2152
+ if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "BREAK" || ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) === "MISSED") {
2153
+ e.stopPropagation();
2154
+ handleAgentReady();
2155
+ }
2156
+ },
2157
+ classes: {
2158
+ root: ((_q = (_p = state.callData) == null ? void 0 : _p.status) == null ? void 0 : _q.toUpperCase()) === "BREAK" || ((_s = (_r = state.callData) == null ? void 0 : _r.status) == null ? void 0 : _s.toUpperCase()) === "MISSED" ? "outlined" : "enabled"
2159
+ },
2160
+ sx: __spreadValues({}, ((_u = (_t = state.callData) == null ? void 0 : _t.status) == null ? void 0 : _u.toUpperCase()) === "BREAK" || ((_w = (_v = state.callData) == null ? void 0 : _v.status) == null ? void 0 : _w.toUpperCase()) === "MISSED" ? outlined : enabled),
2161
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
1422
2162
  }
1423
- },
1424
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Tty, {})
1425
- }
1426
- ) }),
1427
- state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1428
- import_material3.IconButton,
1429
- {
1430
- onClick: (e) => {
1431
- e.stopPropagation();
1432
- handleHoldToggle();
1433
- },
1434
- color: state.isHolding ? "warning" : "default",
1435
- sx: {
1436
- bgcolor: state.isHolding ? "warning.info" : "action.hover"
1437
- },
1438
- children: state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PauseCircle, {})
1439
- }
1440
- ) }),
1441
- state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1442
- import_material3.IconButton,
1443
- {
1444
- onClick: (e) => {
1445
- e.stopPropagation();
1446
- handleMuteToggle();
1447
- },
1448
- color: state.isMuted ? "error" : "default",
1449
- sx: {
1450
- bgcolor: state.isMuted ? "error.info" : "action.hover"
1451
- },
1452
- children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
1453
- }
1454
- ) }),
1455
- state.status !== "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Queue", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1456
- import_material3.IconButton,
1457
- {
1458
- onClick: (e) => {
1459
- e.stopPropagation();
1460
- handleOpenQueueCounts(e);
1461
- },
1462
- color: "default",
1463
- sx: {
1464
- bgcolor: "action.hover",
1465
- "&:hover": {
1466
- bgcolor: "warning"
2163
+ ) }),
2164
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2165
+ import_material4.Button,
2166
+ {
2167
+ variant: state.isHolding && ((_y = (_x = state.callData) == null ? void 0 : _x.status) == null ? void 0 : _y.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
2168
+ onClick: (e) => {
2169
+ e.stopPropagation();
2170
+ handleHoldToggle();
2171
+ },
2172
+ sx: state.isHolding && ((_A = (_z = state.callData) == null ? void 0 : _z.status) == null ? void 0 : _A.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_C = (_B = state.callData) == null ? void 0 : _B.status) == null ? void 0 : _C.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
2173
+ disabled: ((_E = (_D = state.callData) == null ? void 0 : _D.status) == null ? void 0 : _E.toUpperCase()) !== "ONCALL" && !state.isHolding,
2174
+ children: state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
1467
2175
  }
1468
- },
1469
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Layers, {})
1470
- }
1471
- ) }),
1472
- state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1473
- import_material3.IconButton,
1474
- {
1475
- onClick: (e) => {
1476
- e.stopPropagation();
1477
- setOpenCallTransfer(true);
1478
- },
1479
- color: "default",
1480
- sx: {
1481
- bgcolor: "action.hover",
1482
- "&:hover": {
1483
- bgcolor: "warning"
2176
+ ) }),
2177
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2178
+ import_material4.Button,
2179
+ {
2180
+ variant: state.isMuted && ((_G = (_F = state.callData) == null ? void 0 : _F.status) == null ? void 0 : _G.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
2181
+ onClick: (e) => {
2182
+ e.stopPropagation();
2183
+ handleMuteToggle();
2184
+ },
2185
+ sx: state.isMuted && ((_I = (_H = state.callData) == null ? void 0 : _H.status) == null ? void 0 : _I.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_K = (_J = state.callData) == null ? void 0 : _J.status) == null ? void 0 : _K.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
2186
+ disabled: ((_M = (_L = state.callData) == null ? void 0 : _L.status) == null ? void 0 : _M.toUpperCase()) !== "ONCALL" && !state.isMuted,
2187
+ children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
1484
2188
  }
1485
- },
1486
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
1487
- }
1488
- ) }),
1489
- state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1490
- import_material3.IconButton,
1491
- {
1492
- onClick: (e) => {
1493
- e.stopPropagation();
1494
- setOpen(true);
1495
- },
1496
- color: "default",
1497
- sx: {
1498
- bgcolor: "action.hover",
1499
- "&:hover": {
1500
- bgcolor: "warning"
2189
+ ) }),
2190
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2191
+ import_material4.Button,
2192
+ {
2193
+ variant: openCallTransfer ? "contained" : "outlined",
2194
+ onClick: (e) => {
2195
+ var _a2, _b2;
2196
+ if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL") {
2197
+ e.stopPropagation();
2198
+ setOpenCallTransfer(true);
2199
+ }
2200
+ },
2201
+ sx: openCallTransfer ? __spreadValues({}, enabled) : ((_O = (_N = state.callData) == null ? void 0 : _N.status) == null ? void 0 : _O.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
2202
+ disabled: ((_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()) !== "ONCALL",
2203
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
1501
2204
  }
1502
- },
1503
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Groups, {})
1504
- }
1505
- ) }),
1506
- state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1507
- import_material3.Tooltip,
1508
- {
1509
- title: state.status === "on call" ? "End Call" : "Start Call",
1510
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1511
- import_material3.IconButton,
2205
+ ) }),
2206
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2207
+ import_material4.Button,
2208
+ {
2209
+ variant: open ? "contained" : "outlined",
2210
+ onClick: (e) => {
2211
+ var _a2, _b2;
2212
+ if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL") {
2213
+ e.stopPropagation();
2214
+ setOpen(true);
2215
+ }
2216
+ },
2217
+ sx: open ? __spreadValues({}, enabled) : ((_S = (_R = state.callData) == null ? void 0 : _R.status) == null ? void 0 : _S.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
2218
+ disabled: ((_U = (_T = state.callData) == null ? void 0 : _T.status) == null ? void 0 : _U.toUpperCase()) !== "ONCALL",
2219
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
2220
+ }
2221
+ ) }),
2222
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Call History", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2223
+ import_material4.Button,
1512
2224
  {
2225
+ variant: openCallHistoryDialog ? "contained" : "outlined",
1513
2226
  onClick: (e) => {
1514
2227
  e.stopPropagation();
1515
- setOpenCallDisposition(true);
2228
+ setOpenCallHistoryDialog(true);
1516
2229
  },
1517
- color: "error",
1518
- sx: {
1519
- bgcolor: state.status === "on call" ? "error.main" : "gray",
1520
- color: "white",
1521
- "&:hover": {
1522
- bgcolor: state.status === "on call" ? "error.light" : "gray"
2230
+ sx: openCallHistoryDialog ? __spreadValues({}, enabled) : __spreadValues({}, outlined),
2231
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.History, {})
2232
+ }
2233
+ ) }),
2234
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2235
+ import_material4.Button,
2236
+ {
2237
+ variant: ((_W = (_V = state.callData) == null ? void 0 : _V.status) == null ? void 0 : _W.toUpperCase()) === "ONCALL" || ((_Y = (_X = state.callData) == null ? void 0 : _X.status) == null ? void 0 : _Y.toUpperCase()) === "RINGING" || ((__ = (_Z = state.callData) == null ? void 0 : _Z.status) == null ? void 0 : __.toUpperCase()) === "WRAPUP" ? "contained" : "outlined",
2238
+ onClick: (e) => {
2239
+ var _a2, _b2, _c2, _d2, _e2, _f2;
2240
+ if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" || ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) === "RINGING" || ((_f2 = (_e2 = state.callData) == null ? void 0 : _e2.status) == null ? void 0 : _f2.toUpperCase()) === "WRAPUP") {
2241
+ e.stopPropagation();
2242
+ setOpenCallDisposition(true);
1523
2243
  }
1524
2244
  },
2245
+ sx: ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) === "ONCALL" || ((_ca = (_ba = state.callData) == null ? void 0 : _ba.status) == null ? void 0 : _ca.toUpperCase()) === "RINGING" || ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) === "WRAPUP" ? __spreadProps(__spreadValues({}, enabled), {
2246
+ borderRight: "1px",
2247
+ backgroundColor: "error.main",
2248
+ minWidth: "60px !important",
2249
+ boxShadow: " 0px 2px 1px #5f3f3f",
2250
+ border: `1px solid ${theme.palette.error.light}`,
2251
+ height: "40px",
2252
+ "&:hover": {
2253
+ bgcolor: "error.light",
2254
+ boxShadow: " 0px 2px 1px #5f3f3f",
2255
+ border: `0px solid ${theme.palette.error.light}`
2256
+ },
2257
+ "&:active": {
2258
+ bgcolor: "error.light",
2259
+ boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
2260
+ }
2261
+ }) : __spreadProps(__spreadValues({}, disabled), {
2262
+ minWidth: "60px !important"
2263
+ }),
2264
+ disabled: ((_ga = (_fa = state.callData) == null ? void 0 : _fa.status) == null ? void 0 : _ga.toUpperCase()) !== "ONCALL" && ((_ia = (_ha = state.callData) == null ? void 0 : _ha.status) == null ? void 0 : _ia.toUpperCase()) !== "RINGING" && ((_ka = (_ja = state.callData) == null ? void 0 : _ja.status) == null ? void 0 : _ka.toUpperCase()) !== "WRAPUP",
1525
2265
  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {})
1526
2266
  }
1527
- )
1528
- }
1529
- )
1530
- ]
1531
- }
1532
- )
1533
- ]
2267
+ ) })
2268
+ ]
2269
+ }
2270
+ )
2271
+ ]
2272
+ }
2273
+ )
1534
2274
  }
1535
2275
  )
1536
2276
  }
1537
- ) }),
1538
- Boolean(showIframe) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1539
- import_material3.Paper,
2277
+ ),
2278
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2279
+ import_material4.Fade,
1540
2280
  {
1541
- ref: iframeDragRef,
1542
- elevation: iframeIsDragging ? 4 : 1,
1543
- sx: {
1544
- position: "fixed",
1545
- left: iframePosition.x,
1546
- top: iframePosition.y,
1547
- p: 1,
1548
- height: "auto",
1549
- borderRadius: 2,
1550
- bgcolor: "background.paper",
1551
- zIndex: 99999,
1552
- transition: theme.transitions.create(
1553
- ["box-shadow", "transform"],
1554
- {
1555
- duration: theme.transitions.duration.short
1556
- }
1557
- ),
1558
- userSelect: "none"
1559
- },
2281
+ in: true,
2282
+ timeout: 300,
1560
2283
  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1561
- import_material3.Box,
2284
+ import_material4.Paper,
1562
2285
  {
2286
+ ref: iframeDragRef,
2287
+ elevation: iframeIsDragging ? 4 : 1,
1563
2288
  sx: {
1564
- display: "flex",
1565
- alignItems: "center",
1566
- justifyContent: "center",
1567
- flexDirection: "column"
2289
+ position: "fixed",
2290
+ left: iframePosition.x,
2291
+ top: iframePosition.y,
2292
+ p: 1,
2293
+ height: "auto",
2294
+ borderRadius: 2,
2295
+ bgcolor: "background.paper",
2296
+ zIndex: 99999,
2297
+ transition: theme.transitions.create(["box-shadow", "transform"], {
2298
+ duration: theme.transitions.duration.short
2299
+ }),
2300
+ visibility: showIframe ? "visible" : "hidden",
2301
+ userSelect: "none"
1568
2302
  },
1569
2303
  children: [
1570
2304
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1571
- import_material3.Box,
2305
+ import_material4.Box,
1572
2306
  {
1573
2307
  sx: {
1574
- width: "100%",
1575
- height: "auto",
1576
2308
  display: "flex",
1577
2309
  alignItems: "center",
1578
2310
  justifyContent: "space-between",
@@ -1590,25 +2322,26 @@ function CallControlPanel({ onDataChange }) {
1590
2322
  }
1591
2323
  ),
1592
2324
  " ",
1593
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.IconButton, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Close, {}) })
2325
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.IconButton, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Close, {}) })
1594
2326
  ]
1595
2327
  }
1596
2328
  ),
1597
2329
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1598
2330
  "iframe",
1599
2331
  {
1600
- src: "https://h68.deepijatel.in/ConVoxCCS/iframe?agent_id=test&process_id=101",
1601
- height: 300,
1602
- width: 300
2332
+ src: `https://h68.deepijatel.in/ConVoxCCS/iframe?agent_id=${state.agentId}&process_id=${(_la = state.process) == null ? void 0 : _la.process_id}`,
2333
+ height: 380,
2334
+ width: 420,
2335
+ allow: "camera; microphone; autoplay"
1603
2336
  }
1604
2337
  )
1605
2338
  ]
1606
2339
  }
1607
2340
  )
1608
2341
  }
1609
- ) }),
2342
+ ),
1610
2343
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1611
- import_material3.Menu,
2344
+ import_material4.Menu,
1612
2345
  {
1613
2346
  anchorEl: dialerAnchorEl,
1614
2347
  open: Boolean(dialerAnchorEl),
@@ -1618,7 +2351,7 @@ function CallControlPanel({ onDataChange }) {
1618
2351
  zIndex: 99999
1619
2352
  },
1620
2353
  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1621
- import_material3.Box,
2354
+ import_material4.Box,
1622
2355
  {
1623
2356
  sx: {
1624
2357
  all: "unset",
@@ -1629,7 +2362,7 @@ function CallControlPanel({ onDataChange }) {
1629
2362
  },
1630
2363
  children: [
1631
2364
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1632
- import_material3.TextField,
2365
+ import_material4.TextField,
1633
2366
  {
1634
2367
  size: "small",
1635
2368
  value: phoneNumber,
@@ -1640,7 +2373,7 @@ function CallControlPanel({ onDataChange }) {
1640
2373
  }
1641
2374
  ),
1642
2375
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1643
- import_material3.IconButton,
2376
+ import_material4.IconButton,
1644
2377
  {
1645
2378
  color: "info",
1646
2379
  onClick: () => {
@@ -1655,7 +2388,7 @@ function CallControlPanel({ onDataChange }) {
1655
2388
  }
1656
2389
  ),
1657
2390
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1658
- import_material3.Menu,
2391
+ import_material4.Menu,
1659
2392
  {
1660
2393
  anchorEl: statusAnchorEl,
1661
2394
  open: Boolean(statusAnchorEl),
@@ -1665,13 +2398,13 @@ function CallControlPanel({ onDataChange }) {
1665
2398
  zIndex: 99999
1666
2399
  },
1667
2400
  children: [
1668
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Lunch" }),
1669
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Tea" })
2401
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Lunch" }),
2402
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Tea"), children: "- Tea" })
1670
2403
  ]
1671
2404
  }
1672
2405
  ),
1673
2406
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1674
- import_material3.Menu,
2407
+ import_material4.Menu,
1675
2408
  {
1676
2409
  anchorEl,
1677
2410
  open: Boolean(anchorEl),
@@ -1681,7 +2414,7 @@ function CallControlPanel({ onDataChange }) {
1681
2414
  zIndex: 99999
1682
2415
  },
1683
2416
  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1684
- import_material3.Box,
2417
+ import_material4.Box,
1685
2418
  {
1686
2419
  sx: {
1687
2420
  display: "flex",
@@ -1694,7 +2427,7 @@ function CallControlPanel({ onDataChange }) {
1694
2427
  },
1695
2428
  children: [
1696
2429
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1697
- import_material3.Chip,
2430
+ import_material4.Chip,
1698
2431
  {
1699
2432
  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Layers, { color: "secondary" }),
1700
2433
  variant: "outlined",
@@ -1705,7 +2438,7 @@ function CallControlPanel({ onDataChange }) {
1705
2438
  }
1706
2439
  ),
1707
2440
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1708
- import_material3.Chip,
2441
+ import_material4.Chip,
1709
2442
  {
1710
2443
  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pending, { color: "info" }),
1711
2444
  label: "Pending - 99+",
@@ -1716,7 +2449,7 @@ function CallControlPanel({ onDataChange }) {
1716
2449
  }
1717
2450
  ),
1718
2451
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1719
- import_material3.Chip,
2452
+ import_material4.Chip,
1720
2453
  {
1721
2454
  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Upcoming, { color: "success" }),
1722
2455
  variant: "outlined",
@@ -1735,18 +2468,7 @@ function CallControlPanel({ onDataChange }) {
1735
2468
  ConferenceDialog,
1736
2469
  {
1737
2470
  open,
1738
- setOpen,
1739
- agentName: "agent_Ravi",
1740
- lines: [
1741
- { status: "ON CALL", type: "External", phone: "7032491730" },
1742
- { status: "IDLE", type: "Internal", phone: "" },
1743
- { status: "IDLE", type: "External", phone: "" },
1744
- { status: "IDLE", type: "Internal", phone: "" },
1745
- { status: "IDLE", type: "External", phone: "" }
1746
- ],
1747
- onConference: () => console.log("Conference"),
1748
- onExit: () => console.log("Exit"),
1749
- onEndAllCalls: () => console.log("End All Calls")
2471
+ setOpen
1750
2472
  }
1751
2473
  ),
1752
2474
  Boolean(openCallTransfer) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1763,6 +2485,13 @@ function CallControlPanel({ onDataChange }) {
1763
2485
  setOpen: setOpenCallDisposition,
1764
2486
  onSubmitDisposition: handleEndCall
1765
2487
  }
2488
+ ),
2489
+ Boolean(openCallHistoryDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2490
+ CallHistoryDialog,
2491
+ {
2492
+ open: openCallHistoryDialog,
2493
+ setOpen: setOpenCallHistoryDialog
2494
+ }
1766
2495
  )
1767
2496
  ] });
1768
2497
  }
@@ -2172,23 +2901,54 @@ if (typeof window !== "undefined") {
2172
2901
  window.EventTracker = eventTracker;
2173
2902
  }
2174
2903
 
2904
+ // call-control-sdk/lib/hooks/useLogout.ts
2905
+ var import_react7 = require("react");
2906
+ var useLogout = (options = {}) => {
2907
+ const { onSuccess, onError, onComplete } = options;
2908
+ const state = useSDKState();
2909
+ const [logOutAgent, logoutState] = usePostRequest({
2910
+ onSuccess: (response) => {
2911
+ onSuccess == null ? void 0 : onSuccess(response);
2912
+ onComplete == null ? void 0 : onComplete();
2913
+ sdkStateManager.clearStorageAndReset();
2914
+ localStorage.clear();
2915
+ },
2916
+ onError: (error) => {
2917
+ onError == null ? void 0 : onError(error);
2918
+ onComplete == null ? void 0 : onComplete();
2919
+ }
2920
+ });
2921
+ const handleLogout = (0, import_react7.useCallback)(() => {
2922
+ const payload = {
2923
+ action: "LOGOUTUSER",
2924
+ userId: state.agentId || ""
2925
+ };
2926
+ logOutAgent(END_POINT.LOGOUT, payload);
2927
+ }, [logOutAgent]);
2928
+ return {
2929
+ logout: handleLogout,
2930
+ isLoading: logoutState.isLoading,
2931
+ isSuccess: logoutState.isSuccess,
2932
+ isError: logoutState.isError,
2933
+ error: logoutState.error,
2934
+ data: logoutState.data
2935
+ };
2936
+ };
2937
+ var useLogout_default = useLogout;
2938
+
2175
2939
  // call-control-sdk/index.ts
2176
- function initSDK({
2177
- apiKey,
2178
- tenantId,
2179
- agentId,
2180
- baseUrl
2181
- }) {
2182
- sdkStateManager.initialize(apiKey);
2940
+ function initSDK({ apiKey, tenantId, agentId }) {
2941
+ sdkStateManager.initialize(apiKey, agentId);
2183
2942
  eventTracker.init({
2184
2943
  apiKey,
2185
2944
  tenantId,
2186
2945
  agentId,
2187
- baseUrl
2946
+ baseUrl: BASE_URL
2188
2947
  });
2189
2948
  }
2190
2949
  // Annotate the CommonJS export names for ESM import in node:
2191
2950
  0 && (module.exports = {
2192
2951
  CallControlPanel,
2193
- initSDK
2952
+ initSDK,
2953
+ useLogout
2194
2954
  });