@verdocs/web-sdk 1.4.6 → 1.5.1

package/dist/collection/components/embeds/verdocs-search/verdocs-search.js

@@ -1,13 +1,20 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 export class VerdocsSearch {
+  constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
+  }
   render() {
     return (h("div", { class: "container" },
-      h("verdocs-search-box", null),
+      h("verdocs-search-box", { endpoint: this.endpoint }),
       h("div", { class: "boxes" },
-        h("verdocs-search-activity", { type: "recent" }),
-        h("verdocs-search-activity", { type: "saved" }),
-        h("verdocs-search-activity", { type: "starred" }),
-        h("search-quick-functions", null))));
+        h("verdocs-search-activity", { type: "recent", endpoint: this.endpoint }),
+        h("verdocs-search-activity", { type: "saved", endpoint: this.endpoint }),
+        h("verdocs-search-activity", { type: "starred", endpoint: this.endpoint }),
+        h("search-quick-functions", { endpoint: this.endpoint }))));
   }
   static get is() { return "verdocs-search"; }
   static get originalStyleUrls() { return {
@@ -16,4 +23,27 @@ export class VerdocsSearch {
   static get styleUrls() { return {
     "$": ["verdocs-search.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()"
+    }
+  }; }
 }

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.css

@@ -31,7 +31,7 @@ verdocs-sign .intro {
 verdocs-sign .toolbar {
   width: 100%;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 14px;
   max-width: 1028px;
   position: relative;
 }
@@ -61,17 +61,34 @@ verdocs-sign .document {
   position: relative;
   overflow-y: scroll;
 }
-verdocs-sign .agree-checkbox {
+verdocs-sign .agree {
+  flex: 1;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+verdocs-sign .agree .intro {
+  display: none;
+}
+verdocs-sign .agree .header {
+  flex: 0 0 56px;
+}
+verdocs-sign .agree .agree-checkbox {
+  background: #ccc;
   flex: 0 0 20px;
   display: flex;
   width: 20px;
   height: 20px;
   border-radius: 3px;
-  background: #ffffff;
   position: relative;
-  margin: 0 10px 0 30px;
+  margin: 0 10px 0 14px;
 }
-verdocs-sign .agree-checkbox label {
+verdocs-sign .agree .agree-checkbox input[type=checkbox]:checked + label:after {
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+verdocs-sign .agree .agree-checkbox label {
   left: 2px;
   top: 2px;
   width: 16px;
@@ -81,7 +98,11 @@ verdocs-sign .agree-checkbox label {
   background: #33354c;
   box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8);
 }
-verdocs-sign .agree-checkbox label:after {
+verdocs-sign .agree .agree-checkbox label .agree-checkbox label:hover::after {
+  filter: alpha(opacity=30);
+  opacity: 0.3;
+}
+verdocs-sign .agree .agree-checkbox label:after {
   top: 2px;
   left: 3px;
   width: 8px;
@@ -96,26 +117,6 @@ verdocs-sign .agree-checkbox label:after {
   border-top: none;
   border-right: none;
 }
-verdocs-sign .agree-checkbox label:hover::after {
-  filter: alpha(opacity=30);
-  opacity: 0.3;
-}
-verdocs-sign .agree-checkbox input[type=checkbox]:checked + label:after {
-  filter: alpha(opacity=100);
-  opacity: 1;
-}
-verdocs-sign.agreed .intro {
-  display: none;
-}
-verdocs-sign.agreed .header {
-  flex: 0 0 56px;
-}
-verdocs-sign.agreed .agree-checkbox {
-  background: #ccc;
-}
-verdocs-sign.agreed .agree-checkbox label {
-  cursor: default;
-}
 verdocs-sign .page-controls {
   position: absolute;
   left: 50%;

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -1,18 +1,20 @@
 import { Host } from '@stencil/core';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Documents } from '@verdocs/js-sdk/Documents';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { rescale } from '@verdocs/js-sdk/Utils/Fields';
-import { VerdocsEndpoint } from '@verdocs/js-sdk/HTTP';
 import { Component, Prop, State, h } from '@stencil/core';
 import { updateRecipientStatus } from '@verdocs/js-sdk/Documents/Recipients';
-import { getEndpoint, setActiveEndpoint } from '@verdocs/js-sdk/HTTP/Transport';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
-import { getSigningSession, getDocument, getDocumentFile, updateDocumentField } from '@verdocs/js-sdk/Documents/Documents';
-const BASE_URL = 'https://stage-api.verdocs.com';
 /**
  * Display a document signing experience.
  */
 export class VerdocsSign {
   constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
      * signing session.
@@ -28,7 +30,6 @@ export class VerdocsSign {
      * signing session.
      */
     this.invitecode = null;
-    this.endpoint = null;
     this.recipient = null;
     this.signerToken = null;
     this.pdfUrl = null;
@@ -39,14 +40,10 @@ export class VerdocsSign {
     this.nextButtonLabel = 'Start';
     this.focusedField = '';
   }
-  componentWillLoad() {
-    const endpoint = new VerdocsEndpoint().setBaseURL(BASE_URL);
-    setActiveEndpoint(endpoint);
-  }
   async componentDidLoad() {
     try {
       console.log('[SIGN] Processing invite code', this.documentid, this.roleid, this.invitecode);
-      const { session, recipient, signerToken } = await getSigningSession({
+      const { session, recipient, signerToken } = await Documents.getSigningSession(this.endpoint, {
         documentId: this.documentid,
         roleId: this.roleid,
         inviteCode: this.invitecode,
@@ -55,14 +52,14 @@ export class VerdocsSign {
       console.log('[SIGN] Recipient', recipient);
       this.recipient = recipient;
       this.signerToken = signerToken;
-      getEndpoint().setSigningAuthorization(signerToken);
+      this.endpoint.setToken(signerToken);
       if (this.recipient.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      const document = await getDocument(this.documentid);
+      const document = await Documents.getDocument(this.endpoint, this.documentid);
       this.document = document;
       console.log('[SIGN] Document', document);
-      this.pdfUrl = `${BASE_URL}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;
+      this.pdfUrl = `${this.endpoint.getBaseURL()}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;
       this.recipientIndex = this.document.recipients.findIndex(recipient => recipient.role_name == this.roleid);
       if (this.recipientIndex > -1) {
         console.log('Found recipient', this.document.recipients[this.recipientIndex]);
@@ -79,7 +76,7 @@ export class VerdocsSign {
   }
   handleClickAgree() {
     console.log('agree clicked');
-    updateRecipientStatus(this.documentid, this.roleid, 'update', { agreed: true })
+    updateRecipientStatus(this.endpoint, this.documentid, this.roleid, 'update', { agreed: true })
       .then(r => {
       console.log('update result', r);
       this.nextButtonLabel = 'Next';
@@ -91,7 +88,7 @@ export class VerdocsSign {
   }
   async savePDF() {
     const fileName = `${this.document.name} - ${this.document.updated_at.split('T')[0]}.pdf`;
-    const data = await getDocumentFile(this.documentid, this.document.envelope_document_id);
+    const data = await Documents.getDocumentFile(this.endpoint, this.documentid, this.document.envelope_document_id);
     // This is better in React than doing window.href= or similar to trigger a download. For a description of the technique
     // see https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image
     let xhr = new XMLHttpRequest();
@@ -133,23 +130,23 @@ export class VerdocsSign {
     console.log('fieldChange', field, e.detail);
     switch (field.type) {
       case 'textbox':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: e.detail })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
       case 'checkbox_group':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
       case 'radio_button_group':
         const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: { options } })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: { options } })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
       case 'dropdown':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: e.detail })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
@@ -312,12 +309,12 @@ export class VerdocsSign {
         h("div", { class: "toolbar" },
           h("div", { class: "tools" },
             h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }),
-            !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { style: { flex: '1', flexDirection: 'row', display: 'flex', alignItems: 'center' } },
+            !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { class: "agree" },
               h("div", { class: "agree-checkbox" },
                 h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }),
                 h("label", { htmlFor: "agree-checkbox-element" })),
-              "I agree to use electronic records and signatures.")) : (h("div", { style: { flex: '1' } })),
-            h("verdocs-button", { label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))),
+              h("span", null, "I agree to use electronic records and signatures."))) : (h("div", { style: { flex: '1' } })),
+            h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))),
       !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }),
       h("div", { class: "document" },
         this.pdfUrl ? h("verdocs-view", { source: this.pdfUrl, token: this.signerToken, onDocumentRendered: e => this.handleDocumentRendered(e) }) : h("verdocs-loader", null),
@@ -334,6 +331,27 @@ export class VerdocsSign {
     "$": ["verdocs-sign.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()"
+    },
     "documentid": {
       "type": "string",
       "mutable": false,
@@ -390,7 +408,6 @@ export class VerdocsSign {
     }
   }; }
   static get states() { return {
-    "endpoint": {},
     "recipient": {},
     "signerToken": {},
     "pdfUrl": {},

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.stories.js

@@ -3,9 +3,9 @@ export default {
   title: 'Embeds/Sign',
   component: 'verdocs-sign',
   args: {
-    documentid: 'f8ef90d3-8631-4f75-8e51-82d0b43fc363',
+    documentid: 'bd8ecb8f-6eb9-4998-802a-b8d8b7f14d63',
     roleid: 'Recipient 1',
-    invitecode: 'd48c3e7d7071e1cc6c4788932f2604d9',
+    invitecode: '9c5284cd58e6e7a86c0a94522b58d433',
   },
   argTypes: {
     authenticated: {

package/dist/collection/components/embeds/verdocs-view/verdocs-view.js

@@ -1,4 +1,5 @@
 import pdf from 'pdfjs-dist';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { VerbosityLevel, version as PDFJSversion } from 'pdfjs-dist';
 import { Component, h, Element, Event, Prop, Watch, State } from '@stencil/core';
 import { integerSequence } from '../../../utils/utils';
@@ -13,6 +14,10 @@ export class VerdocsView {
   constructor() {
     this.numPages = 1;
     this.fingerprint = null;
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * Rotate the PDF in degrees
      */
@@ -133,6 +138,27 @@ export class VerdocsView {
     "$": ["verdocs-view.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()"
+    },
     "rotation": {
       "type": "number",
       "mutable": false,