@verdocs/web-sdk 6.5.0-beta.2 → 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';
@@ -78,11 +76,13 @@ export class VerdocsSign {
         this.submitted = false;
         this.isDone = false;
         this.showDone = false;
-        this.showAdoptSignature = false;
+        this.adoptingSignature = false;
         this.showLoadError = false;
         this.finishLater = false;
         this.showFinishLater = false;
         this.agreed = false;
+        this.signatureId = null;
+        this.initialId = null;
         this.documentsSingularPlural = 'document';
         this.authStep = null;
         this.authMethodStates = {};
@@ -91,7 +91,6 @@ export class VerdocsSign {
         this.declining = false;
         this.delegating = false;
         this.delegated = false;
-        this.startedSigning = false;
         this.kbaChoices = [];
         this.loading = true;
         this.envelope = null;
@@ -134,15 +133,19 @@ export class VerdocsSign {
         }
     }
     processAuthResponse(response) {
-        var _a, _b, _c;
+        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 = ((_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;
@@ -172,7 +175,7 @@ export class VerdocsSign {
             this.nextButtonLabel = 'Next';
         }
         this.checkRecipientFields();
-        (_c = this.envelopeLoaded) === null || _c === void 0 ? void 0 : _c.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;
@@ -284,15 +287,35 @@ export class VerdocsSign {
                 // This can be caused by a focus-out event if the user clicks the field
                 // after it's already filled in, then clicks something else like a textbox.
                 // We don't visually indicate the focus, but it's still there.
-                if (!e.detail) {
+                // NOTE: We now allow null to clear the field
+                if (e.detail === undefined) {
                     return;
                 }
+                if (e.detail === null) {
+                    console.log('[SIGN] Clearing initial');
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, null, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If we already have an initials block, apply it
+                if (this.initialId) {
+                    console.log('[SIGN] Reusing initial', this.initialId);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.initialId, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If it's a UUID, it's an existing initial ID we can just reuse
+                if (typeof e.detail === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(e.detail)) {
+                    console.log('[SIGN] Reusing initial', e.detail);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
+                    this.initialId = e.detail;
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
                 this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
                 return createInitials(this.endpoint, 'initial', initialsBlob) //
                     .then(async (newInitials) => {
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, newInitials.id, false);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.initialId = newInitials.id;
                     this.showSpinner = false;
                 })
                     .catch(e => {
@@ -304,16 +327,37 @@ export class VerdocsSign {
                 // This can be caused by a focus-out event if the user clicks the field
                 // after it's already filled in, then clicks something else like a textbox.
                 // We don't visually indicate the focus, but it's still there.
-                if (!e.detail) {
+                // NOTE: We now allow null to clear the field
+                if (e.detail === undefined) {
                     return;
                 }
+                if (e.detail === null) {
+                    console.log('[SIGN] Clearing signature');
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, null, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If we already have a signature block, apply it
+                if (this.signatureId) {
+                    console.log('[SIGN] Reusing signature', this.signatureId);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If it's a UUID, it's an existing signature ID we can just reuse
+                if (typeof e.detail === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(e.detail)) {
+                    console.log('[SIGN] Reusing signature', e.detail);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
+                    this.signatureId = e.detail;
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
                 this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
+                console.log('[SIGN] Creating new signature');
                 return createSignature(this.endpoint, 'signature', signatureBlob) //
                     .then(async (newSignature) => {
                     console.log('Signature update result', newSignature);
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, newSignature.id, false);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.signatureId = newSignature.id;
                     this.showSpinner = false;
                 })
                     .catch(e => {
@@ -340,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
@@ -375,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);
@@ -426,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;
@@ -449,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');
@@ -463,86 +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;
-                    }
-                }
-                console.log('[SIGN] Render flag', winner.name, winner.y, winner.height);
-                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
@@ -619,10 +704,16 @@ export class VerdocsSign {
         const fullName = formatFullName(this.recipient);
         el.setAttribute('initials', fullNameToInitials(fullName));
         el.setAttribute('name', fullName);
+        if (this.signatureId) {
+            el.setAttribute('signatureid', this.signatureId);
+        }
+        if (this.initialId) {
+            el.setAttribute('initialid', this.initialId);
+        }
     }
     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.
@@ -663,7 +754,7 @@ export class VerdocsSign {
             });
         });
         this.checkRecipientFields();
-        this.updateFlagsForPage(pageInfo.pageNumber);
+        this.updateFlagsForPage(pageInfo);
     }
     handleAuthenticateSigner(params) {
         console.log('[SIGN] Submitting authentication step', params);
@@ -724,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);
@@ -734,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() })));
@@ -795,13 +886,13 @@ 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' : this.startedSigning ? '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: () => {
-                    this.startedSigning = true;
-                    this.handleNext();
+            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: () => {
+                    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
@@ -822,11 +913,21 @@ export class VerdocsSign {
             } })), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
-            } })), this.showAdoptSignature && (h("verdocs-adopt-signature-dialog", { onNext: () => {
-                this.showAdoptSignature = false;
-            }, onExit: () => {
-                this.showAdoptSignature = 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) => {
+            } })), this.adoptingSignature && (h("verdocs-adopt-signature-dialog", { name: formatFullName(this.recipient), onNext: async (e) => {
+                console.log('[SIGN] Adopting signature/initials block', e.detail);
+                this.showSpinner = true;
+                // These arrive as base-64 encoded data URLs
+                const signatureBlob = await (await fetch(e.detail.signature)).blob();
+                const initialsBlob = await (await fetch(e.detail.initials)).blob();
+                const sigResult = await createSignature(this.endpoint, 'signature', signatureBlob);
+                console.log('[SIGN] Created signature', sigResult);
+                this.signatureId = sigResult.id;
+                const initResult = await createInitials(this.endpoint, 'initial', initialsBlob);
+                console.log('[SIGN] Created initials', initResult);
+                this.initialId = initResult.id;
+                this.showSpinner = false;
+                this.adoptingSignature = false;
+            }, 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' }))
                     .catch(e => {
@@ -968,11 +1069,13 @@ export class VerdocsSign {
             "submitted": {},
             "isDone": {},
             "showDone": {},
-            "showAdoptSignature": {},
+            "adoptingSignature": {},
             "showLoadError": {},
             "finishLater": {},
             "showFinishLater": {},
             "agreed": {},
+            "signatureId": {},
+            "initialId": {},
             "documentsSingularPlural": {},
             "authStep": {},
             "authMethodStates": {},
@@ -981,7 +1084,6 @@ export class VerdocsSign {
             "declining": {},
             "delegating": {},
             "delegated": {},
-            "startedSigning": {},
             "kbaChoices": {},
             "loading": {},
             "envelope": {}