@greatapps/common 1.1.675 → 1.1.677

package/src/components/layouts/AppMobileNavBar.tsx

@@ -4,20 +4,13 @@ import { ReactNode } from "react";
 import Image from "next/image";
 import { IconMenu2, IconX } from "@tabler/icons-react";
 import { ProfilePopover } from "./ProfilePopover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
-import {
-  useWhitelabel,
-  useIsDefaultWhitelabel,
-} from "../../providers/whitelabel.provider";
-import { cn } from "../../infra/utils/clsx";
+import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import type { ProfileMenuItem } from "./ProfilePopover";
 
 export interface AppMobileNavBarProps {
   /** Which app is currently active — controls which icon gets the indicator */
   activeApp?: "gapps" | "gpages";
-  /** Called when the GreatApps logo is clicked */
-  onLogoClick?: () => void;
   /** Called when the app icon (e.g. GreatPages) is clicked */
   onAppIconClick?: () => void;
   /** Extra slot rendered after the app icon (e.g. project selector) */
@@ -28,165 +21,19 @@ export interface AppMobileNavBarProps {
 
 export function AppMobileNavBar({
   activeApp,
-  onLogoClick,
   onAppIconClick,
   extraLeftSlot,
   menuItems = [],
   showMenuToggle = true,
 }: AppMobileNavBarProps) {
   const { isOpen, toggle } = useMobileNavbarSheet();
-  const { whitelabel } = useWhitelabel();
   const isDefaultWl = useIsDefaultWhitelabel();
-  const primaryColor = whitelabel?.general?.primary_color;
-  const wlName = whitelabel?.name || "Great";
 
-  const isGappsActive = activeApp === "gapps";
   const isGpagesActive = activeApp === "gpages";
 
-  const wlIcon = whitelabel?.secondary_logo ? (
-    <Image
-      className="size-7 object-contain"
-      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}
-      alt={`${wlName} Logo`}
-      width={28}
-      height={28}
-    />
-  ) : (
-    <div
-      className={cn(
-        "size-10 rounded-lg flex items-center justify-center transition-opacity duration-300",
-        !isGappsActive && "opacity-20",
-      )}
-      style={{ backgroundColor: primaryColor }}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="white"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-        <path d="M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-        <path d="M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-        <path d="M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-      </svg>
-    </div>
-  );
-
   return (
     <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
       <div className="flex items-center gap-1.5">
-        {/* GreatApps logo */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "flex items-center justify-center",
-                  onLogoClick ? "cursor-pointer" : "",
-                )}
-                onClick={onLogoClick}
-              >
-                {isDefaultWl ? (
-                  <div className="size-10 flex items-center justify-center rounded-lg">
-                    <Image
-                      src="/icons/great-icon.svg"
-                      alt="Great Icon"
-                      width={28}
-                      height={28}
-                    />
-                  </div>
-                ) : (
-                  wlIcon
-                )}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">{wlName}</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-gray-950" : "",
-              isGappsActive ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </div>
-
-        {/* GreatPages icon */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "size-10 rounded-lg flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                  isGpagesActive
-                    ? isDefaultWl
-                      ? "bg-cyan-100 border-white ring-cyan-300"
-                      : "border-white ring-transparent"
-                    : isDefaultWl
-                      ? "hover:bg-gray-100 border-transparent ring-transparent"
-                      : "border-transparent ring-transparent",
-                  onAppIconClick ? "cursor-pointer" : "",
-                )}
-                style={
-                  !isDefaultWl
-                    ? {
-                        backgroundColor: primaryColor,
-                        boxShadow: isGpagesActive
-                          ? `0 0 0 2px ${primaryColor}40`
-                          : undefined,
-                        opacity: !isGpagesActive ? 0.2 : undefined,
-                      }
-                    : undefined
-                }
-                onClick={onAppIconClick}
-              >
-                {isDefaultWl ? (
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                ) : (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="white"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path d="M4 8h16" />
-                    <path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
-                    <path d="M8 4v4" />
-                  </svg>
-                )}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">
-              {isDefaultWl ? "GreatPages" : "Páginas"}
-            </TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-cyan-300" : "",
-              isGpagesActive ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </div>
-
         {extraLeftSlot}
       </div>
       <div className="flex items-center gap-1.5">

package/src/components/layouts/NavBar.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
@@ -35,6 +36,7 @@ function NavBar({
   children,
   className,
 }: NavBarProps) {
+  const translate = useTranslations();
   const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
     useDesktopSidebarStore();
   useDesktopSidebarHydration();
@@ -128,7 +130,7 @@ function NavBar({
                   <IconChevronRight size={16} className="text-gray-500" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">Expandir menu</TooltipContent>
+              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
             </Tooltip>
           )}
           {/* Desktop expand button */}
@@ -142,7 +144,7 @@ function NavBar({
                   <IconChevronRight size={16} className="text-gray-500" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">Expandir menu</TooltipContent>
+              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
             </Tooltip>
           )}
         </div>
@@ -203,7 +205,7 @@ function NavBar({
               </Link>
             </TooltipTrigger>
             <TooltipContent side="right">
-              {isDefaultWl ? "GreatPages" : "Páginas"}
+              {isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}
             </TooltipContent>
           </Tooltip>
           <div

package/src/components/layouts/NotificationsPopover.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { IconBell } from '@tabler/icons-react';
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
@@ -27,6 +28,7 @@ function NotificationsPopover({
   contentClassName,
   badgeClassName,
 }: NotificationsPopoverProps) {
+  const translate = useTranslations();
   const isDefaultWl = useIsDefaultWhitelabel();
   const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? "bg-cyan-300" : "bg-zinc-300");
   const [open, setOpen] = useState(false);
@@ -71,7 +73,7 @@ function NotificationsPopover({
           sideOffset={8}
         >
           <span className="paragraph-small-semibold text-gray-950 px-4">
-            Últimas notificações
+            {translate('common.notifications.popover.title')}
           </span>
 
           {messages.length > 0 ? (
@@ -95,7 +97,7 @@ function NotificationsPopover({
                 <IconBell size={20} color="var(--color-gray-950)" />
               </div>
               <span className="paragraph-small-medium text-gray-950">
-                Sem notificações por enquanto
+                {translate('common.notifications.popover.empty')}
               </span>
             </div>
           )}
@@ -106,7 +108,7 @@ function NotificationsPopover({
               className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
               onClick={onViewAll}
             >
-              Todas as notificações
+              {translate('common.notifications.popover.viewAll')}
             </Button>
           )}
         </PopoverPrimitive.Content>

package/src/components/layouts/ProfilePopover.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
@@ -36,6 +37,7 @@ function ProfilePopover({
   contentClassName = "absolute bottom-2 left-[26px]",
   menuItems = [],
 }: ProfilePopoverProps) {
+  const translate = useTranslations();
   const { user, logout } = useAuth();
   const [isLoggingOut, setIsLoggingOut] = useState(false);
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -68,7 +70,7 @@ function ProfilePopover({
     <>
       <LoadingOverlay
         isLoading={isLoggingOut}
-        message="Saindo da sua conta..."
+        message={translate('common.layout.profile.loggingOut')}
       />
       <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
         <PopoverPrimitive.Trigger className="cursor-pointer">
@@ -124,7 +126,7 @@ function ProfilePopover({
                   }
                 }}
               >
-                Editar
+                {translate('common.actions.edit')}
               </Button>
             </div>
 
@@ -146,7 +148,7 @@ function ProfilePopover({
                 >
                   <div className="flex items-center justify-between gap-2">
                     <span className="paragraph-xsmall-semibold text-white truncate">
-                      Créditos usados
+                      {translate('common.layout.profile.usedCredits')}
                     </span>
                     <span className="paragraph-xsmall-medium text-white/50">
                       {summary.usedCredits.toLocaleString("pt-BR")}/
@@ -173,7 +175,7 @@ function ProfilePopover({
                   ))}
                 </div>
                 <Separator />
-                <NavBarItem label="Sair" onClick={handleLogout} />
+                <NavBarItem label={translate('common.layout.profile.logout')} onClick={handleLogout} />
               </div>
             </div>
           </PopoverPrimitive.Content>

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 import { IconPlus, IconUser, IconUsers } from '@tabler/icons-react';
 import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
@@ -46,6 +47,7 @@ export function UsersSelectorPopover({
   align,
   contentClassName,
 }: UsersSelectorPopoverProps) {
+  const translate = useTranslations();
   const { accountsUrl } = useWhitelabelUrls();
   const [open, setOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState<number | null>(null);
@@ -108,7 +110,7 @@ export function UsersSelectorPopover({
       >
         <div className="flex flex-col p-3 gap-2">
           <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Usuários</span>
+            <span className="paragraph-small-semibold">{translate('common.layout.usersSelector.title')}</span>
             <div className="flex items-center gap-1.5">
               <Button
                 variant="secondary"
@@ -118,14 +120,14 @@ export function UsersSelectorPopover({
                 }}
               >
                 <IconPlus size={16} />
-                Adicionar
+                {translate('common.layout.usersSelector.add')}
               </Button>
             </div>
           </div>
 
           <Command shouldFilter={false} className="gap-2" value="">
             <CommandInput
-              placeholder="Busque aqui"
+              placeholder={translate('common.layout.usersSelector.searchPlaceholder')}
               value={searchInput}
               onValueChange={setSearchInput}
             />
@@ -143,12 +145,12 @@ export function UsersSelectorPopover({
                 <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
                   <IconUsers size={28} className="text-gray-300" />
                   <span className="paragraph-small-medium text-center text-gray-500">
-                    Nenhum usuário encontrado.
+                    {translate('common.layout.usersSelector.empty')}
                   </span>
                 </div>
               ) : (
                 <>
-                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+                  <CommandEmpty>{translate('common.layout.usersSelector.noResults')}</CommandEmpty>
                   {allUsers.map((user) => {
                     const inProject = user.in_project ?? false;
                     const removable =
@@ -200,7 +202,7 @@ export function UsersSelectorPopover({
                               </div>
                             </TooltipTrigger>
                             <TooltipContent className="z-[1002]">
-                              {inProject ? "Remover do projeto" : "Adicionar ao projeto"}
+                              {inProject ? translate('common.layout.usersSelector.removeFromProject') : translate('common.layout.usersSelector.addToProject')}
                             </TooltipContent>
                           </Tooltip>
                         </div>
@@ -225,7 +227,7 @@ export function UsersSelectorPopover({
               window.location.href = `${accountsUrl}/my-teams`;
             }}
           >
-            Gerenciar equipe
+            {translate('common.layout.usersSelector.manageTeam')}
           </Button>
         </div>
       </PopoverContent>

package/src/components/modals/BuyCreditsModal.tsx

@@ -26,6 +26,7 @@ import { useUpdateSubscriptionPlan } from '../../modules/subscriptions/hooks/upd
 import { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';
 import { useIsDefaultWhitelabel, useExternalContracting } from '../../providers/whitelabel.provider';
 import { IconInfoCircle, IconX, IconLoader2, IconSparkles } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -42,6 +43,7 @@ const buyCreditSchema = z.object({
 type BuyCreditFormData = z.infer<typeof buyCreditSchema>;
 
 export default function BuyCreditsModal() {
+  const translate = useTranslations();
   const { open, closeModal } = useBuyCreditsModal();
   const { openModal } = useModalManager();
   const isDefaultWl = useIsDefaultWhitelabel();
@@ -186,12 +188,12 @@ export default function BuyCreditsModal() {
       label: (
         <div className="flex items-center justify-between gap-2 w-full">
           <span className="paragraph-small-medium text-zinc-950 flex-1">
-            {opt.credits.toLocaleString('pt-BR')} créditos de IA
+            {translate('common.credits.buy.creditsOptionLabel', { credits: opt.credits.toLocaleString('pt-BR') })}
           </span>
           <span className="paragraph-small-medium text-zinc-500 opacity-70">{opt.priceLabel}</span>
         </div>
       ),
-      displayValue: `${opt.credits.toLocaleString('pt-BR')} créditos de IA`,
+      displayValue: translate('common.credits.buy.creditsOptionDisplayValue', { credits: opt.credits.toLocaleString('pt-BR') }),
     }));
   }, []);
 
@@ -217,7 +219,7 @@ export default function BuyCreditsModal() {
       toast.custom((t) => (
         <Toast
           variant="success"
-          message={`Créditos de IA alterados para ${data.creditOption.toLocaleString('pt-BR')}`}
+          message={translate('common.credits.buy.creditsChangedToast', { credits: data.creditOption.toLocaleString('pt-BR') })}
           toastId={t}
         />
       ));
@@ -234,7 +236,7 @@ export default function BuyCreditsModal() {
     if (totalPrice !== null) {
       return (
         <span className="paragraph-xlarge-semibold text-zinc-950">
-          {totalPrice === 0 ? 'Padrão' : formatPrice(totalPrice)}
+          {totalPrice === 0 ? translate('common.credits.buy.defaultPrice') : formatPrice(totalPrice)}
         </span>
       );
     }
@@ -251,10 +253,10 @@ export default function BuyCreditsModal() {
             </div>
             <div className="flex flex-col gap-2">
               <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-                Créditos de IA
+                {translate('common.credits.buy.externalTitle')}
               </DialogTitle>
               <span className="paragraph-small-regular text-zinc-600">
-                Para adquirir créditos de IA, acesse sua área de assinatura.
+                {translate('common.credits.buy.externalDescription')}
               </span>
             </div>
           </DialogHeader>
@@ -266,7 +268,7 @@ export default function BuyCreditsModal() {
                 redirectToExternal('contracting');
               }}
             >
-              Acessar área de assinatura
+              {translate('common.credits.buy.externalButton')}
             </Button>
           </div>
         </DialogContent>
@@ -282,7 +284,7 @@ export default function BuyCreditsModal() {
       >
         <DialogHeader className="px-4 py-3 border-b border-zinc-200 shrink-0 relative">
           <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
-            Comprar créditos de IA
+            {translate('common.credits.buy.title')}
           </DialogTitle>
           <button
             type="button"
@@ -319,8 +321,8 @@ export default function BuyCreditsModal() {
                   <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
                   <span className="paragraph-small-regular text-zinc-950">
                     {isIncreasingCredits
-                      ? 'O pagamento será processado no momento da confirmação.'
-                      : 'As alterações entrarão em vigor a partir da sua próxima fatura.'}
+                      ? translate('common.credits.buy.paymentOnConfirm')
+                      : translate('common.credits.buy.nextInvoiceChanges')}
                   </span>
                 </div>
               )}
@@ -331,7 +333,7 @@ export default function BuyCreditsModal() {
             <div className="hidden lg:flex flex-col gap-2">
               {immediateChargeTotal !== null && immediateChargeTotal > 0 && (
                 <div className="flex items-center justify-between">
-                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
+                  <span className="paragraph-xsmall-medium text-zinc-500">{translate('common.credits.buy.immediateCharge')}</span>
                   {isCalculatePending ? (
                     <Skeleton className="h-5 w-20" />
                   ) : (
@@ -342,7 +344,7 @@ export default function BuyCreditsModal() {
                 </div>
               )}
               <div className="flex items-center justify-between">
-                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
+                <span className="paragraph-small-medium text-zinc-500">{translate('common.credits.buy.totalPlanValue')}</span>
                 {renderPriceDisplay()}
               </div>
             </div>
@@ -353,7 +355,7 @@ export default function BuyCreditsModal() {
               className="w-full hidden lg:inline-flex"
             >
               {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
-              Confirmar e pagar
+              {translate('common.credits.buy.confirmAndPay')}
             </Button>
           </div>
 
@@ -361,7 +363,7 @@ export default function BuyCreditsModal() {
             <div className="flex flex-col gap-2">
               {immediateChargeTotal !== null && immediateChargeTotal > 0 && (
                 <div className="flex items-center justify-between">
-                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
+                  <span className="paragraph-xsmall-medium text-zinc-500">{translate('common.credits.buy.immediateCharge')}</span>
                   {isCalculatePending ? (
                     <Skeleton className="h-5 w-20" />
                   ) : (
@@ -372,13 +374,13 @@ export default function BuyCreditsModal() {
                 </div>
               )}
               <div className="flex items-center justify-between">
-                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
+                <span className="paragraph-small-medium text-zinc-500">{translate('common.credits.buy.totalPlanValue')}</span>
                 {renderPriceDisplay()}
               </div>
             </div>
             <Button type="submit" disabled={isConfirmDisabled} className="w-full">
               {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
-              Confirmar e pagar
+              {translate('common.credits.buy.confirmAndPay')}
             </Button>
           </div>
         </form>

package/src/components/modals/CreditsDisabledModal.tsx

@@ -10,9 +10,11 @@ import {
 import { Button } from '../ui/buttons/Button';
 import { Separator } from '../ui/data-display/Separator';
 import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { useCreditsDisabledModal } from '../../store/useCreditsDisabledModal';
 
 export default function CreditsDisabledModal() {
+  const translate = useTranslations();
   const { open, closeModal } = useCreditsDisabledModal();
 
   return (
@@ -32,14 +34,12 @@ export default function CreditsDisabledModal() {
           </div>
           <div className="flex flex-col gap-2">
             <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-              Compra de créditos indisponível
+              {translate('common.credits.disabled.title')}
             </DialogTitle>
             <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
               <div className="flex flex-col gap-3">
-                <p>Apenas administradores e proprietários podem comprar créditos de IA.</p>
-                <p>
-                  Peça a um administrador ou proprietário da conta para adquirir mais créditos.
-                </p>
+                <p>{translate('common.credits.disabled.descriptionLine1')}</p>
+                <p>{translate('common.credits.disabled.descriptionLine2')}</p>
               </div>
             </DialogDescription>
           </div>
@@ -53,7 +53,7 @@ export default function CreditsDisabledModal() {
             className="h-10! transition-colors"
             onClick={() => closeModal()}
           >
-            Entendi
+            {translate('common.credits.disabled.understood')}
           </Button>
         </div>
       </DialogContent>

package/src/components/modals/PaidPlanRequiredModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { IconLock } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { Button } from '../ui/buttons/Button';
 import {
     Dialog,
@@ -14,14 +15,15 @@ import { useModalManager } from '../../store/useModalManager';
 import type { ModalData } from '../../store/useModalManager';
 
 export default function PaidPlanRequiredModal() {
+    const translate = useTranslations();
     const { activeModal, modalData, closeModal } = useModalManager();
     const isOpen = activeModal === 'paidPlanRequiredModal';
     const data = modalData as ModalData & { title?: string; description?: string };
     const { accountsUrl } = useWhitelabelUrls();
     const { redirectToExternal } = useExternalContracting();
 
-    const title = (data.title as string) ?? "Recurso disponível em planos pagos";
-    const description = (data.description as string) ?? "Para acessar este recurso, faça upgrade para um plano pago";
+    const title = (data.title as string) ?? translate('common.credits.paidPlanRequired.defaultTitle');
+    const description = (data.description as string) ?? translate('common.credits.paidPlanRequired.defaultDescription');
 
     const handleKnowPlans = () => {
         if (redirectToExternal('plans')) return;
@@ -49,7 +51,7 @@ export default function PaidPlanRequiredModal() {
                         className="w-fit h-10!"
                         onClick={handleKnowPlans}
                     >
-                        Conhecer planos
+                        {translate('common.credits.paidPlanRequired.knowPlans')}
                     </Button>
                 </div>
             </DialogContent>