@verdocs/web-sdk 1.2.0 → 1.4.0

package/dist/collection/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.js

@@ -0,0 +1,292 @@
+import { Component, Prop, h, Event, Fragment, Host, State } from '@stencil/core';
+import Question from './question.svg';
+/**
+ * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
+ * box with a message and optional header/title. An OK button is shown that will dismiss the message.
+ * It can also be dismissed by clicking the background overlay.
+ */
+export class VerdocsKbaDialog {
+  constructor() {
+    /**
+     * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.
+     */
+    this.step = 1;
+    /**
+     * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).
+     */
+    this.steps = 3;
+    /**
+     * If set, a help/instructions box will be displayed with this title
+     */
+    this.helptitle = 'One Time Code';
+    /**
+     * If set, a help/instructions box will be displayed with this text
+     */
+    this.helptext = 'Please check your text messages for a security code, and enter the code below.';
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.mode = 'choice';
+    /**
+     * For text input challenges, the label to display next to the input field.
+     */
+    this.label = 'PIN';
+    /**
+     * For text input challenges, the placeholder to display inside the input field.
+     */
+    this.placeholder = 'Enter your PIN...';
+    /**
+     * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.
+     */
+    this.choices = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.open = false;
+    this.response = '';
+  }
+  handleCancel() {
+    this.cancel.emit();
+    this.open = false;
+  }
+  // We need a separate event handler for clicking the background because it can receive events "through" other child components
+  handleDismiss(e) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleDone() {
+    this.done.emit(this.response);
+    this.open = false;
+  }
+  render() {
+    return (h(Host, { style: { display: this.open ? 'block' : 'none' } },
+      h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) },
+        h("div", { class: "dialog" },
+          h("div", { class: "heading" },
+            "Confirm Your Identity",
+            this.steps > 1 ? (h("span", { class: "step" },
+              "(",
+              this.step,
+              "/",
+              this.steps,
+              ")")) : (h(Fragment, null))),
+          h("div", { class: "help-box" },
+            h("div", { class: "help-icon", innerHTML: Question }),
+            h("div", { class: "help-details" },
+              h("div", { class: "help-title" }, this.helptitle),
+              h("div", { class: "help-text" }, this.helptext))),
+          this.mode === 'choice' ? (h("div", { class: "choices" }, this.choices.map(choice => (h("div", { class: `choice ${choice === this.response ? 'selected' : ''}`, onClick: () => {
+              this.response = choice;
+            } }, choice))))) : (h("div", { class: "input" },
+            h("label", { htmlFor: "verdocs-kba-input" }, this.label),
+            h("input", { type: "text", id: "verdocs-kba-input", name: "verdocs-kba-input", placeholder: this.placeholder }))),
+          h("div", { class: "buttons" },
+            h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }),
+            h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: !this.response }))))));
+  }
+  static get is() { return "verdocs-kba-dialog"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-kba-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-kba-dialog.css"]
+  }; }
+  static get properties() { return {
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2."
+      },
+      "attribute": "step",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "steps": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator)."
+      },
+      "attribute": "steps",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "helptitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, a help/instructions box will be displayed with this title"
+      },
+      "attribute": "helptitle",
+      "reflect": false,
+      "defaultValue": "'One Time Code'"
+    },
+    "helptext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, a help/instructions box will be displayed with this text"
+      },
+      "attribute": "helptext",
+      "reflect": false,
+      "defaultValue": "'Please check your text messages for a security code, and enter the code below.'"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text' | 'choice'",
+        "resolved": "\"choice\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "'choice'"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "For text input challenges, the label to display next to the input field."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "'PIN'"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "For text input challenges, the placeholder to display inside the input field."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "'Enter your PIN...'"
+    },
+    "choices": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes."
+      },
+      "defaultValue": "['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd']"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "response": {}
+  }; }
+  static get events() { return [{
+      "method": "cancel",
+      "name": "cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "done",
+      "name": "done",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.stories.js

@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/KBA Dialog',
+  component: 'verdocs-kba-dialog',
+  args: {
+    open: true,
+    mode: 'choice',
+    helptitle: 'One Time Code',
+    helptext: 'Please check your text messages for a security code, and enter the code below.',
+    label: 'PIN',
+    placeholder: 'Enter your PIN...',
+    step: 1,
+    steps: 3,
+    choices: ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'],
+  },
+  argTypes: {
+    closed: {
+      action: 'closed',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const KBADialog = ({ helptitle, helptext, label, placeholder, mode, step, steps, choices, open, closed }) => html `<verdocs-kba-dialog
+    .mode=${mode}
+    .helptitle=${helptitle}
+    .helptext=${helptext}
+    .label=${label}
+    .placeholder=${placeholder}
+    .step=${step}
+    .steps=${steps}
+    .choices=${choices}
+    .open=${open}
+    @closed=${closed}
+  />`;

package/dist/collection/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.css

@@ -1,6 +1,5 @@
 verdocs-ok-dialog {
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   box-sizing: border-box;
 }
 verdocs-ok-dialog .background-overlay {

package/dist/collection/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.css

@@ -1,6 +1,5 @@
 verdocs-signature-dialog {
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   box-sizing: border-box;
   display: none;
 }

package/dist/collection/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.js

@@ -238,8 +238,8 @@ export class VerdocsSignatureDialog {
             this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }),
             h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."),
             h("div", { class: "buttons" },
-              h("verdocs-button", { label: "CANCEL", variant: "outline", onPress: () => this.handleCancel() }),
-              h("verdocs-button", { label: "Adopt & Sign", onPress: () => this.handleAdopt() })))))));
+              h("verdocs-button", { label: "CANCEL", size: "normal", variant: "outline", onPress: () => this.handleCancel() }),
+              h("verdocs-button", { label: "Adopt & Sign", size: "normal", onPress: () => this.handleAdopt() })))))));
   }
   static get is() { return "verdocs-signature-dialog"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.css

@@ -1,6 +1,5 @@
 verdocs-upload-dialog {
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   box-sizing: border-box;
 }
 verdocs-upload-dialog div {

package/dist/collection/components/elements/verdocs-field-attachment/verdocs-field-attachment.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Attachment',
+  title: 'Document Fields/Attachment',
   component: 'verdocs-field-attachment',
   args: {},
   argTypes: {},

package/dist/collection/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Checkbox',
+  title: 'Document Fields/Checkbox',
   component: 'verdocs-field-checkbox',
   args: {
     required: false,

package/dist/collection/components/elements/verdocs-field-date/verdocs-field-date.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Date',
+  title: 'Document Fields/Date',
   component: 'verdocs-field-date',
   args: {
     placeholder: 'Select Date',

package/dist/collection/components/elements/verdocs-field-dropdown/verdocs-field-dropdown.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Dropdown',
+  title: 'Document Fields/Dropdown',
   component: 'verdocs-field-dropdown',
   args: {
     order: 1,

package/dist/collection/components/elements/verdocs-field-initial/verdocs-field-initial.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Initial',
+  title: 'Document Fields/Initial',
   component: 'verdocs-field-initial',
   args: {
     required: false,

package/dist/collection/components/elements/verdocs-field-payment/verdocs-field-payment.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Payment',
+  title: 'Document Fields/Payment',
   component: 'verdocs-field-payment',
   args: {},
   argTypes: {},

package/dist/collection/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Radio Button',
+  title: 'Document Fields/Radio Button',
   component: 'verdocs-field-radio-button',
   args: {
     required: false,

package/dist/collection/components/elements/verdocs-field-signature/verdocs-field-signature.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Signature',
+  title: 'Document Fields/Signature',
   component: 'verdocs-field-signature',
   args: {
     required: false,

package/dist/collection/components/elements/verdocs-field-textarea/verdocs-field-textarea.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Textarea',
+  title: 'Document Fields/Textarea',
   component: 'verdocs-field-textarea',
   args: {
     placeholder: 'Email address...',

package/dist/collection/components/elements/verdocs-field-textbox/verdocs-field-textbox.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Textbox',
+  title: 'Document Fields/Textbox',
   component: 'verdocs-field-textbox',
   args: {
     placeholder: 'Email address...',

package/dist/collection/components/elements/verdocs-quick-functions/verdocs-quick-functions.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Search/Quick Functions',
+  title: 'Search/Quick Functions',
   component: 'verdocs-quick-functions',
   args: {
     options: {

package/dist/collection/components/elements/verdocs-search-activity/verdocs-search-activity.stories.js

@@ -3,7 +3,7 @@ import { html } from 'lit-html';
  * Display a list of starred items (favorite templates).
  */
 export default {
-  title: 'Elements/Search/Search Activity',
+  title: 'Search/Search Activity',
   component: 'verdocs-search-activity',
   args: {},
   argTypes: {

package/dist/collection/components/elements/verdocs-search-box/verdocs-search-box.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Search/Search Box',
+  title: 'Search/Search Box',
   component: 'verdocs-search-box',
   args: {
     type: 'all',

package/dist/collection/components/elements/verdocs-search-tabs/verdocs-search-tabs.stories.js

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
  * Display a set of tabs to filter by searchable content types.
  */
 export default {
-  title: 'Elements/Search/Tabs',
+  title: 'Search/Tabs',
   component: 'verdocs-search-tabs',
   args: {},
   argTypes: {},

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

@@ -1,8 +1,6 @@
 verdocs-auth {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
-  background-color: var(--verdocs-secondary-color);
+  font-family: "Barlow", sans-serif;
+  background-color: #4c56cb;
   padding: 40px;
   display: flex;
   flex-direction: column;
@@ -11,7 +9,7 @@ verdocs-auth {
 }
 verdocs-auth .login-form,
 verdocs-auth .signup-form {
-  background: #f2f5fa;
+  background: #f5f5fa;
   align-items: center;
   justify-content: center;
   border-radius: 8px;

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

@@ -1,9 +1,7 @@
 verdocs-search {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   display: flex;
-  background-color: var(--verdocs-background-dark);
+  background-color: #1e2031;
 }
 verdocs-search search-box {
   display: flex;

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

@@ -1,7 +1,5 @@
 verdocs-sign {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -65,6 +63,7 @@ verdocs-sign .document {
 }
 verdocs-sign .agree-checkbox {
   flex: 0 0 20px;
+  display: flex;
   width: 20px;
   height: 20px;
   border-radius: 3px;

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

@@ -5,8 +5,8 @@ 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 { getSigningSession, getDocument, getDocumentFile, updateDocumentField } from '@verdocs/js-sdk/Documents/Documents';
 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.
@@ -63,9 +63,6 @@ export class VerdocsSign {
       this.document = document;
       console.log('[SIGN] Document', document);
       this.pdfUrl = `${BASE_URL}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;
-      // https://stage.verdocs.com/view/sign/f484a296-4f4c-4783-9adf-a3302915a503/roleName/Recipient%202/invitation/ea2328b1181b26118f5c676119232df6
-      // https://stage-api.verdocs.com/documents/f484a296-4f4c-4783-9adf-a3302915a503/envelope_documents/e7968994-b859-40ad-8577-c7b3a1fe76bd?file=true
-      // https://stage-api.verdocs.com/envelopes/f484a296-4f4c-4783-9adf-a3302915a503/envelope_documents/e7968994-b859-40ad-8577-c7b3a1fe76bd?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]);
@@ -315,7 +312,7 @@ 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' } },
+            !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { style: { flex: '1', flexDirection: 'row', display: 'flex', alignItems: 'center' } },
               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" })),

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: '4868db9f-a565-4132-bdd2-c403ae703e95',
+    documentid: 'f8ef90d3-8631-4f75-8e51-82d0b43fc363',
     roleid: 'Recipient 1',
-    invitecode: '2bd1d634616622206bf58d25fb4b7362',
+    invitecode: 'd48c3e7d7071e1cc6c4788932f2604d9',
   },
   argTypes: {
     authenticated: {

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

@@ -1,7 +1,5 @@
 verdocs-view {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   display: flex;
   background: #ccc;
   min-height: 600px;