@microsoft/omnichannel-chat-components 0.1.0-1

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/common/defaultStyles/customizedCurrentCallStyleProps.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.customizedCurrentCallStyleProps = void 0;
+const customizedCurrentCallStyleProps = {
+  generalStyleProps: {
+    background: "lightgrey",
+    minHeight: "80px",
+    borderRadius: "0 0 3px 3px"
+  },
+  micButtonStyleProps: {
+    borderRadius: "50%",
+    borderWidth: "1px",
+    borderStyle: "double",
+    borderColor: "blue",
+    color: "blue",
+    backgroundColor: "white",
+    lineHeight: "50px",
+    height: "50px",
+    width: "50px",
+    margin: "1px"
+  },
+  micButtonHoverStyleProps: {
+    filter: "brightness(0.8)"
+  },
+  videoOffButtonStyleProps: {
+    borderRadius: "50%",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "blue",
+    color: "blue",
+    backgroundColor: "white",
+    height: "50px",
+    width: "50px",
+    margin: "1px"
+  },
+  videoOffButtonHoverStyleProps: {
+    filter: "brightness(0.8)"
+  },
+  endCallButtonHoverStyleProps: {
+    filter: "brightness(0.8)"
+  },
+  endCallButtonStyleProps: {
+    borderRadius: "50%",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "red",
+    color: "white",
+    backgroundColor: "red",
+    height: "50px",
+    width: "50px",
+    margin: "1px"
+  },
+  videoTileStyleProps: {
+    minHeight: "180px",
+    height: "300px",
+    backgroundColor: "transparent",
+    width: "100%",
+    maxWidth: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+    position: "relative"
+  },
+  remoteVideoStyleProps: {
+    height: "100%",
+    width: "100%",
+    overflow: "hidden",
+    backgroundColor: "#8ab2f2"
+  },
+  selfVideoStyleProps: {
+    position: "absolute",
+    left: "8px",
+    bottom: "8px",
+    width: "80px",
+    height: "60px",
+    overflow: "hidden",
+    borderRadius: "2px",
+    backgroundColor: "aliceblue"
+  },
+  itemFocusStyleProps: {
+    border: "2px dotted blue"
+  }
+};
+exports.customizedCurrentCallStyleProps = customizedCurrentCallStyleProps;

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/common/defaultStyles/defaultCurrentCallStyleProps.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCurrentCallStyleProps = void 0;
+const defaultCurrentCallStyleProps = {
+  generalStyleProps: {
+    background: "#292828",
+    minHeight: "55px",
+    width: "100%",
+    borderRadius: "0 0 3px 3px"
+  },
+  micButtonStyleProps: {
+    borderRadius: "2px",
+    color: "#FFFFFF",
+    backgroundColor: "#3d3c3c",
+    height: "45px",
+    width: "50px",
+    margin: "1px"
+  },
+  micButtonHoverStyleProps: {
+    filter: "brightness(0.8)"
+  },
+  videoOffButtonStyleProps: {
+    borderRadius: "2px",
+    color: "#FFFFFF",
+    backgroundColor: "#3d3c3c",
+    height: "45px",
+    width: "50px",
+    margin: "1px"
+  },
+  videoOffButtonHoverStyleProps: {
+    filter: "brightness(0.8)"
+  },
+  endCallButtonHoverStyleProps: {
+    filter: "brightness(0.8)"
+  },
+  endCallButtonStyleProps: {
+    borderRadius: "2px",
+    color: "#FFFFFF",
+    backgroundColor: "#DC0000",
+    lineHeight: "50px",
+    height: "45px",
+    width: "50px",
+    fontSize: "18px"
+  },
+  videoTileStyleProps: {
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+    position: "relative"
+  },
+  videoTileStyleWithVideoProps: {
+    minHeight: "180px",
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+    position: "relative"
+  },
+  remoteVideoStyleProps: {
+    height: "100%",
+    width: "100%",
+    overflow: "hidden"
+  },
+  selfVideoStyleProps: {
+    position: "absolute",
+    right: "8px",
+    bottom: "8px",
+    width: "80px",
+    minHeight: "50px",
+    overflow: "hidden",
+    borderRadius: "2px"
+  },
+  selfVideoMaximizeStyleProps: {
+    position: "relative",
+    width: "100%",
+    minHeight: "50px",
+    overflow: "hidden",
+    borderRadius: "2px"
+  },
+  itemFocusStyleProps: {
+    outline: "2px solid #fff"
+  }
+};
+exports.defaultCurrentCallStyleProps = defaultCurrentCallStyleProps;

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/interfaces/ICurrentCallClassNames.js

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

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/interfaces/ICurrentCallComponentOverrides.js

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

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/interfaces/ICurrentCallControlProps.js

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

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/interfaces/ICurrentCallNonActionControlIds.js

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

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/interfaces/ICurrentCallProps.js

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

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/interfaces/ICurrentCallStyleProps.js

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

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/IncomingCall.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@fluentui/react");
+
+var _CommandButton = _interopRequireDefault(require("../../../common/commandbutton/CommandButton"));
+
+var _Constants = require("../../../../common/Constants");
+
+var _decodeComponentString = require("../../../../common/decodeComponentString");
+
+var _defaultIncomingCallProps = require("./common/defaultProps/defaultIncomingCallProps");
+
+var _utils = require("../../../../common/utils");
+
+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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function IncomingCall(props) {
+  var _props$controlProps, _defaultIncomingCallP, _props$controlProps2, _props$controlProps2$, _defaultIncomingCallP2, _defaultIncomingCallP3, _props$controlProps3, _props$controlProps3$, _defaultIncomingCallP4, _defaultIncomingCallP5, _props$controlProps4, _props$controlProps4$, _defaultIncomingCallP6, _defaultIncomingCallP7, _defaultIncomingCallP8, _props$styleProps, _props$controlProps5, _props$controlProps5$, _defaultIncomingCallP9, _defaultIncomingCallP10, _props$controlProps6, _props$controlProps6$, _defaultIncomingCallP11, _defaultIncomingCallP12, _props$controlProps7, _props$controlProps7$, _defaultIncomingCallP13, _defaultIncomingCallP14, _defaultIncomingCallP15, _props$controlProps8, _defaultIncomingCallP16, _props$controlProps9, _defaultIncomingCallP17, _props$controlProps10, _defaultIncomingCallP18, _props$controlProps11, _defaultIncomingCallP19, _props$styleProps2, _defaultIncomingCallP20, _props$styleProps3, _defaultIncomingCallP21, _props$styleProps4, _defaultIncomingCallP22, _props$styleProps5, _defaultIncomingCallP23, _props$styleProps6, _defaultIncomingCallP24, _props$styleProps7, _defaultIncomingCallP25, _props$styleProps8, _defaultIncomingCallP26, _props$styleProps9, _props$styleProps10, _props$controlProps18, _defaultIncomingCallP27, _props$controlProps19, _props$componentOverr, _props$controlProps20, _props$controlProps21, _props$controlProps22, _props$controlProps23, _props$controlProps24, _props$controlProps25, _props$controlProps26, _props$controlProps27, _props$controlProps28;
+
+  const incomingCallId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? ((_defaultIncomingCallP = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP === void 0 ? void 0 : _defaultIncomingCallP.id);
+  const declineCallButtonId = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : (_props$controlProps2$ = _props$controlProps2.declineCallButtonProps) === null || _props$controlProps2$ === void 0 ? void 0 : _props$controlProps2$.id) ?? ((_defaultIncomingCallP2 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP2 === void 0 ? void 0 : (_defaultIncomingCallP3 = _defaultIncomingCallP2.declineCallButtonProps) === null || _defaultIncomingCallP3 === void 0 ? void 0 : _defaultIncomingCallP3.id);
+  const audioCallButtonId = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : (_props$controlProps3$ = _props$controlProps3.audioCallButtonProps) === null || _props$controlProps3$ === void 0 ? void 0 : _props$controlProps3$.id) ?? ((_defaultIncomingCallP4 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP4 === void 0 ? void 0 : (_defaultIncomingCallP5 = _defaultIncomingCallP4.audioCallButtonProps) === null || _defaultIncomingCallP5 === void 0 ? void 0 : _defaultIncomingCallP5.id);
+  const videoCallButtonId = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : (_props$controlProps4$ = _props$controlProps4.videoCallButtonProps) === null || _props$controlProps4$ === void 0 ? void 0 : _props$controlProps4$.id) ?? ((_defaultIncomingCallP6 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP6 === void 0 ? void 0 : (_defaultIncomingCallP7 = _defaultIncomingCallP6.videoCallButtonProps) === null || _defaultIncomingCallP7 === void 0 ? void 0 : _defaultIncomingCallP7.id);
+  const stackStyles = {
+    root: Object.assign({}, (_defaultIncomingCallP8 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP8 === void 0 ? void 0 : _defaultIncomingCallP8.generalStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
+  };
+  const leftGroupStackTokens = {
+    childrenGap: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : (_props$controlProps5$ = _props$controlProps5.leftGroup) === null || _props$controlProps5$ === void 0 ? void 0 : _props$controlProps5$.gap) ?? ((_defaultIncomingCallP9 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP9 === void 0 ? void 0 : (_defaultIncomingCallP10 = _defaultIncomingCallP9.leftGroup) === null || _defaultIncomingCallP10 === void 0 ? void 0 : _defaultIncomingCallP10.gap)
+  };
+  const rightGroupStackTokens = {
+    childrenGap: ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : (_props$controlProps6$ = _props$controlProps6.rightGroup) === null || _props$controlProps6$ === void 0 ? void 0 : _props$controlProps6$.gap) ?? ((_defaultIncomingCallP11 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP11 === void 0 ? void 0 : (_defaultIncomingCallP12 = _defaultIncomingCallP11.rightGroup) === null || _defaultIncomingCallP12 === void 0 ? void 0 : _defaultIncomingCallP12.gap)
+  };
+  const middleGroupStackTokens = {
+    childrenGap: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : (_props$controlProps7$ = _props$controlProps7.middleGroup) === null || _props$controlProps7$ === void 0 ? void 0 : _props$controlProps7$.gap) ?? ((_defaultIncomingCallP13 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP13 === void 0 ? void 0 : (_defaultIncomingCallP14 = _defaultIncomingCallP13.middleGroup) === null || _defaultIncomingCallP14 === void 0 ? void 0 : _defaultIncomingCallP14.gap)
+  };
+  const declineCallButtonProps = Object.assign({}, (_defaultIncomingCallP15 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP15 === void 0 ? void 0 : _defaultIncomingCallP15.declineCallButtonProps, (_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.declineCallButtonProps);
+  const videoCallButtonProps = Object.assign({}, (_defaultIncomingCallP16 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP16 === void 0 ? void 0 : _defaultIncomingCallP16.videoCallButtonProps, (_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.videoCallButtonProps);
+  const audioCallButtonProps = Object.assign({}, (_defaultIncomingCallP17 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP17 === void 0 ? void 0 : _defaultIncomingCallP17.audioCallButtonProps, (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.audioCallButtonProps);
+  const incomingCallTitleProps = Object.assign({}, (_defaultIncomingCallP18 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP18 === void 0 ? void 0 : _defaultIncomingCallP18.incomingCallTitle, (_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.incomingCallTitle);
+  const declineCallButtonStyles = Object.assign({}, (_defaultIncomingCallP19 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP19 === void 0 ? void 0 : _defaultIncomingCallP19.declineCallButtonStyleProps, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.declineCallButtonStyleProps);
+  const declineCallButtonHoverStyles = Object.assign({}, (_defaultIncomingCallP20 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP20 === void 0 ? void 0 : _defaultIncomingCallP20.declineCallButtonHoverStyleProps, (_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.declineCallButtonHoverStyleProps);
+  const videoCallButtonStyles = Object.assign({}, (_defaultIncomingCallP21 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP21 === void 0 ? void 0 : _defaultIncomingCallP21.videoCallButtonStyleProps, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.videoCallButtonStyleProps);
+  const videoCallButtonHoverStyles = Object.assign({}, (_defaultIncomingCallP22 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP22 === void 0 ? void 0 : _defaultIncomingCallP22.videoCallButtonHoverStyleProps, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.videoCallButtonHoverStyleProps);
+  const audioCallButtonStyles = Object.assign({}, (_defaultIncomingCallP23 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP23 === void 0 ? void 0 : _defaultIncomingCallP23.audioCallButtonStyleProps, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.audioCallButtonStyleProps);
+  const audioCallButtonHoverStyles = Object.assign({}, (_defaultIncomingCallP24 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP24 === void 0 ? void 0 : _defaultIncomingCallP24.audioCallButtonHoverStyleProps, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.audioCallButtonHoverStyleProps);
+  const incomingCallTitleStyles = {
+    root: Object.assign({}, (_defaultIncomingCallP25 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP25 === void 0 ? void 0 : _defaultIncomingCallP25.incomingCallTitleStyleProps, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.incomingCallTitleStyleProps)
+  };
+  const incomingCallItemFocusStyles = Object.assign({}, (_defaultIncomingCallP26 = _defaultIncomingCallProps.defaultIncomingCallProps.styleProps) === null || _defaultIncomingCallP26 === void 0 ? void 0 : _defaultIncomingCallP26.itemFocusStyleProps, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.itemFocusStyleProps);
+  const declineCustomEvent = {
+    elementType: _Constants.ElementType.IncomingCallDeclineCallButton,
+    elementId: declineCallButtonId,
+    eventName: "incomingCallEnded"
+  };
+  const handleDeclineCallClick = (0, React.useCallback)(() => {
+    var _props$controlProps12;
+
+    if ((_props$controlProps12 = props.controlProps) !== null && _props$controlProps12 !== void 0 && _props$controlProps12.onDeclineCallClick) {
+      var _props$controlProps13;
+
+      (_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.onDeclineCallClick();
+    }
+  }, []);
+  const videoCustomEvent = {
+    elementType: _Constants.ElementType.IncomingCallVideoCallButton,
+    elementId: videoCallButtonId,
+    eventName: "OnClick"
+  };
+  const handleVideoCallClick = (0, React.useCallback)(() => {
+    var _props$controlProps14;
+
+    if ((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.onVideoCallClick) {
+      var _props$controlProps15;
+
+      (_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.onVideoCallClick();
+    }
+  }, []);
+  const audioCustomEvent = {
+    elementType: _Constants.ElementType.IncomingCallAudioCallButton,
+    elementId: audioCallButtonId,
+    eventName: "OnClick"
+  };
+  const handleAudioCallClick = (0, React.useCallback)(() => {
+    var _props$controlProps16;
+
+    if ((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.onAudioCallClick) {
+      var _props$controlProps17;
+
+      (_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.onAudioCallClick();
+    }
+  }, []);
+  (0, React.useEffect)(() => {
+    const declineCallShortcut = e => e.ctrlKey && e.shiftKey && e.key === _Constants.KeyCodes.DeclineCallHotKey;
+
+    const acceptAudioCallShortcut = e => e.ctrlKey && e.shiftKey && e.key === _Constants.KeyCodes.AcceptAudioCallHotKey;
+
+    const acceptVideoCallShortcut = e => e.ctrlKey && e.shiftKey && e.key === _Constants.KeyCodes.AcceptVideoCallHotKey;
+
+    const shortcutKeysHandler = e => {
+      if (declineCallShortcut(e)) {
+        handleDeclineCallClick();
+      } else if (acceptAudioCallShortcut(e)) {
+        handleAudioCallClick();
+      } else if (acceptVideoCallShortcut(e)) {
+        handleVideoCallClick();
+      }
+    };
+
+    const ignoreDefault = e => {
+      if (declineCallShortcut(e) || acceptAudioCallShortcut(e) || acceptVideoCallShortcut(e)) {
+        e.preventDefault();
+      }
+    };
+
+    window.addEventListener("keyup", shortcutKeysHandler);
+    window.addEventListener("keydown", ignoreDefault);
+    return () => {
+      window.removeEventListener("keyup", shortcutKeysHandler);
+      window.removeEventListener("keydown", ignoreDefault);
+    };
+  }, []);
+  (0, React.useEffect)(() => {
+    // Setting focus to decline call button when incoming call alert appears
+    if (declineCallButtonId) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const declineCallButton = document.getElementById(declineCallButtonId);
+
+      if (declineCallButton) {
+        declineCallButton.focus();
+      }
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(_react2.Stack, {
+    horizontal: true,
+    className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.className,
+    horizontalAlign: "space-between",
+    styles: stackStyles,
+    dir: ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.dir) ?? ((_defaultIncomingCallP27 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP27 === void 0 ? void 0 : _defaultIncomingCallP27.dir),
+    role: "alert",
+    "aria-label": incomingCallTitleProps === null || incomingCallTitleProps === void 0 ? void 0 : incomingCallTitleProps.text
+  }, /*#__PURE__*/React.createElement(_react2.Stack, {
+    horizontal: true,
+    id: "incomingCallLeftGroup",
+    verticalAlign: "center",
+    tokens: leftGroupStackTokens
+  }, !((_props$controlProps19 = props.controlProps) !== null && _props$controlProps19 !== void 0 && _props$controlProps19.hideIncomingCallTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.incomingCallTitle) || /*#__PURE__*/React.createElement(_react2.Label, _extends({}, incomingCallTitleProps, {
+    id: incomingCallId + "-title",
+    tabIndex: -1,
+    styles: incomingCallTitleStyles
+  }), incomingCallTitleProps === null || incomingCallTitleProps === void 0 ? void 0 : incomingCallTitleProps.text)), (0, _utils.processCustomComponents)((_props$controlProps20 = props.controlProps) === null || _props$controlProps20 === void 0 ? void 0 : (_props$controlProps21 = _props$controlProps20.leftGroup) === null || _props$controlProps21 === void 0 ? void 0 : _props$controlProps21.children)), /*#__PURE__*/React.createElement(_react2.Stack, {
+    horizontal: true,
+    id: "incomingCallMiddleGroup",
+    verticalAlign: "center",
+    tokens: middleGroupStackTokens
+  }, (0, _utils.processCustomComponents)((_props$controlProps22 = props.controlProps) === null || _props$controlProps22 === void 0 ? void 0 : (_props$controlProps23 = _props$controlProps22.middleGroup) === null || _props$controlProps23 === void 0 ? void 0 : _props$controlProps23.children)), /*#__PURE__*/React.createElement(_react2.Stack, {
+    horizontal: true,
+    id: "incomingCallRightGroup",
+    verticalAlign: "center",
+    tokens: rightGroupStackTokens
+  }, (0, _utils.processCustomComponents)((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : (_props$controlProps25 = _props$controlProps24.rightGroup) === null || _props$controlProps25 === void 0 ? void 0 : _props$controlProps25.children), !((_props$controlProps26 = props.controlProps) !== null && _props$controlProps26 !== void 0 && _props$controlProps26.hideDeclineCall) && /*#__PURE__*/React.createElement(_CommandButton.default, _extends({}, declineCallButtonProps, {
+    onClick: handleDeclineCallClick,
+    id: declineCallButtonId,
+    styles: declineCallButtonStyles,
+    hoverStyles: declineCallButtonHoverStyles,
+    focusStyles: incomingCallItemFocusStyles,
+    customEvent: declineCustomEvent
+  })), !((_props$controlProps27 = props.controlProps) !== null && _props$controlProps27 !== void 0 && _props$controlProps27.hideVideoCall) && /*#__PURE__*/React.createElement(_CommandButton.default, _extends({}, videoCallButtonProps, {
+    onClick: handleVideoCallClick,
+    id: videoCallButtonId,
+    styles: videoCallButtonStyles,
+    hoverStyles: videoCallButtonHoverStyles,
+    focusStyles: incomingCallItemFocusStyles,
+    customEvent: videoCustomEvent
+  })), !((_props$controlProps28 = props.controlProps) !== null && _props$controlProps28 !== void 0 && _props$controlProps28.hideAudioCall) && /*#__PURE__*/React.createElement(_CommandButton.default, _extends({}, audioCallButtonProps, {
+    onClick: handleAudioCallClick,
+    id: audioCallButtonId,
+    styles: audioCallButtonStyles,
+    hoverStyles: audioCallButtonHoverStyles,
+    focusStyles: incomingCallItemFocusStyles,
+    customEvent: audioCustomEvent
+  }))));
+}
+
+var _default = IncomingCall;
+exports.default = _default;

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultProps/componentOverrideProps.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentOverrideProps = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@fluentui/react");
+
+var _Icons = require("../../../../../../assets/Icons");
+
+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 agentImageStyles = {
+  root: {
+    height: "50px",
+    width: "50px"
+  },
+  image: {
+    height: "50px",
+    width: "50px"
+  }
+};
+const label1Styles = {
+  root: {
+    color: "white",
+    fontSize: 13,
+    fontWeight: "bold",
+    padding: 0
+  }
+};
+const label2Styles = {
+  root: {
+    color: "white",
+    fontSize: 11,
+    padding: 0
+  }
+};
+const stackStyles = {
+  root: {
+    paddingLeft: "10px"
+  }
+};
+const componentOverrideProps = {
+  incomingCallTitle: /*#__PURE__*/React.createElement(_react2.Stack, {
+    horizontal: true
+  }, /*#__PURE__*/React.createElement(_react2.Image, {
+    src: _Icons.AgentIconBase64,
+    styles: agentImageStyles
+  }), /*#__PURE__*/React.createElement(_react2.Stack, {
+    verticalAlign: "center",
+    horizontalAlign: "baseline",
+    styles: stackStyles
+  }, /*#__PURE__*/React.createElement(_react2.Label, {
+    styles: label1Styles
+  }, "Omnichannel Agent 007"), /*#__PURE__*/React.createElement(_react2.Label, {
+    styles: label2Styles
+  }, "Incoming call")))
+};
+exports.componentOverrideProps = componentOverrideProps;

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultProps/componentOverridesControlProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentOverridesControlProps = void 0;
+
+var _defaultIncomingCallControlProps = require("./defaultIncomingCallControlProps");
+
+var _componentOverrideProps = require("./componentOverrideProps");
+
+var _componentOverridesStyleProps = require("../defaultStyles/componentOverridesStyleProps");
+
+const componentOverridesControlProps = {
+  componentOverrides: _componentOverrideProps.componentOverrideProps,
+  controlProps: _defaultIncomingCallControlProps.defaultIncomingCallControlProps,
+  styleProps: _componentOverridesStyleProps.componentOverridesStyleProps
+};
+exports.componentOverridesControlProps = componentOverridesControlProps;

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultProps/defaultIncomingCallControlProps.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultIncomingCallControlProps = void 0;
+const defaultIncomingCallControlProps = {
+  id: "oc-lcw-incomingcall",
+  dir: "ltr",
+  ariaLabel: "Incoming call area",
+  hideAudioCall: false,
+  hideVideoCall: false,
+  hideDeclineCall: false,
+  hideIncomingCallTitle: false,
+  onDeclineCallClick: function () {
+    console.log("download transcript clicked");
+  },
+  onAudioCallClick: function () {
+    console.log("email transcript clicked");
+  },
+  onVideoCallClick: function () {
+    console.log("audio notification clicked");
+  },
+  middleGroup: {
+    gap: 5,
+    children: []
+  },
+  leftGroup: {
+    gap: 5,
+    children: []
+  },
+  rightGroup: {
+    gap: 5,
+    children: []
+  },
+  declineCallButtonProps: {
+    id: "callRejectButton",
+    type: "icon",
+    ariaLabel: "Reject call",
+    iconName: "DeclineCall",
+    iconSize: 20
+  },
+  audioCallButtonProps: {
+    id: "callAcceptButton",
+    type: "icon",
+    ariaLabel: "Accept voice call",
+    iconName: "IncomingCall",
+    iconSize: 20
+  },
+  videoCallButtonProps: {
+    id: "videoCallAcceptButton",
+    type: "icon",
+    ariaLabel: "Accept video Call",
+    iconName: "Video",
+    iconSize: 20
+  },
+  incomingCallTitle: {
+    id: "incomingCallMessage",
+    text: "Incoming Call"
+  }
+};
+exports.defaultIncomingCallControlProps = defaultIncomingCallControlProps;

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultProps/defaultIncomingCallControlPropsRtl.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultIncomingCallControlPropsRtl = void 0;
+
+var _Icons = require("../../../../../../assets/Icons");
+
+const defaultIncomingCallControlPropsRtl = {
+  id: "incomingCallPopup",
+  ariaLabel: "Incoming call area",
+  hideAudioCall: false,
+  hideVideoCall: false,
+  hideDeclineCall: false,
+  hideIncomingCallTitle: false,
+  onDeclineCallClick: function () {
+    console.log("download transcript clicked");
+  },
+  onAudioCallClick: function () {
+    console.log("email transcript clicked");
+  },
+  onVideoCallClick: function () {
+    console.log("audio notification clicked");
+  },
+  middleGroup: {
+    gap: 5,
+    children: []
+  },
+  leftGroup: {
+    gap: 5,
+    children: []
+  },
+  rightGroup: {
+    gap: 5,
+    children: []
+  },
+  dir: "rtl",
+  declineCallButtonProps: {
+    id: "callRejectButton",
+    type: "icon",
+    ariaLabel: "Decline Call",
+    imageIconProps: {
+      src: _Icons.CallRejectButtonBase64,
+      styles: {
+        image: {
+          height: "18px",
+          width: "18px"
+        }
+      }
+    },
+    iconSize: 20
+  },
+  audioCallButtonProps: {
+    id: "callAcceptButton",
+    type: "icon",
+    ariaLabel: "Audio Call",
+    imageIconProps: {
+      src: _Icons.CallAcceptButtonBase64,
+      styles: {
+        image: {
+          height: "18px",
+          width: "18px"
+        }
+      }
+    },
+    iconSize: 20
+  },
+  videoCallButtonProps: {
+    id: "videoCallAcceptButton",
+    type: "icon",
+    ariaLabel: "Video Call",
+    imageIconProps: {
+      src: _Icons.VideoCallAcceptButtonIconBase64,
+      styles: {
+        image: {
+          height: "18px",
+          width: "18px"
+        }
+      }
+    },
+    iconSize: 20
+  },
+  incomingCallTitle: {
+    id: "incomingCallMessage",
+    text: "Incoming Call"
+  }
+};
+exports.defaultIncomingCallControlPropsRtl = defaultIncomingCallControlPropsRtl;

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultProps/defaultIncomingCallProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultIncomingCallProps = void 0;
+
+var _defaultIncomingCallStyleProps = require("../defaultStyles/defaultIncomingCallStyleProps");
+
+var _defaultIncomingCallControlProps = require("./defaultIncomingCallControlProps");
+
+const defaultIncomingCallProps = {
+  controlProps: _defaultIncomingCallControlProps.defaultIncomingCallControlProps,
+  styleProps: _defaultIncomingCallStyleProps.defaultIncomingCallStyleProps
+};
+exports.defaultIncomingCallProps = defaultIncomingCallProps;