@verdocs/web-sdk 6.5.0-beta.3 → 6.5.0-beta.6

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -64,8 +64,6 @@ export class VerdocsSign {
          * be externally controlled, use CSS display options to hide/show it instead.
          */
         this.headerTargetId = null;
-        // @State() roleNames: string[] = [];
-        // @State() sortedRecipients: IRecipient[] = [];
         this.recipient = null;
         this.hasSignature = false;
         this.nextButtonLabel = 'Start';
@@ -135,17 +133,19 @@ export class VerdocsSign {
         }
     }
     processAuthResponse(response) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { envelope, recipient } = response;
+        // TODO: Temporary fix for multi-doc ordering until the server-side ordering is fixed
+        (_a = envelope.documents) === null || _a === void 0 ? void 0 : _a.sort((a, b) => (a.order !== b.order ? b.order - a.order : b.created_at.localeCompare(a.created_at)));
         const { auth_step } = recipient;
         this.recipient = recipient;
         this.envelope = envelope;
-        this.disclosures = ((_b = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.organization) === null || _b === void 0 ? void 0 : _b.disclaimer) || DEFAULT_DISCLOSURES;
+        this.disclosures = ((_c = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.organization) === null || _c === void 0 ? void 0 : _c.disclaimer) || DEFAULT_DISCLOSURES;
         this.authStep = auth_step;
         this.delegated = !!recipient.delegated_to;
         this.agreed = recipient.agreed;
-        this.signatureId = ((_d = (_c = response.signatures) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.id) || null;
-        this.initialId = ((_f = (_e = response.initials) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.id) || null;
+        this.signatureId = ((_e = (_d = response.signatures) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) || null;
+        this.initialId = ((_g = (_f = response.initials) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.id) || null;
         this.submitted = recipient.status === 'submitted';
         this.loading = false;
         this.isDone = this.submitted;
@@ -175,7 +175,7 @@ export class VerdocsSign {
             this.nextButtonLabel = 'Next';
         }
         this.checkRecipientFields();
-        (_g = this.envelopeLoaded) === null || _g === void 0 ? void 0 : _g.emit({ endpoint: this.endpoint, envelope: this.envelope });
+        (_h = this.envelopeLoaded) === null || _h === void 0 ? void 0 : _h.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     handleClickAgree() {
         this.submitting = true;
@@ -384,14 +384,14 @@ export class VerdocsSign {
         sortFields(recipientFields);
         return recipientFields;
     }
-    async handleNext() {
+    handleNext() {
         var _a;
         if (this.nextSubmits) {
             try {
                 // Patches the date picker to be forcibly removed if still showing during submission
                 (_a = document.getElementById('air-datepicker-global-container')) === null || _a === void 0 ? void 0 : _a.remove();
                 this.submitting = true;
-                const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
+                const result = envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
                 console.log('[SIGN] Submitted successfully', result);
                 // TODO: The "proper" way is generating an error from Stencil
                 //  NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which
@@ -419,29 +419,7 @@ export class VerdocsSign {
             }
             return;
         }
-        // Find and focus the next incomplete field (that is fillable)
-        const emptyFields = this.getSortedFillableFields().filter(field => field.required && !isFieldFilled(field, this.getRecipientFields()));
-        sortFields(emptyFields);
-        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
-        let nextFocusedIndex = focusedIndex + 1;
-        if (nextFocusedIndex >= emptyFields.length) {
-            nextFocusedIndex = 0;
-        }
-        let nextRequiredField = emptyFields[nextFocusedIndex];
-        // console.log('Next field', nextRequiredField, emptyFields);
-        // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
-        let skips = 0;
-        if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
-            skips++;
-            nextFocusedIndex++;
-            if (nextFocusedIndex >= emptyFields.length) {
-                nextFocusedIndex = 0;
-            }
-            nextRequiredField = emptyFields[nextFocusedIndex];
-        }
-        if (skips >= emptyFields.length) {
-            nextRequiredField = null;
-        }
+        const nextRequiredField = this.getNextRequiredField();
         if (nextRequiredField) {
             const id = getFieldId(nextRequiredField);
             const el = document.getElementById(id);
@@ -470,14 +448,39 @@ export class VerdocsSign {
         this.updateAllFlags();
     }
     getNextRequiredField() {
+        // Find and focus the next incomplete field (that is fillable)
         const emptyFields = this.getSortedFillableFields().filter(field => field.required && !isFieldFilled(field, this.getRecipientFields()));
         sortFields(emptyFields);
-        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
+        // If everything required is filled, try optional fields?
+        // The previous logic only looked for required fields for "Next".
+        // If we want "Fill or Skip", we should probably look for ANY unfilled field if we want to guide them to optionals too.
+        // BUT the requirement said: "just want to show a single flag for whatever the next field is the recipient needs to fill out."
+        // "Needs to fill out" strongly implies required.
+        // However, goal #4 says: "If it is optional, it should say 'Fill or Skip'".
+        // This implies we DO want to catch optional fields too.
+        if (emptyFields.length === 0) {
+            const allUnfilled = this.getSortedFillableFields().filter(field => !isFieldFilled(field, this.getRecipientFields()));
+            sortFields(allUnfilled);
+            if (allUnfilled.length > 0) {
+                // If we are here, there are no required fields left, but there are optional ones.
+                // We need to decide if "Next" should jump to them.
+                // Assuming yes based on "Fill or Skip".
+                // Let's use the same logic but with the optional list.
+                return this.getNextFieldFromList(allUnfilled);
+            }
+            return null;
+        }
+        return this.getNextFieldFromList(emptyFields);
+    }
+    getNextFieldFromList(fields) {
+        const focusedIndex = fields.findIndex(field => field.name === this.focusedField);
         let nextFocusedIndex = focusedIndex + 1;
-        if (nextFocusedIndex >= emptyFields.length) {
+        if (nextFocusedIndex >= fields.length) {
             nextFocusedIndex = 0;
         }
-        return { index: nextFocusedIndex, field: emptyFields[nextFocusedIndex] };
+        let nextRequiredField = fields[nextFocusedIndex];
+        // Note: isFieldFilled check above should handle 'initialed'/'signed'.
+        return nextRequiredField;
     }
     handlePrev() {
         var _a;
@@ -493,12 +496,11 @@ export class VerdocsSign {
         }
     }
     updateAllFlags() {
-        Object.keys(this.renderedPages).forEach(pageNumber => {
-            this.updateFlagsForPage(Number(pageNumber));
+        Object.values(this.renderedPages).forEach(pageInfo => {
+            this.updateFlagsForPage(pageInfo);
         });
     }
-    updateFlagsForPage(pageNumber) {
-        const pageInfo = this.renderedPages[pageNumber];
+    updateFlagsForPage(pageInfo) {
         if (!pageInfo)
             return;
         const controlsDiv = document.getElementById(pageInfo.containerId + '-controls');
@@ -507,85 +509,125 @@ export class VerdocsSign {
         // Remove existing flags
         const existingFlags = controlsDiv.querySelectorAll('.verdocs-flag-instance');
         existingFlags.forEach(el => el.remove());
+        const nextField = this.getNextRequiredField();
+        if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
+            const variant = 'fill';
+            let label = 'FILL';
+            let showSkip = false;
+            if (!nextField.required) {
+                label = 'FILL or SKIP';
+                showSkip = true; // Use the X to skip? Or just text? "Fill or Skip" implies maybe just text.
+                // But the previous implementation set `showSkip = true` if not required.
+            }
+            renderDocumentFlag(pageInfo, nextField.y, nextField.height || defaultHeight(nextField.type), {
+                variant,
+                label,
+                showSkip,
+                onSkip: () => {
+                    this.handleNext();
+                },
+                onClick: () => {
+                    var _a;
+                    const id = getFieldId(nextField);
+                    const el = document.getElementById(id);
+                    el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
+                },
+            });
+        }
+        // LEGACY FLAG LOGIC - Commented out for now
+        /*
         // Get fields for this page
         const myFields = this.getRecipientFields().filter(f => f.document_id === pageInfo.documentId && f.page === pageNumber);
         // Sort priority:
         // 1. Vertical: Top to Bottom (Descending Y)
         // 2. Horizontal: Left to Right (Ascending X) - for stability
         myFields.sort((a, b) => {
-            if (Math.abs(b.y - a.y) > 1) {
-                return b.y - a.y;
-            }
-            return a.x - b.x;
+          if (Math.abs(b.y - a.y) > 1) {
+            return b.y - a.y;
+          }
+          return a.x - b.x;
         });
+    
         // console.log('[SIGN] Sorted fields for page', pageNumber, myFields.map(f => `${f.name}:${f.y}`));
-        const flagGroups = [];
+    
+        const flagGroups: IEnvelopeField[][] = [];
         const FLAG_HEIGHT = 24;
+    
         myFields.forEach(field => {
-            if (flagGroups.length === 0) {
-                flagGroups.push([field]);
-                return;
-            }
-            const lastGroup = flagGroups[flagGroups.length - 1];
-            const lastField = lastGroup[lastGroup.length - 1];
-            // Compute rendered centers (pixels)
-            // Note: We need rescale logic here. Since we don't have the import, we'll replicate the simple math: val * scale
-            // assuming standard coordinate scaling.
-            const getCenterY = (f) => f.y * pageInfo.yScale + ((f.height || defaultHeight(f.type)) * pageInfo.yScale) / 2;
-            const lastCenter = getCenterY(lastField);
-            const currCenter = getCenterY(field);
-            const dist = Math.abs(lastCenter - currCenter);
-            // console.log(`[SIGN] Check overlap ${lastField.name} vs ${field.name}: dist=${dist} vs ${FLAG_HEIGHT}`, {lastCenter, currCenter});
-            // If centers are closer than Flag Height, they overlap visually.
-            if (dist < FLAG_HEIGHT) {
-                lastGroup.push(field);
-            }
-            else {
-                flagGroups.push([field]);
-            }
+          if (flagGroups.length === 0) {
+            flagGroups.push([field]);
+            return;
+          }
+    
+          const lastGroup = flagGroups[flagGroups.length - 1];
+          const lastField = lastGroup[lastGroup.length - 1];
+    
+          // Compute rendered centers (pixels)
+          // Note: We need rescale logic here. Since we don't have the import, we'll replicate the simple math: val * scale
+          // assuming standard coordinate scaling.
+          const getCenterY = (f: IEnvelopeField) => f.y * pageInfo.yScale + ((f.height || defaultHeight(f.type)) * pageInfo.yScale) / 2;
+    
+          const lastCenter = getCenterY(lastField);
+          const currCenter = getCenterY(field);
+          const dist = Math.abs(lastCenter - currCenter);
+    
+          // console.log(`[SIGN] Check overlap ${lastField.name} vs ${field.name}: dist=${dist} vs ${FLAG_HEIGHT}`, {lastCenter, currCenter});
+    
+          // If centers are closer than Flag Height, they overlap visually.
+          if (dist < FLAG_HEIGHT) {
+            lastGroup.push(field);
+          } else {
+            flagGroups.push([field]);
+          }
         });
+    
         // console.log('[SIGN] Flag groups', flagGroups.map(g => g.map(f => f.name).join(',')));
+    
         flagGroups.forEach(group => {
-            // Priority: First Unfilled Required > First Unfilled Optional > First Next
-            let winner = group.find(f => f.required && !isFieldFilled(f, this.getRecipientFields()));
-            if (!winner) {
-                winner = group.find(f => !f.required && !isFieldFilled(f, this.getRecipientFields()));
-            }
-            if (!winner) {
-                // Fallback to first (Top-most) if all filled
-                winner = group[0];
-            }
-            if (winner) {
-                const isFilled = isFieldFilled(winner, this.getRecipientFields());
-                let variant = 'fill';
-                let label = 'FILL';
-                let showSkip = false;
-                if (isFilled) {
-                    variant = 'next';
-                    label = 'NEXT';
-                }
-                else {
-                    if (!winner.required) {
-                        showSkip = true;
-                    }
-                }
-                renderDocumentFlag(pageInfo, winner.y, winner.height || defaultHeight(winner.type), {
-                    variant,
-                    label,
-                    showSkip,
-                    onSkip: () => {
-                        this.handleNext();
-                    },
-                    onClick: () => {
-                        var _a;
-                        const id = getFieldId(winner);
-                        const el = document.getElementById(id);
-                        el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
-                    },
-                });
+          // Priority: First Unfilled Required > First Unfilled Optional > First Next
+          let winner = group.find(f => f.required && !isFieldFilled(f, this.getRecipientFields()));
+          if (!winner) {
+            winner = group.find(f => !f.required && !isFieldFilled(f, this.getRecipientFields()));
+          }
+          if (!winner) {
+            // Fallback to first (Top-most) if all filled
+            winner = group[0];
+          }
+    
+          if (winner) {
+            const isFilled = isFieldFilled(winner, this.getRecipientFields());
+    
+            let variant: 'fill' | 'next' = 'fill';
+            let label = 'FILL';
+            let showSkip = false;
+    
+            if (isFilled) {
+              variant = 'next';
+              label = 'NEXT';
+            } else {
+              if (!winner.required) {
+                showSkip = true;
+              }
             }
+    
+            renderDocumentFlag(pageInfo, winner.y, winner.height || defaultHeight(winner.type), {
+              variant,
+              label,
+              showSkip,
+              onSkip: () => {
+                this.handleNext();
+              },
+              onClick: () => {
+                const id = getFieldId(winner);
+                const el = document.getElementById(id) as any;
+                el?.scrollIntoView({behavior: 'smooth', block: 'center'});
+                el?.focusField?.();
+              },
+            });
+          }
         });
+        */
     }
     attachFieldAttributes(pageInfo, field, el) {
         // We can get called multiple times as rendering completes and it's hard to avoid that
@@ -671,7 +713,7 @@ export class VerdocsSign {
     }
     handlePageRendered(e) {
         const pageInfo = e.detail;
-        this.renderedPages[pageInfo.pageNumber] = pageInfo;
+        this.renderedPages[`${pageInfo.documentId}:${pageInfo.pageNumber}`] = pageInfo;
         console.log('Page rendered', pageInfo);
         // NOTE: We don't filter on pageNumber here because we need the position in the
         // entire list to set the tabIndex.
@@ -712,7 +754,7 @@ export class VerdocsSign {
             });
         });
         this.checkRecipientFields();
-        this.updateFlagsForPage(pageInfo.pageNumber);
+        this.updateFlagsForPage(pageInfo);
     }
     handleAuthenticateSigner(params) {
         console.log('[SIGN] Submitting authentication step', params);
@@ -773,7 +815,7 @@ export class VerdocsSign {
                 } })));
         }
         if (this.declining) {
-            return (h("verdocs-ok-dialog", { heading: "Decline Signing Request", message: `If you decline to sign this request, you will not be able to sign again in the future. The envelope sender will be notified.`, buttonLabel: "OK", showCancel: true, onExit: () => (this.declining = false), onNext: () => {
+            return (h(Host, { class: "agreed" }, h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("verdocs-ok-dialog", { heading: "Decline Signing Request", message: `If you decline to sign this request, you will not be able to sign again in the future. The envelope sender will be notified.`, buttonLabel: "OK", showCancel: true, onExit: () => (this.declining = false), onNext: () => {
                     envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId)
                         .then(r => {
                         console.log('[SIGN] Decline result', r);
@@ -783,7 +825,7 @@ export class VerdocsSign {
                         console.warn('[SIGN] Error declining signing session', e);
                         VerdocsToast('Unable to decline, please try again later', { style: 'error' });
                     });
-                } }));
+                } })));
         }
         if (!this.agreed) {
             return (h(Host, { class: "agreed" }, h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("verdocs-disclosure-dialog", { disclosures: this.disclosures, delegator: this.recipient.delegator, onDelegate: () => (this.delegating = true), onDecline: () => (this.declining = true), onAccept: () => this.handleClickAgree() })));
@@ -848,9 +890,9 @@ export class VerdocsSign {
                     this.adoptingSignature = true;
                     // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
-        })(), h("div", { class: "document", style: { width: '64%', marginLeft: '260px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+        })(), h("div", { class: "document signed-document-container" }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
-            return (h(Fragment, null, pageNumbers.map(pageNumber => {
+            return (h(Fragment, null, this.envelope.documents.length > 1 && (h("div", { class: "document-separator" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H8V4H20V16ZM4 6H2V20C2 21.1 2.9 22 4 22H18V20H4V6ZM16 12V9C16 8.45 15.55 8 15 8H10V14H15C15.55 14 16 13.55 16 13V12ZM14.5 9.5L14.5001 12.5H11.5V9.5H14.5Z", fill: "currentColor" })), h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
                 const pageSize = ((_a = envelopeDocument.page_sizes) === null || _a === void 0 ? void 0 : _a[pageNumber]) || { width: 612, height: 792 };
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and