@microsoft/omnichannel-chat-widget 0.1.0-main.01a30be

package/lib/esm/components/callingcontainerstateful/CallingContainerStateful.js

@@ -0,0 +1,326 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useCallback, useEffect } from "react";
+import { CallingContainer } from "@microsoft/omnichannel-chat-components";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import useChatSDKStore from "../../hooks/useChatSDKStore";
+export const CallingContainerStateful = props => {
+  var _props$controlProps, _props$controlProps2, _props$controlProps2$, _props$controlProps3, _props$controlProps3$, _props$controlProps3$2, _props$controlProps4, _props$controlProps4$, _props$controlProps4$2, _props$controlProps5;
+  //TODO : Close button confirmation implmentation is pending
+
+  const [state, dispatch] = useChatContextStore();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const chatSDK = useChatSDKStore();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const {
+    voiceVideoCallingSdk
+  } = props;
+  let callId;
+  const resetCallingStates = reset => {
+    if (reset) {
+      dispatch({
+        type: LiveChatWidgetActionType.SHOW_CALLING_CONTAINER,
+        payload: false
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+        payload: true
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+        payload: true
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+        payload: true
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+        payload: true
+      });
+    }
+  };
+  useEffect(() => {
+    const init = async () => {
+      try {
+        var _controlProps$current, _controlProps$current2, _controlProps$current3, _controlProps$current4;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        TelemetryHelper.callId = callId;
+        await voiceVideoCallingSdk.initialize({
+          chatToken: state.domainStates.chatToken,
+          selfVideoHTMLElementId: (_controlProps$current = controlProps.currentCallControlProps) === null || _controlProps$current === void 0 ? void 0 : (_controlProps$current2 = _controlProps$current.nonActionIds) === null || _controlProps$current2 === void 0 ? void 0 : _controlProps$current2.selfVideoTileId,
+          // HTML element id where video stream of the agent will be rendered
+          remoteVideoHTMLElementId: (_controlProps$current3 = controlProps.currentCallControlProps) === null || _controlProps$current3 === void 0 ? void 0 : (_controlProps$current4 = _controlProps$current3.nonActionIds) === null || _controlProps$current4 === void 0 ? void 0 : _controlProps$current4.remoteVideoTileId,
+          // HTML element id where video stream of the customer will be rendered
+          OCClient: chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.OCClient
+        });
+      } catch (e) {
+        TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.VoiceVideoSdkInitializeException,
+          Description: `Failed to initialize VideoVoiceCalling Sdk:  ${e}`
+        });
+      }
+    };
+    init().then(() => {
+      if (voiceVideoCallingSdk) {
+        TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.VoiceVideoSdkInitialize,
+          Description: "Initialize VideoVoiceCalling Sdk Success"
+        }, callId);
+        voiceVideoCallingSdk.onCallAdded(() => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callId = voiceVideoCallingSdk.callId;
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.CallAdded
+          }, callId);
+          dispatch({
+            type: LiveChatWidgetActionType.SHOW_CALLING_CONTAINER,
+            payload: true
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+            payload: true
+          });
+        });
+        voiceVideoCallingSdk.onRemoteVideoStreamAdded(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.RemoteVideoStreamAdded
+          }, callId);
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+            payload: false
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onLocalVideoStreamAdded(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.LocalVideoStreamAdded
+          }, callId);
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+            payload: false
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onRemoteVideoStreamRemoved(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.RemoteVideoStreamRemoved
+          }, callId);
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          if (isRemoteVideoDisabled && isLocalVideoDisabled) {
+            dispatch({
+              type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+              payload: true
+            });
+          }
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+            payload: isRemoteVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onLocalVideoStreamRemoved(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.LocalVideoStreamRemoved
+          }, callId);
+          const isLocalVideoDisabled = !voiceVideoCallingSdk.isLocalVideoEnabled();
+          const isRemoteVideoDisabled = !voiceVideoCallingSdk.isRemoteVideoEnabled();
+          if (isRemoteVideoDisabled && isLocalVideoDisabled) {
+            dispatch({
+              type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+              payload: true
+            });
+          }
+          dispatch({
+            type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+            payload: isLocalVideoDisabled
+          });
+        });
+        voiceVideoCallingSdk.onCallDisconnected(() => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.CallDisconnected
+          }, callId);
+          resetCallingStates(true);
+        });
+        voiceVideoCallingSdk.addEventListener(TelemetryEvent.IncomingCallEnded, () => {
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.IncomingCallEnded
+          }, callId);
+          resetCallingStates(true);
+        });
+      }
+    });
+    window.addEventListener("beforeunload", () => {
+      if (state.uiStates.isIncomingCall) {
+        voiceVideoCallingSdk === null || voiceVideoCallingSdk === void 0 ? void 0 : voiceVideoCallingSdk.rejectCall();
+      } else {
+        voiceVideoCallingSdk === null || voiceVideoCallingSdk === void 0 ? void 0 : voiceVideoCallingSdk.stopCall();
+      }
+      voiceVideoCallingSdk === null || voiceVideoCallingSdk === void 0 ? void 0 : voiceVideoCallingSdk.close();
+      dispatch({
+        type: LiveChatWidgetActionType.SET_E2VV_ENABLED,
+        payload: false
+      });
+      resetCallingStates(true);
+    });
+  }, []);
+  const controlProps = {
+    id: "oc-lcw-callingcontainer",
+    dir: state.domainStates.globalDir,
+    isIncomingCall: state.uiStates.isIncomingCall,
+    hideCallingContainer: state.appStates.isMinimized ? true : false,
+    ...(props === null || props === void 0 ? void 0 : props.controlProps),
+    incomingCallControlProps: {
+      onDeclineCallClick: useCallback(async () => {
+        try {
+          voiceVideoCallingSdk.rejectCall();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.CallRejectClick
+          }, callId);
+          resetCallingStates(true);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.CallRejectClickException,
+            ExceptionDetails: {
+              exception: `Failed to reject call:  ${error}`
+            }
+          }, callId);
+        }
+      }, [voiceVideoCallingSdk]),
+      onAudioCallClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.acceptCall({
+            withVideo: false
+          });
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.VoiceCallAcceptButtonClick
+          }, callId);
+        } catch (err) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.VoiceVideoAcceptCallException,
+            ExceptionDetails: {
+              exception: `Failed to accept call without video:  ${err}`
+            }
+          }, callId);
+        }
+        dispatch({
+          type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+          payload: false
+        });
+        dispatch({
+          type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+          payload: true
+        });
+      }, []),
+      onVideoCallClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.acceptCall({
+            withVideo: true
+          });
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.VideoCallAcceptButtonClick
+          }, callId);
+        } catch (err) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.VoiceVideoAcceptCallWithVideoException,
+            ExceptionDetails: {
+              exception: `Failed to accept call with video:  ${err}`
+            }
+          }, callId);
+        }
+        dispatch({
+          type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+          payload: false
+        });
+        dispatch({
+          type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+          payload: false
+        });
+      }, []),
+      ...(props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.incomingCallControlProps)
+    },
+    currentCallControlProps: {
+      hideCallTimer: true,
+      onEndCallClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.stopCall();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.EndCallButtonClick
+          }, callId);
+          resetCallingStates(true);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.EndCallButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to End Call:  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      onMicCallClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.toggleMute();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.ToggleMuteButtonClick
+          }, callId);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.ToggleMuteButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to toggle mute button :  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      onVideoOffClick: useCallback(() => {
+        try {
+          voiceVideoCallingSdk.toggleLocalVideo();
+          TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.ToggleCameraButtonClick
+          }, callId);
+        } catch (error) {
+          TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+            Event: TelemetryEvent.ToggleCameraButtonClickException,
+            ExceptionDetails: {
+              exception: `Failed to toggle video button :  ${error}`
+            }
+          }, callId);
+        }
+      }, []),
+      nonActionIds: {
+        ...(props === null || props === void 0 ? void 0 : (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : (_props$controlProps2$ = _props$controlProps2.currentCallControlProps) === null || _props$controlProps2$ === void 0 ? void 0 : _props$controlProps2$.nonActionIds),
+        selfVideoTileId: (props === null || props === void 0 ? void 0 : (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : (_props$controlProps3$ = _props$controlProps3.currentCallControlProps) === null || _props$controlProps3$ === void 0 ? void 0 : (_props$controlProps3$2 = _props$controlProps3$.nonActionIds) === null || _props$controlProps3$2 === void 0 ? void 0 : _props$controlProps3$2.selfVideoTileId) ?? "selfVideo",
+        remoteVideoTileId: (props === null || props === void 0 ? void 0 : (_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : (_props$controlProps4$ = _props$controlProps4.currentCallControlProps) === null || _props$controlProps4$ === void 0 ? void 0 : (_props$controlProps4$2 = _props$controlProps4$.nonActionIds) === null || _props$controlProps4$2 === void 0 ? void 0 : _props$controlProps4$2.remoteVideoTileId) ?? "remoteVideo"
+      },
+      videoCallDisabled: state.uiStates.disableVideoCall,
+      selfVideoDisabled: state.uiStates.disableSelfVideo,
+      remoteVideoDisabled: state.uiStates.disableRemoteVideo,
+      ...(props === null || props === void 0 ? void 0 : (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.currentCallControlProps)
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.uiStates.showCallingPopup && /*#__PURE__*/React.createElement(CallingContainer, {
+    controlProps: controlProps,
+    styleProps: props === null || props === void 0 ? void 0 : props.styleProps
+  }));
+};
+export default CallingContainerStateful;

package/lib/esm/components/callingcontainerstateful/ICallingContainerStatefulProps.js

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

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

@@ -0,0 +1,102 @@
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useRef, useState } from "react";
+import { BroadcastService, ChatButton } from "@microsoft/omnichannel-chat-components";
+import { Constants } from "../../common/Constants";
+import { setFocusOnElement } from "../../common/utils";
+import { ConversationState } from "../../contexts/common/ConversationState";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { TelemetryTimers } from "../../common/telemetry/TelemetryManager";
+import { defaultOutOfOfficeChatButtonStyleProps } from "./common/styleProps/defaultOutOfOfficeChatButtonStyleProps";
+import useChatContextStore from "../../hooks/useChatContextStore";
+export const ChatButtonStateful = props => {
+  var _state$domainStates$l, _state$domainStates$l2, _buttonProps$controlP, _props$buttonProps, _props$buttonProps$co, _props$buttonProps2, _props$buttonProps2$c, _props$buttonProps3, _props$buttonProps3$c;
+  const [state, dispatch] = useChatContextStore();
+  const {
+    buttonProps,
+    outOfOfficeButtonProps,
+    startChat
+  } = props;
+  //Setting OutOfOperatingHours Flag
+  const [outOfOperatingHours, setOutOfOperatingHours] = useState(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
+  const proactiveChatInNewWindow = useRef(state.appStates.proactiveChatStates.proactiveChatInNewWindow);
+  const outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeChatButtonStyleProps, outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.styleProps);
+  const controlProps = {
+    id: "oc-lcw-chat-button",
+    dir: state.domainStates.globalDir,
+    titleText: "Let's Chat!",
+    subtitleText: "We're online.",
+    hideNotificationBubble: (buttonProps === null || buttonProps === void 0 ? void 0 : (_buttonProps$controlP = buttonProps.controlProps) === null || _buttonProps$controlP === void 0 ? void 0 : _buttonProps$controlP.hideNotificationBubble) === true || state.appStates.isMinimized === false,
+    unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > Constants.maximumUnreadMessageCount ? (_props$buttonProps = props.buttonProps) === null || _props$buttonProps === void 0 ? void 0 : (_props$buttonProps$co = _props$buttonProps.controlProps) === null || _props$buttonProps$co === void 0 ? void 0 : _props$buttonProps$co.largeUnreadMessageString : state.appStates.unreadMessageCount.toString() : "0",
+    onClick: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.LCWChatButtonClicked
+      });
+      if (proactiveChatInNewWindow.current) {
+        const proactiveChatIsInPopoutModeEvent = {
+          eventName: BroadcastEvent.ProactiveChatIsInPopoutMode
+        };
+        BroadcastService.postMessage(proactiveChatIsInPopoutModeEvent);
+      } else if (state.appStates.isMinimized) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_MINIMIZED,
+          payload: false
+        });
+      } else {
+        await startChat();
+      }
+    },
+    unreadMessageString: (_props$buttonProps2 = props.buttonProps) === null || _props$buttonProps2 === void 0 ? void 0 : (_props$buttonProps2$c = _props$buttonProps2.controlProps) === null || _props$buttonProps2$c === void 0 ? void 0 : _props$buttonProps2$c.unreadMessageString,
+    ...(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.controlProps)
+  };
+  const outOfOfficeControlProps = {
+    id: "oc-lcw-chat-button",
+    dir: state.domainStates.globalDir,
+    titleText: "We're Offline",
+    subtitleText: "No agents available",
+    onClick: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.LCWChatButtonClicked
+      });
+      if (state.appStates.isMinimized) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_MINIMIZED,
+          payload: false
+        });
+      } else {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+          payload: ConversationState.OutOfOffice
+        });
+      }
+    },
+    unreadMessageString: (_props$buttonProps3 = props.buttonProps) === null || _props$buttonProps3 === void 0 ? void 0 : (_props$buttonProps3$c = _props$buttonProps3.controlProps) === null || _props$buttonProps3$c === void 0 ? void 0 : _props$buttonProps3$c.unreadMessageString,
+    ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
+  };
+  useEffect(() => {
+    if (state.appStates.outsideOperatingHours) {
+      setOutOfOperatingHours(true);
+    }
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.LCWChatButtonShow,
+      ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
+    });
+    if (state.uiStates.focusChatButton) {
+      setFocusOnElement(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
+    } else {
+      dispatch({
+        type: LiveChatWidgetActionType.SET_FOCUS_CHAT_BUTTON,
+        payload: true
+      });
+    }
+  }, []);
+  useEffect(() => {
+    proactiveChatInNewWindow.current = state.appStates.proactiveChatStates.proactiveChatInNewWindow;
+  }, [state.appStates.proactiveChatStates.proactiveChatInNewWindow]);
+  return /*#__PURE__*/React.createElement(ChatButton, {
+    componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
+    controlProps: outOfOperatingHours ? outOfOfficeControlProps : controlProps,
+    styleProps: outOfOperatingHours ? outOfOfficeStyleProps : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.styleProps
+  });
+};
+export default ChatButtonStateful;

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

@@ -0,0 +1,8 @@
+export const defaultOutOfOfficeChatButtonStyleProps = {
+  iconStyleProps: {
+    backgroundColor: "#000000"
+  },
+  subtitleStyleProps: {
+    margin: "0px 10px 0px 10px"
+  }
+};

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

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

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

@@ -0,0 +1,86 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { ConfirmationPane } from "@microsoft/omnichannel-chat-components";
+import React, { useEffect } from "react";
+import { findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
+import { DimLayer } from "../dimlayer/DimLayer";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import useChatAdapterStore from "../../hooks/useChatAdapterStore";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import { ConversationEndEntity } from "../../contexts/common/ConversationEndEntity";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ConfirmationPaneStateful = props => {
+  const initialTabIndexMap = new Map();
+  let elements = [];
+  const [state, dispatch] = useChatContextStore();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  const [adapter] = useChatAdapterStore();
+  const controlProps = {
+    id: "oc-lcw-confirmation-pane",
+    dir: state.domainStates.globalDir,
+    onConfirm: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.ConfirmationConfirmButtonClicked,
+        Description: "Confirmation pane Confirm button clicked"
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+        payload: false
+      });
+      setTabIndices(elements, initialTabIndexMap, true);
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CONVERSATION_ENDED_BY,
+        payload: ConversationEndEntity.Customer
+      });
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.ConversationEndedByCustomer,
+        Description: "Conversation is ended by customer."
+      });
+    },
+    onCancel: () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.ConfirmationCancelButtonClicked,
+        Description: "Confirmation pane Cancel button clicked."
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+        payload: false
+      });
+      const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
+      if (previousFocusedElementId) {
+        setFocusOnElement("#" + previousFocusedElementId);
+        dispatch({
+          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
+          payload: null
+        });
+      } else {
+        setFocusOnSendBox();
+      }
+      setTabIndices(elements, initialTabIndexMap, true);
+    },
+    ...(props === null || props === void 0 ? void 0 : props.controlProps)
+  };
+
+  // Move focus to the first button
+  useEffect(() => {
+    preventFocusToMoveOutOfElement(controlProps.id);
+    const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
+    if (focusableElements) {
+      focusableElements[0].focus();
+    }
+    elements = findParentFocusableElementsWithoutChildContainer(controlProps.id);
+    setTabIndices(elements, initialTabIndexMap, false);
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.ConfirmationPaneLoaded
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
+    brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
+  }), /*#__PURE__*/React.createElement(ConfirmationPane, {
+    componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,
+    controlProps: controlProps,
+    styleProps: props === null || props === void 0 ? void 0 : props.styleProps
+  }));
+};
+export default ConfirmationPaneStateful;

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

@@ -0,0 +1,10 @@
+export const defaultConfirmationPaneLocalizedTexts = {
+  CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_EMAIL_AND_DOWNLOAD_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_EMAIL_AND_DOWNLOAD_TRANSCRIPT_ENABLED: "Select Cancel and then select the download or email icon",
+  CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_EMAIL_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_EMAIL_TRANSCRIPT_ENABLED: "Select Cancel and then select the email icon.",
+  CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_DOWNLOAD_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_DOWNLOAD_TRANSCRIPT_ENABLED: "Select Cancel and then select the download icon.",
+  CLOSE_CONFIRMATION_DIALOG_TITLE_DEFAULT: "Close Chat",
+  CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_DEFAULT: "Do you really want to close this chat?"
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import React from "react";
+export const DimLayer = _ref => {
+  let {
+    brightness
+  } = _ref;
+  const color = "rgba(0, 0, 0, " + brightness + ")";
+  const defaultDimLayerStyles = {
+    position: "absolute",
+    borderRadius: "inherit",
+    width: "100%",
+    height: "100%",
+    zIndex: 100,
+    backgroundColor: color
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: "oc-lcw-dim-layer",
+    style: defaultDimLayerStyles
+  });
+};