@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/projects/ProjectSheet.tsx

@@ -0,0 +1,603 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type FormEventHandler,
+} from 'react';
+import { useForm, type UseFormReturn } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { IconChevronDown, IconChevronUp, IconSearch, IconUpload } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Toast } from '../../../ui/feedback/Toast';
+import { FormField } from '../../../ui/form/FormField';
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import { ImageCropModal } from '../../../widgets/ImageUpload/ImageCropModal';
+import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../../modules/images/constants/image.constants';
+import { useImageUpload } from '../../../../modules/images/hooks/use-image-upload.hook';
+import { useAccountMembers } from '../../../../modules/accounts/hooks/use-account-members.hook';
+import { useManagementPermissions } from '../../../../modules/auth/hooks/useManagementPermissions';
+import { useCreateProject } from '../../../../modules/projects/hooks/create-project.hook';
+import { useUpdateProject } from '../../../../modules/projects/hooks/update-project.hook';
+import { useAddProjectUsers } from '../../../../modules/projects/hooks/add-project-users.hook';
+import { useRemoveProjectUsers } from '../../../../modules/projects/hooks/remove-project-users.hook';
+import { useListProjectUsers } from '../../../../modules/projects/hooks/list-project-users.hook';
+import { useCancelledSubscriptionGuard } from '../../../../modules/subscriptions/hooks/use-cancelled-subscription-guard';
+import { UserProfile, type User } from '../../../../modules/users/schema';
+import type { Project } from '../../../../modules/projects/types';
+import { useAuth } from '../../../../providers/auth.provider';
+import { useDebounce } from '../../../../hooks/useDebounce';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useProjectFlows, type ProjectSheetState } from '../../../../store/useProjectFlows';
+import { ConnectListRow } from '../shared/ConnectListRow';
+import { SectionLoadError } from '../shared/SectionLoadError';
+import { buildProjectFormSchema, type ProjectFormData, type ProjectFormUser } from './project-form.schema';
+
+const PROJECT_LOGO_CONFIG = { width: 200, height: 200, aspectRatio: 1 };
+
+const STORAGE_URL = process.env.NEXT_PUBLIC_STORAGE_URL || '';
+
+function toFormUser(user: Pick<User, 'id' | 'name' | 'email' | 'profile' | 'photo'>): ProjectFormUser {
+  return {
+    id: user.id,
+    name: user.name ?? '',
+    email: user.email ?? '',
+    profile: user.profile ?? UserProfile.viewer,
+    photo: user.photo ?? null,
+  };
+}
+
+type ProjectSheetUIProps = {
+  open: boolean;
+  title: string;
+  submitLabel: string;
+  projectId?: number;
+  form: UseFormReturn<ProjectFormData>;
+  handleClose: () => void;
+  handleSubmit: FormEventHandler;
+  isLoading: boolean;
+  readOnly?: boolean;
+  membersLoadFailed?: boolean;
+  onRetryMembers?: () => void;
+};
+
+function ProjectSheetUI({
+  open,
+  title,
+  submitLabel,
+  form,
+  projectId,
+  handleClose,
+  handleSubmit,
+  isLoading,
+  readOnly = false,
+  membersLoadFailed = false,
+  onRetryMembers,
+}: ProjectSheetUIProps) {
+  const translate = useTranslations();
+  const translateProfile = useTranslations('common.account.workspace.team.profiles');
+  const isMobile = useIsMobile();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const usersListRef = useRef<HTMLDivElement>(null);
+  const [showUserSearch, setShowUserSearch] = useState(false);
+  const [failedLogoSrc, setFailedLogoSrc] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 400);
+
+  const { user: currentUser } = useAuth();
+  const { data: usersOutProject, isPending: isLoadingUsers } = useAccountMembers(
+    projectId
+      ? { name: debouncedSearch, notInProject: projectId }
+      : { name: debouncedSearch, profiles: [UserProfile.collaborator, UserProfile.viewer] }
+  );
+
+  const { originalImage, showCropModal, setShowCropModal, fileName, handleFileSelect, handleCropConfirm } =
+    useImageUpload({
+      config: PROJECT_LOGO_CONFIG,
+      onSuccess: (base64) => form.setValue('logo', base64),
+    });
+
+  const logo = form.watch('logo');
+  const selectedUsers = form.watch('users');
+  const availableUsers = (usersOutProject?.users ?? []).filter(
+    (user) => !selectedUsers.some((selected) => selected.id === user.id)
+  );
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    handleFileSelect(file);
+    event.target.value = '';
+  };
+
+  const addUser = (user: User) => {
+    const current = form.getValues('users');
+    if (current.some((selected) => selected.id === user.id)) return;
+
+    form.setValue('users', [...current, toFormUser(user)]);
+    setTimeout(() => {
+      usersListRef.current?.scrollTo({ top: usersListRef.current.scrollHeight, behavior: 'smooth' });
+    }, 50);
+  };
+
+  const removeUser = (userId: number) => {
+    form.setValue(
+      'users',
+      form.getValues('users').filter((user) => user.id !== userId)
+    );
+  };
+
+  /** Proprietário e administrador ficam fixos no projeto; o próprio usuário não se remove. */
+  const canRemove = (userId: number, profile: UserProfile): boolean => {
+    if (readOnly) return false;
+    if (!currentUser) return false;
+    if (currentUser.id === userId) return false;
+    if (currentUser.profile !== UserProfile.owner && currentUser.profile !== UserProfile.admin) return false;
+    if (profile === UserProfile.owner || profile === UserProfile.admin) return false;
+
+    return true;
+  };
+
+  const fixedUsers = selectedUsers.filter((user) => !canRemove(user.id, user.profile));
+  const removableUsers = selectedUsers.filter((user) => canRemove(user.id, user.profile));
+  const sortedUsers = [...fixedUsers, ...removableUsers];
+
+  const rawLogoSrc = logo ? (logo.startsWith('data:') ? logo : `${STORAGE_URL}/${logo}`) : null;
+  // Logo que não carrega cai no placeholder de upload, em vez da imagem quebrada.
+  const logoSrc = rawLogoSrc && failedLogoSrc !== rawLogoSrc ? rawLogoSrc : null;
+
+  return (
+    <Sheet open={open} onOpenChange={handleClose}>
+      <SheetContent
+        side={isMobile ? 'bottom' : 'right'}
+        className={cn(
+          isMobile
+            ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+            : 'h-screen max-w-120! w-120!',
+          'data-[state=open]:max-h-none data-[state=open]:h-dvh overflow-hidden'
+        )}
+      >
+        <SheetHeader className="border-b border-zinc-200">
+          <SheetTitle className="text-zinc-950 paragraph-medium-semibold">{title}</SheetTitle>
+        </SheetHeader>
+
+        <form onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0">
+          <div className="flex flex-col gap-6 px-5 pb-5 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 flex-1 min-h-0">
+            <div className="flex items-center gap-3">
+              <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                accept={ACCEPTED_IMAGE_FORMATS_STRING}
+                className="hidden"
+              />
+              {logoSrc ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  alt={translate('common.account.workspace.projects.sheet.projectName')}
+                  src={logoSrc}
+                  className={cn('size-12 rounded-full object-cover shrink-0', !readOnly && 'cursor-pointer')}
+                  onClick={readOnly ? undefined : () => fileInputRef.current?.click()}
+                  onError={() => setFailedLogoSrc(logoSrc)}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    'flex items-center justify-center size-12 shrink-0 rounded-full bg-zinc-50 border border-zinc-200 text-zinc-400 border-dashed',
+                    !readOnly && 'cursor-pointer hover:bg-zinc-100 transition-colors'
+                  )}
+                  onClick={readOnly ? undefined : () => fileInputRef.current?.click()}
+                >
+                  <IconUpload size={16} />
+                </div>
+              )}
+              {!readOnly && (
+                <Button
+                  variant="secondary"
+                  className="h-8!"
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <IconUpload size={16} />
+                  {translate('common.account.workspace.projects.sheet.changeLogo')}
+                </Button>
+              )}
+            </div>
+
+            <FormField
+              label={translate('common.account.workspace.projects.sheet.projectName')}
+              placeholder={translate('common.account.workspace.projects.sheet.namePlaceholder')}
+              error={!!form.formState.errors.name}
+              errorMessage={form.formState.errors.name?.message}
+              {...form.register('name')}
+              disabled={readOnly}
+            />
+
+            <Separator />
+
+            <span className="text-zinc-950 paragraph-medium-semibold">
+              {translate('common.account.workspace.projects.sheet.selectUsers')}
+            </span>
+
+            <div className="flex flex-col gap-3">
+              {membersLoadFailed && onRetryMembers && (
+                <SectionLoadError
+                  message={translate('common.account.workspace.loadFailed')}
+                  onRetry={onRetryMembers}
+                />
+              )}
+
+              {sortedUsers.length > 0 && (
+                <div
+                  ref={usersListRef}
+                  className="flex flex-col border border-zinc-200 rounded-lg overflow-hidden max-h-73 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300"
+                >
+                  {sortedUsers.map((user, index) => (
+                    <ConnectListRow
+                      key={user.id}
+                      photo={user.photo}
+                      name={user.name}
+                      badge={translateProfile(user.profile)}
+                      variant="selected"
+                      hideBorder={index === sortedUsers.length - 1}
+                      onAction={() => removeUser(user.id)}
+                      showAction={canRemove(user.id, user.profile)}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {!readOnly && (
+                <div className="flex justify-center">
+                  <Button
+                    variant="ghost"
+                    className="h-10! text-zinc-600"
+                    type="button"
+                    onClick={() => setShowUserSearch((previous) => !previous)}
+                  >
+                    {translate('common.account.workspace.projects.sheet.connectAnotherUser')}
+                    {showUserSearch ? <IconChevronUp size={20} /> : <IconChevronDown size={20} />}
+                  </Button>
+                </div>
+              )}
+
+              {showUserSearch && !readOnly && (
+                <>
+                  <FormField
+                    placeholder={translate('common.account.workspace.projects.sheet.searchUsers')}
+                    leftIcon={IconSearch}
+                    classnameContainer="h-10!"
+                    value={searchQuery}
+                    onChange={(event) => setSearchQuery(event.target.value)}
+                    onKeyDown={(event) => event.key === 'Enter' && event.preventDefault()}
+                  />
+                  {isLoadingUsers ? (
+                    <div className="flex flex-col border border-zinc-200 rounded-lg overflow-hidden">
+                      {Array.from({ length: 3 }).map((_, index) => (
+                        <div
+                          key={index}
+                          className={cn(
+                            'px-4 py-4 flex items-center justify-between w-full gap-4',
+                            index < 2 && 'border-b border-zinc-200'
+                          )}
+                        >
+                          <div className="size-8 rounded-full bg-zinc-200 animate-pulse shrink-0" />
+                          <div className="flex items-center gap-2 flex-1 min-w-0">
+                            <div className="h-4 w-24 bg-zinc-200 rounded animate-pulse" />
+                          </div>
+                          <div className="h-10 w-[100px] bg-zinc-100 rounded-lg animate-pulse shrink-0" />
+                        </div>
+                      ))}
+                    </div>
+                  ) : availableUsers.length === 0 ? (
+                    <div className="flex items-center justify-center py-8 text-zinc-400 paragraph-small-regular">
+                      {debouncedSearch
+                        ? translate('common.account.workspace.projects.sheet.noUsersFound')
+                        : translate('common.account.workspace.projects.sheet.allUsersAdded')}
+                    </div>
+                  ) : (
+                    <div className="flex flex-col border border-zinc-200 rounded-lg overflow-hidden max-h-65 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+                      {availableUsers.map((user, index) => (
+                        <ConnectListRow
+                          key={user.id}
+                          photo={user.photo}
+                          name={user.name}
+                          variant="default"
+                          hideBorder={index === availableUsers.length - 1}
+                          onAction={() => addUser(user)}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+
+          <SheetFooter className="flex-row items-center justify-between border-t border-zinc-200">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              {readOnly ? translate('common.actions.close') : translate('common.actions.cancel')}
+            </Button>
+            {!readOnly && (
+              <Button className="h-10!" type="submit" loading={isLoading}>
+                {submitLabel}
+              </Button>
+            )}
+          </SheetFooter>
+        </form>
+
+        {/* Modal de crop (trata internamente a variante "imagem muito pequena"). */}
+        {originalImage && (
+          <ImageCropModal
+            open={showCropModal}
+            onOpenChange={setShowCropModal}
+            imageSrc={originalImage}
+            aspectRatio={PROJECT_LOGO_CONFIG.aspectRatio}
+            onConfirm={handleCropConfirm}
+            minWidth={PROJECT_LOGO_CONFIG.width}
+            minHeight={PROJECT_LOGO_CONFIG.height}
+            fileName={fileName}
+            onSelectAnother={() => fileInputRef.current?.click()}
+          />
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function CreateProjectSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const translate = useTranslations();
+  const createProject = useCreateProject();
+  const { guardAction } = useCancelledSubscriptionGuard();
+
+  // Proprietários e administradores entram no projeto por padrão, como na tela de projetos.
+  const { data: adminUsers, refetch: refetchAdminUsers } = useAccountMembers({
+    profiles: [UserProfile.owner, UserProfile.admin],
+  });
+
+  const projectSchema = useMemo(
+    () => buildProjectFormSchema(translate('common.account.workspace.projects.form.nameRequired')),
+    [translate]
+  );
+
+  const form = useForm<ProjectFormData>({
+    resolver: zodResolver(projectSchema),
+    defaultValues: { name: '', logo: null, users: [] },
+  });
+
+  const handleClose = useCallback(() => {
+    form.reset({ name: '', logo: null, users: [] });
+    onClose();
+  }, [form, onClose]);
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    if (!guardAction()) return;
+
+    try {
+      await createProject.mutateAsync({
+        title: data.name,
+        photo: data.logo ?? undefined,
+        users: data.users.map((user) => user.id),
+      });
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.workspace.projects.sheet.created', { name: data.name })}
+          toastId={toastId}
+        />
+      ));
+      handleClose();
+    } catch (error) {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={
+            error instanceof Error
+              ? error.message
+              : translate('common.account.workspace.projects.sheet.createError')
+          }
+          toastId={toastId}
+        />
+      ));
+    }
+  });
+
+  useEffect(() => {
+    form.reset({ name: '', logo: null, users: (adminUsers?.users ?? []).map(toFormUser) });
+    refetchAdminUsers();
+    // Roda na montagem: o sheet é remontado a cada abertura pela `key` em ProjectSheet.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!adminUsers?.users) return;
+    form.setValue('users', adminUsers.users.map(toFormUser));
+  }, [adminUsers, form]);
+
+  return (
+    <ProjectSheetUI
+      open={open}
+      title={translate('common.account.workspace.projects.sheet.addProject')}
+      submitLabel={translate('common.account.workspace.projects.sheet.addProject')}
+      form={form}
+      handleClose={handleClose}
+      handleSubmit={handleSubmit}
+      isLoading={createProject.isPending}
+    />
+  );
+}
+
+function EditProjectSheet({
+  open,
+  project,
+  onClose,
+}: {
+  open: boolean;
+  project: Project;
+  onClose: () => void;
+}) {
+  const translate = useTranslations();
+  const { isOwnerOrAdmin: canManageUsers } = useManagementPermissions();
+  const projectId = project.id;
+
+  const { data, hasNextPage, isFetchingNextPage, isError, fetchNextPage, refetch } =
+    useListProjectUsers(projectId);
+  const projectUsers = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data]);
+
+  // A lista precisa mostrar todos os membros, não só a primeira página.
+  useEffect(() => {
+    if (hasNextPage && !isFetchingNextPage && !isError) fetchNextPage();
+  }, [hasNextPage, isFetchingNextPage, isError, fetchNextPage]);
+
+  const updateProject = useUpdateProject();
+  const addProjectUsers = useAddProjectUsers();
+  const removeProjectUsers = useRemoveProjectUsers();
+  const { guardAction } = useCancelledSubscriptionGuard();
+
+  const projectSchema = useMemo(
+    () => buildProjectFormSchema(translate('common.account.workspace.projects.form.nameRequired')),
+    [translate]
+  );
+
+  const form = useForm<ProjectFormData>({
+    resolver: zodResolver(projectSchema),
+    defaultValues: { name: project.title, logo: project.photo ?? null, users: [] },
+  });
+
+  const seededPagesRef = useRef(0);
+
+  useEffect(() => {
+    const pages = data?.pages ?? [];
+    if (pages.length <= seededPagesRef.current) return;
+
+    const arrived = pages.slice(seededPagesRef.current).flatMap((page) => page.data);
+    seededPagesRef.current = pages.length;
+
+    form.setValue('users', [
+      ...form.getValues('users'),
+      ...arrived.map((user) =>
+        toFormUser({
+          id: user.id_user,
+          name: user.name ?? '',
+          email: user.email ?? '',
+          profile: user.profile,
+          photo: user.photo ?? null,
+        })
+      ),
+    ]);
+  }, [data, form]);
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    if (!canManageUsers) return;
+    if (!guardAction()) return;
+
+    try {
+      await updateProject.mutateAsync({
+        projectId,
+        data: { title: data.name, photo: data.logo ?? undefined },
+      });
+    } catch (error) {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={
+            error instanceof Error
+              ? error.message
+              : translate('common.account.workspace.projects.sheet.updateError')
+          }
+          toastId={toastId}
+        />
+      ));
+      return;
+    }
+
+    const originalIds = new Set(projectUsers.map((user) => user.id_user));
+    const currentIds = new Set(data.users.map((user) => user.id));
+    const toAdd = data.users.filter((user) => !originalIds.has(user.id)).map((user) => user.id);
+    const toRemove = [...originalIds].filter((id) => !currentIds.has(id));
+
+    try {
+      await Promise.all([
+        toAdd.length ? addProjectUsers.mutateAsync({ projectId, userIds: toAdd }) : null,
+        toRemove.length ? removeProjectUsers.mutateAsync({ projectId, userIds: toRemove }) : null,
+      ]);
+    } catch (error) {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={
+            error instanceof Error
+              ? error.message
+              : translate('common.account.workspace.projects.sheet.updateError')
+          }
+          toastId={toastId}
+        />
+      ));
+      return;
+    }
+
+    toast.custom((toastId) => (
+      <Toast
+        variant="success"
+        message={translate('common.account.workspace.projects.sheet.changesSaved')}
+        toastId={toastId}
+      />
+    ));
+    onClose();
+  });
+
+  return (
+    <ProjectSheetUI
+      open={open}
+      title={form.watch('name') || project.title}
+      submitLabel={translate('common.account.workspace.projects.sheet.saveChanges')}
+      form={form}
+      projectId={projectId}
+      handleClose={onClose}
+      handleSubmit={handleSubmit}
+      isLoading={updateProject.isPending || addProjectUsers.isPending || removeProjectUsers.isPending}
+      readOnly={!canManageUsers}
+      membersLoadFailed={isError}
+      onRetryMembers={refetch}
+    />
+  );
+}
+
+/**
+ * Sheet de criação e de detalhes do projeto, aberto por cima do modal Minha conta.
+ * Mantém o último estado enquanto fecha para não perder o conteúdo durante a animação.
+ */
+export function ProjectSheet() {
+  const sheet = useProjectFlows((state) => state.sheet);
+  const closeProjectSheet = useProjectFlows((state) => state.closeProjectSheet);
+  const [lastSheet, setLastSheet] = useState<ProjectSheetState>(sheet);
+
+  useEffect(() => {
+    if (sheet) setLastSheet(sheet);
+  }, [sheet]);
+
+  if (!lastSheet) return null;
+
+  const open = !!sheet;
+
+  if (lastSheet.mode === 'details') {
+    return (
+      <EditProjectSheet
+        key={`details-${lastSheet.project.id}`}
+        open={open}
+        project={lastSheet.project}
+        onClose={closeProjectSheet}
+      />
+    );
+  }
+
+  return <CreateProjectSheet key="create" open={open} onClose={closeProjectSheet} />;
+}

package/src/components/account/sections/projects/ProjectsDisabledModal.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Separator } from '../../../ui/data-display/Separator';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../../../ui/overlay/Dialog';
+import { useManagementPermissions } from '../../../../modules/auth/hooks/useManagementPermissions';
+import { useProjectFlows } from '../../../../store/useProjectFlows';
+import useSubscriptionActions from '../../hooks/useSubscriptionActions';
+
+/** Aviso de plano sem Gestão de Projetos, com o caminho para o upgrade. */
+export function ProjectsDisabledModal() {
+  const translate = useTranslations();
+  const { isOwnerOrAdmin } = useManagementPermissions();
+  const isOpen = useProjectFlows((state) => state.isProjectsDisabledOpen);
+  const closeProjectsDisabled = useProjectFlows((state) => state.closeProjectsDisabled);
+  const subscriptionActions = useSubscriptionActions();
+
+  const handleUpgrade = () => {
+    closeProjectsDisabled();
+    subscriptionActions.choosePlan();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(nextOpen) => !nextOpen && closeProjectsDisabled()}>
+      <DialogContent
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        className="flex flex-col p-0 gap-0 md:w-[410px]! lg:w-[410px]! max-w-[410px]! max-[410px]:w-[calc(100%-32px)] duration-0!"
+      >
+        <DialogHeader className="gap-3 text-left p-5">
+          <div className="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-lg">
+            <IconAlertTriangle size={20} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.account.workspace.projects.disabledModal.title')}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
+              <div className="flex flex-col gap-3">
+                <p>{translate('common.account.workspace.projects.disabledModal.description1')}</p>
+                <p>{translate('common.account.workspace.projects.disabledModal.description2')}</p>
+              </div>
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+
+        <Separator />
+
+        <div className="flex items-center gap-2 p-5">
+          {isOwnerOrAdmin && (
+            <Button className="h-10! transition-colors" onClick={handleUpgrade}>
+              {translate('common.account.workspace.projects.disabledModal.upgrade')}
+            </Button>
+          )}
+          <Button variant="secondary" className="h-10! transition-colors" onClick={closeProjectsDisabled}>
+            {translate('common.actions.cancel')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}