@tribe-nest/forge 3.11.0 → 3.17.0

package/src/ui/styled/EventTickets.tsx

@@ -5,6 +5,7 @@ import { useEventCheckout } from "../headless/event/useEventCheckout";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay, summarizeTaxQuote } from "../format/PriceDisplay";
+import { clampChosenAmount, isPayWhatYouWant, pwywDefaultAmount, pwywMaximum } from "../format/pwyw";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
@@ -282,6 +283,12 @@ function TicketStep({
                         {fmt(Number(ticket.compareAtPrice))}
                       </span>
                     )}
+                    {/* On a PWYW tier `price` is the FLOOR, so it is labelled as
+                        one — showing it bare would read as a fixed price the
+                        buyer is about to be charged. */}
+                    {isPayWhatYouWant(ticket) && (
+                      <span style={{ fontSize: 14, fontWeight: 500, opacity: 0.7, marginRight: 6 }}>from</span>
+                    )}
                     <PriceDisplay amount={Number(ticket.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={theme.colors.text} captionStyle={{ opacity: 0.65 }} />
                   </div>
                 </div>
@@ -305,6 +312,20 @@ function TicketStep({
                   </button>
                 </div>
               </div>
+              {/* The amount box appears only once a seat is actually selected —
+                  before that there is nothing to price, and a row of empty
+                  inputs down the tier list reads as a form to fill in rather
+                  than a choice to make. */}
+              {isPayWhatYouWant(ticket) && selectedQty > 0 && !isSoldOut && !isExpired && (
+                <PwywAmountField
+                  ticket={ticket}
+                  quantity={selectedQty}
+                  value={c.pwywAmounts[ticket.id]}
+                  onChange={(amount) => c.setTicketAmount(ticket.id, amount)}
+                  fmt={fmt}
+                  theme={theme}
+                />
+              )}
               {ticket.description && (
                 <p dangerouslySetInnerHTML={{ __html: ticket.description }} style={{ marginTop: 12, fontSize: 14 }} />
               )}
@@ -669,6 +690,99 @@ const closeButtonStyle = (t: ForgeTheme): CSSProperties => ({
   opacity: 0.7,
 });
 
+/**
+ * The buyer's "what will you pay?" box for one pay-what-you-want tier.
+ *
+ * Holds its own STRING state rather than binding the number straight through.
+ * Two reasons, both of which are broken inputs if you skip them: an empty box
+ * has to stay empty while the buyer retypes (a number-bound input snaps it back
+ * to the floor on every keystroke), and "1" on the way to "15" must not be
+ * clamped up to the minimum the instant it is typed.
+ *
+ * Correction happens on BLUR, when the buyer has finished — and the server
+ * clamps again regardless, so nothing here is load-bearing for money.
+ */
+function PwywAmountField({
+  ticket,
+  quantity,
+  value,
+  onChange,
+  fmt,
+  theme,
+}: {
+  ticket: ITicket;
+  quantity: number;
+  value: number | undefined;
+  onChange: (amount: number | null) => void;
+  fmt: (amount: number) => string;
+  theme: ForgeTheme;
+}) {
+  const floor = Number(ticket.price);
+  const maximum = pwywMaximum(ticket);
+  const suggested = pwywDefaultAmount(ticket);
+  const [draft, setDraft] = useState<string>(String(value ?? suggested));
+
+  // Follow the tier's own default when the buyer hasn't typed anything — an
+  // operator's suggested amount arriving late (or the selection being cleared
+  // and remade) should re-seed the box rather than leave a stale figure.
+  useEffect(() => {
+    if (value == null) setDraft(String(suggested));
+  }, [value, suggested]);
+
+  const parsed = Number(draft);
+  const effective = Number.isFinite(parsed) ? clampChosenAmount(ticket, parsed) : floor;
+  const belowFloor = draft.trim() !== "" && Number.isFinite(parsed) && parsed < floor;
+  const aboveMax = maximum != null && Number.isFinite(parsed) && parsed > maximum;
+
+  const commit = () => {
+    if (draft.trim() === "" || !Number.isFinite(parsed)) {
+      onChange(null);
+      setDraft(String(suggested));
+      return;
+    }
+    const clamped = clampChosenAmount(ticket, parsed);
+    onChange(clamped);
+    setDraft(String(clamped));
+  };
+
+  return (
+    <div style={{ marginTop: 12 }}>
+      <label
+        htmlFor={`pwyw-${ticket.id}`}
+        style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6 }}
+      >
+        Name your price
+        <span style={{ fontWeight: 400, opacity: 0.7 }}>
+          {" "}
+          — minimum {fmt(floor)}
+          {maximum != null ? `, up to ${fmt(maximum)}` : ""}
+        </span>
+      </label>
+      <input
+        id={`pwyw-${ticket.id}`}
+        type="number"
+        inputMode="decimal"
+        min={floor}
+        {...(maximum != null ? { max: maximum } : {})}
+        step="0.01"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        style={{ ...inputStyle(theme), maxWidth: 200 }}
+      />
+      <p style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>
+        {belowFloor
+          ? `The minimum is ${fmt(floor)} — we'll use that.`
+          : aboveMax
+            ? `The most you can pay is ${fmt(maximum!)} — we'll use that.`
+            : quantity > 1
+              ? `${fmt(effective)} each · ${fmt(effective * quantity)} for ${quantity}`
+              : "Per ticket."}
+      </p>
+    </div>
+  );
+}
+
 const stepperStyle = (t: ForgeTheme, filled: boolean): CSSProperties => ({
   width: 40,
   height: 40,

package/src/ui/styled/ProductBrowseNav.tsx

@@ -0,0 +1,212 @@
+import { useState } from "react";
+import {
+  useProductCategories,
+  useProductCollections,
+  type IPublicProductCategory,
+} from "../../data/queries/useProducts";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface ProductBrowseNavProps {
+  /** The currently browsed category, so the nav can mark it. */
+  activeCategoryId?: string;
+  activeCollectionId?: string;
+  /**
+   * Where a category leads. Router-agnostic on purpose: Forge has no router,
+   * so the host decides the path.
+   */
+  hrefForCategory?: (category: IPublicProductCategory) => string;
+  hrefForCollection?: (collection: { id: string; slug: string; title: string }) => string;
+  onSelectCategory?: (category: IPublicProductCategory) => void;
+  onSelectCollection?: (collection: { id: string; slug: string; title: string }) => void;
+  /** Hide collections and show only the category tree, or vice versa. */
+  show?: "all" | "categories" | "collections";
+  /** Show only collections the creator marked as featured. */
+  featuredCollectionsOnly?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Storefront navigation over the creator's OWN taxonomy.
+ *
+ * Two things it deliberately does not do:
+ *
+ * - **It does not show product types.** Music / Merch / Digital / Service is
+ *   what a product IS; this is how the creator chose to shelve their catalogue.
+ *   Mixing them into one list is the conflation the taxonomy split undid.
+ * - **It does not hide empty branches by counting children.** The counts are
+ *   descendant-inclusive server-side, so a parent with products only in its
+ *   grandchildren still reads as non-empty — which is correct, because browsing
+ *   it returns those products.
+ */
+export function ProductBrowseNav({
+  activeCategoryId,
+  activeCollectionId,
+  hrefForCategory,
+  hrefForCollection,
+  onSelectCategory,
+  onSelectCollection,
+  show = "all",
+  featuredCollectionsOnly = false,
+  className,
+  style,
+}: ProductBrowseNavProps) {
+  const t = useThemeTokens();
+  const categoriesQuery = useProductCategories();
+  const collectionsQuery = useProductCollections();
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const showCategories = show === "all" || show === "categories";
+  const showCollections = show === "all" || show === "collections";
+
+  if (categoriesQuery.isLoading || collectionsQuery.isLoading) return <Loading />;
+
+  const categories = categoriesQuery.data ?? [];
+  const collections = (collectionsQuery.data ?? []).filter((c) =>
+    featuredCollectionsOnly ? c.isFeatured : true,
+  );
+
+  // A creator who has authored no taxonomy gets no nav at all rather than an
+  // empty heading — the storefront should look unchanged until they use it.
+  if (!categories.length && !collections.length) return null;
+
+  const toggle = (id: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  const renderCategory = (category: IPublicProductCategory, depth: number): React.ReactNode => {
+    const children = category.children ?? [];
+    const isActive = category.id === activeCategoryId;
+    // A branch containing the active category opens so the reader can see
+    // where they are, without needing to remember the path.
+    const containsActive = (node: IPublicProductCategory): boolean =>
+      node.id === activeCategoryId || (node.children ?? []).some(containsActive);
+    const isOpen = expanded.has(category.id) || containsActive(category);
+
+    const label = (
+      <>
+        <span>{category.title}</span>
+        <span style={{ color: t.muted, fontSize: 12, marginLeft: 8 }}>{category.productCount}</span>
+      </>
+    );
+
+    const linkStyle: React.CSSProperties = {
+      display: "inline-flex",
+      alignItems: "baseline",
+      color: isActive ? t.primary : t.text,
+      fontWeight: isActive ? 600 : 400,
+      textDecoration: "none",
+      background: "none",
+      border: "none",
+      padding: 0,
+      cursor: "pointer",
+      font: "inherit",
+      textAlign: "left",
+    };
+
+    const href = hrefForCategory?.(category);
+
+    return (
+      <li key={category.id} style={{ paddingLeft: depth * 14, listStyle: "none", marginBottom: 6 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          {children.length > 0 && (
+            <button
+              type="button"
+              onClick={() => toggle(category.id)}
+              aria-expanded={isOpen}
+              aria-label={isOpen ? `Collapse ${category.title}` : `Expand ${category.title}`}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: t.muted,
+                padding: 0,
+                lineHeight: 1,
+                width: 12,
+              }}
+            >
+              {isOpen ? "−" : "+"}
+            </button>
+          )}
+          {children.length === 0 && <span style={{ width: 12 }} />}
+
+          {href ? (
+            <a href={href} style={linkStyle} aria-current={isActive ? "page" : undefined}>
+              {label}
+            </a>
+          ) : (
+            <button type="button" style={linkStyle} onClick={() => onSelectCategory?.(category)}>
+              {label}
+            </button>
+          )}
+        </div>
+
+        {isOpen && children.length > 0 && (
+          <ul style={{ margin: "6px 0 0", padding: 0 }}>
+            {children.map((child) => renderCategory(child, depth + 1))}
+          </ul>
+        )}
+      </li>
+    );
+  };
+
+  const headingStyle: React.CSSProperties = {
+    color: t.muted,
+    fontSize: 12,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    margin: "0 0 10px",
+  };
+
+  return (
+    <nav className={className} style={{ display: "grid", gap: 24, ...style }} aria-label="Browse the store">
+      {showCategories && categories.length > 0 && (
+        <div>
+          <h2 style={headingStyle}>Categories</h2>
+          <ul style={{ margin: 0, padding: 0 }}>{categories.map((c) => renderCategory(c, 0))}</ul>
+        </div>
+      )}
+
+      {showCollections && collections.length > 0 && (
+        <div>
+          <h2 style={headingStyle}>Collections</h2>
+          <ul style={{ margin: 0, padding: 0 }}>
+            {collections.map((collection) => {
+              const isActive = collection.id === activeCollectionId;
+              const href = hrefForCollection?.(collection);
+              const linkStyle: React.CSSProperties = {
+                color: isActive ? t.primary : t.text,
+                fontWeight: isActive ? 600 : 400,
+                textDecoration: "none",
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                font: "inherit",
+              };
+              return (
+                <li key={collection.id} style={{ listStyle: "none", marginBottom: 6 }}>
+                  {href ? (
+                    <a href={href} style={linkStyle} aria-current={isActive ? "page" : undefined}>
+                      {collection.title}
+                    </a>
+                  ) : (
+                    <button type="button" style={linkStyle} onClick={() => onSelectCollection?.(collection)}>
+                      {collection.title}
+                    </button>
+                  )}
+                  <span style={{ color: t.muted, fontSize: 12, marginLeft: 8 }}>{collection.productCount}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </nav>
+  );
+}