@verdocs/web-sdk 1.14.12 → 1.15.1

package/dist/collection/components/envelopes/verdocs-activity-box/verdocs-activity-box.js

@@ -0,0 +1,246 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Envelopes } from '@verdocs/js-sdk/Envelopes';
+import { formatShortTimeAgo } from '@verdocs/js-sdk/Utils/DateTime';
+import { getNextRecipient } from '@verdocs/js-sdk/Envelopes/Permissions';
+import { Host, h } from '@stencil/core';
+import { SDKError } from '../../../utils/errors';
+import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
+const EmptyImage = 'https://verdocs-public-assets.s3.amazonaws.com/no-verdocs.png';
+/**
+ * Displays a box showing summaries of envelopes matching specified conditions. Activity Boxes show a fixed number
+ * of items because they are meant to be laid out horizontally (if the user's screen is large enough) and this helps
+ * them appear more visually balanced.
+ */
+export class VerdocsActivityBox {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.items = 5;
+    this.view = undefined;
+    this.header = undefined;
+    this.title = '';
+    this.count = 0;
+    this.loading = true;
+    this.envelopes = [];
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.endpoint.session) {
+        console.log('[ACTIVITIES] Must be authenticated');
+        return;
+      }
+      let queryParams = {
+        page: 0,
+        ascending: false,
+        sort_by: 'updated_at',
+        limit: Math.max(Math.min(this.items, 50), 1),
+      };
+      let defaultHeader;
+      switch (this.view) {
+        case 'action':
+          queryParams = { ...queryParams, is_recipient: true, envelope_status: ['pending', 'in progress'], recipient_status: ['invited', 'opened', 'signed'] };
+          defaultHeader = 'Action Required';
+          break;
+        case 'waiting':
+          queryParams = { ...queryParams, is_owner: true, ascending: false, envelope_status: ['pending', 'in progress'] };
+          defaultHeader = 'Waiting on Others';
+          break;
+        case 'completed':
+        default:
+          queryParams = { ...queryParams, envelope_status: ['complete'] };
+          defaultHeader = 'Completed';
+          break;
+      }
+      this.title = this.header !== undefined ? this.header : defaultHeader;
+      const response = await Envelopes.searchEnvelopes(this.endpoint, queryParams);
+      console.log('[ACTIVITIES] Got envelopes', response);
+      this.envelopes = response.result;
+      this.count = response.total;
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[ACTIVITIES] Error with preview session', 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));
+    }
+  }
+  getNextRecipientName(envelope) {
+    var _a;
+    const nextRecipient = getNextRecipient(envelope) || ((_a = envelope.recipients) === null || _a === void 0 ? void 0 : _a[0]);
+    return (nextRecipient === null || nextRecipient === void 0 ? void 0 : nextRecipient.full_name) || 'N/A';
+  }
+  render() {
+    if (this.loading) {
+      return (h(Host, { style: { minHeight: '300px' } }, this.title && (h("div", { class: "box-title" }, this.title, " ", h("span", { class: "count" }, "(0)"))), integerSequence(0, this.items).map(() => (h("div", { class: "loading-placeholder" }, h("div", { class: "loading-placeholder-bg" }))))));
+    }
+    return (h(Host, null, this.title && (h("div", { class: "box-title" }, this.title, " ", h("span", { class: "count" }, "(", this.count, ")"), h("div", { class: "spacer" }), h("verdocs-button", { label: "View All", size: "small", onClick: () => { var _a; return (_a = this.viewAll) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, view: this.view }); } }))), this.count > 0 ? (this.envelopes.slice(0, Math.max(this.items, 1)).map(envelope => (h("div", { class: "activity-entry", onClick: () => {
+        var _a;
+        (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope });
+      } }, h("div", { class: "title" }, envelope.name, h("br", null), " ", h("strong", null, this.getNextRecipientName(envelope))), h("div", { class: "time-ago" }, formatShortTimeAgo(envelope.updated_at)))))) : (h("img", { src: EmptyImage, alt: "No documents to show", style: { width: '190px', margin: '0 auto' } }))));
+  }
+  static get is() { return "verdocs-activity-box"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-activity-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-activity-box.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()"
+      },
+      "items": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of items to display."
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "view": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'completed' | 'action' | 'waiting'",
+          "resolved": "\"action\" | \"completed\" | \"waiting\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The filtered view to display. \"completed\" will show envelopes that have been submitted. \"action\" will\nshow envelopes where the user is a recipient and the envelope is not completed. \"waiting\" will show\nonly envelopes where the user is the sender and the envelope is not completed."
+        },
+        "attribute": "view",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The title to display on the box (\"title\" is a reserved word). This is optional, and if not set, the title\nwill be derived from the view. Set this to an empty string to hide the header."
+        },
+        "attribute": "header",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "title": {},
+      "count": {},
+      "loading": {},
+      "envelopes": {}
+    };
+  }
+  static get events() {
+    return [{
+        "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"
+            }
+          }
+        }
+      }, {
+        "method": "viewEnvelope",
+        "name": "viewEnvelope",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks an activity entry. Typically the host application will use this to navigate\nto the envelope detail view."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        }
+      }, {
+        "method": "viewAll",
+        "name": "viewAll",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks View All in the title bar. The current view will be included in the event\ndetails to help the host application navigate the user to the appropriate screen for the request. Note that\nthe verdocs-envelopes-list control uses the same \"view\" parameter, so host applications can typically pass\nthis value through directly. This button is not visible if the header is hidden."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; view: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; view: string; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/envelopes/verdocs-activity-box/verdocs-activity-box.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Envelopes/Activity Box',
+  component: 'verdocs-activity-box',
+  args: {
+    items: 5,
+    view: 'completed',
+    header: undefined,
+  },
+  argTypes: {
+    onViewEnvelope: { action: 'viewEnvelope' },
+    onViewAll: { action: 'viewAll' },
+  },
+};
+export const ActivityBox = ({ items, view, header, onViewEnvelope, onViewAll }) => html `<verdocs-activity-box .items="${items}" .view="${view}" .header="${header}" @viewEnvelope=${onViewEnvelope} @viewAll=${onViewAll} />`;

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.css

@@ -0,0 +1,99 @@
+verdocs-envelopes-list {
+  display: flex;
+  padding: 10px;
+  font-size: 18px;
+  flex-wrap: nowrap;
+  border-radius: 6px;
+  color: #33364b;
+  align-items: center;
+  flex-direction: column;
+  font-family: "Inter", "Barlow", sans-serif;
+}
+verdocs-envelopes-list .header {
+  width: 100%;
+  row-gap: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 12px;
+  margin: 0 0 10px 0;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-envelopes-list .header .filter {
+  width: 150px;
+}
+verdocs-envelopes-list .header verdocs-text-input {
+  margin: 0;
+}
+verdocs-envelopes-list .header verdocs-text-input input {
+  height: 32px;
+}
+verdocs-envelopes-list .filter {
+  align-items: center;
+}
+verdocs-envelopes-list .envelope {
+  width: 100%;
+  margin: 3px 0;
+  background: #ffffff;
+}
+verdocs-envelopes-list .envelope:hover {
+  cursor: pointer;
+  background: #f5f5fa;
+}
+verdocs-envelopes-list .envelope .inner {
+  gap: 14px;
+  display: flex;
+  padding: 8px 20px;
+  border-radius: 6px;
+  flex-direction: row;
+  align-items: center;
+}
+verdocs-envelopes-list .envelope .inner svg {
+  width: 24px;
+  height: 24px;
+}
+verdocs-envelopes-list .vert-spacer {
+  height: 50px;
+  display: flex;
+  flex: 0 0 1px;
+  border-right: 1px solid #dad8dd;
+}
+verdocs-envelopes-list .last-modified {
+  color: #444;
+  display: flex;
+  flex: 0 0 180px;
+  font-size: 16px;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+}
+verdocs-envelopes-list .envelope-name {
+  flex: 1;
+  display: flex;
+  color: #000000;
+  font-size: 18px;
+  overflow: hidden;
+  line-height: 28px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+verdocs-envelopes-list .envelope-recipients {
+  color: #4b5563;
+  font-weight: 700;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+verdocs-envelopes-list .empty-text {
+  font-size: 20px;
+  text-align: center;
+  margin: 16px 0 0 0;
+  padding: 80px 80px;
+  border: 2px solid #ccc;
+}
+verdocs-envelopes-list .containing {
+  gap: 12px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}