@greatapps/common 1.1.699 → 1.1.700

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -1,179 +1,179 @@
-'use client';
-
-import { IconKey, IconLock, IconSettings2, IconX } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
-import { cn } from '../../infra/utils/clsx';
-import { AccountSectionType } from '../../enums/AccountSectionType';
-import { PreferencesSection } from './sections/PreferencesSection';
-import { ChangePasswordSection } from './sections/ChangePasswordSection';
-import { TokenSection } from './sections/TokenSection';
-import { SecuritySection } from './sections/SecuritySection';
-import useConfigurationsModal from './hooks/useConfigurationsModal';
-import useIsMobile from '../../hooks/useIsMobile';
-import { useAccountModals } from '../../store/useAccountModals';
-import { useAuth } from '../../providers/auth.provider';
-import { UserProfile } from '../../modules/users/schema';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-import { hasSubscriptionExpired } from '../../modules/subscriptions/utils/has-subscription-expired';
-import { useWhitelabel } from '../../providers/whitelabel.provider';
-
-export default function ConfigurationsMyAccountModal() {
-  const translate = useTranslations();
-  const {
-    activeModal,
-    openDeleteAccount,
-    openIsntPossibleDelete,
-    close,
-  } = useAccountModals();
-  const { whitelabel } = useWhitelabel();
-
-  const open = activeModal === 'configurations';
-
-  const { data: subscriptionData } = useActiveSubscription();
-  const subscription = subscriptionData?.data?.[0] ?? null;
-  const isPaidSubscriptionType =
-    !!subscription &&
-    subscription.type !== 'free' &&
-    subscription.type !== 'trial';
-  const isBlockingSubscription =
-    isPaidSubscriptionType &&
-    subscription.active === true &&
-    !subscription.date_cancellation &&
-    !hasSubscriptionExpired(subscription.date_due);
-
-  const { user } = useAuth();
-  const isOwner = user?.profile === UserProfile.owner;
-
-  const isMobile = useIsMobile();
-  const { activeSection, setActiveSection } = useConfigurationsModal({
-    isOpen: open,
-  });
-
-  const handleDeleteAccount = () => {
-    close();
-    if (isBlockingSubscription) {
-      openIsntPossibleDelete();
-    } else {
-      openDeleteAccount();
-    }
-  };
-
-  const tabTriggerClasses = cn(
-    'border-0! px-0 py-0',
-
-    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
-    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
-    'lg:data-[state=active]:bg-gray-50',
-
-    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
-    'border-b-2 border-transparent',
-    'data-[state=active]:bg-gray-50 rounded-lg',
-
-    'text-gray-500 data-[state=active]:text-gray-950',
-    'hover:text-gray-900 transition-colors'
-  );
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent
-        showCloseButton={!isMobile}
-        overlayClassName="bg-black/20 lg:bg-black/50"
-        className="
-          flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0
-          rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0
-          lg:flex-row lg:w-[892px] lg:max-w-[892px] lg:h-[626px] lg:rounded-lg lg:border
-          lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
-      >
-        <DialogHeader className="sr-only">
-          <DialogTitle>{translate('common.account.configurations.title')}</DialogTitle>
-        </DialogHeader>
-        <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
-          <span className="text-gray-950 paragraph-medium-semibold">
-            {translate('common.account.configurations.title')}
-          </span>
-          <button
-            type="button"
-            className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
-            onClick={close}
-          >
-            <IconX size={18} />
-          </button>
-        </div>
-        <Tabs
-          value={activeSection}
-          onValueChange={(value) => setActiveSection(value as AccountSectionType)}
-          orientation="vertical"
-          className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
-        >
-          <TabsList
-            className={cn(
-              'flex gap-0 bg-transparent border-b-0',
-
-              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
-              'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
-
-              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
-              'px-4 py-3',
-              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
-            )}
-          >
-            <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
-              {translate('common.account.configurations.title')}
-            </span>
-
-            <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
-              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
-                <IconSettings2 size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">{translate('common.preferences.title')}</span>
-              </TabsTrigger>
-
-              {isOwner && whitelabel?.id === 1 && (
-                <TabsTrigger value={AccountSectionType.TOKEN} className={tabTriggerClasses}>
-                  <IconKey size={20} className="shrink-0" />
-                  <span className="paragraph-small-medium">{translate('common.account.token.title')}</span>
-                </TabsTrigger>
-              )}
-
-              {isOwner && (
-                <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
-                  <IconLock size={20} className="shrink-0" />
-                  <span className="paragraph-small-medium">{translate('common.account.security.title')}</span>
-                </TabsTrigger>
-              )}
-            </div>
-          </TabsList>
-
-          <div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col">
-            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
-              <PreferencesSection onClose={close} />
-            </TabsContent>
-
-            {isOwner && (
-              <TabsContent value={AccountSectionType.TOKEN} className="h-full! relative overflow-hidden">
-                <TokenSection />
-              </TabsContent>
-            )}
-
-            {isOwner && (
-              <>
-                <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
-                  <SecuritySection
-                    setActiveSection={setActiveSection}
-                    onClose={close}
-                    onDeleteAccount={handleDeleteAccount}
-                  />
-                </TabsContent>
-
-                <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
-                  <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
-                </TabsContent>
-              </>
-            )}
-          </div>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconKey, IconLock, IconSettings2, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
+import { cn } from '../../infra/utils/clsx';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+import { PreferencesSection } from './sections/PreferencesSection';
+import { ChangePasswordSection } from './sections/ChangePasswordSection';
+import { TokenSection } from './sections/TokenSection';
+import { SecuritySection } from './sections/SecuritySection';
+import useConfigurationsModal from './hooks/useConfigurationsModal';
+import useIsMobile from '../../hooks/useIsMobile';
+import { useAccountModals } from '../../store/useAccountModals';
+import { useAuth } from '../../providers/auth.provider';
+import { UserProfile } from '../../modules/users/schema';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+import { hasSubscriptionExpired } from '../../modules/subscriptions/utils/has-subscription-expired';
+import { useWhitelabel } from '../../providers/whitelabel.provider';
+
+export default function ConfigurationsMyAccountModal() {
+  const translate = useTranslations();
+  const {
+    activeModal,
+    openDeleteAccount,
+    openIsntPossibleDelete,
+    close,
+  } = useAccountModals();
+  const { whitelabel } = useWhitelabel();
+
+  const open = activeModal === 'configurations';
+
+  const { data: subscriptionData } = useActiveSubscription();
+  const subscription = subscriptionData?.data?.[0] ?? null;
+  const isPaidSubscriptionType =
+    !!subscription &&
+    subscription.type !== 'free' &&
+    subscription.type !== 'trial';
+  const isBlockingSubscription =
+    isPaidSubscriptionType &&
+    subscription.active === true &&
+    !subscription.date_cancellation &&
+    !hasSubscriptionExpired(subscription.date_due);
+
+  const { user } = useAuth();
+  const isOwner = user?.profile === UserProfile.owner;
+
+  const isMobile = useIsMobile();
+  const { activeSection, setActiveSection } = useConfigurationsModal({
+    isOpen: open,
+  });
+
+  const handleDeleteAccount = () => {
+    close();
+    if (isBlockingSubscription) {
+      openIsntPossibleDelete();
+    } else {
+      openDeleteAccount();
+    }
+  };
+
+  const tabTriggerClasses = cn(
+    'border-0! px-0 py-0',
+
+    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
+    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
+    'lg:data-[state=active]:bg-gray-50',
+
+    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
+    'border-b-2 border-transparent',
+    'data-[state=active]:bg-gray-50 rounded-lg',
+
+    'text-gray-500 data-[state=active]:text-gray-950',
+    'hover:text-gray-900 transition-colors'
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent
+        showCloseButton={!isMobile}
+        overlayClassName="bg-black/20 lg:bg-black/50"
+        className="
+          flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0
+          rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0
+          lg:flex-row lg:w-[892px] lg:max-w-[892px] lg:h-[626px] lg:rounded-lg lg:border
+          lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{translate('common.account.configurations.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
+          <span className="text-gray-950 paragraph-medium-semibold">
+            {translate('common.account.configurations.title')}
+          </span>
+          <button
+            type="button"
+            className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
+            onClick={close}
+          >
+            <IconX size={18} />
+          </button>
+        </div>
+        <Tabs
+          value={activeSection}
+          onValueChange={(value) => setActiveSection(value as AccountSectionType)}
+          orientation="vertical"
+          className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
+        >
+          <TabsList
+            className={cn(
+              'flex gap-0 bg-transparent border-b-0',
+
+              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
+              'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
+
+              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
+              'px-4 py-3',
+              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
+            )}
+          >
+            <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
+              {translate('common.account.configurations.title')}
+            </span>
+
+            <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
+              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
+                <IconSettings2 size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">{translate('common.preferences.title')}</span>
+              </TabsTrigger>
+
+              {isOwner && whitelabel?.id === 1 && (
+                <TabsTrigger value={AccountSectionType.TOKEN} className={tabTriggerClasses}>
+                  <IconKey size={20} className="shrink-0" />
+                  <span className="paragraph-small-medium">{translate('common.account.token.title')}</span>
+                </TabsTrigger>
+              )}
+
+              {isOwner && (
+                <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
+                  <IconLock size={20} className="shrink-0" />
+                  <span className="paragraph-small-medium">{translate('common.account.security.title')}</span>
+                </TabsTrigger>
+              )}
+            </div>
+          </TabsList>
+
+          <div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col">
+            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
+              <PreferencesSection onClose={close} />
+            </TabsContent>
+
+            {isOwner && (
+              <TabsContent value={AccountSectionType.TOKEN} className="h-full! relative overflow-hidden">
+                <TokenSection />
+              </TabsContent>
+            )}
+
+            {isOwner && (
+              <>
+                <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
+                  <SecuritySection
+                    setActiveSection={setActiveSection}
+                    onClose={close}
+                    onDeleteAccount={handleDeleteAccount}
+                  />
+                </TabsContent>
+
+                <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
+                  <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
+                </TabsContent>
+              </>
+            )}
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/ConfirmDeleteAccountModal.tsx

@@ -1,110 +1,110 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { Toast } from '../ui/feedback/Toast';
-import { useAccountModals } from '../../store/useAccountModals';
-import { useCountPages } from '../../modules/pages/hooks/count-pages.hook';
-import {
-  useDeleteAccount,
-  useDeleteAccountUser,
-} from '../../modules/accounts/hooks/useAccountManagement';
-import { useAuth } from '../../providers/auth.provider';
-import { UserProfile } from '../../modules/users/schema';
-
-export default function ConfirmDeleteAccountModal() {
-  const translate = useTranslations();
-  const { activeModal, deleteAccountPayload, openDeleteAccount, close } = useAccountModals();
-  const open = activeModal === 'confirmDelete';
-
-  const { data: pagesCount = 0 } = useCountPages();
-
-  const { user, logout } = useAuth();
-  const isOwner = user?.profile === UserProfile.owner;
-
-  const deleteAccount = useDeleteAccount();
-  const deleteAccountUser = useDeleteAccountUser();
-  const isDeleting = deleteAccount.isPending || deleteAccountUser.isPending;
-
-  const handleConfirm = async () => {
-    try {
-      if (isOwner) {
-        if (!deleteAccountPayload) {
-          // Fluxo quebrado (usuário pulou o primeiro modal ou refresh) — manda
-          // de volta pro modal inicial pra re-coletar a senha.
-          openDeleteAccount(translate('common.account.confirmDelete.sessionExpired'));
-          return;
-        }
-        await deleteAccount.mutateAsync({ password: deleteAccountPayload.password });
-      } else {
-        await deleteAccountUser.mutateAsync(user!.id);
-      }
-      close();
-      toast.custom((toastId) => (
-        <Toast
-          variant="success"
-          message={translate('common.account.confirmDelete.success')}
-          toastId={toastId}
-        />
-      ));
-      await logout();
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : translate('common.account.confirmDelete.error');
-      if (isOwner) {
-        // Falha no delete do owner (ex.: senha inválida) — volta pro primeiro
-        // modal com a mensagem do backend pra o usuário corrigir e tentar de novo.
-        openDeleteAccount(message);
-        return;
-      }
-      toast.custom((toastId) => (
-        <Toast variant="error" message={message} toastId={toastId} />
-      ));
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={isDeleting ? undefined : close}>
-      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
-        <div className="flex flex-col gap-5 p-4 lg:p-5">
-          <DialogHeader className="p-0">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              {translate('common.account.confirmDelete.title')}
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
-            <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
-            <p className="paragraph-small-regular text-gray-600">
-              {translate.rich('common.account.confirmDelete.warning', {
-                count: String(pagesCount),
-                b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
-              })}
-            </p>
-          </div>
-        </div>
-
-        <div className="h-px bg-gray-200" />
-
-        <div className="flex items-center gap-2 p-4 lg:p-5">
-          <Button className="h-10 flex-1" onClick={close} disabled={isDeleting}>
-            {translate('common.account.confirmDelete.keepAccount')}
-          </Button>
-          <Button
-            variant="secondary"
-            className="h-10! flex-1"
-            onClick={handleConfirm}
-            disabled={isDeleting}
-          >
-            {isDeleting
-              ? translate('common.account.confirmDelete.deleting')
-              : translate('common.account.confirmDelete.deleteAnyway')}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { Toast } from '../ui/feedback/Toast';
+import { useAccountModals } from '../../store/useAccountModals';
+import { useCountPages } from '../../modules/pages/hooks/count-pages.hook';
+import {
+  useDeleteAccount,
+  useDeleteAccountUser,
+} from '../../modules/accounts/hooks/useAccountManagement';
+import { useAuth } from '../../providers/auth.provider';
+import { UserProfile } from '../../modules/users/schema';
+
+export default function ConfirmDeleteAccountModal() {
+  const translate = useTranslations();
+  const { activeModal, deleteAccountPayload, openDeleteAccount, close } = useAccountModals();
+  const open = activeModal === 'confirmDelete';
+
+  const { data: pagesCount = 0 } = useCountPages();
+
+  const { user, logout } = useAuth();
+  const isOwner = user?.profile === UserProfile.owner;
+
+  const deleteAccount = useDeleteAccount();
+  const deleteAccountUser = useDeleteAccountUser();
+  const isDeleting = deleteAccount.isPending || deleteAccountUser.isPending;
+
+  const handleConfirm = async () => {
+    try {
+      if (isOwner) {
+        if (!deleteAccountPayload) {
+          // Fluxo quebrado (usuário pulou o primeiro modal ou refresh) — manda
+          // de volta pro modal inicial pra re-coletar a senha.
+          openDeleteAccount(translate('common.account.confirmDelete.sessionExpired'));
+          return;
+        }
+        await deleteAccount.mutateAsync({ password: deleteAccountPayload.password });
+      } else {
+        await deleteAccountUser.mutateAsync(user!.id);
+      }
+      close();
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.confirmDelete.success')}
+          toastId={toastId}
+        />
+      ));
+      await logout();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : translate('common.account.confirmDelete.error');
+      if (isOwner) {
+        // Falha no delete do owner (ex.: senha inválida) — volta pro primeiro
+        // modal com a mensagem do backend pra o usuário corrigir e tentar de novo.
+        openDeleteAccount(message);
+        return;
+      }
+      toast.custom((toastId) => (
+        <Toast variant="error" message={message} toastId={toastId} />
+      ));
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={isDeleting ? undefined : close}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
+        <div className="flex flex-col gap-5 p-4 lg:p-5">
+          <DialogHeader className="p-0">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              {translate('common.account.confirmDelete.title')}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
+            <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
+            <p className="paragraph-small-regular text-gray-600">
+              {translate.rich('common.account.confirmDelete.warning', {
+                count: String(pagesCount),
+                b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
+              })}
+            </p>
+          </div>
+        </div>
+
+        <div className="h-px bg-gray-200" />
+
+        <div className="flex items-center gap-2 p-4 lg:p-5">
+          <Button className="h-10 flex-1" onClick={close} disabled={isDeleting}>
+            {translate('common.account.confirmDelete.keepAccount')}
+          </Button>
+          <Button
+            variant="secondary"
+            className="h-10! flex-1"
+            onClick={handleConfirm}
+            disabled={isDeleting}
+          >
+            {isDeleting
+              ? translate('common.account.confirmDelete.deleting')
+              : translate('common.account.confirmDelete.deleteAnyway')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}