Pricing table

"use client";

import { useId, useState, type ComponentProps } from "react";
import { Badge } from "./badge";
import { Button } from "./button";
import { Icon } from "./icon";
import { Price } from "./price";
import { SegmentedControl } from "./segmented-control";
import { Select } from "./select";
import "./pricing-table.css";

export type Billing = "monthly" | "yearly";

export type PricingFeature = {
  label: string;
  /** true or false, or a value such as "10 GB", which counts as included. */
  included: boolean | string;
};

export type PricingPlan = {
  id: string;
  name: string;
  description?: string;
  /** Prices in major units. null is a custom price, shown as labels.custom. */
  price: { monthly: number; yearly: number } | null;
  /** Unit the price covers, such as "seat". */
  per?: string;
  /** Replaces the "Billed yearly" line under the price, such as "Free for up to 3 people". */
  priceNote?: string;
  features: PricingFeature[];
  cta: { label: string; href?: string };
  highlighted?: boolean;
  /** Badge text on the highlighted plan. */
  highlightLabel?: string;
};

export type PricingRow = { label: string; values: Record<string, boolean | string> };
export type PricingGroup = { label: string; rows: PricingRow[] };

export type PricingTableLabels = {
  billing: string;
  monthly: string;
  yearly: string;
  month: string;
  billedMonthly: string;
  billedYearly: string;
  per: string;
  custom: string;
  included: string;
  notIncluded: string;
  feature: string;
  showPlan: string;
};

const defaultLabels: PricingTableLabels = {
  billing: "Billing period",
  monthly: "Monthly",
  yearly: "Yearly",
  month: "month",
  billedMonthly: "Billed monthly",
  billedYearly: "Billed yearly",
  per: "per",
  custom: "Custom",
  included: "Included",
  notIncluded: "Not included",
  feature: "Feature",
  showPlan: "Show plan",
};

export type PricingTableProps = Omit<ComponentProps<"div">, "children" | "defaultValue"> & {
  plans: PricingPlan[];
  /** Controlled billing period. Pair it with onBillingChange. */
  billing?: Billing;
  defaultBilling?: Billing;
  onBillingChange?: (billing: Billing) => void;
  /** Short text beside the toggle, such as "Save 20%". */
  yearlyNote?: string;
  /** ISO 4217 code. */
  currency?: string;
  locale?: string;
  /** Cards side by side, or one comparison table. */
  variant?: "cards" | "matrix";
  /** Rows for the matrix. Without them the matrix lists every plan feature. */
  groups?: PricingGroup[];
  /** s is a compact board: names and prices only. */
  size?: "s" | "m";
  /** Heading level of each plan name in the cards. */
  headingLevel?: 2 | 3 | 4;
  /** Called with the plan id when a CTA without an href is pressed. */
  onPlanSelect?: (planId: string) => void;
  /** Words the part shows or reads out, for other languages. */
  labels?: Partial<PricingTableLabels>;
};

type Cell = boolean | string | undefined;

export function PricingTable({
  plans,
  billing,
  defaultBilling = "monthly",
  onBillingChange,
  yearlyNote,
  currency = "USD",
  locale = "en-US",
  variant = "cards",
  groups,
  size = "m",
  headingLevel = 3,
  onPlanSelect,
  labels: labelsIn,
  className,
  ...rest
}: PricingTableProps) {
  const uid = useId();
  const [innerBilling, setInnerBilling] = useState<Billing>(defaultBilling);
  const period = billing ?? innerBilling;
  const highlighted = plans.find((p) => p.highlighted) ?? plans[0];
  const [shown, setShown] = useState(highlighted?.id ?? "");
  const labels = { ...defaultLabels, ...labelsIn };
  const compact = size === "s";
  const Heading = `h${headingLevel}` as "h3";

  const money = new Intl.NumberFormat(locale, { style: "currency", currency, trailingZeroDisplay: "stripIfInteger" });

  const setBilling = (next: string) => {
    const b: Billing = next === "yearly" ? "yearly" : "monthly";
    if (billing === undefined) setInnerBilling(b);
    onBillingChange?.(b);
  };

  const billedLine = (plan: PricingPlan) => {
    if (plan.priceNote) return plan.priceNote;
    if (!plan.price) return "";
    const total = period === "yearly" ? plan.price.yearly : plan.price.monthly;
    if (total === 0) return "";
    if (period === "monthly") return labels.billedMonthly;
    return `${labels.billedYearly}, ${money.format(total)}${plan.per ? ` ${labels.per} ${plan.per}` : ""}`;
  };

  const figure = (plan: PricingPlan, priceSize: "s" | "m" | "l") =>
    plan.price ? (
      <Price
        amount={period === "yearly" ? plan.price.yearly / 12 : plan.price.monthly}
        currency={currency}
        locale={locale}
        per={plan.per}
        period={labels.month}
        size={priceSize}
      />
    ) : (
      <span className="eq-pricing-table-custom" data-size={priceSize}>
        {labels.custom}
      </span>
    );

  const cta = (plan: PricingPlan) => {
    const accent = plan.highlighted === true;
    if (plan.cta.href) {
      return (
        <Button className="eq-pricing-table-cta" variant={accent ? "accent" : "outline"} href={plan.cta.href}>
          {plan.cta.label}
        </Button>
      );
    }
    return (
      <Button
        className="eq-pricing-table-cta"
        variant={accent ? "accent" : "outline"}
        onClick={() => onPlanSelect?.(plan.id)}
      >
        {plan.cta.label}
      </Button>
    );
  };

  const mark = (value: Cell, separator = "") => {
    const on = value !== undefined && value !== false && value !== "";
    return (
      <>
        <Icon className="eq-pricing-table-mark" name={on ? "check" : "minus"} size="s" data-on={on || undefined} />
        <span className="eq-pricing-table-hidden">{`${on ? labels.included : labels.notIncluded}${separator}`}</span>
      </>
    );
  };

  const hasPrices = plans.some((p) => p.price !== null);
  const hasDescriptions = !compact && plans.some((p) => p.description);

  const toggle = hasPrices && (
    <div className="eq-pricing-table-billing">
      <SegmentedControl
        legend={labels.billing}
        hideLegend
        name={`${uid}-billing`}
        value={period}
        onValueChange={setBilling}
        options={[
          { value: "monthly", label: labels.monthly },
          { value: "yearly", label: labels.yearly },
        ]}
      />
      {yearlyNote && !compact && (
        <Badge className="eq-pricing-table-note" tone="ok">
          {yearlyNote}
        </Badge>
      )}
    </div>
  );

  const root = {
    ...rest,
    className: ["eq-pricing-table", className].filter(Boolean).join(" "),
    "data-variant": variant,
    "data-size": size,
    "data-count": plans.length,
  };

  if (variant === "matrix") {
    const rows: PricingGroup[] =
      groups ??
      [
        {
          label: "",
          rows: [...new Set(plans.flatMap((p) => p.features.map((f) => f.label)))].map((label) => ({
            label,
            values: Object.fromEntries(
              plans.map((p) => [p.id, p.features.find((f) => f.label === label)?.included ?? false]),
            ),
          })),
        },
      ];
    const off = (plan: PricingPlan) => (plan.id !== shown ? true : undefined);

    return (
      <div {...root}>
        <div className="eq-pricing-table-bar">
          {toggle}
          <Select
            className="eq-pricing-table-pick"
            id={`${uid}-plan`}
            label={labels.showPlan}
            size="s"
            value={shown}
            onChange={(event) => setShown(event.currentTarget.value)}
          >
            {plans.map((plan) => (
              <option key={plan.id} value={plan.id}>
                {plan.name}
              </option>
            ))}
          </Select>
        </div>
        <table className="eq-pricing-table-matrix">
          <thead>
            <tr>
              <td className="eq-pricing-table-corner">
                <span className="eq-pricing-table-hidden">{labels.feature}</span>
              </td>
              {plans.map((plan) => (
                <th
                  key={plan.id}
                  scope="col"
                  className="eq-pricing-table-head"
                  data-highlighted={plan.highlighted || undefined}
                  data-off={off(plan)}
                >
                  <span className="eq-pricing-table-name">{plan.name}</span>
                  {plan.highlighted && plan.highlightLabel && (
                    <Badge className="eq-pricing-table-badge" variant="solid">
                      {plan.highlightLabel}
                    </Badge>
                  )}
                  <span className="eq-pricing-table-price">{figure(plan, "m")}</span>
                  <span className="eq-pricing-table-billed">{billedLine(plan)}</span>
                </th>
              ))}
            </tr>
          </thead>
          {rows.map((group, g) => (
            <tbody key={g} className="eq-pricing-table-group">
              {group.label && (
                <tr>
                  <th scope="rowgroup" colSpan={plans.length + 1} className="eq-pricing-table-group-label">
                    {group.label}
                  </th>
                </tr>
              )}
              {group.rows.map((row) => (
                <tr key={row.label} className="eq-pricing-table-row">
                  <th scope="row" className="eq-pricing-table-row-label">
                    {row.label}
                  </th>
                  {plans.map((plan) => {
                    const value = row.values[plan.id];
                    return (
                      <td
                        key={plan.id}
                        className="eq-pricing-table-cell"
                        data-highlighted={plan.highlighted || undefined}
                        data-off={off(plan)}
                      >
                        {typeof value === "string" && value !== "" ? (
                          <span className="eq-pricing-table-value">{value}</span>
                        ) : (
                          mark(value)
                        )}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          ))}
          <tfoot>
            <tr>
              <td className="eq-pricing-table-corner" />
              {plans.map((plan) => (
                <td
                  key={plan.id}
                  className="eq-pricing-table-cell"
                  data-highlighted={plan.highlighted || undefined}
                  data-off={off(plan)}
                >
                  {cta(plan)}
                </td>
              ))}
            </tr>
          </tfoot>
        </table>
      </div>
    );
  }

  return (
    <div {...root}>
      {toggle}
      <div className="eq-pricing-table-plans">
        {plans.map((plan) => {
          const headingId = `${uid}-${plan.id}`;
          return (
            <article
              key={plan.id}
              className="eq-pricing-table-plan"
              aria-labelledby={headingId}
              data-highlighted={plan.highlighted || undefined}
              data-rows={compact ? 2 : hasDescriptions ? 5 : 4}
            >
              <div className="eq-pricing-table-header">
                <Heading className="eq-pricing-table-name" id={headingId}>
                  {plan.name}
                </Heading>
                {plan.highlighted && plan.highlightLabel && !compact && (
                  <Badge className="eq-pricing-table-badge" variant="solid">
                    {plan.highlightLabel}
                  </Badge>
                )}
              </div>
              {hasDescriptions && <p className="eq-pricing-table-description">{plan.description}</p>}
              <div className="eq-pricing-table-price">
                {figure(plan, compact ? "m" : "l")}
                {!compact && <span className="eq-pricing-table-billed">{billedLine(plan)}</span>}
              </div>
              {!compact && cta(plan)}
              {!compact && (
                <ul className="eq-pricing-table-features">
                  {plan.features.map((feature) => (
                    <li
                      key={feature.label}
                      className="eq-pricing-table-feature"
                      data-included={feature.included !== false && feature.included !== "" ? true : undefined}
                    >
                      {mark(feature.included, ", ")}
                      <span className="eq-pricing-table-feature-label">{feature.label}</span>
                      {typeof feature.included === "string" && (
                        <span className="eq-pricing-table-value">{feature.included}</span>
                      )}
                    </li>
                  ))}
                </ul>
              )}
            </article>
          );
        })}
      </div>
    </div>
  );
}