@greatapps/common 1.1.674 → 1.1.675

package/src/components/layouts/AppMobileNavBar.tsx

@@ -4,13 +4,20 @@ 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 { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
+import {
+  useWhitelabel,
+  useIsDefaultWhitelabel,
+} from "../../providers/whitelabel.provider";
+import { cn } from "../../infra/utils/clsx";
 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) */
@@ -21,19 +28,165 @@ 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,7 +3,6 @@
 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";
@@ -36,7 +35,6 @@ function NavBar({
   children,
   className,
 }: NavBarProps) {
-  const translate = useTranslations();
   const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
     useDesktopSidebarStore();
   useDesktopSidebarHydration();
@@ -130,7 +128,7 @@ function NavBar({
                   <IconChevronRight size={16} className="text-gray-500" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
+              <TooltipContent side="right">Expandir menu</TooltipContent>
             </Tooltip>
           )}
           {/* Desktop expand button */}
@@ -144,7 +142,7 @@ function NavBar({
                   <IconChevronRight size={16} className="text-gray-500" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
+              <TooltipContent side="right">Expandir menu</TooltipContent>
             </Tooltip>
           )}
         </div>
@@ -205,7 +203,7 @@ function NavBar({
               </Link>
             </TooltipTrigger>
             <TooltipContent side="right">
-              {isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}
+              {isDefaultWl ? "GreatPages" : "Páginas"}
             </TooltipContent>
           </Tooltip>
           <div

package/src/components/layouts/NotificationsPopover.tsx

@@ -1,7 +1,6 @@
 "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";
@@ -28,7 +27,6 @@ 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);
@@ -73,7 +71,7 @@ function NotificationsPopover({
           sideOffset={8}
         >
           <span className="paragraph-small-semibold text-gray-950 px-4">
-            {translate('common.notifications.popover.title')}
+            Últimas notificações
           </span>
 
           {messages.length > 0 ? (
@@ -97,7 +95,7 @@ function NotificationsPopover({
                 <IconBell size={20} color="var(--color-gray-950)" />
               </div>
               <span className="paragraph-small-medium text-gray-950">
-                {translate('common.notifications.popover.empty')}
+                Sem notificações por enquanto
               </span>
             </div>
           )}
@@ -108,7 +106,7 @@ function NotificationsPopover({
               className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
               onClick={onViewAll}
             >
-              {translate('common.notifications.popover.viewAll')}
+              Todas as notificações
             </Button>
           )}
         </PopoverPrimitive.Content>

package/src/components/layouts/ProfilePopover.tsx

@@ -1,7 +1,6 @@
 "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";
@@ -37,7 +36,6 @@ 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);
@@ -70,7 +68,7 @@ function ProfilePopover({
     <>
       <LoadingOverlay
         isLoading={isLoggingOut}
-        message={translate('common.layout.profile.loggingOut')}
+        message="Saindo da sua conta..."
       />
       <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
         <PopoverPrimitive.Trigger className="cursor-pointer">
@@ -126,7 +124,7 @@ function ProfilePopover({
                   }
                 }}
               >
-                {translate('common.actions.edit')}
+                Editar
               </Button>
             </div>
 
@@ -148,7 +146,7 @@ function ProfilePopover({
                 >
                   <div className="flex items-center justify-between gap-2">
                     <span className="paragraph-xsmall-semibold text-white truncate">
-                      {translate('common.layout.profile.usedCredits')}
+                      Créditos usados
                     </span>
                     <span className="paragraph-xsmall-medium text-white/50">
                       {summary.usedCredits.toLocaleString("pt-BR")}/
@@ -175,7 +173,7 @@ function ProfilePopover({
                   ))}
                 </div>
                 <Separator />
-                <NavBarItem label={translate('common.layout.profile.logout')} onClick={handleLogout} />
+                <NavBarItem label="Sair" onClick={handleLogout} />
               </div>
             </div>
           </PopoverPrimitive.Content>

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -1,7 +1,6 @@
 "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";
@@ -47,7 +46,6 @@ export function UsersSelectorPopover({
   align,
   contentClassName,
 }: UsersSelectorPopoverProps) {
-  const translate = useTranslations();
   const { accountsUrl } = useWhitelabelUrls();
   const [open, setOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState<number | null>(null);
@@ -110,7 +108,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">{translate('common.layout.usersSelector.title')}</span>
+            <span className="paragraph-small-semibold">Usuários</span>
             <div className="flex items-center gap-1.5">
               <Button
                 variant="secondary"
@@ -120,14 +118,14 @@ export function UsersSelectorPopover({
                 }}
               >
                 <IconPlus size={16} />
-                {translate('common.layout.usersSelector.add')}
+                Adicionar
               </Button>
             </div>
           </div>
 
           <Command shouldFilter={false} className="gap-2" value="">
             <CommandInput
-              placeholder={translate('common.layout.usersSelector.searchPlaceholder')}
+              placeholder="Busque aqui"
               value={searchInput}
               onValueChange={setSearchInput}
             />
@@ -145,12 +143,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">
-                    {translate('common.layout.usersSelector.empty')}
+                    Nenhum usuário encontrado.
                   </span>
                 </div>
               ) : (
                 <>
-                  <CommandEmpty>{translate('common.layout.usersSelector.noResults')}</CommandEmpty>
+                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
                   {allUsers.map((user) => {
                     const inProject = user.in_project ?? false;
                     const removable =
@@ -202,7 +200,7 @@ export function UsersSelectorPopover({
                               </div>
                             </TooltipTrigger>
                             <TooltipContent className="z-[1002]">
-                              {inProject ? translate('common.layout.usersSelector.removeFromProject') : translate('common.layout.usersSelector.addToProject')}
+                              {inProject ? "Remover do projeto" : "Adicionar ao projeto"}
                             </TooltipContent>
                           </Tooltip>
                         </div>
@@ -227,7 +225,7 @@ export function UsersSelectorPopover({
               window.location.href = `${accountsUrl}/my-teams`;
             }}
           >
-            {translate('common.layout.usersSelector.manageTeam')}
+            Gerenciar equipe
           </Button>
         </div>
       </PopoverContent>

package/src/components/modals/BuyCreditsModal.tsx

@@ -26,7 +26,6 @@ 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';
@@ -43,7 +42,6 @@ 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();
@@ -188,12 +186,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">
-            {translate('common.credits.buy.creditsOptionLabel', { credits: opt.credits.toLocaleString('pt-BR') })}
+            {opt.credits.toLocaleString('pt-BR')} créditos de IA
           </span>
           <span className="paragraph-small-medium text-zinc-500 opacity-70">{opt.priceLabel}</span>
         </div>
       ),
-      displayValue: translate('common.credits.buy.creditsOptionDisplayValue', { credits: opt.credits.toLocaleString('pt-BR') }),
+      displayValue: `${opt.credits.toLocaleString('pt-BR')} créditos de IA`,
     }));
   }, []);
 
@@ -219,7 +217,7 @@ export default function BuyCreditsModal() {
       toast.custom((t) => (
         <Toast
           variant="success"
-          message={translate('common.credits.buy.creditsChangedToast', { credits: data.creditOption.toLocaleString('pt-BR') })}
+          message={`Créditos de IA alterados para ${data.creditOption.toLocaleString('pt-BR')}`}
           toastId={t}
         />
       ));
@@ -236,7 +234,7 @@ export default function BuyCreditsModal() {
     if (totalPrice !== null) {
       return (
         <span className="paragraph-xlarge-semibold text-zinc-950">
-          {totalPrice === 0 ? translate('common.credits.buy.defaultPrice') : formatPrice(totalPrice)}
+          {totalPrice === 0 ? 'Padrão' : formatPrice(totalPrice)}
         </span>
       );
     }
@@ -253,10 +251,10 @@ export default function BuyCreditsModal() {
             </div>
             <div className="flex flex-col gap-2">
               <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-                {translate('common.credits.buy.externalTitle')}
+                Créditos de IA
               </DialogTitle>
               <span className="paragraph-small-regular text-zinc-600">
-                {translate('common.credits.buy.externalDescription')}
+                Para adquirir créditos de IA, acesse sua área de assinatura.
               </span>
             </div>
           </DialogHeader>
@@ -268,7 +266,7 @@ export default function BuyCreditsModal() {
                 redirectToExternal('contracting');
               }}
             >
-              {translate('common.credits.buy.externalButton')}
+              Acessar área de assinatura
             </Button>
           </div>
         </DialogContent>
@@ -284,7 +282,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">
-            {translate('common.credits.buy.title')}
+            Comprar créditos de IA
           </DialogTitle>
           <button
             type="button"
@@ -321,8 +319,8 @@ export default function BuyCreditsModal() {
                   <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
                   <span className="paragraph-small-regular text-zinc-950">
                     {isIncreasingCredits
-                      ? translate('common.credits.buy.paymentOnConfirm')
-                      : translate('common.credits.buy.nextInvoiceChanges')}
+                      ? 'O pagamento será processado no momento da confirmação.'
+                      : 'As alterações entrarão em vigor a partir da sua próxima fatura.'}
                   </span>
                 </div>
               )}
@@ -333,7 +331,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">{translate('common.credits.buy.immediateCharge')}</span>
+                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
                   {isCalculatePending ? (
                     <Skeleton className="h-5 w-20" />
                   ) : (
@@ -344,7 +342,7 @@ export default function BuyCreditsModal() {
                 </div>
               )}
               <div className="flex items-center justify-between">
-                <span className="paragraph-small-medium text-zinc-500">{translate('common.credits.buy.totalPlanValue')}</span>
+                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
                 {renderPriceDisplay()}
               </div>
             </div>
@@ -355,7 +353,7 @@ export default function BuyCreditsModal() {
               className="w-full hidden lg:inline-flex"
             >
               {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
-              {translate('common.credits.buy.confirmAndPay')}
+              Confirmar e pagar
             </Button>
           </div>
 
@@ -363,7 +361,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">{translate('common.credits.buy.immediateCharge')}</span>
+                  <span className="paragraph-xsmall-medium text-zinc-500">Cobrança imediata</span>
                   {isCalculatePending ? (
                     <Skeleton className="h-5 w-20" />
                   ) : (
@@ -374,13 +372,13 @@ export default function BuyCreditsModal() {
                 </div>
               )}
               <div className="flex items-center justify-between">
-                <span className="paragraph-small-medium text-zinc-500">{translate('common.credits.buy.totalPlanValue')}</span>
+                <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
                 {renderPriceDisplay()}
               </div>
             </div>
             <Button type="submit" disabled={isConfirmDisabled} className="w-full">
               {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
-              {translate('common.credits.buy.confirmAndPay')}
+              Confirmar e pagar
             </Button>
           </div>
         </form>

package/src/components/modals/CreditsDisabledModal.tsx

@@ -10,11 +10,9 @@ 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 (
@@ -34,12 +32,14 @@ export default function CreditsDisabledModal() {
           </div>
           <div className="flex flex-col gap-2">
             <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-              {translate('common.credits.disabled.title')}
+              Compra de créditos indisponível
             </DialogTitle>
             <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
               <div className="flex flex-col gap-3">
-                <p>{translate('common.credits.disabled.descriptionLine1')}</p>
-                <p>{translate('common.credits.disabled.descriptionLine2')}</p>
+                <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>
               </div>
             </DialogDescription>
           </div>
@@ -53,7 +53,7 @@ export default function CreditsDisabledModal() {
             className="h-10! transition-colors"
             onClick={() => closeModal()}
           >
-            {translate('common.credits.disabled.understood')}
+            Entendi
           </Button>
         </div>
       </DialogContent>

package/src/components/modals/PaidPlanRequiredModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { IconLock } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
 import { Button } from '../ui/buttons/Button';
 import {
     Dialog,
@@ -15,15 +14,14 @@ 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) ?? translate('common.credits.paidPlanRequired.defaultTitle');
-    const description = (data.description as string) ?? translate('common.credits.paidPlanRequired.defaultDescription');
+    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 handleKnowPlans = () => {
         if (redirectToExternal('plans')) return;
@@ -51,7 +49,7 @@ export default function PaidPlanRequiredModal() {
                         className="w-fit h-10!"
                         onClick={handleKnowPlans}
                     >
-                        {translate('common.credits.paidPlanRequired.knowPlans')}
+                        Conhecer planos
                     </Button>
                 </div>
             </DialogContent>