@tribe-nest/forge 3.21.0 → 3.23.0

package/src/ui/styled/PresaleCode.tsx

@@ -0,0 +1,174 @@
+import type { CSSProperties } from "react";
+import { KeyRound } from "lucide-react";
+import type { PresaleCodeField } from "../headless/event/usePresaleCode";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { buttonStyle } from "./Button";
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+export interface PresaleCodeFieldProps {
+  presale: PresaleCodeField;
+  /** Collapsed-state prompt. */
+  promptText?: string;
+  /** Extra class(es) on the root. */
+  className?: string;
+  /** Inline style merged LAST (callers can override). */
+  style?: CSSProperties;
+}
+
+/**
+ * The box a buyer types a presale code into (Events 1.2).
+ *
+ * **Renders nothing at all unless the event actually has a coded tier.** That
+ * is the single most important thing about it: a code box on an ordinary event
+ * tells the buyer there is a secret they are missing, and they have no way to
+ * find out there isn't. `presale.visible` comes from the server, because a
+ * hidden tier is filtered out of the response and no client can tell a presale
+ * apart from an event that has not put tickets on sale yet.
+ *
+ * Three states, three different jobs:
+ *
+ * - **Idle** — an inline prompt. Small, because most visitors have no code and
+ *   should not feel gated.
+ * - **Accepted** — confirms it worked, with a way out. Without this, a code for
+ *   a tier that was already VISIBLE (code-gated but listed) would appear to do
+ *   nothing at all.
+ * - **Rejected** — says the code is not valid for this event and stops. It
+ *   names no tier and confirms no partial guess; a box that said "that isn't
+ *   the VIP code" would be a way to enumerate them.
+ */
+export function PresaleCodeField({
+  presale,
+  promptText = "Have a presale code?",
+  className,
+  style,
+}: PresaleCodeFieldProps) {
+  const theme = useForgeTheme();
+  if (!presale.visible) return null;
+
+  const isChecking = presale.status === "checking";
+  const isRejected = presale.status === "rejected";
+
+  if (presale.isUnlocked) {
+    return (
+      <div
+        data-testid="presale-code-applied"
+        className={className}
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: 8,
+          padding: 12,
+          borderRadius: theme.cornerRadius,
+          background: a(theme.colors.primary, 0.1),
+          fontFamily: theme.fontFamily,
+          ...style,
+        }}
+      >
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 14,
+            fontWeight: 600,
+            color: theme.colors.primary,
+          }}
+        >
+          <KeyRound size={14} />
+          Presale unlocked: {presale.code}
+        </span>
+        <button
+          type="button"
+          data-testid="presale-code-remove"
+          onClick={presale.clear}
+          style={{
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            fontSize: 13,
+            textDecoration: "underline",
+            cursor: "pointer",
+            color: theme.colors.text,
+            fontFamily: theme.fontFamily,
+          }}
+        >
+          Remove
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="presale-code"
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 8, fontFamily: theme.fontFamily, ...style }}
+    >
+      <label
+        htmlFor="presale-code-input"
+        style={{ fontSize: 14, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6 }}
+      >
+        <KeyRound size={14} />
+        {promptText}
+      </label>
+      <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
+        <input
+          id="presale-code-input"
+          data-testid="presale-code-input"
+          placeholder="Enter code"
+          value={presale.input}
+          onChange={(e) => presale.setInput(e.target.value.toUpperCase())}
+          // Enter is what a buyer does after typing a code into a one-field
+          // form; without this it either does nothing or submits the checkout
+          // form this box sits inside.
+          onKeyDown={(e) => {
+            if (e.key !== "Enter") return;
+            e.preventDefault();
+            presale.submit();
+          }}
+          aria-invalid={isRejected || undefined}
+          aria-describedby={presale.message ? "presale-code-message" : undefined}
+          style={{ ...inputStyle(theme), flex: 1 }}
+        />
+        <button
+          type="button"
+          data-testid="presale-code-apply"
+          onClick={presale.submit}
+          disabled={isChecking || !presale.input.trim()}
+          style={{
+            ...buttonStyle(theme, { variant: "primary" }),
+            opacity: isChecking || !presale.input.trim() ? 0.6 : 1,
+          }}
+        >
+          {isChecking ? "Checking…" : "Unlock"}
+        </button>
+      </div>
+      {presale.message && (
+        <p
+          id="presale-code-message"
+          data-testid="presale-code-message"
+          role={isRejected ? "alert" : undefined}
+          // Refusal is the one place a non-theme colour is right: red is the
+          // convention for "this input is wrong", and the artist's primary
+          // could be any hue including a green.
+          style={{ color: isRejected ? "#ef4444" : theme.colors.primary, fontSize: 13, margin: 0 }}
+        >
+          {presale.message}
+        </p>
+      )}
+    </div>
+  );
+}
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+});

package/src/ui/styled/ProductDetail.tsx

@@ -6,6 +6,7 @@ import { useVariantSelection } from "../headless/useVariantSelection";
 import { useGetProduct } from "../../data/queries/useProducts";
 import { useCart } from "../../contexts/CartContext";
 import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
+import { MembershipGateNotice } from "./MembershipGateNotice";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -35,6 +36,10 @@ export interface ProductDetailProps {
    */
   hrefForCategory?: (category: { id: string; slug: string; title: string }) => string;
   hrefForCollection?: (collection: { id: string; slug: string; title: string }) => string;
+  /** Where a members-only product sends a signed-OUT visitor. Default `/login`. */
+  loginPath?: string;
+  /** Where a members-only product sends a signed-in NON-member. Default `/membership`. */
+  membershipPath?: string;
 }
 
 const a = (hex: string, al: number) => hex + Math.round(al * 255).toString(16).padStart(2, "0");
@@ -55,6 +60,8 @@ export function ProductDetail({
   initialProduct,
   hrefForCategory,
   hrefForCollection,
+  loginPath,
+  membershipPath,
 }: ProductDetailProps) {
   const t = useThemeTokens();
   const { data: product, isLoading } = useGetProduct(slug, { initialData: initialProduct });
@@ -68,7 +75,15 @@ export function ProductDetail({
   // music (audio player over a PDF, etc.).
   const isMusic = product.productType === ProductType.Music;
   return isMusic ? (
-    <MusicDetail product={product} fmt={fmt} checkoutPath={checkoutPath} className={className} style={style} />
+    <MusicDetail
+      product={product}
+      fmt={fmt}
+      checkoutPath={checkoutPath}
+      className={className}
+      style={style}
+      loginPath={loginPath}
+      membershipPath={membershipPath}
+    />
   ) : (
     <StandardDetail
       product={product}
@@ -78,6 +93,8 @@ export function ProductDetail({
       style={style}
       hrefForCategory={hrefForCategory}
       hrefForCollection={hrefForCollection}
+      loginPath={loginPath}
+      membershipPath={membershipPath}
     />
   );
 }
@@ -141,6 +158,8 @@ function StandardDetail({
   style,
   hrefForCategory,
   hrefForCollection,
+  loginPath,
+  membershipPath,
 }: {
   product: IPublicProduct;
   fmt: (n: number) => string;
@@ -149,6 +168,8 @@ function StandardDetail({
   style?: React.CSSProperties;
   hrefForCategory?: (category: { id: string; slug: string; title: string }) => string;
   hrefForCollection?: (collection: { id: string; slug: string; title: string }) => string;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const t = useThemeTokens();
   // Inclusive stores caption the price as tax-inclusive (display only).
@@ -187,8 +208,24 @@ function StandardDetail({
   }, []);
 
   const outOfStock = !!selectedVariant && selectedVariant.availabilityStatus !== "active";
-  const canAdd = !!selectedVariant && !outOfStock;
-  const label = !selectedVariant ? "Select options" : outOfStock ? "Out of stock" : "Add to cart";
+  /**
+   * A members-only product the buyer cannot have (S.4).
+   *
+   * The product is LISTED rather than hidden — "Gold members get first refusal
+   * on the vinyl" only works as an offer if non-members can see it — so the page
+   * has to name the restriction and offer the way through. Without this the
+   * buyer adds it to a cart, fills in checkout, and `createOrder` refuses them
+   * at the end.
+   */
+  const isGated = !!product.membershipGate && !product.membershipGate.allowed;
+  const canAdd = !!selectedVariant && !outOfStock && !isGated;
+  const label = isGated
+    ? "Members only"
+    : !selectedVariant
+      ? "Select options"
+      : outOfStock
+        ? "Out of stock"
+        : "Add to cart";
   const addToCart = () => {
     if (!canAdd || !selectedVariant) return;
     add(selectedVariant, { quantity, coverImage: images[imageIndex]?.url ?? images[0]?.url });
@@ -338,6 +375,17 @@ function StandardDetail({
             <AddButton innerRef={addRef} />
           </div>
 
+          {/* Directly under the disabled button, because "Members only" on a
+              dead button is a locked door; this is the key beside it. */}
+          <MembershipGateNotice
+            gate={product.membershipGate}
+            variant="card"
+            itemLabel="This product"
+            loginPath={loginPath}
+            membershipPath={membershipPath}
+            style={{ marginTop: 12 }}
+          />
+
           <div style={{ margin: "16px 0", opacity: 0.9 }}>
             <RichText html={product.description || ""} />
           </div>
@@ -453,12 +501,16 @@ function MusicDetail({
   checkoutPath,
   className,
   style,
+  loginPath,
+  membershipPath,
 }: {
   product: IPublicProduct;
   fmt: (n: number) => string;
   checkoutPath: string;
   className?: string;
   style?: React.CSSProperties;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const t = useThemeTokens();
   // Inclusive stores caption the price as tax-inclusive (display only).
@@ -470,6 +522,8 @@ function MusicDetail({
   // exactly what this used to: the default variant.
   const { axes, selection, select, selectedVariant } = useVariantSelection(product.variants);
   const defaultVariant = selectedVariant ?? product.variants.find((v) => v.isDefault) ?? product.variants[0];
+  /** Members-only release (S.4) — announced, so the buy buttons must say so. */
+  const isGated = !!product.membershipGate && !product.membershipGate.allowed;
   // The TRACKLIST is the release's contents and does not depend on which
   // version is selected — every version of an album has the same songs.
   const tracks = defaultVariant?.tracks ?? [];
@@ -604,11 +658,27 @@ function MusicDetail({
               ))}
 
               <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 4 }}>
-                <Button onClick={() => buyNow(defaultVariant, { canIncreaseQuantity: false })}>Buy now</Button>
-                <Button variant="outline" onClick={() => add(defaultVariant, { canIncreaseQuantity: false })}>
+                <Button disabled={isGated} onClick={() => buyNow(defaultVariant, { canIncreaseQuantity: false })}>
+                  Buy now
+                </Button>
+                <Button
+                  variant="outline"
+                  disabled={isGated}
+                  onClick={() => add(defaultVariant, { canIncreaseQuantity: false })}
+                >
                   Add to cart
                 </Button>
               </div>
+              {/* A gated release is still listed and still PLAYABLE — the
+                  preview is the upsell. What changes is that the buy buttons say
+                  why they are dead and where to go. */}
+              <MembershipGateNotice
+                gate={product.membershipGate}
+                variant="badge"
+                itemLabel="This release"
+                loginPath={loginPath}
+                membershipPath={membershipPath}
+              />
             </div>
           </div>
         </div>

package/src/ui/styled/ProductGrid.tsx

@@ -1,3 +1,4 @@
+import { Lock } from "lucide-react";
 import { useGetProducts, useGetProductsByIds } from "../../data/queries/useProducts";
 import type { IPublicProduct, ProductType } from "../../types/models";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
@@ -120,6 +121,31 @@ export function ProductGrid({
             </div>
             <div style={{ padding: 10 }}>
               <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{p.title}</div>
+              {/* The listing announces the gate rather than hiding the row —
+                  hiding it would kill the very upsell a members-only product
+                  exists for. A card is too small for the full prompt, so it
+                  carries the label and the detail page carries the action. */}
+              {p.membershipGate && !p.membershipGate.allowed && (
+                <div
+                  data-testid="membership-gate-card-badge"
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 4,
+                    padding: "1px 6px",
+                    marginBottom: 4,
+                    borderRadius: 6,
+                    fontSize: 11,
+                    fontWeight: 700,
+                    background: `${t.primary}1a`,
+                    color: t.primary,
+                    border: `1px solid ${t.primary}4d`,
+                  }}
+                >
+                  <Lock size={10} aria-hidden />
+                  Members only
+                </div>
+              )}
               <div style={{ color: t.primary, fontWeight: 600, fontSize: 14 }}>
                 <PriceDisplay amount={minPrice(p)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
               </div>

package/src/ui/styled/ReviewForm.tsx

@@ -97,7 +97,7 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
           <StarRow rating={afterSubmit.rating} size={20} />
           {held ? (
             <p style={{ opacity: 0.75, lineHeight: 1.6 }}>
-              Your review has been received and is awaiting approval — it will appear once it's been checked.
+              Your review has been received and is awaiting approval. It will appear once it's been checked.
             </p>
           ) : (
             <p style={{ opacity: 0.75, lineHeight: 1.6 }}>
@@ -120,7 +120,7 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
           {existing.title && <p style={{ fontWeight: 700, margin: 0 }}>{existing.title}</p>}
           {existing.body && <p style={{ opacity: 0.85, lineHeight: 1.6, margin: 0 }}>{existing.body}</p>}
           <p style={{ opacity: 0.6, fontSize: 13 }}>
-            Reviews can be edited for 30 days after they're written — this one can no longer be changed.
+            Reviews can be edited for 30 days after they're written. This one can no longer be changed.
           </p>
         </Panel>
       </div>

package/src/ui/styled/TicketTransfer.tsx

@@ -4,8 +4,10 @@ import {
   useCancelPassTransfer,
   useClaimPassTransfer,
   usePendingPassTransfers,
+  mergePendingTransfer,
   type PassTransfer,
 } from "../../data/queries/usePassTransfers";
+import type { MyTicketPass, MyTicketPendingTransfer } from "../../data/queries/useMyTickets";
 import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
 
 /**
@@ -89,8 +91,24 @@ const formatWhen = (value: string | null | undefined): string | null => {
 // ── The holder's side ───────────────────────────────────────────────────────
 
 export interface TicketTransferPanelProps {
-  /** The `TN-…` pass ids on this order — `myTicketPassIds(ticket)`. */
+  /**
+   * The `TN-…` passes to draw a control for.
+   *
+   * Pass `myTicketHeldPassIds(ticket)`, not `myTicketPassIds(ticket)`: every
+   * pass-scoped endpoint resolves the current HOLDER, so a row drawn on a
+   * named guest's seat or on a ticket already claimed by somebody else could
+   * only ever answer 404.
+   */
   passIds: string[];
+  /**
+   * The pass OBJECTS, when the caller has them — `myTicketPasses(ticket)`.
+   *
+   * Only used to read each pass's `pendingTransfer`, which is how a sender sees
+   * and withdraws a transfer they started on ANOTHER DEVICE. Optional so a host
+   * on an older API build still gets the panel, falling back to this browser's
+   * own local record.
+   */
+  passes?: MyTicketPass[];
   /** Extra class(es) on the root element. */
   className?: string;
   /** Inline style merged LAST into the root element. */
@@ -105,19 +123,21 @@ export interface TicketTransferPanelProps {
  * does not emit them cannot address any pass-scoped endpoint, so an affordance
  * would only ever 404.
  *
- * The pending list comes from this browser's local record of its own sends,
- * because the transfer HISTORY endpoint is operator-only by design (it names
- * every previous holder) and nothing on `my-tickets` carries transfer state.
- * That limit is stated to the buyer rather than hidden: the recipient's email is
- * the durable copy.
+ * The pending transfer comes from the SERVER — `pendingTransfer` on each pass,
+ * narrowed by the API to a row this reader sent and still `pending`. That is
+ * what makes "withdraw" work for a sender who has since signed in somewhere
+ * else; the transfer HISTORY endpoint stays operator-only by design, because it
+ * names every previous holder. This browser's local record is kept only as a
+ * bridge across the refetch that follows a send.
  */
-export function TicketTransferPanel({ passIds, className, style }: TicketTransferPanelProps) {
+export function TicketTransferPanel({ passIds, passes, className, style }: TicketTransferPanelProps) {
   const t = useThemeTokens();
   const [openFor, setOpenFor] = useState<string | null>(null);
 
   if (passIds.length === 0) return null;
 
   const single = passIds.length === 1;
+  const byId = new Map((passes ?? []).map((pass) => [pass.id, pass]));
 
   return (
     <div
@@ -129,6 +149,7 @@ export function TicketTransferPanel({ passIds, className, style }: TicketTransfe
         <TicketTransferRow
           key={passId}
           passId={passId}
+          serverTransfer={byId.get(passId)?.pendingTransfer ?? null}
           t={t}
           showPassId={!single}
           isOpen={openFor === passId}
@@ -141,12 +162,14 @@ export function TicketTransferPanel({ passIds, className, style }: TicketTransfe
 
 function TicketTransferRow({
   passId,
+  serverTransfer,
   t,
   showPassId,
   isOpen,
   onToggle,
 }: {
   passId: string;
+  serverTransfer: MyTicketPendingTransfer | null;
   t: ResolvedThemeTokens;
   showPassId: boolean;
   isOpen: boolean;
@@ -154,7 +177,10 @@ function TicketTransferRow({
 }) {
   const send = useSendPassTransfer();
   const cancel = useCancelPassTransfer();
-  const pending = usePendingPassTransfers(passId);
+  const remembered = usePendingPassTransfers(passId);
+  // One live transfer per pass is a DATABASE guarantee, so exactly one row may
+  // ever be drawn. The server's copy wins whenever it has one.
+  const pending = mergePendingTransfer(serverTransfer, remembered);
 
   const [toEmail, setToEmail] = useState("");
   const [toName, setToName] = useState("");
@@ -207,39 +233,42 @@ function TicketTransferRow({
         </button>
       </div>
 
-      {/* A live transfer this browser sent. One per pass is a database
-          guarantee, so this is a list only because the store is one. */}
-      {pending.map((item) => {
-        const expires = formatWhen(item.expiresAt);
-        return (
-          <div
-            key={item.transferId}
-            style={{
-              marginTop: 12,
-              padding: 12,
-              borderRadius: t.cornerRadius,
-              border: `1px solid ${t.primary}4d`,
-              fontSize: 14,
-            }}
-          >
-            <div>
-              Sent to <strong>{item.toEmail}</strong>
-              {expires ? ` — the link works until ${expires}.` : "."}
-            </div>
-            <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>
-              Your QR code keeps working until they claim it.
-            </div>
-            <button
-              type="button"
-              onClick={() => void onCancel(item.transferId)}
-              disabled={cancel.isPending}
-              style={{ ...ghostButton(t, cancel.isPending), marginTop: 10 }}
-            >
-              {cancel.isPending ? "Withdrawing…" : "Withdraw transfer"}
-            </button>
+      {/* The live transfer out on this pass, from whichever device sent it. */}
+      {pending && (
+        <div
+          data-testid="pending-pass-transfer"
+          style={{
+            marginTop: 12,
+            padding: 12,
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.primary}4d`,
+            fontSize: 14,
+          }}
+        >
+          <div>
+            Sent to <strong>{pending.toEmail}</strong>
+            {formatWhen(pending.expiresAt) && pending.open
+              ? `. The link works until ${formatWhen(pending.expiresAt)}.`
+              : "."}
+          </div>
+          <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>
+            {pending.open
+              ? "Your QR code keeps working until they claim it."
+              : /* Lapsed but not yet swept. Still `pending`, still withdrawable —
+                   hiding it would leave the sender with a live row and no way to
+                   address it. */
+                "That link has expired. Withdraw it to send this ticket to someone else."}
           </div>
-        );
-      })}
+          <button
+            type="button"
+            onClick={() => void onCancel(pending.transferId)}
+            disabled={cancel.isPending}
+            style={{ ...ghostButton(t, cancel.isPending), marginTop: 10 }}
+          >
+            {cancel.isPending ? "Withdrawing…" : "Withdraw transfer"}
+          </button>
+        </div>
+      )}
 
       {sent && (
         <p style={{ fontSize: 13, marginTop: 10 }}>
@@ -341,7 +370,7 @@ export function ClaimTicketTransfer({ token, onClaimed, className, style }: Clai
         <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: t.headingFontFamily }}>The ticket is yours</h1>
         <p style={{ marginTop: 8 }}>
           Ticket <strong>{claimed.eventPassId}</strong> is now in your name. We have emailed it to{" "}
-          <strong>{claimed.toEmail}</strong> — bring that QR code to the door.
+          <strong>{claimed.toEmail}</strong>. Bring that QR code to the door.
         </p>
       </div>
     );
@@ -367,7 +396,7 @@ export function ClaimTicketTransfer({ token, onClaimed, className, style }: Clai
         Claim your ticket
       </h1>
       <p style={{ color: t.muted, marginBottom: 24 }}>
-        Someone sent you their ticket. Tell us what to put on it — you do not need an account.
+        Someone sent you their ticket. Tell us what to put on it. You do not need an account.
       </p>
       <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         <input