@greatapps/common 1.1.715 → 1.1.717

package/dist/utils/cookies/hexa-promo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cookies/hexa-promo.ts"],"sourcesContent":["/**\n * Estado do \"Rumo ao Hexa\" promo modal — persistido em **cookies no domínio registrável\n * pai** (ex.: `accounts.greatpages.dev.br` → `.greatpages.dev.br`) para serem compartilhados\n * entre os subdomínios dos apps (accounts/gapps ↔ pages/gpages). Assim a janela de \"3 minutos\n * online\" é cumulativa entre os apps e a modal abre **uma única vez** por sessão/dia,\n * independente de em qual app o usuário esteja.\n *\n * São dois cookies:\n * - `gpromo-hexa-since` = `<dia>|<timestampMs>` — início da janela de 3 min (gravado uma vez).\n * - `gpromo-hexa-seen`  = `<dia>` — dia em que a modal já foi exibida.\n *\n * `<dia>` é a data local `YYYY-MM-DD`: vira automaticamente no dia seguinte, fazendo a modal\n * reaparecer. No logout, ambos os cookies são limpos (ver `auth.provider`), então um novo\n * login também faz a modal reaparecer.\n *\n * Em localhost (sem subdomínio) caem em cookies host-scoped — equivalente ao localStorage;\n * cross-port não compartilha (limitação aceita no dev local).\n */\n\nconst SINCE_COOKIE = 'gpromo-hexa-since';\nconst SEEN_COOKIE = 'gpromo-hexa-seen';\nconst MAX_AGE_SECONDS = 60 * 60 * 24 * 2; // 2 dias — folga sobre a janela de 1 dia.\n\nfunction parentCookieDomain(): string | undefined {\n  if (typeof window === 'undefined') return undefined;\n  const host = window.location.hostname;\n  if (!host || host === 'localhost') return undefined;\n  // IP literal → sem atributo Domain (cookie host-scoped)\n  if (/^\\d+\\.\\d+\\.\\d+\\.\\d+$/.test(host)) return undefined;\n  const parts = host.split('.');\n  if (parts.length < 2) return undefined;\n  // Tira o subdomínio mais à esquerda — `accounts.greatpages.dev.br` → `.greatpages.dev.br`\n  return '.' + parts.slice(1).join('.');\n}\n\nfunction readCookie(name: string): string | null {\n  if (typeof document === 'undefined') return null;\n  const m = document.cookie.match(new RegExp(`(?:^|;\\\\s*)${name}=([^;]+)`));\n  if (!m) return null;\n  try {\n    return decodeURIComponent(m[1]);\n  } catch {\n    return null;\n  }\n}\n\nfunction writeCookie(name: string, value: string): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') return;\n  const domain = parentCookieDomain();\n  const parts = [\n    `${name}=${encodeURIComponent(value)}`,\n    'Path=/',\n    `Max-Age=${MAX_AGE_SECONDS}`,\n    'SameSite=Lax',\n    domain ? `Domain=${domain}` : '',\n    window.location.protocol === 'https:' ? 'Secure' : '',\n  ].filter(Boolean);\n  try {\n    document.cookie = parts.join('; ');\n  } catch {\n    // Se o navegador bloquear cookies, seguimos com a exibição única por sessão (timer no Gate).\n  }\n}\n\nfunction expireCookie(name: string): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') return;\n  const domain = parentCookieDomain();\n  const parts = [\n    `${name}=`,\n    'Path=/',\n    'Max-Age=0',\n    'SameSite=Lax',\n    domain ? `Domain=${domain}` : '',\n    window.location.protocol === 'https:' ? 'Secure' : '',\n  ].filter(Boolean);\n  try {\n    document.cookie = parts.join('; ');\n  } catch {\n    // noop\n  }\n}\n\n/** Chave do dia local (`YYYY-MM-DD`) usada para reabrir a modal a cada novo dia. */\nexport function hexaPromoDayKey(): string {\n  const d = new Date();\n  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;\n}\n\nexport function getHexaPromoSeenDay(): string | null {\n  return readCookie(SEEN_COOKIE);\n}\n\nexport function setHexaPromoSeenDay(day: string): void {\n  writeCookie(SEEN_COOKIE, day);\n}\n\nexport function getHexaPromoSince(): { day: string; ms: number } | null {\n  const raw = readCookie(SINCE_COOKIE);\n  if (!raw) return null;\n  const [day, msRaw] = raw.split('|');\n  const ms = Number(msRaw);\n  if (!day || !Number.isFinite(ms)) return null;\n  return { day, ms };\n}\n\nexport function setHexaPromoSince(day: string, ms: number): void {\n  writeCookie(SINCE_COOKIE, `${day}|${ms}`);\n}\n\n/** Limpa o estado da promo (chamado no logout para reabrir a modal no próximo login). */\nexport function clearHexaPromo(): void {\n  expireCookie(SINCE_COOKIE);\n  expireCookie(SEEN_COOKIE);\n}\n"],"mappings":"AAmBA,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,kBAAkB,KAAK,KAAK,KAAK;AAEvC,SAAS,qBAAyC;AAChD,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,OAAO,OAAO,SAAS;AAC7B,MAAI,CAAC,QAAQ,SAAS,YAAa,QAAO;AAE1C,MAAI,uBAAuB,KAAK,IAAI,EAAG,QAAO;AAC9C,QAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,MAAI,MAAM,SAAS,EAAG,QAAO;AAE7B,SAAO,MAAM,MAAM,MAAM,CAAC,EAAE,KAAK,GAAG;AACtC;AAEA,SAAS,WAAW,MAA6B;AAC/C,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,IAAI,SAAS,OAAO,MAAM,IAAI,OAAO,cAAc,IAAI,UAAU,CAAC;AACxE,MAAI,CAAC,EAAG,QAAO;AACf,MAAI;AACF,WAAO,mBAAmB,EAAE,CAAC,CAAC;AAAA,EAChC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,YAAY,MAAc,OAAqB;AACtD,MAAI,OAAO,aAAa,eAAe,OAAO,WAAW,YAAa;AACtE,QAAM,SAAS,mBAAmB;AAClC,QAAM,QAAQ;AAAA,IACZ,GAAG,IAAI,IAAI,mBAAmB,KAAK,CAAC;AAAA,IACpC;AAAA,IACA,WAAW,eAAe;AAAA,IAC1B;AAAA,IACA,SAAS,UAAU,MAAM,KAAK;AAAA,IAC9B,OAAO,SAAS,aAAa,WAAW,WAAW;AAAA,EACrD,EAAE,OAAO,OAAO;AAChB,MAAI;AACF,aAAS,SAAS,MAAM,KAAK,IAAI;AAAA,EACnC,QAAQ;AAAA,EAER;AACF;AAEA,SAAS,aAAa,MAAoB;AACxC,MAAI,OAAO,aAAa,eAAe,OAAO,WAAW,YAAa;AACtE,QAAM,SAAS,mBAAmB;AAClC,QAAM,QAAQ;AAAA,IACZ,GAAG,IAAI;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,UAAU,MAAM,KAAK;AAAA,IAC9B,OAAO,SAAS,aAAa,WAAW,WAAW;AAAA,EACrD,EAAE,OAAO,OAAO;AAChB,MAAI;AACF,aAAS,SAAS,MAAM,KAAK,IAAI;AAAA,EACnC,QAAQ;AAAA,EAER;AACF;AAGO,SAAS,kBAA0B;AACxC,QAAM,IAAI,oBAAI,KAAK;AACnB,SAAO,GAAG,EAAE,YAAY,CAAC,IAAI,OAAO,EAAE,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,OAAO,EAAE,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;AAChH;AAEO,SAAS,sBAAqC;AACnD,SAAO,WAAW,WAAW;AAC/B;AAEO,SAAS,oBAAoB,KAAmB;AACrD,cAAY,aAAa,GAAG;AAC9B;AAEO,SAAS,oBAAwD;AACtE,QAAM,MAAM,WAAW,YAAY;AACnC,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,CAAC,KAAK,KAAK,IAAI,IAAI,MAAM,GAAG;AAClC,QAAM,KAAK,OAAO,KAAK;AACvB,MAAI,CAAC,OAAO,CAAC,OAAO,SAAS,EAAE,EAAG,QAAO;AACzC,SAAO,EAAE,KAAK,GAAG;AACnB;AAEO,SAAS,kBAAkB,KAAa,IAAkB;AAC/D,cAAY,cAAc,GAAG,GAAG,IAAI,EAAE,EAAE;AAC1C;AAGO,SAAS,iBAAuB;AACrC,eAAa,YAAY;AACzB,eAAa,WAAW;AAC1B;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.715",
+  "version": "1.1.717",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -46,12 +46,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -87,8 +81,8 @@
     "tailwind-merge": "3.5.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "9.9.0",
     "@hookform/resolvers": "5.2.2",
-    "zod": "4.4.3",
     "@tanstack/query-broadcast-client-experimental": "5.95.2",
     "@tanstack/react-query": "5.95.2",
     "@tanstack/react-query-devtools": "5.95.2",
@@ -98,7 +92,6 @@
     "@types/react-dom": "19.2.3",
     "glob": "13.0.6",
     "msw": "2.7.0",
-    "@faker-js/faker": "9.9.0",
     "next": "16.2.1",
     "next-intl": "4.12.0",
     "react": "19.1.4",
@@ -106,17 +99,18 @@
     "react-hook-form": "7.72.0",
     "tsup": "8.5.1",
     "typescript": "5.9.3",
+    "zod": "4.4.3",
     "zustand": "5.0.12"
   },
   "peerDependencies": {
+    "@faker-js/faker": ">=9.0.0",
     "@hookform/resolvers": ">=3.0.0",
     "@tanstack/query-broadcast-client-experimental": ">=5.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@tanstack/react-query-persist-client": ">=5.0.0",
+    "msw": ">=2.0.0",
     "next": ">=16.0.0",
     "next-intl": ">=4.0.0",
-    "@faker-js/faker": ">=9.0.0",
-    "msw": ">=2.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": ">=7.0.0",
@@ -131,5 +125,10 @@
     "@faker-js/faker": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/components/modals/HexaPromoModal.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { toast } from 'sonner';
+import {
+  IconCheck,
+  IconCopy,
+  IconInfoCircle,
+  IconStar,
+  IconTicket,
+  IconX,
+} from '@tabler/icons-react';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/overlay/Dialog';
+import { Toast } from '../ui/feedback/Toast';
+import { Button } from '../ui/buttons/Button';
+import useCopyToClipboard from '../../hooks/copy-to-clipboard.hook';
+import { useModalManager } from '../../store/useModalManager';
+import { useWhitelabelUrls } from '../../providers/whitelabel.provider';
+import { cn } from '../../infra/utils/clsx';
+
+type ComboPeriod = 'monthly' | 'semiannual' | 'annual';
+
+interface HexaCombo {
+  coupon: string;
+  name: string;
+  features: string[];
+  highlighted: boolean;
+  period: ComboPeriod;
+}
+
+// Campanha "Rumo ao Hexa" — exclusiva da whitelabel 1 (público pt-br). O texto é fixo de
+// propósito: a modal precisa renderizar também no gapps, que não tem provider de next-intl.
+const COPY = {
+  title: 'Rumo ao Hexa!',
+  subtitlePrefix: 'Ofertas exclusivas até ',
+  subtitleDate: '24/06',
+  mostChosen: 'Mais escolhido',
+  couponLabel: 'Cupom',
+  choosePlan: 'Escolher plano',
+  couponCopied: 'Cupom copiado!',
+  close: 'Fechar',
+  footerPrefix: 'Válido para a ',
+  footerBold: 'primeira contratação',
+  footerSuffix: ' dos planos Essencial, Negócio ou Agência',
+};
+
+const COMBOS: HexaCombo[] = [
+  {
+    coupon: 'MENSAL10',
+    name: 'Combo convocação',
+    highlighted: false,
+    period: 'monthly',
+    features: ['10% OFF no plano mensal', 'Webinars exclusivos'],
+  },
+  {
+    coupon: 'SEMESTRAL10',
+    name: 'Combo Hexa',
+    highlighted: true,
+    period: 'semiannual',
+    features: ['10% OFF no plano semestral', '3 templates exclusivos', 'Webinars exclusivos'],
+  },
+  {
+    coupon: 'ANUAL10',
+    name: 'Combo escalação',
+    highlighted: false,
+    period: 'annual',
+    features: ['10% OFF no plano anual', '3 templates exclusivos'],
+  },
+];
+
+// Cores promocionais (verde/amarelo do Brasil) — específicas desta campanha, fora do design
+// system, por isso ficam hardcoded apenas aqui.
+const GRADIENT = 'linear-gradient(180deg, #08c44f 0%, #7bd237 46.6%, #ffe31b 100%)';
+
+export default function HexaPromoModal() {
+  const { activeModal, closeModal } = useModalManager();
+  const { accountsUrl } = useWhitelabelUrls();
+  const isOpen = activeModal === 'hexaPromoModal';
+
+  const goToPlans = (coupon: string, period: ComboPeriod) => {
+    closeModal();
+    const url = `${accountsUrl}/subscriptions?tab=plans&coupon=${encodeURIComponent(coupon)}&period=${encodeURIComponent(period)}`;
+    window.location.assign(url);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={() => closeModal()}>
+      <DialogContent
+        showCloseButton={false}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className="border-0 bg-transparent p-0 shadow-none w-[calc(100%-32px)] sm:max-w-[940px] md:w-[924px] lg:w-[924px] max-h-[calc(100dvh-32px)] overflow-y-auto"
+      >
+        <DialogTitle className="sr-only">{COPY.title}</DialogTitle>
+
+        <div className="rounded-[12px] p-1" style={{ background: GRADIENT }}>
+          <div className="relative overflow-hidden rounded-[10px] bg-white p-8 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]">
+            {/* Arte decorativa (festão/bandeira) no canto superior direito */}
+            <img
+              src="/promo/hexa-confetti.png"
+              alt=""
+              aria-hidden
+              className="pointer-events-none absolute -top-10 right-0 w-[280px] rotate-[16deg] select-none"
+            />
+
+            <DialogClose className="absolute right-3 top-3 z-10 flex size-[34px] cursor-pointer items-center justify-center rounded-lg bg-white p-2 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-950 focus:outline-none">
+              <span className="sr-only">{COPY.close}</span>
+              <IconX className="size-[18px]" />
+            </DialogClose>
+
+            {/* Header: logo + bandeira */}
+            <div className="relative z-[1] flex w-fit items-center gap-[9px] rounded-lg bg-zinc-100 px-[9px] py-2">
+              <img src="/promo/hexa-logo.svg" alt="" aria-hidden className="size-6 select-none" />
+              <img src="/promo/hexa-flag.png" alt="" aria-hidden className="size-6 rounded select-none" />
+            </div>
+
+            {/* Título */}
+            <div className="relative z-[1] mt-4 flex flex-col gap-1">
+              <h2 className="font-['Outfit'] text-[32px] font-semibold leading-8 text-zinc-950">
+                {COPY.title}
+              </h2>
+              <p className="paragraph-medium-medium text-zinc-950">
+                {COPY.subtitlePrefix}
+                <span className="font-bold">{COPY.subtitleDate}</span>
+              </p>
+            </div>
+
+            {/* Cards */}
+            <div className="relative z-[1] mt-10 flex flex-col items-stretch gap-3 md:flex-row">
+              {COMBOS.map((combo) => (
+                <ComboCard key={combo.coupon} combo={combo} onChoose={() => goToPlans(combo.coupon, combo.period)} />
+              ))}
+            </div>
+
+            {/* Rodapé informativo */}
+            <div className="relative z-[1] mt-3 flex items-center justify-center gap-2.5 rounded-[10px] bg-zinc-100 p-3 text-center">
+              <IconInfoCircle className="size-4 shrink-0 text-zinc-950" />
+              <p className="paragraph-small-medium text-zinc-950">
+                {COPY.footerPrefix}
+                <span className="font-semibold">{COPY.footerBold}</span>
+                {COPY.footerSuffix}
+              </p>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface ComboCardProps {
+  combo: HexaCombo;
+  onChoose: () => void;
+}
+
+function ComboCard({ combo, onChoose }: ComboCardProps) {
+  const { isCopied, copy } = useCopyToClipboard({
+    onSuccess: () => {
+      toast.custom((t) => <Toast variant="success" message={COPY.couponCopied} toastId={t} />);
+    },
+  });
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-1 flex-col rounded-[10px] border bg-white pb-3 md:w-[276px]',
+        combo.highlighted ? 'border-cyan-500' : 'border-zinc-200',
+      )}
+    >
+      {combo.highlighted && (
+        <div className="absolute left-1/2 top-0 z-[1] flex h-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-[5px] rounded-md border-4 border-white bg-cyan-100 px-2">
+          <IconStar className="size-3 text-cyan-600" />
+          <span className="paragraph-xsmall-semibold whitespace-nowrap text-cyan-600">
+            {COPY.mostChosen}
+          </span>
+          <IconStar className="size-3 text-cyan-600" />
+        </div>
+      )}
+
+      <h3 className="border-b border-zinc-200 px-4 py-4 text-center font-['Outfit'] text-base font-semibold text-zinc-950">
+        {combo.name}
+      </h3>
+
+      <ul className="flex flex-1 flex-col gap-5 px-5 pt-5">
+        {combo.features.map((feature) => (
+          <li key={feature} className="flex items-center gap-2.5">
+            <IconCheck className="size-5 shrink-0 text-cyan-500" />
+            <span className="paragraph-small-medium text-zinc-950">{feature}</span>
+          </li>
+        ))}
+      </ul>
+
+      <div className="mx-3 mt-5 flex items-center gap-3 rounded-lg bg-cyan-50 py-2 pl-3.5 pr-2.5">
+        <IconTicket className="size-5 shrink-0 text-cyan-600" />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="paragraph-xsmall-medium text-zinc-400">{COPY.couponLabel}</span>
+          <span className="paragraph-small-semibold text-zinc-950">{combo.coupon}</span>
+        </div>
+        <button
+          type="button"
+          aria-label={COPY.couponLabel}
+          onClick={() => copy(combo.coupon)}
+          className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-cyan-100 hover:text-zinc-950"
+        >
+          {isCopied ? <IconCheck className="size-[18px]" /> : <IconCopy className="size-[18px]" />}
+        </button>
+      </div>
+
+      <div className="mx-3 mt-3">
+        <Button
+          variant={combo.highlighted ? 'default' : 'secondary'}
+          className={cn('h-11! w-full', combo.highlighted && 'bg-cyan-500 text-white hover:bg-cyan-600')}
+          onClick={onChoose}
+        >
+          {COPY.choosePlan}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/modals/HexaPromoModalGate.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+import { useAuth } from '../../providers/auth.provider';
+import { useWhitelabel } from '../../providers/whitelabel.provider';
+import { useModalManager } from '../../store/useModalManager';
+import {
+  getHexaPromoSeenDay,
+  getHexaPromoSince,
+  hexaPromoDayKey,
+  setHexaPromoSeenDay,
+  setHexaPromoSince,
+} from '../../utils/cookies/hexa-promo';
+
+/** Janela de tempo online antes de abrir a modal (3 minutos). */
+const ONLINE_DELAY_MS = 3 * 60 * 1000;
+
+/**
+ * TESTE: quando `true`, a modal abre imediatamente ao carregar o app, ignorando
+ * trial / whitelabel / timer de 3 min / cookies. Manter `false` em produção.
+ */
+const FORCE_OPEN_FOR_TEST = false;
+
+/**
+ * Dispara a modal "Rumo ao Hexa" quando um usuário em **trial** da **whitelabel 1** fica
+ * 3 minutos online. A janela é cumulativa entre gapps e gpages (timestamp compartilhado em
+ * cookie no domínio pai) e a modal abre **uma única vez** — reabrindo só no dia seguinte ou
+ * após logout/login. Montar este componente uma vez no layout de cada app consumidor.
+ */
+export default function HexaPromoModalGate() {
+  const { isAuthenticated } = useAuth();
+  const { whitelabel } = useWhitelabel();
+  const { activeModal, openModal, closeModal } = useModalManager();
+  const { data } = useActiveSubscription();
+
+  const subscription = data?.data?.[0] ?? null;
+  const eligible =
+    isAuthenticated && whitelabel?.id === 1 && subscription?.type === 'trial';
+
+  // Elegibilidade atual visível dentro do setTimeout (que captura o valor do agendamento).
+  const eligibleRef = useRef(eligible);
+  eligibleRef.current = eligible;
+
+  const forcedRef = useRef(false);
+
+  // Nunca deixa a modal aberta para usuário deslogado/inelegível: se ele abriu logado e
+  // depois deslogou (ou perdeu a elegibilidade), fecha.
+  useEffect(() => {
+    if (FORCE_OPEN_FOR_TEST) return;
+    if (!eligible && activeModal === 'hexaPromoModal') closeModal();
+  }, [eligible, activeModal, closeModal]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // TESTE: abre uma vez ao carregar, sem nenhuma condição.
+    if (FORCE_OPEN_FOR_TEST) {
+      if (forcedRef.current || activeModal) return;
+      forcedRef.current = true;
+      openModal('hexaPromoModal');
+      return;
+    }
+
+    if (!eligible) return;
+    // Outra modal aberta: não empilha em cima. Reavalia quando ela fechar (dep `activeModal`).
+    if (activeModal) return;
+
+    const todayKey = hexaPromoDayKey();
+    if (getHexaPromoSeenDay() === todayKey) return; // já exibida hoje/nesta sessão
+
+    // Início da janela compartilhado entre os apps; reinicia a cada novo dia.
+    let since = getHexaPromoSince();
+    if (!since || since.day !== todayKey) {
+      since = { day: todayKey, ms: Date.now() };
+      setHexaPromoSince(since.day, since.ms);
+    }
+
+    const remaining = Math.max(0, since.ms + ONLINE_DELAY_MS - Date.now());
+    const timer = setTimeout(() => {
+      // Revalida no disparo: o usuário pode ter deslogado durante a janela.
+      if (!eligibleRef.current) return;
+      // Recheca o cookie no disparo: se o outro app já abriu, não reabre aqui.
+      if (getHexaPromoSeenDay() === todayKey) return;
+      setHexaPromoSeenDay(todayKey);
+      openModal('hexaPromoModal');
+    }, remaining);
+
+    return () => clearTimeout(timer);
+  }, [eligible, activeModal, openModal]);
+
+  return null;
+}

package/src/index.ts

@@ -107,6 +107,8 @@ export { useChargeAction } from "./modules/charges/hooks/charge-action.hook";
 export { useIaCredits } from "./modules/ia-credits/hooks/ia-credits.hook";
 export type {
   IaCreditsSummary,
+  IaCreditsSummaryData,
+  IaCreditAddBatch,
   IaCreditOperation,
 } from "./modules/ia-credits/types";
 export type {
@@ -199,9 +201,12 @@ export {
 export { useBuyCreditsModal } from "./store/useBuyCreditsModal";
 export { useCreditsDisabledModal } from "./store/useCreditsDisabledModal";
 export { usePaidPlanRequiredModal } from "./store/usePaidPlanRequiredModal";
+export { useHexaPromoModal } from "./store/useHexaPromoModal";
 export { default as BuyCreditsModal } from "./components/modals/BuyCreditsModal";
 export { default as CreditsDisabledModal } from "./components/modals/CreditsDisabledModal";
 export { default as PaidPlanRequiredModal } from "./components/modals/PaidPlanRequiredModal";
+export { default as HexaPromoModal } from "./components/modals/HexaPromoModal";
+export { default as HexaPromoModalGate } from "./components/modals/HexaPromoModalGate";
 export { default as AddCardModal } from "./components/modals/cards/AddCardModal";
 export { DeleteCardModal } from "./components/modals/cards/DeleteCardModal";
 export { CannotDeleteCardModal } from "./components/modals/cards/CannotDeleteCardModal";

package/src/modules/ia-credits/handlers/list-ia-credits.handler.ts

@@ -8,7 +8,7 @@ export function createListIaCreditsHandler() {
   return async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
     return safeRouteHandler(async () => {
       const { id } = await params;
-      return iaCreditsService.listOperations(id);
+      return iaCreditsService.getSummaryData(id);
     });
   };
 }

package/src/modules/ia-credits/hooks/ia-credits.hook.ts

@@ -3,67 +3,51 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { apiFetch } from '../../../infra/http/api-fetch';
-import type { PaginatedSuccessResult } from '../../../infra/api/types';
-import type { IaCreditOperation, IaCreditsSummary } from '../types';
+import type { SuccessResult } from '../../../infra/api/types';
+import type { IaCreditsSummary, IaCreditsSummaryData } from '../types';
 import { useActiveSubscription } from '../../subscriptions/hooks/find-active-subscription.hook';
 import { useAuthQueryKey } from '../../../hooks/useAuthQueryKey';
 
-function calculateSummary(operations: IaCreditOperation[]): IaCreditsSummary {
-  const today = new Date();
-  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
-  const adds = operations.filter((op) => op.operation === 'add');
-  const subtracts = operations.filter((op) => op.operation === 'subtract');
+function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function calculateSummary(data: IaCreditsSummaryData | null): IaCreditsSummary {
+  // Blindagem: se vier um shape inesperado (ex.: resposta/cache antigo do
+  // endpoint paginado), degrada para o sumário vazio em vez de crashar.
+  const addBatches = Array.isArray(data?.addBatches) ? data.addBatches : [];
+  const availableCredits = Number(data?.availableCredits) || 0;
+
+  const today = startOfDay(new Date());
 
   let totalCredits = 0;
   let usedCredits = 0;
   let nextExpirationInDays: number | null = null;
   let nextExpiringCredits: number | null = null;
 
-  for (const add of adds) {
-    const expirationRaw = add.expiration_time;
-    if (!expirationRaw) continue;
-
-    const expiration = new Date(expirationRaw);
-    const expirationDate = new Date(
-      expiration.getFullYear(),
-      expiration.getMonth(),
-      expiration.getDate()
-    );
-
-    const expiredByDate = expirationDate.getTime() < todayDate.getTime();
-    const hasExpired = add.has_expired || expiredByDate;
+  for (const batch of addBatches) {
+    if (batch.has_expired) continue;
 
-    if (hasExpired) continue;
+    totalCredits += batch.added_credits;
+    usedCredits += batch.consumed_credits;
 
-    const addedCredits = add.operation_value;
+    if (batch.remaining_credits <= 0 || !batch.expiration_time) continue;
 
-    const consumedForAdd = subtracts
-      .filter((sub) => String(sub.consumed_from_add_id) === String(add.id))
-      .reduce((sum, sub) => sum + sub.operation_value, 0);
+    const expirationDate = startOfDay(new Date(batch.expiration_time));
+    const days = Math.max(0, Math.ceil((expirationDate.getTime() - today.getTime()) / MS_PER_DAY));
 
-    const remainingForAdd = Math.max(0, addedCredits - consumedForAdd);
-
-    totalCredits += addedCredits;
-    usedCredits += consumedForAdd;
-
-    const diffMs = expirationDate.getTime() - todayDate.getTime();
-    const days = Math.max(0, Math.ceil(diffMs / (1000 * 60 * 60 * 24)));
-
-    if (remainingForAdd > 0) {
-      if (nextExpirationInDays === null || days < nextExpirationInDays) {
-        nextExpirationInDays = days;
-        nextExpiringCredits = remainingForAdd;
-      }
+    if (nextExpirationInDays === null || days < nextExpirationInDays) {
+      nextExpirationInDays = days;
+      nextExpiringCredits = batch.remaining_credits;
     }
   }
 
-  const availableCredits = Math.max(0, totalCredits - usedCredits);
-
   return {
     totalCredits,
     usedCredits,
-    availableCredits,
+    availableCredits: Math.max(0, availableCredits),
     nextExpiringCredits,
     nextExpirationInDays,
   };
@@ -82,7 +66,7 @@ export function useIaCredits(options: UseIaCreditsOptions = {}) {
   const query = useQuery({
     queryKey,
     queryFn: ({ signal }) =>
-      apiFetch<PaginatedSuccessResult<IaCreditOperation>>(
+      apiFetch<SuccessResult<IaCreditsSummaryData>>(
         `/api/subscriptions/${subscriptionId}/ia-credits`,
         { signal }
       ),
@@ -90,14 +74,12 @@ export function useIaCredits(options: UseIaCreditsOptions = {}) {
     refetchInterval: options.refetchInterval ?? false,
   });
 
-  const operations = query.data?.data ?? [];
+  const summaryData = query.data?.data ?? null;
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const summary = useMemo(() => calculateSummary(operations), [operations]);
+  const summary = useMemo(() => calculateSummary(summaryData), [summaryData]);
 
   return {
     subscription,
-    operations,
     summary,
     isLoading: isSubscriptionLoading || query.isPending,
     isSubscriptionLoading,

package/src/modules/ia-credits/services/ia-credits.service.ts

@@ -1,37 +1,73 @@
-import 'server-only';
-
-import { api } from '../../../infra/api/client';
-import { ApiError, ApiPaginatedActionResult, PaginatedSuccessResult } from '../../../infra/api/types';
-import { getUserContext } from '../../auth/utils/get-user-context';
-import { IaCreditOperation, IaCreditOperationSchema } from '../types';
-
-class IaCreditsService {
-  async listOperations(
-    subscriptionId: number | string
-  ): Promise<PaginatedSuccessResult<IaCreditOperation>> {
-    const { id_account } = await getUserContext();
-
-    const endpoint = `/accounts/${id_account}/subscriptions/${subscriptionId}/items/balance/list?page=1&limit=20&sort=id:DESC`;
-
-    const response = await api.apps.get<ApiPaginatedActionResult<IaCreditOperation>>(endpoint);
-
-    if (response.status === 0) {
-      throw new ApiError(
-        response.message || 'Erro ao listar créditos de IA',
-        'LIST_IA_CREDITS_FAILED',
-        400
-      );
-    }
-
-    const raw = response.data ?? [];
-    const data = raw.map((item) => IaCreditOperationSchema.parse(item));
-
-    return {
-      data,
-      total: response.total ?? data.length,
-      success: true,
-    };
-  }
-}
-
-export const iaCreditsService = new IaCreditsService();
+import 'server-only';
+
+import { api } from '../../../infra/api/client';
+import { ApiError, ApiPaginatedActionResult, SuccessResult } from '../../../infra/api/types';
+import { getUserContext } from '../../auth/utils/get-user-context';
+import {
+  IaCreditAddBatch,
+  IaCreditAddBatchSchema,
+  IaCreditOperation,
+  IaCreditsSummaryData,
+} from '../types';
+
+class IaCreditsService {
+  async getSummaryData(
+    subscriptionId: number | string
+  ): Promise<SuccessResult<IaCreditsSummaryData>> {
+    const { id_account } = await getUserContext();
+
+    const [availableCredits, addBatches] = await Promise.all([
+      this.fetchCurrentBalance(id_account, subscriptionId),
+      this.fetchAddBatches(id_account, subscriptionId),
+    ]);
+
+    return { success: true, data: { availableCredits, addBatches } };
+  }
+
+  // Saldo atual = balance_after_operation da última operação do extrato
+  // (sort id:DESC, limit=1). Já é o saldo do usuário, não precisa recalcular.
+  private async fetchCurrentBalance(
+    idAccount: number | string,
+    subscriptionId: number | string
+  ): Promise<number> {
+    const endpoint = `/accounts/${idAccount}/subscriptions/${subscriptionId}/items/balance/list?page=1&limit=1&sort=id:DESC`;
+
+    const response = await api.apps.get<ApiPaginatedActionResult<IaCreditOperation>>(endpoint);
+
+    if (response.status === 0) {
+      throw new ApiError(
+        response.message || 'Erro ao consultar saldo de créditos de IA',
+        'GET_IA_CREDITS_BALANCE_FAILED',
+        400
+      );
+    }
+
+    const balance = (response.data ?? [])[0]?.balance_after_operation;
+    return balance == null ? 0 : Number(balance);
+  }
+
+  // Lotes de adição com added/consumed/remaining já agregados pelo backend.
+  // sort id:DESC garante que os lotes mais recentes (não expirados) entram
+  // primeiro no limite; lotes expirados são filtrados no hook.
+  private async fetchAddBatches(
+    idAccount: number | string,
+    subscriptionId: number | string
+  ): Promise<IaCreditAddBatch[]> {
+    const endpoint = `/accounts/${idAccount}/subscriptions/${subscriptionId}/items/balance/list/add?page=1&limit=100&sort=id:DESC`;
+
+    const response = await api.apps.get<ApiPaginatedActionResult<IaCreditAddBatch>>(endpoint);
+
+    if (response.status === 0) {
+      throw new ApiError(
+        response.message || 'Erro ao listar lotes de créditos de IA',
+        'LIST_IA_CREDITS_ADDS_FAILED',
+        400
+      );
+    }
+
+    const raw = response.data ?? [];
+    return raw.map((item) => IaCreditAddBatchSchema.parse(item));
+  }
+}
+
+export const iaCreditsService = new IaCreditsService();