Merge branch 'release/v1.0.0' of github.com:ONLYOFFICE/DocSpace into release/v1.0.0

packages/client/src/pages/AccountsHome/Section/Header/index.js

@@ -20,6 +20,7 @@ import {
   mobile,
   isTablet,
   isMobile as isMobileUtils,
+  isSmallTablet,
   isDesktop,
 } from "@docspace/components/utils/device";
 import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
@@ -139,11 +140,6 @@ const StyledInfoPanelToggleWrapper = styled.div`
     display: none;
   }
 
-  ${isMobile &&
-  css`
-    display: none;
-  `}
-
   align-items: center;
   justify-content: center;
 
@@ -337,12 +333,7 @@ const SectionHeaderContent = (props) => {
             />
             {!isInfoPanelVisible && (
               <StyledInfoPanelToggleWrapper>
-                {!(
-                  isTablet() ||
-                  isMobile ||
-                  isMobileUtils() ||
-                  !isDesktop()
-                ) && (
+                {!(isTablet() || isSmallTablet() || !isDesktop()) && (
                   <div className="info-panel-toggle-bg">
                     <IconButton
                       id="info-panel-toggle--open"

packages/client/src/pages/Home/InfoPanel/Header/index.js

@@ -1,5 +1,5 @@
 import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import { isMobile as isMobileRDD } from "react-device-detect";
@@ -11,7 +11,7 @@ import withLoader from "@docspace/client/src/HOCs/withLoader";
 import Submenu from "@docspace/components/submenu";
 import {
   isDesktop as isDesktopUtils,
-  isMobile as isMobileUtils,
+  isSmallTablet as isSmallTabletUtils,
   isTablet as isTabletUtils,
 } from "@docspace/components/utils/device";
 
@@ -37,6 +37,8 @@ const InfoPanelHeaderContent = (props) => {
     // selectionParentRoom,
   } = props;
 
+  const [isTablet, setIsTablet] = useState(false);
+
   const isRooms = getIsRooms();
   const isGallery = getIsGallery();
   const isAccounts = getIsAccounts();
@@ -48,6 +50,19 @@ const InfoPanelHeaderContent = (props) => {
   const withSubmenu =
     !isNoItem && !isSeveralItems && !isGallery && !isAccounts && !isTrash;
 
+  useEffect(() => {
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+    return () => window.removeEventListener("resize", checkWidth);
+  }, []);
+
+  const checkWidth = () => {
+    const isTablet =
+      isTabletUtils() || isSmallTabletUtils() || !isDesktopUtils();
+
+    setIsTablet(isTablet);
+  };
+
   const closeInfoPanel = () => setIsVisible(false);
 
   const setMembers = () => setView("info_members");
@@ -84,9 +99,6 @@ const InfoPanelHeaderContent = (props) => {
 
   const personalSubmenu = [submenuData[1], submenuData[2]];
 
-  const isTablet =
-    isTabletUtils() || isMobileUtils() || isMobileRDD || !isDesktopUtils();
-
   return (
     <StyledInfoPanelHeader isTablet={isTablet} withSubmenu={withSubmenu}>
       <div className="main">

packages/client/src/pages/PortalSettings/categories/delete-data/StyledDeleteData.js

@@ -27,16 +27,30 @@ export const MainContainer = styled.div`
     margin-bottom: 24px;
     color: ${(props) => props.theme.client.settings.common.descriptionColor};
   }
+`;
 
-  .button {
-    @media (${smallTablet}) {
-      position: absolute;
-      bottom: 16px;
-      width: calc(100% - 40px);
+export const ButtonWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
 
-      @media (${mobile}) {
-        width: calc(100% - 32px);
-      }
+  .request-again-link {
+    margin-left: 4px;
+  }
+
+  @media (${smallTablet}) {
+    flex-direction: column-reverse;
+    gap: 16px;
+    position: absolute;
+    bottom: 16px;
+    width: calc(100% - 40px);
+
+    @media (${mobile}) {
+      width: calc(100% - 32px);
+    }
+
+    .button {
+      width: 100%;
     }
   }
 `;

packages/client/src/pages/PortalSettings/categories/delete-data/portalDeactivation.js

@@ -5,13 +5,21 @@ import { inject } from "mobx-react";
 import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
 import toastr from "@docspace/components/toast/toastr";
-import { MainContainer } from "./StyledDeleteData";
+import Link from "@docspace/components/link";
+import { MainContainer, ButtonWrapper } from "./StyledDeleteData";
 import { setDocumentTitle } from "../../../../helpers/utils";
 import { sendSuspendPortalEmail } from "@docspace/common/api/portal";
 import { isDesktop } from "@docspace/components/utils/device";
+import { EmployeeActivationStatus } from "@docspace/common/constants";
 
 const PortalDeactivation = (props) => {
-  const { t, getPortalOwner, owner } = props;
+  const {
+    t,
+    getPortalOwner,
+    owner,
+    currentColorScheme,
+    sendActivationLink,
+  } = props;
   const [isDesktopView, setIsDesktopView] = useState(false);
 
   const fetchData = async () => {
@@ -42,6 +50,13 @@ const PortalDeactivation = (props) => {
     }
   };
 
+  const requestAgain = () => {
+    sendActivationLink && sendActivationLink(t);
+  };
+
+  const notActivatedEmail =
+    owner.activationStatus === EmployeeActivationStatus.NotActivated;
+
   return (
     <MainContainer>
       <Text fontSize="16px" fontWeight="700" className="header">
@@ -51,21 +66,46 @@ const PortalDeactivation = (props) => {
         {t("PortalDeactivationDescription")}
       </Text>
       <Text className="helper">{t("PortalDeactivationHelper")}</Text>
-      <Button
-        className="button"
-        label={t("Deactivate")}
-        primary
-        size={isDesktopView ? "small" : "normal"}
-        onClick={onDeactivateClick}
-      />
+      <ButtonWrapper>
+        <Button
+          className="button"
+          label={t("Deactivate")}
+          primary
+          size={isDesktopView ? "small" : "normal"}
+          onClick={onDeactivateClick}
+          isDisabled={notActivatedEmail}
+        />
+        {notActivatedEmail && (
+          <Text fontSize="12px" fontWeight="600">
+            {t("MainBar:ConfirmEmailHeader")}
+            <Link
+              className="request-again-link"
+              color={currentColorScheme?.main?.accent}
+              fontSize="12px"
+              fontWeight="400"
+              onClick={requestAgain}
+            >
+              {t("MainBar:RequestActivation")}
+            </Link>
+          </Text>
+        )}
+      </ButtonWrapper>
     </MainContainer>
   );
 };
 
 export default inject(({ auth }) => {
-  const { getPortalOwner, owner } = auth.settingsStore;
+  const { getPortalOwner, owner, currentColorScheme } = auth.settingsStore;
+  const { sendActivationLink } = auth.userStore;
+
   return {
     getPortalOwner,
     owner,
+    currentColorScheme,
+    sendActivationLink,
   };
-})(withTranslation("Settings")(withRouter(PortalDeactivation)));
+})(
+  withTranslation(["Settings", "MainBar", "People"])(
+    withRouter(PortalDeactivation)
+  )
+);

packages/client/src/pages/PortalSettings/categories/delete-data/portalDeletion.js

@@ -4,7 +4,8 @@ import { withTranslation } from "react-i18next";
 import { inject } from "mobx-react";
 import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
-import { MainContainer } from "./StyledDeleteData";
+import Link from "@docspace/components/link";
+import { MainContainer, ButtonWrapper } from "./StyledDeleteData";
 import { setDocumentTitle } from "../../../../helpers/utils";
 import { DeletePortalDialog } from "SRC_DIR/components/dialogs";
 import toastr from "@docspace/components/toast/toastr";
@@ -13,9 +14,16 @@ import {
   sendDeletePortalEmail,
 } from "@docspace/common/api/portal";
 import { isDesktop } from "@docspace/components/utils/device";
+import { EmployeeActivationStatus } from "@docspace/common/constants";
 
 const PortalDeletion = (props) => {
-  const { t, getPortalOwner, owner } = props;
+  const {
+    t,
+    getPortalOwner,
+    owner,
+    currentColorScheme,
+    sendActivationLink,
+  } = props;
   const [isDialogVisible, setIsDialogVisible] = useState(false);
   const [stripeUrl, setStripeUrl] = useState(null);
   const [isDesktopView, setIsDesktopView] = useState(false);
@@ -54,6 +62,13 @@ const PortalDeletion = (props) => {
     }
   };
 
+  const requestAgain = () => {
+    sendActivationLink && sendActivationLink(t);
+  };
+
+  const notActivatedEmail =
+    owner.activationStatus === EmployeeActivationStatus.NotActivated;
+
   return (
     <MainContainer>
       <Text fontSize="16px" fontWeight="700" className="header">
@@ -63,14 +78,30 @@ const PortalDeletion = (props) => {
         {t("PortalDeletionDescription")}
       </Text>
       <Text className="helper">{t("PortalDeletionHelper")}</Text>
-      <Button
-        className="button"
-        label={t("Common:Delete")}
-        primary
-        size={isDesktopView ? "small" : "normal"}
-        onClick={onDeleteClick}
-      />
-
+      <ButtonWrapper>
+        <Button
+          className="button"
+          label={t("Common:Delete")}
+          primary
+          size={isDesktopView ? "small" : "normal"}
+          onClick={onDeleteClick}
+          isDisabled={notActivatedEmail}
+        />
+        {notActivatedEmail && (
+          <Text fontSize="12px" fontWeight="600">
+            {t("MainBar:ConfirmEmailHeader")}
+            <Link
+              className="request-again-link"
+              color={currentColorScheme?.main?.accent}
+              fontSize="12px"
+              fontWeight="400"
+              onClick={requestAgain}
+            >
+              {t("MainBar:RequestActivation")}
+            </Link>
+          </Text>
+        )}
+      </ButtonWrapper>
       <DeletePortalDialog
         visible={isDialogVisible}
         onClose={() => setIsDialogVisible(false)}
@@ -82,9 +113,17 @@ const PortalDeletion = (props) => {
 };
 
 export default inject(({ auth }) => {
-  const { getPortalOwner, owner } = auth.settingsStore;
+  const { getPortalOwner, owner, currentColorScheme } = auth.settingsStore;
+  const { sendActivationLink } = auth.userStore;
+
   return {
     getPortalOwner,
     owner,
+    currentColorScheme,
+    sendActivationLink,
   };
-})(withTranslation(["Settings", "Common"])(withRouter(PortalDeletion)));
+})(
+  withTranslation(["Settings", "MainBar", "People", "Common"])(
+    withRouter(PortalDeletion)
+  )
+);

packages/common/components/Navigation/Navigation.js

@@ -17,6 +17,7 @@ import {
   isMobile as isMobileUtils,
   isTablet as isTabletUtils,
   isDesktop as isDesktopUtils,
+  isSmallTablet as isSmallTabletUtils,
 } from "@docspace/components/utils/device";
 import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn";
 import TrashWarning from "./sub-components/trash-warning";
@@ -59,8 +60,7 @@ const Navigation = ({
   const containerRef = React.useRef(null);
 
   const isDesktop =
-    (!isMobile && !isTabletUtils() && !isMobileUtils()) ||
-    (isDesktopUtils() && !isMobile);
+    (!isTabletUtils() && !isSmallTabletUtils()) || isDesktopUtils();
 
   const infoPanelIsVisible = React.useMemo(
     () => isDesktop && (!isEmptyPage || (isEmptyPage && isRoom)),

packages/common/components/Navigation/StyledNavigation.js

@@ -67,13 +67,6 @@ const StyledContainer = styled.div`
     grid-template-columns: ${(props) =>
       props.isRootFolder ? "1fr auto" : "29px 1fr auto"};
   }
-
-  ${isMobile &&
-  css`
-    width: 100%;
-    grid-template-columns: ${(props) =>
-      props.isRootFolder ? "1fr auto" : "49px 1fr auto"};
-  `}
 `;
 
 export default StyledContainer;

packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js

@@ -21,12 +21,6 @@ const StyledInfoPanelToggleWrapper = styled.div`
     margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
   }
 
-  ${isMobile &&
-  css`
-    display: none;
-    margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
-  `}
-
   .info-panel-toggle-bg {
     height: 32px;
     width: 32px;