@verdocs/web-sdk 1.12.21 → 1.12.22

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

@@ -1,9 +1,8 @@
+import { format } from 'date-fns';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { throttledGetEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
 import { h, Host } from '@stencil/core';
-import { getEnvelopeById } from '../../../utils/Envelopes';
-import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
-import { format } from 'date-fns';
 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>`;
 const ClipboardDocuments = `<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="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>`;
@@ -36,6 +35,8 @@ export class VerdocsEnvelopeSidebar {
   constructor() {
     this.endpoint = VerdocsEndpoint.getDefault();
     this.envelopeId = '';
+    this.envelope = null;
+    this.roleNames = [];
     this.activeTab = 1;
     this.panelOpen = false;
   }
@@ -44,14 +45,15 @@ export class VerdocsEnvelopeSidebar {
   }
   // TODO: Handling signing vs preview-as-user cases
   // TODO: Handle anonymous case and failure to load due to not being logged in
-  async componentDidLoad() {
+  async componentWillRender() {
     var _a, _b, _c;
     if (!this.envelopeId) {
       console.error(`[SIDEBAR] Missing required envelopeId`);
       return;
     }
     try {
-      await getEnvelopeById(this.endpoint, this.envelopeId);
+      this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+      this.roleNames = this.envelope.recipients.map(r => r.role_name);
     }
     catch (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));
@@ -64,12 +66,12 @@ export class VerdocsEnvelopeSidebar {
   // TODO: Refactor to a common library?
   canResendRecipient(recipient) {
     return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
-      !['complete', 'declined', 'canceled'].includes(EnvelopeStore.envelope.status));
+      !['complete', 'declined', 'canceled'].includes(this.envelope.status));
   }
   canModifyRecipient(recipient) {
     return (!recipient.claimed && //
       !['declined', 'signed', 'submitted', 'canceled'].includes(recipient.status) &&
-      !['complete', 'declined', 'canceled'].includes(EnvelopeStore.envelope.status));
+      !['complete', 'declined', 'canceled'].includes(this.envelope.status));
   }
   handleRecipientAction(recipient, id) {
     var _a;
@@ -81,21 +83,21 @@ export class VerdocsEnvelopeSidebar {
       case 'details':
         break;
     }
-    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: id });
+    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: id });
   }
   prepareHistoryEntries() {
     const entries = [];
-    const histories = EnvelopeStore.envelope.histories || [];
-    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date(EnvelopeStore.envelope.created_at) });
-    if (EnvelopeStore.envelope.status === 'complete') {
-      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date(EnvelopeStore.envelope.updated_at) });
+    const histories = this.envelope.histories || [];
+    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date(this.envelope.created_at) });
+    if (this.envelope.status === 'complete') {
+      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date(this.envelope.updated_at) });
     }
     const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
-    if (EnvelopeStore.envelope.status === 'canceled' && !ownerCanceled) {
-      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date(EnvelopeStore.envelope.canceled_at) });
+    if (this.envelope.status === 'canceled' && !ownerCanceled) {
+      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date(this.envelope.canceled_at) });
     }
     histories.forEach(history => {
-      const user = EnvelopeStore.envelope.recipients.find(recipient => recipient.role_name === history.role_name);
+      const user = this.envelope.recipients.find(recipient => recipient.role_name === history.role_name);
       const name = (user === null || user === void 0 ? void 0 : user.full_name) || '';
       switch (history.event.toLowerCase()) {
         case 'recipient:signed':
@@ -199,15 +201,15 @@ export class VerdocsEnvelopeSidebar {
   }
   render() {
     var _a, _b, _c;
-    if (!EnvelopeStore.envelope) {
+    if (!this.envelope) {
       return h(Host, null);
     }
     const session = this.endpoint.getSession();
-    const isEnvelopeOwner = session.profile_id === EnvelopeStore.envelope.profile_id; // TODO: What about org admins?
+    const isEnvelopeOwner = session.profile_id === this.envelope.profile_id; // TODO: What about org admins?
     const historyEntries = this.prepareHistoryEntries();
-    return (h(Host, { class: this.panelOpen ? 'open' : '', "data-r": EnvelopeStore.updateCount }, h("div", { class: "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" }, EnvelopeStore.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, EnvelopeStore.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, EnvelopeStore.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = EnvelopeStore.envelope.profile) === null || _a === void 0 ? void 0 :
-      _a.first_name, " ", (_b = EnvelopeStore.envelope.profile) === null || _b === void 0 ? void 0 :
-      _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = EnvelopeStore.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), EnvelopeStore.envelope.recipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.type), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
+    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "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" }, this.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(this.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, this.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, this.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = this.envelope.profile) === null || _a === void 0 ? void 0 :
+      _a.first_name, " ", (_b = this.envelope.profile) === null || _b === void 0 ? void 0 :
+      _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = this.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), this.envelope.recipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.type), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },
         { id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient) },
         { id: 'inperson', label: 'Get In-Person Link', disabled: !this.canModifyRecipient(recipient) || !['invited', 'opened'].includes(recipient.status) },
@@ -271,6 +273,8 @@ export class VerdocsEnvelopeSidebar {
   }
   static get states() {
     return {
+      "envelope": {},
+      "roleNames": {},
       "activeTab": {},
       "panelOpen": {}
     };

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

@@ -1,15 +1,13 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
 import { createInitials } from '@verdocs/js-sdk/Envelopes/Initials';
-import { createSignature } from '@verdocs/js-sdk/Envelopes/Signatures';
 import { fullNameToInitials } from '@verdocs/js-sdk/Utils/Primitives';
+import { createSignature } from '@verdocs/js-sdk/Envelopes/Signatures';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
 import { Host, Fragment, h } from '@stencil/core';
-import { updateEnvelopeFieldInitials, updateEnvelopeFieldSignature } from '@verdocs/js-sdk/Envelopes/Envelopes';
 import { envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit } from '@verdocs/js-sdk/Envelopes/Recipients';
+import { throttledGetEnvelope, updateEnvelopeFieldInitials, updateEnvelopeFieldSignature } from '@verdocs/js-sdk/Envelopes/Envelopes';
 import { getFieldId, getRoleIndex, renderDocumentField, saveAttachment, updateDocumentFieldValue } from '../../../utils/utils';
-import { getEnvelopeById } from '../../../utils/Envelopes';
-import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
 const inProgressMenuOptions = [
   { id: 'later', label: 'Finish Later' },
@@ -47,6 +45,8 @@ export class VerdocsSign {
     this.roleId = null;
     this.inviteCode = null;
     this.headerTargetId = null;
+    this.envelope = null;
+    this.roleNames = [];
     this.recipient = null;
     this.signerToken = null;
     this.hasSignature = false;
@@ -93,24 +93,25 @@ export class VerdocsSign {
       if (this.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      await getEnvelopeById(this.endpoint, this.envelopeId, true);
-      if (EnvelopeStore.envelope.documents.length > 0) {
+      this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+      this.roleNames = this.envelope.recipients.map(r => r.role_name);
+      if (this.envelope.documents.length > 0) {
         this.documentsSingularPlural = 'document(s)';
       }
-      this.recipientIndex = EnvelopeStore.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
+      this.recipientIndex = this.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
       if (this.recipientIndex > -1) {
-        this.recipient = EnvelopeStore.envelope.recipients[this.recipientIndex];
+        this.recipient = this.envelope.recipients[this.recipientIndex];
         this.agreed = this.recipient.agreed;
         console.log('[SIGN] Found our recipient in the envelope', this.recipientIndex, this.recipient);
       }
       else {
-        console.log('[SIGN] Could not find our recipient record', this.roleId, EnvelopeStore.envelope.recipients);
+        console.log('[SIGN] Could not find our recipient record', this.roleId, this.envelope.recipients);
       }
       this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);
       // TODO: Fix service to allow this?
       // const sigs = await getSignatures();
       // console.log('sigs', sigs);
-      (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope });
+      (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     catch (e) {
       console.log('Error with signing session', e);
@@ -132,7 +133,7 @@ export class VerdocsSign {
       var _a;
       this.nextButtonLabel = 'Next';
       this.agreed = true; // The server returns a recipient object but it's not "deep" so we track this locally
-      (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'agreed' });
+      (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'agreed' });
     })
       .catch(e => {
       var _a, _b, _c;
@@ -146,29 +147,29 @@ export class VerdocsSign {
       case 'later':
         this.finishLater = true;
         this.showFinishLater = true;
-        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'later' });
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'later' });
         break;
       case 'claim':
         window.alert('This feature will be available in an upcoming release.');
-        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'claimed' });
+        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'claimed' });
         break;
       case 'decline':
         {
           const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
           console.log('Decline result', declineResult);
-          (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'declined' });
+          (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
           this.isDone = true;
         }
         break;
       case 'print':
         window.print();
-        (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'printed' });
+        (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
         break;
       case 'download':
-        saveAttachment(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(e => {
+        saveAttachment(this.endpoint, this.envelope, this.envelope.envelope_document_id).catch(e => {
           console.log('Error downloading PDF', e);
         });
-        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'downloaded' });
+        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         break;
     }
   }
@@ -347,7 +348,7 @@ export class VerdocsSign {
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    const roleIndex = getRoleIndex(EnvelopeStore.roleNames, this.recipient.role_name);
+    const roleIndex = getRoleIndex(this.roleNames, this.recipient.role_name);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
     console.log('[SIGN] Page rendered, updating fields', { pageInfo, roleIndex, recipientFields });
     recipientFields.forEach(field => {
@@ -387,10 +388,10 @@ export class VerdocsSign {
       // });
     });
     // Render fields for "the other" recipients
-    EnvelopeStore.envelope.recipients
+    this.envelope.recipients
       .filter(recipient => recipient.role_name !== this.recipient.role_name)
       .forEach(otherRecipient => {
-      const otherRoleIndex = getRoleIndex(EnvelopeStore.roleNames, otherRecipient.role_name);
+      const otherRoleIndex = getRoleIndex(this.roleNames, otherRecipient.role_name);
       const recipientFields = otherRecipient.fields.filter(field => field.page === pageInfo.pageNumber);
       // We don't render other recipients' fields if they've already acted, because those values are now stamped into the document page.
       // TODO: Do we want to render alternate treatments for recipients who have declined (red boxes?) and/or if the envelope is cancelled?
@@ -421,13 +422,13 @@ export class VerdocsSign {
     this.checkRecipientFields();
   }
   render() {
-    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {
+    if (!this.envelope) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
     if (this.isDone) {
-      return (h(Host, { class: { agreed: this.agreed }, "data-r": EnvelopeStore.updateCount }, this.isDone ? (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); } })) : (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.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') })));
+      return (h(Host, { class: { agreed: this.agreed } }, this.isDone ? (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); } })) : (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.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') })));
     }
-    return (h(Host, { class: { agreed: this.agreed }, "data-r": EnvelopeStore.updateCount }, !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), h("div", { id: "verdocs-sign-header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, EnvelopeStore.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })), !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '15px' : '70px' } }, (EnvelopeStore.envelope.documents || []).map(envelopeDocument => {
+    return (h(Host, { class: { agreed: this.agreed } }, !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), h("div", { id: "verdocs-sign-header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })), !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '70px' : '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
       return (h(Fragment, null, pages.map(page => {
@@ -535,6 +536,8 @@ export class VerdocsSign {
   }
   static get states() {
     return {
+      "envelope": {},
+      "roleNames": {},
       "recipient": {},
       "signerToken": {},
       "hasSignature": {},

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

@@ -1,10 +1,8 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { cancelEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
+import { cancelEnvelope, throttledGetEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
 import { userCanCancelEnvelope } from '@verdocs/js-sdk/Envelopes/Permissions';
 import { h, Host, Fragment } from '@stencil/core';
 import { saveAttachment, saveCertificate, saveEnvelopesAsZip } from '../../../utils/utils';
-import { getEnvelopeById } from '../../../utils/Envelopes';
-import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
 /**
  * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.
@@ -15,6 +13,8 @@ export class VerdocsView {
     this.envelopeId = '';
     this.headerTargetId = null;
     this.isProcessing = false;
+    this.envelope = null;
+    this.roleNames = [];
   }
   componentWillLoad() {
     this.endpoint.loadSession();
@@ -41,8 +41,9 @@ export class VerdocsView {
     var _a, _b, _c;
     console.log('[VIEW] Checking for updated envelope');
     try {
-      await getEnvelopeById(this.endpoint, this.envelopeId, true);
-      this.isProcessing = EnvelopeStore.envelope.documents.some(document => document.type === 'attachment' && !document.processed);
+      this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+      this.roleNames = this.envelope.recipients.map(r => r.role_name);
+      this.isProcessing = this.envelope.documents.some(document => document.type === 'attachment' && !document.processed);
       if (this.isProcessing) {
         setTimeout(() => this.reloadEnvelope(), 3000);
       }
@@ -62,38 +63,38 @@ export class VerdocsView {
         // TODO: Better option for inline-flow confirmation and alert dialogs.
         if (confirm('Are you sure you wish to cancel this envelope? This action cannot be undone.')) {
           await cancelEnvelope(this.endpoint, this.envelopeId);
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'canceled' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'canceled' });
         }
         break;
       case 'print':
         window.print();
-        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'printed' });
+        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
         break;
       case 'download-attachments':
-        saveAttachment(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id)
+        saveAttachment(this.endpoint, this.envelope, this.envelope.envelope_document_id)
           .then(() => {
           var _a;
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'downloaded' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         })
           .catch(e => {
           console.log('Error downloading PDF', e);
         });
         break;
       case 'download-certificate':
-        saveCertificate(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.certificate_document_id)
+        saveCertificate(this.endpoint, this.envelope, this.envelope.certificate_document_id)
           .then(() => {
           var _a;
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'downloaded' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         })
           .catch(e => {
           console.log('Error downloading PDF', e);
         });
         break;
       case 'download-all':
-        saveEnvelopesAsZip(this.endpoint, [EnvelopeStore.envelope])
+        saveEnvelopesAsZip(this.endpoint, [this.envelope])
           .then(() => {
           var _a;
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'downloaded' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         })
           .catch(e => {
           console.log('Error downloading Zip', e);
@@ -103,19 +104,17 @@ export class VerdocsView {
   }
   render() {
     var _a;
-    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {
+    if (!this.envelope) {
+      console.log('rendering, no env');
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    if (EnvelopeStore.error) {
-      return (h(Host, null, h("div", null, EnvelopeStore.error)));
-    }
     const menuOptions = [{ id: 'print', label: 'Print' }];
-    if (userCanCancelEnvelope(this.endpoint.session, EnvelopeStore.envelope)) {
+    if (userCanCancelEnvelope(this.endpoint.session, this.envelope)) {
       menuOptions.push({ id: 'cancel', label: 'Cancel' });
     }
     // Add download options to the menu
-    const hasAttachments = EnvelopeStore.envelope.documents.length > 0;
-    const hasCertificate = !!EnvelopeStore.envelope.certificate;
+    const hasAttachments = this.envelope.documents.length > 0;
+    const hasCertificate = !!this.envelope.certificate;
     if (hasAttachments || hasCertificate) {
       menuOptions.push({ label: '' });
       if (hasAttachments) {
@@ -128,10 +127,11 @@ export class VerdocsView {
         menuOptions.push({ id: 'download-all', label: 'Download All Files' });
       }
     }
-    return (h(Host, { "data-r": EnvelopeStore.updateCount }, h("div", { id: "verdocs-view-header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, EnvelopeStore.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '15px' : '70px' } }, (((_a = EnvelopeStore.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
+    console.log('docs', this.envelope, this.envelope.documents);
+    return (h(Host, null, h("div", { id: "verdocs-view-header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '70px' : '15px' } }, (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
       .filter(document => document.type !== 'certificate')
       .map(envelopeDocument => {
-      console.log('[VIEW] Rendering document', EnvelopeStore.envelope, envelopeDocument);
+      console.log('[VIEW] Rendering document', this.envelope, envelopeDocument);
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
       if (!envelopeDocument.processed) {
@@ -217,7 +217,9 @@ export class VerdocsView {
   }
   static get states() {
     return {
-      "isProcessing": {}
+      "isProcessing": {},
+      "envelope": {},
+      "roleNames": {}
     };
   }
   static get events() {

package/dist/components/Envelopes.js

@@ -135,5 +135,20 @@ var getFieldAttachment = function (endpoint, envelopeId, fieldName) { return __a
 var getEnvelopeDocumentPageDisplayUri = function (endpoint, envelopeId, documentId, page) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
     return [2 /*return*/, endpoint.api.get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image")).then(function (r) { return r.data; })];
 }); }); };
+var cachedEnvelopes = {};
+/**
+ * Wrapper for `getEnvelope()` that limits queries to one every 2 seconds per template ID.
+ * This is intended for use in component hierarchies that all rely on the same template
+ * to avoid unnecessary repeat server calls.
+ */
+var throttledGetEnvelope = function (endpoint, envelopeId) {
+    if (cachedEnvelopes[envelopeId] && cachedEnvelopes[envelopeId].loaded + 2000 < new Date().getTime()) {
+        return cachedEnvelopes[envelopeId].envelope;
+    }
+    return getEnvelope(endpoint, envelopeId, true).then(function (envelope) {
+        cachedEnvelopes[envelopeId] = { loaded: new Date().getTime(), envelope: envelope };
+        return envelope;
+    });
+};
 
-export { updateEnvelopeFieldSignature as a, updateEnvelopeFieldInitials as b, getEnvelopeDocumentPageDisplayUri as c, cancelEnvelope as d, getEnvelopeFile as e, getFieldAttachment as f, getSigningSession as g, getEnvelope as h, updateEnvelopeField as u };
+export { updateEnvelopeFieldSignature as a, updateEnvelopeFieldInitials as b, getEnvelopeDocumentPageDisplayUri as c, cancelEnvelope as d, getEnvelopeFile as e, getFieldAttachment as f, getSigningSession as g, throttledGetEnvelope as t, updateEnvelopeField as u };

package/dist/components/templateStore.js

@@ -1,6 +1,197 @@
-import { c as createStore } from './index3.js';
+import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
 import { i as integerSequence } from './Primitives.js';
 
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
 // NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to
 const { state, onChange } = createStore({
   templateId: '',