@microsoft/omnichannel-chat-components 1.0.7-main.6b39819 → 1.0.7

package/lib/cjs/common/Constants.js

@@ -32,6 +32,8 @@ exports.ElementType = ElementType;
   ElementType["ChatButton"] = "ChatButton";
   ElementType["CloseButton"] = "CloseButton";
   ElementType["HeaderMinimizeButton"] = "HeaderMinimizeButton";
+  ElementType["NotificationDismissButton"] = "NotificationDismissButton";
+  ElementType["NotificationCloseChatButton"] = "NotificationCloseChatButton";
   ElementType["FooterDownloadTranscriptButton"] = "FooterDownloadTranscriptButton";
   ElementType["FooterEmailTranscriptButton"] = "FooterEmailTranscriptButton";
   ElementType["FooterSoundNotificationButton"] = "FooterSoundNotificationButton";
@@ -52,7 +54,7 @@ exports.ElementType = ElementType;
   ElementType["Custom"] = "Custom";
 })(ElementType || (exports.ElementType = ElementType = {}));
 
-const Ids = (_class3 = class Ids {}, _defineProperty(_class3, "DefaultCallingContainerId", "lcw-calling-container"), _defineProperty(_class3, "DefaultCurrentCallId", "lcw-current-call-container"), _defineProperty(_class3, "CurrentCallActionGroupId", "lcw-current-call-action-icons"), _defineProperty(_class3, "CurrentCallFooterId", "lcw-current-call-footer"), _defineProperty(_class3, "RemoteVideoTileId", "lcw-remote-video"), _defineProperty(_class3, "SelfVideoTileId", "lcw-self-video"), _defineProperty(_class3, "VideoTileGroupId", "lcw-current-call-body"), _defineProperty(_class3, "EndCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "MicButtonId", "lcw-toggle-audio"), _defineProperty(_class3, "VideoButtonId", "lcw-toggle-video"), _defineProperty(_class3, "CallTimerId", "lcw-current-call-timer"), _defineProperty(_class3, "CurrentCallLeftGroupId", "lcw-current-call-left-group"), _defineProperty(_class3, "CurrentCallMiddleGroupId", "lcw-current-call-middle-group"), _defineProperty(_class3, "CurrentCallRightGroupId", "lcw-current-call-right-group"), _defineProperty(_class3, "DefaultIncomingCallId", "lcw-incoming-call"), _defineProperty(_class3, "DeclineCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "AudioCallButtonId", "lcw-call-accept-button"), _defineProperty(_class3, "VideoCallButtonId", "lcw-video-call-accept-button"), _defineProperty(_class3, "IncomingCallTitleId", "lcw-incoming-call-message"), _defineProperty(_class3, "DefaultIncomingCallPopupId", "lcw-incoming-call-popup"), _defineProperty(_class3, "IncomingCallLeftGroupId", "lcw-incoming-call-left-group"), _defineProperty(_class3, "IncomingCallMiddleGroupId", "lcw-incoming-call-middle-group"), _defineProperty(_class3, "IncomingCallRightGroupId", "lcw-incoming-call-right-group"), _defineProperty(_class3, "DefaultChatButtonId", "lcw-components-chat-button"), _defineProperty(_class3, "DefaultConfirmationPaneId", "lcw-components-confirmation-pane"), _defineProperty(_class3, "CustomFooterId", "lcw-footer"), _defineProperty(_class3, "DownloadTranscriptButtonId", "lcw-footer-download-transcript-button"), _defineProperty(_class3, "EmailTranscriptButtonId", "lcw-footer-email-transcript-button"), _defineProperty(_class3, "AudioNotificationButtonId", "lcw-footer-audio-notification-button"), _defineProperty(_class3, "DefaultFooterId", "lcw-components-footer"), _defineProperty(_class3, "FooterLeftGroupId", "lcw-footer-left-group"), _defineProperty(_class3, "FooterMiddleGroupId", "lcw-footer-middle-group"), _defineProperty(_class3, "FooterRightGroupId", "lcw-footer-right-group"), _defineProperty(_class3, "DefaultHeaderId", "lcw-header"), _defineProperty(_class3, "MinimizeButtonId", "lcw-header-minimize-button"), _defineProperty(_class3, "CloseButtonId", "lcw-header-close-button"), _defineProperty(_class3, "HeaderIconId", "lcw-header-icon"), _defineProperty(_class3, "HeaderTitleId", "lcw-header-title"), _defineProperty(_class3, "HeaderLeftGroupId", "lcw-header-left-group"), _defineProperty(_class3, "HeaderMiddleGroupId", "lcw-header-middle-group"), _defineProperty(_class3, "HeaderRightGroupId", "lcw-header-right-group"), _defineProperty(_class3, "DefaultInputValidationPaneId", "lcw-email-transcript-dialog-container"), _defineProperty(_class3, "DefaultInputValidationPaneInputId", "lcw-email-transcript-dialog-text-field"), _defineProperty(_class3, "DefaultLoadingPaneId", "lcw-loading-pane"), _defineProperty(_class3, "DefaultOOOHPaneId", "lcw-out-of-office-hours-pane"), _defineProperty(_class3, "DefaultPostChatSurveyPaneId", "lcw-postchat-survey-pane"), _defineProperty(_class3, "DefaultPreChatSurveyPaneId", "lcw-prechat-survey-pane-default"), _defineProperty(_class3, "DefaultProactiveChatPaneId", "lcw-proactive-chat"), _defineProperty(_class3, "DefaultReconnectChatPaneId", "lcw-reconnect-chat-pane"), _class3);
+const Ids = (_class3 = class Ids {}, _defineProperty(_class3, "DefaultCallingContainerId", "lcw-calling-container"), _defineProperty(_class3, "DefaultCurrentCallId", "lcw-current-call-container"), _defineProperty(_class3, "CurrentCallActionGroupId", "lcw-current-call-action-icons"), _defineProperty(_class3, "CurrentCallFooterId", "lcw-current-call-footer"), _defineProperty(_class3, "RemoteVideoTileId", "lcw-remote-video"), _defineProperty(_class3, "SelfVideoTileId", "lcw-self-video"), _defineProperty(_class3, "VideoTileGroupId", "lcw-current-call-body"), _defineProperty(_class3, "EndCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "MicButtonId", "lcw-toggle-audio"), _defineProperty(_class3, "VideoButtonId", "lcw-toggle-video"), _defineProperty(_class3, "CallTimerId", "lcw-current-call-timer"), _defineProperty(_class3, "CurrentCallLeftGroupId", "lcw-current-call-left-group"), _defineProperty(_class3, "CurrentCallMiddleGroupId", "lcw-current-call-middle-group"), _defineProperty(_class3, "CurrentCallRightGroupId", "lcw-current-call-right-group"), _defineProperty(_class3, "DefaultIncomingCallId", "lcw-incoming-call"), _defineProperty(_class3, "DeclineCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "AudioCallButtonId", "lcw-call-accept-button"), _defineProperty(_class3, "VideoCallButtonId", "lcw-video-call-accept-button"), _defineProperty(_class3, "IncomingCallTitleId", "lcw-incoming-call-message"), _defineProperty(_class3, "DefaultIncomingCallPopupId", "lcw-incoming-call-popup"), _defineProperty(_class3, "IncomingCallLeftGroupId", "lcw-incoming-call-left-group"), _defineProperty(_class3, "IncomingCallMiddleGroupId", "lcw-incoming-call-middle-group"), _defineProperty(_class3, "IncomingCallRightGroupId", "lcw-incoming-call-right-group"), _defineProperty(_class3, "DefaultChatButtonId", "lcw-components-chat-button"), _defineProperty(_class3, "DefaultConfirmationPaneId", "lcw-components-confirmation-pane"), _defineProperty(_class3, "CustomFooterId", "lcw-footer"), _defineProperty(_class3, "DownloadTranscriptButtonId", "lcw-footer-download-transcript-button"), _defineProperty(_class3, "EmailTranscriptButtonId", "lcw-footer-email-transcript-button"), _defineProperty(_class3, "AudioNotificationButtonId", "lcw-footer-audio-notification-button"), _defineProperty(_class3, "DefaultFooterId", "lcw-components-footer"), _defineProperty(_class3, "FooterLeftGroupId", "lcw-footer-left-group"), _defineProperty(_class3, "FooterMiddleGroupId", "lcw-footer-middle-group"), _defineProperty(_class3, "FooterRightGroupId", "lcw-footer-right-group"), _defineProperty(_class3, "DefaultHeaderId", "lcw-header"), _defineProperty(_class3, "MinimizeButtonId", "lcw-header-minimize-button"), _defineProperty(_class3, "CloseButtonId", "lcw-header-close-button"), _defineProperty(_class3, "HeaderIconId", "lcw-header-icon"), _defineProperty(_class3, "HeaderTitleId", "lcw-header-title"), _defineProperty(_class3, "HeaderLeftGroupId", "lcw-header-left-group"), _defineProperty(_class3, "HeaderMiddleGroupId", "lcw-header-middle-group"), _defineProperty(_class3, "HeaderRightGroupId", "lcw-header-right-group"), _defineProperty(_class3, "DefaultInputValidationPaneId", "lcw-email-transcript-dialog-container"), _defineProperty(_class3, "DefaultInputValidationPaneInputId", "lcw-email-transcript-dialog-text-field"), _defineProperty(_class3, "DefaultLoadingPaneId", "lcw-loading-pane"), _defineProperty(_class3, "DefaultNotificationPaneId", "lcw-notification-pane"), _defineProperty(_class3, "DefaultOOOHPaneId", "lcw-out-of-office-hours-pane"), _defineProperty(_class3, "DefaultPostChatSurveyPaneId", "lcw-postchat-survey-pane"), _defineProperty(_class3, "DefaultPreChatSurveyPaneId", "lcw-prechat-survey-pane-default"), _defineProperty(_class3, "DefaultProactiveChatPaneId", "lcw-proactive-chat"), _defineProperty(_class3, "DefaultReconnectChatPaneId", "lcw-reconnect-chat-pane"), _class3);
 exports.Ids = Ids;
 const ButtonTypes = (_class4 = class ButtonTypes {}, _defineProperty(_class4, "Icon", "icon"), _defineProperty(_class4, "Text", "text"), _class4);
 exports.ButtonTypes = ButtonTypes;

package/lib/cjs/components/notificationpane/NotificationPane.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@fluentui/react");
+
+var _DismissButton = _interopRequireDefault(require("./subcomponents/DismissButton"));
+
+var _CloseChatButton = _interopRequireDefault(require("./subcomponents/CloseChatButton"));
+
+var _decodeComponentString = require("../../common/decodeComponentString");
+
+var _Constants = require("../../common/Constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function NotificationPane(props) {
+  var _props$componentOverr, _props$componentOverr2, _props$componentOverr3, _props$componentOverr4, _props$componentOverr5, _props$dismissButtonP, _props$closeChatButto;
+
+  const elementId = props.id ?? _Constants.Ids.DefaultNotificationPaneId;
+  const containerStyles = {
+    root: Object.assign({}, props.generalStyleProps)
+  };
+  const titleStyles = {
+    root: Object.assign({}, props.titleStyleProps)
+  };
+  const subtitleStyles = {
+    root: Object.assign({}, props.subtitleStyleProps)
+  };
+  const hyperlinkStyles = {
+    root: Object.assign({}, props.hyperlinkStyleProps)
+  };
+  const hyperlinkHoverStyles = {
+    root: Object.assign({}, props.hyperlinkHoverStyleProps)
+  };
+  const notificationIconProps = Object.assign({}, props.notificationIconProps);
+  const notificationIconStyles = Object.assign({}, props.notificationIconStyleProps);
+  const notificationIconImageStyles = {
+    root: {},
+    image: notificationIconStyles
+  };
+  const notificationIconContainerStyles = {
+    root: Object.assign({}, props.notificationIconContainerStyleProps)
+  };
+  const dismissButtonProps = Object.assign({}, props.dismissButtonProps);
+  const dismissButtonStyles = Object.assign({}, props.dismissButtonStyleProps);
+  const dismissButtonHoverStyles = Object.assign({}, props.dismissButtonHoverStyleProps);
+  const closeChatButtonProps = Object.assign({}, props.closeChatButtonProps);
+  const closeChatButtonStyles = Object.assign({}, props.closeChatButtonStyleProps);
+  const closeChatButtonHoverStyles = Object.assign({}, props.closeChatButtonHoverStyleProps);
+  const infoGroupStyles = {
+    root: Object.assign({}, props.infoGroupStyleProps)
+  };
+  const buttonGroupStyles = {
+    root: Object.assign({}, props.buttonGroupStyleProps)
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    className: props.containerClassName,
+    styles: containerStyles,
+    id: elementId,
+    dir: props.dir ?? "ltr",
+    tabIndex: -1,
+    role: "presentation"
+  }, /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    horizontal: true,
+    horizontalAlign: "space-between",
+    styles: containerStyles,
+    dir: props.dir ?? "ltr"
+  }, /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    styles: notificationIconContainerStyles
+  }, !props.hideNotificationIcon && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationIcon) || /*#__PURE__*/_react.default.createElement(_react2.Image, {
+    className: notificationIconProps.className,
+    id: notificationIconProps.id,
+    src: notificationIconProps.src,
+    alt: notificationIconProps.alt,
+    tabIndex: -1,
+    styles: notificationIconImageStyles
+  }))), /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    styles: infoGroupStyles,
+    dir: props.dir ?? "ltr"
+  }, !props.hideTitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/_react.default.createElement(_react2.Label, {
+    className: props.titleClassName,
+    styles: titleStyles,
+    tabIndex: -1,
+    id: elementId + "-title"
+  }, props.titleText)), !props.hideSubtitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.subtitle) || /*#__PURE__*/_react.default.createElement(_react2.Label, {
+    className: props.subtitleClassName,
+    styles: subtitleStyles,
+    tabIndex: -1,
+    id: elementId + "-subtitle"
+  }, props.subtitleText)), !props.hideHyperlink && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.hyperlink) || /*#__PURE__*/_react.default.createElement(_react2.Link, {
+    className: props.hyperlinkClassName,
+    ariaLabel: props.hyperlinkAriaLabel,
+    id: elementId + "-hyperlink",
+    styles: hyperlinkStyles,
+    hoverStyles: hyperlinkHoverStyles,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: props.hyperlinkHref
+  }, props.hyperlinkText))), !props.hideDismissButton && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.dismissButton) || /*#__PURE__*/_react.default.createElement(_DismissButton.default, _extends({}, dismissButtonProps, {
+    className: props.dismissButtonClassName,
+    onClick: (_props$dismissButtonP = props.dismissButtonProps) === null || _props$dismissButtonP === void 0 ? void 0 : _props$dismissButtonP.onClick,
+    styles: dismissButtonStyles,
+    hoverStyles: dismissButtonHoverStyles
+  })))), /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    horizontal: true,
+    styles: buttonGroupStyles,
+    dir: props.dir ?? "ltr"
+  }, !props.hideCloseChatButton && /*#__PURE__*/_react.default.createElement(_CloseChatButton.default, _extends({}, closeChatButtonProps, {
+    className: props.closeChatButtonClassName,
+    onClick: (_props$closeChatButto = props.closeChatButtonProps) === null || _props$closeChatButto === void 0 ? void 0 : _props$closeChatButto.onClick,
+    styles: closeChatButtonStyles,
+    hoverStyles: closeChatButtonHoverStyles
+  })))));
+}
+
+var _default = NotificationPane;
+exports.default = _default;

package/lib/cjs/components/notificationpane/interfaces/INotificationPaneProps.js

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

package/lib/cjs/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectClassNames.js

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

package/lib/cjs/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectControlProps.js

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

package/lib/cjs/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectNotificationProps.js

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

package/lib/cjs/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectStyleProps.js

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

package/lib/cjs/components/notificationpane/interfaces/common/INotificationPaneClassNames.js

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

package/lib/cjs/components/notificationpane/interfaces/common/INotificationPaneComponentOverrides.js

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

package/lib/cjs/components/notificationpane/interfaces/common/INotificationPaneControlProps.js

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

package/lib/cjs/components/notificationpane/interfaces/common/INotificationPaneInternal.js

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

package/lib/cjs/components/notificationpane/interfaces/common/INotificationPaneStyleProps.js

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

package/lib/cjs/components/notificationpane/subcomponents/CloseChatButton.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Constants = require("../../../common/Constants");
+
+var _CommandButton = _interopRequireDefault(require("../../common/commandbutton/CommandButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function CloseChatButton(props) {
+  const {
+    type
+  } = props;
+  const customEvent = {
+    elementType: _Constants.ElementType.NotificationCloseChatButton,
+    elementId: props === null || props === void 0 ? void 0 : props.id,
+    eventName: _Constants.EventNames.OnClick
+  };
+  return /*#__PURE__*/_react.default.createElement(_CommandButton.default, {
+    id: props === null || props === void 0 ? void 0 : props.id,
+    type: type,
+    text: props.text,
+    styles: props.styles,
+    hoverStyles: props.hoverStyles,
+    focusStyles: props.focusStyles,
+    iconName: props.iconName,
+    imageIconProps: props.imageIconProps,
+    onClick: props.onClick,
+    ariaLabel: props.ariaLabel,
+    className: props.className,
+    customEvent: customEvent,
+    hideButtonTitle: props.hideButtonTitle
+  });
+}
+
+var _default = CloseChatButton;
+exports.default = _default;

package/lib/cjs/components/notificationpane/subcomponents/DismissButton.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Constants = require("../../../common/Constants");
+
+var _CommandButton = _interopRequireDefault(require("../../common/commandbutton/CommandButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function DismissButton(props) {
+  const {
+    type
+  } = props;
+  const customEvent = {
+    elementType: _Constants.ElementType.NotificationDismissButton,
+    elementId: props === null || props === void 0 ? void 0 : props.id,
+    eventName: _Constants.EventNames.OnClick
+  };
+  return /*#__PURE__*/_react.default.createElement(_CommandButton.default, {
+    id: props === null || props === void 0 ? void 0 : props.id,
+    type: type,
+    text: props.text,
+    styles: props.styles,
+    hoverStyles: props.hoverStyles,
+    focusStyles: props.focusStyles,
+    iconName: props.iconName,
+    imageIconProps: props.imageIconProps,
+    onClick: props.onClick,
+    ariaLabel: props.ariaLabel,
+    className: props.className,
+    customEvent: customEvent,
+    hideButtonTitle: props.hideButtonTitle
+  });
+}
+
+var _default = DismissButton;
+exports.default = _default;

package/lib/cjs/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "ModernChatIconBase64", {
     return _Icons.ModernChatIconBase64;
   }
 });
+Object.defineProperty(exports, "NotificationPane", {
+  enumerable: true,
+  get: function () {
+    return _NotificationPane.default;
+  }
+});
 Object.defineProperty(exports, "OutOfOfficeHoursPane", {
   enumerable: true,
   get: function () {
@@ -268,6 +274,8 @@ var _LoadingPane = _interopRequireDefault(require("./components/loadingpane/Load
 
 var _OOOHPane = _interopRequireDefault(require("./components/outofofficehourspane/OOOHPane"));
 
+var _NotificationPane = _interopRequireDefault(require("./components/notificationpane/NotificationPane"));
+
 var _PreChatSurveyPane = _interopRequireDefault(require("./components/prechatsurveypane/PreChatSurveyPane"));
 
 var _PostChatSurveyPane = _interopRequireDefault(require("./components/postchatsurveypane/PostChatSurveyPane"));

package/lib/esm/common/Constants.js

@@ -20,6 +20,8 @@ export let ElementType;
   ElementType["ChatButton"] = "ChatButton";
   ElementType["CloseButton"] = "CloseButton";
   ElementType["HeaderMinimizeButton"] = "HeaderMinimizeButton";
+  ElementType["NotificationDismissButton"] = "NotificationDismissButton";
+  ElementType["NotificationCloseChatButton"] = "NotificationCloseChatButton";
   ElementType["FooterDownloadTranscriptButton"] = "FooterDownloadTranscriptButton";
   ElementType["FooterEmailTranscriptButton"] = "FooterEmailTranscriptButton";
   ElementType["FooterSoundNotificationButton"] = "FooterSoundNotificationButton";
@@ -40,7 +42,7 @@ export let ElementType;
   ElementType["Custom"] = "Custom";
 })(ElementType || (ElementType = {}));
 
-export const Ids = (_class3 = class Ids {}, _defineProperty(_class3, "DefaultCallingContainerId", "lcw-calling-container"), _defineProperty(_class3, "DefaultCurrentCallId", "lcw-current-call-container"), _defineProperty(_class3, "CurrentCallActionGroupId", "lcw-current-call-action-icons"), _defineProperty(_class3, "CurrentCallFooterId", "lcw-current-call-footer"), _defineProperty(_class3, "RemoteVideoTileId", "lcw-remote-video"), _defineProperty(_class3, "SelfVideoTileId", "lcw-self-video"), _defineProperty(_class3, "VideoTileGroupId", "lcw-current-call-body"), _defineProperty(_class3, "EndCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "MicButtonId", "lcw-toggle-audio"), _defineProperty(_class3, "VideoButtonId", "lcw-toggle-video"), _defineProperty(_class3, "CallTimerId", "lcw-current-call-timer"), _defineProperty(_class3, "CurrentCallLeftGroupId", "lcw-current-call-left-group"), _defineProperty(_class3, "CurrentCallMiddleGroupId", "lcw-current-call-middle-group"), _defineProperty(_class3, "CurrentCallRightGroupId", "lcw-current-call-right-group"), _defineProperty(_class3, "DefaultIncomingCallId", "lcw-incoming-call"), _defineProperty(_class3, "DeclineCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "AudioCallButtonId", "lcw-call-accept-button"), _defineProperty(_class3, "VideoCallButtonId", "lcw-video-call-accept-button"), _defineProperty(_class3, "IncomingCallTitleId", "lcw-incoming-call-message"), _defineProperty(_class3, "DefaultIncomingCallPopupId", "lcw-incoming-call-popup"), _defineProperty(_class3, "IncomingCallLeftGroupId", "lcw-incoming-call-left-group"), _defineProperty(_class3, "IncomingCallMiddleGroupId", "lcw-incoming-call-middle-group"), _defineProperty(_class3, "IncomingCallRightGroupId", "lcw-incoming-call-right-group"), _defineProperty(_class3, "DefaultChatButtonId", "lcw-components-chat-button"), _defineProperty(_class3, "DefaultConfirmationPaneId", "lcw-components-confirmation-pane"), _defineProperty(_class3, "CustomFooterId", "lcw-footer"), _defineProperty(_class3, "DownloadTranscriptButtonId", "lcw-footer-download-transcript-button"), _defineProperty(_class3, "EmailTranscriptButtonId", "lcw-footer-email-transcript-button"), _defineProperty(_class3, "AudioNotificationButtonId", "lcw-footer-audio-notification-button"), _defineProperty(_class3, "DefaultFooterId", "lcw-components-footer"), _defineProperty(_class3, "FooterLeftGroupId", "lcw-footer-left-group"), _defineProperty(_class3, "FooterMiddleGroupId", "lcw-footer-middle-group"), _defineProperty(_class3, "FooterRightGroupId", "lcw-footer-right-group"), _defineProperty(_class3, "DefaultHeaderId", "lcw-header"), _defineProperty(_class3, "MinimizeButtonId", "lcw-header-minimize-button"), _defineProperty(_class3, "CloseButtonId", "lcw-header-close-button"), _defineProperty(_class3, "HeaderIconId", "lcw-header-icon"), _defineProperty(_class3, "HeaderTitleId", "lcw-header-title"), _defineProperty(_class3, "HeaderLeftGroupId", "lcw-header-left-group"), _defineProperty(_class3, "HeaderMiddleGroupId", "lcw-header-middle-group"), _defineProperty(_class3, "HeaderRightGroupId", "lcw-header-right-group"), _defineProperty(_class3, "DefaultInputValidationPaneId", "lcw-email-transcript-dialog-container"), _defineProperty(_class3, "DefaultInputValidationPaneInputId", "lcw-email-transcript-dialog-text-field"), _defineProperty(_class3, "DefaultLoadingPaneId", "lcw-loading-pane"), _defineProperty(_class3, "DefaultOOOHPaneId", "lcw-out-of-office-hours-pane"), _defineProperty(_class3, "DefaultPostChatSurveyPaneId", "lcw-postchat-survey-pane"), _defineProperty(_class3, "DefaultPreChatSurveyPaneId", "lcw-prechat-survey-pane-default"), _defineProperty(_class3, "DefaultProactiveChatPaneId", "lcw-proactive-chat"), _defineProperty(_class3, "DefaultReconnectChatPaneId", "lcw-reconnect-chat-pane"), _class3);
+export const Ids = (_class3 = class Ids {}, _defineProperty(_class3, "DefaultCallingContainerId", "lcw-calling-container"), _defineProperty(_class3, "DefaultCurrentCallId", "lcw-current-call-container"), _defineProperty(_class3, "CurrentCallActionGroupId", "lcw-current-call-action-icons"), _defineProperty(_class3, "CurrentCallFooterId", "lcw-current-call-footer"), _defineProperty(_class3, "RemoteVideoTileId", "lcw-remote-video"), _defineProperty(_class3, "SelfVideoTileId", "lcw-self-video"), _defineProperty(_class3, "VideoTileGroupId", "lcw-current-call-body"), _defineProperty(_class3, "EndCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "MicButtonId", "lcw-toggle-audio"), _defineProperty(_class3, "VideoButtonId", "lcw-toggle-video"), _defineProperty(_class3, "CallTimerId", "lcw-current-call-timer"), _defineProperty(_class3, "CurrentCallLeftGroupId", "lcw-current-call-left-group"), _defineProperty(_class3, "CurrentCallMiddleGroupId", "lcw-current-call-middle-group"), _defineProperty(_class3, "CurrentCallRightGroupId", "lcw-current-call-right-group"), _defineProperty(_class3, "DefaultIncomingCallId", "lcw-incoming-call"), _defineProperty(_class3, "DeclineCallButtonId", "lcw-call-reject-button"), _defineProperty(_class3, "AudioCallButtonId", "lcw-call-accept-button"), _defineProperty(_class3, "VideoCallButtonId", "lcw-video-call-accept-button"), _defineProperty(_class3, "IncomingCallTitleId", "lcw-incoming-call-message"), _defineProperty(_class3, "DefaultIncomingCallPopupId", "lcw-incoming-call-popup"), _defineProperty(_class3, "IncomingCallLeftGroupId", "lcw-incoming-call-left-group"), _defineProperty(_class3, "IncomingCallMiddleGroupId", "lcw-incoming-call-middle-group"), _defineProperty(_class3, "IncomingCallRightGroupId", "lcw-incoming-call-right-group"), _defineProperty(_class3, "DefaultChatButtonId", "lcw-components-chat-button"), _defineProperty(_class3, "DefaultConfirmationPaneId", "lcw-components-confirmation-pane"), _defineProperty(_class3, "CustomFooterId", "lcw-footer"), _defineProperty(_class3, "DownloadTranscriptButtonId", "lcw-footer-download-transcript-button"), _defineProperty(_class3, "EmailTranscriptButtonId", "lcw-footer-email-transcript-button"), _defineProperty(_class3, "AudioNotificationButtonId", "lcw-footer-audio-notification-button"), _defineProperty(_class3, "DefaultFooterId", "lcw-components-footer"), _defineProperty(_class3, "FooterLeftGroupId", "lcw-footer-left-group"), _defineProperty(_class3, "FooterMiddleGroupId", "lcw-footer-middle-group"), _defineProperty(_class3, "FooterRightGroupId", "lcw-footer-right-group"), _defineProperty(_class3, "DefaultHeaderId", "lcw-header"), _defineProperty(_class3, "MinimizeButtonId", "lcw-header-minimize-button"), _defineProperty(_class3, "CloseButtonId", "lcw-header-close-button"), _defineProperty(_class3, "HeaderIconId", "lcw-header-icon"), _defineProperty(_class3, "HeaderTitleId", "lcw-header-title"), _defineProperty(_class3, "HeaderLeftGroupId", "lcw-header-left-group"), _defineProperty(_class3, "HeaderMiddleGroupId", "lcw-header-middle-group"), _defineProperty(_class3, "HeaderRightGroupId", "lcw-header-right-group"), _defineProperty(_class3, "DefaultInputValidationPaneId", "lcw-email-transcript-dialog-container"), _defineProperty(_class3, "DefaultInputValidationPaneInputId", "lcw-email-transcript-dialog-text-field"), _defineProperty(_class3, "DefaultLoadingPaneId", "lcw-loading-pane"), _defineProperty(_class3, "DefaultNotificationPaneId", "lcw-notification-pane"), _defineProperty(_class3, "DefaultOOOHPaneId", "lcw-out-of-office-hours-pane"), _defineProperty(_class3, "DefaultPostChatSurveyPaneId", "lcw-postchat-survey-pane"), _defineProperty(_class3, "DefaultPreChatSurveyPaneId", "lcw-prechat-survey-pane-default"), _defineProperty(_class3, "DefaultProactiveChatPaneId", "lcw-proactive-chat"), _defineProperty(_class3, "DefaultReconnectChatPaneId", "lcw-reconnect-chat-pane"), _class3);
 export const ButtonTypes = (_class4 = class ButtonTypes {}, _defineProperty(_class4, "Icon", "icon"), _defineProperty(_class4, "Text", "text"), _class4);
 export const IconNames = (_class5 = class IconNames {}, _defineProperty(_class5, "DeclineCall", "DeclineCall"), _defineProperty(_class5, "Microphone", "Microphone"), _defineProperty(_class5, "MicOff2", "MicOff2"), _defineProperty(_class5, "Video", "Video"), _defineProperty(_class5, "VideoOff", "VideoOff"), _defineProperty(_class5, "IncomingCall", "IncomingCall"), _defineProperty(_class5, "ChromeClose", "ChromeClose"), _defineProperty(_class5, "Download", "Download"), _defineProperty(_class5, "Mail", "Mail"), _defineProperty(_class5, "Volume3", "Volume3"), _defineProperty(_class5, "Volume0", "Volume0"), _defineProperty(_class5, "ChromeMinimize", "ChromeMinimize"), _class5);
 export const AriaLabels = (_class6 = class AriaLabels {}, _defineProperty(_class6, "EndCall", "End Call"), _defineProperty(_class6, "MicMute", "Mute"), _defineProperty(_class6, "MicUnmute", "Unmute"), _defineProperty(_class6, "VideoTurnCameraOn", "Turn camera on"), _defineProperty(_class6, "VideoTurnCameraOff", "Turn camera off"), _defineProperty(_class6, "IncomingCallArea", "Incoming call area"), _defineProperty(_class6, "RejectCall", "Reject call"), _defineProperty(_class6, "AcceptVoiceCall", "Accept voice call"), _defineProperty(_class6, "AcceptVideoCall", "Accept video Call"), _defineProperty(_class6, "DeclineCall", "Decline Call"), _defineProperty(_class6, "AudioCall", "Audio Call"), _defineProperty(_class6, "VideoCall", "Video Call"), _defineProperty(_class6, "LetsChatWeAreOnline", "Let's chat we are online"), _defineProperty(_class6, "UnreadMessageString", "you have new messages"), _defineProperty(_class6, "Close", "Close"), _defineProperty(_class6, "ConfirmationPaneConfirm", "Close Chat"), _defineProperty(_class6, "ConfirmationPaneCancel", "Cancel. Return to Chat"), _defineProperty(_class6, "DownloadChatTranscript", "Download chat transcript"), _defineProperty(_class6, "EmailTranscript", "Email Transcript"), _defineProperty(_class6, "TurnSoundOff", "Turn sound off"), _defineProperty(_class6, "TurnSoundOn", "Turn sound on"), _defineProperty(_class6, "Minimize", "Minimize"), _defineProperty(_class6, "EmailChatTranscriptPane", "Email Chat Transcript Pane"), _defineProperty(_class6, "InputValidationPaneInput", "Email this chat transcript. This will be sent after your chat ends. Email address text area"), _defineProperty(_class6, "Send", "Send"), _defineProperty(_class6, "Cancel", "Cancel"), _defineProperty(_class6, "ProactiveChatPane", "Proactive Chat Pane"), _defineProperty(_class6, "ChatNow", "Chat Now"), _defineProperty(_class6, "ReconnectChatPane", "Reconnect Chat Pane"), _defineProperty(_class6, "ReconnectChatPaneIcon", "Reconnect Chat Pane Icon"), _defineProperty(_class6, "ContinueConversation", "Continue conversation"), _defineProperty(_class6, "StartNewConversation", "Start new conversation"), _class6);

package/lib/esm/components/notificationpane/NotificationPane.js

@@ -0,0 +1,110 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import { Image, Label, Stack, Link } from "@fluentui/react";
+import DismissButton from "./subcomponents/DismissButton";
+import CloseChatButton from "./subcomponents/CloseChatButton";
+import { decodeComponentString } from "../../common/decodeComponentString";
+import { Ids } from "../../common/Constants";
+
+function NotificationPane(props) {
+  var _props$componentOverr, _props$componentOverr2, _props$componentOverr3, _props$componentOverr4, _props$componentOverr5, _props$dismissButtonP, _props$closeChatButto;
+
+  const elementId = props.id ?? Ids.DefaultNotificationPaneId;
+  const containerStyles = {
+    root: Object.assign({}, props.generalStyleProps)
+  };
+  const titleStyles = {
+    root: Object.assign({}, props.titleStyleProps)
+  };
+  const subtitleStyles = {
+    root: Object.assign({}, props.subtitleStyleProps)
+  };
+  const hyperlinkStyles = {
+    root: Object.assign({}, props.hyperlinkStyleProps)
+  };
+  const hyperlinkHoverStyles = {
+    root: Object.assign({}, props.hyperlinkHoverStyleProps)
+  };
+  const notificationIconProps = Object.assign({}, props.notificationIconProps);
+  const notificationIconStyles = Object.assign({}, props.notificationIconStyleProps);
+  const notificationIconImageStyles = {
+    root: {},
+    image: notificationIconStyles
+  };
+  const notificationIconContainerStyles = {
+    root: Object.assign({}, props.notificationIconContainerStyleProps)
+  };
+  const dismissButtonProps = Object.assign({}, props.dismissButtonProps);
+  const dismissButtonStyles = Object.assign({}, props.dismissButtonStyleProps);
+  const dismissButtonHoverStyles = Object.assign({}, props.dismissButtonHoverStyleProps);
+  const closeChatButtonProps = Object.assign({}, props.closeChatButtonProps);
+  const closeChatButtonStyles = Object.assign({}, props.closeChatButtonStyleProps);
+  const closeChatButtonHoverStyles = Object.assign({}, props.closeChatButtonHoverStyleProps);
+  const infoGroupStyles = {
+    root: Object.assign({}, props.infoGroupStyleProps)
+  };
+  const buttonGroupStyles = {
+    root: Object.assign({}, props.buttonGroupStyleProps)
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+    className: props.containerClassName,
+    styles: containerStyles,
+    id: elementId,
+    dir: props.dir ?? "ltr",
+    tabIndex: -1,
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    horizontal: true,
+    horizontalAlign: "space-between",
+    styles: containerStyles,
+    dir: props.dir ?? "ltr"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    styles: notificationIconContainerStyles
+  }, !props.hideNotificationIcon && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationIcon) || /*#__PURE__*/React.createElement(Image, {
+    className: notificationIconProps.className,
+    id: notificationIconProps.id,
+    src: notificationIconProps.src,
+    alt: notificationIconProps.alt,
+    tabIndex: -1,
+    styles: notificationIconImageStyles
+  }))), /*#__PURE__*/React.createElement(Stack, {
+    styles: infoGroupStyles,
+    dir: props.dir ?? "ltr"
+  }, !props.hideTitle && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/React.createElement(Label, {
+    className: props.titleClassName,
+    styles: titleStyles,
+    tabIndex: -1,
+    id: elementId + "-title"
+  }, props.titleText)), !props.hideSubtitle && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.subtitle) || /*#__PURE__*/React.createElement(Label, {
+    className: props.subtitleClassName,
+    styles: subtitleStyles,
+    tabIndex: -1,
+    id: elementId + "-subtitle"
+  }, props.subtitleText)), !props.hideHyperlink && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.hyperlink) || /*#__PURE__*/React.createElement(Link, {
+    className: props.hyperlinkClassName,
+    ariaLabel: props.hyperlinkAriaLabel,
+    id: elementId + "-hyperlink",
+    styles: hyperlinkStyles,
+    hoverStyles: hyperlinkHoverStyles,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: props.hyperlinkHref
+  }, props.hyperlinkText))), !props.hideDismissButton && (decodeComponentString((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.dismissButton) || /*#__PURE__*/React.createElement(DismissButton, _extends({}, dismissButtonProps, {
+    className: props.dismissButtonClassName,
+    onClick: (_props$dismissButtonP = props.dismissButtonProps) === null || _props$dismissButtonP === void 0 ? void 0 : _props$dismissButtonP.onClick,
+    styles: dismissButtonStyles,
+    hoverStyles: dismissButtonHoverStyles
+  })))), /*#__PURE__*/React.createElement(Stack, {
+    horizontal: true,
+    styles: buttonGroupStyles,
+    dir: props.dir ?? "ltr"
+  }, !props.hideCloseChatButton && /*#__PURE__*/React.createElement(CloseChatButton, _extends({}, closeChatButtonProps, {
+    className: props.closeChatButtonClassName,
+    onClick: (_props$closeChatButto = props.closeChatButtonProps) === null || _props$closeChatButto === void 0 ? void 0 : _props$closeChatButto.onClick,
+    styles: closeChatButtonStyles,
+    hoverStyles: closeChatButtonHoverStyles
+  })))));
+}
+
+export default NotificationPane;

package/lib/esm/components/notificationpane/interfaces/INotificationPaneProps.js

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

package/lib/esm/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectClassNames.js

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

package/lib/esm/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectControlProps.js

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

package/lib/esm/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectNotificationProps.js

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

package/lib/esm/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectStyleProps.js

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

package/lib/esm/components/notificationpane/interfaces/common/INotificationPaneClassNames.js

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

package/lib/esm/components/notificationpane/interfaces/common/INotificationPaneComponentOverrides.js

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

package/lib/esm/components/notificationpane/interfaces/common/INotificationPaneControlProps.js

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

package/lib/esm/components/notificationpane/interfaces/common/INotificationPaneInternal.js

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

package/lib/esm/components/notificationpane/interfaces/common/INotificationPaneStyleProps.js

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

package/lib/esm/components/notificationpane/subcomponents/CloseChatButton.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { ElementType, EventNames } from "../../../common/Constants";
+import CommandButton from "../../common/commandbutton/CommandButton";
+
+function CloseChatButton(props) {
+  const {
+    type
+  } = props;
+  const customEvent = {
+    elementType: ElementType.NotificationCloseChatButton,
+    elementId: props === null || props === void 0 ? void 0 : props.id,
+    eventName: EventNames.OnClick
+  };
+  return /*#__PURE__*/React.createElement(CommandButton, {
+    id: props === null || props === void 0 ? void 0 : props.id,
+    type: type,
+    text: props.text,
+    styles: props.styles,
+    hoverStyles: props.hoverStyles,
+    focusStyles: props.focusStyles,
+    iconName: props.iconName,
+    imageIconProps: props.imageIconProps,
+    onClick: props.onClick,
+    ariaLabel: props.ariaLabel,
+    className: props.className,
+    customEvent: customEvent,
+    hideButtonTitle: props.hideButtonTitle
+  });
+}
+
+export default CloseChatButton;

package/lib/esm/components/notificationpane/subcomponents/DismissButton.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { ElementType, EventNames } from "../../../common/Constants";
+import CommandButton from "../../common/commandbutton/CommandButton";
+
+function DismissButton(props) {
+  const {
+    type
+  } = props;
+  const customEvent = {
+    elementType: ElementType.NotificationDismissButton,
+    elementId: props === null || props === void 0 ? void 0 : props.id,
+    eventName: EventNames.OnClick
+  };
+  return /*#__PURE__*/React.createElement(CommandButton, {
+    id: props === null || props === void 0 ? void 0 : props.id,
+    type: type,
+    text: props.text,
+    styles: props.styles,
+    hoverStyles: props.hoverStyles,
+    focusStyles: props.focusStyles,
+    iconName: props.iconName,
+    imageIconProps: props.imageIconProps,
+    onClick: props.onClick,
+    ariaLabel: props.ariaLabel,
+    className: props.className,
+    customEvent: customEvent,
+    hideButtonTitle: props.hideButtonTitle
+  });
+}
+
+export default DismissButton;

package/lib/esm/index.js

@@ -7,6 +7,7 @@ export { default as ProactiveChatPane } from "./components/proactivechatpane/Pro
 export { default as ReconnectChatPane } from "./components/reconnectchatpane/ReconnectChatPane";
 export { default as LoadingPane } from "./components/loadingpane/LoadingPane";
 export { default as OutOfOfficeHoursPane } from "./components/outofofficehourspane/OOOHPane";
+export { default as NotificationPane } from "./components/notificationpane/NotificationPane";
 export { default as PreChatSurveyPane } from "./components/prechatsurveypane/PreChatSurveyPane";
 export { default as PostChatSurveyPane } from "./components/postchatsurveypane/PostChatSurveyPane";
 export { encodeComponentString } from "./common/encodeComponentString";

package/lib/types/common/Constants.d.ts

@@ -21,6 +21,8 @@ export declare enum ElementType {
     ChatButton = "ChatButton",
     CloseButton = "CloseButton",
     HeaderMinimizeButton = "HeaderMinimizeButton",
+    NotificationDismissButton = "NotificationDismissButton",
+    NotificationCloseChatButton = "NotificationCloseChatButton",
     FooterDownloadTranscriptButton = "FooterDownloadTranscriptButton",
     FooterEmailTranscriptButton = "FooterEmailTranscriptButton",
     FooterSoundNotificationButton = "FooterSoundNotificationButton",
@@ -86,6 +88,7 @@ export declare const Ids: {
     readonly DefaultInputValidationPaneId: "lcw-email-transcript-dialog-container";
     readonly DefaultInputValidationPaneInputId: "lcw-email-transcript-dialog-text-field";
     readonly DefaultLoadingPaneId: "lcw-loading-pane";
+    readonly DefaultNotificationPaneId: "lcw-notification-pane";
     readonly DefaultOOOHPaneId: "lcw-out-of-office-hours-pane";
     readonly DefaultPostChatSurveyPaneId: "lcw-postchat-survey-pane";
     readonly DefaultPreChatSurveyPaneId: "lcw-prechat-survey-pane-default";

package/lib/types/components/notificationpane/NotificationPane.d.ts

@@ -0,0 +1,3 @@
+import { INotificationPaneInternal } from "./interfaces/common/INotificationPaneInternal";
+declare function NotificationPane(props: INotificationPaneInternal): JSX.Element;
+export default NotificationPane;

package/lib/types/components/notificationpane/interfaces/INotificationPaneProps.d.ts

@@ -0,0 +1,8 @@
+import { IChatDisconnectNotificationProps } from "./chatdisconnect/IChatDisconnectNotificationProps";
+/**
+ * This interface acts as the entry point to the notification pane.
+ * It will have all the scenarios based props which will get processed in stateful
+ */
+export interface INotificationPaneProps {
+    chatDisconnectNotificationProps?: IChatDisconnectNotificationProps;
+}

package/lib/types/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectClassNames.d.ts

@@ -0,0 +1,8 @@
+import { INotificationPaneClassNames } from "../common/INotificationPaneClassNames";
+/**
+ * This interface will have all the class name properties as customized by C1 for chat disconnect scenario
+ * It extends the common class names properties <INotificationPaneClassNames>
+ */
+export interface IChatDisconnectClassNames extends INotificationPaneClassNames {
+    closeChatButtonClassName?: string;
+}

package/lib/types/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectControlProps.d.ts

@@ -0,0 +1,10 @@
+import { ICommandButtonControlProps } from "../../../common/interfaces/ICommandButtonControlProps";
+import { INotificationPaneControlProps } from "../common/INotificationPaneControlProps";
+/**
+ * This interface will have all the properties as customized by C1 for chat disconnect scenario
+ * It extends the common properties <INotificationPaneControlProps>
+ */
+export interface IChatDisconnectControlProps extends INotificationPaneControlProps {
+    hideCloseChatButton?: boolean;
+    closeChatButtonProps?: ICommandButtonControlProps;
+}

package/lib/types/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectNotificationProps.d.ts

@@ -0,0 +1,11 @@
+import { INotificationPaneComponentOverrides } from "../common/INotificationPaneComponentOverrides";
+import { IChatDisconnectStyleProps } from "./IChatDisconnectStyleProps";
+import { IChatDisconnectControlProps } from "./IChatDisconnectControlProps";
+/**
+ * This interface will have all required control/style/overrides props for chat disconnect scenario
+ */
+export interface IChatDisconnectNotificationProps {
+    componentOverrides?: INotificationPaneComponentOverrides;
+    controlProps?: IChatDisconnectControlProps;
+    styleProps?: IChatDisconnectStyleProps;
+}

package/lib/types/components/notificationpane/interfaces/chatdisconnect/IChatDisconnectStyleProps.d.ts

@@ -0,0 +1,13 @@
+import { IStyle } from "@fluentui/react";
+import { INotificationPaneStyleProps } from "../common/INotificationPaneStyleProps";
+import { IChatDisconnectClassNames } from "./IChatDisconnectClassNames";
+/**
+ * This interface will have all the style properties as customized by C1 for chat disconnect scenario
+ * It extends the common style properties <INotificationPaneStyleProps>
+ */
+export interface IChatDisconnectStyleProps extends INotificationPaneStyleProps {
+    closeChatButtonStyleProps?: IStyle;
+    closeChatButtonHoverStyleProps?: IStyle;
+    buttonGroupStyleProps?: IStyle;
+    classNames?: IChatDisconnectClassNames;
+}

package/lib/types/components/notificationpane/interfaces/common/INotificationPaneClassNames.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This interface will have the common class names properties and is inherited by each scenarios.
+ */
+export interface INotificationPaneClassNames {
+    containerClassName?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    dismissButtonClassName?: string;
+    hyperlinkClassName?: string;
+    notificationIconClassName?: string;
+}

package/lib/types/components/notificationpane/interfaces/common/INotificationPaneComponentOverrides.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+/**
+ * This interface will have the component overrides properties.
+ * It acts as common interface for all the scenarios for component overrides.
+ */
+export interface INotificationPaneComponentOverrides {
+    title?: ReactNode | string;
+    subtitle?: ReactNode | string;
+    dismissButton?: ReactNode | string;
+    hyperlink?: ReactNode | string;
+    notificationIcon?: ReactNode | string;
+}

package/lib/types/components/notificationpane/interfaces/common/INotificationPaneControlProps.d.ts

@@ -0,0 +1,22 @@
+import { ICommandButtonControlProps } from "../../../common/interfaces/ICommandButtonControlProps";
+import { IImageControlProps } from "../../../common/interfaces/IImageControlProps";
+/**
+ * This interface will have the common control properties and is inherited by each scenarios.
+ */
+export interface INotificationPaneControlProps {
+    id?: string;
+    dir?: "ltr" | "rtl" | "auto";
+    hideNotificationPane?: boolean;
+    hideTitle?: boolean;
+    titleText?: string;
+    hideSubtitle?: boolean;
+    subtitleText?: string;
+    hideDismissButton?: boolean;
+    dismissButtonProps?: ICommandButtonControlProps;
+    hideHyperlink?: boolean;
+    hyperlinkText?: string;
+    hyperlinkAriaLabel?: string;
+    hyperlinkHref?: string;
+    hideIcon?: boolean;
+    notificationIconProps?: IImageControlProps;
+}

package/lib/types/components/notificationpane/interfaces/common/INotificationPaneInternal.d.ts

@@ -0,0 +1,53 @@
+import { IStyle } from "@fluentui/react";
+import { ICommandButtonControlProps } from "../../../common/interfaces/ICommandButtonControlProps";
+import { IImageControlProps } from "../../../common/interfaces/IImageControlProps";
+import { INotificationPaneComponentOverrides } from "./INotificationPaneComponentOverrides";
+/**
+ * This interface will act as a generic object that will have the common properties and also the properties for each scenario.
+ * Stateful will populate this interface based on the scenario type and send it to NotificationPane component view.
+ */
+export interface INotificationPaneInternal {
+    /**
+     * Common notification properties
+     */
+    id?: string;
+    dir?: "ltr" | "rtl" | "auto";
+    generalStyleProps?: IStyle;
+    containerClassName?: string;
+    componentOverrides?: INotificationPaneComponentOverrides;
+    infoGroupStyleProps?: IStyle;
+    hideTitle?: boolean;
+    titleText?: string;
+    titleStyleProps?: IStyle;
+    titleClassName?: string;
+    hideSubtitle?: boolean;
+    subtitleText?: string;
+    subtitleStyleProps?: IStyle;
+    subtitleClassName?: string;
+    hideHyperlink?: boolean;
+    hyperlinkText?: string;
+    hyperlinkAriaLabel?: string;
+    hyperlinkHref?: string;
+    hyperlinkStyleProps?: IStyle;
+    hyperlinkHoverStyleProps?: IStyle;
+    hyperlinkClassName?: string;
+    hideNotificationIcon?: boolean;
+    notificationIconProps?: IImageControlProps;
+    notificationIconStyleProps?: IStyle;
+    notificationIconClassName?: string;
+    notificationIconContainerStyleProps?: IStyle;
+    hideDismissButton?: boolean;
+    dismissButtonProps?: ICommandButtonControlProps;
+    dismissButtonStyleProps?: IStyle;
+    dismissButtonHoverStyleProps?: IStyle;
+    dismissButtonClassName?: string;
+    /**
+     * Chat disconnect scenario specific properties
+     */
+    hideCloseChatButton?: boolean;
+    closeChatButtonProps?: ICommandButtonControlProps;
+    closeChatButtonStyleProps?: IStyle;
+    closeChatButtonHoverStyleProps?: IStyle;
+    closeChatButtonClassName?: string;
+    buttonGroupStyleProps?: IStyle;
+}

package/lib/types/components/notificationpane/interfaces/common/INotificationPaneStyleProps.d.ts

@@ -0,0 +1,16 @@
+import { IStyle } from "@fluentui/react";
+/**
+ * This interface will have the common styles properties and is inherited by each scenarios.
+ */
+export interface INotificationPaneStyleProps {
+    generalStyleProps?: IStyle;
+    titleStyleProps?: IStyle;
+    subtitleStyleProps?: IStyle;
+    dismissButtonStyleProps?: IStyle;
+    dismissButtonHoverStyleProps?: IStyle;
+    hyperlinkStyleProps?: IStyle;
+    hyperlinkHoverStyleProps?: IStyle;
+    notificationIconStyleProps?: IStyle;
+    notificationIconContainerStyleProps?: IStyle;
+    infoGroupStyleProps?: IStyle;
+}

package/lib/types/components/notificationpane/subcomponents/CloseChatButton.d.ts

@@ -0,0 +1,3 @@
+import { ICommandButtonProps } from "../../common/interfaces/ICommandButtonProps";
+declare function CloseChatButton(props: ICommandButtonProps): JSX.Element;
+export default CloseChatButton;

package/lib/types/components/notificationpane/subcomponents/DismissButton.d.ts

@@ -0,0 +1,3 @@
+import { ICommandButtonProps } from "../../common/interfaces/ICommandButtonProps";
+declare function DismissButton(props: ICommandButtonProps): JSX.Element;
+export default DismissButton;

package/lib/types/index.d.ts

@@ -7,6 +7,7 @@ export { default as ProactiveChatPane } from "./components/proactivechatpane/Pro
 export { default as ReconnectChatPane } from "./components/reconnectchatpane/ReconnectChatPane";
 export { default as LoadingPane } from "./components/loadingpane/LoadingPane";
 export { default as OutOfOfficeHoursPane } from "./components/outofofficehourspane/OOOHPane";
+export { default as NotificationPane } from "./components/notificationpane/NotificationPane";
 export { default as PreChatSurveyPane } from "./components/prechatsurveypane/PreChatSurveyPane";
 export { default as PostChatSurveyPane } from "./components/postchatsurveypane/PostChatSurveyPane";
 export { encodeComponentString } from "./common/encodeComponentString";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-components",
-  "version": "1.0.7-main.6b39819",
+  "version": "1.0.7",
   "description": "Microsoft Omnichannel Chat Components",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",