@tribe-nest/forge 3.53.0 → 3.57.0

package/src/ui/styled/DocumentSigningPage.tsx

@@ -0,0 +1,516 @@
+/**
+ * The page a contract's signing link lands on.
+ *
+ * In Forge rather than in a storefront because both storefronts need it, and
+ * because BOTH addresses on each of them render it: the canonical
+ * `/i/documents/$token` the platform emails, and the older `/documents/$token`
+ * that links already in inboxes still point at.
+ */
+// Public proposal/contract signing page (`/documents/:token` — the emailed
+// magic link IS the identity, no login). Built entirely from the headless
+// document primitives (`useDocumentSigningFlow`, `useOtpCodeInput`,
+// `useContractSignature`, `useSignaturePad`) + Tailwind theme tokens. Lives
+// under `/i/` (centrally managed); the top-level `/documents/$token` route is
+// a thin shell so emailed links keep working while the page stays updatable.
+import { useEffect, useState } from "react";
+import { CheckCircle2, Clock, Download, FileText, PenLine, ShieldCheck, Type, XCircle } from "lucide-react";
+import { Loading } from "./Loading";
+import {
+  lexicalToPlainText,
+  useContractSignature,
+  useDocumentSigningFlow,
+  useOtpCodeInput,
+  useSignaturePad,
+  OTP_LENGTH,
+} from "../headless";
+
+const formatDate = (value: string | number | Date): string =>
+  new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+
+const formatMoney = (amountCents: number, currency: string): string =>
+  new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amountCents / 100);
+
+export function DocumentSigningPage({ token }: { token: string }) {
+  const flow = useDocumentSigningFlow(token);
+  const [feedback, setFeedback] = useState<string | null>(null);
+
+  if (flow.stage === "loading") return <Loading fullPage />;
+
+  if (flow.stage === "invalid" || !flow.document || !flow.recipient) {
+    return (
+      <div className="fg:mx-auto fg:w-full fg:max-w-2xl fg:px-4 fg:py-16 fg:text-center">
+        <FileText size={40} className="fg:mx-auto fg:mb-4 fg:text-muted" />
+        <h1 className="fg:mb-2 fg:text-xl fg:font-bold fg:text-text">Document not available</h1>
+        <p className="fg:text-muted">
+          This link is invalid or no longer active. If you were expecting a document, ask the sender to send a fresh
+          link.
+        </p>
+      </div>
+    );
+  }
+
+  const doc = flow.document;
+  const recipient = flow.recipient;
+
+  return (
+    <div className="fg:mx-auto fg:w-full fg:max-w-3xl fg:px-4 fg:py-8 fg:lg:py-12">
+      {/* Header */}
+      <div className="fg:mb-6">
+        <div className="fg:mb-2 fg:flex fg:items-center fg:gap-2">
+          <span className="fg:rounded-full fg:border fg:border-primary fg:px-2 fg:py-0.5 fg:text-xs fg:font-semibold fg:uppercase fg:tracking-wide fg:text-primary">
+            {doc.kind === "contract" ? "Contract" : "Proposal"}
+          </span>
+          {doc.expiresAt && !flow.isTerminal && (
+            <span className="fg:flex fg:items-center fg:gap-1 fg:text-xs fg:text-muted">
+              <Clock size={12} /> Expires {formatDate(doc.expiresAt)}
+            </span>
+          )}
+        </div>
+        <h1 className="fg:text-2xl fg:font-bold fg:text-text fg:lg:text-3xl">{doc.title}</h1>
+        <p className="fg:mt-1 fg:text-sm fg:text-muted">
+          {flow.profile?.name ? `From ${flow.profile.name} · ` : ""}Sent to {recipient.email}
+          {doc.sentAt ? ` · ${formatDate(doc.sentAt)}` : ""}
+        </p>
+      </div>
+
+      {/* Terminal / waiting banners */}
+      <StatusBanner flow={flow} />
+
+      {/* Document body */}
+      <div className="fg:mb-8 fg:rounded-xl fg:border fg:border-border fg:p-5 fg:lg:p-8">
+        {doc.bodyType === "pdf" && doc.sourcePdfUrl ? (
+          <PdfEmbed url={doc.sourcePdfUrl} title={doc.title} />
+        ) : (
+          <p className="fg:whitespace-pre-line fg:leading-relaxed fg:text-text/90">{lexicalToPlainText(doc.body)}</p>
+        )}
+      </div>
+
+      {/* Action area */}
+      {flow.stage === "otp" && <OtpGate flow={flow} onFeedback={setFeedback} />}
+      {flow.stage === "sign" && <SignPanel token={token} flow={flow} onFeedback={setFeedback} />}
+      {flow.stage === "accept" && <ProposalPanel flow={flow} onFeedback={setFeedback} />}
+
+      {feedback && <p className="fg:mt-4 fg:rounded-lg fg:border fg:border-border fg:bg-surface fg:px-3 fg:py-2 fg:text-sm fg:text-text">{feedback}</p>}
+
+      <p className="fg:mt-8 fg:text-center fg:text-xs fg:text-muted">
+        All activity on this document (opens, verification, signatures, and downloads) is recorded in a
+        tamper-evident audit trail.
+      </p>
+    </div>
+  );
+}
+
+type Flow = ReturnType<typeof useDocumentSigningFlow>;
+
+function StatusBanner({ flow }: { flow: Flow }) {
+  const doc = flow.document!;
+  const recipient = flow.recipient!;
+
+  const banner = (icon: React.ReactNode, title: string, detail?: string, action?: React.ReactNode) => (
+    <div className="fg:mb-6 fg:flex fg:flex-col fg:gap-3 fg:rounded-xl fg:border fg:border-primary/40 fg:bg-primary/5 fg:p-5 fg:sm:flex-row fg:sm:items-center fg:sm:justify-between">
+      <div className="fg:flex fg:items-start fg:gap-3">
+        {icon}
+        <div>
+          <p className="fg:font-semibold fg:text-text">{title}</p>
+          {detail && <p className="fg:mt-0.5 fg:text-sm fg:text-muted">{detail}</p>}
+        </div>
+      </div>
+      {action}
+    </div>
+  );
+
+  const downloadButton = doc.signedPdfUrl ? (
+    <button
+      type="button"
+      onClick={() => flow.download.mutate()}
+      disabled={flow.download.isPending}
+      className="fg:flex fg:shrink-0 fg:items-center fg:gap-2 fg:rounded-lg fg:border fg:border-primary fg:px-4 fg:py-2 fg:text-sm fg:font-medium fg:text-primary fg:disabled:opacity-50"
+    >
+      <Download size={16} /> {flow.download.isPending ? "Preparing…" : "Download signed PDF"}
+    </button>
+  ) : undefined;
+
+  switch (doc.status) {
+    case "signed":
+      return banner(
+        <CheckCircle2 size={22} className="fg:mt-0.5 fg:shrink-0 fg:text-primary" />,
+        "This contract has been signed by all parties.",
+        `${recipient.signedName ? `Signed by ${recipient.signedName}` : "Signed"}${
+          recipient.signedAt ? ` on ${formatDate(recipient.signedAt)}` : ""
+        }. A copy was emailed to all signers.`,
+        downloadButton,
+      );
+    case "accepted":
+      return banner(
+        <CheckCircle2 size={22} className="fg:mt-0.5 fg:shrink-0 fg:text-primary" />,
+        "This proposal has been accepted.",
+        flow.selectedPricingOption
+          ? `Selected option: ${flow.selectedPricingOption.label}, ${formatMoney(
+              flow.selectedPricingOption.amountCents,
+              flow.selectedPricingOption.currency,
+            )}${flow.selectedPricingOption.isRecurring ? " (recurring)" : ""}`
+          : doc.amountCents != null && doc.currency
+            ? `Accepted at ${formatMoney(doc.amountCents, doc.currency)}`
+            : "The sender has been notified.",
+      );
+    case "converted":
+      return banner(
+        <CheckCircle2 size={22} className="fg:mt-0.5 fg:shrink-0 fg:text-primary" />,
+        `This ${flow.kindLabel} is complete.`,
+        "It has been finalized by the sender.",
+        downloadButton,
+      );
+    case "declined":
+      return banner(
+        <XCircle size={22} className="fg:mt-0.5 fg:shrink-0 fg:text-muted" />,
+        `This ${flow.kindLabel} was declined.`,
+        "No further action is needed. Contact the sender if this was a mistake.",
+      );
+    case "expired":
+      return banner(
+        <Clock size={22} className="fg:mt-0.5 fg:shrink-0 fg:text-muted" />,
+        `This ${flow.kindLabel} has expired.`,
+        "The signing window has closed. Ask the sender to issue a new one.",
+      );
+    default:
+      if (recipient.status === "signed") {
+        return banner(
+          <CheckCircle2 size={22} className="fg:mt-0.5 fg:shrink-0 fg:text-primary" />,
+          "You've signed this contract.",
+          "Waiting for the remaining signatures. You'll receive the completed copy by email.",
+        );
+      }
+      return null;
+  }
+}
+
+// Email OTP verification gate — request the 6-digit code, enter, confirm.
+function OtpGate({ flow, onFeedback }: { flow: Flow; onFeedback: (msg: string | null) => void }) {
+  const [codeSent, setCodeSent] = useState(false);
+  const otp = useOtpCodeInput({
+    disabled: flow.confirmOtp.isPending,
+    onComplete: (code) => confirm(code),
+  });
+
+  const request = () => {
+    onFeedback(null);
+    flow.requestOtp.mutate(undefined, {
+      onSuccess: () => setCodeSent(true),
+      onError: () => onFeedback("Could not send the verification code."),
+    });
+  };
+
+  const confirm = (code: string) => {
+    if (code.length !== OTP_LENGTH) return;
+    flow.confirmOtp.mutate(code, {
+      onSuccess: () => onFeedback(null),
+      onError: () => {
+        otp.reset();
+        onFeedback("That code didn't work. Try again.");
+      },
+    });
+  };
+
+  return (
+    <div className="fg:rounded-xl fg:border fg:border-border fg:p-5">
+      <div className="fg:mb-1 fg:flex fg:items-center fg:gap-2">
+        <ShieldCheck size={18} className="fg:text-primary" />
+        <h3 className="fg:text-base fg:font-semibold fg:text-text">Verify your email to continue</h3>
+      </div>
+      <p className="fg:mb-4 fg:text-sm fg:text-muted">
+        This document requires email verification before you can act on it. We'll send a 6-digit code to{" "}
+        <span className="fg:font-medium fg:text-text">{flow.recipient!.email}</span>.
+      </p>
+      {!codeSent ? (
+        <button
+          type="button"
+          onClick={request}
+          disabled={flow.requestOtp.isPending}
+          className="fg:rounded-lg fg:bg-primary fg:px-4 fg:py-2 fg:text-sm fg:font-semibold fg:disabled:opacity-50"
+          style={{ color: "var(--forge-text-primary, #fff)" }}
+        >
+          {flow.requestOtp.isPending ? "Sending…" : "Send verification code"}
+        </button>
+      ) : (
+        <div>
+          <div className="fg:mb-3 fg:flex fg:gap-2">
+            {otp.digits.map((digit, index) => (
+              <input
+                key={index}
+                {...otp.getInputProps(index)}
+                className={`fg:h-12 fg:w-10 fg:rounded-lg fg:border fg:bg-transparent fg:text-center fg:text-xl fg:font-semibold fg:text-text fg:outline-none ${
+                  digit ? "fg:border-primary" : "fg:border-border"
+                }`}
+              />
+            ))}
+          </div>
+          <div className="fg:flex fg:items-center fg:gap-4">
+            <button
+              type="button"
+              onClick={() => confirm(otp.code)}
+              disabled={flow.confirmOtp.isPending || !otp.isComplete}
+              className="fg:rounded-lg fg:bg-primary fg:px-4 fg:py-2 fg:text-sm fg:font-semibold fg:disabled:opacity-50"
+              style={{ color: "var(--forge-text-primary, #fff)" }}
+            >
+              {flow.confirmOtp.isPending ? "Verifying…" : "Verify"}
+            </button>
+            <button
+              type="button"
+              onClick={request}
+              disabled={flow.requestOtp.isPending}
+              className="fg:text-sm fg:text-muted fg:underline fg:disabled:opacity-40"
+            >
+              {flow.requestOtp.isPending ? "Resending…" : "Resend code"}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Contract signature capture: draw (headless canvas pad) or type; legal name +
+// explicit e-signature consent are required in both modes.
+function SignPanel({ token, flow, onFeedback }: { token: string; flow: Flow; onFeedback: (msg: string | null) => void }) {
+  // Canvas strokeStyle can't resolve CSS vars — near-black ink reads well on
+  // the light pad surface regardless of theme.
+  const pad = useSignaturePad({ inkColor: "#111111" });
+  const signature = useContractSignature(token, {
+    defaultName: flow.recipient!.name || "",
+    getDrawnSignature: pad.toDataURL,
+  });
+
+  // Wire the pad's ink state into the signature submit gating.
+  const { hasInk } = pad;
+  const { setHasInk } = signature;
+  useEffect(() => setHasInk(hasInk), [hasInk, setHasInk]);
+
+  const submit = async () => {
+    onFeedback(null);
+    const result = await signature.submit();
+    if (!result.ok && result.error) onFeedback(result.error);
+  };
+
+  const modeButton = (value: "draw" | "type", label: string, Icon: typeof PenLine) => (
+    <button
+      type="button"
+      onClick={() => signature.setMode(value)}
+      className={`fg:flex fg:flex-1 fg:items-center fg:justify-center fg:gap-2 fg:rounded-lg fg:border fg:px-3 fg:py-2 fg:text-sm fg:font-medium ${
+        signature.mode === value ? "fg:border-primary fg:bg-primary/10 fg:text-primary" : "fg:border-border fg:text-muted"
+      }`}
+    >
+      <Icon size={16} /> {label}
+    </button>
+  );
+
+  return (
+    <div className="fg:rounded-xl fg:border fg:border-border fg:p-5">
+      <h3 className="fg:mb-4 fg:text-base fg:font-semibold fg:text-text">Sign this contract</h3>
+
+      <div className="fg:mb-4 fg:flex fg:gap-2">
+        {modeButton("draw", "Draw", PenLine)}
+        {modeButton("type", "Type", Type)}
+      </div>
+
+      {signature.mode === "draw" && (
+        <div>
+          <div className="fg:relative fg:overflow-hidden fg:rounded-lg fg:border fg:border-dashed fg:border-border fg:bg-surface">
+            <canvas {...pad.getCanvasProps()} style={{ ...pad.getCanvasProps().style, height: 180 }} />
+            {!pad.hasInk && (
+              <span className="fg:pointer-events-none fg:absolute fg:inset-0 fg:flex fg:items-center fg:justify-center fg:text-sm fg:text-muted">
+                Draw your signature here
+              </span>
+            )}
+          </div>
+          <div className="fg:mt-2 fg:flex fg:justify-end">
+            <button
+              type="button"
+              onClick={pad.clear}
+              disabled={!pad.hasInk}
+              className="fg:text-sm fg:text-muted fg:underline fg:disabled:opacity-40"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      )}
+
+      <label className="fg:mb-1 fg:mt-4 fg:block fg:text-sm fg:font-medium fg:text-text">Full legal name</label>
+      <div className="fg:mb-1 fg:w-full fg:rounded-lg fg:border fg:border-border fg:bg-surface fg:px-3 fg:py-2 fg:text-text">
+        {signature.legalName || "Not set"}
+      </div>
+      <p className="fg:mb-3 fg:text-xs fg:text-muted">Set by the sender and can't be changed.</p>
+
+      {signature.mode === "type" && signature.legalName.trim() && (
+        <div className="fg:mb-3 fg:flex fg:items-center fg:justify-center fg:rounded-lg fg:border fg:border-dashed fg:border-border fg:bg-surface fg:px-4 fg:py-5">
+          <span className="fg:text-3xl fg:text-text" style={{ fontFamily: "cursive" }}>
+            {signature.legalName.trim()}
+          </span>
+        </div>
+      )}
+
+      <label className="fg:mb-5 fg:flex fg:cursor-pointer fg:items-start fg:gap-2 fg:text-sm fg:text-text">
+        <input
+          type="checkbox"
+          checked={signature.consent}
+          onChange={(e) => signature.setConsent(e.target.checked)}
+          className="fg:mt-0.5 fg:h-4 fg:w-4 fg:shrink-0 fg:accent-primary"
+        />
+        <span>I agree this constitutes my electronic signature.</span>
+      </label>
+
+      <button
+        type="button"
+        onClick={submit}
+        disabled={!signature.canSubmit}
+        className="fg:w-full fg:rounded-lg fg:bg-primary fg:py-2.5 fg:font-semibold fg:disabled:opacity-50"
+        style={{ color: "var(--forge-text-primary, #fff)" }}
+      >
+        {signature.isSigning ? "Signing…" : "Sign contract"}
+      </button>
+
+      <p className="fg:mt-3 fg:text-xs fg:text-muted">
+        Your name, email, IP address, and the time of signing are recorded in this document's audit trail. Signing as{" "}
+        {flow.recipient!.email}.
+      </p>
+
+      <DeclineControl flow={flow} onFeedback={onFeedback} />
+    </div>
+  );
+}
+
+// Proposal acceptance: pricing option radio group (defaulting to the first)
+// + accept, with the quiet decline control underneath.
+function ProposalPanel({ flow, onFeedback }: { flow: Flow; onFeedback: (msg: string | null) => void }) {
+  const options = flow.pricingOptions;
+  const [selectedId, setSelectedId] = useState<string | undefined>(options[0]?.id);
+  const doc = flow.document!;
+
+  const accept = () => {
+    onFeedback(null);
+    flow.accept.mutate(
+      { ...(options.length > 0 && selectedId ? { pricingOptionId: selectedId } : {}) },
+      { onError: () => onFeedback("Accepting failed. Please try again.") },
+    );
+  };
+
+  return (
+    <div className="fg:rounded-xl fg:border fg:border-border fg:p-5">
+      <h3 className="fg:mb-4 fg:text-base fg:font-semibold fg:text-text">Accept this proposal</h3>
+
+      {options.length > 0 ? (
+        <div className="fg:mb-4 fg:flex fg:flex-col fg:gap-2" role="radiogroup" aria-label="Pricing options">
+          {options.map((option) => (
+            <label
+              key={option.id}
+              className={`fg:flex fg:cursor-pointer fg:items-center fg:justify-between fg:gap-3 fg:rounded-lg fg:border fg:p-3 ${
+                selectedId === option.id ? "fg:border-primary fg:bg-primary/5" : "fg:border-border"
+              }`}
+            >
+              <span className="fg:flex fg:items-center fg:gap-2.5">
+                <input
+                  type="radio"
+                  name="pricing-option"
+                  checked={selectedId === option.id}
+                  onChange={() => setSelectedId(option.id)}
+                  className="fg:h-4 fg:w-4 fg:accent-primary"
+                />
+                <span className="fg:text-sm fg:font-medium fg:text-text">{option.label}</span>
+              </span>
+              <span className="fg:text-sm fg:font-bold fg:text-text">
+                {formatMoney(option.amountCents, option.currency)}
+                {option.isRecurring && <span className="fg:font-normal fg:text-muted"> / recurring</span>}
+              </span>
+            </label>
+          ))}
+        </div>
+      ) : (
+        doc.amountCents != null &&
+        doc.currency && (
+          <p className="fg:mb-4 fg:text-2xl fg:font-extrabold fg:text-text">{formatMoney(doc.amountCents, doc.currency)}</p>
+        )
+      )}
+
+      <button
+        type="button"
+        onClick={accept}
+        disabled={flow.accept.isPending}
+        className="fg:w-full fg:rounded-lg fg:bg-primary fg:py-2.5 fg:font-semibold fg:disabled:opacity-50"
+        style={{ color: "var(--forge-text-primary, #fff)" }}
+      >
+        {flow.accept.isPending ? "Accepting…" : "Accept proposal"}
+      </button>
+
+      <DeclineControl flow={flow} onFeedback={onFeedback} />
+    </div>
+  );
+}
+
+// Quiet expandable decline control under both action panels.
+function DeclineControl({ flow, onFeedback }: { flow: Flow; onFeedback: (msg: string | null) => void }) {
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState("");
+
+  const decline = () => {
+    onFeedback(null);
+    flow.decline.mutate(
+      { reason: reason.trim() || undefined },
+      { onError: () => onFeedback("Declining failed. Please try again.") },
+    );
+  };
+
+  return (
+    <div className="fg:mt-5">
+      {!open ? (
+        <button type="button" onClick={() => setOpen(true)} className="fg:text-sm fg:text-muted fg:underline">
+          Decline this {flow.kindLabel} instead
+        </button>
+      ) : (
+        <div className="fg:rounded-lg fg:border fg:border-border fg:p-3">
+          <label className="fg:mb-1 fg:block fg:text-sm fg:font-medium fg:text-text">
+            Reason <span className="fg:font-normal fg:text-muted">(optional)</span>
+          </label>
+          <textarea
+            rows={2}
+            maxLength={2000}
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+            className="fg:mb-2 fg:w-full fg:resize-y fg:rounded-lg fg:border fg:border-border fg:bg-transparent fg:px-3 fg:py-2 fg:text-sm fg:text-text fg:outline-none fg:focus:border-primary"
+          />
+          <div className="fg:flex fg:items-center fg:gap-3">
+            <button
+              type="button"
+              onClick={decline}
+              disabled={flow.decline.isPending}
+              className="fg:rounded-lg fg:border fg:border-border fg:px-3 fg:py-1.5 fg:text-sm fg:font-semibold fg:text-text fg:disabled:opacity-50"
+            >
+              {flow.decline.isPending ? "Declining…" : "Decline"}
+            </button>
+            <button type="button" onClick={() => setOpen(false)} className="fg:text-sm fg:text-muted fg:underline">
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Embedded PDF body with a graceful fallback link (iOS often refuses inline PDFs).
+function PdfEmbed({ url, title }: { url: string; title: string }) {
+  const safeUrl = encodeURI(url);
+  return (
+    <div>
+      <object data={safeUrl} type="application/pdf" className="fg:h-[70vh] fg:w-full" aria-label={title}>
+        <iframe src={safeUrl} title={title} className="fg:h-[70vh] fg:w-full" style={{ border: 0 }} />
+      </object>
+      <p className="fg:mt-2 fg:text-xs fg:text-muted">
+        Trouble viewing?{" "}
+        <a href={safeUrl} target="_blank" rel="noopener noreferrer" className="fg:text-primary fg:underline">
+          Open the PDF in a new tab
+        </a>
+        .
+      </p>
+    </div>
+  );
+}