@microsoft/omnichannel-chat-widget 0.1.0-main.02fa07b

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

@@ -0,0 +1,95 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useRef, useState } from "react";
+import { ConversationState } from "../../contexts/common/ConversationState";
+import { Header } from "@microsoft/omnichannel-chat-components";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { defaultOutOfOfficeHeaderStyleProps } from "./common/styleProps/defaultOutOfOfficeHeaderStyleProps";
+import useChatAdapterStore from "../../hooks/useChatAdapterStore";
+import useChatContextStore from "../../hooks/useChatContextStore";
+export const HeaderStateful = props => {
+  var _state$domainStates$l, _state$domainStates$l2, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro;
+
+  const [state, dispatch] = useChatContextStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const [adapter] = useChatAdapterStore();
+  const {
+    headerProps,
+    outOfOfficeHeaderProps,
+    endChat
+  } = 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({}, defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
+  const conversationState = useRef(state.appStates.conversationState);
+  const controlProps = {
+    id: "oc-lcw-header",
+    dir: state.domainStates.globalDir,
+    onMinimizeClick: () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.HeaderMinimizeButtonClicked,
+        Description: "Header Minimize button clicked."
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_MINIMIZED,
+        payload: true
+      });
+    },
+    onCloseClick: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.HeaderCloseButtonClicked,
+        Description: "Header Close button clicked."
+      });
+
+      if (conversationState.current === ConversationState.Active) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+          payload: true
+        });
+      } else {
+        const skipEndChatSDK = true;
+        const skipCloseChat = false;
+        await endChat(adapter, skipEndChatSDK, skipCloseChat);
+      }
+
+      dispatch({
+        type: 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.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.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.Loading || state.appStates.conversationState === ConversationState.Prechat || state.appStates.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.SET_MINIMIZED,
+        payload: true
+      });
+    },
+    ...(outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.controlProps),
+    hideCloseButton: state.appStates.conversationState === ConversationState.OutOfOffice || (outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : (_outOfOfficeHeaderPro = outOfOfficeHeaderProps.controlProps) === null || _outOfOfficeHeaderPro === void 0 ? void 0 : _outOfOfficeHeaderPro.hideCloseButton)
+  };
+  useEffect(() => {
+    if (state.appStates.outsideOperatingHours) {
+      setOutOfOperatingHours(true);
+    }
+
+    if (state.appStates.conversationState) {
+      conversationState.current = state.appStates.conversationState;
+    }
+  }, [state.appStates]);
+  return /*#__PURE__*/React.createElement(Header, {
+    componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
+    controlProps: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,
+    styleProps: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps
+  });
+};
+export default HeaderStateful;

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

@@ -0,0 +1,11 @@
+export const defaultOutOfOfficeHeaderStyleProps = {
+  generalStyleProps: {
+    borderRadius: "0px",
+    backgroundColor: "#000000",
+    height: "40px"
+  },
+  titleStyleProps: {
+    margin: "0 0 0 10px",
+    color: "White"
+  }
+};

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

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

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

@@ -0,0 +1,21 @@
+import React, { useReducer, useState } from "react";
+import { ChatAdapterStore } from "../../contexts/ChatAdapterStore";
+import { ChatContextStore } from "../../contexts/ChatContextStore";
+import { ChatSDKStore } from "../../contexts/ChatSDKStore";
+import LiveChatWidgetStateful from "./livechatwidgetstateful/LiveChatWidgetStateful";
+import { createReducer } from "../../contexts/createReducer";
+import { getLiveChatWidgetContextInitialState } from "../../contexts/common/LiveChatWidgetContextInitialState";
+export const LiveChatWidget = props => {
+  const reducer = createReducer();
+  const [state, dispatch] = useReducer(reducer, getLiveChatWidgetContextInitialState(props)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const [adapter, setAdapter] = useState(undefined);
+  return /*#__PURE__*/React.createElement(ChatSDKStore.Provider, {
+    value: props.chatSDK
+  }, /*#__PURE__*/React.createElement(ChatAdapterStore.Provider, {
+    value: [adapter, setAdapter]
+  }, /*#__PURE__*/React.createElement(ChatContextStore.Provider, {
+    value: [state, dispatch]
+  }, /*#__PURE__*/React.createElement(LiveChatWidgetStateful, props))));
+};
+export default LiveChatWidget;

package/lib/esm/components/livechatwidget/common/createAdapter.js

@@ -0,0 +1,27 @@
+import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationLevel } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationLevel";
+import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export const createAdapter = async chatSDK => {
+  const chatAdapterOptionalParams = {
+    IC3Adapter: {
+      options: {
+        callbackOnNotification: notification => {
+          if (notification.id === NotificationScenarios.InternetConnection && notification.level == NotificationLevel.Error) {
+            notification.message = defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION;
+          }
+
+          if (notification.id === NotificationScenarios.InternetConnection && notification.level == NotificationLevel.Success) {
+            notification.message = defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE;
+          }
+
+          if (notification.id && notification.message) {
+            NotificationHandler.notifyWithLevel(notification.id, notification.message, notification.level);
+          }
+        }
+      }
+    }
+  };
+  return await chatSDK.createChatAdapter(chatAdapterOptionalParams);
+};

package/lib/esm/components/livechatwidget/common/createFooter.js

@@ -0,0 +1,27 @@
+import FooterStateful from "../../footerstateful/FooterStateful";
+import React from "react";
+import { decodeComponentString } from "@microsoft/omnichannel-chat-components";
+import { shouldShowFooter } from "../../../controller/componentController";
+export const createFooter = (props, state) => {
+  var _props$footerProps, _props$controlProps, _props$componentOverr, _props$componentOverr2;
+
+  const footerPropsHidden = { ...props.footerProps,
+    controlProps: { ...((_props$footerProps = props.footerProps) === null || _props$footerProps === void 0 ? void 0 : _props$footerProps.controlProps),
+      hideDownloadTranscriptButton: true,
+      hideEmailTranscriptButton: true,
+      hideAudioNotificationButton: true
+    }
+  };
+  const footer = !((_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideFooter) && shouldShowFooter(state) ? decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.footer) || /*#__PURE__*/React.createElement(FooterStateful, {
+    footerProps: props.footerProps,
+    downloadTranscriptProps: props.downloadTranscriptProps,
+    audioNotificationProps: props.audioNotificationProps,
+    hideFooterDisplay: false
+  }) : decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.footer) || /*#__PURE__*/React.createElement(FooterStateful, {
+    footerProps: footerPropsHidden,
+    downloadTranscriptProps: props.downloadTranscriptProps,
+    audioNotificationProps: props.audioNotificationProps,
+    hideFooterDisplay: true
+  });
+  return footer;
+};

package/lib/esm/components/livechatwidget/common/createInternetConnectionChangeHandler.js

@@ -0,0 +1,30 @@
+import { Constants } from "../../../common/Constants";
+import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
+
+const isInternetConnected = async () => {
+  try {
+    const response = await fetch(Constants.internetConnectionTestUrl);
+    const text = await response.text();
+    return text === Constants.internetConnectionTestUrlText;
+  } catch {
+    return false;
+  }
+};
+
+export const createInternetConnectionChangeHandler = async () => {
+  const handler = async () => {
+    const connected = await isInternetConnected();
+
+    if (!connected) {
+      NotificationHandler.notifyError(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
+    } else {
+      NotificationHandler.notifySuccess(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
+    }
+  }; // Checking connection status on online & offline events due to possible false positives
+
+
+  window.addEventListener("online", () => handler(), false);
+  window.addEventListener("offline", () => handler(), false);
+};

package/lib/esm/components/livechatwidget/common/createMarkdown.js

@@ -0,0 +1,61 @@
+import MarkdownIt from "markdown-it";
+import MarkdownItForInline from "markdown-it-for-inline";
+import { defaultMarkdownLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMarkdownLocalizedTexts";
+import { Constants } from "../../../common/Constants"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
+  let markdown;
+
+  if (!disableMarkdownMessageFormatting) {
+    markdown = new MarkdownIt(Constants.Default, {
+      html: true,
+      linkify: true,
+      breaks: !disableNewLineMarkdownSupport
+    }); // ToDo: Commenting below usage of plugin until deferred bug is resolved: https://github.com/mayashavin/markdown-it-slack/issues/1
+    // markdown.use(MarkdownSlack);
+    // Markdown override for open link in new tab
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, quotes
+
+    markdown.use(MarkdownItForInline, "url_new_win", "link_open", function (tokens, idx, env) {
+      const targetAttrIndex = tokens[idx].attrIndex(Constants.Target); // Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS.
+
+      const TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
+      if (~targetAttrIndex) {
+        tokens[idx].attrs[targetAttrIndex][1] = Constants.Blank;
+      } else {
+        tokens[idx].attrPush([Constants.Target, Constants.Blank]);
+      }
+
+      const relAttrIndex = tokens[idx].attrIndex(Constants.TargetRelationship);
+
+      if (~relAttrIndex) {
+        tokens[idx].attrs[relAttrIndex][1] = Constants.TargetRelationshipAttributes;
+      } else {
+        tokens[idx].attrPush([Constants.TargetRelationship, Constants.TargetRelationshipAttributes]);
+        tokens[idx].attrPush([Constants.Title, defaultMarkdownLocalizedTexts.MARKDOWN_EXTERNAL_LINK_ALT]); // eslint-disable-next-line quotes
+
+        const iconTokens = markdown.parseInline(`![${defaultMarkdownLocalizedTexts.MARKDOWN_EXTERNAL_LINK_ALT}](${TRANSPARENT_GIF})`, env)[0].children;
+
+        if (iconTokens && iconTokens.length > 0) {
+          iconTokens[0].attrJoin("class", Constants.OpenLinkIconCssClass);
+          tokens.splice(idx + 2, 0, ...iconTokens);
+        }
+      }
+    });
+  } else {
+    markdown = new MarkdownIt(Constants.Zero, {
+      html: true,
+      linkify: true,
+      breaks: !disableNewLineMarkdownSupport
+    });
+    markdown.enable(["entity", // Rule to process html entity - {, ¯, "
+    "linkify", // Rule to replace link-like texts with link nodes
+    "html_block", // Rule to process html blocks and paragraphs
+    "html_inline", // Rule to process html tags
+    "newline" // Rule to proceess '\n'
+    ]);
+  }
+
+  return markdown;
+};