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

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

@@ -0,0 +1,84 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useState } from "react";
+import { ChatButton } from "@microsoft/omnichannel-chat-components";
+import { Constants } from "../../common/Constants";
+import { setFocusOnElement } from "../../common/utils";
+import { ConversationState } from "../../contexts/common/ConversationState";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { TelemetryTimers } from "../../common/telemetry/TelemetryManager";
+import { defaultOutOfOfficeChatButtonStyleProps } from "./common/styleProps/defaultOutOfOfficeChatButtonStyleProps";
+import useChatContextStore from "../../hooks/useChatContextStore";
+export const ChatButtonStateful = props => {
+  var _state$domainStates$l, _state$domainStates$l2, _buttonProps$controlP;
+
+  const [state, dispatch] = useChatContextStore();
+  const {
+    buttonProps,
+    outOfOfficeButtonProps,
+    startChat
+  } = props; //Setting OutOfOperatingHours Flag
+
+  const [outOfOperatingHours, setOutOfOperatingHours] = 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, 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.maximumUnreadMessageCount ? Constants.maximumUnreadMessageCount.toString() + "+" : state.appStates.unreadMessageCount.toString() : "0",
+    onClick: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.LCWChatButtonClicked
+      });
+
+      if (state.appStates.isMinimized) {
+        dispatch({
+          type: 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.SET_MINIMIZED,
+          payload: false
+        });
+      } else {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+          payload: ConversationState.OutOfOffice
+        });
+      }
+    },
+    ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
+  };
+  useEffect(() => {
+    if (state.appStates.outsideOperatingHours) {
+      setOutOfOperatingHours(true);
+    }
+
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.LCWChatButtonShow,
+      ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
+    });
+    setFocusOnElement(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
+  }, []);
+  return /*#__PURE__*/React.createElement(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
+  });
+};
+export default ChatButtonStateful;

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

@@ -0,0 +1,5 @@
+export const defaultOutOfOfficeChatButtonStyleProps = {
+  iconStyleProps: {
+    backgroundColor: "#000000"
+  }
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,139 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect } from "react";
+import { findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
+import { ConfirmationPane } from "@microsoft/omnichannel-chat-components";
+import { Constants } from "../../common/Constants";
+import { ConversationState } from "../../contexts/common/ConversationState";
+import { DimLayer } from "../dimlayer/DimLayer";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { NotificationHandler } from "../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { PostChatSurveyMode } from "../postchatsurveypanestateful/enums/PostChatSurveyMode";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import useChatAdapterStore from "../../hooks/useChatAdapterStore";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import useChatSDKStore from "../../hooks/useChatSDKStore"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export 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] = useChatContextStore();
+  const {
+    setPostChatContext,
+    endChat
+  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const chatSDK = useChatSDKStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const [adapter] = useChatAdapterStore();
+  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.logConfigDataEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.ConfirmationConfirmButtonClicked,
+        Description: "Confirmation pane Confirm button clicked"
+      });
+      dispatch({
+        type: 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.Embed && conversationDetails.canRenderPostChat === Constants.truePascal) {
+          dispatch({
+            type: LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
+            payload: true
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+            payload: ConversationState.Loading
+          });
+          await setPostChatContext();
+
+          if (state.domainStates.postChatContext) {
+            dispatch({
+              type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+              payload: ConversationState.Postchat
+            });
+          }
+        } else {
+          setTabIndices(elements, initialTabIndexMap, true);
+
+          try {
+            await endChat(adapter);
+          } catch (error) {
+            TelemetryHelper.logSDKEvent(LogLevel.ERROR, {
+              Event: TelemetryEvent.CloseChatMethodException,
+              ExceptionDetails: {
+                exception: `Failed to endChat: ${error}`
+              }
+            });
+          }
+        }
+      } catch (ex) {
+        TelemetryHelper.logSDKEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.GetConversationDetailsCallFailed,
+          ExceptionDetails: {
+            exception: `Get Conversation Details Call Failed : ${ex}`
+          }
+        });
+        NotificationHandler.notifyError(NotificationScenarios.Connection, "Get Conversation Details Call Failed: " + ex);
+      }
+    },
+    onCancel: () => {
+      TelemetryHelper.logConfigDataEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.ConfirmationCancelButtonClicked,
+        Description: "Confirmation pane Cancel button clicked."
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+        payload: false
+      });
+      const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
+
+      if (previousFocused) {
+        setFocusOnElement(previousFocused);
+        dispatch({
+          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+          payload: null
+        });
+      } else {
+        setFocusOnSendBox();
+      }
+
+      setTabIndices(elements, initialTabIndexMap, true);
+    },
+    ...(props === null || props === void 0 ? void 0 : props.controlProps)
+  }; // Move focus to the first button
+
+  useEffect(() => {
+    preventFocusToMoveOutOfElement(controlProps.id);
+    const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
+
+    if (focusableElements) {
+      focusableElements[0].focus();
+    }
+
+    elements = findParentFocusableElementsWithoutChildContainer(controlProps.id);
+    setTabIndices(elements, initialTabIndexMap, false);
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.ConfirmationPaneLoaded
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
+    brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
+  }), /*#__PURE__*/React.createElement(ConfirmationPane, {
+    componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,
+    controlProps: controlProps,
+    styleProps: props === null || props === void 0 ? void 0 : props.styleProps
+  }));
+};
+export default ConfirmationPaneStateful;

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

@@ -0,0 +1,10 @@
+export 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?"
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+import React from "react";
+export 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.createElement("div", {
+    id: "oc-lcw-dim-layer",
+    style: defaultDimLayerStyles
+  });
+};

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

@@ -0,0 +1,106 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useState } from "react";
+import { findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
+import { DimLayer } from "../dimlayer/DimLayer";
+import { InputValidationPane } from "@microsoft/omnichannel-chat-components";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { NotificationHandler } from "../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { Regex } from "../../common/Constants";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import useChatSDKStore from "../../hooks/useChatSDKStore";
+export const EmailTranscriptPaneStateful = props => {
+  var _props$controlProps;
+
+  const initialTabIndexMap = new Map();
+  let elements = [];
+  const [state, dispatch] = useChatContextStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const chatSDK = useChatSDKStore();
+  const [initialEmail, setInitialEmail] = useState("");
+
+  const closeEmailTranscriptPane = () => {
+    dispatch({
+      type: LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
+      payload: false
+    });
+    const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
+
+    if (previousFocused) {
+      setFocusOnElement(previousFocused);
+    } else {
+      setFocusOnSendBox();
+    }
+
+    dispatch({
+      type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+      payload: null
+    });
+    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.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.EmailTranscriptSent,
+          Description: "Transcript sent to email successfully."
+        });
+      } catch (ex) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.EmailTranscriptFailed,
+          ExceptionDetails: {
+            exception: ex
+          }
+        });
+        NotificationHandler.notifyError(NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? "Email transcript to " + email + " failed.");
+      }
+    },
+    onCancel: () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.EmailTranscriptButtonClicked,
+        Description: "Email Transcript button clicked."
+      });
+      closeEmailTranscriptPane();
+    },
+    checkInput: function (input) {
+      return new RegExp(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
+
+  useEffect(() => {
+    preventFocusToMoveOutOfElement(controlProps.id);
+    const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
+
+    if (focusableElements) {
+      focusableElements[0].focus();
+    }
+
+    elements = findParentFocusableElementsWithoutChildContainer(controlProps.id);
+    setTabIndices(elements, initialTabIndexMap, false);
+    setInitialEmail(state.appStates.preChatResponseEmail);
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.EmailTranscriptLoaded
+    });
+  }, [initialEmail]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
+    brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
+  }), /*#__PURE__*/React.createElement(InputValidationPane, {
+    componentOverrides: props.componentOverrides,
+    controlProps: controlProps,
+    styleProps: props.styleProps
+  }));
+};
+export default EmailTranscriptPaneStateful;

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

@@ -0,0 +1,69 @@
+import { OmnichannelChatSDK } from "@microsoft/omnichannel-chat-sdk";
+import { cleanup } from "@testing-library/react";
+jest.mock("@microsoft/omnichannel-chat-sdk");
+describe("EmailTranscriptPaneStateful unit test", () => {
+  afterEach(() => {
+    cleanup;
+    jest.resetAllMocks();
+  });
+  it("Method emailLiveChatTranscript is called", async () => {
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new 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(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(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/esm/components/emailtranscriptpanestateful/interfaces/IChatTranscriptBody.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,104 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React from "react";
+import AudioNotificationStateful from "./audionotificationstateful/AudioNotificationStateful";
+import { Constants } from "../../common/Constants";
+import { Footer } from "@microsoft/omnichannel-chat-components";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { NotificationHandler } from "../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { downloadTranscript } from "./downloadtranscriptstateful/DownloadTranscriptStateful";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import useChatSDKStore from "../../hooks/useChatSDKStore";
+import newMessageNotification from "../../assets/audios/newMessageNotification.mp3"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export const FooterStateful = props => {
+  var _footerProps$controlP3, _footerProps$controlP4;
+
+  const [state, dispatch] = useChatContextStore(); // 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 = useChatSDKStore();
+  const controlProps = {
+    id: "oc-lcw-footer",
+    dir: state.domainStates.globalDir,
+    onDownloadTranscriptClick: async () => {
+      try {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.DownloadTranscriptButtonClicked,
+          Description: "Download Transcript button clicked."
+        });
+        await 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.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.DownloadTranscriptFailed,
+          ExceptionDetails: {
+            exception: ex
+          }
+        });
+        NotificationHandler.notifyError(NotificationScenarios.DownloadTranscriptError, (downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.bannerMessageOnError) ?? Constants.defaultDownloadTranscriptError);
+      }
+    },
+    onEmailTranscriptClick: () => {
+      var _footerProps$controlP, _footerProps$controlP2;
+
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: 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.SET_PREVIOUS_FOCUSED_ELEMENT,
+          payload: emailTranscriptButton
+        });
+      }
+
+      dispatch({
+        type: LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
+        payload: true
+      });
+    },
+    onAudioNotificationClick: () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.AudioToggleButtonClicked,
+        Description: "Audio button clicked."
+      });
+      dispatch({
+        type: 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(AudioNotificationStateful, {
+    audioSrc: (audioNotificationProps === null || audioNotificationProps === void 0 ? void 0 : audioNotificationProps.audioSrc) ?? newMessageNotification,
+    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
+  }));
+};
+export default FooterStateful;

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

@@ -0,0 +1,20 @@
+import React, { useEffect, useRef } from "react";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+export const AudioNotificationStateful = props => {
+  const {
+    audioSrc,
+    isAudioMuted
+  } = props;
+  const audioRef = useRef(new Audio(audioSrc));
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+    BroadcastService.getMessageByEventName("NewMessageNotification").subscribe(msg => {
+      audioRef.current.play();
+    });
+  }, []);
+  useEffect(() => {
+    isAudioMuted ? audioRef.current.muted = true : audioRef.current.muted = false;
+  }, [isAudioMuted]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+export default AudioNotificationStateful;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};