@verdocs/web-sdk 1.9.14 → 1.9.16

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

@@ -1,13 +1,14 @@
-// import interact from 'interactjs';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
-import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
-import { rescale } from '@verdocs/js-sdk/Utils/Fields';
+import { createInitials } from '@verdocs/js-sdk/Envelopes/Initials';
+import { createSignature } from '@verdocs/js-sdk/Envelopes/Signatures';
 import { updateRecipientStatus } from '@verdocs/js-sdk/Envelopes/Recipients';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
 import { Host, Fragment, h } from '@stencil/core';
-import { getFieldId, getRoleIndex, renderDocumentField, setControlStyles } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
+import { updateEnvelopeFieldInitials, updateEnvelopeFieldSignature } from '@verdocs/js-sdk/Envelopes/Envelopes';
+import { fullNameToInitials, getFieldId, getRoleIndex, renderDocumentField } from '../../../utils/utils';
+import { getEnvelopeById } from '../../../utils/Envelopes';
+import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
 /**
  * Display an envelope signing experience. This will display the envelope's attached
@@ -29,17 +30,22 @@ import { SDKError } from '../../../utils/errors';
 export class VerdocsSign {
   constructor() {
     this.endpoint = null;
+    this.recipientIndex = -1;
+    this.fields = [];
     this.envelopeId = null;
     this.roleId = null;
     this.inviteCode = null;
     this.recipient = null;
     this.signerToken = null;
-    this.recipientIndex = -1;
-    this.envelope = null;
-    this.fields = [];
     this.hasSignature = false;
     this.nextButtonLabel = 'Start';
+    this.errorMessage = '';
     this.focusedField = '';
+    this.finishLater = false;
+    this.showFinishLater = false;
+  }
+  componentWillLoad() {
+    this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
   }
   async componentDidLoad() {
     var _a, _b, _c, _d, _e, _f;
@@ -56,7 +62,6 @@ export class VerdocsSign {
       return;
     }
     try {
-      this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
       console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
       const { session, recipient, signerToken } = await Envelopes.getSigningSession(this.endpoint, {
         envelopeId: this.envelopeId,
@@ -70,15 +75,15 @@ export class VerdocsSign {
       if (this.recipient.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      const envelope = await Envelopes.getEnvelope(this.endpoint, this.envelopeId);
-      this.envelope = envelope;
-      console.log('[SIGN] Loaded envelope', envelope);
-      this.recipientIndex = this.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
+      await getEnvelopeById(this.endpoint, this.envelopeId);
+      // const envelope = await Envelopes.getEnvelope(this.endpoint, this.envelopeId);
+      // this.envelope = envelope;
+      // console.log('[SIGN] Loaded envelope', envelope);
+      this.recipientIndex = EnvelopeStore.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
       if (this.recipientIndex > -1) {
-        console.log('Found recipient', this.envelope.recipients[this.recipientIndex]);
+        this.recipient = EnvelopeStore.envelope.recipients[this.recipientIndex];
+        this.fields = this.recipient.fields;
       }
-      this.fields = this.envelope.fields.filter(field => field.recipient_role === this.roleId);
-      console.log('Loaded fields', this.fields);
       // TODO: Fix service to allow this?
       // const sigs = await getSignatures();
       // console.log('sigs', sigs);
@@ -89,22 +94,20 @@ export class VerdocsSign {
     }
   }
   handleClickAgree() {
-    console.log('agree clicked');
     updateRecipientStatus(this.endpoint, this.envelopeId, this.roleId, 'update', { agreed: true })
       .then(r => {
-      console.log('update result', r);
       this.nextButtonLabel = 'Next';
       this.recipient = r;
     })
       .catch(e => {
       var _a, _b, _c;
-      console.log('update failure', e);
+      console.log('Update failure', 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));
     });
   }
   async savePDF() {
-    const fileName = `${this.envelope.name} - ${this.envelope.updated_at.split('T')[0]}.pdf`;
-    const data = await Envelopes.getEnvelopeFile(this.endpoint, this.envelopeId, this.envelope.envelope_document_id);
+    const fileName = `${EnvelopeStore.envelope.name} - ${EnvelopeStore.envelope.updated_at.split('T')[0]}.pdf`;
+    const data = await Envelopes.getEnvelopeFile(this.endpoint, this.envelopeId, EnvelopeStore.envelope.envelope_document_id);
     // This is better in React than doing window.href= or similar to trigger a download. For a description of the technique
     // see https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image
     let xhr = new XMLHttpRequest();
@@ -118,18 +121,18 @@ export class VerdocsSign {
       a.click();
       a.remove();
     };
-    const url = `data:application/pdf;base64,${data}`;
-    console.log('url', url.length, url);
     xhr.open('GET', `data:application/pdf;base64,${data}`);
     xhr.send();
   }
   async handleOptionSelected(e) {
     switch (e.detail.id) {
       case 'later':
+        this.finishLater = true;
+        this.showFinishLater = true;
         // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);
-        if (!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV'])) {
-          window.alert('User intends to sign later.');
-        }
+        // if (!window?.['STORYBOOK_ENV']) {
+        //   window.alert('User intends to sign later.');
+        // }
         break;
       case 'claim':
         break;
@@ -142,83 +145,58 @@ export class VerdocsSign {
         break;
     }
   }
+  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, optionId) {
     console.log('fieldChange', field, e);
+    const { value, checked } = e.target;
     switch (field.type) {
       case 'textbox':
-        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, _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;
+        return this.saveFieldChange(field.name, { prepared: false, value });
       case 'checkbox_group':
-        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options: [{ id: optionId, checked: 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: { options: [{ id: optionId, checked }] } });
       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: { 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 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');
+        return this.saveFieldChange(field.name, { prepared: false, value: iso });
+      default:
+        console.log('Unhandled field update', { value, checked }, field);
         break;
     }
   }
-  renderCheckboxGroupOption(page, field, option) {
-    const left = rescale(page.xScale, option.x);
-    const bottom = rescale(page.yScale, option.y);
-    const style = {
-      left: `${left}px`,
-      bottom: `${bottom}px`,
-      position: 'absolute',
-      transform: `scale(${page.xScale}, ${page.yScale})`,
-      backgroundColor: getRGBA(this.recipientIndex),
-    };
-    return h("verdocs-field-checkbox", { style: style, field: field, onChange: e => this.handleFieldChange(field, e, option.id) });
-  }
-  renderRadioGroupOption(page, field, option) {
-    const left = rescale(page.xScale, option.x);
-    const bottom = rescale(page.yScale, option.y);
-    const style = {
-      left: `${left}px`,
-      bottom: `${bottom}px`,
-      position: 'absolute',
-      transform: `scale(${page.xScale}, ${page.yScale})`,
-      backgroundColor: getRGBA(this.recipientIndex),
-    };
-    return h("verdocs-field-radio-button", { style: style, field: field, onFieldChange: e => this.handleFieldChange(field, e, option.id) });
-  }
   isFieldValid(field) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     switch (field.type) {
       case 'textbox':
         switch (((_a = field.settings) === null || _a === void 0 ? void 0 : _a.validator) || '') {
@@ -231,18 +209,19 @@ export class VerdocsSign {
         }
       case 'signature':
       case 'initial':
+        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.base64);
       case 'textarea':
       case 'date':
       case 'timestamp':
       case 'attachment':
-        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.result);
+        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.result);
       case 'dropdown':
-        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.value);
+        return !!((_g = field.settings) === null || _g === void 0 ? void 0 : _g.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 checked = (((_j = (_h = field.settings) === null || _h === void 0 ? void 0 : _h.options) === null || _j === void 0 ? void 0 : _j.filter(option => option.checked)) || []).length;
+        return checked >= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.minimum_checked) || 0) && checked <= (((_l = field.settings) === null || _l === void 0 ? void 0 : _l.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 (((_o = (_m = field.settings) === null || _m === void 0 ? void 0 : _m.options) === null || _o === void 0 ? void 0 : _o.filter(option => option.selected)) || []).length > 0;
       // TODO
       // case 'checkbox':
       //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
@@ -252,103 +231,58 @@ export class VerdocsSign {
         return false;
     }
   }
-  // (async () => {
-  //   await customElements.whenDefined('verdocs-field-signature');
-  //   const els = document.getElementById('verdocs-field-signature');
-  //   await els.focusField();
-  // })();
   handleNext() {
+    var _a;
     // 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;
     }
   }
-  renderField(field, docPage /*, index: number*/) {
-    const controlsDiv = document.getElementById(docPage.containerId + '-controls');
-    if (!controlsDiv) {
-      return;
-    }
-    const id = getFieldId(field);
-    const existingField = document.getElementById(id);
-    console.log('field', id, existingField);
-    if (existingField) {
-      setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
-      return;
-    }
-    let el;
-    switch (field.type) {
-      case 'attachment':
-      case 'checkbox_group':
-      case 'date':
-      case 'dropdown':
-      case 'initial':
-      case 'payment':
-      case 'signature':
-      case 'timestamp':
-      case 'textarea':
-      case 'textbox':
-        el = document.createElement(`verdocs-field-${field.type}`);
-        break;
-      //   return field.settings.options.map((option: any, index) => this.renderCheckboxGroupOption(renderOnPage, field, option, index));
-      case 'radio_button_group':
-        //   el = document.createElement('verdocs-field-signature');
-        //   el.setAttribute('value', base64);
-        break;
-      //   return field.settings.options.map((option: any, index) => this.renderRadioGroupOption(renderOnPage, field, option, index));
-      // case 'attachment':
-      //   el = document.createElement('verdocs-field-attachment');
-      //   el.setAttribute('value', result || '');
-      //   break;
-      // case 'payment':
-      //   el = document.createElement('verdocs-field-payment');
-      //   break;
-      default:
-        console.log('[SIGN] Skipping unsupported field type', field);
-    }
-    console.log('created field', el);
-    if (el) {
-      el.field = field;
-      el.recipient = this.recipient;
-      el.setAttribute('id', id);
-      el.setAttribute('roleindex', this.recipientIndex);
-      el.addEventListener('fieldChange', e => this.handleFieldChange(field, e));
-      setControlStyles(el, field, docPage.xScale, docPage.yScale);
-      controlsDiv.appendChild(el);
-    }
-  }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[SIGN] Page rendered', pageInfo);
-    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    console.log('[SIGN] Fields on page', fields);
-    fields.forEach(field => {
-      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);
-      console.log('rendered element', el);
-      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
+    console.log('[SIGN] Page rendered, adding fields', pageInfo);
+    const roleIndex = getRoleIndex(EnvelopeStore.roleNames, this.recipient.role_name);
+    const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
+    recipientFields.forEach(field => {
+      var _a;
+      const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false });
       if (!el) {
         return;
       }
-      el.addEventListener('recipientChanged', e => {
-        el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));
-        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));
+      el.addEventListener('input', e => {
+        this.handleFieldChange(field, e).catch(() => { });
+      });
+      el.addEventListener('fieldChange', e => {
+        this.handleFieldChange(field, e).catch(() => { });
       });
-      el.setAttribute('xScale', pageInfo.renderedPage.xScale);
-      el.setAttribute('yScale', pageInfo.renderedPage.yScale);
+      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) || '');
       // interact(el).draggable({
       //   listeners: {
       //     start(event) {
@@ -374,37 +308,46 @@ export class VerdocsSign {
       //   },
       // });
     });
+    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 });
+        if (!el) {
+          return;
+        }
+        el.setAttribute('roleindex', otherRoleIndex);
+        el.setAttribute('xScale', pageInfo.xScale);
+        el.setAttribute('yScale', pageInfo.yScale);
+      });
+    });
   }
-  // handlePageRendered(e) {
-  //   const pageInfo = e.detail as IPageRenderEvent;
-  //   console.log('[SIGN] Page rendered', pageInfo);
-  //
-  //   const fields = this.fields.filter(field => field.page === pageInfo.renderedPage.pageNumber);
-  //   console.log('[SIGN] Fields on page', fields);
-  //   fields.forEach(field => this.renderField(field, pageInfo.renderedPage));
-  //   // .map((field, index) => this.renderField(field, index));
-  //   // this.pdfPageInfo = e.detail;
-  // }
   render() {
-    var _a, _b, _c, _d, _e;
-    if (!this.envelope) {
-      return h(Host, null);
+    var _a, _b, _c, _d;
+    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {
+      return (h(Host, null, h("verdocs-loader", null)));
     }
     const menuOptions = [
       { id: 'later', label: 'Finish Later' },
       { 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 } }, 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" }, 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("div", { class: "agree-checkbox" }, h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }), h("label", { htmlFor: "agree-checkbox-element" })), h("span", null, "I agree to use electronic records and signatures."))) : (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" }, h("div", { class: "inner" }, (((_e = this.envelope) === null || _e === void 0 ? void 0 : _e.documents) || []).map(envelopeDocument => {
+    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 => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
+      console.log('p', envelopeDocument, pages);
       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.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') })));
   }
   static get is() { return "verdocs-sign"; }
   static get originalStyleUrls() {
@@ -479,12 +422,12 @@ export class VerdocsSign {
     return {
       "recipient": {},
       "signerToken": {},
-      "recipientIndex": {},
-      "envelope": {},
-      "fields": {},
       "hasSignature": {},
       "nextButtonLabel": {},
-      "focusedField": {}
+      "errorMessage": {},
+      "focusedField": {},
+      "finishLater": {},
+      "showFinishLater": {}
     };
   }
   static get events() {