@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/subscription/PlanDetailsSheet.tsx

@@ -0,0 +1,380 @@
+'use client';
+
+import { IconCheck, IconInfoCircle, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Badge } from '../../../ui/data-display/Badge';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+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 { useCouponById } from '../../../../modules/coupons/hooks/use-coupon-by-id.hook';
+import { usePlanById } from '../../../../modules/plans/hooks/use-plan-by-id.hook';
+import { mapApiPlanToUiPlanForCurrency } from '../../../../modules/plans/utils/map-api-plan-to-ui';
+import type { UiPlan } from '../../../../modules/plans/types/plan.type';
+import {
+  ADDON_IDS,
+  canBuyExtraDomains,
+  getDomainExtraPrice,
+} from '../../../../modules/subscriptions/constants/addons.constants';
+import { useCurrentSubscription } from '../../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import {
+  getPeriodicityLabel,
+  periodicityToBillingPeriod,
+} from '../../../../modules/subscriptions/utils/periodicity';
+import { resolveSubscriptionPlanName } from '../../../../modules/subscriptions/utils/resolve-subscription-plan-name';
+import { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
+import { formatShortDate } from '../../../../infra/utils/date';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+import useSubscriptionActions from '../../hooks/useSubscriptionActions';
+
+type DisplayFeature = {
+  label: string;
+  enabled: boolean;
+  isDomain?: boolean;
+};
+
+function buildDisplayFeatures(
+  uiPlan: UiPlan,
+  subscriptionItems: { id_addon: number | null; quantity: number; value: number | null }[],
+  planItems: { id_addon: number; quantity: number }[],
+  // `key: any`: o app tipa `useTranslations()` contra o catálogo dele e a chave literal não é
+  // atribuível a `string` — mesmo padrão dos outros helpers que recebem o translate.
+  translate: (key: any, values?: Record<string, string | number>) => string
+): DisplayFeature[] {
+  const features: DisplayFeature[] = [{ label: uiPlan.mainFeatures.pages, enabled: true }];
+
+  // Domínios: total = soma dos itens; base = item com value 0 (o incluso no plano); extras = resto.
+  const subDomainItems = subscriptionItems.filter((item) => item.id_addon === ADDON_IDS.DOMAINS);
+  const planDomainItem = planItems.find((item) => item.id_addon === ADDON_IDS.DOMAINS);
+  const totalDomains = subDomainItems.reduce((sum, item) => sum + (item.quantity ?? 0), 0);
+  const baseDomains =
+    subDomainItems.find((item) => (item.value ?? 0) === 0)?.quantity ?? planDomainItem?.quantity ?? 0;
+  const extraDomains = Math.max(0, totalDomains - baseDomains);
+
+  if (totalDomains >= 999) {
+    features.push({
+      label: translate('common.account.workspace.subscription.planDetails.unlimitedDomains'),
+      enabled: true,
+    });
+  } else {
+    features.push({
+      label:
+        extraDomains > 0
+          ? translate('common.account.workspace.subscription.planDetails.domainsSummary', {
+              total: String(totalDomains),
+              base: String(baseDomains),
+              extra: String(extraDomains),
+            })
+          : translate('common.account.workspace.subscription.planDetails.domainsSummaryNoExtra', {
+              total: String(totalDomains),
+              base: String(baseDomains),
+            }),
+      enabled: true,
+      isDomain: true,
+    });
+  }
+
+  features.push({ label: uiPlan.mainFeatures.users, enabled: true });
+
+  const abTestItem = subscriptionItems.find((item) => item.id_addon === ADDON_IDS.AB_TEST);
+  if (abTestItem && abTestItem.quantity > 0) {
+    features.push({
+      label: translate('common.account.workspace.subscription.planDetails.abTestUnlimited'),
+      enabled: true,
+    });
+  }
+
+  const heatmapItem = subscriptionItems.find((item) => item.id_addon === ADDON_IDS.HEATMAP);
+  if (heatmapItem && heatmapItem.quantity > 0) {
+    features.push({
+      label: translate('common.account.workspace.subscription.planDetails.heatmap'),
+      enabled: true,
+    });
+  }
+
+  for (const feature of uiPlan.features) {
+    features.push({ label: feature.text, enabled: feature.icon === 'check' });
+  }
+
+  return features;
+}
+
+function DetailField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-start">
+      <span className="paragraph-small-medium text-zinc-950 w-[45%] wrap-break-word">{label}</span>
+      <span className="paragraph-small-regular text-zinc-600 w-[55%] wrap-break-word">{value}</span>
+    </div>
+  );
+}
+
+/** Tudo que o plano inclui e as informações de cobrança da assinatura corrente. */
+export function PlanDetailsSheet() {
+  const translate = useTranslations();
+  const translateSheet = useTranslations('common.account.workspace.subscription.planDetails');
+  const isMobile = useIsMobile();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const { currency, formatCurrencyNumber } = useCurrencyFormatter();
+  const { isOwnerOrAdmin } = useManagementPermissions();
+
+  const isOpen = useSubscriptionFlows((state) => state.isPlanDetailsOpen);
+  const close = useSubscriptionFlows((state) => state.closePlanDetails);
+  const actions = useSubscriptionActions();
+
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const { data: planData } = usePlanById(subscription?.id_plan);
+  const plan = planData?.data;
+  const { data: couponData } = useCouponById(subscription?.id_coupon);
+  const appliedCoupon = couponData?.data;
+
+  const hasData = !!subscription && !!plan;
+
+  const uiPlan = hasData ? mapApiPlanToUiPlanForCurrency(currency, translate)(plan) : null;
+  const features =
+    uiPlan && plan && subscription
+      ? buildDisplayFeatures(uiPlan, subscription.items, plan.items ?? [], translate)
+      : [];
+  const domainItem = hasData ? subscription.items.find((item) => item.id_addon === ADDON_IDS.DOMAINS) : undefined;
+
+  // Preço do domínio extra: o item base do plano, com fallback na tabela por plano.
+  const domainExtraPrice = hasData
+    ? (plan.items?.find((item) => item.id_addon === ADDON_IDS.DOMAINS && item.base)?.value ??
+      plan.items?.find((item) => item.id_addon === ADDON_IDS.DOMAINS && (item.value ?? 0) > 0)?.value ??
+      getDomainExtraPrice(plan.id))
+    : 0;
+
+  // Domínios pagos agrupados por preço; base primeiro, promoções depois.
+  const domainExtraBuckets = hasData
+    ? Array.from(
+        subscription.items
+          .filter((item) => item.id_addon === ADDON_IDS.DOMAINS && (item.value ?? 0) > 0)
+          .reduce(
+            (acc, item) => acc.set(item.value!, (acc.get(item.value!) ?? 0) + item.quantity),
+            new Map<number, number>()
+          )
+          .entries()
+      )
+        .map(([value, quantity]) => ({
+          value,
+          quantity,
+          isPromo: Math.abs(value - domainExtraPrice) > 0.01,
+        }))
+        .sort((a, b) => (a.isPromo === b.isPromo ? b.value - a.value : a.isPromo ? 1 : -1))
+    : [];
+
+  const value = hasData ? formatCurrencyNumber(subscription.value ?? 0) : '--';
+  const periodicity = hasData ? getPeriodicityLabel(subscription.periodicity, translate) : '';
+  const billingPeriod = hasData ? periodicityToBillingPeriod(subscription.periodicity) : 'monthly';
+  const periodicityAdverb = hasData
+    ? billingPeriod === 'semiannual'
+      ? translateSheet('periodicitySemiannual')
+      : billingPeriod === 'annual'
+        ? translateSheet('periodicityAnnual')
+        : translateSheet('periodicityMonthly')
+    : '';
+
+  // Trial sem cartão: mostrar forma de cobrança não faz sentido.
+  const isTrialNoCard = hasData && subscription.type === 'trial' && !subscription.id_card;
+  const paymentMethod = !hasData
+    ? '--'
+    : isTrialNoCard
+      ? translateSheet('trialPeriod')
+      : subscription.payment_method === 2
+        ? translateSheet('paymentMethodBoleto')
+        : translateSheet('paymentMethodCard');
+
+  const stripeData = appliedCoupon?.stripe_data;
+  const couponValue = !appliedCoupon
+    ? null
+    : stripeData?.percent_off != null
+      ? translateSheet('couponValuePercent', {
+          code: appliedCoupon.code,
+          percent: String(stripeData.percent_off),
+        })
+      : stripeData?.amount_off != null
+        ? translateSheet('couponValueAmount', {
+            code: appliedCoupon.code,
+            amount: formatCurrencyNumber(stripeData.amount_off / 100),
+          })
+        : appliedCoupon.code;
+
+  const dueDate = hasData && subscription.date_due ? formatShortDate(subscription.date_due) : '--';
+  const planName = hasData ? resolveSubscriptionPlanName(subscription, translate, translateSheet('noName')) : '';
+  const cancelled =
+    hasData && !!subscription.date_cancellation && subscription.date_cancellation < new Date();
+  const isPartnerPlan = hasData && subscription.type === 'partner';
+  const isOverdue = hasData && !!subscription.date_due && new Date(subscription.date_due) < new Date();
+  const showAddonsCta = hasData && !cancelled && !isOverdue && isOwnerOrAdmin;
+  const showBadge = cancelled && subscription.type === 'client';
+
+  const handleManageAddons = () => {
+    close();
+    actions.changePlan();
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <SheetContent
+        side={isMobile ? 'bottom' : 'right'}
+        className={cn(
+          isMobile
+            ? 'h-dvh w-full max-w-full rounded-t-lg pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+            : 'h-screen max-w-120! w-120!',
+          'data-[state=open]:max-h-none data-[state=open]:h-dvh gap-6!'
+        )}
+      >
+        <SheetHeader className="border-b border-zinc-200">
+          <SheetTitle className="paragraph-medium-semibold text-zinc-950">
+            {translateSheet('title')}
+          </SheetTitle>
+        </SheetHeader>
+
+        {!hasData ? (
+          <div className="flex flex-col gap-6 px-5 pb-6">
+            <div className="flex flex-col gap-0.5">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-5 w-40 rounded" />
+                <Skeleton className="h-5 w-16 rounded-lg" />
+              </div>
+              <Skeleton className="h-4 w-28 rounded" />
+            </div>
+            <Separator />
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-4 w-32 rounded" />
+              <div className="flex flex-col bg-zinc-50 rounded-lg p-4 gap-3">
+                {Array.from({ length: 12 }).map((_, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <Skeleton className="size-4 rounded shrink-0" />
+                    <Skeleton className="h-4 w-full rounded" />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-6 px-5 pb-6 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-0.5">
+              <div className="flex items-center gap-2">
+                <span className="paragraph-medium-semibold text-zinc-950">
+                  {translateSheet('planName', { name: planName })}
+                </span>
+                {showBadge ? (
+                  <Badge className="text-red-700 border border-red-100 bg-red-50 rounded-lg paragraph-xsmall-semibold">
+                    {translateSheet('cancelledBadge')}
+                  </Badge>
+                ) : (
+                  <Badge className="text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold">
+                    {periodicity}
+                  </Badge>
+                )}
+              </div>
+              {!isPartnerPlan && (
+                <span className="paragraph-small-medium text-zinc-600">
+                  {translateSheet('validity')} <span className="text-zinc-950">{dueDate}</span>
+                </span>
+              )}
+            </div>
+
+            <Separator />
+
+            <div className="flex flex-col gap-2">
+              <span className="text-zinc-600 paragraph-small-regular">
+                {translateSheet('includedInPlan')}
+              </span>
+              <div className="flex flex-col bg-zinc-50 rounded-lg p-4 gap-3">
+                {features.map((feature) => (
+                  <div key={feature.label} className="flex items-start gap-2">
+                    {feature.enabled ? (
+                      <IconCheck size={16} className="text-zinc-950 shrink-0 mt-0.5" />
+                    ) : (
+                      <IconX size={16} className="text-zinc-300 shrink-0 mt-0.5" />
+                    )}
+                    <div className="flex flex-col">
+                      <div className="flex items-center gap-1.5">
+                        <span
+                          className={cn(
+                            'paragraph-small-medium',
+                            feature.enabled ? 'text-zinc-500' : 'text-zinc-300'
+                          )}
+                        >
+                          {feature.label}
+                        </span>
+                        {feature.isDomain && domainItem && canBuyExtraDomains(plan.id) && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <button type="button" className="flex items-center justify-center size-5 shrink-0">
+                                <IconInfoCircle size={14} className="text-zinc-400" />
+                              </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="right" className="max-w-53.75 p-3">
+                              {translateSheet('domainTooltip')}
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
+                      {feature.isDomain &&
+                        domainItem &&
+                        canBuyExtraDomains(plan.id) &&
+                        domainExtraBuckets.map((bucket) => (
+                          <span key={bucket.value} className="paragraph-xsmall-medium text-zinc-400">
+                            {bucket.isPromo
+                              ? translateSheet('domainPromoPrice', {
+                                  count: String(bucket.quantity),
+                                  price: formatCurrencyNumber(bucket.value),
+                                })
+                              : translateSheet('domainBucketPrice', {
+                                  count: String(bucket.quantity),
+                                  price: formatCurrencyNumber(bucket.value),
+                                })}
+                          </span>
+                        ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {showAddonsCta && (
+              <div
+                className={cn(
+                  'flex items-center gap-3 p-4 rounded-lg',
+                  isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'
+                )}
+              >
+                <IconInfoCircle size={16} className="text-zinc-950 shrink-0 mt-0.5" />
+                <p className="paragraph-small-regular text-zinc-950">
+                  {translateSheet('manageAddons')}{' '}
+                  <button
+                    type="button"
+                    onClick={handleManageAddons}
+                    className="paragraph-small-semibold underline cursor-pointer hover:text-zinc-700 transition-colors"
+                  >
+                    {translateSheet('manageAddonsLink')}
+                  </button>
+                </p>
+              </div>
+            )}
+
+            <div className="flex flex-col gap-2">
+              <span className="text-zinc-600 paragraph-small-regular">{translateSheet('paymentInfo')}</span>
+              <div className="flex flex-col bg-zinc-50 rounded-lg p-4 gap-4">
+                <DetailField label={translateSheet('valueLabel')} value={value} />
+                {couponValue && <DetailField label={translateSheet('couponLabel')} value={couponValue} />}
+                <DetailField label={translateSheet('paymentMethodLabel')} value={paymentMethod} />
+                <DetailField label={translateSheet('periodicityLabel')} value={periodicityAdverb} />
+                {!isPartnerPlan && (
+                  <DetailField label={translateSheet('planValidityLabel')} value={dueDate} />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}