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

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

@@ -78,11 +78,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 +93,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,7 +135,7 @@ export class VerdocsSign {
         }
     }
     processAuthResponse(response) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         const { envelope, recipient } = response;
         const { auth_step } = recipient;
         this.recipient = recipient;
@@ -143,6 +144,8 @@ export class VerdocsSign {
         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.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 });
+        (_g = this.envelopeLoaded) === null || _g === void 0 ? void 0 : _g.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 => {
@@ -525,7 +569,6 @@ export class VerdocsSign {
                         showSkip = true;
                     }
                 }
-                console.log('[SIGN] Render flag', winner.name, winner.y, winner.height);
                 renderDocumentFlag(pageInfo, winner.y, winner.height || defaultHeight(winner.type), {
                     variant,
                     label,
@@ -619,6 +662,12 @@ 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;
@@ -795,9 +844,9 @@ 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 => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
@@ -822,11 +871,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 +1027,13 @@ export class VerdocsSign {
             "submitted": {},
             "isDone": {},
             "showDone": {},
-            "showAdoptSignature": {},
+            "adoptingSignature": {},
             "showLoadError": {},
             "finishLater": {},
             "showFinishLater": {},
             "agreed": {},
+            "signatureId": {},
+            "initialId": {},
             "documentsSingularPlural": {},
             "authStep": {},
             "authMethodStates": {},
@@ -981,7 +1042,6 @@ export class VerdocsSign {
             "declining": {},
             "delegating": {},
             "delegated": {},
-            "startedSigning": {},
             "kbaChoices": {},
             "loading": {},
             "envelope": {}