@microsoft/omnichannel-chat-components 1.0.1-main.9f52604 → 1.0.2-main.9430c05

package/lib/cjs/common/Constants.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Regex = exports.KeyCodes = exports.HiddenTextStyles = exports.ElementType = exports.AccessibilityBrightnessRatio = void 0;
+exports.Texts = exports.Regex = exports.KeyCodes = exports.Ids = exports.IconNames = exports.HiddenTextStyles = exports.EventNames = exports.ElementType = exports.ButtonTypes = exports.AriaLabels = exports.AccessibilityBrightnessRatio = void 0;
 
-var _class, _class2;
+var _class, _class2, _class3, _class4, _class5, _class6, _class7, _class8;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -50,4 +50,17 @@ exports.ElementType = ElementType;
   ElementType["CurrentCallEndCallButton"] = "CurrentCallEndCallButton";
   ElementType["Utility"] = "Utility";
   ElementType["Custom"] = "Custom";
-})(ElementType || (exports.ElementType = ElementType = {}));
+})(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);
+exports.Ids = Ids;
+const ButtonTypes = (_class4 = class ButtonTypes {}, _defineProperty(_class4, "Icon", "icon"), _defineProperty(_class4, "Text", "text"), _class4);
+exports.ButtonTypes = ButtonTypes;
+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);
+exports.IconNames = IconNames;
+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);
+exports.AriaLabels = AriaLabels;
+const EventNames = (_class7 = class EventNames {}, _defineProperty(_class7, "OnClick", "OnClick"), _defineProperty(_class7, "OnEscapeKeyDown", "OnEscapeKeyDown"), _defineProperty(_class7, "IncomingCallEnded", "IncomingCallEnded"), _class7);
+exports.EventNames = EventNames;
+const Texts = (_class8 = class Texts {}, _defineProperty(_class8, "IncomingCallTitle", "Incoming Call"), _defineProperty(_class8, "ChatButtonTitle", "Let's Chat!"), _defineProperty(_class8, "ChatButtonSubtitle", "We're online."), _defineProperty(_class8, "ChatButtonUnreadMessageString", "new messages"), _defineProperty(_class8, "ChatButtonLargeUnreadMessageString", "99+"), _defineProperty(_class8, "CloseButtonText", "Close"), _defineProperty(_class8, "ConfirmationPaneTitle", "Close chat"), _defineProperty(_class8, "ConfirmationPaneSubtitle", "Do you really want to close this chat?"), _defineProperty(_class8, "ConfirmButtonText", "Close"), _defineProperty(_class8, "CancelButtonText", "Cancel"), _defineProperty(_class8, "DownloadChatTranscriptText", "Download chat transcript"), _defineProperty(_class8, "EmailTranscriptText", "Email Transcript"), _defineProperty(_class8, "HeaderIcon", "Chat Icon"), _defineProperty(_class8, "HeaderTitle", "Let's Chat"), _defineProperty(_class8, "MinimizeText", "Minimize"), _defineProperty(_class8, "InputValidationPaneTitleText", "Email this chat transcript"), _defineProperty(_class8, "InputValidationPaneSubtitleText", "This will be sent after your chat ends."), _defineProperty(_class8, "InvalidInputErrorMessageText", "Enter a valid email address."), _defineProperty(_class8, "SendButtonText", "Send"), _defineProperty(_class8, "LoadingPaneTitleText", "Welcome to"), _defineProperty(_class8, "LoadingPaneSubtitleText", "live chat support ..."), _defineProperty(_class8, "LoadingPaneSpinnerText", "Loading ..."), _defineProperty(_class8, "OOOHPaneTitleText", "Thanks for contacting us. You have reached us outside of our operating hours. An agent will respond when we open."), _defineProperty(_class8, "PostChatSurveyPaneTitleText", "Post chat survey pane"), _defineProperty(_class8, "ProactiveChatPaneTitleText", "Welcome to"), _defineProperty(_class8, "ProactiveChatPaneSubtitleText", "Live chat support!"), _defineProperty(_class8, "ProactiveChatPaneBodyTitleText", "Hi! Have any questions? I am here to help."), _defineProperty(_class8, "ProactiveChatPaneStartButtonText", "Chat Now"), _defineProperty(_class8, "ReconnectChatPaneTitleText", "Previous session detected"), _defineProperty(_class8, "ReconnectChatPaneSubtitleText", "We have detected a previous chat session. Would you like to continue with your previous session?"), _defineProperty(_class8, "ReconnectChatPaneContinueChatButtonText", "Continue conversation"), _defineProperty(_class8, "ReconnectChatPaneStartNewChatButtonText", "Start new conversation"), _class8);
+exports.Texts = Texts;

package/lib/cjs/components/callingcontainer/common/defaultProps/defaultCallingContainerControlProps.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultCallingContainerControlProps = void 0;
+
+var _Constants = require("../../../../common/Constants");
+
 const defaultCallingContainerControlProps = {
-  id: "oc-lcw-callingcontainer",
+  id: _Constants.Ids.DefaultCallingContainerId,
   dir: "ltr",
   isIncomingCall: false,
   hideCallingContainer: false

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/CurrentCall.js

@@ -165,7 +165,7 @@ function CurrentCall(props) {
   const endCallCustomEvent = {
     elementType: _Constants.ElementType.CurrentCallEndCallButton,
     elementId: endCallButtonId,
-    eventName: "OnClick"
+    eventName: _Constants.EventNames.OnClick
   };
   const handleEndCallClick = (0, React.useCallback)(() => {
     var _props$controlProps62;
@@ -185,7 +185,7 @@ function CurrentCall(props) {
       const videoOffCustomEvent = {
         elementType: _Constants.ElementType.CurrentCallVideoButton,
         elementId: videoOffButtonId,
-        eventName: "OnClick"
+        eventName: _Constants.EventNames.OnClick
       };
 
       _BroadcastService.BroadcastService.postMessage(videoOffCustomEvent);
@@ -204,7 +204,7 @@ function CurrentCall(props) {
       const micCustomEvent = {
         elementType: _Constants.ElementType.CurrentCallMicButton,
         elementId: micButtonId,
-        eventName: "OnClick"
+        eventName: _Constants.EventNames.OnClick
       };
 
       _BroadcastService.BroadcastService.postMessage(micCustomEvent);
@@ -268,12 +268,12 @@ function CurrentCall(props) {
     dir: dir
   }, /*#__PURE__*/React.createElement(_react2.Stack, {
     horizontal: true,
-    id: "currentCallLeftGroup",
+    id: _Constants.Ids.CurrentCallLeftGroupId,
     verticalAlign: "center",
     tokens: leftGroupStackTokens
   }, (0, _utils.processCustomComponents)((_props$controlProps69 = props.controlProps) === null || _props$controlProps69 === void 0 ? void 0 : (_props$controlProps70 = _props$controlProps69.leftGroup) === null || _props$controlProps70 === void 0 ? void 0 : _props$controlProps70.children)), /*#__PURE__*/React.createElement(_react2.Stack, {
     horizontal: true,
-    id: "currentCallMiddleGroup",
+    id: _Constants.Ids.CurrentCallMiddleGroupId,
     verticalAlign: "center",
     tokens: middleGroupStackTokens,
     dir: dir
@@ -310,7 +310,7 @@ function CurrentCall(props) {
     customEvent: endCallCustomEvent
   }))), /*#__PURE__*/React.createElement(_react2.Stack, {
     horizontal: true,
-    id: "currentCallRightGroup",
+    id: _Constants.Ids.CurrentCallRightGroupId,
     verticalAlign: "center",
     tokens: rightGroupStackTokens
   }, (0, _utils.processCustomComponents)((_props$controlProps100 = props.controlProps) === null || _props$controlProps100 === void 0 ? void 0 : (_props$controlProps101 = _props$controlProps100.rightGroup) === null || _props$controlProps101 === void 0 ? void 0 : _props$controlProps101.children))));

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/common/defaultProps/defaultCurrentCallControlProps.js

@@ -4,14 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultCurrentCallControlProps = void 0;
+
+var _Constants = require("../../../../../../common/Constants");
+
 const defaultCurrentCallControlProps = {
-  id: "currentCall-container",
+  id: _Constants.Ids.DefaultCurrentCallId,
   nonActionIds: {
-    currentCallActionGroupId: "currentCall-actionicons",
-    currentCallFooterId: "currentCall-footer",
-    remoteVideoTileId: "remoteVideo",
-    selfVideoTileId: "selfVideo",
-    videoTileGroupId: "currentCall-body"
+    currentCallActionGroupId: _Constants.Ids.CurrentCallActionGroupId,
+    currentCallFooterId: _Constants.Ids.CurrentCallFooterId,
+    remoteVideoTileId: _Constants.Ids.RemoteVideoTileId,
+    selfVideoTileId: _Constants.Ids.SelfVideoTileId,
+    videoTileGroupId: _Constants.Ids.VideoTileGroupId
   },
   hideMicButton: false,
   hideVideoButton: false,
@@ -41,32 +44,32 @@ const defaultCurrentCallControlProps = {
     children: []
   },
   endCallButtonProps: {
-    id: "callRejectButton",
-    type: "icon",
-    ariaLabel: "End Call",
-    iconName: "DeclineCall",
+    id: _Constants.Ids.EndCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.EndCall,
+    iconName: _Constants.IconNames.DeclineCall,
     iconSize: 18
   },
   micButtonProps: {
-    id: "toggleAudio",
-    type: "icon",
-    ariaLabel: "Mute",
-    toggleAriaLabel: "Unmute",
-    iconName: "Microphone",
-    toggleIconName: "MicOff2",
+    id: _Constants.Ids.MicButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.MicMute,
+    toggleAriaLabel: _Constants.AriaLabels.MicUnmute,
+    iconName: _Constants.IconNames.Microphone,
+    toggleIconName: _Constants.IconNames.MicOff2,
     iconSize: 18
   },
   videoButtonProps: {
-    id: "toggleVideo",
-    type: "icon",
-    ariaLabel: "Turn on camera",
-    toggleAriaLabel: "Turn off camera",
-    iconName: "Video",
-    toggleIconName: "VideoOff",
+    id: _Constants.Ids.VideoButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.VideoTurnCameraOn,
+    toggleAriaLabel: _Constants.AriaLabels.VideoTurnCameraOff,
+    iconName: _Constants.IconNames.Video,
+    toggleIconName: _Constants.IconNames.VideoOff,
     iconSize: 18
   },
   callTimerProps: {
-    id: "oc-lcw-CurrentCall-timer",
+    id: _Constants.Ids.CallTimerId,
     showHours: false,
     timerStyles: {
       color: "white",

package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/common/defaultProps/defaultCurrentCallControlPropsRtl.js

@@ -7,14 +7,16 @@ exports.defaultCurrentCallControlPropsRtl = void 0;
 
 var _Icons = require("../../../../../../assets/Icons");
 
+var _Constants = require("../../../../../../common/Constants");
+
 const defaultCurrentCallControlPropsRtl = {
-  id: "currentCall-container",
+  id: _Constants.Ids.DefaultCurrentCallId,
   nonActionIds: {
-    currentCallActionGroupId: "currentCall-actionicons",
-    currentCallFooterId: "currentCall-footer",
-    remoteVideoTileId: "remoteVideo",
-    selfVideoTileId: "selfVideo",
-    videoTileGroupId: "currentCall-body"
+    currentCallActionGroupId: _Constants.Ids.CurrentCallActionGroupId,
+    currentCallFooterId: _Constants.Ids.CurrentCallFooterId,
+    remoteVideoTileId: _Constants.Ids.RemoteVideoTileId,
+    selfVideoTileId: _Constants.Ids.SelfVideoTileId,
+    videoTileGroupId: _Constants.Ids.VideoTileGroupId
   },
   hideMicButton: false,
   hideVideoButton: false,
@@ -45,9 +47,9 @@ const defaultCurrentCallControlPropsRtl = {
   },
   dir: "rtl",
   endCallButtonProps: {
-    id: "callRejectButton",
-    type: "icon",
-    ariaLabel: "End Call",
+    id: _Constants.Ids.EndCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.EndCall,
     imageIconProps: {
       src: _Icons.CallRejectButtonBase64,
       styles: {
@@ -59,10 +61,10 @@ const defaultCurrentCallControlPropsRtl = {
     }
   },
   micButtonProps: {
-    id: "toggleAudio",
-    type: "icon",
-    ariaLabel: "Mute",
-    toggleAriaLabel: "Unmute",
+    id: _Constants.Ids.MicButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.MicMute,
+    toggleAriaLabel: _Constants.AriaLabels.MicUnmute,
     imageIconProps: {
       src: _Icons.VoiceOnIconBase64,
       styles: {
@@ -84,10 +86,10 @@ const defaultCurrentCallControlPropsRtl = {
     iconSize: 18
   },
   videoButtonProps: {
-    id: "toggleVideo",
-    type: "icon",
-    ariaLabel: "Turn camera on",
-    toggleAriaLabel: "Turn camera off",
+    id: _Constants.Ids.VideoButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.VideoTurnCameraOn,
+    toggleAriaLabel: _Constants.AriaLabels.VideoTurnCameraOff,
     imageIconProps: {
       src: _Icons.VideoOnIconBase64,
       styles: {
@@ -109,7 +111,7 @@ const defaultCurrentCallControlPropsRtl = {
     iconSize: 18
   },
   callTimerProps: {
-    id: "oc-lcw-CurrentCall-timer"
+    id: _Constants.Ids.CallTimerId
   }
 };
 exports.defaultCurrentCallControlPropsRtl = defaultCurrentCallControlPropsRtl;

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/IncomingCall.js

@@ -63,7 +63,7 @@ function IncomingCall(props) {
   const declineCustomEvent = {
     elementType: _Constants.ElementType.IncomingCallDeclineCallButton,
     elementId: declineCallButtonId,
-    eventName: "incomingCallEnded"
+    eventName: _Constants.EventNames.IncomingCallEnded
   };
   const handleDeclineCallClick = (0, React.useCallback)(() => {
     var _props$controlProps12;
@@ -77,7 +77,7 @@ function IncomingCall(props) {
   const videoCustomEvent = {
     elementType: _Constants.ElementType.IncomingCallVideoCallButton,
     elementId: videoCallButtonId,
-    eventName: "OnClick"
+    eventName: _Constants.EventNames.OnClick
   };
   const handleVideoCallClick = (0, React.useCallback)(() => {
     var _props$controlProps14;
@@ -91,7 +91,7 @@ function IncomingCall(props) {
   const audioCustomEvent = {
     elementType: _Constants.ElementType.IncomingCallAudioCallButton,
     elementId: audioCallButtonId,
-    eventName: "OnClick"
+    eventName: _Constants.EventNames.OnClick
   };
   const handleAudioCallClick = (0, React.useCallback)(() => {
     var _props$controlProps16;
@@ -153,7 +153,7 @@ function IncomingCall(props) {
     "aria-label": incomingCallTitleProps === null || incomingCallTitleProps === void 0 ? void 0 : incomingCallTitleProps.text
   }, /*#__PURE__*/React.createElement(_react2.Stack, {
     horizontal: true,
-    id: "incomingCallLeftGroup",
+    id: _Constants.Ids.IncomingCallLeftGroupId,
     verticalAlign: "center",
     tokens: leftGroupStackTokens
   }, !((_props$controlProps19 = props.controlProps) !== null && _props$controlProps19 !== void 0 && _props$controlProps19.hideIncomingCallTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.incomingCallTitle) || /*#__PURE__*/React.createElement(_react2.Label, _extends({}, incomingCallTitleProps, {
@@ -162,12 +162,12 @@ function IncomingCall(props) {
     styles: incomingCallTitleStyles
   }), incomingCallTitleProps === null || incomingCallTitleProps === void 0 ? void 0 : incomingCallTitleProps.text)), (0, _utils.processCustomComponents)((_props$controlProps20 = props.controlProps) === null || _props$controlProps20 === void 0 ? void 0 : (_props$controlProps21 = _props$controlProps20.leftGroup) === null || _props$controlProps21 === void 0 ? void 0 : _props$controlProps21.children)), /*#__PURE__*/React.createElement(_react2.Stack, {
     horizontal: true,
-    id: "incomingCallMiddleGroup",
+    id: _Constants.Ids.IncomingCallMiddleGroupId,
     verticalAlign: "center",
     tokens: middleGroupStackTokens
   }, (0, _utils.processCustomComponents)((_props$controlProps22 = props.controlProps) === null || _props$controlProps22 === void 0 ? void 0 : (_props$controlProps23 = _props$controlProps22.middleGroup) === null || _props$controlProps23 === void 0 ? void 0 : _props$controlProps23.children)), /*#__PURE__*/React.createElement(_react2.Stack, {
     horizontal: true,
-    id: "incomingCallRightGroup",
+    id: _Constants.Ids.IncomingCallRightGroupId,
     verticalAlign: "center",
     tokens: rightGroupStackTokens
   }, (0, _utils.processCustomComponents)((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : (_props$controlProps25 = _props$controlProps24.rightGroup) === null || _props$controlProps25 === void 0 ? void 0 : _props$controlProps25.children), !((_props$controlProps26 = props.controlProps) !== null && _props$controlProps26 !== void 0 && _props$controlProps26.hideDeclineCall) && /*#__PURE__*/React.createElement(_CommandButton.default, _extends({}, declineCallButtonProps, {

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultProps/defaultIncomingCallControlProps.js

@@ -4,22 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultIncomingCallControlProps = void 0;
+
+var _Constants = require("../../../../../../common/Constants");
+
 const defaultIncomingCallControlProps = {
-  id: "oc-lcw-incomingcall",
+  id: _Constants.Ids.DefaultIncomingCallId,
   dir: "ltr",
-  ariaLabel: "Incoming call area",
+  ariaLabel: _Constants.AriaLabels.IncomingCallArea,
   hideAudioCall: false,
   hideVideoCall: false,
   hideDeclineCall: false,
   hideIncomingCallTitle: false,
   onDeclineCallClick: function () {
-    console.log("download transcript clicked");
+    console.log("decline call clicked");
   },
   onAudioCallClick: function () {
-    console.log("email transcript clicked");
+    console.log("audio call clicked");
   },
   onVideoCallClick: function () {
-    console.log("audio notification clicked");
+    console.log("video call clicked");
   },
   middleGroup: {
     gap: 5,
@@ -34,29 +37,29 @@ const defaultIncomingCallControlProps = {
     children: []
   },
   declineCallButtonProps: {
-    id: "callRejectButton",
-    type: "icon",
-    ariaLabel: "Reject call",
-    iconName: "DeclineCall",
+    id: _Constants.Ids.DeclineCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.RejectCall,
+    iconName: _Constants.IconNames.DeclineCall,
     iconSize: 20
   },
   audioCallButtonProps: {
-    id: "callAcceptButton",
-    type: "icon",
-    ariaLabel: "Accept voice call",
-    iconName: "IncomingCall",
+    id: _Constants.Ids.AudioCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.AcceptVoiceCall,
+    iconName: _Constants.IconNames.IncomingCall,
     iconSize: 20
   },
   videoCallButtonProps: {
-    id: "videoCallAcceptButton",
-    type: "icon",
-    ariaLabel: "Accept video Call",
-    iconName: "Video",
+    id: _Constants.Ids.VideoCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.AcceptVideoCall,
+    iconName: _Constants.IconNames.Video,
     iconSize: 20
   },
   incomingCallTitle: {
-    id: "incomingCallMessage",
-    text: "Incoming Call"
+    id: _Constants.Ids.IncomingCallTitleId,
+    text: _Constants.Texts.IncomingCallTitle
   }
 };
 exports.defaultIncomingCallControlProps = defaultIncomingCallControlProps;

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultProps/defaultIncomingCallControlPropsRtl.js

@@ -7,21 +7,23 @@ exports.defaultIncomingCallControlPropsRtl = void 0;
 
 var _Icons = require("../../../../../../assets/Icons");
 
+var _Constants = require("../../../../../../common/Constants");
+
 const defaultIncomingCallControlPropsRtl = {
-  id: "incomingCallPopup",
-  ariaLabel: "Incoming call area",
+  id: _Constants.Ids.DefaultIncomingCallPopupId,
+  ariaLabel: _Constants.AriaLabels.IncomingCallArea,
   hideAudioCall: false,
   hideVideoCall: false,
   hideDeclineCall: false,
   hideIncomingCallTitle: false,
   onDeclineCallClick: function () {
-    console.log("download transcript clicked");
+    console.log("decline call clicked");
   },
   onAudioCallClick: function () {
-    console.log("email transcript clicked");
+    console.log("audio call clicked");
   },
   onVideoCallClick: function () {
-    console.log("audio notification clicked");
+    console.log("video call clicked");
   },
   middleGroup: {
     gap: 5,
@@ -37,9 +39,9 @@ const defaultIncomingCallControlPropsRtl = {
   },
   dir: "rtl",
   declineCallButtonProps: {
-    id: "callRejectButton",
-    type: "icon",
-    ariaLabel: "Decline Call",
+    id: _Constants.Ids.DeclineCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.DeclineCall,
     imageIconProps: {
       src: _Icons.CallRejectButtonBase64,
       styles: {
@@ -52,9 +54,9 @@ const defaultIncomingCallControlPropsRtl = {
     iconSize: 20
   },
   audioCallButtonProps: {
-    id: "callAcceptButton",
-    type: "icon",
-    ariaLabel: "Audio Call",
+    id: _Constants.Ids.AudioCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.AudioCall,
     imageIconProps: {
       src: _Icons.CallAcceptButtonBase64,
       styles: {
@@ -67,9 +69,9 @@ const defaultIncomingCallControlPropsRtl = {
     iconSize: 20
   },
   videoCallButtonProps: {
-    id: "videoCallAcceptButton",
-    type: "icon",
-    ariaLabel: "Video Call",
+    id: _Constants.Ids.VideoCallButtonId,
+    type: _Constants.ButtonTypes.Icon,
+    ariaLabel: _Constants.AriaLabels.VideoCall,
     imageIconProps: {
       src: _Icons.VideoCallAcceptButtonIconBase64,
       styles: {
@@ -82,8 +84,8 @@ const defaultIncomingCallControlPropsRtl = {
     iconSize: 20
   },
   incomingCallTitle: {
-    id: "incomingCallMessage",
-    text: "Incoming Call"
+    id: _Constants.Ids.IncomingCallTitleId,
+    text: _Constants.Texts.IncomingCallTitle
   }
 };
 exports.defaultIncomingCallControlPropsRtl = defaultIncomingCallControlPropsRtl;

package/lib/cjs/components/chatbutton/ChatButton.js

@@ -97,21 +97,19 @@ function TextContainer(props, parentId) {
     styles: titleStyles,
     dir: titleDir,
     className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.titleClassName,
-    id: parentId + "-title",
-    title: titleText
+    id: parentId + "-title"
   }, titleText)), !hideChatSubtitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.subtitle) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
     styles: subtitleStyles,
     dir: subtitleDir,
     className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.subtitleClassName,
-    id: parentId + "-subtitle",
-    title: subtitleText
+    id: parentId + "-subtitle"
   }, subtitleText)));
 }
 
 function ChatButton(props) {
   var _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$controlProps17, _props$controlProps18, _props$controlProps19, _props$styleProps11;
 
-  const elementId = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.id) ?? "lcw-components-chat-button";
+  const elementId = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.id) ?? _Constants.Ids.DefaultChatButtonId;
   const defaultAriaLabel = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.ariaLabel) ?? _defaultChatButtonControlProps.defaultChatButtonControlProps.ariaLabel;
   const defaultRole = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
   const containersDir = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
@@ -129,7 +127,7 @@ function ChatButton(props) {
       const customEvent = {
         elementType: _Constants.ElementType.ChatButton,
         elementId: elementId,
-        eventName: "OnClick"
+        eventName: _Constants.EventNames.OnClick
       };
 
       _BroadcastService.BroadcastService.postMessage(customEvent);

package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js

@@ -4,25 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultChatButtonControlProps = void 0;
+
+var _Constants = require("../../../../common/Constants");
+
 const defaultChatButtonControlProps = {
-  id: "lcw-components-chat-button",
+  id: _Constants.Ids.DefaultChatButtonId,
   dir: "ltr",
   role: "button",
-  ariaLabel: "Let's chat We are online",
   unreadMessageCount: "0",
-  titleText: "Let's Chat!",
-  subtitleText: "We're online.",
   onClick: function () {
     console.log("initiate chat");
   },
+  titleText: _Constants.Texts.ChatButtonTitle,
+  subtitleText: _Constants.Texts.ChatButtonSubtitle,
   hideChatButton: false,
   hideChatIcon: false,
   hideChatTextContainer: false,
   hideChatSubtitle: false,
   hideChatTitle: false,
   hideNotificationBubble: true,
-  unreadMessageString: "new messages",
-  largeUnreadMessageString: "99+",
-  ariaLabelUnreadMessageString: "you have new messages"
+  unreadMessageString: _Constants.Texts.ChatButtonUnreadMessageString,
+  largeUnreadMessageString: _Constants.Texts.ChatButtonLargeUnreadMessageString,
+  ariaLabelUnreadMessageString: _Constants.AriaLabels.UnreadMessageString
 };
 exports.defaultChatButtonControlProps = defaultChatButtonControlProps;

package/lib/cjs/components/chatbutton/common/defaultStyles/defaultChatButtonGeneralStyles.js

@@ -27,6 +27,6 @@ const defaultChatButtonGeneralStyles = {
       outline: "dotted 2px #000"
     }
   },
-  width: "180px"
+  minWidth: "180px"
 };
 exports.defaultChatButtonGeneralStyles = defaultChatButtonGeneralStyles;

package/lib/cjs/components/chatbutton/common/defaultStyles/defaultChatButtonSubTitleStyles.js

@@ -17,6 +17,7 @@ const defaultChatButtonSubTitleStyles = {
   padding: "0px",
   textOverflow: "ellipsis !important",
   whiteSpace: "nowrap",
-  width: "90px"
+  minWidth: "90px",
+  maxWidth: "105px"
 };
 exports.defaultChatButtonSubTitleStyles = defaultChatButtonSubTitleStyles;

package/lib/cjs/components/chatbutton/common/defaultStyles/defaultChatButtonTitleStyles.js

@@ -18,6 +18,7 @@ const defaultChatButtonTitleStyles = {
   padding: "0px",
   textOverflow: "ellipsis !important",
   whiteSpace: "nowrap",
-  width: "90px"
+  minWidth: "90px",
+  maxWidth: "105px"
 };
 exports.defaultChatButtonTitleStyles = defaultChatButtonTitleStyles;

package/lib/cjs/components/common/commandbutton/CommandButton.js

@@ -28,7 +28,7 @@ function CommandButton(props) {
   };
   let iconStyles = {};
 
-  if (props.type === "icon") {
+  if (props.type === _Constants.ButtonTypes.Icon) {
     var _props$styles;
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -61,7 +61,7 @@ function CommandButton(props) {
   const handleOnClick = (0, _react2.useCallback)(() => {
     if (props !== null && props !== void 0 && props.onClick) {
       const customEvent = props.customEvent ?? {
-        eventName: "onClick",
+        eventName: _Constants.EventNames.OnClick,
         elementType: _Constants.ElementType.Custom,
         elementId: props === null || props === void 0 ? void 0 : props.id
       };
@@ -71,15 +71,16 @@ function CommandButton(props) {
       props === null || props === void 0 ? void 0 : props.onClick();
     }
   }, []);
-  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, props.type === "text" && /*#__PURE__*/_react2.default.createElement(_react.DefaultButton, {
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, props.type === _Constants.ButtonTypes.Text && /*#__PURE__*/_react2.default.createElement(_react.DefaultButton, {
     id: props.id,
     text: props.text,
     ariaLabel: props.ariaLabel,
     onClick: handleOnClick,
     disabled: props.disabled,
     className: props.className,
-    styles: buttonStyles
-  }), props.type === "icon" && /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
+    styles: buttonStyles,
+    title: props.hideButtonTitle ? undefined : props.ariaLabel
+  }), props.type === _Constants.ButtonTypes.Icon && /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
     id: props.id,
     iconProps: iconProp,
     title: props.hideButtonTitle ? undefined : props.ariaLabel,

package/lib/cjs/components/common/subcomponents/CloseButton.js

@@ -20,19 +20,19 @@ function CloseButton(props) {
   const customEvent = {
     elementType: _Constants.ElementType.CloseButton,
     elementId: props === null || props === void 0 ? void 0 : props.id,
-    eventName: "OnClick"
+    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 ?? "Close",
+    text: props.text ?? _Constants.Texts.CloseButtonText,
     styles: props.styles,
     hoverStyles: props.hoverStyles,
     focusStyles: props.focusStyles,
-    iconName: props.iconName ?? "ChromeClose",
+    iconName: props.iconName ?? _Constants.IconNames.ChromeClose,
     imageIconProps: props.imageIconProps,
     onClick: props.onClick,
-    ariaLabel: props.ariaLabel ?? "Close",
+    ariaLabel: props.ariaLabel ?? _Constants.AriaLabels.Close,
     className: props.className,
     customEvent: customEvent,
     hideButtonTitle: props.hideButtonTitle