@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/subscription/plans/PlanCard.tsx

@@ -0,0 +1,417 @@
+'use client';
+
+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 type { CouponStripeData } from '../../../../../modules/coupons/types/coupon.type';
+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 type { PlanTooltips, UiPlan } from '../../../../../modules/plans/types/plan.type';
+import {
+  ADDON_IDS,
+  buildAiCreditOptions,
+  AI_CREDIT_SIZES,
+} from '../../../../../modules/subscriptions/constants/addons.constants';
+import { useCurrentSubscription } from '../../../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import type { BillingPeriod } from '../../../../../modules/subscriptions/types/billing-period.type';
+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 }: { tooltipKey: keyof PlanTooltips; disabled?: boolean }) {
+  const translate = useTranslations();
+  const planTooltips = getPlanTooltips(translate);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button type="button" className="flex items-center justify-center size-6 shrink-0">
+          <IconInfoCircle
+            size={16}
+            className={disabled ? 'text-zinc-500 opacity-40' : 'text-zinc-950'}
+          />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right" className="max-w-53.75 p-3">
+        {planTooltips[tooltipKey]}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+interface PlanCardProps {
+  plan: UiPlan;
+  billingPeriod: BillingPeriod;
+  couponStripeData?: CouponStripeData | null;
+  onBeforeAction?: () => void;
+}
+
+/** Card do catálogo: recursos do plano, preço no período escolhido e a ação de contratar/trocar. */
+export function PlanCard({ plan, billingPeriod, couponStripeData, onBeforeAction }: PlanCardProps) {
+  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];
+  // Créditos de IA inclusos no plano = item AI (id_addon 6) com value 0 (base/incluso).
+  // Lido do live plan.items; a quantidade varia por plano (não hardcodar).
+  const includedAiCredits =
+    plan.items.find((item) => item.id_addon === ADDON_IDS.AI && (item.value ?? 0) === 0)?.quantity ?? 0;
+  // Plano inclui Teste A/B quando há item AB_TEST (id_addon 4) — espelha a lógica do
+  // PlanDetailsSheet (item da assinatura com quantity > 0). Agência exibe como incluso.
+  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;
+
+  // Cupom da campanha: badge + preço promocional só no(s) plano(s) e periodicidade que ele
+  // cobre, e só na primeira contratação (regra da oferta). O desconto é calculado a partir
+  // do stripe_data do cupom (mesma fonte usada pela troca de plano via getCouponByCode).
+  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; // centavos (Stripe)
+
+  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;
+
+    // O desconto de periodicidade varia por plano e por moeda, então sai da razão entre o
+    // mensal do período e o mensal avulso, ambos já resolvidos pela API.
+    const periodDiscountFactor = (period: 'semiannual' | 'annual') => {
+      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;
+
+    // O card anuncia o equivalente mensal e repete embaixo o valor à vista; o cálculo acima
+    // continua no total do período porque cupom de valor fixo desconta sobre ele.
+    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;
+
+    // Contratação externa do whitelabel tem prioridade sobre qualquer fluxo interno.
+    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;
+
+    // Limite de páginas publicadas do plano alvo (0/ausente = ilimitadas).
+    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?.();
+
+    // Downgrade coleta o motivo primeiro; conflitos de domínio/página são conferidos lá.
+    if (isDowngrade) {
+      openDowngradeReason(downgradeData);
+      return;
+    }
+
+    // O plano alvo não vende domínios extras e a conta tem mais do que o incluso: abre o
+    // roteiro de ajuste em vez de deixar a troca falhar no pagamento.
+    if (!targetSupportsExtraDomains && registeredDomains > targetIncludedDomains) {
+      openCannotDowngrade({ ...downgradeData, domainsExceeded: true, pagesExceeded: false });
+      return;
+    }
+
+
+    // Sem assinatura paga corrente a troca é uma contratação: o fluxo de reativação já cria a
+    // assinatura do zero (mesmo caminho do checkout do gapps), com o plano escolhido aqui.
+    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 (
+    <div
+      className={cn(
+        'flex flex-col flex-1 min-w-0 rounded-lg overflow-hidden relative',
+        plan.isPopular ? 'bg-primary' : 'border border-zinc-200'
+      )}
+    >
+      {plan.isPopular && (
+        <div className="flex items-center justify-center h-8 px-1.5 shrink-0 bg-primary">
+          <span className="paragraph-xsmall-semibold text-zinc-950">
+            {translateCard('mostPopular')}
+          </span>
+        </div>
+      )}
+
+      <div
+        className={cn(
+          'flex flex-col flex-1 bg-white overflow-hidden relative',
+          plan.isPopular && 'border-2 border-primary rounded-lg'
+        )}
+      >
+        <div className="pt-2 px-2 bg-white shrink-0">
+          <div className="flex flex-col gap-6 p-5 bg-zinc-50 rounded">
+            <div className="flex items-start justify-between gap-2">
+              <span className="paragraph-medium-semibold text-zinc-950 font-outfit">{plan.name}</span>
+              {priceData.promoActive && (
+                <span className="shrink-0 rounded-md bg-cyan-50 px-2 py-1 paragraph-xsmall-semibold text-cyan-700">
+                  {translateCard('promoBadge')}
+                </span>
+              )}
+            </div>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <IconStack2 size={16} className="text-zinc-950 shrink-0" />
+                <span className="paragraph-small-medium text-zinc-950">{plan.mainFeatures.pages}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <IconWorld size={16} className="text-zinc-950 shrink-0" />
+                <span className="paragraph-small-medium text-zinc-950">
+                  {plan.mainFeatures.domains}
+                </span>
+                <InfoTooltip tooltipKey="domains" />
+              </div>
+              <div className="flex items-center gap-2">
+                <IconUsers size={16} className="text-zinc-950 shrink-0" />
+                <span className="paragraph-small-medium text-zinc-950">{plan.mainFeatures.users}</span>
+                <InfoTooltip tooltipKey="users" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 p-6 bg-white">
+          <div className="flex flex-col gap-3">
+            {plan.features.map((feature, index) => (
+              <div key={index} className="flex items-center gap-2">
+                {feature.icon === 'check' ? (
+                  <IconCheck size={16} className="text-zinc-950 shrink-0" />
+                ) : (
+                  <IconX size={16} className="text-zinc-950 shrink-0" />
+                )}
+                <span
+                  className={cn(
+                    'paragraph-small-medium text-zinc-500',
+                    feature.disabled && 'opacity-40'
+                  )}
+                >
+                  {feature.text}
+                </span>
+                {feature.tooltip && (
+                  <InfoTooltip tooltipKey={feature.tooltip} disabled={feature.disabled} />
+                )}
+              </div>
+            ))}
+            {includesAbTest && (
+              <div className="flex items-center gap-2">
+                <IconCheck size={16} className="text-zinc-950 shrink-0" />
+                <span className="paragraph-small-medium text-zinc-500">
+                  {translateCard('abTestIncluded')}
+                </span>
+              </div>
+            )}
+            {isDefaultWhitelabel && includedAiCredits > 0 && (
+              <div className="flex items-center gap-2">
+                <IconCheck size={16} className="text-zinc-950 shrink-0" />
+                <span className="paragraph-small-medium text-zinc-500">
+                  {translateCard('aiCreditsIncluded', {
+                    credits: includedAiCredits.toLocaleString('pt-BR'),
+                  })}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="shrink-0 relative">
+          <div className="absolute -top-6 left-0 right-0 h-6 bg-linear-to-t from-white to-transparent pointer-events-none" />
+          <div className="flex flex-col gap-6 p-6 border-t border-zinc-200 bg-white">
+            <div className="flex flex-col gap-2">
+              {priceData.promoActive ? (
+                <span className="paragraph-xsmall-medium text-zinc-500 line-through">
+                  {translateCard('promoFrom')} {priceData.totalFormatted}
+                </span>
+              ) : (
+                priceData.badgePercent > 0 && (
+                  <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">
+                    {translateCatalog('discountBadge', { percent: String(priceData.badgePercent) })}
+                  </span>
+                )
+              )}
+              <p className="paragraph-xlarge-semibold text-zinc-950 tracking-[-0.24px] font-outfit">
+                {priceData.promoActive ? priceData.promoTotalFormatted : priceData.totalFormatted}
+                <span className="paragraph-xsmall-medium text-zinc-500"> {priceData.periodLabel}</span>
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              {shouldShowCurrentPlanBadge ? (
+                <div className="flex items-center gap-3 h-12">
+                  <div className="flex items-center justify-center size-6 bg-zinc-200 rounded-full shrink-0">
+                    <IconCheck size={16} className="text-zinc-950" />
+                  </div>
+                  <span className="paragraph-small-semibold text-zinc-950">
+                    {translateCard('currentPlan')}
+                  </span>
+                </div>
+              ) : isOwnerOrAdmin ? (
+                <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}
+                >
+                  {translateCard('selectPlan')}
+                </Button>
+              ) : null}
+              {priceData.upfrontNote && (
+                <span className="paragraph-xsmall-medium text-zinc-500 text-center text-balance">
+                  {priceData.upfrontNote}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/account/sections/subscription/plans/PlanCardSkeleton.tsx

@@ -0,0 +1,70 @@
+import { Skeleton } from '../../../../ui/feedback/Skeleton';
+import { cn } from '../../../../../infra/utils/clsx';
+
+interface PlanCardSkeletonProps {
+  isPopular?: boolean;
+  isDefaultWhitelabel?: boolean;
+}
+
+/** Esqueleto do card enquanto o catálogo (e o cupom da campanha) carrega. */
+export function PlanCardSkeleton({ isPopular, isDefaultWhitelabel = true }: PlanCardSkeletonProps) {
+  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 (
+    <div
+      className={cn(
+        'flex flex-col flex-1 min-w-0 rounded-lg overflow-hidden relative',
+        isPopular ? accentBg : 'border border-zinc-200'
+      )}
+    >
+      {isPopular && (
+        <div className={cn('flex items-center justify-center h-8 px-1.5 shrink-0', accentBg)}>
+          <Skeleton className={cn('h-3 w-20', skeletonBg)} />
+        </div>
+      )}
+      <div
+        className={cn(
+          'flex flex-col flex-1 bg-white overflow-hidden relative',
+          isPopular && `border-2 ${accentBorder} rounded-lg`
+        )}
+      >
+        <div className="pt-2 px-2 bg-white shrink-0">
+          <div className="flex flex-col gap-6 p-5 bg-zinc-50 rounded">
+            <Skeleton className="h-4 w-24" />
+            <div className="flex flex-col gap-3">
+              {[1, 2, 3].map((row) => (
+                <div key={row} className="flex items-center gap-2">
+                  <Skeleton className="size-4 rounded shrink-0" />
+                  <Skeleton className="h-3.5 w-32" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 p-6 bg-white">
+          <div className="flex flex-col gap-3">
+            {[120, 110, 140, 125, 130, 100, 145, 115].map((width, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Skeleton className="size-4 rounded shrink-0" />
+                <Skeleton className="h-3.5" style={{ width }} />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="shrink-0">
+          <div className="flex flex-col gap-6 p-6 border-t border-zinc-200 bg-white">
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-3 w-16" />
+              <Skeleton className="h-5 w-36" />
+            </div>
+            <Skeleton className="h-12 w-full rounded-lg" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/account/sections/subscription/plans/PlansCatalogDialog.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState, type ReactNode } 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 type { BillingPeriod } from '../../../../../modules/subscriptions/types/billing-period.type';
+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 }: { onClose: () => void }) {
+  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;
+  // Semestral não tem coluna própria na vitrine: cai no anual, que é o período com desconto.
+  const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>(
+    requestedPeriod === 'semiannual' ? 'annual' : requestedPeriod
+  );
+
+  const badgePercents = getCatalogBadgePercents(plans);
+
+  const periodOptions: Array<{ value: BillingPeriod; label: ReactNode }> = [
+    { value: 'monthly', label: translate('periodMonthly') },
+    {
+      value: 'annual',
+      label: (
+        <span className="relative lg:flex lg:items-center lg:gap-1">
+          {translate('periodAnnual')}
+          {isUsd ? (
+            <span className={`${PERIOD_DISCOUNT_BADGE_CLASS} -right-8`}>
+              {translate('discountCatalog', {
+                percent: String(USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT),
+              })}
+            </span>
+          ) : badgePercents ? (
+            <span className={`${PERIOD_DISCOUNT_BADGE_CLASS} -right-5`}>
+              {translate('discountBadge', { percent: String(badgePercents.annual) })}
+            </span>
+          ) : null}
+        </span>
+      ),
+    },
+  ];
+
+  // Iniciante só aparece para quem ainda não assina (ou já está nele): é plano de entrada.
+  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 (
+    <>
+      <div className="flex items-center justify-center h-14 px-4 py-3 bg-white relative border-b border-zinc-200 shrink-0">
+        <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
+          {translate('title')}
+        </DialogTitle>
+        <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"
+        >
+          <IconX size={18} className="text-zinc-400" />
+        </button>
+      </div>
+
+      <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">
+        <SegmentedControl<BillingPeriod>
+          value={billingPeriod}
+          onChange={setBillingPeriod}
+          className="w-85.75 lg:w-auto"
+          optionClassName="flex-1 lg:flex-none"
+          options={periodOptions}
+        />
+
+        {isLoadingPlans ? (
+          <div className="flex flex-col lg:flex-row gap-4 w-full lg:items-end items-stretch lg:justify-center lg:mx-auto">
+            {[1, 2, 3].map((index) => (
+              <div
+                key={index}
+                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"
+              >
+                <PlanCardSkeleton isPopular={index === 2} isDefaultWhitelabel={isDefaultWhitelabel} />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-col lg:flex-row gap-4 w-full lg:items-end items-stretch lg:justify-center lg:mx-auto">
+            {visiblePlans.map((plan) => (
+              <div
+                key={plan.name}
+                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"
+              >
+                <PlanCard
+                  plan={plan}
+                  billingPeriod={billingPeriod}
+                  couponStripeData={appliedCouponStripeData}
+                  onBeforeAction={onClose}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+/** Vitrine de planos em tela cheia, por cima do modal Minha conta. */
+export function PlansCatalogDialog() {
+  const plansCatalog = useSubscriptionFlows((state) => state.plansCatalog);
+  const close = useSubscriptionFlows((state) => state.closePlansCatalog);
+
+  return (
+    <Dialog open={!!plansCatalog} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <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"
+      >
+        {!!plansCatalog && <PlansCatalogContent onClose={close} />}
+      </DialogContent>
+    </Dialog>
+  );
+}