@hubsync/esign-web-sdk 6.9.12 → 6.9.13

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

@@ -457,11 +457,9 @@ export class VerdocsSign {
     }
     focusNextFieldAfter(field) {
         setTimeout(() => {
-            const fields = this.getSortedFillableFields();
-            const currentIndex = fields.findIndex(f => f.name === field.name);
-            if (currentIndex >= 0 && currentIndex < fields.length - 1) {
-                this.focusFieldElement(fields[currentIndex + 1]);
-            }
+            const next = this.getNextUnfilledField(field);
+            if (next)
+                this.focusFieldElement(next);
         }, 100);
     }
     focusFieldElement(field) {
@@ -476,11 +474,6 @@ export class VerdocsSign {
     handleStartSigning() {
         this.markEnvelopeStarted();
         this.signingProgressMode = 'signing';
-        const fields = this.getSortedFillableFields();
-        const startField = fields.find(field => !this.isFieldActuallyFilled(field)) || fields[0];
-        if (startField) {
-            this.focusFieldElement(startField);
-        }
         this.adoptingSignature = true;
     }
     async handleFieldChange(field, e) {
@@ -641,12 +634,10 @@ export class VerdocsSign {
             }
             return;
         }
-        // Find all unfilled fields and move to the next one in sequence
-        const allUnfilled = this.getSortedFillableFields().filter(f => !this.isFieldActuallyFilled(f));
-        const nextUnfilled = this.getNextFieldFromList(allUnfilled);
-        if (nextUnfilled) {
-            this.focusFieldElement(nextUnfilled);
-        }
+        const currentField = this.getSortedFillableFields().find(f => f.name === this.focusedField);
+        const next = this.getNextUnfilledField(currentField);
+        if (next)
+            this.focusFieldElement(next);
     }
     handleNextOptional() {
         const unfilledOptional = this.getSortedFillableFields().filter(f => !f.required && !this.isFieldActuallyFilled(f));
@@ -670,8 +661,10 @@ export class VerdocsSign {
     }
     // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
     checkRecipientFields() {
-        const invalidFields = this.getRecipientFields().filter(field => !isFieldValid(field, this.getRecipientFields()));
-        if (invalidFields.length < 1) {
+        const allFields = this.getSortedFillableFields();
+        const requiredIncomplete = allFields.some(f => f.required && !this.isFieldActuallyFilled(f));
+        const invalidFilled = allFields.some(f => this.isFieldActuallyFilled(f) && !isFieldValid(f, this.getRecipientFields()));
+        if (!requiredIncomplete && !invalidFilled) {
             this.nextButtonLabel = 'Finish';
             if (!this.nextSubmits) {
                 this.nextSubmits = true;
@@ -715,20 +708,15 @@ export class VerdocsSign {
             (field.type !== 'radio' || field.value === 'true') &&
             (field.type !== 'checkbox' || field.value === 'true'));
     }
-    getNextRequiredField() {
-        // Find and focus the next incomplete field (that is fillable)
-        const emptyFields = this.getSortedFillableFields().filter(field => field.required && !this.isFieldActuallyFilled(field));
-        sortFields(emptyFields);
-        if (emptyFields.length === 0) {
-            const allUnfilled = this.getSortedFillableFields().filter(field => !this.isFieldActuallyFilled(field));
-            sortFields(allUnfilled);
-            if (allUnfilled.length > 0) {
-                // If we are here, there are no required fields left, but there are optional ones.
-                return this.getNextFieldFromList(allUnfilled);
-            }
-            return null;
-        }
-        return this.getNextFieldFromList(emptyFields);
+    getNextUnfilledField(after) {
+        const allFields = this.getSortedFillableFields();
+        const startIndex = after ? allFields.findIndex(f => f.name === after.name) + 1 : 0;
+        // Look forward from current position first
+        const nextAfter = allFields.slice(startIndex).find(f => !this.isFieldActuallyFilled(f));
+        if (nextAfter)
+            return nextAfter;
+        // Wrap to beginning if nothing unfilled ahead
+        return allFields.slice(0, startIndex).find(f => !this.isFieldActuallyFilled(f)) || null;
     }
     getNextFieldFromList(fields) {
         const focusedIndex = fields.findIndex(field => field.name === this.focusedField);
@@ -761,14 +749,16 @@ export class VerdocsSign {
         // Remove existing flags
         const existingFlags = controlsDiv.querySelectorAll('.verdocs-flag-instance');
         existingFlags.forEach(el => el.remove());
-        let nextField = this.getNextRequiredField();
         const focusedFieldObj = this.getRecipientFields().find(f => f.name === this.focusedField);
-        // If the currently focused field is unfilled, we should point the flag to IT, not the next one.
-        // getNextRequiredField() is designed for the "Next" button (skipping current), but the visual flag
-        // should guide the user to the current task if it's incomplete.
+        // If the currently focused field is unfilled, point the flag to it.
+        // Otherwise find the next unfilled field forward from the current position.
+        let nextField;
         if (focusedFieldObj && !this.isFieldActuallyFilled(focusedFieldObj)) {
             nextField = focusedFieldObj;
         }
+        else {
+            nextField = this.getNextUnfilledField(focusedFieldObj);
+        }
         if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
             const variant = 'fill';
             let label = 'FILL';
@@ -1105,7 +1095,7 @@ export class VerdocsSign {
                     return (h("span", { class: "remaining-count" }, remaining, " required field", remaining === 1 ? '' : 's', " left"));
                 }
                 return (h("span", { class: "remaining-count" }, h("span", { class: "check-icon", innerHTML: CheckCircleIcon }), "All required fields complete", optionalLeft > 0 && h("span", { class: "separator" }, "|"), optionalLeft > 0 && (h("span", { class: "review-optional", onClick: () => this.handleNextOptional() }, "Review ", optionalLeft, " optional"))));
-            })(), !this.finishLater && (h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() })), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls", style: { display: 'none' } }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("verdocs-signing-progress", { mode: this.signingProgressMode, focusedField: this.focusedField, fields: this.getSortedFillableFields(), recipientFields: this.getRecipientFields(), onStarted: () => {
+            })(), !this.finishLater && (h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() })), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls", style: { display: 'none' } }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("verdocs-signing-progress", { mode: this.signingProgressMode, focusedField: this.focusedField, fields: this.getSortedFillableFields(), recipientFields: this.getRecipientFields(), onStarted: () => {
                 this.handleStartSigning();
             }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
@@ -1146,7 +1136,10 @@ export class VerdocsSign {
                 this.showSpinner = false;
                 this.adoptingSignature = false;
                 this.markEnvelopeStarted();
-                // Apply the new signature/initials to the field that triggered the dialog.
+                // Apply the new signature/initials to the field that triggered the dialog (e.g. user
+                // clicked an existing sig/initial field). Track which field was applied so we can
+                // advance forward from it rather than jumping back to the start of the document.
+                let appliedToField = null;
                 if (this.focusedField) {
                     const fieldObj = this.getRecipientFields().find(f => f.name === this.focusedField);
                     if (fieldObj) {
@@ -1154,10 +1147,16 @@ export class VerdocsSign {
                         if (id) {
                             const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, fieldObj.name, id, false);
                             this.updateRecipientFieldValue(fieldObj.name, updateResult);
+                            appliedToField = fieldObj;
                         }
                     }
                     this.focusedField = '';
                 }
+                // Navigate to the next unfilled field: forward from where we applied (or from the
+                // beginning when adopting at session start with no pre-focused field).
+                const nextField = this.getNextUnfilledField(appliedToField !== null && appliedToField !== void 0 ? appliedToField : undefined);
+                if (nextField)
+                    this.focusFieldElement(nextField);
                 // Update any existing field elements in the DOM with the new IDs. This prevents them from
                 // needing to show the adoption dialog again if they are clicked.
                 const sigFields = this.el.querySelectorAll('verdocs-field-signature');