Client: PortalSettings: DeleteData: disable for not activated email

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 {
+export const ButtonWrapper = styled.div`
-    @media (${smallTablet}) {
+  display: flex;
-      position: absolute;
+  gap: 8px;
-      bottom: 16px;
+  align-items: center;
-      width: calc(100% - 40px);
 
-      @media (${mobile}) {
+  .request-again-link {
-        width: calc(100% - 32px);
+    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
+      <ButtonWrapper>
-        className="button"
+        <Button
-        label={t("Deactivate")}
+          className="button"
-        primary
+          label={t("Deactivate")}
-        size={isDesktopView ? "small" : "normal"}
+          primary
-        onClick={onDeactivateClick}
+          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
+      <ButtonWrapper>
-        className="button"
+        <Button
-        label={t("Common:Delete")}
+          className="button"
-        primary
+          label={t("Common:Delete")}
-        size={isDesktopView ? "small" : "normal"}
+          primary
-        onClick={onDeleteClick}
+          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)
+  )
+);