@greatapps/common 1.1.234 → 1.1.236

package/src/components/account/hooks/useTwoFactorAuthForm.tsx

@@ -1,101 +1,101 @@
-'use client';
-
-import { useState, useCallback, useEffect } from 'react';
-import { useMutation } from '@tanstack/react-query';
-import { toast } from 'sonner';
-import { Toast } from '../../ui/feedback/Toast';
-import { copyToClipboard } from '../../../utils/browser/clipboard';
-import {
-  generateTwoFactorAction,
-  confirmTwoFactorAction,
-} from '../../../modules/accounts/actions/account-management.action';
-import { withAction } from '../../../utils/withAction';
-
-type Step = 'code' | 'recovery';
-
-interface UseTwoFactorAuthFormProps {
-  onSuccess?: () => void;
-  open?: boolean;
-}
-
-export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
-  const [code, setCode] = useState('');
-  const [step, setStep] = useState<Step>('code');
-
-  const generateMutation = useMutation({
-    mutationFn: withAction(generateTwoFactorAction),
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao gerar QR Code. Tente novamente." toastId={t} />
-      ));
-    },
-  });
-
-  const confirmMutation = useMutation({
-    mutationFn: withAction(confirmTwoFactorAction),
-    onSuccess: () => {
-      setStep('recovery');
-    },
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
-      ));
-    },
-  });
-
-  const { mutate: triggerGenerate } = generateMutation;
-
-  useEffect(() => {
-    if (open) {
-      triggerGenerate();
-    }
-  }, [open, triggerGenerate]);
-
-  const generateFailed = generateMutation.isError;
-
-  const isCodeComplete = code.length === 6;
-
-  const handleSubmit = () => {
-    if (!isCodeComplete) return;
-    confirmMutation.mutate(code);
-  };
-
-  const handleFinalize = () => {
-    onSuccess?.();
-    setTimeout(resetForm, 300);
-  };
-
-  const handleCopyCodes = useCallback(async () => {
-    const codes = generateMutation.data?.backupCodes ?? [];
-    const success = await copyToClipboard(codes.join('\n'));
-    if (success) {
-      toast.custom((t) => (
-        <Toast variant="success" message="Códigos copiados com sucesso" toastId={t} />
-      ));
-    }
-  }, [generateMutation.data]);
-
-  const resetForm = () => {
-    setCode('');
-    setStep('code');
-    generateMutation.reset();
-    confirmMutation.reset();
-  };
-
-  return {
-    code,
-    setCode,
-    isCodeComplete,
-    isGenerating: generateMutation.isPending,
-    isConfirming: confirmMutation.isPending,
-    generateFailed,
-    retryGenerate: triggerGenerate,
-    qrcode: generateMutation.data?.qrcode,
-    backupCodes: generateMutation.data?.backupCodes ?? [],
-    step,
-    handleSubmit,
-    handleFinalize,
-    handleCopyCodes,
-    resetForm,
-  };
-}
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { copyToClipboard } from '../../../utils/browser/clipboard';
+import {
+  generateTwoFactorAction,
+  confirmTwoFactorAction,
+} from '../../../modules/accounts/actions/account-management.action';
+import { withAction } from '../../../utils/withAction';
+
+type Step = 'code' | 'recovery';
+
+interface UseTwoFactorAuthFormProps {
+  onSuccess?: () => void;
+  open?: boolean;
+}
+
+export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
+  const [code, setCode] = useState('');
+  const [step, setStep] = useState<Step>('code');
+
+  const generateMutation = useMutation({
+    mutationFn: withAction(generateTwoFactorAction),
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao gerar QR Code. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const confirmMutation = useMutation({
+    mutationFn: withAction(confirmTwoFactorAction),
+    onSuccess: () => {
+      setStep('recovery');
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const { mutate: triggerGenerate } = generateMutation;
+
+  useEffect(() => {
+    if (open) {
+      triggerGenerate();
+    }
+  }, [open, triggerGenerate]);
+
+  const generateFailed = generateMutation.isError;
+
+  const isCodeComplete = code.length === 6;
+
+  const handleSubmit = () => {
+    if (!isCodeComplete) return;
+    confirmMutation.mutate(code);
+  };
+
+  const handleFinalize = () => {
+    onSuccess?.();
+    setTimeout(resetForm, 300);
+  };
+
+  const handleCopyCodes = useCallback(async () => {
+    const codes = generateMutation.data?.backupCodes ?? [];
+    const success = await copyToClipboard(codes.join('\n'));
+    if (success) {
+      toast.custom((t) => (
+        <Toast variant="success" message="Códigos copiados com sucesso" toastId={t} />
+      ));
+    }
+  }, [generateMutation.data]);
+
+  const resetForm = () => {
+    setCode('');
+    setStep('code');
+    generateMutation.reset();
+    confirmMutation.reset();
+  };
+
+  return {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating: generateMutation.isPending,
+    isConfirming: confirmMutation.isPending,
+    generateFailed,
+    retryGenerate: triggerGenerate,
+    qrcode: generateMutation.data?.qrcode,
+    backupCodes: generateMutation.data?.backupCodes ?? [],
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm,
+  };
+}

package/src/components/account/sections/ChangeEmailModal.tsx

@@ -1,225 +1,225 @@
-'use client';
-
-import { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';
-import { Button } from '../../ui/buttons/Button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
-import { Separator } from '../../ui/data-display/Separator';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';
-import { FormField } from '../../ui/form/FormField';
-import { formatTimer } from '../../../utils/format/masks';
-import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
-import { useAuth } from '../../../providers/auth.provider';
-import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
-import { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
-import useChangeEmailForm from '../hooks/useChangeEmailForm';
-import useOtpVerification from '../hooks/useOtpVerification';
-
-interface ChangeEmailModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
-  const { user } = useAuth();
-  const invalidateUser = useInvalidateUser();
-
-  const {
-    showVerification,
-    emailToVerify,
-    isSubmitting,
-    errors,
-    register,
-    handleContinue,
-    handleBack,
-    resetForm,
-  } = useChangeEmailForm();
-
-  const handleSuccess = () => {
-    invalidateUser();
-    resetForm();
-    onClose();
-  };
-
-  const {
-    code,
-    isLoading,
-    hasError,
-    timer,
-    canResend,
-    isValidLength,
-    handleCodeChange,
-    handleValidate,
-    handleResend,
-    reset: resetOtp,
-  } = useOtpVerification({
-    onSuccess: handleSuccess,
-    successMessage: 'E-mail alterado com sucesso',
-    validateFn: async (token) => {
-      const result = await confirmEmailChangeAction(token, emailToVerify);
-      return result.success;
-    },
-    resendFn: async () => {
-      const { requestEmailChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
-      const result = await requestEmailChangeAction(emailToVerify);
-      if (!result.success) {
-        throw new Error(result.error);
-      }
-    },
-  });
-
-  const handleClose = () => {
-    resetForm();
-    resetOtp();
-    onClose();
-  };
-
-  const handleBackFromVerification = () => {
-    resetOtp();
-    handleBack();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        overlayClassName="z-[1002]"
-        className="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-125! 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%]! z-[1003]!"
-      >
-        {showVerification ? (
-          <DialogHeader className="flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0">
-            <Button variant="ghost" className="size-8! p-0" onClick={handleBackFromVerification}>
-              <IconChevronLeft size={20} className="text-gray-950" />
-            </Button>
-            <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
-              Alterar e-mail
-            </DialogTitle>
-            <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
-              <IconX size={18} className="text-gray-500" />
-            </Button>
-          </DialogHeader>
-        ) : (
-          <>
-            <DialogHeader className="sr-only">
-              <DialogTitle>Alterar e-mail</DialogTitle>
-            </DialogHeader>
-            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-              <span className="paragraph-medium-semibold text-gray-950 text-center">
-                Alterar e-mail
-              </span>
-              <Button
-                variant="ghost"
-                className="absolute right-2 size-8! p-0"
-                onClick={handleClose}
-              >
-                <IconX size={18} className="text-gray-500" />
-              </Button>
-            </div>
-          </>
-        )}
-
-        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />
-
-        {showVerification ? (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              handleValidate();
-            }}
-            className="flex flex-col flex-1 lg:flex-none"
-          >
-            <div className="px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none">
-              <div className="flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200">
-                <IconMail size={20} className="text-gray-950" />
-              </div>
-
-              <div className="flex flex-col gap-1">
-                <h3 className="paragraph-medium-semibold text-gray-950">Código de validação</h3>
-                <p className="paragraph-small-regular text-gray-600">
-                  Enviamos um código de validação para o E-mail{' '}
-                  <span className="font-semibold text-gray-950 break-all">{user?.email}.</span>
-                </p>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>
-                  <InputOTPGroup className="flex flex-row gap-2">
-                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (
-                      <InputOTPSlot
-                        key={i}
-                        index={i}
-                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}
-                      />
-                    ))}
-                  </InputOTPGroup>
-                </InputOTP>
-                {hasError && (
-                  <p className="paragraph-small-regular text-red-500">Código incorreto</p>
-                )}
-              </div>
-
-              {canResend ? (
-                <button
-                  type="button"
-                  onClick={handleResend}
-                  className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
-                >
-                  Reenviar código
-                </button>
-              ) : (
-                <p className="paragraph-small-regular text-gray-500">
-                  Reenviar em{' '}
-                  <span className="paragraph-small-semibold text-gray-950">
-                    {formatTimer(timer)}
-                  </span>
-                </p>
-              )}
-            </div>
-
-            <Separator />
-
-            <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                Cancelar
-              </Button>
-              <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
-                {isLoading ? 'Validando...' : 'Alterar e-mail'}
-              </Button>
-            </div>
-          </form>
-        ) : (
-          <form onSubmit={handleContinue} className="flex flex-col flex-1 lg:flex-none">
-            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
-              <div className="flex flex-col gap-1">
-                <span className="paragraph-medium-semibold text-gray-950">
-                  Atualizar E-mail de contato
-                </span>
-                <span className="paragraph-small-regular text-gray-600">
-                  Informe o seu novo E-mail para manter seu contato atualizado.
-                </span>
-              </div>
-
-              <FormField
-                label="Novo e-mail"
-                placeholder="Digite seu novo e-mail"
-                type="email"
-                {...register('email')}
-                error={!!errors.email}
-                errorMessage={errors.email?.message}
-                leftIcon={IconMail}
-              />
-            </div>
-
-            <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                Cancelar
-              </Button>
-              <Button className="h-10!" type="submit" disabled={isSubmitting}>
-                {isSubmitting ? 'Enviando...' : 'Continuar'}
-              </Button>
-            </div>
-          </form>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';
+import { Button } from '../../ui/buttons/Button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
+import { Separator } from '../../ui/data-display/Separator';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';
+import { FormField } from '../../ui/form/FormField';
+import { formatTimer } from '../../../utils/format/masks';
+import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
+import { useAuth } from '../../../providers/auth.provider';
+import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
+import { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
+import useChangeEmailForm from '../hooks/useChangeEmailForm';
+import useOtpVerification from '../hooks/useOtpVerification';
+
+interface ChangeEmailModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
+  const { user } = useAuth();
+  const invalidateUser = useInvalidateUser();
+
+  const {
+    showVerification,
+    emailToVerify,
+    isSubmitting,
+    errors,
+    register,
+    handleContinue,
+    handleBack,
+    resetForm,
+  } = useChangeEmailForm();
+
+  const handleSuccess = () => {
+    invalidateUser();
+    resetForm();
+    onClose();
+  };
+
+  const {
+    code,
+    isLoading,
+    hasError,
+    timer,
+    canResend,
+    isValidLength,
+    handleCodeChange,
+    handleValidate,
+    handleResend,
+    reset: resetOtp,
+  } = useOtpVerification({
+    onSuccess: handleSuccess,
+    successMessage: 'E-mail alterado com sucesso',
+    validateFn: async (token) => {
+      const result = await confirmEmailChangeAction(token, emailToVerify);
+      return result.success;
+    },
+    resendFn: async () => {
+      const { requestEmailChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
+      const result = await requestEmailChangeAction(emailToVerify);
+      if (!result.success) {
+        throw new Error(result.error);
+      }
+    },
+  });
+
+  const handleClose = () => {
+    resetForm();
+    resetOtp();
+    onClose();
+  };
+
+  const handleBackFromVerification = () => {
+    resetOtp();
+    handleBack();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="z-[1002]"
+        className="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-125! 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%]! z-[1003]!"
+      >
+        {showVerification ? (
+          <DialogHeader className="flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0">
+            <Button variant="ghost" className="size-8! p-0" onClick={handleBackFromVerification}>
+              <IconChevronLeft size={20} className="text-gray-950" />
+            </Button>
+            <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
+              Alterar e-mail
+            </DialogTitle>
+            <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
+              <IconX size={18} className="text-gray-500" />
+            </Button>
+          </DialogHeader>
+        ) : (
+          <>
+            <DialogHeader className="sr-only">
+              <DialogTitle>Alterar e-mail</DialogTitle>
+            </DialogHeader>
+            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+              <span className="paragraph-medium-semibold text-gray-950 text-center">
+                Alterar e-mail
+              </span>
+              <Button
+                variant="ghost"
+                className="absolute right-2 size-8! p-0"
+                onClick={handleClose}
+              >
+                <IconX size={18} className="text-gray-500" />
+              </Button>
+            </div>
+          </>
+        )}
+
+        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />
+
+        {showVerification ? (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleValidate();
+            }}
+            className="flex flex-col flex-1 lg:flex-none"
+          >
+            <div className="px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none">
+              <div className="flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200">
+                <IconMail size={20} className="text-gray-950" />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h3 className="paragraph-medium-semibold text-gray-950">Código de validação</h3>
+                <p className="paragraph-small-regular text-gray-600">
+                  Enviamos um código de validação para o E-mail{' '}
+                  <span className="font-semibold text-gray-950 break-all">{user?.email}.</span>
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>
+                  <InputOTPGroup className="flex flex-row gap-2">
+                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (
+                      <InputOTPSlot
+                        key={i}
+                        index={i}
+                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}
+                      />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+                {hasError && (
+                  <p className="paragraph-small-regular text-red-500">Código incorreto</p>
+                )}
+              </div>
+
+              {canResend ? (
+                <button
+                  type="button"
+                  onClick={handleResend}
+                  className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
+                >
+                  Reenviar código
+                </button>
+              ) : (
+                <p className="paragraph-small-regular text-gray-500">
+                  Reenviar em{' '}
+                  <span className="paragraph-small-semibold text-gray-950">
+                    {formatTimer(timer)}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <Separator />
+
+            <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                Cancelar
+              </Button>
+              <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
+                {isLoading ? 'Validando...' : 'Alterar e-mail'}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <form onSubmit={handleContinue} className="flex flex-col flex-1 lg:flex-none">
+            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
+              <div className="flex flex-col gap-1">
+                <span className="paragraph-medium-semibold text-gray-950">
+                  Atualizar E-mail de contato
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  Informe o seu novo E-mail para manter seu contato atualizado.
+                </span>
+              </div>
+
+              <FormField
+                label="Novo e-mail"
+                placeholder="Digite seu novo e-mail"
+                type="email"
+                {...register('email')}
+                error={!!errors.email}
+                errorMessage={errors.email?.message}
+                leftIcon={IconMail}
+              />
+            </div>
+
+            <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                Cancelar
+              </Button>
+              <Button className="h-10!" type="submit" disabled={isSubmitting}>
+                {isSubmitting ? 'Enviando...' : 'Continuar'}
+              </Button>
+            </div>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}