@verdocs/web-sdk 2.0.2 → 2.0.3

package/dist/components/verdocs-envelope-recipient-link2.js

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { g as getInPersonLink } from './Recipients.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { g as getEnvelopeStore } from './EnvelopeStore.js';
+import { V as VerdocsToast } from './Toast.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$1 } from './verdocs-button2.js';
+
+const verdocsEnvelopeRecipientLinkCss = "verdocs-envelope-recipient-link{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:#0000007f}verdocs-envelope-recipient-link .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-link .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-link .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-link .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-link .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-link .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#f9fafb}verdocs-envelope-recipient-link .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-link .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-link .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#f9fafb}verdocs-envelope-recipient-link .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-link .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-link .buttons verdocs-button button{width:100%}";
+
+const VerdocsEnvelopeRecipientLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.next = createEvent(this, "next", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
+    this.recipient = null;
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+    this.roleName = '';
+    this.isOpen = undefined;
+    this.loading = true;
+    this.gettingLink = true;
+    this.link = '';
+  }
+  async componentWillLoad() {
+    var _a, _b, _c, _d, _e, _f;
+    try {
+      this.endpoint.loadSession();
+      if (!this.envelopeId) {
+        console.log(`[RECIPIENT_LINK] Missing required envelope ID ${this.envelopeId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[RECIPIENT_LINK] Unable to start session, must be authenticated');
+        return;
+      }
+      this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
+      this.loading = false;
+      this.gettingLink = true;
+      this.recipient = (_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients) === null || _c === void 0 ? void 0 : _c.find(r => r.role_name === this.roleName);
+      this.getLink(this.recipient);
+    }
+    catch (e) {
+      console.log('[RECIPIENT_LINK] Error loading envelope', e);
+      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+    }
+  }
+  handleDone(e) {
+    var _a;
+    e.preventDefault();
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.store.state });
+  }
+  copyLink(link) {
+    navigator.clipboard
+      .writeText(link)
+      .then(() => VerdocsToast('Link copied to clipboard!', { style: 'success', duration: 3000 }))
+      .catch(e => {
+      console.warn('[RECIPIENT_LINK] Error copying to clipboard', e);
+      VerdocsToast(`Unable to copy to clipboard: ${e.message}`, { style: 'error' });
+    });
+  }
+  getLink(recipient) {
+    this.gettingLink = true;
+    getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
+      .then(response => {
+      this.gettingLink = false;
+      this.link = response.link;
+      // NOTE: Left here for documentation purposes. We don't auto-copy the link because many browsers now
+      // error on that because we aren't the focus/gesture-initiator since we're a new component just being
+      // drawn in the DOM. So we let the user click to trigger that.
+      // this.copyLink(response.link);
+    })
+      .catch(e => {
+      this.gettingLink = false;
+      console.log('[RECIPIENT_LINK] Error getting link', e);
+      VerdocsToast('Unable to get link: ' + e.message, { style: 'error' });
+    });
+  }
+  render() {
+    if (this.loading || !this.recipient) {
+      return h(Host, null);
+    }
+    // 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 (
+    return (h(Host, null, h("div", { class: "summary-content" }, h("h1", { class: "summary-title" }, "In-Person Signing Link"), h("div", { class: "summary-rows" }, h("div", { class: "summary-recipient" }, h("div", { class: "role-name" }, this.recipient.role_name), h("div", { class: "role-details" }, h("div", { class: "role-info" }, h("div", { class: "role-full-name" }, this.recipient.full_name, " (", this.recipient.email || this.recipient.phone, ")"), !this.link && (h("verdocs-button", { size: "small", variant: "outline", label: this.gettingLink ? 'Loading...' : 'Get Link', disabled: this.gettingLink, onClick: () => this.getLink(this.recipient) }))), this.link && (h("div", { class: "link-wrapper" }, h("div", { class: "link" }, this.link), h("verdocs-button", { size: "small", variant: "outline", label: "Copy", onClick: () => this.copyLink(this.link) })))))), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", label: "Done", onClick: e => this.handleDone(e) })))));
+  }
+  static get style() { return verdocsEnvelopeRecipientLinkCss; }
+}, [0, "verdocs-envelope-recipient-link", {
+    "endpoint": [16],
+    "envelopeId": [1, "envelope-id"],
+    "roleName": [1, "role-name"],
+    "isOpen": [32],
+    "loading": [32],
+    "gettingLink": [32],
+    "link": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-envelope-recipient-link", "verdocs-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-envelope-recipient-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsEnvelopeRecipientLink);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsEnvelopeRecipientLink as V, defineCustomElement as d };

package/dist/components/verdocs-envelope-recipient-summary2.js

@@ -3,89 +3,11 @@ import { g as getRecipientsWithActions, r as recipientCanAct } from './Permissio
 import { g as getInPersonLink } from './Recipients.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { c as createStore } from './index3.js';
-import { f as getEnvelope } from './Envelopes.js';
+import { g as getEnvelopeStore } from './EnvelopeStore.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 
-const createEnvelopeStore = (envelopeId) => {
-  const now = new Date().toISOString();
-  return createStore({
-    isLoading: true,
-    isLoaded: false,
-    isError: false,
-    error: null,
-    updateCount: 0,
-    roleNames: [],
-    id: envelopeId,
-    template_id: '',
-    name: '',
-    status: 'pending',
-    profile_id: '',
-    organization_id: '',
-    no_contact: false,
-    created_at: now,
-    updated_at: now,
-    canceled_at: null,
-    reminder_id: null,
-    envelope_document_id: '',
-    certificate_document_id: null,
-    visibility: 'private',
-    histories: [],
-    recipients: [],
-    profile: undefined,
-    certificate: undefined,
-    document: undefined,
-    documents: undefined,
-    fields: undefined,
-  });
-};
-const envelopeStores = {};
-const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false) => {
-  let created = false;
-  if (!envelopeStores[envelopeId]) {
-    console.debug('[ENVELOPES] No envelope store found for ID, creating', envelopeId);
-    envelopeStores[envelopeId] = createEnvelopeStore(envelopeId);
-    created = true;
-  }
-  const store = envelopeStores[envelopeId];
-  // NOTE: If we need it, store.use() returns an unsubcribe function
-  // See https://github.com/ionic-team/stencil-store#storeusesubscriptions
-  store.use({
-    reset: () => console.debug('[ENVELOPES] Store got reset'),
-    dispose: () => console.debug('[ENVELOPES] Store got disposed'),
-  });
-  // TODO: This can create a race condition if two components call this at the same time.
-  //  For now we can probably defer doing something smart here because it's only a
-  //  double-load issue.
-  if (created || forceReload) {
-    console.debug('[ENVELOPES] Reloading envelope', { envelopeId, created, forceReload });
-    store.state.isLoading = true;
-    store.state.isLoaded = false;
-    store.state.isError = false;
-    store.state.error = undefined;
-    try {
-      const envelope = await getEnvelope(endpoint, envelopeId);
-      console.debug('[ENVELOPES] Got envelope', envelope);
-      Object.assign(store.state, envelope);
-      store.state.isLoaded = true;
-      store.state.isError = false;
-      store.state.error = undefined;
-    }
-    catch (e) {
-      console.error('[ENVELOPES] Error loading envelope', e);
-      store.state.isLoaded = false;
-      store.state.isError = true;
-      store.state.error = e;
-      throw e;
-    }
-    store.state.isLoading = false;
-    store.state.updateCount++;
-  }
-  return store;
-};
-
 const verdocsEnvelopeRecipientSummaryCss = "verdocs-envelope-recipient-summary{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:#0000007f}verdocs-envelope-recipient-summary .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-summary .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-summary .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-summary .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-summary .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-summary .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#f9fafb}verdocs-envelope-recipient-summary .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 .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-summary .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#f9fafb}verdocs-envelope-recipient-summary .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-summary .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-summary .buttons verdocs-button button{width:100%}";
 
 const VerdocsEnvelopeRecipientSummary = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -102,7 +24,6 @@ const VerdocsEnvelopeRecipientSummary = /*@__PURE__*/ proxyCustomElement(class e
     this.canSendAnother = true;
     this.canView = true;
     this.canDone = true;
-    this.envelope = undefined;
     this.isOpen = undefined;
     this.loading = true;
     this.recipientStatusIcons = [];
@@ -195,7 +116,6 @@ const VerdocsEnvelopeRecipientSummary = /*@__PURE__*/ proxyCustomElement(class e
     "canSendAnother": [4, "can-send-another"],
     "canView": [4, "can-view"],
     "canDone": [4, "can-done"],
-    "envelope": [16],
     "isOpen": [32],
     "loading": [32],
     "recipientStatusIcons": [32],
@@ -223,4 +143,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { VerdocsEnvelopeRecipientSummary as V, defineCustomElement as d, getEnvelopeStore as g };
+export { VerdocsEnvelopeRecipientSummary as V, defineCustomElement as d };

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

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as cancelEnvelope } from './Envelopes.js';
 import { u as userIsEnvelopeOwner } from './Permissions.js';
-import { g as getInPersonLink, r as resendInvitation } from './Recipients.js';
+import { r as resendInvitation } from './Recipients.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { g as getEnvelopeStore, d as defineCustomElement$3 } from './verdocs-envelope-recipient-summary2.js';
+import { g as getEnvelopeStore } from './EnvelopeStore.js';
 import { F as FORMAT_TIMESTAMP } from './Types2.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$5 } from './verdocs-button2.js';
-import { d as defineCustomElement$4 } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$6 } from './verdocs-button2.js';
+import { d as defineCustomElement$5 } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$4 } from './verdocs-envelope-recipient-link2.js';
+import { d as defineCustomElement$3 } from './verdocs-envelope-recipient-summary2.js';
 import { d as defineCustomElement$2 } from './verdocs-ok-dialog2.js';
 import { f as format } from './index2.js';
 
@@ -53,6 +55,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.activeTab = 1;
     this.panelOpen = false;
     this.showManageDialog = false;
+    this.showRecipientDialog = '';
     this.showCancelDialog = false;
     this.loading = true;
   }
@@ -95,12 +98,6 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
       !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
   }
-  canModifyRecipient(recipient) {
-    var _a, _b;
-    return (!recipient.claimed && //
-      !['declined', 'signed', 'submitted', 'canceled'].includes(recipient.status) &&
-      !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
-  }
   handleRecipientAction(recipient, id) {
     var _a, _b;
     console.log('[SIDEBAR] Recipient action', id, recipient);
@@ -116,13 +113,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
         });
         break;
       case 'inperson':
-        getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
-          .then(({ link }) => navigator.clipboard.writeText(link))
-          .then(() => VerdocsToast('Link copied to clipboard.', { style: 'success', duration: 2000 }))
-          .catch(e => {
-          console.log('[RECIPIENTS] Error getting link', e);
-          VerdocsToast('Unable to get link: ' + e.message, { style: 'error' });
-        });
+        this.showRecipientDialog = recipient.role_name;
         break;
       case 'modify':
         VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
@@ -264,12 +255,11 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     entries.sort((a, b) => b.date.getTime() - a.date.getTime());
     return entries;
   }
-  canModify(recipient) {
-    var _a, _b;
-    const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
-    const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
-    return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status) === -1;
-  }
+  // canModify(recipient: IRecipient) {
+  //   const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
+  //   const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
+  //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.store?.state?.status) === -1;
+  // }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     if (!this.store.state) {
@@ -283,7 +273,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
       _s.first_name, " ", (_v = (_u = (_t = this.store) === null || _t === void 0 ? void 0 : _t.state) === null || _u === void 0 ? void 0 : _u.profile) === null || _v === void 0 ? void 0 :
       _v.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_y = (_x = (_w = this.store) === null || _w === void 0 ? void 0 : _w.state) === null || _x === void 0 ? void 0 : _x.profile) === null || _y === void 0 ? void 0 : _y.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), (_0 = (_z = this.store) === null || _z === void 0 ? void 0 : _z.state) === null || _0 === void 0 ? void 0 :
       _0.recipients.map((recipient, index) => {
-        const canGetInPersonLink = !this.canModify(recipient) || (recipient.status !== 'invited' && recipient.status !== 'opened');
+        const canGetInPersonLink = recipient.status !== 'signed' && recipient.status !== 'submitted' && recipient.status !== 'canceled' && recipient.status !== 'declined';
         const canSendReminder = this.canResendRecipient(recipient);
         return (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 && !functionsDisabled && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
             { id: 'reminder', label: 'Send Reminder', disabled: !canSendReminder },
@@ -292,13 +282,11 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
             // 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))));
-      }), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Turn On Reminders", onClick: () => (this.showManageDialog = !functionsDisabled), disabled: functionsDisabled })), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Verdoc", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
+      }), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Turn On Reminders", onClick: () => (this.showManageDialog = !functionsDisabled), disabled: functionsDisabled })), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Verdoc", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.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({ envelope: this.store.state });
-      }, onNext: () => {
-        this.showManageDialog = false;
-      } })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
+      }, onNext: () => (this.showManageDialog = false) })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
         this.showCancelDialog = false;
         this.cancelEnvelope();
       } }))));
@@ -310,6 +298,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "activeTab": [32],
     "panelOpen": [32],
     "showManageDialog": [32],
+    "showRecipientDialog": [32],
     "showCancelDialog": [32],
     "loading": [32]
   }]);
@@ -317,7 +306,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-envelope-sidebar", "verdocs-button", "verdocs-dropdown", "verdocs-envelope-recipient-summary", "verdocs-ok-dialog"];
+  const components = ["verdocs-envelope-sidebar", "verdocs-button", "verdocs-dropdown", "verdocs-envelope-recipient-link", "verdocs-envelope-recipient-summary", "verdocs-ok-dialog"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-envelope-sidebar":
       if (!customElements.get(tagName)) {
@@ -326,10 +315,15 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "verdocs-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-envelope-recipient-link":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-07-14T21:15:06",
+  "timestamp": "2023-07-17T15:23:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -670,6 +670,7 @@
         "verdocs-activity-box",
         "verdocs-auth",
         "verdocs-contact-picker",
+        "verdocs-envelope-recipient-link",
         "verdocs-envelope-recipient-summary",
         "verdocs-envelope-sidebar",
         "verdocs-envelopes-list",
@@ -702,6 +703,9 @@
         "verdocs-contact-picker": [
           "verdocs-button"
         ],
+        "verdocs-envelope-recipient-link": [
+          "verdocs-button"
+        ],
         "verdocs-envelope-recipient-summary": [
           "verdocs-button"
         ],
@@ -1458,11 +1462,110 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.tsx",
+      "encapsulation": "none",
+      "tag": "verdocs-envelope-recipient-link",
+      "docs": "Displays a single recipient from an envelope, with the opportunity to copy an in-person\nsigning link for that recipient to use.",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "envelopeId",
+          "type": "string",
+          "mutable": false,
+          "attr": "envelope-id",
+          "reflectToAttr": false,
+          "docs": "The envelope ID to edit.",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "roleName",
+          "type": "string",
+          "mutable": false,
+          "attr": "role-name",
+          "reflectToAttr": false,
+          "docs": "The role to load.",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "next",
+          "detail": "{ envelope: IEnvelope; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "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.",
+          "docsTags": []
+        },
+        {
+          "event": "sdkError",
+          "detail": "SDKError",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "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.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "verdocs-envelope-sidebar"
+      ],
+      "dependencies": [
+        "verdocs-button"
+      ],
+      "dependencyGraph": {
+        "verdocs-envelope-recipient-link": [
+          "verdocs-button"
+        ],
+        "verdocs-envelope-sidebar": [
+          "verdocs-envelope-recipient-link"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/envelopes/verdocs-envelope-recipient-summary/verdocs-envelope-recipient-summary.tsx",
       "encapsulation": "none",
       "tag": "verdocs-envelope-recipient-summary",
-      "docs": "Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either\ndirectly as a status field or the whole document object may be passed in.\n\nIf the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable\nto display a popup panel with per-recipient status data.\n\nIf the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.",
+      "docs": "Displays a list of recipients with options to get in-person signing links for each one.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -1533,21 +1636,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "envelope",
-          "type": "IEnvelope",
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "The document to display status for. Ignored if `status` is set directly.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "IEnvelope"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
         {
           "name": "envelopeId",
           "type": "string",
@@ -1713,6 +1801,7 @@
       "dependencies": [
         "verdocs-dropdown",
         "verdocs-button",
+        "verdocs-envelope-recipient-link",
         "verdocs-envelope-recipient-summary",
         "verdocs-ok-dialog"
       ],
@@ -1720,9 +1809,13 @@
         "verdocs-envelope-sidebar": [
           "verdocs-dropdown",
           "verdocs-button",
+          "verdocs-envelope-recipient-link",
           "verdocs-envelope-recipient-summary",
           "verdocs-ok-dialog"
         ],
+        "verdocs-envelope-recipient-link": [
+          "verdocs-button"
+        ],
         "verdocs-envelope-recipient-summary": [
           "verdocs-button"
         ],