@tribe-nest/forge 1.20.2 → 2.2.0

package/src/ui/styled/CheckoutConfirmation.tsx

@@ -16,12 +16,19 @@ import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
 import { useOrderFinalize } from "../../data/queries/useFinalize";
+import { BundleConfirmation } from "./BundleConfirmation";
 import { useCart } from "../../contexts/CartContext";
 import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { OrderStatus, ProductDeliveryType, type IPublicOrder } from "../../types/models";
 
 export interface CheckoutConfirmationProps {
   orderId?: string;
+  /**
+   * Set instead of `orderId` when the payment was a BUNDLE — one intent across
+   * tickets and products. Delegates to `<BundleConfirmation>`, which finalizes
+   * every surface in one call.
+   */
+  checkoutId?: string;
   /**
    * The Stripe `redirect_status` appended to the return URL (`succeeded` /
    * `failed` / `processing`). When `failed`, the page shows the failed state
@@ -97,7 +104,24 @@ function statusIcon(status: OrderStatus, color: string) {
  * status), still-processing (polls the gateway webhook race), or failed/not-found
  * — with the full order breakdown (delivery groups, gifts, variants, totals).
  */
-export function CheckoutConfirmation({
+export function CheckoutConfirmation(props: CheckoutConfirmationProps) {
+  // A bundle settles every surface through one endpoint, so it gets its own
+  // confirmation rather than threading a second shape through the order one.
+  if (props.checkoutId) {
+    return (
+      <BundleConfirmation
+        checkoutId={props.checkoutId}
+        redirectStatus={props.redirectStatus}
+        explorePath={props.explorePath}
+        accountPath={props.accountPath}
+        checkoutPath={props.checkoutPath}
+      />
+    );
+  }
+  return <OrderConfirmation {...props} />;
+}
+
+function OrderConfirmation({
   orderId,
   redirectStatus,
   formatAmount,

package/src/ui/styled/EventTickets.tsx

@@ -101,7 +101,17 @@ export function EventTickets({
 
           {c.isLoading && <Loading />}
           {!c.isLoading && !c.event && <p style={{ marginTop: 8 }}>Event not found.</p>}
-          {c.event && <EventTicketsBody c={c} event={c.event} fmt={fmt} renderPayment={renderPay} />}
+          {c.event && (
+            <EventTicketsBody
+              c={c}
+              event={c.event}
+              fmt={fmt}
+              renderPayment={renderPay}
+              // Selection is safe in the cart now — close so the buyer can go
+              // browse the add-ons.
+              onAddedToCart={() => setOpen(false)}
+            />
+          )}
         </DialogContent>
       </DialogPortal>
     </DialogRoot>
@@ -115,17 +125,19 @@ function EventTicketsBody({
   event,
   fmt,
   renderPayment,
+  onAddedToCart,
 }: {
   c: Checkout;
   event: IEvent;
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
+  onAddedToCart?: () => void;
 }) {
   const stepIndex = c.step === "tickets" ? 0 : c.step === "details" ? 1 : 2;
   return (
     <div style={{ width: "100%" }}>
       <Progress current={stepIndex} />
-      {c.step === "tickets" && <TicketStep c={c} event={event} fmt={fmt} />}
+      {c.step === "tickets" && <TicketStep c={c} event={event} fmt={fmt} onAddedToCart={onAddedToCart} />}
       {c.step === "details" && <DetailsStep c={c} event={event} fmt={fmt} />}
       {c.step === "payment" && <PaymentStep c={c} fmt={fmt} renderPayment={renderPayment} />}
     </div>
@@ -174,7 +186,17 @@ function Progress({ current }: { current: number }) {
 }
 
 // ── Step 1: ticket selection (with live expiry/urgency + sold-out/max) ────────
-function TicketStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: number) => string }) {
+function TicketStep({
+  c,
+  event,
+  fmt,
+  onAddedToCart,
+}: {
+  c: Checkout;
+  event: IEvent;
+  fmt: (n: number) => string;
+  onAddedToCart?: () => void;
+}) {
   const theme = useForgeTheme();
   // Inclusive stores caption ticket prices as tax-inclusive (display only).
   const pricesIncludeTax = usePricesIncludeTax();
@@ -311,7 +333,21 @@ function TicketStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: nu
       </div>
 
       {c.error && <p style={{ color: "#ef4444", fontSize: 14, marginTop: 12 }}>{c.error}</p>}
-      <ActionBar c={c} fmt={fmt} onNext={c.goToDetails} nextLabel="Continue" />
+      <ActionBar
+        c={c}
+        fmt={fmt}
+        onNext={c.goToDetails}
+        nextLabel="Continue"
+        // Buying tickets alone still goes straight down the untouched
+        // per-event flow; this exit exists so the buyer can go add merch and
+        // come back with the selection intact.
+        secondary={{
+          label: c.ticketsInCart ? "Update cart" : "Add to cart",
+          onClick: () => {
+            if (c.addTicketsToCart()) onAddedToCart?.();
+          },
+        }}
+      />
     </div>
   );
 }
@@ -469,6 +505,7 @@ function ActionBar({
   onNext,
   nextLabel,
   nextDisabled,
+  secondary,
 }: {
   c: Checkout;
   fmt: (n: number) => string;
@@ -476,6 +513,8 @@ function ActionBar({
   onNext: () => void;
   nextLabel: string;
   nextDisabled?: boolean;
+  /** Extra exit shown next to Back — "Add to cart" on the selection step. */
+  secondary?: { label: string; onClick: () => void };
 }) {
   const theme = useForgeTheme();
   return (
@@ -495,9 +534,15 @@ function ActionBar({
         <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
-        <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
-          Back
-        </button>
+        {secondary ? (
+          <button data-testid="tickets-add-to-cart" onClick={secondary.onClick} style={secondaryButtonStyle(theme)}>
+            {secondary.label}
+          </button>
+        ) : (
+          <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
+            Back
+          </button>
+        )}
         <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
           {nextLabel}
         </button>

package/src/ui/styled/PageActions.tsx

@@ -5,6 +5,7 @@ import { readableTextOn } from "../theme/contrast";
 import { EmailListForm } from "./EmailListForm";
 import { OfferButton } from "./OfferButton";
 import { ProductGrid } from "./ProductGrid";
+import { Addons } from "./Addons";
 import { DonationButton } from "./DonationButton";
 import { MembershipTiers } from "./MembershipTiers";
 
@@ -12,11 +13,24 @@ export interface PageActionsProps {
   pageType: string;
   entityId?: string;
   placement?: string;
+  /**
+   * Where product detail lives on this site — `/i/store` on code sites,
+   * `/products` on Craft ones. Only the `addons` block uses it.
+   */
+  productBasePath?: string;
   className?: string;
   style?: CSSProperties;
 }
 
-function ActionRenderer({ action }: { action: PageActionDescriptor }) {
+function ActionRenderer({
+  action,
+  entityId,
+  productBasePath,
+}: {
+  action: PageActionDescriptor;
+  entityId?: string;
+  productBasePath?: string;
+}) {
   const theme = useForgeTheme();
   const c = action.config as Record<string, any>;
 
@@ -55,6 +69,16 @@ function ActionRenderer({ action }: { action: PageActionDescriptor }) {
           <ProductGrid columns={c.columns} limit={c.limit} />
         </div>
       );
+    case "addons":
+      return (
+        <Addons
+          entityId={entityId}
+          productIds={c.productIds ?? []}
+          title={c.title}
+          columns={c.columns}
+          productBasePath={productBasePath}
+        />
+      );
     case "donation":
       return <DonationButton donationId={c.donationId} text={c.text} />;
     case "membership":
@@ -106,7 +130,14 @@ const RESPONSIVE_CSS = `
  * AI-code-built sites) — each descriptor maps to an existing Forge primitive.
  * Renders nothing when the slot is empty.
  */
-export function PageActions({ pageType, entityId, placement = "after_content", className, style }: PageActionsProps) {
+export function PageActions({
+  pageType,
+  entityId,
+  placement = "after_content",
+  productBasePath,
+  className,
+  style,
+}: PageActionsProps) {
   const { data } = usePageActions(pageType, entityId, placement);
   const actions = data?.actions ?? [];
   if (actions.length === 0) return null;
@@ -116,7 +147,7 @@ export function PageActions({ pageType, entityId, placement = "after_content", c
       <style dangerouslySetInnerHTML={{ __html: RESPONSIVE_CSS }} />
       {actions.map((action) => (
         <div key={action.id} className={COMPACT_TYPES.has(action.type) ? "forge-pa-compact" : undefined}>
-          <ActionRenderer action={action} />
+          <ActionRenderer action={action} entityId={entityId} productBasePath={productBasePath} />
         </div>
       ))}
     </div>

package/src/ui/styled/ProductGrid.tsx

@@ -1,4 +1,4 @@
-import { useGetProducts } from "../../data/queries/useProducts";
+import { useGetProducts, useGetProductsByIds } from "../../data/queries/useProducts";
 import type { IPublicProduct } from "../../types/models";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -9,8 +9,22 @@ import { Loading } from "./Loading";
 export interface ProductGridProps {
   columns?: number;
   limit?: number;
+  /**
+   * Show these specific products, in this order, instead of the shop listing.
+   * What the add-ons block passes — an organiser's chosen list rather than
+   * "the first N products".
+   */
+  productIds?: string[];
   formatAmount?: (amount: number) => string;
   onSelect?: (product: IPublicProduct) => void;
+  /**
+   * Render each card as a link to this href instead of a button. Router-
+   * agnostic on purpose: Forge has no router, and the host decides the path
+   * (`/i/store/:slug` on code sites, `/products/:slug` on Craft ones).
+   */
+  hrefFor?: (product: IPublicProduct) => string;
+  /** Message shown in place of the grid when there is nothing to show. */
+  emptyLabel?: string;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -21,15 +35,33 @@ function minPrice(p: IPublicProduct): number {
 }
 
 /** Themed product grid, built on `useGetProducts`. */
-export function ProductGrid({ columns = 3, limit, formatAmount, onSelect, className, style }: ProductGridProps) {
+export function ProductGrid({
+  columns = 3,
+  limit,
+  productIds,
+  formatAmount,
+  onSelect,
+  hrefFor,
+  emptyLabel,
+  className,
+  style,
+}: ProductGridProps) {
   const t = useThemeTokens();
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
-  const { data, isLoading } = useGetProducts({ page: 1 });
-  const products = (data?.data ?? []).slice(0, limit ?? 100);
+  const byIds = !!productIds?.length;
+  // Both hooks are called unconditionally (rules of hooks); each disables
+  // itself when it isn't the one in use.
+  const listQuery = useGetProducts({ page: 1 }, !byIds);
+  const idsQuery = useGetProductsByIds(byIds ? productIds! : []);
+
+  const isLoading = byIds ? idsQuery.isLoading : listQuery.isLoading;
+  const products = byIds
+    ? (idsQuery.data ?? [])
+    : (listQuery.data?.data ?? []).slice(0, limit ?? 100);
 
   if (isLoading) return <Loading />;
-  if (!products.length) return <p style={{ color: t.text, opacity: 0.7 }}>No products yet.</p>;
+  if (!products.length) return <p style={{ color: t.text, opacity: 0.7 }}>{emptyLabel ?? "No products yet."}</p>;
 
   // Responsive: each card is at least ~150px wide, but also at least
   // (container / columns), so it renders `columns` across on wide screens and
@@ -50,13 +82,17 @@ export function ProductGrid({ columns = 3, limit, formatAmount, onSelect, classN
     >
       {products.map((p) => {
         const cover = p.media?.find((m) => m.type === "image")?.url ?? p.media?.[0]?.url;
+        const href = hrefFor?.(p);
+        const Card = (href ? "a" : "button") as React.ElementType;
         return (
-          <button
+          <Card
             key={p.id}
-            onClick={() => onSelect?.(p)}
+            {...(href ? { href } : { onClick: () => onSelect?.(p) })}
             style={{
               textAlign: "left",
-              cursor: onSelect ? "pointer" : "default",
+              display: "block",
+              textDecoration: "none",
+              cursor: href || onSelect ? "pointer" : "default",
               background: t.surface,
               border: `1px solid ${t.primary}20`,
               borderRadius: t.cornerRadius,
@@ -74,7 +110,7 @@ export function ProductGrid({ columns = 3, limit, formatAmount, onSelect, classN
                 <PriceDisplay amount={minPrice(p)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
               </div>
             </div>
-          </button>
+          </Card>
         );
       })}
     </div>

package/src/utils/formatDateTime.ts

@@ -0,0 +1,25 @@
+// Date/time formatting for Forge sites and apps.
+//
+// Consolidated here because it was already inlined three times inside Forge
+// itself (EventDetail, ReplayList — one of which is literally commented "inlined
+// from the app's formatDateTime") on top of the starter's own copy. Four copies
+// of the same twelve lines is four places for a timezone bug to be fixed in
+// three of them.
+
+/** Locale date-time formatting, replacing the client's `useEditorContext().formatDateTime`. */
+export const formatDateTime = (value: string | number | Date, timezone?: string): string =>
+  new Date(value).toLocaleString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone || "UTC",
+    timeZoneName: "short",
+  });
+
+/** Short date only, e.g. "Jun 30, 2026". */
+export const formatDate = (value: string | number | Date): string =>
+  new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });

package/src/utils/headMeta.ts

@@ -0,0 +1,50 @@
+// SEO head() builder for Forge sites and apps.
+//
+// Lives in Forge, not in a starter, because BOTH starters need it and it has no
+// coupling to either. It used to sit in the site-starter's `src/routes/i/-lib/`,
+// which made it reachable only by copying a directory an app has no use for —
+// the root routes (`/offline`, `/documents/$token`) imported it out of `/i/` and
+// broke the moment those fan-site routes were removed.
+//
+// Being here also means a fix reaches existing sites: Forge is versioned and
+// published, and sites adopt it through the same update flow. One source, both
+// starters, no drift.
+//
+// Pages pass plain values (title/description/image) rather than a CMS WebPage —
+// code-site pages are authored in code, not the page builder.
+
+export interface HeadMetaInput {
+  title: string;
+  description?: string;
+  image?: string;
+  canonicalUrl?: string;
+  ogType?: string;
+  noindex?: boolean;
+}
+
+export function buildHeadMeta(input: HeadMetaInput) {
+  const { title, description, image, canonicalUrl, ogType = "website", noindex } = input;
+  const desc = description || title;
+  return {
+    meta: [
+      { title },
+      { name: "description", content: desc },
+      { property: "og:title", content: title },
+      { property: "og:description", content: desc },
+      { property: "og:type", content: ogType },
+      ...(canonicalUrl ? [{ property: "og:url", content: canonicalUrl }] : []),
+      ...(image ? [{ property: "og:image", content: image }] : []),
+      { name: "twitter:card", content: "summary_large_image" },
+      { name: "twitter:title", content: title },
+      { name: "twitter:description", content: desc },
+      ...(image ? [{ name: "twitter:image", content: image }] : []),
+      ...(noindex ? [{ name: "robots", content: "noindex, nofollow" }] : []),
+    ],
+    links: canonicalUrl ? [{ rel: "canonical", href: canonicalUrl }] : [],
+  };
+}
+
+export const DEFAULT_HEAD = {
+  meta: [{ title: "My site" }],
+  links: [] as { rel: string; href: string }[],
+};