@greatapps/common 1.1.789 → 1.1.791

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../../ui/overlay/Sheet';
+import { useExternalContracting } from '../../../../../providers/whitelabel.provider';
+import useIsMobile from '../../../../../hooks/useIsMobile';
+import { cn } from '../../../../../infra/utils/clsx';
+import { AbTestDetailsDialog } from './components/AbTestDetailsDialog';
+import { CouponDialog } from './components/CouponDialog';
+import { PaymentSummaryStep } from './steps/PaymentSummaryStep';
+import { PlanComparisonStep } from './steps/PlanComparisonStep';
+import { PlanViewStep } from './steps/PlanViewStep';
+import { ReactivationConfigStep } from './steps/ReactivationConfigStep';
+import { ReactivationPaymentStep } from './steps/ReactivationPaymentStep';
+import { ChangePlanProvider, useChangePlanLogic } from './useChangePlanState';
+
+/**
+ * Troca de plano e gerenciamento de adicionais, em dois passos. Sem plano-alvo é só o
+ * gerenciamento do plano atual; com plano-alvo, compara os dois antes do pagamento.
+ */
+export function ChangePlanSheet() {
+  const translate = useTranslations('common.account.workspace.subscription.changePlan');
+  const isMobile = useIsMobile();
+  const state = useChangePlanLogic();
+  const { isExternalContracting, redirectToExternal } = useExternalContracting();
+
+  const { open, isReactivation, isDowngrade, targetPlan, currentStep, handleClose, form, handleSubmit } =
+    state;
+
+  useEffect(() => {
+    if (open && isExternalContracting) {
+      handleClose();
+      redirectToExternal('contracting');
+    }
+  }, [open, isExternalContracting, handleClose, redirectToExternal]);
+
+  if (isExternalContracting) return null;
+
+  const isPlanManagement = !isReactivation && !isDowngrade && !targetPlan;
+
+  const renderStep = () => {
+    if (isReactivation) {
+      if (currentStep === 1) return <ReactivationConfigStep />;
+      if (currentStep === 2) return <ReactivationPaymentStep />;
+      return null;
+    }
+
+    if (targetPlan) {
+      if (currentStep === 1) return <PlanComparisonStep />;
+      if (currentStep === 2) return <PaymentSummaryStep />;
+      return null;
+    }
+
+    if (currentStep === 1) return <PlanViewStep />;
+    if (currentStep === 2) return <PaymentSummaryStep />;
+    return null;
+  };
+
+  return (
+    <ChangePlanProvider value={state}>
+      <Sheet open={open} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+        <SheetContent
+          side={isMobile ? 'bottom' : 'right'}
+          className={cn(
+            'flex flex-col gap-0 p-0',
+            isMobile
+              ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+              : 'w-120! sm:max-w-120!'
+          )}
+        >
+          <SheetHeader className="px-4 sm:px-5 py-3 border-b border-zinc-200">
+            <SheetTitle className="paragraph-medium-semibold text-zinc-950">
+              {isPlanManagement ? translate('titleManagement') : translate('titleChange')}
+            </SheetTitle>
+          </SheetHeader>
+
+          <div className="h-1 bg-zinc-100 w-full">
+            <div
+              className="h-full transition-all duration-300 ease-in-out bg-primary"
+              style={{ width: currentStep === 1 ? '50%' : '100%' }}
+            />
+          </div>
+
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="flex flex-col flex-1 min-h-0">
+            {renderStep()}
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      <AbTestDetailsDialog />
+      <CouponDialog />
+    </ChangePlanProvider>
+  );
+}

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { IconExternalLink, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Dialog, DialogContent, DialogTitle } from '../../../../../ui/overlay/Dialog';
+import { ADDON_IDS, getAddonLabels } from '../../../../../../modules/subscriptions/constants/addons.constants';
+import { useChangePlan } from '../useChangePlanState';
+
+/** O que é o Teste A/B, aberto pelo "Ver detalhes" do adicional. */
+export function AbTestDetailsDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations('common.account.workspace.subscription.changePlan');
+  const { abTestDetailsOpen, setAbTestDetailsOpen } = useChangePlan();
+  const abTestAddon = getAddonLabels(translate)[ADDON_IDS.AB_TEST];
+
+  return (
+    <Dialog open={abTestDetailsOpen} onOpenChange={setAbTestDetailsOpen}>
+      <DialogContent
+        showCloseButton={false}
+        className="p-0 w-[calc(100%-32px)] max-w-109 overflow-hidden flex flex-col gap-0"
+      >
+        <div className="flex items-center justify-center px-4 py-3 h-14 md:h-16 relative">
+          <button
+            type="button"
+            onClick={() => setAbTestDetailsOpen(false)}
+            aria-label={translate('common.actions.close')}
+            className="absolute right-3 md: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>
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
+            {abTestAddon.name}
+          </DialogTitle>
+        </div>
+
+        <div className="flex flex-col items-center gap-5 px-4 md:px-5 pt-2 pb-4 md:pb-5">
+          {abTestAddon.description && (
+            <p className="paragraph-small-regular text-zinc-500 text-center">
+              {abTestAddon.description}
+            </p>
+          )}
+          {abTestAddon.detailsUrl && (
+            <a
+              href={abTestAddon.detailsUrl}
+              className="flex items-center gap-1.5 paragraph-small-semibold text-zinc-950 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {translateDialog('abTestDialog.learnMore')}
+              <IconExternalLink size={20} className="text-zinc-950" />
+            </a>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,214 @@
+'use client';
+
+import { IconAtom, IconMinus, IconPlus, IconWorld } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Skeleton } from '../../../../../ui/feedback/Skeleton';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '../../../../../ui/form/Select';
+import { Switch } from '../../../../../ui/form/Switch';
+import { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { useIsDefaultWhitelabel } from '../../../../../../providers/whitelabel.provider';
+import { cn } from '../../../../../../infra/utils/clsx';
+import { IconBox } from '../../../shared/IconBox';
+import { useChangePlan } from '../useChangePlanState';
+import { AlternativeBucketsSection } from './AlternativeBucketsSection';
+
+/** Créditos de IA, domínios extras e Teste A/B — os adicionais editáveis do plano. */
+export function AddonsBlock() {
+  const translate = useTranslations('common.account.workspace.subscription.changePlan');
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+
+  const {
+    selectedCreditIndex,
+    setSelectedCreditIndex,
+    selectedCredit,
+    aiCreditOptions,
+    domains,
+    planIncludedDomains,
+    isAtMin,
+    domainsCountLoading,
+    hasDomainsAddon,
+    domainPriceMonthly,
+    handleDecreaseDomains,
+    handleIncreaseDomains,
+    handleDomainsChange,
+    alternativeBuckets,
+    hasAlternativeBuckets,
+    canDecreaseTotal,
+    handleAlternativeDecrease,
+    handleAlternativeIncrease,
+    minDomains,
+    abTestEnabled,
+    setAbTestEnabled,
+    hasAbTestAddon,
+    abTestIncludedInPlan,
+    abTestPriceMonthly,
+    periodMonths,
+    periodLabel,
+    setAbTestDetailsOpen,
+  } = useChangePlan();
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
+        <span className="paragraph-medium-semibold text-zinc-950">{translate('addons.title')}</span>
+
+        {isDefaultWhitelabel && (
+          <Select
+            value={String(selectedCreditIndex)}
+            onValueChange={(value) => setSelectedCreditIndex(Number(value))}
+          >
+            <SelectTrigger className="w-full h-12 bg-white border border-zinc-200 rounded-lg px-4 py-6 gap-2 shadow-none [&_svg]:text-zinc-950 [&_svg]:opacity-100 [&_svg]:size-5">
+              <span className="paragraph-small-medium text-zinc-950 flex-1 text-left">
+                {translate('addons.credits.option', {
+                  credits: selectedCredit.credits.toLocaleString('pt-BR'),
+                })}
+              </span>
+              <span className="paragraph-small-medium text-zinc-500">
+                {selectedCredit.price === 0
+                  ? translate('addons.credits.priceDefault')
+                  : formatCurrencyNumber(selectedCredit.price * periodMonths)}
+                {selectedCredit.price > 0 && periodLabel}
+              </span>
+            </SelectTrigger>
+            <SelectContent side="bottom" align="start">
+              {aiCreditOptions.map((option, index) => (
+                <SelectItem
+                  key={option.credits}
+                  value={String(index)}
+                  className="[&>span:last-child]:flex [&>span:last-child]:w-full [&>span:last-child]:justify-between"
+                >
+                  <span className="flex-1">
+                    {translate('addons.credits.option', {
+                      credits: option.credits.toLocaleString('pt-BR'),
+                    })}
+                  </span>
+                  <span className="text-zinc-500 shrink-0">
+                    {option.price === 0
+                      ? translate('addons.credits.priceDefault')
+                      : `${formatCurrencyNumber(option.price * periodMonths)}${periodLabel}`}
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+
+      <div className={cn('flex flex-col bg-zinc-50 rounded-lg', !hasDomainsAddon && 'opacity-50')}>
+        <div className="flex items-center gap-3 p-4">
+          <IconBox icon={IconWorld} />
+          <div className="flex flex-col gap-0.5 flex-1">
+            <span className="paragraph-small-semibold text-zinc-950">
+              {translate('addons.domains.included', { count: String(planIncludedDomains) })}
+            </span>
+            {domains > planIncludedDomains && (
+              <>
+                <span className="paragraph-small-semibold text-zinc-950">
+                  {translate('addons.domains.extras', { count: String(domains - planIncludedDomains) })}
+                </span>
+                <span className="paragraph-small-regular text-zinc-500">
+                  {translate('addons.domains.extraPrice', {
+                    price: formatCurrencyNumber(domainPriceMonthly * periodMonths),
+                    period: periodMonths > 1 ? `${periodLabel} ` : ' ',
+                  })}
+                </span>
+              </>
+            )}
+          </div>
+
+          {hasDomainsAddon &&
+            (domainsCountLoading ? (
+              <Skeleton className="h-10 w-24 rounded-xl" />
+            ) : (
+              <div className="flex items-center bg-white rounded-xl p-1 shadow-sm">
+                <button
+                  type="button"
+                  onClick={handleDecreaseDomains}
+                  disabled={isAtMin}
+                  className={cn(
+                    'size-8 flex items-center justify-center transition-colors rounded-lg',
+                    isAtMin ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-zinc-50'
+                  )}
+                >
+                  <IconMinus className="size-4.5 text-zinc-800" />
+                </button>
+                <input
+                  type="number"
+                  inputMode="numeric"
+                  min={minDomains}
+                  value={domains}
+                  onChange={handleDomainsChange}
+                  className="paragraph-small-semibold text-zinc-950 w-8 text-center bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                />
+                <button
+                  type="button"
+                  onClick={handleIncreaseDomains}
+                  className="size-8 flex items-center justify-center transition-colors rounded-lg cursor-pointer hover:bg-zinc-50"
+                >
+                  <IconPlus className="size-4.5 text-zinc-800" />
+                </button>
+              </div>
+            ))}
+        </div>
+
+        {hasDomainsAddon && !domainsCountLoading && hasAlternativeBuckets && (
+          <AlternativeBucketsSection
+            buckets={alternativeBuckets}
+            periodMonths={periodMonths}
+            periodLabel={periodLabel}
+            canDecrease={canDecreaseTotal}
+            onDecrease={handleAlternativeDecrease}
+            onIncrease={handleAlternativeIncrease}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <div
+          className={cn(
+            'flex flex-col gap-3 p-4 bg-zinc-50 rounded-lg',
+            !hasAbTestAddon && !abTestIncludedInPlan && 'opacity-50'
+          )}
+        >
+          <div className="flex items-center gap-3">
+            <IconBox icon={IconAtom} />
+            <div className="flex flex-col gap-0.5 flex-1">
+              <span className="paragraph-small-semibold text-zinc-950">
+                {translate('addons.abTest.name')}
+              </span>
+              {abTestIncludedInPlan ? (
+                <span className="paragraph-small-regular text-zinc-500">
+                  {translate('addons.abTest.includedInPlan')}
+                </span>
+              ) : (
+                abTestPriceMonthly > 0 && (
+                  <span className="paragraph-small-regular text-zinc-500">
+                    {formatCurrencyNumber(abTestPriceMonthly * periodMonths)}
+                    {periodMonths > 1 && periodLabel}
+                  </span>
+                )
+              )}
+            </div>
+            <Switch
+              checked={abTestIncludedInPlan || (hasAbTestAddon && abTestEnabled)}
+              onCheckedChange={setAbTestEnabled}
+              disabled={abTestIncludedInPlan || !hasAbTestAddon}
+              className="data-[state=checked]:bg-zinc-950"
+            />
+          </div>
+
+          {hasAbTestAddon && (
+            <button
+              type="button"
+              onClick={() => setAbTestDetailsOpen(true)}
+              className="paragraph-small-semibold text-zinc-950 underline text-left cursor-pointer"
+            >
+              {translate('addons.abTest.details')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+'use client';
+
+import { IconMinus, IconPlus } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import type { AddonBucket } from '../../../../../../modules/subscriptions/utils/addon-buckets';
+import { cn } from '../../../../../../infra/utils/clsx';
+
+type AlternativeBucketsSectionProps = {
+  buckets: AddonBucket[];
+  periodMonths: number;
+  periodLabel: string;
+  canDecrease: boolean;
+  onDecrease: (bucket: AddonBucket) => void;
+  onIncrease: (bucket: AddonBucket) => void;
+};
+
+/** Domínios extras contratados em preços antigos (promoções), geridos separados do preço base. */
+export function AlternativeBucketsSection({
+  buckets,
+  periodMonths,
+  periodLabel,
+  canDecrease,
+  onDecrease,
+  onIncrease,
+}: AlternativeBucketsSectionProps) {
+  const translate = useTranslations('common.account.workspace.subscription.changePlan');
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+
+  if (buckets.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-2 bg-zinc-100 rounded-b-lg px-4 py-3 max-h-50 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">
+      <span className="paragraph-xsmall-medium text-zinc-500">
+        {translate('alternativeBuckets.sectionTitle')}
+      </span>
+
+      {buckets.map((bucket) => {
+        const isAtMin = bucket.quantity <= 0 || !canDecrease;
+        const isAtMax = bucket.quantity >= bucket.originalQuantity;
+        const priceLabel =
+          periodMonths > 1
+            ? `${formatCurrencyNumber(bucket.value * periodMonths)}${periodLabel}`
+            : formatCurrencyNumber(bucket.value);
+
+        return (
+          <div key={bucket.key} className="flex items-center gap-3 py-2">
+            <div className="flex flex-col flex-1">
+              <span className="paragraph-small-medium text-zinc-950">
+                {translate('alternativeBuckets.bucketLabel', {
+                  count: String(bucket.quantity),
+                  domainLabel:
+                    bucket.quantity === 1
+                      ? translate('alternativeBuckets.domainSingular')
+                      : translate('alternativeBuckets.domainPlural'),
+                  price: priceLabel,
+                })}
+              </span>
+            </div>
+            <div className="flex items-center bg-white rounded-xl p-1 shadow-sm">
+              <button
+                type="button"
+                onClick={() => onDecrease(bucket)}
+                disabled={isAtMin}
+                className={cn(
+                  'size-8 flex items-center justify-center transition-colors rounded-lg',
+                  isAtMin ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-zinc-50'
+                )}
+              >
+                <IconMinus className="size-4.5 text-zinc-800" />
+              </button>
+              <span className="paragraph-small-semibold text-zinc-950 w-8 text-center">
+                {bucket.quantity}
+              </span>
+              <button
+                type="button"
+                onClick={() => onIncrease(bucket)}
+                disabled={isAtMax}
+                className={cn(
+                  'size-8 flex items-center justify-center transition-colors rounded-lg',
+                  isAtMax ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-zinc-50'
+                )}
+              >
+                <IconPlus className="size-4.5 text-zinc-800" />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+'use client';
+
+import { IconTicket, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useChangePlan } from '../useChangePlanState';
+
+/** Cupom aplicado (removível) ou o atalho para digitar um. */
+export function CouponBlock() {
+  const translate = useTranslations('common.account.workspace.subscription.changePlan');
+  const { appliedCouponCode, handleRemoveCoupon, handleOpenCouponDialog, hasPendingAuth } = useChangePlan();
+
+  if (appliedCouponCode) {
+    return (
+      <div>
+        <button
+          type="button"
+          onClick={handleRemoveCoupon}
+          disabled={hasPendingAuth}
+          className="flex items-center h-8 w-fit px-2 bg-zinc-100 rounded-lg cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <IconTicket size={18} className="text-zinc-950" />
+          <span className="px-1.5 paragraph-small-semibold text-zinc-950">{appliedCouponCode}</span>
+          <IconX className="size-4.5 text-zinc-950" />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={handleOpenCouponDialog}
+        disabled={hasPendingAuth}
+        className="flex items-center gap-2 h-8 px-2 w-fit paragraph-small-semibold text-zinc-950 cursor-pointer hover:bg-zinc-100 rounded-lg transition-colors disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
+      >
+        <IconTicket size={18} className="text-zinc-950" />
+        <span>{translate('coupon.addButton')}</span>
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { z } from 'zod';
+import { Button } from '../../../../../ui/buttons/Button';
+import { FormField } from '../../../../../ui/form/FormField';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../../ui/overlay/Dialog';
+import { useCouponByCode } from '../../../../../../modules/coupons/hooks/use-coupon-by-code.hook';
+import { useChangePlan } from '../useChangePlanState';
+
+const couponSchema = z.object({ code: z.string().min(1) });
+
+type CouponFormData = z.infer<typeof couponSchema>;
+
+/** Digitação e validação do cupom aplicado na troca de plano. */
+export function CouponDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations('common.account.workspace.subscription.changePlan.couponDialog');
+  const { isCouponDialogOpen, setIsCouponDialogOpen, handleApplyCoupon } = useChangePlan();
+
+  const form = useForm<CouponFormData>({
+    resolver: zodResolver(couponSchema),
+    defaultValues: { code: '' },
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+  });
+
+  const { mutateAsync: fetchCouponByCode, isPending } = useCouponByCode();
+
+  const handleClose = useCallback(() => {
+    form.reset();
+    setIsCouponDialogOpen(false);
+  }, [form, setIsCouponDialogOpen]);
+
+  const onSubmit = useCallback(
+    async ({ code }: CouponFormData) => {
+      const trimmedCode = code.trim();
+      if (!trimmedCode) return;
+
+      try {
+        const coupon = await fetchCouponByCode(trimmedCode);
+
+        if (!coupon) {
+          form.setError('code', {
+            type: 'manual',
+            message: translateDialog('notFoundOrInvalid', { code: trimmedCode }),
+          });
+          return;
+        }
+
+        const stripeData = coupon.stripe_data;
+        if (stripeData && stripeData.usable === false && stripeData.usable_global !== true) {
+          form.setError('code', {
+            type: 'manual',
+            message:
+              stripeData.invalid_reason || translateDialog('notUsableAccount', { code: trimmedCode }),
+          });
+          return;
+        }
+
+        handleClose();
+        handleApplyCoupon({ id: coupon.id, code: coupon.code, stripeData: coupon.stripe_data ?? null });
+      } catch {
+        form.setError('code', {
+          type: 'manual',
+          message: translateDialog('notFoundOrInvalid', { code: trimmedCode }),
+        });
+      }
+    },
+    [fetchCouponByCode, form, handleApplyCoupon, handleClose, translateDialog]
+  );
+
+  const {
+    register,
+    watch,
+    formState: { errors, isSubmitting },
+  } = form;
+  const codeValue = watch('code');
+
+  return (
+    <Dialog open={isCouponDialogOpen} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+      <DialogContent
+        showCloseButton={false}
+        className="flex flex-col p-0! gap-0! max-w-[calc(100%-32px)]! h-auto! rounded-lg border top-[50%]! left-[50%]! right-auto! bottom-auto! translate-x-[-50%]! translate-y-[-50%]! lg:max-w-105!"
+      >
+        <DialogHeader className="p-0">
+          <div className="flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
+              {translateDialog('title')}
+            </DialogTitle>
+            <Button
+              type="button"
+              variant="ghost"
+              className="size-8! p-0 absolute right-4"
+              onClick={handleClose}
+            >
+              <IconX size={18} />
+            </Button>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 lg:flex-none">
+          <div className="flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none">
+            <FormField
+              label={translateDialog('codeLabel')}
+              placeholder={translateDialog('codePlaceholder')}
+              {...register('code')}
+              error={!!errors.code}
+              errorMessage={errors.code?.message}
+            />
+          </div>
+
+          <div className="flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0">
+            <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
+              {translate('common.actions.cancel')}
+            </Button>
+            <Button
+              type="submit"
+              disabled={!codeValue?.trim() || isPending}
+              loading={isSubmitting}
+              className="h-10!"
+            >
+              {isSubmitting ? translateDialog('applying') : translateDialog('apply')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,28 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Skeleton } from '../../../../../ui/feedback/Skeleton';
+import { useChangePlan } from '../useChangePlanState';
+
+/** Preço do período no rodapé do passo de configuração. */
+export function PricePreview() {
+  const translate = useTranslations('common.account.workspace.subscription.changePlan');
+  const { isCalculating, totalPrice, billingLabel, formatCurrencyNumber } = useChangePlan();
+
+  return (
+    <div className="flex items-center justify-between">
+      <span className="paragraph-small-medium text-zinc-500">
+        {translate('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>
+  );
+}