@greatapps/common 1.1.751 → 1.1.752

package/src/components/layouts/AiCreditsOfferGate.tsx

@@ -0,0 +1,199 @@
+'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 { useRequiredBillingData } from '../../modules/accounts/hooks/use-required-billing-data.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,
+  AI_CREDITS_OFFER_MAX_REPEATS,
+  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';
+import type { IaCreditsSummary } from '../../modules/ia-credits/types';
+
+/** Espera pedida pelo produto: a oferta entra 1s depois de o gatilho decidir, não junto. */
+const OPEN_DELAY_MS = 1000;
+
+/**
+ * Estágio que os créditos ATUAIS da conta sustentam, na escada do Diogo — sempre o mais alto que os
+ * números batem (ordem de checagem: ZERO > EXHAUSTED > HALF > FIRST_USE > CAMPAIGN).
+ *
+ * `totalCredits === 0` (lote mensal expirado, ainda sem renovar) cai em ZERO, não em divisão por
+ * zero — mesma régua do `availableCredits === 0`.
+ */
+function resolveCandidateStage(
+  summary: Pick<IaCreditsSummary, 'totalCredits' | 'usedCredits' | 'availableCredits'>
+): AiCreditsOfferStage {
+  // Conta que ainda NÃO recebeu lote nenhum (medido em produção: o free só ganha o primeiro lote
+  // meses depois do cadastro) não é o mesmo que conta que gastou tudo. Sem esta distinção o
+  // recém-cadastrado entrava direto em ZERO_SHOWN, o degrau mais alto, e como a escada só sobe os
+  // gatilhos de uso — primeira geração, 50%, 90% — nunca mais disparavam para ele.
+  if (summary.totalCredits === 0 && summary.usedCredits === 0) {
+    return AiCreditsOfferStage.CAMPAIGN_SHOWN;
+  }
+  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;
+}
+
+export interface AiCreditsOfferGateProps {
+  /**
+   * Overlay local do host, fora do `useModalManager` compartilhado (ex.: geração de IA em
+   * progresso, `InsufficientCreditsModal` do editor) — a oferta não empilha em cima nem espera a
+   * vez enquanto `true`; ela volta a tentar no próximo render em que a condição cair, porque o
+   * estágio só é gravado quando o modal realmente abre.
+   */
+  suppressWhen?: boolean;
+}
+
+/**
+ * Quem decide se a oferta de primeira compra de créditos de IA aparece, e em qual estágio (gatilhos
+ * do Diogo — ver Asana ID-1217333331953496). Mora no root layout de cada app, ao lado dos outros
+ * gates de modal.
+ *
+ * Precisa passar por, nesta ordem:
+ *
+ *  1. **Corte barato do cliente.** Whitelabel padrão + conta em BRL + `owner`/`admin` + primeira
+ *     compra de verdade (sem assinatura paga vigente, sem NENHUMA cobrança no histórico) + menos de
+ *     500 créditos já contratados. Evita bater no backend pra quem obviamente não se qualifica.
+ *  2. **Elegibilidade do servidor**, com FAIL CLOSED: erro, timeout ou ainda carregando conta como
+ *     inelegível — sem confirmação do backend não existe oferta (ele é quem sabe se a conta já
+ *     consumiu a oferta em QUALQUER assinatura, cross-cancelamento incluso).
+ *  2.1. **Cartão salvo, também FAIL CLOSED.** O card exige as duas condições juntas — plano
+ *     elegível E ainda sem cartão. O backend valida isso na elegibilidade, mas o gate confere de
+ *     novo com `useCards`: sem confirmação de que a lista veio vazia, não abre (evita a corrida em
+ *     que alguém cadastra o cartão pelo CTA e desiste antes de confirmar, e o cache local de
+ *     elegibilidade ainda não invalidou).
+ *  3. **Estágio candidato**, derivado dos créditos atuais (`resolveCandidateStage`).
+ *  4. **Escada monotônica do cookie `ai-credits-offer-stage`**: só abre se o candidato é MAIOR que o
+ *     estágio gravado, OU se o candidato é CAMPAIGN/ZERO — os dois únicos que reapresentam, e só
+ *     numa sessão de login nova (`sessionIssuedAt` ≠ `lastSessionIat`). A repetição respeita
+ *     `AI_CREDITS_OFFER_MAX_REPEATS`: a campanha é agressiva de propósito (vale inclusive para quem
+ *     acabou de se cadastrar), mas não pode virar o mesmo pop em toda sessão para sempre.
+ *  5. **Máx. 1 apresentação por sessão de login.** Sai de graça da regra acima: se o cookie já tem
+ *     `lastSessionIat` igual ao da sessão atual, NADA abre — nem uma escalada de estágio dentro da
+ *     mesma sessão (ex.: FIRST_USE → HALF → EXHAUSTED na mesma geração, no Free de 10 créditos).
+ */
+export function AiCreditsOfferGate({ suppressWhen = false }: AiCreditsOfferGateProps) {
+  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 { isRequired: isBillingDataRequired } = useRequiredBillingData();
+  const hasArmedRef = useRef(false);
+
+  /* Modais bloqueantes que NÃO passam pelo `useModalManager` — cada um controla a própria abertura
+   * com estado local, então `activeModal` não os enxerga e a oferta subiria por cima:
+   *  - `RequiredBillingDataModal` (lib), aberto por `useRequiredBillingData().isRequired`;
+   *  - `CompleteProfileGuard` (app de contas), aberto quando falta nome ou sobrenome.
+   * Checar a condição de origem, e não o modal em si, é o que funciona para os três apps sem que
+   * cada um precise lembrar de passar `suppressWhen`. */
+  const isProfileIncomplete = user != null && (!user.name || !user.last_name);
+
+  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;
+
+  // Só consulta o servidor depois do corte barato: quem não passa aqui nunca veria a oferta, e a
+  // consulta custa duas chamadas no gapps-r3-api.
+  const { data: eligibilityData } = useAiCreditsOfferEligibility({ enabled: passesClientCutoff });
+  const cardsQuery = useCards({ enabled: passesClientCutoff });
+
+  useEffect(() => {
+    if (hasArmedRef.current) return;
+    if (suppressWhen || activeModal) return;
+    if (isBillingDataRequired || isProfileIncomplete) return;
+    if (!passesClientCutoff || isCreditsLoading) return;
+    // Fail closed: sem resposta do servidor (carregando, erro, ou reason preenchido), não abre.
+    if (!eligibilityData || !eligibilityData.eligible || accountId == null) return;
+    // Fail closed: sem confirmação de que a lista de cartões carregou vazia, não abre — o backend
+    // já valida "sem cartão" na elegibilidade, isto é a segunda camada do lado do cliente.
+    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 isRepeating = isRepeatableStage && candidateStage === cookie.stage;
+
+    const shouldOpen = candidateStage > cookie.stage || isRepeating;
+    if (!shouldOpen) return;
+
+    // Subir de estágio zera o contador: o teto limita a insistência DENTRO de um estágio, não a
+    // escada inteira. Sem isso, uma conta que já gastou o teto na campanha nunca veria a oferta no
+    // momento em que ela mais importa (crédito no fim).
+    const repeatCount = isRepeating ? cookie.repeatCount + 1 : 0;
+    if (isRepeating && cookie.repeatCount >= AI_CREDITS_OFFER_MAX_REPEATS) return;
+
+    // Arma uma única vez por montagem: sem isso, qualquer re-render limparia o timer pendente.
+    hasArmedRef.current = true;
+
+    const timer = setTimeout(() => {
+      // O estágio é gravado junto com a abertura (e não antes): fechar a aba durante o delay não
+      // pode queimar a apresentação.
+      writeOfferStageCookie(
+        accountId,
+        { stage: candidateStage, lastSessionIat: eligibilityData.sessionIssuedAt, repeatCount },
+        whitelabel?.domain
+      );
+      openModal();
+    }, OPEN_DELAY_MS);
+
+    return () => clearTimeout(timer);
+  }, [
+    accountId,
+    activeModal,
+    cardsQuery.data,
+    cardsQuery.isSuccess,
+    eligibilityData,
+    isBillingDataRequired,
+    isCreditsLoading,
+    isProfileIncomplete,
+    openModal,
+    passesClientCutoff,
+    suppressWhen,
+    summary,
+    whitelabel?.domain,
+  ]);
+
+  return null;
+}

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

@@ -0,0 +1,401 @@
+'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,
+              repeatCount: cookie.repeatCount,
+            },
+            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}
+      />
+    </>
+  );
+}