@greatapps/common 1.1.676 → 1.1.678

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.676",
+  "version": "1.1.678",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -28,6 +28,10 @@
     "./handlers": {
       "import": "./dist/handlers.mjs",
       "types": "./src/handlers.ts"
+    },
+    "./i18n": {
+      "import": "./dist/i18n.mjs",
+      "types": "./src/i18n.ts"
     }
   },
   "files": [
@@ -86,6 +90,7 @@
     "@types/react-dom": "^19.2.3",
     "glob": "^13.0.6",
     "next": "16.2.1",
+    "next-intl": "^4.12.0",
     "react": "19.1.4",
     "react-dom": "19.1.4",
     "react-hook-form": "^7.72.0",
@@ -97,6 +102,7 @@
     "@hookform/resolvers": ">=3.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "next": ">=16.0.0",
+    "next-intl": ">=4.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": ">=7.0.0",

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { IconKey, IconLock, IconSettings2, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
 import { cn } from '../../infra/utils/clsx';
@@ -19,6 +20,7 @@ import { hasSubscriptionExpired } from '../../modules/subscriptions/utils/has-su
 import { useWhitelabel } from '../../providers/whitelabel.provider';
 
 export default function ConfigurationsMyAccountModal() {
+  const translate = useTranslations();
   const {
     activeModal,
     openDeleteAccount,
@@ -85,10 +87,12 @@ export default function ConfigurationsMyAccountModal() {
           lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
       >
         <DialogHeader className="sr-only">
-          <DialogTitle>Configurações</DialogTitle>
+          <DialogTitle>{translate('common.account.configurations.title')}</DialogTitle>
         </DialogHeader>
         <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
-          <span className="text-gray-950 paragraph-medium-semibold">Configurações</span>
+          <span className="text-gray-950 paragraph-medium-semibold">
+            {translate('common.account.configurations.title')}
+          </span>
           <button
             type="button"
             className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
@@ -116,26 +120,26 @@ export default function ConfigurationsMyAccountModal() {
             )}
           >
             <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
-              Configurações
+              {translate('common.account.configurations.title')}
             </span>
 
             <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
               <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
                 <IconSettings2 size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">Preferências</span>
+                <span className="paragraph-small-medium">{translate('common.preferences.title')}</span>
               </TabsTrigger>
 
               {isOwner && whitelabel?.id === 1 && (
                 <TabsTrigger value={AccountSectionType.TOKEN} className={tabTriggerClasses}>
                   <IconKey size={20} className="shrink-0" />
-                  <span className="paragraph-small-medium">Token da conta</span>
+                  <span className="paragraph-small-medium">{translate('common.account.token.title')}</span>
                 </TabsTrigger>
               )}
 
               {isOwner && (
                 <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
                   <IconLock size={20} className="shrink-0" />
-                  <span className="paragraph-small-medium">Segurança</span>
+                  <span className="paragraph-small-medium">{translate('common.account.security.title')}</span>
                 </TabsTrigger>
               )}
             </div>

package/src/components/account/ConfirmDeleteAccountModal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
@@ -15,6 +16,7 @@ import { useAuth } from '../../providers/auth.provider';
 import { UserProfile } from '../../modules/users/schema';
 
 export default function ConfirmDeleteAccountModal() {
+  const translate = useTranslations();
   const { activeModal, deleteAccountPayload, openDeleteAccount, close } = useAccountModals();
   const open = activeModal === 'confirmDelete';
 
@@ -33,7 +35,7 @@ export default function ConfirmDeleteAccountModal() {
         if (!deleteAccountPayload) {
           // Fluxo quebrado (usuário pulou o primeiro modal ou refresh) — manda
           // de volta pro modal inicial pra re-coletar a senha.
-          openDeleteAccount('Sessão expirada. Preencha os campos novamente.');
+          openDeleteAccount(translate('common.account.confirmDelete.sessionExpired'));
           return;
         }
         await deleteAccount.mutateAsync({ password: deleteAccountPayload.password });
@@ -41,20 +43,25 @@ export default function ConfirmDeleteAccountModal() {
         await deleteAccountUser.mutateAsync(user!.id);
       }
       close();
-      toast.custom((t) => (
-        <Toast variant="success" message="Conta excluída com sucesso" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.confirmDelete.success')}
+          toastId={toastId}
+        />
       ));
       await logout();
     } catch (error) {
-      const message = error instanceof Error ? error.message : 'Erro ao excluir. Tente novamente.';
+      const message =
+        error instanceof Error ? error.message : translate('common.account.confirmDelete.error');
       if (isOwner) {
         // Falha no delete do owner (ex.: senha inválida) — volta pro primeiro
         // modal com a mensagem do backend pra o usuário corrigir e tentar de novo.
         openDeleteAccount(message);
         return;
       }
-      toast.custom((t) => (
-        <Toast variant="error" message={message} toastId={t} />
+      toast.custom((toastId) => (
+        <Toast variant="error" message={message} toastId={toastId} />
       ));
     }
   };
@@ -65,17 +72,17 @@ export default function ConfirmDeleteAccountModal() {
         <div className="flex flex-col gap-5 p-4 lg:p-5">
           <DialogHeader className="p-0">
             <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Uma pena te ver ir!
+              {translate('common.account.confirmDelete.title')}
             </DialogTitle>
           </DialogHeader>
 
           <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
             <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
             <p className="paragraph-small-regular text-gray-600">
-              Todas suas{' '}
-              <span className="font-semibold text-gray-950">{pagesCount} páginas</span>{' '}
-              serão deletadas permanentemente. Essa ação é{' '}
-              <span className="font-semibold text-gray-950">irreversível!</span>
+              {translate.rich('common.account.confirmDelete.warning', {
+                count: String(pagesCount),
+                b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
+              })}
             </p>
           </div>
         </div>
@@ -84,7 +91,7 @@ export default function ConfirmDeleteAccountModal() {
 
         <div className="flex items-center gap-2 p-4 lg:p-5">
           <Button className="h-10 flex-1" onClick={close} disabled={isDeleting}>
-            Manter minha conta
+            {translate('common.account.confirmDelete.keepAccount')}
           </Button>
           <Button
             variant="secondary"
@@ -92,7 +99,9 @@ export default function ConfirmDeleteAccountModal() {
             onClick={handleConfirm}
             disabled={isDeleting}
           >
-            {isDeleting ? 'Excluindo...' : 'Excluir mesmo assim'}
+            {isDeleting
+              ? translate('common.account.confirmDelete.deleting')
+              : translate('common.account.confirmDelete.deleteAnyway')}
           </Button>
         </div>
       </DialogContent>

package/src/components/account/ConfirmGlobalPreferencesModal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import {
@@ -22,13 +23,14 @@ export default function ConfirmGlobalPreferencesModal({
   onConfirm,
   onCancel,
 }: ConfirmGlobalPreferencesModalProps) {
+  const translate = useTranslations();
   return (
     <Dialog open={open} onOpenChange={onCancel}>
       <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
         <DialogHeader className="sr-only">
-          <DialogTitle>Alterar preferências globais</DialogTitle>
+          <DialogTitle>{translate('common.account.globalPreferences.title')}</DialogTitle>
           <DialogDescription>
-            Confirmação de alteração de preferências globais da conta
+            {translate('common.account.globalPreferences.srDescription')}
           </DialogDescription>
         </DialogHeader>
 
@@ -38,14 +40,14 @@ export default function ConfirmGlobalPreferencesModal({
           </div>
           <div className="flex flex-col gap-2">
             <span className="paragraph-medium-semibold text-gray-950">
-              Alterar preferências globais
+              {translate('common.account.globalPreferences.title')}
             </span>
             <span className="paragraph-small-regular text-gray-600">
-              Você está alterando configurações que impactam{' '}
-              <span className="paragraph-small-semibold text-gray-950">
-                todos os usuários da conta
-              </span>
-              . Deseja confirmar?
+              {translate.rich('common.account.globalPreferences.warning', {
+                b: (chunks) => (
+                  <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
+                ),
+              })}
             </span>
           </div>
         </div>
@@ -54,10 +56,10 @@ export default function ConfirmGlobalPreferencesModal({
 
         <div className="flex items-center gap-2 p-5">
           <Button onClick={onConfirm} className="h-10!">
-            Confirmar
+            {translate('common.actions.confirm')}
           </Button>
           <Button variant="secondary" onClick={onCancel} className="h-10!">
-            Cancelar
+            {translate('common.actions.cancel')}
           </Button>
         </div>
       </DialogContent>

package/src/components/account/DeleteAccountModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { IconLock, IconAlertTriangle } from '@tabler/icons-react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
@@ -13,16 +14,16 @@ import usePasswordVisibility from '../../hooks/usePasswordVisibility';
 import { useAccountModals } from '../../store/useAccountModals';
 import { AccountSectionType } from '../../enums/AccountSectionType';
 
-const REASON_OPTIONS = [
-  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
-  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
-  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
-  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
-  { value: 'temporario', label: 'O cancelamento é temporário' },
-  { value: 'outro', label: 'Outro motivo' },
-];
-
 export default function DeleteAccountModal() {
+  const translate = useTranslations();
+  const reasonOptions = [
+    { value: 'sem-funcao', label: translate('common.account.deleteAccount.reasons.noFeature') },
+    { value: 'problemas', label: translate('common.account.deleteAccount.reasons.technical') },
+    { value: 'suporte', label: translate('common.account.deleteAccount.reasons.support') },
+    { value: 'demora', label: translate('common.account.deleteAccount.reasons.updates') },
+    { value: 'temporario', label: translate('common.account.deleteAccount.reasons.temporary') },
+    { value: 'outro', label: translate('common.account.deleteAccount.reasons.other') },
+  ];
   const {
     activeModal,
     deleteAccountError,
@@ -61,8 +62,12 @@ export default function DeleteAccountModal() {
   const handleDelete = (e: React.FormEvent) => {
     e.preventDefault();
     if (!isFormValid) {
-      toast.custom((t) => (
-        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.deleteAccount.requiredFields')}
+          toastId={toastId}
+        />
       ));
       return;
     }
@@ -80,18 +85,21 @@ export default function DeleteAccountModal() {
               <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
                 <IconAlertTriangle size={20} className="text-red-500" />
               </div>
-              <DialogTitle>Excluir conta</DialogTitle>
+              <DialogTitle>{translate('common.account.deleteAccount.title')}</DialogTitle>
               <DialogDescription className="paragraph-small-regular">
-                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
-                confirmar, sua conta e todos os seus dados serão excluídos.
+                {translate.rich('common.account.deleteAccount.description', {
+                  b: (chunks) => (
+                    <span className="font-semibold text-gray-950">{chunks}</span>
+                  ),
+                })}
               </DialogDescription>
             </DialogHeader>
 
             <SelectField
-              label="Motivo do cancelamento"
+              label={translate('common.account.deleteAccount.reasonLabel')}
               required
-              placeholder="Selecione"
-              options={REASON_OPTIONS}
+              placeholder={translate('common.account.deleteAccount.reasonPlaceholder')}
+              options={reasonOptions}
               value={reason}
               onChange={(value) => setReason(value as string)}
               className="h-10!"
@@ -99,24 +107,26 @@ export default function DeleteAccountModal() {
 
             <div>
               <TextAreaField
-                label="Descreva o que levou a tomar essa decisão"
+                label={translate('common.account.deleteAccount.descriptionLabel')}
                 required
-                placeholder="Explique sua decisão..."
+                placeholder={translate('common.account.deleteAccount.descriptionPlaceholder')}
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
                 rows={4}
                 maxLength={400}
               />
               <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
-                {description.length}/400 caracteres
+                {translate('common.account.deleteAccount.charactersCount', {
+                  count: String(description.length),
+                })}
               </span>
             </div>
 
             <FormField
               className="text-gray-600"
-              label="Senha"
+              label={translate('common.account.deleteAccount.passwordLabel')}
               type="password"
-              placeholder="Informe sua senha"
+              placeholder={translate('common.account.deleteAccount.passwordPlaceholder')}
               leftIcon={IconLock}
               value={password}
               onChange={(e) => {
@@ -137,10 +147,10 @@ export default function DeleteAccountModal() {
               className="h-10"
               type="submit"
             >
-              Excluir conta
+              {translate('common.account.deleteAccount.submit')}
             </Button>
             <Button variant="secondary" className="h-10" type="button" onClick={handleClose}>
-              Fechar
+              {translate('common.actions.close')}
             </Button>
           </div>
         </form>

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconShieldCheck } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import {
@@ -24,6 +25,7 @@ export default function DisableTwoFactorAuthModal({
   onClose,
   onSuccess,
 }: DisableTwoFactorAuthModalProps) {
+  const translate = useTranslations();
   const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =
     useDisableTwoFactorAuthForm({ onClose, onSuccess });
 
@@ -43,16 +45,17 @@ export default function DisableTwoFactorAuthModal({
             </div>
             <DialogHeader className="p-0 gap-2">
               <DialogTitle className="paragraph-medium-semibold text-gray-950">
-                Desabilitar autenticação 2FA
+                {translate('common.account.twoFactor.disableTitle')}
               </DialogTitle>
               <DialogDescription className="paragraph-small-regular text-gray-600">
-                Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a
-                desativação.
+                {translate('common.account.twoFactor.disableDescription')}
               </DialogDescription>
             </DialogHeader>
 
             <div className="flex flex-col gap-2">
-              <span className="paragraph-small-medium text-gray-700">Código do autenticador</span>
+              <span className="paragraph-small-medium text-gray-700">
+                {translate('common.account.twoFactor.authenticatorCode')}
+              </span>
               <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
                 <InputOTPGroup className="gap-2">
                   {Array.from({ length: 6 }).map((_, i) => (
@@ -69,7 +72,9 @@ export default function DisableTwoFactorAuthModal({
 
           <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
             <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
-              {isLoading ? 'Desabilitando...' : 'Desabilitar 2FA'}
+              {isLoading
+                ? translate('common.account.twoFactor.disabling')
+                : translate('common.account.twoFactor.disable')}
             </Button>
             <Button
               variant="secondary"
@@ -77,7 +82,7 @@ export default function DisableTwoFactorAuthModal({
               type="button"
               onClick={handleClose}
             >
-              Cancelar
+              {translate('common.actions.cancel')}
             </Button>
           </div>
         </form>

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -1,11 +1,13 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
 import { Button } from '../ui/buttons/Button';
 import { useAccountModals } from '../../store/useAccountModals';
 
 export default function IsntPossibleDeleteAccountModal() {
+  const translate = useTranslations();
   const { activeModal, close, config } = useAccountModals();
   const { onGoToSubscription } = config;
   const open = activeModal === 'isntPossibleDelete';
@@ -19,12 +21,12 @@ export default function IsntPossibleDeleteAccountModal() {
           </div>
           <DialogHeader className="p-0 gap-2">
             <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Não é possível excluir a conta
+              {translate('common.account.cantDelete.title')}
             </DialogTitle>
             <DialogDescription className="paragraph-small-regular text-gray-600">
-              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
-              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
-              página Assinatura e depois tente novamente.
+              {translate.rich('common.account.cantDelete.description', {
+                b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
+              })}
             </DialogDescription>
           </DialogHeader>
         </div>
@@ -33,14 +35,14 @@ export default function IsntPossibleDeleteAccountModal() {
 
         <div className="flex flex-row items-center gap-2">
           <Button className="h-10 flex-1" onClick={close}>
-            Ok, entendi
+            {translate('common.account.cantDelete.confirm')}
           </Button>
           <Button
             variant="secondary"
             className="h-10 flex-1"
             onClick={onGoToSubscription ?? close}
           >
-            Ir para assinatura
+            {translate('common.account.cantDelete.goToSubscription')}
           </Button>
         </div>
       </DialogContent>

package/src/components/account/TwoFactorAuthModal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
@@ -15,6 +16,7 @@ interface TwoFactorAuthModalProps {
 }
 
 export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
+  const translate = useTranslations();
   const {
     code,
     setCode,
@@ -46,11 +48,11 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
           className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
         >
           <DialogHeader className="sr-only">
-            <DialogTitle>Códigos de segurança</DialogTitle>
+            <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
           </DialogHeader>
           <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
             <span className="paragraph-medium-semibold text-gray-950 text-center">
-              Códigos de segurança
+              {translate('common.account.twoFactor.recoveryTitle')}
             </span>
             <Button
               type="button"
@@ -65,15 +67,12 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
           <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
             <div className="flex flex-col gap-2">
               <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
-                Salve estes códigos de recuperação de emergência
+                {translate('common.account.twoFactor.recoveryHeading')}
               </h3>
               <div className="paragraph-small-regular text-gray-600">
-                <p>
-                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta
-                  sem um código de dois fatores.
-                </p>
+                <p>{translate('common.account.twoFactor.recoveryText1')}</p>
                 <br />
-                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>
+                <p>{translate('common.account.twoFactor.recoveryText2')}</p>
               </div>
             </div>
 
@@ -90,17 +89,17 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                 onClick={handleCopyCodes}
               >
                 <IconCopy size={16} />
-                Copiar códigos
+                {translate('common.account.twoFactor.copyCodes')}
               </Button>
             </div>
           </div>
 
           <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
             <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              Cancelar
+              {translate('common.actions.cancel')}
             </Button>
             <Button className="h-10!" type="button" onClick={handleFinalize}>
-              Finalizar
+              {translate('common.account.twoFactor.finish')}
             </Button>
           </div>
         </DialogContent>
@@ -116,11 +115,11 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
         className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
       >
         <DialogHeader className="sr-only">
-          <DialogTitle>Autenticação de dois fatores</DialogTitle>
+          <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
         </DialogHeader>
         <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
           <span className="paragraph-medium-semibold text-gray-950 text-center">
-            Autenticação de dois fatores
+            {translate('common.account.twoFactor.title')}
           </span>
           <Button
             type="button"
@@ -142,17 +141,18 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
           <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
             <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
               <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
-                Instale um aplicativo autenticador no seu celular (ex.:{' '}
-                <a
-                  href="https://support.google.com/accounts/answer/1066447"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="paragraph-small-medium underline"
-                >
-                  Google Authenticator
-                </a>
-                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o
-                código de 6 dígitos gerado para continuar.
+                {translate.rich('common.account.twoFactor.instructions', {
+                  link: (chunks) => (
+                    <a
+                      href="https://support.google.com/accounts/answer/1066447"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="paragraph-small-medium underline"
+                    >
+                      {chunks}
+                    </a>
+                  ),
+                })}
               </p>
 
               <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
@@ -163,7 +163,9 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                     className="flex flex-col items-center gap-1.5 text-center"
                   >
                     <IconRefresh size={20} className="text-gray-400" />
-                    <span className="paragraph-xsmall-medium text-gray-500">Tentar novamente</span>
+                    <span className="paragraph-xsmall-medium text-gray-500">
+                      {translate('common.account.twoFactor.retry')}
+                    </span>
                   </button>
                 ) : isGenerating || !qrcode ? (
                   <div className="skeleton w-full h-full rounded" />
@@ -171,7 +173,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
                     src={qrcode}
-                    alt="QR Code para autenticação de dois fatores"
+                    alt={translate('common.account.twoFactor.qrAlt')}
                     className="w-full h-full"
                   />
                 )}
@@ -180,7 +182,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
               <div className="flex items-center gap-3 w-full">
                 <Separator className="flex-1" />
                 <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
-                  Cole os 6 dígitos abaixo
+                  {translate('common.account.twoFactor.pasteDigits')}
                 </span>
                 <Separator className="flex-1" />
               </div>
@@ -203,10 +205,12 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
 
           <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
             <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              Cancelar
+              {translate('common.actions.cancel')}
             </Button>
             <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
-              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}
+              {isConfirming
+                ? translate('common.account.twoFactor.activating')
+                : translate('common.account.twoFactor.activate')}
             </Button>
           </div>
         </form>

package/src/components/account/constants.ts

@@ -18,9 +18,12 @@ export const TIME_FORMAT_OPTIONS = [
   { value: '12h', label: '12 horas (AM/PM)', displayValue: '12 horas (AM/PM)' },
 ];
 
+// Catalog keys — consumers call translate(type) to get the localized label.
+// pt-br values: 'Atualizações de projetos' | 'Alertas de segurança' |
+//               'Mudanças no plano ou faturamento' | 'Manutenções programadas'
 export const NOTIFICATION_TYPES = [
-  'Atualizações de projetos',
-  'Alertas de segurança',
-  'Mudanças no plano ou faturamento',
-  'Manutenções programadas',
-];
+  'common.account.notificationTypes.projectUpdates',
+  'common.account.notificationTypes.securityAlerts',
+  'common.account.notificationTypes.planBilling',
+  'common.account.notificationTypes.scheduledMaintenance',
+] as const;