@tribe-nest/forge 3.2.0 → 3.4.0

package/src/ui/shell/shellGating.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { shellPwaEnabled } from "./shellGating";
+import { shellPoweredByEnabled, shellPwaEnabled } from "./shellGating";
 
 // The PWA (SW register + install prompt) must be ON only for the live published
 // site, and OFF everywhere else (editor, preview/draft), so review Workers never
@@ -26,3 +26,23 @@ describe("shellPwaEnabled", () => {
     expect(shellPwaEnabled({ editable: false, state: "published" })).toBe(true);
   });
 });
+
+// "Powered by TribeNest" ships on released builds only, and the ONLY way to
+// remove it is the server-supplied flag — there is no client-side opt-out,
+// because the tenant owns __root.tsx.
+describe("shellPoweredByEnabled", () => {
+  it("is true on a live published site", () => {
+    expect(shellPoweredByEnabled({ editable: false, state: "published" })).toBe(true);
+  });
+
+  it("is false in the editor and on draft/preview deploys", () => {
+    expect(shellPoweredByEnabled({ editable: true, state: "published" })).toBe(false);
+    expect(shellPoweredByEnabled({ editable: false, state: "draft" })).toBe(false);
+    expect(shellPoweredByEnabled({ editable: false })).toBe(false); // state undefined
+  });
+
+  it("is false only when the SERVER says to hide it", () => {
+    expect(shellPoweredByEnabled({ editable: false, state: "published", hideBadge: true })).toBe(false);
+    expect(shellPoweredByEnabled({ editable: false, state: "published", hideBadge: false })).toBe(true);
+  });
+});

package/src/ui/shell/shellGating.ts

@@ -9,3 +9,17 @@ export function shellPwaEnabled(opts: {
 }): boolean {
   return (opts.pwa ?? true) && !opts.editable && opts.state === "published";
 }
+
+// "Powered by TribeNest" shows on RELEASED builds only — the live published
+// site, never the HMR editor or a preview-<versionId>.* review Worker. Same
+// released-build test as the PWA, with one extra lever: `hideBadge` comes from
+// the server (`siteConfig.hideTribeNestBadge`), which is where a white-label
+// plan entitlement turns it off. It is deliberately not a `TribeNestApp` prop —
+// the tenant owns __root.tsx, so a prop would make the badge opt-out.
+export function shellPoweredByEnabled(opts: {
+  editable?: boolean;
+  state?: "draft" | "published";
+  hideBadge?: boolean;
+}): boolean {
+  return !opts.hideBadge && !opts.editable && opts.state === "published";
+}

package/src/ui/styled/AddToCalendar.tsx

@@ -0,0 +1,104 @@
+import { CalendarPlus } from "lucide-react";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAddToCalendar, type AddToCalendarInput } from "../headless/calendar/useAddToCalendar";
+
+export interface AddToCalendarProps extends AddToCalendarInput {
+  /** Heading above the provider links. Pass `null` to drop it entirely. */
+  label?: string | null;
+  /**
+   * `compact` renders a single row of small chips with no heading — for tight
+   * spots like a confirmation card. `default` renders the label + chips.
+   */
+  variant?: "default" | "compact";
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: React.CSSProperties;
+}
+
+/**
+ * "Add to calendar" — deep links that prefill Google / Outlook / Microsoft 365
+ * with the event, plus an `.ics` download when the host supplies one (that is
+ * the Apple Calendar route; there is no Apple web endpoint to link to).
+ *
+ * Purely presentational: every URL comes from `useAddToCalendar`. Renders
+ * nothing at all when the start time is missing or unparseable.
+ */
+export function AddToCalendar({
+  label = "Add to calendar",
+  variant = "default",
+  className,
+  style,
+  ...input
+}: AddToCalendarProps) {
+  const t = useThemeTokens();
+  const links = useAddToCalendar(input);
+
+  if (!links) return null;
+
+  const compact = variant === "compact";
+
+  const options: { key: string; text: string; href: string; download?: boolean }[] = [
+    { key: "google", text: "Google", href: links.google },
+    { key: "outlook", text: "Outlook", href: links.outlook },
+    { key: "office365", text: "Microsoft 365", href: links.office365 },
+  ];
+  if (links.ics) options.push({ key: "ics", text: "Apple / .ics", href: links.ics, download: true });
+
+  const chip: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: compact ? "5px 10px" : "7px 12px",
+    fontSize: compact ? 12 : 13,
+    fontWeight: 600,
+    lineHeight: 1.2,
+    color: t.text,
+    textDecoration: "none",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    background: t.surface,
+    fontFamily: t.fontFamily,
+  };
+
+  return (
+    <div
+      data-testid="add-to-calendar"
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: compact ? 6 : 8, ...style }}
+    >
+      {label && !compact && (
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 13,
+            fontWeight: 700,
+            color: t.muted,
+            fontFamily: t.fontFamily,
+          }}
+        >
+          <CalendarPlus size={15} color={t.primary} /> {label}
+        </span>
+      )}
+
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+        {compact && <CalendarPlus size={15} color={t.primary} style={{ alignSelf: "center" }} />}
+        {options.map((o) => (
+          <a
+            key={o.key}
+            href={o.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            data-testid={`add-to-calendar-${o.key}`}
+            {...(o.download ? { download: "" } : {})}
+            style={chip}
+          >
+            {o.text}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

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 }}>