@unlev/exeq 0.1.6 → 0.1.9

package/dist/index.mjs

@@ -235,9 +235,10 @@ function FieldOverlayItem({
   const overlayRef = useRef(null);
   const dragStartRef = useRef(null);
   const resizeStartRef = useRef(null);
-  const color = getSignerColor(field.assignee);
   const isRedact = field.type === "blackout" || field.type === "whiteout";
   const isEditable = mode === "designer" || mode === "signer" && field.assignee === currentSigner;
+  const isInactiveSigner = mode === "signer" && !isRedact && field.assignee !== currentSigner;
+  const color = isInactiveSigner ? "#cccccc" : getSignerColor(field.assignee);
   const isPreFilled = !isEditable && !!field.value;
   const handleMouseDown = useCallback((e) => {
     if (mode !== "designer" || !onMove) return;
@@ -302,7 +303,7 @@ function FieldOverlayItem({
     "div",
     {
       ref: overlayRef,
-      className: `field-overlay ${isSelected ? "selected" : ""} ${isEditable ? "editable" : "readonly"} ${isPreFilled ? "prefilled" : ""} ${isRedact ? "redact" : ""}`,
+      className: `field-overlay ${isSelected ? "selected" : ""} ${isEditable ? "editable" : "readonly"} ${isPreFilled ? "prefilled" : ""} ${isRedact ? "redact" : ""} ${isInactiveSigner ? "inactive-signer" : ""}`,
       style: {
         left: `${field.x}%`,
         top: `${field.y}%`,
@@ -310,9 +311,9 @@ function FieldOverlayItem({
         height: `${field.height}%`,
         borderColor: isRedact ? field.type === "blackout" ? "#666" : "#bbb" : color,
         borderStyle: isRedact ? "dashed" : "solid",
-        backgroundColor: isRedact ? field.type === "blackout" ? "#000000" : "#ffffff" : isSelected ? `${color}22` : `${color}11`,
-        cursor: mode === "designer" ? "move" : "default",
-        pointerEvents: mode === "signer" && isRedact ? "none" : void 0
+        backgroundColor: isRedact ? field.type === "blackout" ? "#000000" : "#ffffff" : isInactiveSigner ? "#f5f5f5" : isSelected ? `${color}22` : `${color}11`,
+        cursor: mode === "designer" ? "move" : isInactiveSigner ? "default" : "default",
+        pointerEvents: mode === "signer" && (isRedact || isInactiveSigner) ? "none" : void 0
       },
       onClick: (e) => {
         e.stopPropagation();
@@ -999,6 +1000,10 @@ function DesignerView({
       pages.length > 0 && /* @__PURE__ */ jsxs4(Fragment, { children: [
         /* @__PURE__ */ jsx4("div", { className: "panel-resize-handle", onMouseDown: handleResizeStart }),
         /* @__PURE__ */ jsxs4("div", { className: "designer-panel", style: { width: panelWidth }, children: [
+          /* @__PURE__ */ jsxs4("div", { className: "signer-role-indicator", children: [
+            /* @__PURE__ */ jsx4("span", { className: "signer-role-indicator-label", children: "Editing as" }),
+            /* @__PURE__ */ jsx4("strong", { children: activeRole })
+          ] }),
           /* @__PURE__ */ jsxs4("div", { className: "panel-tabs", children: [
             /* @__PURE__ */ jsx4(
               "button",
@@ -1287,7 +1292,8 @@ function SignerView({
   callbackUrl: initialCallbackUrl,
   onComplete,
   initialValues,
-  submitLabel
+  submitLabel,
+  signerOrder: signerOrderProp
 } = {}) {
   if (!isValidApiKey(apiKey)) {
     return /* @__PURE__ */ jsx6("div", { className: "signer-layout", children: /* @__PURE__ */ jsxs6("div", { className: "empty-state", children: [
@@ -1302,15 +1308,28 @@ function SignerView({
   const [pages, setPages] = useState3([]);
   const [fields, setFields] = useState3([]);
   const [selectedFieldId, setSelectedFieldId] = useState3(null);
-  const [signer, setSigner] = useState3(initialSigner || "Signer 1");
+  const [signerRoles, setSignerRoles] = useState3([]);
+  const [currentSignerIndex, setCurrentSignerIndex] = useState3(() => {
+    if (initialSigner && signerOrderProp) {
+      const idx = signerOrderProp.indexOf(initialSigner);
+      return idx >= 0 ? idx : 0;
+    }
+    return 0;
+  });
+  const initializedRef = useRef4(false);
   const [loading, setLoading] = useState3(false);
   const [submitting, setSubmitting] = useState3(false);
   const [pdfSource, setPdfSource] = useState3(null);
   const [callbackUrl, setCallbackUrl] = useState3(initialCallbackUrl || "");
   const containerRef = useRef4(null);
+  const signerOrder = signerOrderProp || (signerRoles.length > 0 ? [...signerRoles.filter((r) => r !== "Sender"), ...signerRoles.filter((r) => r === "Sender")] : [initialSigner || "Signer 1"]);
+  const signer = signerOrder[currentSignerIndex] || signerOrder[0] || "Signer 1";
+  const isLastSigner = currentSignerIndex >= signerOrder.length - 1;
+  const isMultiSigner = signerOrder.length > 1;
   useEffect3(() => {
     if (initialTemplate) {
       let templateFields = initialTemplate.fields;
+      if (initialTemplate.signerRoles) setSignerRoles(initialTemplate.signerRoles);
       if (initialValues) {
         templateFields = templateFields.map((f) => {
           const byLabel = Object.entries(initialValues).find(
@@ -1321,26 +1340,56 @@ function SignerView({
           return value !== void 0 ? { ...f, value } : f;
         });
       }
-      setFields(templateFields);
+      if (initializedRef.current) {
+        setFields((prev) => {
+          const valueMap = new Map(prev.filter((f) => f.value).map((f) => [f.id, f.value]));
+          return templateFields.map((f) => valueMap.has(f.id) ? { ...f, value: valueMap.get(f.id) } : f);
+        });
+      } else {
+        setFields(templateFields);
+        initializedRef.current = true;
+      }
       if (initialPdfUrl) loadPdf(initialPdfUrl);
       return;
     }
     const params = new URLSearchParams(window.location.search);
     const pdfUrl = params.get("pdf");
     const fieldsUrl = params.get("fields");
-    const signerParam = params.get("signer");
     const cbUrl = params.get("callbackUrl");
-    if (signerParam) setSigner(signerParam);
     if (cbUrl) setCallbackUrl(cbUrl);
     if (pdfUrl) loadPdf(pdfUrl);
     if (fieldsUrl) {
-      fetch(fieldsUrl).then((r) => r.json()).then((template) => setFields(template.fields)).catch((err) => console.error("Failed to load fields:", err));
+      fetch(fieldsUrl).then((r) => r.json()).then((template) => {
+        if (template.signerRoles) setSignerRoles(template.signerRoles);
+        if (initializedRef.current) {
+          setFields((prev) => {
+            const valueMap = new Map(prev.filter((f) => f.value).map((f) => [f.id, f.value]));
+            return template.fields.map((f) => valueMap.has(f.id) ? { ...f, value: valueMap.get(f.id) } : f);
+          });
+        } else {
+          setFields(template.fields);
+          initializedRef.current = true;
+        }
+      }).catch((err) => console.error("Failed to load fields:", err));
     }
     const handleMessage = (e) => {
       if (e.data?.type === "load-signing") {
-        if (e.data.fields) setFields(e.data.fields);
+        if (e.data.fields) {
+          if (initializedRef.current) {
+            setFields((prev) => {
+              const valueMap = new Map(prev.filter((f) => f.value).map((f) => [f.id, f.value]));
+              return e.data.fields.map((f) => valueMap.has(f.id) ? { ...f, value: valueMap.get(f.id) } : f);
+            });
+          } else {
+            setFields(e.data.fields);
+            initializedRef.current = true;
+          }
+        }
         if (e.data.pdfUrl) loadPdf(e.data.pdfUrl);
-        if (e.data.signer) setSigner(e.data.signer);
+        if (e.data.signer) {
+          const idx = signerOrder.indexOf(e.data.signer);
+          if (idx >= 0) setCurrentSignerIndex(idx);
+        }
         if (e.data.callbackUrl) setCallbackUrl(e.data.callbackUrl);
       }
     };
@@ -1385,8 +1434,18 @@ function SignerView({
     if (f.type === "checkbox") return true;
     return !!f.value;
   });
-  const handleSubmit = useCallback4(async () => {
-    if (!pdfSource || !allRequiredFilled) return;
+  const handleAdvanceOrSubmit = useCallback4(async () => {
+    if (!allRequiredFilled) return;
+    if (!isLastSigner) {
+      setCurrentSignerIndex((prev) => prev + 1);
+      setSelectedFieldId(null);
+      const pdfArea = containerRef.current?.querySelector(".signer-pdf-area");
+      if (pdfArea) {
+        pdfArea.scrollTo({ top: 0, behavior: "smooth" });
+      }
+      return;
+    }
+    if (!pdfSource) return;
     setSubmitting(true);
     try {
       const pdfBytes = await generateFilledPdf(pdfSource, fields);
@@ -1406,7 +1465,7 @@ function SignerView({
     } finally {
       setSubmitting(false);
     }
-  }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete]);
+  }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete, isLastSigner]);
   const renderFieldContent = useCallback4((field) => {
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
@@ -1469,8 +1528,20 @@ function SignerView({
       }));
     }
   }, [fields.filter((f) => f.type === "signature" && f.value).length]);
+  const stepLabel = isLastSigner ? submitLabel || "Complete" : `Next: ${signerOrder[currentSignerIndex + 1]}`;
   return /* @__PURE__ */ jsxs6("div", { className: "signer-layout", ref: containerRef, children: [
     loading && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Loading document..." }),
+    isMultiSigner && /* @__PURE__ */ jsx6("div", { className: "signer-progress-bar", children: signerOrder.map((role, i) => /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: `signer-progress-step ${i < currentSignerIndex ? "completed" : ""} ${i === currentSignerIndex ? "active" : ""} ${i > currentSignerIndex ? "upcoming" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx6("div", { className: "signer-progress-dot", children: i < currentSignerIndex ? "\u2713" : i + 1 }),
+          /* @__PURE__ */ jsx6("span", { className: "signer-progress-label", children: role })
+        ]
+      },
+      role
+    )) }),
     /* @__PURE__ */ jsxs6("div", { className: "signer-content", children: [
       /* @__PURE__ */ jsx6("div", { className: "signer-pdf-area", children: pages.length > 0 && /* @__PURE__ */ jsx6(
         PdfViewer,
@@ -1485,6 +1556,10 @@ function SignerView({
         }
       ) }),
       /* @__PURE__ */ jsxs6("div", { className: "signer-panel", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "signer-role-indicator", children: [
+          /* @__PURE__ */ jsx6("span", { className: "signer-role-indicator-label", children: "Signing as" }),
+          /* @__PURE__ */ jsx6("strong", { children: signer })
+        ] }),
         selectedField && isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-input", children: [
           /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
           selectedField.required && /* @__PURE__ */ jsx6("span", { className: "required-badge", children: "Required" }),
@@ -1532,16 +1607,16 @@ function SignerView({
             currentFieldId: selectedFieldId,
             onNavigate: handleNavigate,
             allRequiredFilled,
-            onSubmit: handleSubmit,
-            submitLabel
+            onSubmit: handleAdvanceOrSubmit,
+            submitLabel: stepLabel
           }
         ),
-        submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." })
+        submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." }),
+        /* @__PURE__ */ jsxs6("div", { className: "powered-by", children: [
+          "Powered by ",
+          /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+        ] })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "powered-by", children: [
-      "Powered by ",
-      /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
     ] })
   ] });
 }