@microsoft/omnichannel-chat-widget 0.1.0-main.07f52ee

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";

package/lib/cjs/components/chatbuttonstateful/ChatButtonStateful.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChatButtonStateful = void 0;
+
+var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
+var _Constants = require("../../common/Constants");
+
+var _utils = require("../../common/utils");
+
+var _ConversationState = require("../../contexts/common/ConversationState");
+
+var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
+
+var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
+
+var _TelemetryManager = require("../../common/telemetry/TelemetryManager");
+
+var _defaultOutOfOfficeChatButtonStyleProps = require("./common/styleProps/defaultOutOfOfficeChatButtonStyleProps");
+
+var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
+
+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 ChatButtonStateful = props => {
+  var _state$domainStates$l, _state$domainStates$l2, _buttonProps$controlP;
+
+  const [state, dispatch] = (0, _useChatContextStore.default)();
+  const {
+    buttonProps,
+    outOfOfficeButtonProps,
+    startChat
+  } = props; //Setting OutOfOperatingHours Flag
+
+  const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
+  const outOfOfficeStyleProps = Object.assign({}, _defaultOutOfOfficeChatButtonStyleProps.defaultOutOfOfficeChatButtonStyleProps, outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.styleProps);
+  const controlProps = {
+    id: "oc-lcw-chat-button",
+    dir: state.domainStates.globalDir,
+    titleText: "Let's Chat!",
+    subtitleText: "We're online.",
+    hideNotificationBubble: !(state.appStates.isMinimized === true && state.appStates.unreadMessageCount > 0) || (buttonProps === null || buttonProps === void 0 ? void 0 : (_buttonProps$controlP = buttonProps.controlProps) === null || _buttonProps$controlP === void 0 ? void 0 : _buttonProps$controlP.hideNotificationBubble) === true,
+    unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > _Constants.Constants.maximumUnreadMessageCount ? _Constants.Constants.maximumUnreadMessageCount.toString() + "+" : state.appStates.unreadMessageCount.toString() : "0",
+    onClick: async () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonClicked
+      });
+
+      if (state.appStates.isMinimized) {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
+          payload: false
+        });
+      } else {
+        await startChat();
+      }
+    },
+    ...(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.controlProps)
+  };
+  const outOfOfficeControlProps = {
+    id: "oc-lcw-chat-button",
+    dir: state.domainStates.globalDir,
+    titleText: "We're Offline",
+    subtitleText: "No agents available",
+    onClick: async () => {
+      if (state.appStates.isMinimized) {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
+          payload: false
+        });
+      } else {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+          payload: _ConversationState.ConversationState.OutOfOffice
+        });
+      }
+    },
+    ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
+  };
+  (0, _react.useEffect)(() => {
+    if (state.appStates.outsideOperatingHours) {
+      setOutOfOperatingHours(true);
+    }
+
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonShow,
+      ElapsedTimeInMilliseconds: _TelemetryManager.TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
+    });
+
+    if (state.uiStates.focusChatButton) {
+      (0, _utils.setFocusOnElement)(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
+    } else {
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_FOCUS_CHAT_BUTTON,
+        payload: true
+      });
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ChatButton, {
+    componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
+    controlProps: outOfOperatingHours ? outOfOfficeControlProps : controlProps,
+    styleProps: outOfOperatingHours ? outOfOfficeStyleProps : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.styleProps
+  });
+};
+
+exports.ChatButtonStateful = ChatButtonStateful;
+var _default = ChatButtonStateful;
+exports.default = _default;

package/lib/cjs/components/chatbuttonstateful/common/styleProps/defaultOutOfOfficeChatButtonStyleProps.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOutOfOfficeChatButtonStyleProps = void 0;
+const defaultOutOfOfficeChatButtonStyleProps = {
+  iconStyleProps: {
+    backgroundColor: "#000000"
+  }
+};
+exports.defaultOutOfOfficeChatButtonStyleProps = defaultOutOfOfficeChatButtonStyleProps;

package/lib/cjs/components/chatbuttonstateful/interfaces/IChatButtonStatefulParams.js

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

package/lib/cjs/components/confirmationpanestateful/ConfirmationPaneStateful.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ConfirmationPaneStateful = void 0;
+
+var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../../common/utils");
+
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
+var _DimLayer = require("../dimlayer/DimLayer");
+
+var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
+
+var _NotificationHandler = require("../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
+
+var _NotificationScenarios = require("../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
+
+var _PostChatSurveyMode = require("../postchatsurveypanestateful/enums/PostChatSurveyMode");
+
+var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
+
+var _useChatAdapterStore = _interopRequireDefault(require("../../hooks/useChatAdapterStore"));
+
+var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
+
+var _useChatSDKStore = _interopRequireDefault(require("../../hooks/useChatSDKStore"));
+
+var _Constants = require("../../common/Constants");
+
+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; }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ConfirmationPaneStateful = props => {
+  var _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _state$domainStates$l4;
+
+  const initialTabIndexMap = new Map();
+  let elements = []; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const chatSDK = (0, _useChatSDKStore.default)();
+  const [state, dispatch] = (0, _useChatContextStore.default)();
+  const {
+    endChat
+  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const [adapter] = (0, _useChatAdapterStore.default)();
+  const isPostChatEnabled = (_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.msdyn_postconversationsurveyenable;
+  const postChatSurveyMode = (_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : (_state$domainStates$l4 = _state$domainStates$l3.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l4 === void 0 ? void 0 : _state$domainStates$l4.msdyn_postconversationsurveymode;
+  const controlProps = {
+    id: "oc-lcw-confirmation-pane",
+    dir: state.domainStates.globalDir,
+    onConfirm: async () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.ConfirmationConfirmButtonClicked,
+        Description: "Confirmation pane Confirm button clicked"
+      });
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+        payload: false
+      });
+
+      try {
+        // check agent has joined conversation
+        const conversationDetails = await chatSDK.getConversationDetails();
+
+        if (isPostChatEnabled === "true" && postChatSurveyMode === _PostChatSurveyMode.PostChatSurveyMode.Embed && conversationDetails.canRenderPostChat === _Constants.Constants.truePascal) {
+          const loadPostChatEvent = {
+            eventName: "LoadPostChatSurvey"
+          };
+
+          _omnichannelChatComponents.BroadcastService.postMessage(loadPostChatEvent);
+        } else {
+          (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
+
+          try {
+            await endChat(adapter);
+          } catch (error) {
+            _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.ERROR, {
+              Event: _TelemetryConstants.TelemetryEvent.CloseChatMethodException,
+              ExceptionDetails: {
+                exception: `Failed to endChat: ${error}`
+              }
+            });
+          }
+        }
+      } catch (ex) {
+        _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.ERROR, {
+          Event: _TelemetryConstants.TelemetryEvent.GetConversationDetailsCallFailed,
+          ExceptionDetails: {
+            exception: `Get Conversation Details Call Failed : ${ex}`
+          }
+        });
+
+        _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.Connection, "Get Conversation Details Call Failed: " + ex);
+      }
+    },
+    onCancel: () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.ConfirmationCancelButtonClicked,
+        Description: "Confirmation pane Cancel button clicked."
+      });
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+        payload: false
+      });
+      const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
+
+      if (previousFocused) {
+        (0, _utils.setFocusOnElement)(previousFocused);
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+          payload: null
+        });
+      } else {
+        (0, _utils.setFocusOnSendBox)();
+      }
+
+      (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
+    },
+    ...(props === null || props === void 0 ? void 0 : props.controlProps)
+  }; // Move focus to the first button
+
+  (0, _react.useEffect)(() => {
+    (0, _utils.preventFocusToMoveOutOfElement)(controlProps.id);
+    const focusableElements = (0, _utils.findAllFocusableElement)(`#${controlProps.id}`);
+
+    if (focusableElements) {
+      focusableElements[0].focus();
+    }
+
+    elements = (0, _utils.findParentFocusableElementsWithoutChildContainer)(controlProps.id);
+    (0, _utils.setTabIndices)(elements, initialTabIndexMap, false);
+
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.ConfirmationPaneLoaded
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
+    brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
+  }), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ConfirmationPane, {
+    componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,
+    controlProps: controlProps,
+    styleProps: props === null || props === void 0 ? void 0 : props.styleProps
+  }));
+};
+
+exports.ConfirmationPaneStateful = ConfirmationPaneStateful;
+var _default = ConfirmationPaneStateful;
+exports.default = _default;