@verdocs/web-sdk 6.8.2 → 6.8.4

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

@@ -155,10 +155,12 @@ export class VerdocsSign {
         this.setupIntersectionObserver();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         this.stopPolling();
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
         window.removeEventListener('resize', () => this.updateZoomFromWindow());
+        // Remove any org-level style overrides we injected into the document head.
+        (_b = document.getElementById(this.getOrgStyleOverridesId())) === null || _b === void 0 ? void 0 : _b.remove();
     }
     updateZoomFromWindow() {
         const width = window.innerWidth;
@@ -203,19 +205,46 @@ export class VerdocsSign {
         }, options);
         pages.forEach(page => this.observer.observe(page));
     }
+    getOrgStyleOverridesId() {
+        return `verdocs-org-style-overrides-${this.envelopeId}`;
+    }
+    // Injects a <style> tag into the document head containing any CSS overrides defined on the
+    // envelope's organization. This allows the organization to apply custom styling to the signing
+    // UI without rebuilding the SDK.
+    // TODO: Clean up once js-sdk is updated (style_overrides is not yet in IEnvelope).
+    applyOrgStyleOverrides() {
+        var _a, _b;
+        const styleId = this.getOrgStyleOverridesId();
+        const existing = document.getElementById(styleId);
+        const overrides = (_b = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.organization) === null || _b === void 0 ? void 0 : _b.style_overrides;
+        if (typeof overrides === 'string') {
+            const styleEl = existing || document.createElement('style');
+            styleEl.id = styleId;
+            styleEl.textContent = overrides;
+            if (!existing) {
+                document.head.appendChild(styleEl);
+            }
+        }
+        else if (existing) {
+            existing.remove();
+        }
+    }
     processAuthResponse(response) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d;
         const { envelope, recipient } = response;
         (_a = envelope.documents) === null || _a === void 0 ? void 0 : _a.sort((a, b) => (a.order !== b.order ? a.order - b.order : a.created_at.localeCompare(b.created_at)));
         const { auth_step } = recipient;
         this.recipient = recipient;
         this.envelope = envelope;
         this.disclosures = ((_c = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.organization) === null || _c === void 0 ? void 0 : _c.disclaimer) || DEFAULT_DISCLOSURES;
+        this.applyOrgStyleOverrides();
         this.authStep = auth_step;
         this.delegated = !!recipient.delegated_to;
         this.agreed = recipient.agreed;
-        this.signatureId = ((_e = (_d = response.signatures) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) || null;
-        this.initialId = ((_g = (_f = response.initials) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.id) || null;
+        // Intentionally ignore any pre-existing signatures/initials from the server. We always want to prompt the user
+        // to adopt at least once per session so the signing flow is explicit after removing the up-front progress dialog.
+        this.signatureId = null;
+        this.initialId = null;
         this.submitted = recipient.status === 'submitted';
         this.loading = false;
         this.isDone = this.submitted;
@@ -245,7 +274,7 @@ export class VerdocsSign {
             this.nextButtonLabel = 'Next';
         }
         this.checkRecipientFields();
-        (_h = this.envelopeLoaded) === null || _h === void 0 ? void 0 : _h.emit({ endpoint: this.endpoint, envelope: this.envelope });
+        (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     handleClickAgree() {
         this.submitting = true;
@@ -1027,14 +1056,15 @@ export class VerdocsSign {
         const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
         const pageOptions = integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
         let globalPageCounter = 0;
-        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && (() => {
-            const remaining = this.getRequiredTotalCount() - this.getRequiredFilledCount();
-            const optionalLeft = this.getOptionalUnfilledCount();
-            if (remaining > 0) {
-                return h("span", { class: "remaining-count" }, remaining, " required field", remaining === 1 ? '' : 's', " left");
-            }
-            return (h("span", { class: "remaining-count" }, h("span", { class: "check-icon", innerHTML: CheckCircleIcon }), "All required fields complete", optionalLeft > 0 && h("span", { class: "separator" }, "|"), optionalLeft > 0 && h("span", { class: "review-optional", onClick: () => this.handleNextOptional() }, "Review ", optionalLeft, " optional")));
-        })(), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
+        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater &&
+            (() => {
+                const remaining = this.getRequiredTotalCount() - this.getRequiredFilledCount();
+                const optionalLeft = this.getOptionalUnfilledCount();
+                if (remaining > 0) {
+                    return (h("span", { class: "remaining-count" }, remaining, " required field", remaining === 1 ? '' : 's', " left"));
+                }
+                return (h("span", { class: "remaining-count" }, h("span", { class: "check-icon", innerHTML: CheckCircleIcon }), "All required fields complete", optionalLeft > 0 && h("span", { class: "separator" }, "|"), optionalLeft > 0 && (h("span", { class: "review-optional", onClick: () => this.handleNextOptional() }, "Review ", optionalLeft, " optional"))));
+            })(), !this.finishLater && (h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() })), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, this.envelope.documents.length > 1 && (h("div", { class: "document-separator" }, h("div", { innerHTML: DocumentPageIcon }), h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
@@ -1073,16 +1103,14 @@ export class VerdocsSign {
                 this.showSpinner = false;
                 this.adoptingSignature = false;
                 this.markEnvelopeStarted();
-                // Special case: if we were focusing a specific field, apply the new signature/initials to it immediately.
-                // This is the "secondary flow" where the user clicks a field directly before adopting.
+                // Apply the new signature/initials to the field that triggered the dialog.
                 if (this.focusedField) {
                     const fieldObj = this.getRecipientFields().find(f => f.name === this.focusedField);
                     if (fieldObj) {
-                        if (fieldObj.type === 'signature') {
-                            await this.handleFieldChange(fieldObj, { detail: this.signatureId });
-                        }
-                        else if (fieldObj.type === 'initial') {
-                            await this.handleFieldChange(fieldObj, { detail: this.initialId });
+                        const id = fieldObj.type === 'signature' ? this.signatureId : fieldObj.type === 'initial' ? this.initialId : null;
+                        if (id) {
+                            const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, fieldObj.name, id, false);
+                            this.updateRecipientFieldValue(fieldObj.name, updateResult);
                         }
                     }
                     this.focusedField = '';