@tribe-nest/forge 2.2.0 → 3.4.0

package/src/ui/styled/Checkout.tsx

@@ -98,6 +98,14 @@ export function Checkout({
     if (id) go(`${finalisePath}?orderId=${id}`);
   };
 
+  // A discount that took a BUNDLE to zero settles it server-side — there is no
+  // intent to confirm, so waiting on the payment element would strand the buyer
+  // on a checkout they have already completed.
+  useEffect(() => {
+    if (c.settledCheckoutId) go(`${finalisePath}?checkoutId=${c.settledCheckoutId}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [c.settledCheckoutId]);
+
   // ── Shared style helpers ────────────────────────────────────────────────────
   const inputStyle: React.CSSProperties = {
     width: "100%",
@@ -637,10 +645,16 @@ export function Checkout({
               </div>
             </div>
 
-            {/* Coupon */}
-            {c.currentStage === "payment" && c.orderId && (
+            {/* Coupon.
+                A single-surface order is re-priced in place by
+                `/public/orders/apply-coupon`, so its field only appears once the
+                order exists. A BUNDLE is offered the field from the first stage:
+                a code typed before the checkout exists travels with the call
+                that creates it, and one typed afterwards goes through
+                `/public/checkouts/apply-coupon`. Neither freezes the field. */}
+            {((c.currentStage === "payment" && c.orderId) || c.isBundle) && (
               <div className="mb-4 pb-4" style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}>
-                {!c.showCouponInput && !c.appliedCoupon && (
+                {!c.showCouponInput && !c.appliedCoupon && c.isCouponEditable && (
                   <button
                     type="button"
                     className="text-sm underline"
@@ -650,13 +664,14 @@ export function Checkout({
                     Have a coupon code?
                   </button>
                 )}
-                {c.showCouponInput && !c.appliedCoupon && (
+                {c.showCouponInput && !c.appliedCoupon && c.isCouponEditable && (
                   <div className="flex gap-2 items-end">
                     <div className="flex-1">
                       <p className="text-sm mb-1" style={{ color: theme.colors.text }}>
                         Coupon Code
                       </p>
                       <input
+                        aria-label="Coupon code"
                         placeholder="Enter coupon code"
                         style={inputStyle}
                         value={c.couponCode}
@@ -670,6 +685,13 @@ export function Checkout({
                     />
                   </div>
                 )}
+                {/* Only while the bundle does not exist yet: from then on the
+                    code is priced live, so promising "at payment" would be wrong. */}
+                {c.isBundle && !c.checkoutId && c.showCouponInput && !c.appliedCoupon && c.isCouponEditable && (
+                  <p className="text-xs mt-1" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                    Your code is applied when you reach payment.
+                  </p>
+                )}
                 {c.couponError && <p className="text-sm text-red-500 mt-1">{c.couponError}</p>}
                 {c.appliedCoupon && (
                   <div
@@ -680,21 +702,30 @@ export function Checkout({
                       <p className="text-sm font-semibold" style={{ color: theme.colors.primary }}>
                         Coupon applied: {c.appliedCoupon.code}
                       </p>
+                      {/* A bundle reports the cash that came off and the code it
+                          came off under, but not the rate — so say the cash,
+                          never a made-up "0% off". */}
                       <p className="text-xs" style={{ color: theme.colors.text }}>
                         {c.appliedCoupon.discountType === "percentage"
                           ? `${c.appliedCoupon.discountValue}% off`
-                          : `${formatCurrency(c.appliedCoupon.discountValue ?? 0)} off`}
+                          : c.appliedCoupon.discountValue != null
+                            ? `${formatCurrency(c.appliedCoupon.discountValue)} off`
+                            : c.appliedCoupon.discountAmount != null
+                              ? `${formatCurrency(c.appliedCoupon.discountAmount)} off`
+                              : "Applied at payment"}
                       </p>
                     </div>
-                    <button
-                      type="button"
-                      className="text-sm underline"
-                      style={{ color: theme.colors.text }}
-                      onClick={c.removeCoupon}
-                      disabled={c.isApplyingCoupon}
-                    >
-                      Remove
-                    </button>
+                    {c.isCouponEditable && (
+                      <button
+                        type="button"
+                        className="text-sm underline"
+                        style={{ color: theme.colors.text }}
+                        onClick={c.removeCoupon}
+                        disabled={c.isApplyingCoupon}
+                      >
+                        Remove
+                      </button>
+                    )}
                   </div>
                 )}
               </div>

package/src/ui/styled/CoachingBooking.tsx

@@ -8,6 +8,7 @@ import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
+import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
 import {
   DialogRoot,
   DialogTrigger,
@@ -447,6 +448,15 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
           );
         })}
 
+        {/* `booking/update` re-derives the gross price from the PRODUCT on every
+            call, so Apply and Remove are both real round trips and Remove puts
+            the original total back exactly. */}
+        {!isFree && (
+          <div style={{ marginTop: 8, paddingTop: 16, borderTop: `1px solid ${a(theme.colors.primary, 0.13)}` }}>
+            <DiscountCodeField coupon={c.coupon} fmt={fmt} />
+          </div>
+        )}
+
         {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
 
         <p style={{ fontSize: 12, color: a(theme.colors.text, 0.6), marginTop: 4 }}>
@@ -497,11 +507,15 @@ function PaymentStep({
           border: `2px solid ${a(theme.colors.primary, 0.25)}`,
           borderRadius: theme.cornerRadius,
           marginBottom: 16,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
         }}
       >
+        <DiscountSummaryLines
+          subTotal={c.subTotal ?? Number(product.price)}
+          discountAmount={c.coupon.discountAmount}
+          appliedCoupons={c.coupon.appliedCoupons}
+          fmt={fmt}
+        />
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <span style={{ fontSize: 16 }}>Total Amount</span>
         <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary, textAlign: "right" }}>
           {fmt(total)}
@@ -511,6 +525,7 @@ function PaymentStep({
             </span>
           )}
         </span>
+        </div>
       </div>
       {!renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
@@ -554,13 +569,18 @@ function ActionBar({
           border: `1px solid ${a(theme.colors.primary, 0.25)}`,
           borderRadius: theme.cornerRadius,
           marginBottom: 16,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
         }}
       >
-        <span style={{ fontWeight: 600 }}>Total</span>
-        <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(total)}</span>
+        <DiscountSummaryLines
+          subTotal={c.subTotal ?? Number(product.price)}
+          discountAmount={c.coupon.discountAmount}
+          appliedCoupons={c.coupon.appliedCoupons}
+          fmt={fmt}
+        />
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span style={{ fontWeight: 600 }}>Total</span>
+          <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(total)}</span>
+        </div>
       </div>
       {(onBack || onNext) && (
         <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>

package/src/ui/styled/CoachingConfirmation.tsx

@@ -5,6 +5,7 @@ import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
 import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
 import { useCoachingBookingFinalize } from "../../data/queries/useFinalize";
+import { AddToCalendar } from "./AddToCalendar";
 
 export interface CoachingConfirmationProps {
   slug: string;
@@ -123,6 +124,17 @@ export function CoachingConfirmation({
               Includes {fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} tax
             </div>
           )}
+
+          {confirmed && data?.sessionStartTime && (
+            <AddToCalendar
+              variant="compact"
+              title={data.productTitle || "Coaching session"}
+              start={data.sessionStartTime}
+              end={data.sessionEndTime}
+              defaultDurationMinutes={data.durationMinutes ?? undefined}
+              style={{ marginTop: 18 }}
+            />
+          )}
         </div>
 
         {/* ── Actions ── */}

package/src/ui/styled/CourseCheckout.tsx

@@ -1,6 +1,6 @@
 import { type CSSProperties, type ReactNode, useMemo, useState } from "react";
 import { X } from "lucide-react";
-import type { PublicCourse, QuestionnaireQuestion } from "../../types/models";
+import type { AppliedDiscountCoupon, PublicCourse, QuestionnaireQuestion } from "../../types/models";
 import { useCourseCheckout } from "../headless/course/useCourseCheckout";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -8,6 +8,7 @@ import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
+import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
 import {
   DialogRoot,
   DialogTrigger,
@@ -260,6 +261,15 @@ function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fm
           </div>
         )}
 
+        {/* `booking/update` re-derives the gross price from the COURSE on every
+            call, so Apply and Remove are both real round trips and Remove puts
+            the original total back exactly. */}
+        {!isFree && (
+          <div style={{ marginTop: 8, paddingTop: 16, borderTop: `1px solid ${a(theme.colors.primary, 0.13)}` }}>
+            <DiscountCodeField coupon={c.coupon} fmt={fmt} />
+          </div>
+        )}
+
         <p style={{ fontSize: 12, opacity: 0.6 }}>
           By continuing, you agree to receive course access and important updates via email.
         </p>
@@ -268,8 +278,11 @@ function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fm
       </div>
       <ActionBar
         fmt={fmt}
-        amount={price}
+        amount={c.totalAmount ?? price}
         compareAt={compareAt}
+        subTotal={c.subTotal ?? price}
+        discountAmount={c.coupon.discountAmount}
+        appliedCoupons={c.coupon.appliedCoupons}
         onNext={onContinue}
         nextLabel={c.isProcessing ? "Processing…" : isFree ? "Confirm Purchase" : "Continue to Payment"}
         nextDisabled={c.isProcessing}
@@ -291,7 +304,9 @@ function PaymentStep({
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
 }) {
   const theme = useForgeTheme();
-  const amount = Number(course.price);
+  // The server's figure once it exists — the booking quote is already net of
+  // any discount, so the buyer never sees a total that disagrees with the charge.
+  const amount = c.totalAmount ?? Number(course.price);
   const compareAt = course.compareAtPrice != null ? Number(course.compareAtPrice) : null;
   // Authoritative tax quote from start-payment (display only) — the charged
   // amount already reflects it.
@@ -306,11 +321,15 @@ function PaymentStep({
           border: `2px solid ${a(theme.colors.primary, 0.25)}`,
           borderRadius: theme.cornerRadius,
           marginBottom: 16,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
         }}
       >
+        <DiscountSummaryLines
+          subTotal={c.subTotal ?? amount}
+          discountAmount={c.coupon.discountAmount}
+          appliedCoupons={c.coupon.appliedCoupons}
+          fmt={fmt}
+        />
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <span style={{ fontSize: 16 }}>Total Amount</span>
         <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary }}>
           {compareAt != null && compareAt > amount && (
@@ -325,6 +344,7 @@ function PaymentStep({
             </span>
           )}
         </span>
+        </div>
       </div>
       {!renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
@@ -349,6 +369,9 @@ function ActionBar({
   fmt,
   amount,
   compareAt,
+  subTotal,
+  discountAmount = 0,
+  appliedCoupons,
   onBack,
   onNext,
   nextLabel,
@@ -357,6 +380,9 @@ function ActionBar({
   fmt: (n: number) => string;
   amount: number;
   compareAt?: number | null;
+  subTotal?: number;
+  discountAmount?: number;
+  appliedCoupons?: AppliedDiscountCoupon[];
   onBack?: () => void;
   onNext: () => void;
   nextLabel: string;
@@ -371,20 +397,25 @@ function ActionBar({
           border: `1px solid ${a(theme.colors.primary, 0.25)}`,
           borderRadius: theme.cornerRadius,
           marginBottom: 16,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
         }}
       >
-        <span style={{ fontWeight: 600 }}>Total</span>
-        <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>
-          {compareAt != null && compareAt > amount && (
-            <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 14 }}>
-              {fmt(compareAt)}
-            </span>
-          )}
-          {fmt(amount)}
-        </span>
+        <DiscountSummaryLines
+          subTotal={subTotal ?? amount}
+          discountAmount={discountAmount}
+          appliedCoupons={appliedCoupons}
+          fmt={fmt}
+        />
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span style={{ fontWeight: 600 }}>Total</span>
+          <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>
+            {compareAt != null && compareAt > amount && (
+              <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 14 }}>
+                {fmt(compareAt)}
+              </span>
+            )}
+            {fmt(amount)}
+          </span>
+        </div>
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
         <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>

package/src/ui/styled/DiscountCode.tsx

@@ -0,0 +1,206 @@
+import type { CSSProperties } from "react";
+import type { AppliedDiscountCoupon } from "../../types/models";
+import type { CouponField } from "../headless/coupon/useCouponField";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { buttonStyle } from "./Button";
+
+/** 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");
+
+export interface DiscountCodeFieldProps {
+  coupon: CouponField;
+  /** Format a numeric amount for display. */
+  fmt: (n: number) => string;
+  /**
+   * Disable the input. Used once the underlying record has been created and the
+   * code can no longer be changed (tickets, bundles).
+   */
+  disabled?: boolean;
+  /**
+   * What "Apply" does. `"quote"` re-prices immediately against the server;
+   * `"deferred"` means the code is carried into the next step, because the
+   * pillar has no endpoint that can price it without creating a record.
+   */
+  mode?: "quote" | "deferred";
+  /** Collapsed-state prompt. */
+  promptText?: string;
+}
+
+/**
+ * The buyer's discount-code input, shared by every checkout.
+ *
+ * Two things it deliberately does NOT do:
+ *
+ * 1. It never writes its own rejection copy. The backend answers a refused code
+ *    with the actual reason, already translated — minimum not met, expired,
+ *    already used, members only. Collapsing all of that into "invalid code"
+ *    throws away the only thing that tells the buyer whether to fix the cart,
+ *    fix the code, or give up.
+ * 2. It never computes a discount. Every figure it renders came back from the
+ *    server, including automatic (no-code) discounts, which is the ONLY way a
+ *    buyer learns one applied.
+ */
+export function DiscountCodeField({
+  coupon,
+  fmt,
+  disabled,
+  mode = "quote",
+  promptText = "Have a discount code?",
+}: DiscountCodeFieldProps) {
+  const theme = useForgeTheme();
+  // Automatic discounts have no code the buyer typed, so they are shown as
+  // applied even when the input was never opened.
+  const applied = coupon.appliedCoupons;
+  const showInput = coupon.showInput && !disabled;
+
+  return (
+    <div data-testid="discount-code" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      {!showInput && applied.length === 0 && !disabled && (
+        <button
+          type="button"
+          data-testid="discount-code-open"
+          onClick={() => coupon.setShowInput(true)}
+          style={{
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            textAlign: "left",
+            fontSize: 14,
+            textDecoration: "underline",
+            cursor: "pointer",
+            color: theme.colors.primary,
+            fontFamily: theme.fontFamily,
+          }}
+        >
+          {promptText}
+        </button>
+      )}
+
+      {showInput && (
+        <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
+          <input
+            aria-label="Discount code"
+            data-testid="discount-code-input"
+            placeholder="Enter code"
+            value={coupon.code}
+            onChange={(e) => coupon.setCode(e.target.value.toUpperCase())}
+            style={{ ...inputStyle(theme), flex: 1 }}
+          />
+          {mode === "quote" && (
+            <button
+              type="button"
+              data-testid="discount-code-apply"
+              onClick={() => void coupon.apply()}
+              disabled={coupon.isApplying || !coupon.code.trim()}
+              style={{
+                ...buttonStyle(theme, { variant: "primary" }),
+                opacity: coupon.isApplying || !coupon.code.trim() ? 0.6 : 1,
+              }}
+            >
+              {coupon.isApplying ? "Applying…" : "Apply"}
+            </button>
+          )}
+        </div>
+      )}
+
+      {showInput && mode === "deferred" && (
+        <p style={{ fontSize: 12, opacity: 0.6, margin: 0 }}>Your code is applied at the next step.</p>
+      )}
+
+      {coupon.error && (
+        <p data-testid="discount-code-error" style={{ color: "#ef4444", fontSize: 13, margin: 0 }}>
+          {coupon.error}
+        </p>
+      )}
+
+      {applied.length > 0 && (
+        <div
+          data-testid="discount-code-applied"
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 8,
+            padding: 12,
+            borderRadius: theme.cornerRadius,
+            background: a(theme.colors.primary, 0.1),
+          }}
+        >
+          <div>
+            {applied.map((c) => (
+              <p key={c.code} style={{ margin: 0, fontSize: 14, fontWeight: 600, color: theme.colors.primary }}>
+                {c.code} — {fmt(c.discountAmount)} off
+              </p>
+            ))}
+          </div>
+          {coupon.canQuote && !disabled && (
+            <button
+              type="button"
+              data-testid="discount-code-remove"
+              onClick={() => void coupon.remove()}
+              disabled={coupon.isApplying}
+              style={{
+                background: "transparent",
+                border: "none",
+                padding: 0,
+                fontSize: 13,
+                textDecoration: "underline",
+                cursor: "pointer",
+                color: theme.colors.text,
+                fontFamily: theme.fontFamily,
+              }}
+            >
+              Remove
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface DiscountSummaryLinesProps {
+  /** GROSS, before the discount. */
+  subTotal: number;
+  /** MAJOR units. Nothing renders when this is not positive. */
+  discountAmount: number;
+  /** Named on the Discount row when the server told us which codes applied. */
+  appliedCoupons?: AppliedDiscountCoupon[];
+  fmt: (n: number) => string;
+}
+
+/**
+ * `Subtotal` + `Discount −X` rows, shown ABOVE the total.
+ *
+ * The whole point: a buyer who sees only a smaller number has no way to tell a
+ * working code from a silently-ignored one, and no reason to trust either.
+ */
+export function DiscountSummaryLines({ subTotal, discountAmount, appliedCoupons, fmt }: DiscountSummaryLinesProps) {
+  const theme = useForgeTheme();
+  if (!(discountAmount > 0)) return null;
+  const codes = (appliedCoupons ?? []).map((c) => c.code).filter(Boolean);
+  return (
+    <div data-testid="discount-summary" style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 8 }}>
+      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+        <span style={{ opacity: 0.75 }}>Subtotal</span>
+        <span style={{ opacity: 0.75 }}>{fmt(subTotal)}</span>
+      </div>
+      <div data-testid="discount-line" style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+        <span style={{ color: theme.colors.primary }}>
+          Discount{codes.length > 0 ? ` (${codes.join(", ")})` : ""}
+        </span>
+        <span style={{ color: theme.colors.primary }}>−{fmt(discountAmount)}</span>
+      </div>
+    </div>
+  );
+}
+
+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,
+});