@verdocs/web-sdk 1.13.7 → 1.13.11

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

@@ -1,17 +1,23 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { h, Host } from '@stencil/core';
+import { createTemplateDocument, deleteTemplateDocument } from '@verdocs/js-sdk/Templates/TemplateDocuments';
+import { DocIcon, FileIcon, JpgIcon, PageCountIcon, PdfIcon, PngIcon, TrashIcon } from '../../../utils/Icons';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
-const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
 /**
  * Displays an edit form that allows the user to view, add, or remove a template's attachments.
  * Note that an active session and valid template ID must be supplied.
  */
 export class VerdocsTemplateAttachments {
   constructor() {
-    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
+    this.uploading = false;
+    this.progressLabel = 'Uploading...';
+    this.progressPercent = 0;
+    this.showDeleteError = false;
+    this.confirmDeleteDocument = null;
+    this.store = null;
   }
   async componentWillLoad() {
     var _a, _b, _c;
@@ -26,15 +32,89 @@ export class VerdocsTemplateAttachments {
         return;
       }
       this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-      this.endpoint.loadSession();
     }
     catch (e) {
       console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
+  handleCancel(e) {
+    e.stopPropagation();
+    this.exit.emit();
+  }
+  handleUploadProgress(percent) {
+    if (percent >= 99) {
+      this.progressPercent = 100;
+      this.progressLabel = 'Processing...';
+    }
+    else {
+      this.progressPercent = percent;
+    }
+  }
+  async handleUpload(e) {
+    var _a, _b, _c;
+    e.stopPropagation();
+    const file = e.detail.file;
+    if (!file) {
+      return;
+    }
+    console.log('[ATTACHMENTS] Uploading...', file);
+    this.uploading = true;
+    this.progressLabel = 'Uploading...';
+    try {
+      const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
+      console.log('[ATTACHMENTS] Created attachment', template);
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      console.log('[ATTACHMENTS] New template', this.store.state);
+      this.uploading = false;
+      this.progressLabel = '';
+      this.progressPercent = 0;
+    }
+    catch (e) {
+      console.log('[ATTACHMENTS] Error creating template', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+      this.uploading = false;
+    }
+  }
+  handleNext(e) {
+    var _a;
+    e.stopPropagation();
+    this.uploading = false;
+    this.progressLabel = '';
+    this.progressPercent = 0;
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.store.state });
+  }
+  async confirmDelete() {
+    await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
+    this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+    console.log('[ATTACHMENTS] New template', this.store.state);
+    this.confirmDeleteDocument = null;
+  }
+  async handleDelete(document) {
+    var _a;
+    if (((_a = this.store.state) === null || _a === void 0 ? void 0 : _a.template_documents.length) > 1) {
+      this.confirmDeleteDocument = document;
+    }
+    else {
+      this.showDeleteError = true;
+    }
+  }
+  getFileIcon(document) {
+    switch (document.mime) {
+      case 'application/pdf':
+        return PdfIcon;
+      case 'image/jpeg':
+        return JpgIcon;
+      case 'image/png':
+        return PngIcon;
+      case 'application/msword':
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        return DocIcon;
+    }
+    return FileIcon;
+  }
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -43,12 +123,12 @@ export class VerdocsTemplateAttachments {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }
     // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    // Checking
     if (!this.endpoint.session || !templateState.profile_id) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("h5", null, "Attachments"), (_b = this.store) === null || _b === void 0 ? void 0 :
-      _b.state.template_documents.map(document => (h("div", { class: "attachment" }, h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
+    return (h(Host, null, h("h5", null, "Existing Attachments"), h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.template_documents.map(document => (h("div", { class: "attachment" }, h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), h("div", { class: "filename", title: document.name }, document.name), h("div", { class: "pages" }, h("div", { class: "count" }, document.page_numbers), h("div", { class: "pages-icon", innerHTML: PageCountIcon })), h("div", { class: "trash-icon", innerHTML: TrashIcon, onClick: () => this.handleDelete(document) }))))), h("h5", null, "Attach a New Document"), this.uploading ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.state.template_documents.length) || this.uploading })), this.showDeleteError && (h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
+        this.confirmDeleteDocument = null;
+      } }))));
   }
   static get is() { return "verdocs-template-attachments"; }
   static get originalStyleUrls() {
@@ -104,22 +184,72 @@ export class VerdocsTemplateAttachments {
       }
     };
   }
+  static get states() {
+    return {
+      "uploading": {},
+      "progressLabel": {},
+      "progressPercent": {},
+      "showDeleteError": {},
+      "confirmDeleteDocument": {},
+      "store": {}
+    };
+  }
   static get events() {
     return [{
-        "method": "close",
-        "name": "close",
+        "method": "exit",
+        "name": "exit",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the user cancels the dialog."
+          "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
         },
         "complexType": {
           "original": "any",
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "next",
+        "name": "next",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks the next button."
+        },
+        "complexType": {
+          "original": "{template: ITemplate}",
+          "resolved": "{ template: ITemplate; }",
+          "references": {
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        }
+      }, {
+        "method": "templateUpdate",
+        "name": "templateUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks the next button."
+        },
+        "complexType": {
+          "original": "{template: ITemplate}",
+          "resolved": "{ template: ITemplate; }",
+          "references": {
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        }
       }, {
         "method": "sdkError",
         "name": "sdkError",

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

@@ -3,8 +3,7 @@ export default {
   title: 'Templates/Attachments',
   component: 'verdocs-template-attachments',
   args: {
-    // templateId: '',
-    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+    templateId: '',
   },
   argTypes: {
     onClose: { action: 'close' },
@@ -12,7 +11,7 @@ export default {
 };
 export const Attachments = ({ onClose, templateId }) => templateId
   ? html `
-        <div style="width: 360px; background: #ffffff; padding: 20px; box-sizing: border-box">
+        <div style="width: 400px; background: #ffffff; padding: 20px; box-sizing: border-box">
           <verdocs-template-attachments .templateId=${templateId} @close=${onClose} />
         </div>
       `

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

@@ -71,12 +71,12 @@ export class VerdocsTemplateCreate {
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
         marginTop: '20px',
         marginBottom: '20px',
         fontSize: '16px',
         height: '20px',
-      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating }))));
+      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating })))));
   }
   static get is() { return "verdocs-template-create"; }
   static get originalStyleUrls() {

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

@@ -3,9 +3,8 @@ export default {
   title: 'Templates/Field Properties',
   component: 'verdocs-template-field-properties',
   args: {
-    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
-    fieldName: 'checkbox_groupP1-18',
-    // fieldName: 'textboxP1-2',
+    templateId: '',
+    fieldName: '',
   },
   argTypes: {
     onClose: { action: 'close' },

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

@@ -1,5 +1,6 @@
 import interact from 'interactjs';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { defaultHeight, defaultWidth, getRoleIndex, renderDocumentField, updateCssTransform } from '../../../utils/utils';
@@ -60,9 +61,9 @@ export class VerdocsTemplateFields {
         return;
       }
       this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      console.log(`[FIELDS] Loading template ${this.templateId}`, this.endpoint.session);
+      console.log(`[FIELDS] Loaded template ${this.templateId}`, this.store.state);
       this.selectedRoleName = ((_d = (_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) || '';
-      console.log('Starting with role', this.selectedRoleName);
+      console.log('[FIELDS] Starting with role', this.selectedRoleName);
     }
     catch (e) {
       console.log('[FIELDS] Error with preview session', e);
@@ -239,7 +240,7 @@ export class VerdocsTemplateFields {
       console.log('testing field', fieldName);
       i++;
     } while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
-    console.log('Will use field name', fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
+    console.log('Will use field name', this, fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -249,17 +250,18 @@ export class VerdocsTemplateFields {
     const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
     return { x, y };
   }
-  async handleClickPage(e, page) {
+  async handleClickPage(e, pageNumber) {
     var _a, _b, _c;
     if (this.placing) {
-      console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
-      const pageNumber = page.sequence;
+      console.log('Placing field', this, this.selectedRoleName, this.placing, pageNumber, e.offsetX, e.offsetY);
+      // console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
+      // const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
       const width = defaultWidth(this.placing);
       const height = defaultHeight(this.placing);
       const cachedPage = this.cachedPageInfo[pageNumber];
-      console.log('Cached page', cachedPage);
+      // console.log('Cached page', cachedPage);
       const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
       const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const x = Math.floor(coords.x);
@@ -354,7 +356,8 @@ export class VerdocsTemplateFields {
     }
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
+    console.log('[FIELDS] Rendering');
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -362,9 +365,7 @@ export class VerdocsTemplateFields {
     if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const pages = [...(_b = this.store) === null || _b === void 0 ? void 0 : _b.state.pages];
-    pages.sort((a, b) => a.sequence - b.sequence);
-    const selectableRoles = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ value: role.name, label: role.name }));
+    const selectableRoles = (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.roles.map(role => ({ value: role.name, label: role.name }));
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
       } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
@@ -372,11 +373,12 @@ export class VerdocsTemplateFields {
           // We have empty tooltips on the separators, quick hack...
           this.placing = option.id;
         }
-      } })))), h("div", { class: "pages" }, pages.map(page => {
-      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
+      } })))), h("div", { class: "pages" }, (((_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.template_documents) || []).map(document => {
+      const pageNumbers = integerSequence(1, document.page_numbers);
+      return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
-        ] }));
+        ] })));
     }))));
   }
   static get is() { return "verdocs-template-fields"; }

package/dist/collection/components/templates/verdocs-template-name/verdocs-template-name.css

@@ -1,40 +0,0 @@
-verdocs-template-name {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-}
-verdocs-template-name.loading {
-  min-height: 300px;
-  position: relative;
-  display: block;
-}
-verdocs-template-name.empty {
-  display: none;
-}
-verdocs-template-name form {
-  display: flex;
-  flex-direction: column;
-}
-verdocs-template-name form label {
-  font-size: 16px;
-  font-weight: bold;
-  color: #4c56cb;
-  margin: 0 0 20px 0;
-}
-verdocs-template-name form input {
-  border: none;
-  font-size: 18px;
-  padding: 3px 6px 3px 0;
-  background: transparent;
-  border-bottom: 1px solid #33364b;
-}
-verdocs-template-name form input:focus {
-  outline: none;
-}
-verdocs-template-name .buttons {
-  display: flex;
-  column-gap: 8px;
-  margin-top: 16px;
-  flex-direction: row;
-}
-verdocs-template-name ::placeholder {
-  color: #aaaaaa;
-}

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

@@ -3,8 +3,7 @@ export default {
   title: 'Templates/Name',
   component: 'verdocs-template-name',
   args: {
-    // templateId: '',
-    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+    templateId: '',
   },
   argTypes: {
     onClose: { action: 'close' },

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

@@ -28,7 +28,7 @@ export class VerdocsTemplateProperties {
         console.log('[PROPERTIES] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
       this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
       this.sendReminders = ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.reminder_id) !== null;
     }

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

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Properties',
   component: 'verdocs-template-properties',
   args: {
-    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+    templateId: '',
   },
   argTypes: {
     onExit: { action: 'exit' },

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

@@ -3,8 +3,7 @@ export default {
   title: 'Templates/Reminders',
   component: 'verdocs-template-reminders',
   args: {
-    // templateId: '',
-    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+    templateId: '',
   },
   argTypes: {
     onClose: { action: 'close' },

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

@@ -45,7 +45,7 @@ export class VerdocsTemplateRoleProperties {
         this.email = editingRole.email;
         this.phone = editingRole.phone;
         this.allowDelegation = editingRole.delegator;
-        console.log('Got role', editingRole);
+        console.log('[ROLES] Editing role', editingRole);
       }
     }
     catch (e) {
@@ -71,23 +71,26 @@ export class VerdocsTemplateRoleProperties {
       phone: this.phone,
       delegator: this.allowDelegation,
     })
-      .then(r => {
+      .then(async (r) => {
       var _a;
-      console.log('Update result', r);
+      console.log('[ROLE_PROPERTIES] Update result', r);
       this.saving = false;
       this.dirty = false;
-      const newRoles = [...this.store.state.roles];
-      newRoles.forEach(role => {
-        if (role.name === this.roleName) {
-          role.name = this.name;
-          role.type = this.type;
-          role.full_name = this.fullName;
-          role.email = this.email;
-          role.phone = this.phone;
-          role.delegator = this.allowDelegation;
-        }
-      });
-      this.store.state.roles = newRoles;
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      // this.sortTemplateRoles();
+      // this.renumberTemplateRoles();
+      // const newRoles = [...this.store.state.roles];
+      // newRoles.forEach(role => {
+      //   if (role.name === this.roleName) {
+      //     role.name = this.name;
+      //     role.type = this.type;
+      //     role.full_name = this.fullName;
+      //     role.email = this.email;
+      //     role.phone = this.phone;
+      //     role.delegator = this.allowDelegation;
+      //   }
+      // });
+      // this.store.state.roles = newRoles;
       (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
     })
       .catch(e => {

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

@@ -205,12 +205,15 @@ export class VerdocsTemplateRoles {
       type: 'signer',
       delegator: false,
     })
-      .then(r => {
-      var _a, _b, _c;
+      .then(async (r) => {
+      var _a, _b;
       console.log('[ROLES] Created role', r);
-      this.store.state.roles = [...(_a = this.store) === null || _a === void 0 ? void 0 : _a.state.roles, r];
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      this.sortTemplateRoles();
       this.renumberTemplateRoles();
-      (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ event: 'created-role', endpoint: this.endpoint, template: (_c = this.store) === null || _c === void 0 ? void 0 : _c.state });
+      // this.store.state.roles = [...this.store?.state.roles, r];
+      // this.renumberTemplateRoles();
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'created-role', endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state });
     })
       .catch(e => {
       console.log('[ROLES] Error creating role', e);
@@ -232,6 +235,7 @@ export class VerdocsTemplateRoles {
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
+    console.log('[ROLES] Rendering');
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }

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

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Visibility',
   component: 'verdocs-template-visibility',
   args: {
-    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+    templateId: '',
   },
   argTypes: {
     onClose: { action: 'close' },