@greatapps/common 1.1.670 → 1.1.672

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>

package/src/i18n/messages/en-us.ts

@@ -224,6 +224,240 @@ const messages = {
     },
   },
 
+  credits: {
+    buy: {
+      title: 'Buy AI credits',
+      externalTitle: 'AI Credits',
+      externalDescription: 'To purchase AI credits, visit your subscription area.',
+      externalButton: 'Go to subscription area',
+      creditsOptionLabel: '{credits} AI credits',
+      creditsOptionDisplayValue: '{credits} AI credits',
+      paymentOnConfirm: 'Payment will be processed at the time of confirmation.',
+      nextInvoiceChanges: 'Changes will take effect from your next invoice.',
+      defaultPrice: 'Default',
+      immediateCharge: 'Immediate charge',
+      totalPlanValue: 'Total plan value',
+      confirmAndPay: 'Confirm and pay',
+      creditsChangedToast: 'AI credits changed to {credits}',
+    },
+    disabled: {
+      title: 'Credit purchase unavailable',
+      descriptionLine1: 'Only administrators and owners can purchase AI credits.',
+      descriptionLine2:
+        'Ask an account administrator or owner to purchase more credits.',
+      understood: 'Got it',
+    },
+    paidPlanRequired: {
+      defaultTitle: 'Feature available on paid plans',
+      defaultDescription: 'To access this feature, upgrade to a paid plan',
+      knowPlans: 'View plans',
+    },
+  },
+
+  cards: {
+    add: {
+      stepBilling: 'Billing',
+      stepCard: 'Card',
+      externalTitle: 'Card management unavailable',
+      externalDescription: 'Access your subscription area to manage payment methods.',
+      externalButton: 'Go to subscription area',
+      title: 'Add card',
+      billingHeading: 'Add your billing information',
+      cardHeading: 'Add your card information',
+      authenticating: 'Authenticating...',
+      submitting: 'Adding card...',
+      submit: 'Add card',
+      errorInitAuth: 'Unable to start card authentication, please try again.',
+      errorAuth: 'Card authentication failed.',
+      errorAuthStatus: 'Authentication not completed (status: {status}).',
+      statusUnknown: 'unknown',
+      successToast: 'Card added successfully.',
+      errorSave: 'Unable to save your new card, please try again.',
+    },
+    form: {
+      nameOnCard: 'Name on card',
+      typeHere: 'Type here',
+      cardNumber: 'Card number',
+      cardExpiry: 'Expiration date',
+      cardCvc: 'CVC',
+      country: 'Country',
+      select: 'Select',
+      personType: 'Person type',
+      personTypePf: 'Individual',
+      personTypePj: 'Business',
+      cpf: 'CPF',
+      cnpj: 'CNPJ',
+      fullName: 'Full name',
+      cep: 'CEP',
+      street: 'Address',
+      streetNumber: 'Number',
+      city: 'City',
+      state: 'UF',
+      neighborhood: 'Neighborhood',
+      complement: 'Complement',
+      cardNumberRequired: 'Card number is required',
+      cardExpiryRequired: 'Expiration date is required',
+      cardCvcRequired: 'Security code is required',
+    },
+    delete: {
+      title: 'Delete card',
+      description: 'Are you sure you want to delete the card:',
+      confirmLabel: 'Type DELETE below',
+      confirmPlaceholder: 'DELETE',
+      deleting: 'Deleting...',
+      successToast: 'Card •••• {digits} deleted successfully',
+      errorToast: 'Unable to delete card',
+    },
+    cannotDelete: {
+      title: 'Cannot delete this card',
+      description: 'This card is in use and has an active subscription linked to it. Select another card as default or add a new one.',
+      selectDefault: 'Select a card as default:',
+      addNewCard: 'Add new card',
+      errorUpdateCard: 'Error updating subscription card',
+    },
+    item: {
+      defaultBadge: 'Default',
+      makeDefault: 'Make default',
+      setDefaultSuccess: 'Card set as default',
+      setDefaultError: 'Error setting card as default',
+    },
+    paymentInfo: {
+      email: 'Email',
+      payment: 'Payment',
+      addCard: 'Add card',
+      selectPaymentMethod: 'Select payment method',
+      manageCards: 'Manage cards',
+      newPaymentMethod: 'New payment method',
+    },
+  },
+  navigation: {
+    banners: {
+      cancelled: {
+        message: 'Subscription cancelled! Your pages are now offline.',
+        choosePlan: 'Choose a new plan',
+      },
+      overdue: {
+        message: 'Your subscription is overdue and your pages may be taken offline at any time.',
+        details: 'Details',
+      },
+      pending: {
+        message: 'Your subscription was cancelled. You have until {limitDate} with your pages online.',
+        reactivate: 'Reactivate subscription',
+      },
+      upcoming: {
+        message: 'Invoice pending. Pay by {dueDate} to avoid suspension of your pages.',
+        details: 'Details',
+      },
+    },
+    projectSelector: {
+      title: 'Projects',
+      searchPlaceholder: 'Search here',
+      emptyLine1: 'No projects found.',
+      emptyLine2: 'Create a project to get started.',
+      noResults: 'No results found.',
+      manageProjects: 'Manage projects',
+    },
+    bottomLinks: {
+      news: 'News',
+      helpCenter: 'Help center',
+      sendSuggestions: 'Send suggestions',
+    },
+    creditsCard: {
+      label: 'Credits used',
+    },
+    planCard: {
+      knowPlans: 'View plans',
+    },
+  },
+  forms: {
+    combobox: {
+      placeholder: 'Select an option',
+      searchPlaceholder: 'Search...',
+      emptyMessage: 'No options found.',
+    },
+    datePicker: {
+      placeholder: 'Select date',
+    },
+    dateRangePicker: {
+      placeholder: 'Select period',
+    },
+    phoneInput: {
+      optional: '(Optional)',
+      searchPlaceholder: 'Search country...',
+      emptyMessage: 'No countries found',
+    },
+    select: {
+      placeholder: 'Select an option',
+      optional: '(Optional)',
+    },
+    copyButton: {
+      tooltipDefault: 'Copy link',
+      successDefault: 'Link copied',
+      errorMessage: 'Unable to copy link',
+    },
+    circularProgress: {
+      ariaLabel: 'Export progress',
+    },
+  },
+  imageUpload: {
+    cropTitle: 'Adjust image',
+    cropHint: 'Drag to adjust the crop area',
+    cropAlt: 'Crop',
+    tooSmallTitleWithDimension: 'Image smaller than {dimensionText}',
+    tooSmallTitleGeneric: 'Image too small',
+    tooSmallBodyFileWithDimension: 'The file "{fileName}" is smaller than {dimensionText}. Upload an image with at least {dimensionText} to continue.',
+    tooSmallBodyFileGeneric: 'The file "{fileName}" is smaller than the minimum required size. Upload a larger image to continue.',
+    tooSmallBodyNoFileWithDimension: 'The selected image is smaller than {dimensionText}. Upload an image with at least {dimensionText} to continue.',
+    tooSmallBodyNoFileGeneric: 'The selected image is smaller than the minimum required size. Upload a larger image to continue.',
+    sendAnother: 'Upload another',
+  },
+  notifications: {
+    page: {
+      title: 'Notifications',
+      subtitle: 'Have full control over pages, experiences, and conversions.',
+      markAllReadDesktop: 'Mark all as read',
+      markAllReadMobile: 'Mark as read',
+      tabAll: 'All notifications',
+      tabUnread: 'Unread',
+      details: 'Details',
+      empty: 'No notifications found.',
+      markAllSuccess: 'All notifications marked as read',
+      markAllError: 'Error marking notifications as read',
+    },
+    popover: {
+      title: 'Latest notifications',
+      empty: 'No notifications yet',
+      viewAll: 'All notifications',
+    },
+  },
+  layout: {
+    navbar: {
+      expandMenu: 'Expand menu',
+      greatPages: 'GreatPages',
+      pages: 'Pages',
+    },
+    profile: {
+      usedCredits: 'Credits used',
+      loggingOut: 'Signing out...',
+      logout: 'Sign out',
+    },
+    usersSelector: {
+      title: 'Users',
+      add: 'Add',
+      searchPlaceholder: 'Search here',
+      empty: 'No users found.',
+      noResults: 'No results found.',
+      addToProject: 'Add to project',
+      removeFromProject: 'Remove from project',
+      manageTeam: 'Manage team',
+    },
+  },
+  notFound: {
+    title: 'Page not found!',
+    description: 'The page you are looking for does not exist. Check that you typed the link correctly.',
+    backToHome: 'Back to home',
+  },
+
   languages: {
     'pt-br': 'Portuguese (Brazil)',
     'en-us': 'English (US)',