@verdocs/web-sdk 1.15.0 → 1.15.1

package/dist/components/verdocs-templates-list.js

@@ -1,111 +1,278 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as searchEnvelopes } from './Envelopes.js';
-import { g as getNextRecipient } from './Permissions.js';
 import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { f as formatShortTimeAgo } from './DateTime.js';
-import { i as integerSequence } from './Primitives.js';
+import { P as Permissions, V as VerdocsEndpoint, c as canPerformTemplateAction } from './VerdocsEndpoint.js';
+import { g as getSummary } from './Templates.js';
+import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$2 } from './verdocs-button2.js';
+import { d as defineCustomElement$5 } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$3 } from './verdocs-loader2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsTemplatesListCss = "verdocs-templates-list{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}";
+/**
+ * Confirm whether the user has all of the specified permissions.
+ */
+var userHasPermissions = function (session, permissions) {
+    return permissions.every(function (perm) { return ((session === null || session === void 0 ? void 0 : session.permissions) || []).includes(perm); });
+};
 
-const EmptyImage = 'https://verdocs-public-assets.s3.amazonaws.com/no-verdocs.png';
+/**
+ * Various helpers to identify available operations for a template by a user.
+ *
+ * @module
+ */
+/**
+ * Check to see if the user can create a personal/private template.
+ */
+var userCanCreatePersonalTemplate = function (session) {
+    return userHasPermissions(session, [Permissions.TEMPLATE_CREATOR_CREATE_PERSONAL]);
+};
+/**
+ * Check to see if the user can create an org-shared template.
+ */
+var userCanCreateOrgTemplate = function (session) { return userHasPermissions(session, [Permissions.TEMPLATE_CREATOR_CREATE_ORG]); };
+/**
+ * Check to see if the user can create a public template.
+ */
+var userCanCreatePublicTemplate = function (session) { return userHasPermissions(session, [Permissions.TEMPLATE_CREATOR_CREATE_PUBLIC]); };
+/**
+ * Confirm whether the user can create a new template.
+ */
+var userCanCreateTemplate = function (session) {
+    return userCanCreatePersonalTemplate(session) || userCanCreateOrgTemplate(session) || userCanCreatePublicTemplate(session);
+};
+
+const verdocsTemplatesListCss = "verdocs-templates-list{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-templates-list .template{display:-ms-flexbox;display:flex;margin:3px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #eee;background:#fff;padding:8px 20px}verdocs-templates-list .template svg{width:32px;height:32px}@media screen and (max-width: 1300px){verdocs-templates-list .template svg{width:24px;height:24px}}verdocs-templates-list .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:black;font-size:18px;margin-left:10px}@media screen and (max-width: 1300px){verdocs-templates-list .name{font-size:16px}}verdocs-templates-list .spacer{display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;height:50px;margin:0 12px;border-right:1px solid #dad8dd}@media screen and (max-width: 800px){verdocs-templates-list .spacer{margin:12px 0;border-top:1px solid #dad8dd;border-right:none}}";
+
+const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>`;
 const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.sdkError = createEvent(this, "sdkError", 7);
     this.viewEnvelope = createEvent(this, "viewEnvelope", 7);
+    this.finishLater = createEvent(this, "finishLater", 7);
     this.viewAll = createEvent(this, "viewAll", 7);
+    this.handleOptionSelected = (id, summary) => {
+      console.log('option selected', id, summary);
+      if (id === 'createdoc') ;
+      else if (id === 'createlink') {
+        // Create a link to this template
+        VerdocsToast('Link creation is coming soon!');
+      }
+      else ;
+    };
     this.endpoint = VerdocsEndpoint.getDefault();
     this.items = 5;
     this.view = undefined;
-    this.header = undefined;
-    this.title = '';
+    this.page = 0;
     this.count = 0;
     this.loading = true;
-    this.envelopes = [];
+    this.name = '';
+    this.containing = '';
+    this.sharing = 'all';
+    this.starred = 'all';
+    this.sort = 'updated_at';
+    this.selectedTemplates = [];
+    this.templates = [];
   }
   async componentWillLoad() {
     var _a, _b, _c;
     try {
       this.endpoint.loadSession();
       if (!this.endpoint.session) {
-        console.log('[ACTIVITIES] Must be authenticated');
+        console.log('[ENVELOPES] Must be authenticated');
         return;
       }
       let queryParams = {
-        page: 0,
-        ascending: false,
-        sort_by: 'updated_at',
-        limit: Math.max(Math.min(this.items, 30), 1),
+        page: this.page,
+        ascending: this.sort === 'name' || this.sort === 'star_counter',
+        sort_by: this.sort,
       };
-      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;
+      if (this.sharing !== 'all') {
+        queryParams.is_personal = this.sharing === 'personal';
+        queryParams.is_public = this.sharing === 'public';
+      }
+      if (this.starred !== 'all') {
+        // TODO: Update the js-sdk type
+        queryParams['is_starred'] = this.starred === 'starred';
+      }
+      if (this.name.trim() !== '') {
+        queryParams.name = this.name.trim();
       }
-      this.title = this.header !== undefined ? this.header : defaultHeader;
-      const response = await searchEnvelopes(this.endpoint, queryParams);
-      console.log('[ACTIVITIES] Got envelopes', response);
-      this.envelopes = response.result;
+      const response = await getSummary(this.endpoint, queryParams);
+      console.log('[TEMPLATES] Got envelopes', response);
+      this.templates = response.result;
       this.count = response.total;
       this.loading = false;
     }
     catch (e) {
-      console.log('[ACTIVITIES] Error with preview session', e);
+      console.log('[ENVELOPES] 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';
+  canCreate() {
+    return userCanCreateTemplate(this.endpoint.session);
+  }
+  canDelete(summary) {
+    return canPerformTemplateAction(this.endpoint.session, 'delete', summary);
+  }
+  canEdit(summary) {
+    return canPerformTemplateAction(this.endpoint.session, 'write', summary);
+  }
+  canPreview(summary) {
+    const hasPermission = canPerformTemplateAction(this.endpoint.session, 'read', summary);
+    // let canPreview;
+    // const signers = filter(template.roles, {type: 'signer'});
+    // canPreview = signers && signers.length > 0;
+    // for (const signer of signers) {
+    //   canPreview = signer['fields'] && signer['fields'].length > 0;
+    // }
+    // return hasPermission && canPreview;
+    return hasPermission;
   }
   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, { style: { minHeight: '300px' } }, h("verdocs-loader", null)));
     }
-    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' } }))));
+    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => {
+        this.name = e.target.value;
+      } })), h("div", { class: "flex flex-row gap-3 items-center" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-containing", value: this.containing, autocomplete: "off", placeholder: "Fields Containing...", onInput: (e) => {
+        this.containing = e.target.value;
+      } }))), h("div", { class: "flex flex-1" })), this.templates.slice(0, this.items || 100).map(summary => {
+      const MENU_OPTIONS = [
+        //  [disabled]="!canSendEnvelope"
+        { label: 'Preview / Send', id: 'createdoc', disabled: !this.canPreview(summary) },
+        //  [disabled]="!(canSendEnvelope && canHaveLiveView)"
+        { label: 'Create Link', id: 'createlink', disabled: true },
+        // [disabled]="!(canSendEnvelope && canSignNow)"
+        { label: 'Sign Now', id: 'signnow', disabled: true },
+        // (click)="gotoEnvelope()"
+        { label: '' },
+        { label: 'Submissions', id: 'submitted' },
+        { label: '' },
+        { label: 'Get Preview Link', id: 'link', disabled: !this.canPreview(summary) },
+        { label: 'Edit', id: 'edit', disabled: !this.canEdit(summary) },
+        { label: 'Delete', id: 'delete', disabled: !this.canDelete(summary) },
+      ];
+      return (h("div", { class: "template", onClick: () => { } }, h("span", { innerHTML: TemplateIcon }), h("div", { class: "name" }, summary.name), h("div", { class: "spacer" }), h("div", { style: { marginTop: '12px' } }, h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, summary) })))
+      //
+      // <div class="envelope" key={envelope.id} onClick={() => this.viewEnvelope?.emit({endpoint: this.endpoint, envelope})}>
+      //   <div class="inner">
+      //     <verdocs-checkbox
+      //       checked={this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1}
+      //       onClick={e => e.stopPropagation()} // So this doesn't trigger navigation
+      //       onInput={(e: any) => {
+      //         if (e.target.checked) {
+      //           this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];
+      //         } else {
+      //           this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
+      //         }
+      //       }}
+      //     />
+      //
+      //     <div class="vert-spacer" />
+      //
+      //     <span innerHTML={DocumentIcon} />
+      //
+      //     <div class="envelope-name">
+      //       {envelope.name}:&nbsp; <div class="envelope-recipients">{envelope.recipients.map(r => r.full_name).join(', ')}</div>
+      //     </div>
+      //
+      //     <div class="vert-spacer" />
+      //
+      //     <verdocs-status-indicator envelope={envelope} style={{width: '125px'}} />
+      //
+      //     <div class="vert-spacer" />
+      //
+      //     <div class="last-modified">{new Date(envelope.updated_at).toLocaleString()}</div>
+      //
+      //     <div class="vert-spacer" />
+      //
+      //     <verdocs-dropdown
+      //       options={[
+      //         {label: 'View Envelope', id: 'view'},
+      //         {label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish},
+      //         {label: 'Download', id: 'download'},
+      //         {label: 'Cancel', id: 'cancel', disabled: !userCanCancel},
+      //       ]}
+      //       onOptionSelected={e => {
+      //         switch (e.detail.id) {
+      //           case 'view':
+      //             this.viewEnvelope?.emit({endpoint: this.endpoint, envelope});
+      //             break;
+      //           case 'finish':
+      //             this.finishLater?.emit({endpoint: this.endpoint, envelope});
+      //             break;
+      //           case 'download':
+      //             this.downloadEnvelope(envelope);
+      //             break;
+      //           case 'cancel':
+      //             if (window.confirm('Are you sure you want to cancel this envelope?')) {
+      //               cancelEnvelope(this.endpoint, envelope.id)
+      //                 .then(r => {
+      //                   console.log('Cancel result', r);
+      //                   VerdocsToast('Envelope canceled');
+      //                 })
+      //                 .catch(e => {
+      //                   console.log('cxl error', e);
+      //                   VerdocsToast('Unable to cancel envelope: ' + e.messabge, {style: 'error'});
+      //                 });
+      //             }
+      //             break;
+      //         }
+      //       }}
+      //     />
+      //   </div>
+      // </div>
+      );
+    }), !this.templates.length ? (h("div", { class: "mt-4 border-2 px-20 py-20 text-center" }, "No matching templates found. Please adjust your filters and try again.")) : (h("div", null)
+    // <Pagination page={this.page} total={this.count} onSelectPage={setPage} />
+    )));
   }
   static get style() { return verdocsTemplatesListCss; }
 }, [0, "verdocs-templates-list", {
     "endpoint": [16],
     "items": [2],
-    "view": [1],
-    "header": [1],
-    "title": [32],
+    "view": [513],
+    "page": [514],
     "count": [32],
     "loading": [32],
-    "envelopes": [32]
+    "name": [32],
+    "containing": [32],
+    "sharing": [32],
+    "starred": [32],
+    "sort": [32],
+    "selectedTemplates": [32],
+    "templates": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-templates-list", "verdocs-button"];
+  const components = ["verdocs-templates-list", "verdocs-dropdown", "verdocs-help-icon", "verdocs-loader", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-templates-list":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, VerdocsTemplatesList$1);
       }
       break;
-    case "verdocs-button":
+    case "verdocs-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-text-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/verdocs-view2.js

@@ -4,7 +4,7 @@ import { c as userCanCancelEnvelope } from './Permissions.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { i as integerSequence } from './Primitives.js';
-import { s as saveEnvelopesAsZip, h as saveCertificate, b as saveAttachment } from './utils.js';
+import { s as saveEnvelopesAsZip, i as saveCertificate, b as saveAttachment } from './utils.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';