@greatapps/common 1.1.790 → 1.1.791

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

@@ -0,0 +1,117 @@
+'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 { BillingPeriodSelector } from '../../../../../ui/form/BillingPeriodSelector';
+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';
+
+/** Primeiro passo da reativação: confere o plano e ajusta os adicionais. */
+export function ReactivationConfigStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    'common.account.workspace.subscription.changePlan.reactivationConfig'
+  );
+  const {
+    handleClose,
+    handleContinue,
+    handleOpenPlansCatalog,
+    targetPlan,
+    billingLabelFull,
+    contractingBillingPeriod,
+    setContractingBillingPeriod,
+    calculatedPricing,
+    billingDiscounts,
+    firstPeriodPricingByPeriod,
+    planPricing,
+    disabledBillingPeriods,
+  } = useChangePlan();
+
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const isApiPlan = isApiSubscription(subscription);
+  // Vindo da vitrine o plano em contratação é o escolhido lá, não o que a conta tem hoje.
+  const periodicityLabel = targetPlan
+    ? billingLabelFull
+    : getPeriodicityLabel(subscription?.periodicity, translate);
+  const planName = targetPlan?.name ?? resolveSubscriptionPlanName(subscription, translate);
+
+  return (
+    <>
+      <div className="flex flex-col gap-6 p-4 md:p-5 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">
+        <div className="flex flex-col gap-2">
+          <span className="paragraph-small-regular text-zinc-500">{translateStep('currentPlanLabel')}</span>
+
+          <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 className="md:hidden flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg">
+            <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>
+
+        {/* Contratação vinda da vitrine escolhe o período aqui — a reativação simples herda o
+            período da assinatura e não mostra o seletor. */}
+        {targetPlan && (
+          <BillingPeriodSelector
+            value={contractingBillingPeriod}
+            onChange={setContractingBillingPeriod}
+            disabledOptions={disabledBillingPeriods}
+            calculatedPricing={calculatedPricing}
+            billingDiscounts={billingDiscounts}
+            firstPeriodPricingByPeriod={firstPeriodPricingByPeriod}
+            planPricing={planPricing}
+          />
+        )}
+
+        <AddonsBlock />
+        <PricePreview />
+      </div>
+
+      <SheetFooter className="flex-row items-center justify-between p-4 lg:p-5 border-t border-zinc-200">
+        <Button type="button" variant="secondary" className="h-10!" onClick={handleClose}>
+          {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/ReactivationPaymentStep.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { IconAlertTriangle, 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 de pagamento da reativação da assinatura cancelada. */
+export function ReactivationPaymentStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    'common.account.workspace.subscription.changePlan.reactivationPayment'
+  );
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+
+  const {
+    form,
+    paymentMethod,
+    selectedCardId,
+    billingPeriod,
+    disabledPaymentMethods,
+    allowedPaymentMethod,
+    couponUnlocksAllMethods,
+    boletoAvailable,
+    pixAvailable,
+    handleBack,
+    handleReactivate,
+    isReactivating,
+    isCalculating,
+    requiresBillingData,
+    openBillingAddress,
+    hasPendingAuth,
+    canReactivate,
+  } = useChangePlan();
+
+  const disableCard = disabledPaymentMethods.includes('card');
+  const disableBoleto =
+    disabledPaymentMethods.includes('boleto') ||
+    (billingPeriod !== 'annual' && allowedPaymentMethod !== 'boleto' && !couponUnlocksAllMethods);
+  const disablePix =
+    disabledPaymentMethods.includes('pix') ||
+    (billingPeriod !== 'annual' && allowedPaymentMethod !== 'pix' && !couponUnlocksAllMethods);
+
+  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-6 p-4 md:p-5 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">
+        <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}
+            disableCard={disableCard}
+            disablePix={disablePix}
+            hideBoleto={!boletoAvailable}
+            hidePix={!pixAvailable}
+          />
+
+          {/* Boleto e pix emitem nota fiscal: sem cadastro fiscal completo a cobrança é recusada
+              pelo backend, então o passo manda completar antes. */}
+          {requiresBillingData && paymentMethod !== 'card' && (
+            <div className="flex flex-col gap-3 p-4 rounded-lg bg-amber-50">
+              <div className="flex items-start gap-3">
+                <IconAlertTriangle size={16} className="text-amber-600 shrink-0 mt-0.5" />
+                <p className="paragraph-small-regular text-zinc-950">
+                  {translateStep('billingDataRequired')}
+                </p>
+              </div>
+              <Button
+                type="button"
+                variant="secondary"
+                className="h-9 w-fit"
+                onClick={openBillingAddress}
+              >
+                {translateStep('billingDataAction')}
+              </Button>
+            </div>
+          )}
+
+          {paymentMethod === 'card' ? (
+            <PaymentInfoCard
+              selectedCardId={selectedCardId}
+              onCardSelect={(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>
+
+      <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}>
+          {translate('common.actions.back')}
+        </Button>
+        <Button
+          type="button"
+          className="h-10!"
+          onClick={handleReactivate}
+          loading={isReactivating}
+          disabled={
+            !canReactivate ||
+            isCalculating ||
+            requiresBillingData ||
+            (paymentMethod === 'card' && !selectedCardId)
+          }
+        >
+          {hasPendingAuth ? translateStep('retryAuthButton') : translateStep('submitButton')}
+        </Button>
+      </SheetFooter>
+    </>
+  );
+}