@greatapps/common 1.1.670 → 1.1.672

package/src/components/navigation/PendingCancellationBanner.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { IconAlertTriangle, IconX } from '@tabler/icons-react';
 import { formatShortDate } from '../../infra/utils/date';
+import { useTranslations } from 'next-intl';
 
 interface PendingCancellationBannerProps {
   limitDate?: Date | null;
@@ -13,6 +14,7 @@ export function PendingCancellationBanner({
   limitDate,
   onReactivate,
 }: PendingCancellationBannerProps) {
+  const translate = useTranslations();
   const [visible, setVisible] = useState(true);
   const [animated, setAnimated] = useState(false);
 
@@ -35,7 +37,7 @@ export function PendingCancellationBanner({
         <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
           <IconAlertTriangle size={16} className="text-zinc-950 shrink-0" />
           <span className="paragraph-xsmall-semibold text-zinc-950">
-            Sua assinatura foi cancelada, você possui até {formattedLimitDate} com suas páginas online.
+            {translate('common.navigation.banners.pending.message', { limitDate: formattedLimitDate ?? '' })}
           </span>
         </div>
         <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
@@ -45,7 +47,7 @@ export function PendingCancellationBanner({
             onClick={onReactivate}
           >
             <span className="paragraph-xsmall-semibold text-zinc-950 underline">
-              Reativar assinatura
+              {translate('common.navigation.banners.pending.reactivate')}
             </span>
           </button>
           <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>

package/src/components/navigation/ProjectSelectorPopover.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
 import {
   Button,
   Command,
@@ -61,6 +62,7 @@ export function ProjectSelectorPopover({
   onSearchChange,
   children,
 }: ProjectSelectorPopoverProps) {
+  const translate = useTranslations();
   const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
     if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
 
@@ -96,10 +98,10 @@ export function ProjectSelectorPopover({
       >
         <div className="flex flex-col p-3 gap-2">
           <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
+            <span className="paragraph-small-semibold">{translate('common.navigation.projectSelector.title')}</span>
           </div>
           <Command className="gap-2" defaultValue=" " shouldFilter={!onSearchChange} value=" " onValueChange={() => {}}>
-            <CommandInput placeholder="Busque aqui" value={search} onValueChange={onSearchChange} />
+            <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={onSearchChange} />
             <CommandList
               className="custom-scrollbar paragraph-small-medium text-gray-600 max-h-[227px]"
               onScroll={handleListScroll}
@@ -115,14 +117,14 @@ export function ProjectSelectorPopover({
                 <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
                   <IconFolderOpen size={28} className="text-gray-300" />
                   <span className="paragraph-small-medium text-center text-gray-500">
-                    Nenhum projeto encontrado.
+                    {translate('common.navigation.projectSelector.emptyLine1')}
                     <br />
-                    Crie um projeto para começar.
+                    {translate('common.navigation.projectSelector.emptyLine2')}
                   </span>
                 </div>
               ) : (
                 <>
-                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+                  <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>
                   {projects.map((project) => {
                     const isSelected = selectedProject?.id === project.id;
                     return (
@@ -167,7 +169,7 @@ export function ProjectSelectorPopover({
                 className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
                 onClick={onManageProjects}
               >
-                Gerenciar projetos
+                {translate('common.navigation.projectSelector.manageProjects')}
               </Button>
             </>
           )}

package/src/components/navigation/UpcomingInvoiceBanner.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { IconAlertTriangle, IconX } from '@tabler/icons-react';
 import { formatShortDate } from '../../infra/utils/date';
+import { useTranslations } from 'next-intl';
 
 interface UpcomingInvoiceBannerProps {
   dueDate?: Date | null;
@@ -10,6 +11,7 @@ interface UpcomingInvoiceBannerProps {
 }
 
 export function UpcomingInvoiceBanner({ dueDate, onDetails }: UpcomingInvoiceBannerProps) {
+  const translate = useTranslations();
   const [visible, setVisible] = useState(true);
   const [animated, setAnimated] = useState(false);
 
@@ -32,7 +34,7 @@ export function UpcomingInvoiceBanner({ dueDate, onDetails }: UpcomingInvoiceBan
         <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
           <IconAlertTriangle size={16} className="text-zinc-950 shrink-0" />
           <span className="paragraph-xsmall-semibold text-zinc-950">
-            Fatura em aberto. Pague até {formattedDueDate} para evitar a suspensão das suas páginas.
+            {translate('common.navigation.banners.upcoming.message', { dueDate: formattedDueDate ?? '' })}
           </span>
         </div>
         <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
@@ -41,7 +43,7 @@ export function UpcomingInvoiceBanner({ dueDate, onDetails }: UpcomingInvoiceBan
             className="flex items-center justify-center p-1.5 cursor-pointer"
             onClick={onDetails}
           >
-            <span className="paragraph-xsmall-semibold text-zinc-950 underline">Detalhes</span>
+            <span className="paragraph-xsmall-semibold text-zinc-950 underline">{translate('common.navigation.banners.upcoming.details')}</span>
           </button>
           <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
             <IconX size={18} className="text-zinc-700" />

package/src/components/navigation/subcomponents/BottomLinks.tsx

@@ -2,6 +2,7 @@
 
 import { IconHelp, IconBulb, IconStar, type TablerIcon } from '@tabler/icons-react';
 import { useIsDefaultWhitelabel, useWhitelabel } from '../../../providers/whitelabel.provider';
+import { useTranslations } from 'next-intl';
 
 interface BottomLink {
   label: string;
@@ -17,6 +18,7 @@ function openFrillWidget() {
 }
 
 export function BottomLinks() {
+  const translate = useTranslations();
   const { whitelabel } = useWhitelabel();
   const isMainWhitelabel = useIsDefaultWhitelabel();
 
@@ -26,7 +28,7 @@ export function BottomLinks() {
     ...(isMainWhitelabel
       ? [
           {
-            label: 'Novidades',
+            label: translate('common.navigation.bottomLinks.news'),
             icon: IconStar,
             className: 'novidades',
             onClick: openFrillWidget,
@@ -34,14 +36,14 @@ export function BottomLinks() {
         ]
       : []),
     {
-      label: 'Central de ajuda',
+      label: translate('common.navigation.bottomLinks.helpCenter'),
       icon: IconHelp,
       href: helpUrl,
     },
     ...(isMainWhitelabel
       ? [
           {
-            label: 'Enviar sugestões',
+            label: translate('common.navigation.bottomLinks.sendSuggestions'),
             icon: IconBulb,
             href: 'https://ideias.greatpages.com.br/b/y0geg1ve/feature-ideas',
           },

package/src/components/navigation/subcomponents/CreditsCard.tsx

@@ -2,6 +2,7 @@
 
 import { useAppNavigationContext } from '../AppNavigationContext';
 import { Progress } from '../../../index';
+import { useTranslations } from 'next-intl';
 import { useBuyCreditsModal } from '../../../store/useBuyCreditsModal';
 import { useCreditsDisabledModal } from '../../../store/useCreditsDisabledModal';
 import { useAuth } from '../../../providers/auth.provider';
@@ -13,6 +14,7 @@ export interface CreditsCardProps {
 }
 
 export function CreditsCard({ used, total, onClick }: CreditsCardProps) {
+  const translate = useTranslations();
   const { breakpoint } = useAppNavigationContext();
   const { openModal } = useBuyCreditsModal();
   const { openModal: openDisabledModal } = useCreditsDisabledModal();
@@ -35,7 +37,7 @@ export function CreditsCard({ used, total, onClick }: CreditsCardProps) {
       onClick={handleClick}
     >
       <div className="flex items-center justify-between">
-        <span className="paragraph-xsmall-semibold text-white">Créditos usados</span>
+        <span className="paragraph-xsmall-semibold text-white">{translate('common.navigation.creditsCard.label')}</span>
         <span className="paragraph-xsmall-medium text-white/50">{used} / {total}</span>
       </div>
       <Progress className="bg-white/10 h-[6px]" indicatorColor="bg-white" value={Math.round((used / total) * 100)} />

package/src/components/navigation/subcomponents/PlanCard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button, Progress } from '../../../index';
+import { useTranslations } from 'next-intl';
 
 export interface PlanCardProps {
   planName: string;
@@ -10,6 +11,7 @@ export interface PlanCardProps {
 }
 
 export function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }: PlanCardProps) {
+  const translate = useTranslations();
   return (
     <div className="flex flex-col rounded-md p-4 gap-4 bg-gray-50">
       <div className="flex flex-col gap-1">
@@ -22,7 +24,7 @@ export function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }: P
         className="paragraph-small-semibold text-gray-950"
         onClick={onKnowPlans}
       >
-        Conheça os planos
+        {translate('common.navigation.planCard.knowPlans')}
       </Button>
     </div>
   );

package/src/components/navigation/subcomponents/ProjectSelector.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useMemo, RefObject } from 'react';
+import { useTranslations } from 'next-intl';
 import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
 import { useAppNavigationContext } from '../AppNavigationContext';
 import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
@@ -30,6 +31,7 @@ export function ProjectSelector({
   onSelectProject,
   onManageProjects,
 }: ProjectSelectorProps) {
+  const translate = useTranslations();
   const isMainWhitelabel = useIsDefaultWhitelabel();
   const { breakpoint } = useAppNavigationContext();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -124,10 +126,10 @@ export function ProjectSelector({
       {activeSection === 'projects' && (
         <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
           <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
+            <span className="paragraph-small-semibold">{translate('common.navigation.projectSelector.title')}</span>
           </div>
           <Command className="gap-2" shouldFilter={false}>
-            <CommandInput placeholder="Busque aqui" value={search} onValueChange={setSearch} />
+            <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={setSearch} />
             <CommandList
               className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
               onScroll={(event) => {
@@ -141,7 +143,7 @@ export function ProjectSelector({
                 }
               }}
             >
-              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>
               {showListSkeleton ? (
                 <>
                   <ProjectItemSkeleton />

package/src/components/pages/NotFoundPage.tsx

@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import { useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { Button } from "../ui/buttons/Button";
@@ -18,6 +19,7 @@ function GreatAppsLogo() {
 }
 
 export function NotFoundPage() {
+  const translate = useTranslations();
   const router = useRouter();
 
   useEffect(() => {
@@ -47,11 +49,11 @@ export function NotFoundPage() {
         </div>
 
         <h1 className="max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]">
-          Página não foi encontrada!
+          {translate('common.notFound.title')}
         </h1>
 
         <p className="max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0">
-          A página que você está procurando não existe. Verifique se digitou corretamente o link que está procurando.
+          {translate('common.notFound.description')}
         </p>
 
         <Button
@@ -65,7 +67,7 @@ export function NotFoundPage() {
             }
           }}
         >
-          Voltar para o início
+          {translate('common.notFound.backToHome')}
         </Button>
       </div>
     </div>

package/src/components/pages/notifications/Notifications.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { IconBell, IconCheck, IconLoader2 } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { Button } from "../../ui/buttons/Button";
 import {
   Tabs,
@@ -34,6 +35,7 @@ function NotificationsList({
   hasNextPage: boolean;
   fetchNextPage: () => void;
 }) {
+  const translate = useTranslations();
   const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
@@ -50,7 +52,7 @@ function NotificationsList({
     return (
       <div className="rounded-lg border border-zinc-200 bg-white">
         <div className="flex flex-col items-center justify-center py-16 gap-2">
-          <span className="paragraph-medium-regular text-zinc-500">Nenhuma notificação encontrada.</span>
+          <span className="paragraph-medium-regular text-zinc-500">{translate('common.notifications.page.empty')}</span>
         </div>
       </div>
     );
@@ -80,7 +82,7 @@ function NotificationsList({
             actions={
               detailsUrl ? (
                 <Button asChild variant="secondary" className="h-8! px-3! paragraph-small-semibold">
-                  <Link href={detailsUrl}>Detalhes</Link>
+                  <Link href={detailsUrl}>{translate('common.notifications.page.details')}</Link>
                 </Button>
               ) : undefined
             }
@@ -97,6 +99,7 @@ function NotificationsList({
 }
 
 export function NotificationPageContent() {
+  const translate = useTranslations();
   const unreadNotifications = useInfiniteMessages({
     readed: false,
     type: "notification",
@@ -116,12 +119,12 @@ export function NotificationPageContent() {
     markAllAsRead(undefined, {
       onSuccess: () => {
         toast.custom((t) => (
-          <Toast variant="success" message="Todas as notificações foram marcadas como lidas" toastId={t} />
+          <Toast variant="success" message={translate('common.notifications.page.markAllSuccess')} toastId={t} />
         ));
       },
       onError: () => {
         toast.custom((t) => (
-          <Toast variant="error" message="Erro ao marcar notificações como lidas" toastId={t} />
+          <Toast variant="error" message={translate('common.notifications.page.markAllError')} toastId={t} />
         ));
       },
     });
@@ -132,10 +135,10 @@ export function NotificationPageContent() {
       <div className="flex items-center justify-between gap-4">
         <div className="flex flex-col gap-2">
           <h1 className="title-large-semibold text-gray-950">
-            Notificações
+            {translate('common.notifications.page.title')}
           </h1>
           <p className="paragraph-small-regular text-gray-600 hidden lg:block">
-            Tenha controle total sobre páginas, experiências e conversões.
+            {translate('common.notifications.page.subtitle')}
           </p>
         </div>
         <Button
@@ -145,8 +148,8 @@ export function NotificationPageContent() {
           disabled={isMarkingAll || totalUnread === 0}
         >
           {isMarkingAll ? <IconLoader2 size={20} className="animate-spin" /> : <IconCheck size={20} />}
-          <span className="lg:block hidden">Marcar todos como lidos</span>
-          <span className="lg:hidden">Marcar como lidos</span>
+          <span className="lg:block hidden">{translate('common.notifications.page.markAllReadDesktop')}</span>
+          <span className="lg:hidden">{translate('common.notifications.page.markAllReadMobile')}</span>
         </Button>
       </div>
       <Tabs
@@ -155,11 +158,11 @@ export function NotificationPageContent() {
       >
         <TabsList className="h-auto pb-0 bg-transparent">
           <TabsTrigger className="gap-2" value="all">
-            Todas as notificações{" "}
+            {translate('common.notifications.page.tabAll')}{" "}
             <span className="text-gray-500">({totalAll})</span>
           </TabsTrigger>
           <TabsTrigger className="gap-2" value="unreads" disabled={totalUnread === 0}>
-            Não lidas{" "}
+            {translate('common.notifications.page.tabUnread')}{" "}
             <span className="text-gray-500">({totalUnread})</span>
           </TabsTrigger>
         </TabsList>

package/src/components/ui/buttons/CopyButton.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconCheck, IconCopy } from '@tabler/icons-react';
 import { toast } from "sonner";
 import { Toast } from "../feedback/Toast";
@@ -19,18 +20,22 @@ export function CopyButton({
   textToCopy,
   size = 14,
   className,
-  tooltipText = "Copiar link",
-  successMessage = "Link copiado",
+  tooltipText,
+  successMessage,
 }: CopyButtonProps) {
+  const translate = useTranslations();
+  const resolvedTooltipText = tooltipText ?? translate('common.forms.copyButton.tooltipDefault');
+  const resolvedSuccessMessage = successMessage ?? translate('common.forms.copyButton.successDefault');
+
   const { isCopied, copy } = useCopyToClipboard({
     onSuccess: () => {
       toast.custom((t) => (
-        <Toast variant="success" message={successMessage} toastId={t} />
+        <Toast variant="success" message={resolvedSuccessMessage} toastId={t} />
       ));
     },
     onError: () => {
       toast.custom((t) => (
-        <Toast variant="error" message="Não foi possível copiar o link" toastId={t} />
+        <Toast variant="error" message={translate('common.forms.copyButton.errorMessage')} toastId={t} />
       ));
     },
   });
@@ -48,7 +53,7 @@ export function CopyButton({
           {isCopied ? <IconCheck size={size} /> : <IconCopy size={size} />}
         </span>
       </TooltipTrigger>
-      <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>
+      <TooltipContent>{isCopied ? translate('common.actions.copied') : resolvedTooltipText}</TooltipContent>
     </Tooltip>
   );
 }

package/src/components/ui/data-display/CardItem.tsx

@@ -10,6 +10,7 @@ import { CardBrandIcon } from './CardBrandIcons';
 import { useSetDefaultCard } from '../../../modules/cards/hooks/set-default-card.hook';
 import { useHandleDeleteCard } from '../../../modules/cards/hooks/handle-delete-card.hook';
 import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
 
 type CardItemProps = {
   card: Card;
@@ -32,6 +33,7 @@ export function CardItem({
   onAfterDelete,
   onAfterSetDefault,
 }: CardItemProps) {
+  const translate = useTranslations();
   const [popoverOpen, setPopoverOpen] = useState(false);
 
   const setDefaultCardMutation = useSetDefaultCard();
@@ -44,7 +46,7 @@ export function CardItem({
         toast.custom((t) => (
           <Toast
             variant="success"
-            message="Cartão definido como padrão"
+            message={translate('common.cards.item.setDefaultSuccess')}
             toastId={t}
           />
         ));
@@ -54,7 +56,7 @@ export function CardItem({
         toast.custom((t) => (
           <Toast
             variant="error"
-            message="Erro ao definir cartão padrão"
+            message={translate('common.cards.item.setDefaultError')}
             toastId={t}
           />
         ));
@@ -86,7 +88,7 @@ export function CardItem({
       </div>
       {card.is_default && (
         <span className="paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap">
-          Padrão
+          {translate('common.cards.item.defaultBadge')}
         </span>
       )}
       <CardBrandIcon brand={card.brand} />
@@ -108,7 +110,7 @@ export function CardItem({
             {menuHasSetDefault && (
               <NavBarItem
                 icon={<IconStar size={18} className="text-zinc-400" />}
-                label="Tornar padrão"
+                label={translate('common.cards.item.makeDefault')}
                 onClick={() => {
                   setPopoverOpen(false);
                   handleSetDefault();
@@ -118,7 +120,7 @@ export function CardItem({
             {menuHasDelete && (
               <NavBarItem
                 icon={<IconTrash size={18} className="text-zinc-400" />}
-                label="Excluir"
+                label={translate('common.actions.delete')}
                 onClick={() => {
                   setPopoverOpen(false);
                   handleDeleteCard(card);

package/src/components/ui/data-display/PaymentInfoCard.tsx

@@ -9,6 +9,7 @@ import { useCards } from '../../../modules/cards/hooks/cards.hook';
 import { useModalManager } from '../../../store/useModalManager';
 import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
 
 type PaymentInfoCardProps = {
   email?: string;
@@ -29,6 +30,7 @@ export function PaymentInfoCard({
   hideDelete,
   hideSetDefault,
 }: PaymentInfoCardProps) {
+  const translate = useTranslations();
   const isMobile = useIsMobile();
   const { openModal } = useModalManager();
   const isDefaultWl = useIsDefaultWhitelabel();
@@ -83,19 +85,19 @@ export function PaymentInfoCard({
       <div className="border border-zinc-200 rounded-lg overflow-hidden">
         {email && (
           <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
-            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
+            <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.email')}</span>
             <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
           </div>
         )}
         <div className="flex items-center h-[60px] px-4 gap-3">
-          <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
+          <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.payment')}</span>
           <button
             type="button"
             onClick={handleOpenAddCardModal}
             className="flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit"
           >
             <IconPlus className="size-[18px]" />
-            <span className="px-1.5">Adicionar cartão</span>
+            <span className="px-1.5">{translate('common.cards.paymentInfo.addCard')}</span>
           </button>
         </div>
       </div>
@@ -107,7 +109,7 @@ export function PaymentInfoCard({
       <div className="border border-zinc-200 rounded-lg overflow-hidden">
         {email && (
           <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
-            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
+            <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.email')}</span>
             <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
           </div>
         )}
@@ -118,7 +120,7 @@ export function PaymentInfoCard({
         >
           {!isExpanded ? (
             <>
-              <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
+              <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.payment')}</span>
               <div className="flex flex-col gap-0.5 flex-1 min-w-0">
                 <span className="paragraph-small-semibold text-zinc-950 truncate">
                   {selectedCard?.name}
@@ -135,7 +137,7 @@ export function PaymentInfoCard({
           ) : (
             <>
               <span className="paragraph-small-semibold text-zinc-950 flex-1">
-                Selecione a forma de pagamento
+                {translate('common.cards.paymentInfo.selectPaymentMethod')}
               </span>
               <div className="size-8 flex items-center justify-center rounded-lg">
                 <IconChevronDown className="size-[18px] text-zinc-500 rotate-180" />
@@ -170,7 +172,7 @@ export function PaymentInfoCard({
                   : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
               }`}
             >
-              Gerenciar cartões
+              {translate('common.cards.paymentInfo.manageCards')}
             </button>
           )}
         </div>
@@ -183,7 +185,7 @@ export function PaymentInfoCard({
       >
         <IconPlus className="size-[18px]" />
         <span className="px-1.5">
-          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}
+          {isExpanded ? translate('common.cards.paymentInfo.addCard') : translate('common.cards.paymentInfo.newPaymentMethod')}
         </span>
       </button>
     </div>

package/src/components/ui/feedback/DefaultCircularProgress.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import {
   calculateRadius,
   calculateCircumference,
@@ -21,6 +22,7 @@ export default function DefaultCircularProgress({
   size = 62,
   strokeWidth = 3,
 }: CircularProgressProps) {
+  const translate = useTranslations();
   const isDefaultWl = useIsDefaultWhitelabel();
   const radius = calculateRadius(size, strokeWidth);
   const circumference = calculateCircumference(radius);
@@ -35,7 +37,7 @@ export default function DefaultCircularProgress({
       aria-valuenow={current}
       aria-valuemin={0}
       aria-valuemax={total}
-      aria-label="Progresso de exportação"
+      aria-label={translate('common.forms.circularProgress.ariaLabel')}
     >
       <svg width={size} height={size} className="absolute">
         <circle

package/src/components/ui/form/ComboboxField.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useMemo } from 'react';
+import { useTranslations } from 'next-intl';
 import { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
 import { cn } from '../../../infra/utils/clsx';
@@ -28,9 +29,9 @@ interface ComboboxFieldProps {
 export function ComboboxField({
   options,
   label,
-  placeholder = 'Selecione uma opção',
-  searchPlaceholder = 'Buscar...',
-  emptyMessage = 'Nenhuma opção encontrada.',
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
   value,
   onChange,
   disabled = false,
@@ -38,6 +39,10 @@ export function ComboboxField({
   className,
   containerClassName,
 }: ComboboxFieldProps) {
+  const translate = useTranslations();
+  const resolvedPlaceholder = placeholder ?? translate('common.forms.combobox.placeholder');
+  const resolvedSearchPlaceholder = searchPlaceholder ?? translate('common.forms.combobox.searchPlaceholder');
+  const resolvedEmptyMessage = emptyMessage ?? translate('common.forms.combobox.emptyMessage');
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState('');
 
@@ -90,7 +95,7 @@ export function ComboboxField({
             <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>
               {selectedOption
                 ? (selectedOption.displayValue ?? selectedOption.label)
-                : placeholder}
+                : resolvedPlaceholder}
             </span>
             {icon ?? (
               <IconChevronDown
@@ -114,7 +119,7 @@ export function ComboboxField({
             <IconSearch className="size-4 shrink-0 opacity-50 text-gray-500" />
             <input
               autoFocus
-              placeholder={searchPlaceholder}
+              placeholder={resolvedSearchPlaceholder}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
@@ -123,7 +128,7 @@ export function ComboboxField({
 
           <div className="overflow-y-auto max-h-[280px] p-1">
             {filteredOptions.length === 0 ? (
-              <p className="py-6 text-center paragraph-small-medium text-gray-500">{emptyMessage}</p>
+              <p className="py-6 text-center paragraph-small-medium text-gray-500">{resolvedEmptyMessage}</p>
             ) : (
               filteredOptions.map((option) => {
                 const isSelected = value === option.value;