@microsoft/omnichannel-chat-widget 0.1.0-main.7a3ed6a

package/lib/cjs/common/utils.js

@@ -0,0 +1,337 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getTimestampHourMinute = exports.getLocaleDirection = exports.getIconText = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = void 0;
+
+var _Constants = require("./Constants");
+
+var _KeyCodes = require("./KeyCodes");
+
+const getElementBySelector = selector => {
+  let element;
+
+  if (typeof selector === "string") {
+    element = document.querySelector(selector);
+  } else {
+    element = selector;
+  }
+
+  return element;
+}; // The purpose of this function is:
+// - to make elements not focusable, when confirmation pane or email transcript pane are showing,
+// - to set their initial tab indices back after confirmation pane or email transcript pane are closed
+// Otherwise, the user will be able to click on the screen and tab through different buttons or other elements, even though
+// these dialogs are showing
+
+
+const setTabIndices = (elements, tabIndexMap, shouldBeFocusable) => {
+  if (elements) {
+    if (shouldBeFocusable) {
+      for (let index = 0; index < elements.length; index++) {
+        if (tabIndexMap.has(elements[index].id)) {
+          elements[index].tabIndex = tabIndexMap.get(elements[index].id);
+        }
+      }
+
+      tabIndexMap.clear();
+    } else {
+      for (let index = 0; index < elements.length; index++) {
+        tabIndexMap.set(elements[index].id, elements[index].tabIndex);
+        elements[index].tabIndex = -1;
+      }
+    }
+  }
+};
+
+exports.setTabIndices = setTabIndices;
+
+const findParentFocusableElementsWithoutChildContainer = elementId => {
+  const childContainer = document.getElementById(elementId);
+
+  if (!childContainer) {
+    return null;
+  }
+
+  const parentContainer = childContainer.parentElement;
+
+  if (!parentContainer) {
+    return null;
+  }
+
+  const parentFocusableElements = findAllFocusableElement(parentContainer);
+
+  if (!parentFocusableElements) {
+    return null;
+  }
+
+  for (let index = 0; index < parentFocusableElements.length; index++) {
+    if (childContainer.contains(parentFocusableElements[index])) {
+      parentFocusableElements.splice(index, 1);
+      index--;
+    }
+  }
+
+  return parentFocusableElements;
+};
+
+exports.findParentFocusableElementsWithoutChildContainer = findParentFocusableElementsWithoutChildContainer;
+
+const findAllFocusableElement = parent => {
+  const container = getElementBySelector(parent);
+
+  if (container !== null) {
+    return Array.prototype.slice.call(container.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex=\"0\"]"));
+  }
+
+  return null;
+};
+
+exports.findAllFocusableElement = findAllFocusableElement;
+
+const preventFocusToMoveOutOfElement = elementId => {
+  const container = document.getElementById(elementId);
+
+  if (!container) {
+    return;
+  }
+
+  const focusableElements = findAllFocusableElement(container);
+
+  if (!focusableElements) {
+    return;
+  }
+
+  const firstFocusableElement = focusableElements[0];
+  const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+  firstFocusableElement.onkeydown = e => {
+    if (e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
+      e.preventDefault();
+      lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
+    }
+  };
+
+  lastFocusableElement.onkeydown = e => {
+    if (!e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
+      e.preventDefault();
+      firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
+    }
+  };
+};
+
+exports.preventFocusToMoveOutOfElement = preventFocusToMoveOutOfElement;
+
+const setFocusOnSendBox = () => {
+  const sendBoxSelector = "textarea[data-id=\"webchat-sendbox-input\"]";
+  setFocusOnElement(sendBoxSelector);
+};
+
+exports.setFocusOnSendBox = setFocusOnSendBox;
+
+const setFocusOnElement = selector => {
+  const element = getElementBySelector(selector);
+  element === null || element === void 0 ? void 0 : element.focus();
+};
+
+exports.setFocusOnElement = setFocusOnElement;
+
+const escapeHtml = inputString => {
+  const entityMap = {
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "'": "&#39;",
+    "/": "&#x2F;"
+  };
+  return String(inputString).replace(/[<>"'/]/g, s => {
+    return entityMap[s];
+  });
+};
+
+exports.escapeHtml = escapeHtml;
+
+const getIconText = text => {
+  if (text) {
+    const initials = text.split(/\s/).reduce((response, word) => response += word.slice(0, 1), "");
+
+    if (initials.length > 1) {
+      return initials.substring(0, 2).toUpperCase();
+    } else {
+      return text.substring(0, 2).toUpperCase();
+    }
+  }
+
+  return "";
+};
+
+exports.getIconText = getIconText;
+
+const getLocaleDirection = localeLCID => {
+  return _Constants.LocaleConstants.RTL_LOCALES.indexOf(localeLCID) === -1 ? "ltr" : "rtl";
+};
+
+exports.getLocaleDirection = getLocaleDirection;
+
+const changeLanguageCodeFormatForWebChat = languageCode => {
+  return languageCode.slice(0, -2) + languageCode.slice(-2).toUpperCase();
+};
+
+exports.changeLanguageCodeFormatForWebChat = changeLanguageCodeFormatForWebChat;
+
+const getTimestampHourMinute = timestampStr => {
+  let yearFormat;
+  let monthDayFormat;
+  const hourFormat = "numeric";
+  const minuteFormat = "2-digit";
+  const date = new Date(timestampStr);
+  const now = new Date();
+
+  if (isNaN(date.getTime())) {
+    return "";
+  }
+
+  if (date.getFullYear() !== now.getFullYear()) {
+    yearFormat = "numeric";
+    monthDayFormat = "2-digit";
+  }
+
+  if (date.getMonth() !== now.getMonth() || date.getDate() !== now.getDate()) {
+    monthDayFormat = "2-digit";
+  }
+
+  return date.toLocaleTimeString(navigator.language, {
+    year: yearFormat,
+    month: monthDayFormat,
+    day: monthDayFormat,
+    hour: hourFormat,
+    minute: minuteFormat
+  });
+};
+
+exports.getTimestampHourMinute = getTimestampHourMinute;
+
+const parseAdaptiveCardPayload = (payload, requiredFieldMissingMessage) => {
+  if (payload && payload !== "{}") {
+    try {
+      const parsedPayload = JSON.parse(payload.replace(/&#42;/g, "*"));
+      const body = parsedPayload.body;
+
+      if (body) {
+        //Parse ID field into available options and add required error messages
+        for (const fields of body) {
+          if (fields.id && fields.id.includes(":")) {
+            const parsedId = JSON.parse(fields.id);
+            fields.id = parsedId.Id;
+            fields.isRequired = parsedId.IsRequired ?? false;
+
+            if (fields.isRequired) {
+              fields.errorMessage = requiredFieldMissingMessage.replace("{0}", parsedId.Name ?? "");
+            }
+          }
+        }
+      }
+
+      return JSON.stringify(parsedPayload);
+    } catch (ex) {
+      throw new Error(`Adaptive card pase error: ${ex}`);
+    }
+  }
+
+  return payload;
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.parseAdaptiveCardPayload = parseAdaptiveCardPayload;
+
+const extractPreChatSurveyResponseValues = (preChatSurvey, values) => {
+  if (preChatSurvey && preChatSurvey !== "{}" && values) {
+    try {
+      const parsedSurvey = JSON.parse(preChatSurvey);
+      const body = parsedSurvey.body;
+      const type = {
+        "Type": _Constants.Constants.InputSubmit
+      };
+      const computedValues = [];
+
+      for (const val of values) {
+        const index = val.index;
+        const Id = body[index].id;
+        computedValues[Id] = val.value;
+      }
+
+      const finalPayload = { ...type,
+        ...computedValues
+      };
+      return finalPayload;
+    } catch (ex) {
+      throw new Error(`PreChatSurvey Response parse error: ${ex}`);
+    }
+  }
+
+  return {};
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.extractPreChatSurveyResponseValues = extractPreChatSurveyResponseValues;
+
+const isNullOrUndefined = obj => {
+  return obj === null || obj === undefined;
+};
+
+exports.isNullOrUndefined = isNullOrUndefined;
+
+const isNullOrEmptyString = s => {
+  return isNullOrUndefined(s) || s === "";
+};
+
+exports.isNullOrEmptyString = isNullOrEmptyString;
+
+const newGuid = () => {
+  //RFC 4122 canonical representation Version-4 xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx where x is any hexadecimal digit and y is one of 8, 9, A, or B
+  const guidPattern = _Constants.Constants.GuidPattern;
+  let newGuid = "";
+
+  for (let i = 0; i < guidPattern.length; i++) {
+    const randomString = Math.floor(Math.random() * Date.now());
+
+    switch (guidPattern[i]) {
+      case "x":
+        newGuid += randomString.toString(16).substring(0, 4);
+        break;
+      //get 4 digit
+
+      case "m":
+        newGuid += randomString.toString(16).substring(0, 3);
+        break;
+      //Get 3 digit
+
+      case "y":
+        newGuid += (randomString & 0x3 | 0x8).toString(16);
+        break;
+      // To get only one of 8, 9, A, or B
+
+      default:
+        newGuid += guidPattern[i];
+      //Default "-" and "4"
+    }
+  }
+
+  return newGuid;
+};
+
+exports.newGuid = newGuid;
+
+const createTimer = () => {
+  const timeStart = new Date().getTime();
+  return {
+    get milliSecondsElapsed() {
+      const ms = new Date().getTime() - timeStart;
+      return ms;
+    }
+
+  };
+};
+
+exports.createTimer = createTimer;

package/lib/cjs/components/callingcontainerstateful/CallingContainerStateful.js

@@ -0,0 +1,361 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CallingContainerStateful = void 0;
+
+var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
+var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
+
+var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
+
+var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
+
+var _useChatSDKStore = _interopRequireDefault(require("../../hooks/useChatSDKStore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const CallingContainerStateful = props => {
+  var _props$controlProps, _props$controlProps2, _props$controlProps2$, _props$controlProps3, _props$controlProps3$, _props$controlProps3$2, _props$controlProps4, _props$controlProps4$, _props$controlProps4$2, _props$controlProps5;
+
+  //TODO : Close button confirmation implmentation is pending
+  const [state, dispatch] = (0, _useChatContextStore.default)(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const chatSDK = (0, _useChatSDKStore.default)(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const {
+    voiceVideoCallingSdk
+  } = props;
+  let callId;
+
+  const resetCallingStates = reset => {
+    if (reset) {
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SHOW_CALLING_CONTAINER,
+        payload: false
+      });
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_INCOMING_CALL,
+        payload: true
+      });
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+        payload: true
+      });
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+        payload: true
+      });
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+        payload: true
+      });
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    const init = async () => {
+      try {
+        var _controlProps$current, _controlProps$current2, _controlProps$current3, _controlProps$current4;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _TelemetryHelper.TelemetryHelper.callId = callId;
+        await voiceVideoCallingSdk.initialize({
+          chatToken: state.domainStates.chatToken,
+          selfVideoHTMLElementId: (_controlProps$current = controlProps.currentCallControlProps) === null || _controlProps$current === void 0 ? void 0 : (_controlProps$current2 = _controlProps$current.nonActionIds) === null || _controlProps$current2 === void 0 ? void 0 : _controlProps$current2.selfVideoTileId,
+          // HTML element id where video stream of the agent will be rendered
+          remoteVideoHTMLElementId: (_controlProps$current3 = controlProps.currentCallControlProps) === null || _controlProps$current3 === void 0 ? void 0 : (_controlProps$current4 = _controlProps$current3.nonActionIds) === null || _controlProps$current4 === void 0 ? void 0 : _controlProps$current4.remoteVideoTileId,
+          // HTML element id where video stream of the customer will be rendered
+          OCClient: chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.OCClient
+        });
+      } catch (e) {
+        _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.ERROR, {
+          Event: _TelemetryConstants.TelemetryEvent.VoiceVideoInitializeException,
+          Description: `Failed to initialize VideoVoiceCalling Sdk:  ${e}`
+        });
+      }
+    };
+
+    init().then(() => {
+      if (voiceVideoCallingSdk) {
+        _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+          Event: _TelemetryConstants.TelemetryEvent.VoiceVideoInitialize,
+          Description: "Initialize VideoVoiceCalling Sdk Success"
+        }, callId);
+
+        voiceVideoCallingSdk.onCallAdded(() => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callId = voiceVideoCallingSdk.callId;
+
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.CallAdded
+          }, callId);
+
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SHOW_CALLING_CONTAINER,
+            payload: true
+          });
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_INCOMING_CALL,
+            payload: true
+          });
+        });
+        voiceVideoCallingSdk.onRemoteVideoStreamAdded(() => {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.RemoteVideoStreamAdded
+          }, callId);
+
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+            payload: false
+          });
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onLocalVideoStreamAdded(() => {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.LocalVideoStreamAdded
+          }, callId);
+
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+            payload: false
+          });
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onRemoteVideoStreamRemoved(() => {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.RemoteVideoStreamRemoved
+          }, callId);
+
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+
+          if (isRemoteVideoDisabled && isLocalVideoDisabled) {
+            dispatch({
+              type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+              payload: true
+            });
+          }
+
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onLocalVideoStreamRemoved(() => {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.LocalVideoStreamRemoved
+          }, callId);
+
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+
+          if (isRemoteVideoDisabled && isLocalVideoDisabled) {
+            dispatch({
+              type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+              payload: true
+            });
+          }
+
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onCallDisconnected(() => {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.CallDisconnected
+          }, callId);
+
+          resetCallingStates(true);
+        });
+        voiceVideoCallingSdk.addEventListener(_TelemetryConstants.TelemetryEvent.IncomingCallEnded, () => {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.IncomingCallEnded
+          }, callId);
+
+          resetCallingStates(true);
+        });
+      }
+    });
+  }, []);
+  const controlProps = {
+    id: "oc-lcw-callingcontainer",
+    dir: state.domainStates.globalDir,
+    isIncomingCall: state.uiStates.isIncomingCall,
+    hideCallingContainer: state.appStates.isMinimized ? true : false,
+    ...(props === null || props === void 0 ? void 0 : props.controlProps),
+    incomingCallControlProps: {
+      onDeclineCallClick: (0, _react.useCallback)(async () => {
+        try {
+          voiceVideoCallingSdk.rejectCall();
+
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.CallRejectClick
+          }, callId);
+
+          resetCallingStates(true);
+        } catch (error) {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.ERROR, {
+            Event: _TelemetryConstants.TelemetryEvent.CallRejectClickException,
+            ExceptionDetails: {
+              exception: `Failed to reject call:  ${error}`
+            }
+          }, callId);
+        }
+      }, [voiceVideoCallingSdk]),
+      onAudioCallClick: (0, _react.useCallback)(() => {
+        try {
+          voiceVideoCallingSdk.acceptCall({
+            withVideo: false
+          });
+
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.VoiceCallAcceptButtonClick
+          }, callId);
+        } catch (err) {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.ERROR, {
+            Event: _TelemetryConstants.TelemetryEvent.VoiceVideoAcceptCallException,
+            ExceptionDetails: {
+              exception: `Failed to accept call without video:  ${err}`
+            }
+          }, callId);
+        }
+
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_INCOMING_CALL,
+          payload: false
+        });
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+          payload: true
+        });
+      }, []),
+      onVideoCallClick: (0, _react.useCallback)(() => {
+        try {
+          voiceVideoCallingSdk.acceptCall({
+            withVideo: true
+          });
+
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.VideoCallAcceptButtonClick
+          }, callId);
+        } catch (err) {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.ERROR, {
+            Event: _TelemetryConstants.TelemetryEvent.VoiceVideoAcceptCallWithVideoException,
+            ExceptionDetails: {
+              exception: `Failed to accept call with video:  ${err}`
+            }
+          }, callId);
+        }
+
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_INCOMING_CALL,
+          payload: false
+        });
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+          payload: false
+        });
+      }, []),
+      ...(props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.incomingCallControlProps)
+    },
+    currentCallControlProps: {
+      hideCallTimer: true,
+      onEndCallClick: (0, _react.useCallback)(() => {
+        try {
+          voiceVideoCallingSdk.stopCall();
+
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.EndCallButtonClick
+          }, callId);
+
+          resetCallingStates(true);
+        } catch (error) {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.ERROR, {
+            Event: _TelemetryConstants.TelemetryEvent.EndCallButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to End Call:  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      onMicCallClick: (0, _react.useCallback)(() => {
+        try {
+          voiceVideoCallingSdk.toggleMute();
+
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.ToggleMuteButtonClick
+          }, callId);
+        } catch (error) {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.ERROR, {
+            Event: _TelemetryConstants.TelemetryEvent.ToggleMuteButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to toggle mute button :  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      onVideoOffClick: (0, _react.useCallback)(() => {
+        try {
+          voiceVideoCallingSdk.toggleLocalVideo();
+
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.ToggleCameraButtonClick
+          }, callId);
+        } catch (error) {
+          _TelemetryHelper.TelemetryHelper.logCallingEvent(_TelemetryConstants.LogLevel.ERROR, {
+            Event: _TelemetryConstants.TelemetryEvent.ToggleCameraButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to toggle video button :  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      nonActionIds: { ...(props === null || props === void 0 ? void 0 : (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : (_props$controlProps2$ = _props$controlProps2.currentCallControlProps) === null || _props$controlProps2$ === void 0 ? void 0 : _props$controlProps2$.nonActionIds),
+        selfVideoTileId: (props === null || props === void 0 ? void 0 : (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : (_props$controlProps3$ = _props$controlProps3.currentCallControlProps) === null || _props$controlProps3$ === void 0 ? void 0 : (_props$controlProps3$2 = _props$controlProps3$.nonActionIds) === null || _props$controlProps3$2 === void 0 ? void 0 : _props$controlProps3$2.selfVideoTileId) ?? "selfVideo",
+        remoteVideoTileId: (props === null || props === void 0 ? void 0 : (_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : (_props$controlProps4$ = _props$controlProps4.currentCallControlProps) === null || _props$controlProps4$ === void 0 ? void 0 : (_props$controlProps4$2 = _props$controlProps4$.nonActionIds) === null || _props$controlProps4$2 === void 0 ? void 0 : _props$controlProps4$2.remoteVideoTileId) ?? "remoteVideo"
+      },
+      videoCallDisabled: state.uiStates.disableVideoCall,
+      selfVideoDisabled: state.uiStates.disableSelfVideo,
+      remoteVideoDisabled: state.uiStates.disableRemoteVideo,
+      ...(props === null || props === void 0 ? void 0 : (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.currentCallControlProps)
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, state.uiStates.showCallingPopup && /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.CallingContainer, {
+    controlProps: controlProps,
+    styleProps: props === null || props === void 0 ? void 0 : props.styleProps
+  }));
+};
+
+exports.CallingContainerStateful = CallingContainerStateful;
+var _default = CallingContainerStateful;
+exports.default = _default;

package/lib/cjs/components/callingcontainerstateful/ICallingContainerStatefulProps.js

@@ -0,0 +1 @@
+"use strict";