@verdocs/web-sdk 4.2.158 → 5.0.0

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

@@ -1,25 +1,26 @@
-import { formatFullName, getInPersonLink, getRecipientsWithActions, recipientCanAct, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { formatFullName, getEnvelope, getInPersonLink, getRecipientsWithActions, recipientCanAct, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { Host, h } from "@stencil/core";
-import { getEnvelopeStore } from "../../../utils/EnvelopeStore";
 // import {VerdocsToast} from '../../../utils/Toast';
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 /**
  * Displays a list of recipients with options to get in-person signing links for each one.
  */
 export class VerdocsEnvelopeRecipientSummary {
     constructor() {
-        this.store = null;
+        this.envelopeListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.envelopeId = '';
         this.canSendAnother = true;
         this.canView = true;
         this.canDone = true;
         this.isOpen = undefined;
-        this.loading = true;
         this.recipientStatusIcons = [];
         this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
         this.gettingLinks = {};
         this.links = {};
+        this.loading = true;
+        this.envelope = null;
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -33,35 +34,51 @@ export class VerdocsEnvelopeRecipientSummary {
                 console.log('[RECIPIENTS] Unable to start session, must be authenticated');
                 return;
             }
-            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-            this.sortEnvelopeRecipients();
-            this.loading = false;
+            this.listenToEnvelope();
         }
         catch (e) {
             console.log('[RECIPIENTS] Error loading envelope', 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));
         }
     }
+    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;
+            this.sortEnvelopeRecipients();
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
+        }
+    }
     sortEnvelopeRecipients() {
-        var _a, _b;
-        (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients.sort((a, b) => {
+        var _a;
+        (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).sort((a, b) => {
             return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
         });
     }
     handleAnother(e) {
         var _a;
         e.preventDefault();
-        (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.store.state });
+        (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.envelope });
     }
     handleView(e) {
         var _a;
         e.preventDefault();
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.store.state });
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.envelope });
     }
     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
@@ -93,12 +110,12 @@ export class VerdocsEnvelopeRecipientSummary {
         });
     }
     render() {
-        var _a, _b;
+        var _a;
         if (this.loading) {
             return h(Host, null);
         }
-        return (h(Host, null, h("div", { class: "summary-content" }, h("h1", { class: "summary-title" }, "Recipient Summary"), h("div", { class: "summary-rows" }, (((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients) || []).map(recipient => {
-            const recipientsWithActions = getRecipientsWithActions(this.store.state);
+        return (h(Host, null, h("div", { class: "summary-content" }, h("h1", { class: "summary-title" }, "Recipient Summary"), h("div", { class: "summary-rows" }, (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).map(recipient => {
+            const recipientsWithActions = getRecipientsWithActions(this.envelope);
             const showLinkButton = recipientCanAct(recipient, recipientsWithActions);
             const link = this.links[recipient.role_name];
             const gettingLink = this.gettingLinks[recipient.role_name];
@@ -218,11 +235,12 @@ export class VerdocsEnvelopeRecipientSummary {
     static get states() {
         return {
             "isOpen": {},
-            "loading": {},
             "recipientStatusIcons": {},
             "containerId": {},
             "gettingLinks": {},
-            "links": {}
+            "links": {},
+            "loading": {},
+            "envelope": {}
         };
     }
     static get events() {

package/dist/collection/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js

@@ -1,10 +1,10 @@
 import { format } from "date-fns";
 import { h, Fragment, Host } from "@stencil/core";
-import { cancelEnvelope, capitalize, formatFullName, resendInvitation, updateEnvelope, userIsEnvelopeOwner, VerdocsEndpoint } from "@verdocs/js-sdk";
-import { getEnvelopeStore, updateStoreEnvelope } from "../../../utils/EnvelopeStore";
+import { cancelEnvelope, capitalize, formatFullName, getEnvelope, resendInvitation, updateEnvelope, userIsEnvelopeOwner, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { FORMAT_TIMESTAMP } from "../../../utils/Types";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
 const InformationCircle = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>`;
 const Users = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>`;
@@ -37,21 +37,22 @@ const ActivityIcons = {
  */
 export class VerdocsEnvelopeSidebar {
     constructor() {
-        this.store = null;
+        this.envelopeListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.envelopeId = '';
         this.activeTab = 1;
         this.panelOpen = false;
         this.showRecipientDialog = '';
         this.showCancelDialog = false;
-        this.loading = true;
         this.remindersEnabled = false;
         this.updatingReminders = false;
         this.initialReminder = null;
         this.followupReminders = null;
+        this.loading = true;
+        this.envelope = null;
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.envelopeId) {
@@ -62,21 +63,38 @@ export class VerdocsEnvelopeSidebar {
                 console.log('[SIDEBAR] Unable to start session, must be authenticated');
                 return;
             }
-            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-            this.sortEnvelopeRecipients();
-            this.initialReminder = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.initial_reminder;
-            this.followupReminders = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.followup_reminders;
-            this.remindersEnabled = !!this.initialReminder;
-            this.loading = false;
+            this.listenToEnvelope();
         }
         catch (e) {
             console.log('[SIDEBAR] Error loading envelope', e);
-            (_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));
+            (_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, _b;
+            this.envelope = envelope;
+            this.loading = false;
+            this.sortEnvelopeRecipients();
+            this.initialReminder = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.initial_reminder;
+            this.followupReminders = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.followup_reminders;
+            this.remindersEnabled = !!this.initialReminder;
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
         }
     }
     sortEnvelopeRecipients() {
-        var _a, _b;
-        (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients.sort((a, b) => {
+        var _a;
+        (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).sort((a, b) => {
             return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
         });
     }
@@ -88,12 +106,12 @@ export class VerdocsEnvelopeSidebar {
     }
     // TODO: Refactor to a common library?
     canResendRecipient(recipient) {
-        var _a, _b;
+        var _a;
         return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
-            !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
+            !['complete', 'declined', 'canceled'].includes((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.status));
     }
     handleRecipientAction(recipient, id) {
-        var _a, _b;
+        var _a;
         console.log('[SIDEBAR] Recipient action', id, recipient);
         switch (id) {
             case 'reminder':
@@ -116,20 +134,22 @@ export class VerdocsEnvelopeSidebar {
                 VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
                 break;
         }
-        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: id });
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: id });
     }
     handleCancelEnvelope() {
         this.loading = true;
         cancelEnvelope(this.endpoint, this.envelopeId)
             .then(async (r) => {
-            var _a, _b;
+            var _a;
             console.log('[SIDEBAR] Envelope canceled', r);
             VerdocsToast('Envelope canceled', { style: 'success' });
-            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-            this.sortEnvelopeRecipients();
+            // TODO: Use returned value instead?
+            const newEnvelope = JSON.parse(JSON.stringify(this.envelope));
+            newEnvelope.status = 'canceled';
+            Store.updateEnvelope(this.envelopeId, newEnvelope);
             this.loading = false;
             this.panelOpen = false;
-            (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'canceled' });
+            (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: newEnvelope, event: 'canceled' });
         })
             .catch(e => {
             console.log('[SIDEBAR] Error canceling envelope', e);
@@ -138,22 +158,22 @@ export class VerdocsEnvelopeSidebar {
         });
     }
     prepareHistoryEntries() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f;
         const entries = [];
-        const histories = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.history_entries) || [];
-        entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.created_at) });
-        if (((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.status) === 'complete') {
-            entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.updated_at) });
+        const histories = ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.history_entries) || [];
+        entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date((_b = this.envelope) === null || _b === void 0 ? void 0 : _b.created_at) });
+        if (((_c = this.envelope) === null || _c === void 0 ? void 0 : _c.status) === 'complete') {
+            entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_d = this.envelope) === null || _d === void 0 ? void 0 : _d.updated_at) });
         }
         // TODO: Shift back to server-side generating these events? We'll still need
         // to tolerate both cases here for a while.
         const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
-        if (((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.status) === 'canceled' && !ownerCanceled) {
-            entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.canceled_at) });
+        if (((_e = this.envelope) === null || _e === void 0 ? void 0 : _e.status) === 'canceled' && !ownerCanceled) {
+            entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_f = this.envelope) === null || _f === void 0 ? void 0 : _f.canceled_at) });
         }
         histories.forEach(history => {
             var _a;
-            const recipient = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.recipients.find(recipient => recipient.role_name === history.role_name);
+            const recipient = (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).find(recipient => recipient.role_name === history.role_name);
             const fullName = formatFullName(recipient);
             switch (history.event.toLowerCase()) {
                 case 'recipient:signed':
@@ -269,7 +289,7 @@ export class VerdocsEnvelopeSidebar {
     // canModify(recipient: IRecipient) {
     //   const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
     //   const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
-    //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.store?.state?.status) === -1;
+    //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.envelope?.status) === -1;
     // }
     handleToggleReminders() {
         if (this.remindersEnabled) {
@@ -285,32 +305,33 @@ export class VerdocsEnvelopeSidebar {
         updateEnvelope(this.endpoint, this.envelopeId, { initial_reminder, followup_reminders })
             .then(envelope => {
             console.log('Updated', envelope);
-            updateStoreEnvelope(this.store, envelope);
+            Store.updateEnvelope(this.envelopeId, envelope);
             this.initialReminder = envelope.initial_reminder;
             this.followupReminders = envelope.followup_reminders;
             this.remindersEnabled = !!envelope.initial_reminder;
             this.updatingReminders = false;
         })
             .catch(e => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c;
             console.log('Error updating envelope', e);
-            this.initialReminder = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.initial_reminder;
-            this.followupReminders = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.followup_reminders;
-            this.remindersEnabled = !!((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.initial_reminder);
+            this.initialReminder = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.initial_reminder;
+            this.followupReminders = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.followup_reminders;
+            this.remindersEnabled = !!((_c = this.envelope) === null || _c === void 0 ? void 0 : _c.initial_reminder);
             this.updatingReminders = false;
             alert(e.response.data.error);
         });
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-        if (!this.store.state) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (this.loading) {
+            // We don't show a loading indicator for the sidebar, to avoid FOUS
             return h(Host, null);
         }
-        const isEnvelopeOwner = userIsEnvelopeOwner(this.endpoint.profile, this.store.state);
+        const isEnvelopeOwner = userIsEnvelopeOwner(this.endpoint.profile, this.envelope);
         const historyEntries = this.prepareHistoryEntries();
-        const functionsDisabled = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status) !== 'pending' && ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.status) !== 'in progress';
-        return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, capitalize((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.status)), h("div", { class: "label" }, "Owner ID"), h("div", { class: "value" }, (_p = (_o = this.store) === null || _o === void 0 ? void 0 : _o.state) === null || _p === void 0 ? void 0 : _p.profile_id), h("div", { class: "label" }, "Owner Name"), h("div", { class: "value" }, formatFullName((_r = (_q = this.store) === null || _q === void 0 ? void 0 : _q.state) === null || _r === void 0 ? void 0 : _r.profile)), h("div", { class: "label" }, "Owner Email"), h("div", { class: "value" }, (_u = (_t = (_s = this.store) === null || _s === void 0 ? void 0 : _s.state) === null || _t === void 0 ? void 0 : _t.profile) === null || _u === void 0 ? void 0 : _u.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), (_w = (_v = this.store) === null || _v === void 0 ? void 0 : _v.state) === null || _w === void 0 ? void 0 :
-            _w.recipients.map((recipient, index) => {
+        const functionsDisabled = ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.status) !== 'pending' && ((_b = this.envelope) === null || _b === void 0 ? void 0 : _b.status) !== 'in progress';
+        return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, (_c = this.envelope) === null || _c === void 0 ? void 0 : _c.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date((_d = this.envelope) === null || _d === void 0 ? void 0 : _d.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date((_e = this.envelope) === null || _e === void 0 ? void 0 : _e.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, capitalize((_f = this.envelope) === null || _f === void 0 ? void 0 : _f.status)), h("div", { class: "label" }, "Owner ID"), h("div", { class: "value" }, (_g = this.envelope) === null || _g === void 0 ? void 0 : _g.profile_id), h("div", { class: "label" }, "Owner Name"), h("div", { class: "value" }, formatFullName((_h = this.envelope) === null || _h === void 0 ? void 0 : _h.profile)), h("div", { class: "label" }, "Owner Email"), h("div", { class: "value" }, (_k = (_j = this.envelope) === null || _j === void 0 ? void 0 : _j.profile) === null || _k === void 0 ? void 0 : _k.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), (_l = this.envelope) === null || _l === void 0 ? void 0 :
+            _l.recipients.map((recipient, index) => {
                 const canGetInPersonLink = recipient.status !== 'submitted' && recipient.status !== 'canceled' && recipient.status !== 'declined';
                 const canSendReminder = this.canResendRecipient(recipient);
                 const fullName = formatFullName(recipient);
@@ -327,7 +348,7 @@ export class VerdocsEnvelopeSidebar {
             } })), h("div", { class: "form-row" }, h("div", { class: "form-label" }, "Follow-up Reminders:"), h("verdocs-text-input", { placeholder: "In hours...", disabled: functionsDisabled || this.updatingReminders, value: String(Math.floor(this.followupReminders / MS_PER_DAY)), onBlur: (e) => {
                 this.followupReminders = Number(e.target.value) * MS_PER_DAY;
                 this.handleSetReminders(this.initialReminder, this.followupReminders);
-            } })), h("div", { class: "form-row" }, h("div", { class: "form-label" }, "Next Reminder:"), h("div", { style: { color: '#dddddd' } }, format(new Date((_y = (_x = this.store) === null || _x === void 0 ? void 0 : _x.state) === null || _y === void 0 ? void 0 : _y.next_reminder), 'P p'))))))), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Envelope", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
+            } })), h("div", { class: "form-row" }, h("div", { class: "form-label" }, "Next Reminder:"), h("div", { style: { color: '#dddddd' } }, format(new Date((_m = this.envelope) === null || _m === void 0 ? void 0 : _m.next_reminder), 'P p'))))))), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Envelope", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
                 this.showCancelDialog = false;
                 this.handleCancelEnvelope();
             } }))));
@@ -393,11 +414,12 @@ export class VerdocsEnvelopeSidebar {
             "panelOpen": {},
             "showRecipientDialog": {},
             "showCancelDialog": {},
-            "loading": {},
             "remindersEnabled": {},
             "updatingReminders": {},
             "initialReminder": {},
-            "followupReminders": {}
+            "followupReminders": {},
+            "loading": {},
+            "envelope": {}
         };
     }
     static get events() {

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

@@ -1,18 +1,14 @@
 import { getRGBA, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { SettingsIcon } from "../../../utils/Icons";
+import { Store } from "../../../utils/Datastore";
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
-// const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
 const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#339933" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-check"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m9 15 2 2 4-4"/></svg>`;
 /**
  * Displays an attachment field.
  */
 export class VerdocsFieldAttachment {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
         this.handleUploadNext = (e) => {
             var _a;
             console.log('Upload next', e);
@@ -29,7 +25,8 @@ export class VerdocsFieldAttachment {
             (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldname });
         };
         this.endpoint = VerdocsEndpoint.getDefault();
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -63,18 +60,14 @@ export class VerdocsFieldAttachment {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     handleShow() {
         this.dialogOpen = true;
     }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', value = '', label = '', settings = {} } = field || {};
-        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        const { required = false, value = '', label = '', settings = {} } = field || {};
+        const backgroundColor = getRGBA(index);
         const hasFile = value || !!this.selectedFile;
         if (done) {
             return (h(Host, { class: { done } }, h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon })));
@@ -82,7 +75,7 @@ export class VerdocsFieldAttachment {
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -127,7 +120,25 @@ export class VerdocsFieldAttachment {
                 },
                 "defaultValue": "VerdocsEndpoint.getDefault()"
             },
-            "templateid": {
+            "source": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'template' | 'envelope'",
+                    "resolved": "\"envelope\" | \"template\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fields may be attached to templates or envelopes, but only template fields may be edited."
+                },
+                "attribute": "source",
+                "reflect": true,
+                "defaultValue": "'template'"
+            },
+            "sourceid": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -139,9 +150,9 @@ export class VerdocsFieldAttachment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+                    "text": "The source template or envelope ID the field is found in."
                 },
-                "attribute": "templateid",
+                "attribute": "sourceid",
                 "reflect": true,
                 "defaultValue": "''"
             },

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

@@ -1,16 +1,14 @@
 import { getRGBA } from "@verdocs/js-sdk";
 import { Fragment, h, Host } from "@stencil/core";
-import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { SettingsIcon } from "../../../utils/Icons";
+import { Store } from "../../../utils/Datastore";
 /**
  * Displays a checkbox.
  */
 export class VerdocsFieldCheckbox {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.done = false;
@@ -41,25 +39,19 @@ export class VerdocsFieldCheckbox {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1, focused } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', label = '', value = false } = field || {};
-        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        const fieldId = `${fieldname}`;
-        // const fieldId = `${fieldname}-${id}`;
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        const { required = false, label = '', value = false } = field || {};
+        const backgroundColor = getRGBA(index);
         const checked = value === 'true';
         if (done) {
             return h(Host, { class: { done } }, checked ? '✓' : '☐');
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldId }, h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required }), h("span", null), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldname }, h("input", { id: fieldname, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required }), h("span", null), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -82,7 +74,25 @@ export class VerdocsFieldCheckbox {
     }
     static get properties() {
         return {
-            "templateid": {
+            "source": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'template' | 'envelope'",
+                    "resolved": "\"envelope\" | \"template\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fields may be attached to templates or envelopes, but only template fields may be edited."
+                },
+                "attribute": "source",
+                "reflect": true,
+                "defaultValue": "'template'"
+            },
+            "sourceid": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -94,9 +104,9 @@ export class VerdocsFieldCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+                    "text": "The source template or envelope ID the field is found in."
                 },
-                "attribute": "templateid",
+                "attribute": "sourceid",
                 "reflect": true,
                 "defaultValue": "''"
             },