@greatapps/common 1.1.24 → 1.1.26

package/src/components/account/TwoFactorAuthModal.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { ArrowLeft, X, Copy, RefreshCw } from 'lucide-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 useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';
+
+interface TwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
+  const {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating,
+    isConfirming,
+    generateFailed,
+    retryGenerate,
+    qrcode,
+    backupCodes,
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm,
+  } = useTwoFactorAuthForm({ onSuccess, open });
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  if (step === 'recovery') {
+    return (
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent
+          showCloseButton={false}
+          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-[470px]! 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%]!"
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>Códigos de segurança</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">
+              Códigos de segurança
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              className="size-8! p-0 absolute right-4"
+              onClick={handleClose}
+            >
+              <X size={18} />
+            </Button>
+          </div>
+
+          <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-2">
+              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
+                Salve estes códigos de recuperação de emergência
+              </h3>
+              <div className="paragraph-small-regular text-gray-600">
+                <p>
+                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta
+                  sem um código de dois fatores.
+                </p>
+                <br />
+                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
+              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
+                {backupCodes.map((backupCode, i) => (
+                  <p key={i}>{backupCode}</p>
+                ))}
+              </div>
+              <Button
+                type="button"
+                variant="secondary"
+                className="h-8! w-fit"
+                onClick={handleCopyCodes}
+              >
+                <Copy size={16} />
+                Copiar códigos
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              Cancelar
+            </Button>
+            <Button className="h-10!" type="button" onClick={handleFinalize}>
+              Finalizar
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        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-[470px]! 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%]!"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Autenticação de dois fatores</DialogTitle>
+        </DialogHeader>
+        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute left-4"
+            onClick={handleClose}
+          >
+            <ArrowLeft size={20} />
+          </Button>
+          <span className="paragraph-medium-semibold text-gray-950 text-center">
+            Autenticação de dois fatores
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute right-4"
+            onClick={handleClose}
+          >
+            <X size={18} />
+          </Button>
+        </div>
+
+        <form
+          className="flex-1 min-h-0 flex flex-col"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (isCodeComplete) handleSubmit();
+          }}
+        >
+          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
+            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
+              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
+                Instale um aplicativo autenticador no seu celular (ex.:{' '}
+                <a
+                  href="https://support.google.com/accounts/answer/1066447"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="paragraph-small-medium underline"
+                >
+                  Google Authenticator
+                </a>
+                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o
+                código de 6 dígitos gerado para continuar.
+              </p>
+
+              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
+                {generateFailed ? (
+                  <button
+                    type="button"
+                    onClick={() => retryGenerate()}
+                    className="flex flex-col items-center gap-1.5 text-center"
+                  >
+                    <RefreshCw size={20} className="text-gray-400" />
+                    <span className="paragraph-xsmall-medium text-gray-500">Tentar novamente</span>
+                  </button>
+                ) : isGenerating || !qrcode ? (
+                  <div className="w-full h-full rounded bg-gray-100 animate-pulse" />
+                ) : (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={qrcode}
+                    alt="QR Code para autenticação de dois fatores"
+                    className="w-full h-full"
+                  />
+                )}
+              </div>
+
+              <div className="flex items-center gap-3 w-full">
+                <Separator className="flex-1" />
+                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
+                  Cole os 6 dígitos abaixo
+                </span>
+                <Separator className="flex-1" />
+              </div>
+
+              <div className="scroll-mt-20">
+                <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>
+
+          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              Cancelar
+            </Button>
+            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
+              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/constants.ts

@@ -0,0 +1,29 @@
+import { buildTimezoneOptions } from '../../utils/intl/timezones';
+import { buildLocaleOptions } from '../../utils/intl/locales';
+
+export const GENDER_OPTIONS = [
+  { value: 'masculino', label: 'Masculino', apiValue: 1 },
+  { value: 'feminino', label: 'Feminino', apiValue: 0 },
+];
+
+export const LANGUAGE_OPTIONS = buildLocaleOptions();
+
+export const CURRENCY_OPTIONS = [
+  { value: 'BRL', label: 'BRL (R$)', displayValue: 'BRL (R$)' },
+  { value: 'USD', label: 'USD ($)', displayValue: 'USD ($)' },
+  { value: 'EUR', label: 'EUR (€)', displayValue: 'EUR (€)' },
+];
+
+export const TIMEZONE_OPTIONS = buildTimezoneOptions();
+
+export const TIME_FORMAT_OPTIONS = [
+  { value: '24h', label: '24 horas', displayValue: '24 horas' },
+  { value: '12h', label: '12 horas (AM/PM)', displayValue: '12 horas (AM/PM)' },
+];
+
+export const NOTIFICATION_TYPES = [
+  'Atualizações de projetos',
+  'Alertas de segurança',
+  'Mudanças no plano ou faturamento',
+  'Manutenções programadas',
+];

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