@tribe-nest/forge 1.13.0

package/src/ui/styled/ForgotPasswordForm.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { useForgotPassword } from "../../data/queries/useAuthActions";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+export interface ForgotPasswordFormProps {
+  /** Href for the "Back to login" / "Login" links. */
+  loginHref: string;
+}
+
+const msg = (e: unknown) => (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+
+/** Themed forgot-password request form, built on `useForgotPassword`. */
+export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
+  const theme = useForgeTheme();
+  const forgotPassword = useForgotPassword();
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const card: React.CSSProperties = {
+    maxWidth: 420,
+    margin: "40px auto 0",
+    padding: 24,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+  };
+  const button: React.CSSProperties = {
+    width: "100%",
+    padding: "10px 14px",
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.primary,
+    color: theme.colors.background,
+    border: "none",
+    fontWeight: 600,
+    cursor: "pointer",
+  };
+  const link: React.CSSProperties = { color: theme.colors.primary, textDecoration: "underline" };
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsSubmitting(true);
+    try {
+      await forgotPassword.mutateAsync({ email, origin: window.location.origin });
+      setIsSuccess(true);
+    } catch (err) {
+      setError(msg(err) || "Something went wrong. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isSuccess) {
+    return (
+      <div style={card}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Check your email</h1>
+        <p style={{ fontSize: 14, marginBottom: 24 }}>
+          If an account exists with that email, we&apos;ve sent a password reset link. Please check your inbox.
+        </p>
+        <a href={loginHref} style={link}>
+          Back to login
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div style={card}>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Reset password</h1>
+      {error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{error}</p>}
+      <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14 }}>Email</label>
+          <input
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            style={{
+              width: "100%",
+              height: 40,
+              padding: "8px 12px",
+              borderRadius: theme.cornerRadius,
+              border: `1px solid ${theme.colors.primary}40`,
+              background: "transparent",
+              color: theme.colors.text,
+              outline: "none",
+            }}
+          />
+        </div>
+        <button type="submit" disabled={isSubmitting} style={button}>
+          {isSubmitting ? "Sending…" : "Send reset email"}
+        </button>
+      </form>
+      <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
+        Already have an account?{" "}
+        <a href={loginHref} style={link}>
+          Login
+        </a>
+      </p>
+    </div>
+  );
+}

package/src/ui/styled/FormRenderer.tsx

@@ -0,0 +1,249 @@
+import { useState } from "react";
+import { usePublicForm, useSubmitPublicForm } from "../../data/queries/useForms";
+import type { FormField } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface FormRendererProps {
+  formId: string;
+}
+
+/**
+ * Themed public form renderer, built on `usePublicForm` + `useSubmitPublicForm`.
+ * Renders every field type, validates required/email fields, and shows a
+ * thank-you state on success.
+ */
+export function FormRenderer({ formId }: FormRendererProps) {
+  const theme = useForgeTheme();
+  const { data: form, isLoading } = usePublicForm(formId);
+  const submitMutation = useSubmitPublicForm(formId);
+
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [error, setError] = useState("");
+
+  if (isLoading || !form) return <Loading fullPage />;
+
+  const settings = typeof form.settings === "string" ? JSON.parse(form.settings) : form.settings || {};
+  const fields = [...form.fields].sort((a, b) => a.order - b.order);
+
+  const setAnswer = (id: string, value: string) => setAnswers((prev) => ({ ...prev, [id]: value }));
+
+  const handleSubmit = async () => {
+    setError("");
+    for (const field of fields) {
+      if (field.isRequired && !answers[field.id]) {
+        setError(`"${field.label}" is required`);
+        return;
+      }
+      if (field.type === "email" && answers[field.id]) {
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(answers[field.id])) {
+          setError("Please enter a valid email address");
+          return;
+        }
+      }
+    }
+    try {
+      const entries = fields.map((f) => ({ fieldId: f.id, value: answers[f.id] || null }));
+      await submitMutation.mutateAsync(entries);
+      setIsCompleted(true);
+    } catch {
+      setError("Failed to submit. Please try again.");
+    }
+  };
+
+  const wrap: React.CSSProperties = { maxWidth: 560, margin: "0 auto", color: theme.colors.text };
+
+  if (isCompleted) {
+    return (
+      <div style={{ ...wrap, textAlign: "center" }}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>
+          {settings.thankYouTitle || "Thank you!"}
+        </h1>
+        <p style={{ opacity: 0.8 }}>{settings.thankYouMessage || "Your response has been recorded."}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={wrap}>
+      <h1 style={{ fontSize: 28, fontWeight: 800, marginBottom: 8 }}>{form.title}</h1>
+      {form.description && <p style={{ opacity: 0.7, marginBottom: 24 }}>{form.description}</p>}
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+        {fields.map((field) => (
+          <FieldInput
+            key={field.id}
+            field={field}
+            value={answers[field.id] || ""}
+            onChange={(v) => setAnswer(field.id, v)}
+            theme={theme}
+          />
+        ))}
+      </div>
+
+      {error && <p style={{ color: "#dc2626", marginTop: 16 }}>{error}</p>}
+
+      <button
+        onClick={handleSubmit}
+        disabled={submitMutation.isPending}
+        style={{
+          marginTop: 24,
+          padding: "12px 24px",
+          borderRadius: theme.cornerRadius,
+          border: "none",
+          fontWeight: 600,
+          cursor: "pointer",
+          opacity: submitMutation.isPending ? 0.5 : 1,
+          background: theme.colors.primary,
+          color: theme.colors.background,
+        }}
+      >
+        {submitMutation.isPending ? "Submitting…" : settings.submitButtonText || "Submit"}
+      </button>
+    </div>
+  );
+}
+
+export function FieldInput({
+  field,
+  value,
+  onChange,
+  theme,
+}: {
+  field: FormField;
+  value: string;
+  onChange: (v: string) => void;
+  theme: ReturnType<typeof useForgeTheme>;
+}) {
+  const inputStyle: React.CSSProperties = {
+    width: "100%",
+    padding: "10px 12px",
+    borderRadius: theme.cornerRadius,
+    border: `1px solid ${theme.colors.text}33`,
+    background: "transparent",
+    color: theme.colors.text,
+    fontSize: 15,
+  };
+
+  const label = (
+    <label style={{ display: "block", fontWeight: 600, marginBottom: 6 }}>
+      {field.label}
+      {field.isRequired && <span style={{ color: theme.colors.primary }}> *</span>}
+    </label>
+  );
+
+  let control: React.ReactNode;
+  switch (field.type) {
+    case "long_text":
+      control = (
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={field.placeholder || ""}
+          rows={4}
+          style={inputStyle}
+        />
+      );
+      break;
+    case "single_select":
+      control = (
+        <select value={value} onChange={(e) => onChange(e.target.value)} style={inputStyle}>
+          <option value="">Select…</option>
+          {field.options?.map((o) => (
+            <option key={o.id} value={o.label}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      );
+      break;
+    case "multi_select": {
+      const selected = value ? value.split("||") : [];
+      const toggle = (optLabel: string) => {
+        const next = selected.includes(optLabel)
+          ? selected.filter((s) => s !== optLabel)
+          : [...selected, optLabel];
+        onChange(next.join("||"));
+      };
+      control = (
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {field.options?.map((o) => (
+            <label key={o.id} style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <input type="checkbox" checked={selected.includes(o.label)} onChange={() => toggle(o.label)} />
+              {o.label}
+            </label>
+          ))}
+        </div>
+      );
+      break;
+    }
+    case "yes_no":
+      control = (
+        <div style={{ display: "flex", gap: 16 }}>
+          {["Yes", "No"].map((opt) => (
+            <label key={opt} style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <input type="radio" name={field.id} checked={value === opt} onChange={() => onChange(opt)} />
+              {opt}
+            </label>
+          ))}
+        </div>
+      );
+      break;
+    case "rating":
+      control = (
+        <div style={{ display: "flex", gap: 8 }}>
+          {[1, 2, 3, 4, 5].map((n) => (
+            <button
+              key={n}
+              type="button"
+              onClick={() => onChange(String(n))}
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: theme.cornerRadius,
+                cursor: "pointer",
+                border: `1px solid ${theme.colors.text}33`,
+                background: value === String(n) ? theme.colors.primary : "transparent",
+                color: value === String(n) ? theme.colors.background : theme.colors.text,
+              }}
+            >
+              {n}
+            </button>
+          ))}
+        </div>
+      );
+      break;
+    case "number":
+    case "email":
+    case "date":
+      control = (
+        <input
+          type={field.type === "number" ? "number" : field.type === "email" ? "email" : "date"}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={field.placeholder || ""}
+          style={inputStyle}
+        />
+      );
+      break;
+    default:
+      control = (
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={field.placeholder || ""}
+          style={inputStyle}
+        />
+      );
+  }
+
+  return (
+    <div>
+      {label}
+      {field.description && <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 8 }}>{field.description}</p>}
+      {control}
+    </div>
+  );
+}

package/src/ui/styled/InstallBanner.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from "react";
+import { useInstallPrompt } from "../../data/queries/usePWA";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Button } from "./Button";
+
+const DISMISS_KEY = "forge-install-banner-dismissed";
+
+export interface InstallBannerProps {
+  /** Only show on the live published site (starter gates with FORGE_STATE/EDIT). */
+  enabled?: boolean;
+  /** Heading text. */
+  title?: string;
+  /** Supporting line for Android/desktop (a native prompt is available). */
+  description?: string;
+  /** iOS instruction (Safari can't prompt — user adds to Home Screen manually). */
+  iosInstructions?: string;
+}
+
+/**
+ * Dismissible bottom install banner (Tier-2, theme-token styled). Reads
+ * `useInstallPrompt()`:
+ *   - Android/desktop (a `beforeinstallprompt` was captured) → an "Install"
+ *     button that fires the native prompt.
+ *   - iOS Safari (no prompt) → "Share → Add to Home Screen" instructions. On
+ *     iOS the installed PWA is also the gateway to web push (iOS 16.4+).
+ * Hidden when installed, already dismissed (localStorage), or not `enabled`.
+ */
+export function InstallBanner({
+  enabled = true,
+  title = "Install this app",
+  description = "Add it to your home screen for a faster, full-screen experience.",
+  iosInstructions = "Tap the Share icon, then “Add to Home Screen”.",
+}: InstallBannerProps) {
+  const t = useThemeTokens();
+  const { isInstallable, isInstalled, isIOS, isStandalone, promptInstall } = useInstallPrompt();
+  const [dismissed, setDismissed] = useState(true);
+
+  useEffect(() => {
+    try {
+      setDismissed(window.localStorage.getItem(DISMISS_KEY) === "1");
+    } catch {
+      setDismissed(false);
+    }
+  }, []);
+
+  const dismiss = () => {
+    setDismissed(true);
+    try {
+      window.localStorage.setItem(DISMISS_KEY, "1");
+    } catch {
+      /* private mode — best effort */
+    }
+  };
+
+  if (!enabled || dismissed || isInstalled || isStandalone) return null;
+  // Android/desktop need a captured prompt; iOS shows manual instructions.
+  if (!isInstallable && !isIOS) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-label={title}
+      style={{
+        position: "fixed",
+        left: 12,
+        right: 12,
+        bottom: 12,
+        zIndex: 60,
+        maxWidth: 520,
+        margin: "0 auto",
+        padding: 16,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        color: t.text,
+        border: `1px solid ${t.border}`,
+        boxShadow: "0 8px 30px rgba(0,0,0,0.18)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
+        <div>
+          <div style={{ fontWeight: 700, fontSize: 15 }}>{title}</div>
+          <div style={{ fontSize: 13, color: t.muted, marginTop: 2 }}>{isIOS ? iosInstructions : description}</div>
+        </div>
+        <button
+          type="button"
+          aria-label="Dismiss"
+          onClick={dismiss}
+          style={{ background: "transparent", border: "none", color: t.muted, cursor: "pointer", fontSize: 18, lineHeight: 1 }}
+        >
+          {"×"}
+        </button>
+      </div>
+      {!isIOS && (
+        <div style={{ display: "flex", gap: 8 }}>
+          <Button
+            size="sm"
+            onClick={async () => {
+              const ok = await promptInstall();
+              if (ok) dismiss();
+            }}
+          >
+            Install
+          </Button>
+          <Button size="sm" variant="ghost" onClick={dismiss}>
+            Not now
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/InvoiceConfirmation.tsx

@@ -0,0 +1,50 @@
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { Loading } from "./Loading";
+import { useInvoiceFinalize } from "../../data/queries/useInvoice";
+
+export interface InvoiceConfirmationProps {
+  invoiceId: string;
+  /**
+   * Formats a monetary amount for display. Receives the invoice's own currency
+   * as a second argument so the shell can honor it (defaults to plain USD-style).
+   */
+  formatAmount?: (n: number, currency?: string) => string;
+  /** Where the "view invoice" action links. Defaults to the invoice detail page. */
+  invoicePath?: string;
+}
+
+export function InvoiceConfirmation({
+  invoiceId,
+  formatAmount,
+  invoicePath = `/i/invoice/${invoiceId}`,
+}: InvoiceConfirmationProps) {
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  const { data, isLoading, error } = useInvoiceFinalize(invoiceId);
+
+  if (isLoading) return <Loading fullPage />;
+  if (error || !data) return <p style={{ color: theme.colors.text }}>We couldn’t load this invoice.</p>;
+
+  const paid = data.status === "paid" || !!data.paidAt;
+
+  return (
+    <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center", color: theme.colors.text }}>
+      <h1 style={{ fontSize: 28, fontWeight: 800, marginBottom: 8 }}>
+        {paid ? "Payment received" : "Payment not completed"}
+      </h1>
+      <p style={{ opacity: 0.75, marginBottom: 16 }}>
+        {paid
+          ? `Thank you, ${data.clientName}. Invoice ${data.invoiceNumber} is now paid.`
+          : `Invoice ${data.invoiceNumber} is ${data.status}. If you were charged, please contact support.`}
+      </p>
+      <p style={{ fontWeight: 700, color: theme.colors.primary }}>{fmt(Number(data.total), data.currency)}</p>
+      <a
+        href={invoicePath}
+        style={{ display: "inline-block", marginTop: 24, color: theme.colors.primary, textDecoration: "underline" }}
+      >
+        View invoice
+      </a>
+    </div>
+  );
+}

package/src/ui/styled/InvoicePayment.tsx

@@ -0,0 +1,141 @@
+import { useInvoicePayment } from "../headless/invoice/useInvoicePayment";
+import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { summarizeTaxQuote } from "../format/PriceDisplay";
+import { Loading } from "./Loading";
+
+export interface InvoicePaymentProps {
+  invoiceId: string;
+  /** Currency formatter (e.g. `(n) => formatCurrency(n, CURRENCY)`). Falls back to the invoice's own currency. */
+  formatAmount?: (n: number) => string;
+  /** Return path after payment. Forwarded to `useInvoicePayment`. */
+  returnPath?: string;
+}
+
+/** Short date only, e.g. "Jun 30, 2026". */
+const formatDate = (value: string | number | Date): string =>
+  new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+
+/**
+ * Themed invoice view + payment surface, built on `useInvoicePayment` and the
+ * app-registered payment renderer (`usePaymentRenderer`). Renders line items,
+ * a PDF download, and — when unpaid — the Stripe payment surface.
+ */
+export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoicePaymentProps) {
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  const renderPayment = usePaymentRenderer();
+  const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote } = useInvoicePayment(invoiceId, {
+    returnPath,
+  });
+
+  if (invoice.isLoading) return <Loading fullPage />;
+  if (invoice.error || !invoice.data) return <p style={{ color: theme.colors.text }}>Invoice not found.</p>;
+
+  const inv = invoice.data;
+  const isPaid = inv.status === "paid" || !!inv.paidAt;
+  const money = (n: number) => fmt(n, inv.currency);
+
+  const handleDownload = async () => {
+    const blob = await downloadPdf.mutateAsync();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `invoice-${inv.invoiceNumber}.pdf`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div style={{ maxWidth: 640, margin: "0 auto", color: theme.colors.text }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
+        <div>
+          <h1 style={{ fontSize: 26, fontWeight: 800 }}>Invoice {inv.invoiceNumber}</h1>
+          <p style={{ opacity: 0.7, fontSize: 14 }}>{inv.profileName}</p>
+        </div>
+        <button
+          onClick={handleDownload}
+          disabled={downloadPdf.isPending}
+          style={{
+            border: `1px solid ${theme.colors.primary}`,
+            background: "transparent",
+            color: theme.colors.primary,
+            borderRadius: theme.cornerRadius,
+            padding: "8px 14px",
+            cursor: downloadPdf.isPending ? "not-allowed" : "pointer",
+            fontSize: 14,
+          }}
+        >
+          {downloadPdf.isPending ? "Preparing…" : "Download PDF"}
+        </button>
+      </div>
+
+      <div style={{ fontSize: 14, opacity: 0.85, marginBottom: 16 }}>
+        <div>Billed to: {inv.clientName}{inv.clientCompany ? ` · ${inv.clientCompany}` : ""}</div>
+        <div>Issued: {formatDate(inv.issueDate)}{inv.dueDate ? ` · Due: ${formatDate(inv.dueDate)}` : ""}</div>
+      </div>
+
+      <div style={{ border: `1px solid ${theme.colors.primary}20`, borderRadius: theme.cornerRadius, overflow: "hidden", marginBottom: 16 }}>
+        {inv.lineItems.map((li) => (
+          <div
+            key={li.id}
+            style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `1px solid ${theme.colors.primary}10` }}
+          >
+            <span>
+              {li.description}
+              <span style={{ opacity: 0.6 }}> × {li.quantity}</span>
+            </span>
+            <span>{money(Number(li.amount))}</span>
+          </div>
+        ))}
+        {(() => {
+          // Invoice tax comes from the invoice's own operator-entered tax
+          // columns (no re-quote) — surfaced via the start-payment taxQuote.
+          const taxSummary = summarizeTaxQuote(taxQuote, money);
+          return taxSummary?.mode === "exclusive" ? (
+            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `1px solid ${theme.colors.primary}10`, opacity: 0.8 }}>
+              <span>Tax</span>
+              <span>{taxSummary.formattedTax}</span>
+            </div>
+          ) : null;
+        })()}
+        <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 14px", fontWeight: 700 }}>
+          <span>Total</span>
+          <span style={{ color: theme.colors.primary, textAlign: "right" }}>
+            {money(Number(inv.total))}
+            {(() => {
+              const taxSummary = summarizeTaxQuote(taxQuote, money);
+              return taxSummary?.mode === "inclusive" ? (
+                <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+                  {taxSummary.label}
+                </span>
+              ) : null;
+            })()}
+          </span>
+        </div>
+      </div>
+
+      {inv.notes && <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 16 }}>{inv.notes}</p>}
+
+      {isPaid ? (
+        <p style={{ fontWeight: 700, color: theme.colors.primary }}>This invoice has been paid. Thank you!</p>
+      ) : (
+        <div>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
+          {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
+          {clientSecret ? (
+            renderPayment?.({
+              clientSecret,
+              returnUrl,
+              amount: Number(inv.total),
+              mode: "redirect",
+            })
+          ) : (
+            <>{isStarting ? <Loading label="Preparing payment…" size={22} /> : <p style={{ opacity: 0.7 }}>Payment is not available right now.</p>}</>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}