@verdocs/web-sdk 1.13.31 → 1.14.0

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

@@ -0,0 +1,254 @@
+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.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) }))))));
+    })), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", label: "Send Another", onClick: e => this.handleAnother(e) }), h("verdocs-button", { size: "small", label: "View Now", onClick: e => this.handleView(e) }), 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": "''"
+      },
+      "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,19 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Envelopes/Recipient Summary',
+  component: 'verdocs-envelope-recipient-summary',
+  args: {
+    envelopeId: '498c2404-3d8c-4325-bdd3-e8c7c70e63b1',
+  },
+  argTypes: {
+    another: { action: 'another' },
+    view: { action: 'view' },
+    next: { action: 'next' },
+  },
+};
+export const RecipientSummary = ({ envelopeId, another, view, next }) => html `<verdocs-envelope-recipient-summary
+  .envelopeId="${envelopeId}"
+  @another=${another}
+  @view=${view}
+  @next=${next}
+/>`;

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;

package/dist/collection/utils/EnvelopeStore.js

@@ -0,0 +1,79 @@
+import { createStore } from '@stencil/store';
+import { getEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
+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 = {};
+export 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;
+};
+export const getRecipientRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.recipients) || []).map(r => r.role_name); };

package/dist/collection/utils/TemplateStore.js

@@ -65,7 +65,6 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
       const template = await getTemplate(endpoint, templateId);
       console.debug('[TEMPLATES] Got template', template);
       Object.assign(store.state, template);
-      // Object.keys(template).forEach(key => store.set(key as keyof TTemplateStore, template[key]));
       store.state.isLoaded = true;
       store.state.isError = false;
       store.state.error = undefined;

package/dist/collection/utils/Toast.js

@@ -0,0 +1,63 @@
+/**
+ * Simple helper to display basic toast messages. These toasts do not stack, and
+ * because of this are meant to be used only for infrequent notifications (those
+ * that would rarely happen back to back within a few seconds).
+ *
+ * The main reason to use this and not a toast library is CSS efficiency. All
+ * toast libraries require some block of CSS be installed. That works well for
+ * an app but every Web Component gets compiled as its own mini sandbox app.
+ * That means a toast library's CSS would get compiled over and over. This
+ * method is styled inline and minifie to <3K, most of which is the icons. If
+ * we wanted to trim it more we could move those out to an icon library because
+ * they're reused in other controls as well.
+ */
+const Icons = {
+  error: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
+</svg></div>`,
+  success: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
+</svg></div>`,
+  info: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
+</svg></div>`,
+  // The empty element allows the flex "gap" to still provide the correct spacing, visually
+  default: '<div class="toast-icon"></div>',
+};
+const Colors = {
+  error: '#ed3d3d',
+  success: '#3dc763',
+  info: '#2379c7',
+  default: '#6a56c1',
+};
+const removeToasts = () => Array.from(document.getElementsByClassName('verdocs-toast')).forEach(oldToast => oldToast.remove());
+const closeClicked = (e) => {
+  e.stopPropagation();
+  removeToasts();
+};
+export const VerdocsToast = (text, config = {}) => {
+  // We don't stack because we have only a few specific use-cases and they would
+  // almost never show more than one message at a time.
+  removeToasts();
+  const { duration = 5000, style = 'default' } = config || {};
+  const color = Colors[style] || Colors.default;
+  const icon = Icons[style] || Icons.default;
+  const toastBody = `
+    ${icon}
+    <div class="verdocs-toast-text" style="padding: 12px 12px 12px 0;">${text}</div>
+    <div class="verdocs-toast-close" style="padding: 12px 8px; background: rgba(0,0,0,0.25); cursor: pointer;">✕</div>
+  `;
+  const toast = document.createElement('div');
+  toast.className = 'verdocs-toast';
+  toast.innerHTML = toastBody;
+  toast.style.cssText = `
+display: flex; flex-direction: row; gap: 10px; align-items: center;
+position: fixed; top: 20px; right: 20px; z-index: 2147483647; max-width: calc(50% - 20px);
+color: #ffffff; background: ${color}; font-family: 'Barlow', sans-serif;
+border-radius: 2px; padding-left: 10px;
+box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);`;
+  document.body.append(toast);
+  const closeElements = Array.from(document.getElementsByClassName('verdocs-toast-close'));
+  closeElements.forEach(closeEl => closeEl.addEventListener('click', closeClicked));
+  setTimeout(removeToasts, duration);
+};

package/dist/components/Envelopes.js

@@ -163,4 +163,4 @@ var throttledGetEnvelope = function (endpoint, envelopeId) {
     });
 };
 
-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 };
+export { getSigningSession as a, updateEnvelopeFieldSignature as b, updateEnvelopeFieldInitials as c, getEnvelopeDocumentPageDisplayUri as d, cancelEnvelope as e, getEnvelopeFile as f, getEnvelope as g, getFieldAttachment as h, throttledGetEnvelope as t, updateEnvelopeField as u };

package/dist/components/Permissions.js

@@ -0,0 +1,34 @@
+import { E as EnvelopeStates } from './Types.js';
+
+/**
+ * Various helpers to identify available operations for an envelope by a user.
+ *
+ * @module
+ */
+/**
+ * Check to see if the user owns the envelope.
+ */
+var userIsEnvelopeOwner = function (session, envelope) { return envelope.profile_id === (session === null || session === void 0 ? void 0 : session.profile_id); };
+/**
+ * Check to see if the user owns the envelope.
+ */
+var userCanCancelEnvelope = function (session, envelope) {
+    return userIsEnvelopeOwner(session, envelope) &&
+        envelope.status !== EnvelopeStates.COMPLETE &&
+        envelope.status !== EnvelopeStates.DECLINED &&
+        envelope.status !== EnvelopeStates.CANCELED;
+};
+/**
+ * Returns true if the recipient has a pending action. Note that this does not necessarily mean the recipient can act (yet).
+ */
+var recipientHasAction = function (recipient) { return !['submitted', 'canceled', 'declined'].includes(recipient.status); };
+/**
+ * Returns the recipients who still have a pending action. Note that not all of these recipients may be able to act (yet).
+ */
+var getRecipientsWithActions = function (envelope) { return ((envelope === null || envelope === void 0 ? void 0 : envelope.recipients) || []).filter(recipientHasAction); };
+/**
+ * Returns true if the recipient can act.
+ */
+var recipientCanAct = function (recipient, recipientsWithActions) { var _a; return recipient.sequence === ((_a = recipientsWithActions === null || recipientsWithActions === void 0 ? void 0 : recipientsWithActions[0]) === null || _a === void 0 ? void 0 : _a.sequence); };
+
+export { getRecipientsWithActions as g, recipientCanAct as r, userCanCancelEnvelope as u };