@microsoft/omnichannel-chat-widget 0.1.0-main.1a61ea0

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

@@ -0,0 +1,133 @@
+"use strict";
+
+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 _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"));
+
+var _newMessageNotification = _interopRequireDefault(require("../../assets/audios/newMessageNotification.mp3"));
+
+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", 
+  // 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
+
+  const chatSDK = (0, _useChatSDKStore.default)();
+  const controlProps = {
+    id: "oc-lcw-footer",
+    dir: state.domainStates.globalDir,
+    onDownloadTranscriptClick: async () => {
+      try {
+        _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+          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, {
+          Event: _TelemetryConstants.TelemetryEvent.DownloadTranscriptFailed,
+          ExceptionDetails: {
+            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) {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+          payload: emailTranscriptButton
+        });
+      }
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
+        payload: true
+      });
+    },
+    onAudioNotificationClick: () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        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),
+      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, {
+    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) ?? _newMessageNotification.default,
+    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
+  }));
+};
+
+exports.FooterStateful = FooterStateful;
+var _default = FooterStateful;
+exports.default = _default;

package/lib/cjs/components/footerstateful/audionotificationstateful/AudioNotificationStateful.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AudioNotificationStateful = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
+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 AudioNotificationStateful = props => {
+  const {
+    audioSrc,
+    isAudioMuted
+  } = props;
+  const audioRef = (0, _react.useRef)(new Audio(audioSrc));
+  (0, _react.useEffect)(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName("NewMessageNotification").subscribe(msg => {
+      audioRef.current.play();
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    isAudioMuted ? audioRef.current.muted = true : audioRef.current.muted = false;
+  }, [isAudioMuted]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+};
+
+exports.AudioNotificationStateful = AudioNotificationStateful;
+var _default = AudioNotificationStateful;
+exports.default = _default;

package/lib/cjs/components/footerstateful/audionotificationstateful/interfaces/IAudioNotificationProps.js

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

package/lib/cjs/components/footerstateful/audionotificationstateful/interfaces/IAudioNotificationStatefulParams.js

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

package/lib/cjs/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.downloadTranscript = void 0;
+
+var _Constants = require("../../../common/Constants");
+
+var _NotificationScenarios = require("../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
+
+var _NotificationHandler = require("../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
+
+var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
+
+var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
+
+const processDisplayName = displayName => {
+  // if displayname matches "teamsvisitor:<some alphanumeric string>", we replace it with "Customer"
+  const displayNameRegex = ".+:.+";
+  const matchedTeamsDisplayName = displayName.match(displayNameRegex);
+
+  if (displayName.indexOf("teamsvisitor") >= 0 && matchedTeamsDisplayName && matchedTeamsDisplayName.length > 0) {
+    displayName = "Customer";
+  }
+
+  return displayName;
+};
+
+const constructIconName = displayName => {
+  if (!displayName) {
+    return "";
+  }
+
+  let iconName = "C";
+  const displayNameSplit = displayName.split(" ");
+
+  if (displayNameSplit.length > 1) {
+    // get the first letter of name and surname
+    iconName = displayNameSplit[0][0] + displayNameSplit[1][0];
+  } else if (displayNameSplit.length == 1) {
+    // get the first letter of name
+    iconName = displayNameSplit[0][0];
+  }
+
+  return iconName;
+};
+
+const processCreatedDateTime = (createdDateTime, chatCount) => {
+  const formattedDate = new Date(createdDateTime); // TODO: Localization:
+
+  const formattedTimeString = formattedDate.toLocaleTimeString("en-us"
+  /* Bootstrapper.LiveChatConfiguration.chatWidgetLocale */
+  , {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  const formattedSplitTimeString = formattedTimeString.split(" ");
+  let finalizedTimeString = "";
+
+  if (formattedSplitTimeString && formattedSplitTimeString.length > 1) {
+    finalizedTimeString = formattedSplitTimeString[0] + " " + formattedSplitTimeString[1];
+  }
+
+  if (chatCount == 0) {
+    return formattedDate.toLocaleDateString("en-us") + " " + finalizedTimeString;
+  }
+
+  return finalizedTimeString;
+};
+
+const processContent = (transcriptContent, isAgentChat, renderMarkDown) => {
+  if (transcriptContent.toString().toLowerCase().indexOf(_Constants.TranscriptConstants.TranscriptMessageEmojiMessageType) >= 0) {
+    // eslint-disable-next-line no-useless-escape
+    const emojiRegex = "<img src=\"http.*:\/\/.+\/objects\/.+\/views.+\">";
+    const matchedEmojiImgTag = transcriptContent.match(emojiRegex);
+
+    if (matchedEmojiImgTag && matchedEmojiImgTag.length > 0 && transcriptContent.toString().toLowerCase().indexOf(matchedEmojiImgTag[0]) >= 0) {
+      transcriptContent = transcriptContent.replace(matchedEmojiImgTag[0], "");
+    }
+  }
+
+  if (!isAgentChat && transcriptContent.toString().toLowerCase().indexOf("a href") >= 0 && transcriptContent.toString().toLowerCase().indexOf("target") >= 0) {
+    transcriptContent = transcriptContent.slice(0, transcriptContent.toString().indexOf("target")) + " style='color:white' " + transcriptContent.slice(transcriptContent.toString().indexOf("target"));
+  }
+
+  if (renderMarkDown) {
+    transcriptContent = renderMarkDown(transcriptContent);
+  }
+
+  return transcriptContent;
+};
+
+const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMessage) => {
+  const chats = JSON.parse(chatTranscripts).reverse();
+  const docTypeTag = "<!DOCTYPE html>";
+  const docStartTag = "<html>";
+  const docMetaTag = "<meta charset='UTF-8'>";
+  const docEndTag = "</html>";
+  const bodyStartTag = "<body bgcolor='" + _Constants.TranscriptConstants.ChatTranscriptsBodyColor + "'>";
+  const bodyEndTag = "</body>";
+  const divEndTag = "</div>";
+  const mainDiv = "<div class='transcripts' style='width:80%;margin-left:10%;'>";
+  let beautifiedChats = "";
+  let tabIndex = 1;
+  const mainTranscriptSection = "<div class='allTranscripts' style='max-width:60%;min-width:30%;margin-left:20%;background-color:#FFFFFF;'>";
+  let previousDisplayName = "";
+  let chatCount = 0; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  chats.forEach(value => {
+    let dialogNameMarginTop = "6px";
+    let dialogboxMarginleft = "40px";
+    let displayName = "User";
+    let iconName = "U";
+    let isAgentChat = false;
+    let fileAttachmentName = _Constants.TranscriptConstants.DefaultFileAttachmentName;
+    let dialogColor = _Constants.TranscriptConstants.CustomerDialogColor;
+    let fontColor = _Constants.TranscriptConstants.CustomerFontColor;
+
+    if (value.tags && value.tags.toLowerCase().indexOf(_Constants.Constants.systemMessageTag) !== -1 || value.isControlMessage && value.isControlMessage === true || value.contentType && value.contentType.toLowerCase() === _Constants.TranscriptConstants.AdaptiveCardType || value.deliveryMode && value.deliveryMode.toLowerCase() === _Constants.TranscriptConstants.InternalMode) {
+      return;
+    } else if (value.from) {
+      if (value.from.application) {
+        displayName = value.from.application.displayName;
+        dialogColor = _Constants.TranscriptConstants.AgentDialogColor;
+        fontColor = _Constants.TranscriptConstants.AgentFontColor;
+        isAgentChat = true;
+      } else if (value.from.guest) {
+        displayName = value.from.guest.displayName;
+        dialogColor = _Constants.TranscriptConstants.CustomerDialogColor;
+      } else if (value.from.user) {
+        displayName = value.from.user.displayName;
+        dialogColor = _Constants.TranscriptConstants.CustomerDialogColor;
+      }
+
+      displayName = processDisplayName(displayName);
+      iconName = constructIconName(displayName);
+
+      if (value.attachments && value.attachments.length > 0 && value.attachments[0].name) {
+        fileAttachmentName = value.attachments[0].name;
+        value.content = attachmentMessage ?? "The following attachment was uploaded during the conversation:" + fileAttachmentName;
+      }
+    }
+
+    let displayNamePlaceholder = processCreatedDateTime(value.createdDateTime, chatCount);
+    let iconPara = "";
+
+    if (displayName !== previousDisplayName) {
+      dialogboxMarginleft = "0px";
+      displayNamePlaceholder = "<b>" + displayName + " </b> " + processCreatedDateTime(value.createdDateTime, chatCount);
+      iconPara = "<div class='circle' style='display:inline-block;float:left;margin-right:5px;width:35px;height:35px;border-radius:20px;color:black;line-height:35px;text-align:center;background:" + dialogColor + ";'>\
+                            <font tabindex ='" + tabIndex + "' color =" + fontColor + " style='font-family:Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;'>\
+                                " + iconName + "\
+                            </font>\
+                            </div>";
+      tabIndex++;
+    }
+
+    if (displayName !== previousDisplayName) {
+      if (previousDisplayName === "") {
+        dialogNameMarginTop = "0px";
+      }
+
+      if (previousDisplayName !== "") {
+        dialogNameMarginTop = "20px";
+      }
+    }
+
+    const displayNameDiv = "<div style='margin-right:-2px;margin-top:" + dialogNameMarginTop + ";margin-bottom:-2px;margin-left:42px;top:-2px;position:relative;'>\
+                                    <font tabindex ='" + tabIndex + "' size = '1px' color='#000000' style='font-family:Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;'>\
+                                        " + displayNamePlaceholder + "\
+                                    </font>\
+                                </div>";
+    tabIndex++;
+    const dialogbox = "<div class='dialogbox' style='font-family:Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;word-break:break-word;min-height:20px;max-width:80%;display:inline-block;margin-left:" + dialogboxMarginleft + ";padding: 10px; background-color:" + dialogColor + "; border-radius: 0px 12px 12px 12px; left: 3px; top: 2px; '>";
+    beautifiedChats = beautifiedChats + mainDiv + iconPara + displayNameDiv + dialogbox + "<font tabindex= '" + tabIndex++ + "' color =" + fontColor + ">" + processContent(value.content, isAgentChat, renderMarkDown) + "</font>" + divEndTag + divEndTag;
+    previousDisplayName = displayName;
+    chatCount++;
+  });
+  const str = docTypeTag + docStartTag + docMetaTag + bodyStartTag + mainTranscriptSection + beautifiedChats + divEndTag + bodyEndTag + docEndTag;
+  return str;
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageOnError, attachmentMessage) => {
+  let data = await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.getLiveChatTranscript());
+
+  if (typeof data === _Constants.Constants.String) {
+    data = JSON.parse(data);
+  }
+
+  if (data[_Constants.Constants.ChatMessagesJson] !== null && data[_Constants.Constants.ChatMessagesJson] !== undefined) {
+    const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[_Constants.Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));
+    const byteCharacters = decodeURIComponent(window.atob(chatTranscripts));
+    const blob = new Blob([byteCharacters], {
+      "type": "text/html;charset=utf-8"
+    });
+    const link = document.createElement("a");
+    document.body.appendChild(link);
+    link.setAttribute(_Constants.HtmlAttributeNames.download, _Constants.TranscriptConstants.ChatTranscriptDownloadFile);
+    link.setAttribute(_Constants.HtmlAttributeNames.href, URL.createObjectURL(blob));
+    link.setAttribute(_Constants.HtmlAttributeNames.ariaHidden, "true");
+    link.click();
+  } else {
+    _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
+      Event: _TelemetryConstants.TelemetryEvent.DownloadTranscriptResponseNullOrUndefined,
+      ExceptionDetails: {
+        exception: "Download transcript failed: response null or undefined."
+      }
+    });
+
+    _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.DownloadTranscriptError, bannerMessageOnError ?? _Constants.Constants.defaultDownloadTranscriptError);
+  }
+};
+
+exports.downloadTranscript = downloadTranscript;

package/lib/cjs/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.spec.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _omnichannelChatSdk = require("@microsoft/omnichannel-chat-sdk");
+
+var _react = require("@testing-library/react");
+
+jest.mock("@microsoft/omnichannel-chat-sdk");
+describe("DownloadTranscriptStateful unit test", () => {
+  afterEach(() => {
+    _react.cleanup;
+    jest.resetAllMocks();
+  });
+  it("Method getLiveChatTranscript is called", async () => {
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new _omnichannelChatSdk.OmnichannelChatSDK(omnichannelConfig);
+    jest.spyOn(chatSDK, "getLiveChatTranscript").mockResolvedValue(Promise.resolve());
+
+    try {
+      await chatSDK.getLiveChatTranscript();
+      expect(chatSDK.getLiveChatTranscript).toHaveBeenCalledTimes(1); // eslint-disable-next-line no-empty
+    } catch (ex) {}
+  });
+  it("Method getLiveChatTranscript throws exception", async () => {
+    const errorMessage = "Error";
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new _omnichannelChatSdk.OmnichannelChatSDK(omnichannelConfig);
+    jest.spyOn(chatSDK, "getLiveChatTranscript").mockRejectedValue(new Error(errorMessage));
+
+    try {
+      await chatSDK.getLiveChatTranscript(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (ex) {
+      expect(ex.message).toEqual(errorMessage);
+    }
+  });
+  it("Method getLiveChatTranscript undefined throws exception", async () => {
+    const errorMessage = "Error";
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new _omnichannelChatSdk.OmnichannelChatSDK(omnichannelConfig);
+
+    try {
+      await chatSDK.getLiveChatTranscript(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (ex) {
+      expect(ex.message).toEqual(errorMessage);
+    }
+  });
+});

package/lib/cjs/components/footerstateful/downloadtranscriptstateful/interfaces/IDownloadTranscriptProps.js

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

package/lib/cjs/components/headerstateful/HeaderStateful.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HeaderStateful = void 0;
+
+var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ConversationState = require("../../contexts/common/ConversationState");
+
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
+var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
+
+var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
+
+var _defaultOutOfOfficeHeaderStyleProps = require("./common/styleProps/defaultOutOfOfficeHeaderStyleProps");
+
+var _useChatAdapterStore = _interopRequireDefault(require("../../hooks/useChatAdapterStore"));
+
+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 HeaderStateful = props => {
+  var _state$domainStates$l, _state$domainStates$l2, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro;
+
+  const [state, dispatch] = (0, _useChatContextStore.default)(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const [adapter] = (0, _useChatAdapterStore.default)();
+  const {
+    headerProps,
+    outOfOfficeHeaderProps,
+    endChat
+  } = 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({}, _defaultOutOfOfficeHeaderStyleProps.defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
+  const controlProps = {
+    id: "oc-lcw-header",
+    dir: state.domainStates.globalDir,
+    onMinimizeClick: () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.HeaderMinimizeButtonClicked,
+        Description: "Header Minimize button clicked."
+      });
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
+        payload: true
+      });
+    },
+    onCloseClick: async () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.HeaderCloseButtonClicked,
+        Description: "Header Close button clicked."
+      });
+
+      if (state.appStates.conversationState === _ConversationState.ConversationState.Active) {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+          payload: true
+        });
+      } else if (state.appStates.conversationState === _ConversationState.ConversationState.Postchat) {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
+          payload: false
+        });
+        await endChat(adapter);
+      }
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+        payload: document.getElementById(`${controlProps.id}-closebutton`)
+      });
+    },
+    ...(headerProps === null || headerProps === void 0 ? void 0 : headerProps.controlProps),
+    hideTitle: state.appStates.conversationState === _ConversationState.ConversationState.Loading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP = headerProps.controlProps) === null || _headerProps$controlP === void 0 ? void 0 : _headerProps$controlP.hideTitle),
+    hideIcon: state.appStates.conversationState === _ConversationState.ConversationState.Loading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP2 = headerProps.controlProps) === null || _headerProps$controlP2 === void 0 ? void 0 : _headerProps$controlP2.hideIcon),
+    hideCloseButton: state.appStates.conversationState === _ConversationState.ConversationState.Loading || state.appStates.conversationState === _ConversationState.ConversationState.Prechat || state.appStates.conversationState === _ConversationState.ConversationState.ReconnectChat || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP3 = headerProps.controlProps) === null || _headerProps$controlP3 === void 0 ? void 0 : _headerProps$controlP3.hideCloseButton)
+  };
+  const outOfOfficeControlProps = {
+    id: "oc-lcw-header",
+    dir: state.domainStates.globalDir,
+    headerTitleProps: {
+      text: "We're Offline"
+    },
+    onMinimizeClick: () => {
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
+        payload: true
+      });
+    },
+    ...(outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.controlProps),
+    hideCloseButton: state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice || (outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : (_outOfOfficeHeaderPro = outOfOfficeHeaderProps.controlProps) === null || _outOfOfficeHeaderPro === void 0 ? void 0 : _outOfOfficeHeaderPro.hideCloseButton)
+  };
+  (0, _react.useEffect)(() => {
+    if (state.appStates.outsideOperatingHours) {
+      setOutOfOperatingHours(true);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Header, {
+    componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
+    controlProps: outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,
+    styleProps: outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps
+  });
+};
+
+exports.HeaderStateful = HeaderStateful;
+var _default = HeaderStateful;
+exports.default = _default;

package/lib/cjs/components/headerstateful/common/styleProps/defaultOutOfOfficeHeaderStyleProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOutOfOfficeHeaderStyleProps = void 0;
+const defaultOutOfOfficeHeaderStyleProps = {
+  generalStyleProps: {
+    borderRadius: "0px",
+    backgroundColor: "#000000",
+    height: "40px"
+  },
+  titleStyleProps: {
+    margin: "0 0 0 10px",
+    color: "White"
+  }
+};
+exports.defaultOutOfOfficeHeaderStyleProps = defaultOutOfOfficeHeaderStyleProps;

package/lib/cjs/components/headerstateful/interfaces/IHeaderStatefulParams.js

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

package/lib/cjs/components/livechatwidget/LiveChatWidget.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LiveChatWidget = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ChatAdapterStore = require("../../contexts/ChatAdapterStore");
+
+var _ChatContextStore = require("../../contexts/ChatContextStore");
+
+var _ChatSDKStore = require("../../contexts/ChatSDKStore");
+
+var _LiveChatWidgetStateful = _interopRequireDefault(require("./livechatwidgetstateful/LiveChatWidgetStateful"));
+
+var _createReducer = require("../../contexts/createReducer");
+
+var _LiveChatWidgetContextInitialState = require("../../contexts/common/LiveChatWidgetContextInitialState");
+
+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 LiveChatWidget = props => {
+  const reducer = (0, _createReducer.createReducer)();
+  const [state, dispatch] = (0, _react.useReducer)(reducer, (0, _LiveChatWidgetContextInitialState.getLiveChatWidgetContextInitialState)(props)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const [adapter, setAdapter] = (0, _react.useState)(undefined);
+  return /*#__PURE__*/_react.default.createElement(_ChatSDKStore.ChatSDKStore.Provider, {
+    value: props.chatSDK
+  }, /*#__PURE__*/_react.default.createElement(_ChatAdapterStore.ChatAdapterStore.Provider, {
+    value: [adapter, setAdapter]
+  }, /*#__PURE__*/_react.default.createElement(_ChatContextStore.ChatContextStore.Provider, {
+    value: [state, dispatch]
+  }, /*#__PURE__*/_react.default.createElement(_LiveChatWidgetStateful.default, props))));
+};
+
+exports.LiveChatWidget = LiveChatWidget;
+var _default = LiveChatWidget;
+exports.default = _default;