@greatapps/common 1.1.790 → 1.1.791

package/src/components/account/sections/subscription/change-plan/components/SummaryBlock.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { useState } from 'react';
+import { IconChevronDown } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Separator } from '../../../../../ui/data-display/Separator';
+import { Skeleton } from '../../../../../ui/feedback/Skeleton';
+import { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { ADDON_IDS, getAddonLabels } from '../../../../../../modules/subscriptions/constants/addons.constants';
+import { roundDiscountPercent } from '../../../../../../modules/subscriptions/utils/periodicity';
+import { cn } from '../../../../../../infra/utils/clsx';
+import { useChangePlan } from '../useChangePlanState';
+
+function ImmediateChargeBlock({
+  immediateCharge,
+  isCalculating,
+}: {
+  immediateCharge: { total: number; items: { description: string; value: number }[] };
+  isCalculating: boolean;
+}) {
+  const translate = useTranslations('common.account.workspace.subscription.changePlan');
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <>
+      <Separator className="bg-zinc-200" />
+      <button
+        type="button"
+        onClick={() => setExpanded((value) => !value)}
+        className="flex items-center justify-between cursor-pointer"
+      >
+        <span className="paragraph-small-medium text-zinc-950 flex items-center gap-1">
+          {translate('summary.immediateCharge')}
+          <IconChevronDown
+            size={16}
+            className={cn('text-zinc-500 transition-transform duration-200', expanded && 'rotate-180')}
+          />
+        </span>
+        {isCalculating ? (
+          <Skeleton className="h-7 w-24 rounded" />
+        ) : (
+          <span className="paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950">
+            {formatCurrencyNumber(immediateCharge.total)}
+          </span>
+        )}
+      </button>
+
+      {expanded && (
+        <div className="flex flex-col gap-3">
+          {immediateCharge.items.map((item, index) => (
+            <div key={`${item.description}-${index}`} className="flex items-center justify-between">
+              <span className="paragraph-xsmall-medium text-zinc-400">{item.description}</span>
+              <span className="paragraph-xsmall-semibold text-zinc-400">
+                {item.value < 0 ? '-' : ''}
+                {formatCurrencyNumber(Math.abs(item.value))}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+/** Extrato do que vai ser cobrado: plano, adicionais, descontos e cobrança imediata. */
+export function SummaryBlock() {
+  const translate = useTranslations();
+  const translateSummary = useTranslations('common.account.workspace.subscription.changePlan');
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+
+  const {
+    planName,
+    newPlanPrice,
+    billingLabel,
+    billingLabelFull,
+    periodMonths,
+    isCalculating,
+    totalPrice,
+    discountAmount,
+    couponDiscountAmount,
+    appliedCouponCode,
+    immediateCharge,
+    calculatedPlanExtras,
+  } = useChangePlan();
+
+  // Percentual do desconto de periodicidade derivado do próprio valor exibido ao lado — o badge
+  // da vitrine compara com a âncora e daria um número que não fecha com esta linha.
+  const periodDiscountPercent = roundDiscountPercent(
+    (discountAmount / ((totalPrice ?? 0) + discountAmount + couponDiscountAmount)) * 100
+  );
+
+  const addons = getAddonLabels(translate);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <span className="paragraph-medium-semibold text-zinc-950">{translateSummary('summary.title')}</span>
+
+      <div className="flex flex-col gap-4 p-4 border border-zinc-200 rounded-lg">
+        <div className="flex items-center justify-between">
+          <span className="paragraph-small-medium text-zinc-500">
+            {translateSummary('summary.planRow', { planName: planName ?? '' })}
+          </span>
+          <span className="paragraph-small-semibold text-zinc-500">
+            {newPlanPrice !== null ? formatCurrencyNumber(newPlanPrice) : '--'}
+          </span>
+        </div>
+
+        {calculatedPlanExtras
+          .filter((extra) => extra.quantity > 0 && extra.value > 0)
+          .map((extra, index) => {
+            const addonName = addons[extra.id_addon]?.name ?? `Addon ${extra.id_addon}`;
+            const domainLabel =
+              extra.quantity === 1
+                ? translateSummary('alternativeBuckets.domainSingular')
+                : translateSummary('alternativeBuckets.domainPlural');
+
+            const label =
+              extra.id_addon === ADDON_IDS.DOMAINS
+                ? `${extra.quantity} ${domainLabel}${
+                    extra.value_original
+                      ? ` ${translateSummary('summary.domainAddonSuffix', {
+                          price: formatCurrencyNumber(extra.value_original * periodMonths),
+                        })}`
+                      : ''
+                  }`
+                : extra.id_addon === ADDON_IDS.AI
+                  ? translateSummary('summary.aiAddon', {
+                      credits: extra.quantity.toLocaleString('pt-BR'),
+                    })
+                  : addonName;
+
+            return (
+              <div
+                key={`${extra.id_addon}_${extra.value_original}_${index}`}
+                className="flex items-center justify-between"
+              >
+                <span className="paragraph-small-medium text-zinc-500">{label}</span>
+                <span className="paragraph-small-semibold text-zinc-500">
+                  {formatCurrencyNumber(extra.value * periodMonths)}
+                </span>
+              </div>
+            );
+          })}
+
+        {discountAmount > 0 && (
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-medium text-green-600">
+              {translateSummary('summary.periodDiscount', {
+                pct: `${periodDiscountPercent}%`,
+                period: billingLabelFull,
+              })}
+            </span>
+            <span className="paragraph-small-semibold text-green-600">
+              -{formatCurrencyNumber(discountAmount)}
+            </span>
+          </div>
+        )}
+
+        {couponDiscountAmount > 0 && appliedCouponCode && (
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-medium text-green-600">
+              {translateSummary('summary.couponDiscount', { code: appliedCouponCode })}
+            </span>
+            <span className="paragraph-small-semibold text-green-600">
+              -{formatCurrencyNumber(couponDiscountAmount)}
+            </span>
+          </div>
+        )}
+
+        {immediateCharge && immediateCharge.total > 0 && (
+          <ImmediateChargeBlock immediateCharge={immediateCharge} isCalculating={isCalculating} />
+        )}
+
+        <Separator className="bg-zinc-200" />
+
+        <div className="flex items-center justify-between">
+          <span className="paragraph-small-medium text-zinc-500">
+            {translateSummary('summary.billingRow', { period: billingLabel })}
+          </span>
+          {isCalculating ? (
+            <Skeleton className="h-7 w-24 rounded" />
+          ) : totalPrice !== null ? (
+            <span className="paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950">
+              {formatCurrencyNumber(totalPrice)}
+            </span>
+          ) : (
+            <span className="paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-400">--</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/account/sections/subscription/change-plan/plan-comparison.ts

@@ -0,0 +1,52 @@
+import { mapApiPlanToUiPlan } from '../../../../../modules/plans/utils/map-api-plan-to-ui';
+import type { Plan, UiPlan } from '../../../../../modules/plans/types/plan.type';
+
+// `key: any`: os apps tipam `useTranslations()` contra o catálogo deles, e uma chave literal
+// mais estreita não é atribuível a `string` (contravariância) — mesmo padrão dos demais helpers.
+type TranslateFn = (key: any, values?: Record<string, string | number>) => string;
+
+/** O que o cliente perde ao descer de plano (Essencial = 1, Negócio = 2, Agência = 3). */
+export function getLostFeatures(translate: TranslateFn): Record<number, Record<number, string[]>> {
+  const domains15 = translate('common.account.workspace.subscription.changePlan.lostFeatures.domains15');
+  const projectManagement = translate(
+    'common.account.workspace.subscription.changePlan.lostFeatures.projectManagement'
+  );
+  const onboardingMeeting = translate(
+    'common.account.workspace.subscription.changePlan.lostFeatures.onboardingMeeting'
+  );
+
+  return {
+    3: {
+      2: [domains15, projectManagement, onboardingMeeting],
+      1: [domains15, projectManagement, onboardingMeeting],
+    },
+    2: {
+      1: [
+        translate('common.account.workspace.subscription.changePlan.lostFeatures.domains3'),
+        translate('common.account.workspace.subscription.changePlan.lostFeatures.unlimitedPages'),
+      ],
+    },
+  };
+}
+
+function toUiPlan(plan: Plan | UiPlan, translate?: TranslateFn): UiPlan {
+  return 'planId' in plan ? plan : mapApiPlanToUiPlan(plan, translate);
+}
+
+/** O que o plano novo acrescenta em relação ao atual. */
+export function getNewFeatures(
+  currentPlan: Plan | UiPlan,
+  newPlan: Plan | UiPlan,
+  translate?: TranslateFn
+) {
+  const currentUiPlan = toUiPlan(currentPlan, translate);
+  const newUiPlan = toUiPlan(newPlan, translate);
+
+  const currentTexts = new Set(
+    currentUiPlan.features.filter((feature) => feature.icon === 'check').map((feature) => feature.text)
+  );
+
+  return newUiPlan.features
+    .filter((feature) => feature.icon === 'check' && !currentTexts.has(feature.text))
+    .map((feature) => ({ text: feature.text, tooltip: feature.tooltip }));
+}

package/src/components/account/sections/subscription/change-plan/steps/PaymentSummaryStep.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { IconInfoCircle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../../../ui/buttons/Button';
+import { PaymentInfoCard } from '../../../../../ui/data-display/PaymentInfoCard';
+import { PaymentMethodToggle } from '../../../../../ui/form/PaymentMethodToggle';
+import { SheetFooter } from '../../../../../ui/overlay/Sheet';
+import { useIsDefaultWhitelabel } from '../../../../../../providers/whitelabel.provider';
+import { cn } from '../../../../../../infra/utils/clsx';
+import { CouponBlock } from '../components/CouponBlock';
+import { SummaryBlock } from '../components/SummaryBlock';
+import { useChangePlan } from '../useChangePlanState';
+
+/** Passo final: forma de pagamento, cupom e extrato antes de confirmar a alteração. */
+export function PaymentSummaryStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    'common.account.workspace.subscription.changePlan.paymentSummary'
+  );
+  const translateMethods = useTranslations(
+    'common.account.workspace.subscription.changePlan.paymentMethodLabels'
+  );
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+
+  const {
+    isDowngrade,
+    form,
+    paymentMethod,
+    selectedCardId,
+    billingPeriod,
+    isSubmitting,
+    isCalculating,
+    immediateCharge,
+    handleBack,
+    disabledPaymentMethods,
+    allowedPaymentMethod,
+    couponUnlocksAllMethods,
+    allowBoletoFromCurrentSubscription,
+    allowPixFromCurrentSubscription,
+    boletoAvailable,
+    pixAvailable,
+    hasChangedPaymentMethod,
+    hasChanges,
+    hasPendingAuth,
+  } = useChangePlan();
+
+  const hasImmediateCharge = immediateCharge && immediateCharge.total > 0;
+  const paymentMethodLabel =
+    paymentMethod === 'card'
+      ? translateMethods('card')
+      : paymentMethod === 'boleto'
+        ? translateMethods('boleto')
+        : translateMethods('pix');
+
+  // Cupom tem precedência sobre "boleto/pix só no anual"; sub que já usa o método também mantém.
+  const disableCard = disabledPaymentMethods.includes('card');
+  const disableBoleto =
+    disabledPaymentMethods.includes('boleto') ||
+    (billingPeriod !== 'annual' &&
+      allowedPaymentMethod !== 'boleto' &&
+      !couponUnlocksAllMethods &&
+      !allowBoletoFromCurrentSubscription);
+  const disablePix =
+    disabledPaymentMethods.includes('pix') ||
+    (billingPeriod !== 'annual' &&
+      allowedPaymentMethod !== 'pix' &&
+      !couponUnlocksAllMethods &&
+      !allowPixFromCurrentSubscription);
+
+  const infoBoxClasses = cn(
+    'flex items-center gap-3 p-4 rounded-lg',
+    isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'
+  );
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 lg:gap-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 px-4 lg:px-5 py-4 lg:py-6">
+        <div className="flex flex-col gap-4">
+          <span className="paragraph-medium-semibold text-zinc-950">{translateStep('paymentTitle')}</span>
+
+          <PaymentMethodToggle
+            value={paymentMethod}
+            onChange={(value) => form.setValue('paymentMethod', value)}
+            disableBoleto={disableBoleto || hasPendingAuth}
+            disableCard={disableCard || hasPendingAuth}
+            disablePix={disablePix || hasPendingAuth}
+            hideBoleto={!boletoAvailable}
+            hidePix={!pixAvailable}
+          />
+
+          {paymentMethod === 'card' ? (
+            <PaymentInfoCard
+              selectedCardId={selectedCardId}
+              onCardSelect={hasPendingAuth ? () => {} : (id) => form.setValue('selectedCardId', id)}
+            />
+          ) : (
+            <div className={infoBoxClasses}>
+              <IconInfoCircle size={16} className="text-zinc-950 shrink-0" />
+              <p className="paragraph-small-regular text-zinc-950">
+                {paymentMethod === 'boleto'
+                  ? translateStep.rich('boletoInfo', {
+                      b: (chunks) => <span className="paragraph-small-semibold">{chunks}</span>,
+                    })
+                  : translateStep.rich('pixInfo', {
+                      b: (chunks) => <span className="paragraph-small-semibold">{chunks}</span>,
+                    })}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <CouponBlock />
+        <SummaryBlock />
+
+        <div className={infoBoxClasses}>
+          <IconInfoCircle size={16} className="text-zinc-950 shrink-0" />
+          <span className="paragraph-small-regular text-zinc-950">
+            {hasImmediateCharge
+              ? translateStep('immediateChargeNote')
+              : isDowngrade
+                ? translateStep('downgradeNote')
+                : translateStep('defaultNote')}
+          </span>
+        </div>
+
+        {hasChangedPaymentMethod && (
+          <div className="flex items-start gap-3 p-4 rounded-lg bg-yellow-50 border border-yellow-100">
+            <IconInfoCircle size={16} className="text-yellow-600 shrink-0 mt-0.5" />
+            <p className="paragraph-small-regular text-zinc-950">
+              {translateStep.rich('paymentMethodChangeNote', {
+                method: paymentMethodLabel,
+                b: (chunks) => <span className="paragraph-small-semibold">{chunks}</span>,
+              })}
+            </p>
+          </div>
+        )}
+      </div>
+
+      <SheetFooter className="flex-row items-center justify-between p-4 sm:p-5 border-t border-zinc-200">
+        <Button
+          type="button"
+          variant="secondary"
+          className="h-10!"
+          onClick={handleBack}
+          disabled={hasPendingAuth}
+        >
+          {translate('common.actions.back')}
+        </Button>
+        <Button
+          type="submit"
+          className="h-10!"
+          loading={isSubmitting}
+          disabled={isCalculating || (paymentMethod === 'card' && !selectedCardId) || !hasChanges}
+        >
+          {hasPendingAuth ? translateStep('retryAuthButton') : translateStep('submitButton')}
+        </Button>
+      </SheetFooter>
+    </>
+  );
+}

package/src/components/account/sections/subscription/change-plan/steps/PlanComparisonStep.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { IconCheck, IconChevronRight, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../../../ui/buttons/Button';
+import { SheetFooter } from '../../../../../ui/overlay/Sheet';
+import { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { usePlanById } from '../../../../../../modules/plans/hooks/use-plan-by-id.hook';
+import { useCurrentSubscription } from '../../../../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import {
+  getBillingPeriodMonths,
+  getPeriodPricingKey,
+} from '../../../../../../modules/subscriptions/utils/periodicity';
+import { resolvePlanNameById } from '../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name';
+import { getLostFeatures, getNewFeatures } from '../plan-comparison';
+import { AddonsBlock } from '../components/AddonsBlock';
+import { PricePreview } from '../components/PricePreview';
+import { useChangePlan } from '../useChangePlanState';
+
+/** Comparação entre o plano atual e o escolhido, com o que entra (upgrade) ou sai (downgrade). */
+export function PlanComparisonStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    'common.account.workspace.subscription.changePlan.planComparison'
+  );
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+
+  const {
+    isDowngrade,
+    isReactivation,
+    targetPlan,
+    periodLabel,
+    currentPeriodLabel,
+    currentBillingPeriod,
+    newPlanChargedPrice,
+    newPlanListPrice,
+    handleClose,
+    handleBack,
+    handleContinue,
+  } = useChangePlan();
+
+  const { data: subscriptionData } = useCurrentSubscription();
+  const activeSubscription = subscriptionData?.data?.[0];
+  const { data: planData } = usePlanById(activeSubscription?.id_plan);
+  const plan = planData?.data;
+
+  const newFeatures =
+    !isDowngrade && !isReactivation && plan && targetPlan ? getNewFeatures(plan, targetPlan, translate) : [];
+  const currentPlanId = plan?.id ?? activeSubscription?.id_plan;
+  const lostFeatures =
+    isDowngrade && currentPlanId && targetPlan
+      ? (getLostFeatures(translate)[currentPlanId]?.[targetPlan.planId] ?? [])
+      : [];
+
+  // Mesma base do newPlanChargedPrice: as duas colunas precisam falar a mesma língua.
+  const currentPeriodMonths = getBillingPeriodMonths(currentBillingPeriod);
+  const currentPeriodPricingKey = getPeriodPricingKey(currentBillingPeriod);
+  const currentPrice = plan?.pricing
+    ? plan.pricing[currentPeriodPricingKey].charged
+    : plan?.value != null
+      ? plan.value * currentPeriodMonths
+      : null;
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 lg:gap-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 px-4 lg:px-5 py-4 lg:py-6">
+        <div className="flex flex-col rounded-lg">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 p-4 sm:p-6 bg-zinc-50 border-zinc-200 rounded-t-lg">
+            <div className="flex flex-col gap-1 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="paragraph-small-semibold text-zinc-600">
+                  {resolvePlanNameById(plan?.id ?? activeSubscription?.id_plan, plan?.name, translate)}
+                </span>
+                <span className="paragraph-xsmall-semibold text-zinc-600 bg-white border border-zinc-200 px-1.5 h-6 flex items-center rounded-lg">
+                  {translateStep('badgeCurrent')}
+                </span>
+              </div>
+              <div className="flex flex-col">
+                <span className="paragraph-large-semibold text-zinc-950">
+                  {currentPrice !== null ? formatCurrencyNumber(currentPrice) : '--'}
+                </span>
+                <span className="paragraph-small-regular text-zinc-500">{currentPeriodLabel}</span>
+              </div>
+            </div>
+
+            <div className="hidden sm:flex items-center justify-center size-6 border border-zinc-200 rounded-full bg-white shrink-0">
+              <IconChevronRight size={16} className="text-zinc-950" />
+            </div>
+
+            <div className="flex flex-col gap-1 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="paragraph-small-semibold text-zinc-600">{targetPlan?.name}</span>
+                <span className="paragraph-xsmall-semibold text-zinc-950 px-1.5 h-6 flex items-center rounded-lg bg-primary">
+                  {translateStep('badgeNew')}
+                </span>
+              </div>
+              <div className="flex flex-col">
+                {newPlanListPrice != null &&
+                  newPlanChargedPrice != null &&
+                  newPlanListPrice > newPlanChargedPrice && (
+                    <span className="paragraph-xsmall-medium text-zinc-500 line-through">
+                      {formatCurrencyNumber(newPlanListPrice)}
+                    </span>
+                  )}
+                <span className="paragraph-large-semibold text-zinc-950">
+                  {newPlanChargedPrice !== null ? formatCurrencyNumber(newPlanChargedPrice) : '--'}
+                </span>
+                <span className="paragraph-small-regular text-zinc-500">{periodLabel}</span>
+              </div>
+            </div>
+          </div>
+
+          {!isDowngrade && newFeatures.length > 0 && (
+            <div className="flex flex-col gap-4 p-4 sm:p-6 bg-zinc-50 rounded-b-lg">
+              <span className="paragraph-small-semibold text-zinc-950">
+                {translateStep('newFeaturesTitle')}
+              </span>
+              <div className="flex flex-col gap-2">
+                {newFeatures.map((feature) => (
+                  <div key={feature.text} className="flex items-center gap-2">
+                    <IconCheck size={24} className="text-green-500 shrink-0" />
+                    <span className="paragraph-small-medium text-zinc-500">{feature.text}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {isDowngrade && lostFeatures.length > 0 && (
+            <div className="flex flex-col gap-3 p-4 sm:p-6 pt-0 sm:pt-0 bg-zinc-50 rounded-b-lg">
+              <span className="paragraph-small-semibold text-zinc-950">
+                {translateStep('lostFeaturesTitle')}
+              </span>
+              <div className="flex flex-col gap-2 max-h-40 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">
+                {lostFeatures.map((feature) => (
+                  <div key={feature} className="flex items-center gap-2">
+                    <IconX size={16} className="text-red-500 shrink-0" />
+                    <span className="paragraph-small-medium text-zinc-500">{feature}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <AddonsBlock />
+        <PricePreview />
+      </div>
+
+      <SheetFooter className="flex-row items-center justify-between p-4 sm:p-5 border-t border-zinc-200">
+        <Button
+          type="button"
+          variant="secondary"
+          className="h-10!"
+          onClick={isDowngrade ? handleBack : handleClose}
+        >
+          {isDowngrade ? translate('common.actions.back') : translate('common.actions.cancel')}
+        </Button>
+        <Button type="button" className="h-10!" onClick={handleContinue}>
+          {translate('common.actions.continue')}
+        </Button>
+      </SheetFooter>
+    </>
+  );
+}

package/src/components/account/sections/subscription/change-plan/steps/PlanViewStep.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { IconBolt } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Badge } from '../../../../../ui/data-display/Badge';
+import { Button } from '../../../../../ui/buttons/Button';
+import { SheetFooter } from '../../../../../ui/overlay/Sheet';
+import { useCurrentSubscription } from '../../../../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { isApiSubscription } from '../../../../../../modules/subscriptions/utils/is-api-subscription';
+import { getPeriodicityLabel } from '../../../../../../modules/subscriptions/utils/periodicity';
+import { resolveSubscriptionPlanName } from '../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name';
+import { IconBox } from '../../../shared/IconBox';
+import { AddonsBlock } from '../components/AddonsBlock';
+import { PricePreview } from '../components/PricePreview';
+import { useChangePlan } from '../useChangePlanState';
+
+/** Gerenciamento do plano atual: adicionais e atalho para o catálogo. */
+export function PlanViewStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations('common.account.workspace.subscription.changePlan.planView');
+  const { isDowngrade, handleClose, handleBack, handleContinue, handleOpenPlansCatalog } = useChangePlan();
+
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const isApiPlan = isApiSubscription(subscription);
+  const periodicityLabel = getPeriodicityLabel(subscription?.periodicity, translate);
+  const planName = resolveSubscriptionPlanName(subscription, translate);
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 lg:gap-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 px-4 lg:px-5 py-4 lg:py-6">
+        <div className="flex flex-col gap-2">
+          <span className="paragraph-small-regular text-zinc-500">{translateStep('currentPlanLabel')}</span>
+
+          <div className="flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg md:hidden">
+            <div className="flex items-center gap-4">
+              <div className="size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0">
+                <IconBolt size={24} className="text-zinc-950" />
+              </div>
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                <span className="paragraph-medium-semibold text-zinc-950">{planName}</span>
+                <Badge className="text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold shrink-0">
+                  {periodicityLabel}
+                </Badge>
+              </div>
+            </div>
+            {!isApiPlan && (
+              <Button type="button" variant="secondary" className="h-10 w-fit" onClick={handleOpenPlansCatalog}>
+                {translateStep('changePlanButton')}
+              </Button>
+            )}
+          </div>
+
+          <div className="hidden md:flex items-center gap-4 p-4 border border-zinc-200 rounded-lg">
+            <IconBox icon={IconBolt} />
+            <div className="flex items-center gap-2 flex-1">
+              <span className="paragraph-medium-semibold text-zinc-950">{planName}</span>
+              <Badge className="text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold">
+                {periodicityLabel}
+              </Badge>
+            </div>
+            {!isApiPlan && (
+              <Button type="button" variant="secondary" className="h-10" onClick={handleOpenPlansCatalog}>
+                {translateStep('changePlanButton')}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <AddonsBlock />
+        <PricePreview />
+      </div>
+
+      <SheetFooter className="flex-row items-center justify-between p-4 sm:p-5 border-t border-zinc-200">
+        <Button
+          type="button"
+          variant="secondary"
+          className="h-10!"
+          onClick={isDowngrade ? handleBack : handleClose}
+        >
+          {isDowngrade ? translate('common.actions.back') : translate('common.actions.cancel')}
+        </Button>
+        <Button type="button" className="h-10!" onClick={handleContinue}>
+          {translate('common.actions.continue')}
+        </Button>
+      </SheetFooter>
+    </>
+  );
+}