@microsoft/omnichannel-chat-widget 0.1.0-main.c461296 → 0.1.0-main.c881067

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

@@ -4,60 +4,49 @@ 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;
-
+  var _state$domainStates$l, _state$domainStates$l2, _buttonProps$controlP, _props$buttonProps, _props$buttonProps$co, _props$buttonProps2, _props$buttonProps2$c, _props$buttonProps3, _props$buttonProps3$c;
   const [state, dispatch] = (0, _useChatContextStore.default)();
   const {
     buttonProps,
     outOfOfficeButtonProps,
     startChat
-  } = props; //Setting OutOfOperatingHours Flag
-
+  } = 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 proactiveChatInNewWindow = (0, _react.useRef)(state.appStates.proactiveChatStates.proactiveChatInNewWindow);
   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",
+    hideNotificationBubble: (buttonProps === null || buttonProps === void 0 ? void 0 : (_buttonProps$controlP = buttonProps.controlProps) === null || _buttonProps$controlP === void 0 ? void 0 : _buttonProps$controlP.hideNotificationBubble) === true || state.appStates.isMinimized === false,
+    unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > _Constants.Constants.maximumUnreadMessageCount ? (_props$buttonProps = props.buttonProps) === null || _props$buttonProps === void 0 ? void 0 : (_props$buttonProps$co = _props$buttonProps.controlProps) === null || _props$buttonProps$co === void 0 ? void 0 : _props$buttonProps$co.largeUnreadMessageString : state.appStates.unreadMessageCount.toString() : "0",
     onClick: async () => {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonClicked
       });
-
-      if (state.appStates.isMinimized) {
+      if (proactiveChatInNewWindow.current) {
+        const proactiveChatIsInPopoutModeEvent = {
+          eventName: _TelemetryConstants.BroadcastEvent.ProactiveChatIsInPopoutMode
+        };
+        _omnichannelChatComponents.BroadcastService.postMessage(proactiveChatIsInPopoutModeEvent);
+      } else if (state.appStates.isMinimized) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
           payload: false
@@ -66,6 +55,7 @@ const ChatButtonStateful = props => {
         await startChat();
       }
     },
+    unreadMessageString: (_props$buttonProps2 = props.buttonProps) === null || _props$buttonProps2 === void 0 ? void 0 : (_props$buttonProps2$c = _props$buttonProps2.controlProps) === null || _props$buttonProps2$c === void 0 ? void 0 : _props$buttonProps2$c.unreadMessageString,
     ...(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.controlProps)
   };
   const outOfOfficeControlProps = {
@@ -74,6 +64,9 @@ const ChatButtonStateful = props => {
     titleText: "We're Offline",
     subtitleText: "No agents available",
     onClick: async () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonClicked
+      });
       if (state.appStates.isMinimized) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
@@ -86,18 +79,17 @@ const ChatButtonStateful = props => {
         });
       }
     },
+    unreadMessageString: (_props$buttonProps3 = props.buttonProps) === null || _props$buttonProps3 === void 0 ? void 0 : (_props$buttonProps3$c = _props$buttonProps3.controlProps) === null || _props$buttonProps3$c === void 0 ? void 0 : _props$buttonProps3$c.unreadMessageString,
     ...(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 {
@@ -107,13 +99,15 @@ const ChatButtonStateful = props => {
       });
     }
   }, []);
+  (0, _react.useEffect)(() => {
+    proactiveChatInNewWindow.current = state.appStates.proactiveChatStates.proactiveChatInNewWindow;
+  }, [state.appStates.proactiveChatStates.proactiveChatInNewWindow]);
   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

@@ -7,6 +7,9 @@ exports.defaultOutOfOfficeChatButtonStyleProps = void 0;
 const defaultOutOfOfficeChatButtonStyleProps = {
   iconStyleProps: {
     backgroundColor: "#000000"
+  },
+  subtitleStyleProps: {
+    margin: "0px 10px 0px 10px"
   }
 };
 exports.defaultOutOfOfficeChatButtonStyleProps = defaultOutOfOfficeChatButtonStyleProps;

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

@@ -4,60 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ConfirmationPaneStateful = void 0;
-
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
-
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _utils = require("../../common/utils");
-
-var _Constants = require("../../common/Constants");
-
-var _ConversationState = require("../../contexts/common/ConversationState");
-
 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"));
-
 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)();
+  let elements = [];
   const [state, dispatch] = (0, _useChatContextStore.default)();
   const {
-    endChat
-  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    prepareEndChat
+  } = props;
   // 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,
@@ -66,36 +36,13 @@ const ConfirmationPaneStateful = props => {
         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" && (conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.canRenderPostChat) === _Constants.Constants.truePascal) {
-          if (postChatSurveyMode === _PostChatSurveyMode.PostChatSurveyMode.Embed) {
-            const loadPostChatEvent = {
-              eventName: _TelemetryConstants.BroadcastEvent.LoadPostChatSurvey
-            };
-
-            _omnichannelChatComponents.BroadcastService.postMessage(loadPostChatEvent);
-          } else if (postChatSurveyMode === _PostChatSurveyMode.PostChatSurveyMode.Link) {
-            const skipEndChatSDK = false;
-            const skipCloseChat = true;
-            await endChat(adapter, skipEndChatSDK, skipCloseChat);
-            dispatch({
-              type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-              payload: _ConversationState.ConversationState.InActive
-            });
-          }
-        } else {
-          (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
-          await endChat(adapter);
-        }
+        (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
+        await prepareEndChat(adapter, state);
       } catch (ex) {
         _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.ERROR, {
           Event: _TelemetryConstants.TelemetryEvent.GetConversationDetailsCallFailed,
@@ -103,7 +50,6 @@ const ConfirmationPaneStateful = props => {
             exception: `Get Conversation Details Call Failed : ${ex}`
           }
         });
-
         _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.Connection, "Get Conversation Details Call Failed: " + ex);
       }
     },
@@ -112,44 +58,39 @@ const ConfirmationPaneStateful = props => {
         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);
+      const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
+      if (previousFocusedElementId) {
+        (0, _utils.setFocusOnElement)("#" + previousFocusedElementId);
         dispatch({
-          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
           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
+  };
 
+  // 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, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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,
@@ -157,7 +98,6 @@ const ConfirmationPaneStateful = props => {
     styleProps: props === null || props === void 0 ? void 0 : props.styleProps
   }));
 };
-
 exports.ConfirmationPaneStateful = ConfirmationPaneStateful;
 var _default = ConfirmationPaneStateful;
 exports.default = _default;

package/lib/cjs/components/dimlayer/DimLayer.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DimLayer = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const DimLayer = _ref => {
   let {
     brightness
@@ -27,5 +24,4 @@ const DimLayer = _ref => {
     style: defaultDimLayerStyles
   });
 };
-
 exports.DimLayer = DimLayer;

package/lib/cjs/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -4,67 +4,46 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EmailTranscriptPaneStateful = void 0;
-
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _utils = require("../../common/utils");
-
 var _DimLayer = require("../dimlayer/DimLayer");
-
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
-
 var _NotificationHandler = require("../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
-
 var _NotificationScenarios = require("../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
-
 var _Constants = require("../../common/Constants");
-
 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 EmailTranscriptPaneStateful = props => {
   var _props$controlProps;
-
   const initialTabIndexMap = new Map();
   let elements = [];
-  const [state, dispatch] = (0, _useChatContextStore.default)(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  const [state, dispatch] = (0, _useChatContextStore.default)();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const chatSDK = (0, _useChatSDKStore.default)();
   const [initialEmail, setInitialEmail] = (0, _react.useState)("");
-
   const closeEmailTranscriptPane = () => {
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
       payload: false
     });
-    const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
-
-    if (previousFocused) {
-      (0, _utils.setFocusOnElement)(previousFocused);
+    const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
+    if (previousFocusedElementId) {
+      (0, _utils.setFocusOnElement)("#" + previousFocusedElementId);
     } else {
       (0, _utils.setFocusOnSendBox)();
     }
-
     dispatch({
-      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
       payload: null
     });
     (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
   };
-
   const controlProps = {
     id: "oclcw-emailTranscriptDialogContainer",
     dir: state.domainStates.globalDir,
@@ -74,10 +53,8 @@ const EmailTranscriptPaneStateful = props => {
         emailAddress: email,
         attachmentMessage: (props === null || props === void 0 ? void 0 : props.attachmentMessage) ?? "The following attachment was uploaded during the conversation:"
       };
-
       try {
         await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.emailLiveChatTranscript(chatTranscriptBody));
-
         _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
           Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptSent,
           Description: "Transcript sent to email successfully."
@@ -89,7 +66,6 @@ const EmailTranscriptPaneStateful = props => {
             exception: ex
           }
         });
-
         _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? "Email transcript to " + email + " failed.");
       }
     },
@@ -98,7 +74,6 @@ const EmailTranscriptPaneStateful = props => {
         Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptCancelButtonClicked,
         Description: "Email Transcript cancel button clicked."
       });
-
       closeEmailTranscriptPane();
     },
     checkInput: function (input) {
@@ -106,25 +81,23 @@ const EmailTranscriptPaneStateful = props => {
     },
     ...props.controlProps,
     inputInitialText: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.inputInitialText) ?? initialEmail
-  }; // Move focus to the first button
+  };
 
+  // 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);
     setInitialEmail(state.appStates.preChatResponseEmail);
-
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptLoaded
     });
   }, [initialEmail]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
   }), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.InputValidationPane, {
     componentOverrides: props.componentOverrides,
@@ -132,7 +105,6 @@ const EmailTranscriptPaneStateful = props => {
     styleProps: props.styleProps
   }));
 };
-
 exports.EmailTranscriptPaneStateful = EmailTranscriptPaneStateful;
 var _default = EmailTranscriptPaneStateful;
 exports.default = _default;

package/lib/cjs/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.spec.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _omnichannelChatSdk = require("@microsoft/omnichannel-chat-sdk");
-
 var _react = require("@testing-library/react");
-
 jest.mock("@microsoft/omnichannel-chat-sdk");
 describe("EmailTranscriptPaneStateful unit test", () => {
   afterEach(() => {
@@ -23,10 +21,10 @@ describe("EmailTranscriptPaneStateful unit test", () => {
       attachmentMessage: "sample",
       locale: "sample"
     };
-
     try {
       await chatSDK.emailLiveChatTranscript(chatTranscriptBody);
-      expect(chatSDK.emailLiveChatTranscript).toHaveBeenCalledTimes(1); // eslint-disable-next-line no-empty
+      expect(chatSDK.emailLiveChatTranscript).toHaveBeenCalledTimes(1);
+      // eslint-disable-next-line no-empty
     } catch (ex) {}
   });
   it("Method emailLiveChatTranscript throws exception", async () => {
@@ -43,9 +41,9 @@ describe("EmailTranscriptPaneStateful unit test", () => {
       attachmentMessage: "sample",
       locale: "sample"
     };
-
     try {
-      await chatSDK.emailLiveChatTranscript(chatTranscriptBody); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await chatSDK.emailLiveChatTranscript(chatTranscriptBody);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (ex) {
       expect(ex.message).toEqual(errorMessage);
     }
@@ -63,9 +61,9 @@ describe("EmailTranscriptPaneStateful unit test", () => {
       attachmentMessage: "sample",
       locale: "sample"
     };
-
     try {
-      await chatSDK.emailLiveChatTranscript(chatTranscriptBody); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await chatSDK.emailLiveChatTranscript(chatTranscriptBody);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (ex) {
       expect(ex.message).toEqual(errorMessage);
     }

package/lib/cjs/components/footerstateful/FooterStateful.js

@@ -4,50 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FooterStateful = void 0;
-
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _AudioNotificationStateful = _interopRequireDefault(require("./audionotificationstateful/AudioNotificationStateful"));
-
 var _Constants = require("../../common/Constants");
-
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
-
 var _Audios = require("../../assets/Audios");
-
 var _NotificationHandler = require("../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
-
 var _NotificationScenarios = require("../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
-
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
-
 var _DownloadTranscriptStateful = require("./downloadtranscriptstateful/DownloadTranscriptStateful");
-
 var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
-
 var _useChatSDKStore = _interopRequireDefault(require("../../hooks/useChatSDKStore"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FooterStateful = props => {
   var _footerProps$controlP3, _footerProps$controlP4;
-
-  const [state, dispatch] = (0, _useChatContextStore.default)(); // hideFooterDisplay - the purpose of this is to keep the footer always "active", 
+  const [state, dispatch] = (0, _useChatContextStore.default)();
+  // hideFooterDisplay - the purpose of this is to keep the footer always "active", 
   // but hide it visually in certain states (e.g., loading state) and show in some other states (e.g. active state).
   // The reason for this approach is to make sure that state variables for audio notification work correctly after minimizing
-
   const {
     footerProps,
     downloadTranscriptProps,
     audioNotificationProps,
     hideFooterDisplay
-  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  } = props;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const chatSDK = (0, _useChatSDKStore.default)();
   const controlProps = {
     id: "oc-lcw-footer",
@@ -58,7 +42,6 @@ const FooterStateful = props => {
           Event: _TelemetryConstants.TelemetryEvent.DownloadTranscriptButtonClicked,
           Description: "Download Transcript button clicked."
         });
-
         await (0, _DownloadTranscriptStateful.downloadTranscript)(chatSDK, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.renderMarkDown, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.bannerMessageOnError, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.attachmentMessage);
       } catch (ex) {
         _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
@@ -67,28 +50,22 @@ const FooterStateful = props => {
             exception: ex
           }
         });
-
         _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.DownloadTranscriptError, (downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.bannerMessageOnError) ?? _Constants.Constants.defaultDownloadTranscriptError);
       }
     },
     onEmailTranscriptClick: () => {
       var _footerProps$controlP, _footerProps$controlP2;
-
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptButtonClicked,
         Description: "Email Transcript button clicked."
       });
-
-      const emailTranscriptButtonId = (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP = footerProps.controlProps) === null || _footerProps$controlP === void 0 ? void 0 : (_footerProps$controlP2 = _footerProps$controlP.emailTranscriptButtonProps) === null || _footerProps$controlP2 === void 0 ? void 0 : _footerProps$controlP2.id) ?? "oc-lcw-footer-emailtranscript-button";
-      const emailTranscriptButton = document.getElementById(emailTranscriptButtonId);
-
-      if (emailTranscriptButton) {
+      const emailTranscriptButtonId = (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP = footerProps.controlProps) === null || _footerProps$controlP === void 0 ? void 0 : (_footerProps$controlP2 = _footerProps$controlP.emailTranscriptButtonProps) === null || _footerProps$controlP2 === void 0 ? void 0 : _footerProps$controlP2.id) ?? `${controlProps.id}-emailtranscript-button`;
+      if (emailTranscriptButtonId) {
         dispatch({
-          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
-          payload: emailTranscriptButton
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
+          payload: emailTranscriptButtonId
         });
       }
-
       dispatch({
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
         payload: true
@@ -99,35 +76,26 @@ const FooterStateful = props => {
         Event: _TelemetryConstants.TelemetryEvent.AudioToggleButtonClicked,
         Description: "Audio button clicked."
       });
-
       dispatch({
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
         payload: !state.appStates.isAudioMuted
       });
     },
     ...(footerProps === null || footerProps === void 0 ? void 0 : footerProps.controlProps),
-    audioNotificationButtonProps: { ...(footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP3 = footerProps.controlProps) === null || _footerProps$controlP3 === void 0 ? void 0 : _footerProps$controlP3.audioNotificationButtonProps),
+    audioNotificationButtonProps: {
+      ...(footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP3 = footerProps.controlProps) === null || _footerProps$controlP3 === void 0 ? void 0 : _footerProps$controlP3.audioNotificationButtonProps),
       isAudioMuted: state.appStates.isAudioMuted
     }
   };
-  const footerId = (controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-footer";
-  const footer = document.getElementById(footerId);
-
-  if (footer) {
-    footer.style.display = hideFooterDisplay ? "none" : "";
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Footer, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hideFooterDisplay && /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Footer, {
     componentOverrides: footerProps === null || footerProps === void 0 ? void 0 : footerProps.componentOverrides,
     controlProps: controlProps,
     styleProps: footerProps === null || footerProps === void 0 ? void 0 : footerProps.styleProps
   }), /*#__PURE__*/_react.default.createElement(_AudioNotificationStateful.default, {
     audioSrc: (audioNotificationProps === null || audioNotificationProps === void 0 ? void 0 : audioNotificationProps.audioSrc) ?? _Audios.NewMessageNotificationSoundBase64,
-    hideAudioNotificationButton: (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP4 = footerProps.controlProps) === null || _footerProps$controlP4 === void 0 ? void 0 : _footerProps$controlP4.hideAudioNotificationButton) ?? false,
-    isAudioMuted: state.appStates.isAudioMuted ?? false
+    isAudioMuted: state.appStates.isAudioMuted === null ? (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP4 = footerProps.controlProps) === null || _footerProps$controlP4 === void 0 ? void 0 : _footerProps$controlP4.hideAudioNotificationButton) ?? false : state.appStates.isAudioMuted ?? false
   }));
 };
-
 exports.FooterStateful = FooterStateful;
 var _default = FooterStateful;
 exports.default = _default;