@arbidocs/blocks 0.4.157 → 0.4.159

package/dist/document-tools/viewer/index.js

@@ -1,13 +1,13 @@
 "use client";
-import { TYPED_SIGNATURE_STYLE, AdoptSignatureDialog } from '../../chunk-EQB3WELX.js';
+import { TYPED_SIGNATURE_STYLE, AdoptSignatureDialog } from '../../chunk-DAN7EJ4O.js';
 import { ModalScaffold } from '../../chunk-TX2ZICS7.js';
 import '../../chunk-VUNV25KB.js';
 import { useRef, useMemo, useEffect, useState, useCallback } from 'react';
 import { useAnnotationLayer, redactionLogCsv, AnnotationPageOverlay, AnnotationToolbar, FreezeDialog, createMemoryStore } from '@arbidocs/react/annotations';
 import { freezePdfInBrowser } from '@arbidocs/react/annotations/freeze';
-import { useDocumentTools, useIsOnline, createMarkupStore, fetchMarkupPdf, uploadFrozenCopy, redactionLogName, SIGNED_LOCKED_REASON, isLegibleSignatureBox, toAppearance, FIELD_TYPE_LABELS, useSignSignatureRequest, useDeclineSignatureRequest, fieldsInSigningOrder, MARK_FIELD_TYPES, intentText, useSignerCandidates, useSaveSignatureRequest, sendBlocker, newFieldId, SIGNATURE_FIELD_TYPES, SigningError, DEFAULT_FIELD_SIZE, suggestSignatureFields, fieldsFromSuggestions } from '@arbidocs/react/document-tools';
+import { useDocumentTools, useIsOnline, createMarkupStore, fetchMarkupPdf, uploadFrozenCopy, redactionLogName, SIGNED_LOCKED_REASON, isLegibleSignatureBox, toAppearance, FIELD_TYPE_LABELS, useSignSignatureRequest, useSavedSignature, useStoreSavedSignature, useDeclineSignatureRequest, fieldsInSigningOrder, MARK_FIELD_TYPES, intentText, useSignerCandidates, useSaveSignatureRequest, useInviteSigners, isEmailSigner, sendBlocker, suggestSignatureFields, splitSuggestions, fieldsFromSuggestions, newFieldId, SIGNATURE_FIELD_TYPES, SigningError, DEFAULT_FIELD_SIZE } from '@arbidocs/react/document-tools';
 import { PdfViewer } from '@arbidocs/react/viewers';
-import { Download, X, ArrowRight, ArrowLeft, Check, UserPlus, ScanSearch, Send, PenLine } from 'lucide-react';
+import { Download, X, ArrowRight, ArrowLeft, Check, UserPlus, MailPlus, ScanSearch, Send, PenLine } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button, cn, Progress, Label, Input, Checkbox } from '@arbidocs/react/ui';
 
@@ -30,6 +30,7 @@ function AnnotatedPdfViewer({
   store: storeOverride,
   viewer: PdfViewer$1 = PdfViewer,
   signed = false,
+  placeStamp = null,
   ...viewerProps
 }) {
   const { client, user, notify, saveFile, uploadDocument, openDocument, onDocumentsChanged } = useDocumentTools();
@@ -61,6 +62,12 @@ function AnnotatedPdfViewer({
     () => editing && !controller.readOnly ? controller : viewOnly(controller),
     [editing, controller]
   );
+  const { setSettings, setTool } = controller;
+  useEffect(() => {
+    if (!placeStamp) return;
+    setSettings({ stampImage: { image: placeStamp.image, label: placeStamp.label } });
+    setTool("stamp");
+  }, [placeStamp?.key]);
   const { flush } = controller;
   useEffect(() => {
     if (!editing) void flush();
@@ -491,6 +498,8 @@ function GuidedSigningViewer({
 }) {
   const { user, notify } = useDocumentTools();
   const sign = useSignSignatureRequest();
+  const savedSignature = useSavedSignature();
+  const storeSignature = useStoreSavedSignature();
   const decline = useDeclineSignatureRequest();
   const mine = useMemo(() => fieldsInSigningOrder(request.fields, signer), [request.fields, signer]);
   const [mark, setMark] = useState(null);
@@ -570,9 +579,17 @@ function GuidedSigningViewer({
   const renderContent = useCallback(
     (field) => {
       if (!applied.has(field.id) || !mark) return null;
-      const { adopted, signatureUrl } = mark;
-      if (field.type === "signature" && signatureUrl) {
-        return /* @__PURE__ */ jsx("img", { src: signatureUrl, alt: "Your signature", className: "h-full w-full object-contain" });
+      const { adopted, signatureUrl, initialsUrl } = mark;
+      const image = field.type === "signature" ? signatureUrl : field.type === "initials" ? initialsUrl : null;
+      if (image) {
+        return /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image,
+            alt: field.type === "signature" ? "Your signature" : "Your initials",
+            className: "h-full w-full object-contain"
+          }
+        );
       }
       const text = field.type === "signature" ? adopted.name : field.type === "initials" ? adopted.initials : field.type === "date" ? signingDate() : adopted.name;
       const typed = MARK_FIELD_TYPES.includes(field.type);
@@ -775,7 +792,9 @@ function GuidedSigningViewer({
         open: !!adoptFor,
         onOpenChange: (open) => !open && setAdoptFor(null),
         defaultName: user?.name ?? "",
-        onAdopt
+        onAdopt,
+        saved: savedSignature.data ?? null,
+        onSave: async (signature) => void await storeSignature.mutateAsync(signature)
       }
     ),
     /* @__PURE__ */ jsx(
@@ -873,9 +892,10 @@ function SignatureRequestEditor({
   viewer: PdfViewer$1 = PdfViewer,
   ...viewerProps
 }) {
-  const { client, notify } = useDocumentTools();
+  const { client, notify, user } = useDocumentTools();
   const candidates = useSignerCandidates();
   const save = useSaveSignatureRequest();
+  const invite = useInviteSigners();
   const [fields, setFields] = useState(() => draft?.fields ?? []);
   const [signers, setSigners] = useState(() => [
     ...new Set((draft?.fields ?? []).map((f) => f.signer))
@@ -888,11 +908,31 @@ function SignatureRequestEditor({
   const [assign, setAssign] = useState({});
   const [finding, setFinding] = useState(false);
   const [error, setError] = useState(null);
+  const [newEmail, setNewEmail] = useState("");
+  const [givenNames, setGivenNames] = useState({});
+  const [confirmInvite, setConfirmInvite] = useState(null);
   const people = useMemo(() => candidates.data ?? [], [candidates.data]);
-  const nameOf = useCallback(
-    (ext) => people.find((p) => p.externalId === ext)?.name ?? ext,
+  const members = useMemo(
+    () => new Map(people.map((p) => [p.email.toLowerCase(), p.externalId])),
     [people]
   );
+  const me = people.find((p) => p.email.toLowerCase() === user?.email?.toLowerCase());
+  const nameOf = useCallback(
+    (token) => {
+      const person = people.find((p) => p.externalId === token);
+      if (person) return person.name;
+      const invited = draft?.signers.find((s) => s.external_id === token);
+      if (invited) return invited.name || invited.email || token;
+      const email = token.toLowerCase();
+      const member = people.find((p) => p.email.toLowerCase() === email);
+      return member?.name ?? givenNames[email] ?? token;
+    },
+    [people, draft, givenNames]
+  );
+  const isInvitee = useCallback(
+    (token) => isEmailSigner(token) && !members.has(token.toLowerCase()) || draft?.signers.find((s) => s.external_id === token)?.progress === "invited",
+    [members, draft]
+  );
   const colorOf = useCallback(
     (ext) => {
       const i = signers.indexOf(ext);
@@ -902,8 +942,10 @@ function SignatureRequestEditor({
   );
   const selected = fields.find((f) => f.id === selectedId) ?? null;
   const blocker = signers.length === 0 ? "Add a signer." : sendBlocker(fields);
-  const addSigner = (ext) => {
-    if (!ext || signers.includes(ext)) return;
+  const addSigner = (token) => {
+    if (!token) return;
+    const ext = isEmailSigner(token) ? members.get(token.trim().toLowerCase()) ?? token.trim().toLowerCase() : token;
+    if (signers.includes(ext)) return;
     setSigners((s) => [...s, ext]);
     setCurrent(ext);
     setPlacing((p) => p ?? "signature");
@@ -914,6 +956,41 @@ function SignatureRequestEditor({
     if (current === ext) setCurrent(signers.find((x) => x !== ext) ?? null);
   };
   const updateField = (id, patch) => setFields((fs) => fs.map((f) => f.id === id ? { ...f, ...patch } : f));
+  const placedOnce = useRef(false);
+  useEffect(() => {
+    if (draft || placedOnce.current || candidates.isLoading) return;
+    placedOnce.current = true;
+    let live = true;
+    void suggestSignatureFields(client, documentId, version).then((found) => {
+      if (!live) return;
+      const { placed, extras } = splitSuggestions(found ?? []);
+      if (!placed.length) return;
+      const named = Object.fromEntries(
+        placed.flatMap(
+          (s) => s.signer_email && s.signer_name ? [[s.signer_email.toLowerCase(), s.signer_name]] : []
+        )
+      );
+      setGivenNames((n) => ({ ...n, ...named }));
+      const added = fieldsFromSuggestions(placed, {}, members);
+      setFields((fs) => [...fs, ...added]);
+      const assigned = [...new Set(added.map((f) => f.signer))];
+      setSigners((s) => [...s, ...assigned.filter((t) => !s.includes(t))]);
+      setCurrent((c) => c ?? assigned[0] ?? null);
+      const open = placed.filter((s) => !s.signer_email);
+      if (open.length || extras.length) {
+        setSuggestions([...open, ...extras]);
+        setAssign({});
+      }
+      notify(
+        `${added.length} field${added.length === 1 ? "" : "s"} placed from the document.`,
+        "success"
+      );
+    }).catch(() => {
+    });
+    return () => {
+      live = false;
+    };
+  }, [draft, candidates.isLoading, client, documentId, version, members, notify]);
   const findBlocks = async () => {
     setFinding(true);
     setError(null);
@@ -931,7 +1008,7 @@ function SignatureRequestEditor({
   };
   const applySuggestions = () => {
     if (!suggestions) return;
-    const added = fieldsFromSuggestions(suggestions, assign);
+    const added = fieldsFromSuggestions(suggestions, assign, members);
     setFields((fs) => [...fs, ...added]);
     const assigned = [...new Set(added.map((f) => f.signer))];
     setSigners((s) => [...s, ...assigned.filter((ext) => !s.includes(ext))]);
@@ -939,9 +1016,17 @@ function SignatureRequestEditor({
     setSuggestions(null);
     notify(`${added.length} field${added.length === 1 ? "" : "s"} added.`, "success");
   };
-  const submit = async (send) => {
+  const submit = async (send, invited = false) => {
     setError(null);
+    const invitees = signers.filter((t) => isEmailSigner(t) && !members.has(t.toLowerCase()));
+    if (send && invitees.length && !invited) {
+      setConfirmInvite(invitees);
+      return;
+    }
     try {
+      if (send && invitees.length && me?.role === "owner") {
+        await invite.mutateAsync({ documentId, emails: invitees });
+      }
       const request = await save.mutateAsync({
         documentId,
         version,
@@ -950,10 +1035,12 @@ function SignatureRequestEditor({
         requestId: draft?.status === "draft" ? draft.external_id : void 0,
         send
       });
+      const waiting = request.signers.filter((s) => s.progress === "invited").length;
       notify(
-        send ? `Sent for signature to ${request.signers.length} signer${request.signers.length === 1 ? "" : "s"}.` : "Draft saved.",
+        send ? `Sent for signature to ${request.signers.length} signer${request.signers.length === 1 ? "" : "s"}.` + (waiting ? ` ${waiting} ${waiting === 1 ? "is" : "are"} asked once they join the workspace.` : "") : "Draft saved.",
         "success"
       );
+      setConfirmInvite(null);
       onSaved(request);
     } catch (err) {
       setError(err instanceof Error ? err.message : "The request could not be saved");
@@ -1017,7 +1104,8 @@ function SignatureRequestEditor({
                   "data-testid": `signer-chip-${ext}`,
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full", style: { background: colorOf(ext) } }),
-                    nameOf(ext)
+                    nameOf(ext),
+                    isInvitee(ext) && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", "data-testid": "signer-invited", children: "(to invite)" })
                   ]
                 }
               ),
@@ -1057,7 +1145,45 @@ function SignatureRequestEditor({
               ]
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "inline-flex items-center gap-1",
+            onSubmit: (e) => {
+              e.preventDefault();
+              if (!isEmailSigner(newEmail)) return;
+              addSigner(newEmail);
+              setNewEmail("");
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "email",
+                  value: newEmail,
+                  onChange: (e) => setNewEmail(e.target.value),
+                  placeholder: "Or anyone, by email",
+                  "aria-label": "Signer's email",
+                  className: "h-8 w-52",
+                  "data-testid": "signature-add-email"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "submit",
+                  size: "sm",
+                  variant: "ghost",
+                  disabled: !isEmailSigner(newEmail),
+                  "aria-label": "Add this signer",
+                  "data-testid": "signature-add-email-submit",
+                  children: /* @__PURE__ */ jsx(MailPlus, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: current ? `Place for ${nameOf(current)}:` : "Add a signer, then place their fields." }),
@@ -1214,7 +1340,8 @@ function SignatureRequestEditor({
                 "data-testid": `signature-suggestion-signer-${g}`,
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: "Skip" }),
-                  people.map((p) => /* @__PURE__ */ jsx("option", { value: p.externalId, children: p.name }, p.externalId))
+                  people.map((p) => /* @__PURE__ */ jsx("option", { value: p.externalId, children: p.name }, p.externalId)),
+                  signers.filter((t) => !people.some((p) => p.externalId === t)).map((t) => /* @__PURE__ */ jsx("option", { value: t, children: nameOf(t) }, t))
                 ]
               }
             )
@@ -1235,6 +1362,45 @@ function SignatureRequestEditor({
           /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setSuggestions(null), children: "Dismiss" })
         ] })
       ] }),
+      confirmInvite && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "space-y-1.5 rounded-md border border-amber-300 bg-amber-50 p-2 text-amber-950 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100",
+          "data-testid": "signature-invite-confirm",
+          children: [
+            /* @__PURE__ */ jsxs("p", { children: [
+              "Not in this workspace yet: ",
+              /* @__PURE__ */ jsx("strong", { children: confirmInvite.map(nameOf).join(", ") }),
+              ".",
+              " ",
+              me?.role === "owner" ? "They are invited as guests and asked to sign when they join." : "Ask a workspace owner to invite them: they are asked to sign when they join."
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  onClick: () => submit(true, true),
+                  disabled: save.isPending || invite.isPending,
+                  "data-testid": "signature-invite-send",
+                  children: me?.role === "owner" ? "Invite and send" : "Send"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: () => setConfirmInvite(null),
+                  children: "Cancel"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
       error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-text", role: "alert", "data-testid": "signature-editor-error", children: error })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(PdfViewer$1, { ...viewerProps, file, renderPageOverlay }) })