@verdocs/web-sdk 1.13.35 → 1.14.1

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

@@ -0,0 +1,108 @@
+verdocs-envelope-recipient-summary {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  z-index: 100000;
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+  font-family: "Inter", "Barlow", sans-serif;
+  background-color: #0000007f;
+}
+verdocs-envelope-recipient-summary .label {
+  color: #ffffff;
+}
+verdocs-envelope-recipient-summary .content {
+  width: 600px;
+  display: flex;
+  max-width: 90%;
+  font-size: 18px;
+  flex: 0 0 600px;
+  border-radius: 6px;
+  background: #ffffff;
+  flex-direction: column;
+  padding: 30px 20px 20px;
+}
+verdocs-envelope-recipient-summary .content .title {
+  font-size: 20px;
+  margin: 0 0 10px 0;
+  color: #33364b;
+}
+verdocs-envelope-recipient-summary .recipient {
+  display: flex;
+  color: #33364b;
+  margin: 8px 0 24px 0;
+  flex-direction: column;
+}
+verdocs-envelope-recipient-summary .recipient .role-name {
+  flex: 1;
+  display: flex;
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #092c4c;
+}
+verdocs-envelope-recipient-summary .recipient .role-info {
+  gap: 5px;
+  display: flex;
+  flex-direction: row;
+}
+verdocs-envelope-recipient-summary .recipient .role-full-name {
+  flex: 1;
+  height: 34px;
+  display: flex;
+  font-size: 16px;
+  padding: 0 12px;
+  border-radius: 4px;
+  align-items: center;
+  border: 1px solid #cccccc;
+  background: #f9fafb;
+}
+verdocs-envelope-recipient-summary .recipient .recipient-link {
+  width: 120px;
+  padding: 0 16px;
+  font-weight: 500;
+  margin: 0 0 0 8px;
+  text-align: center;
+  font-size: 0.875rem;
+  border-radius: 100%;
+  color: #374151;
+  line-height: 1.25rem;
+  background-color: #d8d8d8;
+  border: 2px solid #9ca3af;
+}
+verdocs-envelope-recipient-summary .recipient .link-wrapper {
+  gap: 5px;
+  display: flex;
+  margin: 4px 0 0 0;
+  flex-direction: row;
+}
+verdocs-envelope-recipient-summary .recipient .link-wrapper .link {
+  flex: 1;
+  height: 34px;
+  display: flex;
+  font-size: 16px;
+  padding: 0 12px;
+  border-radius: 4px;
+  align-items: center;
+  border: 1px solid #cccccc;
+  background: #f9fafb;
+}
+verdocs-envelope-recipient-summary .buttons {
+  display: flex;
+  column-gap: 15px;
+  margin: 10px 0 0 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-envelope-recipient-summary .buttons verdocs-button {
+  flex: 0 0 120px;
+  margin-left: 10px;
+  white-space: nowrap;
+}
+verdocs-envelope-recipient-summary .buttons verdocs-button button {
+  width: 100%;
+}

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

@@ -0,0 +1,311 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { getInPersonLink } from '@verdocs/js-sdk/Envelopes/Recipients';
+import { Host, h } from '@stencil/core';
+import { getRecipientsWithActions, recipientCanAct } from '@verdocs/js-sdk/Envelopes/Permissions';
+import { getEnvelopeStore } from '../../../utils/EnvelopeStore';
+import { VerdocsToast } from '../../../utils/Toast';
+import { SDKError } from '../../../utils/errors';
+/**
+ * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either
+ * directly as a status field or the whole document object may be passed in.
+ *
+ * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable
+ * to display a popup panel with per-recipient status data.
+ *
+ * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.
+ */
+export class VerdocsEnvelopeRecipientSummary {
+  constructor() {
+    this.store = null;
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+    this.canSendAnother = true;
+    this.canView = true;
+    this.canDone = true;
+    this.envelope = undefined;
+    this.isOpen = undefined;
+    this.recipientStatusIcons = [];
+    this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
+    this.gettingLinks = {};
+    this.links = {};
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.envelopeId) {
+        console.log(`[RECIPIENTS] Missing required envelope ID ${this.envelopeId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[RECIPIENTS] Unable to start session, must be authenticated');
+        return;
+      }
+      this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
+      this.sortEnvelopeRecipients();
+    }
+    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));
+    }
+  }
+  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) => {
+      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();
+  }
+  handleView(e) {
+    var _a;
+    e.preventDefault();
+    (_a = this.view) === null || _a === void 0 ? void 0 : _a.emit();
+  }
+  handleDone(e) {
+    var _a;
+    e.preventDefault();
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
+  }
+  copyLink(link) {
+    navigator.clipboard
+      .writeText(link)
+      .then(() => VerdocsToast('Link copied to clipboard!', { style: 'success', duration: 3000 }))
+      .catch(e => {
+      console.warn('[RECIPIENTS] Error copying to clipboard', e);
+      VerdocsToast(`Unable to copy to clipboard: ${e.message}`, { style: 'error' });
+    });
+  }
+  getLink(recipient) {
+    this.gettingLinks[recipient.role_name] = true;
+    getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
+      .then(response => {
+      this.gettingLinks[recipient.role_name] = false;
+      this.links = { ...this.links, [recipient.role_name]: response.link };
+      this.copyLink(response.link);
+    })
+      .catch(e => {
+      this.gettingLinks[recipient.role_name] = false;
+      console.log('[RECIPIENTS] Error getting link', e);
+      VerdocsToast('Unable to get link: ' + e.message, { style: 'error' });
+    });
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: "content" }, h("h1", { class: "title" }, "Recipient Summary"), h("div", { class: "rows" }, (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.recipients.map(recipient => {
+      const recipientsWithActions = getRecipientsWithActions(this.store.state);
+      const showLinkButton = recipientCanAct(recipient, recipientsWithActions);
+      const link = this.links[recipient.role_name];
+      const gettingLink = this.gettingLinks[recipient.role_name];
+      return (h("div", { class: "recipient" }, h("div", { class: "role-name" }, recipient.role_name), h("div", { class: "role-details" }, h("div", { class: "role-info" }, h("div", { class: "role-full-name" }, recipient.full_name, " (", recipient.email || recipient.phone, ")"), showLinkButton && !link && h("verdocs-button", { size: "small", variant: "outline", label: "Get Link", disabled: gettingLink, onClick: () => this.getLink(recipient) })), link && (h("div", { class: "link-wrapper" }, h("div", { class: "link" }, link), h("verdocs-button", { size: "small", variant: "outline", label: "Copy", onClick: () => this.copyLink(link) }))))));
+    })), (this.canSendAnother || this.canView || this.canDone) && (h("div", { class: "buttons" }, this.canSendAnother && h("verdocs-button", { size: "small", label: "Send Another", onClick: e => this.handleAnother(e) }), this.canView && h("verdocs-button", { size: "small", label: "View Now", onClick: e => this.handleView(e) }), this.canDone && h("verdocs-button", { size: "small", label: "Done", onClick: e => this.handleDone(e) }))))));
+  }
+  static get is() { return "verdocs-envelope-recipient-summary"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-envelope-recipient-summary.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-envelope-recipient-summary.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "envelopeId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The envelope ID to edit."
+        },
+        "attribute": "envelope-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "canSendAnother": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable the Send Another button."
+        },
+        "attribute": "can-send-another",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "canView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable the View button."
+        },
+        "attribute": "can-view",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "canDone": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable the Done button."
+        },
+        "attribute": "can-done",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "envelope": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IEnvelope",
+          "resolved": "IEnvelope",
+          "references": {
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The document to display status for. Ignored if `status` is set directly."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {},
+      "recipientStatusIcons": {},
+      "containerId": {},
+      "gettingLinks": {},
+      "links": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "another",
+        "name": "another",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks Send Another to proceed. It is up to the host application\nto redirect the user to the appropriate next workflow step."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "view",
+        "name": "view",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks Send Another to proceed. It is up to the host application\nto redirect the user to the appropriate next workflow step."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "next",
+        "name": "next",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks Done to proceed. It is up to the host application\nto redirect the user to the appropriate next workflow step."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,25 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Envelopes/Recipient Summary',
+  component: 'verdocs-envelope-recipient-summary',
+  args: {
+    envelopeId: '',
+    canView: true,
+    canDone: true,
+    canSendAnother: true,
+  },
+  argTypes: {
+    another: { action: 'another' },
+    view: { action: 'view' },
+    next: { action: 'next' },
+  },
+};
+export const RecipientSummary = ({ envelopeId, another, view, next, canView, canDone, canSendAnother }) => html `<verdocs-envelope-recipient-summary
+  .envelopeId="${envelopeId}"
+  .canView="${canView}"
+  .canDone="${canDone}"
+  .canSendAnother="${canSendAnother}"
+  @another=${another}
+  @view=${view}
+  @next=${next}
+/>`;

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

@@ -66,6 +66,14 @@ verdocs-envelope-sidebar .value {
   color: #fff;
   flex: 0;
 }
+verdocs-envelope-sidebar .manage-recipients-button {
+  align-self: center;
+  white-space: nowrap;
+}
+verdocs-envelope-sidebar .manage-recipients-button .label {
+  color: #ffffff;
+  font-size: 14px;
+}
 verdocs-envelope-sidebar .recipient-detail {
   flex: 0;
   padding: 8px;

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

@@ -2,8 +2,9 @@ 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 { userIsEnvelopeOwner } from '@verdocs/js-sdk/Envelopes/Permissions';
+import { VerdocsToast } from '../../../utils/Toast';
 import { SDKError } from '../../../utils/errors';
-import { getInPersonLink } from '@verdocs/js-sdk/Envelopes/Recipients';
 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>`;
@@ -41,6 +42,7 @@ export class VerdocsEnvelopeSidebar {
     this.roleNames = [];
     this.activeTab = 1;
     this.panelOpen = false;
+    this.showManageDialog = false;
   }
   componentWillLoad() {
     this.endpoint.loadSession();
@@ -85,20 +87,14 @@ export class VerdocsEnvelopeSidebar {
     var _a;
     console.log('[SIDEBAR] Recipient action', id, recipient);
     switch (id) {
-      case 'inperson':
-        getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
-          // TODO: Can remove "any" once js-sdk is updated
-          .then((response) => {
-          var _a, _b;
-          console.log('Got in person link');
-          return (_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText(response.link);
-        })
-          .then(r => console.log('copy result', r))
-          .catch(e => console.warn('[SIDEBAR] Error getting link', e));
-        break;
       case 'reminder':
+        VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
+        break;
       case 'modify':
+        VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
+        break;
       case 'details':
+        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: this.envelope, event: id });
@@ -223,7 +219,7 @@ export class VerdocsEnvelopeSidebar {
       return h(Host, null);
     }
     const session = this.endpoint.getSession();
-    const isEnvelopeOwner = session.profile_id === this.envelope.profile_id; // TODO: What about org admins?
+    const isEnvelopeOwner = userIsEnvelopeOwner(session, this.envelope);
     const historyEntries = this.prepareHistoryEntries();
     console.log('e', this.envelope);
     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 :
@@ -231,10 +227,15 @@ export class VerdocsEnvelopeSidebar {
       _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.sortedRecipients.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.role_name), 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) },
         // TODO: Details dialog
         // {id:'details',label: 'View Details'},
-      ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))))))), 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, 'PP pp'))))))))));
+      ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))))), isEnvelopeOwner && h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Manage Recipients", onClick: () => (this.showManageDialog = true) }))), 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, 'PP pp')))))))), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
+        var _a;
+        this.showManageDialog = false;
+        (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit();
+      }, onNext: () => {
+        this.showManageDialog = false;
+      } }))));
   }
   static get is() { return "verdocs-envelope-sidebar"; }
   static get originalStyleUrls() {
@@ -296,7 +297,8 @@ export class VerdocsEnvelopeSidebar {
       "sortedRecipients": {},
       "roleNames": {},
       "activeTab": {},
-      "panelOpen": {}
+      "panelOpen": {},
+      "showManageDialog": {}
     };
   }
   static get events() {
@@ -359,6 +361,21 @@ export class VerdocsEnvelopeSidebar {
           "resolved": "{ open: boolean; }",
           "references": {}
         }
+      }, {
+        "method": "another",
+        "name": "another",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks Send Another in the Manage Recipients dialog. It is up to the host application\nto redirect the user to the appropriate next workflow step."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
 }

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

@@ -8,6 +8,8 @@ export default {
   argTypes: {
     envelopeId: { name: 'envelopeId' },
     toggle: { action: 'toggle' },
+    another: { action: 'another' },
+    envelopeUpdated: { action: 'envelopeUpdated' },
   },
 };
-export const EnvelopeSidebar = ({ envelopeId, toggle }) => html `<verdocs-envelope-sidebar .envelopeId=${envelopeId} @toggle=${toggle} />`;
+export const EnvelopeSidebar = ({ envelopeId, toggle, another, envelopeUpdated }) => html `<verdocs-envelope-sidebar .envelopeId=${envelopeId} @toggle=${toggle} @envelopeUpdated=${envelopeUpdated} @another=${another} />`;

package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.css

@@ -7,7 +7,7 @@ verdocs-status-indicator {
   color: #33364b;
   align-items: center;
   flex-direction: row;
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", "Barlow", sans-serif;
 }
 verdocs-status-indicator.has-document:hover {
   cursor: pointer;

package/dist/collection/components/templates/verdocs-template-card/verdocs-template-card.css

@@ -1,5 +1,5 @@
 verdocs-template-card {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", "Barlow", sans-serif;
   width: 320px;
   height: 320px;
   display: flex;

package/dist/collection/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.css

@@ -1,5 +1,5 @@
 verdocs-template-role-properties {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", "Barlow", sans-serif;
   box-sizing: border-box;
 }
 verdocs-template-role-properties div {

package/dist/collection/components/templates/verdocs-template-sender/verdocs-template-sender.css

@@ -1,5 +1,5 @@
 verdocs-template-sender {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", "Barlow", sans-serif;
   box-sizing: border-box;
 }
 verdocs-template-sender div {

package/dist/collection/components/templates/verdocs-template-tags/verdocs-template-tags.css

@@ -1,5 +1,5 @@
 verdocs-template-tags {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", "Barlow", sans-serif;
 }
 verdocs-template-tags span {
   margin: 0 4px;