@greatapps/common 1.1.751 → 1.1.753

package/dist/components/layouts/AiCreditsOfferGate.mjs

@@ -0,0 +1,105 @@
+"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";
+const OPEN_DELAY_MS = 1e3;
+function resolveCandidateStage(summary) {
+  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;
+}
+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 { isRequired: isBillingDataRequired } = useRequiredBillingData();
+  const hasArmedRef = useRef(false);
+  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;
+  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;
+    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 isRepeating = isRepeatableStage && candidateStage === cookie.stage;
+    const shouldOpen = candidateStage > cookie.stage || isRepeating;
+    if (!shouldOpen) return;
+    const repeatCount = isRepeating ? cookie.repeatCount + 1 : 0;
+    if (isRepeating && cookie.repeatCount >= AI_CREDITS_OFFER_MAX_REPEATS) return;
+    hasArmedRef.current = true;
+    const timer = setTimeout(() => {
+      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;
+}
+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 { useRequiredBillingData } from '../../modules/accounts/hooks/use-required-billing-data.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  AI_CREDITS_OFFER_MAX_REPEATS,\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  // Conta que ainda NÃO recebeu lote nenhum (medido em produção: o free só ganha o primeiro lote\n  // meses depois do cadastro) não é o mesmo que conta que gastou tudo. Sem esta distinção o\n  // recém-cadastrado entrava direto em ZERO_SHOWN, o degrau mais alto, e como a escada só sobe os\n  // gatilhos de uso — primeira geração, 50%, 90% — nunca mais disparavam para ele.\n  if (summary.totalCredits === 0 && summary.usedCredits === 0) {\n    return AiCreditsOfferStage.CAMPAIGN_SHOWN;\n  }\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`). A repetição respeita\n *     `AI_CREDITS_OFFER_MAX_REPEATS`: a campanha é agressiva de propósito (vale inclusive para quem\n *     acabou de se cadastrar), mas não pode virar o mesmo pop em toda sessão para sempre.\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 { isRequired: isBillingDataRequired } = useRequiredBillingData();\n  const hasArmedRef = useRef(false);\n\n  /* Modais bloqueantes que NÃO passam pelo `useModalManager` — cada um controla a própria abertura\n   * com estado local, então `activeModal` não os enxerga e a oferta subiria por cima:\n   *  - `RequiredBillingDataModal` (lib), aberto por `useRequiredBillingData().isRequired`;\n   *  - `CompleteProfileGuard` (app de contas), aberto quando falta nome ou sobrenome.\n   * Checar a condição de origem, e não o modal em si, é o que funciona para os três apps sem que\n   * cada um precise lembrar de passar `suppressWhen`. */\n  const isProfileIncomplete = user != null && (!user.name || !user.last_name);\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 (isBillingDataRequired || isProfileIncomplete) 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 isRepeating = isRepeatableStage && candidateStage === cookie.stage;\n\n    const shouldOpen = candidateStage > cookie.stage || isRepeating;\n    if (!shouldOpen) return;\n\n    // Subir de estágio zera o contador: o teto limita a insistência DENTRO de um estágio, não a\n    // escada inteira. Sem isso, uma conta que já gastou o teto na campanha nunca veria a oferta no\n    // momento em que ela mais importa (crédito no fim).\n    const repeatCount = isRepeating ? cookie.repeatCount + 1 : 0;\n    if (isRepeating && cookie.repeatCount >= AI_CREDITS_OFFER_MAX_REPEATS) 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, repeatCount },\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    isBillingDataRequired,\n    isCreditsLoading,\n    isProfileIncomplete,\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/promo/AiCreditsOfferModal/AiCreditsOfferModal.mjs

@@ -0,0 +1,276 @@
+"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,
+              repeatCount: cookie.repeatCount
+            },
+            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              repeatCount: cookie.repeatCount,\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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/modals/promo/AiCreditsOfferModal/components/LoseOfferDialog.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../../../ui/buttons/Button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../../../../ui/overlay/Dialog';\nimport { Separator } from '../../../../ui/data-display/Separator';\nimport { IconAlertTriangle } from '@tabler/icons-react';\n\ninterface LoseOfferDialogProps {\n  open: boolean;\n  /** Selo do desconto (\"50% OFF\") — repetido aqui porque é ele que dói. */\n  discountLabel: string;\n  /** Pacote ofertado, já formatado (\"1.000\"). */\n  creditsLabel: string;\n  /** Preço cheio formatado: o número que volta a valer. Vazio enquanto a âncora carrega. */\n  fullPriceLabel: string;\n  /** Volta pra oferta (fecha só esta confirmação). */\n  onKeep: () => void;\n  /** Abre mão da oferta e fecha tudo. */\n  onLose: () => void;\n}\n\n/**\n * Confirmação de saída (\"quer mesmo perder essa oferta?\").\n *\n * É um Dialog SEPARADO, empilhado por cima da oferta com os mesmos z-index do\n * `InsufficientIaCreditsModal` (overlay 1002 / conteúdo 1003) — assim a oferta continua **visível\n * atrás do véu**: a pessoa decide olhando exatamente para o que está prestes a perder, que é o\n * ponto inteiro desta tela.\n *\n * O principal é VOLTAR para a oferta; perder fica como secundário, a um clique de distância. A\n * saída não está escondida — o peso da decisão está na frase, não no botão.\n */\nexport function LoseOfferDialog({\n  open,\n  discountLabel,\n  creditsLabel,\n  fullPriceLabel,\n  onKeep,\n  onLose,\n}: LoseOfferDialogProps) {\n  const translate = useTranslations();\n\n  return (\n    <Dialog open={open} onOpenChange={(next) => !next && onKeep()}>\n      <DialogContent\n        showCloseButton={false}\n        onOpenAutoFocus={(event) => event.preventDefault()}\n        overlayClassName=\"z-[1002] bg-black/40\"\n        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)]\"\n      >\n        <DialogHeader className=\"gap-3 p-5 text-left\">\n          <div className=\"flex w-fit items-center justify-center rounded-lg bg-red-50 p-2.5\">\n            <IconAlertTriangle size={20} className=\"text-red-500\" />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n              {translate('common.promo.aiCreditsOffer.exit.title', { discount: discountLabel })}\n            </DialogTitle>\n            <DialogDescription className=\"paragraph-small-regular text-zinc-600\">\n              {/* Sem preço resolvido (elegibilidade ainda carregando) a frase cai na versão sem\n                  número — prometer \"volta a custar\" sem dizer quanto é pior do que não dizer. */}\n              {fullPriceLabel\n                ? translate('common.promo.aiCreditsOffer.exit.description', {\n                    credits: creditsLabel,\n                    price: fullPriceLabel,\n                  })\n                : translate('common.promo.aiCreditsOffer.exit.descriptionNoPrice', {\n                    credits: creditsLabel,\n                  })}\n            </DialogDescription>\n          </div>\n        </DialogHeader>\n\n        <Separator />\n\n        {/* Rodapé com os dois botões juntos à esquerda (`gap-2`, sem `justify-between`), o\n            principal primeiro. Ficar é o caminho principal; perder a oferta continua a um clique,\n            mas como ação secundária. */}\n        <div className=\"flex items-center gap-2 p-5\">\n          <Button className=\"h-10! transition-colors\" onClick={onKeep}>\n            {translate('common.promo.aiCreditsOffer.exit.keep')}\n          </Button>\n          <Button variant=\"secondary\" className=\"h-10! transition-colors\" onClick={onLose}>\n            {translate('common.promo.aiCreditsOffer.exit.lose')}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA2DY,cAEF,YAFE;AAzDZ,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AA2B3B,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,gBAAgB;AAElC,SACE,oBAAC,UAAO,MAAY,cAAc,CAAC,SAAS,CAAC,QAAQ,OAAO,GAC1D;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAAA,MACjD,kBAAiB;AAAA,MACjB,WAAU;AAAA,MAEV;AAAA,6BAAC,gBAAa,WAAU,uBACtB;AAAA,8BAAC,SAAI,WAAU,qEACb,8BAAC,qBAAkB,MAAM,IAAI,WAAU,gBAAe,GACxD;AAAA,UACA,qBAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,eAAY,WAAU,2CACpB,oBAAU,0CAA0C,EAAE,UAAU,cAAc,CAAC,GAClF;AAAA,YACA,oBAAC,qBAAkB,WAAU,yCAG1B,2BACG,UAAU,gDAAgD;AAAA,cACxD,SAAS;AAAA,cACT,OAAO;AAAA,YACT,CAAC,IACD,UAAU,uDAAuD;AAAA,cAC/D,SAAS;AAAA,YACX,CAAC,GACP;AAAA,aACF;AAAA,WACF;AAAA,QAEA,oBAAC,aAAU;AAAA,QAKX,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,UAAO,WAAU,2BAA0B,SAAS,QAClD,oBAAU,uCAAuC,GACpD;AAAA,UACA,oBAAC,UAAO,SAAQ,aAAY,WAAU,2BAA0B,SAAS,QACtE,oBAAU,uCAAuC,GACpD;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+const COUNT_DELAY_MS = 620;
+const COUNT_DURATION_MS = 1150;
+function easeOutCubic(t) {
+  return 1 - (1 - t) ** 3;
+}
+function OfferIllustration({ credits, locale }) {
+  const translate = useTranslations();
+  const [displayCredits, setDisplayCredits] = useState(0);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDisplayCredits(credits);
+      return;
+    }
+    let frameId;
+    const startedAt = performance.now() + COUNT_DELAY_MS;
+    const tick = (now) => {
+      const elapsed = now - startedAt;
+      if (elapsed < 0) {
+        frameId = requestAnimationFrame(tick);
+        return;
+      }
+      const progress = Math.min(1, elapsed / COUNT_DURATION_MS);
+      setDisplayCredits(Math.round(credits * easeOutCubic(progress)));
+      if (progress < 1) frameId = requestAnimationFrame(tick);
+    };
+    frameId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frameId);
+  }, [credits]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: "/promo/offer-panel-background.svg",
+        alt: "",
+        fill: true,
+        priority: true,
+        draggable: false,
+        className: "object-cover select-none"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "gp-offer-window-in absolute top-[calc(50%-27px)] left-[calc(50%+98px)] aspect-[557.57/388.22] w-[132%] -translate-x-1/2 -translate-y-1/2 md:w-[124.2%]",
+        children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: "/promo/offer-editor-window.svg",
+            alt: "",
+            fill: true,
+            sizes: "560px",
+            priority: true,
+            draggable: false,
+            className: "select-none"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "gp-offer-card-in absolute top-[calc(50%+146px)] left-[49.7%] hidden h-[66px] w-[193.5px] items-center gap-[11.5px] rounded-[15px] border border-[#8BE4FF]/38 bg-white pl-[11.5px] shadow-[0px_4px_25px_0px_rgba(26,26,26,0.03)] md:flex", children: [
+      /* @__PURE__ */ jsx("span", { className: "gp-offer-icon-pulse flex size-[43.5px] shrink-0 items-center justify-center rounded-[9px] bg-cyan-50", children: /* @__PURE__ */ jsx("img", { src: "/iaicon.svg", alt: "", width: 24, height: 24, className: "block" }) }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1 whitespace-nowrap", children: [
+        /* @__PURE__ */ jsx("span", { className: "title-large-semibold text-[25px] leading-[29px] tabular-nums text-zinc-950", children: displayCredits.toLocaleString(locale) }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-[14.5px] text-zinc-500", children: translate("common.promo.aiCreditsOffer.illustration.credits") })
+      ] })
+    ] })
+  ] });
+}
+export {
+  OfferIllustration
+};
+//# sourceMappingURL=OfferIllustration.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/modals/promo/AiCreditsOfferModal/components/OfferIllustration.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport Image from 'next/image';\nimport { useTranslations } from 'next-intl';\n\n/**\n * Painel direito da oferta — implementação do design do Figma (`Testes-UI`, nodes `2569:2938` e\n * `2569:4015`), conferida contra o SVG exportado do bloco inteiro.\n *\n * A geometria vem do arquivo, desenhado num painel de **449×606** — praticamente o tamanho real\n * desta coluna (metade de um modal de 900). Por isso os offsets são os px do próprio design,\n * ancorados ao CENTRO do painel: a janela tem altura derivada da largura, então âncora percentual\n * desmontaria a composição quando o modal mudasse de altura; a partir do centro, a distância entre\n * as peças se mantém.\n *\n * O fundo e a janela são os VETORES do arquivo (`offer-panel-background.svg` e\n * `offer-editor-window.svg`, em `public/promo/` do app consumidor — a lib não publica assets\n * estáticos), fatiados do SVG do bloco; o cartão é DOM, pra o contador animar.\n *\n * Animações em CSS puro (classes `gp-offer-*`, ver o bloco no topo do `AiCreditsOfferModal.tsx`) —\n * respeitam `prefers-reduced-motion` por conta própria, sem depender de JS. Só o CONTADOR do\n * cartão é JS (`requestAnimationFrame`): não dá pra fazer \"500\" nascer de \"0\" em CSS puro.\n */\n\nconst COUNT_DELAY_MS = 620;\nconst COUNT_DURATION_MS = 1150;\n\nfunction easeOutCubic(t: number): number {\n  return 1 - (1 - t) ** 3;\n}\n\ninterface OfferIllustrationProps {\n  /** Pacote ofertado — é ele que o contador persegue. */\n  credits: number;\n  /** Locale de formatação do número (vem do locale da UI). */\n  locale: string;\n}\n\nexport function OfferIllustration({ credits, locale }: OfferIllustrationProps) {\n  const translate = useTranslations();\n  const [displayCredits, setDisplayCredits] = useState(0);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      setDisplayCredits(credits);\n      return;\n    }\n\n    let frameId: number;\n    const startedAt = performance.now() + COUNT_DELAY_MS;\n\n    const tick = (now: number) => {\n      const elapsed = now - startedAt;\n      if (elapsed < 0) {\n        frameId = requestAnimationFrame(tick);\n        return;\n      }\n      const progress = Math.min(1, elapsed / COUNT_DURATION_MS);\n      setDisplayCredits(Math.round(credits * easeOutCubic(progress)));\n      if (progress < 1) frameId = requestAnimationFrame(tick);\n    };\n\n    frameId = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frameId);\n  }, [credits]);\n\n  return (\n    <div className=\"relative h-full w-full overflow-hidden\">\n      {/* Fundo: o próprio vetor do arquivo (gradiente + o brilho difuso da quina), extraído do SVG\n          do bloco. Vem como imagem, e não como gradiente CSS + `blur`, pra não haver interpretação\n          no meio: a cor e o desfoque são os do design, byte a byte. 4,7KB. */}\n      <Image\n        src=\"/promo/offer-panel-background.svg\"\n        alt=\"\"\n        fill\n        priority\n        draggable={false}\n        className=\"object-cover select-none\"\n      />\n\n      {/* Janela do editor — o vetor exportado do próprio arquivo (chrome, moldura branca, sombra e\n          o print do canvas embutido). `gp-offer-window-in` anima `translate`/`scale` (propriedades\n          CSS independentes do `transform`), então convive sem conflito com o\n          `-translate-x-1/2 -translate-y-1/2` do Tailwind que centraliza o elemento. */}\n      <div\n        aria-hidden\n        className=\"gp-offer-window-in absolute top-[calc(50%-27px)] left-[calc(50%+98px)] aspect-[557.57/388.22] w-[132%] -translate-x-1/2 -translate-y-1/2 md:w-[124.2%]\"\n      >\n        <Image\n          src=\"/promo/offer-editor-window.svg\"\n          alt=\"\"\n          fill\n          sizes=\"560px\"\n          priority\n          draggable={false}\n          className=\"select-none\"\n        />\n      </div>\n\n      {/* Cartão de créditos (node 2569:4015), solto abaixo da janela, com a folga de gradiente que\n          o arquivo tem. Só no desktop: no mobile a faixa é baixa e ele brigaria com a janela. */}\n      <div className=\"gp-offer-card-in absolute top-[calc(50%+146px)] left-[49.7%] hidden h-[66px] w-[193.5px] items-center gap-[11.5px] rounded-[15px] border border-[#8BE4FF]/38 bg-white pl-[11.5px] shadow-[0px_4px_25px_0px_rgba(26,26,26,0.03)] md:flex\">\n        <span className=\"gp-offer-icon-pulse flex size-[43.5px] shrink-0 items-center justify-center rounded-[9px] bg-cyan-50\">\n          {/* eslint-disable-next-line @next/next/no-img-element -- ícone de 39KB, pesado demais pra inlinear no componente da lib. */}\n          <img src=\"/iaicon.svg\" alt=\"\" width={24} height={24} className=\"block\" />\n        </span>\n        <span className=\"flex items-baseline gap-1 whitespace-nowrap\">\n          <span className=\"title-large-semibold text-[25px] leading-[29px] tabular-nums text-zinc-950\">\n            {displayCredits.toLocaleString(locale)}\n          </span>\n          <span className=\"paragraph-small-medium text-[14.5px] text-zinc-500\">\n            {translate('common.promo.aiCreditsOffer.illustration.credits')}\n          </span>\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0EM,cAmCE,YAnCF;AAxEN,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,uBAAuB;AAqBhC,MAAM,iBAAiB;AACvB,MAAM,oBAAoB;AAE1B,SAAS,aAAa,GAAmB;AACvC,SAAO,KAAK,IAAI,MAAM;AACxB;AASO,SAAS,kBAAkB,EAAE,SAAS,OAAO,GAA2B;AAC7E,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,QAAI,OAAO,WAAW,kCAAkC,EAAE,SAAS;AACjE,wBAAkB,OAAO;AACzB;AAAA,IACF;AAEA,QAAI;AACJ,UAAM,YAAY,YAAY,IAAI,IAAI;AAEtC,UAAM,OAAO,CAAC,QAAgB;AAC5B,YAAM,UAAU,MAAM;AACtB,UAAI,UAAU,GAAG;AACf,kBAAU,sBAAsB,IAAI;AACpC;AAAA,MACF;AACA,YAAM,WAAW,KAAK,IAAI,GAAG,UAAU,iBAAiB;AACxD,wBAAkB,KAAK,MAAM,UAAU,aAAa,QAAQ,CAAC,CAAC;AAC9D,UAAI,WAAW,EAAG,WAAU,sBAAsB,IAAI;AAAA,IACxD;AAEA,cAAU,sBAAsB,IAAI;AACpC,WAAO,MAAM,qBAAqB,OAAO;AAAA,EAC3C,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,qBAAC,SAAI,WAAU,0CAIb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,KAAI;AAAA,QACJ,MAAI;AAAA,QACJ,UAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IAMA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACC,KAAI;AAAA,YACJ,KAAI;AAAA,YACJ,MAAI;AAAA,YACJ,OAAM;AAAA,YACN,UAAQ;AAAA,YACR,WAAW;AAAA,YACX,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IACF;AAAA,IAIA,qBAAC,SAAI,WAAU,2OACb;AAAA,0BAAC,UAAK,WAAU,wGAEd,8BAAC,SAAI,KAAI,eAAc,KAAI,IAAG,OAAO,IAAI,QAAQ,IAAI,WAAU,SAAQ,GACzE;AAAA,MACA,qBAAC,UAAK,WAAU,+CACd;AAAA,4BAAC,UAAK,WAAU,8EACb,yBAAe,eAAe,MAAM,GACvC;AAAA,QACA,oBAAC,UAAK,WAAU,sDACb,oBAAU,kDAAkD,GAC/D;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}