@verdocs/web-sdk 1.14.7 → 1.14.9

package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js

@@ -1,12 +1,16 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
+import interact from 'interactjs';
 const settingsIcon = '<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>';
 /**
  * Display a multi-line text input field.
  */
 export class VerdocsFieldTextarea {
   constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
     this.disabled = false;
@@ -17,7 +21,7 @@ export class VerdocsFieldTextarea {
     this.rerender = 0;
   }
   async focusField() {
-    this.el.focus();
+    this.inputEl.focus();
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
@@ -32,6 +36,45 @@ export class VerdocsFieldTextarea {
     }
     // TemplateStore.updateCount++;
   }
+  componentDidRender() {
+    interact.dynamicDrop(true);
+    if (this.editable) {
+      interact(this.el).resizable({
+        edges: { top: true, bottom: true, left: true, right: true },
+        listeners: {
+          start: this.handleResizeStart.bind(this),
+          move: this.handleResize.bind(this),
+          end: this.handleResizeEnd.bind(this),
+        },
+      });
+    }
+  }
+  handleResizeStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleResize(e) {
+    const oldX = +(e.target.getAttribute('resizeX') || 0);
+    const oldY = +(e.target.getAttribute('resizeY') || 0);
+    const newX = e.dx + oldX;
+    const newY = e.dy + oldY;
+    this.el.style.width = `${parseFloat(this.el.style.width || '0') + e.dx}px`;
+    this.el.style.height = `${parseFloat(this.el.style.height || '0') + e.dy}px`;
+    e.target.setAttribute('resizeX', newX);
+    e.target.setAttribute('resizeY', newY);
+  }
+  handleResizeEnd(e) {
+    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
+    const resizeHeight = +(e.target.getAttribute('resizeY') || 0);
+    const settings = getFieldSettings(this.field);
+    const newWidth = (settings.width || 150) + resizeWidth;
+    const newHeight = (settings.height || 41) + resizeHeight;
+    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth), height: Math.round(newHeight) };
+    delete newSettings['result'];
+    updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
+      .then(() => { var _a; return (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings }); })
+      .catch(e => console.log('Field update failed', e));
+  }
   render() {
     var _a, _b;
     const settings = getFieldSettings(this.field);
@@ -40,7 +83,7 @@ export class VerdocsFieldTextarea {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.inputEl = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -63,6 +106,27 @@ export class VerdocsFieldTextarea {
   }
   static get properties() {
     return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\nThis component self-manages its resize (width) behavior when in edit-template mode, and uses\nthis endpoint to save changes."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
       "templateid": {
         "type": "string",
         "mutable": false,
@@ -228,9 +292,14 @@ export class VerdocsFieldTextarea {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string}",
-          "resolved": "{ fieldName: string; }",
-          "references": {}
+          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "references": {
+            "ITemplateFieldSetting": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "deleted",
@@ -301,4 +370,5 @@ export class VerdocsFieldTextarea {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.css

@@ -1,5 +1,6 @@
 verdocs-field-textbox {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  box-sizing: border-box;
   width: 150px;
   height: 15px;
   display: block;
@@ -35,43 +36,6 @@ verdocs-field-textbox.required {
 verdocs-field-textbox.focused {
   animation: verdocs-field-pulse 0.75s 2;
 }
-verdocs-field-textbox .resizer {
-  position: absolute;
-  bottom: 1px;
-  right: 1px;
-  width: 8px;
-  height: 8px;
-  z-index: 9999;
-}
-verdocs-field-textbox .resizer:hover {
-  cursor: nwse-resize;
-}
-verdocs-field-textbox .resizer .resizer-inner {
-  position: absolute;
-  bottom: 0;
-}
-verdocs-field-textbox .resizer .resizer-inner:before {
-  position: absolute;
-  top: -4px;
-  left: -0.5px;
-  content: "";
-  display: block;
-  width: 10px;
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.32);
-  transform: rotate(-45deg);
-}
-verdocs-field-textbox .resizer .resizer-inner:after {
-  position: absolute;
-  top: -1.5px;
-  left: 4.5px;
-  content: "";
-  display: block;
-  width: 5px;
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.32);
-  transform: rotate(-45deg);
-}
 verdocs-field-textbox verdocs-button-panel {
   top: -3px;
   left: -2px;

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js

@@ -1,5 +1,7 @@
 import interact from 'interactjs';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 const settingsIcon = '<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>';
@@ -8,6 +10,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldTextbox {
   constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
     this.disabled = false;
@@ -36,30 +39,40 @@ export class VerdocsFieldTextbox {
   componentDidRender() {
     interact.dynamicDrop(true);
     if (this.editable) {
-      interact(this.resizeHandle).resizable({
+      interact(this.el).resizable({
+        edges: { top: false, bottom: false, left: true, right: true },
         listeners: {
-          start(event) {
-            console.log('[TEXTBOX] Resize started', event.type, event.target);
-          },
+          start: this.handleResizeStart.bind(this),
           move: this.handleResize.bind(this),
-          end(event) {
-            console.log('[TEXTBOX] Resize end', event);
-          },
+          end: this.handleResizeEnd.bind(this),
         },
       });
     }
   }
-  handleResize(event) {
-    console.log('[TEXTBOX] Resize', event.delta);
-    const oldX = +(event.target.getAttribute('resizeX') || 0);
-    const oldY = +(event.target.getAttribute('resizeY') || 0);
-    const newX = event.dx + oldX;
-    const newY = event.dy + oldY;
-    this.el.style.width = `${parseFloat(this.el.style.width || '0') + event.dx}px`;
+  handleResizeStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleResize(e) {
+    const oldX = +(e.target.getAttribute('resizeX') || 0);
+    const oldY = +(e.target.getAttribute('resizeY') || 0);
+    const newX = e.dx + oldX;
+    const newY = e.dy + oldY;
+    this.el.style.width = `${parseFloat(this.el.style.width || '0') + e.dx}px`;
     // Single line text fields are not resizeable in height
     // this.el.style.height = `${parseFloat(this.el.style.height || '0') + event.dy}px`;
-    event.target.setAttribute('resizeX', newX);
-    event.target.setAttribute('resizeY', newY);
+    e.target.setAttribute('resizeX', newX);
+    e.target.setAttribute('resizeY', newY);
+  }
+  handleResizeEnd(e) {
+    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
+    const settings = getFieldSettings(this.field);
+    const newWidth = (settings.width || 150) + resizeWidth;
+    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth) };
+    delete newSettings['result'];
+    updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
+      .then(() => { var _a; return (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings }); })
+      .catch(e => console.log('Field update failed', e));
   }
   render() {
     var _a, _b, _c, _d;
@@ -73,7 +86,7 @@ export class VerdocsFieldTextbox {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -96,6 +109,27 @@ export class VerdocsFieldTextbox {
   }
   static get properties() {
     return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\nThis component self-manages its resize (width) behavior when in edit-template mode, and uses\nthis endpoint to save changes."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
       "templateid": {
         "type": "string",
         "mutable": false,
@@ -261,9 +295,14 @@ export class VerdocsFieldTextbox {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string}",
-          "resolved": "{ fieldName: string; }",
-          "references": {}
+          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "references": {
+            "ITemplateFieldSetting": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "deleted",

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js

@@ -236,9 +236,14 @@ export class VerdocsFieldTimestamp {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string}",
-          "resolved": "{ fieldName: string; }",
-          "references": {}
+          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "references": {
+            "ITemplateFieldSetting": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "deleted",

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -110,7 +110,7 @@ export class VerdocsTemplateFieldProperties {
       var _a, _b;
       this.dirty = false;
       this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -148,7 +148,7 @@ export class VerdocsTemplateFieldProperties {
       var _a, _b;
       this.dirty = false;
       this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -390,9 +390,14 @@ export class VerdocsTemplateFieldProperties {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string}",
-          "resolved": "{ fieldName: string; }",
-          "references": {}
+          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "references": {
+            "ITemplateFieldSetting": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "sdkError",

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -101,16 +101,17 @@ export class VerdocsTemplateFields {
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', () => {
+    el.addEventListener('settingsChanged', e => {
       var _a, _b, _c, _d;
+      console.log('[FIELDS] settingsChanged', e.detail);
+      Object.assign(field.setting, e.detail.settings);
       this.selectedRoleName = field.role_name;
-      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
       el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
       (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
-      console.log('Re-rendering field', field.name, pageInfo.pageNumber);
+      console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
       this.reRenderField(field, pageInfo.pageNumber);
       const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
       if (!newEl) {

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: '',
+    templateId: '8337af06-3b5a-4e1b-98be-67d82bc7ecd1',
   },
   argTypes: {},
   parameters: {

package/dist/collection/components/templates/verdocs-template-reminders/verdocs-template-reminders.js

@@ -3,6 +3,7 @@ import { h, Host } from '@stencil/core';
 import { createReminder, updateReminder, deleteReminder } from '@verdocs/js-sdk/Templates/Reminders';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
+import { VerdocsToast } from '../../../utils/Toast';
 /**
  * Displays an edit form that allows the user to adjust a template's reminders.
  */
@@ -17,6 +18,9 @@ export class VerdocsTemplateReminders {
     this.reminderDays = '1';
     this.dirty = false;
   }
+  // POST https://api.verdocs.com/templates/8337af06-3b5a-4e1b-98be-67d82bc7ecd1/reminder
+  // interval_time: 1,
+  // setup_time:1,
   async componentWillLoad() {
     var _a, _b, _c, _d, _e;
     try {
@@ -46,25 +50,35 @@ export class VerdocsTemplateReminders {
     (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   async handleSave(e) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     e.stopPropagation();
-    if (this.sendReminders) {
-      const params = {
-        setup_time: 86400000 * +this.firstReminderDays,
-        interval_time: 86400000 * +this.reminderDays,
-      };
-      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id)) {
-        await createReminder(this.endpoint, this.templateId, params);
+    try {
+      if (this.sendReminders) {
+        const params = {
+          setup_time: +this.firstReminderDays,
+          interval_time: +this.reminderDays,
+        };
+        if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id)) {
+          await createReminder(this.endpoint, this.templateId, params);
+          this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+        }
+        else {
+          await updateReminder(this.endpoint, this.templateId, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.reminder_id, params);
+          this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+        }
       }
       else {
-        await updateReminder(this.endpoint, this.templateId, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.reminder_id, params);
+        await deleteReminder(this.endpoint, this.templateId, (_d = this.store) === null || _d === void 0 ? void 0 : _d.state.reminder_id);
+        this.store = await getTemplateStore(this.endpoint, this.templateId, true);
       }
     }
-    else {
-      await deleteReminder(this.endpoint, this.templateId, (_d = this.store) === null || _d === void 0 ? void 0 : _d.state.reminder_id);
+    catch (e) {
+      console.log('[TEMPLATE REMINDERS] Unable to update reminders', e);
+      VerdocsToast(e.message);
+      (_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));
     }
     this.dirty = false;
-    (_e = this.close) === null || _e === void 0 ? void 0 : _e.emit();
+    (_h = this.close) === null || _h === void 0 ? void 0 : _h.emit();
   }
   render() {
     var _a, _b;
@@ -76,11 +90,17 @@ export class VerdocsTemplateReminders {
       return h(Host, { class: "empty" });
     }
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Reminders"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-send-reminders" }, "Send Automatic Reminders"), h("verdocs-checkbox", { id: "verdocs-send-reminders", name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => {
-        this.showPlanBlocker = true;
-        e.target.checked = false;
-        // this.sendReminders = e.target.checked;
-        // this.dirty = true;
-      } })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-first-reminder-days" }, "Days Before First Reminder"), h("verdocs-text-input", { id: "verdocs-first-reminder-days", type: "number", value: this.firstReminderDays, onInput: (e) => (this.firstReminderDays = e.target.value), disabled: !this.sendReminders })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-days-between-reminders" }, "Days Between Reminders"), h("verdocs-text-input", { id: "verdocs-days-between-reminders", type: "number", value: this.reminderDays, onInput: (e) => (this.reminderDays = e.target.value), disabled: !this.sendReminders })), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) }))), this.showPlanBlocker && (h("verdocs-ok-dialog", { heading: "Upgrade to access this feature", message: "Please upgrade your plan to access this feature.", onNext: () => (this.showPlanBlocker = false) }))));
+        // this.showPlanBlocker = true;
+        // e.target.checked = false;
+        this.sendReminders = e.target.checked;
+        this.dirty = true;
+      } })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-first-reminder-days" }, "Days Before First Reminder"), h("verdocs-text-input", { id: "verdocs-first-reminder-days", type: "number", value: this.firstReminderDays, onInput: (e) => {
+        this.firstReminderDays = e.target.value;
+        this.dirty = true;
+      }, disabled: !this.sendReminders })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-days-between-reminders" }, "Days Between Reminders"), h("verdocs-text-input", { id: "verdocs-days-between-reminders", type: "number", value: this.reminderDays, onInput: (e) => {
+        this.reminderDays = e.target.value;
+        this.dirty = true;
+      }, disabled: !this.sendReminders })), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) }))), this.showPlanBlocker && (h("verdocs-ok-dialog", { heading: "Upgrade to access this feature", message: "Please upgrade your plan to access this feature.", onNext: () => (this.showPlanBlocker = false) }))));
   }
   static get is() { return "verdocs-template-reminders"; }
   static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-reminders/verdocs-template-reminders.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Reminders',
   component: 'verdocs-template-reminders',
   args: {
-    templateId: '',
+    templateId: '8337af06-3b5a-4e1b-98be-67d82bc7ecd1',
   },
   argTypes: {
     onClose: { action: 'close' },

package/dist/components/Recipients.js

@@ -0,0 +1,74 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Update a recipient's status block
+ */
+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), 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 });
+};
+/**
+ * Get an in-person signing link.
+ */
+var getInPersonLink = function (endpoint, envelopeId, roleName) {
+    return endpoint.api //
+        .get("/envelopes/".concat(envelopeId, "/recipients/").concat(encodeURIComponent(roleName), "?in_person_link=true"))
+        .then(function (r) { return r.data; });
+};
+
+export { envelopeRecipientDecline as a, envelopeRecipientSubmit as b, envelopeRecipientAgree as e, getInPersonLink as g };