feat(UI-1242): add warning modal for organization deletion

src/components/organisms/settings/organization/deleteModal.tsx

@@ -17,6 +17,7 @@ export const DeleteOrganizationModal = ({ onDelete, isDeleting }: DeleteOrganiza
 	const organization = useModalStore((state) => state.data) as EnrichedOrganization;
 
 	if (!organization) return null;
+
 	return (
 		<Modal name={ModalName.deleteOrganization}>
 			<div className="mx-6">

src/components/organisms/settings/organization/settings.tsx

@@ -3,40 +3,29 @@ import React, { useMemo, useState } from "react";
 import debounce from "lodash/debounce";
 import omit from "lodash/omit";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 
-import { LoggerService } from "@services/logger.service";
-import { namespaces } from "@src/constants";
 import { MemberRole } from "@src/enums";
-import { ModalName } from "@src/enums/components";
-import { useModalStore, useOrganizationStore, useToastStore } from "@src/store";
+import { useDeleteOrganization } from "@src/hooks";
+import { useOrganizationStore, useToastStore } from "@src/store";
 import { isNameEmpty, isNameExist } from "@src/utilities";
 
-import { Button, ErrorMessage, Input, SuccessMessage, Typography } from "@components/atoms";
+import { Button, ErrorMessage, Input, SuccessMessage, Typography, Spinner } from "@components/atoms";
 import { DeleteOrganizationModal } from "@components/organisms/settings/organization";
+import { WarningDeleteOrganizationModal } from "@components/organisms/settings/user/organizations";
 
 import { TrashIcon } from "@assets/image/icons";
 
 export const OrganizationSettings = () => {
 	const { t } = useTranslation("settings", { keyPrefix: "organization" });
 	const [nameError, setNameError] = useState("");
-	const {
-		updateOrganization,
-		organizations,
-		deleteOrganization,
-		user,
-		isLoading,
-		logoutFunction,
-		currentOrganization,
-		getCurrentOrganizationEnriched,
-	} = useOrganizationStore();
+	const { updateOrganization, organizations, user, isLoading, getCurrentOrganizationEnriched } =
+		useOrganizationStore();
 	const [displaySuccess, setDisplaySuccess] = useState(false);
-	const { openModal, closeModal } = useModalStore();
 	const { data: organization } = getCurrentOrganizationEnriched();
-	const navigate = useNavigate();
 
 	const addToast = useToastStore((state) => state.addToast);
 	const [organizationDisplayName, setOrganizationDisplayName] = useState(organization?.displayName || "");
+	const { onDelete, organizationIdInDeletion, handleDeleteOrganization } = useDeleteOrganization();
 
 	const organizationsNames = useMemo(
 		() =>
@@ -76,40 +65,6 @@ export const OrganizationSettings = () => {
 		return null;
 	}
 
-	const onDelete = async () => {
-		const deletingCurrentOrganization = organization.id === currentOrganization?.id;
-
-		const { error } = await deleteOrganization(omit(organization, "currentMember"));
-		closeModal(ModalName.deleteOrganization);
-
-		if (error) {
-			addToast({
-				message: t("form.errors.deleteOrganizationFailed"),
-				type: "error",
-			});
-
-			return;
-		}
-
-		addToast({
-			message: t("form.messages.organizationDeleted", { name: organization?.displayName }),
-			type: "success",
-		});
-		setTimeout(() => {
-			if (!deletingCurrentOrganization) return;
-
-			if (!user?.defaultOrganizationId) {
-				LoggerService.error(
-					namespaces.ui.organizationSettings,
-					t("errors.defaultOrganizationIdMissing", { userId: user?.id })
-				);
-				logoutFunction(true);
-				return;
-			}
-			navigate(`/switch-organization/${user.defaultOrganizationId}`);
-		}, 3000);
-	};
-
 	const isNameInputDisabled =
 		isLoading.updatingOrganization || organization?.currentMember?.role !== MemberRole.admin;
 
@@ -140,14 +95,19 @@ export const OrganizationSettings = () => {
 			<Button
 				className="gap-3 px-4 text-base font-semibold text-white"
 				disabled={organization?.id === user?.defaultOrganizationId}
-				onClick={() => openModal(ModalName.deleteOrganization, organization)}
+				onClick={() => handleDeleteOrganization(organization)}
 				title={t("form.buttons.deleteOrganizationName", { name: organization?.displayName })}
 				variant="outline"
 			>
-				<TrashIcon className="size-4 stroke-white" />
+				{organizationIdInDeletion === organization.id ? (
+					<Spinner className="size-4" />
+				) : (
+					<TrashIcon className="size-4 stroke-white" />
+				)}
 				{t("form.buttons.deleteOrganization")}
 			</Button>
 			<DeleteOrganizationModal isDeleting={isLoading.deletingOrganization} onDelete={onDelete} />
+			<WarningDeleteOrganizationModal />
 		</div>
 	);
 };

src/components/organisms/settings/user/organizations/index.ts

@@ -1 +1,2 @@
 export { UserOrganizationsTable } from "@components/organisms/settings/user/organizations/table";
+export { WarningDeleteOrganizationModal } from "@components/organisms/settings/user/organizations//warningDeleteModal";

src/components/organisms/settings/user/organizations/table.tsx

@@ -1,37 +1,26 @@
 import React, { useEffect, useState } from "react";
 
-import omit from "lodash/omit";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
-import { LoggerService } from "@services";
-import { namespaces } from "@src/constants";
 import { MemberRole } from "@src/enums";
-import { ModalName } from "@src/enums/components";
-import { useModalStore, useOrganizationStore, useToastStore } from "@src/store";
+import { useDeleteOrganization } from "@src/hooks";
+import { useOrganizationStore, useToastStore } from "@src/store";
 import { EnrichedOrganization } from "@src/types/models";
 
-import { Button, Typography, IconButton, TBody, THead, Table, Td, Th, Tr } from "@components/atoms";
+import { Button, Typography, IconButton, TBody, THead, Table, Td, Th, Tr, Spinner } from "@components/atoms";
 import { DeleteOrganizationModal } from "@components/organisms/settings/organization";
+import { WarningDeleteOrganizationModal } from "@components/organisms/settings/user/organizations";
 
 import { TrashIcon } from "@assets/image/icons";
 
 export const UserOrganizationsTable = () => {
 	const { t } = useTranslation("settings", { keyPrefix: "userOrganizations" });
-	const { closeModal, openModal } = useModalStore();
-	const {
-		organizations,
-		getOrganizations,
-		getEnrichedOrganizations,
-		currentOrganization,
-		user,
-		deleteOrganization,
-		isLoading,
-		logoutFunction,
-	} = useOrganizationStore();
+	const { organizations, getOrganizations, getEnrichedOrganizations, user, isLoading } = useOrganizationStore();
 	const addToast = useToastStore((state) => state.addToast);
 	const navigate = useNavigate();
 	const [organizationsList, setOrganizationsList] = useState<EnrichedOrganization[]>();
+	const { onDelete, organizationIdInDeletion, handleDeleteOrganization } = useDeleteOrganization();
 
 	useEffect(() => {
 		getOrganizations();
@@ -51,45 +40,12 @@ export const UserOrganizationsTable = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [organizations]);
 
-	const onDelete = async (organization: EnrichedOrganization) => {
-		const deletingCurrentOrganization = organization.id === currentOrganization?.id;
-
-		const { error } = await deleteOrganization(omit(organization, "currentMember"));
-		closeModal(ModalName.deleteOrganization);
-		if (error) {
-			addToast({
-				message: t("errors.deleteFailed", {
-					name: organization?.displayName,
-					organizationId: organization?.id,
-				}),
-				type: "error",
-			});
-		}
-
-		addToast({
-			message: t("table.messages.organizationDeleted", { name: organization.displayName }),
-			type: "success",
-		});
-
-		if (!deletingCurrentOrganization) return;
-		setTimeout(async () => {
-			if (!user?.defaultOrganizationId) {
-				LoggerService.error(
-					namespaces.ui.organizationTableUserSettings,
-					t("errors.defaultOrganizationIdMissing", { userId: user?.id })
-				);
-				logoutFunction(true);
-				return;
-			}
-			navigate(`/switch-organization/${user.defaultOrganizationId}`);
-		}, 3000);
-	};
-
 	const isNameInputDisabled = (organizationId: string, organizationRole?: MemberRole): boolean =>
 		!!(
 			isLoading.updatingOrganization ||
 			user?.defaultOrganizationId === organizationId ||
-			organizationRole !== MemberRole.admin
+			organizationRole !== MemberRole.admin ||
+			organizationIdInDeletion
 		);
 
 	return (
@@ -126,17 +82,22 @@ export const UserOrganizationsTable = () => {
 								<IconButton
 									className="mr-1"
 									disabled={isNameInputDisabled(organization.id, organization.currentMember?.role)}
-									onClick={() => openModal(ModalName.deleteOrganization, organization)}
+									onClick={async () => handleDeleteOrganization(organization)}
 									title={t("table.actions.delete", { name: organization.displayName })}
 								>
-									<TrashIcon className="size-4 stroke-white" />
+									{organizationIdInDeletion === organization.id ? (
+										<Spinner className="size-4" />
+									) : (
+										<TrashIcon className="size-4 stroke-white" />
+									)}
 								</IconButton>
 							</Td>
 						</Tr>
 					))}
 				</TBody>
 			</Table>
 			<DeleteOrganizationModal isDeleting={isLoading.deletingOrganization} onDelete={onDelete} />
+			<WarningDeleteOrganizationModal />
 		</div>
 	);
 };

src/components/organisms/settings/user/organizations/warningDeleteModal.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { ModalName } from "@enums/components";
+
+import { useModalStore } from "@store";
+
+import { Button } from "@components/atoms";
+import { Modal } from "@components/molecules";
+
+export const WarningDeleteOrganizationModal = () => {
+	const { t } = useTranslation("settings", { keyPrefix: "organization.modal" });
+	const { closeModal } = useModalStore();
+	const organization = useModalStore((state) => state.data) as { name: string };
+
+	if (!organization) return null;
+
+	return (
+		<Modal name={ModalName.warningDeleteOrganization}>
+			<div className="mx-6">
+				<h3 className="mb-5 text-xl font-bold">{t("warning")}</h3>
+				<p className="font-light">{t("organizationDeleteWarning", { name: organization.name })}</p>
+			</div>
+
+			<div className="mt-14 flex justify-end gap-1">
+				<Button
+					ariaLabel={t("buttons.close")}
+					className="w-auto px-4 py-3 font-semibold hover:text-white"
+					onClick={() => closeModal(ModalName.warningDeleteOrganization)}
+				>
+					{t("buttons.close")}
+				</Button>
+			</div>
+		</Modal>
+	);
+};

src/enums/components/modal.enum.ts

@@ -18,5 +18,6 @@ export enum ModalName {
 	organizationCreated = "organizationCreated",
 	organizationMemberCreate = "organizationMemberCreate",
 	deleteOrganization = "deleteOrganization",
+	warningDeleteOrganization = "warningDeleteOrganization",
 	invitedUser = "invitedUser",
 }

src/hooks/index.ts

@@ -12,3 +12,4 @@ export { useVirtualizedList } from "@hooks/useVirtualizedList";
 export { useWindowDimensions } from "@hooks/useWindowDimensions";
 export { usePopover, usePopoverList } from "@src/hooks/usePopover";
 export { useProjectActions } from "@src/hooks/useProjectActions";
+export { useDeleteOrganization } from "@src/hooks/useDeleteOrganization";

src/hooks/useDeleteOrganization.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+
+import omit from "lodash/omit";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { LoggerService, ProjectsService } from "@services";
+import { namespaces } from "@src/constants";
+import { ModalName } from "@src/enums/components";
+import { useModalStore, useOrganizationStore, useToastStore } from "@src/store";
+import { EnrichedOrganization } from "@src/types/models";
+
+export const useDeleteOrganization = () => {
+	const [organizationIdInDeletion, setOrganizationIdInDeletion] = useState<string>();
+	const addToast = useToastStore((state) => state.addToast);
+	const { closeModal, openModal } = useModalStore();
+	const { currentOrganization, user, deleteOrganization, logoutFunction } = useOrganizationStore();
+	const { t } = useTranslation("settings", { keyPrefix: "userOrganizations" });
+	const navigate = useNavigate();
+
+	const onDelete = async (organization: EnrichedOrganization) => {
+		const deletingCurrentOrganization = organization.id === currentOrganization?.id;
+
+		const { error } = await deleteOrganization(omit(organization, "currentMember"));
+		closeModal(ModalName.deleteOrganization);
+		if (error) {
+			addToast({
+				message: t("errors.deleteFailed", {
+					name: organization?.displayName,
+					organizationId: organization?.id,
+				}),
+				type: "error",
+			});
+		}
+
+		addToast({
+			message: t("table.messages.organizationDeleted", { name: organization.displayName }),
+			type: "success",
+		});
+
+		if (!deletingCurrentOrganization) return;
+		setTimeout(async () => {
+			if (!user?.defaultOrganizationId) {
+				LoggerService.error(
+					namespaces.ui.organizationTableUserSettings,
+					t("errors.defaultOrganizationIdMissing", { userId: user?.id })
+				);
+				logoutFunction(true);
+				return;
+			}
+			navigate(`/switch-organization/${user.defaultOrganizationId}`);
+		}, 3000);
+	};
+
+	const handleDeleteOrganization = async (organization: EnrichedOrganization) => {
+		setOrganizationIdInDeletion(organization.id);
+		const { data: orgProjectList, error } = await ProjectsService.list(organization.id);
+		if (error || !orgProjectList) {
+			addToast({
+				message: t("errors.deleteFailed", {
+					name: organization?.displayName,
+					organizationId: organization?.id,
+				}),
+				type: "error",
+			});
+			return;
+		}
+		const hasProjects = orgProjectList?.length > 0;
+		setOrganizationIdInDeletion(undefined);
+
+		if (hasProjects) {
+			openModal(ModalName.warningDeleteOrganization, { name: organization.displayName });
+			return;
+		}
+
+		openModal(ModalName.deleteOrganization, organization);
+	};
+
+	return { organizationIdInDeletion, onDelete, handleDeleteOrganization };
+};

src/locales/en/settings/translation.json

@@ -110,6 +110,8 @@
 			}
 		},
 		"modal": {
+			"warning": "Warning",
+			"organizationDeleteWarning": "To delete the organization {{name}}, you have to delete all projects in it first",
 			"organizationCreated": "Organization {{name}} created",
 			"addMember": "Add new member to organization",
 			"line1": "The action is irreversible.",
@@ -126,6 +128,7 @@
 				"open": "Open {{name}}",
 				"create": "Create",
 				"cancel": "Cancel",
+				"close": "Close",
 				"delete": "Delete"
 			}
 		},