@verdocs/web-sdk 1.9.15 → 1.9.20

package/dist/components/verdocs-sign.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { g as getSigningSession, a as getEnvelopeById, s as state, b as getEnvelopeFile, u as updateEnvelopeField, c as updateEnvelopeFieldSignature } from './Envelopes.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.js';
 import './Types.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { a as getRoleIndex, r as renderDocumentField, f as fullNameToInitials, b as getFieldId } from './utils.js';
+import { f as fullNameToInitials, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$7 } from './verdocs-button2.js';
 import { d as defineCustomElement$6 } from './verdocs-checkbox2.js';
@@ -12,17 +12,6 @@ import { d as defineCustomElement$4 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$3 } from './verdocs-loader2.js';
 import { d as defineCustomElement$2 } from './verdocs-ok-dialog2.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) {
@@ -62,13 +51,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"
@@ -84,14 +91,31 @@ var createSignature = function (endpoint, name, signature) {
         .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}";
+/**
+ * Create an initials block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
+ * an initials block to be used for all initials fields in the document. Thus, this is typically called one time to
+ * create and store an initials block. Thereafter, the ID of the initials block may be re-used for each initials field
+ * to be "stamped" by the user.
+ */
+var createInitials = function (endpoint, name, initials) {
+    var data = new FormData();
+    data.append('initial', initials, name);
+    return endpoint.api //
+        .post("/initials", data)
+        .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 .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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     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 = [];
@@ -102,7 +126,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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;
   }
@@ -110,7 +138,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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;
@@ -146,20 +174,25 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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;
@@ -199,81 +232,70 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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) {
+    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':
-        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':
-        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 }));
-        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':
-        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');
-        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);
@@ -281,31 +303,36 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   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} />;
@@ -315,56 +342,94 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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(state.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) {
@@ -390,16 +455,15 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       //   },
       // });
     });
+    // 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;
         }
@@ -408,6 +472,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         el.setAttribute('yScale', pageInfo.yScale);
       });
     });
+    this.checkRecipientFields();
   }
   render() {
     var _a, _b, _c, _d;
@@ -416,19 +481,19 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     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" }, (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);
       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 style() { return verdocsSignCss; }
 }, [0, "verdocs-sign", {
@@ -439,7 +504,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "signerToken": [32],
     "hasSignature": [32],
     "nextButtonLabel": [32],
+    "nextSubmits": [32],
+    "errorMessage": [32],
     "focusedField": [32],
+    "isDone": [32],
+    "showDone": [32],
     "finishLater": [32],
     "showFinishLater": [32]
   }]);