Merge pull request #2649 from ever-co/feat/handle-team-user-delete-ca…

…ses-1403

Handle team user delete cases

.cspell.json

@@ -259,6 +259,9 @@
 		"skey",
 		"smalltext",
 		"snyk",
+		"Sonner",
+		"sonner",
+		"Notif",
 		"stackoverflow",
 		"statsus",
 		"statut",

apps/web/app/hooks/features/useOrganizationTeams.ts

@@ -20,6 +20,7 @@ import {
 	activeTeamIdState,
 	activeTeamManagersState,
 	activeTeamState,
+	isTeamMemberJustDeletedState,
 	isTeamMemberState,
 	organizationTeamsState,
 	teamsFetchingState,
@@ -175,6 +176,8 @@ export function useOrganizationTeams() {
 
 	const [activeTeamId, setActiveTeamId] = useRecoilState(activeTeamIdState);
 	const [teamsFetching, setTeamsFetching] = useRecoilState(teamsFetchingState);
+	const [isTeamMemberJustDeleted, setIsTeamMemberJustDeleted] = useRecoilState(isTeamMemberJustDeletedState);
+	// const [isTeamJustDeleted, setIsTeamJustDeleted] = useRecoilState(isTeamJustDeletedState);
 	const { firstLoad, firstLoadData: firstLoadTeamsData } = useFirstLoad();
 	const [isTeamMember, setIsTeamMember] = useRecoilState(isTeamMemberState);
 	const { updateUserFromAPI, refreshToken, user } = useAuthenticateUser();
@@ -245,6 +248,7 @@ export function useOrganizationTeams() {
 		return queryCall(user?.employee.organizationId, user?.employee.tenantId).then((res) => {
 			if (res.data?.items && res.data?.items?.length === 0) {
 				setIsTeamMember(false);
+				setIsTeamMemberJustDeleted(true);
 			}
 			const latestTeams = res.data?.items || [];
 
@@ -266,6 +270,7 @@ export function useOrganizationTeams() {
 			// Handle case where user might Remove Account from all teams,
 			// In such case need to update active team with Latest list of Teams
 			if (!latestTeams.find((team: any) => team.id === teamId) && latestTeams.length) {
+				setIsTeamMemberJustDeleted(true);
 				setActiveTeam(latestTeams[0]);
 			} else if (!latestTeams.length) {
 				teamId = '';
@@ -381,6 +386,8 @@ export function useOrganizationTeams() {
 		removeUserFromAllTeam,
 		loadingTeam,
 		isTrackingEnabled,
-		memberActiveTaskId
+		memberActiveTaskId,
+		isTeamMemberJustDeleted,
+		setIsTeamMemberJustDeleted
 	};
 }

apps/web/app/stores/organization-team.ts

@@ -21,6 +21,16 @@ export const isTeamMemberState = atom<boolean>({
 	default: true
 });
 
+export const isTeamMemberJustDeletedState = atom<boolean>({
+	key: 'isTeamMemberJustDeletedState',
+	default: false
+});
+
+export const isTeamJustDeletedState = atom<boolean>({
+	key: 'isTeamJustDeletedState',
+	default: false
+});
+
 export const isOTRefreshingState = atom<boolean>({
 	key: 'isOTRefreshing',
 	default: false

apps/web/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

apps/web/components/ui/toaster.tsx

@@ -1,5 +1,11 @@
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from 'components/ui/toast';
 import { useToast } from 'components/ui/use-toast';
+import { Toaster as ToasterMessage } from '@components/ui/sonner';
+import { toast } from 'sonner';
+import { useOrganizationTeams } from '@app/hooks';
+// import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
 
 export function Toaster() {
 	const { toasts } = useToast();
@@ -22,3 +28,25 @@ export function Toaster() {
 		</ToastProvider>
 	);
 }
+
+export function ToastMessageManager() {
+	const { isTeamMemberJustDeleted, setIsTeamMemberJustDeleted } = useOrganizationTeams();
+	const [deletedNotifShown, setDeletedNotifShown] = useState(false);
+	const t = useTranslations();
+
+	useEffect(() => {
+		let timer: NodeJS.Timeout;
+		if (isTeamMemberJustDeleted && !deletedNotifShown) {
+			toast.error(t('alerts.ALERT_USER_DELETED_FROM_TEAM'), { duration: 20000 });
+			timer = setTimeout(() => {
+				setIsTeamMemberJustDeleted(false);
+			}, 10000);
+			setDeletedNotifShown(true);
+		}
+
+		return () => clearTimeout(timer);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [deletedNotifShown, isTeamMemberJustDeleted, setIsTeamMemberJustDeleted]);
+
+	return <ToasterMessage richColors visibleToasts={3} />;
+}

apps/web/lib/layout/main-layout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { clsxm } from '@app/utils';
-import { Toaster } from '@components/ui/toaster';
+import { Toaster, ToastMessageManager } from '@components/ui/toaster';
 import { Container, Divider, Meta } from 'lib/components';
 import { PropsWithChildren } from 'react';
 import { Footer, Navbar } from '.';
@@ -41,14 +41,14 @@ export function MainLayout({
 							? `
 							margin-left: 2rem;
 							margin-right: 2rem;
-							` :  `	--tblr-gutter-x: 1.5rem;
+							`
+							: `	--tblr-gutter-x: 1.5rem;
 						--tblr-gutter-y: 0;
 						width: 100%;
 						padding-right: calc(var(--tblr-gutter-x) * 0.5);
 						padding-left: calc(var(--tblr-gutter-x) * 0.5);
 						margin-right: auto;
-						margin-left: auto;`
-							}
+						margin-left: auto;`}
 					}
 				`}
 			</style>
@@ -77,6 +77,7 @@ export function MainLayout({
 				</Container>
 			</div>
 			<Toaster />
+			<ToastMessageManager />
 		</div>
 	);
 }

apps/web/locales/ar.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "سيتم حذف حسابك نهائياً مع إزالته من جميع الفرق",
 		"ALERT_REMOVE_TEAM": "سيتم إزالة الفريق بالكامل من النظام وفقدان أعضاء الفريق للوصول",
 		"ALERT_REMOVE_ALL_DATA": "ستتم إزالة جميع بيانات الحساب من جميع الفرق التي تكون فيها مديرًا موجودًا واحدًا فقط",
-		"ALERT_QUIT_TEAM": "أنت على وشك مغادرة الفريق"
+		"ALERT_QUIT_TEAM": "أنت على وشك مغادرة الفريق",
+		"ALERT_USER_DELETED_FROM_TEAM": "لقد تم حذفك من الفريق"
 	},
 	"pages": {
 		"home": {

apps/web/locales/bg.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Вашият профил ще бъде изтрит завинаги с премахване от всички отбори",
 		"ALERT_REMOVE_TEAM": "Отборът ще бъде премахнат напълно от системата и членовете на отбора ще загубят достъп",
 		"ALERT_REMOVE_ALL_DATA": "Всички данни за профила ще бъдат премахнати от всички отбори, освен където сте само мениджър",
-		"ALERT_QUIT_TEAM": "Ще напуснете отбора"
+		"ALERT_QUIT_TEAM": "Ще напуснете отбора",
+		"ALERT_USER_DELETED_FROM_TEAM": "Бяхте изтрит от екипа"
 	},
 	"pages": {
 		"home": {

apps/web/locales/de.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Ihr Konto wird dauerhaft gelöscht und von allen Teams entfernt",
 		"ALERT_REMOVE_TEAM": "Das Team wird vollständig aus dem System entfernt und die Teammitglieder verlieren den Zugriff",
 		"ALERT_REMOVE_ALL_DATA": "Alle Kontodaten werden von allen Teams entfernt, in denen Sie der EINZIGE Manager sind",
-		"ALERT_QUIT_TEAM": "Sie sind im Begriff, das Team zu verlassen"
+		"ALERT_QUIT_TEAM": "Sie sind im Begriff, das Team zu verlassen",
+		"ALERT_USER_DELETED_FROM_TEAM": "Du wurdest aus dem Team entfernt"
 	},
 	"pages": {
 		"home": {

apps/web/locales/en.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Your Account will be deleted permanently with removing from all teams",
 		"ALERT_REMOVE_ALL_DATA": "All Account Data will be removed from all teams where you are ONLY one existed manager",
 		"ALERT_REMOVE_TEAM": "Team will be completely removed for the system and team members lost access",
-		"ALERT_QUIT_TEAM": "You are about to quit the team"
+		"ALERT_QUIT_TEAM": "You are about to quit the team",
+		"ALERT_USER_DELETED_FROM_TEAM": "You have been deleted from the team"
 	},
 	"pages": {
 		"home": {

apps/web/locales/es.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Tu cuenta será eliminada permanentemente con la eliminación de todos los equipos",
 		"ALERT_REMOVE_TEAM": "El equipo será eliminado completamente del sistema y los miembros del equipo perderán el acceso",
 		"ALERT_REMOVE_ALL_DATA": "Todos los datos de la cuenta serán eliminados de todos los equipos donde eres el único administrador existente",
-		"ALERT_QUIT_TEAM": "Estás a punto de abandonar el equipo"
+		"ALERT_QUIT_TEAM": "Estás a punto de abandonar el equipo",
+		"ALERT_USER_DELETED_FROM_TEAM": "Has sido eliminado del equipo"
 	},
 	"pages": {
 		"home": {

apps/web/locales/fr.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Votre compte sera supprimé définitivement avec suppression de toutes les équipes",
 		"ALERT_REMOVE_TEAM": "L'équipe sera complètement supprimée du système et les membres de l'équipe perdront l'accès",
 		"ALERT_REMOVE_ALL_DATA": "Toutes les données de compte seront supprimées de toutes les équipes où vous êtes UNIQUEMENT un manager existant",
-		"ALERT_QUIT_TEAM": "Vous êtes sur le point de quitter l'équipe"
+		"ALERT_QUIT_TEAM": "Vous êtes sur le point de quitter l'équipe",
+		"ALERT_USER_DELETED_FROM_TEAM": "Vous avez été supprimé de l'équipe"
 	},
 	"pages": {
 		"home": {

apps/web/locales/he.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "החשבון שלך יימחק לצמיתות עם הסרה מכל הצוותים",
 		"ALERT_REMOVE_ALL_DATA": "כל נתוני החשבון יוסרו מכל הצוותים שבהם אתה רק מנהל קיים אחד",
 		"ALERT_REMOVE_TEAM": "הצוות יוסר לחלוטין מהמערכת וחברי הצוות יאבדו גישה",
-		"ALERT_QUIT_TEAM": "אתה עומד לעזוב את הצוות"
+		"ALERT_QUIT_TEAM": "אתה עומד לעזוב את הצוות",
+		"ALERT_USER_DELETED_FROM_TEAM": "נמחקת מהקבוצה"
 	},
 	"pages": {
 		"home": {

apps/web/locales/it.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Il tuo account verrà eliminato definitivamente e sarai rimosso da tutti i team",
 		"ALERT_REMOVE_ALL_DATA": "Tutti i dati dell'account saranno rimossi dai team in cui sei l'unico responsabile esistente",
 		"ALERT_REMOVE_TEAM": "Il Team sarà completamente rimosso dal sistema e i membri del team perderanno l'accesso",
-		"ALERT_QUIT_TEAM": "Stai per abbandonare il team"
+		"ALERT_QUIT_TEAM": "Stai per abbandonare il team",
+		"ALERT_USER_DELETED_FROM_TEAM": "Sei stato rimosso dal team"
 	},
 	"pages": {
 		"home": {

apps/web/locales/nl.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Uw account wordt permanent verwijderd en uit alle teams verwijderd",
 		"ALERT_REMOVE_ALL_DATA": "Alle accountgegevens worden verwijderd uit alle teams waar je ALLEEN een bestaande manager bent.",
 		"ALERT_REMOVE_TEAM": "Team wordt volledig verwijderd uit het systeem en teamleden verliezen toegang",
-		"ALERT_QUIT_TEAM": "U staat op het punt het team te verlaten"
+		"ALERT_QUIT_TEAM": "U staat op het punt het team te verlaten",
+		"ALERT_USER_DELETED_FROM_TEAM": "Je bent uit het team verwijderd"
 	},
 	"pages": {
 		"home": {

apps/web/locales/pl.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Twoje Konto zostanie trwale usunięte wraz z usunięciem z wszystkich zespołów",
 		"ALERT_REMOVE_ALL_DATA": "Wszystkie dane konta zostaną usunięte z zespołów, w których jesteś jedynym istniejącym menedżerem",
 		"ALERT_REMOVE_TEAM": "Zespół zostanie całkowicie usunięty z systemu, a członkowie zespołu stracą dostęp",
-		"ALERT_QUIT_TEAM": "Zamierzasz opuścić zespół"
+		"ALERT_QUIT_TEAM": "Zamierzasz opuścić zespół",
+		"ALERT_USER_DELETED_FROM_TEAM": "Zostałeś usunięty z zespołu"
 	},
 	"pages": {
 		"home": {

apps/web/locales/pt.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Sua conta será excluída permanentemente com a remoção de todas as equipes",
 		"ALERT_REMOVE_TEAM": "A equipe será completamente removida do sistema e os membros da equipe perderão o acesso",
 		"ALERT_REMOVE_ALL_DATA": "Todos os dados da conta serão removidos de todas as equipes onde você é o ÚNICO gerente existente",
-		"ALERT_QUIT_TEAM": "Você está prestes a sair da equipe"
+		"ALERT_QUIT_TEAM": "Você está prestes a sair da equipe",
+		"ALERT_USER_DELETED_FROM_TEAM": "Você foi removido da equipe"
 	},
 	"pages": {
 		"home": {

apps/web/locales/ru.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "Ваш аккаунт будет удален окончательно с удалением из всех команд",
 		"ALERT_REMOVE_TEAM": "Команда будет полностью удалена из системы, и участники команды потеряют доступ",
 		"ALERT_REMOVE_ALL_DATA": "Все данные аккаунта будут удалены из всех команд, где вы единственный существующий управляющий",
-		"ALERT_QUIT_TEAM": "Вы собираетесь покинуть команду"
+		"ALERT_QUIT_TEAM": "Вы собираетесь покинуть команду",
+		"ALERT_USER_DELETED_FROM_TEAM": "Вы были удалены из команды"
 	},
 	"pages": {
 		"home": {

apps/web/locales/zh.json

@@ -212,7 +212,8 @@
 		"ALERT_ACCOUNT_PERMANENT_DELETE": "您的账户将被永久删除,并从所有团队中移除",
 		"ALERT_REMOVE_TEAM": "团队将被完全移除出系统,成员也将失去访问权限",
 		"ALERT_REMOVE_ALL_DATA": "所有帐户数据将从您仅是一名现有经理的所有团队中删除",
-		"ALERT_QUIT_TEAM": "您将要退出团队"
+		"ALERT_QUIT_TEAM": "您将要退出团队",
+		"ALERT_USER_DELETED_FROM_TEAM": "您已从团队中删除"
 	},
 	"pages": {
 		"home": {

apps/web/package.json

@@ -101,6 +101,7 @@
 		"slate-hyperscript": "^0.77.0",
 		"slate-react": "^0.91.0",
 		"slate-serializers": "^0.4.0",
+		"sonner": "^1.5.0",
 		"string-to-color": "^2.2.2",
 		"tailwind-merge": "^1.14.0",
 		"tailwindcss": "^3.1.8",

yarn.lock

@@ -23095,6 +23095,11 @@ socks@^2.7.1:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
+sonner@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.5.0.tgz#af359f817063318415326b33aab54c5d17c747b7"
+  integrity sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==
+
 sort-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"