@verdocs/web-sdk 6.5.0-beta.10 → 6.5.0-beta.11

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

@@ -9,6 +9,29 @@ import { getFieldId, renderDocumentField, renderDocumentFlag, saveAttachment, up
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
 import { Store } from "../../../utils/Datastore";
+/**
+ * Helper to generate a human-readable label for a field.
+ */
+const getFieldLabel = (field) => {
+    if (!field)
+        return '';
+    const typeMap = {
+        signature: 'Signature',
+        initial: 'Initials',
+        date: 'Date',
+        textbox: 'Text Field',
+        checkbox: 'Checkbox',
+        radio: 'Radio Button',
+        dropdown: 'Dropdown',
+        attachment: 'Attachment',
+        payment: 'Payment',
+    };
+    const typeName = typeMap[field.type] || 'Field';
+    if (field.required) {
+        return `Required ${typeName}*`;
+    }
+    return `Optional ${typeName}`;
+};
 /**
  * Display an envelope signing experience. This will display the envelope's attached
  * documents with signing fields overlaid on each page.
@@ -116,6 +139,12 @@ export class VerdocsSign {
             // session and might have a different "view" of the envelope.
             const response = await startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
             this.processAuthResponse(response);
+            const fillable = this.getSortedFillableFields();
+            if (fillable.length > 0) {
+                setTimeout(() => {
+                    this.focusedField = fillable[0].name;
+                }, 500);
+            }
         }
         catch (e) {
             console.log('[SIGN] Error with signing session', e);
@@ -451,6 +480,7 @@ export class VerdocsSign {
         // Find and focus the next incomplete field (that is fillable)
         const emptyFields = this.getSortedFillableFields().filter(field => field.required && !isFieldFilled(field, this.getRecipientFields()));
         sortFields(emptyFields);
+        console.log('[SIGN] Pending fields', emptyFields.map(f => `${f.name} (${f.type}) req=${f.required}`));
         // 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.
@@ -508,7 +538,14 @@ export class VerdocsSign {
         // Remove existing flags
         const existingFlags = controlsDiv.querySelectorAll('.verdocs-flag-instance');
         existingFlags.forEach(el => el.remove());
-        const nextField = this.getNextRequiredField();
+        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 (focusedFieldObj && !isFieldFilled(focusedFieldObj, this.getRecipientFields())) {
+            nextField = focusedFieldObj;
+        }
         if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
             const variant = 'fill';
             let label = 'FILL';
@@ -695,6 +732,10 @@ export class VerdocsSign {
         el.addEventListener('fieldChange', e => {
             this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
         });
+        el.addEventListener('adopt', () => {
+            this.focusedField = field.name;
+            this.adoptingSignature = true;
+        });
         el.setAttribute('templateid', this.envelope.template_id);
         el.setAttribute('fieldname', field.name);
         el.setAttribute('page', pageInfo.pageNumber);
@@ -763,15 +804,16 @@ export class VerdocsSign {
             this.processAuthResponse(r);
         })
             .catch(e => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             console.log('[SIGN] Error submitting authentication step', e);
-            if ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.includes('failed')) {
+            console.log((_a = e.response) === null || _a === void 0 ? void 0 : _a.data);
+            if ((_d = (_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.includes('failed')) {
                 this.fatalErrorHeader = 'Recipient Verification Failed';
                 this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
                 this.isDone = true;
             }
             else {
-                VerdocsToast(((_e = (_d = e.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error) || 'Unable to verify your identity. Please try again.', { style: 'error' });
+                VerdocsToast(((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) || 'Unable to verify your identity. Please try again.', { style: 'error' });
             }
         });
     }
@@ -885,7 +927,16 @@ export class VerdocsSign {
             : console.log('[SIGN] All field valid');
         return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), (() => {
             const focusedFieldObj = this.getSortedFillableFields().find(f => f.name === this.focusedField);
-            return (h("verdocs-signing-progress", { mode: this.nextSubmits ? 'completed' : false && this.signatureId && this.initialId ? 'signing' : 'start', current: Math.max(1, this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1), total: this.getSortedFillableFields().length, fieldLabel: (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.label) || (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.name) || '', fieldCompleted: focusedFieldObj ? !!isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
+            const currentIndex = this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1;
+            const totalFields = this.getSortedFillableFields().length;
+            let mode = 'start';
+            if (this.nextSubmits) {
+                mode = 'completed';
+            }
+            else if (this.signatureId || this.initialId) {
+                mode = 'signing';
+            }
+            return (h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
                     this.adoptingSignature = true;
                     // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
@@ -926,6 +977,22 @@ export class VerdocsSign {
                 this.initialId = initResult.id;
                 this.showSpinner = false;
                 this.adoptingSignature = false;
+                // If we have a focused field, we should auto-apply the new signature/initials to it
+                if (this.focusedField) {
+                    const field = this.getRecipientFields().find(f => f.name === this.focusedField);
+                    if (field && !isFieldFilled(field, this.getRecipientFields())) {
+                        console.log('[SIGN] Auto-applying adopted signature to focused field', field.name);
+                        if (field.type === 'signature') {
+                            const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
+                            this.updateRecipientFieldValue(field.name, updateResult);
+                        }
+                        else if (field.type === 'initial') {
+                            const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.initialId, false);
+                            this.updateRecipientFieldValue(field.name, updateResult);
+                        }
+                        this.checkRecipientFields();
+                    }
+                }
             }, onExit: () => (this.adoptingSignature = false) })), (this.submitting || this.showSpinner) && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))), !this.loading && !this.isDone && (h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
                 askQuestion(this.endpoint, this.envelopeId, this.roleId, { question: e.detail.question })
                     .then(() => VerdocsToast('Your question has been sent.', { style: 'success' }))