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

package/lib/esm/common/telemetry/loggers/consoleLogger.js

@@ -0,0 +1,36 @@
+import { Constants } from "../../Constants";
+import { LogLevel } from "../TelemetryConstants";
+export const consoleLogger = () => {
+  const consoleLogger = {
+    log: (logLevel, telemetryInput) => {
+      const payload = telemetryInput !== null && telemetryInput !== void 0 && telemetryInput.payload && Object.keys(telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.payload).length > 0 ? telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.payload : "";
+
+      try {
+        switch (logLevel) {
+          case LogLevel.INFO:
+            console.info(Constants.LiveChatWidget, payload);
+            break;
+
+          case LogLevel.DEBUG:
+            console.debug(Constants.LiveChatWidget, payload);
+            break;
+
+          case LogLevel.WARN:
+            console.warn(Constants.LiveChatWidget, payload);
+            break;
+
+          case LogLevel.ERROR:
+            console.error(Constants.LiveChatWidget, payload);
+            break;
+
+          default:
+            console.debug(Constants.LiveChatWidget, payload);
+            break;
+        }
+      } catch (ex) {
+        console.error("An unexpected error occurred in the Telemetry client: " + ex);
+      }
+    }
+  };
+  return consoleLogger;
+};

package/lib/esm/common/utils.js

@@ -0,0 +1,279 @@
+import { Constants, LocaleConstants } from "./Constants";
+import { KeyCodes } from "./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
+
+
+export 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;
+      }
+    }
+  }
+};
+export 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;
+};
+export 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;
+};
+export 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.TAB) {
+      e.preventDefault();
+      lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
+    }
+  };
+
+  lastFocusableElement.onkeydown = e => {
+    if (!e.shiftKey && e.key === KeyCodes.TAB) {
+      e.preventDefault();
+      firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
+    }
+  };
+};
+export const setFocusOnSendBox = () => {
+  const sendBoxSelector = "textarea[data-id=\"webchat-sendbox-input\"]";
+  setFocusOnElement(sendBoxSelector);
+};
+export const setFocusOnElement = selector => {
+  const element = getElementBySelector(selector);
+  element === null || element === void 0 ? void 0 : element.focus();
+};
+export const escapeHtml = inputString => {
+  const entityMap = {
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "'": "&#39;",
+    "/": "&#x2F;"
+  };
+  return String(inputString).replace(/[<>"'/]/g, s => {
+    return entityMap[s];
+  });
+};
+export 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 "";
+};
+export const getLocaleDirection = localeLCID => {
+  return LocaleConstants.RTL_LOCALES.indexOf(localeLCID) === -1 ? "ltr" : "rtl";
+};
+export const changeLanguageCodeFormatForWebChat = languageCode => {
+  return languageCode.slice(0, -2) + languageCode.slice(-2).toUpperCase();
+};
+export 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
+  });
+};
+export 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
+
+export const extractPreChatSurveyResponseValues = (preChatSurvey, values) => {
+  if (preChatSurvey && preChatSurvey !== "{}" && values) {
+    try {
+      const parsedSurvey = JSON.parse(preChatSurvey);
+      const body = parsedSurvey.body;
+      const type = {
+        "Type": 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
+
+export const isNullOrUndefined = obj => {
+  return obj === null || obj === undefined;
+};
+export const isNullOrEmptyString = s => {
+  return isNullOrUndefined(s) || s === "";
+};
+export 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.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;
+};
+export const createTimer = () => {
+  const timeStart = new Date().getTime();
+  return {
+    get milliSecondsElapsed() {
+      const ms = new Date().getTime() - timeStart;
+      return ms;
+    }
+
+  };
+};

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

@@ -0,0 +1,321 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useCallback, useEffect } from "react";
+import { CallingContainer } from "@microsoft/omnichannel-chat-components";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import useChatSDKStore from "../../hooks/useChatSDKStore";
+export 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] = useChatContextStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const chatSDK = useChatSDKStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const {
+    voiceVideoCallingSdk
+  } = props;
+  let callId;
+
+  const resetCallingStates = reset => {
+    if (reset) {
+      dispatch({
+        type: LiveChatWidgetActionType.SHOW_CALLING_CONTAINER,
+        payload: false
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+        payload: true
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+        payload: true
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+        payload: true
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+        payload: true
+      });
+    }
+  };
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        var _controlProps$current, _controlProps$current2, _controlProps$current3, _controlProps$current4;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        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.logCallingEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.VoiceVideoInitializeException,
+          Description: `Failed to initialize VideoVoiceCalling Sdk:  ${e}`
+        });
+      }
+    };
+
+    init().then(() => {
+      if (voiceVideoCallingSdk) {
+        TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.VoiceVideoInitialize,
+          Description: "Initialize VideoVoiceCalling Sdk Success"
+        }, callId);
+        voiceVideoCallingSdk.onCallAdded(() => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callId = voiceVideoCallingSdk.callId;
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.CallAdded
+          }, callId);
+          dispatch({
+            type: LiveChatWidgetActionType.SHOW_CALLING_CONTAINER,
+            payload: true
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+            payload: true
+          });
+        });
+        voiceVideoCallingSdk.onRemoteVideoStreamAdded(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.RemoteVideoStreamAdded
+          }, callId);
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+            payload: false
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onLocalVideoStreamAdded(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.LocalVideoStreamAdded
+          }, callId);
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+            payload: false
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onRemoteVideoStreamRemoved(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.RemoteVideoStreamRemoved
+          }, callId);
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+
+          if (isRemoteVideoDisabled && isLocalVideoDisabled) {
+            dispatch({
+              type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+              payload: true
+            });
+          }
+
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onLocalVideoStreamRemoved(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.LocalVideoStreamRemoved
+          }, callId);
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+
+          if (isRemoteVideoDisabled && isLocalVideoDisabled) {
+            dispatch({
+              type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+              payload: true
+            });
+          }
+
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onCallDisconnected(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.CallDisconnected
+          }, callId);
+          resetCallingStates(true);
+        });
+        voiceVideoCallingSdk.addEventListener(TelemetryEvent.IncomingCallEnded, () => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: 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: useCallback(async () => {
+        try {
+          voiceVideoCallingSdk.rejectCall();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.CallRejectClick
+          }, callId);
+          resetCallingStates(true);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.CallRejectClickException,
+            ExceptionDetails: {
+              exception: `Failed to reject call:  ${error}`
+            }
+          }, callId);
+        }
+      }, [voiceVideoCallingSdk]),
+      onAudioCallClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.acceptCall({
+            withVideo: false
+          });
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.VoiceCallAcceptButtonClick
+          }, callId);
+        } catch (err) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.VoiceVideoAcceptCallException,
+            ExceptionDetails: {
+              exception: `Failed to accept call without video:  ${err}`
+            }
+          }, callId);
+        }
+
+        dispatch({
+          type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+          payload: false
+        });
+        dispatch({
+          type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+          payload: true
+        });
+      }, []),
+      onVideoCallClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.acceptCall({
+            withVideo: true
+          });
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.VideoCallAcceptButtonClick
+          }, callId);
+        } catch (err) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.VoiceVideoAcceptCallWithVideoException,
+            ExceptionDetails: {
+              exception: `Failed to accept call with video:  ${err}`
+            }
+          }, callId);
+        }
+
+        dispatch({
+          type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+          payload: false
+        });
+        dispatch({
+          type: 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: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.stopCall();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.EndCallButtonClick
+          }, callId);
+          resetCallingStates(true);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.EndCallButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to End Call:  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      onMicCallClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.toggleMute();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.ToggleMuteButtonClick
+          }, callId);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.ToggleMuteButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to toggle mute button :  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      onVideoOffClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.toggleLocalVideo();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.ToggleCameraButtonClick
+          }, callId);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: 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.createElement(React.Fragment, null, state.uiStates.showCallingPopup && /*#__PURE__*/React.createElement(CallingContainer, {
+    controlProps: controlProps,
+    styleProps: props === null || props === void 0 ? void 0 : props.styleProps
+  }));
+};
+export default CallingContainerStateful;

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

@@ -0,0 +1 @@
+export {};