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

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

@@ -0,0 +1,112 @@
+"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
+    });
+
+    (0, _utils.setFocusOnElement)(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
+  }, []);
+  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,174 @@
+"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 _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 = [];
+  const [state, dispatch] = (0, _useChatContextStore.default)();
+  const {
+    setPostChatContext,
+    endChat
+  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const chatSDK = (0, _useChatSDKStore.default)(); // 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.logConfigDataEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.ConfirmationConfirmButtonClicked,
+        Description: "Confirmation pane Confirm button clicked"
+      });
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+        payload: false
+      });
+
+      try {
+        //ToDo: End Chat before PostChat Context and conversation Details is set once the getPostChatContext request ID fetch issue is fixed
+        const conversationDetails = await chatSDK.getConversationDetails(); // ToDo: Replace with CanRenderPostChat once available in conversationDetails API response 
+
+        if (isPostChatEnabled === "true" && postChatSurveyMode === _PostChatSurveyMode.PostChatSurveyMode.Embed && conversationDetails.canRenderPostChat === _Constants.Constants.truePascal) {
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
+            payload: true
+          });
+          dispatch({
+            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+            payload: _ConversationState.ConversationState.Loading
+          });
+          await setPostChatContext();
+
+          if (state.domainStates.postChatContext) {
+            dispatch({
+              type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+              payload: _ConversationState.ConversationState.Postchat
+            });
+          }
+        } 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.logConfigDataEvent(_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;

package/lib/cjs/components/confirmationpanestateful/common/defaultProps/defaultConfirmationPaneLocalizedTexts.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultConfirmationPaneLocalizedTexts = void 0;
+const defaultConfirmationPaneLocalizedTexts = {
+  CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_EMAIL_AND_DOWNLOAD_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_EMAIL_AND_DOWNLOAD_TRANSCRIPT_ENABLED: "Select Cancel and then select the download or email icon",
+  CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_EMAIL_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_EMAIL_TRANSCRIPT_ENABLED: "Select Cancel and then select the email icon.",
+  CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_DOWNLOAD_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_DOWNLOAD_TRANSCRIPT_ENABLED: "Select Cancel and then select the download icon.",
+  CLOSE_CONFIRMATION_DIALOG_TITLE_DEFAULT: "Close Chat",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_DEFAULT: "Do you really want to close this chat?"
+};
+exports.defaultConfirmationPaneLocalizedTexts = defaultConfirmationPaneLocalizedTexts;

package/lib/cjs/components/confirmationpanestateful/interfaces/IConfirmationPaneInputs.js

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

package/lib/cjs/components/confirmationpanestateful/interfaces/IConfirmationPaneLocalizedText.js

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

package/lib/cjs/components/confirmationpanestateful/interfaces/IConfirmationPaneStatefulParams.js

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

package/lib/cjs/components/confirmationpanestateful/interfaces/IConfirmationPaneStatefulProps.js

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+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
+  } = _ref;
+  const color = "rgba(0, 0, 0, " + brightness + ")";
+  const defaultDimLayerStyles = {
+    position: "absolute",
+    borderRadius: "inherit",
+    width: "100%",
+    height: "100%",
+    zIndex: 100,
+    backgroundColor: color
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "oc-lcw-dim-layer",
+    style: defaultDimLayerStyles
+  });
+};
+
+exports.DimLayer = DimLayer;

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

@@ -0,0 +1,138 @@
+"use strict";
+
+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 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);
+    } else {
+      (0, _utils.setFocusOnSendBox)();
+    }
+
+    dispatch({
+      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+      payload: null
+    });
+    (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
+  };
+
+  const controlProps = {
+    id: "oclcw-emailTranscriptDialogContainer",
+    dir: state.domainStates.globalDir,
+    onSend: async email => {
+      closeEmailTranscriptPane();
+      const chatTranscriptBody = {
+        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."
+        });
+      } catch (ex) {
+        _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
+          Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptFailed,
+          ExceptionDetails: {
+            exception: ex
+          }
+        });
+
+        _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? "Email transcript to " + email + " failed.");
+      }
+    },
+    onCancel: () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptButtonClicked,
+        Description: "Email Transcript button clicked."
+      });
+
+      closeEmailTranscriptPane();
+    },
+    checkInput: function (input) {
+      return new RegExp(_Constants.Regex.EmailRegex).test(input);
+    },
+    ...props.controlProps,
+    inputInitialText: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.inputInitialText) ?? initialEmail
+  }; // 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, {
+    brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
+  }), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.InputValidationPane, {
+    componentOverrides: props.componentOverrides,
+    controlProps: controlProps,
+    styleProps: props.styleProps
+  }));
+};
+
+exports.EmailTranscriptPaneStateful = EmailTranscriptPaneStateful;
+var _default = EmailTranscriptPaneStateful;
+exports.default = _default;

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

@@ -0,0 +1,73 @@
+"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(() => {
+    _react.cleanup;
+    jest.resetAllMocks();
+  });
+  it("Method emailLiveChatTranscript is called", async () => {
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new _omnichannelChatSdk.OmnichannelChatSDK(omnichannelConfig);
+    jest.spyOn(chatSDK, "emailLiveChatTranscript").mockResolvedValue(Promise.resolve());
+    const chatTranscriptBody = {
+      emailAddress: "sample@microsoft.com",
+      attachmentMessage: "sample",
+      locale: "sample"
+    };
+
+    try {
+      await chatSDK.emailLiveChatTranscript(chatTranscriptBody);
+      expect(chatSDK.emailLiveChatTranscript).toHaveBeenCalledTimes(1); // eslint-disable-next-line no-empty
+    } catch (ex) {}
+  });
+  it("Method emailLiveChatTranscript throws exception", async () => {
+    const errorMessage = "Error";
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new _omnichannelChatSdk.OmnichannelChatSDK(omnichannelConfig);
+    jest.spyOn(chatSDK, "emailLiveChatTranscript").mockRejectedValue(new Error(errorMessage));
+    const chatTranscriptBody = {
+      emailAddress: "sample@microsoft.com",
+      attachmentMessage: "sample",
+      locale: "sample"
+    };
+
+    try {
+      await chatSDK.emailLiveChatTranscript(chatTranscriptBody); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (ex) {
+      expect(ex.message).toEqual(errorMessage);
+    }
+  });
+  it("Method emailLiveChatTranscript undefined throws exception", async () => {
+    const errorMessage = "Error";
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new _omnichannelChatSdk.OmnichannelChatSDK(omnichannelConfig);
+    const chatTranscriptBody = {
+      emailAddress: "sample@microsoft.com",
+      attachmentMessage: "sample",
+      locale: "sample"
+    };
+
+    try {
+      await chatSDK.emailLiveChatTranscript(chatTranscriptBody); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (ex) {
+      expect(ex.message).toEqual(errorMessage);
+    }
+  });
+});

package/lib/cjs/components/emailtranscriptpanestateful/interfaces/IChatTranscriptBody.js

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

package/lib/cjs/components/emailtranscriptpanestateful/interfaces/IEmailTranscriptPaneProps.js

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