@tribe-nest/forge 3.21.0 → 3.22.0

package/src/ui/styled/MembershipGateNotice.tsx

@@ -0,0 +1,159 @@
+import type { CSSProperties } from "react";
+import { Lock } from "lucide-react";
+import type { PublicMembershipGate } from "../../types/models";
+import type { MembershipGateRefusal } from "../format/membershipGate";
+import { useMembershipGateNotice } from "../headless/membership/useMembershipGateNotice";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface MembershipGateNoticeProps {
+  /** The announced gate from the read. */
+  gate?: PublicMembershipGate | null;
+  /** A `MEMBERSHIP_GATE` refusal from a failed purchase. Wins over `gate`. */
+  refusal?: MembershipGateRefusal | null;
+  /** What the thing is, in the buyer's words. Default "This". */
+  itemLabel?: string;
+  /**
+   * `badge` is the one-line form for a row in a list of things (a ticket tier);
+   * `card` is the block form for a page about ONE thing (a course, a product).
+   */
+  variant?: "badge" | "card";
+  loginPath?: string;
+  membershipPath?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * "Members only" — said BEFORE the buyer pays, with the action that resolves it.
+ *
+ * ## What was wrong
+ *
+ * Members-only tickets were enforced at checkout and announced on no surface.
+ * A logged-out buyer picked a seat, filled in a two-step form and was refused on
+ * the last screen with a 400 — the restriction was discoverable only by failing
+ * it, and the "members save X, sign in" funnel the feature was sold on existed
+ * nowhere. Products and courses published the same gate and drew it just as
+ * little.
+ *
+ * ## Why the button is the point, not the badge
+ *
+ * A badge alone converts a silent failure into a visible dead end. The two
+ * reasons need genuinely different exits — `sign_in_required` gets a sign-in
+ * that RETURNS here, `membership_required` gets the tier — and offering the
+ * wrong one is worse than offering none: a signed-in member sent to sign in
+ * again learns only that the site is broken. `buildMembershipGateNotice` owns
+ * that choice so both rendering stacks make it identically.
+ *
+ * Renders nothing when nothing is gated, which is also every storefront with the
+ * gates switch off.
+ */
+export function MembershipGateNotice({
+  gate,
+  refusal,
+  itemLabel,
+  variant = "card",
+  loginPath,
+  membershipPath,
+  style,
+}: MembershipGateNoticeProps) {
+  const theme = useForgeTheme();
+  const notice = useMembershipGateNotice({ gate, refusal, itemLabel, loginPath, membershipPath });
+  if (!notice) return null;
+
+  if (variant === "badge") {
+    return (
+      <div
+        data-testid="membership-gate-badge"
+        data-gate-reason={notice.reason}
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: 8,
+          marginTop: 8,
+          fontFamily: theme.fontFamily,
+          ...style,
+        }}
+      >
+        <span style={pillStyle(theme)}>
+          <Lock size={12} aria-hidden />
+          {notice.badge}
+        </span>
+        <span style={{ fontSize: 13, opacity: 0.8, color: theme.colors.text }}>{notice.body}</span>
+        {notice.actionHref && (
+          <a data-testid="membership-gate-action" href={notice.actionHref} style={linkStyle(theme)}>
+            {notice.actionLabel}
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="membership-gate-card"
+      data-gate-reason={notice.reason}
+      style={{
+        border: `1px solid ${alpha(theme.colors.primary, 0.3)}`,
+        borderRadius: theme.cornerRadius,
+        padding: 20,
+        color: theme.colors.text,
+        background: theme.colors.background,
+        fontFamily: theme.fontFamily,
+        ...style,
+      }}
+    >
+      <span style={pillStyle(theme)}>
+        <Lock size={12} aria-hidden />
+        {notice.badge}
+      </span>
+      <h3 style={{ fontWeight: 600, fontSize: 17, margin: "12px 0 6px" }}>{notice.title}</h3>
+      <p style={{ opacity: 0.8, fontSize: 14, marginBottom: notice.actionHref ? 16 : 0 }}>{notice.body}</p>
+      {notice.actionHref && (
+        <a
+          data-testid="membership-gate-action"
+          href={notice.actionHref}
+          style={{
+            display: "inline-block",
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            borderRadius: theme.cornerRadius,
+            padding: "10px 18px",
+            fontWeight: 600,
+            fontSize: 14,
+            textDecoration: "none",
+          }}
+        >
+          {notice.actionLabel}
+        </a>
+      )}
+    </div>
+  );
+}
+
+/** Append an alpha to a 6-digit hex colour (mirrors frontend-shared addAlphaToHexCode). */
+const alpha = (hex: string, value: number) => hex + Math.round(value * 255).toString(16).padStart(2, "0");
+
+// Everything is drawn from the artist's own palette. A members-only badge in a
+// hardcoded gold or indigo is a brand bug on every site that is not that colour.
+const pillStyle = (t: ForgeTheme): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "2px 8px",
+  borderRadius: 6,
+  fontSize: 12,
+  fontWeight: 700,
+  background: alpha(t.colors.primary, 0.1),
+  color: t.colors.primary,
+  border: `1px solid ${alpha(t.colors.primary, 0.3)}`,
+  whiteSpace: "nowrap",
+});
+
+const linkStyle = (t: ForgeTheme): CSSProperties => ({
+  fontSize: 13,
+  fontWeight: 600,
+  color: t.colors.primary,
+  textDecoration: "underline",
+  whiteSpace: "nowrap",
+});

package/src/ui/styled/OfferButton.tsx

@@ -5,6 +5,7 @@ import { Loading } from "./Loading";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
+import { HoldNotice } from "./HoldNotice";
 
 export interface OfferButtonProps {
   productId: string;
@@ -97,6 +98,15 @@ function OfferBody({
           <span>Total</span>
           <strong style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</strong>
         </div>
+        {/* The reservation, counted down while the buyer pays. Nothing is drawn
+            for a digital item or a profile with holds off. */}
+        <HoldNotice
+          hold={c.hold}
+          expiredMessage={c.holdExpiredError ?? undefined}
+          onRetry={c.retryHold}
+          isRetrying={c.isRetryingHold}
+          noun="item"
+        />
         {renderPayment ? (
           <Offer.PaymentStep>{(p) => renderPayment(p)}</Offer.PaymentStep>
         ) : (
@@ -157,6 +167,19 @@ function OfferBody({
           <span style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</span>
         </div>
 
+        {/* A reservation that lapsed on the way to the card form never reached
+            the payment step, so it is answered here — distinctly from the error
+            line, because "your hold ran out" is not "this is gone". */}
+        {c.holdExpiredError && (
+          <HoldNotice
+            hold={c.hold}
+            expiredMessage={c.holdExpiredError}
+            onRetry={c.retryHold}
+            isRetrying={c.isRetryingHold}
+            noun="item"
+          />
+        )}
+
         {c.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{c.error}</p>}
 
         <button

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>