Line items

"use client";
import * as React from "react";
import { type LineItem, LineItems } from "@/components/ui/notchset/blocks/line-items";
import { Button } from "@/components/ui/notchset/button";

/* a two-year contract: yearly prices count twice in a line's total, and the term is said beside each price */
const TERM = 2;
const PRODUCTS = [
  { id: "g", name: "Growth seat", unit: 576, per: `per seat a year · ${TERM}-year term`, years: TERM },
  { id: "eu", name: "EU data residency", unit: 4400, per: `a year · ${TERM}-year term`, years: TERM },
  { id: "ob", name: "Onboarding", unit: 9500, per: "once", years: 1 },
];
const usd = (n: number) => "$" + Math.round(n).toLocaleString("en-US");

export default function LineItemsDemo() {
  const [rows, setRows] = React.useState([{ id: "g", qty: 120, disc: 10 }, { id: "eu", qty: 1, disc: 0 }]);
  const product = (id: string) => PRODUCTS.find((p) => p.id === id)!;
  const lines: LineItem[] = rows.map((r) => {
    const p = product(r.id);
    return { key: r.id, product: p.name, qty: r.qty, unit: usd(p.unit), per: p.per, disc: r.disc, total: usd(r.qty * p.unit * p.years * (1 - r.disc / 100)) };
  });
  /* a value it can't take returns the words to fix it; null saves it */
  /* a quantity is whole seats or units, 1 or more; a discount may have a decimal */
  const set = (k: "qty" | "disc", max: number) => (i: number, raw: string) => {
    const n = Number(raw);
    if (k === "qty" && !(raw.trim() && Number.isInteger(n) && n >= 1 && n <= max)) return "A whole number, like 25";
    if (!raw.trim() || !Number.isFinite(n) || n < 0 || n > max) return `0 to ${max}%`;
    setRows((rs) => rs.map((r, j) => (j === i ? { ...r, [k]: n } : r)));
    return null;
  };
  const next = PRODUCTS.find((p) => !rows.some((r) => r.id === p.id));
  return (
    <div className="flex w-full flex-col gap-3">
      <Button size="sm" className="self-start" disabled={!next} onClick={() => next && setRows((rs) => [...rs, { id: next.id, qty: 1, disc: 0 }])}>
        Add a line
      </Button>
      <LineItems editable lines={lines} names={rows.map((r) => product(r.id).name)} onQty={set("qty", 100000)} onDisc={set("disc", 100)} onRemove={(i) => setRows((rs) => rs.filter((_, j) => j !== i))} empty="No lines yet." />
    </div>
  );
}