@tribe-nest/forge 3.48.0 → 3.52.0

package/src/ui/styled/CoachingBooking.tsx

@@ -352,7 +352,7 @@ function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; f
                     {dayName}, {dateString}
                   </h3>
                 </div>
-                <div className="grid grid-cols-2 md:grid-cols-4" style={{ gap: 10 }}>
+                <div className="fg:grid fg:grid-cols-2 fg:md:grid-cols-4" style={{ gap: 10 }}>
                   {daySlots.map((slot) => {
                     const selected = slot.slotId === c.selectedSlotId;
                     return (

package/src/ui/styled/CoachingDetail.tsx

@@ -50,7 +50,7 @@ export function CoachingDetail({
 
   return (
     <div
-      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      className={`fg:pb-32 fg:md:pb-0${className ? ` ${className}` : ""}`}
       style={{ maxWidth: 1040, margin: "0 auto", color: tokens.text, ...style }}
     >
       {cover && (
@@ -61,8 +61,8 @@ export function CoachingDetail({
         />
       )}
 
-      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
-        <div className="flex-1 min-w-0">
+      <div className="fg:flex fg:flex-col fg:md:flex-row fg:md:items-start fg:gap-6 fg:mt-6">
+        <div className="fg:flex-1 fg:min-w-0">
           <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: tokens.headingFontFamily }}>{product.title}</h1>
 
           <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
@@ -82,7 +82,7 @@ export function CoachingDetail({
         </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"
+          className="fg:fixed fg:bottom-0 fg:left-0 fg:right-0 fg:z-40 fg:w-full fg:md:sticky fg:md:top-4 fg:md:bottom-auto fg:md:left-auto fg:md:right-auto fg:md:w-[300px] fg:md:shrink-0 fg:flex fg:flex-col fg:gap-3"
           style={{
             padding: 16,
             border: `1px solid ${tokens.primary}80`,

package/src/ui/styled/CohortCheckout.tsx

@@ -0,0 +1,450 @@
+import { type CSSProperties, type ReactNode, useState } from "react";
+import { X } from "lucide-react";
+import { useCohortCheckout } from "../headless/cohort/useCohortCheckout";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { summarizeTaxQuote } from "../format/PriceDisplay";
+import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
+import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
+import { buttonStyle } from "./Button";
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from "../headless/dialog";
+
+export interface CohortCheckoutProps {
+  /** The cohort being sold. */
+  cohortId?: string;
+  /** Trigger button label. */
+  triggerText?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /** Optional payment renderer - falls back to a registered <ForgePaymentProvider>. */
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+  /**
+   * Stripe return URL for a PAID enrolment. Default
+   * `/i/cohorts/:cohortId/finalise`.
+   *
+   * Put ONLY the bookingId in this URL. The booking's secret is handled for you
+   * by the hook, which stashes it in sessionStorage for the leg after the
+   * redirect. Putting it in the URL would hand it to history, referrers and
+   * shared links.
+   */
+  finalisePath?: (cohortId: string, bookingId: string) => string;
+  /** Host-owned navigation on FREE completion (e.g. router navigate). */
+  onComplete?: (info: { cohortId: string; bookingId: string }) => void;
+}
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) =>
+  hex +
+  Math.round(alpha * 255)
+    .toString(16)
+    .padStart(2, "0");
+
+/**
+ * Themed cohort enrolment: an "Enrol" trigger and a modal running plan choice,
+ * buyer details, then payment, on `useCohortCheckout`.
+ *
+ * THE MISSING HALF. The cohort checkout has existed on the backend
+ * (`/public/cohorts/:id/enrollments`) with nothing on any storefront calling it,
+ * so a creator could build a cohort, price it, publish it, and have no way to
+ * sell a seat. The shared `PricingPlans` block drew the prices as text with no
+ * action behind them.
+ *
+ * WHY PLAN CHOICE IS ITS OWN STEP. A cohort is priced from its plans, so "pay in
+ * full or three instalments" is the decision the buyer came to make. It is
+ * shown first, with the creator's default preselected.
+ */
+export function CohortCheckout({
+  cohortId,
+  triggerText,
+  formatAmount,
+  renderPayment,
+  finalisePath,
+  onComplete,
+}: CohortCheckoutProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const registered = usePaymentRenderer();
+  const fmt = useAmountFormatter(formatAmount);
+  const c = useCohortCheckout(cohortId, { finalisePath, onComplete });
+  const renderPay = renderPayment ?? registered ?? undefined;
+  const [open, setOpen] = useState(false);
+
+  const tryClose = (next: boolean) => {
+    if (!next && c.step === "payment" && typeof window !== "undefined") {
+      if (!window.confirm(t("forge.cohort_checkout.confirm_leave"))) return;
+    }
+    setOpen(next);
+  };
+
+  // Nothing to sell is not an error, it is a cohort with no plans yet. Drawing a
+  // dead "Enrol" button would be worse than drawing nothing.
+  if (!c.isLoading && c.plans.length === 0) return null;
+
+  return (
+    <DialogRoot open={open} onOpenChange={tryClose}>
+      <DialogTrigger asChild>
+        <button style={triggerButtonStyle(theme)}>{triggerText ?? t("forge.cohort_checkout.trigger")}</button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
+        <DialogContent
+          style={{
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "min(640px, calc(100vw - 24px))",
+            maxHeight: "88vh",
+            overflowY: "auto",
+            background: theme.colors.background,
+            color: theme.colors.text,
+            borderRadius: theme.cornerRadius,
+            padding: 24,
+            zIndex: 51,
+            fontFamily: theme.fontFamily,
+          }}
+          aria-describedby={undefined}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>
+              {c.cohort?.title ?? c.course?.title ?? t("forge.cohort_checkout.title")}
+            </DialogTitle>
+            <DialogClose asChild>
+              <button aria-label={t("forge.cohort_checkout.aria_close")} style={closeButtonStyle(theme)}>
+                <X size={18} />
+              </button>
+            </DialogClose>
+          </div>
+
+          {c.isLoading && <Loading />}
+          {!c.isLoading && c.plans.length === 0 && (
+            <p style={{ marginTop: 8 }}>{t("forge.cohort_checkout.no_plans")}</p>
+          )}
+          {!c.isLoading && c.plans.length > 0 && <Body c={c} fmt={fmt} renderPayment={renderPay} />}
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+}
+
+type Checkout = ReturnType<typeof useCohortCheckout>;
+
+function Body({
+  c,
+  fmt,
+  renderPayment,
+}: {
+  c: Checkout;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const stepIndex = c.step === "plan" ? 0 : c.step === "details" ? 1 : 2;
+  return (
+    <div style={{ width: "100%" }}>
+      <Progress current={stepIndex} total={3} />
+      {c.step === "plan" && <PlanStep c={c} fmt={fmt} />}
+      {c.step === "details" && <DetailsStep c={c} fmt={fmt} />}
+      {c.step === "payment" && <PaymentStep c={c} fmt={fmt} renderPayment={renderPayment} />}
+    </div>
+  );
+}
+
+function Progress({ current, total }: { current: number; total: number }) {
+  const theme = useForgeTheme();
+  const steps = Array.from({ length: total }, (_, i) => i);
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
+      {steps.map((s, index) => (
+        <div key={s} style={{ display: "flex", alignItems: "center", flex: index < steps.length - 1 ? 1 : "0 0 auto" }}>
+          <div
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: "9999px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              fontWeight: 600,
+              border: `1px solid ${index <= current ? theme.colors.primary : a(theme.colors.primary, 0.25)}`,
+              background: index <= current ? theme.colors.primary : "transparent",
+              color: index <= current ? "#fff" : theme.colors.primary,
+            }}
+          >
+            {index + 1}
+          </div>
+          {index < steps.length - 1 && (
+            <div
+              style={{
+                flex: 1,
+                height: 2,
+                margin: "0 16px",
+                background: index < current ? theme.colors.primary : a(theme.colors.primary, 0.13),
+              }}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** One line of plan copy: "3 payments of $200, every 30 days" or "Pay in full". */
+function planTerms(
+  t: ReturnType<typeof useForgeT>,
+  plan: Checkout["plans"][number],
+  fmt: (n: number) => string,
+): string {
+  const total = Number(plan.totalAmount);
+  if (plan.installmentCount > 1) {
+    return t("forge.cohort_checkout.plan_installments", {
+      count: String(plan.installmentCount),
+      amount: fmt(total / plan.installmentCount),
+      days: String(plan.intervalDays),
+    });
+  }
+  return t("forge.cohort_checkout.plan_in_full");
+}
+
+// ── Step 1: which plan ────────────────────────────────────────────────────────
+function PlanStep({ c, fmt }: { c: Checkout; fmt: (n: number) => string }) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.cohort_checkout.plan_title")}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.cohort_checkout.plan_subtitle")}</p>
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {c.plans.map((plan) => {
+          const selected = plan.id === c.planId;
+          return (
+            <button
+              key={plan.id}
+              type="button"
+              onClick={() => c.choosePlan(plan.id)}
+              style={{
+                textAlign: "left",
+                padding: 16,
+                cursor: "pointer",
+                border: `${selected ? 2 : 1}px solid ${
+                  selected ? theme.colors.primary : a(theme.colors.primary, 0.25)
+                }`,
+                borderRadius: theme.cornerRadius,
+                background: "transparent",
+                color: theme.colors.text,
+                fontFamily: theme.fontFamily,
+              }}
+            >
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
+                <span style={{ fontWeight: 600 }}>{plan.title}</span>
+                <span style={{ fontWeight: 700, color: theme.colors.primary }}>{fmt(Number(plan.totalAmount))}</span>
+              </div>
+              <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>{planTerms(t, plan, fmt)}</div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── Step 2: buyer details ─────────────────────────────────────────────────────
+function DetailsStep({ c, fmt }: { c: Checkout; fmt: (n: number) => string }) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const plan = c.selectedPlan;
+  const total = plan ? Number(plan.totalAmount) : 0;
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.cohort_checkout.details_title")}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.cohort_checkout.details_subtitle")}</p>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div style={{ display: "flex", gap: 12 }}>
+          <input
+            style={inputStyle(theme)}
+            placeholder={t("forge.cohort_checkout.first_name_placeholder")}
+            value={c.firstName}
+            onChange={(e) => c.setFirstName(e.target.value)}
+          />
+          <input
+            style={inputStyle(theme)}
+            placeholder={t("forge.cohort_checkout.last_name_placeholder")}
+            value={c.lastName}
+            onChange={(e) => c.setLastName(e.target.value)}
+          />
+        </div>
+        <input
+          style={inputStyle(theme)}
+          type="email"
+          placeholder={t("forge.cohort_checkout.email_placeholder")}
+          value={c.email}
+          onChange={(e) => c.setEmail(e.target.value)}
+        />
+      </div>
+
+      {c.error && <p style={{ color: "#ef4444", fontSize: 13, marginTop: 8 }}>{c.error}</p>}
+
+      <div
+        style={{
+          marginTop: 20,
+          padding: 16,
+          border: `2px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+        }}
+      >
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span style={{ fontSize: 16 }}>{plan?.title}</span>
+          <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary }}>{fmt(total)}</span>
+        </div>
+        {plan && plan.installmentCount > 1 && (
+          <div style={{ fontSize: 13, opacity: 0.75, marginTop: 6 }}>{planTerms(t, plan, fmt)}</div>
+        )}
+      </div>
+
+      <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
+        <button onClick={() => c.setStep("plan")} style={secondaryButtonStyle(theme)}>
+          {t("forge.cohort_checkout.back")}
+        </button>
+        <button onClick={() => void c.enrol()} disabled={c.isProcessing} style={primaryButtonStyle(theme)}>
+          {c.isProcessing ? t("forge.cohort_checkout.working") : t("forge.cohort_checkout.continue_to_payment")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── Step 3: payment ───────────────────────────────────────────────────────────
+function PaymentStep({
+  c,
+  fmt,
+  renderPayment,
+}: {
+  c: Checkout;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  /**
+   * WHAT IS CHARGED NOW, not what the plan costs. On a three-payment plan the
+   * total is what they commit to and the instalment is what leaves their card
+   * today, and showing only the total tells them they are about to be charged
+   * three times too much.
+   */
+  const dueNow = c.installmentAmount ?? c.totalAmount ?? 0;
+  const total = c.totalAmount ?? dueNow;
+  const isInstalments = (c.installmentCount ?? 1) > 1;
+  const taxSummary = summarizeTaxQuote(c.taxQuote);
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.cohort_checkout.payment_title")}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.cohort_checkout.payment_subtitle")}</p>
+
+      <div
+        style={{
+          padding: 20,
+          border: `2px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+          marginBottom: 16,
+        }}
+      >
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span style={{ fontSize: 16 }}>{t("forge.cohort_checkout.due_now")}</span>
+          <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary }}>
+            {fmt(dueNow)}
+            {taxSummary && (
+              <span
+                style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}
+              >
+                {taxSummary.mode === "inclusive"
+                  ? taxSummary.label
+                  : t("forge.cohort_checkout.tax_added", { amount: taxSummary.formattedTax })}
+              </span>
+            )}
+          </span>
+        </div>
+        {isInstalments && (
+          <p style={{ fontSize: 13, opacity: 0.75, marginTop: 8 }}>
+            {t("forge.cohort_checkout.installment_note", {
+              count: String(c.installmentCount),
+              total: fmt(total),
+            })}
+          </p>
+        )}
+      </div>
+
+      {/*
+        The SECOND consent, on an instalment plan: agreeing to be charged again
+        with nobody present. Stripe sometimes needs it confirmed in the browser,
+        and a checkout that skips it takes payment one and silently fails the
+        rest.
+      */}
+      {c.setupRequiresAction && c.setupClientSecret && renderPayment && (
+        <div style={{ marginBottom: 16 }}>
+          <p style={{ fontSize: 13, opacity: 0.8, marginBottom: 8 }}>
+            {t("forge.cohort_checkout.authorise_future_payments")}
+          </p>
+          {renderPayment({ clientSecret: c.setupClientSecret, returnUrl: c.returnUrl, amount: 0, mode: "redirect" })}
+        </div>
+      )}
+
+      {c.isPaystack ? (
+        c.canOpenPaystack ? (
+          <PaystackPayButton
+            onPay={c.openPaystackCheckout}
+            label={t("forge.cohort_checkout.pay", { amount: fmt(dueNow) })}
+          />
+        ) : (
+          <p style={{ opacity: 0.7 }}>{t("forge.cohort_checkout.preparing_payment")}</p>
+        )
+      ) : !renderPayment ? (
+        <p style={{ color: "#ef4444", fontSize: 14 }}>{t("forge.cohort_checkout.payment_not_configured")}</p>
+      ) : c.clientSecret ? (
+        renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: dueNow, mode: "redirect" })
+      ) : (
+        <p style={{ opacity: 0.7 }}>{t("forge.cohort_checkout.preparing_payment")}</p>
+      )}
+
+      <button onClick={() => c.setStep("details")} style={{ ...secondaryButtonStyle(theme), marginTop: 16 }}>
+        {t("forge.cohort_checkout.back")}
+      </button>
+    </div>
+  );
+}
+
+const triggerButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary", fullWidth: true });
+const primaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary" });
+const secondaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "outline" });
+
+const closeButtonStyle = (t: ForgeTheme): CSSProperties => ({
+  background: "transparent",
+  border: "none",
+  color: t.colors.text,
+  cursor: "pointer",
+  fontSize: 16,
+  lineHeight: 1,
+  opacity: 0.7,
+});
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+});