@verdocs/web-sdk 4.2.110 → 4.2.112

package/dist/components/verdocs-sign.js

@@ -1,13 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { VerdocsEndpoint, startSigningSession, getKbaStep, envelopeRecipientAgree, envelopeRecipientDecline, getEnvelope, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, envelopeRecipientSubmit, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, integerSequence } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, startSigningSession, getKbaStep, envelopeRecipientAgree, envelopeRecipientDecline, getEnvelope, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, envelopeRecipientSubmit, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, submitKbaPin, integerSequence } from '@verdocs/js-sdk';
 import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils.js';
 import { c as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$9 } from './verdocs-button2.js';
-import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$7 } from './verdocs-dropdown2.js';
-import { d as defineCustomElement$6 } from './verdocs-envelope-document-page2.js';
+import { d as defineCustomElement$a } from './verdocs-button2.js';
+import { d as defineCustomElement$9 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$8 } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$7 } from './verdocs-envelope-document-page2.js';
+import { d as defineCustomElement$6 } from './verdocs-kba-dialog2.js';
 import { d as defineCustomElement$5 } from './verdocs-loader2.js';
 import { d as defineCustomElement$4 } from './verdocs-ok-dialog2.js';
 import { d as defineCustomElement$3 } from './verdocs-portal2.js';
@@ -60,6 +61,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         this.showFinishLater = false;
         this.agreed = false;
         this.documentsSingularPlural = 'document';
+        this.kbaStep = '';
     }
     componentWillLoad() {
         if (!this.endpoint) {
@@ -117,6 +119,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 getKbaStep(this.endpoint, this.envelopeId, this.roleId)
                     .then(r => {
                     console.log('[SIGN] KBA Step', r);
+                    this.kbaStep = r.kba_step;
                 })
                     .catch(e => console.log('Error getting KBA step', e));
             }
@@ -547,7 +550,26 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                     this.isDone = true;
                 } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
         }
-        return (h(Host, { class: { agreed: this.agreed } }, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), this.agreed && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), this.agreed && (h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.agreed ? (h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+        if (!this.agreed) {
+            return (h(Host, { class: "agreed" }, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name))), h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "By checking this box, you:", onInput: () => this.handleClickAgree() }), h("ul", null, h("li", null, "Agree to use electronic records and signatures, and confirm you have read the", ' ', h("a", { href: "https://verdocs.com/en/electronic-record-signature-disclosure/", target: "_blank" }, "Electronic Record and Signatures Disclosure"), "."), h("li", null, "Agree to Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/eula", target: "_blank" }, "End User License Agreement"), ' ', "and confirm you have read Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/privacy-policy/", target: "_blank" }, "Privacy Policy"), "."))))));
+        }
+        if (this.kbaStep === 'pin') {
+            return (h(Host, { class: "kba" }, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name))), h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "kba" }, h("verdocs-kba-dialog", { mode: "text", step: 1, steps: 1, helptitle: "Document is protected by a PIN code", helptext: "Please enter your PIN code to proceed. If you do not have one, please contact the sender.", label: "PIN Code", onNext: async (e) => {
+                    submitKbaPin(this.endpoint, this.envelopeId, this.roleId, e.detail)
+                        .then(r => {
+                        console.log('[SIGN] PIN code submission result', r);
+                        if (r.kba_step === 'complete') {
+                            this.kbaStep = '';
+                        }
+                    })
+                        .catch(e => {
+                        var _a, _b;
+                        console.log('[SIGN] Error submitting PIN', e);
+                        VerdocsToast(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) || 'Unable to verify PIN code. Please try again.', { style: 'error' });
+                    });
+                } })))));
+        }
+        return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, pageNumbers.map(pageNumber => {
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
@@ -563,10 +585,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                         { name: 'controls', type: 'div' },
                     ] }));
             })));
-        }))) : (h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" }))), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
+        })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
-            } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), !this.agreed && (h("div", { class: "cover" }, h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "By checking this box, you:", onInput: () => this.handleClickAgree() }), h("ul", null, h("li", null, "Agree to use electronic records and signatures, and confirm you have read the", ' ', h("a", { href: "https://verdocs.com/en/electronic-record-signature-disclosure/", target: "_blank" }, "Electronic Record and Signatures Disclosure"), "."), h("li", null, "Agree to Verdocs", ' ', h("a", { href: "https://verdocs.com/en/eula", target: "_blank" }, "End User License Agreement"), ' ', "and confirm you have read Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/privacy-policy/", target: "_blank" }, "Privacy Policy"), ".")))))));
+            } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
     }
     static get style() { return VerdocsSignStyle0; }
 }, [0, "verdocs-sign", {
@@ -594,13 +616,14 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         "finishLater": [32],
         "showFinishLater": [32],
         "agreed": [32],
-        "documentsSingularPlural": [32]
+        "documentsSingularPlural": [32],
+        "kbaStep": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-sign", "verdocs-button", "verdocs-checkbox", "verdocs-dropdown", "verdocs-envelope-document-page", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-view"];
+    const components = ["verdocs-sign", "verdocs-button", "verdocs-checkbox", "verdocs-dropdown", "verdocs-envelope-document-page", "verdocs-kba-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-view"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-sign":
             if (!customElements.get(tagName)) {
@@ -609,20 +632,25 @@ function defineCustomElement$1() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "verdocs-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "verdocs-envelope-document-page":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-kba-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }