@tribe-nest/forge 3.67.0 → 3.74.0

package/src/ui/styled/FormRenderer.tsx

@@ -1,9 +1,16 @@
 import { useState } from "react";
-import { usePublicForm, useSubmitPublicForm } from "../../data/queries/useForms";
+import {
+  usePublicForm,
+  useSubmitPublicForm,
+  formConsentPayload,
+  consentWithoutPhone,
+} from "../../data/queries/useForms";
 import type { FormField } from "../../types/models";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
-import { useForgeT } from "../../i18n";
+import { useForgeLocale, useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
+import { PhoneInput } from "./PhoneInput";
+
 
 export interface FormRendererProps {
   formId: string;
@@ -17,6 +24,7 @@ export interface FormRendererProps {
 export function FormRenderer({ formId }: FormRendererProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
+  const locale = useForgeLocale();
   const { data: form, isLoading } = usePublicForm(formId);
   const submitMutation = useSubmitPublicForm(formId);
 
@@ -45,9 +53,13 @@ export function FormRenderer({ formId }: FormRendererProps) {
         }
       }
     }
+    if (consentWithoutPhone(fields, answers)) {
+      setError(t("forge.form_renderer.consent_phone_required"));
+      return;
+    }
     try {
       const entries = fields.map((f) => ({ fieldId: f.id, value: answers[f.id] || null }));
-      await submitMutation.mutateAsync(entries);
+      await submitMutation.mutateAsync({ answers: entries, consent: formConsentPayload(fields, locale) });
       setIsCompleted(true);
     } catch {
       setError(t("forge.form_renderer.submit_error"));
@@ -138,8 +150,28 @@ export function FieldInput({
     </label>
   );
 
+  // A consent box: unticked by default, never required, and its text is the
+  // server's locked wording shown exactly as served (it is the evidence).
+  if (field.type === "call_consent") {
+    if (!field.consent) return null;
+    return (
+      <label style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, lineHeight: 1.5 }}>
+        <input
+          type="checkbox"
+          checked={value === "true"}
+          onChange={(e) => onChange(e.target.checked ? "true" : "")}
+          style={{ marginTop: 4, flexShrink: 0 }}
+        />
+        <span>{field.consent.text}</span>
+      </label>
+    );
+  }
+
   let control: React.ReactNode;
   switch (field.type) {
+    case "phone":
+      control = <PhoneFieldControl fieldId={field.id} value={value} onChange={onChange} />;
+      break;
     case "long_text":
       control = (
         <textarea
@@ -262,3 +294,23 @@ export function FieldInput({
     </div>
   );
 }
+
+/** A form's phone question: country select plus number, submitted as E.164. */
+function PhoneFieldControl({
+  fieldId,
+  value,
+  onChange,
+}: {
+  fieldId: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <PhoneInput
+      id={`forge-form-phone-${fieldId}`}
+      mode="shipping"
+      initialValue={value || undefined}
+      onChange={(e164) => onChange(e164 ?? "")}
+    />
+  );
+}

package/src/ui/styled/ShippingRateSelector.tsx

@@ -0,0 +1,122 @@
+import type { SelectedShippingRate } from "../headless/checkout/useCheckout";
+import type { ShippingRate, ShippingGroup } from "../../data/queries/useShipping";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+function alpha(value: number) {
+  return Math.round(value * 255)
+    .toString(16)
+    .padStart(2, "0");
+}
+
+// Shared by the store checkout and the checkout link pay page (phase 2), so a
+// buyer picks shipping the same way on both.
+/**
+ * Renders the shipping groups: fixed lines for auto-selected flat/external
+ * groups, and a radio list for the selectable (dynamic/carrier) group. Selection
+ * state is owned by `useCheckout`; this component just renders + calls `onSelect`.
+ */
+export function ShippingRateSelector({
+  groups,
+  selections,
+  onSelect,
+  formatCurrency,
+}: {
+  groups: ShippingGroup[];
+  selections: Record<string, SelectedShippingRate>;
+  onSelect: (group: ShippingGroup, rate: ShippingRate) => void;
+  formatCurrency: (amount: number, currencyCode?: string) => string;
+}) {
+  const theme = useForgeTheme();
+  const tr = useForgeT();
+  if (groups.length === 0) return null;
+
+  return (
+    <div className="fg:space-y-6">
+      {groups.map((group) => (
+        <div
+          key={group.id}
+          className="fg:p-4 fg:rounded-lg"
+          style={{ border: `1px solid ${theme.colors.primary}${alpha(0.15)}`, borderRadius: `${theme.cornerRadius}px` }}
+        >
+          <p className="fg:font-medium fg:mb-3" style={{ color: theme.colors.text }}>
+            {group.title}
+          </p>
+
+          {!group.selectable && group.rates.length > 0 ? (
+            // Flat or external: a single, auto-selected rate.
+            <div
+              className="fg:flex fg:items-center fg:justify-between fg:p-3 fg:rounded-md"
+              style={{
+                backgroundColor: `${theme.colors.primary}${alpha(0.05)}`,
+                borderRadius: `${theme.cornerRadius}px`,
+              }}
+            >
+              <div>
+                <span className="fg:text-sm fg:font-medium" style={{ color: theme.colors.text }}>
+                  {group.rates[0].carrier} · {group.rates[0].service}
+                </span>
+                {group.rates[0].estimatedDays != null && (
+                  <span className="fg:text-xs fg:ml-2" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                    {tr("forge.checkout.rate_days", { days: group.rates[0].estimatedDays })}
+                  </span>
+                )}
+              </div>
+              <span className="fg:text-sm fg:font-semibold" style={{ color: theme.colors.primary }}>
+                {formatCurrency(group.rates[0].amount, group.rates[0].currency)}
+              </span>
+            </div>
+          ) : (
+            // Dynamic: the buyer picks a carrier option.
+            <div className="fg:space-y-2">
+              {group.rates.length === 0 && (
+                <p className="fg:text-sm" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                  {tr("forge.checkout.no_shipping_options")}
+                </p>
+              )}
+              {group.rates.map((rate) => {
+                const isSelected = selections[group.id]?.rateId === rate.rateId;
+                return (
+                  <label
+                    key={rate.rateId}
+                    className="fg:flex fg:items-center fg:justify-between fg:p-3 fg:rounded-md fg:cursor-pointer fg:transition-colors"
+                    style={{
+                      backgroundColor: isSelected ? `${theme.colors.primary}${alpha(0.1)}` : "transparent",
+                      border: `1px solid ${isSelected ? theme.colors.primary : `${theme.colors.primary}${alpha(0.2)}`}`,
+                      borderRadius: `${theme.cornerRadius}px`,
+                    }}
+                  >
+                    <div className="fg:flex fg:items-center fg:gap-3">
+                      <input
+                        type="radio"
+                        name={`shipping-rate-${group.id}`}
+                        checked={isSelected}
+                        onChange={() => onSelect(group, rate)}
+                        style={{ accentColor: theme.colors.primary }}
+                      />
+                      <div>
+                        <span className="fg:text-sm fg:font-medium" style={{ color: theme.colors.text }}>
+                          {rate.carrier} - {rate.service}
+                        </span>
+                        {rate.estimatedDays && (
+                          <p className="fg:text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                            {rate.estimatedDays === 1
+                              ? tr("forge.checkout.rate_estimated_day", { days: rate.estimatedDays })
+                              : tr("forge.checkout.rate_estimated_days", { days: rate.estimatedDays })}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    <span className="fg:text-sm fg:font-semibold" style={{ color: theme.colors.primary }}>
+                      {formatCurrency(rate.amount, rate.currency)}
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/ui/styled/_tests/CheckoutLinkPayment.spec.tsx

@@ -0,0 +1,316 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { CheckoutLinkView } from "../../../data/queries/useCheckoutLink";
+
+/**
+ * The hosted pay page for a checkout link (`/i/checkout/pay/<token>`).
+ *
+ * `useCheckoutLinkPayment` is stubbed at the module boundary: the server
+ * decides everything (open, closed, paid too late); what can only go wrong
+ * here is the page drawing the wrong state. Each state is a different fact
+ * the buyer acts on: pay now, it is already paid, the hold ended, it was
+ * withdrawn, or a refund is coming.
+ *
+ * Rendered through `react-dom/server`, so no DOM and no effects.
+ */
+
+type Page = ReturnType<typeof import("../../headless/checkoutLink/useCheckoutLinkPayment").useCheckoutLinkPayment>;
+const state = vi.hoisted(() => ({ current: null as unknown }));
+
+vi.mock("../../headless/checkoutLink/useCheckoutLinkPayment", () => ({
+  useCheckoutLinkPayment: () => state.current,
+}));
+
+const { CheckoutLinkPayment } = await import("../CheckoutLinkPayment");
+
+const view = (overrides: Partial<CheckoutLinkView> = {}): CheckoutLinkView => ({
+  status: "open",
+  needsRefund: false,
+  item: { type: "event_ticket", title: "Spring Show: General" },
+  quantity: 2,
+  unitPriceCents: 2500,
+  totalCents: 5000,
+  currency: "USD",
+  expiresAt: new Date(Date.now() + 20 * 60_000).toISOString(),
+  ...overrides,
+});
+
+const page = (overrides: Record<string, unknown> = {}) =>
+  ({
+    link: { isLoading: false, error: null, data: view() },
+    finalize: { isLoading: false, error: null, data: undefined },
+    returnUrl: "https://shop.test/i/checkout/pay/tok?finalise=1",
+    pay: async () => {},
+    isStarting: false,
+    clientSecret: undefined,
+    isPaystack: false,
+    canOpenPaystack: false,
+    openPaystackCheckout: async () => "unavailable",
+    refusal: null,
+    holdExpiresAt: view().expiresAt,
+    ...overrides,
+  }) as unknown as Page;
+
+function render(current: Page, props: { returning?: boolean } = {}): string {
+  state.current = current;
+  return renderToStaticMarkup(
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider value={{ currencies: null, userSelectedCurrency: "USD" } as never}>
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <CheckoutLinkPayment token="tok" formatAmount={(n) => `$${n.toFixed(2)}`} {...props} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("CheckoutLinkPayment", () => {
+  it("an open link shows the item, the quantity, the price and a Pay button for the total", () => {
+    const html = render(page());
+    expect(html).toContain('data-state="open"');
+    expect(html).toContain("Held for you");
+    expect(html).toContain("Spring Show: General");
+    expect(html).toContain("Quantity: 2");
+    expect(html).toContain("$25.00 each");
+    expect(html).toContain("$50.00");
+    expect(html).toContain('data-testid="checkout-link-pay"');
+    expect(html).toContain("Pay $50.00");
+  });
+
+  it("a refused Pay shows the server's own words", () => {
+    const html = render(
+      page({ refusal: { message: "These tickets are no longer held for you.", code: "INVENTORY_HOLD_EXPIRED", status: null } }),
+    );
+    expect(html).toContain('data-testid="checkout-link-refusal"');
+    expect(html).toContain("These tickets are no longer held for you.");
+  });
+
+  it.each([
+    [{ status: "paid" as const }, "Payment received", false],
+    [{ status: "expired" as const }, "This reservation has ended", true],
+    [{ status: "cancelled" as const }, "This link is no longer available", true],
+    [{ status: "expired" as const, needsRefund: true }, "Your payment will be refunded", true],
+  ])("a closed link (%o) says so, and offers the store unless it was paid", (overrides, title, offersStore) => {
+    const html = render(page({ link: { isLoading: false, error: null, data: view(overrides) } }));
+    expect(html).toContain(title);
+    expect(html).not.toContain('data-testid="checkout-link-pay"');
+    expect(html.includes('data-testid="checkout-link-store"')).toBe(offersStore);
+  });
+
+  describe("a booking", () => {
+    const START = "2026-11-03T15:00:00.000Z";
+    const booking = (overrides: Partial<CheckoutLinkView> = {}) =>
+      view({
+        item: { type: "booking", title: "Initial consultation" },
+        quantity: 1,
+        unitPriceCents: 15000,
+        totalCents: 15000,
+        expiresAt: "2026-11-01T12:30:00.000Z",
+        booking: {
+          sessions: [{ startsAt: START, endsAt: "2026-11-03T16:00:00.000Z" }],
+          timezone: "America/New_York",
+          servicePath: "/i/coaching/initial-consultation",
+        },
+        ...overrides,
+      });
+    // What the page must print: the buyer's own clock, the zone named.
+    const local = (iso: string) =>
+      new Intl.DateTimeFormat(undefined, {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZoneName: "short",
+      }).format(new Date(iso));
+
+    it("shows the service, the session in the reader's own zone, until when it is held, and the price, with no quantity", () => {
+      const html = render(page({ link: { isLoading: false, error: null, data: booking() } }));
+      expect(html).toContain('data-state="open"');
+      expect(html).toContain("Initial consultation");
+      expect(html).toContain('data-testid="checkout-link-session"');
+      expect(html).toContain(local(START));
+      expect(html).toContain(`Held for you until ${local("2026-11-01T12:30:00.000Z")}`);
+      expect(html).toContain("Pay $150.00");
+      expect(html).not.toContain('data-testid="checkout-link-quantity"');
+    });
+
+    it("lists every session of a package", () => {
+      const second = "2026-11-10T15:00:00.000Z";
+      const html = render(
+        page({
+          link: {
+            isLoading: false,
+            error: null,
+            data: booking({
+              booking: {
+                sessions: [
+                  { startsAt: START, endsAt: "2026-11-03T16:00:00.000Z" },
+                  { startsAt: second, endsAt: "2026-11-10T16:00:00.000Z" },
+                ],
+                timezone: "UTC",
+                servicePath: null,
+              },
+            }),
+          },
+        }),
+      );
+      expect(html.split('data-testid="checkout-link-session"')).toHaveLength(3);
+      expect(html).toContain(local(second));
+    });
+
+    it("a time that was taken while unpaid: the refusal, no Pay button, and a way to pick another time", () => {
+      const html = render(
+        page({
+          link: { isLoading: false, error: null, data: booking() },
+          refusal: {
+            message: "Your hold on this time expired and it is no longer available. Please pick another time",
+            code: "INVENTORY_HOLD_EXPIRED",
+            status: null,
+          },
+        }),
+      );
+      expect(html).toContain('data-testid="checkout-link-refusal"');
+      expect(html).toContain('data-testid="checkout-link-other-times"');
+      expect(html).toContain("Pick another time");
+      expect(html).not.toContain('data-testid="checkout-link-pay"');
+    });
+
+    it("an ended booking link offers another time instead of the store", () => {
+      const html = render(page({ link: { isLoading: false, error: null, data: booking({ status: "expired" }) } }));
+      expect(html).toContain("This reservation has ended");
+      expect(html).toContain('data-testid="checkout-link-other-times"');
+      expect(html).not.toContain('data-testid="checkout-link-store"');
+      expect(html).not.toContain('data-testid="checkout-link-held-until"');
+    });
+  });
+
+  describe("several items and shipping (phase 2)", () => {
+    const multi = (shipping: CheckoutLinkView["shipping"]) =>
+      view({
+        item: { type: "product", title: "Tour Tee (Large)" },
+        items: [
+          {
+            type: "product",
+            title: "Tour Tee (Large)",
+            quantity: 2,
+            unitPriceCents: 3000,
+            physical: true,
+            productId: "p-1",
+            productVariantId: "v-1",
+          },
+          { type: "event_ticket", title: "Spring Show: General", quantity: 1, unitPriceCents: 2000, physical: false },
+        ],
+        quantity: 3,
+        unitPriceCents: null,
+        totalCents: 8000,
+        shipping,
+      });
+
+    it("lists every line with its amount, and holds Pay until the delivery address is in", () => {
+      const html = render(
+        page({
+          link: { isLoading: false, error: null, data: multi({ required: true, set: false, address: null, costCents: null }) },
+        }),
+      );
+      expect(html).toContain('data-testid="checkout-link-items"');
+      expect(html).toContain("2 x Tour Tee (Large)");
+      expect(html).toContain("$60.00");
+      expect(html).toContain("Spring Show: General");
+      expect(html).not.toContain("Quantity:");
+      expect(html).toContain('data-testid="checkout-link-shipping" data-state="address"');
+      expect(html).toContain("Delivery address");
+      expect(html).toMatch(/<button disabled=""[^>]*data-testid="checkout-link-pay"/);
+      expect(html).not.toContain('data-testid="checkout-link-shipping-error"');
+      expect(html).toContain("Pay $80.00");
+    });
+
+    it("once the address is in: the address, the shipping line, the total with shipping, a way to change it", () => {
+      const html = render(
+        page({
+          link: {
+            isLoading: false,
+            error: null,
+            data: multi({
+              required: true,
+              set: true,
+              address: { address1: "1 Main St", city: "Austin", stateCode: "TX", countryCode: "US", zip: "78701" },
+              costCents: 1000,
+            }),
+          },
+        }),
+      );
+      expect(html).toContain('data-state="set"');
+      expect(html).toContain("1 Main St, Austin, TX, 78701, US");
+      expect(html).toContain('data-testid="checkout-link-shipping-cost"');
+      expect(html).toContain("$10.00");
+      expect(html).toContain("Pay $90.00");
+      expect(html).toContain('data-testid="checkout-link-change-address"');
+      expect(html).not.toMatch(/<button disabled=""[^>]*data-testid="checkout-link-pay"/);
+    });
+
+    it("the address cannot be changed once a payment has started", () => {
+      const html = render(
+        page({
+          paymentStarted: true,
+          clientSecret: "pi_secret",
+          link: {
+            isLoading: false,
+            error: null,
+            data: multi({
+              required: true,
+              set: true,
+              address: { address1: "1 Main St", city: "Austin", stateCode: "TX", countryCode: "US", zip: "78701" },
+              costCents: 1000,
+            }),
+          },
+        }),
+      );
+      expect(html).not.toContain('data-testid="checkout-link-change-address"');
+    });
+  });
+
+  it("an unknown link says it is not valid", () => {
+    const html = render(page({ link: { isLoading: false, error: new Error("404"), data: undefined } }));
+    expect(html).toContain('data-state="not-found"');
+    expect(html).toContain("Link not found");
+  });
+
+  it("the return leg: paid shows the confirmation, unpaid offers another try, too late says a refund is coming", () => {
+    const paid = render(
+      page({ finalize: { isLoading: false, error: null, data: { outcome: "fulfilled", link: view({ status: "paid" }) } } }),
+      { returning: true },
+    );
+    expect(paid).toContain('data-state="paid"');
+    expect(paid).toContain("Payment received");
+    expect(paid).toContain("Spring Show: General");
+
+    const unpaid = render(
+      page({ finalize: { isLoading: false, error: null, data: { outcome: "unpaid", link: view() } } }),
+      { returning: true },
+    );
+    expect(unpaid).toContain('data-state="unpaid"');
+    expect(unpaid).toContain("Try again");
+
+    const late = render(
+      page({
+        finalize: {
+          isLoading: false,
+          error: null,
+          data: { outcome: "needs_refund", link: view({ status: "expired", needsRefund: true }) },
+        },
+      }),
+      { returning: true },
+    );
+    expect(late).toContain('data-state="needs-refund"');
+    expect(late).toContain("Your payment will be refunded");
+  });
+});