@verdocs/web-sdk 1.0.22 → 1.1.0

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

@@ -0,0 +1,125 @@
+verdocs-sign {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 600px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+verdocs-sign.storybook {
+  max-height: 600px;
+}
+verdocs-sign div {
+  box-sizing: border-box;
+}
+verdocs-sign .header {
+  flex: 0 0 115px;
+  z-index: 1000;
+  background-color: #33354c;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);
+  transition: all 0.25s;
+}
+verdocs-sign .intro {
+  background-color: #ffffff;
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px;
+  max-width: 1028px;
+  color: rgba(0, 0, 0, 0.87);
+}
+verdocs-sign .toolbar {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 20px;
+  max-width: 1028px;
+  position: relative;
+}
+verdocs-sign .tools {
+  width: 100%;
+  color: #fff;
+  height: 56px;
+  padding: 4px;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+  flex-direction: row;
+  background-color: #33354c;
+}
+verdocs-sign .cover {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.5);
+}
+verdocs-sign .document {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  overflow-y: scroll;
+}
+verdocs-sign .agree-checkbox {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  background: #ffffff;
+  position: relative;
+  margin: 0 10px 0 30px;
+}
+verdocs-sign .agree-checkbox label {
+  left: 2px;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  position: absolute;
+  background: #33354c;
+  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8);
+}
+verdocs-sign .agree-checkbox label:after {
+  top: 2px;
+  left: 3px;
+  width: 8px;
+  opacity: 0;
+  height: 5px;
+  content: "";
+  position: absolute;
+  background: transparent;
+  filter: alpha(opacity=0);
+  transform: rotate(-45deg);
+  border: 2px solid #fcfff4;
+  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%;
+  transform: translateX(-50%);
+  z-index: 500;
+}

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

@@ -0,0 +1,408 @@
+import { Host } from '@stencil/core';
+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 { getSigningSession, getDocument, getDocumentFile, updateDocumentField } from '@verdocs/js-sdk/Documents/Documents';
+import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
+const BASE_URL = 'https://stage-api.verdocs.com';
+/**
+ * Display a document signing experience.
+ */
+export class VerdocsSign {
+  constructor() {
+    /**
+     * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
+     * signing session.
+     */
+    this.documentid = null;
+    /**
+     * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
+     * signing session.
+     */
+    this.roleid = null;
+    /**
+     * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
+     * signing session.
+     */
+    this.invitecode = null;
+    this.endpoint = null;
+    this.recipient = null;
+    this.signerToken = null;
+    this.pdfUrl = null;
+    this.recipientIndex = -1;
+    this.document = null;
+    this.fields = [];
+    this.hasSignature = false;
+    this.nextButtonLabel = 'Start';
+    this.focusedField = '';
+  }
+  componentWillLoad() {
+    const endpoint = new VerdocsEndpoint({ baseURL: 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({
+        documentId: this.documentid,
+        roleId: this.roleid,
+        inviteCode: this.invitecode,
+      });
+      console.log('[SIGN] Got signing session', session);
+      console.log('[SIGN] Recipient', recipient);
+      this.recipient = recipient;
+      this.signerToken = signerToken;
+      getEndpoint().setSigningAuthorization(signerToken);
+      if (this.recipient.agreed) {
+        this.nextButtonLabel = 'Next';
+      }
+      const document = await getDocument(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`;
+      // 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]);
+      }
+      this.fields = this.document.fields.filter(field => field.recipient_role === this.roleid);
+      console.log('Loaded fields', this.fields);
+      // TODO: Fix service to allow this?
+      // const sigs = await getSignatures();
+      // console.log('sigs', sigs);
+    }
+    catch (e) {
+      console.log('Error with signing session', e);
+    }
+  }
+  handleClickAgree() {
+    console.log('agree clicked');
+    updateRecipientStatus(this.documentid, this.roleid, 'update', { agreed: true })
+      .then(r => {
+      console.log('update result', r);
+      this.nextButtonLabel = 'Next';
+      this.recipient = r;
+    })
+      .catch(e => {
+      console.log('update failure', e);
+    });
+  }
+  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);
+    // 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();
+    xhr.responseType = 'blob';
+    xhr.onload = function () {
+      let a = document.createElement('a');
+      a.href = window.URL.createObjectURL(xhr.response);
+      a.download = fileName;
+      a.style.display = 'none';
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    };
+    const url = `data:application/pdf;base64,${data}`;
+    console.log('url', url.length, url);
+    xhr.open('GET', `data:application/pdf;base64,${data}`);
+    xhr.send();
+  }
+  async handleOptionSelected(e) {
+    switch (e.detail.id) {
+      case 'later':
+        // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);
+        if (!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV'])) {
+          window.alert('User intends to sign later.');
+        }
+        break;
+      case 'claim':
+        break;
+      case 'decline':
+        break;
+      case 'print':
+        break;
+      case 'download':
+        this.savePDF().catch(() => { });
+        break;
+    }
+  }
+  async handleFieldChange(field, e, optionId) {
+    console.log('fieldChange', field, e.detail);
+    switch (field.type) {
+      case 'textbox':
+        updateDocumentField(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 }] } })
+          .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 } })
+          .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 })
+          .then(r => console.log('Update result', r))
+          .catch(e => console.log('Error updating', e));
+        break;
+      case 'initial':
+        console.log('Got initial', e.detail);
+        break;
+      case 'signature':
+        console.log('Got signature', e.detail);
+        break;
+    }
+  }
+  renderCheckboxGroupOption(page, field, option, index) {
+    const left = rescale(page.xRatio, option.x);
+    const bottom = rescale(page.yRatio, option.y);
+    const style = {
+      left: `${left}px`,
+      bottom: `${bottom}px`,
+      position: 'absolute',
+      transform: `scale(${page.xRatio}, ${page.yRatio})`,
+      backgroundColor: getRGBA(this.recipientIndex),
+    };
+    return h("verdocs-field-checkbox", { style: style, order: index, value: option.checked, onFieldChange: e => this.handleFieldChange(field, e, option.id) });
+  }
+  renderRadioGroupOption(page, field, option, index) {
+    const left = rescale(page.xRatio, option.x);
+    const bottom = rescale(page.yRatio, option.y);
+    const style = {
+      left: `${left}px`,
+      bottom: `${bottom}px`,
+      position: 'absolute',
+      transform: `scale(${page.xRatio}, ${page.yRatio})`,
+      backgroundColor: getRGBA(this.recipientIndex),
+    };
+    return (h("verdocs-field-radio-button", { style: style, order: index, value: option.id, name: field.name, checked: option.selected, onFieldChange: e => this.handleFieldChange(field, e, option.id) }));
+  }
+  renderField(field, index) {
+    const { required = false, settings = {} } = field;
+    const { x = 0, y = 0, base64 = '', placeholder = '', options = [], value = '', result = '' } = settings;
+    const renderOnPage = this.pdfPageInfo.pages.find(page => page.pageNumber === field.page);
+    if (!renderOnPage) {
+      console.log('Unable to render invalid field', field);
+      return h("div", { class: "invalid-field" }, "Invalid field.");
+    }
+    const left = rescale(renderOnPage.xRatio, x);
+    const bottom = rescale(renderOnPage.yRatio, y);
+    const style = {
+      left: `${left}px`,
+      bottom: `${bottom}px`,
+      position: 'absolute',
+      transform: `scale(${renderOnPage.xRatio}, ${renderOnPage.yRatio})`,
+      backgroundColor: field.settings.rgba || getRGBA(this.recipientIndex),
+    };
+    if (field.settings.height) {
+      style.height = `${field.settings.height}px`;
+    }
+    if (field.settings.width) {
+      style.width = `${field.settings.width}px`;
+    }
+    console.log('rendering field', field.type, field);
+    const id = `field-${field.name}`;
+    switch (field.type) {
+      case 'signature':
+        return h("verdocs-field-signature", { style: style, value: base64, required: required, id: id });
+      case 'initial':
+        return h("verdocs-field-initial", { style: style, required: required, id: id });
+      case 'textbox':
+        return h("verdocs-field-textbox", { style: style, order: index, value: result || '', placeholder: placeholder, id: id, onFieldChange: e => this.handleFieldChange(field, e) });
+      case 'textarea':
+        return h("verdocs-field-textarea", { style: style, placeholder: placeholder || '', id: id });
+      case 'date':
+        return h("verdocs-field-date", { style: style, order: index, value: result || '', placeholder: placeholder, required: required, id: id });
+      case 'dropdown':
+        return h("verdocs-field-dropdown", { style: style, options: options, value: value, required: required, id: id, onFieldChange: e => this.handleFieldChange(field, e) });
+      case 'checkbox':
+        return h("verdocs-field-checkbox", { style: style, value: result || '', id: id });
+      case 'checkbox_group':
+        return field.settings.options.map((option, index) => this.renderCheckboxGroupOption(renderOnPage, field, option, index));
+      case 'radio_button_group':
+        return field.settings.options.map((option, index) => this.renderRadioGroupOption(renderOnPage, field, option, index));
+      case 'attachment':
+        return h("verdocs-field-attachment", { style: style, value: result || '', id: id });
+      case 'payment':
+        return h("verdocs-field-payment", { style: style, field: field, id: id });
+      default:
+        console.log('[SIGN] Skipping unsupported field type', field);
+    }
+    return h("div", { style: { display: 'none' } },
+      "Unsupported field type \"",
+      field.type,
+      "\"");
+  }
+  isFieldValid(field) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    switch (field.type) {
+      case 'textbox':
+        switch (((_a = field.settings) === null || _a === void 0 ? void 0 : _a.validator) || '') {
+          case 'email':
+            return isValidEmail(((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '');
+          case 'phone':
+            return isValidPhone(((_c = field.settings) === null || _c === void 0 ? void 0 : _c.result) || '');
+          default:
+            return !!((_d = field.settings) === null || _d === void 0 ? void 0 : _d.result);
+        }
+      case 'signature':
+      case 'initial':
+      case 'textarea':
+      case 'date':
+      case 'attachment':
+        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.result);
+      case 'dropdown':
+        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.value);
+      case 'checkbox_group':
+        const checked = (((_h = (_g = field.settings) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.filter(option => option.checked)) || []).length;
+        return checked >= (((_j = field.settings) === null || _j === void 0 ? void 0 : _j.minimum_checked) || 0) && checked <= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.maximum_checked) || 999);
+      case 'radio_button_group':
+        return (((_m = (_l = field.settings) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.filter(option => option.selected)) || []).length > 0;
+      // TODO
+      // case 'checkbox':
+      //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
+      // case 'payment':
+      //   return <verdocs-field-payment style={style} field={field} id={id} />;
+      default:
+        return false;
+    }
+  }
+  handleDocumentRendered(e) {
+    console.log('[SIGN] Document rendered', e.detail);
+    this.pdfPageInfo = e.detail;
+  }
+  handleNext() {
+    // Find and focus the next incomplete required field
+    const requiredFields = this.fields.filter(field => field.required);
+    console.log('required Fields', requiredFields);
+    const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
+    console.log('focused Index', focusedIndex);
+    let nextFocusedIndex = focusedIndex + 1;
+    if (nextFocusedIndex >= requiredFields.length) {
+      nextFocusedIndex = 0;
+    }
+    const nextRequiredField = requiredFields[nextFocusedIndex];
+    console.log('next required fielod', nextRequiredField);
+    if (nextRequiredField) {
+      const el = document.getElementById(`field-${nextRequiredField.name}`);
+      el === null || el === void 0 ? void 0 : el.focusField();
+      this.focusedField = nextRequiredField.name;
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e;
+    const menuOptions = [
+      { id: 'later', label: 'Finish Later' },
+      { id: 'claim', label: 'Claim the Document', disabled: true },
+      { id: 'decline', label: 'Decline to Sign' },
+      { id: 'print', label: 'Print Without Signing' },
+      { id: 'download', label: 'Download' },
+    ];
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } },
+      h("div", { class: "header" },
+        h("div", { class: "intro" }, "Please review and act on these documents."),
+        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' } },
+              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() })))),
+      !((_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),
+        (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
+          var _a;
+          return (h("div", { class: "page-controls", style: { height: `${page.height}px`, width: `${page.width}px`, top: `${page.canvasTop}px`, margin: '0 auto' } }, ((_a = this.pdfPageInfo) === null || _a === void 0 ? void 0 : _a.numRendered) > 0 ? (this.fields.filter(field => field.page === page.pageNumber).map((field, index) => this.renderField(field, index))) : (h("div", { style: { display: 'none' } }, "Waiting for PDF to render..."))));
+        }))));
+  }
+  static get is() { return "verdocs-sign"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-sign.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-sign.css"]
+  }; }
+  static get properties() { return {
+    "documentid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a\nsigning session."
+      },
+      "attribute": "documentid",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "roleid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a\nsigning session."
+      },
+      "attribute": "roleid",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "invitecode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a\nsigning session."
+      },
+      "attribute": "invitecode",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "endpoint": {},
+    "recipient": {},
+    "signerToken": {},
+    "pdfUrl": {},
+    "recipientIndex": {},
+    "document": {},
+    "fields": {},
+    "pdfPageInfo": {},
+    "hasSignature": {},
+    "nextButtonLabel": {},
+    "focusedField": {}
+  }; }
+}

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

@@ -0,0 +1,19 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Embeds/Sign',
+  component: 'verdocs-sign',
+  args: {
+    documentid: '4868db9f-a565-4132-bdd2-c403ae703e95',
+    roleid: 'Recipient 1',
+    invitecode: '2bd1d634616622206bf58d25fb4b7362',
+  },
+  argTypes: {
+    authenticated: {
+      action: 'authenticated',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const Sign = ({ documentid, roleid, invitecode, authenticated }) => html `<verdocs-sign .documentid=${documentid} .roleid=${roleid} .invitecode=${invitecode} @authenticated=${authenticated} />`;

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

@@ -0,0 +1,53 @@
+verdocs-view {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  display: flex;
+  background: #ccc;
+  min-height: 600px;
+  position: relative;
+  padding: 0 0 20px 0;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+verdocs-view div,
+verdocs-view canvas {
+  box-sizing: border-box;
+}
+verdocs-view .container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+verdocs-view button.test {
+  color: #fff;
+  cursor: pointer;
+  padding: 5px 10px;
+  border-radius: 4px;
+  background: #5a5767;
+  border: 1px solid #ccc;
+}
+verdocs-view .load-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  z-index: 2000;
+  background: #000;
+}
+verdocs-view .load-progress .bar {
+  height: 6px;
+  background: #50be80;
+}
+
+#verdocs-pdf-viewer-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+#verdocs-pdf-viewer-container canvas {
+  background: white;
+  max-width: 100%;
+  margin: 15px 0 0 0;
+}