Web:Client Added live chat toggle

packages/client/src/store/ProfileActionsStore.js

@@ -26,6 +26,8 @@ const PAYMENTS_URL = combineUrl(
 
 //const VIDEO_GUIDES_URL = "https://onlyoffice.com/";
 
+const LiveChatLocalStorageKey = "liveChatState";
+
 class ProfileActionsStore {
   authStore = null;
   filesStore = null;
@@ -34,6 +36,7 @@ class ProfileActionsStore {
   selectedFolderStore = null;
   isAboutDialogVisible = false;
   isDebugDialogVisible = false;
+  isShowLiveChat = false;
 
   constructor(
     authStore,
@@ -48,9 +51,27 @@ class ProfileActionsStore {
     this.treeFoldersStore = treeFoldersStore;
     this.selectedFolderStore = selectedFolderStore;
 
+    this.isShowLiveChat = this.getStateLiveChat();
+
     makeAutoObservable(this);
   }
 
+  getStateLiveChat = () => {
+    const state = localStorage.getItem(LiveChatLocalStorageKey);
+
+    if (!state) return false;
+
+    return JSON.parse(state);
+  };
+
+  setStateLiveChat = (state) => {
+    if (typeof state !== "boolean") return;
+
+    localStorage.setItem(LiveChatLocalStorageKey, state.toString());
+
+    this.isShowLiveChat = state;
+  };
+
   setIsAboutDialogVisible = (visible) => {
     this.isAboutDialogVisible = visible;
   };
@@ -96,6 +117,8 @@ class ProfileActionsStore {
   };
 
   onLiveChatClick = () => {
+    this.setStateLiveChat(!this.isShowLiveChat);
+
     //window.open(supportUrl, "_blank");
   };
 
@@ -195,6 +218,8 @@ class ProfileActionsStore {
         icon: LiveChatReactSvgUrl,
         label: t("Common:LiveChat"),
         onClick: this.onLiveChatClick,
+        checked: this.isShowLiveChat,
+        withToggle: true,
       };
     }
 

packages/components/drop-down-item/index.js

@@ -4,8 +4,12 @@ import { ReactSVG } from "react-svg";
 
 import RightArrowReactSvgUrl from "PUBLIC_DIR/images/right.arrow.react.svg?url";
 
-import { StyledDropdownItem, IconWrapper } from "./styled-drop-down-item";
-import { isNull } from "lodash";
+import {
+  StyledDropdownItem,
+  IconWrapper,
+  WrapperToggle,
+} from "./styled-drop-down-item";
+import ToggleButton from "../toggle-button";
 
 const DropDownItem = (props) => {
   //console.log("DropDownItem render");
@@ -15,7 +19,6 @@ const DropDownItem = (props) => {
     icon,
     children,
     disabled,
-    onClick,
     className,
     theme,
     fillIcon,
@@ -28,19 +31,31 @@ const DropDownItem = (props) => {
     isActiveDescendant,
   } = props;
 
+  const { withToggle, checked, onClick, ...rest } = props;
+
   const onClickAction = (e) => {
     onClick && !disabled && onClick(e);
   };
 
+  const stopPropagation = (event) => {
+    event.stopPropagation();
+  };
+
+  const onChange = (event) => {
+    stopPropagation(event);
+    if (!disabled) onClick?.();
+  };
+
   return (
     <StyledDropdownItem
-      {...props}
+      {...rest}
       noHover={noHover}
       className={className}
       onClick={onClickAction}
       disabled={disabled}
       isActive={isActive}
       isSelected={isSelected}
+      withToggle={withToggle}
       isActiveDescendant={isActiveDescendant}
     >
       {icon && (
@@ -68,6 +83,12 @@ const DropDownItem = (props) => {
           />
         </IconWrapper>
       )}
+
+      {withToggle && (
+        <WrapperToggle onClick={stopPropagation}>
+          <ToggleButton isChecked={checked} onChange={onChange} />
+        </WrapperToggle>
+      )}
     </StyledDropdownItem>
   );
 };

packages/components/drop-down-item/styled-drop-down-item.js

@@ -24,6 +24,17 @@ const disabledAndHeaderStyle = css`
   }
 `;
 
+const WrapperToggle = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  width: 36px;
+
+  & label {
+    position: static;
+  }
+`;
+
 const StyledDropdownItem = styled.div`
   display: ${(props) => (props.textOverflow ? "block" : "flex")};
   width: ${(props) => props.theme.dropDownItem.width};
@@ -184,4 +195,4 @@ const IconWrapper = styled.div`
 `;
 IconWrapper.defaultProps = { theme: Base };
 
-export { StyledDropdownItem, IconWrapper };
+export { StyledDropdownItem, IconWrapper, WrapperToggle };