@tribe-nest/forge 3.57.0 → 3.59.0

package/src/ui/media/stage/CallCenterNotice.tsx

@@ -25,8 +25,10 @@ export function CallCenterNotice({
   onRetry: () => void;
 }) {
   const detail = notice.detailKey ? t(notice.detailKey) : notice.detailText;
-  const busy = notice.kind === "joining";
-  const Icon = notice.kind === "joining" ? Loader2 : notice.kind === "waiting" || notice.kind === "everyone_left" ? Users : PhoneOff;
+  // A breakout move is a reconnect the person asked for (or was sent on), so
+  // it spins like joining does: something is happening, nothing is wrong.
+  const busy = notice.kind === "joining" || notice.kind === "moving";
+  const Icon = busy ? Loader2 : notice.kind === "waiting" || notice.kind === "everyone_left" ? Users : PhoneOff;
 
   return (
     <div
@@ -59,7 +61,7 @@ export function CallCenterNotice({
         color={notice.kind === "failed" ? tokens.danger : tokens.stageMuted}
         style={busy ? { animation: "forge-call-spin 1.2s linear infinite" } : undefined}
       />
-      <strong style={{ fontSize: "1.05rem" }}>{t(notice.headlineKey)}</strong>
+      <strong style={{ fontSize: "1.05rem" }}>{t(notice.headlineKey, notice.headlineVars)}</strong>
       {detail && <span style={{ fontSize: "0.875rem", color: tokens.stageMuted, maxWidth: "28rem" }}>{detail}</span>}
       {notice.canRetry && (
         <button

package/src/ui/media/stage/CallControlsBar.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import {
   Circle,
+  DoorOpen,
   Hand,
   MessageSquare,
   Mic,
@@ -10,6 +11,7 @@ import {
   PhoneOff,
   SmilePlus,
   Square,
+  Undo2,
   Users,
   Video,
   VideoOff,
@@ -73,6 +75,18 @@ export type CallControlsBarProps = {
   onTogglePeople: () => void;
   peopleOpen: boolean;
   chatOpen: boolean;
+  /**
+   * Breakout rooms. All absent by default, and then nothing here is drawn:
+   * the bar renders pixel for pixel as it did before rooms existed.
+   */
+  roomsAvailable?: boolean | undefined;
+  roomsOpen?: boolean | undefined;
+  onToggleRooms?: (() => void) | undefined;
+  /** This seat is in a breakout room, so Return to main is offered. */
+  inBreakout?: boolean | undefined;
+  onReturnToMain?: (() => void) | undefined;
+  /** The self-move is in flight. Holds the button rather than letting it be pressed twice. */
+  movePending?: boolean | undefined;
   /** Presses of any control unlock the chime AudioContext. */
   onGesture?: (() => void) | undefined;
 };
@@ -372,7 +386,39 @@ export function CallControlsBar(props: CallControlsBarProps) {
         )}
       </div>
 
+      {props.inBreakout && props.onReturnToMain && (
+        <button
+          type="button"
+          data-testid="return-to-main"
+          onClick={() => {
+            gesture();
+            props.onReturnToMain?.();
+          }}
+          disabled={props.movePending}
+          aria-busy={props.movePending}
+          style={barButton(tokens, false, props.movePending)}
+        >
+          <Undo2 width={16} height={16} aria-hidden="true" />
+          {t("forge.call_stage.breakouts.return_to_main")}
+        </button>
+      )}
+
       <span style={{ marginLeft: "auto", display: "inline-flex", gap: "0.5rem" }}>
+        {props.roomsAvailable && props.onToggleRooms && (
+          <button
+            type="button"
+            data-testid="toggle-rooms"
+            onClick={() => {
+              gesture();
+              props.onToggleRooms?.();
+            }}
+            aria-pressed={!!props.roomsOpen}
+            style={barButton(tokens, !!props.roomsOpen)}
+          >
+            <DoorOpen width={16} height={16} aria-hidden="true" />
+            {t("forge.call_stage.breakouts.button")}
+          </button>
+        )}
         {props.chatAvailable && (
           <button
             type="button"

package/src/ui/media/stage/CallTopBar.tsx

@@ -250,7 +250,7 @@ function ConnectionPill({ status, tokens, t }: { status: CallStatus; tokens: Sta
       {status.tone === "live" && (
         <span aria-hidden="true" style={{ width: 7, height: 7, borderRadius: 9999, backgroundColor: tokens.accent, display: "inline-block" }} />
       )}
-      <span style={{ fontWeight: status.tone === "failed" ? 600 : 400 }}>{t(status.headlineKey)}</span>
+      <span style={{ fontWeight: status.tone === "failed" ? 600 : 400 }}>{t(status.headlineKey, status.headlineVars)}</span>
       {detail && status.tone !== "live" && <span>{detail}</span>}
     </span>
   );

package/src/ui/shell/TribeNestApp.tsx

@@ -28,7 +28,7 @@ registerHostRuntime();
 // params + referrer, kept in the URL for page-level ad pixels). On a FRESH
 // landing it also fires the visit-level beacon so the sale-less visit is counted.
 // Client-only, renders null. Lives in the shell so every code website gets ad
-// attribution without editing the tenant-owned __root. See docs/ads-attribution-initiative.md.
+// attribution without editing the tenant-owned __root. See docs/archive/shipped/ads-attribution-initiative.md.
 function AttributionCapture({ enabled, apiUrl, profileId }: { enabled: boolean; apiUrl?: string; profileId?: string }) {
   useEffect(() => {
     if (!enabled) return;

package/src/ui/styled/AccountDashboard.tsx

@@ -1351,6 +1351,11 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
       {booking.cancellation.terms && (
         <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{booking.cancellation.terms}</div>
       )}
+      {/* A reschedule rule of its own. When it follows the cancellation window
+          the sentence above already says it, so nothing is repeated. */}
+      {booking.reschedulePolicy && !booking.reschedulePolicy.followsCancellation && booking.reschedulePolicy.description && (
+        <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{booking.reschedulePolicy.description}</div>
+      )}
 
       {/*
         The action row. Both controls are drawn from the SERVER's flags —

package/src/ui/styled/BundleConfirmation.tsx

@@ -1,4 +1,4 @@
-import { useEffect, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { Clock, Loader2, Ticket, XCircle } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
@@ -40,7 +40,31 @@ export function BundleConfirmation({
 }: BundleConfirmationProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
-  const { clearCart } = useCart();
+  const { clearCart, ticketItems } = useCart();
+  /**
+   * The reserved seats this bundle bought, by name, read off the cart lines
+   * BEFORE the cart is emptied below. The finalize answer names the child
+   * orders and nothing in them, and the cart is the one place the labels the
+   * buyer chose on the map still exist on this page.
+   */
+  const seatLines = useMemo(
+    () =>
+      ticketItems.flatMap((item) =>
+        Object.entries(item.ticketMeta)
+          .filter(([ticketId, meta]) => (meta.seats?.length ?? 0) > 0 && (item.tickets[ticketId] ?? 0) > 0)
+          .map(([ticketId, meta]) => ({
+            key: `${item.eventId}-${ticketId}`,
+            eventTitle: item.eventTitle,
+            title: meta.title,
+            labels: (meta.seats ?? []).map((seat) => seat.label),
+          })),
+      ),
+    [ticketItems],
+  );
+  const [seatsBought, setSeatsBought] = useState<typeof seatLines>([]);
+  useEffect(() => {
+    if (seatLines.length > 0) setSeatsBought(seatLines);
+  }, [seatLines]);
   // A guest has no account screen behind "View your orders": the link would
   // land them on a login wall for an order their EMAIL is the receipt for.
   const { user } = usePublicAuth();
@@ -190,6 +214,27 @@ export function BundleConfirmation({
             </div>
           )}
 
+          {seatsBought.length > 0 && (
+            <div
+              data-testid="confirmation-seats"
+              style={{ textAlign: "left", margin: "0 auto 20px", maxWidth: 360, fontSize: 14 }}
+            >
+              <div style={{ fontWeight: 600, marginBottom: 4 }}>{t("forge.bundle_confirmation.seats_title")}</div>
+              {seatsBought.map((line) => (
+                <div key={line.key} style={{ marginBottom: 6 }}>
+                  <div style={{ opacity: 0.75 }}>
+                    {line.eventTitle} · {line.title}
+                  </div>
+                  {line.labels.map((label) => (
+                    <div key={label} style={{ paddingLeft: 12 }}>
+                      {label}
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )}
+
           <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
             {user && link(accountPath, t("forge.bundle_confirmation.view_orders"), true)}
             {link(explorePath, t("forge.bundle_confirmation.continue_shopping"), !user)}

package/src/ui/styled/Cart.tsx

@@ -8,6 +8,7 @@ import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { CartLineOptions } from "./CartLineOptions";
+import { internalPath } from "../../runtime/pages";
 
 export interface CartProps {
   /** Custom cart icon (defaults to a shopping bag). */
@@ -122,114 +123,178 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
         )}
       </button>
 
-      {isCartOpen && typeof document !== "undefined" && createPortal(
-        <>
-          <style>{KEYFRAMES}</style>
-          <div
-            onClick={() => setCartOpen(false)}
-            aria-label={translate("forge.cart.aria_close")}
-            style={{ position: "fixed", inset: 0, zIndex: OVERLAY_Z, background: "rgba(0,0,0,0.3)" }}
-          />
-          <aside
-            style={{
-              position: "fixed",
-              top: 0,
-              right: 0,
-              height: "100%",
-              width: "100%",
-              maxWidth: 420,
-              zIndex: DRAWER_Z,
-              background: t.background,
-              color: t.text,
-              borderLeft: `2px solid ${t.primary}`,
-              boxShadow: "-8px 0 30px -20px rgba(0,0,0,0.5)",
-              display: "flex",
-              flexDirection: "column",
-              fontFamily: t.fontFamily,
-              animation: "forge-cart-slide .3s cubic-bezier(.4,0,.2,1)",
-            }}
-          >
+      {isCartOpen &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <>
+            <style>{KEYFRAMES}</style>
             <div
+              onClick={() => setCartOpen(false)}
+              aria-label={translate("forge.cart.aria_close")}
+              style={{ position: "fixed", inset: 0, zIndex: OVERLAY_Z, background: "rgba(0,0,0,0.3)" }}
+            />
+            <aside
               style={{
+                position: "fixed",
+                top: 0,
+                right: 0,
+                height: "100%",
+                width: "100%",
+                maxWidth: 420,
+                zIndex: DRAWER_Z,
+                background: t.background,
+                color: t.text,
+                borderLeft: `2px solid ${t.primary}`,
+                boxShadow: "-8px 0 30px -20px rgba(0,0,0,0.5)",
                 display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                padding: 16,
-                borderBottom: `1px solid ${t.border}`,
+                flexDirection: "column",
+                fontFamily: t.fontFamily,
+                animation: "forge-cart-slide .3s cubic-bezier(.4,0,.2,1)",
               }}
             >
-              <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>
-                {translate("forge.cart.title")}
-              </h2>
-              <button
-                type="button"
-                onClick={() => setCartOpen(false)}
-                aria-label={translate("forge.cart.aria_close")}
-                style={{ background: "transparent", border: "none", cursor: "pointer", color: t.text }}
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: 16,
+                  borderBottom: `1px solid ${t.border}`,
+                }}
               >
-                <X size={22} />
-              </button>
-            </div>
+                <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>
+                  {translate("forge.cart.title")}
+                </h2>
+                <button
+                  type="button"
+                  onClick={() => setCartOpen(false)}
+                  aria-label={translate("forge.cart.aria_close")}
+                  style={{ background: "transparent", border: "none", cursor: "pointer", color: t.text }}
+                >
+                  <X size={22} />
+                </button>
+              </div>
 
-            <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}>
-              {count === 0 && (
-                <p style={{ textAlign: "center", opacity: 0.7 }}>{translate("forge.cart.empty_title")}</p>
-              )}
+              <div
+                style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}
+              >
+                {count === 0 && (
+                  <p style={{ textAlign: "center", opacity: 0.7 }}>{translate("forge.cart.empty_title")}</p>
+                )}
 
-              {ticketItems.map((ticket) => (
-                <div
-                  key={ticket.eventId}
-                  data-testid="cart-ticket-line"
-                  style={{
-                    display: "flex",
-                    gap: 12,
-                    alignItems: "flex-start",
-                    borderBottom: `1px solid ${t.border}`,
-                    paddingBottom: 16,
-                    position: "relative",
-                  }}
-                >
-                  <img
-                    src={ticket.coverImage || undefined}
-                    alt={ticket.eventTitle}
+                {ticketItems.map((ticket) => (
+                  <div
+                    key={ticket.eventId}
+                    data-testid="cart-ticket-line"
                     style={{
-                      width: 64,
-                      height: 64,
-                      objectFit: "cover",
-                      borderRadius: t.cornerRadius,
-                      background: `${t.primary}10`,
-                      flexShrink: 0,
+                      display: "flex",
+                      gap: 12,
+                      alignItems: "flex-start",
+                      borderBottom: `1px solid ${t.border}`,
+                      paddingBottom: 16,
+                      position: "relative",
                     }}
-                  />
-                  <div style={{ flex: 1, minWidth: 0, paddingRight: 28 }}>
-                    <div style={{ fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                      {ticket.eventTitle}
-                    </div>
-                    {Object.entries(ticket.tickets).map(([id, qty]) => (
-                      <div key={id} style={{ fontSize: 12, marginTop: 4, opacity: 0.75 }}>
-                        {translate("forge.cart.ticket_line", {
-                          ticket_title: ticket.ticketMeta[id]?.title ?? translate("forge.cart.ticket_fallback_title"),
-                          quantity: qty,
-                        })}
+                  >
+                    <img
+                      src={ticket.coverImage || undefined}
+                      alt={ticket.eventTitle}
+                      style={{
+                        width: 64,
+                        height: 64,
+                        objectFit: "cover",
+                        borderRadius: t.cornerRadius,
+                        background: `${t.primary}10`,
+                        flexShrink: 0,
+                      }}
+                    />
+                    <div style={{ flex: 1, minWidth: 0, paddingRight: 28 }}>
+                      <div
+                        style={{ fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                      >
+                        {ticket.eventTitle}
                       </div>
-                    ))}
-                    <div style={{ fontSize: 14, marginTop: 4, opacity: 0.8 }}>{fmt(ticketTotal(ticket))}</div>
+                      {Object.entries(ticket.tickets).map(([id, qty]) => {
+                        // A reserved-seating tier: its quantity is its seat
+                        // count, so the seats are listed by name and there is
+                        // no stepper. Changing them happens on the event page,
+                        // where the map is.
+                        const seats = ticket.ticketMeta[id]?.seats ?? [];
+                        return (
+                          <div key={id}>
+                            <div style={{ fontSize: 12, marginTop: 4, opacity: 0.75 }}>
+                              {translate("forge.cart.ticket_line", {
+                                ticket_title:
+                                  ticket.ticketMeta[id]?.title ?? translate("forge.cart.ticket_fallback_title"),
+                                quantity: qty,
+                              })}
+                            </div>
+                            {seats.length > 0 && (
+                              <div
+                                data-testid="cart-seat-chips"
+                                style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 4 }}
+                              >
+                                {seats.map((seat) => (
+                                  <span
+                                    key={seat.id}
+                                    data-testid="cart-seat-chip"
+                                    style={{
+                                      padding: "2px 8px",
+                                      borderRadius: 999,
+                                      background: `${t.primary}14`,
+                                      color: t.text,
+                                      fontSize: 11,
+                                      lineHeight: 1.4,
+                                    }}
+                                  >
+                                    {seat.label}
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                      {Object.values(ticket.ticketMeta).some((meta) => (meta.seats?.length ?? 0) > 0) && (
+                        <a
+                          href={internalPath("events/$slug", { slug: ticket.eventSlug || ticket.eventId })}
+                          data-testid="cart-change-seats"
+                          onClick={() => setCartOpen(false)}
+                          style={{
+                            display: "inline-block",
+                            fontSize: 12,
+                            marginTop: 6,
+                            color: t.primary,
+                            textDecoration: "underline",
+                          }}
+                        >
+                          {translate("forge.cart.change_seats")}
+                        </a>
+                      )}
+                      <div style={{ fontSize: 14, marginTop: 4, opacity: 0.8 }}>{fmt(ticketTotal(ticket))}</div>
+                    </div>
+                    <button
+                      type="button"
+                      // Removing the ticket takes its add-ons with it — they
+                      // cannot be bought on their own, and leaving them would
+                      // produce a checkout the server refuses.
+                      onClick={() => removeTickets(ticket.eventId)}
+                      aria-label={translate("forge.cart.aria_remove_tickets")}
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: t.primary,
+                        padding: 4,
+                      }}
+                    >
+                      <Trash2 size={16} />
+                    </button>
                   </div>
-                  <button
-                    type="button"
-                    // Removing the ticket takes its add-ons with it — they
-                    // cannot be bought on their own, and leaving them would
-                    // produce a checkout the server refuses.
-                    onClick={() => removeTickets(ticket.eventId)}
-                    aria-label={translate("forge.cart.aria_remove_tickets")}
-                    style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
-                  >
-                    <Trash2 size={16} />
-                  </button>
-                </div>
-              ))}
+                ))}
 
-              {cartItems.map((item) => (
+                {cartItems.map((item) => (
                   <div
                     key={item.productId + item.productVariantId + String(item.isGift) + (item.recipientEmail || "")}
                     // Named so a test can assert on the LINE rather than the
@@ -300,55 +365,66 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                       type="button"
                       onClick={() => removeFromCart(item.productVariantId, item.isGift, item.recipientEmail)}
                       aria-label={translate("forge.cart.aria_remove_item")}
-                      style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: t.primary,
+                        padding: 4,
+                      }}
                     >
                       <Trash2 size={16} />
                     </button>
                   </div>
                 ))}
-            </div>
+              </div>
 
-            {count > 0 && (
-              <div
-                style={{
-                  padding: 16,
-                  borderTop: `1px solid ${t.border}`,
-                  background: t.background,
-                }}
-              >
-                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
-                  <span style={{ fontSize: 18, fontWeight: 600 }}>{translate("forge.cart.total")}</span>
-                  <span style={{ fontSize: 18, fontWeight: 800, color: t.primary, textAlign: "right" }}>
-                    {fmt(total)}
-                    {pricesIncludeTax && (
-                      <span style={{ display: "block", fontSize: 11, fontWeight: 400, color: t.text, opacity: 0.65 }}>
-                        {translate("forge.cart.incl_tax")}
-                      </span>
-                    )}
-                  </span>
-                </div>
-                <button
-                  type="button"
-                  onClick={goCheckout}
+              {count > 0 && (
+                <div
                   style={{
-                    width: "100%",
-                    padding: "12px 16px",
-                    borderRadius: t.cornerRadius,
-                    border: "none",
-                    fontWeight: 700,
-                    cursor: "pointer",
-                    background: t.primary,
-                    color: onPrimary,
+                    padding: 16,
+                    borderTop: `1px solid ${t.border}`,
+                    background: t.background,
                   }}
                 >
-                  {translate("forge.cart.checkout")}
-                </button>
-              </div>
-            )}
-          </aside>
-        </>,
-        document.body,
-      )}
+                  <div
+                    style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}
+                  >
+                    <span style={{ fontSize: 18, fontWeight: 600 }}>{translate("forge.cart.total")}</span>
+                    <span style={{ fontSize: 18, fontWeight: 800, color: t.primary, textAlign: "right" }}>
+                      {fmt(total)}
+                      {pricesIncludeTax && (
+                        <span style={{ display: "block", fontSize: 11, fontWeight: 400, color: t.text, opacity: 0.65 }}>
+                          {translate("forge.cart.incl_tax")}
+                        </span>
+                      )}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={goCheckout}
+                    style={{
+                      width: "100%",
+                      padding: "12px 16px",
+                      borderRadius: t.cornerRadius,
+                      border: "none",
+                      fontWeight: 700,
+                      cursor: "pointer",
+                      background: t.primary,
+                      color: onPrimary,
+                    }}
+                  >
+                    {translate("forge.cart.checkout")}
+                  </button>
+                </div>
+              )}
+            </aside>
+          </>,
+          document.body,
+        )}
     </>
   );
 }