@verdocs/web-sdk 1.12.21 → 1.12.23

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-sign/verdocs-sign.stories.js

@@ -3,12 +3,12 @@ export default {
   title: 'Embeds/Sign',
   component: 'verdocs-sign',
   args: {
-    // envelopeId: '',
-    // roleId: '',
-    // inviteCode: '',
-    envelopeId: '4017df32-0daa-4c77-977e-8606a2dd5c82',
-    roleId: 'Seller',
-    inviteCode: '7736c2728e31fb36b7e2d95f9e0c319d',
+    envelopeId: '',
+    roleId: '',
+    inviteCode: '',
+    // envelopeId: '4017df32-0daa-4c77-977e-8606a2dd5c82',
+    // roleId: 'Seller',
+    // inviteCode: '7736c2728e31fb36b7e2d95f9e0c319d',
   },
   argTypes: {
     envelopeId: {

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/collection/components/embeds/verdocs-view/verdocs-view.stories.js

@@ -3,8 +3,8 @@ export default {
   title: 'Embeds/View',
   component: 'verdocs-view',
   args: {
-    envelopeId: '4017df32-0daa-4c77-977e-8606a2dd5c82',
-    // envelopeId: '',
+    // envelopeId: '4017df32-0daa-4c77-977e-8606a2dd5c82',
+    envelopeId: '',
   },
   argTypes: {
     envelopeId: {

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

@@ -78,7 +78,7 @@ export class VerdocsFieldTextbox {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      } })))));
+      }, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))));
   }
   static get is() { return "verdocs-field-textbox"; }
   static get originalStyleUrls() {

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

@@ -16,6 +16,7 @@ export class VerdocsTemplateFieldProperties {
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
+    this.helpText = '';
     this.dirty = false;
     this.loading = true;
     this.type = 'signature';
@@ -27,7 +28,7 @@ export class VerdocsTemplateFieldProperties {
     this.options = [];
     this.placeholder = '';
     this.defaultValue = '';
-    this.showingHelp = true;
+    this.showingHelp = false;
   }
   async componentWillLoad() {
     var _a, _b, _c, _d, _e;
@@ -147,10 +148,10 @@ export class VerdocsTemplateFieldProperties {
     if (!this.endpoint.session || !TemplateStore.template) {
       return h(Host, { class: "empty" });
     }
-    if (this.showingHelp) {
-      return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions" }, "Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field."), h("p", { class: "instructions" }, "If marked required, the participant must complete the field before proceeding..")));
+    if (this.helpText && this.showingHelp) {
+      return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
     }
-    return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
+    return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
       //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
@@ -259,6 +260,24 @@ export class VerdocsTemplateFieldProperties {
         "attribute": "field-name",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "helpText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If specified, the properties card will have a \"back\" side with the help text as its content."
+        },
+        "attribute": "help-text",
+        "reflect": false,
+        "defaultValue": "''"
       }
     };
   }

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 };