@tribe-nest/forge 3.52.0 → 3.54.0

package/src/ui/styled/EventConfirmation.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle, ArrowRight, Calendar, MapPin, RotateCcw, Ticket } from "lucide-react";
+import { AlertTriangle, ArrowRight, Ban, Calendar, Hourglass, MapPin, RotateCcw, Ticket, TimerOff } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -8,7 +8,11 @@ import { useForgeT } from "../../i18n";
 import { useEventOrderFinalize } from "../../data/queries/useFinalize";
 import { useEvent } from "../../data/queries/useEvents";
 import { AddToCalendar } from "./AddToCalendar";
-import { getTicketOrderOutcome, TICKET_ORDER_REFUNDED_COPY } from "../../utils/ticketOrderOutcome";
+import {
+  getTicketOrderOutcome,
+  ticketRequestFailureKind,
+  TICKET_ORDER_REFUNDED_COPY,
+} from "../../utils/ticketOrderOutcome";
 
 export interface EventConfirmationProps {
   slug: string;
@@ -20,6 +24,12 @@ export interface EventConfirmationProps {
   formatAmount?: (n: number, currency?: string) => string;
   /** Where the "browse more events" action links. */
   explorePath?: string;
+  /**
+   * Where a fan whose ticket REQUEST lapsed or could not be settled is sent to
+   * try again: the event itself, which may still have seats. Default
+   * `/i/events/:slug`.
+   */
+  eventPath?: string;
 }
 
 /** Locale date-time formatting, replicating the site-starter `formatDateTime`. */
@@ -42,6 +52,7 @@ export function EventConfirmation({
   orderId,
   formatAmount,
   explorePath = "/i/events",
+  eventPath,
 }: EventConfirmationProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
@@ -75,6 +86,15 @@ export function EventConfirmation({
   const outcome = getTicketOrderOutcome(order);
   const paid = outcome === "paid";
   const refunded = outcome === "refunded";
+  /**
+   * Ticket requests (curated access, feature 3). `awaiting` is a request the
+   * organiser has not decided; `requestEnded` names how one ended without a
+   * sale (declined, expired, or approved but the card could not be settled),
+   * and is `null` for an ordinary abandoned checkout, whose copy is unchanged.
+   */
+  const awaiting = outcome === "awaiting_approval";
+  const requestEnded = ticketRequestFailureKind(order);
+  const tryAgainPath = eventPath ?? `/i/events/${slug}`;
   const fmt = (n: number) => formatAmt(n, order.currency || undefined);
   const location =
     event && event.type !== "virtual" && event.address
@@ -91,6 +111,14 @@ export function EventConfirmation({
           ) : refunded ? (
             // Neutral, not alarmed: a refund is a completed outcome, not a fault.
             <NeutralSeal icon={<RotateCcw size={32} color={alpha(text, 0.65)} />} text={text} />
+          ) : awaiting ? (
+            // Waiting is the intended state of a request, so it gets the
+            // theme's own colour, not warning amber.
+            <NeutralSeal icon={<Hourglass size={32} color={primary} />} text={text} />
+          ) : requestEnded === "declined" ? (
+            <NeutralSeal icon={<Ban size={32} color={alpha(text, 0.65)} />} text={text} />
+          ) : requestEnded === "expired" ? (
+            <NeutralSeal icon={<TimerOff size={32} color={alpha(text, 0.65)} />} text={text} />
           ) : (
             <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
           )}
@@ -103,7 +131,12 @@ export function EventConfirmation({
               fontWeight: 700,
               letterSpacing: "0.22em",
               textTransform: "uppercase",
-              color: paid ? primary : refunded ? alpha(text, 0.65) : "#f59e0b",
+              color:
+                paid || awaiting
+                  ? primary
+                  : refunded || requestEnded === "declined" || requestEnded === "expired"
+                    ? alpha(text, 0.65)
+                    : "#f59e0b",
               animationDelay: "0.15s",
             }}
           >
@@ -111,22 +144,76 @@ export function EventConfirmation({
               ? t("forge.event_confirmation.eyebrow_paid")
               : refunded
                 ? TICKET_ORDER_REFUNDED_COPY.eyebrow
-                : t("forge.event_confirmation.eyebrow_status", { status: order.status.replace(/_/g, " ") })}
+                : awaiting
+                  ? t("forge.event_confirmation.eyebrow_awaiting")
+                  : requestEnded === "declined"
+                    ? t("forge.event_confirmation.eyebrow_declined")
+                    : requestEnded === "expired"
+                      ? t("forge.event_confirmation.eyebrow_expired")
+                      : requestEnded === "payment_failed"
+                        ? t("forge.event_confirmation.eyebrow_request_payment_failed")
+                        : t("forge.event_confirmation.eyebrow_status", { status: order.status.replace(/_/g, " ") })}
           </p>
           <h1 className="cf-rise" style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}>
             {paid
               ? t("forge.event_confirmation.title_paid")
               : refunded
                 ? TICKET_ORDER_REFUNDED_COPY.heading
-                : t("forge.event_confirmation.title_incomplete")}
+                : awaiting
+                  ? t("forge.event_confirmation.title_awaiting")
+                  : requestEnded === "declined"
+                    ? t("forge.event_confirmation.title_declined")
+                    : requestEnded === "expired"
+                      ? t("forge.event_confirmation.title_expired")
+                      : requestEnded === "payment_failed"
+                        ? t("forge.event_confirmation.title_request_payment_failed")
+                        : t("forge.event_confirmation.title_incomplete")}
           </h1>
           <p className="cf-rise" style={{ fontSize: 15, color: alpha(text, 0.7), margin: 0, animationDelay: "0.3s" }}>
             {paid
               ? t("forge.event_confirmation.body_paid", { email: order.email })
               : refunded
                 ? TICKET_ORDER_REFUNDED_COPY.body
-                : t("forge.event_confirmation.body_incomplete", { status: order.status.replace(/_/g, " ") })}
+                : awaiting
+                  ? t("forge.event_confirmation.body_awaiting_no_date")
+                  : requestEnded === "declined"
+                    ? t("forge.event_confirmation.body_declined")
+                    : requestEnded === "expired"
+                      ? t("forge.event_confirmation.body_expired")
+                      : requestEnded === "payment_failed"
+                        ? t("forge.event_confirmation.body_request_payment_failed")
+                        : t("forge.event_confirmation.body_incomplete", { status: order.status.replace(/_/g, " ") })}
           </p>
+          {/* "Nothing is charged until they approve" is the promise the whole
+              request rests on. Content, not help: a fan who has just committed
+              a card reads it every time. */}
+          {awaiting && (
+            <p
+              className="cf-rise"
+              data-testid="request-nothing-charged"
+              style={{ fontSize: 14, fontWeight: 600, color: primary, margin: "10px 0 0", animationDelay: "0.34s" }}
+            >
+              {t("forge.event_confirmation.awaiting_nothing_charged")}
+            </p>
+          )}
+          {/* The organiser's own words, when they gave any. Theirs, so quoted
+              rather than paraphrased. */}
+          {requestEnded === "declined" && order.approvalDecisionNote && (
+            <blockquote
+              data-testid="request-decision-note"
+              style={{
+                margin: "14px auto 0",
+                padding: "10px 14px",
+                maxWidth: 400,
+                fontSize: 14,
+                color: alpha(text, 0.8),
+                borderLeft: `3px solid ${alpha(text, 0.18)}`,
+                textAlign: "left",
+              }}
+            >
+              {order.approvalDecisionNote}
+            </blockquote>
+          )}
         </div>
 
         {/* ── Event summary ── */}
@@ -209,7 +296,9 @@ export function EventConfirmation({
                 ? t("forge.event_confirmation.total_paid")
                 : refunded
                   ? TICKET_ORDER_REFUNDED_COPY.totalLabel
-                  : t("forge.event_confirmation.total")}
+                  : awaiting
+                    ? t("forge.event_confirmation.total_on_approval")
+                    : t("forge.event_confirmation.total")}
             </span>
             {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
             <span style={{ fontSize: 18, fontWeight: 800, color: primary }}>
@@ -242,7 +331,10 @@ export function EventConfirmation({
         {/* ── Action ── */}
         <div className="cf-rise" style={{ padding: "20px 30px 30px", animationDelay: "0.52s" }}>
           <a
-            href={explorePath}
+            // A request that lapsed or could not be settled sends the fan back
+            // to the event, which may still have seats; everything else browses.
+            href={requestEnded === "expired" || requestEnded === "payment_failed" ? tryAgainPath : explorePath}
+            data-testid="confirmation-action"
             style={{
               display: "inline-flex",
               alignItems: "center",
@@ -257,7 +349,12 @@ export function EventConfirmation({
               textDecoration: "none",
             }}
           >
-            {t("forge.event_confirmation.explore")} <ArrowRight size={16} />
+            {requestEnded === "payment_failed"
+              ? t("forge.event_confirmation.buy_again")
+              : requestEnded === "expired"
+                ? t("forge.event_confirmation.view_event")
+                : t("forge.event_confirmation.explore")}{" "}
+            <ArrowRight size={16} />
           </a>
         </div>
       </ConfirmationCard>

package/src/ui/styled/EventTickets.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from "react";
-import { AlertCircle, CalendarClock, Clock, KeyRound, X } from "lucide-react";
+import { AlertCircle, CalendarClock, Clock, KeyRound, ShieldCheck, X } from "lucide-react";
 import type { IEvent, ITicket } from "../../types/models";
 import { useEventCheckout } from "../headless/event/useEventCheckout";
 import { useForgeT } from "../../i18n";
@@ -26,6 +26,8 @@ import { MembershipGateNotice } from "./MembershipGateNotice";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
 import { PresaleCodeField } from "./PresaleCode";
 import { HoldNotice } from "./HoldNotice";
+import { CallHelpHint } from "../media/CallHelpHint";
+import { isDeferredSettlement, deferredChargeNotice } from "../payment/stripeConfirmOutcome";
 import {
   DialogRoot,
   DialogTrigger,
@@ -401,6 +403,16 @@ function TicketStep({
           const gate =
             event.membershipGate && !event.membershipGate.allowed ? event.membershipGate : ticket.membershipGate;
           const isGated = !!gate && !gate.allowed;
+          /**
+           * Ticket requests (curated access, feature 3). The badge says the
+           * tier is requested, not bought; the `?` beside it says what that
+           * means for the fan's card. `isMixBlocked` is the one rule the
+           * picker enforces itself: one order is either a request or a
+           * purchase, so once the selection is one kind the other kind's `+`
+           * goes dark, and the sentence under the row says why.
+           */
+          const needsApproval = ticket.requiresApproval === true;
+          const isMixBlocked = c.isTierBlockedByApprovalMix(ticket.id);
           const borderColor = isExpired ? "#ef4444" : u && !u.expired ? a(u.color, 0.5) : a(theme.colors.primary, 0.25);
           return (
             <div
@@ -471,6 +483,31 @@ function TicketStep({
                       {onSaleBadge(saleWindow.startsAt, new Date(now))}
                     </div>
                   )}
+                  {needsApproval && (
+                    <div
+                      data-testid="ticket-approval-badge"
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "2px 8px",
+                        borderRadius: 6,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        marginBottom: 6,
+                        marginRight: 6,
+                        background: a(theme.colors.primary, 0.1),
+                        color: theme.colors.primary,
+                        border: `1px solid ${a(theme.colors.primary, 0.3)}`,
+                      }}
+                    >
+                      <ShieldCheck size={12} />
+                      {t("forge.event_tickets.approval_badge")}
+                      <CallHelpHint label={t("forge.event_tickets.approval_help_label")}>
+                        {t("forge.event_tickets.approval_help_body")}
+                      </CallHelpHint>
+                    </div>
+                  )}
                   {u && !u.expired && (
                     <div
                       style={{
@@ -546,7 +583,9 @@ function TicketStep({
                     // but because letting a buyer build a cart the server will
                     // not sell is precisely the "discoverable only by failing"
                     // journey this change exists to end.
-                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired || isGated || isScheduled}
+                    disabled={
+                      selectedQty >= maxAllowed || isSoldOut || isExpired || isGated || isScheduled || isMixBlocked
+                    }
                     style={stepperStyle(theme, true)}
                   >
                     +
@@ -603,6 +642,18 @@ function TicketStep({
                   {seatNotice}
                 </div>
               )}
+              {/* The `+` above went dark for this tier. That is state the fan
+                  has to act on (remove the others, or leave this one), so it
+                  stays visible; the reason lives behind the `?`. */}
+              {isMixBlocked && !isSoldOut && !isExpired && (
+                <div data-testid="ticket-approval-mix-notice" style={infoNoticeStyle(theme.colors.primary, theme)}>
+                  <AlertCircle size={16} />
+                  <span>{t("forge.event_tickets.approval_mix_blocked")}</span>
+                  <CallHelpHint label={t("forge.event_tickets.approval_mix_help_label")}>
+                    {t("forge.event_tickets.approval_mix_help_body")}
+                  </CallHelpHint>
+                </div>
+              )}
               {isExpired && (
                 <div
                   style={{
@@ -634,7 +685,12 @@ function TicketStep({
           it has to be the happy path, with a direct tickets-only checkout as
           the secondary exit. Without add-ons the original flow is untouched:
           Continue goes straight to details, the cart is the secondary exit. */}
-      {hasAddons ? (
+      {/* A request cannot go to the cart: a bundle forces payment and the API
+          refuses approval tiers in one. So a request selection gets the plain
+          Continue with no cart exit, whether or not the page sells add-ons. */}
+      {c.awaitingApproval ? (
+        <ActionBar c={c} fmt={fmt} onNext={c.goToDetails} nextLabel={t("forge.event_tickets.continue")} />
+      ) : hasAddons ? (
         <ActionBar
           c={c}
           fmt={fmt}
@@ -851,12 +907,18 @@ function DetailsStep({
         // fee and any discount: a free ticket with a FLAT booking fee still
         // costs money and still goes to payment, and a 100%-off code on a paid
         // ticket does not.
+        // A request says so on the button, priced or not: with a price the
+        // next screen authorises the card rather than charging it, and with
+        // none there is no next screen at all. Either way "Continue to
+        // payment" would promise a sale that is not happening.
         nextLabel={
           c.isProcessing
             ? t("forge.event_tickets.processing")
-            : c.totalAmount > 0
-              ? t("forge.event_tickets.continue_payment")
-              : t("forge.event_tickets.confirm")
+            : c.awaitingApproval
+              ? t("forge.event_tickets.request_tickets")
+              : c.totalAmount > 0
+                ? t("forge.event_tickets.continue_payment")
+                : t("forge.event_tickets.confirm")
         }
         nextDisabled={c.isProcessing}
       />
@@ -880,10 +942,17 @@ function PaymentStep({
   // row (already contained in the charged total below); inclusive stores get a
   // muted "Includes X tax" caption. Display only.
   const taxSummary = summarizeTaxQuote(c.taxQuote);
+  // A priced ticket request: start-payment said the charge is deferred, so
+  // this screen authorises the card and the wording must not say "purchase".
+  const deferred = isDeferredSettlement(c.settlement);
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.event_tickets.payment_title")}</h2>
-      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.event_tickets.payment_subtitle")}</p>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>
+        {deferred ? t("forge.event_tickets.authorize_title") : t("forge.event_tickets.payment_title")}
+      </h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>
+        {deferred ? t("forge.event_tickets.authorize_subtitle") : t("forge.event_tickets.payment_subtitle")}
+      </p>
       {/* The reservation clock. Event ticket holds are taken unconditionally
           (no feature switch), so this is the one checkout where the countdown
           fires for every profile, and it was the one that did not render it. */}
@@ -954,17 +1023,42 @@ function PaymentStep({
           so it is checked BEFORE the "not configured" branch. */}
       {c.isPaystack ? (
         c.canOpenPaystack ? (
-          <PaystackPayButton
-            onPay={c.openPaystackCheckout}
-            label={t("forge.event_tickets.pay", { amount: fmt(c.totalAmount) })}
-          />
+          <>
+            <PaystackPayButton
+              onPay={c.openPaystackCheckout}
+              label={
+                deferred
+                  ? t("forge.event_tickets.authorize", { amount: fmt(c.totalAmount) })
+                  : t("forge.event_tickets.pay", { amount: fmt(c.totalAmount) })
+              }
+            />
+            {/* Content, not help: the fan has just been told "Authorize" and
+                must be told when the money moves. The built-in Stripe renderer
+                draws its own copy of this line under its own button. */}
+            {deferred && (
+              <p data-testid="deferred-charge-notice" style={{ fontSize: 13, opacity: 0.8, marginTop: 8 }}>
+                {t("forge.event_tickets.deferred_charged_on_approval")}
+                {deferredChargeNotice(c.deferredStrategy) === "authorization" && (
+                  <> {t("forge.event_tickets.deferred_hold_on_statement")}</>
+                )}
+              </p>
+            )}
+          </>
         ) : (
           <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.preparing_payment")}</p>
         )
       ) : !renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>{t("forge.event_tickets.payment_not_configured")}</p>
       ) : c.clientSecret ? (
-        renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: c.totalAmount, mode: "redirect" })
+        renderPayment({
+          clientSecret: c.clientSecret,
+          returnUrl: c.returnUrl,
+          amount: c.totalAmount,
+          mode: "redirect",
+          // Additive: a renderer that ignores these renders the sale it always did.
+          settlement: c.settlement,
+          deferredStrategy: c.deferredStrategy,
+        })
       ) : (
         <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.preparing_payment")}</p>
       )}

package/src/ui/styled/ReviewRequestPage.tsx

@@ -0,0 +1,214 @@
+/**
+ * The page a "how did we do?" email lands on.
+ *
+ * It lives in Forge rather than in either storefront because BOTH need it: the
+ * hosted `/i/reviews/$token` page renders it, and every site also keeps a
+ * root-level `/reviews/$token` route for links in emails that were sent before
+ * the move. Two copies of a page that must agree is the failure this avoids.
+ */
+// The emailed review-link form (`/reviews/:token`) built from the headless
+// `useReviewForm` primitive + Tailwind theme tokens. Lives under `/i/`
+// (centrally managed) — the top-level `/reviews/$token` route is a thin shell
+// so emailed links keep working while the page stays updatable.
+import { useState } from "react";
+import { CheckCircle2, Clock, Star } from "lucide-react";
+import { Loading } from "./Loading";
+import { useReviewForm } from "../headless";
+
+export function ReviewRequestPage({ token }: { token: string }) {
+  const form = useReviewForm(token);
+  const [hoverRating, setHoverRating] = useState(0);
+
+  if (form.status === "loading") return <Loading fullPage />;
+
+  if (form.status === "invalid") {
+    return (
+      <Panel>
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">This review link isn't valid</h1>
+        <p className="fg:text-muted">
+          The link may have been mistyped or is no longer active. If you received it by email, try opening it again
+          from the original message.
+        </p>
+      </Panel>
+    );
+  }
+
+  if (form.status === "expired") {
+    return (
+      <Panel>
+        <Clock size={32} className="fg:text-primary" />
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">This review link has expired</h1>
+        <p className="fg:text-muted">
+          Review links are only valid for a limited time after your purchase
+          {form.entityTitle ? ` of “${form.entityTitle}”` : ""}. Thanks anyway for your support!
+        </p>
+      </Panel>
+    );
+  }
+
+  if (form.status === "submitted" && form.submitted) {
+    return (
+      <Panel>
+        <CheckCircle2 size={36} className="fg:text-primary" />
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">Thank you for your review!</h1>
+        <StarRow rating={form.submitted.rating} size={20} />
+        <p className="fg:text-muted">
+          {form.isHeld
+            ? "Your review has been received and is awaiting approval. It will appear once it's been checked."
+            : `Your review is now live${form.entityTitle ? ` on “${form.entityTitle}”` : ""}.`}
+        </p>
+      </Panel>
+    );
+  }
+
+  if (form.status === "locked" && form.existingReview) {
+    return (
+      <Panel>
+        <CheckCircle2 size={32} className="fg:text-primary" />
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">You've already reviewed this</h1>
+        {form.entityTitle && <p className="fg:font-semibold fg:text-text">{form.entityTitle}</p>}
+        <StarRow rating={form.existingReview.rating} size={20} />
+        {form.existingReview.title && <p className="fg:font-bold fg:text-text">{form.existingReview.title}</p>}
+        {form.existingReview.body && <p className="fg:text-text/85">{form.existingReview.body}</p>}
+        <p className="fg:text-sm fg:text-muted">
+          Reviews can be edited for 30 days after they're written. This one can no longer be changed.
+        </p>
+      </Panel>
+    );
+  }
+
+  const displayStars = hoverRating || form.rating;
+
+  return (
+    <div className="fg:mx-auto fg:w-full fg:max-w-xl fg:px-4 fg:py-6">
+      <form
+        className="fg:flex fg:flex-col fg:gap-5 fg:rounded-xl fg:border fg:border-border fg:bg-surface fg:p-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.submit();
+        }}
+      >
+        <div>
+          <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">
+            {form.existingReview ? "Edit your review" : "Leave a review"}
+          </h1>
+          {form.entityTitle && (
+            <p className="fg:mt-1 fg:text-muted">
+              How was <span className="fg:font-bold fg:text-text">{form.entityTitle}</span>?
+            </p>
+          )}
+          {form.existingReview && (
+            <p className="fg:mt-1.5 fg:text-sm fg:text-muted">
+              You can edit your review within 30 days of writing it. Edits are re-checked before publishing.
+            </p>
+          )}
+        </div>
+
+        {/* Star picker */}
+        <div>
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">Your rating *</span>
+          <div className="fg:flex fg:gap-1.5" role="radiogroup" aria-label="Rating" onMouseLeave={() => setHoverRating(0)}>
+            {[1, 2, 3, 4, 5].map((star) => (
+              <button
+                key={star}
+                type="button"
+                role="radio"
+                aria-checked={form.rating === star}
+                aria-label={`${star} star${star === 1 ? "" : "s"}`}
+                onClick={() => form.setRating(star)}
+                onMouseEnter={() => setHoverRating(star)}
+                className="fg:p-0.5 fg:leading-none"
+              >
+                <Star
+                  size={30}
+                  className={star <= displayStars ? "fg:text-primary" : "fg:text-muted/50"}
+                  fill={star <= displayStars ? "currentColor" : "transparent"}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <label className="fg:block">
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">
+            Title <span className="fg:font-normal fg:text-muted">(optional)</span>
+          </span>
+          <input
+            type="text"
+            maxLength={200}
+            value={form.title}
+            onChange={(e) => form.setTitle(e.target.value)}
+            placeholder="Sum it up in a few words"
+            className="fg:w-full fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-text fg:outline-none fg:focus:border-primary"
+          />
+        </label>
+
+        <label className="fg:block">
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">
+            Your review <span className="fg:font-normal fg:text-muted">(optional)</span>
+          </span>
+          <textarea
+            rows={5}
+            maxLength={5000}
+            value={form.body}
+            onChange={(e) => form.setBody(e.target.value)}
+            placeholder="What did you like or dislike?"
+            className="fg:w-full fg:resize-y fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-text fg:outline-none fg:focus:border-primary"
+          />
+        </label>
+
+        <label className="fg:block">
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">Display name</span>
+          <input
+            type="text"
+            maxLength={100}
+            value={form.reviewerName}
+            onChange={(e) => form.setReviewerName(e.target.value)}
+            className="fg:w-full fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-text fg:outline-none fg:focus:border-primary"
+          />
+          <span className="fg:mt-1 fg:block fg:text-xs fg:text-muted">Shown publicly next to your review.</span>
+        </label>
+
+        {form.errorMessage && (
+          <p className="fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-sm fg:text-text">
+            {form.errorMessage}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={!form.canSubmit}
+          className="fg:w-full fg:rounded-lg fg:bg-primary fg:py-2.5 fg:font-semibold fg:disabled:opacity-50"
+          style={{ color: "var(--forge-text-primary, #fff)" }}
+        >
+          {form.isSubmitting ? "Submitting…" : form.existingReview ? "Update review" : "Submit review"}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function StarRow({ rating, size = 16 }: { rating: number; size?: number }) {
+  return (
+    <span className="fg:inline-flex fg:gap-0.5" aria-label={`${rating} out of 5 stars`}>
+      {[1, 2, 3, 4, 5].map((star) => (
+        <Star
+          key={star}
+          size={size}
+          className={star <= Math.round(rating) ? "fg:text-primary" : "fg:text-muted/50"}
+          fill={star <= Math.round(rating) ? "currentColor" : "transparent"}
+        />
+      ))}
+    </span>
+  );
+}
+
+function Panel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="fg:mx-auto fg:w-full fg:max-w-xl fg:px-4 fg:py-6">
+      <div className="fg:flex fg:flex-col fg:items-center fg:gap-3 fg:rounded-xl fg:border fg:border-border fg:bg-surface fg:p-8 fg:text-center">
+        {children}
+      </div>
+    </div>
+  );
+}