@verdocs/web-sdk 1.9.16 → 1.9.20

package/dist/esm/verdocs-sign.entry.js

@@ -1,23 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-f78d163d.js';
-import { g as getSigningSession, a as getEnvelopeById, s as state, b as getEnvelopeFile, u as updateEnvelopeField, c as updateEnvelopeFieldSignature, d as updateEnvelopeFieldInitials } from './Envelopes-8038ca25.js';
+import { g as getSigningSession, a as getEnvelopeById, s as state, b as getEnvelopeFile, u as updateEnvelopeField, c as updateEnvelopeFieldSignature, d as updateEnvelopeFieldInitials } from './Envelopes-979ad8c2.js';
 import './Types-ab9f6af8.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators-f110bae2.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
-import { a as getRoleIndex, r as renderDocumentField, f as fullNameToInitials, b as getFieldId } from './utils-2e6beff8.js';
+import { f as fullNameToInitials, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils-2dbb5f63.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './index-fd7b8a34.js';
 
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -57,13 +46,31 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
 /**
  * Update a recipient's status block
  */
-var updateRecipientStatus = function (endpoint, envelopeId, roleName, action, params) { return __awaiter(void 0, void 0, void 0, function () {
+var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         return [2 /*return*/, endpoint.api //
-                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), __assign({ role_name: roleName, action: action }, (params || {})))
+                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), params)
                 .then(function (r) { return r.data; })];
     });
 }); };
+/**
+ * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.
+ */
+var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });
+};
+/**
+ * Decline to complete an envelope (signing will not terminated).
+ */
+var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });
+};
+/**
+ * Agree to electronic signing.
+ */
+var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });
+};
 
 /**
  * Create a signature block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
@@ -93,13 +100,16 @@ var createInitials = function (endpoint, name, initials) {
         .then(function (r) { return r.data; });
 };
 
-const verdocsSignCss = "verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 15px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}";
+const verdocsSignCss = "verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .tools .logo{width:77.5px;margin:-6px 0 0 5px}verdocs-sign .tools .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 15px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}@media print{verdocs-sign .header{display:none}}";
 
+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>`;
 const VerdocsSign = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.sdkError = createEvent(this, "sdkError", 7);
-    this.fieldUpdated = createEvent(this, "fieldUpdated", 7);
+    this.envelopeLoaded = createEvent(this, "envelopeLoaded", 7);
+    this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
     this.endpoint = null;
     this.recipientIndex = -1;
     this.fields = [];
@@ -110,8 +120,11 @@ const VerdocsSign = class {
     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;
   }
@@ -119,7 +132,7 @@ const VerdocsSign = class {
     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;
@@ -155,20 +168,25 @@ const VerdocsSign = class {
         this.recipient = state.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: state.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: state.envelope, event: 'agreed' });
     })
       .catch(e => {
       var _a, _b, _c;
@@ -208,8 +226,14 @@ const VerdocsSign = class {
       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(() => { });
@@ -231,17 +255,20 @@ const VerdocsSign = class {
       (_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);
+  async handleFieldChange(field, e) {
+    console.log('fieldChange', field, e, e.target.value);
     const { value, checked } = e.target;
     switch (field.type) {
       case 'textbox':
         return this.saveFieldChange(field.name, { prepared: false, value });
-      case 'checkbox_group':
-        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 }));
+      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':
         return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
       case 'initial':
@@ -261,38 +288,45 @@ const VerdocsSign = class {
       case 'date':
         const iso = e.target.getAttribute('iso');
         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);
         break;
     }
   }
   isFieldValid(field) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    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 !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.base64);
+        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 !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.result);
+        return !required || result !== '';
       case 'dropdown':
-        return !!((_g = field.settings) === null || _g === void 0 ? void 0 : _g.value);
+        return !required || value !== '';
       case 'checkbox_group':
-        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);
+        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 (((_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;
+        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} />;
@@ -302,8 +336,28 @@ const VerdocsSign = class {
         return false;
     }
   }
-  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);
     const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
@@ -332,28 +386,44 @@ const VerdocsSign = class {
       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, adding fields', pageInfo);
     const roleIndex = getRoleIndex(state.roleNames, this.recipient.role_name);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
+    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).catch(() => { });
-      });
-      el.addEventListener('fieldChange', e => {
-        this.handleFieldChange(field, e).catch(() => { });
-      });
-      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) {
@@ -379,16 +449,15 @@ const VerdocsSign = class {
       //   },
       // });
     });
+    // Render fields for "the other" recipients
     state.envelope.recipients
       .filter(recipient => recipient.role_name !== this.recipient.role_name)
       .map(otherRecipient => {
       const otherRoleIndex = getRoleIndex(state.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;
         }
@@ -397,6 +466,7 @@ const VerdocsSign = class {
         el.setAttribute('yScale', pageInfo.yScale);
       });
     });
+    this.checkRecipientFields();
   }
   render() {
     var _a, _b, _c, _d;
@@ -405,20 +475,19 @@ const VerdocsSign = class {
     }
     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', 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" }, (state.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" }, state.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" }, (state.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 = '') })));
+    })), 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) }))));
   }
 };
 VerdocsSign.style = verdocsSignCss;