@unlev/exeq 0.1.7 → 0.1.10

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",
@@ -1216,8 +1221,8 @@ function FieldNavigator({
   currentFieldId,
   onNavigate,
   allRequiredFilled,
-  onSubmit,
-  submitLabel = "Complete"
+  onComplete,
+  completeLabel = "Complete"
 }) {
   const currentIndex = fields.findIndex((f) => f.id === currentFieldId);
   const hasPrev = currentIndex > 0;
@@ -1268,10 +1273,10 @@ function FieldNavigator({
     /* @__PURE__ */ jsx5(
       "button",
       {
-        onClick: onSubmit,
+        onClick: onComplete,
         disabled: !allRequiredFilled,
-        className: "submit-btn",
-        children: submitLabel
+        className: "complete-btn",
+        children: completeLabel
       }
     )
   ] });
@@ -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,22 +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);
-  useEffect3(() => {
-    if (initialSigner) {
-      setSigner(initialSigner);
-      setSelectedFieldId(null);
-    }
-  }, [initialSigner]);
+  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(
@@ -1343,13 +1355,12 @@ function SignerView({
     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) => {
+        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]));
@@ -1375,7 +1386,10 @@ function SignerView({
           }
         }
         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);
       }
     };
@@ -1420,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);
@@ -1441,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;
@@ -1520,63 +1544,79 @@ function SignerView({
         }
       ) }),
       /* @__PURE__ */ jsxs6("div", { className: "signer-panel", children: [
-        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" }),
-          (selectedField.type === "signature" || selectedField.type === "initials") && /* @__PURE__ */ jsx6(
-            SignatureCanvas,
-            {
-              width: 280,
-              height: selectedField.type === "initials" ? 80 : 120,
-              onSign: (dataUrl) => handleFieldUpdate(selectedField.id, dataUrl),
-              initialValue: selectedField.value
-            }
-          ),
-          selectedField.type === "text" && /* @__PURE__ */ jsx6(
-            "input",
-            {
-              type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
-              value: selectedField.value,
-              onChange: (e) => handleFieldUpdate(selectedField.id, e.target.value),
-              placeholder: selectedField.placeholder,
-              className: "signer-text-input"
-            }
-          ),
-          selectedField.type === "checkbox" && /* @__PURE__ */ jsxs6("label", { className: "signer-checkbox-label", children: [
-            /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-header", 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 })
+          ] }),
+          isMultiSigner && /* @__PURE__ */ jsxs6("div", { className: "signer-step-badge", children: [
+            "Step ",
+            currentSignerIndex + 1,
+            " of ",
+            signerOrder.length
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-body", children: [
+          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" }),
+            (selectedField.type === "signature" || selectedField.type === "initials") && /* @__PURE__ */ jsx6(
+              SignatureCanvas,
+              {
+                width: 280,
+                height: selectedField.type === "initials" ? 80 : 120,
+                onSign: (dataUrl) => handleFieldUpdate(selectedField.id, dataUrl),
+                initialValue: selectedField.value
+              }
+            ),
+            selectedField.type === "text" && /* @__PURE__ */ jsx6(
               "input",
               {
-                type: "checkbox",
-                checked: selectedField.value === "true",
-                onChange: (e) => handleFieldUpdate(selectedField.id, e.target.checked ? "true" : "")
+                type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
+                value: selectedField.value,
+                onChange: (e) => handleFieldUpdate(selectedField.id, e.target.value),
+                placeholder: selectedField.placeholder,
+                className: "signer-text-input"
               }
             ),
-            selectedField.placeholder || "Check this box"
+            selectedField.type === "checkbox" && /* @__PURE__ */ jsxs6("label", { className: "signer-checkbox-label", children: [
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedField.value === "true",
+                  onChange: (e) => handleFieldUpdate(selectedField.id, e.target.checked ? "true" : "")
+                }
+              ),
+              selectedField.placeholder || "Check this box"
+            ] }),
+            selectedField.type === "signed-date" && /* @__PURE__ */ jsx6("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
           ] }),
-          selectedField.type === "signed-date" && /* @__PURE__ */ jsx6("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
-        ] }),
-        selectedField && !isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-readonly", children: [
-          /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
-          /* @__PURE__ */ jsx6("p", { children: "This field belongs to another signer." })
+          selectedField && !isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-readonly", children: [
+            /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
+            /* @__PURE__ */ jsx6("p", { children: "This field belongs to another signer." })
+          ] }),
+          !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx6("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." })
         ] }),
-        !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx6("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." }),
-        /* @__PURE__ */ jsx6(
-          FieldNavigator,
-          {
-            fields: editableFields,
-            currentFieldId: selectedFieldId,
-            onNavigate: handleNavigate,
-            allRequiredFilled,
-            onSubmit: handleSubmit,
-            submitLabel
-          }
-        ),
-        submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." })
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-footer", children: [
+          /* @__PURE__ */ jsx6(
+            FieldNavigator,
+            {
+              fields: editableFields,
+              currentFieldId: selectedFieldId,
+              onNavigate: handleNavigate,
+              allRequiredFilled,
+              onComplete: handleAdvanceOrSubmit,
+              completeLabel: isLastSigner ? submitLabel || "Complete" : `Next: ${signerOrder[currentSignerIndex + 1]}`
+            }
+          ),
+          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" })
     ] })
   ] });
 }