@greatapps/common 1.1.698 → 1.1.700

package/src/components/account/ConfirmGlobalPreferencesModal.tsx

@@ -1,68 +1,68 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { Button } from '../ui/buttons/Button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from '../ui/overlay/Dialog';
-import { Separator } from '../ui/data-display/Separator';
-
-interface ConfirmGlobalPreferencesModalProps {
-  open: boolean;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export default function ConfirmGlobalPreferencesModal({
-  open,
-  onConfirm,
-  onCancel,
-}: ConfirmGlobalPreferencesModalProps) {
-  const translate = useTranslations();
-  return (
-    <Dialog open={open} onOpenChange={onCancel}>
-      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
-        <DialogHeader className="sr-only">
-          <DialogTitle>{translate('common.account.globalPreferences.title')}</DialogTitle>
-          <DialogDescription>
-            {translate('common.account.globalPreferences.srDescription')}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-3 p-5">
-          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
-            <IconAlertTriangle size={24} className="text-gray-950" />
-          </div>
-          <div className="flex flex-col gap-2">
-            <span className="paragraph-medium-semibold text-gray-950">
-              {translate('common.account.globalPreferences.title')}
-            </span>
-            <span className="paragraph-small-regular text-gray-600">
-              {translate.rich('common.account.globalPreferences.warning', {
-                b: (chunks) => (
-                  <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
-                ),
-              })}
-            </span>
-          </div>
-        </div>
-
-        <Separator className="w-full" />
-
-        <div className="flex items-center gap-2 p-5">
-          <Button onClick={onConfirm} className="h-10!">
-            {translate('common.actions.confirm')}
-          </Button>
-          <Button variant="secondary" onClick={onCancel} className="h-10!">
-            {translate('common.actions.cancel')}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../ui/overlay/Dialog';
+import { Separator } from '../ui/data-display/Separator';
+
+interface ConfirmGlobalPreferencesModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmGlobalPreferencesModal({
+  open,
+  onConfirm,
+  onCancel,
+}: ConfirmGlobalPreferencesModalProps) {
+  const translate = useTranslations();
+  return (
+    <Dialog open={open} onOpenChange={onCancel}>
+      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
+        <DialogHeader className="sr-only">
+          <DialogTitle>{translate('common.account.globalPreferences.title')}</DialogTitle>
+          <DialogDescription>
+            {translate('common.account.globalPreferences.srDescription')}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 p-5">
+          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
+            <IconAlertTriangle size={24} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-medium-semibold text-gray-950">
+              {translate('common.account.globalPreferences.title')}
+            </span>
+            <span className="paragraph-small-regular text-gray-600">
+              {translate.rich('common.account.globalPreferences.warning', {
+                b: (chunks) => (
+                  <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
+                ),
+              })}
+            </span>
+          </div>
+        </div>
+
+        <Separator className="w-full" />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button onClick={onConfirm} className="h-10!">
+            {translate('common.actions.confirm')}
+          </Button>
+          <Button variant="secondary" onClick={onCancel} className="h-10!">
+            {translate('common.actions.cancel')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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>
+  );
+}