@greatapps/common 1.1.676 → 1.1.677

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>

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

@@ -2,6 +2,7 @@
 
 import { useState, useRef } from 'react';
 import Image from 'next/image';
+import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
@@ -26,6 +27,13 @@ interface MyProfileSectionProps {
 }
 
 export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps) {
+  const translate = useTranslations();
+  const genderOptions = GENDER_OPTIONS.map((option) => ({
+    ...option,
+    label: translate(
+      `common.account.profile.genderOptions.${option.value === 'masculino' ? 'male' : 'female'}`,
+    ),
+  }));
   const { user } = useAuth();
   const updateAccountUser = useUpdateAccountUser();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -86,16 +94,20 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
       form.reset(data);
       setSelectedPhoto(null);
       setPhotoRemoved(false);
-      toast.custom((t) => (
-        <Toast variant="success" message="Perfil atualizado com sucesso" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.profile.savedSuccess')}
+          toastId={toastId}
+        />
       ));
       onClose();
     } catch (error) {
-      toast.custom((t) => (
+      toast.custom((toastId) => (
         <Toast
           variant="error"
-          message={error instanceof Error ? error.message : 'Erro ao atualizar perfil'}
-          toastId={t}
+          message={error instanceof Error ? error.message : translate('common.account.profile.saveError')}
+          toastId={toastId}
         />
       ));
     }
@@ -113,14 +125,14 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
         />
         <div className="absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6">
           <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">
-            Meu perfil
+            {translate('common.account.profile.title')}
           </span>
           <div className="flex flex-col gap-5">
             <div className="flex items-center gap-4">
               {avatarPreview ? (
                 <Image
                   src={avatarPreview}
-                  alt="Foto do usuário"
+                  alt={translate('common.account.profile.avatarAlt')}
                   width={48}
                   height={48}
                   className="size-12 rounded-full object-cover cursor-pointer"
@@ -142,7 +154,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     type="button"
                     onClick={() => fileInputRef.current?.click()}
                   >
-                    Alterar foto
+                    {translate('common.account.profile.changePhoto')}
                   </Button>
                   <Button
                     type="button"
@@ -160,7 +172,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                 >
-                  Alterar foto
+                  {translate('common.account.profile.changePhoto')}
                 </Button>
               )}
             </div>
@@ -169,31 +181,31 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               <div className="flex flex-col gap-4">
                 <div className="flex gap-4">
                   <FormField
-                    label="Nome"
-                    placeholder="Digite seu nome"
+                    label={translate('common.account.profile.name')}
+                    placeholder={translate('common.account.profile.namePlaceholder')}
                     error={!!errors.name}
                     errorMessage={errors.name?.message}
                     {...register('name')}
                   />
                   <FormField
-                    label="Sobrenome"
-                    placeholder="Digite seu sobrenome"
+                    label={translate('common.account.profile.lastName')}
+                    placeholder={translate('common.account.profile.lastNamePlaceholder')}
                     error={!!errors.last_name}
                     errorMessage={errors.last_name?.message}
                     {...register('last_name')}
                   />
                 </div>
                 <SelectField
-                  label="Gênero"
-                  placeholder="Selecione seu gênero"
-                  options={GENDER_OPTIONS}
+                  label={translate('common.account.profile.gender')}
+                  placeholder={translate('common.account.profile.genderPlaceholder')}
+                  options={genderOptions}
                   value={watch('gender')}
                   className="h-10!"
                   onChange={(value) => setValue('gender', value as string)}
                 />
                 <div className="relative">
                   <PhoneInput
-                    label="Telefone"
+                    label={translate('common.account.profile.phone')}
                     value={user?.phone ?? ''}
                     disabled
                     classnameContainer="bg-gray-50 border-0!"
@@ -203,7 +215,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     className="absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer"
                     onClick={() => setChangePhoneOpen(true)}
                   >
-                    Alterar
+                    {translate('common.account.profile.change')}
                   </button>
                 </div>
               </div>
@@ -211,11 +223,13 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               <Separator />
 
               <div className="flex flex-col gap-4">
-                <span className="paragraph-medium-semibold text-gray-600">Dados de acesso</span>
+                <span className="paragraph-medium-semibold text-gray-600">
+                  {translate('common.account.profile.accessData')}
+                </span>
                 <div className="relative">
                   <div className='cursor-not-allowed'>
                     <FormField
-                      label="E-mail"
+                      label={translate('common.account.profile.email')}
                       value={user?.email ?? ''}
                       disabled
                       classnameContainer="bg-gray-50 border-0!"
@@ -226,7 +240,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     className="absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer"
                     onClick={() => setChangeEmailOpen(true)}
                   >
-                    Alterar
+                    {translate('common.account.profile.change')}
                   </button>
                 </div>
               </div>
@@ -247,10 +261,10 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               onClose();
             }}
           >
-            Cancelar
+            {translate('common.actions.cancel')}
           </Button>
           <Button className="h-10! cursor-pointer" type="submit" disabled={isSubmitting}>
-            {isSubmitting ? 'Salvando...' : 'Salvar alterações'}
+            {isSubmitting ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
           </Button>
         </div>
       </form>

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

@@ -2,9 +2,13 @@
 
 import { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
+import { useTranslations, useLocale } from 'next-intl';
+import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { IconLock } from '@tabler/icons-react';
 import { cn } from '../../../infra/utils/clsx';
+import type { Locale } from '../../../i18n/config';
+import { setLocaleCookie } from '../../../utils/intl/locale-cookie';
 import { Button } from '../../ui/buttons/Button';
 import { Separator } from '../../ui/data-display/Separator';
 import { Toast } from '../../ui/feedback/Toast';
@@ -13,6 +17,7 @@ import { ComboboxField } from '../../ui/form/ComboboxField';
 import { SelectField } from '../../ui/form/SelectField';
 import ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';
 import { useAuth } from '../../../providers/auth.provider';
+import { useWhitelabel } from '../../../providers/whitelabel.provider';
 import { UserProfile } from '../../../modules/users/schema';
 import type { UpdateAccountRequest } from '../../../modules/accounts/types';
 import {
@@ -41,9 +46,27 @@ interface PreferencesSectionProps {
 }
 
 export function PreferencesSection({ onClose }: PreferencesSectionProps) {
+  // Padrão raiz: um único `translate` chamado pela chave inteira (`common.<modulo>.<chave>`).
+  const translate = useTranslations();
+  // Exceção: chave dinâmica (option.value) numa lista → namespace escopado.
+  const translateLanguage = useTranslations('common.languages');
+  const currentLocale = useLocale();
+  const router = useRouter();
   const { data: timezones = [] } = useTimezones();
   const { data: currencies = [] } = useCurrencies();
   const { user, account } = useAuth();
+  const { whitelabel } = useWhitelabel();
+  const languageOptions = LANGUAGE_OPTIONS.map((option) => ({
+    ...option,
+    label: translateLanguage(option.value as Locale),
+    displayValue: translateLanguage(option.value as Locale),
+  }));
+  const timeFormatOptions = TIME_FORMAT_OPTIONS.map((option) => ({
+    ...option,
+    label: translate(
+      `common.preferences.timeFormatOptions.${option.value === '24h' ? 'h24' : 'h12'}`,
+    ),
+  }));
   const isOwner = user?.profile === UserProfile.owner;
   const canEditPreferences = isOwner || user?.profile === UserProfile.admin;
   const updateAccountUser = useUpdateAccountUser();
@@ -74,7 +97,7 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
       companyName: account.name ?? '',
       language: LANGUAGE_OPTIONS.find(
         (o) => o.apiValue === user.language?.toLowerCase()
-      )?.value ?? 'pt-BR',
+      )?.value ?? 'pt-br',
       currency: account.currency,
       timezone: account.timezone,
       timeFormat: '24h',
@@ -98,16 +121,20 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
       }
 
       reset(data);
-      toast.custom((t) => (
-        <Toast variant="success" message="Preferências salvas com sucesso" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast variant="success" message={translate('common.preferences.savedSuccess')} toastId={toastId} />
       ));
       onClose();
+      if (data.language !== currentLocale) {
+        setLocaleCookie(data.language, whitelabel?.domain);
+        router.refresh();
+      }
     } catch (error) {
-      toast.custom((t) => (
+      toast.custom((toastId) => (
         <Toast
           variant="error"
-          message={error instanceof Error ? error.message : 'Erro ao salvar preferências'}
-          toastId={t}
+          message={error instanceof Error ? error.message : translate('common.preferences.saveError')}
+          toastId={toastId}
         />
       ));
     } finally {
@@ -148,12 +175,12 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
     <>
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col h-full">
         <div className="overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6 flex-1">
-          <span className="paragraph-medium-semibold text-gray-950">Preferências</span>
+          <span className="paragraph-medium-semibold text-gray-950">{translate('common.preferences.title')}</span>
           <div className="flex flex-col gap-8">
             <div className="flex flex-col lg:flex-row items-center gap-3">
               <FormField
-                label="Nome da empresa"
-                placeholder="Digite o nome da empresa"
+                label={translate('common.preferences.companyName')}
+                placeholder={translate('common.preferences.companyNamePlaceholder')}
                 classnameContainer={cn('w-full', !isOwner && 'cursor-not-allowed opacity-50')}
                 value={watch('companyName')}
                 onChange={(e) => setValue('companyName', e.target.value, { shouldDirty: true })}
@@ -163,18 +190,18 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
 
             <div className="flex flex-col lg:flex-row items-center gap-3">
               <ComboboxField
-                label="Idioma"
-                placeholder="Selecione o idioma"
-                searchPlaceholder="Buscar idioma..."
+                label={translate('common.preferences.language')}
+                placeholder={translate('common.preferences.languagePlaceholder')}
+                searchPlaceholder={translate('common.preferences.languageSearch')}
                 containerClassName="w-full"
-                options={LANGUAGE_OPTIONS}
+                options={languageOptions}
                 value={watch('language')}
                 onChange={(value) => setValue('language', value, { shouldDirty: true })}
               />
               <ComboboxField
-                label="Moeda"
-                placeholder="Selecione a moeda"
-                searchPlaceholder="Buscar moeda..."
+                label={translate('common.preferences.currency')}
+                placeholder={translate('common.preferences.currencyPlaceholder')}
+                searchPlaceholder={translate('common.preferences.currencySearch')}
                 containerClassName="w-full"
                 options={currencies}
                 value={watch('currency')}
@@ -187,12 +214,12 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
             <Separator />
 
             <div className="flex flex-col gap-4">
-              <span className="paragraph-medium-semibold text-gray-950">Exibição hora</span>
+              <span className="paragraph-medium-semibold text-gray-950">{translate('common.preferences.timeDisplay')}</span>
               <div className="flex flex-col lg:flex-row items-center gap-3">
                 <ComboboxField
-                  label="Fuso horário"
-                  placeholder="Selecione o fuso horário"
-                  searchPlaceholder="Buscar fuso horário..."
+                  label={translate('common.preferences.timezone')}
+                  placeholder={translate('common.preferences.timezonePlaceholder')}
+                  searchPlaceholder={translate('common.preferences.timezoneSearch')}
                   containerClassName="w-full"
                   options={timezones}
                   value={watch('timezone')}
@@ -201,11 +228,11 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
                   disabled={!canEditPreferences}
                 />
                 <SelectField
-                  label="Formato hora"
-                  placeholder="Selecione o formato"
+                  label={translate('common.preferences.timeFormat')}
+                  placeholder={translate('common.preferences.timeFormatPlaceholder')}
                   className="h-10!"
                   containerClassName="w-full"
-                  options={TIME_FORMAT_OPTIONS}
+                  options={timeFormatOptions}
                   value={watch('timeFormat')}
                   onChange={(value) =>
                     setValue('timeFormat', value as string, { shouldDirty: true })
@@ -230,10 +257,10 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
               onClose();
             }}
           >
-            Cancelar
+            {translate('common.actions.cancel')}
           </Button>
           <Button className="h-10!" type="submit" disabled={isSaving}>
-            {isSaving ? 'Salvando...' : 'Salvar alterações'}
+            {isSaving ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
           </Button>
         </div>
       </form>

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { IconAlertTriangle, IconBrandGoogleFilled } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { useQueryClient } from '@tanstack/react-query';
 import { useAuth } from '../../../providers/auth.provider';
@@ -18,6 +19,7 @@ interface SecuritySectionProps {
 export function SecuritySection({
   onDeleteAccount,
 }: SecuritySectionProps) {
+  const translate = useTranslations();
   const { user } = useAuth();
   const queryClient = useQueryClient();
   const { mutateAsync: unlinkGoogle, isPending: isUnlinking } = useUnlinkGoogle();
@@ -32,14 +34,16 @@ export function SecuritySection({
       queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
     } catch (error) {
       const message =
-        error instanceof Error ? error.message : 'Erro ao desvincular conta Google.';
-      toast.custom((t) => <Toast variant="error" message={message} toastId={t} />);
+        error instanceof Error ? error.message : translate('common.account.security.unlinkError');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
     }
   };
 
   return (
     <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-      <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
+      <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">
+        {translate('common.account.security.title')}
+      </span>
 
       {hasGoogleLinked && (
         <div className="flex flex-col items-center lg:items-start gap-4">
@@ -48,10 +52,11 @@ export function SecuritySection({
           </div>
 
           <div className="flex flex-col gap-2">
-            <span className="paragraph-medium-semibold text-gray-950">Conta Google vinculada</span>
+            <span className="paragraph-medium-semibold text-gray-950">
+              {translate('common.account.security.googleLinkedTitle')}
+            </span>
             <span className="paragraph-small-regular text-gray-600">
-              Sua conta está vinculada ao Google. Se desvincular, use &quot;Esqueci minha senha&quot; para
-              redefinir uma senha de acesso por e-mail.
+              {translate('common.account.security.googleLinkedDescription')}
             </span>
           </div>
 
@@ -61,7 +66,9 @@ export function SecuritySection({
             className="paragraph-small-semibold text-zinc-700 bg-zinc-100 rounded-lg px-3 py-2 cursor-pointer hover:bg-zinc-200 transition-colors w-fit disabled:opacity-50 disabled:cursor-not-allowed"
             onClick={handleUnlinkGoogle}
           >
-            {isUnlinking ? 'Desvinculando...' : 'Desvincular Google'}
+            {isUnlinking
+              ? translate('common.account.security.unlinking')
+              : translate('common.account.security.unlinkGoogle')}
           </button>
         </div>
       )}
@@ -72,9 +79,11 @@ export function SecuritySection({
         </div>
 
         <div className="flex flex-col gap-2">
-          <span className="paragraph-medium-semibold text-gray-950">Excluir conta</span>
+          <span className="paragraph-medium-semibold text-gray-950">
+            {translate('common.account.deleteAccount.title')}
+          </span>
           <span className="paragraph-small-regular text-gray-600">
-            Esta ação é permanente e não pode ser desfeita. Todos os seus dados, projetos e configurações serão removidos definitivamente.
+            {translate('common.account.security.deleteAccountDescription')}
           </span>
         </div>
 
@@ -84,7 +93,7 @@ export function SecuritySection({
             className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
             onClick={onDeleteAccount}
           >
-            Excluir minha conta
+            {translate('common.account.security.deleteMyAccount')}
           </button>
         )}
       </div>