@verdocs/web-sdk 4.2.157 → 5.0.0

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

@@ -1,9 +1,7 @@
-import { integerSequence, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { getTemplate, integerSequence, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { Host, h, Fragment } from "@stencil/core";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
-import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateStore } from "../../../utils/TemplateStore";
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 /**
  * Display a template preview experience. This will display the template's attached
  * documents with signing fields overlaid on each page. Fields will be color-coded
@@ -18,16 +16,31 @@ import { SDKError } from "../../../utils/errors";
  */
 export class VerdocsPreview {
     constructor() {
-        this.templateStore = null;
-        this.fieldStore = null;
-        this.roleStore = null;
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[PREVIEW] Template ID changed', newTemplateId);
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+        this.listenToTemplate();
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -41,40 +54,25 @@ export class VerdocsPreview {
                 console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
                 return;
             }
-            return this.loadTemplate(this.templateId);
+            this.listenToTemplate();
         }
         catch (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));
         }
     }
-    async loadTemplate(templateId) {
-        if (templateId) {
-            getTemplateStore(this.endpoint, templateId, false)
-                .then(ts => {
-                this.templateStore = ts;
-                this.fieldStore = getTemplateFieldStore(this.templateId);
-                this.roleStore = getTemplateRoleStore(this.templateId);
-                this.loading = false;
-            })
-                .catch(e => {
-                console.log('Unable to load template', e);
-                throw e;
-            });
-        }
-    }
     handlePageRendered(_e) {
         // const pageInfo = e.detail as IDocumentPageInfo;
-        // const fields = this.templateStore?.state?.fields.filter(field => field.page === pageInfo.pageNumber);
+        // const fields = (this.template?.fields || []).filter(field => field.page === pageInfo.pageNumber);
         // console.log('[PREVIEW] Page rendered', pageInfo, fields);
         // fields.forEach(field => renderDocumentField(field, pageInfo, {disabled: true, editable: false, draggable: false}));
     }
     render() {
-        var _a, _b;
+        var _a;
         if (this.loading) {
             return (h(Host, null, h("verdocs-loader", null)));
         }
-        return (h(Host, null, (((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) || []).map(document => {
+        return (h(Host, null, (((_a = this.template) === null || _a === void 0 ? void 0 : _a.documents) || []).map(document => {
             const pageNumbers = integerSequence(1, document.pages);
             return (h(Fragment, null, pageNumbers.map(pageNumber => {
                 var _a;
@@ -143,7 +141,8 @@ export class VerdocsPreview {
     }
     static get states() {
         return {
-            "loading": {}
+            "loading": {},
+            "template": {}
         };
     }
     static get events() {

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

@@ -1,9 +1,9 @@
 import { h, Host } from "@stencil/core";
-import { createEnvelope, formatFullName, getOrganizationContacts, getRGBA, isValidEmail, VerdocsEndpoint } from "@verdocs/js-sdk";
-import { getRoleIndex, getRoleNames, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateStore } from "../../../utils/TemplateStore";
+import { createEnvelope, formatFullName, getTemplate, getOrganizationContacts, getRGBA, isValidEmail, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { getRoleIndex, getRoleNames } from "../../../utils/Templates";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
 const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
 const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
@@ -27,6 +27,7 @@ const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"
  */
 export class VerdocsSend {
     constructor() {
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.environment = '';
@@ -35,15 +36,33 @@ export class VerdocsSend {
         this.sessionContacts = [];
         this.sending = false;
         this.rolesCompleted = {};
-        this.templateStore = null;
-        this.roleStore = null;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[SEND] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+            this.rolesCompleted = {};
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     async reset() {
         this.rolesCompleted = {};
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[SEND] Template ID changed', newTemplateId);
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+        this.listenToTemplate();
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -80,37 +99,18 @@ export class VerdocsSend {
                 console.log(`[SEND] Missing required template ID ${this.templateId}`);
                 return;
             }
-            return this.loadTemplate(this.templateId);
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[SEND] Error with send 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));
         }
     }
-    async loadTemplate(templateId) {
-        var _a, _b, _c, _d, _e;
-        if (!templateId) {
-            return;
-        }
-        try {
-            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
-            this.roleStore = getTemplateRoleStore(templateId);
-            this.recomputeRolesCompleted();
-            if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
-                console.warn(`[SEND] Template is not sendable`, templateId);
-            }
-        }
-        catch (e) {
-            console.log('[SEND] Error with preview session', 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));
-        }
-    }
     recomputeRolesCompleted() {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = {};
         this.rolesCompleted = {};
-        roles.forEach(role => {
+        const rolesAtLevel = {};
+        (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).forEach(role => {
             const level = role.sequence - 1;
             rolesAtLevel[level] || (rolesAtLevel[level] = []);
             const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -124,15 +124,13 @@ export class VerdocsSend {
     }
     getLevels() {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const levels = [...new Set(roles.map(role => role.sequence - 1))];
+        const levels = [...new Set((((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.sequence - 1))];
         levels.sort((a, b) => a - b);
         return levels;
     }
     getRolesAtLevel(level) {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = roles
+        const rolesAtLevel = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || [])
             .filter(role => role.sequence - 1 === level)
             .map((role, index) => ({
             ...role,
@@ -165,7 +163,7 @@ export class VerdocsSend {
         this.showPickerForId = role.id;
     }
     handleSend(e) {
-        var _a, _b, _c;
+        var _a, _b;
         if (this.sending) {
             console.log('[SEND] Skipping duplicate send', e);
             return;
@@ -177,7 +175,7 @@ export class VerdocsSend {
         (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
         const details = {
             template_id: this.templateId,
-            name: ((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name) || '',
+            name: ((_b = this.template) === null || _b === void 0 ? void 0 : _b.name) || 'New Envelope',
             environment: this.environment,
             initial_reminder: 0,
             followup_reminders: 0,
@@ -188,12 +186,12 @@ export class VerdocsSend {
         console.log('[SEND] Creating envelope', details);
         createEnvelope(this.endpoint, details)
             .then(r => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             console.log('[SEND] Send envelope', r);
             this.reset().catch((e) => console.log('Unknown Error', e));
             this.sending = false;
             (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: ((_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.name) || 'New Envelope', envelope_id: r.id, envelope: r });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: details.name, envelope_id: r.id, envelope: r });
         })
             .catch(e => {
             var _a, _b, _c;
@@ -209,22 +207,25 @@ export class VerdocsSend {
         (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
     }
     render() {
-        var _a, _b;
+        var _a;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
         if (!this.endpoint.session) {
             return (h(Host, { style: { display: 'flex' } }, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         const levels = this.getLevels();
-        const roleNames = getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email));
         // TODO: Reactivate once SMS is re-enabled
         // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
-        const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        // console.log('[SEND] Roles completed', this.rolesCompleted);
-        return (h(Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === 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")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
+        const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
+        return (h(Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.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")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
             var _a, _b, _c, _d;
             const unknown = !role.email;
             const elId = `verdocs-send-recipient-${role.role_name}`;
-            return unknown ? (h("div", { class: "recipient", "data-ri": getRoleIndex(this.roleStore, role.role_name), "data-rn": role.role_name, style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : 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(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
+            const roleIndex = getRoleIndex(this.template, role.role_name);
+            const rgba = getRGBA(roleIndex);
+            return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: { backgroundColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : 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: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
         })))), h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
     }
     static get is() { return "verdocs-send"; }
@@ -307,8 +308,8 @@ export class VerdocsSend {
             "sessionContacts": {},
             "sending": {},
             "rolesCompleted": {},
-            "templateStore": {},
-            "roleStore": {}
+            "loading": {},
+            "template": {}
         };
     }
     static get events() {

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

@@ -5,7 +5,6 @@ import { fullNameToInitials, startSigningSession, deleteEnvelopeFieldAttachment,
 import { getEnvelope, integerSequence, isValidEmail, isValidPhone, submitKbaPin, updateEnvelopeFieldInitials } from "@verdocs/js-sdk";
 import { createInitials, createSignature, envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit, formatFullName } from "@verdocs/js-sdk";
 import { getFieldId, renderDocumentField, saveAttachment, updateDocumentFieldValue } from "../../../utils/utils";
-import { createTemplateFieldStoreFromEnvelope } from "../../../utils/TemplateFieldStore";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
 const inProgressMenuOptions = [
@@ -44,7 +43,6 @@ export class VerdocsSign {
         this.roleId = null;
         this.inviteCode = null;
         this.headerTargetId = null;
-        this.envelope = null;
         this.roleNames = [];
         this.sortedRecipients = [];
         this.recipient = null;
@@ -67,6 +65,8 @@ export class VerdocsSign {
         this.kbaQuestions = [];
         this.showSpinner = false;
         this.kbaChoices = [];
+        this.loading = true;
+        this.envelope = null;
     }
     componentWillLoad() {
         if (!this.endpoint) {
@@ -90,11 +90,12 @@ export class VerdocsSign {
         }
         try {
             console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
+            // NOTE: We don't listen to the store here because we are often an independent
+            // session and might have a different "view" of the envelope.
             const { envelope, recipient } = await startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
             console.log(`[SIGN] Loaded signing session`, envelope, recipient);
             this.recipient = recipient;
             this.envelope = envelope;
-            createTemplateFieldStoreFromEnvelope(this.envelope);
             this.sortedRecipients = [...this.envelope.recipients];
             this.sortedRecipients.sort((a, b) => {
                 return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
@@ -476,7 +477,7 @@ export class VerdocsSign {
                 const updateResult = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
                 this.updateRecipientFieldValue(field.name, updateResult);
                 this.checkRecipientFields();
-                const newEl = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                const newEl = renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
                 this.attachFieldAttributes(pageInfo, field, newEl);
                 this.showSpinner = false;
             }
@@ -494,7 +495,7 @@ export class VerdocsSign {
                 console.log('[SIGN] Deleted attachment', updateResult);
                 this.updateRecipientFieldValue(field.name, updateResult);
                 this.checkRecipientFields();
-                const newEl = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                const newEl = renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
                 this.attachFieldAttributes(pageInfo, field, newEl);
                 this.showSpinner = false;
             }
@@ -532,7 +533,7 @@ export class VerdocsSign {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
+            const el = renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
             }
@@ -550,7 +551,7 @@ export class VerdocsSign {
             this.getRecipientFields()
                 .filter(field => field.page === pageInfo.pageNumber)
                 .forEach(field => {
-                const el = renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
+                const el = renderDocumentField('envelope', field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
                 if (!el) {
                     return;
                 }
@@ -577,7 +578,7 @@ export class VerdocsSign {
             return (h(Host, { class: { agreed: this.agreed } }, h("div", { class: "fatal-error" }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", class: "placeholder", alt: "Placeholder page" }), h("div", { class: "message" }, h("div", { class: "header" }, this.fatalErrorHeader), h("p", null, this.fatalErrorMessage)))));
         }
         if (this.isDone) {
-            return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, envelope: this.envelope, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} 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: (e) => {
+            return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} 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: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.showDone = false;
@@ -670,7 +671,6 @@ export class VerdocsSign {
                 // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
                 // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
                 // field vales (so far) stamped into them.
-                // const templatePage = EnvelopeStore.template?.pages.find(p => p.sequence === page.sequence);
                 // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
                 //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
                 // console.log('tp', templatePage, page);
@@ -796,7 +796,6 @@ export class VerdocsSign {
     }
     static get states() {
         return {
-            "envelope": {},
             "roleNames": {},
             "sortedRecipients": {},
             "recipient": {},
@@ -818,7 +817,9 @@ export class VerdocsSign {
             "kbaStep": {},
             "kbaQuestions": {},
             "showSpinner": {},
-            "kbaChoices": {}
+            "kbaChoices": {},
+            "loading": {},
+            "envelope": {}
         };
     }
     static get events() {

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

@@ -1,8 +1,8 @@
 import { cancelEnvelope, getDocumentDownloadLink, getEnvelope, integerSequence, userCanCancelEnvelope, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { saveEnvelopesAsZip } from "../../../utils/utils";
-// import {IDocumentPageInfo} from '../../../utils/Types';
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 /**
  * Render the documents attached to an envelope in read-only (view) mode. All documents are
  * displayed in order.
@@ -16,14 +16,15 @@ import { SDKError } from "../../../utils/errors";
  */
 export class VerdocsView {
     constructor() {
+        this.envelopeListenerId = null;
         this.endpoint = null;
         this.envelopeId = '';
-        this.envelope = null;
         this.headerTargetId = null;
         this.canceling = false;
-        this.roleNames = [];
         this.showCancelDone = false;
         this.showLoadError = false;
+        this.loading = true;
+        this.envelope = null;
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -35,12 +36,12 @@ export class VerdocsView {
             console.error(`[VIEW] Missing required envelopeId`);
             return;
         }
+        this.listenToEnvelope();
         if (!this.envelope) {
             try {
                 console.log('[VIEW] Loading envelope...');
                 this.envelope = await getEnvelope(this.endpoint, this.envelopeId);
                 console.log('[VIEW] Loaded envelope', this.envelope);
-                this.roleNames = this.envelope.recipients.map(r => r.role_name);
             }
             catch (e) {
                 this.showLoadError = true;
@@ -57,6 +58,23 @@ export class VerdocsView {
             headerTarget.append(headerEl);
         }
     }
+    disconnectedCallback() {
+        this.unlistenToEnvelope();
+    }
+    async listenToEnvelope() {
+        console.log('[SIDEBAR] Loading envelope', this.envelopeId);
+        this.unlistenToEnvelope();
+        Store.subscribe('envelopes', this.envelopeId, () => getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
+            this.envelope = envelope;
+            this.loading = false;
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
+        }
+    }
     handlePageRendered(_e) {
         // const pageInfo = e.detail as IDocumentPageInfo;
         // console.log('[VIEW] Page rendered', pageInfo);
@@ -133,6 +151,9 @@ export class VerdocsView {
     }
     render() {
         var _a;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
         if (this.showLoadError) {
             return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to View Envelope", message: `Sorry, that envelope is not valid.`, buttonLabel: "OK", onNext: () => {
                     this.showLoadError = false;
@@ -230,28 +251,6 @@ export class VerdocsView {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "envelope": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "IEnvelope | null",
-                    "resolved": "IEnvelope",
-                    "references": {
-                        "IEnvelope": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::IEnvelope"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If the envelope is already loaded, the parent may pass it in directly."
-                },
-                "defaultValue": "null"
-            },
             "headerTargetId": {
                 "type": "string",
                 "mutable": false,
@@ -275,9 +274,10 @@ export class VerdocsView {
     static get states() {
         return {
             "canceling": {},
-            "roleNames": {},
             "showCancelDone": {},
-            "showLoadError": {}
+            "showLoadError": {},
+            "loading": {},
+            "envelope": {}
         };
     }
     static get events() {

package/dist/collection/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.js

@@ -1,26 +1,27 @@
 import { Host, h } from "@stencil/core";
-import { formatFullName, getInPersonLink, VerdocsEndpoint } from "@verdocs/js-sdk";
-import { getEnvelopeStore } from "../../../utils/EnvelopeStore";
+import { formatFullName, getEnvelope, getInPersonLink, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 /**
  * Displays a single recipient from an envelope, with the opportunity to copy an in-person
  * signing link for that recipient to use.
  */
 export class VerdocsEnvelopeRecipientLink {
     constructor() {
-        this.store = null;
-        this.recipient = null;
+        this.envelopeListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.envelopeId = '';
         this.roleName = '';
         this.isOpen = undefined;
-        this.loading = true;
         this.gettingLink = true;
         this.link = '';
+        this.loading = true;
+        this.envelope = null;
+        this.recipient = null;
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.envelopeId) {
@@ -31,21 +32,37 @@ export class VerdocsEnvelopeRecipientLink {
                 console.log('[RECIPIENT_LINK] Unable to start session, must be authenticated');
                 return;
             }
-            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-            this.loading = false;
-            this.gettingLink = true;
-            this.recipient = (_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients) === null || _c === void 0 ? void 0 : _c.find(r => r.role_name === this.roleName);
-            this.getLink(this.recipient);
+            this.listenToEnvelope();
         }
         catch (e) {
             console.log('[RECIPIENT_LINK] Error loading envelope', 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));
+            (_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));
+        }
+    }
+    disconnectedCallback() {
+        this.unlistenToEnvelope();
+    }
+    async listenToEnvelope() {
+        console.log('[SIDEBAR] Loading envelope', this.envelopeId);
+        this.unlistenToEnvelope();
+        Store.subscribe('envelopes', this.envelopeId, () => getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
+            var _a;
+            this.envelope = envelope;
+            this.loading = false;
+            this.recipient = (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).find(r => r.role_name === this.roleName);
+            this.getLink(this.recipient);
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
         }
     }
     handleDone(e) {
         var _a;
         e.preventDefault();
-        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.store.state });
+        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.envelope });
     }
     copyLink(link) {
         navigator.clipboard
@@ -158,9 +175,11 @@ export class VerdocsEnvelopeRecipientLink {
     static get states() {
         return {
             "isOpen": {},
-            "loading": {},
             "gettingLink": {},
-            "link": {}
+            "link": {},
+            "loading": {},
+            "envelope": {},
+            "recipient": {}
         };
     }
     static get events() {