chore: deactivate user option added (#2841)

* dev: deactivate user option added

* chore: new layout for profile settings

* fix: build errors

* fix: user profile activity

web/components/account/delete-account-modal.tsx → web/components/account/deactivate-account-modal.tsx

@@ -1,78 +1,90 @@
-// react
 import React, { useState } from "react";
-// next
 import { useRouter } from "next/router";
+import { mutate } from "swr";
+import { useTheme } from "next-themes";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
 import { AuthService } from "services/auth.service";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// icons
-import { Trash2 } from "lucide-react";
-import { UserService } from "services/user.service";
-import { useTheme } from "next-themes";
-import { mutate } from "swr";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
 };
 
 const authService = new AuthService();
-const userService = new UserService();
 
-const DeleteAccountModal: React.FC<Props> = (props) => {
+export const DeactivateAccountModal: React.FC<Props> = (props) => {
   const { isOpen, onClose } = props;
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // states
+  const [switchingAccount, setSwitchingAccount] = useState(false);
+  const [isDeactivating, setIsDeactivating] = useState(false);
+
+  const {
+    user: { deactivateAccount },
+  } = useMobxStore();
 
   const router = useRouter();
+
   const { setTheme } = useTheme();
+
   const { setToastAlert } = useToast();
 
-  const handleSignOut = async () => {
+  const handleClose = () => {
+    setSwitchingAccount(false);
+    setIsDeactivating(false);
+    onClose();
+  };
+
+  const handleSwitchAccount = async () => {
+    setSwitchingAccount(true);
+
     await authService
       .signOut()
       .then(() => {
         mutate("CURRENT_USER_DETAILS", null);
         setTheme("system");
         router.push("/");
+        handleClose();
       })
       .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Failed to sign out. Please try again.",
         })
-      );
+      )
+      .finally(() => setSwitchingAccount(false));
   };
 
   const handleDeleteAccount = async () => {
-    setIsDeleteLoading(true);
-    await userService
-      .deleteAccount()
+    setIsDeactivating(true);
+
+    await deactivateAccount()
       .then(() => {
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "Account deleted successfully.",
         });
-        mutate("CURRENT_USER_DETAILS", null);
-        setTheme("system");
+        handleClose();
         router.push("/");
       })
       .catch((err) =>
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: err?.data?.error,
+          message: err?.error,
         })
-      );
-    setIsDeleteLoading(false);
-  };
-
-  const handleClose = () => {
-    onClose();
+      )
+      .finally(() => setIsDeactivating(false));
   };
 
   return (
@@ -105,32 +117,29 @@ const DeleteAccountModal: React.FC<Props> = (props) => {
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-center gap-x-4">
-                      <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <Trash2 className="h-5 w-5 text-red-600" aria-hidden="true" />
+                      <div className="grid place-items-center rounded-full bg-red-500/20 p-4">
+                        <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-onboarding-text-100">
-                        Not the right workspace?
+                        Deactivate account?
                       </Dialog.Title>
                     </div>
 
                     <div className="mt-6 px-4">
                       <ul className="text-onboarding-text-300 list-disc font-normal text-base">
-                        <li>Delete this account if you have another and won’t use this account.</li>
-                        <li>Switch to another account if you’d like to come back to this account another time.</li>
+                        <li>Deactivate this account if you have another and won{"'"}t use this account.</li>
+                        <li>Switch to another account if you{"'"}d like to come back to this account another time.</li>
                       </ul>
                     </div>
                   </div>
                 </div>
-                <div className="flex items-center justify-end gap-4 p-4 mb-2 sm:px-6">
-                  <span className="text-sm font-medium hover:cursor-pointer" onClick={handleSignOut}>
-                    Switch account
-                  </span>
-                  <button
-                    className="py-1.5 px-3 font-medium rounded-sm text-red-500 border border-red-500 text-sm "
-                    onClick={handleDeleteAccount}
-                  >
-                    {isDeleteLoading ? "Deleting..." : "Delete account"}
-                  </button>
+                <div className="flex items-center justify-end gap-2 p-4 mb-2 sm:px-6">
+                  <Button variant="link-primary" onClick={handleSwitchAccount} loading={switchingAccount}>
+                    {switchingAccount ? "Switching..." : "Switch account"}
+                  </Button>
+                  <Button variant="outline-danger" onClick={handleDeleteAccount}>
+                    {isDeactivating ? "Deactivating..." : "Deactivate account"}
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -140,5 +149,3 @@ const DeleteAccountModal: React.FC<Props> = (props) => {
     </Transition.Root>
   );
 };
-
-export default DeleteAccountModal;

web/components/account/index.ts

@@ -1,3 +1,4 @@
+export * from "./deactivate-account-modal";
 export * from "./email-code-form";
 export * from "./email-password-form";
 export * from "./email-forgot-password-form";

web/components/auth-screens/project/join-project.tsx

@@ -13,7 +13,9 @@ import JoinProjectImg from "public/auth/project-not-authorized.svg";
 export const JoinProject: React.FC = () => {
   const [isJoiningProject, setIsJoiningProject] = useState(false);
 
-  const { project: projectStore } = useMobxStore();
+  const {
+    user: { joinProject },
+  } = useMobxStore();
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -23,7 +25,7 @@ export const JoinProject: React.FC = () => {
 
     setIsJoiningProject(true);
 
-    projectStore.joinProject(workspaceSlug.toString(), [projectId.toString()]).finally(() => {
+    joinProject(workspaceSlug.toString(), [projectId.toString()]).finally(() => {
       setIsJoiningProject(false);
     });
   };

web/components/command-palette/command-pallette.tsx

@@ -4,7 +4,6 @@ import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
 // components
 import { CommandModal, ShortcutsModal } from "components/command-palette";
 import { BulkDeleteIssuesModal } from "components/core";
@@ -30,7 +29,11 @@ export const CommandPalette: FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
   // store
-  const { commandPalette, theme: themeStore } = useMobxStore();
+  const {
+    commandPalette,
+    theme: { toggleSidebar },
+    user: { currentUser },
+  } = useMobxStore();
   const {
     toggleCommandPaletteModal,
     isCreateIssueModalOpen,
@@ -52,9 +55,6 @@ export const CommandPalette: FC = observer(() => {
     isDeleteIssueModalOpen,
     toggleDeleteIssueModal,
   } = commandPalette;
-  const { toggleSidebar } = themeStore;
-
-  const { user } = useUser();
 
   const { setToastAlert } = useToast();
 
@@ -153,7 +153,7 @@ export const CommandPalette: FC = observer(() => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
 
-  if (!user) return null;
+  if (!currentUser) return null;
 
   return (
     <>
@@ -223,7 +223,7 @@ export const CommandPalette: FC = observer(() => {
         onClose={() => {
           toggleBulkDeleteIssueModal(false);
         }}
-        user={user}
+        user={currentUser}
       />
       <CommandModal />
     </>