@greatapps/common 1.1.746 → 1.1.747

package/src/components/modals/AccountFrozenModal.tsx

@@ -1,38 +1,43 @@
 "use client";
 
-import { IconLock, IconAlertTriangle } from '@tabler/icons-react';
+import {
+    IconLock,
+    IconFile,
+    IconFolder,
+    IconWorld,
+    IconInfoCircle,
+    type IconProps,
+} from '@tabler/icons-react';
+import type { ComponentType } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button } from '../ui/buttons/Button';
-import { Separator } from '../ui/data-display/Separator';
 import {
     Dialog,
     DialogContent,
     DialogDescription,
-    DialogHeader,
     DialogTitle,
 } from '../ui/overlay/Dialog';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
 import { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';
 import { useModalManager } from '../../store/useModalManager';
 import { formatShortDate } from '../../infra/utils/date';
 
-/* Lista do que o congelamento tira, na ordem do card. O texto mora no catálogo. */
-const BLOCKED_RESOURCE_KEYS = [
-    'pages',
-    'projects',
-    'leadsExport',
-    'pageSettings',
-    'domains',
-    'users',
-    'abTests',
-    'uploads',
-    'integrations',
-] as const;
+/* Os 9 recursos do card agrupados nos 3 grupos que o usuário reconhece na plataforma.
+ * Um ícone por grupo; o texto mora no catálogo. */
+const RESOURCE_GROUPS: { key: string; icon: ComponentType<IconProps> }[] = [
+    { key: 'pages', icon: IconFile },
+    { key: 'projects', icon: IconFolder },
+    { key: 'domains', icon: IconWorld },
+];
 
-/* `freezeDate` no data = ainda VAI congelar (véspera); sem ele = já congelado. As duas
- * variantes listam os mesmos recursos: o ponto do "Detalhes" no banner é o usuário saber o
- * que perde ANTES de perder. */
+/* `freezeDate` no data = ainda VAI congelar (véspera); sem ele = já congelado.
+ *
+ * A LISTA só aparece quando o usuário PEDIU por ela, clicando em "Detalhes" no banner
+ * (`showResources`). Na modal que abre sozinha ao entrar numa conta bloqueada fica só o
+ * recado curto e o botão. */
 interface FrozenModalData {
     freezeDate?: Date | string | null;
+    showResources?: boolean;
 }
 
 export default function AccountFrozenModal() {
@@ -42,8 +47,10 @@ export default function AccountFrozenModal() {
     const { accountsUrl } = useWhitelabelUrls();
     const { redirectToExternal } = useExternalContracting();
 
-    const freezeDate = (modalData as FrozenModalData | undefined)?.freezeDate ?? null;
+    const data = modalData as FrozenModalData | undefined;
+    const freezeDate = data?.freezeDate ?? null;
     const isWarning = Boolean(freezeDate);
+    const showResources = Boolean(data?.showResources);
 
     const title = isWarning
         ? translate('common.subscription.frozen.modal.warningTitle', {
@@ -51,9 +58,18 @@ export default function AccountFrozenModal() {
           })
         : translate('common.subscription.frozen.modal.title');
 
+    /* Sem a lista o texto tem que fechar sozinho; com a lista ele a INTRODUZ (termina em ":"). */
     const description = isWarning
-        ? translate('common.subscription.frozen.modal.warningDescription')
-        : translate('common.subscription.frozen.modal.description');
+        ? translate(
+              showResources
+                  ? 'common.subscription.frozen.modal.warningDescriptionWithResources'
+                  : 'common.subscription.frozen.modal.warningDescription',
+          )
+        : translate(
+              showResources
+                  ? 'common.subscription.frozen.modal.descriptionWithResources'
+                  : 'common.subscription.frozen.modal.description',
+          );
 
     const handleRegularize = () => {
         if (redirectToExternal('plans')) return;
@@ -62,41 +78,93 @@ export default function AccountFrozenModal() {
 
     return (
         <Dialog open={isOpen} onOpenChange={() => closeModal()}>
-            <DialogContent className="flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]">
-                <DialogHeader className="gap-3 text-left p-5">
-                    <div
-                        className={`flex items-center justify-center w-10 h-10 rounded-lg ${isWarning ? 'bg-orange-50' : 'bg-zinc-50'}`}
-                    >
-                        {isWarning ? (
-                            <IconAlertTriangle size={20} className="text-orange-500" />
-                        ) : (
-                            <IconLock size={24} className="text-zinc-950" />
-                        )}
+            <DialogContent
+                showCloseButton
+                /* Sem isto o Radix move o foco para o primeiro focável ao abrir — que aqui é o
+                 * gatilho do tooltip — e o tooltip abre em FOCO, não só em hover: a modal
+                 * aparecia com um balão já aberto. O foco segue preso no dialog. */
+                onOpenAutoFocus={(event) => event.preventDefault()}
+                className="flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[420px]! rounded-lg border"
+            >
+                <div className="flex flex-col gap-5 p-4 lg:p-5">
+                    <div className="flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg">
+                        <IconLock size={20} className="text-zinc-950" />
                     </div>
+
                     <div className="flex flex-col gap-2">
                         <DialogTitle className="paragraph-medium-semibold text-zinc-950">
                             {title}
                         </DialogTitle>
-                        <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
-                            <div className="flex flex-col gap-3">
-                                <p>{description}</p>
-                                <ul className="flex flex-col gap-1.5 list-disc pl-4">
-                                    {BLOCKED_RESOURCE_KEYS.map((key) => (
-                                        <li key={key}>
-                                            {translate(`common.subscription.frozen.modal.resources.${key}`)}
-                                        </li>
-                                    ))}
-                                </ul>
-                                <p>{translate('common.subscription.frozen.modal.keepsWorking')}</p>
-                            </div>
+                        <DialogDescription className="paragraph-small-regular text-zinc-500">
+                            {description}
                         </DialogDescription>
                     </div>
-                </DialogHeader>
 
-                <Separator />
+                    {showResources && (
+                        <>
+                            {/* Um bloco só, grupos separados por linha. A descrição de cada grupo
+                              * vive no tooltip do ícone de info à direita: na modal ela empilhava
+                              * três parágrafos e virava um paredão. */}
+                            <div className="bg-white border border-zinc-100 rounded-lg">
+                                {RESOURCE_GROUPS.map(({ key, icon: Icon }, index) => (
+                                    <div key={key}>
+                                        {index > 0 && <div className="h-px bg-zinc-100" />}
+                                        <div className="flex items-center justify-between gap-3 p-4">
+                                            <div className="flex items-center gap-3">
+                                                <Icon size={20} className="text-zinc-950 shrink-0" />
+                                                <span className="paragraph-small-semibold text-zinc-950">
+                                                    {translate(
+                                                        `common.subscription.frozen.modal.resources.${key}.title`,
+                                                    )}
+                                                </span>
+                                            </div>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <button
+                                                        type="button"
+                                                        aria-label={translate(
+                                                            `common.subscription.frozen.modal.resources.${key}.title`,
+                                                        )}
+                                                        className="flex items-center justify-center shrink-0 cursor-pointer"
+                                                    >
+                                                        <IconInfoCircle className="size-4 text-zinc-400" />
+                                                    </button>
+                                                </TooltipTrigger>
+                                                <TooltipContent
+                                                    side="top"
+                                                    /* Acima do dialog: o globals.css do gapps-app
+                                                     * sobe o [data-slot='dialog-content'] para
+                                                     * z-index 1011 !important (o componente
+                                                     * declara 1001), então o z-50 padrão do
+                                                     * tooltip ficava atrás. */
+                                                    className="z-[1100] max-w-[240px]"
+                                                >
+                                                    {translate(
+                                                        `common.subscription.frozen.modal.resources.${key}.description`,
+                                                    )}
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+
+                            {/* Bloco de informação padrão da plataforma. Ciano fixo: o congelamento
+                             * é exclusivo da wl 1, então não existe o caso whitelabel/zinc aqui. */}
+                            <div className="flex items-center gap-3 p-4 rounded-lg bg-cyan-50">
+                                <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
+                                <span className="paragraph-small-regular text-zinc-950">
+                                    {translate('common.subscription.frozen.modal.keepsWorking')}
+                                </span>
+                            </div>
+                        </>
+                    )}
+                </div>
+
+                <div className="h-px bg-zinc-200" />
 
-                <div className="flex items-center gap-2 p-5">
-                    <Button className="w-fit h-10!" onClick={handleRegularize}>
+                <div className="flex items-center gap-2 p-4 lg:p-5">
+                    <Button className="h-10 w-fit" onClick={handleRegularize}>
                         {translate('common.subscription.frozen.modal.cta')}
                     </Button>
                 </div>

package/src/components/navigation/SubscriptionBanner.tsx

@@ -93,7 +93,7 @@ export function SubscriptionBanner({
   // que responde outra pergunta. Aqui "Detalhes" significa "o que eu perco".
   if (freezeState === "frozen") {
     return (
-      <FrozenAccountBanner onDetails={() => openModal("accountFrozenModal")} />
+      <FrozenAccountBanner onDetails={() => openModal("accountFrozenModal", { showResources: true })} />
     );
   }
   if (freezeState === "warning") {
@@ -101,7 +101,7 @@ export function SubscriptionBanner({
     return (
       <FreezeWarningBanner
         freezeDate={freezeDate}
-        onDetails={() => openModal("accountFrozenModal", { freezeDate })}
+        onDetails={() => openModal("accountFrozenModal", { freezeDate, showResources: true })}
       />
     );
   }

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

@@ -444,20 +444,25 @@ const messages = {
       },
       modal: {
         title: 'Your account resources are blocked',
-        description: 'We could not identify your payment, so these resources are blocked:',
+        description: 'Your account resources are blocked due to missing payment. Update your subscription to unlock them.',
+        descriptionWithResources: 'We could not identify your payment, so these resources are blocked:',
+        warningDescriptionWithResources: 'Your payment is overdue. If we do not identify it by then, these resources will be blocked:',
         warningTitle: 'Your resources will be blocked on {freezeDate}',
-        warningDescription: 'Your payment is overdue. If we do not identify it by then, these resources will be blocked:',
+        warningDescription: 'Your payment is overdue. Settle it to keep access to your account resources.',
         keepsWorking: 'Your published pages stay online and your leads keep coming in. Everything is restored automatically once the payment goes through.',
         resources: {
-          pages: 'Publishing, creating and editing pages',
-          projects: 'Creating and editing projects',
-          leadsExport: 'Exporting leads',
-          pageSettings: 'Page settings, including lead notifications',
-          domains: 'Connecting new domains',
-          users: 'Inviting users and changing team permissions',
-          abTests: 'Creating and editing A/B tests',
-          uploads: 'Uploading images, PDFs and other files',
-          integrations: 'Managing integrations',
+          pages: {
+            title: 'Manage pages',
+            description: 'Publishing, creating and editing pages, settings, A/B tests, file uploads and exporting leads',
+          },
+          projects: {
+            title: 'Manage projects',
+            description: 'Creating and editing projects, inviting users and changing team permissions',
+          },
+          domains: {
+            title: 'Manage domains',
+            description: 'Connecting new domains and managing integrations',
+          },
         },
         cta: 'Update subscription',
       },

package/src/i18n/messages/es-es.ts

@@ -445,20 +445,25 @@ const messages = {
       },
       modal: {
         title: 'Los recursos de tu cuenta están bloqueados',
-        description: 'No identificamos el pago, así que estos recursos están bloqueados:',
+        description: 'Los recursos de tu cuenta están bloqueados por falta de pago. Regulariza la suscripción para liberarlos.',
+        descriptionWithResources: 'No identificamos el pago, así que estos recursos están bloqueados:',
+        warningDescriptionWithResources: 'El pago está atrasado. Si no lo identificamos hasta entonces, estos recursos se bloquearán:',
         warningTitle: 'Tus recursos se bloquearán el {freezeDate}',
-        warningDescription: 'El pago está atrasado. Si no lo identificamos hasta entonces, estos recursos se bloquearán:',
+        warningDescription: 'El pago está atrasado. Regulariza para no perder el acceso a los recursos de tu cuenta.',
         keepsWorking: 'Tus páginas publicadas siguen en línea y tus leads se siguen capturando. Todo vuelve automáticamente en cuanto se identifique el pago.',
         resources: {
-          pages: 'Publicar, crear y editar páginas',
-          projects: 'Crear y editar proyectos',
-          leadsExport: 'Exportar leads',
-          pageSettings: 'Configuración de la página, incluidas las notificaciones de leads',
-          domains: 'Conectar nuevos dominios',
-          users: 'Invitar usuarios y cambiar permisos del equipo',
-          abTests: 'Crear y editar pruebas A/B',
-          uploads: 'Subir imágenes, PDF y otros archivos',
-          integrations: 'Gestionar integraciones',
+          pages: {
+            title: 'Gestionar páginas',
+            description: 'Publicar, crear y editar páginas, configuración, pruebas A/B, subida de archivos y exportar leads',
+          },
+          projects: {
+            title: 'Gestionar proyectos',
+            description: 'Crear y editar proyectos, invitar usuarios y cambiar permisos del equipo',
+          },
+          domains: {
+            title: 'Gestionar dominios',
+            description: 'Conectar nuevos dominios y gestionar integraciones',
+          },
         },
         cta: 'Regularizar suscripción',
       },

package/src/i18n/messages/pt-br.ts

@@ -462,20 +462,25 @@ const messages = {
       },
       modal: {
         title: 'Recursos da sua conta bloqueados',
-        description: 'O pagamento não foi identificado, então estes recursos estão bloqueados:',
+        description: 'Sua conta está com os recursos bloqueados por falta de pagamento. Regularize a assinatura para liberar.',
+        descriptionWithResources: 'O pagamento não foi identificado, então estes recursos estão bloqueados:',
+        warningDescriptionWithResources: 'O pagamento está em atraso. Se não for identificado até lá, estes recursos serão bloqueados:',
         warningTitle: 'Seus recursos serão bloqueados em {freezeDate}',
-        warningDescription: 'O pagamento está em atraso. Se não for identificado até lá, estes recursos serão bloqueados:',
+        warningDescription: 'O pagamento está em atraso. Regularize para não perder o acesso aos recursos da sua conta.',
         keepsWorking: 'Suas páginas publicadas continuam no ar e seus leads seguem sendo capturados. Assim que o pagamento for identificado, tudo volta automaticamente.',
         resources: {
-          pages: 'Publicar, criar e editar páginas',
-          projects: 'Criar e editar projetos',
-          leadsExport: 'Exportar leads',
-          pageSettings: 'Configurações da página, incluindo notificações de leads',
-          domains: 'Conectar novos domínios',
-          users: 'Convidar usuários e alterar permissões da equipe',
-          abTests: 'Criar e editar testes A/B',
-          uploads: 'Enviar imagens, PDFs e outros arquivos',
-          integrations: 'Gerenciar integrações',
+          pages: {
+            title: 'Gerenciar páginas',
+            description: 'Publicar, criar e editar páginas, configurações, testes A/B, upload de arquivos e exportar leads',
+          },
+          projects: {
+            title: 'Gerenciar projetos',
+            description: 'Criar e editar projetos, convidar usuários e alterar permissões da equipe',
+          },
+          domains: {
+            title: 'Gerenciar domínios',
+            description: 'Conectar novos domínios e gerenciar integrações',
+          },
         },
         cta: 'Regularizar assinatura',
       },