@greatapps/common 1.1.675 → 1.1.677

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>
   );

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconChevronLeft, IconX, IconMessage } from '@tabler/icons-react';
 import { Button } from '../../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
@@ -20,6 +21,7 @@ interface ChangePhoneModalProps {
 }
 
 export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
+  const translate = useTranslations();
   const { user } = useAuth();
   const invalidateUser = useInvalidateUser();
 
@@ -70,7 +72,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
     reset: resetOtp,
   } = useOtpVerification({
     onSuccess: handleSuccess,
-    successMessage: 'Telefone alterado',
+    successMessage: translate('common.account.changePhone.phoneChanged'),
     validateFn: async (token) => {
       const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);
       return result.success;
@@ -108,7 +110,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
               <IconChevronLeft size={20} className="text-gray-950" />
             </Button>
             <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
-              Alterar telefone
+              {translate('common.account.changePhone.titleEdit')}
             </DialogTitle>
             <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
               <IconX size={18} className="text-gray-500" />
@@ -117,11 +119,17 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
         ) : (
           <>
             <DialogHeader className="sr-only">
-              <DialogTitle>{hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}</DialogTitle>
+              <DialogTitle>
+                {hasExistingPhone
+                  ? translate('common.account.changePhone.titleEdit')
+                  : translate('common.account.changePhone.titleAdd')}
+              </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">
-                {hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}
+                {hasExistingPhone
+                  ? translate('common.account.changePhone.titleEdit')
+                  : translate('common.account.changePhone.titleAdd')}
               </span>
               <Button
                 variant="ghost"
@@ -150,10 +158,14 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
               </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 número atual{' '}
-                  <span className="font-semibold text-gray-950">{currentPhoneDisplay}.</span>
+                  {translate.rich('common.account.changePhone.sentCodeTo', {
+                    phone: currentPhoneDisplay,
+                    b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
+                  })}
                 </p>
               </div>
 
@@ -170,7 +182,9 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
                   </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>
 
@@ -180,14 +194,16 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
                   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>
@@ -196,10 +212,12 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
 
             <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 telefone'}
+                {isLoading
+                  ? translate('common.account.otp.validating')
+                  : translate('common.account.changePhone.confirm')}
               </Button>
             </div>
           </form>
@@ -208,17 +226,23 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
             <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">
-                  {hasExistingPhone ? 'Atualizar telefone de contato' : 'Adicionar telefone de contato'}
+                  {hasExistingPhone
+                    ? translate('common.account.changePhone.updateTitle')
+                    : translate('common.account.changePhone.addTitle')}
                 </span>
                 <span className="paragraph-small-regular text-gray-600">
                   {hasExistingPhone
-                    ? 'Informe o novo número para manter seu contato atualizado.'
-                    : 'Informe seu número de telefone para contato.'}
+                    ? translate('common.account.changePhone.updateDescription')
+                    : translate('common.account.changePhone.addDescription')}
                 </span>
               </div>
 
               <PhoneInput
-                label={hasExistingPhone ? 'Novo número' : 'Número de telefone'}
+                label={
+                  hasExistingPhone
+                    ? translate('common.account.changePhone.newNumber')
+                    : translate('common.account.changePhone.numberLabel')
+                }
                 placeholder="(00) 0 0000-0000"
                 value={phoneValue}
                 onChange={handlePhoneChange}
@@ -229,12 +253,16 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
 
             <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
-                  ? (hasExistingPhone ? 'Enviando...' : 'Salvando...')
-                  : (hasExistingPhone ? 'Continuar' : 'Salvar')}
+                  ? hasExistingPhone
+                    ? translate('common.actions.sending')
+                    : translate('common.actions.saving')
+                  : hasExistingPhone
+                    ? translate('common.actions.continue')
+                    : translate('common.actions.save')}
               </Button>
             </div>
           </form>