@greatapps/common 1.1.747 → 1.1.749

package/dist/components/layouts/AiCreditsOfferGate.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { useAuth } from "../../providers/auth.provider";
+import { useIsDefaultWhitelabel, useWhitelabel } from "../../providers/whitelabel.provider";
+import { useActiveSubscription } from "../../modules/subscriptions/hooks/find-active-subscription.hook";
+import { hasActivePaidSubscription } from "../../modules/subscriptions/utils/has-active-paid-subscription";
+import { ADDON_IDS } from "../../modules/subscriptions/constants/addons.constants";
+import { useCurrencyFormatter } from "../../modules/accounts/hooks/use-currency-formatter.hook";
+import { useCards } from "../../modules/cards/hooks/cards.hook";
+import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
+import { useAiCreditsOfferEligibility } from "../../modules/ia-credits/hooks/use-offer-eligibility.hook";
+import {
+  AI_CREDITS_FIRST_PURCHASE_OFFER,
+  AiCreditsOfferStage
+} from "../../modules/ia-credits/constants/ai-credits-offer.constants";
+import {
+  readOfferStageCookie,
+  writeOfferStageCookie
+} from "../../modules/ia-credits/utils/offer-stage-cookie";
+import { useAiCreditsOfferModal } from "../../store/useAiCreditsOfferModal";
+import { useModalManager } from "../../store/useModalManager";
+const OPEN_DELAY_MS = 1e3;
+function resolveCandidateStage(summary) {
+  if (summary.availableCredits === 0 || summary.totalCredits === 0) {
+    return AiCreditsOfferStage.ZERO_SHOWN;
+  }
+  const usedRatio = summary.usedCredits / summary.totalCredits;
+  if (usedRatio >= 0.9) return AiCreditsOfferStage.EXHAUSTED_SHOWN;
+  if (usedRatio >= 0.5) return AiCreditsOfferStage.HALF_SHOWN;
+  if (summary.usedCredits >= 1) return AiCreditsOfferStage.FIRST_USE_SHOWN;
+  return AiCreditsOfferStage.CAMPAIGN_SHOWN;
+}
+function AiCreditsOfferGate({ suppressWhen = false }) {
+  const { activeModal } = useModalManager();
+  const { openModal } = useAiCreditsOfferModal();
+  const { user } = useAuth();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const { whitelabel } = useWhitelabel();
+  const { data: subscriptionData } = useActiveSubscription();
+  const { currency } = useCurrencyFormatter();
+  const { summary, isLoading: isCreditsLoading } = useIaCredits();
+  const hasArmedRef = useRef(false);
+  const subscription = subscriptionData?.data?.[0] ?? null;
+  const accountId = user?.id_account;
+  const canManageBilling = user?.profile === "owner" || user?.profile === "admin";
+  const currentAiCredits = subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AI)?.quantity ?? 0;
+  const isFirstPurchase = !hasActivePaidSubscription(subscription) && !subscription?.charged;
+  const passesClientCutoff = isDefaultWl && currency === "brl" && canManageBilling && accountId != null && isFirstPurchase && currentAiCredits < AI_CREDITS_FIRST_PURCHASE_OFFER.credits;
+  const { data: eligibilityData } = useAiCreditsOfferEligibility({ enabled: passesClientCutoff });
+  const cardsQuery = useCards({ enabled: passesClientCutoff });
+  useEffect(() => {
+    if (hasArmedRef.current) return;
+    if (suppressWhen || activeModal) return;
+    if (!passesClientCutoff || isCreditsLoading) return;
+    if (!eligibilityData || !eligibilityData.eligible || accountId == null) return;
+    if (!cardsQuery.isSuccess || cardsQuery.data.data.length > 0) return;
+    const candidateStage = resolveCandidateStage(summary);
+    const cookie = readOfferStageCookie(accountId);
+    const alreadyShownThisSession = cookie.lastSessionIat === eligibilityData.sessionIssuedAt;
+    if (alreadyShownThisSession) return;
+    const isRepeatableStage = candidateStage === AiCreditsOfferStage.CAMPAIGN_SHOWN || candidateStage === AiCreditsOfferStage.ZERO_SHOWN;
+    const shouldOpen = candidateStage > cookie.stage || isRepeatableStage && candidateStage === cookie.stage;
+    if (!shouldOpen) return;
+    hasArmedRef.current = true;
+    const timer = setTimeout(() => {
+      writeOfferStageCookie(
+        accountId,
+        { stage: candidateStage, lastSessionIat: eligibilityData.sessionIssuedAt },
+        whitelabel?.domain
+      );
+      openModal();
+    }, OPEN_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [
+    accountId,
+    activeModal,
+    cardsQuery.data,
+    cardsQuery.isSuccess,
+    eligibilityData,
+    isCreditsLoading,
+    openModal,
+    passesClientCutoff,
+    suppressWhen,
+    summary,
+    whitelabel?.domain
+  ]);
+  return null;
+}
+export {
+  AiCreditsOfferGate
+};
+//# sourceMappingURL=AiCreditsOfferGate.mjs.map

package/dist/components/layouts/AiCreditsOfferGate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/AiCreditsOfferGate.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { useAuth } from '../../providers/auth.provider';\nimport { useIsDefaultWhitelabel, useWhitelabel } from '../../providers/whitelabel.provider';\nimport { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';\nimport { hasActivePaidSubscription } from '../../modules/subscriptions/utils/has-active-paid-subscription';\nimport { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';\nimport { useCurrencyFormatter } from '../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { useCards } from '../../modules/cards/hooks/cards.hook';\nimport { useIaCredits } from '../../modules/ia-credits/hooks/ia-credits.hook';\nimport { useAiCreditsOfferEligibility } from '../../modules/ia-credits/hooks/use-offer-eligibility.hook';\nimport {\n  AI_CREDITS_FIRST_PURCHASE_OFFER,\n  AiCreditsOfferStage,\n} from '../../modules/ia-credits/constants/ai-credits-offer.constants';\nimport {\n  readOfferStageCookie,\n  writeOfferStageCookie,\n} from '../../modules/ia-credits/utils/offer-stage-cookie';\nimport { useAiCreditsOfferModal } from '../../store/useAiCreditsOfferModal';\nimport { useModalManager } from '../../store/useModalManager';\nimport type { IaCreditsSummary } from '../../modules/ia-credits/types';\n\n/** Espera pedida pelo produto: a oferta entra 1s depois de o gatilho decidir, não junto. */\nconst OPEN_DELAY_MS = 1000;\n\n/**\n * Estágio que os créditos ATUAIS da conta sustentam, na escada do Diogo — sempre o mais alto que os\n * números batem (ordem de checagem: ZERO > EXHAUSTED > HALF > FIRST_USE > CAMPAIGN).\n *\n * `totalCredits === 0` (lote mensal expirado, ainda sem renovar) cai em ZERO, não em divisão por\n * zero — mesma régua do `availableCredits === 0`.\n */\nfunction resolveCandidateStage(\n  summary: Pick<IaCreditsSummary, 'totalCredits' | 'usedCredits' | 'availableCredits'>\n): AiCreditsOfferStage {\n  if (summary.availableCredits === 0 || summary.totalCredits === 0) {\n    return AiCreditsOfferStage.ZERO_SHOWN;\n  }\n  const usedRatio = summary.usedCredits / summary.totalCredits;\n  if (usedRatio >= 0.9) return AiCreditsOfferStage.EXHAUSTED_SHOWN;\n  if (usedRatio >= 0.5) return AiCreditsOfferStage.HALF_SHOWN;\n  if (summary.usedCredits >= 1) return AiCreditsOfferStage.FIRST_USE_SHOWN;\n  return AiCreditsOfferStage.CAMPAIGN_SHOWN;\n}\n\nexport interface AiCreditsOfferGateProps {\n  /**\n   * Overlay local do host, fora do `useModalManager` compartilhado (ex.: geração de IA em\n   * progresso, `InsufficientCreditsModal` do editor) — a oferta não empilha em cima nem espera a\n   * vez enquanto `true`; ela volta a tentar no próximo render em que a condição cair, porque o\n   * estágio só é gravado quando o modal realmente abre.\n   */\n  suppressWhen?: boolean;\n}\n\n/**\n * Quem decide se a oferta de primeira compra de créditos de IA aparece, e em qual estágio (gatilhos\n * do Diogo — ver Asana ID-1217333331953496). Mora no root layout de cada app, ao lado dos outros\n * gates de modal.\n *\n * Precisa passar por, nesta ordem:\n *\n *  1. **Corte barato do cliente.** Whitelabel padrão + conta em BRL + `owner`/`admin` + primeira\n *     compra de verdade (sem assinatura paga vigente, sem NENHUMA cobrança no histórico) + menos de\n *     500 créditos já contratados. Evita bater no backend pra quem obviamente não se qualifica.\n *  2. **Elegibilidade do servidor**, com FAIL CLOSED: erro, timeout ou ainda carregando conta como\n *     inelegível — sem confirmação do backend não existe oferta (ele é quem sabe se a conta já\n *     consumiu a oferta em QUALQUER assinatura, cross-cancelamento incluso).\n *  2.1. **Cartão salvo, também FAIL CLOSED.** O card exige as duas condições juntas — plano\n *     elegível E ainda sem cartão. O backend valida isso na elegibilidade, mas o gate confere de\n *     novo com `useCards`: sem confirmação de que a lista veio vazia, não abre (evita a corrida em\n *     que alguém cadastra o cartão pelo CTA e desiste antes de confirmar, e o cache local de\n *     elegibilidade ainda não invalidou).\n *  3. **Estágio candidato**, derivado dos créditos atuais (`resolveCandidateStage`).\n *  4. **Escada monotônica do cookie `ai-credits-offer-stage`**: só abre se o candidato é MAIOR que o\n *     estágio gravado, OU se o candidato é CAMPAIGN/ZERO — os dois únicos que reapresentam, e só\n *     numa sessão de login nova (`sessionIssuedAt` ≠ `lastSessionIat`). Nenhum dos dois tem teto de\n *     repetições: o Diogo pediu literalmente \"mostrar sempre que iniciar sessão nova\" para a\n *     campanha e \"pode ficar mostrando\" para quem está sem crédito (Asana ID-1217333331953496).\n *  5. **Máx. 1 apresentação por sessão de login.** Sai de graça da regra acima: se o cookie já tem\n *     `lastSessionIat` igual ao da sessão atual, NADA abre — nem uma escalada de estágio dentro da\n *     mesma sessão (ex.: FIRST_USE → HALF → EXHAUSTED na mesma geração, no Free de 10 créditos).\n */\nexport function AiCreditsOfferGate({ suppressWhen = false }: AiCreditsOfferGateProps) {\n  const { activeModal } = useModalManager();\n  const { openModal } = useAiCreditsOfferModal();\n  const { user } = useAuth();\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const { whitelabel } = useWhitelabel();\n  const { data: subscriptionData } = useActiveSubscription();\n  const { currency } = useCurrencyFormatter();\n  const { summary, isLoading: isCreditsLoading } = useIaCredits();\n  const hasArmedRef = useRef(false);\n\n  const subscription = subscriptionData?.data?.[0] ?? null;\n  const accountId = user?.id_account;\n  const canManageBilling = user?.profile === 'owner' || user?.profile === 'admin';\n  const currentAiCredits =\n    subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AI)?.quantity ?? 0;\n  const isFirstPurchase = !hasActivePaidSubscription(subscription) && !subscription?.charged;\n\n  const passesClientCutoff =\n    isDefaultWl &&\n    currency === 'brl' &&\n    canManageBilling &&\n    accountId != null &&\n    isFirstPurchase &&\n    currentAiCredits < AI_CREDITS_FIRST_PURCHASE_OFFER.credits;\n\n  // Só consulta o servidor depois do corte barato: quem não passa aqui nunca veria a oferta, e a\n  // consulta custa duas chamadas no gapps-r3-api.\n  const { data: eligibilityData } = useAiCreditsOfferEligibility({ enabled: passesClientCutoff });\n  const cardsQuery = useCards({ enabled: passesClientCutoff });\n\n  useEffect(() => {\n    if (hasArmedRef.current) return;\n    if (suppressWhen || activeModal) return;\n    if (!passesClientCutoff || isCreditsLoading) return;\n    // Fail closed: sem resposta do servidor (carregando, erro, ou reason preenchido), não abre.\n    if (!eligibilityData || !eligibilityData.eligible || accountId == null) return;\n    // Fail closed: sem confirmação de que a lista de cartões carregou vazia, não abre — o backend\n    // já valida \"sem cartão\" na elegibilidade, isto é a segunda camada do lado do cliente.\n    if (!cardsQuery.isSuccess || cardsQuery.data.data.length > 0) return;\n\n    const candidateStage = resolveCandidateStage(summary);\n    const cookie = readOfferStageCookie(accountId);\n\n    const alreadyShownThisSession = cookie.lastSessionIat === eligibilityData.sessionIssuedAt;\n    if (alreadyShownThisSession) return;\n\n    const isRepeatableStage =\n      candidateStage === AiCreditsOfferStage.CAMPAIGN_SHOWN ||\n      candidateStage === AiCreditsOfferStage.ZERO_SHOWN;\n\n    const shouldOpen =\n      candidateStage > cookie.stage || (isRepeatableStage && candidateStage === cookie.stage);\n    if (!shouldOpen) return;\n\n    // Arma uma única vez por montagem: sem isso, qualquer re-render limparia o timer pendente.\n    hasArmedRef.current = true;\n\n    const timer = setTimeout(() => {\n      // O estágio é gravado junto com a abertura (e não antes): fechar a aba durante o delay não\n      // pode queimar a apresentação.\n      writeOfferStageCookie(\n        accountId,\n        { stage: candidateStage, lastSessionIat: eligibilityData.sessionIssuedAt },\n        whitelabel?.domain\n      );\n      openModal();\n    }, OPEN_DELAY_MS);\n\n    return () => clearTimeout(timer);\n  }, [\n    accountId,\n    activeModal,\n    cardsQuery.data,\n    cardsQuery.isSuccess,\n    eligibilityData,\n    isCreditsLoading,\n    openModal,\n    passesClientCutoff,\n    suppressWhen,\n    summary,\n    whitelabel?.domain,\n  ]);\n\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/AccountFrozenModal.mjs

@@ -20,9 +20,21 @@ import { useWhitelabelUrls, useExternalContracting } from "../../providers/white
 import { useModalManager } from "../../store/useModalManager";
 import { formatShortDate } from "../../infra/utils/date";
 const RESOURCE_GROUPS = [
-  { key: "pages", icon: IconFile },
-  { key: "projects", icon: IconFolder },
-  { key: "domains", icon: IconWorld }
+  {
+    icon: IconFile,
+    titleKey: "common.subscription.frozen.modal.resources.pages.title",
+    descriptionKey: "common.subscription.frozen.modal.resources.pages.description"
+  },
+  {
+    icon: IconFolder,
+    titleKey: "common.subscription.frozen.modal.resources.projects.title",
+    descriptionKey: "common.subscription.frozen.modal.resources.projects.description"
+  },
+  {
+    icon: IconWorld,
+    titleKey: "common.subscription.frozen.modal.resources.domains.title",
+    descriptionKey: "common.subscription.frozen.modal.resources.domains.description"
+  }
 ];
 function AccountFrozenModal() {
   const translate = useTranslations();
@@ -60,23 +72,19 @@ function AccountFrozenModal() {
             /* @__PURE__ */ jsx(DialogDescription, { className: "paragraph-small-regular text-zinc-500", children: description })
           ] }),
           showResources && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "bg-white border border-zinc-100 rounded-lg", children: RESOURCE_GROUPS.map(({ key, icon: Icon }, index) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-white border border-zinc-100 rounded-lg", children: RESOURCE_GROUPS.map(({ titleKey, descriptionKey, icon: Icon }, index) => /* @__PURE__ */ jsxs("div", { children: [
               index > 0 && /* @__PURE__ */ jsx("div", { className: "h-px bg-zinc-100" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 p-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                   /* @__PURE__ */ jsx(Icon, { size: 20, className: "text-zinc-950 shrink-0" }),
-                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translate(
-                    `common.subscription.frozen.modal.resources.${key}.title`
-                  ) })
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translate(titleKey) })
                 ] }),
                 /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
-                      "aria-label": translate(
-                        `common.subscription.frozen.modal.resources.${key}.title`
-                      ),
+                      "aria-label": translate(titleKey),
                       className: "flex items-center justify-center shrink-0 cursor-pointer",
                       children: /* @__PURE__ */ jsx(IconInfoCircle, { className: "size-4 text-zinc-400" })
                     }
@@ -86,14 +94,12 @@ function AccountFrozenModal() {
                     {
                       side: "top",
                       className: "z-[1100] max-w-[240px]",
-                      children: translate(
-                        `common.subscription.frozen.modal.resources.${key}.description`
-                      )
+                      children: translate(descriptionKey)
                     }
                   )
                 ] })
               ] })
-            ] }, key)) }),
+            ] }, titleKey)) }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4 rounded-lg bg-cyan-50", children: [
               /* @__PURE__ */ jsx(IconInfoCircle, { className: "size-4 text-zinc-950 shrink-0" }),
               /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: translate("common.subscription.frozen.modal.keepsWorking") })

package/dist/components/modals/AccountFrozenModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modals/AccountFrozenModal.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n    IconLock,\n    IconFile,\n    IconFolder,\n    IconWorld,\n    IconInfoCircle,\n    type IconProps,\n} from '@tabler/icons-react';\nimport type { ComponentType } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../ui/buttons/Button';\nimport {\n    Dialog,\n    DialogContent,\n    DialogDescription,\n    DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport { formatShortDate } from '../../infra/utils/date';\n\n/* Os 9 recursos do card agrupados nos 3 grupos que o usuário reconhece na plataforma.\n * Um ícone por grupo; o texto mora no catálogo. */\nconst RESOURCE_GROUPS: { key: string; icon: ComponentType<IconProps> }[] = [\n    { key: 'pages', icon: IconFile },\n    { key: 'projects', icon: IconFolder },\n    { key: 'domains', icon: IconWorld },\n];\n\n/* `freezeDate` no data = ainda VAI congelar (véspera); sem ele = já congelado.\n *\n * A LISTA só aparece quando o usuário PEDIU por ela, clicando em \"Detalhes\" no banner\n * (`showResources`). Na modal que abre sozinha ao entrar numa conta bloqueada fica só o\n * recado curto e o botão. */\ninterface FrozenModalData {\n    freezeDate?: Date | string | null;\n    showResources?: boolean;\n}\n\nexport default function AccountFrozenModal() {\n    const translate = useTranslations();\n    const { activeModal, closeModal, modalData } = useModalManager();\n    const isOpen = activeModal === 'accountFrozenModal';\n    const { accountsUrl } = useWhitelabelUrls();\n    const { redirectToExternal } = useExternalContracting();\n\n    const data = modalData as FrozenModalData | undefined;\n    const freezeDate = data?.freezeDate ?? null;\n    const isWarning = Boolean(freezeDate);\n    const showResources = Boolean(data?.showResources);\n\n    const title = isWarning\n        ? translate('common.subscription.frozen.modal.warningTitle', {\n              freezeDate: formatShortDate(freezeDate ? new Date(freezeDate) : null),\n          })\n        : translate('common.subscription.frozen.modal.title');\n\n    /* Sem a lista o texto tem que fechar sozinho; com a lista ele a INTRODUZ (termina em \":\"). */\n    const description = isWarning\n        ? translate(\n              showResources\n                  ? 'common.subscription.frozen.modal.warningDescriptionWithResources'\n                  : 'common.subscription.frozen.modal.warningDescription',\n          )\n        : translate(\n              showResources\n                  ? 'common.subscription.frozen.modal.descriptionWithResources'\n                  : 'common.subscription.frozen.modal.description',\n          );\n\n    const handleRegularize = () => {\n        if (redirectToExternal('plans')) return;\n        window.location.href = `${accountsUrl}/subscriptions`;\n    };\n\n    return (\n        <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n            <DialogContent\n                showCloseButton\n                /* Sem isto o Radix move o foco para o primeiro focável ao abrir — que aqui é o\n                 * gatilho do tooltip — e o tooltip abre em FOCO, não só em hover: a modal\n                 * aparecia com um balão já aberto. O foco segue preso no dialog. */\n                onOpenAutoFocus={(event) => event.preventDefault()}\n                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\"\n            >\n                <div className=\"flex flex-col gap-5 p-4 lg:p-5\">\n                    <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n                        <IconLock size={20} className=\"text-zinc-950\" />\n                    </div>\n\n                    <div className=\"flex flex-col gap-2\">\n                        <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n                            {title}\n                        </DialogTitle>\n                        <DialogDescription className=\"paragraph-small-regular text-zinc-500\">\n                            {description}\n                        </DialogDescription>\n                    </div>\n\n                    {showResources && (\n                        <>\n                            {/* Um bloco só, grupos separados por linha. A descrição de cada grupo\n                              * vive no tooltip do ícone de info à direita: na modal ela empilhava\n                              * três parágrafos e virava um paredão. */}\n                            <div className=\"bg-white border border-zinc-100 rounded-lg\">\n                                {RESOURCE_GROUPS.map(({ key, icon: Icon }, index) => (\n                                    <div key={key}>\n                                        {index > 0 && <div className=\"h-px bg-zinc-100\" />}\n                                        <div className=\"flex items-center justify-between gap-3 p-4\">\n                                            <div className=\"flex items-center gap-3\">\n                                                <Icon size={20} className=\"text-zinc-950 shrink-0\" />\n                                                <span className=\"paragraph-small-semibold text-zinc-950\">\n                                                    {translate(\n                                                        `common.subscription.frozen.modal.resources.${key}.title`,\n                                                    )}\n                                                </span>\n                                            </div>\n                                            <Tooltip>\n                                                <TooltipTrigger asChild>\n                                                    <button\n                                                        type=\"button\"\n                                                        aria-label={translate(\n                                                            `common.subscription.frozen.modal.resources.${key}.title`,\n                                                        )}\n                                                        className=\"flex items-center justify-center shrink-0 cursor-pointer\"\n                                                    >\n                                                        <IconInfoCircle className=\"size-4 text-zinc-400\" />\n                                                    </button>\n                                                </TooltipTrigger>\n                                                <TooltipContent\n                                                    side=\"top\"\n                                                    /* Acima do dialog: o globals.css do gapps-app\n                                                     * sobe o [data-slot='dialog-content'] para\n                                                     * z-index 1011 !important (o componente\n                                                     * declara 1001), então o z-50 padrão do\n                                                     * tooltip ficava atrás. */\n                                                    className=\"z-[1100] max-w-[240px]\"\n                                                >\n                                                    {translate(\n                                                        `common.subscription.frozen.modal.resources.${key}.description`,\n                                                    )}\n                                                </TooltipContent>\n                                            </Tooltip>\n                                        </div>\n                                    </div>\n                                ))}\n                            </div>\n\n                            {/* Bloco de informação padrão da plataforma. Ciano fixo: o congelamento\n                             * é exclusivo da wl 1, então não existe o caso whitelabel/zinc aqui. */}\n                            <div className=\"flex items-center gap-3 p-4 rounded-lg bg-cyan-50\">\n                                <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n                                <span className=\"paragraph-small-regular text-zinc-950\">\n                                    {translate('common.subscription.frozen.modal.keepsWorking')}\n                                </span>\n                            </div>\n                        </>\n                    )}\n                </div>\n\n                <div className=\"h-px bg-zinc-200\" />\n\n                <div className=\"flex items-center gap-2 p-4 lg:p-5\">\n                    <Button className=\"h-10 w-fit\" onClick={handleRegularize}>\n                        {translate('common.subscription.frozen.modal.cta')}\n                    </Button>\n                </div>\n            </DialogContent>\n        </Dialog>\n    );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/modals/AccountFrozenModal.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n    IconLock,\n    IconFile,\n    IconFolder,\n    IconWorld,\n    IconInfoCircle,\n    type IconProps,\n} from '@tabler/icons-react';\nimport type { ComponentType } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../ui/buttons/Button';\nimport {\n    Dialog,\n    DialogContent,\n    DialogDescription,\n    DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport { formatShortDate } from '../../infra/utils/date';\n\nconst RESOURCE_GROUPS = [\n    {\n        icon: IconFile,\n        titleKey: 'common.subscription.frozen.modal.resources.pages.title',\n        descriptionKey: 'common.subscription.frozen.modal.resources.pages.description',\n    },\n    {\n        icon: IconFolder,\n        titleKey: 'common.subscription.frozen.modal.resources.projects.title',\n        descriptionKey: 'common.subscription.frozen.modal.resources.projects.description',\n    },\n    {\n        icon: IconWorld,\n        titleKey: 'common.subscription.frozen.modal.resources.domains.title',\n        descriptionKey: 'common.subscription.frozen.modal.resources.domains.description',\n    },\n] as const satisfies readonly {\n    icon: ComponentType<IconProps>;\n    titleKey: string;\n    descriptionKey: string;\n}[];\n\ninterface FrozenModalData {\n    freezeDate?: Date | string | null;\n    showResources?: boolean;\n}\n\nexport default function AccountFrozenModal() {\n    const translate = useTranslations();\n    const { activeModal, closeModal, modalData } = useModalManager();\n    const isOpen = activeModal === 'accountFrozenModal';\n    const { accountsUrl } = useWhitelabelUrls();\n    const { redirectToExternal } = useExternalContracting();\n\n    const data = modalData as FrozenModalData | undefined;\n    const freezeDate = data?.freezeDate ?? null;\n    const isWarning = Boolean(freezeDate);\n    const showResources = Boolean(data?.showResources);\n\n    const title = isWarning\n        ? translate('common.subscription.frozen.modal.warningTitle', {\n              freezeDate: formatShortDate(freezeDate ? new Date(freezeDate) : null),\n          })\n        : translate('common.subscription.frozen.modal.title');\n\n    const description = isWarning\n        ? translate(\n              showResources\n                  ? 'common.subscription.frozen.modal.warningDescriptionWithResources'\n                  : 'common.subscription.frozen.modal.warningDescription',\n          )\n        : translate(\n              showResources\n                  ? 'common.subscription.frozen.modal.descriptionWithResources'\n                  : 'common.subscription.frozen.modal.description',\n          );\n\n    const handleRegularize = () => {\n        if (redirectToExternal('plans')) return;\n        window.location.href = `${accountsUrl}/subscriptions`;\n    };\n\n    return (\n        <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n            <DialogContent\n                showCloseButton\n                onOpenAutoFocus={(event) => event.preventDefault()}\n                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\"\n            >\n                <div className=\"flex flex-col gap-5 p-4 lg:p-5\">\n                    <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n                        <IconLock size={20} className=\"text-zinc-950\" />\n                    </div>\n\n                    <div className=\"flex flex-col gap-2\">\n                        <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n                            {title}\n                        </DialogTitle>\n                        <DialogDescription className=\"paragraph-small-regular text-zinc-500\">\n                            {description}\n                        </DialogDescription>\n                    </div>\n\n                    {showResources && (\n                        <>\n                            <div className=\"bg-white border border-zinc-100 rounded-lg\">\n                                {RESOURCE_GROUPS.map(({ titleKey, descriptionKey, icon: Icon }, index) => (\n                                    <div key={titleKey}>\n                                        {index > 0 && <div className=\"h-px bg-zinc-100\" />}\n                                        <div className=\"flex items-center justify-between gap-3 p-4\">\n                                            <div className=\"flex items-center gap-3\">\n                                                <Icon size={20} className=\"text-zinc-950 shrink-0\" />\n                                                <span className=\"paragraph-small-semibold text-zinc-950\">\n                                                    {translate(titleKey)}\n                                                </span>\n                                            </div>\n                                            <Tooltip>\n                                                <TooltipTrigger asChild>\n                                                    <button\n                                                        type=\"button\"\n                                                        aria-label={translate(titleKey)}\n                                                        className=\"flex items-center justify-center shrink-0 cursor-pointer\"\n                                                    >\n                                                        <IconInfoCircle className=\"size-4 text-zinc-400\" />\n                                                    </button>\n                                                </TooltipTrigger>\n                                                <TooltipContent\n                                                    side=\"top\"\n                                                    className=\"z-[1100] max-w-[240px]\"\n                                                >\n                                                    {translate(descriptionKey)}\n                                                </TooltipContent>\n                                            </Tooltip>\n                                        </div>\n                                    </div>\n                                ))}\n                            </div>\n\n                            <div className=\"flex items-center gap-3 p-4 rounded-lg bg-cyan-50\">\n                                <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n                                <span className=\"paragraph-small-regular text-zinc-950\">\n                                    {translate('common.subscription.frozen.modal.keepsWorking')}\n                                </span>\n                            </div>\n                        </>\n                    )}\n                </div>\n\n                <div className=\"h-px bg-zinc-200\" />\n\n                <div className=\"flex items-center gap-2 p-4 lg:p-5\">\n                    <Button className=\"h-10 w-fit\" onClick={handleRegularize}>\n                        {translate('common.subscription.frozen.modal.cta')}\n                    </Button>\n                </div>\n            </DialogContent>\n        </Dialog>\n    );\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.mjs

@@ -0,0 +1,275 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useStripe } from "@stripe/react-stripe-js";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { useLocale, useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Button } from "../../../ui/buttons/Button";
+import { Dialog, DialogContent, DialogTitle } from "../../../ui/overlay/Dialog";
+import { Toast } from "../../../ui/feedback/Toast";
+import { useAuth } from "../../../../providers/auth.provider";
+import { useWhitelabel, useWhitelabelUrls } from "../../../../providers/whitelabel.provider";
+import { useActiveSubscription } from "../../../../modules/subscriptions/hooks/find-active-subscription.hook";
+import { useCards } from "../../../../modules/cards/hooks/cards.hook";
+import { useCurrencyFormatter } from "../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { confirmPaymentIfRequired } from "../../../../modules/subscriptions/utils/confirm-payment-if-required";
+import {
+  AI_CREDITS_FIRST_PURCHASE_OFFER,
+  AiCreditsOfferStage,
+  PAYMENT_METHOD_CARD
+} from "../../../../modules/ia-credits/constants/ai-credits-offer.constants";
+import { useAiCreditsOfferEligibility } from "../../../../modules/ia-credits/hooks/use-offer-eligibility.hook";
+import { usePurchaseIaCredits } from "../../../../modules/ia-credits/hooks/purchase-ia-credits.hook";
+import { readOfferStageCookie, writeOfferStageCookie } from "../../../../modules/ia-credits/utils/offer-stage-cookie";
+import { useAiCreditsOfferModal } from "../../../../store/useAiCreditsOfferModal";
+import { useModalManager } from "../../../../store/useModalManager";
+import { LoseOfferDialog } from "./components/LoseOfferDialog";
+import { OfferIllustration } from "./components/OfferIllustration";
+import { OfferPaymentField } from "./components/OfferPaymentField";
+function AiCreditsOfferModal() {
+  const translate = useTranslations();
+  const locale = useLocale();
+  const stripe = useStripe();
+  const { open, closeModal } = useAiCreditsOfferModal();
+  const { openModal } = useModalManager();
+  const { user } = useAuth();
+  const { whitelabel } = useWhitelabel();
+  const { accountsUrl } = useWhitelabelUrls();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const [confirmingExit, setConfirmingExit] = useState(false);
+  const [pickedCardId, setPickedCardId] = useState("");
+  const { data: cardsData } = useCards();
+  const { data: subscriptionData } = useActiveSubscription();
+  const eligibility = useAiCreditsOfferEligibility();
+  const purchaseMutation = usePurchaseIaCredits();
+  const subscription = subscriptionData?.data?.[0] ?? null;
+  const subscriptionId = subscription?.id;
+  const accountId = user?.id_account;
+  const defaultCardId = cardsData?.data?.find((card) => card.is_default)?.id?.toString() ?? cardsData?.data?.[0]?.id?.toString() ?? "";
+  const pickedCardExists = cardsData?.data?.some((card) => card.id.toString() === pickedCardId);
+  const selectedCardId = pickedCardExists ? pickedCardId : defaultCardId;
+  const offerPrice = AI_CREDITS_FIRST_PURCHASE_OFFER.price;
+  const fullPrice = eligibility.data?.anchorCents != null ? eligibility.data.anchorCents / 100 : null;
+  const discountPercent = fullPrice != null ? Math.round((1 - offerPrice / fullPrice) * 100) : null;
+  const creditsLabel = AI_CREDITS_FIRST_PURCHASE_OFFER.credits.toLocaleString(locale);
+  const discountLabel = discountPercent != null ? translate("common.promo.aiCreditsOffer.discountBadge", { percent: String(discountPercent) }) : "";
+  const hasCard = Boolean(selectedCardId);
+  const isSubmitting = purchaseMutation.isPending;
+  const dismiss = useCallback(() => {
+    setConfirmingExit(false);
+    closeModal();
+  }, [closeModal]);
+  const requestClose = useCallback(() => setConfirmingExit(true), []);
+  const submitPurchase = useCallback(
+    async (cardId) => {
+      if (subscriptionId == null) {
+        closeModal();
+        window.location.assign(`${accountsUrl}/subscriptions?tab=plans`);
+        return;
+      }
+      const input = {
+        subscriptionId,
+        offer: AI_CREDITS_FIRST_PURCHASE_OFFER.slug,
+        paymentMethod: PAYMENT_METHOD_CARD,
+        idCard: cardId
+      };
+      try {
+        let result = await purchaseMutation.mutateAsync(input);
+        if (result.status === 2) {
+          await confirmPaymentIfRequired(stripe, result, translate("common.payment.authFailed"));
+          result = await purchaseMutation.mutateAsync(input);
+        }
+        if (result.status !== 1) {
+          toast.custom((toastId) => /* @__PURE__ */ jsx(
+            Toast,
+            {
+              variant: "error",
+              message: translate("common.promo.aiCreditsOffer.errorToast"),
+              toastId
+            }
+          ));
+          return;
+        }
+        if (accountId != null) {
+          const cookie = readOfferStageCookie(accountId);
+          writeOfferStageCookie(
+            accountId,
+            {
+              stage: AiCreditsOfferStage.CONVERTED,
+              lastSessionIat: eligibility.data?.sessionIssuedAt ?? cookie.lastSessionIat
+            },
+            whitelabel?.domain
+          );
+        }
+        toast.custom((toastId) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            variant: "success",
+            message: translate("common.promo.aiCreditsOffer.successToast", { credits: creditsLabel }),
+            toastId
+          }
+        ));
+        dismiss();
+      } catch {
+        toast.custom((toastId) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            variant: "error",
+            message: translate("common.promo.aiCreditsOffer.errorToast"),
+            toastId
+          }
+        ));
+      }
+    },
+    [
+      accountId,
+      accountsUrl,
+      closeModal,
+      creditsLabel,
+      dismiss,
+      eligibility.data?.sessionIssuedAt,
+      purchaseMutation,
+      stripe,
+      subscriptionId,
+      translate,
+      whitelabel?.domain
+    ]
+  );
+  const handleOpenAddCard = useCallback(() => {
+    openModal("addCardModal", {
+      onCardAdded: (cardId) => {
+        setPickedCardId(cardId);
+        void submitPurchase(cardId);
+      }
+    });
+  }, [openModal, submitPurchase]);
+  const handleConfirm = useCallback(async () => {
+    if (!hasCard) {
+      handleOpenAddCard();
+      return;
+    }
+    await submitPurchase(selectedCardId);
+  }, [handleOpenAddCard, hasCard, selectedCardId, submitPurchase]);
+  const bullets = [
+    translate("common.promo.aiCreditsOffer.bullets.first"),
+    translate("common.promo.aiCreditsOffer.bullets.second"),
+    translate("common.promo.aiCreditsOffer.bullets.third")
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: () => {
+    }, children: /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        showCloseButton: false,
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onEscapeKeyDown: (event) => {
+          event.preventDefault();
+          requestClose();
+        },
+        onPointerDownOutside: (event) => {
+          event.preventDefault();
+          requestClose();
+        },
+        onInteractOutside: (event) => event.preventDefault(),
+        overlayClassName: "duration-300",
+        className: [
+          // mobile: folha de tela cheia (mesma geometria do BuyCreditsModal)
+          "flex flex-col gap-0 overflow-hidden rounded-t-2xl rounded-b-none border-0 p-0 shadow-elevated",
+          "top-0 right-0 bottom-0 left-0 h-dvh max-w-full translate-x-0 translate-y-0 sm:max-w-full",
+          // desktop (≥ md): cartão de duas colunas, centralizado
+          "md:top-[50%] md:right-auto md:bottom-auto md:left-[50%] md:h-auto md:max-h-[92vh] md:w-[900px]! md:max-w-[900px]! md:translate-x-[-50%] md:translate-y-[-50%] md:rounded-xl md:border",
+          // entrada de baixo pra cima: a classe (e não utilidade `animate-[...]`) porque o
+          // `DialogContent` já traz `animate-in` e o merge do Tailwind não funde as duas — ver
+          // `.gp-offer-modal` no globals.css.
+          "gp-offer-modal"
+        ].join(" "),
+        children: /* @__PURE__ */ jsxs("div", { className: "gm-scroll flex h-full flex-col overflow-y-auto md:h-auto md:min-h-[600px] md:flex-row md:items-stretch md:overflow-visible", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative h-[180px] w-full shrink-0 md:order-2 md:h-auto md:w-1/2", children: [
+            /* @__PURE__ */ jsx(OfferIllustration, { credits: AI_CREDITS_FIRST_PURCHASE_OFFER.credits, locale }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: requestClose,
+                "aria-label": translate("common.promo.aiCreditsOffer.close"),
+                className: "absolute top-4 right-4 z-10 flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950",
+                children: /* @__PURE__ */ jsx(IconX, { className: "size-[18px]" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-6 p-6 md:order-1 md:w-1/2 md:shrink-0 md:gap-7 md:p-10", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "gp-offer-rise paragraph-xsmall-semibold w-fit rounded-full bg-cyan-50 px-2.5 py-1 text-cyan-700",
+                style: { animationDelay: "160ms" },
+                children: translate("common.promo.aiCreditsOffer.eyebrow")
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "gp-offer-rise", style: { animationDelay: "220ms" }, children: /* @__PURE__ */ jsx(DialogTitle, { className: "title-large-semibold text-[26px] leading-8 font-bold tracking-[-0.4px] text-zinc-950", children: translate.rich("common.promo.aiCreditsOffer.title", {
+              credits: creditsLabel,
+              discount: discountLabel,
+              break: () => /* @__PURE__ */ jsx("br", {})
+            }) }) }),
+            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3.5", children: bullets.map((bullet, index) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "gp-offer-rise flex items-start gap-2.5",
+                style: { animationDelay: `${300 + index * 70}ms` },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-cyan-50", children: /* @__PURE__ */ jsx(IconCheck, { size: 13, stroke: 3, className: "text-cyan-700" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-600", children: bullet })
+                ]
+              },
+              bullet
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "gp-offer-rise flex flex-col gap-0.5", style: { animationDelay: "520ms" }, children: [
+              fullPrice != null && /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-400 line-through", children: formatCurrencyNumber(fullPrice) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "title-large-semibold font-bold tracking-[-0.4px] text-zinc-950", children: formatCurrencyNumber(offerPrice) }),
+                discountLabel && /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold rounded-md bg-green-50 px-2 py-1 text-green-600", children: discountLabel })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "gp-offer-rise mt-2", style: { animationDelay: "580ms" }, children: /* @__PURE__ */ jsx(OfferPaymentField, { cardId: selectedCardId, onCardAdded: setPickedCardId }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "gp-offer-rise mt-auto flex flex-col gap-2",
+                style: { animationDelay: "640ms" },
+                children: [
+                  /* @__PURE__ */ jsx(Button, { className: "w-full", loading: isSubmitting, onClick: handleConfirm, children: hasCard ? translate("common.promo.aiCreditsOffer.cta", { discount: discountLabel }) : translate("common.promo.aiCreditsOffer.ctaAddCard") }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "secondary",
+                      className: "h-10! w-full",
+                      disabled: isSubmitting,
+                      onClick: requestClose,
+                      children: translate("common.promo.aiCreditsOffer.later")
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      LoseOfferDialog,
+      {
+        open: confirmingExit,
+        discountLabel,
+        creditsLabel,
+        fullPriceLabel: fullPrice != null ? formatCurrencyNumber(fullPrice) : "",
+        onKeep: () => setConfirmingExit(false),
+        onLose: dismiss
+      }
+    )
+  ] });
+}
+export {
+  AiCreditsOfferModal as default
+};
+//# sourceMappingURL=AiCreditsOfferModal.mjs.map

package/dist/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { useStripe } from '@stripe/react-stripe-js';\nimport { IconCheck, IconX } from '@tabler/icons-react';\nimport { useLocale, useTranslations } from 'next-intl';\nimport { toast } from 'sonner';\nimport { Button } from '../../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';\nimport { Toast } from '../../../ui/feedback/Toast';\nimport { useAuth } from '../../../../providers/auth.provider';\nimport { useWhitelabel, useWhitelabelUrls } from '../../../../providers/whitelabel.provider';\nimport { useActiveSubscription } from '../../../../modules/subscriptions/hooks/find-active-subscription.hook';\nimport { useCards } from '../../../../modules/cards/hooks/cards.hook';\nimport { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { confirmPaymentIfRequired } from '../../../../modules/subscriptions/utils/confirm-payment-if-required';\nimport {\n  AI_CREDITS_FIRST_PURCHASE_OFFER,\n  AiCreditsOfferStage,\n  PAYMENT_METHOD_CARD,\n} from '../../../../modules/ia-credits/constants/ai-credits-offer.constants';\nimport { useAiCreditsOfferEligibility } from '../../../../modules/ia-credits/hooks/use-offer-eligibility.hook';\nimport { usePurchaseIaCredits } from '../../../../modules/ia-credits/hooks/purchase-ia-credits.hook';\nimport type { PurchaseIaCreditsResult } from '../../../../modules/ia-credits/types/ai-credits-offer.type';\nimport { readOfferStageCookie, writeOfferStageCookie } from '../../../../modules/ia-credits/utils/offer-stage-cookie';\nimport { useAiCreditsOfferModal } from '../../../../store/useAiCreditsOfferModal';\nimport { useModalManager } from '../../../../store/useModalManager';\nimport { LoseOfferDialog } from './components/LoseOfferDialog';\nimport { OfferIllustration } from './components/OfferIllustration';\nimport { OfferPaymentField } from './components/OfferPaymentField';\n\n/**\n * Oferta de primeira compra de créditos de IA — a tela que a base gratuita vê quando o\n * `AiCreditsOfferGate` decide que é a vez dela.\n *\n * Duas colunas, como a referência de produto: à esquerda a oferta e o cartão (via\n * `OfferPaymentField`, que cadastra pelo `addCardModal` padrão da plataforma); à direita o\n * gradiente da tela de login com a ilustração do editor.\n *\n * Fechar não fecha: `X`, `Esc`, clique fora e \"Agora não\" caem todos no `LoseOfferDialog`, que\n * pergunta se a pessoa quer mesmo perder o desconto.\n *\n * ⚠️ PREÇO: o card manda só o SLUG da oferta (`AI_CREDITS_FIRST_PURCHASE_OFFER.slug`) — quem\n * resolve pacote, preço e elegibilidade é o backend (Asana ID-1217333331953496). O \"de/por\" desta\n * tela usa `AI_CREDITS_FIRST_PURCHASE_OFFER.price` (fixo, parte do contrato da oferta) contra\n * `anchorCents` do `useAiCreditsOfferEligibility` (derivado do preço real do addon no plano — nunca\n * hardcoded).\n *\n * ANIMAÇÃO: CSS puro, sem `motion/react` (a lib não depende dela). As classes `gp-offer-rise`,\n * `gp-offer-window-in`, `gp-offer-card-in` e `gp-offer-icon-pulse` vêm do `globals.css` de cada app\n * consumidor — bloco documentado abaixo, precisa estar presente nos 3 apps (gpages/gapps/editor):\n *\n * ```css\n * @keyframes gp-offer-rise {\n *   from { opacity: 0; translate: 0 10px; }\n *   to   { opacity: 1; translate: 0 0; }\n * }\n * .gp-offer-rise { animation: gp-offer-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }\n *\n * @keyframes gp-offer-window-in {\n *   from { opacity: 0; translate: 0 18px; scale: 0.985; }\n *   to   { opacity: 1; translate: 0 0; scale: 1; }\n * }\n * .gp-offer-window-in { animation: gp-offer-window-in 550ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both; }\n *\n * @keyframes gp-offer-card-in {\n *   from { opacity: 0; translate: 0 26px; scale: 0.97; }\n *   to   { opacity: 1; translate: 0 0; scale: 1; }\n * }\n * .gp-offer-card-in { animation: gp-offer-card-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 340ms both; }\n *\n * @keyframes gp-offer-icon-pulse {\n *   0%, 100% { scale: 1; }\n *   50% { scale: 1.06; }\n * }\n * .gp-offer-icon-pulse { animation: gp-offer-icon-pulse 2.6s ease-in-out 1.6s infinite; }\n *\n * @media (prefers-reduced-motion: reduce) {\n *   .gp-offer-rise, .gp-offer-window-in, .gp-offer-card-in, .gp-offer-icon-pulse { animation: none; }\n * }\n * ```\n *\n * `translate`/`scale` (propriedades CSS independentes, não `transform`) pra conviver sem conflito\n * com utilitários de posicionamento do Tailwind (mesmo problema que já forçou o `.gp-offer-modal`\n * de entrada/saída a sair de `@layer` — ver `AiCreditsOfferGate`/`globals.css`).\n */\nexport default function AiCreditsOfferModal() {\n  const translate = useTranslations();\n  const locale = useLocale();\n  const stripe = useStripe();\n  const { open, closeModal } = useAiCreditsOfferModal();\n  const { openModal } = useModalManager();\n  const { user } = useAuth();\n  const { whitelabel } = useWhitelabel();\n  const { accountsUrl } = useWhitelabelUrls();\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  const [confirmingExit, setConfirmingExit] = useState(false);\n  const [pickedCardId, setPickedCardId] = useState('');\n\n  const { data: cardsData } = useCards();\n  const { data: subscriptionData } = useActiveSubscription();\n  const eligibility = useAiCreditsOfferEligibility();\n  const purchaseMutation = usePurchaseIaCredits();\n\n  const subscription = subscriptionData?.data?.[0] ?? null;\n  const subscriptionId = subscription?.id;\n  const accountId = user?.id_account;\n\n  const defaultCardId =\n    cardsData?.data?.find((card) => card.is_default)?.id?.toString() ??\n    cardsData?.data?.[0]?.id?.toString() ??\n    '';\n\n  // Os cartões chegam depois da abertura (query no client). Derivar — em vez de sincronizar num\n  // efeito — faz o padrão da conta já entrar selecionado no render em que a lista chega, e a\n  // escolha explícita da pessoa continua mandando.\n  const pickedCardExists = cardsData?.data?.some((card) => card.id.toString() === pickedCardId);\n  const selectedCardId = pickedCardExists ? pickedCardId : defaultCardId;\n\n  const offerPrice = AI_CREDITS_FIRST_PURCHASE_OFFER.price;\n  const fullPrice = eligibility.data?.anchorCents != null ? eligibility.data.anchorCents / 100 : null;\n  const discountPercent = fullPrice != null ? Math.round((1 - offerPrice / fullPrice) * 100) : null;\n\n  const creditsLabel = AI_CREDITS_FIRST_PURCHASE_OFFER.credits.toLocaleString(locale);\n  const discountLabel =\n    discountPercent != null\n      ? translate('common.promo.aiCreditsOffer.discountBadge', { percent: String(discountPercent) })\n      : '';\n\n  const hasCard = Boolean(selectedCardId);\n  const isSubmitting = purchaseMutation.isPending;\n\n  /** Fecha de verdade — só o `LoseOfferDialog` e a compra concluída chegam aqui. */\n  const dismiss = useCallback(() => {\n    setConfirmingExit(false);\n    closeModal();\n  }, [closeModal]);\n\n  /** Toda tentativa de sair passa por aqui — X, Esc, clique fora e \"Agora não\". */\n  const requestClose = useCallback(() => setConfirmingExit(true), []);\n\n  /**\n   * Cobra o cartão informado e credita — sem tocar na recorrência do plano. Chamado tanto pelo CTA\n   * com cartão já selecionado quanto (encadeado, sem segundo clique) pelo `onCardAdded` do\n   * `addCardModal` quando a pessoa ainda não tinha cartão.\n   */\n  const submitPurchase = useCallback(\n    async (cardId: string) => {\n      // Sem assinatura não dá pra cobrar aqui — o CTA vira a porta do checkout do accounts em vez\n      // de virar um botão morto.\n      if (subscriptionId == null) {\n        closeModal();\n        window.location.assign(`${accountsUrl}/subscriptions?tab=plans`);\n        return;\n      }\n\n      const input = {\n        subscriptionId,\n        offer: AI_CREDITS_FIRST_PURCHASE_OFFER.slug,\n        paymentMethod: PAYMENT_METHOD_CARD,\n        idCard: cardId,\n      };\n\n      try {\n        let result: PurchaseIaCreditsResult = await purchaseMutation.mutateAsync(input);\n\n        // 3DS: confirma o desafio e RE-POSTA o MESMO input — a chave de idempotência do backend\n        // devolve a mesma cobrança já paga, então o segundo POST fecha com status 1.\n        if (result.status === 2) {\n          await confirmPaymentIfRequired(stripe, result, translate('common.payment.authFailed'));\n          result = await purchaseMutation.mutateAsync(input);\n        }\n\n        // O `message` do status 0 é código de máquina do backend (`offer_consumed`,\n        // `offer_card_only`…), não copy — a tela mostra o erro genérico do catálogo.\n        if (result.status !== 1) {\n          toast.custom((toastId) => (\n            <Toast\n              variant=\"error\"\n              message={translate('common.promo.aiCreditsOffer.errorToast')}\n              toastId={toastId}\n            />\n          ));\n          return;\n        }\n\n        if (accountId != null) {\n          const cookie = readOfferStageCookie(accountId);\n          writeOfferStageCookie(\n            accountId,\n            {\n              stage: AiCreditsOfferStage.CONVERTED,\n              lastSessionIat: eligibility.data?.sessionIssuedAt ?? cookie.lastSessionIat,\n            },\n            whitelabel?.domain\n          );\n        }\n\n        toast.custom((toastId) => (\n          <Toast\n            variant=\"success\"\n            message={translate('common.promo.aiCreditsOffer.successToast', { credits: creditsLabel })}\n            toastId={toastId}\n          />\n        ));\n        dismiss();\n      } catch {\n        // Erro técnico (rede, HTTP não-JSON, resposta fora do `PurchaseIaCreditsResultSchema`) —\n        // `error.message` aqui é texto de máquina (inclusive o dump do ZodError), nunca copy. Mesma\n        // decisão do `status !== 1` acima: a tela mostra a mensagem genérica do catálogo.\n        toast.custom((toastId) => (\n          <Toast\n            variant=\"error\"\n            message={translate('common.promo.aiCreditsOffer.errorToast')}\n            toastId={toastId}\n          />\n        ));\n      }\n    },\n    [\n      accountId,\n      accountsUrl,\n      closeModal,\n      creditsLabel,\n      dismiss,\n      eligibility.data?.sessionIssuedAt,\n      purchaseMutation,\n      stripe,\n      subscriptionId,\n      translate,\n      whitelabel?.domain,\n    ]\n  );\n\n  const handleOpenAddCard = useCallback(() => {\n    openModal('addCardModal', {\n      onCardAdded: (cardId: string) => {\n        setPickedCardId(cardId);\n        void submitPurchase(cardId);\n      },\n    });\n  }, [openModal, submitPurchase]);\n\n  const handleConfirm = useCallback(async () => {\n    // 1º passo do fluxo: sem cartão, o CTA é o próprio cadastro — a compra encadeia sozinha\n    // assim que o cartão é criado (ver `handleOpenAddCard`).\n    if (!hasCard) {\n      handleOpenAddCard();\n      return;\n    }\n    await submitPurchase(selectedCardId);\n  }, [handleOpenAddCard, hasCard, selectedCardId, submitPurchase]);\n\n  const bullets = [\n    translate('common.promo.aiCreditsOffer.bullets.first'),\n    translate('common.promo.aiCreditsOffer.bullets.second'),\n    translate('common.promo.aiCreditsOffer.bullets.third'),\n  ];\n\n  return (\n    <>\n      <Dialog open={open} onOpenChange={() => {}}>\n        <DialogContent\n          showCloseButton={false}\n          onOpenAutoFocus={(event) => event.preventDefault()}\n          onEscapeKeyDown={(event) => {\n            event.preventDefault();\n            requestClose();\n          }}\n          onPointerDownOutside={(event) => {\n            event.preventDefault();\n            requestClose();\n          }}\n          onInteractOutside={(event) => event.preventDefault()}\n          overlayClassName=\"duration-300\"\n          className={[\n            // mobile: folha de tela cheia (mesma geometria do BuyCreditsModal)\n            'flex flex-col gap-0 overflow-hidden rounded-t-2xl rounded-b-none border-0 p-0 shadow-elevated',\n            'top-0 right-0 bottom-0 left-0 h-dvh max-w-full translate-x-0 translate-y-0 sm:max-w-full',\n            // desktop (≥ md): cartão de duas colunas, centralizado\n            'md:top-[50%] md:right-auto md:bottom-auto md:left-[50%] md:h-auto md:max-h-[92vh] md:w-[900px]! md:max-w-[900px]! md:translate-x-[-50%] md:translate-y-[-50%] md:rounded-xl md:border',\n            // entrada de baixo pra cima: a classe (e não utilidade `animate-[...]`) porque o\n            // `DialogContent` já traz `animate-in` e o merge do Tailwind não funde as duas — ver\n            // `.gp-offer-modal` no globals.css.\n            'gp-offer-modal',\n          ].join(' ')}\n        >\n          <div className=\"gm-scroll flex h-full flex-col overflow-y-auto md:h-auto md:min-h-[600px] md:flex-row md:items-stretch md:overflow-visible\">\n            {/* Ilustração: topo no mobile, coluna da direita no desktop (`md:order-2`). */}\n            <div className=\"relative h-[180px] w-full shrink-0 md:order-2 md:h-auto md:w-1/2\">\n              <OfferIllustration credits={AI_CREDITS_FIRST_PURCHASE_OFFER.credits} locale={locale} />\n\n              <button\n                type=\"button\"\n                onClick={requestClose}\n                aria-label={translate('common.promo.aiCreditsOffer.close')}\n                className=\"absolute top-4 right-4 z-10 flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950\"\n              >\n                <IconX className=\"size-[18px]\" />\n              </button>\n            </div>\n\n            {/* Coluna da oferta */}\n            <div className=\"flex flex-1 flex-col gap-6 p-6 md:order-1 md:w-1/2 md:shrink-0 md:gap-7 md:p-10\">\n              <span\n                className=\"gp-offer-rise paragraph-xsmall-semibold w-fit rounded-full bg-cyan-50 px-2.5 py-1 text-cyan-700\"\n                style={{ animationDelay: '160ms' }}\n              >\n                {translate('common.promo.aiCreditsOffer.eyebrow')}\n              </span>\n\n              {/* 26px (2px acima do `title-large`) e Outfit 700: a oferta bate mais forte que um\n                  título de modal comum. A quebra vem do catálogo, pela tag `<break>`, então cada\n                  idioma escolhe onde partir a frase. */}\n              <div className=\"gp-offer-rise\" style={{ animationDelay: '220ms' }}>\n                <DialogTitle className=\"title-large-semibold text-[26px] leading-8 font-bold tracking-[-0.4px] text-zinc-950\">\n                  {translate.rich('common.promo.aiCreditsOffer.title', {\n                    credits: creditsLabel,\n                    discount: discountLabel,\n                    break: () => <br />,\n                  })}\n                </DialogTitle>\n              </div>\n\n              <ul className=\"flex flex-col gap-3.5\">\n                {bullets.map((bullet, index) => (\n                  <li\n                    key={bullet}\n                    className=\"gp-offer-rise flex items-start gap-2.5\"\n                    style={{ animationDelay: `${300 + index * 70}ms` }}\n                  >\n                    <span className=\"mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-cyan-50\">\n                      <IconCheck size={13} stroke={3} className=\"text-cyan-700\" />\n                    </span>\n                    <span className=\"paragraph-small-medium text-zinc-600\">{bullet}</span>\n                  </li>\n                ))}\n              </ul>\n\n              {/* Preço de tabela em cima, pequeno e riscado; o de campanha embaixo, na mesma\n                  tipografia do título (Outfit 700) pra os dois números não competirem entre si. Sem\n                  âncora resolvida (elegibilidade ainda carregando) some a linha do preço cheio em\n                  vez de mostrar um \"de\" vazio. */}\n              <div className=\"gp-offer-rise flex flex-col gap-0.5\" style={{ animationDelay: '520ms' }}>\n                {fullPrice != null && (\n                  <span className=\"paragraph-small-medium text-zinc-400 line-through\">\n                    {formatCurrencyNumber(fullPrice)}\n                  </span>\n                )}\n                <div className=\"flex items-center gap-2.5\">\n                  <span className=\"title-large-semibold font-bold tracking-[-0.4px] text-zinc-950\">\n                    {formatCurrencyNumber(offerPrice)}\n                  </span>\n                  {discountLabel && (\n                    <span className=\"paragraph-xsmall-semibold rounded-md bg-green-50 px-2 py-1 text-green-600\">\n                      {discountLabel}\n                    </span>\n                  )}\n                </div>\n              </div>\n\n              <div className=\"gp-offer-rise mt-2\" style={{ animationDelay: '580ms' }}>\n                <OfferPaymentField cardId={selectedCardId} onCardAdded={setPickedCardId} />\n              </div>\n\n              <div\n                className=\"gp-offer-rise mt-auto flex flex-col gap-2\"\n                style={{ animationDelay: '640ms' }}\n              >\n                <Button className=\"w-full\" loading={isSubmitting} onClick={handleConfirm}>\n                  {hasCard\n                    ? translate('common.promo.aiCreditsOffer.cta', { discount: discountLabel })\n                    : translate('common.promo.aiCreditsOffer.ctaAddCard')}\n                </Button>\n                <Button\n                  variant=\"secondary\"\n                  className=\"h-10! w-full\"\n                  disabled={isSubmitting}\n                  onClick={requestClose}\n                >\n                  {translate('common.promo.aiCreditsOffer.later')}\n                </Button>\n              </div>\n            </div>\n          </div>\n        </DialogContent>\n      </Dialog>\n\n      <LoseOfferDialog\n        open={confirmingExit}\n        discountLabel={discountLabel}\n        creditsLabel={creditsLabel}\n        fullPriceLabel={fullPrice != null ? formatCurrencyNumber(fullPrice) : ''}\n        onKeep={() => setConfirmingExit(false)}\n        onLose={dismiss}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/promo/AiCreditsOfferModal/components/LoseOfferDialog.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { Button } from "../../../../ui/buttons/Button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../../../../ui/overlay/Dialog";
+import { Separator } from "../../../../ui/data-display/Separator";
+import { IconAlertTriangle } from "@tabler/icons-react";
+function LoseOfferDialog({
+  open,
+  discountLabel,
+  creditsLabel,
+  fullPriceLabel,
+  onKeep,
+  onLose
+}) {
+  const translate = useTranslations();
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => !next && onKeep(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      overlayClassName: "z-[1002] bg-black/40",
+      className: "z-[1003] flex flex-col gap-0 p-0 max-[440px]:w-[calc(100%-32px)] md:w-[420px]! lg:w-[420px]! max-w-[420px]! data-[state=open]:animate-[gp-offer-confirm-in_260ms_cubic-bezier(0.16,1,0.3,1)]",
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: "gap-3 p-5 text-left", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex w-fit items-center justify-center rounded-lg bg-red-50 p-2.5", children: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20, className: "text-red-500" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.promo.aiCreditsOffer.exit.title", { discount: discountLabel }) }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "paragraph-small-regular text-zinc-600", children: fullPriceLabel ? translate("common.promo.aiCreditsOffer.exit.description", {
+              credits: creditsLabel,
+              price: fullPriceLabel
+            }) : translate("common.promo.aiCreditsOffer.exit.descriptionNoPrice", {
+              credits: creditsLabel
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-5", children: [
+          /* @__PURE__ */ jsx(Button, { className: "h-10! transition-colors", onClick: onKeep, children: translate("common.promo.aiCreditsOffer.exit.keep") }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10! transition-colors", onClick: onLose, children: translate("common.promo.aiCreditsOffer.exit.lose") })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  LoseOfferDialog
+};
+//# sourceMappingURL=LoseOfferDialog.mjs.map