@greatapps/common 1.1.747 → 1.1.749

package/src/components/modals/AccountFrozenModal.tsx

@@ -22,19 +22,28 @@ import { useWhitelabelUrls, useExternalContracting } from '../../providers/white
 import { useModalManager } from '../../store/useModalManager';
 import { formatShortDate } from '../../infra/utils/date';
 
-/* Os 9 recursos do card agrupados nos 3 grupos que o usuário reconhece na plataforma.
- * Um ícone por grupo; o texto mora no catálogo. */
-const RESOURCE_GROUPS: { key: string; icon: ComponentType<IconProps> }[] = [
-    { key: 'pages', icon: IconFile },
-    { key: 'projects', icon: IconFolder },
-    { key: 'domains', icon: IconWorld },
-];
+const RESOURCE_GROUPS = [
+    {
+        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',
+    },
+] as const satisfies readonly {
+    icon: ComponentType<IconProps>;
+    titleKey: string;
+    descriptionKey: string;
+}[];
 
-/* `freezeDate` no data = ainda VAI congelar (véspera); sem ele = já congelado.
- *
- * A LISTA só aparece quando o usuário PEDIU por ela, clicando em "Detalhes" no banner
- * (`showResources`). Na modal que abre sozinha ao entrar numa conta bloqueada fica só o
- * recado curto e o botão. */
 interface FrozenModalData {
     freezeDate?: Date | string | null;
     showResources?: boolean;
@@ -58,7 +67,6 @@ export default function AccountFrozenModal() {
           })
         : translate('common.subscription.frozen.modal.title');
 
-    /* Sem a lista o texto tem que fechar sozinho; com a lista ele a INTRODUZ (termina em ":"). */
     const description = isWarning
         ? translate(
               showResources
@@ -80,9 +88,6 @@ export default function AccountFrozenModal() {
         <Dialog open={isOpen} onOpenChange={() => closeModal()}>
             <DialogContent
                 showCloseButton
-                /* Sem isto o Radix move o foco para o primeiro focável ao abrir — que aqui é o
-                 * gatilho do tooltip — e o tooltip abre em FOCO, não só em hover: a modal
-                 * aparecia com um balão já aberto. O foco segue preso no dialog. */
                 onOpenAutoFocus={(event) => event.preventDefault()}
                 className="flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[420px]! rounded-lg border"
             >
@@ -102,29 +107,22 @@ export default function AccountFrozenModal() {
 
                     {showResources && (
                         <>
-                            {/* Um bloco só, grupos separados por linha. A descrição de cada grupo
-                              * vive no tooltip do ícone de info à direita: na modal ela empilhava
-                              * três parágrafos e virava um paredão. */}
                             <div className="bg-white border border-zinc-100 rounded-lg">
-                                {RESOURCE_GROUPS.map(({ key, icon: Icon }, index) => (
-                                    <div key={key}>
+                                {RESOURCE_GROUPS.map(({ titleKey, descriptionKey, icon: Icon }, index) => (
+                                    <div key={titleKey}>
                                         {index > 0 && <div className="h-px bg-zinc-100" />}
                                         <div className="flex items-center justify-between gap-3 p-4">
                                             <div className="flex items-center gap-3">
                                                 <Icon size={20} className="text-zinc-950 shrink-0" />
                                                 <span className="paragraph-small-semibold text-zinc-950">
-                                                    {translate(
-                                                        `common.subscription.frozen.modal.resources.${key}.title`,
-                                                    )}
+                                                    {translate(titleKey)}
                                                 </span>
                                             </div>
                                             <Tooltip>
                                                 <TooltipTrigger asChild>
                                                     <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"
                                                     >
                                                         <IconInfoCircle className="size-4 text-zinc-400" />
@@ -132,16 +130,9 @@ export default function AccountFrozenModal() {
                                                 </TooltipTrigger>
                                                 <TooltipContent
                                                     side="top"
-                                                    /* Acima do dialog: o globals.css do gapps-app
-                                                     * sobe o [data-slot='dialog-content'] para
-                                                     * z-index 1011 !important (o componente
-                                                     * declara 1001), então o z-50 padrão do
-                                                     * tooltip ficava atrás. */
                                                     className="z-[1100] max-w-[240px]"
                                                 >
-                                                    {translate(
-                                                        `common.subscription.frozen.modal.resources.${key}.description`,
-                                                    )}
+                                                    {translate(descriptionKey)}
                                                 </TooltipContent>
                                             </Tooltip>
                                         </div>
@@ -149,8 +140,6 @@ export default function AccountFrozenModal() {
                                 ))}
                             </div>
 
-                            {/* Bloco de informação padrão da plataforma. Ciano fixo: o congelamento
-                             * é exclusivo da wl 1, então não existe o caso whitelabel/zinc aqui. */}
                             <div className="flex items-center gap-3 p-4 rounded-lg bg-cyan-50">
                                 <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
                                 <span className="paragraph-small-regular text-zinc-950">

package/src/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.tsx

@@ -0,0 +1,400 @@
+'use client';
+
+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 type { PurchaseIaCreditsResult } from '../../../../modules/ia-credits/types/ai-credits-offer.type';
+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';
+
+/**
+ * Oferta de primeira compra de créditos de IA — a tela que a base gratuita vê quando o
+ * `AiCreditsOfferGate` decide que é a vez dela.
+ *
+ * Duas colunas, como a referência de produto: à esquerda a oferta e o cartão (via
+ * `OfferPaymentField`, que cadastra pelo `addCardModal` padrão da plataforma); à direita o
+ * gradiente da tela de login com a ilustração do editor.
+ *
+ * Fechar não fecha: `X`, `Esc`, clique fora e "Agora não" caem todos no `LoseOfferDialog`, que
+ * pergunta se a pessoa quer mesmo perder o desconto.
+ *
+ * ⚠️ PREÇO: o card manda só o SLUG da oferta (`AI_CREDITS_FIRST_PURCHASE_OFFER.slug`) — quem
+ * resolve pacote, preço e elegibilidade é o backend (Asana ID-1217333331953496). O "de/por" desta
+ * tela usa `AI_CREDITS_FIRST_PURCHASE_OFFER.price` (fixo, parte do contrato da oferta) contra
+ * `anchorCents` do `useAiCreditsOfferEligibility` (derivado do preço real do addon no plano — nunca
+ * hardcoded).
+ *
+ * ANIMAÇÃO: CSS puro, sem `motion/react` (a lib não depende dela). As classes `gp-offer-rise`,
+ * `gp-offer-window-in`, `gp-offer-card-in` e `gp-offer-icon-pulse` vêm do `globals.css` de cada app
+ * consumidor — bloco documentado abaixo, precisa estar presente nos 3 apps (gpages/gapps/editor):
+ *
+ * ```css
+ * @keyframes gp-offer-rise {
+ *   from { opacity: 0; translate: 0 10px; }
+ *   to   { opacity: 1; translate: 0 0; }
+ * }
+ * .gp-offer-rise { animation: gp-offer-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+ *
+ * @keyframes gp-offer-window-in {
+ *   from { opacity: 0; translate: 0 18px; scale: 0.985; }
+ *   to   { opacity: 1; translate: 0 0; scale: 1; }
+ * }
+ * .gp-offer-window-in { animation: gp-offer-window-in 550ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both; }
+ *
+ * @keyframes gp-offer-card-in {
+ *   from { opacity: 0; translate: 0 26px; scale: 0.97; }
+ *   to   { opacity: 1; translate: 0 0; scale: 1; }
+ * }
+ * .gp-offer-card-in { animation: gp-offer-card-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 340ms both; }
+ *
+ * @keyframes gp-offer-icon-pulse {
+ *   0%, 100% { scale: 1; }
+ *   50% { scale: 1.06; }
+ * }
+ * .gp-offer-icon-pulse { animation: gp-offer-icon-pulse 2.6s ease-in-out 1.6s infinite; }
+ *
+ * @media (prefers-reduced-motion: reduce) {
+ *   .gp-offer-rise, .gp-offer-window-in, .gp-offer-card-in, .gp-offer-icon-pulse { animation: none; }
+ * }
+ * ```
+ *
+ * `translate`/`scale` (propriedades CSS independentes, não `transform`) pra conviver sem conflito
+ * com utilitários de posicionamento do Tailwind (mesmo problema que já forçou o `.gp-offer-modal`
+ * de entrada/saída a sair de `@layer` — ver `AiCreditsOfferGate`/`globals.css`).
+ */
+export default 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() ??
+    '';
+
+  // Os cartões chegam depois da abertura (query no client). Derivar — em vez de sincronizar num
+  // efeito — faz o padrão da conta já entrar selecionado no render em que a lista chega, e a
+  // escolha explícita da pessoa continua mandando.
+  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;
+
+  /** Fecha de verdade — só o `LoseOfferDialog` e a compra concluída chegam aqui. */
+  const dismiss = useCallback(() => {
+    setConfirmingExit(false);
+    closeModal();
+  }, [closeModal]);
+
+  /** Toda tentativa de sair passa por aqui — X, Esc, clique fora e "Agora não". */
+  const requestClose = useCallback(() => setConfirmingExit(true), []);
+
+  /**
+   * Cobra o cartão informado e credita — sem tocar na recorrência do plano. Chamado tanto pelo CTA
+   * com cartão já selecionado quanto (encadeado, sem segundo clique) pelo `onCardAdded` do
+   * `addCardModal` quando a pessoa ainda não tinha cartão.
+   */
+  const submitPurchase = useCallback(
+    async (cardId: string) => {
+      // Sem assinatura não dá pra cobrar aqui — o CTA vira a porta do checkout do accounts em vez
+      // de virar um botão morto.
+      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: PurchaseIaCreditsResult = await purchaseMutation.mutateAsync(input);
+
+        // 3DS: confirma o desafio e RE-POSTA o MESMO input — a chave de idempotência do backend
+        // devolve a mesma cobrança já paga, então o segundo POST fecha com status 1.
+        if (result.status === 2) {
+          await confirmPaymentIfRequired(stripe, result, translate('common.payment.authFailed'));
+          result = await purchaseMutation.mutateAsync(input);
+        }
+
+        // O `message` do status 0 é código de máquina do backend (`offer_consumed`,
+        // `offer_card_only`…), não copy — a tela mostra o erro genérico do catálogo.
+        if (result.status !== 1) {
+          toast.custom((toastId) => (
+            <Toast
+              variant="error"
+              message={translate('common.promo.aiCreditsOffer.errorToast')}
+              toastId={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) => (
+          <Toast
+            variant="success"
+            message={translate('common.promo.aiCreditsOffer.successToast', { credits: creditsLabel })}
+            toastId={toastId}
+          />
+        ));
+        dismiss();
+      } catch {
+        // Erro técnico (rede, HTTP não-JSON, resposta fora do `PurchaseIaCreditsResultSchema`) —
+        // `error.message` aqui é texto de máquina (inclusive o dump do ZodError), nunca copy. Mesma
+        // decisão do `status !== 1` acima: a tela mostra a mensagem genérica do catálogo.
+        toast.custom((toastId) => (
+          <Toast
+            variant="error"
+            message={translate('common.promo.aiCreditsOffer.errorToast')}
+            toastId={toastId}
+          />
+        ));
+      }
+    },
+    [
+      accountId,
+      accountsUrl,
+      closeModal,
+      creditsLabel,
+      dismiss,
+      eligibility.data?.sessionIssuedAt,
+      purchaseMutation,
+      stripe,
+      subscriptionId,
+      translate,
+      whitelabel?.domain,
+    ]
+  );
+
+  const handleOpenAddCard = useCallback(() => {
+    openModal('addCardModal', {
+      onCardAdded: (cardId: string) => {
+        setPickedCardId(cardId);
+        void submitPurchase(cardId);
+      },
+    });
+  }, [openModal, submitPurchase]);
+
+  const handleConfirm = useCallback(async () => {
+    // 1º passo do fluxo: sem cartão, o CTA é o próprio cadastro — a compra encadeia sozinha
+    // assim que o cartão é criado (ver `handleOpenAddCard`).
+    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 (
+    <>
+      <Dialog open={open} onOpenChange={() => {}}>
+        <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(' ')}
+        >
+          <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">
+            {/* Ilustração: topo no mobile, coluna da direita no desktop (`md:order-2`). */}
+            <div className="relative h-[180px] w-full shrink-0 md:order-2 md:h-auto md:w-1/2">
+              <OfferIllustration credits={AI_CREDITS_FIRST_PURCHASE_OFFER.credits} locale={locale} />
+
+              <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"
+              >
+                <IconX className="size-[18px]" />
+              </button>
+            </div>
+
+            {/* Coluna da oferta */}
+            <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">
+              <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' }}
+              >
+                {translate('common.promo.aiCreditsOffer.eyebrow')}
+              </span>
+
+              {/* 26px (2px acima do `title-large`) e Outfit 700: a oferta bate mais forte que um
+                  título de modal comum. A quebra vem do catálogo, pela tag `<break>`, então cada
+                  idioma escolhe onde partir a frase. */}
+              <div className="gp-offer-rise" style={{ animationDelay: '220ms' }}>
+                <DialogTitle className="title-large-semibold text-[26px] leading-8 font-bold tracking-[-0.4px] text-zinc-950">
+                  {translate.rich('common.promo.aiCreditsOffer.title', {
+                    credits: creditsLabel,
+                    discount: discountLabel,
+                    break: () => <br />,
+                  })}
+                </DialogTitle>
+              </div>
+
+              <ul className="flex flex-col gap-3.5">
+                {bullets.map((bullet, index) => (
+                  <li
+                    key={bullet}
+                    className="gp-offer-rise flex items-start gap-2.5"
+                    style={{ animationDelay: `${300 + index * 70}ms` }}
+                  >
+                    <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-cyan-50">
+                      <IconCheck size={13} stroke={3} className="text-cyan-700" />
+                    </span>
+                    <span className="paragraph-small-medium text-zinc-600">{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+
+              {/* Preço de tabela em cima, pequeno e riscado; o de campanha embaixo, na mesma
+                  tipografia do título (Outfit 700) pra os dois números não competirem entre si. Sem
+                  âncora resolvida (elegibilidade ainda carregando) some a linha do preço cheio em
+                  vez de mostrar um "de" vazio. */}
+              <div className="gp-offer-rise flex flex-col gap-0.5" style={{ animationDelay: '520ms' }}>
+                {fullPrice != null && (
+                  <span className="paragraph-small-medium text-zinc-400 line-through">
+                    {formatCurrencyNumber(fullPrice)}
+                  </span>
+                )}
+                <div className="flex items-center gap-2.5">
+                  <span className="title-large-semibold font-bold tracking-[-0.4px] text-zinc-950">
+                    {formatCurrencyNumber(offerPrice)}
+                  </span>
+                  {discountLabel && (
+                    <span className="paragraph-xsmall-semibold rounded-md bg-green-50 px-2 py-1 text-green-600">
+                      {discountLabel}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="gp-offer-rise mt-2" style={{ animationDelay: '580ms' }}>
+                <OfferPaymentField cardId={selectedCardId} onCardAdded={setPickedCardId} />
+              </div>
+
+              <div
+                className="gp-offer-rise mt-auto flex flex-col gap-2"
+                style={{ animationDelay: '640ms' }}
+              >
+                <Button className="w-full" loading={isSubmitting} onClick={handleConfirm}>
+                  {hasCard
+                    ? translate('common.promo.aiCreditsOffer.cta', { discount: discountLabel })
+                    : translate('common.promo.aiCreditsOffer.ctaAddCard')}
+                </Button>
+                <Button
+                  variant="secondary"
+                  className="h-10! w-full"
+                  disabled={isSubmitting}
+                  onClick={requestClose}
+                >
+                  {translate('common.promo.aiCreditsOffer.later')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <LoseOfferDialog
+        open={confirmingExit}
+        discountLabel={discountLabel}
+        creditsLabel={creditsLabel}
+        fullPriceLabel={fullPrice != null ? formatCurrencyNumber(fullPrice) : ''}
+        onKeep={() => setConfirmingExit(false)}
+        onLose={dismiss}
+      />
+    </>
+  );
+}

package/src/components/modals/promo/AiCreditsOfferModal/components/LoseOfferDialog.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+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';
+
+interface LoseOfferDialogProps {
+  open: boolean;
+  /** Selo do desconto ("50% OFF") — repetido aqui porque é ele que dói. */
+  discountLabel: string;
+  /** Pacote ofertado, já formatado ("1.000"). */
+  creditsLabel: string;
+  /** Preço cheio formatado: o número que volta a valer. Vazio enquanto a âncora carrega. */
+  fullPriceLabel: string;
+  /** Volta pra oferta (fecha só esta confirmação). */
+  onKeep: () => void;
+  /** Abre mão da oferta e fecha tudo. */
+  onLose: () => void;
+}
+
+/**
+ * Confirmação de saída ("quer mesmo perder essa oferta?").
+ *
+ * É um Dialog SEPARADO, empilhado por cima da oferta com os mesmos z-index do
+ * `InsufficientIaCreditsModal` (overlay 1002 / conteúdo 1003) — assim a oferta continua **visível
+ * atrás do véu**: a pessoa decide olhando exatamente para o que está prestes a perder, que é o
+ * ponto inteiro desta tela.
+ *
+ * O principal é VOLTAR para a oferta; perder fica como secundário, a um clique de distância. A
+ * saída não está escondida — o peso da decisão está na frase, não no botão.
+ */
+export function LoseOfferDialog({
+  open,
+  discountLabel,
+  creditsLabel,
+  fullPriceLabel,
+  onKeep,
+  onLose,
+}: LoseOfferDialogProps) {
+  const translate = useTranslations();
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && onKeep()}>
+      <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)]"
+      >
+        <DialogHeader className="gap-3 p-5 text-left">
+          <div className="flex w-fit items-center justify-center rounded-lg bg-red-50 p-2.5">
+            <IconAlertTriangle size={20} className="text-red-500" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.promo.aiCreditsOffer.exit.title', { discount: discountLabel })}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-zinc-600">
+              {/* Sem preço resolvido (elegibilidade ainda carregando) a frase cai na versão sem
+                  número — prometer "volta a custar" sem dizer quanto é pior do que não dizer. */}
+              {fullPriceLabel
+                ? translate('common.promo.aiCreditsOffer.exit.description', {
+                    credits: creditsLabel,
+                    price: fullPriceLabel,
+                  })
+                : translate('common.promo.aiCreditsOffer.exit.descriptionNoPrice', {
+                    credits: creditsLabel,
+                  })}
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+
+        <Separator />
+
+        {/* Rodapé com os dois botões juntos à esquerda (`gap-2`, sem `justify-between`), o
+            principal primeiro. Ficar é o caminho principal; perder a oferta continua a um clique,
+            mas como ação secundária. */}
+        <div className="flex items-center gap-2 p-5">
+          <Button className="h-10! transition-colors" onClick={onKeep}>
+            {translate('common.promo.aiCreditsOffer.exit.keep')}
+          </Button>
+          <Button variant="secondary" className="h-10! transition-colors" onClick={onLose}>
+            {translate('common.promo.aiCreditsOffer.exit.lose')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}