@greatapps/common 1.1.789 → 1.1.791

package/src/components/ui/form/BillingPeriodSelector.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Skeleton } from '../feedback/Skeleton';
+import { useCurrencyFormatter } from '../../../modules/accounts/hooks/use-currency-formatter.hook';
+import type { UiPlan } from '../../../modules/plans/types/plan.type';
+import type { BillingPeriod } from '../../../modules/subscriptions/types/billing-period.type';
+import {
+  getFirstPeriodLabelKey,
+  type FirstPeriodPricing,
+} from '../../../modules/subscriptions/utils/first-period-pricing';
+import {
+  getPlanBadgePercents,
+  USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT,
+} from '../../../modules/subscriptions/utils/periodicity';
+import { cn } from '../../../infra/utils/clsx';
+
+type SelectablePeriod = Extract<BillingPeriod, 'annual' | 'monthly'>;
+
+const BILLING_OPTIONS: SelectablePeriod[] = ['annual', 'monthly'];
+
+interface BillingPeriodSelectorProps {
+  value: BillingPeriod;
+  onChange: (value: BillingPeriod) => void;
+  disabledOptions?: BillingPeriod[];
+  /** Totais por período vindos do calculate; null exibe skeleton. */
+  calculatedPricing?: { monthly: number | null; annual: number | null } | null;
+  /**
+   * Percentual de desconto EFETIVO por período (periodicidade + cupom, já compostos).
+   * null no período = calculate ainda sem resposta → usa a âncora do próprio plano.
+   */
+  billingDiscounts?: { monthly: number | null; annual: number | null } | null;
+  /** Split 1º período × recorrente quando o cupom é de duração limitada. */
+  firstPeriodPricingByPeriod?: {
+    monthly: FirstPeriodPricing | null;
+    annual: FirstPeriodPricing | null;
+  } | null;
+  /** Pricing do plano escolhido: alimenta o badge enquanto o calculate não responde. */
+  planPricing?: UiPlan['pricing'] | null;
+}
+
+/** Mensal × anual do contrato, com o desconto e o total à vista de cada um. */
+export function BillingPeriodSelector({
+  value,
+  onChange,
+  disabledOptions = [],
+  calculatedPricing,
+  billingDiscounts,
+  firstPeriodPricingByPeriod,
+  planPricing,
+}: BillingPeriodSelectorProps) {
+  const translate = useTranslations('common.account.workspace.subscription.checkout.billing');
+  const translateFirstPeriod = useTranslations(
+    'common.account.workspace.subscription.checkout.firstPeriod'
+  );
+  const { currency, formatCurrencyNumber } = useCurrencyFormatter();
+  const isUsd = currency === 'usd';
+
+  // Badge enquanto o calculate não respondeu: âncora do próprio plano em contratação — o
+  // percentual varia por whitelabel, então nada de tabela estática.
+  const catalogBadgePercents = getPlanBadgePercents(planPricing);
+
+  return (
+    <div>
+      <span className="paragraph-xsmall-semibold text-zinc-600 mb-3 block">
+        {translate('sectionLabel')}
+      </span>
+
+      <div className="flex flex-col lg:flex-row gap-2 lg:gap-3">
+        {BILLING_OPTIONS.map((option) => {
+          const isSelected = value === option;
+          const isDisabled = disabledOptions.includes(option);
+          const price = calculatedPricing?.[option] ?? null;
+          const periodMonths = option === 'annual' ? 12 : 1;
+          // A opção anuncia o equivalente mensal e repete o total do período embaixo, para
+          // não sugerir que a cobrança anual é mensal.
+          const displayPrice = price != null ? price / periodMonths : price;
+          const billedLabel =
+            price != null && periodMonths > 1
+              ? translate('billedUpfront', { price: formatCurrencyNumber(price) })
+              : '';
+
+          const planFallbackDiscountPercent = catalogBadgePercents?.[option] ?? null;
+          const discountPercent = isUsd
+            ? null
+            : (billingDiscounts?.[option] ?? planFallbackDiscountPercent);
+          const badgeLabel =
+            discountPercent != null
+              ? translate('discountBadge', { percent: String(discountPercent) })
+              : isUsd && option === 'annual'
+                ? translate('catalogDiscountBadge', {
+                    percent: String(USD_CATALOG_MAX_ANNUAL_DISCOUNT_PERCENT),
+                  })
+                : null;
+
+          const firstPeriod = firstPeriodPricingByPeriod?.[option] ?? null;
+
+          return (
+            <button
+              key={option}
+              type="button"
+              disabled={isDisabled}
+              onClick={() => !isDisabled && onChange(option)}
+              className={cn(
+                'flex-1 text-left p-3 lg:p-4 rounded-lg border transition-all',
+                isDisabled
+                  ? 'border-zinc-200 bg-zinc-50 cursor-not-allowed opacity-50'
+                  : isSelected
+                    ? 'border-zinc-950 cursor-pointer'
+                    : 'border-zinc-200 bg-white shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)] cursor-pointer'
+              )}
+            >
+              <div className="flex items-center flex-wrap gap-1.5 lg:gap-2 mb-2">
+                <span className="paragraph-xsmall-semibold lg:paragraph-small-semibold text-zinc-950">
+                  {translate(option)}
+                </span>
+                {badgeLabel && (
+                  <span
+                    className={cn(
+                      'paragraph-xsmall-semibold h-6 flex items-center justify-center px-1.5 rounded-lg',
+                      discountPercent == null || discountPercent > 0
+                        ? 'bg-green-50 text-green-600 border border-green-100'
+                        : 'bg-zinc-50 text-zinc-600'
+                    )}
+                  >
+                    {badgeLabel}
+                  </span>
+                )}
+                <div
+                  className={cn(
+                    'size-[18px] rounded-full border-[1.6px] flex items-center justify-center ml-auto',
+                    isSelected ? 'border-zinc-950 bg-white' : 'border-zinc-200'
+                  )}
+                >
+                  {isSelected && <div className="size-[10px] rounded-full bg-zinc-950" />}
+                </div>
+              </div>
+
+              {price != null ? (
+                firstPeriod ? (
+                  /* Cupom só da(s) primeira(s) fatura(s): o preço cheio na linha principal
+                   * soaria permanente e contradiria o "depois" logo abaixo. */
+                  <span className="paragraph-medium-medium text-zinc-500">
+                    {translateFirstPeriod(getFirstPeriodLabelKey(option, firstPeriod), {
+                      price: formatCurrencyNumber(price),
+                      count: String(firstPeriod.durationMonths ?? ''),
+                    })}
+                    <span className="paragraph-xsmall-medium text-zinc-500 block">
+                      {translateFirstPeriod('then', {
+                        price: formatCurrencyNumber(firstPeriod.recurringPrice),
+                        suffix: translate(option === 'annual' ? 'suffixAnnual' : 'suffixMonthly'),
+                      })}
+                    </span>
+                  </span>
+                ) : (
+                  <span className="paragraph-medium-medium text-zinc-500">
+                    {formatCurrencyNumber(displayPrice ?? price)}
+                    <span className="paragraph-xsmall-semibold">{translate('suffixMonthly')}</span>
+                    {billedLabel && (
+                      <span className="paragraph-xsmall-medium block">{billedLabel}</span>
+                    )}
+                  </span>
+                )
+              ) : (
+                <Skeleton className="h-5 w-24" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/form/PaymentMethodToggle.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { IconBarcode, IconCreditCard, IconInfoCircle, IconQrcode } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../overlay/Tooltip';
+import { cn } from '../../../infra/utils/clsx';
+
+export type PaymentMethodOption = 'card' | 'boleto' | 'pix';
+
+type PaymentMethodToggleProps = {
+  value: PaymentMethodOption;
+  onChange: (method: PaymentMethodOption) => void;
+  disableBoleto?: boolean;
+  disableCard?: boolean;
+  disablePix?: boolean;
+  hideBoleto?: boolean;
+  hideCard?: boolean;
+  hidePix?: boolean;
+  boletoTooltip?: string;
+  cardTooltip?: string;
+  pixTooltip?: string;
+};
+
+const selectedClass = 'bg-white text-zinc-950 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]';
+const optionClass =
+  'flex items-center gap-1.5 px-3 py-1.5 rounded-lg paragraph-small-semibold transition-colors cursor-pointer';
+const disabledClass =
+  'flex items-center gap-1.5 px-3 py-1.5 rounded-lg paragraph-small-semibold text-zinc-950 opacity-40 cursor-not-allowed';
+
+/** Seletor de forma de pagamento (cartão, boleto e pix). Some quando só sobra uma opção. */
+export function PaymentMethodToggle({
+  value,
+  onChange,
+  disableBoleto = false,
+  disableCard = false,
+  disablePix = false,
+  hideBoleto = false,
+  hideCard = false,
+  hidePix = false,
+  boletoTooltip,
+  cardTooltip,
+  pixTooltip,
+}: PaymentMethodToggleProps) {
+  const translate = useTranslations('common.payment.methodToggle');
+
+  const visibleMethods = [!hideCard, !hideBoleto, !hidePix].filter(Boolean).length;
+  if (visibleMethods <= 1) return null;
+
+  const options: {
+    method: PaymentMethodOption;
+    hidden: boolean;
+    disabled: boolean;
+    tooltip: string;
+    label: string;
+    icon: typeof IconCreditCard;
+  }[] = [
+    {
+      method: 'card',
+      hidden: hideCard,
+      disabled: disableCard,
+      tooltip: cardTooltip ?? translate('cardTooltip'),
+      label: translate('card'),
+      icon: IconCreditCard,
+    },
+    {
+      method: 'boleto',
+      hidden: hideBoleto,
+      disabled: disableBoleto,
+      tooltip: boletoTooltip ?? translate('boletoTooltip'),
+      label: translate('boleto'),
+      icon: IconBarcode,
+    },
+    {
+      method: 'pix',
+      hidden: hidePix,
+      disabled: disablePix,
+      tooltip: pixTooltip ?? translate('pixTooltip'),
+      label: translate('pix'),
+      icon: IconQrcode,
+    },
+  ];
+
+  return (
+    <div className="inline-flex items-stretch h-12 rounded-[12px] bg-zinc-100 p-1.5 gap-1 w-fit">
+      {options.map(({ method, hidden, disabled, tooltip, label, icon: Icon }) => {
+        if (hidden) return null;
+
+        if (disabled) {
+          return (
+            <div key={method} className={disabledClass}>
+              <Icon size={20} className="shrink-0" />
+              {label}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <IconInfoCircle size={16} className="shrink-0" />
+                </TooltipTrigger>
+                <TooltipContent side="top" className="max-w-65">
+                  {tooltip}
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          );
+        }
+
+        return (
+          <button
+            key={method}
+            type="button"
+            onClick={() => onChange(method)}
+            className={cn(optionClass, value === method ? selectedClass : 'text-zinc-950')}
+          >
+            <Icon size={20} className="shrink-0" />
+            {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/form/RadioOptionFieldIcon.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { RadioGroupItem } from './RadioGroup';
+import { cn } from '../../../infra/utils/clsx';
+
+type RadioOptionFieldIconProps = {
+  value: string;
+  label: string;
+  isSelected: boolean;
+  icon: ReactNode;
+  description?: string;
+  id?: string;
+  disabled?: boolean;
+};
+
+/** Opção de rádio em cartão, com ícone à esquerda e descrição — usada na escolha de função do usuário. */
+export function RadioOptionFieldIcon({
+  value,
+  label,
+  description,
+  isSelected,
+  icon,
+  id,
+  disabled = false,
+}: RadioOptionFieldIconProps) {
+  const htmlForId = id || value;
+
+  return (
+    <label
+      htmlFor={htmlForId}
+      className={cn(
+        'flex items-center gap-4 p-4 rounded-lg transition-colors',
+        disabled
+          ? 'border-0 cursor-not-allowed bg-zinc-50'
+          : isSelected
+            ? 'border border-zinc-950 cursor-pointer'
+            : 'border border-zinc-200 hover:border-zinc-300 cursor-pointer'
+      )}
+    >
+      <div
+        className={cn(
+          'shrink-0 mt-0.5 bg-zinc-50 size-10! rounded-lg flex items-center justify-center',
+          disabled && 'opacity-80',
+          isSelected ? 'text-zinc-950' : 'text-zinc-600'
+        )}
+      >
+        {icon}
+      </div>
+      <div className="flex items-center justify-between gap-5 flex-1">
+        <div className={cn('flex flex-col gap-1', disabled && 'opacity-80')}>
+          <span className="paragraph-small-semibold text-zinc-950">{label}</span>
+          {description && <span className="paragraph-small-regular text-zinc-600">{description}</span>}
+        </div>
+        <RadioGroupItem
+          value={value}
+          id={htmlForId}
+          disabled={disabled}
+          className={cn('size-[18px] border-[1.5px] shrink-0', isSelected && 'border-zinc-950', disabled && 'opacity-80')}
+        />
+      </div>
+    </label>
+  );
+}

package/src/components/ui/form/SegmentedControl.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../../infra/utils/clsx';
+
+type SegmentedControlOption<Value extends string | number> = {
+  value: Value;
+  label: React.ReactNode;
+  className?: string;
+};
+
+interface SegmentedControlProps<Value extends string | number> {
+  value: Value;
+  onChange: (value: Value) => void;
+  options: SegmentedControlOption<Value>[];
+  className?: string;
+  optionClassName?: string;
+  selectedClassName?: string;
+  unselectedClassName?: string;
+}
+
+/** Alternador de opções curtas (periodicidade da vitrine, por exemplo). */
+export function SegmentedControl<Value extends string | number = string>({
+  value,
+  onChange,
+  options,
+  className,
+  optionClassName,
+  selectedClassName,
+  unselectedClassName,
+}: SegmentedControlProps<Value>) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+
+    event.preventDefault();
+    const currentIndex = options.findIndex((option) => option.value === value);
+    if (currentIndex === -1) return;
+
+    const direction = event.key === 'ArrowRight' ? 1 : -1;
+    const nextIndex = (currentIndex + direction + options.length) % options.length;
+    onChange(options[nextIndex].value);
+  };
+
+  const baseSelected =
+    selectedClassName ?? 'bg-white text-zinc-950 shadow-[0px_2px_10px_0px_rgba(26,26,26,0.05)]';
+  const baseUnselected = unselectedClassName ?? 'text-zinc-950';
+
+  return (
+    <div
+      className={cn('inline-flex items-stretch rounded-[12px] bg-zinc-100 p-1.5 gap-1', className)}
+      role="radiogroup"
+      onKeyDown={handleKeyDown}
+    >
+      {options.map((option) => {
+        const isActive = option.value === value;
+
+        return (
+          <button
+            key={String(option.value)}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            className={cn(
+              'px-3 py-1.5 rounded-lg paragraph-small-semibold transition-colors cursor-pointer',
+              isActive ? baseSelected : baseUnselected,
+              optionClassName,
+              option.className
+            )}
+            onClick={() => onChange(option.value)}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/overlay/Dialog.tsx

@@ -4,12 +4,44 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { IconX } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
-import { OverlayLayerContext, useDialogLayer, useOverlayLayer } from "./layers";
+import {
+  OverlayLayerContext,
+  OverlayTopContext,
+  useDialogLayer,
+  useIsTopOverlay,
+  useOverlayPosition,
+  useTopLayerScrollIsolation,
+} from "./layers";
 
 function Dialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+  const [openState, setOpenState] = React.useState(defaultOpen ?? false);
+  const { layer, isTop } = useOverlayPosition(open ?? openState);
+
+  const handleOpenChange = (next: boolean) => {
+    setOpenState(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <OverlayLayerContext.Provider value={layer}>
+      <OverlayTopContext.Provider value={isTop}>
+      <DialogPrimitive.Root
+        data-slot="dialog"
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={handleOpenChange}
+        modal={modal}
+        {...props}
+      />
+      </OverlayTopContext.Provider>
+    </OverlayLayerContext.Provider>
+  );
 }
 
 function DialogTrigger({
@@ -54,44 +86,49 @@ function DialogContent({
   showCloseButton = true,
   overlayClassName,
   hideOverlay = false,
+  ref,
   ...props
-}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
   overlayClassName?: string;
   hideOverlay?: boolean;
 }) {
-  const { layer, presenceRef } = useOverlayLayer();
+  const layer = useDialogLayer();
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  useTopLayerScrollIsolation(contentRef, useIsTopOverlay());
   return (
-    <OverlayLayerContext.Provider value={layer}>
-      <DialogPortal data-slot="dialog-portal">
-        {!hideOverlay && <DialogOverlay className={overlayClassName} />}
-        <DialogPrimitive.Content
-          ref={presenceRef}
-          data-slot="dialog-content"
-          className={cn(
-            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-            layer.content,
-            className,
-          )}
-          {...props}
-        >
-          {children}
-          {showCloseButton && (
-            <div className="absolute top-0.5 right-0">
-              <div className="p-4">
-                <DialogPrimitive.Close
-                  data-slot="dialog-close"
-                  className="hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
-                >
-                  <IconX className="size-[18px]" />
-                  <span className="sr-only">Close</span>
-                </DialogPrimitive.Close>
-              </div>
+    <DialogPortal data-slot="dialog-portal">
+      {!hideOverlay && <DialogOverlay className={overlayClassName} />}
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        ref={(node) => {
+          contentRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          layer.content,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <div className="absolute top-0.5 right-0">
+            <div className="p-4">
+              <DialogPrimitive.Close
+                data-slot="dialog-close"
+                className="hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
+              >
+                <IconX className="size-[18px]" />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
             </div>
-          )}
-        </DialogPrimitive.Content>
-      </DialogPortal>
-    </OverlayLayerContext.Provider>
+          </div>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
   );
 }