@greatapps/common 1.1.676 → 1.1.678

package/src/components/account/sections/TokenSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { IconCheck, IconCopy, IconInfoCircle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { Button } from '../../ui/buttons/Button';
@@ -10,31 +11,42 @@ import { useAccountToken } from '../../../modules/accounts/hooks/use-account-tok
 import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 
 export function TokenSection() {
+  const translate = useTranslations();
   const { data: token = '', isLoading } = useAccountToken();
   const isDefaultWl = useIsDefaultWhitelabel();
 
   const { isCopied, copy } = useCopyToClipboard({
     onSuccess: () => {
-      toast.custom((t) => (
-        <Toast variant="success" message="Token copiado com sucesso" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.token.copySuccess')}
+          toastId={toastId}
+        />
       ));
     },
     onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Não foi possível copiar o token" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.token.copyError')}
+          toastId={toastId}
+        />
       ));
     },
   });
 
   return (
     <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-      <span className="paragraph-medium-semibold text-gray-950">Token da conta</span>
+      <span className="paragraph-medium-semibold text-gray-950">
+        {translate('common.account.token.title')}
+      </span>
 
       <div className="flex flex-col gap-3">
         <div className="flex items-end gap-3">
           <FormField
-            label="Token"
-            value={isLoading ? 'Carregando...' : token}
+            label={translate('common.account.token.label')}
+            value={isLoading ? translate('common.actions.loading') : token}
             disabled
             readOnly
             classnameContainer="bg-gray-50 cursor-default opacity-100!"
@@ -48,14 +60,14 @@ export function TokenSection() {
             disabled={isLoading || !token}
           >
             {isCopied ? <IconCheck size={16} /> : <IconCopy size={16} />}
-            {isCopied ? 'Copiado' : 'Copiar'}
+            {isCopied ? translate('common.actions.copied') : translate('common.actions.copy')}
           </Button>
         </div>
 
         <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>
           <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
           <span className="paragraph-small-regular text-zinc-950 max-w-[420px]">
-            Este token é exclusivo da sua conta e permite acesso à API. Não compartilhe com terceiros.
+            {translate('common.account.token.info')}
           </span>
         </div>
 
@@ -65,7 +77,7 @@ export function TokenSection() {
           rel="noopener noreferrer"
           className="paragraph-small-medium text-gray-500 underline hover:text-gray-700 transition-colors w-fit"
         >
-          Acessar a documentação
+          {translate('common.account.token.docsLink')}
         </a>
       </div>
     </div>

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>