@greatapps/common 1.1.24 → 1.1.26

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

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

@@ -0,0 +1,224 @@
+'use client';
+
+import { ChevronLeft, X, Mail } 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 { 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}
+        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%]!"
+      >
+        {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}>
+              <ChevronLeft 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}>
+              <X 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}
+              >
+                <X 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">
+                <Mail 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={Mail}
+              />
+            </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>
+  );
+}

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { ArrowLeft, Lock } from 'lucide-react';
+import { Button } from '../../ui/buttons/Button';
+import { FormField } from '../../ui/form/FormField';
+import useChangePasswordForm from '../hooks/useChangePasswordForm';
+import usePasswordVisibility from '../../../hooks/usePasswordVisibility';
+
+interface ChangePasswordSectionProps {
+  onBack: () => void;
+}
+
+export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
+  const { register, handleSubmit, errors } = useChangePasswordForm({
+    onSuccess: onBack,
+  });
+  const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();
+  const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6"
+    >
+      <div className="flex items-center gap-3">
+        <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
+          <ArrowLeft size={20} />
+        </Button>
+        <span className="paragraph-medium-semibold text-gray-950">Alterar senha</span>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <FormField
+          label="Senha atual"
+          type="password"
+          placeholder="Digite sua senha atual"
+          leftIcon={Lock}
+          error={!!errors.currentPassword}
+          errorMessage={errors.currentPassword?.message}
+          classnameContainer="h-10!"
+          showPassword={showCurrentPw}
+          onTogglePassword={toggleCurrentPw}
+          {...register('currentPassword')}
+        />
+        <FormField
+          label="Nova senha"
+          type="password"
+          placeholder="Digite sua nova senha"
+          leftIcon={Lock}
+          error={!!errors.newPassword}
+          errorMessage={errors.newPassword?.message}
+          classnameContainer="h-10!"
+          showPassword={showNewPw}
+          onTogglePassword={toggleNewPw}
+          {...register('newPassword')}
+        />
+      </div>
+
+      <Button type="submit" className="w-fit h-10!">
+        Salvar nova senha
+      </Button>
+    </form>
+  );
+}

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

@@ -0,0 +1,229 @@
+'use client';
+
+import { ChevronLeft, X, MessageSquare } 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 PhoneInput from '../../ui/form/PhoneInput';
+import { formatTimer, formatPhone } 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 { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
+import useChangePhoneForm from '../hooks/useChangePhoneForm';
+import useOtpVerification from '../hooks/useOtpVerification';
+
+interface ChangePhoneModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
+  const { user } = useAuth();
+  const invalidateUser = useInvalidateUser();
+
+  const currentPhoneDisplay = user?.phone
+    ? formatPhone(
+        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone
+      )
+    : '';
+
+  const {
+    showVerification,
+    phoneValue,
+    isSubmitting,
+    errors,
+    handlePhoneChange,
+    handleContinue,
+    handleBack,
+    resetForm,
+  } = useChangePhoneForm();
+
+  const handleSuccess = () => {
+    invalidateUser();
+    resetForm();
+    onClose();
+  };
+
+  const {
+    code,
+    isLoading,
+    hasError,
+    timer,
+    canResend,
+    isValidLength,
+    handleCodeChange,
+    handleValidate,
+    handleResend,
+    reset: resetOtp,
+  } = useOtpVerification({
+    onSuccess: handleSuccess,
+    successMessage: 'Telefone alterado',
+    validateFn: async (token) => {
+      const result = await confirmPhoneChangeAction(token, phoneValue);
+      return result.success;
+    },
+    resendFn: async () => {
+      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
+      const result = await requestPhoneChangeAction(phoneValue);
+      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}
+        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%]!"
+      >
+        {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}>
+              <ChevronLeft size={20} className="text-gray-950" />
+            </Button>
+            <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
+              Alterar telefone
+            </DialogTitle>
+            <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
+              <X size={18} className="text-gray-500" />
+            </Button>
+          </DialogHeader>
+        ) : (
+          <>
+            <DialogHeader className="sr-only">
+              <DialogTitle>Alterar telefone</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 telefone
+              </span>
+              <Button
+                variant="ghost"
+                className="absolute right-2 size-8! p-0"
+                onClick={handleClose}
+              >
+                <X 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">
+                <MessageSquare 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 número atual{' '}
+                  <span className="font-semibold text-gray-950">{currentPhoneDisplay}.</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 telefone'}
+              </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 telefone de contato
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  Informe o novo número para manter seu contato atualizado.
+                </span>
+              </div>
+
+              <PhoneInput
+                label="Novo número"
+                placeholder="(00) 0 0000-0000"
+                value={phoneValue}
+                onChange={handlePhoneChange}
+                error={!!errors.phone}
+                errorMessage={errors.phone?.message}
+              />
+            </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>
+  );
+}