@tribe-nest/forge 1.13.0

package/src/ui/styled/CourseDetail.tsx

@@ -0,0 +1,140 @@
+import type { PublicCourse } from "../../types/models";
+import { useGetCourse } from "../../data/queries/useCourses";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { PriceDisplay } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Loading } from "./Loading";
+import { CourseCheckout } from "./CourseCheckout";
+import { ReviewsSection } from "./ReviewsSection";
+
+export interface CourseDetailProps {
+  /** Course slug (resolves the course). */
+  slug?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: React.CSSProperties;
+  /** SSR-hydrated course, used as React Query initial data. */
+  initialCourse?: PublicCourse;
+  /** Stripe return URL for a PAID enrollment (forwarded to the enroll flow). */
+  finalisePath?: (slug: string, bookingId: string) => string;
+  /** Host-owned navigation on FREE completion (forwarded to the enroll flow). */
+  onComplete?: (info: { slug: string; bookingId: string }) => void;
+}
+
+export function CourseDetail({
+  slug,
+  formatAmount,
+  className,
+  style,
+  initialCourse,
+  finalisePath,
+  onComplete,
+}: CourseDetailProps) {
+  const t = useThemeTokens();
+  const fmt = useAmountFormatter(formatAmount);
+  const pricesIncludeTax = usePricesIncludeTax();
+  const { data: course, isLoading } = useGetCourse(slug, { initialData: initialCourse });
+
+  if (isLoading) return <Loading fullPage />;
+  if (!course) return <p>Course not found.</p>;
+
+  const cover = course.media?.find((m) => m.type === "image")?.url ?? course.media?.[0]?.url;
+  const introVideo = course.media?.find((m) => m.type === "video")?.url;
+  const modules = course.modules ?? [];
+
+  return (
+    <div
+      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      style={{ maxWidth: 1040, margin: "0 auto", color: t.text, ...style }}
+    >
+      {introVideo ? (
+        <video
+          src={introVideo}
+          controls
+          style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: t.cornerRadius }}
+        />
+      ) : (
+        cover && (
+          <img
+            src={cover}
+            alt={course.title}
+            style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: t.cornerRadius }}
+          />
+        )
+      )}
+
+      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
+        <div className="flex-1 min-w-0">
+          <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: t.headingFontFamily }}>{course.title}</h1>
+
+          {course.description && (
+            <div dangerouslySetInnerHTML={{ __html: course.description }} style={{ lineHeight: 1.7, opacity: 0.9 }} />
+          )}
+
+          {modules.length > 0 && (
+            <>
+              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 12px", fontFamily: t.headingFontFamily }}>Course Content</h2>
+              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+                {modules.map((module) => (
+                  <div
+                    key={module.id}
+                    style={{
+                      padding: 16,
+                      border: `1px solid ${t.primary}40`,
+                      borderRadius: t.cornerRadius,
+                    }}
+                  >
+                    <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: module.description ? 6 : 0 }}>
+                      {module.title}
+                    </h3>
+                    {module.description && <p style={{ opacity: 0.7, marginBottom: 8 }}>{module.description}</p>}
+                    {module.lessons && module.lessons.length > 0 && (
+                      <ul style={{ listStyle: "disc", paddingLeft: 20, display: "flex", flexDirection: "column", gap: 4 }}>
+                        {module.lessons.map((lesson) => (
+                          <li key={lesson.id} style={{ opacity: 0.8 }}>
+                            {lesson.title}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        <aside
+          className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
+          style={{
+            padding: 16,
+            border: `1px solid ${t.primary}80`,
+            borderRadius: t.cornerRadius,
+            background: t.surface,
+          }}
+        >
+          <span style={{ fontWeight: 700, fontSize: 22, color: t.primary }}>
+            {course.compareAtPrice != null && Number(course.compareAtPrice) > Number(course.price) && (
+              <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 16 }}>
+                {fmt(Number(course.compareAtPrice))}
+              </span>
+            )}
+            {Number(course.price) <= 0 ? (
+              "Free"
+            ) : (
+              <PriceDisplay amount={Number(course.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+            )}
+          </span>
+          <CourseCheckout slug={slug} formatAmount={fmt} finalisePath={finalisePath} onComplete={onComplete} />
+        </aside>
+      </div>
+
+      {/* Verified-purchase reviews */}
+      <ReviewsSection entityType="course" entityId={course.id} initialAggregate={course.reviewAggregate} />
+    </div>
+  );
+}

package/src/ui/styled/CoursesGrid.tsx

@@ -0,0 +1,85 @@
+import { useGetCourses } from "../../data/queries/useCourses";
+import type { PublicCourse } from "../../types/models";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { PriceDisplay } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Loading } from "./Loading";
+
+export interface CoursesGridProps {
+  columns?: number;
+  limit?: number;
+  formatAmount?: (amount: number) => string;
+  onSelect?: (course: PublicCourse) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/** Themed courses grid, built on `useGetCourses`. */
+export function CoursesGrid({ columns = 3, limit, formatAmount, onSelect, className, style }: CoursesGridProps) {
+  const t = useThemeTokens();
+  const fmt = useAmountFormatter(formatAmount);
+  const pricesIncludeTax = usePricesIncludeTax();
+  const { data, isLoading } = useGetCourses({ page: 1 });
+  const courses = (data?.data ?? []).slice(0, limit ?? 100);
+
+  if (isLoading) return <Loading />;
+  if (!courses.length) return <p style={{ color: t.text, opacity: 0.7 }}>No courses yet.</p>;
+
+  const gap = 16;
+  const track = `minmax(max(150px, calc((100% - ${(columns - 1) * gap}px) / ${columns})), 1fr)`;
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fill, ${track})`,
+        gap,
+        fontFamily: t.fontFamily,
+        ...style,
+      }}
+    >
+      {courses.map((course) => {
+        const cover = course.media?.find((m) => m.type === "image")?.url ?? course.media?.[0]?.url;
+        const price = Number(course.price) || 0;
+        const compareAt = course.compareAtPrice != null ? Number(course.compareAtPrice) : null;
+        return (
+          <button
+            key={course.id}
+            onClick={() => onSelect?.(course)}
+            style={{
+              textAlign: "left",
+              cursor: onSelect ? "pointer" : "default",
+              background: t.surface,
+              border: `1px solid ${t.primary}20`,
+              borderRadius: t.cornerRadius,
+              overflow: "hidden",
+              padding: 0,
+              color: t.text,
+            }}
+          >
+            <div style={{ aspectRatio: "16 / 9", background: `${t.primary}10` }}>
+              {cover && <img src={cover} alt={course.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
+            </div>
+            <div style={{ padding: 10 }}>
+              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{course.title}</div>
+              <div style={{ color: t.primary, fontWeight: 600, fontSize: 14 }}>
+                {compareAt != null && compareAt > price && (
+                  <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 6, fontWeight: 400 }}>
+                    {fmt(compareAt)}
+                  </span>
+                )}
+                {price > 0 ? (
+                  <PriceDisplay amount={price} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+                ) : (
+                  "Free"
+                )}
+              </div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/styled/CurrencySwitcher.tsx

@@ -0,0 +1,51 @@
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { currencySymbol, type Currency } from "../../types/models";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+
+export interface CurrencySwitcherProps {
+  /** Extra class(es) on the select. */
+  className?: string;
+  /** Inline style merged into the select. */
+  style?: React.CSSProperties;
+}
+
+/**
+ * Drop-in currency switcher: a themed select of the tenant's supported
+ * currencies, bound to `usePublicAuth().userSelectedCurrency`. Picking one
+ * re-formats/converts every amount rendered via `useFormatCurrency`. Renders
+ * nothing when the site has no multi-currency setup. Drop it into a header:
+ * `<CurrencySwitcher />`.
+ */
+export function CurrencySwitcher({ className, style }: CurrencySwitcherProps) {
+  const t = useThemeTokens();
+  const { currencies, userSelectedCurrency, setUserSelectedCurrency } = usePublicAuth();
+
+  if (!currencies || !currencies.supportedCurrencies?.length) return null;
+
+  return (
+    <select
+      className={className}
+      aria-label="Currency"
+      value={userSelectedCurrency ?? currencies.userCurrency ?? ""}
+      onChange={(e) => setUserSelectedCurrency(e.target.value as Currency)}
+      style={{
+        background: "transparent",
+        color: t.text,
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        padding: "6px 8px",
+        fontFamily: t.fontFamily,
+        fontSize: 14,
+        cursor: "pointer",
+        ...style,
+      }}
+    >
+      {currencies.supportedCurrencies.map((c) => (
+        <option key={c} value={c}>
+          {currencySymbol[c] ? `${currencySymbol[c]} ` : ""}
+          {c}
+        </option>
+      ))}
+    </select>
+  );
+}

package/src/ui/styled/DonationButton.tsx

@@ -0,0 +1,247 @@
+import type { ReactNode } from "react";
+import { Donation, useDonationContext, type DonationPaymentRenderProps } from "../headless/donation";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { readableTextOn } from "../theme/contrast";
+import { summarizeTaxQuote } from "../format/PriceDisplay";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+
+export interface DonationButtonProps {
+  donationId: string;
+  /** Trigger label. Falls back to the donation's configured button text. */
+  text?: string;
+  returnUrl?: string;
+  onSuccess?: () => void;
+  /**
+   * Render the payment UI (Stripe Elements stay in the app — Forge owns only the
+   * donation data/flow). Optional if a <ForgePaymentProvider> is registered.
+   */
+  renderPayment?: (props: DonationPaymentRenderProps) => ReactNode;
+  /** Optional currency formatter; defaults to a plain `$0.00`. */
+  formatAmount?: (amount: number) => string;
+}
+
+/**
+ * One-line themed donation button + modal flow, built on the headless
+ * `<Donation>` compound. Respects the active `ForgeThemeProvider` tokens.
+ */
+export function DonationButton({ donationId, text, returnUrl, onSuccess, renderPayment, formatAmount }: DonationButtonProps) {
+  const theme = useForgeTheme();
+  const registered = usePaymentRenderer();
+  const fmt = useAmountFormatter(formatAmount);
+  // Donations confirm in place, so default the registered renderer to "manual".
+  const renderPay =
+    renderPayment ?? (registered ? (p: DonationPaymentRenderProps) => registered({ ...p, mode: "manual" }) : undefined);
+
+  return (
+    <Donation donationId={donationId} returnUrl={returnUrl} onSuccess={onSuccess}>
+      <Donation.Trigger asChild>
+        <button
+          style={{
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            border: "none",
+            borderRadius: theme.cornerRadius,
+            padding: "10px 18px",
+            fontWeight: 600,
+            cursor: "pointer",
+            fontFamily: theme.fontFamily,
+          }}
+        >
+          {text ?? "Donate"}
+        </button>
+      </Donation.Trigger>
+
+      <Donation.Modal
+        overlayStyle={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }}
+        style={{
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "min(480px, calc(100vw - 32px))",
+          maxHeight: "85vh",
+          overflowY: "auto",
+          background: theme.colors.background,
+          color: theme.colors.text,
+          borderRadius: theme.cornerRadius,
+          padding: 24,
+          zIndex: 51,
+          fontFamily: theme.fontFamily,
+        }}
+      >
+        <Donation.Title className="">{text ?? "Support"}</Donation.Title>
+        <DonationBody fmt={fmt} renderPayment={renderPay} />
+      </Donation.Modal>
+    </Donation>
+  );
+}
+
+function DonationBody({
+  fmt,
+  renderPayment,
+}: {
+  fmt: (n: number) => string;
+  renderPayment?: (props: DonationPaymentRenderProps) => ReactNode;
+}) {
+  const c = useDonationContext();
+  const theme = useForgeTheme();
+  // Authoritative tax quote from the donation start-payment (display only).
+  const taxSummary = summarizeTaxQuote(c.startResult?.taxQuote);
+  const inputStyle = {
+    width: "100%",
+    padding: 10,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.background,
+    color: theme.colors.text,
+    marginTop: 6,
+  } as const;
+
+  if (c.isLoading) return <Loading />;
+
+  // ── Result ──
+  if (c.step === "result") {
+    return (
+      <div style={{ textAlign: "center", padding: "16px 0" }}>
+        <h3 style={{ marginBottom: 8 }}>
+          {c.outcome === "succeeded" ? "Donation received" : "Payment failed"}
+        </h3>
+        <p style={{ opacity: 0.8 }}>
+          {c.outcome === "succeeded"
+            ? c.donation?.successMessage || "Thank you for your contribution."
+            : c.paymentErrorMessage || "Your card was not charged. Please try again."}
+        </p>
+        <div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "center" }}>
+          {c.outcome === "failed" && (
+            <button onClick={c.reset} style={{ ...inputStyle, width: "auto", cursor: "pointer" }}>
+              Try again
+            </button>
+          )}
+          <Donation.Close asChild>
+            <button
+              style={{
+                background: theme.colors.primary,
+                color: readableTextOn(theme.colors.primary),
+                border: "none",
+                borderRadius: theme.cornerRadius,
+                padding: "10px 18px",
+                cursor: "pointer",
+              }}
+            >
+              Close
+            </button>
+          </Donation.Close>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Payment ──
+  if (c.step === "payment") {
+    return (
+      <div style={{ marginTop: 16 }}>
+        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
+          <span>Total</span>
+          <strong style={{ color: theme.colors.primary, textAlign: "right" }}>
+            {fmt(c.startResult?.totalAmount ?? c.estimatedTotal)}
+            {taxSummary && (
+              <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+                {taxSummary.mode === "inclusive" ? taxSummary.label : `incl. ${taxSummary.formattedTax} tax`}
+              </span>
+            )}
+          </strong>
+        </div>
+        {renderPayment ? (
+          <Donation.PaymentStep>{(p) => renderPayment(p)}</Donation.PaymentStep>
+        ) : (
+          <p style={{ opacity: 0.7 }}>Payment is not configured.</p>
+        )}
+      </div>
+    );
+  }
+
+  // ── Amount + donor ──
+  return (
+    <Donation.AmountStep>
+      <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 12 }}>
+        {c.presets.length > 0 && (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+            {c.presets.map((amount) => {
+              const active = c.selectedPreset === amount && !c.customAmount;
+              return (
+                <button
+                  key={amount}
+                  type="button"
+                  onClick={() => {
+                    c.setSelectedPreset(amount);
+                    c.setCustomAmount("");
+                  }}
+                  style={{
+                    padding: "8px 14px",
+                    border: `1px solid ${active ? theme.colors.primary : theme.colors.primary + "40"}`,
+                    background: active ? theme.colors.primary + "1f" : theme.colors.background,
+                    color: theme.colors.text,
+                    borderRadius: theme.cornerRadius,
+                    cursor: "pointer",
+                  }}
+                >
+                  {fmt(amount)}
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        <label>
+          Custom amount{c.minimum > 0 ? ` (min ${fmt(c.minimum)})` : ""}
+          <input
+            type="number"
+            min={c.minimum || 0}
+            step="0.01"
+            value={c.customAmount}
+            onChange={(e) => {
+              c.setCustomAmount(e.target.value);
+              c.setSelectedPreset(null);
+            }}
+            style={inputStyle}
+          />
+        </label>
+
+        {c.donation?.coverFeesEnabled && c.effectiveAmount > 0 && (
+          <label style={{ display: "flex", gap: 8, alignItems: "center" }}>
+            <input type="checkbox" checked={c.coverFees} onChange={(e) => c.setCoverFees(e.target.checked)} />
+            <span>Cover the {fmt(c.estimatedFee)} processing fee</span>
+          </label>
+        )}
+
+        <div style={{ display: "flex", gap: 8 }}>
+          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle} />
+          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle} />
+        </div>
+        <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle} />
+        <textarea placeholder="Message (optional)" value={c.message} onChange={(e) => c.setMessage(e.target.value)} rows={2} style={inputStyle} />
+
+        {c.startError && <p style={{ color: "#ef4444", fontSize: 14 }}>{c.startError}</p>}
+
+        <button
+          onClick={c.continueToPayment}
+          disabled={c.isStarting}
+          style={{
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            border: "none",
+            borderRadius: theme.cornerRadius,
+            padding: "12px 18px",
+            fontWeight: 600,
+            cursor: "pointer",
+            opacity: c.isStarting ? 0.6 : 1,
+          }}
+        >
+          {c.isStarting ? "Processing…" : `Donate ${c.effectiveAmount > 0 ? fmt(c.estimatedTotal) : ""}`.trim()}
+        </button>
+      </div>
+    </Donation.AmountStep>
+  );
+}

package/src/ui/styled/DonationPage.tsx

@@ -0,0 +1,29 @@
+import { DonationButton } from "./DonationButton";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+
+export interface DonationPageProps {
+  /** Donation id from the URL search param (`?id=`). */
+  donationId?: string;
+  /** Optional currency formatter passed through to the donation flow. */
+  formatAmount?: (amount: number) => string;
+}
+
+/** Standalone donation page — heading + copy wrapping the `DonationButton` flow. */
+export function DonationPage({ donationId, formatAmount }: DonationPageProps) {
+  const fmt = useAmountFormatter(formatAmount);
+  return (
+    <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center" }}>
+      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 12 }}>Support the work</h1>
+      <p style={{ opacity: 0.75, marginBottom: 24 }}>
+        Your contribution keeps this going. Thank you.
+      </p>
+      {donationId ? (
+        <DonationButton donationId={donationId} formatAmount={fmt} />
+      ) : (
+        <p style={{ opacity: 0.6 }}>
+          Add a donation id to the URL, e.g. <code>/i/donation?id=&lt;donationId&gt;</code>.
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/EmailListForm.tsx

@@ -0,0 +1,88 @@
+import { useEmailListForm } from "../headless/forms/useEmailListForm";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface EmailListFormProps {
+  emailListId?: string;
+  leadMagnetId?: string;
+  includeName?: boolean;
+  includePhoneNumber?: boolean;
+  title?: string;
+  description?: string;
+  buttonText?: string;
+  successMessage?: string;
+}
+
+/** One-line themed email-list signup, built on `useEmailListForm`. */
+export function EmailListForm({
+  emailListId,
+  leadMagnetId,
+  includeName,
+  includePhoneNumber,
+  title = "Join my email list",
+  description,
+  buttonText = "Join",
+  successMessage = "Thanks for subscribing!",
+}: EmailListFormProps) {
+  const theme = useForgeTheme();
+  const f = useEmailListForm({ emailListId, leadMagnetId, includeName, includePhoneNumber });
+
+  const inputStyle = {
+    width: "100%",
+    padding: 10,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.background,
+    color: theme.colors.text,
+  } as const;
+
+  if (f.isSuccess) {
+    return (
+      <div style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "center", padding: 8 }}>
+        {f.requiresConfirmation ? "Almost there — check your email to confirm." : successMessage}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10, color: theme.colors.text, fontFamily: theme.fontFamily }}>
+      {title && <h3 style={{ fontWeight: 600 }}>{title}</h3>}
+      {description && <p style={{ opacity: 0.8, fontSize: 14 }}>{description}</p>}
+      {includeName && (
+        <input placeholder="Your name" value={f.name} onChange={(e) => f.setName(e.target.value)} style={inputStyle} />
+      )}
+      <input
+        type="email"
+        placeholder="Email address"
+        value={f.email}
+        onChange={(e) => f.setEmail(e.target.value)}
+        style={inputStyle}
+      />
+      {includePhoneNumber && (
+        <input
+          placeholder="Phone number"
+          value={f.phoneNumber}
+          onChange={(e) => f.setPhoneNumber(e.target.value)}
+          style={inputStyle}
+        />
+      )}
+      {f.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{f.error}</p>}
+      <button
+        onClick={f.submit}
+        disabled={f.isSubmitting}
+        style={{
+          background: theme.colors.primary,
+          color: readableTextOn(theme.colors.primary),
+          border: "none",
+          borderRadius: theme.cornerRadius,
+          padding: "10px 18px",
+          fontWeight: 600,
+          cursor: "pointer",
+          opacity: f.isSubmitting ? 0.6 : 1,
+        }}
+      >
+        {f.isSubmitting ? "Joining…" : buttonText}
+      </button>
+    </div>
+  );
+}