@greatapps/common 1.1.695 → 1.1.697

package/src/components/account/DeleteAccountModal.tsx

@@ -1,160 +1,160 @@
-'use client';
-
-import { useState, useCallback, useEffect } from 'react';
-import { useTranslations } from 'next-intl';
-import { IconLock, IconAlertTriangle } from '@tabler/icons-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { FormField } from '../ui/form/FormField';
-import { SelectField } from '../ui/form/SelectField';
-import { TextAreaField } from '../ui/form/TextAreaField';
-import { Toast } from '../ui/feedback/Toast';
-import usePasswordVisibility from '../../hooks/usePasswordVisibility';
-import { useAccountModals } from '../../store/useAccountModals';
-import { AccountSectionType } from '../../enums/AccountSectionType';
-
-export default function DeleteAccountModal() {
-  const translate = useTranslations();
-  const reasonOptions = [
-    { value: 'sem-funcao', label: translate('common.account.deleteAccount.reasons.noFeature') },
-    { value: 'problemas', label: translate('common.account.deleteAccount.reasons.technical') },
-    { value: 'suporte', label: translate('common.account.deleteAccount.reasons.support') },
-    { value: 'demora', label: translate('common.account.deleteAccount.reasons.updates') },
-    { value: 'temporario', label: translate('common.account.deleteAccount.reasons.temporary') },
-    { value: 'outro', label: translate('common.account.deleteAccount.reasons.other') },
-  ];
-  const {
-    activeModal,
-    deleteAccountError,
-    openConfigurations,
-    openConfirmDelete,
-    clearDeleteAccountError,
-  } = useAccountModals();
-  const open = activeModal === 'deleteAccount';
-
-  const [reason, setReason] = useState('');
-  const [description, setDescription] = useState('');
-  const [password, setPassword] = useState('');
-  const { showPassword, togglePassword } = usePasswordVisibility();
-
-  const isFormValid = Boolean(reason && description && password);
-
-  const resetForm = useCallback(() => {
-    setReason('');
-    setDescription('');
-    setPassword('');
-  }, []);
-
-  // Quando o modal deixa de estar aberto, limpa o erro residual do store
-  // pra não aparecer numa próxima abertura vinda de fluxo limpo.
-  useEffect(() => {
-    if (!open) {
-      clearDeleteAccountError();
-    }
-  }, [open, clearDeleteAccountError]);
-
-  const handleClose = () => {
-    resetForm();
-    openConfigurations(AccountSectionType.SECURITY);
-  };
-
-  const handleDelete = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isFormValid) {
-      toast.custom((toastId) => (
-        <Toast
-          variant="error"
-          message={translate('common.account.deleteAccount.requiredFields')}
-          toastId={toastId}
-        />
-      ));
-      return;
-    }
-    openConfirmDelete({ password });
-    // Campos locais podem ser limpos — o payload já está no store.
-    resetForm();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full 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:max-w-lg lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto">
-        <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
-          <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
-            <DialogHeader className="p-0">
-              <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
-                <IconAlertTriangle size={20} className="text-red-500" />
-              </div>
-              <DialogTitle>{translate('common.account.deleteAccount.title')}</DialogTitle>
-              <DialogDescription className="paragraph-small-regular">
-                {translate.rich('common.account.deleteAccount.description', {
-                  b: (chunks) => (
-                    <span className="font-semibold text-gray-950">{chunks}</span>
-                  ),
-                })}
-              </DialogDescription>
-            </DialogHeader>
-
-            <SelectField
-              label={translate('common.account.deleteAccount.reasonLabel')}
-              required
-              placeholder={translate('common.account.deleteAccount.reasonPlaceholder')}
-              options={reasonOptions}
-              value={reason}
-              onChange={(value) => setReason(value as string)}
-              className="h-10!"
-            />
-
-            <div>
-              <TextAreaField
-                label={translate('common.account.deleteAccount.descriptionLabel')}
-                required
-                placeholder={translate('common.account.deleteAccount.descriptionPlaceholder')}
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                rows={4}
-                maxLength={400}
-              />
-              <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
-                {translate('common.account.deleteAccount.charactersCount', {
-                  count: String(description.length),
-                })}
-              </span>
-            </div>
-
-            <FormField
-              className="text-gray-600"
-              label={translate('common.account.deleteAccount.passwordLabel')}
-              type="password"
-              placeholder={translate('common.account.deleteAccount.passwordPlaceholder')}
-              leftIcon={IconLock}
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value);
-                if (deleteAccountError) clearDeleteAccountError();
-              }}
-              classnameContainer="h-10!"
-              showPassword={showPassword}
-              onTogglePassword={togglePassword}
-              error={!!deleteAccountError}
-              errorMessage={deleteAccountError ?? undefined}
-            />
-          </div>
-
-          <div className="flex flex-row items-center justify-start gap-2 p-4 lg:p-6 border-t border-gray-200 bg-white mt-auto lg:mt-0">
-            <Button
-              variant="default"
-              className="h-10"
-              type="submit"
-            >
-              {translate('common.account.deleteAccount.submit')}
-            </Button>
-            <Button variant="secondary" className="h-10" type="button" onClick={handleClose}>
-              {translate('common.actions.close')}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { IconLock, IconAlertTriangle } from '@tabler/icons-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { FormField } from '../ui/form/FormField';
+import { SelectField } from '../ui/form/SelectField';
+import { TextAreaField } from '../ui/form/TextAreaField';
+import { Toast } from '../ui/feedback/Toast';
+import usePasswordVisibility from '../../hooks/usePasswordVisibility';
+import { useAccountModals } from '../../store/useAccountModals';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+
+export default function DeleteAccountModal() {
+  const translate = useTranslations();
+  const reasonOptions = [
+    { value: 'sem-funcao', label: translate('common.account.deleteAccount.reasons.noFeature') },
+    { value: 'problemas', label: translate('common.account.deleteAccount.reasons.technical') },
+    { value: 'suporte', label: translate('common.account.deleteAccount.reasons.support') },
+    { value: 'demora', label: translate('common.account.deleteAccount.reasons.updates') },
+    { value: 'temporario', label: translate('common.account.deleteAccount.reasons.temporary') },
+    { value: 'outro', label: translate('common.account.deleteAccount.reasons.other') },
+  ];
+  const {
+    activeModal,
+    deleteAccountError,
+    openConfigurations,
+    openConfirmDelete,
+    clearDeleteAccountError,
+  } = useAccountModals();
+  const open = activeModal === 'deleteAccount';
+
+  const [reason, setReason] = useState('');
+  const [description, setDescription] = useState('');
+  const [password, setPassword] = useState('');
+  const { showPassword, togglePassword } = usePasswordVisibility();
+
+  const isFormValid = Boolean(reason && description && password);
+
+  const resetForm = useCallback(() => {
+    setReason('');
+    setDescription('');
+    setPassword('');
+  }, []);
+
+  // Quando o modal deixa de estar aberto, limpa o erro residual do store
+  // pra não aparecer numa próxima abertura vinda de fluxo limpo.
+  useEffect(() => {
+    if (!open) {
+      clearDeleteAccountError();
+    }
+  }, [open, clearDeleteAccountError]);
+
+  const handleClose = () => {
+    resetForm();
+    openConfigurations(AccountSectionType.SECURITY);
+  };
+
+  const handleDelete = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isFormValid) {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.deleteAccount.requiredFields')}
+          toastId={toastId}
+        />
+      ));
+      return;
+    }
+    openConfirmDelete({ password });
+    // Campos locais podem ser limpos — o payload já está no store.
+    resetForm();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full 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:max-w-lg lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto">
+        <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
+          <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
+            <DialogHeader className="p-0">
+              <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
+                <IconAlertTriangle size={20} className="text-red-500" />
+              </div>
+              <DialogTitle>{translate('common.account.deleteAccount.title')}</DialogTitle>
+              <DialogDescription className="paragraph-small-regular">
+                {translate.rich('common.account.deleteAccount.description', {
+                  b: (chunks) => (
+                    <span className="font-semibold text-gray-950">{chunks}</span>
+                  ),
+                })}
+              </DialogDescription>
+            </DialogHeader>
+
+            <SelectField
+              label={translate('common.account.deleteAccount.reasonLabel')}
+              required
+              placeholder={translate('common.account.deleteAccount.reasonPlaceholder')}
+              options={reasonOptions}
+              value={reason}
+              onChange={(value) => setReason(value as string)}
+              className="h-10!"
+            />
+
+            <div>
+              <TextAreaField
+                label={translate('common.account.deleteAccount.descriptionLabel')}
+                required
+                placeholder={translate('common.account.deleteAccount.descriptionPlaceholder')}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={4}
+                maxLength={400}
+              />
+              <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
+                {translate('common.account.deleteAccount.charactersCount', {
+                  count: String(description.length),
+                })}
+              </span>
+            </div>
+
+            <FormField
+              className="text-gray-600"
+              label={translate('common.account.deleteAccount.passwordLabel')}
+              type="password"
+              placeholder={translate('common.account.deleteAccount.passwordPlaceholder')}
+              leftIcon={IconLock}
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                if (deleteAccountError) clearDeleteAccountError();
+              }}
+              classnameContainer="h-10!"
+              showPassword={showPassword}
+              onTogglePassword={togglePassword}
+              error={!!deleteAccountError}
+              errorMessage={deleteAccountError ?? undefined}
+            />
+          </div>
+
+          <div className="flex flex-row items-center justify-start gap-2 p-4 lg:p-6 border-t border-gray-200 bg-white mt-auto lg:mt-0">
+            <Button
+              variant="default"
+              className="h-10"
+              type="submit"
+            >
+              {translate('common.account.deleteAccount.submit')}
+            </Button>
+            <Button variant="secondary" className="h-10" type="button" onClick={handleClose}>
+              {translate('common.actions.close')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -1,92 +1,92 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { IconShieldCheck } from '@tabler/icons-react';
-import { Button } from '../ui/buttons/Button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '../ui/overlay/Dialog';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
-import { REGEXP_ONLY_DIGITS } from 'input-otp';
-import useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
-
-interface DisableTwoFactorAuthModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSuccess?: () => void;
-}
-
-export default function DisableTwoFactorAuthModal({
-  open,
-  onClose,
-  onSuccess,
-}: DisableTwoFactorAuthModalProps) {
-  const translate = useTranslations();
-  const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =
-    useDisableTwoFactorAuthForm({ onClose, onSuccess });
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent overlayClassName="z-[1010]" className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]">
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSubmit();
-          }}
-          className="flex flex-col flex-1 lg:flex-none"
-        >
-          <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
-            <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
-              <IconShieldCheck size={20} className="text-gray-600" />
-            </div>
-            <DialogHeader className="p-0 gap-2">
-              <DialogTitle className="paragraph-medium-semibold text-gray-950">
-                {translate('common.account.twoFactor.disableTitle')}
-              </DialogTitle>
-              <DialogDescription className="paragraph-small-regular text-gray-600">
-                {translate('common.account.twoFactor.disableDescription')}
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="flex flex-col gap-2">
-              <span className="paragraph-small-medium text-gray-700">
-                {translate('common.account.twoFactor.authenticatorCode')}
-              </span>
-              <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
-                <InputOTPGroup className="gap-2">
-                  {Array.from({ length: 6 }).map((_, i) => (
-                    <InputOTPSlot
-                      key={i}
-                      index={i}
-                      className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
-                    />
-                  ))}
-                </InputOTPGroup>
-              </InputOTP>
-            </div>
-          </div>
-
-          <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
-            <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
-              {isLoading
-                ? translate('common.account.twoFactor.disabling')
-                : translate('common.account.twoFactor.disable')}
-            </Button>
-            <Button
-              variant="secondary"
-              className="h-10! flex-1"
-              type="button"
-              onClick={handleClose}
-            >
-              {translate('common.actions.cancel')}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconShieldCheck } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/overlay/Dialog';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
+import { REGEXP_ONLY_DIGITS } from 'input-otp';
+import useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
+
+interface DisableTwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function DisableTwoFactorAuthModal({
+  open,
+  onClose,
+  onSuccess,
+}: DisableTwoFactorAuthModalProps) {
+  const translate = useTranslations();
+  const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =
+    useDisableTwoFactorAuthForm({ onClose, onSuccess });
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent overlayClassName="z-[1010]" className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSubmit();
+          }}
+          className="flex flex-col flex-1 lg:flex-none"
+        >
+          <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
+            <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
+              <IconShieldCheck size={20} className="text-gray-600" />
+            </div>
+            <DialogHeader className="p-0 gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-gray-950">
+                {translate('common.account.twoFactor.disableTitle')}
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-gray-600">
+                {translate('common.account.twoFactor.disableDescription')}
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-2">
+              <span className="paragraph-small-medium text-gray-700">
+                {translate('common.account.twoFactor.authenticatorCode')}
+              </span>
+              <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
+                <InputOTPGroup className="gap-2">
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <InputOTPSlot
+                      key={i}
+                      index={i}
+                      className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                    />
+                  ))}
+                </InputOTPGroup>
+              </InputOTP>
+            </div>
+          </div>
+
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
+            <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
+              {isLoading
+                ? translate('common.account.twoFactor.disabling')
+                : translate('common.account.twoFactor.disable')}
+            </Button>
+            <Button
+              variant="secondary"
+              className="h-10! flex-1"
+              type="button"
+              onClick={handleClose}
+            >
+              {translate('common.actions.cancel')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -1,51 +1,51 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function IsntPossibleDeleteAccountModal() {
-  const translate = useTranslations();
-  const { activeModal, close, config } = useAccountModals();
-  const { onGoToSubscription } = config;
-  const open = activeModal === 'isntPossibleDelete';
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent className="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">
-          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
-            <IconAlertTriangle size={20} className="text-red-500" />
-          </div>
-          <DialogHeader className="p-0 gap-2">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              {translate('common.account.cantDelete.title')}
-            </DialogTitle>
-            <DialogDescription className="paragraph-small-regular text-gray-600">
-              {translate.rich('common.account.cantDelete.description', {
-                b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
-              })}
-            </DialogDescription>
-          </DialogHeader>
-        </div>
-
-        <div className="h-px bg-gray-200 -mx-6" />
-
-        <div className="flex flex-row items-center gap-2">
-          <Button className="h-10 flex-1" onClick={close}>
-            {translate('common.account.cantDelete.confirm')}
-          </Button>
-          <Button
-            variant="secondary"
-            className="h-10 flex-1"
-            onClick={onGoToSubscription ?? close}
-          >
-            {translate('common.account.cantDelete.goToSubscription')}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function IsntPossibleDeleteAccountModal() {
+  const translate = useTranslations();
+  const { activeModal, close, config } = useAccountModals();
+  const { onGoToSubscription } = config;
+  const open = activeModal === 'isntPossibleDelete';
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent className="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">
+          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+            <IconAlertTriangle size={20} className="text-red-500" />
+          </div>
+          <DialogHeader className="p-0 gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              {translate('common.account.cantDelete.title')}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-gray-600">
+              {translate.rich('common.account.cantDelete.description', {
+                b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
+              })}
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="h-px bg-gray-200 -mx-6" />
+
+        <div className="flex flex-row items-center gap-2">
+          <Button className="h-10 flex-1" onClick={close}>
+            {translate('common.account.cantDelete.confirm')}
+          </Button>
+          <Button
+            variant="secondary"
+            className="h-10 flex-1"
+            onClick={onGoToSubscription ?? close}
+          >
+            {translate('common.account.cantDelete.goToSubscription')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}