@verdocs/web-sdk 1.9.15 → 1.9.20

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

@@ -1,14 +1,17 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
-import { updateRecipientStatus } from '@verdocs/js-sdk/Envelopes/Recipients';
+import { createInitials } from '@verdocs/js-sdk/Envelopes/Initials';
+import { createSignature } from '@verdocs/js-sdk/Envelopes/Signatures';
+import { envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit } from '@verdocs/js-sdk/Envelopes/Recipients';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
 import { Host, Fragment, h } from '@stencil/core';
+import { updateEnvelopeFieldInitials, updateEnvelopeFieldSignature } from '@verdocs/js-sdk/Envelopes/Envelopes';
 import { fullNameToInitials, getFieldId, getRoleIndex, renderDocumentField } from '../../../utils/utils';
-import EnvelopeStore from '../../../utils/envelopeStore';
 import { getEnvelopeById } from '../../../utils/Envelopes';
+import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
-import { createSignature } from '@verdocs/js-sdk/Envelopes/Signatures';
-import { updateEnvelopeFieldSignature } from '@verdocs/js-sdk/Envelopes/Envelopes';
+const PrintIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>`;
+const DownloadIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"></path></svg>`;
 /**
  * Display an envelope signing experience. This will display the envelope's attached
  * documents with signing fields overlaid on each page.
@@ -38,7 +41,11 @@ export class VerdocsSign {
     this.signerToken = null;
     this.hasSignature = false;
     this.nextButtonLabel = 'Start';
+    this.nextSubmits = false;
+    this.errorMessage = '';
     this.focusedField = '';
+    this.isDone = false;
+    this.showDone = false;
     this.finishLater = false;
     this.showFinishLater = false;
   }
@@ -46,7 +53,7 @@ export class VerdocsSign {
     this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
   }
   async componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (!this.envelopeId) {
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError('[SIGN] Missing required envelopId', 500, ''));
       return;
@@ -82,20 +89,25 @@ export class VerdocsSign {
         this.recipient = EnvelopeStore.envelope.recipients[this.recipientIndex];
         this.fields = this.recipient.fields;
       }
+      this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);
+      console.log('Done', this.isDone);
       // TODO: Fix service to allow this?
       // const sigs = await getSignatures();
       // console.log('sigs', sigs);
+      (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope });
     }
     catch (e) {
       console.log('Error with signing session', e);
-      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+      (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
     }
   }
   handleClickAgree() {
-    updateRecipientStatus(this.endpoint, this.envelopeId, this.roleId, 'update', { agreed: true })
+    envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
       .then(r => {
+      var _a;
       this.nextButtonLabel = 'Next';
       this.recipient = r;
+      (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'agreed' });
     })
       .catch(e => {
       var _a, _b, _c;
@@ -135,81 +147,70 @@ export class VerdocsSign {
       case 'claim':
         break;
       case 'decline':
+        {
+          const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
+          console.log('Decline result', declineResult);
+          this.isDone = true;
+        }
         break;
       case 'print':
+        window.print();
         break;
       case 'download':
         this.savePDF().catch(() => { });
         break;
     }
   }
-  async handleFieldChange(field, e, optionId) {
-    console.log('fieldChange', field, e);
+  saveFieldChange(fieldName, fields) {
+    Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
+      .catch(e => {
+      var _a, _b, _c, _d, _e, _f;
+      if (((_a = e.response) === null || _a === void 0 ? void 0 : _a.status) === 401 && ((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === 'jwt expired') {
+        // TODO: Do we want to improve the instructions here?
+        console.log('[SIGN] Signing session expired');
+        this.errorMessage = 'Signing session expired.';
+      }
+      else {
+        console.log('[SIGN] Server error', e);
+      }
+      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+    });
+  }
+  async handleFieldChange(field, e) {
+    console.log('fieldChange', field, e, e.target.value);
     const { value, checked } = e.target;
     switch (field.type) {
       case 'textbox':
-        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c, _d, _e, _f;
-          (_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));
-          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
-            console.log('jwt expired');
-          }
-          console.log('Error updating', e);
-        });
-        break;
-      case 'checkbox_group':
-        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options: [{ id: optionId, checked }] } })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_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));
-          console.log('Error updating', e);
-        });
-        break;
-      case 'radio_button_group':
-        const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
-        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options } })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_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));
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value });
+      case 'checkbox_group': {
+        const options = field.settings.options.map(option => ({ id: option.id, checked: e.target.checked }));
+        return this.saveFieldChange(field.name, { prepared: false, value: { options } });
+      }
+      case 'radio_button_group': {
+        const options = field.settings.options.map(option => ({ id: option.id, selected: e.target.value === option.id }));
+        return this.saveFieldChange(field.name, { prepared: false, value: { options } });
+      }
       case 'dropdown':
-        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_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));
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
       case 'initial':
-        console.log('Got initial', e.detail);
-        break;
+        const initialsBlob = await (await fetch(e.detail)).blob();
+        return createInitials(this.endpoint, 'initial', initialsBlob) //
+          .then(newInitials => {
+          console.log('New initials', field.name, newInitials);
+          updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
+        });
       case 'signature':
-        console.log('Got signature', e.detail);
-        const newSignature = await createSignature(this.endpoint, 'signature', e.detail);
-        console.log('Created signature', newSignature);
-        //   --data-raw '{"ip_address":"ip_unavailable"}' \
-        const attachResult = await updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
-        console.log('Attach result', attachResult);
-        break;
+        const signatureBlob = await (await fetch(e.detail)).blob();
+        return createSignature(this.endpoint, 'signature', signatureBlob) //
+          .then(newSignature => {
+          console.log('New sign', field.name, newSignature);
+          updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
+        });
       case 'date':
         const iso = e.target.getAttribute('iso');
-        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: iso })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c, _d, _e, _f;
-          (_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));
-          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
-            console.log('jwt expired');
-          }
-          console.log('Error updating', e);
-        });
+        return this.saveFieldChange(field.name, { prepared: false, value: iso });
+      case 'timestamp':
+        console.log('Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
         break;
       default:
         console.log('Unhandled field update', { value, checked }, field);
@@ -217,31 +218,36 @@ export class VerdocsSign {
     }
   }
   isFieldValid(field) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { required = false } = field;
+    const { result = '', value = '', base64 = '' } = field.settings || {};
     switch (field.type) {
       case 'textbox':
         switch (((_a = field.settings) === null || _a === void 0 ? void 0 : _a.validator) || '') {
           case 'email':
-            return isValidEmail(((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '');
+            return isValidEmail(result);
           case 'phone':
-            return isValidPhone(((_c = field.settings) === null || _c === void 0 ? void 0 : _c.result) || '');
+            return isValidPhone(result);
           default:
-            return !!((_d = field.settings) === null || _d === void 0 ? void 0 : _d.result);
+            return !required || result !== '';
         }
       case 'signature':
       case 'initial':
+        return !required || base64 !== '';
+      // Timestamp fields get automatically filled when the envelope is submitted.
+      case 'timestamp':
+        return true;
       case 'textarea':
       case 'date':
-      case 'timestamp':
       case 'attachment':
-        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.result);
+        return !required || result !== '';
       case 'dropdown':
-        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.value);
+        return !required || value !== '';
       case 'checkbox_group':
-        const checked = (((_h = (_g = field.settings) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.filter(option => option.checked)) || []).length;
-        return checked >= (((_j = field.settings) === null || _j === void 0 ? void 0 : _j.minimum_checked) || 0) && checked <= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.maximum_checked) || 999);
+        const checkedCount = (((_c = (_b = field.settings) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.filter(option => option.checked)) || []).length;
+        return !required || (checkedCount >= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.minimum_checked) || 0) && checkedCount <= (((_e = field.settings) === null || _e === void 0 ? void 0 : _e.maximum_checked) || 999));
       case 'radio_button_group':
-        return (((_m = (_l = field.settings) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.filter(option => option.selected)) || []).length > 0;
+        return !required || (((_g = (_f = field.settings) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.filter(option => option.selected)) || []).length > 0;
       // TODO
       // case 'checkbox':
       //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
@@ -251,56 +257,94 @@ export class VerdocsSign {
         return false;
     }
   }
-  // (async () => {
-  //   await customElements.whenDefined('verdocs-field-signature');
-  //   const els = document.getElementById('verdocs-field-signature');
-  //   await els.focusField();
-  // })();
-  handleNext() {
+  async handleNext() {
+    var _a;
+    if (this.nextSubmits) {
+      try {
+        const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
+        console.log('[SIGN] Submitted successfully', result);
+        this.showDone = true;
+        this.isDone = true;
+        // updateRecipientStatus()
+      }
+      catch (e) {
+        console.log('Error submitting', e);
+      }
+      return;
+      // You're done.
+      // You can access the Verdoc at any time by clicking on the link from invitation email.
+      //
+      // After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.
+      //
+      // Thank you for using Verdocs.
+      // Got it, thanks
+    }
     // Find and focus the next incomplete required field
     const requiredFields = this.fields.filter(field => field.required);
-    console.log('required Fields', requiredFields);
     const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
-    console.log('focused Index', focusedIndex);
     let nextFocusedIndex = focusedIndex + 1;
     if (nextFocusedIndex >= requiredFields.length) {
       nextFocusedIndex = 0;
     }
-    const nextRequiredField = requiredFields[nextFocusedIndex];
-    console.log('next required field', nextRequiredField);
+    let nextRequiredField = requiredFields[nextFocusedIndex];
+    // 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 < requiredFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_a = nextRequiredField.settings) === null || _a === void 0 ? void 0 : _a.result) === 'signed') {
+      skips++;
+      nextFocusedIndex++;
+      if (nextFocusedIndex >= requiredFields.length) {
+        nextFocusedIndex = 0;
+      }
+      nextRequiredField = requiredFields[nextFocusedIndex];
+    }
+    if (skips >= requiredFields.length) {
+      nextRequiredField = null;
+    }
     if (nextRequiredField) {
       const id = getFieldId(nextRequiredField);
       const el = document.getElementById(id);
-      console.log('focusing', id, el);
       el === null || el === void 0 ? void 0 : el.focusField();
       this.focusedField = nextRequiredField.name;
     }
   }
+  // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
+  checkRecipientFields() {
+    const someFieldsInvalid = this.recipient.fields.map(field => this.isFieldValid(field)).some(fieldValid => !fieldValid);
+    console.log({ someFieldsInvalid });
+    if (!someFieldsInvalid) {
+      this.nextButtonLabel = 'Finish';
+      this.nextSubmits = true;
+    }
+    else {
+      this.nextSubmits = false;
+    }
+  }
+  attachFieldAttributes(pageInfo, field, roleIndex, el) {
+    var _a;
+    el.addEventListener('input', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
+    el.addEventListener('fieldChange', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
+    el.setAttribute('roleindex', roleIndex);
+    el.setAttribute('xScale', pageInfo.xScale);
+    el.setAttribute('yScale', pageInfo.yScale);
+    el.setAttribute('initials', this.recipient ? fullNameToInitials(this.recipient.full_name) : '');
+    el.setAttribute('name', ((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.full_name) || '');
+  }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[SIGN] Page rendered', pageInfo);
     const roleIndex = getRoleIndex(EnvelopeStore.roleNames, this.recipient.role_name);
-    console.log('rendering fields for recipient', roleIndex);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
-    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    console.log('[SIGN] Fields on page', recipientFields);
+    console.log('[SIGN] Page rendered, adding fields', { pageInfo, roleIndex, recipientFields });
     recipientFields.forEach(field => {
-      var _a;
-      const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false });
+      const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false, done: this.isDone });
       if (!el) {
         return;
       }
-      el.addEventListener('input', e => {
-        this.handleFieldChange(field, e);
-      });
-      el.addEventListener('fieldChange', e => {
-        this.handleFieldChange(field, e);
-      });
-      el.setAttribute('roleindex', roleIndex);
-      el.setAttribute('xScale', pageInfo.xScale);
-      el.setAttribute('yScale', pageInfo.yScale);
-      el.setAttribute('initials', this.recipient ? fullNameToInitials(this.recipient.full_name) : '');
-      el.setAttribute('name', ((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.full_name) || '');
+      if (Array.isArray(el)) {
+        el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+      }
+      else {
+        this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+      }
       // interact(el).draggable({
       //   listeners: {
       //     start(event) {
@@ -326,16 +370,15 @@ export class VerdocsSign {
       //   },
       // });
     });
+    // Render fields for "the other" recipients
     EnvelopeStore.envelope.recipients
       .filter(recipient => recipient.role_name !== this.recipient.role_name)
       .map(otherRecipient => {
       const otherRoleIndex = getRoleIndex(EnvelopeStore.roleNames, otherRecipient.role_name);
-      console.log('Rendering fields for other recipient', otherRoleIndex, otherRecipient);
       const recipientFields = otherRecipient.fields.filter(field => field.page === pageInfo.pageNumber);
       // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-      console.log('[SIGN] Fields on page', recipientFields);
       recipientFields.forEach(field => {
-        const el = renderDocumentField(field, pageInfo, otherRoleIndex, { disabled: true, editable: false, draggable: false });
+        const el = renderDocumentField(field, pageInfo, otherRoleIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
         if (!el) {
           return;
         }
@@ -344,6 +387,7 @@ export class VerdocsSign {
         el.setAttribute('yScale', pageInfo.yScale);
       });
     });
+    this.checkRecipientFields();
   }
   render() {
     var _a, _b, _c, _d;
@@ -352,19 +396,19 @@ export class VerdocsSign {
     }
     const menuOptions = [
       { id: 'later', label: 'Finish Later' },
-      { id: 'claim', label: 'Claim the Document', disabled: true },
+      // {id: 'claim', label: 'Claim the Document', disabled: true},
       { id: 'decline', label: 'Decline to Sign' },
-      { id: 'print', label: 'Print Without Signing' },
+      { id: 'print', label: 'Print Without Signing', disabled: true },
       { id: 'download', label: 'Download' },
     ];
-    return (h(Host, { class: { agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, !this.finishLater && (h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents."))), h("div", { class: "header" }, h("div", { class: "inner" }, !this.finishLater && (h("div", { class: "toolbar" }, h("div", { class: "tools" }, h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h("div", { style: { flex: '1' } })), h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))))), !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document" }, (EnvelopeStore.envelope.documents || []).map(envelopeDocument => {
+    return (h(Host, { class: { agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, !this.isDone && !this.finishLater && (h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents."))), h("div", { class: "header" }, h("div", { class: "inner" }, h("div", { class: "toolbar" }, h("div", { class: "tools" }, !this.isDone && !this.finishLater && h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, EnvelopeStore.envelope.name), h("div", { style: { flex: '1' } }), h("div", { innerHTML: PrintIcon, style: { width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer' }, onClick: () => window.print() }), h("div", { innerHTML: DownloadIcon, style: { width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px' }, onClick: () => this.savePDF() }))), !this.isDone && !this.finishLater && (h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))))), !this.isDone && !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document" }, (EnvelopeStore.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
       return (h(Fragment, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] })))));
-    })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: "To complete the document, use the link in the original email notification inviting you to review and finish the document.", onNext: () => (this.showFinishLater = false) }))));
+    })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: "To complete the document, use the link in the original email notification inviting you to review and finish the document.", onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: "You can access the Verdoc 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) }))));
   }
   static get is() { return "verdocs-sign"; }
   static get originalStyleUrls() {
@@ -441,7 +485,11 @@ export class VerdocsSign {
       "signerToken": {},
       "hasSignature": {},
       "nextButtonLabel": {},
+      "nextSubmits": {},
+      "errorMessage": {},
       "focusedField": {},
+      "isDone": {},
+      "showDone": {},
       "finishLater": {},
       "showFinishLater": {}
     };
@@ -468,22 +516,50 @@ export class VerdocsSign {
           }
         }
       }, {
-        "method": "fieldUpdated",
-        "name": "fieldUpdated",
+        "method": "envelopeLoaded",
+        "name": "envelopeLoaded",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when any field is updated. Note that the current active endpoint is\nprovided as a parameter as a convenience for callers when this coimponent"
+          "text": "Event fired when the envelope is updated in any way."
         },
         "complexType": {
-          "original": "{endpoint: VerdocsEndpoint}",
-          "resolved": "{ endpoint: VerdocsEndpoint; }",
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
           "references": {
             "VerdocsEndpoint": {
               "location": "import",
               "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        }
+      }, {
+        "method": "envelopeUpdated",
+        "name": "envelopeUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the envelope is updated in any way."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             }
           }
         }