@greatapps/common 1.1.24 → 1.1.25

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { changeEmailSchema, type ChangeEmailFormData } from '../../../utils/validators/account';
+import { requestEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
+
+export default function useChangeEmailForm() {
+  const [showVerification, setShowVerification] = useState(false);
+
+  const { register, handleSubmit, reset, watch, formState: { errors, isSubmitting } } = useForm<ChangeEmailFormData>({
+    resolver: zodResolver(changeEmailSchema),
+    mode: 'onChange',
+    defaultValues: { email: '' },
+  });
+
+  const handleContinue = handleSubmit(async (data) => {
+    const result = await requestEmailChangeAction(data.email);
+
+    if (!result.success) {
+      toast.custom((t) => (
+        <Toast
+          variant="error"
+          message={result.error ?? 'E-mail já existente ou ocorreu um erro. Tente novamente mais tarde.'}
+          toastId={t}
+        />
+      ));
+      return;
+    }
+
+    setShowVerification(true);
+  });
+
+  const handleBack = useCallback(() => {
+    setShowVerification(false);
+  }, []);
+
+  const resetForm = useCallback(() => {
+    reset();
+    setShowVerification(false);
+  }, [reset]);
+
+  return {
+    showVerification,
+    emailToVerify: watch('email'),
+    isSubmitting,
+    errors,
+    register,
+    handleContinue,
+    handleBack,
+    resetForm,
+  };
+}

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { changePasswordSchema, type ChangePasswordFormData } from '../../../utils/validators/account';
+import { changePasswordAction } from '../../../modules/accounts/actions/account-management.action';
+
+interface UseChangePasswordFormProps {
+  onSuccess?: () => void;
+}
+
+export default function useChangePasswordForm({ onSuccess }: UseChangePasswordFormProps = {}) {
+  const form = useForm<ChangePasswordFormData>({
+    resolver: zodResolver(changePasswordSchema),
+    mode: 'onChange',
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+    },
+  });
+
+  const mutation = useMutation({
+    mutationFn: changePasswordAction,
+    onSuccess: (result) => {
+      if (!result.success) {
+        toast.custom((t) => (
+          <Toast variant="error" message={result.error ?? 'Erro ao alterar senha'} toastId={t} />
+        ));
+        return;
+      }
+
+      toast.custom((t) => (
+        <Toast variant="success" message="Senha alterada com sucesso" toastId={t} />
+      ));
+
+      form.reset();
+      onSuccess?.();
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao alterar senha. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const onSubmit = (data: ChangePasswordFormData) => {
+    mutation.mutate(data);
+  };
+
+  return {
+    register: form.register,
+    handleSubmit: form.handleSubmit(onSubmit),
+    errors: form.formState.errors,
+    isLoading: mutation.isPending,
+  };
+}

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { changePhoneSchema, type ChangePhoneFormData } from '../../../utils/validators/account';
+import { formatPhone } from '../../../utils/format/masks';
+import { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
+
+export default function useChangePhoneForm() {
+  const [showVerification, setShowVerification] = useState(false);
+
+  const form = useForm<ChangePhoneFormData>({
+    resolver: zodResolver(changePhoneSchema),
+    mode: 'onChange',
+    defaultValues: { phone: '' },
+  });
+
+  const phoneValue = form.watch('phone');
+  const errors = form.formState.errors;
+  const isSubmitting = form.formState.isSubmitting;
+
+  const handlePhoneChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const formatted = formatPhone(e.target.value);
+      form.setValue('phone', formatted, { shouldValidate: true });
+    },
+    [form]
+  );
+
+  const handleContinue = form.handleSubmit(async (data) => {
+    const result = await requestPhoneChangeAction(data.phone);
+
+    if (!result.success) {
+      toast.custom((t) => (
+        <Toast
+          variant="error"
+          message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
+          toastId={t}
+        />
+      ));
+      return;
+    }
+
+    setShowVerification(true);
+  });
+
+  const handleBack = useCallback(() => {
+    setShowVerification(false);
+  }, []);
+
+  const resetForm = useCallback(() => {
+    form.reset();
+    setShowVerification(false);
+  }, [form]);
+
+  return {
+    showVerification,
+    phoneValue,
+    isSubmitting,
+    errors,
+    handlePhoneChange,
+    handleContinue,
+    handleBack,
+    resetForm,
+  };
+}

package/src/components/account/hooks/useConfigurationsModal.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { AccountSectionType } from '../../../enums/AccountSectionType';
+
+interface UseConfigurationsModalProps {
+  isOpen: boolean;
+  initialSection?: AccountSectionType;
+}
+
+export default function useConfigurationsModal({
+  isOpen,
+  initialSection,
+}: UseConfigurationsModalProps) {
+  const [activeSection, setActiveSection] = useState<AccountSectionType>(
+    AccountSectionType.MY_PROFILE
+  );
+
+  useEffect(() => {
+    if (isOpen && initialSection) {
+      setActiveSection(initialSection);
+    } else if (isOpen && !initialSection) {
+      setActiveSection(AccountSectionType.MY_PROFILE);
+    }
+  }, [isOpen, initialSection]);
+
+  const handleSectionChange = useCallback((section: AccountSectionType) => {
+    setActiveSection(section);
+  }, []);
+
+  const resetSection = useCallback(() => {
+    setActiveSection(AccountSectionType.MY_PROFILE);
+  }, []);
+
+  return {
+    activeSection,
+    setActiveSection: handleSectionChange,
+    resetSection,
+  };
+}

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
+import { disableTwoFactorAction } from '../../../modules/accounts/actions/account-management.action';
+
+interface UseDisableTwoFactorAuthFormProps {
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function useDisableTwoFactorAuthForm({
+  onClose,
+  onSuccess,
+}: UseDisableTwoFactorAuthFormProps) {
+  const [code, setCode] = useState('');
+  const queryClient = useQueryClient();
+
+  const isValid = code.length === 6;
+
+  const mutation = useMutation({
+    mutationFn: (otpCode: string) => disableTwoFactorAction(otpCode),
+    onSuccess: (result) => {
+      if (!result.success) {
+        toast.custom((t) => (
+          <Toast variant="error" message={result.error ?? 'Código inválido'} toastId={t} />
+        ));
+        return;
+      }
+
+      queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+      toast.custom((t) => (
+        <Toast variant="success" message="Autenticação de dois fatores desabilitada" toastId={t} />
+      ));
+      setCode('');
+      onSuccess?.();
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao desabilitar 2FA. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const { mutate, reset } = mutation;
+
+  const handleClose = useCallback(() => {
+    setCode('');
+    reset();
+    onClose();
+  }, [onClose, reset]);
+
+  const handleSubmit = useCallback(() => {
+    if (!isValid) return;
+    mutate(code);
+  }, [code, isValid, mutate]);
+
+  return {
+    code,
+    setCode,
+    isValid,
+    isLoading: mutation.isPending,
+    handleClose,
+    handleSubmit,
+  };
+}

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

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import useCountdownTimer from '../../../hooks/useCountdownTimer';
+import { OTP_CODE_LENGTH, VALID_OTP_CODE } from '../../../utils/validators/account';
+import { hasExactLength } from '../../../utils/validators/common';
+
+interface UseOtpVerificationOptions {
+  onSuccess: () => void;
+  successMessage: string;
+  validateFn?: (code: string) => Promise<boolean>;
+  resendFn?: () => Promise<void>;
+}
+
+export default function useOtpVerification({
+  onSuccess,
+  successMessage,
+  validateFn,
+  resendFn,
+}: UseOtpVerificationOptions) {
+  const [code, setCode] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  const {
+    seconds: timer,
+    isExpired: canResend,
+    reset: resetTimer,
+  } = useCountdownTimer({ initialSeconds: 59 });
+
+  const handleCodeChange = useCallback(
+    (value: string) => {
+      setCode(value.toUpperCase());
+      if (hasError) {
+        setHasError(false);
+      }
+    },
+    [hasError]
+  );
+
+  const handleValidate = useCallback(async () => {
+    if (!hasExactLength(code, OTP_CODE_LENGTH)) return;
+
+    setIsLoading(true);
+    setHasError(false);
+
+    try {
+      let isValid: boolean;
+
+      if (validateFn) {
+        isValid = await validateFn(code);
+      } else {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        isValid = code === VALID_OTP_CODE;
+      }
+
+      if (!isValid) {
+        setHasError(true);
+        return;
+      }
+
+      toast.custom((t) => <Toast variant="success" message={successMessage} toastId={t} />);
+
+      setCode('');
+      onSuccess();
+    } catch (error) {
+      console.error('Erro ao validar código:', error);
+      setHasError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [code, onSuccess, successMessage, validateFn]);
+
+  const handleResend = useCallback(async () => {
+    if (!canResend) return;
+
+    try {
+      resetTimer();
+      setHasError(false);
+      setCode('');
+
+      if (resendFn) {
+        await resendFn();
+      }
+
+      toast.custom((t) => <Toast variant="success" message="Código reenviado" toastId={t} />);
+    } catch (error) {
+      console.error('Erro ao reenviar código:', error);
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao reenviar código. Tente novamente." toastId={t} />
+      ));
+    }
+  }, [canResend, resetTimer, resendFn]);
+
+  const reset = useCallback(() => {
+    setCode('');
+    setHasError(false);
+  }, []);
+
+  const isValidLength = hasExactLength(code, OTP_CODE_LENGTH);
+
+  return {
+    code,
+    isLoading,
+    hasError,
+    timer,
+    canResend,
+    isValidLength,
+    handleCodeChange,
+    handleValidate,
+    handleResend,
+    reset,
+  };
+}

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

@@ -0,0 +1,114 @@
+'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';
+
+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: generateTwoFactorAction,
+    onSuccess: (result) => {
+      if (!result.success) {
+        toast.custom((t) => (
+          <Toast variant="error" message={result.error ?? 'Erro ao gerar QR Code. Tente novamente.'} toastId={t} />
+        ));
+      }
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao gerar QR Code. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const confirmMutation = useMutation({
+    mutationFn: (otpCode: string) => confirmTwoFactorAction(otpCode),
+    onSuccess: (result) => {
+      if (!result.success) {
+        toast.custom((t) => (
+          <Toast variant="error" message={result.error ?? 'Código inválido'} toastId={t} />
+        ));
+        return;
+      }
+      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.isSuccess && !generateMutation.data?.success) || 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,
+  };
+}