@verdocs/web-sdk 6.9.12 → 6.10.0

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

@@ -115,6 +115,14 @@ export class VerdocsSign {
         this.polling = true;
         this.renderedPages = {};
         this.pollingInterval = null;
+        this.handleDoneDialogDismiss = async () => {
+            this.showDone = false;
+            if (!this.isDone) {
+                this.prepareForViewTransition();
+                await new Promise(resolve => requestAnimationFrame(() => resolve()));
+                this.isDone = true;
+            }
+        };
     }
     async componentDidLoad() {
         var _a, _b, _c, _d, _e, _f;
@@ -133,11 +141,7 @@ export class VerdocsSign {
             return;
         }
         try {
-            console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
-            // NOTE: We don't listen to the store here because we are often an independent
-            // 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);
+            await this.initSigningSession();
         }
         catch (e) {
             console.log('[SIGN] Error with signing session', e);
@@ -145,6 +149,56 @@ export class VerdocsSign {
             this.showLoadError = true;
         }
     }
+    async initSigningSession() {
+        console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
+        // NOTE: We don't listen to the store here because we are often an independent
+        // 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);
+    }
+    async retrySigningSession() {
+        var _a, _b, _c;
+        this.showLoadError = false;
+        this.loading = true;
+        try {
+            await this.initSigningSession();
+        }
+        catch (e) {
+            console.log('[SIGN] Error with signing session', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            this.showLoadError = true;
+            this.loading = false;
+        }
+    }
+    prepareForViewTransition() {
+        var _a, _b, _c;
+        this.stopPolling();
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = null;
+        (_b = document.getElementById('air-datepicker-global-container')) === null || _b === void 0 ? void 0 : _b.remove();
+        (_c = document.getElementById('verdocs-sign-header')) === null || _c === void 0 ? void 0 : _c.remove();
+    }
+    async handleSubmitSuccess() {
+        var _a, _b;
+        this.submitting = false;
+        this.submitted = true;
+        this.nextSubmits = false;
+        this.signingProgressMode = 'completed';
+        try {
+            const envelope = await getEnvelope(this.endpoint, this.envelopeId);
+            this.envelope = envelope;
+            Store.updateEnvelope(this.envelopeId, envelope);
+            const updatedRecipient = (_a = envelope.recipients) === null || _a === void 0 ? void 0 : _a.find(r => { var _a; return r.role_name === ((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.role_name); });
+            if (updatedRecipient) {
+                this.recipient = updatedRecipient;
+            }
+            (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope, event: 'submitted' });
+        }
+        catch (e) {
+            console.warn('[SIGN] Error refreshing envelope after submit', e);
+        }
+        this.showDone = true;
+    }
     componentDidRender() {
         const headerTarget = this.headerTargetId ? document.getElementById(this.headerTargetId) : null;
         const headerEl = document.getElementById('verdocs-sign-header');
@@ -300,7 +354,8 @@ export class VerdocsSign {
     handleClickAgree() {
         this.submitting = true;
         console.log('[SIGN] Accepting disclosures', this.disclosures);
-        envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, this.disclosures)
+        const localeData = Intl.DateTimeFormat().resolvedOptions();
+        envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, this.disclosures, { locale: localeData.locale, timezone: localeData.timeZone })
             .then(() => {
             var _a;
             this.nextButtonLabel = 'Next';
@@ -597,16 +652,17 @@ export class VerdocsSign {
     async handleNext() {
         var _a;
         if (this.nextSubmits) {
+            if (this.submitted) {
+                return;
+            }
             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 localeData = Intl.DateTimeFormat().resolvedOptions();
+                const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId, { locale: localeData.locale, timezone: localeData.timeZone });
                 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
-                //  the new node is to be inserted is not a child of this node.
-                window.location.reload();
+                await this.handleSubmitSuccess();
             }
             catch (e) {
                 console.log('[SIGN] Error submitting', e);
@@ -652,6 +708,9 @@ export class VerdocsSign {
     }
     // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
     checkRecipientFields() {
+        if (this.submitted || this.isDone) {
+            return;
+        }
         const invalidFields = this.getRecipientFields().filter(field => !isFieldValid(field, this.getRecipientFields()));
         if (invalidFields.length < 1) {
             this.nextButtonLabel = 'Finish';
@@ -1016,7 +1075,7 @@ export class VerdocsSign {
         var _a;
         if (this.showLoadError) {
             return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to Start Signing", message: `Sorry, your invite code is invalid or has expired. Please check your email for an updated invitation, or contact the sender.`, buttonLabel: "OK", onNext: () => {
-                    window.location.reload();
+                    this.retrySigningSession();
                 } })));
         }
         if (!this.envelope) {
@@ -1032,8 +1091,7 @@ export class VerdocsSign {
             return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), 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: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    this.showDone = false;
-                    this.isDone = true;
+                    this.handleDoneDialogDismiss();
                 } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
         }
         if (this.delegating) {
@@ -1056,7 +1114,9 @@ export class VerdocsSign {
                     envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId)
                         .then(r => {
                         console.log('[SIGN] Decline result', r);
-                        window.location.reload();
+                        this.declining = false;
+                        this.fatalErrorHeader = 'Declined';
+                        this.fatalErrorMessage = 'You have declined to sign this request. The sender has been notified.';
                     })
                         .catch(e => {
                         console.warn('[SIGN] Error declining signing session', e);
@@ -1124,7 +1184,7 @@ export class VerdocsSign {
         const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
         const pageOptions = integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
         let globalPageCounter = 0;
-        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater &&
+        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && !this.submitted &&
             (() => {
                 const remaining = this.getRequiredTotalCount() - this.getRequiredFilledCount();
                 const optionalLeft = this.getOptionalUnfilledCount();
@@ -1132,7 +1192,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("div", { class: "review-optional" }, h("span", { class: "separator" }, "| "), h("span", { 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', 'magnify': true }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2', 'magnify': true }, 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" }, 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("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
+            })(), !this.finishLater && !this.submitted && (h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting || this.submitted, onClick: () => this.handleNext() })), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal', 'magnify': true }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2', 'magnify': true }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater && !this.submitted ? 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" }, 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" }, !this.submitted && (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("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, this.envelope.documents.length > 1 && (h("div", { class: "document-separator" }, h("div", { innerHTML: DocumentPageIcon }), h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
@@ -1154,8 +1214,7 @@ export class VerdocsSign {
                 this.isDone = true;
                 this.showFinishLater = false;
             } })), 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.handleDoneDialogDismiss();
             } })), this.adoptingSignature && (h("verdocs-adopt-signature-dialog", { name: formatFullName(this.recipient), nameLocked: !!((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.name_locked), onNext: async (e) => {
                 console.log('[SIGN] Adopting signature/initials block', e.detail);
                 this.showSpinner = true;
@@ -1193,7 +1252,7 @@ export class VerdocsSign {
             }, onExit: () => (this.adoptingSignature = false) })), (this.submitting || this.showSpinner) && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))), this.showDownloadDialog && (h("verdocs-download-dialog", { signed: this.envelope.signed, polling: this.polling, documents: this.envelope.documents, onExit: () => {
                 this.showDownloadDialog = false;
                 this.stopPolling();
-            }, onDownload: this.handleOnDownload })), !this.loading && !this.isDone && (h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
+            }, onDownload: e => this.handleOnDownload(e) })), !this.loading && !this.isDone && !this.submitted && (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 => {