@greatapps/common 1.1.671 → 1.1.673

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;

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, forwardRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { format } from "date-fns";
 import { Calendar } from "./Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
@@ -23,9 +24,11 @@ interface DatePickerProps {
 
 export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
   (
-    { value, onChange, placeholder = "Selecione a data", className, disabled },
+    { value, onChange, placeholder, className, disabled },
     ref,
   ) => {
+    const translate = useTranslations();
+    const resolvedPlaceholder = placeholder ?? translate('common.forms.datePicker.placeholder');
     const [open, setOpen] = useState(false);
     const [date, setDate] = useState<Date | undefined>(() => {
       return value ? isoParaDataLocal(value) : undefined;
@@ -51,7 +54,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
       }
     };
 
-    const displayText = date ? format(date, "dd/MM/yyyy") : placeholder;
+    const displayText = date ? format(date, "dd/MM/yyyy") : resolvedPlaceholder;
 
     return (
       <Popover open={open} onOpenChange={setOpen}>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, forwardRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { format } from "date-fns";
 import { IconCalendar } from '@tabler/icons-react';
 import { DateRange } from "react-day-picker";
@@ -24,7 +25,9 @@ interface DateRangePickerProps {
 }
 
 export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProps>(
-  ({ value, onChange, placeholder = "Selecione o período", className, disabled }, ref) => {
+  ({ value, onChange, placeholder, className, disabled }, ref) => {
+    const translate = useTranslations();
+    const resolvedPlaceholder = placeholder ?? translate('common.forms.dateRangePicker.placeholder');
     const [open, setOpen] = useState(false);
     const [range, setRange] = useState<DateRange | undefined>(() => {
       if (value?.from && value?.to) {
@@ -62,7 +65,7 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
 
     const displayText = range?.from && range?.to
       ? `${format(range.from, "dd/MM/yyyy")} - ${format(range.to, "dd/MM/yyyy")}`
-      : placeholder;
+      : resolvedPlaceholder;
 
     return (
       <Popover open={open} onOpenChange={setOpen}>

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
 import { AsYouType, CountryCode } from 'libphonenumber-js';
 import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';
 import { IconChevronDown, IconSearch } from '@tabler/icons-react';
@@ -41,6 +42,7 @@ export default function PhoneInput({
   classnameContainer,
   className,
 }: PhoneInputProps) {
+  const translate = useTranslations();
   const parsed = parsePhoneValue(value ?? '');
   const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);
   const [phoneNumber, setPhoneNumber] = useState(parsed.number);
@@ -115,7 +117,7 @@ export default function PhoneInput({
       {label && (
         <div className="flex items-center gap-1 paragraph-xsmall-semibold">
           <span className="text-zinc-600">{label}</span>
-          {optional && <span className="text-zinc-500">(Opcional)</span>}
+          {optional && <span className="text-zinc-500">{translate('common.forms.phoneInput.optional')}</span>}
           {required && <span className="text-red-600">*</span>}
         </div>
       )}
@@ -148,7 +150,7 @@ export default function PhoneInput({
               <input
                 type="text"
                 className="flex-1 text-sm outline-none placeholder:text-zinc-400"
-                placeholder="Buscar país..."
+                placeholder={translate('common.forms.phoneInput.searchPlaceholder')}
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 autoFocus
@@ -175,7 +177,7 @@ export default function PhoneInput({
                 </button>
               ))}
               {filtered.length === 0 && (
-                <p className="text-sm text-zinc-500 p-3 text-center">Nenhum país encontrado</p>
+                <p className="text-sm text-zinc-500 p-3 text-center">{translate('common.forms.phoneInput.emptyMessage')}</p>
               )}
             </div>
           </PopoverContent>

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

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import {
   Select,
   SelectContent,
@@ -41,7 +42,7 @@ export function SelectField({
   hintMessage,
   error = false,
   errorMessage,
-  placeholder = 'Selecione uma opção',
+  placeholder,
   options,
   value,
   defaultValue,
@@ -51,6 +52,8 @@ export function SelectField({
   className,
   containerClassName,
 }: SelectFieldProps) {
+  const translate = useTranslations();
+  const resolvedPlaceholder = placeholder ?? translate('common.forms.select.placeholder');
   const handleValueChange = (selectedValue: string) => {
     if (!onChange) return;
     const selectedOption = options.find((option) => String(option.value) === selectedValue);
@@ -67,7 +70,7 @@ export function SelectField({
       {label && (
         <div className="flex items-center gap-1 paragraph-xsmall-semibold">
           <span className="text-gray-600">{label}</span>
-          {optional && <span className="text-gray-500">(Opcional)</span>}
+          {optional && <span className="text-gray-500">{translate('common.forms.select.optional')}</span>}
           {required && <span className="text-red-600">*</span>}
         </div>
       )}
@@ -89,7 +92,7 @@ export function SelectField({
           )}
           icon={icon}
         >
-          <SelectValue placeholder={placeholder}>
+          <SelectValue placeholder={resolvedPlaceholder}>
             {value !== undefined &&
               (() => {
                 const selectedOption = options.find((opt) => String(opt.value) === String(value));

package/src/components/widgets/ImageUpload/ImageCropModal.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
+import { useTranslations } from 'next-intl'
 import ReactCrop, {
   type Crop,
   centerCrop,
@@ -178,6 +179,7 @@ export function ImageCropModal({
   fileName,
   onSelectAnother,
 }: ImageCropModalProps) {
+  const translate = useTranslations()
   const imgRef = useRef<HTMLImageElement>(null)
   const [crop, setCrop] = useState<Crop>()
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
@@ -301,22 +303,28 @@ export function ImageCropModal({
           <>
             <DialogHeader className="p-5">
               <DialogTitle className="text-center text-[16px]!">
-                {dimensionText ? `Foto menor que ${dimensionText}` : 'Foto muito pequena'}
+                {dimensionText
+                  ? translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })
+                  : translate('common.imageUpload.tooSmallTitleGeneric')}
               </DialogTitle>
             </DialogHeader>
 
             <div className="px-5 pb-5">
               <p className="paragraph-small-regular text-zinc-600 text-center">
-                {fileName ? `O arquivo "${fileName}"` : 'A imagem selecionada'} é menor
-                {dimensionText ? ` que ${dimensionText}` : ' que o tamanho mínimo exigido'}.
-                {' '}Faça envio de uma imagem {dimensionText ? `com pelo menos ${dimensionText}` : 'maior'} para continuar.
+                {fileName && dimensionText
+                  ? translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })
+                  : fileName && !dimensionText
+                    ? translate('common.imageUpload.tooSmallBodyFileGeneric', { fileName })
+                    : !fileName && dimensionText
+                      ? translate('common.imageUpload.tooSmallBodyNoFileWithDimension', { dimensionText })
+                      : translate('common.imageUpload.tooSmallBodyNoFileGeneric')}
               </p>
             </div>
 
             <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-              {onSelectAnother && <Button onClick={onSelectAnother}>Enviar outra</Button>}
+              {onSelectAnother && <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>}
               <Button variant="secondary" onClick={handleCancel}>
-                Cancelar
+                {translate('common.actions.cancel')}
               </Button>
             </DialogFooter>
           </>
@@ -324,7 +332,7 @@ export function ImageCropModal({
           <>
             <DialogHeader className="p-5">
               <DialogTitle className="text-center text-[16px]!">
-                Ajustar imagem
+                {translate('common.imageUpload.cropTitle')}
               </DialogTitle>
             </DialogHeader>
 
@@ -344,7 +352,7 @@ export function ImageCropModal({
                     <img
                       ref={imgRef}
                       src={imageSrc}
-                      alt="Crop"
+                      alt={translate('common.imageUpload.cropAlt')}
                       onLoad={onCropImgLoad}
                       draggable={false}
                       className="max-h-[50vh] object-contain select-none"
@@ -354,16 +362,16 @@ export function ImageCropModal({
               </div>
 
               <p className="paragraph-small-regular text-zinc-500 text-center">
-                Arraste para ajustar a área de corte
+                {translate('common.imageUpload.cropHint')}
               </p>
             </div>
 
             <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
               <Button onClick={handleConfirm} disabled={imageStatus !== 'ok' || !crop}>
-                Confirmar
+                {translate('common.actions.confirm')}
               </Button>
               <Button variant="secondary" onClick={handleCancel}>
-                Cancelar
+                {translate('common.actions.cancel')}
               </Button>
             </DialogFooter>
           </>

package/src/components/widgets/ImageUpload/ImageTooSmallModal.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useTranslations } from 'next-intl'
 import {
   Dialog,
   DialogContent,
@@ -28,6 +29,7 @@ export function ImageTooSmallModal({
   onSelectAnother,
   onCancel,
 }: ImageTooSmallModalProps) {
+  const translate = useTranslations()
   const dimensionText = `${minWidth}x${minHeight}px`
 
   return (
@@ -38,21 +40,20 @@ export function ImageTooSmallModal({
       >
         <DialogHeader className="p-5">
           <DialogTitle className="text-center text-[16px]!">
-            Foto menor que {dimensionText}
+            {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}
           </DialogTitle>
         </DialogHeader>
 
         <div className="px-5 pb-5">
           <p className="paragraph-small-regular text-zinc-600 text-center">
-            O arquivo "{fileName}" é menor que {dimensionText}. Faça envio de
-            uma imagem com pelo menos {dimensionText} para continuar.
+            {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}
           </p>
         </div>
 
         <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-          <Button onClick={onSelectAnother}>Enviar outra</Button>
+          <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>
           <Button variant="secondary" onClick={onCancel}>
-            Cancelar
+            {translate('common.actions.cancel')}
           </Button>
         </DialogFooter>
       </DialogContent>