@verdocs/web-sdk 1.12.43 → 1.13.0

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

@@ -2,14 +2,12 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-5
 import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-4367eb13.js';
 import { r as renderDocumentField, a as getRoleIndex } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
-import { l as loadTemplate } from './Templates-d94fb9d5.js';
+import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-91a71f46.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.js';
 import './Templates-ca52ef90.js';
 
 const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
@@ -18,39 +16,45 @@ const VerdocsPreview = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
   }
-  // TODO: Move to state store so we can load this one time
-  async componentDidLoad() {
+  async componentWillLoad() {
     var _a, _b, _c;
-    this.endpoint.loadSession();
-    if (!this.templateId) {
-      console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
-      return;
-    }
     try {
-      console.log(`[PREVIEW] Loading template ${this.templateId}`);
-      await loadTemplate(this.endpoint, this.templateId, true);
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[PREVIEW] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      console.log(`[PREVIEW] Loading template ${this.templateId}`, this.endpoint.session);
     }
     catch (e) {
-      console.log('[PREVIEW] Error loading template', e);
+      console.log('[PREVIEW] Error with preview session', 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));
     }
   }
   handlePageRendered(e) {
+    var _a, _b;
     const pageInfo = e.detail;
     // console.log('[PREVIEW] Page rendered', pageInfo);
-    const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
+    const fields = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // console.log('[PREVIEW] Fields on page', fields);
-    fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.role_name), { disabled: true, editable: false, draggable: false }));
+    fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(getRoleNames(this.store), field.role_name), { disabled: true, editable: false, draggable: false }));
   }
   render() {
+    var _a, _b, _c, _d;
     // TODO: Render a better error
-    if (state.loading || !state.template) {
+    if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const pages = [...state.template.pages];
+    const pages = [...(_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, null, pages.map(page => {
       return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [

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

@@ -3,11 +3,9 @@ import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-4367eb13.js';
 import { i as isValidEmail, a as isValidPhone } from './Validators-f110bae2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { s as state } from './templateStore-17c872da.js';
-import { l as loadTemplate } from './Templates-d94fb9d5.js';
+import { g as getTemplateStore } from './TemplateStore-91a71f46.js';
 import { a as getRoleIndex } from './utils-78a752e0.js';
 import { S as SDKError } from './errors-9b5498c8.js';
-import './Primitives-054bc6e5.js';
 import './Templates-ca52ef90.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
@@ -28,6 +26,7 @@ const VerdocsSend = class {
     this.sdkError = createEvent(this, "sdkError", 7);
     this.searchContacts = createEvent(this, "searchContacts", 7);
     this.levels = [];
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
@@ -40,22 +39,25 @@ const VerdocsSend = class {
     this.rolesCompleted = {};
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f;
-    const loadSessionResult = this.endpoint.loadSession();
-    if (!this.templateId) {
-      console.log(`[SEND] Missing required template ID ${this.templateId}`);
-      return;
-    }
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     try {
-      console.log(`[SEND] Loading template ${this.templateId}`);
-      await loadTemplate(this.endpoint, this.templateId, true);
-      if (!((_a = state.template) === null || _a === void 0 ? void 0 : _a.is_sendable)) {
+      const loadSessionResult = this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[SEND] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[SEND] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
         console.warn(`[SEND] Template is not sendable`, this.templateId);
       }
-      if ((_b = state.template) === null || _b === void 0 ? void 0 : _b.roles) {
+      if ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) {
         const rolesAtLevel = {};
         this.rolesCompleted = {};
-        state.template.roles.forEach(role => {
+        (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.roles.forEach(role => {
           const level = role.sequence - 1;
           rolesAtLevel[level] || (rolesAtLevel[level] = []);
           const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -65,18 +67,18 @@ const VerdocsSend = class {
         this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
         this.levels.sort((a, b) => a - b);
       }
+      if ((_g = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _g === void 0 ? void 0 : _g.profile) {
+        this.sessionContacts.push({
+          id: loadSessionResult.session.profile.id,
+          name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
+          email: loadSessionResult.session.profile.email,
+          phone: loadSessionResult.session.profile.phone,
+        });
+      }
     }
     catch (e) {
-      console.log('[SEND] Error loading template', e);
-      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
-    }
-    if ((_f = loadSessionResult.session) === null || _f === void 0 ? void 0 : _f.profile) {
-      this.sessionContacts.push({
-        id: loadSessionResult.session.profile.id,
-        name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
-        email: loadSessionResult.session.profile.email,
-        phone: loadSessionResult.session.profile.phone,
-      });
+      console.log('[SEND] Error with preview session', e);
+      (_h = this.sdkError) === null || _h === void 0 ? void 0 : _h.emit(new SDKError(e.message, (_j = e.response) === null || _j === void 0 ? void 0 : _j.status, (_k = e.response) === null || _k === void 0 ? void 0 : _k.data));
     }
   }
   getLevelIcon(level) {
@@ -100,9 +102,9 @@ const VerdocsSend = class {
     this.showPickerForId = role.id;
   }
   handleSend(e) {
-    var _a;
+    var _a, _b, _c;
     e.stopPropagation();
-    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: state.template.name, template_id: this.templateId });
+    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name, template_id: this.templateId });
   }
   handleCancel(e) {
     var _a;
@@ -110,11 +112,11 @@ const VerdocsSend = class {
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    var _a, _b;
-    const roleNames = (((_a = state.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name) || [];
+    var _a, _b, _c, _d;
+    const roleNames = (((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).map(role => role.name) || [];
     const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
     const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    return (h(Host, { class: { sendable: (_b = state.template) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    return (h(Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
       return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))));

package/dist/esm/verdocs-template-attachments.entry.js

@@ -1,10 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-4367eb13.js';
-import { s as state } from './templateStore-17c872da.js';
-import { l as loadTemplate } from './Templates-d94fb9d5.js';
+import { g as getTemplateStore } from './TemplateStore-91a71f46.js';
 import { S as SDKError } from './errors-9b5498c8.js';
-import './Primitives-054bc6e5.js';
 import './Templates-ca52ef90.js';
 
 const verdocsTemplateAttachmentsCss = "verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#4c56cb}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b;border:1px solid #cccccc}verdocs-template-attachments svg{width:24px;height:24px;fill:#5c6575;margin:2px 10px 0 0}";
@@ -15,35 +13,46 @@ const VerdocsTemplateAttachments = class {
     registerInstance(this, hostRef);
     this.close = createEvent(this, "close", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
-    this.loading = true;
   }
   async componentWillLoad() {
     var _a, _b, _c;
     try {
       this.endpoint.loadSession();
-      await loadTemplate(this.endpoint, this.templateId);
-      this.loading = false;
+      if (!this.templateId) {
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+      this.endpoint.loadSession();
     }
     catch (e) {
-      console.log('[TEMPLATE NAME] Error loading template', e);
-      this.loading = false;
+      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));
     }
   }
   render() {
+    var _a, _b;
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    if (this.loading) {
+    const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
+    if (!templateState.isLoaded) {
       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.
-    if (!this.endpoint.session || !state.template) {
+    // Checking
+    if (!this.endpoint.session || !templateState.profile_id) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("h5", null, "Attachments"), state.template.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, "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' : '', ")")))));
   }
 };
 VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;