@greatapps/common 1.1.675 → 1.1.677

package/src/components/modals/cards/CardFormFields.tsx

@@ -16,6 +16,7 @@ import {
   CardExpiryElement,
   CardNumberElement,
 } from "@stripe/react-stripe-js";
+import { useTranslations } from "next-intl";
 
 const stripeElementOptions = {
   style: {
@@ -30,23 +31,24 @@ const stripeElementOptions = {
   },
 };
 
-export const cardFormSchema = z
-  .object({
+export function buildCardFormSchema(isInternational: boolean) {
+  const base = z.object({
     name: z.string().min(1, "Nome é obrigatório"),
     country: z.string().min(1, "País é obrigatório"),
-    personType: z.enum(["pf", "pj"]),
+    personType: z.enum(["pf", "pj"]).optional(),
     cpf: z.string().optional(),
     cnpj: z.string().optional(),
     fullName: z.string().min(1, "Nome completo é obrigatório"),
-    cep: z.string().min(9, "CEP é obrigatório"),
+    cep: z.string().min(isInternational ? 1 : 9, isInternational ? "Código postal é obrigatório" : "CEP é obrigatório"),
     street: z.string().min(1, "Endereço é obrigatório"),
-    streetNumber: z.string().min(1, "Número é obrigatório"),
+    streetNumber: isInternational ? z.string().optional() : z.string().min(1, "Número é obrigatório"),
     city: z.string().min(1, "Cidade é obrigatória"),
     state: z.string().min(1, "UF é obrigatório"),
-    neighborhood: z.string().min(1, "Bairro é obrigatório"),
+    neighborhood: isInternational ? z.string().optional() : z.string().min(1, "Bairro é obrigatório"),
     complement: z.string().optional(),
-  })
-  .refine(
+  });
+  if (isInternational) return base;
+  return base.refine(
     (data) => {
       if (data.personType === "pf") return !!data.cpf && data.cpf.length >= 14;
       return !!data.cnpj && data.cnpj.length >= 18;
@@ -56,6 +58,9 @@ export const cardFormSchema = z
       path: ["cpf"],
     },
   );
+}
+
+export const cardFormSchema = buildCardFormSchema(false);
 
 export type CardFormData = z.infer<typeof cardFormSchema>;
 
@@ -84,13 +89,16 @@ type CardFormFieldsProps = {
     cardExpiry?: string;
     cardCvc?: string;
   };
+  readonly isInternational?: boolean;
 };
 
 export function CardFormFields({
   form,
   onStripeChange,
   stripeErrors,
+  isInternational = false,
 }: CardFormFieldsProps) {
+  const translate = useTranslations();
   const {
     register,
     watch,
@@ -103,8 +111,8 @@ export function CardFormFields({
   return (
     <div className="flex flex-col gap-5">
       <FormField
-        label="Nome impresso no cartão"
-        placeholder="Digite aqui"
+        label={translate('common.cards.form.nameOnCard')}
+        placeholder={translate('common.cards.form.typeHere')}
         {...register("name")}
         error={!!errors.name}
         errorMessage={errors.name?.message}
@@ -112,7 +120,7 @@ export function CardFormFields({
 
       <div className="flex flex-col gap-1.5">
         <label className="paragraph-xsmall-semibold text-zinc-600">
-          Número do cartão
+          {translate('common.cards.form.cardNumber')}
         </label>
         <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative">
           <div className="w-full">
@@ -134,7 +142,7 @@ export function CardFormFields({
       <div className="flex gap-4">
         <div className="flex-1 flex flex-col gap-1.5">
           <label className="paragraph-xsmall-semibold text-zinc-600">
-            Data de validade
+            {translate('common.cards.form.cardExpiry')}
           </label>
           <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
             <div className="w-full">
@@ -154,7 +162,7 @@ export function CardFormFields({
         </div>
 
         <div className="flex-1 flex flex-col gap-1.5">
-          <label className="paragraph-xsmall-semibold text-zinc-600">CVC</label>
+          <label className="paragraph-xsmall-semibold text-zinc-600">{translate('common.cards.form.cardCvc')}</label>
           <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
             <div className="w-full">
               <CardCvcElement
@@ -174,66 +182,70 @@ export function CardFormFields({
       </div>
 
       <SelectField
-        label="País"
-        placeholder="Selecione"
+        label={translate('common.cards.form.country')}
+        placeholder={translate('common.cards.form.select')}
         value={watch("country")}
         onChange={(value) => setValue("country", value as string)}
         options={COUNTRIES.map((c) => ({ value: c.iso, label: c.name }))}
       />
 
-      <div className="flex gap-4">
-        <SelectField
-          label="Tipo de pessoa"
-          placeholder="Selecione"
-          value={personType}
-          onChange={(value) => {
-            setValue("personType", value as "pf" | "pj");
-            setValue("cpf", "");
-            setValue("cnpj", "");
-          }}
-          options={[
-            { value: "pf", label: "Pessoa física" },
-            { value: "pj", label: "Pessoa jurídica" },
-          ]}
-          containerClassName="flex-1"
-        />
-        <div className="flex-1">
-          {personType === "pj" ? (
-            <FormField
-              label="CNPJ"
-              placeholder="__.___.___/____-__"
-              {...register("cnpj", {
-                onChange: (e) => {
-                  setValue("cnpj", formatCNPJ(e.target.value));
-                },
-              })}
-              error={!!errors.cpf}
-              errorMessage={errors.cpf?.message}
-            />
-          ) : (
-            <FormField
-              label="CPF"
-              placeholder="___.___.___-__"
-              {...register("cpf", {
-                onChange: (e) => {
-                  setValue("cpf", formatCPF(e.target.value));
-                },
-              })}
-              error={!!errors.cpf}
-              errorMessage={errors.cpf?.message}
-            />
-          )}
+      {!isInternational && (
+        <div className="flex gap-4">
+          <SelectField
+            label={translate('common.cards.form.personType')}
+            placeholder={translate('common.cards.form.select')}
+            value={personType}
+            onChange={(value) => {
+              setValue("personType", value as "pf" | "pj");
+              setValue("cpf", "");
+              setValue("cnpj", "");
+            }}
+            options={[
+              { value: "pf", label: translate('common.cards.form.personTypePf') },
+              { value: "pj", label: translate('common.cards.form.personTypePj') },
+            ]}
+            containerClassName="flex-1"
+          />
+          <div className="flex-1">
+            {personType === "pj" ? (
+              <FormField
+                label={translate('common.cards.form.cnpj')}
+                placeholder="__.___.___/____-__"
+                {...register("cnpj", {
+                  onChange: (e) => {
+                    setValue("cnpj", formatCNPJ(e.target.value));
+                  },
+                })}
+                error={!!errors.cpf}
+                errorMessage={errors.cpf?.message}
+              />
+            ) : (
+              <FormField
+                label={translate('common.cards.form.cpf')}
+                placeholder="___.___.___-__"
+                {...register("cpf", {
+                  onChange: (e) => {
+                    setValue("cpf", formatCPF(e.target.value));
+                  },
+                })}
+                error={!!errors.cpf}
+                errorMessage={errors.cpf?.message}
+              />
+            )}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
 
 type BillingFormFieldsProps = {
   readonly form: UseFormReturn<CardFormData>;
+  readonly isInternational?: boolean;
 };
 
-export function BillingFormFields({ form }: BillingFormFieldsProps) {
+export function BillingFormFields({ form, isInternational = false }: BillingFormFieldsProps) {
+  const translate = useTranslations();
   const {
     register,
     setValue,
@@ -243,6 +255,10 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
   const { mutateAsync: lookupCep } = useViaCep();
 
   const handleCepChange = (rawValue: string) => {
+    if (isInternational) {
+      setValue("cep", rawValue);
+      return;
+    }
     const masked = formatPostalCode(rawValue);
     setValue("cep", masked);
 
@@ -264,16 +280,16 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
   return (
     <div className="flex flex-col gap-5">
       <FormField
-        label="Nome completo"
-        placeholder="Digite aqui"
+        label={translate('common.cards.form.fullName')}
+        placeholder={translate('common.cards.form.typeHere')}
         {...register("fullName")}
         error={!!errors.fullName}
         errorMessage={errors.fullName?.message}
       />
 
       <FormField
-        label="CEP"
-        placeholder="_____-___"
+        label={isInternational ? translate('common.cards.form.postalCode') : translate('common.cards.form.cep')}
+        placeholder={isInternational ? "" : "_____-___"}
         {...register("cep", {
           onChange: (e) => handleCepChange(e.target.value),
         })}
@@ -284,7 +300,7 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
       <div className="flex gap-4">
         <div className="flex-[4]">
           <FormField
-            label="Endereço"
+            label={translate('common.cards.form.street')}
             placeholder=""
             {...register("street")}
             error={!!errors.street}
@@ -293,7 +309,7 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
         </div>
         <div className="flex-[1]">
           <FormField
-            label="Número"
+            label={translate('common.cards.form.streetNumber')}
             placeholder=""
             {...register("streetNumber")}
             error={!!errors.streetNumber}
@@ -305,7 +321,7 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
       <div className="flex gap-4">
         <div className="flex-1">
           <FormField
-            label="Cidade"
+            label={translate('common.cards.form.city')}
             placeholder=""
             {...register("city")}
             error={!!errors.city}
@@ -314,7 +330,7 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
         </div>
         <div className="flex-1">
           <FormField
-            label="UF"
+            label={isInternational ? translate('common.cards.form.stateProvince') : translate('common.cards.form.state')}
             placeholder=""
             {...register("state")}
             error={!!errors.state}
@@ -324,15 +340,17 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
       </div>
 
       <div className="flex gap-4">
+        {!isInternational && (
+          <FormField
+            label={translate('common.cards.form.neighborhood')}
+            placeholder=""
+            {...register("neighborhood")}
+            error={!!errors.neighborhood}
+            errorMessage={errors.neighborhood?.message}
+          />
+        )}
         <FormField
-          label="Bairro"
-          placeholder=""
-          {...register("neighborhood")}
-          error={!!errors.neighborhood}
-          errorMessage={errors.neighborhood?.message}
-        />
-        <FormField
-          label="Complemento"
+          label={translate('common.cards.form.complement')}
           optional
           placeholder=""
           {...register("complement")}

package/src/components/modals/cards/DeleteCardModal.tsx

@@ -17,8 +17,10 @@ import { useModalManager } from '../../../store/useModalManager';
 import { useDeleteConfirmation } from '../../../modules/cards/hooks/delete-confirmation.hook';
 import { useDeleteCard } from '../../../modules/cards/hooks/delete-card.hook';
 import { useCards } from '../../../modules/cards/hooks/cards.hook';
+import { useTranslations } from 'next-intl';
 
 export function DeleteCardModal() {
+  const translate = useTranslations();
   const { activeModal, modalData, closeModal } = useModalManager();
   const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation();
   const deleteCard = useDeleteCard();
@@ -50,7 +52,7 @@ export function DeleteCardModal() {
             message={
               error instanceof Error
                 ? error.message
-                : 'Não foi possível excluir o cartão'
+                : translate('common.cards.delete.errorToast')
             }
           />
         ),
@@ -67,7 +69,7 @@ export function DeleteCardModal() {
       (t) => (
         <Toast
           variant="success"
-          message={`O cartão •••• ${cardLastDigits} foi excluído com sucesso`}
+          message={translate('common.cards.delete.successToast', { digits: cardLastDigits })}
           toastId={t}
         />
       ),
@@ -85,10 +87,10 @@ export function DeleteCardModal() {
             </div>
             <div className="flex flex-col gap-2">
               <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-                Excluir cartão
+                {translate('common.cards.delete.title')}
               </DialogTitle>
               <DialogDescription className="paragraph-small-regular text-zinc-600">
-                Deseja realmente excluir o cartão:{' '}
+                {translate('common.cards.delete.description')}{' '}
                 <span className="font-semibold text-zinc-950">
                   •••• {cardLastDigits}
                 </span>
@@ -99,9 +101,9 @@ export function DeleteCardModal() {
 
           <div className="px-4 lg:px-5 py-5">
             <FormField
-              label="Digite EXCLUIR abaixo"
+              label={translate('common.cards.delete.confirmLabel')}
               required
-              placeholder="EXCLUIR"
+              placeholder={translate('common.cards.delete.confirmPlaceholder')}
               {...form.register('confirmText')}
             />
           </div>
@@ -113,7 +115,7 @@ export function DeleteCardModal() {
               loading={form.formState.isSubmitting}
               className="h-10!"
             >
-              {form.formState.isSubmitting ? 'Excluindo...' : 'Excluir'}
+              {form.formState.isSubmitting ? translate('common.cards.delete.deleting') : translate('common.actions.delete')}
             </Button>
             <Button
               type="button"
@@ -122,7 +124,7 @@ export function DeleteCardModal() {
               onClick={handleClose}
               disabled={form.formState.isSubmitting}
             >
-              Cancelar
+              {translate('common.actions.cancel')}
             </Button>
           </div>
         </form>

package/src/components/navigation/CancelledSubscriptionBanner.tsx

@@ -5,12 +5,14 @@ import { IconAlertOctagon, IconX } from '@tabler/icons-react';
 import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
 import { toCalendarDate } from '../../infra/utils/date';
 import { getSubscriptionExpiryDate } from '../../modules/subscriptions/utils/get-subscription-expiry-date';
+import { useTranslations } from 'next-intl';
 
 interface CancelledSubscriptionBannerProps {
   onReactivate?: () => void;
 }
 
 export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
+  const translate = useTranslations();
   const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
   const [visible, setVisible] = useState(true);
   const [animated, setAnimated] = useState(false);
@@ -40,7 +42,7 @@ export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscript
         <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
           <IconAlertOctagon size={16} className="text-white shrink-0" />
           <span className="paragraph-xsmall-semibold text-white">
-            Assinatura cancelada! Suas páginas foram retiradas do ar.
+            {translate('common.navigation.banners.cancelled.message')}
           </span>
         </div>
         <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
@@ -50,7 +52,7 @@ export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscript
             onClick={onReactivate}
           >
             <span className="paragraph-xsmall-semibold text-white underline">
-              Escolher um novo plano
+              {translate('common.navigation.banners.cancelled.choosePlan')}
             </span>
           </button>
           <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>

package/src/components/navigation/OverdueInvoiceBanner.tsx

@@ -2,12 +2,14 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { IconAlertTriangle, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 
 interface OverdueInvoiceBannerProps {
   onDetails?: () => void;
 }
 
 export function OverdueInvoiceBanner({ onDetails }: OverdueInvoiceBannerProps) {
+  const translate = useTranslations();
   const [visible, setVisible] = useState(true);
   const [animated, setAnimated] = useState(false);
 
@@ -28,7 +30,7 @@ export function OverdueInvoiceBanner({ onDetails }: OverdueInvoiceBannerProps) {
         <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
           <IconAlertTriangle size={16} className="text-white shrink-0" />
           <span className="paragraph-xsmall-semibold text-white">
-            Sua assinatura está atrasada e suas páginas podem ser retiradas do ar a qualquer momento.
+            {translate('common.navigation.banners.overdue.message')}
           </span>
         </div>
         <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
@@ -37,7 +39,7 @@ export function OverdueInvoiceBanner({ onDetails }: OverdueInvoiceBannerProps) {
             className="flex items-center justify-center p-1.5 cursor-pointer"
             onClick={onDetails}
           >
-            <span className="paragraph-xsmall-semibold text-white underline">Detalhes</span>
+            <span className="paragraph-xsmall-semibold text-white underline">{translate('common.navigation.banners.overdue.details')}</span>
           </button>
           <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
             <IconX size={18} className="text-orange-200" />

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)} />