@greatapps/common 1.1.230 → 1.1.232

package/src/components/account/ConfirmGlobalPreferencesModal.tsx

@@ -1,66 +1,66 @@
-'use client';
-
-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) {
-  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>Alterar preferências globais</DialogTitle>
-          <DialogDescription>
-            Confirmação de alteração de preferências globais da conta
-          </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">
-              Alterar preferências globais
-            </span>
-            <span className="paragraph-small-regular text-gray-600">
-              Você está alterando configurações que impactam{' '}
-              <span className="paragraph-small-semibold text-gray-950">
-                todos os usuários da conta
-              </span>
-              . Deseja confirmar?
-            </span>
-          </div>
-        </div>
-
-        <Separator className="w-full" />
-
-        <div className="flex items-center gap-2 p-5">
-          <Button onClick={onConfirm} className="h-10!">
-            Confirmar
-          </Button>
-          <Button variant="secondary" onClick={onCancel} className="h-10!">
-            Cancelar
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+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) {
+  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>Alterar preferências globais</DialogTitle>
+          <DialogDescription>
+            Confirmação de alteração de preferências globais da conta
+          </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">
+              Alterar preferências globais
+            </span>
+            <span className="paragraph-small-regular text-gray-600">
+              Você está alterando configurações que impactam{' '}
+              <span className="paragraph-small-semibold text-gray-950">
+                todos os usuários da conta
+              </span>
+              . Deseja confirmar?
+            </span>
+          </div>
+        </div>
+
+        <Separator className="w-full" />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button onClick={onConfirm} className="h-10!">
+            Confirmar
+          </Button>
+          <Button variant="secondary" onClick={onCancel} className="h-10!">
+            Cancelar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/DeleteAccountModal.tsx

@@ -1,130 +1,130 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-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';
-
-const REASON_OPTIONS = [
-  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
-  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
-  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
-  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
-  { value: 'temporario', label: 'O cancelamento é temporário' },
-  { value: 'outro', label: 'Outro motivo' },
-];
-
-export default function DeleteAccountModal() {
-  const { activeModal, pagesCount, openConfigurations, openConfirmDelete, close } = 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('');
-  }, []);
-
-  const handleClose = () => {
-    resetForm();
-    openConfigurations(AccountSectionType.SECURITY);
-  };
-
-  const handleDelete = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isFormValid) {
-      toast.custom((t) => (
-        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
-      ));
-      return;
-    }
-    resetForm();
-    openConfirmDelete(pagesCount);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="flex flex-col p-0 gap-0 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>Excluir conta</DialogTitle>
-              <DialogDescription className="paragraph-small-regular">
-                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
-                confirmar, sua conta e todos os seus dados serão excluídos.
-              </DialogDescription>
-            </DialogHeader>
-
-            <SelectField
-              label="Motivo do cancelamento"
-              required
-              placeholder="Selecione"
-              options={REASON_OPTIONS}
-              value={reason}
-              onChange={(value) => setReason(value as string)}
-              className="h-10!"
-            />
-
-            <div>
-              <TextAreaField
-                label="Descreva o que levou a tomar essa decisão"
-                required
-                placeholder="Explique sua decisão..."
-                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">
-                {description.length}/400 caracteres
-              </span>
-            </div>
-
-            <FormField
-              className="text-gray-600"
-              label="Senha"
-              type="password"
-              placeholder="Informe sua senha"
-              leftIcon={IconLock}
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              classnameContainer="h-10!"
-              showPassword={showPassword}
-              onTogglePassword={togglePassword}
-            />
-          </div>
-
-          <div className="flex flex-row items-center 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 flex-1 bg-gray-950 text-white hover:bg-gray-800"
-              type="submit"
-            >
-              Excluir conta
-            </Button>
-            <Button variant="secondary" className="h-10 flex-1" type="button" onClick={handleClose}>
-              Fechar
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+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';
+
+const REASON_OPTIONS = [
+  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
+  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
+  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
+  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
+  { value: 'temporario', label: 'O cancelamento é temporário' },
+  { value: 'outro', label: 'Outro motivo' },
+];
+
+export default function DeleteAccountModal() {
+  const { activeModal, pagesCount, openConfigurations, openConfirmDelete, close } = 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('');
+  }, []);
+
+  const handleClose = () => {
+    resetForm();
+    openConfigurations(AccountSectionType.SECURITY);
+  };
+
+  const handleDelete = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isFormValid) {
+      toast.custom((t) => (
+        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
+      ));
+      return;
+    }
+    resetForm();
+    openConfirmDelete(pagesCount);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="flex flex-col p-0 gap-0 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>Excluir conta</DialogTitle>
+              <DialogDescription className="paragraph-small-regular">
+                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
+                confirmar, sua conta e todos os seus dados serão excluídos.
+              </DialogDescription>
+            </DialogHeader>
+
+            <SelectField
+              label="Motivo do cancelamento"
+              required
+              placeholder="Selecione"
+              options={REASON_OPTIONS}
+              value={reason}
+              onChange={(value) => setReason(value as string)}
+              className="h-10!"
+            />
+
+            <div>
+              <TextAreaField
+                label="Descreva o que levou a tomar essa decisão"
+                required
+                placeholder="Explique sua decisão..."
+                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">
+                {description.length}/400 caracteres
+              </span>
+            </div>
+
+            <FormField
+              className="text-gray-600"
+              label="Senha"
+              type="password"
+              placeholder="Informe sua senha"
+              leftIcon={IconLock}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              classnameContainer="h-10!"
+              showPassword={showPassword}
+              onTogglePassword={togglePassword}
+            />
+          </div>
+
+          <div className="flex flex-row items-center 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 flex-1 bg-gray-950 text-white hover:bg-gray-800"
+              type="submit"
+            >
+              Excluir conta
+            </Button>
+            <Button variant="secondary" className="h-10 flex-1" type="button" onClick={handleClose}>
+              Fechar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -1,86 +1,86 @@
-'use client';
-
-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 useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
-
-interface DisableTwoFactorAuthModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSuccess?: () => void;
-}
-
-export default function DisableTwoFactorAuthModal({
-  open,
-  onClose,
-  onSuccess,
-}: DisableTwoFactorAuthModalProps) {
-  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! 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">
-                Desabilitar autenticação 2FA
-              </DialogTitle>
-              <DialogDescription className="paragraph-small-regular text-gray-600">
-                Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a
-                desativação.
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="flex flex-col gap-2">
-              <span className="paragraph-small-medium text-gray-700">Código do autenticador</span>
-              <InputOTP maxLength={6} 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 ? 'Desabilitando...' : 'Desabilitar 2FA'}
-            </Button>
-            <Button
-              variant="secondary"
-              className="h-10! flex-1"
-              type="button"
-              onClick={handleClose}
-            >
-              Cancelar
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+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 useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
+
+interface DisableTwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function DisableTwoFactorAuthModal({
+  open,
+  onClose,
+  onSuccess,
+}: DisableTwoFactorAuthModalProps) {
+  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! 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">
+                Desabilitar autenticação 2FA
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-gray-600">
+                Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a
+                desativação.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-2">
+              <span className="paragraph-small-medium text-gray-700">Código do autenticador</span>
+              <InputOTP maxLength={6} 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 ? 'Desabilitando...' : 'Desabilitar 2FA'}
+            </Button>
+            <Button
+              variant="secondary"
+              className="h-10! flex-1"
+              type="button"
+              onClick={handleClose}
+            >
+              Cancelar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}