@greatapps/common 1.1.790 → 1.1.792

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

@@ -9,7 +9,8 @@ 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 { useWhitelabel } from "../../../../providers/whitelabel.provider";
+import useAccountHubActions from "../../../account/hooks/useAccountHubActions";
 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";
@@ -35,7 +36,7 @@ function AiCreditsOfferModal() {
   const { openModal } = useModalManager();
   const { user } = useAuth();
   const { whitelabel } = useWhitelabel();
-  const { accountsUrl } = useWhitelabelUrls();
+  const { openPlansCatalog } = useAccountHubActions();
   const { formatCurrencyNumber } = useCurrencyFormatter();
   const [confirmingExit, setConfirmingExit] = useState(false);
   const [pickedCardId, setPickedCardId] = useState("");
@@ -65,7 +66,7 @@ function AiCreditsOfferModal() {
     async (cardId) => {
       if (subscriptionId == null) {
         closeModal();
-        window.location.assign(`${accountsUrl}/subscriptions?tab=plans`);
+        openPlansCatalog();
         return;
       }
       const input = {
@@ -125,11 +126,11 @@ function AiCreditsOfferModal() {
     },
     [
       accountId,
-      accountsUrl,
       closeModal,
       creditsLabel,
       dismiss,
       eligibility.data?.sessionIssuedAt,
+      openPlansCatalog,
       purchaseMutation,
       stripe,
       subscriptionId,

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

@@ -1 +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":";AAkLY,SAoFR,UApFQ,KAiHA,YAjHA;AAhLZ,SAAS,aAAa,gBAAgB;AACtC,SAAS,iBAAiB;AAC1B,SAAS,WAAW,aAAa;AACjC,SAAS,WAAW,uBAAuB;AAC3C,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,QAAQ,eAAe,mBAAmB;AACnD,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,eAAe,yBAAyB;AACjD,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AAErC,SAAS,sBAAsB,6BAA6B;AAC5D,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAyDnB,SAAR,sBAAuC;AAC5C,QAAM,YAAY,gBAAgB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,MAAM,WAAW,IAAI,uBAAuB;AACpD,QAAM,EAAE,UAAU,IAAI,gBAAgB;AACtC,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,EAAE,YAAY,IAAI,kBAAkB;AAC1C,QAAM,EAAE,qBAAqB,IAAI,qBAAqB;AAEtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AAEnD,QAAM,EAAE,MAAM,UAAU,IAAI,SAAS;AACrC,QAAM,EAAE,MAAM,iBAAiB,IAAI,sBAAsB;AACzD,QAAM,cAAc,6BAA6B;AACjD,QAAM,mBAAmB,qBAAqB;AAE9C,QAAM,eAAe,kBAAkB,OAAO,CAAC,KAAK;AACpD,QAAM,iBAAiB,cAAc;AACrC,QAAM,YAAY,MAAM;AAExB,QAAM,gBACJ,WAAW,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG,IAAI,SAAS,KAC/D,WAAW,OAAO,CAAC,GAAG,IAAI,SAAS,KACnC;AAKF,QAAM,mBAAmB,WAAW,MAAM,KAAK,CAAC,SAAS,KAAK,GAAG,SAAS,MAAM,YAAY;AAC5F,QAAM,iBAAiB,mBAAmB,eAAe;AAEzD,QAAM,aAAa,gCAAgC;AACnD,QAAM,YAAY,YAAY,MAAM,eAAe,OAAO,YAAY,KAAK,cAAc,MAAM;AAC/F,QAAM,kBAAkB,aAAa,OAAO,KAAK,OAAO,IAAI,aAAa,aAAa,GAAG,IAAI;AAE7F,QAAM,eAAe,gCAAgC,QAAQ,eAAe,MAAM;AAClF,QAAM,gBACJ,mBAAmB,OACf,UAAU,6CAA6C,EAAE,SAAS,OAAO,eAAe,EAAE,CAAC,IAC3F;AAEN,QAAM,UAAU,QAAQ,cAAc;AACtC,QAAM,eAAe,iBAAiB;AAGtC,QAAM,UAAU,YAAY,MAAM;AAChC,sBAAkB,KAAK;AACvB,eAAW;AAAA,EACb,GAAG,CAAC,UAAU,CAAC;AAGf,QAAM,eAAe,YAAY,MAAM,kBAAkB,IAAI,GAAG,CAAC,CAAC;AAOlE,QAAM,iBAAiB;AAAA,IACrB,OAAO,WAAmB;AAGxB,UAAI,kBAAkB,MAAM;AAC1B,mBAAW;AACX,eAAO,SAAS,OAAO,GAAG,WAAW,0BAA0B;AAC/D;AAAA,MACF;AAEA,YAAM,QAAQ;AAAA,QACZ;AAAA,QACA,OAAO,gCAAgC;AAAA,QACvC,eAAe;AAAA,QACf,QAAQ;AAAA,MACV;AAEA,UAAI;AACF,YAAI,SAAkC,MAAM,iBAAiB,YAAY,KAAK;AAI9E,YAAI,OAAO,WAAW,GAAG;AACvB,gBAAM,yBAAyB,QAAQ,QAAQ,UAAU,2BAA2B,CAAC;AACrF,mBAAS,MAAM,iBAAiB,YAAY,KAAK;AAAA,QACnD;AAIA,YAAI,OAAO,WAAW,GAAG;AACvB,gBAAM,OAAO,CAAC,YACZ;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,UAAU,wCAAwC;AAAA,cAC3D;AAAA;AAAA,UACF,CACD;AACD;AAAA,QACF;AAEA,YAAI,aAAa,MAAM;AACrB,gBAAM,SAAS,qBAAqB,SAAS;AAC7C;AAAA,YACE;AAAA,YACA;AAAA,cACE,OAAO,oBAAoB;AAAA,cAC3B,gBAAgB,YAAY,MAAM,mBAAmB,OAAO;AAAA,cAC5D,aAAa,OAAO;AAAA,YACtB;AAAA,YACA,YAAY;AAAA,UACd;AAAA,QACF;AAEA,cAAM,OAAO,CAAC,YACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,UAAU,4CAA4C,EAAE,SAAS,aAAa,CAAC;AAAA,YACxF;AAAA;AAAA,QACF,CACD;AACD,gBAAQ;AAAA,MACV,QAAQ;AAIN,cAAM,OAAO,CAAC,YACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,UAAU,wCAAwC;AAAA,YAC3D;AAAA;AAAA,QACF,CACD;AAAA,MACH;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC1C,cAAU,gBAAgB;AAAA,MACxB,aAAa,CAAC,WAAmB;AAC/B,wBAAgB,MAAM;AACtB,aAAK,eAAe,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,cAAc,CAAC;AAE9B,QAAM,gBAAgB,YAAY,YAAY;AAG5C,QAAI,CAAC,SAAS;AACZ,wBAAkB;AAClB;AAAA,IACF;AACA,UAAM,eAAe,cAAc;AAAA,EACrC,GAAG,CAAC,mBAAmB,SAAS,gBAAgB,cAAc,CAAC;AAE/D,QAAM,UAAU;AAAA,IACd,UAAU,2CAA2C;AAAA,IACrD,UAAU,4CAA4C;AAAA,IACtD,UAAU,2CAA2C;AAAA,EACvD;AAEA,SACE,iCACE;AAAA,wBAAC,UAAO,MAAY,cAAc,MAAM;AAAA,IAAC,GACvC;AAAA,MAAC;AAAA;AAAA,QACC,iBAAiB;AAAA,QACjB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAAA,QACjD,iBAAiB,CAAC,UAAU;AAC1B,gBAAM,eAAe;AACrB,uBAAa;AAAA,QACf;AAAA,QACA,sBAAsB,CAAC,UAAU;AAC/B,gBAAM,eAAe;AACrB,uBAAa;AAAA,QACf;AAAA,QACA,mBAAmB,CAAC,UAAU,MAAM,eAAe;AAAA,QACnD,kBAAiB;AAAA,QACjB,WAAW;AAAA;AAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA;AAAA;AAAA;AAAA;AAAA,UAIA;AAAA,QACF,EAAE,KAAK,GAAG;AAAA,QAEV,+BAAC,SAAI,WAAU,8HAEb;AAAA,+BAAC,SAAI,WAAU,oEACb;AAAA,gCAAC,qBAAkB,SAAS,gCAAgC,SAAS,QAAgB;AAAA,YAErF;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,cAAY,UAAU,mCAAmC;AAAA,gBACzD,WAAU;AAAA,gBAEV,8BAAC,SAAM,WAAU,eAAc;AAAA;AAAA,YACjC;AAAA,aACF;AAAA,UAGA,qBAAC,SAAI,WAAU,mFACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,gBAAgB,QAAQ;AAAA,gBAEhC,oBAAU,qCAAqC;AAAA;AAAA,YAClD;AAAA,YAKA,oBAAC,SAAI,WAAU,iBAAgB,OAAO,EAAE,gBAAgB,QAAQ,GAC9D,8BAAC,eAAY,WAAU,wFACpB,oBAAU,KAAK,qCAAqC;AAAA,cACnD,SAAS;AAAA,cACT,UAAU;AAAA,cACV,OAAO,MAAM,oBAAC,QAAG;AAAA,YACnB,CAAC,GACH,GACF;AAAA,YAEA,oBAAC,QAAG,WAAU,yBACX,kBAAQ,IAAI,CAAC,QAAQ,UACpB;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO,EAAE,gBAAgB,GAAG,MAAM,QAAQ,EAAE,KAAK;AAAA,gBAEjD;AAAA,sCAAC,UAAK,WAAU,mFACd,8BAAC,aAAU,MAAM,IAAI,QAAQ,GAAG,WAAU,iBAAgB,GAC5D;AAAA,kBACA,oBAAC,UAAK,WAAU,wCAAwC,kBAAO;AAAA;AAAA;AAAA,cAP1D;AAAA,YAQP,CACD,GACH;AAAA,YAMA,qBAAC,SAAI,WAAU,uCAAsC,OAAO,EAAE,gBAAgB,QAAQ,GACnF;AAAA,2BAAa,QACZ,oBAAC,UAAK,WAAU,qDACb,+BAAqB,SAAS,GACjC;AAAA,cAEF,qBAAC,SAAI,WAAU,6BACb;AAAA,oCAAC,UAAK,WAAU,kEACb,+BAAqB,UAAU,GAClC;AAAA,gBACC,iBACC,oBAAC,UAAK,WAAU,6EACb,yBACH;AAAA,iBAEJ;AAAA,eACF;AAAA,YAEA,oBAAC,SAAI,WAAU,sBAAqB,OAAO,EAAE,gBAAgB,QAAQ,GACnE,8BAAC,qBAAkB,QAAQ,gBAAgB,aAAa,iBAAiB,GAC3E;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,gBAAgB,QAAQ;AAAA,gBAEjC;AAAA,sCAAC,UAAO,WAAU,UAAS,SAAS,cAAc,SAAS,eACxD,oBACG,UAAU,mCAAmC,EAAE,UAAU,cAAc,CAAC,IACxE,UAAU,wCAAwC,GACxD;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,SAAQ;AAAA,sBACR,WAAU;AAAA,sBACV,UAAU;AAAA,sBACV,SAAS;AAAA,sBAER,oBAAU,mCAAmC;AAAA;AAAA,kBAChD;AAAA;AAAA;AAAA,YACF;AAAA,aACF;AAAA,WACF;AAAA;AAAA,IACF,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,gBAAgB,aAAa,OAAO,qBAAqB,SAAS,IAAI;AAAA,QACtE,QAAQ,MAAM,kBAAkB,KAAK;AAAA,QACrC,QAAQ;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;","names":[]}
+{"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 } from '../../../../providers/whitelabel.provider';\nimport useAccountHubActions from '../../../account/hooks/useAccountHubActions';\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 { openPlansCatalog } = useAccountHubActions();\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        openPlansCatalog();\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      closeModal,\n      creditsLabel,\n      dismiss,\n      eligibility.data?.sessionIssuedAt,\n      openPlansCatalog,\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/ui/data-display/CardItem.mjs

@@ -7,6 +7,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
 import { NavBarItem } from "../../layouts/NavBarItem";
 import { Toast } from "../feedback/Toast";
 import { CardBrandIcon } from "./CardBrandIcons";
+import { cn } from "../../../infra/utils/clsx";
 import { useSetDefaultCard } from "../../../modules/cards/hooks/set-default-card.hook";
 import { useHandleDeleteCard } from "../../../modules/cards/hooks/handle-delete-card.hook";
 import { useTranslations } from "next-intl";
@@ -57,7 +58,14 @@ function CardItem({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${isSelected ? "bg-zinc-50 border-zinc-950" : "bg-white border-zinc-200 hover:bg-zinc-50"}`,
+      className: cn(
+        "flex items-center p-4 transition-colors gap-3 rounded-lg border",
+        // Sem `onSelect` a linha não faz nada no clique (lista de gerenciar cartões):
+        // só o botão de três pontinhos age ali, então nem mãozinha nem hover.
+        onSelect && "cursor-pointer",
+        isSelected ? "bg-zinc-50 border-zinc-950" : "bg-white border-zinc-200",
+        !isSelected && onSelect && "hover:bg-zinc-50"
+      ),
       onClick: onSelect,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [

package/dist/components/ui/data-display/CardItem.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/data-display/CardItem.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { toast } from 'sonner';\nimport { IconDotsVertical, IconStar, IconTrash } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { NavBarItem } from '../../layouts/NavBarItem';\nimport { Toast } from '../feedback/Toast';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { useSetDefaultCard } from '../../../modules/cards/hooks/set-default-card.hook';\nimport { useHandleDeleteCard } from '../../../modules/cards/hooks/handle-delete-card.hook';\nimport type { Card } from '../../../modules/cards/types';\nimport { useTranslations } from 'next-intl';\n\ntype CardItemProps = {\n  card: Card;\n  isSelected?: boolean;\n  onSelect?: () => void;\n  showMenu?: boolean;\n  hideDelete?: boolean;\n  hideSetDefault?: boolean;\n  onAfterDelete?: (card: Card) => void;\n  onAfterSetDefault?: (card: Card) => void;\n};\n\nexport function CardItem({\n  card,\n  isSelected,\n  onSelect,\n  showMenu = true,\n  hideDelete = false,\n  hideSetDefault = false,\n  onAfterDelete,\n  onAfterSetDefault,\n}: CardItemProps) {\n  const translate = useTranslations();\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const lastDigits = (card.number ?? '').replaceAll(/\\D/g, '').slice(-4);\n\n  const setDefaultCardMutation = useSetDefaultCard();\n\n  const handleDeleteCard = useHandleDeleteCard({ onAfterDelete });\n\n  const handleSetDefault = () => {\n    setDefaultCardMutation.mutate(card.id.toString(), {\n      onSuccess: () => {\n        toast.custom((t) => (\n          <Toast\n            variant=\"success\"\n            message={translate('common.cards.item.setDefaultSuccess')}\n            toastId={t}\n          />\n        ));\n        onAfterSetDefault?.(card);\n      },\n      onError: () => {\n        toast.custom((t) => (\n          <Toast\n            variant=\"error\"\n            message={translate('common.cards.item.setDefaultError')}\n            toastId={t}\n          />\n        ));\n      },\n    });\n  };\n\n  /* Vindi não tem \"tornar padrão\": o backend não suporta update de cartão Vindi — a\n   * troca de cartão da assinatura acontece pelo fluxo de exclusão/seleção. */\n  const menuHasSetDefault = !hideSetDefault && !card.is_default && !card.is_vindi;\n  const menuHasDelete = !hideDelete;\n  const hasMenuItems = menuHasSetDefault || menuHasDelete;\n  const renderMenu = showMenu && hasMenuItems;\n\n  return (\n    <div\n      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${\n        isSelected\n          ? 'bg-zinc-50 border-zinc-950'\n          : 'bg-white border-zinc-200 hover:bg-zinc-50'\n      }`}\n      onClick={onSelect}\n    >\n      <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n        <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n          {card.name}\n        </span>\n        {/* Cartão Vindi legado nem sempre tem os 4 dígitos gravados (21% dos que\n          * cobram assinatura ativa) — sem isto renderizaria um \"•••• \" solto. */}\n        {lastDigits ? (\n          <span className=\"paragraph-small-medium text-zinc-950\">•••• {lastDigits}</span>\n        ) : (\n          <span className=\"paragraph-small-medium text-zinc-500\">\n            {translate('common.cards.item.digitsUnavailable')}\n          </span>\n        )}\n      </div>\n      {card.is_default && (\n        <span className=\"paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap\">\n          {translate('common.cards.item.defaultBadge')}\n        </span>\n      )}\n      <CardBrandIcon brand={card.brand} />\n      {renderMenu && (\n        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n          <PopoverTrigger asChild>\n            <button\n              className=\"size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <IconDotsVertical className=\"size-5 text-zinc-500\" />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"end\"\n            className=\"w-[180px] p-2 bg-white rounded-2xl border border-zinc-200\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {menuHasSetDefault && (\n              <NavBarItem\n                icon={<IconStar size={18} className=\"text-zinc-400\" />}\n                label={translate('common.cards.item.makeDefault')}\n                onClick={() => {\n                  setPopoverOpen(false);\n                  handleSetDefault();\n                }}\n              />\n            )}\n            {menuHasDelete && (\n              <NavBarItem\n                icon={<IconTrash size={18} className=\"text-zinc-400\" />}\n                label={translate('common.actions.delete')}\n                onClick={() => {\n                  setPopoverOpen(false);\n                  handleDeleteCard(card);\n                }}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/data-display/CardItem.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { toast } from 'sonner';\nimport { IconDotsVertical, IconStar, IconTrash } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { NavBarItem } from '../../layouts/NavBarItem';\nimport { Toast } from '../feedback/Toast';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { cn } from '../../../infra/utils/clsx';\nimport { useSetDefaultCard } from '../../../modules/cards/hooks/set-default-card.hook';\nimport { useHandleDeleteCard } from '../../../modules/cards/hooks/handle-delete-card.hook';\nimport type { Card } from '../../../modules/cards/types';\nimport { useTranslations } from 'next-intl';\n\ntype CardItemProps = {\n  card: Card;\n  isSelected?: boolean;\n  onSelect?: () => void;\n  showMenu?: boolean;\n  hideDelete?: boolean;\n  hideSetDefault?: boolean;\n  onAfterDelete?: (card: Card) => void;\n  onAfterSetDefault?: (card: Card) => void;\n};\n\nexport function CardItem({\n  card,\n  isSelected,\n  onSelect,\n  showMenu = true,\n  hideDelete = false,\n  hideSetDefault = false,\n  onAfterDelete,\n  onAfterSetDefault,\n}: CardItemProps) {\n  const translate = useTranslations();\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const lastDigits = (card.number ?? '').replaceAll(/\\D/g, '').slice(-4);\n\n  const setDefaultCardMutation = useSetDefaultCard();\n\n  const handleDeleteCard = useHandleDeleteCard({ onAfterDelete });\n\n  const handleSetDefault = () => {\n    setDefaultCardMutation.mutate(card.id.toString(), {\n      onSuccess: () => {\n        toast.custom((t) => (\n          <Toast\n            variant=\"success\"\n            message={translate('common.cards.item.setDefaultSuccess')}\n            toastId={t}\n          />\n        ));\n        onAfterSetDefault?.(card);\n      },\n      onError: () => {\n        toast.custom((t) => (\n          <Toast\n            variant=\"error\"\n            message={translate('common.cards.item.setDefaultError')}\n            toastId={t}\n          />\n        ));\n      },\n    });\n  };\n\n  /* Vindi não tem \"tornar padrão\": o backend não suporta update de cartão Vindi — a\n   * troca de cartão da assinatura acontece pelo fluxo de exclusão/seleção. */\n  const menuHasSetDefault = !hideSetDefault && !card.is_default && !card.is_vindi;\n  const menuHasDelete = !hideDelete;\n  const hasMenuItems = menuHasSetDefault || menuHasDelete;\n  const renderMenu = showMenu && hasMenuItems;\n\n  return (\n    <div\n      className={cn(\n        'flex items-center p-4 transition-colors gap-3 rounded-lg border',\n        // Sem `onSelect` a linha não faz nada no clique (lista de gerenciar cartões):\n        // só o botão de três pontinhos age ali, então nem mãozinha nem hover.\n        onSelect && 'cursor-pointer',\n        isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200',\n        !isSelected && onSelect && 'hover:bg-zinc-50'\n      )}\n      onClick={onSelect}\n    >\n      <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n        <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n          {card.name}\n        </span>\n        {/* Cartão Vindi legado nem sempre tem os 4 dígitos gravados (21% dos que\n          * cobram assinatura ativa) — sem isto renderizaria um \"•••• \" solto. */}\n        {lastDigits ? (\n          <span className=\"paragraph-small-medium text-zinc-950\">•••• {lastDigits}</span>\n        ) : (\n          <span className=\"paragraph-small-medium text-zinc-500\">\n            {translate('common.cards.item.digitsUnavailable')}\n          </span>\n        )}\n      </div>\n      {card.is_default && (\n        <span className=\"paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap\">\n          {translate('common.cards.item.defaultBadge')}\n        </span>\n      )}\n      <CardBrandIcon brand={card.brand} />\n      {renderMenu && (\n        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n          <PopoverTrigger asChild>\n            <button\n              className=\"size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <IconDotsVertical className=\"size-5 text-zinc-500\" />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"end\"\n            className=\"w-[180px] p-2 bg-white rounded-2xl border border-zinc-200\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {menuHasSetDefault && (\n              <NavBarItem\n                icon={<IconStar size={18} className=\"text-zinc-400\" />}\n                label={translate('common.cards.item.makeDefault')}\n                onClick={() => {\n                  setPopoverOpen(false);\n                  handleSetDefault();\n                }}\n              />\n            )}\n            {menuHasDelete && (\n              <NavBarItem\n                icon={<IconTrash size={18} className=\"text-zinc-400\" />}\n                label={translate('common.actions.delete')}\n                onClick={() => {\n                  setPopoverOpen(false);\n                  handleDeleteCard(card);\n                }}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/data-display/PaymentMethodIcons.mjs

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+function PixIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.67762 6.40663L6.72547 6.40663C7.18162 6.40663 7.61803 6.59275 7.93377 6.92196L9.41592 8.4673C9.74782 8.81335 10.302 8.81045 10.6303 8.46094L12.0637 6.93469C12.3801 6.59774 12.8218 6.40663 13.2841 6.40663L15.1948 6.40663M15.3513 13.6115H13.2901C12.8243 13.6115 12.3797 13.4175 12.0629 13.0762L10.6318 11.5342C10.3028 11.1796 9.74254 11.1769 9.41011 11.5284L7.93498 13.0878C7.61875 13.4221 7.17887 13.6115 6.71871 13.6115H4.69301M2.67766 11.6375L8.36188 17.3217C9.26641 18.2262 10.7329 18.2262 11.6375 17.3217L17.3217 11.6375C18.2262 10.733 18.2262 9.26644 17.3217 8.36191L11.6375 2.67769C10.7329 1.77317 9.26641 1.77317 8.36188 2.67769L2.67766 8.36191C1.77314 9.26644 1.77314 10.733 2.67766 11.6375Z",
+          stroke: "currentColor",
+          strokeWidth: "1.6"
+        }
+      )
+    }
+  );
+}
+function BoletoIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5.73921 4V15.4M14.2617 4.6V16M8.51539 4V16M3.01172 4V11.8M16.9892 8.2V16M3.01172 15.4V16M16.9892 4V4.6M11.3395 4V16",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  BoletoIcon,
+  PixIcon
+};
+//# sourceMappingURL=PaymentMethodIcons.mjs.map

package/dist/components/ui/data-display/PaymentMethodIcons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentMethodIcons.tsx"],"sourcesContent":["type PaymentMethodIconProps = {\n  className?: string;\n};\n\nexport function PixIcon({ className }: PaymentMethodIconProps) {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      <path\n        d=\"M4.67762 6.40663L6.72547 6.40663C7.18162 6.40663 7.61803 6.59275 7.93377 6.92196L9.41592 8.4673C9.74782 8.81335 10.302 8.81045 10.6303 8.46094L12.0637 6.93469C12.3801 6.59774 12.8218 6.40663 13.2841 6.40663L15.1948 6.40663M15.3513 13.6115H13.2901C12.8243 13.6115 12.3797 13.4175 12.0629 13.0762L10.6318 11.5342C10.3028 11.1796 9.74254 11.1769 9.41011 11.5284L7.93498 13.0878C7.61875 13.4221 7.17887 13.6115 6.71871 13.6115H4.69301M2.67766 11.6375L8.36188 17.3217C9.26641 18.2262 10.7329 18.2262 11.6375 17.3217L17.3217 11.6375C18.2262 10.733 18.2262 9.26644 17.3217 8.36191L11.6375 2.67769C10.7329 1.77317 9.26641 1.77317 8.36188 2.67769L2.67766 8.36191C1.77314 9.26644 1.77314 10.733 2.67766 11.6375Z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.6\"\n      />\n    </svg>\n  );\n}\n\nexport function BoletoIcon({ className }: PaymentMethodIconProps) {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      <path\n        d=\"M5.73921 4V15.4M14.2617 4.6V16M8.51539 4V16M3.01172 4V11.8M16.9892 8.2V16M3.01172 15.4V16M16.9892 4V4.6M11.3395 4V16\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.6\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"AAcM;AAVC,SAAS,QAAQ,EAAE,UAAU,GAA2B;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,WAAW,EAAE,UAAU,GAA2B;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA;AAAA,MACjB;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/ui/form/BillingPeriodSelector.mjs

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { Skeleton } from "../feedback/Skeleton";
+import { useCurrencyFormatter } from "../../../modules/accounts/hooks/use-currency-formatter.hook";
+import {
+  getFirstPeriodLabelKey
+} from "../../../modules/subscriptions/utils/first-period-pricing";
+import {
+  getPlanBadgePercents,
+  USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT
+} from "../../../modules/subscriptions/utils/periodicity";
+import { cn } from "../../../infra/utils/clsx";
+const BILLING_OPTIONS = ["annual", "monthly"];
+function BillingPeriodSelector({
+  value,
+  onChange,
+  disabledOptions = [],
+  calculatedPricing,
+  billingDiscounts,
+  firstPeriodPricingByPeriod,
+  planPricing
+}) {
+  const translate = useTranslations("common.account.workspace.subscription.checkout.billing");
+  const translateFirstPeriod = useTranslations(
+    "common.account.workspace.subscription.checkout.firstPeriod"
+  );
+  const { currency, formatCurrencyNumber } = useCurrencyFormatter();
+  const isUsd = currency === "usd";
+  const catalogBadgePercents = getPlanBadgePercents(planPricing);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-600 mb-3 block", children: translate("sectionLabel") }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col lg:flex-row gap-2 lg:gap-3", children: BILLING_OPTIONS.map((option) => {
+      const isSelected = value === option;
+      const isDisabled = disabledOptions.includes(option);
+      const price = calculatedPricing?.[option] ?? null;
+      const periodMonths = option === "annual" ? 12 : 1;
+      const displayPrice = price != null ? price / periodMonths : price;
+      const billedLabel = price != null && periodMonths > 1 ? translate("billedUpfront", { price: formatCurrencyNumber(price) }) : "";
+      const planFallbackDiscountPercent = catalogBadgePercents?.[option] ?? null;
+      const discountPercent = isUsd ? null : billingDiscounts?.[option] ?? planFallbackDiscountPercent;
+      const badgeLabel = discountPercent != null ? translate("discountBadge", { percent: String(discountPercent) }) : isUsd && option === "annual" ? translate("catalogDiscountBadge", {
+        percent: String(USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT)
+      }) : null;
+      const firstPeriod = firstPeriodPricingByPeriod?.[option] ?? null;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: isDisabled,
+          onClick: () => !isDisabled && onChange(option),
+          className: cn(
+            "flex-1 text-left p-3 lg:p-4 rounded-lg border transition-all",
+            isDisabled ? "border-zinc-200 bg-zinc-50 cursor-not-allowed opacity-50" : isSelected ? "border-zinc-950 cursor-pointer" : "border-zinc-200 bg-white shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)] cursor-pointer"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap gap-1.5 lg:gap-2 mb-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold lg:paragraph-small-semibold text-zinc-950", children: translate(option) }),
+              badgeLabel && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "paragraph-xsmall-semibold h-6 flex items-center justify-center px-1.5 rounded-lg",
+                    discountPercent == null || discountPercent > 0 ? "bg-green-50 text-green-600 border border-green-100" : "bg-zinc-50 text-zinc-600"
+                  ),
+                  children: badgeLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "size-[18px] rounded-full border-[1.6px] flex items-center justify-center ml-auto",
+                    isSelected ? "border-zinc-950 bg-white" : "border-zinc-200"
+                  ),
+                  children: isSelected && /* @__PURE__ */ jsx("div", { className: "size-[10px] rounded-full bg-zinc-950" })
+                }
+              )
+            ] }),
+            price != null ? firstPeriod ? (
+              /* Cupom só da(s) primeira(s) fatura(s): o preço cheio na linha principal
+               * soaria permanente e contradiria o "depois" logo abaixo. */
+              /* @__PURE__ */ jsxs("span", { className: "paragraph-medium-medium text-zinc-500", children: [
+                translateFirstPeriod(getFirstPeriodLabelKey(option, firstPeriod), {
+                  price: formatCurrencyNumber(price),
+                  count: String(firstPeriod.durationMonths ?? "")
+                }),
+                /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500 block", children: translateFirstPeriod("then", {
+                  price: formatCurrencyNumber(firstPeriod.recurringPrice),
+                  suffix: translate(option === "annual" ? "suffixAnnual" : "suffixMonthly")
+                }) })
+              ] })
+            ) : /* @__PURE__ */ jsxs("span", { className: "paragraph-medium-medium text-zinc-500", children: [
+              formatCurrencyNumber(displayPrice ?? price),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold", children: translate("suffixMonthly") }),
+              billedLabel && /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium block", children: billedLabel })
+            ] }) : /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-24" })
+          ]
+        },
+        option
+      );
+    }) })
+  ] });
+}
+export {
+  BillingPeriodSelector
+};
+//# sourceMappingURL=BillingPeriodSelector.mjs.map

package/dist/components/ui/form/BillingPeriodSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/BillingPeriodSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { useCurrencyFormatter } from '../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport type { UiPlan } from '../../../modules/plans/types/plan.type';\nimport type { BillingPeriod } from '../../../modules/subscriptions/types/billing-period.type';\nimport {\n  getFirstPeriodLabelKey,\n  type FirstPeriodPricing,\n} from '../../../modules/subscriptions/utils/first-period-pricing';\nimport {\n  getPlanBadgePercents,\n  USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT,\n} from '../../../modules/subscriptions/utils/periodicity';\nimport { cn } from '../../../infra/utils/clsx';\n\ntype SelectablePeriod = Extract<BillingPeriod, 'annual' | 'monthly'>;\n\nconst BILLING_OPTIONS: SelectablePeriod[] = ['annual', 'monthly'];\n\ninterface BillingPeriodSelectorProps {\n  value: BillingPeriod;\n  onChange: (value: BillingPeriod) => void;\n  disabledOptions?: BillingPeriod[];\n  /** Totais por período vindos do calculate; null exibe skeleton. */\n  calculatedPricing?: { monthly: number | null; annual: number | null } | null;\n  /**\n   * Percentual de desconto EFETIVO por período (periodicidade + cupom, já compostos).\n   * null no período = calculate ainda sem resposta → usa a âncora do próprio plano.\n   */\n  billingDiscounts?: { monthly: number | null; annual: number | null } | null;\n  /** Split 1º período × recorrente quando o cupom é de duração limitada. */\n  firstPeriodPricingByPeriod?: {\n    monthly: FirstPeriodPricing | null;\n    annual: FirstPeriodPricing | null;\n  } | null;\n  /** Pricing do plano escolhido: alimenta o badge enquanto o calculate não responde. */\n  planPricing?: UiPlan['pricing'] | null;\n}\n\n/** Mensal × anual do contrato, com o desconto e o total à vista de cada um. */\nexport function BillingPeriodSelector({\n  value,\n  onChange,\n  disabledOptions = [],\n  calculatedPricing,\n  billingDiscounts,\n  firstPeriodPricingByPeriod,\n  planPricing,\n}: BillingPeriodSelectorProps) {\n  const translate = useTranslations('common.account.workspace.subscription.checkout.billing');\n  const translateFirstPeriod = useTranslations(\n    'common.account.workspace.subscription.checkout.firstPeriod'\n  );\n  const { currency, formatCurrencyNumber } = useCurrencyFormatter();\n  const isUsd = currency === 'usd';\n\n  // Badge enquanto o calculate não respondeu: âncora do próprio plano em contratação — o\n  // percentual varia por whitelabel, então nada de tabela estática.\n  const catalogBadgePercents = getPlanBadgePercents(planPricing);\n\n  return (\n    <div>\n      <span className=\"paragraph-xsmall-semibold text-zinc-600 mb-3 block\">\n        {translate('sectionLabel')}\n      </span>\n\n      <div className=\"flex flex-col lg:flex-row gap-2 lg:gap-3\">\n        {BILLING_OPTIONS.map((option) => {\n          const isSelected = value === option;\n          const isDisabled = disabledOptions.includes(option);\n          const price = calculatedPricing?.[option] ?? null;\n          const periodMonths = option === 'annual' ? 12 : 1;\n          // A opção anuncia o equivalente mensal e repete o total do período embaixo, para\n          // não sugerir que a cobrança anual é mensal.\n          const displayPrice = price != null ? price / periodMonths : price;\n          const billedLabel =\n            price != null && periodMonths > 1\n              ? translate('billedUpfront', { price: formatCurrencyNumber(price) })\n              : '';\n\n          const planFallbackDiscountPercent = catalogBadgePercents?.[option] ?? null;\n          const discountPercent = isUsd\n            ? null\n            : (billingDiscounts?.[option] ?? planFallbackDiscountPercent);\n          const badgeLabel =\n            discountPercent != null\n              ? translate('discountBadge', { percent: String(discountPercent) })\n              : isUsd && option === 'annual'\n                ? translate('catalogDiscountBadge', {\n                    percent: String(USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT),\n                  })\n                : null;\n\n          const firstPeriod = firstPeriodPricingByPeriod?.[option] ?? null;\n\n          return (\n            <button\n              key={option}\n              type=\"button\"\n              disabled={isDisabled}\n              onClick={() => !isDisabled && onChange(option)}\n              className={cn(\n                'flex-1 text-left p-3 lg:p-4 rounded-lg border transition-all',\n                isDisabled\n                  ? 'border-zinc-200 bg-zinc-50 cursor-not-allowed opacity-50'\n                  : isSelected\n                    ? 'border-zinc-950 cursor-pointer'\n                    : 'border-zinc-200 bg-white shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)] cursor-pointer'\n              )}\n            >\n              <div className=\"flex items-center flex-wrap gap-1.5 lg:gap-2 mb-2\">\n                <span className=\"paragraph-xsmall-semibold lg:paragraph-small-semibold text-zinc-950\">\n                  {translate(option)}\n                </span>\n                {badgeLabel && (\n                  <span\n                    className={cn(\n                      'paragraph-xsmall-semibold h-6 flex items-center justify-center px-1.5 rounded-lg',\n                      discountPercent == null || discountPercent > 0\n                        ? 'bg-green-50 text-green-600 border border-green-100'\n                        : 'bg-zinc-50 text-zinc-600'\n                    )}\n                  >\n                    {badgeLabel}\n                  </span>\n                )}\n                <div\n                  className={cn(\n                    'size-[18px] rounded-full border-[1.6px] flex items-center justify-center ml-auto',\n                    isSelected ? 'border-zinc-950 bg-white' : 'border-zinc-200'\n                  )}\n                >\n                  {isSelected && <div className=\"size-[10px] rounded-full bg-zinc-950\" />}\n                </div>\n              </div>\n\n              {price != null ? (\n                firstPeriod ? (\n                  /* Cupom só da(s) primeira(s) fatura(s): o preço cheio na linha principal\n                   * soaria permanente e contradiria o \"depois\" logo abaixo. */\n                  <span className=\"paragraph-medium-medium text-zinc-500\">\n                    {translateFirstPeriod(getFirstPeriodLabelKey(option, firstPeriod), {\n                      price: formatCurrencyNumber(price),\n                      count: String(firstPeriod.durationMonths ?? ''),\n                    })}\n                    <span className=\"paragraph-xsmall-medium text-zinc-500 block\">\n                      {translateFirstPeriod('then', {\n                        price: formatCurrencyNumber(firstPeriod.recurringPrice),\n                        suffix: translate(option === 'annual' ? 'suffixAnnual' : 'suffixMonthly'),\n                      })}\n                    </span>\n                  </span>\n                ) : (\n                  <span className=\"paragraph-medium-medium text-zinc-500\">\n                    {formatCurrencyNumber(displayPrice ?? price)}\n                    <span className=\"paragraph-xsmall-semibold\">{translate('suffixMonthly')}</span>\n                    {billedLabel && (\n                      <span className=\"paragraph-xsmall-medium block\">{billedLabel}</span>\n                    )}\n                  </span>\n                )\n              ) : (\n                <Skeleton className=\"h-5 w-24\" />\n              )}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAgEM,cAgDQ,YAhDR;AA9DN,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AAGrC;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAInB,MAAM,kBAAsC,CAAC,UAAU,SAAS;AAuBzD,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,YAAY,gBAAgB,wDAAwD;AAC1F,QAAM,uBAAuB;AAAA,IAC3B;AAAA,EACF;AACA,QAAM,EAAE,UAAU,qBAAqB,IAAI,qBAAqB;AAChE,QAAM,QAAQ,aAAa;AAI3B,QAAM,uBAAuB,qBAAqB,WAAW;AAE7D,SACE,qBAAC,SACC;AAAA,wBAAC,UAAK,WAAU,sDACb,oBAAU,cAAc,GAC3B;AAAA,IAEA,oBAAC,SAAI,WAAU,4CACZ,0BAAgB,IAAI,CAAC,WAAW;AAC/B,YAAM,aAAa,UAAU;AAC7B,YAAM,aAAa,gBAAgB,SAAS,MAAM;AAClD,YAAM,QAAQ,oBAAoB,MAAM,KAAK;AAC7C,YAAM,eAAe,WAAW,WAAW,KAAK;AAGhD,YAAM,eAAe,SAAS,OAAO,QAAQ,eAAe;AAC5D,YAAM,cACJ,SAAS,QAAQ,eAAe,IAC5B,UAAU,iBAAiB,EAAE,OAAO,qBAAqB,KAAK,EAAE,CAAC,IACjE;AAEN,YAAM,8BAA8B,uBAAuB,MAAM,KAAK;AACtE,YAAM,kBAAkB,QACpB,OACC,mBAAmB,MAAM,KAAK;AACnC,YAAM,aACJ,mBAAmB,OACf,UAAU,iBAAiB,EAAE,SAAS,OAAO,eAAe,EAAE,CAAC,IAC/D,SAAS,WAAW,WAClB,UAAU,wBAAwB;AAAA,QAChC,SAAS,OAAO,uCAAuC;AAAA,MACzD,CAAC,IACD;AAER,YAAM,cAAc,6BAA6B,MAAM,KAAK;AAE5D,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAS,MAAM,CAAC,cAAc,SAAS,MAAM;AAAA,UAC7C,WAAW;AAAA,YACT;AAAA,YACA,aACI,6DACA,aACE,mCACA;AAAA,UACR;AAAA,UAEA;AAAA,iCAAC,SAAI,WAAU,qDACb;AAAA,kCAAC,UAAK,WAAU,uEACb,oBAAU,MAAM,GACnB;AAAA,cACC,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,mBAAmB,QAAQ,kBAAkB,IACzC,uDACA;AAAA,kBACN;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA,cAEF;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,aAAa,6BAA6B;AAAA,kBAC5C;AAAA,kBAEC,wBAAc,oBAAC,SAAI,WAAU,wCAAuC;AAAA;AAAA,cACvE;AAAA,eACF;AAAA,YAEC,SAAS,OACR;AAAA;AAAA;AAAA,cAGE,qBAAC,UAAK,WAAU,yCACb;AAAA,qCAAqB,uBAAuB,QAAQ,WAAW,GAAG;AAAA,kBACjE,OAAO,qBAAqB,KAAK;AAAA,kBACjC,OAAO,OAAO,YAAY,kBAAkB,EAAE;AAAA,gBAChD,CAAC;AAAA,gBACD,oBAAC,UAAK,WAAU,+CACb,+BAAqB,QAAQ;AAAA,kBAC5B,OAAO,qBAAqB,YAAY,cAAc;AAAA,kBACtD,QAAQ,UAAU,WAAW,WAAW,iBAAiB,eAAe;AAAA,gBAC1E,CAAC,GACH;AAAA,iBACF;AAAA,gBAEA,qBAAC,UAAK,WAAU,yCACb;AAAA,mCAAqB,gBAAgB,KAAK;AAAA,cAC3C,oBAAC,UAAK,WAAU,6BAA6B,oBAAU,eAAe,GAAE;AAAA,cACvE,eACC,oBAAC,UAAK,WAAU,iCAAiC,uBAAY;AAAA,eAEjE,IAGF,oBAAC,YAAS,WAAU,YAAW;AAAA;AAAA;AAAA,QAjE5B;AAAA,MAmEP;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/ui/form/PaymentMethodToggle.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconBarcode, IconCreditCard, IconInfoCircle, IconQrcode } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip";
+import { cn } from "../../../infra/utils/clsx";
+const selectedClass = "bg-white text-zinc-950 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]";
+const optionClass = "flex items-center gap-1.5 px-3 py-1.5 rounded-lg paragraph-small-semibold transition-colors cursor-pointer";
+const disabledClass = "flex items-center gap-1.5 px-3 py-1.5 rounded-lg paragraph-small-semibold text-zinc-950 opacity-40 cursor-not-allowed";
+function PaymentMethodToggle({
+  value,
+  onChange,
+  disableBoleto = false,
+  disableCard = false,
+  disablePix = false,
+  hideBoleto = false,
+  hideCard = false,
+  hidePix = false,
+  boletoTooltip,
+  cardTooltip,
+  pixTooltip
+}) {
+  const translate = useTranslations("common.payment.methodToggle");
+  const visibleMethods = [!hideCard, !hideBoleto, !hidePix].filter(Boolean).length;
+  if (visibleMethods <= 1) return null;
+  const options = [
+    {
+      method: "card",
+      hidden: hideCard,
+      disabled: disableCard,
+      tooltip: cardTooltip ?? translate("cardTooltip"),
+      label: translate("card"),
+      icon: IconCreditCard
+    },
+    {
+      method: "boleto",
+      hidden: hideBoleto,
+      disabled: disableBoleto,
+      tooltip: boletoTooltip ?? translate("boletoTooltip"),
+      label: translate("boleto"),
+      icon: IconBarcode
+    },
+    {
+      method: "pix",
+      hidden: hidePix,
+      disabled: disablePix,
+      tooltip: pixTooltip ?? translate("pixTooltip"),
+      label: translate("pix"),
+      icon: IconQrcode
+    }
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "inline-flex items-stretch h-12 rounded-[12px] bg-zinc-100 p-1.5 gap-1 w-fit", children: options.map(({ method, hidden, disabled, tooltip, label, icon: Icon }) => {
+    if (hidden) return null;
+    if (disabled) {
+      return /* @__PURE__ */ jsxs("div", { className: disabledClass, children: [
+        /* @__PURE__ */ jsx(Icon, { size: 20, className: "shrink-0" }),
+        label,
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 16, className: "shrink-0" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "max-w-65", children: tooltip })
+        ] })
+      ] }, method);
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(method),
+        className: cn(optionClass, value === method ? selectedClass : "text-zinc-950"),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { size: 20, className: "shrink-0" }),
+          label
+        ]
+      },
+      method
+    );
+  }) });
+}
+export {
+  PaymentMethodToggle
+};
+//# sourceMappingURL=PaymentMethodToggle.mjs.map

package/dist/components/ui/form/PaymentMethodToggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/PaymentMethodToggle.tsx"],"sourcesContent":["'use client';\n\nimport { IconBarcode, IconCreditCard, IconInfoCircle, IconQrcode } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../overlay/Tooltip';\nimport { cn } from '../../../infra/utils/clsx';\n\nexport type PaymentMethodOption = 'card' | 'boleto' | 'pix';\n\ntype PaymentMethodToggleProps = {\n  value: PaymentMethodOption;\n  onChange: (method: PaymentMethodOption) => void;\n  disableBoleto?: boolean;\n  disableCard?: boolean;\n  disablePix?: boolean;\n  hideBoleto?: boolean;\n  hideCard?: boolean;\n  hidePix?: boolean;\n  boletoTooltip?: string;\n  cardTooltip?: string;\n  pixTooltip?: string;\n};\n\nconst selectedClass = 'bg-white text-zinc-950 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]';\nconst optionClass =\n  'flex items-center gap-1.5 px-3 py-1.5 rounded-lg paragraph-small-semibold transition-colors cursor-pointer';\nconst disabledClass =\n  'flex items-center gap-1.5 px-3 py-1.5 rounded-lg paragraph-small-semibold text-zinc-950 opacity-40 cursor-not-allowed';\n\n/** Seletor de forma de pagamento (cartão, boleto e pix). Some quando só sobra uma opção. */\nexport function PaymentMethodToggle({\n  value,\n  onChange,\n  disableBoleto = false,\n  disableCard = false,\n  disablePix = false,\n  hideBoleto = false,\n  hideCard = false,\n  hidePix = false,\n  boletoTooltip,\n  cardTooltip,\n  pixTooltip,\n}: PaymentMethodToggleProps) {\n  const translate = useTranslations('common.payment.methodToggle');\n\n  const visibleMethods = [!hideCard, !hideBoleto, !hidePix].filter(Boolean).length;\n  if (visibleMethods <= 1) return null;\n\n  const options: {\n    method: PaymentMethodOption;\n    hidden: boolean;\n    disabled: boolean;\n    tooltip: string;\n    label: string;\n    icon: typeof IconCreditCard;\n  }[] = [\n    {\n      method: 'card',\n      hidden: hideCard,\n      disabled: disableCard,\n      tooltip: cardTooltip ?? translate('cardTooltip'),\n      label: translate('card'),\n      icon: IconCreditCard,\n    },\n    {\n      method: 'boleto',\n      hidden: hideBoleto,\n      disabled: disableBoleto,\n      tooltip: boletoTooltip ?? translate('boletoTooltip'),\n      label: translate('boleto'),\n      icon: IconBarcode,\n    },\n    {\n      method: 'pix',\n      hidden: hidePix,\n      disabled: disablePix,\n      tooltip: pixTooltip ?? translate('pixTooltip'),\n      label: translate('pix'),\n      icon: IconQrcode,\n    },\n  ];\n\n  return (\n    <div className=\"inline-flex items-stretch h-12 rounded-[12px] bg-zinc-100 p-1.5 gap-1 w-fit\">\n      {options.map(({ method, hidden, disabled, tooltip, label, icon: Icon }) => {\n        if (hidden) return null;\n\n        if (disabled) {\n          return (\n            <div key={method} className={disabledClass}>\n              <Icon size={20} className=\"shrink-0\" />\n              {label}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <IconInfoCircle size={16} className=\"shrink-0\" />\n                </TooltipTrigger>\n                <TooltipContent side=\"top\" className=\"max-w-65\">\n                  {tooltip}\n                </TooltipContent>\n              </Tooltip>\n            </div>\n          );\n        }\n\n        return (\n          <button\n            key={method}\n            type=\"button\"\n            onClick={() => onChange(method)}\n            className={cn(optionClass, value === method ? selectedClass : 'text-zinc-950')}\n          >\n            <Icon size={20} className=\"shrink-0\" />\n            {label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA0Fc,cAEA,YAFA;AAxFd,SAAS,aAAa,gBAAgB,gBAAgB,kBAAkB;AACxE,SAAS,uBAAuB;AAChC,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAkBnB,MAAM,gBAAgB;AACtB,MAAM,cACJ;AACF,MAAM,gBACJ;AAGK,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,YAAY,gBAAgB,6BAA6B;AAE/D,QAAM,iBAAiB,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,OAAO,EAAE;AAC1E,MAAI,kBAAkB,EAAG,QAAO;AAEhC,QAAM,UAOA;AAAA,IACJ;AAAA,MACE,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,SAAS,eAAe,UAAU,aAAa;AAAA,MAC/C,OAAO,UAAU,MAAM;AAAA,MACvB,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,SAAS,iBAAiB,UAAU,eAAe;AAAA,MACnD,OAAO,UAAU,QAAQ;AAAA,MACzB,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,SAAS,cAAc,UAAU,YAAY;AAAA,MAC7C,OAAO,UAAU,KAAK;AAAA,MACtB,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAU,+EACZ,kBAAQ,IAAI,CAAC,EAAE,QAAQ,QAAQ,UAAU,SAAS,OAAO,MAAM,KAAK,MAAM;AACzE,QAAI,OAAQ,QAAO;AAEnB,QAAI,UAAU;AACZ,aACE,qBAAC,SAAiB,WAAW,eAC3B;AAAA,4BAAC,QAAK,MAAM,IAAI,WAAU,YAAW;AAAA,QACpC;AAAA,QACD,qBAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MACrB,8BAAC,kBAAe,MAAM,IAAI,WAAU,YAAW,GACjD;AAAA,UACA,oBAAC,kBAAe,MAAK,OAAM,WAAU,YAClC,mBACH;AAAA,WACF;AAAA,WAVQ,MAWV;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,MAAM;AAAA,QAC9B,WAAW,GAAG,aAAa,UAAU,SAAS,gBAAgB,eAAe;AAAA,QAE7E;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAU,YAAW;AAAA,UACpC;AAAA;AAAA;AAAA,MANI;AAAA,IAOP;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/ui/form/RadioOptionFieldIcon.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroupItem } from "./RadioGroup";
+import { cn } from "../../../infra/utils/clsx";
+function RadioOptionFieldIcon({
+  value,
+  label,
+  description,
+  isSelected,
+  icon,
+  id,
+  disabled = false
+}) {
+  const htmlForId = id || value;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: htmlForId,
+      className: cn(
+        "flex items-center gap-4 p-4 rounded-lg transition-colors",
+        disabled ? "border-0 cursor-not-allowed bg-zinc-50" : isSelected ? "border border-zinc-950 cursor-pointer" : "border border-zinc-200 hover:border-zinc-300 cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "shrink-0 mt-0.5 bg-zinc-50 size-10! rounded-lg flex items-center justify-center",
+              disabled && "opacity-80",
+              isSelected ? "text-zinc-950" : "text-zinc-600"
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-5 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", disabled && "opacity-80"), children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-600", children: description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            RadioGroupItem,
+            {
+              value,
+              id: htmlForId,
+              disabled,
+              className: cn("size-[18px] border-[1.5px] shrink-0", isSelected && "border-zinc-950", disabled && "opacity-80")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  RadioOptionFieldIcon
+};
+//# sourceMappingURL=RadioOptionFieldIcon.mjs.map

package/dist/components/ui/form/RadioOptionFieldIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/RadioOptionFieldIcon.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { RadioGroupItem } from './RadioGroup';\nimport { cn } from '../../../infra/utils/clsx';\n\ntype RadioOptionFieldIconProps = {\n  value: string;\n  label: string;\n  isSelected: boolean;\n  icon: ReactNode;\n  description?: string;\n  id?: string;\n  disabled?: boolean;\n};\n\n/** Opção de rádio em cartão, com ícone à esquerda e descrição — usada na escolha de função do usuário. */\nexport function RadioOptionFieldIcon({\n  value,\n  label,\n  description,\n  isSelected,\n  icon,\n  id,\n  disabled = false,\n}: RadioOptionFieldIconProps) {\n  const htmlForId = id || value;\n\n  return (\n    <label\n      htmlFor={htmlForId}\n      className={cn(\n        'flex items-center gap-4 p-4 rounded-lg transition-colors',\n        disabled\n          ? 'border-0 cursor-not-allowed bg-zinc-50'\n          : isSelected\n            ? 'border border-zinc-950 cursor-pointer'\n            : 'border border-zinc-200 hover:border-zinc-300 cursor-pointer'\n      )}\n    >\n      <div\n        className={cn(\n          'shrink-0 mt-0.5 bg-zinc-50 size-10! rounded-lg flex items-center justify-center',\n          disabled && 'opacity-80',\n          isSelected ? 'text-zinc-950' : 'text-zinc-600'\n        )}\n      >\n        {icon}\n      </div>\n      <div className=\"flex items-center justify-between gap-5 flex-1\">\n        <div className={cn('flex flex-col gap-1', disabled && 'opacity-80')}>\n          <span className=\"paragraph-small-semibold text-zinc-950\">{label}</span>\n          {description && <span className=\"paragraph-small-regular text-zinc-600\">{description}</span>}\n        </div>\n        <RadioGroupItem\n          value={value}\n          id={htmlForId}\n          disabled={disabled}\n          className={cn('size-[18px] border-[1.5px] shrink-0', isSelected && 'border-zinc-950', disabled && 'opacity-80')}\n        />\n      </div>\n    </label>\n  );\n}\n"],"mappings":";AAwCM,cAUE,YAVF;AArCN,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAaZ,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAA8B;AAC5B,QAAM,YAAY,MAAM;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA,WACI,2CACA,aACE,0CACA;AAAA,MACR;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY;AAAA,cACZ,aAAa,kBAAkB;AAAA,YACjC;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA,qBAAC,SAAI,WAAU,kDACb;AAAA,+BAAC,SAAI,WAAW,GAAG,uBAAuB,YAAY,YAAY,GAChE;AAAA,gCAAC,UAAK,WAAU,0CAA0C,iBAAM;AAAA,YAC/D,eAAe,oBAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,aACvF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA,WAAW,GAAG,uCAAuC,cAAc,mBAAmB,YAAY,YAAY;AAAA;AAAA,UAChH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}