@greatapps/common 1.1.789 → 1.1.791

package/dist/components/account/sections/subscription/plans/PlanCard.mjs

@@ -0,0 +1,281 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconInfoCircle, IconStack2, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../../../../ui/buttons/Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../../ui/overlay/Tooltip";
+import { useCurrencyFormatter } from "../../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { useManagementPermissions } from "../../../../../modules/auth/hooks/useManagementPermissions";
+import {
+  couponAllowedBillingPeriod,
+  isCouponApplicableToPlan
+} from "../../../../../modules/coupons/utils/coupon-restrictions";
+import { useCountDomains } from "../../../../../modules/domains/hooks/count-domains.hook";
+import { getPlanTooltips } from "../../../../../modules/plans/constants/plan-tooltips.constants";
+import { useEnrichedPlans } from "../../../../../modules/plans/hooks/use-enriched-plans.hook";
+import { useUiPlans } from "../../../../../modules/plans/hooks/use-ui-plans.hook";
+import {
+  ADDON_IDS,
+  buildAiCreditOptions,
+  AI_CREDIT_SIZES
+} from "../../../../../modules/subscriptions/constants/addons.constants";
+import { useCurrentSubscription } from "../../../../../modules/subscriptions/hooks/use-current-subscription.hook";
+import { isFreeSubscription } from "../../../../../modules/subscriptions/utils/is-free-subscription";
+import { roundDiscountPercent } from "../../../../../modules/subscriptions/utils/periodicity";
+import { useExternalContracting, useIsDefaultWhitelabel } from "../../../../../providers/whitelabel.provider";
+import { useSubscriptionFlows } from "../../../../../store/useSubscriptionFlows";
+import { parseCurrencyToNumber } from "../../../../../utils/format/currency";
+import { cn } from "../../../../../infra/utils/clsx";
+function InfoTooltip({ tooltipKey, disabled }) {
+  const translate = useTranslations();
+  const planTooltips = getPlanTooltips(translate);
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "flex items-center justify-center size-6 shrink-0", children: /* @__PURE__ */ jsx(
+      IconInfoCircle,
+      {
+        size: 16,
+        className: disabled ? "text-zinc-500 opacity-40" : "text-zinc-950"
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", className: "max-w-53.75 p-3", children: planTooltips[tooltipKey] })
+  ] });
+}
+function PlanCard({ plan, billingPeriod, couponStripeData, onBeforeAction }) {
+  const translate = useTranslations();
+  const translateCard = useTranslations("common.plans.card");
+  const translateCatalog = useTranslations("common.account.workspace.subscription.plansCatalog");
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const { redirectToExternal } = useExternalContracting();
+  const { isOwnerOrAdmin } = useManagementPermissions();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const openChangePlan = useSubscriptionFlows((state) => state.openChangePlan);
+  const openDowngradeReason = useSubscriptionFlows((state) => state.openDowngradeReason);
+  const openCannotDowngrade = useSubscriptionFlows((state) => state.openCannotDowngrade);
+  const aiCreditOptions = buildAiCreditOptions(plan.items);
+  const defaultCredit = aiCreditOptions[0];
+  const includedAiCredits = plan.items.find((item) => item.id_addon === ADDON_IDS.AI && (item.value ?? 0) === 0)?.quantity ?? 0;
+  const includesAbTest = plan.items.some(
+    (item) => item.id_addon === ADDON_IDS.AB_TEST && item.quantity > 0
+  );
+  const { data: plans = [], subscriptionId } = useEnrichedPlans();
+  const { data: allPlans = [] } = useUiPlans();
+  const currentPlan = plans.find((item) => item.isCurrentPlan);
+  const { data: subscriptionData, isPending: isLoadingSubscription } = useCurrentSubscription();
+  const { data: registeredDomains = 0 } = useCountDomains();
+  const activeSubscription = subscriptionData?.data?.[0] ?? null;
+  const isFirstPurchase = !activeSubscription || !activeSubscription.active || isFreeSubscription(activeSubscription) || activeSubscription.type === "trial";
+  const isSubscriptionLoaded = !isLoadingSubscription;
+  const priceUnavailable = !!plan.priceUnavailable;
+  const couponApplies = isCouponApplicableToPlan(couponStripeData, plan.planId);
+  const couponPeriod = couponAllowedBillingPeriod(couponStripeData?.periodicity);
+  const couponActiveForCard = !!couponStripeData && isFirstPurchase && !priceUnavailable && couponApplies && (couponPeriod === null || couponPeriod === billingPeriod);
+  const couponPercentOff = couponStripeData?.percent_off ?? 0;
+  const couponAmountOff = couponStripeData?.amount_off ?? 0;
+  const computePriceData = () => {
+    if (priceUnavailable) {
+      return {
+        creditLabel: "",
+        creditPrice: "",
+        totalFormatted: plan.price,
+        promoTotalFormatted: "",
+        promoActive: false,
+        periodLabel: "",
+        upfrontNote: "",
+        badgePercent: 0
+      };
+    }
+    const planPriceMonthly = parseCurrencyToNumber(plan.price);
+    const creditPriceMonthly = isDefaultWhitelabel ? defaultCredit.price ?? 0 : 0;
+    const baseMonthly = planPriceMonthly + creditPriceMonthly;
+    const periodDiscountFactor = (period) => {
+      const listMonthly = plan.pricingByPeriod?.monthly ?? 0;
+      const periodMonthly = plan.pricingByPeriod?.[period];
+      if (!listMonthly || periodMonthly == null) return 1;
+      return periodMonthly / listMonthly;
+    };
+    const periodPricingKey = billingPeriod === "annual" ? "annual" : billingPeriod === "semiannual" ? "semester" : "monthly";
+    const periodPricing = plan.pricing?.[periodPricingKey];
+    let months = 1;
+    let discountFactor = 1;
+    if (billingPeriod === "semiannual") {
+      months = 6;
+      discountFactor = periodDiscountFactor("semiannual");
+    } else if (billingPeriod === "annual") {
+      months = 12;
+      discountFactor = periodDiscountFactor("annual");
+    }
+    const badgePercent = periodPricing ? roundDiscountPercent(periodPricing.discount_percent) : 0;
+    const total = baseMonthly * months * discountFactor;
+    const promoTotal = couponActiveForCard ? couponPercentOff > 0 ? total * (1 - couponPercentOff / 100) : couponAmountOff > 0 ? Math.max(0, total - couponAmountOff / 100) : total : total;
+    const chargedTotal = couponActiveForCard && promoTotal < total ? promoTotal : total;
+    let upfrontNote = "";
+    if (billingPeriod === "annual") {
+      upfrontNote = translateCard("upfrontNoteAnnual", { price: formatCurrencyNumber(chargedTotal) });
+    } else if (billingPeriod === "semiannual") {
+      upfrontNote = translateCard("upfrontNoteSemiannual", {
+        price: formatCurrencyNumber(chargedTotal)
+      });
+    }
+    return {
+      creditLabel: isDefaultWhitelabel && defaultCredit.credits !== AI_CREDIT_SIZES[0] ? translateCard("aiCreditsLabel", { credits: defaultCredit.credits.toLocaleString("pt-BR") }) : "",
+      creditPrice: defaultCredit.price === 0 ? translateCard("defaultPrice") : formatCurrencyNumber(defaultCredit.price),
+      totalFormatted: formatCurrencyNumber(total / months),
+      promoTotalFormatted: formatCurrencyNumber(promoTotal / months),
+      promoActive: couponActiveForCard && promoTotal < total,
+      periodLabel: translate("common.periodicity.suffixMonthly"),
+      upfrontNote,
+      badgePercent
+    };
+  };
+  const handleSelectPlan = () => {
+    if (priceUnavailable || !isSubscriptionLoaded) return;
+    if (redirectToExternal(isFirstPurchase ? "plans" : "contracting")) return;
+    const targetPlan = allPlans.find((item) => item.planId === plan.planId);
+    const targetDomainItem = targetPlan?.items.find((item) => item.id_addon === ADDON_IDS.DOMAINS);
+    const targetIncludedDomains = targetDomainItem?.quantity ?? 0;
+    const targetSupportsExtraDomains = !!targetDomainItem && targetDomainItem.quantity > 1;
+    const targetPagesItem = targetPlan?.items.find((item) => item.id_addon === ADDON_IDS.PAGES);
+    const targetIncludedPages = targetPagesItem && targetPagesItem.quantity > 0 ? targetPagesItem.quantity : null;
+    const newPlanMonthly = plan.pricingByPeriod?.monthly ?? parseCurrencyToNumber(plan.price);
+    const currentPlanMonthly = currentPlan ? currentPlan.pricingByPeriod?.monthly ?? parseCurrencyToNumber(currentPlan.price) : 0;
+    const isDowngrade = !isFirstPurchase && newPlanMonthly < currentPlanMonthly;
+    const downgradeData = {
+      targetPlan: plan,
+      planName: plan.name,
+      billingPeriod,
+      planIncludedDomains: targetIncludedDomains,
+      planIncludedPages: targetIncludedPages,
+      registeredDomains
+    };
+    onBeforeAction?.();
+    if (isDowngrade) {
+      openDowngradeReason(downgradeData);
+      return;
+    }
+    if (!targetSupportsExtraDomains && registeredDomains > targetIncludedDomains) {
+      openCannotDowngrade({ ...downgradeData, domainsExceeded: true, pagesExceeded: false });
+      return;
+    }
+    if (isFirstPurchase) {
+      openChangePlan({ targetPlan: plan, billingPeriod, isReactivation: true, selectedCreditIndex: 0 });
+      return;
+    }
+    if (subscriptionId == null) return;
+    openChangePlan({ targetPlan: plan, billingPeriod, isDowngrade, selectedCreditIndex: 0 });
+  };
+  const priceData = computePriceData();
+  const isCurrentForPeriod = plan.isCurrentPlan && plan.currentPeriodicity === billingPeriod;
+  const shouldShowCurrentPlanBadge = isCurrentForPeriod && !isFreeSubscription(activeSubscription) && activeSubscription?.type !== "trial" && !activeSubscription?.date_cancellation;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col flex-1 min-w-0 rounded-lg overflow-hidden relative",
+        plan.isPopular ? "bg-primary" : "border border-zinc-200"
+      ),
+      children: [
+        plan.isPopular && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-8 px-1.5 shrink-0 bg-primary", children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950", children: translateCard("mostPopular") }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col flex-1 bg-white overflow-hidden relative",
+              plan.isPopular && "border-2 border-primary rounded-lg"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "pt-2 px-2 bg-white shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5 bg-zinc-50 rounded", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950 font-outfit", children: plan.name }),
+                  priceData.promoActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md bg-cyan-50 px-2 py-1 paragraph-xsmall-semibold text-cyan-700", children: translateCard("promoBadge") })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(IconStack2, { size: 16, className: "text-zinc-950 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950", children: plan.mainFeatures.pages })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(IconWorld, { size: 16, className: "text-zinc-950 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950", children: plan.mainFeatures.domains }),
+                    /* @__PURE__ */ jsx(InfoTooltip, { tooltipKey: "domains" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(IconUsers, { size: 16, className: "text-zinc-950 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950", children: plan.mainFeatures.users }),
+                    /* @__PURE__ */ jsx(InfoTooltip, { tooltipKey: "users" })
+                  ] })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 p-6 bg-white", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+                plan.features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  feature.icon === "check" ? /* @__PURE__ */ jsx(IconCheck, { size: 16, className: "text-zinc-950 shrink-0" }) : /* @__PURE__ */ jsx(IconX, { size: 16, className: "text-zinc-950 shrink-0" }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "paragraph-small-medium text-zinc-500",
+                        feature.disabled && "opacity-40"
+                      ),
+                      children: feature.text
+                    }
+                  ),
+                  feature.tooltip && /* @__PURE__ */ jsx(InfoTooltip, { tooltipKey: feature.tooltip, disabled: feature.disabled })
+                ] }, index)),
+                includesAbTest && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(IconCheck, { size: 16, className: "text-zinc-950 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translateCard("abTestIncluded") })
+                ] }),
+                isDefaultWhitelabel && includedAiCredits > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(IconCheck, { size: 16, className: "text-zinc-950 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translateCard("aiCreditsIncluded", {
+                    credits: includedAiCredits.toLocaleString("pt-BR")
+                  }) })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "shrink-0 relative", children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute -top-6 left-0 right-0 h-6 bg-linear-to-t from-white to-transparent pointer-events-none" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-6 border-t border-zinc-200 bg-white", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                    priceData.promoActive ? /* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-medium text-zinc-500 line-through", children: [
+                      translateCard("promoFrom"),
+                      " ",
+                      priceData.totalFormatted
+                    ] }) : priceData.badgePercent > 0 && /* @__PURE__ */ jsx("span", { className: "w-fit paragraph-xsmall-semibold h-5 flex items-center px-1.5 rounded bg-green-50 text-green-600 border border-green-100", children: translateCatalog("discountBadge", { percent: String(priceData.badgePercent) }) }),
+                    /* @__PURE__ */ jsxs("p", { className: "paragraph-xlarge-semibold text-zinc-950 tracking-[-0.24px] font-outfit", children: [
+                      priceData.promoActive ? priceData.promoTotalFormatted : priceData.totalFormatted,
+                      /* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-medium text-zinc-500", children: [
+                        " ",
+                        priceData.periodLabel
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                    shouldShowCurrentPlanBadge ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 h-12", children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-6 bg-zinc-200 rounded-full shrink-0", children: /* @__PURE__ */ jsx(IconCheck, { size: 16, className: "text-zinc-950" }) }),
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translateCard("currentPlan") })
+                    ] }) : isOwnerOrAdmin ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        className: cn(
+                          "w-full h-12 paragraph-small-semibold",
+                          plan.buttonVariant === "brand" ? "bg-primary hover:bg-primary text-zinc-950" : "bg-zinc-950 hover:bg-zinc-950 text-white"
+                        ),
+                        onClick: handleSelectPlan,
+                        disabled: priceUnavailable,
+                        children: translateCard("selectPlan")
+                      }
+                    ) : null,
+                    priceData.upfrontNote && /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500 text-center text-balance", children: priceData.upfrontNote })
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PlanCard
+};
+//# sourceMappingURL=PlanCard.mjs.map

package/dist/components/account/sections/subscription/plans/PlanCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/account/sections/subscription/plans/PlanCard.tsx"],"sourcesContent":["'use client';\n\nimport { IconCheck, IconInfoCircle, IconStack2, IconUsers, IconWorld, IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../../../ui/buttons/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../../../ui/overlay/Tooltip';\nimport { useCurrencyFormatter } from '../../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { useManagementPermissions } from '../../../../../modules/auth/hooks/useManagementPermissions';\nimport {\n  couponAllowedBillingPeriod,\n  isCouponApplicableToPlan,\n} from '../../../../../modules/coupons/utils/coupon-restrictions';\nimport type { CouponStripeData } from '../../../../../modules/coupons/types/coupon.type';\nimport { useCountDomains } from '../../../../../modules/domains/hooks/count-domains.hook';\nimport { getPlanTooltips } from '../../../../../modules/plans/constants/plan-tooltips.constants';\nimport { useEnrichedPlans } from '../../../../../modules/plans/hooks/use-enriched-plans.hook';\nimport { useUiPlans } from '../../../../../modules/plans/hooks/use-ui-plans.hook';\nimport type { PlanTooltips, UiPlan } from '../../../../../modules/plans/types/plan.type';\nimport {\n  ADDON_IDS,\n  buildAiCreditOptions,\n  AI_CREDIT_SIZES,\n} from '../../../../../modules/subscriptions/constants/addons.constants';\nimport { useCurrentSubscription } from '../../../../../modules/subscriptions/hooks/use-current-subscription.hook';\nimport type { BillingPeriod } from '../../../../../modules/subscriptions/types/billing-period.type';\nimport { isFreeSubscription } from '../../../../../modules/subscriptions/utils/is-free-subscription';\nimport { roundDiscountPercent } from '../../../../../modules/subscriptions/utils/periodicity';\nimport { useExternalContracting, useIsDefaultWhitelabel } from '../../../../../providers/whitelabel.provider';\nimport { useSubscriptionFlows } from '../../../../../store/useSubscriptionFlows';\nimport { parseCurrencyToNumber } from '../../../../../utils/format/currency';\nimport { cn } from '../../../../../infra/utils/clsx';\n\nfunction InfoTooltip({ tooltipKey, disabled }: { tooltipKey: keyof PlanTooltips; disabled?: boolean }) {\n  const translate = useTranslations();\n  const planTooltips = getPlanTooltips(translate);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button type=\"button\" className=\"flex items-center justify-center size-6 shrink-0\">\n          <IconInfoCircle\n            size={16}\n            className={disabled ? 'text-zinc-500 opacity-40' : 'text-zinc-950'}\n          />\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"right\" className=\"max-w-53.75 p-3\">\n        {planTooltips[tooltipKey]}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n\ninterface PlanCardProps {\n  plan: UiPlan;\n  billingPeriod: BillingPeriod;\n  couponStripeData?: CouponStripeData | null;\n  onBeforeAction?: () => void;\n}\n\n/** Card do catálogo: recursos do plano, preço no período escolhido e a ação de contratar/trocar. */\nexport function PlanCard({ plan, billingPeriod, couponStripeData, onBeforeAction }: PlanCardProps) {\n  const translate = useTranslations();\n  const translateCard = useTranslations('common.plans.card');\n  const translateCatalog = useTranslations('common.account.workspace.subscription.plansCatalog');\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n  const { redirectToExternal } = useExternalContracting();\n  const { isOwnerOrAdmin } = useManagementPermissions();\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  const openChangePlan = useSubscriptionFlows((state) => state.openChangePlan);\n  const openDowngradeReason = useSubscriptionFlows((state) => state.openDowngradeReason);\n  const openCannotDowngrade = useSubscriptionFlows((state) => state.openCannotDowngrade);\n\n  const aiCreditOptions = buildAiCreditOptions(plan.items);\n  const defaultCredit = aiCreditOptions[0];\n  // Créditos de IA inclusos no plano = item AI (id_addon 6) com value 0 (base/incluso).\n  // Lido do live plan.items; a quantidade varia por plano (não hardcodar).\n  const includedAiCredits =\n    plan.items.find((item) => item.id_addon === ADDON_IDS.AI && (item.value ?? 0) === 0)?.quantity ?? 0;\n  // Plano inclui Teste A/B quando há item AB_TEST (id_addon 4) — espelha a lógica do\n  // PlanDetailsSheet (item da assinatura com quantity > 0). Agência exibe como incluso.\n  const includesAbTest = plan.items.some(\n    (item) => item.id_addon === ADDON_IDS.AB_TEST && item.quantity > 0\n  );\n\n  const { data: plans = [], subscriptionId } = useEnrichedPlans();\n  const { data: allPlans = [] } = useUiPlans();\n  const currentPlan = plans.find((item) => item.isCurrentPlan);\n\n  const { data: subscriptionData, isPending: isLoadingSubscription } = useCurrentSubscription();\n  const { data: registeredDomains = 0 } = useCountDomains();\n\n  const activeSubscription = subscriptionData?.data?.[0] ?? null;\n  const isFirstPurchase =\n    !activeSubscription ||\n    !activeSubscription.active ||\n    isFreeSubscription(activeSubscription) ||\n    activeSubscription.type === 'trial';\n  const isSubscriptionLoaded = !isLoadingSubscription;\n\n  const priceUnavailable = !!plan.priceUnavailable;\n\n  // Cupom da campanha: badge + preço promocional só no(s) plano(s) e periodicidade que ele\n  // cobre, e só na primeira contratação (regra da oferta). O desconto é calculado a partir\n  // do stripe_data do cupom (mesma fonte usada pela troca de plano via getCouponByCode).\n  const couponApplies = isCouponApplicableToPlan(couponStripeData, plan.planId);\n  const couponPeriod = couponAllowedBillingPeriod(couponStripeData?.periodicity);\n  const couponActiveForCard =\n    !!couponStripeData &&\n    isFirstPurchase &&\n    !priceUnavailable &&\n    couponApplies &&\n    (couponPeriod === null || couponPeriod === billingPeriod);\n  const couponPercentOff = couponStripeData?.percent_off ?? 0;\n  const couponAmountOff = couponStripeData?.amount_off ?? 0; // centavos (Stripe)\n\n  const computePriceData = () => {\n    if (priceUnavailable) {\n      return {\n        creditLabel: '',\n        creditPrice: '',\n        totalFormatted: plan.price,\n        promoTotalFormatted: '',\n        promoActive: false,\n        periodLabel: '',\n        upfrontNote: '',\n        badgePercent: 0,\n      };\n    }\n\n    const planPriceMonthly = parseCurrencyToNumber(plan.price);\n    const creditPriceMonthly = isDefaultWhitelabel ? (defaultCredit.price ?? 0) : 0;\n    const baseMonthly = planPriceMonthly + creditPriceMonthly;\n\n    // O desconto de periodicidade varia por plano e por moeda, então sai da razão entre o\n    // mensal do período e o mensal avulso, ambos já resolvidos pela API.\n    const periodDiscountFactor = (period: 'semiannual' | 'annual') => {\n      const listMonthly = plan.pricingByPeriod?.monthly ?? 0;\n      const periodMonthly = plan.pricingByPeriod?.[period];\n      if (!listMonthly || periodMonthly == null) return 1;\n      return periodMonthly / listMonthly;\n    };\n\n    const periodPricingKey =\n      billingPeriod === 'annual' ? 'annual' : billingPeriod === 'semiannual' ? 'semester' : 'monthly';\n    const periodPricing = plan.pricing?.[periodPricingKey];\n\n    let months = 1;\n    let discountFactor = 1;\n    if (billingPeriod === 'semiannual') {\n      months = 6;\n      discountFactor = periodDiscountFactor('semiannual');\n    } else if (billingPeriod === 'annual') {\n      months = 12;\n      discountFactor = periodDiscountFactor('annual');\n    }\n\n    const badgePercent = periodPricing ? roundDiscountPercent(periodPricing.discount_percent) : 0;\n    const total = baseMonthly * months * discountFactor;\n\n    const promoTotal = couponActiveForCard\n      ? couponPercentOff > 0\n        ? total * (1 - couponPercentOff / 100)\n        : couponAmountOff > 0\n          ? Math.max(0, total - couponAmountOff / 100)\n          : total\n      : total;\n\n    // O card anuncia o equivalente mensal e repete embaixo o valor à vista; o cálculo acima\n    // continua no total do período porque cupom de valor fixo desconta sobre ele.\n    const chargedTotal = couponActiveForCard && promoTotal < total ? promoTotal : total;\n    let upfrontNote = '';\n    if (billingPeriod === 'annual') {\n      upfrontNote = translateCard('upfrontNoteAnnual', { price: formatCurrencyNumber(chargedTotal) });\n    } else if (billingPeriod === 'semiannual') {\n      upfrontNote = translateCard('upfrontNoteSemiannual', {\n        price: formatCurrencyNumber(chargedTotal),\n      });\n    }\n\n    return {\n      creditLabel:\n        isDefaultWhitelabel && defaultCredit.credits !== AI_CREDIT_SIZES[0]\n          ? translateCard('aiCreditsLabel', { credits: defaultCredit.credits.toLocaleString('pt-BR') })\n          : '',\n      creditPrice:\n        defaultCredit.price === 0\n          ? translateCard('defaultPrice')\n          : formatCurrencyNumber(defaultCredit.price),\n      totalFormatted: formatCurrencyNumber(total / months),\n      promoTotalFormatted: formatCurrencyNumber(promoTotal / months),\n      promoActive: couponActiveForCard && promoTotal < total,\n      periodLabel: translate('common.periodicity.suffixMonthly'),\n      upfrontNote,\n      badgePercent,\n    };\n  };\n\n  const handleSelectPlan = () => {\n    if (priceUnavailable || !isSubscriptionLoaded) return;\n\n    // Contratação externa do whitelabel tem prioridade sobre qualquer fluxo interno.\n    if (redirectToExternal(isFirstPurchase ? 'plans' : 'contracting')) return;\n\n    const targetPlan = allPlans.find((item) => item.planId === plan.planId);\n    const targetDomainItem = targetPlan?.items.find((item) => item.id_addon === ADDON_IDS.DOMAINS);\n    const targetIncludedDomains = targetDomainItem?.quantity ?? 0;\n    const targetSupportsExtraDomains = !!targetDomainItem && targetDomainItem.quantity > 1;\n\n    // Limite de páginas publicadas do plano alvo (0/ausente = ilimitadas).\n    const targetPagesItem = targetPlan?.items.find((item) => item.id_addon === ADDON_IDS.PAGES);\n    const targetIncludedPages =\n      targetPagesItem && targetPagesItem.quantity > 0 ? targetPagesItem.quantity : null;\n\n    const newPlanMonthly = plan.pricingByPeriod?.monthly ?? parseCurrencyToNumber(plan.price);\n    const currentPlanMonthly = currentPlan\n      ? (currentPlan.pricingByPeriod?.monthly ?? parseCurrencyToNumber(currentPlan.price))\n      : 0;\n    const isDowngrade = !isFirstPurchase && newPlanMonthly < currentPlanMonthly;\n\n    const downgradeData = {\n      targetPlan: plan,\n      planName: plan.name,\n      billingPeriod,\n      planIncludedDomains: targetIncludedDomains,\n      planIncludedPages: targetIncludedPages,\n      registeredDomains,\n    };\n\n    onBeforeAction?.();\n\n    // Downgrade coleta o motivo primeiro; conflitos de domínio/página são conferidos lá.\n    if (isDowngrade) {\n      openDowngradeReason(downgradeData);\n      return;\n    }\n\n    // O plano alvo não vende domínios extras e a conta tem mais do que o incluso: abre o\n    // roteiro de ajuste em vez de deixar a troca falhar no pagamento.\n    if (!targetSupportsExtraDomains && registeredDomains > targetIncludedDomains) {\n      openCannotDowngrade({ ...downgradeData, domainsExceeded: true, pagesExceeded: false });\n      return;\n    }\n\n\n    // Sem assinatura paga corrente a troca é uma contratação: o fluxo de reativação já cria a\n    // assinatura do zero (mesmo caminho do checkout do gapps), com o plano escolhido aqui.\n    if (isFirstPurchase) {\n      openChangePlan({ targetPlan: plan, billingPeriod, isReactivation: true, selectedCreditIndex: 0 });\n      return;\n    }\n\n    if (subscriptionId == null) return;\n\n    openChangePlan({ targetPlan: plan, billingPeriod, isDowngrade, selectedCreditIndex: 0 });\n  };\n\n  const priceData = computePriceData();\n  const isCurrentForPeriod = plan.isCurrentPlan && plan.currentPeriodicity === billingPeriod;\n  const shouldShowCurrentPlanBadge =\n    isCurrentForPeriod &&\n    !isFreeSubscription(activeSubscription) &&\n    activeSubscription?.type !== 'trial' &&\n    !activeSubscription?.date_cancellation;\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col flex-1 min-w-0 rounded-lg overflow-hidden relative',\n        plan.isPopular ? 'bg-primary' : 'border border-zinc-200'\n      )}\n    >\n      {plan.isPopular && (\n        <div className=\"flex items-center justify-center h-8 px-1.5 shrink-0 bg-primary\">\n          <span className=\"paragraph-xsmall-semibold text-zinc-950\">\n            {translateCard('mostPopular')}\n          </span>\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'flex flex-col flex-1 bg-white overflow-hidden relative',\n          plan.isPopular && 'border-2 border-primary rounded-lg'\n        )}\n      >\n        <div className=\"pt-2 px-2 bg-white shrink-0\">\n          <div className=\"flex flex-col gap-6 p-5 bg-zinc-50 rounded\">\n            <div className=\"flex items-start justify-between gap-2\">\n              <span className=\"paragraph-medium-semibold text-zinc-950 font-outfit\">{plan.name}</span>\n              {priceData.promoActive && (\n                <span className=\"shrink-0 rounded-md bg-cyan-50 px-2 py-1 paragraph-xsmall-semibold text-cyan-700\">\n                  {translateCard('promoBadge')}\n                </span>\n              )}\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <div className=\"flex items-center gap-2\">\n                <IconStack2 size={16} className=\"text-zinc-950 shrink-0\" />\n                <span className=\"paragraph-small-medium text-zinc-950\">{plan.mainFeatures.pages}</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <IconWorld size={16} className=\"text-zinc-950 shrink-0\" />\n                <span className=\"paragraph-small-medium text-zinc-950\">\n                  {plan.mainFeatures.domains}\n                </span>\n                <InfoTooltip tooltipKey=\"domains\" />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <IconUsers size={16} className=\"text-zinc-950 shrink-0\" />\n                <span className=\"paragraph-small-medium text-zinc-950\">{plan.mainFeatures.users}</span>\n                <InfoTooltip tooltipKey=\"users\" />\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex-1 p-6 bg-white\">\n          <div className=\"flex flex-col gap-3\">\n            {plan.features.map((feature, index) => (\n              <div key={index} className=\"flex items-center gap-2\">\n                {feature.icon === 'check' ? (\n                  <IconCheck size={16} className=\"text-zinc-950 shrink-0\" />\n                ) : (\n                  <IconX size={16} className=\"text-zinc-950 shrink-0\" />\n                )}\n                <span\n                  className={cn(\n                    'paragraph-small-medium text-zinc-500',\n                    feature.disabled && 'opacity-40'\n                  )}\n                >\n                  {feature.text}\n                </span>\n                {feature.tooltip && (\n                  <InfoTooltip tooltipKey={feature.tooltip} disabled={feature.disabled} />\n                )}\n              </div>\n            ))}\n            {includesAbTest && (\n              <div className=\"flex items-center gap-2\">\n                <IconCheck size={16} className=\"text-zinc-950 shrink-0\" />\n                <span className=\"paragraph-small-medium text-zinc-500\">\n                  {translateCard('abTestIncluded')}\n                </span>\n              </div>\n            )}\n            {isDefaultWhitelabel && includedAiCredits > 0 && (\n              <div className=\"flex items-center gap-2\">\n                <IconCheck size={16} className=\"text-zinc-950 shrink-0\" />\n                <span className=\"paragraph-small-medium text-zinc-500\">\n                  {translateCard('aiCreditsIncluded', {\n                    credits: includedAiCredits.toLocaleString('pt-BR'),\n                  })}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"shrink-0 relative\">\n          <div className=\"absolute -top-6 left-0 right-0 h-6 bg-linear-to-t from-white to-transparent pointer-events-none\" />\n          <div className=\"flex flex-col gap-6 p-6 border-t border-zinc-200 bg-white\">\n            <div className=\"flex flex-col gap-2\">\n              {priceData.promoActive ? (\n                <span className=\"paragraph-xsmall-medium text-zinc-500 line-through\">\n                  {translateCard('promoFrom')} {priceData.totalFormatted}\n                </span>\n              ) : (\n                priceData.badgePercent > 0 && (\n                  <span className=\"w-fit paragraph-xsmall-semibold h-5 flex items-center px-1.5 rounded bg-green-50 text-green-600 border border-green-100\">\n                    {translateCatalog('discountBadge', { percent: String(priceData.badgePercent) })}\n                  </span>\n                )\n              )}\n              <p className=\"paragraph-xlarge-semibold text-zinc-950 tracking-[-0.24px] font-outfit\">\n                {priceData.promoActive ? priceData.promoTotalFormatted : priceData.totalFormatted}\n                <span className=\"paragraph-xsmall-medium text-zinc-500\"> {priceData.periodLabel}</span>\n              </p>\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              {shouldShowCurrentPlanBadge ? (\n                <div className=\"flex items-center gap-3 h-12\">\n                  <div className=\"flex items-center justify-center size-6 bg-zinc-200 rounded-full shrink-0\">\n                    <IconCheck size={16} className=\"text-zinc-950\" />\n                  </div>\n                  <span className=\"paragraph-small-semibold text-zinc-950\">\n                    {translateCard('currentPlan')}\n                  </span>\n                </div>\n              ) : isOwnerOrAdmin ? (\n                <Button\n                  className={cn(\n                    'w-full h-12 paragraph-small-semibold',\n                    plan.buttonVariant === 'brand'\n                      ? 'bg-primary hover:bg-primary text-zinc-950'\n                      : 'bg-zinc-950 hover:bg-zinc-950 text-white'\n                  )}\n                  onClick={handleSelectPlan}\n                  disabled={priceUnavailable}\n                >\n                  {translateCard('selectPlan')}\n                </Button>\n              ) : null}\n              {priceData.upfrontNote && (\n                <span className=\"paragraph-xsmall-medium text-zinc-500 text-center text-balance\">\n                  {priceData.upfrontNote}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account/sections/subscription/plans/PlanCardSkeleton.mjs

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../../../../ui/feedback/Skeleton";
+import { cn } from "../../../../../infra/utils/clsx";
+function PlanCardSkeleton({ isPopular, isDefaultWhitelabel = true }) {
+  const accentBg = isDefaultWhitelabel ? "bg-cyan-300" : "bg-zinc-300";
+  const accentBorder = isDefaultWhitelabel ? "border-cyan-300" : "border-zinc-300";
+  const skeletonBg = isDefaultWhitelabel ? "bg-cyan-200" : "bg-zinc-200";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col flex-1 min-w-0 rounded-lg overflow-hidden relative",
+        isPopular ? accentBg : "border border-zinc-200"
+      ),
+      children: [
+        isPopular && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center h-8 px-1.5 shrink-0", accentBg), children: /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3 w-20", skeletonBg) }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col flex-1 bg-white overflow-hidden relative",
+              isPopular && `border-2 ${accentBorder} rounded-lg`
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "pt-2 px-2 bg-white shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5 bg-zinc-50 rounded", children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [1, 2, 3].map((row) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded shrink-0" }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-32" })
+                ] }, row)) })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 p-6 bg-white", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [120, 110, 140, 125, 130, 100, 145, 115].map((width, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded shrink-0" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5", style: { width } })
+              ] }, index)) }) }),
+              /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-6 border-t border-zinc-200 bg-white", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-36" })
+                ] }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full rounded-lg" })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PlanCardSkeleton
+};
+//# sourceMappingURL=PlanCardSkeleton.mjs.map

package/dist/components/account/sections/subscription/plans/PlanCardSkeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/account/sections/subscription/plans/PlanCardSkeleton.tsx"],"sourcesContent":["import { Skeleton } from '../../../../ui/feedback/Skeleton';\nimport { cn } from '../../../../../infra/utils/clsx';\n\ninterface PlanCardSkeletonProps {\n  isPopular?: boolean;\n  isDefaultWhitelabel?: boolean;\n}\n\n/** Esqueleto do card enquanto o catálogo (e o cupom da campanha) carrega. */\nexport function PlanCardSkeleton({ isPopular, isDefaultWhitelabel = true }: PlanCardSkeletonProps) {\n  const accentBg = isDefaultWhitelabel ? 'bg-cyan-300' : 'bg-zinc-300';\n  const accentBorder = isDefaultWhitelabel ? 'border-cyan-300' : 'border-zinc-300';\n  const skeletonBg = isDefaultWhitelabel ? 'bg-cyan-200' : 'bg-zinc-200';\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col flex-1 min-w-0 rounded-lg overflow-hidden relative',\n        isPopular ? accentBg : 'border border-zinc-200'\n      )}\n    >\n      {isPopular && (\n        <div className={cn('flex items-center justify-center h-8 px-1.5 shrink-0', accentBg)}>\n          <Skeleton className={cn('h-3 w-20', skeletonBg)} />\n        </div>\n      )}\n      <div\n        className={cn(\n          'flex flex-col flex-1 bg-white overflow-hidden relative',\n          isPopular && `border-2 ${accentBorder} rounded-lg`\n        )}\n      >\n        <div className=\"pt-2 px-2 bg-white shrink-0\">\n          <div className=\"flex flex-col gap-6 p-5 bg-zinc-50 rounded\">\n            <Skeleton className=\"h-4 w-24\" />\n            <div className=\"flex flex-col gap-3\">\n              {[1, 2, 3].map((row) => (\n                <div key={row} className=\"flex items-center gap-2\">\n                  <Skeleton className=\"size-4 rounded shrink-0\" />\n                  <Skeleton className=\"h-3.5 w-32\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex-1 p-6 bg-white\">\n          <div className=\"flex flex-col gap-3\">\n            {[120, 110, 140, 125, 130, 100, 145, 115].map((width, index) => (\n              <div key={index} className=\"flex items-center gap-2\">\n                <Skeleton className=\"size-4 rounded shrink-0\" />\n                <Skeleton className=\"h-3.5\" style={{ width }} />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"shrink-0\">\n          <div className=\"flex flex-col gap-6 p-6 border-t border-zinc-200 bg-white\">\n            <div className=\"flex flex-col gap-2\">\n              <Skeleton className=\"h-3 w-16\" />\n              <Skeleton className=\"h-5 w-36\" />\n            </div>\n            <Skeleton className=\"h-12 w-full rounded-lg\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAuBU,cAcM,YAdN;AAvBV,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAQZ,SAAS,iBAAiB,EAAE,WAAW,sBAAsB,KAAK,GAA0B;AACjG,QAAM,WAAW,sBAAsB,gBAAgB;AACvD,QAAM,eAAe,sBAAsB,oBAAoB;AAC/D,QAAM,aAAa,sBAAsB,gBAAgB;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,WAAW;AAAA,MACzB;AAAA,MAEC;AAAA,qBACC,oBAAC,SAAI,WAAW,GAAG,wDAAwD,QAAQ,GACjF,8BAAC,YAAS,WAAW,GAAG,YAAY,UAAU,GAAG,GACnD;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,aAAa,YAAY,YAAY;AAAA,YACvC;AAAA,YAEA;AAAA,kCAAC,SAAI,WAAU,+BACb,+BAAC,SAAI,WAAU,8CACb;AAAA,oCAAC,YAAS,WAAU,YAAW;AAAA,gBAC/B,oBAAC,SAAI,WAAU,uBACZ,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,QACd,qBAAC,SAAc,WAAU,2BACvB;AAAA,sCAAC,YAAS,WAAU,2BAA0B;AAAA,kBAC9C,oBAAC,YAAS,WAAU,cAAa;AAAA,qBAFzB,GAGV,CACD,GACH;AAAA,iBACF,GACF;AAAA,cAEA,oBAAC,SAAI,WAAU,uBACb,8BAAC,SAAI,WAAU,uBACZ,WAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG,EAAE,IAAI,CAAC,OAAO,UACpD,qBAAC,SAAgB,WAAU,2BACzB;AAAA,oCAAC,YAAS,WAAU,2BAA0B;AAAA,gBAC9C,oBAAC,YAAS,WAAU,SAAQ,OAAO,EAAE,MAAM,GAAG;AAAA,mBAFtC,KAGV,CACD,GACH,GACF;AAAA,cAEA,oBAAC,SAAI,WAAU,YACb,+BAAC,SAAI,WAAU,6DACb;AAAA,qCAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,YAAS,WAAU,YAAW;AAAA,kBAC/B,oBAAC,YAAS,WAAU,YAAW;AAAA,mBACjC;AAAA,gBACA,oBAAC,YAAS,WAAU,0BAAyB;AAAA,iBAC/C,GACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/account/sections/subscription/plans/PlansCatalogDialog.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Dialog, DialogContent, DialogTitle } from "../../../../ui/overlay/Dialog";
+import { SegmentedControl } from "../../../../ui/form/SegmentedControl";
+import { useCurrencyFormatter } from "../../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { couponAllowedBillingPeriod } from "../../../../../modules/coupons/utils/coupon-restrictions";
+import { HIDDEN_PLAN_IDS } from "../../../../../modules/plans/constants/plan-tooltips.constants";
+import { useEnrichedPlans } from "../../../../../modules/plans/hooks/use-enriched-plans.hook";
+import { STARTER_PLAN_ID } from "../../../../../modules/subscriptions/constants/addons.constants";
+import { useCurrentSubscription } from "../../../../../modules/subscriptions/hooks/use-current-subscription.hook";
+import { isFreeSubscription } from "../../../../../modules/subscriptions/utils/is-free-subscription";
+import {
+  getCatalogBadgePercents,
+  periodicityToBillingPeriod,
+  USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT
+} from "../../../../../modules/subscriptions/utils/periodicity";
+import { useIsDefaultWhitelabel } from "../../../../../providers/whitelabel.provider";
+import { useSubscriptionFlows } from "../../../../../store/useSubscriptionFlows";
+import { PlanCard } from "./PlanCard";
+import { PlanCardSkeleton } from "./PlanCardSkeleton";
+const PERIOD_DISCOUNT_BADGE_CLASS = "absolute -top-4.5 whitespace-nowrap text-[10px] font-semibold leading-none px-1.5 py-1 rounded text-green-600 bg-green-50 border border-green-100 lg:static lg:whitespace-normal lg:text-xs lg:leading-4 lg:px-1.5 lg:h-6 lg:flex lg:items-center lg:rounded-lg";
+function PlansCatalogContent({ onClose }) {
+  const translate = useTranslations("common.account.workspace.subscription.plansCatalog");
+  const { currency } = useCurrencyFormatter();
+  const isUsd = currency === "usd";
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const appliedCouponStripeData = useSubscriptionFlows((state) => state.plansCatalog?.appliedCouponStripeData) ?? null;
+  const { data: plans = [], isPending: isLoadingPlans } = useEnrichedPlans();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const activeSubscription = subscriptionData?.data?.[0] ?? null;
+  const defaultPeriod = periodicityToBillingPeriod(activeSubscription?.periodicity) ?? "monthly";
+  const requestedPeriod = couponAllowedBillingPeriod(appliedCouponStripeData?.periodicity) ?? defaultPeriod;
+  const [billingPeriod, setBillingPeriod] = useState(
+    requestedPeriod === "semiannual" ? "annual" : requestedPeriod
+  );
+  const badgePercents = getCatalogBadgePercents(plans);
+  const periodOptions = [
+    { value: "monthly", label: translate("periodMonthly") },
+    {
+      value: "annual",
+      label: /* @__PURE__ */ jsxs("span", { className: "relative lg:flex lg:items-center lg:gap-1", children: [
+        translate("periodAnnual"),
+        isUsd ? /* @__PURE__ */ jsx("span", { className: `${PERIOD_DISCOUNT_BADGE_CLASS} -right-8`, children: translate("discountCatalog", {
+          percent: String(USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT)
+        }) }) : badgePercents ? /* @__PURE__ */ jsx("span", { className: `${PERIOD_DISCOUNT_BADGE_CLASS} -right-5`, children: translate("discountBadge", { percent: String(badgePercents.annual) }) }) : null
+      ] })
+    }
+  ];
+  const isFree = !activeSubscription || isFreeSubscription(activeSubscription);
+  const visiblePlans = isFree || activeSubscription?.id_plan === STARTER_PLAN_ID ? plans : plans.filter((plan) => plan.planId !== STARTER_PLAN_ID).filter((plan) => !HIDDEN_PLAN_IDS.includes(plan.planId));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-14 px-4 py-3 bg-white relative border-b border-zinc-200 shrink-0", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: translate("title") }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "absolute right-4 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors",
+          children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-zinc-400" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 items-center pt-4 lg:pt-6 pb-4 lg:pb-6 px-4 lg:px-6 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: [
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          value: billingPeriod,
+          onChange: setBillingPeriod,
+          className: "w-85.75 lg:w-auto",
+          optionClassName: "flex-1 lg:flex-none",
+          options: periodOptions
+        }
+      ),
+      isLoadingPlans ? /* @__PURE__ */ jsx("div", { className: "flex flex-col lg:flex-row gap-4 w-full lg:items-end items-stretch lg:justify-center lg:mx-auto", children: [1, 2, 3].map((index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "shrink-0 min-w-[85%] sm:min-w-[85%] md:min-w-[calc(50%-0.5rem)] lg:flex-1 lg:shrink lg:min-w-0 lg:max-w-107.5",
+          children: /* @__PURE__ */ jsx(PlanCardSkeleton, { isPopular: index === 2, isDefaultWhitelabel })
+        },
+        index
+      )) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col lg:flex-row gap-4 w-full lg:items-end items-stretch lg:justify-center lg:mx-auto", children: visiblePlans.map((plan) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "shrink-0 min-w-[85%] sm:min-w-[85%] md:min-w-[calc(50%-0.5rem)] lg:flex-1 lg:shrink lg:min-w-0 lg:max-w-107.5",
+          children: /* @__PURE__ */ jsx(
+            PlanCard,
+            {
+              plan,
+              billingPeriod,
+              couponStripeData: appliedCouponStripeData,
+              onBeforeAction: onClose
+            }
+          )
+        },
+        plan.name
+      )) })
+    ] })
+  ] });
+}
+function PlansCatalogDialog() {
+  const plansCatalog = useSubscriptionFlows((state) => state.plansCatalog);
+  const close = useSubscriptionFlows((state) => state.closePlansCatalog);
+  return /* @__PURE__ */ jsx(Dialog, { open: !!plansCatalog, onOpenChange: (nextOpen) => !nextOpen && close(), children: /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: "flex flex-col p-0 gap-0 inset-0 w-dvw h-dvh max-w-none sm:max-w-none translate-x-0 translate-y-0 border-0 rounded-none shadow-none",
+      children: !!plansCatalog && /* @__PURE__ */ jsx(PlansCatalogContent, { onClose: close })
+    }
+  ) });
+}
+export {
+  PlansCatalogDialog
+};
+//# sourceMappingURL=PlansCatalogDialog.mjs.map

package/dist/components/account/sections/subscription/plans/PlansCatalogDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/account/sections/subscription/plans/PlansCatalogDialog.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport { IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Dialog, DialogContent, DialogTitle } from '../../../../ui/overlay/Dialog';\nimport { SegmentedControl } from '../../../../ui/form/SegmentedControl';\nimport { useCurrencyFormatter } from '../../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { couponAllowedBillingPeriod } from '../../../../../modules/coupons/utils/coupon-restrictions';\nimport { HIDDEN_PLAN_IDS } from '../../../../../modules/plans/constants/plan-tooltips.constants';\nimport { useEnrichedPlans } from '../../../../../modules/plans/hooks/use-enriched-plans.hook';\nimport { STARTER_PLAN_ID } from '../../../../../modules/subscriptions/constants/addons.constants';\nimport { useCurrentSubscription } from '../../../../../modules/subscriptions/hooks/use-current-subscription.hook';\nimport type { BillingPeriod } from '../../../../../modules/subscriptions/types/billing-period.type';\nimport { isFreeSubscription } from '../../../../../modules/subscriptions/utils/is-free-subscription';\nimport {\n  getCatalogBadgePercents,\n  periodicityToBillingPeriod,\n  USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT,\n} from '../../../../../modules/subscriptions/utils/periodicity';\nimport { useIsDefaultWhitelabel } from '../../../../../providers/whitelabel.provider';\nimport { useSubscriptionFlows } from '../../../../../store/useSubscriptionFlows';\nimport { PlanCard } from './PlanCard';\nimport { PlanCardSkeleton } from './PlanCardSkeleton';\n\nconst PERIOD_DISCOUNT_BADGE_CLASS =\n  'absolute -top-4.5 whitespace-nowrap text-[10px] font-semibold leading-none px-1.5 py-1 rounded text-green-600 bg-green-50 border border-green-100 lg:static lg:whitespace-normal lg:text-xs lg:leading-4 lg:px-1.5 lg:h-6 lg:flex lg:items-center lg:rounded-lg';\n\nfunction PlansCatalogContent({ onClose }: { onClose: () => void }) {\n  const translate = useTranslations('common.account.workspace.subscription.plansCatalog');\n  const { currency } = useCurrencyFormatter();\n  const isUsd = currency === 'usd';\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n\n  const appliedCouponStripeData =\n    useSubscriptionFlows((state) => state.plansCatalog?.appliedCouponStripeData) ?? null;\n\n  const { data: plans = [], isPending: isLoadingPlans } = useEnrichedPlans();\n  const { data: subscriptionData } = useCurrentSubscription();\n  const activeSubscription = subscriptionData?.data?.[0] ?? null;\n\n  const defaultPeriod = periodicityToBillingPeriod(activeSubscription?.periodicity) ?? 'monthly';\n  const requestedPeriod =\n    couponAllowedBillingPeriod(appliedCouponStripeData?.periodicity) ?? defaultPeriod;\n  // Semestral não tem coluna própria na vitrine: cai no anual, que é o período com desconto.\n  const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>(\n    requestedPeriod === 'semiannual' ? 'annual' : requestedPeriod\n  );\n\n  const badgePercents = getCatalogBadgePercents(plans);\n\n  const periodOptions: Array<{ value: BillingPeriod; label: ReactNode }> = [\n    { value: 'monthly', label: translate('periodMonthly') },\n    {\n      value: 'annual',\n      label: (\n        <span className=\"relative lg:flex lg:items-center lg:gap-1\">\n          {translate('periodAnnual')}\n          {isUsd ? (\n            <span className={`${PERIOD_DISCOUNT_BADGE_CLASS} -right-8`}>\n              {translate('discountCatalog', {\n                percent: String(USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT),\n              })}\n            </span>\n          ) : badgePercents ? (\n            <span className={`${PERIOD_DISCOUNT_BADGE_CLASS} -right-5`}>\n              {translate('discountBadge', { percent: String(badgePercents.annual) })}\n            </span>\n          ) : null}\n        </span>\n      ),\n    },\n  ];\n\n  // Iniciante só aparece para quem ainda não assina (ou já está nele): é plano de entrada.\n  const isFree = !activeSubscription || isFreeSubscription(activeSubscription);\n  const visiblePlans =\n    isFree || activeSubscription?.id_plan === STARTER_PLAN_ID\n      ? plans\n      : plans\n          .filter((plan) => plan.planId !== STARTER_PLAN_ID)\n          .filter((plan) => !HIDDEN_PLAN_IDS.includes(plan.planId));\n\n  return (\n    <>\n      <div className=\"flex items-center justify-center h-14 px-4 py-3 bg-white relative border-b border-zinc-200 shrink-0\">\n        <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n          {translate('title')}\n        </DialogTitle>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"absolute right-4 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors\"\n        >\n          <IconX size={18} className=\"text-zinc-400\" />\n        </button>\n      </div>\n\n      <div className=\"flex flex-col gap-5 items-center pt-4 lg:pt-6 pb-4 lg:pb-6 px-4 lg:px-6 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300\">\n        <SegmentedControl<BillingPeriod>\n          value={billingPeriod}\n          onChange={setBillingPeriod}\n          className=\"w-85.75 lg:w-auto\"\n          optionClassName=\"flex-1 lg:flex-none\"\n          options={periodOptions}\n        />\n\n        {isLoadingPlans ? (\n          <div className=\"flex flex-col lg:flex-row gap-4 w-full lg:items-end items-stretch lg:justify-center lg:mx-auto\">\n            {[1, 2, 3].map((index) => (\n              <div\n                key={index}\n                className=\"shrink-0 min-w-[85%] sm:min-w-[85%] md:min-w-[calc(50%-0.5rem)] lg:flex-1 lg:shrink lg:min-w-0 lg:max-w-107.5\"\n              >\n                <PlanCardSkeleton isPopular={index === 2} isDefaultWhitelabel={isDefaultWhitelabel} />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className=\"flex flex-col lg:flex-row gap-4 w-full lg:items-end items-stretch lg:justify-center lg:mx-auto\">\n            {visiblePlans.map((plan) => (\n              <div\n                key={plan.name}\n                className=\"shrink-0 min-w-[85%] sm:min-w-[85%] md:min-w-[calc(50%-0.5rem)] lg:flex-1 lg:shrink lg:min-w-0 lg:max-w-107.5\"\n              >\n                <PlanCard\n                  plan={plan}\n                  billingPeriod={billingPeriod}\n                  couponStripeData={appliedCouponStripeData}\n                  onBeforeAction={onClose}\n                />\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </>\n  );\n}\n\n/** Vitrine de planos em tela cheia, por cima do modal Minha conta. */\nexport function PlansCatalogDialog() {\n  const plansCatalog = useSubscriptionFlows((state) => state.plansCatalog);\n  const close = useSubscriptionFlows((state) => state.closePlansCatalog);\n\n  return (\n    <Dialog open={!!plansCatalog} onOpenChange={(nextOpen) => !nextOpen && close()}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0 gap-0 inset-0 w-dvw h-dvh max-w-none sm:max-w-none translate-x-0 translate-y-0 border-0 rounded-none shadow-none\"\n      >\n        {!!plansCatalog && <PlansCatalogContent onClose={close} />}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}