@verdocs/web-sdk 1.9.16 → 1.9.20

package/dist/collection/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-timestamp.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAC;AAErD,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;AAE3rC;;GAEG;AAMH,MAAM,OAAO,qBAAqB;;iBAMwB,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;qBAKL,CAAC;;EAEpB,KAAK,CAAC,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;EAClB,CAAC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC;MAC/E,aACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EACzB,KAAK,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,KAAI,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,EACzD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAC9B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB;MAED,IAAI,CAAC,QAAQ,IAAI,CAChB,4BAAsB,IAAI,EAAE,YAAY;QACtC,+BAAuB;QACvB;UACE,4BACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE;cACP,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;cAChC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;aACnC,GACD;UAEF,0BAAoB,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,sBAAsB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI;UAC1H,0BAAoB,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,CACrH,CACc,CACxB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.value || new Date().toLocaleDateString()}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-timestamp.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":[],"mappings":"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","sourcesContent":["import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings.value || new Date().toISOString();\n\n    const dt = new Date(value);\n    const formatted = format(dt, 'MMM d, y');\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n          // is encoded in a ton of existing entries in the database and is hard to change.\n          value={formatted}\n          disabled={true}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -58,6 +58,17 @@ verdocs-sign .tools {
   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;
@@ -97,4 +108,10 @@ verdocs-sign .agree .intro {
 }
 verdocs-sign .agree .header {
   flex: 0 0 56px;
+}
+
+@media print {
+  verdocs-sign .header {
+    display: none;
+  }
 }

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

@@ -2,7 +2,7 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
 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 { 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';
@@ -10,6 +10,8 @@ import { fullNameToInitials, getFieldId, getRoleIndex, renderDocumentField } fro
 import { getEnvelopeById } from '../../../utils/Envelopes';
 import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
+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.
@@ -39,8 +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;
   }
@@ -48,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;
@@ -84,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;
@@ -137,8 +147,14 @@ 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(() => { });
@@ -160,17 +176,20 @@ export class VerdocsSign {
       (_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':
@@ -190,38 +209,45 @@ export class VerdocsSign {
       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} />;
@@ -231,8 +257,28 @@ export class VerdocsSign {
         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);
@@ -261,28 +307,44 @@ export class VerdocsSign {
       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(EnvelopeStore.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) {
@@ -308,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;
         }
@@ -326,6 +387,7 @@ export class VerdocsSign {
         el.setAttribute('yScale', pageInfo.yScale);
       });
     });
+    this.checkRecipientFields();
   }
   render() {
     var _a, _b, _c, _d;
@@ -334,20 +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', 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);
-      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) }))));
   }
   static get is() { return "verdocs-sign"; }
   static get originalStyleUrls() {
@@ -424,8 +485,11 @@ export class VerdocsSign {
       "signerToken": {},
       "hasSignature": {},
       "nextButtonLabel": {},
+      "nextSubmits": {},
       "errorMessage": {},
       "focusedField": {},
+      "isDone": {},
+      "showDone": {},
       "finishLater": {},
       "showFinishLater": {}
     };
@@ -452,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 the envelope is updated in any way."
+        },
+        "complexType": {
+          "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 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; 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"
             }
           }
         }