@greatapps/common 1.1.676 → 1.1.678

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

@@ -3,12 +3,14 @@
 import { useState, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
 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 translate = useTranslations();
   const [showVerification, setShowVerification] = useState(false);
 
   const { register, handleSubmit, reset, watch, formState: { errors, isSubmitting } } = useForm<ChangeEmailFormData>({
@@ -21,11 +23,11 @@ export default function useChangeEmailForm() {
     const result = await requestEmailChangeAction(data.email);
 
     if (!result.success) {
-      toast.custom((t) => (
+      toast.custom((toastId) => (
         <Toast
           variant="error"
-          message={result.error ?? 'E-mail já existente ou ocorreu um erro. Tente novamente mais tarde.'}
-          toastId={t}
+          message={result.error ?? translate('common.account.changeEmail.emailExistsError')}
+          toastId={toastId}
         />
       ));
       return;

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

@@ -3,6 +3,7 @@
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { changePasswordSchema, type ChangePasswordFormData } from '../../../utils/validators/account';
@@ -13,6 +14,7 @@ interface UseChangePasswordFormProps {
 }
 
 export default function useChangePasswordForm({ onSuccess }: UseChangePasswordFormProps = {}) {
+  const translate = useTranslations();
   const form = useForm<ChangePasswordFormData>({
     resolver: zodResolver(changePasswordSchema),
     mode: 'onChange',
@@ -26,22 +28,34 @@ export default function useChangePasswordForm({ onSuccess }: UseChangePasswordFo
     mutationFn: changePasswordAction,
     onSuccess: (result) => {
       if (!result.success) {
-        toast.custom((t) => (
-          <Toast variant="error" message={result.error ?? 'Erro ao alterar senha'} toastId={t} />
+        toast.custom((toastId) => (
+          <Toast
+            variant="error"
+            message={result.error ?? translate('common.account.changePassword.changeError')}
+            toastId={toastId}
+          />
         ));
         return;
       }
 
-      toast.custom((t) => (
-        <Toast variant="success" message="Senha alterada com sucesso" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.changePassword.changedSuccess')}
+          toastId={toastId}
+        />
       ));
 
       form.reset();
       onSuccess?.();
     },
     onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao alterar senha. Tente novamente." toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.changePassword.genericError')}
+          toastId={toastId}
+        />
       ));
     },
   });

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { requestPhoneChangeAction, updateUserAction } from '../../../modules/accounts/actions/account-management.action';
@@ -18,6 +19,7 @@ interface UseChangePhoneFormOptions {
 }
 
 export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuccess }: UseChangePhoneFormOptions) {
+  const translate = useTranslations();
   const [showVerification, setShowVerification] = useState(false);
   const [phoneValue, setPhoneValue] = useState('');
   const [phoneError, setPhoneError] = useState('');
@@ -35,7 +37,7 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
     const { ddi, local } = splitPhoneValue(phoneValue);
 
     if (!local || local.replace(/\D/g, '').length < 8) {
-      setPhoneError('Número de telefone inválido');
+      setPhoneError(translate('common.account.changePhone.invalidNumber'));
       return;
     }
 
@@ -45,18 +47,22 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
         const result = await updateUserAction({ phone: local, ddi });
 
         if (!result.success) {
-          toast.custom((t) => (
+          toast.custom((toastId) => (
             <Toast
               variant="error"
-              message={result.error ?? 'Ocorreu um erro ao salvar o telefone. Tente novamente mais tarde.'}
-              toastId={t}
+              message={result.error ?? translate('common.account.changePhone.saveError')}
+              toastId={toastId}
             />
           ));
           return;
         }
 
-        toast.custom((t) => (
-          <Toast variant="success" message="Telefone adicionado" toastId={t} />
+        toast.custom((toastId) => (
+          <Toast
+            variant="success"
+            message={translate('common.account.changePhone.phoneAdded')}
+            toastId={toastId}
+          />
         ));
         onDirectUpdateSuccess?.();
         return;
@@ -65,11 +71,11 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
       const result = await requestPhoneChangeAction(local, ddi);
 
       if (!result.success) {
-        toast.custom((t) => (
+        toast.custom((toastId) => (
           <Toast
             variant="error"
-            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
-            toastId={t}
+            message={result.error ?? translate('common.account.changePhone.numberExistsError')}
+            toastId={toastId}
           />
         ));
         return;
@@ -80,7 +86,7 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
     } finally {
       setIsSubmitting(false);
     }
-  }, [phoneValue, hasExistingPhone, onDirectUpdateSuccess]);
+  }, [phoneValue, hasExistingPhone, onDirectUpdateSuccess, translate]);
 
   const handleBack = useCallback(() => {
     setShowVerification(false);

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

@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
@@ -17,6 +18,7 @@ export default function useDisableTwoFactorAuthForm({
   onClose,
   onSuccess,
 }: UseDisableTwoFactorAuthFormProps) {
+  const translate = useTranslations();
   const [code, setCode] = useState('');
   const queryClient = useQueryClient();
   const userKey = useWlQueryKey([...USER_QUERY_KEY]);
@@ -28,23 +30,35 @@ export default function useDisableTwoFactorAuthForm({
     onSuccess: (result) => {
       if (!result.success) {
         setCode('');
-        toast.custom((t) => (
-          <Toast variant="error" message={result.error ?? 'Código inválido'} toastId={t} />
+        toast.custom((toastId) => (
+          <Toast
+            variant="error"
+            message={result.error ?? translate('common.account.twoFactor.invalidCode')}
+            toastId={toastId}
+          />
         ));
         return;
       }
 
       queryClient.invalidateQueries({ queryKey: userKey });
-      toast.custom((t) => (
-        <Toast variant="success" message="Autenticação de dois fatores desabilitada" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.twoFactor.disabledSuccess')}
+          toastId={toastId}
+        />
       ));
       setCode('');
       onSuccess?.();
     },
     onError: () => {
       setCode('');
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao desabilitar 2FA. Tente novamente." toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.disableError')}
+          toastId={toastId}
+        />
       ));
     },
   });

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import useCountdownTimer from '../../../hooks/useCountdownTimer';
@@ -20,6 +21,7 @@ export default function useOtpVerification({
   validateFn,
   resendFn,
 }: UseOtpVerificationOptions) {
+  const translate = useTranslations();
   const [code, setCode] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
@@ -85,14 +87,24 @@ export default function useOtpVerification({
         await resendFn();
       }
 
-      toast.custom((t) => <Toast variant="success" message="Código reenviado" toastId={t} />);
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.twoFactor.codeResent')}
+          toastId={toastId}
+        />
+      ));
     } 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} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.resendError')}
+          toastId={toastId}
+        />
       ));
     }
-  }, [canResend, resetTimer, resendFn]);
+  }, [canResend, resetTimer, resendFn, translate]);
 
   const reset = useCallback(() => {
     setCode('');

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

@@ -2,6 +2,7 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import { useMutation } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { copyToClipboard } from '../../../utils/browser/clipboard';
@@ -19,14 +20,19 @@ interface UseTwoFactorAuthFormProps {
 }
 
 export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
+  const translate = useTranslations();
   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} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.generateError')}
+          toastId={toastId}
+        />
       ));
     },
   });
@@ -38,8 +44,12 @@ export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAu
     },
     onError: () => {
       setCode('');
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.confirmError')}
+          toastId={toastId}
+        />
       ));
     },
   });
@@ -70,11 +80,15 @@ export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAu
     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} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.twoFactor.codesCopied')}
+          toastId={toastId}
+        />
       ));
     }
-  }, [generateMutation.data]);
+  }, [generateMutation.data, translate]);
 
   const resetForm = () => {
     setCode('');

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';
 import { Button } from '../../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
@@ -20,6 +21,7 @@ interface ChangeEmailModalProps {
 }
 
 export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
+  const translate = useTranslations();
   const { user } = useAuth();
   const invalidateUser = useInvalidateUser();
 
@@ -53,7 +55,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
     reset: resetOtp,
   } = useOtpVerification({
     onSuccess: handleSuccess,
-    successMessage: 'E-mail alterado com sucesso',
+    successMessage: translate('common.account.changeEmail.emailChanged'),
     validateFn: async (token) => {
       const result = await confirmEmailChangeAction(token, emailToVerify);
       return result.success;
@@ -91,7 +93,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
               <IconChevronLeft size={20} className="text-gray-950" />
             </Button>
             <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
-              Alterar e-mail
+              {translate('common.account.changeEmail.title')}
             </DialogTitle>
             <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
               <IconX size={18} className="text-gray-500" />
@@ -100,11 +102,11 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
         ) : (
           <>
             <DialogHeader className="sr-only">
-              <DialogTitle>Alterar e-mail</DialogTitle>
+              <DialogTitle>{translate('common.account.changeEmail.title')}</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
+                {translate('common.account.changeEmail.title')}
               </span>
               <Button
                 variant="ghost"
@@ -133,10 +135,16 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
               </div>
 
               <div className="flex flex-col gap-1">
-                <h3 className="paragraph-medium-semibold text-gray-950">Código de validação</h3>
+                <h3 className="paragraph-medium-semibold text-gray-950">
+                  {translate('common.account.otp.validationCode')}
+                </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>
+                  {translate.rich('common.account.changeEmail.sentCodeTo', {
+                    email: user?.email ?? '',
+                    b: (chunks) => (
+                      <span className="font-semibold text-gray-950 break-all">{chunks}</span>
+                    ),
+                  })}
                 </p>
               </div>
 
@@ -153,7 +161,9 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
                   </InputOTPGroup>
                 </InputOTP>
                 {hasError && (
-                  <p className="paragraph-small-regular text-red-500">Código incorreto</p>
+                  <p className="paragraph-small-regular text-red-500">
+                    {translate('common.account.otp.incorrectCode')}
+                  </p>
                 )}
               </div>
 
@@ -163,14 +173,16 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
                   onClick={handleResend}
                   className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
                 >
-                  Reenviar código
+                  {translate('common.account.otp.resend')}
                 </button>
               ) : (
                 <p className="paragraph-small-regular text-gray-500">
-                  Reenviar em{' '}
-                  <span className="paragraph-small-semibold text-gray-950">
-                    {formatTimer(timer)}
-                  </span>
+                  {translate.rich('common.account.otp.resendIn', {
+                    time: formatTimer(timer),
+                    b: (chunks) => (
+                      <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
+                    ),
+                  })}
                 </p>
               )}
             </div>
@@ -179,10 +191,12 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
 
             <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
+                {translate('common.actions.cancel')}
               </Button>
               <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
-                {isLoading ? 'Validando...' : 'Alterar e-mail'}
+                {isLoading
+                  ? translate('common.account.otp.validating')
+                  : translate('common.account.changeEmail.confirm')}
               </Button>
             </div>
           </form>
@@ -191,16 +205,16 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
             <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
+                  {translate('common.account.changeEmail.updateTitle')}
                 </span>
                 <span className="paragraph-small-regular text-gray-600">
-                  Informe o seu novo E-mail para manter seu contato atualizado.
+                  {translate('common.account.changeEmail.updateDescription')}
                 </span>
               </div>
 
               <FormField
-                label="Novo e-mail"
-                placeholder="Digite seu novo e-mail"
+                label={translate('common.account.changeEmail.newEmail')}
+                placeholder={translate('common.account.changeEmail.newEmailPlaceholder')}
                 type="email"
                 {...register('email')}
                 error={!!errors.email}
@@ -211,10 +225,10 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
 
             <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
+                {translate('common.actions.cancel')}
               </Button>
               <Button className="h-10!" type="submit" disabled={isSubmitting}>
-                {isSubmitting ? 'Enviando...' : 'Continuar'}
+                {isSubmitting ? translate('common.actions.sending') : translate('common.actions.continue')}
               </Button>
             </div>
           </form>

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { IconLock, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { Button } from '../../ui/buttons/Button';
 import { FormField } from '../../ui/form/FormField';
 import useChangePasswordForm from '../hooks/useChangePasswordForm';
@@ -11,6 +12,7 @@ interface ChangePasswordSectionProps {
 }
 
 export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
+  const translate = useTranslations();
   const { register, handleSubmit, errors } = useChangePasswordForm({
     onSuccess: onBack,
   });
@@ -23,7 +25,9 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
       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 justify-between">
-        <span className="paragraph-medium-semibold text-gray-950">Alterar senha</span>
+        <span className="paragraph-medium-semibold text-gray-950">
+          {translate('common.account.changePassword.title')}
+        </span>
         <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
           <IconX size={18} />
         </Button>
@@ -31,9 +35,9 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
 
       <div className="flex flex-col gap-4">
         <FormField
-          label="Senha atual"
+          label={translate('common.account.changePassword.currentPassword')}
           type="password"
-          placeholder="Digite sua senha atual"
+          placeholder={translate('common.account.changePassword.currentPasswordPlaceholder')}
           leftIcon={IconLock}
           error={!!errors.currentPassword}
           errorMessage={errors.currentPassword?.message}
@@ -43,9 +47,9 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
           {...register('currentPassword')}
         />
         <FormField
-          label="Nova senha"
+          label={translate('common.account.changePassword.newPassword')}
           type="password"
-          placeholder="Digite sua nova senha"
+          placeholder={translate('common.account.changePassword.newPasswordPlaceholder')}
           leftIcon={IconLock}
           error={!!errors.newPassword}
           errorMessage={errors.newPassword?.message}
@@ -57,7 +61,7 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
       </div>
 
       <Button type="submit" className="w-fit h-10!">
-        Salvar nova senha
+        {translate('common.account.changePassword.submit')}
       </Button>
     </form>
   );