@verdocs/web-sdk 5.0.32 → 5.0.34

package/dist/cjs/{verdocs-preview_6.cjs.entry.js → verdocs-preview_7.cjs.entry.js}

@@ -210,7 +210,7 @@ const VerdocsSend = class {
             }
         });
     }
-    getLevels() {
+    getSequenceNumbers() {
         var _a;
         // TODO: This is cleaner with a Set but we found a regression in some target environments where
         //  this breaks down. Reverting to an older technique while we diagnose it.
@@ -218,9 +218,8 @@ const VerdocsSend = class {
         (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).forEach(role => {
             sequences[role.sequence] = true;
         });
-        console.log('[SEND] Sequences', sequences);
         return Object.keys(sequences)
-            .map(s => +s - 1) // We subtract 1 here because the sequence is 1-based and our rendering is 0-based
+            .map(s => +s)
             .sort((a, b) => a - b);
         // const levels = [...new Set((this.template?.roles || []).map(role => role.sequence - 1))];
         // levels.sort((a, b) => a - b);
@@ -229,7 +228,7 @@ const VerdocsSend = class {
     getRolesAtLevel(level) {
         var _a;
         const rolesAtLevel = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || [])
-            .filter(role => role.sequence - 1 === level)
+            .filter(role => role.sequence === level)
             .map((role, index) => ({
             ...role,
             id: `r-${level}-${index}`,
@@ -240,11 +239,10 @@ const VerdocsSend = class {
         return rolesAtLevel;
     }
     getLevelIcon(level) {
-        const levels = this.getLevels();
-        if (level < 0) {
+        if (level === 'start') {
             return index$1.h("div", { class: "level-icon", innerHTML: startIcon });
         }
-        else if (level >= levels.length) {
+        else if (level === 'end') {
             return index$1.h("div", { class: "level-icon", innerHTML: doneIcon });
         }
         else {
@@ -280,7 +278,7 @@ const VerdocsSend = class {
             // TODO: Pre-filled fields support
             fields: [],
         };
-        const beforeSendResult = this.beforeSend.emit({ ...details, name: details.name });
+        const beforeSendResult = this.beforeSend.emit({ ...details, name: details.name, template: this.template });
         if (beforeSendResult.defaultPrevented) {
             console.log('[SEND] Send cancelled by parent', details);
             this.sending = false;
@@ -316,16 +314,13 @@ const VerdocsSend = class {
         if (!this.endpoint.session) {
             return (index$1.h(index$1.Host, { style: { display: 'flex' } }, index$1.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        const levels = this.getLevels();
+        const levels = this.getSequenceNumbers();
         console.log('[SEND] Rendering levels', levels);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);
         // TODO: Reactivate once SMS is re-enabled
         // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
         const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
-        return (index$1.h(index$1.Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, index$1.h("div", { class: "recipients" }, index$1.h("div", { class: "left-line" }), index$1.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index$1.h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (index$1.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), () => {
-            console.log('Rendering level', level, this.getRolesAtLevel(level));
-            return '';
-        }, this.getRolesAtLevel(level).map(role => {
+        return (index$1.h(index$1.Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, index$1.h("div", { class: "recipients" }, index$1.h("div", { class: "left-line" }), index$1.h("div", { class: `level level-start` }, this.getLevelIcon('start'), index$1.h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (index$1.h("div", { class: `level level-${level}` }, this.getLevelIcon('sequence'), this.getRolesAtLevel(level).map(role => {
             var _a, _b, _c;
             const unknown = !role.email || !role.first_name || !role.last_name;
             const roleName = ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : jsSdk.formatFullName(role);
@@ -338,7 +333,7 @@ const VerdocsSend = class {
                 border: completed ? '2px solid #55bc81' : '2px solid #dddddd',
             };
             return unknown ? (index$1.h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, index$1.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index$1.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index$1.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index$1.h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, index$1.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index$1.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index$1.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
-        })))), index$1.h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), index$1.h("div", { class: "complete" }, "Signing Complete"))), index$1.h("div", { class: "buttons" }, index$1.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index$1.h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index$1.h("verdocs-spinner", null))));
+        })))), index$1.h("div", { class: `level level-done` }, this.getLevelIcon('end'), index$1.h("div", { class: "complete" }, "Signing Complete"))), index$1.h("div", { class: "buttons" }, index$1.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index$1.h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index$1.h("verdocs-spinner", null))));
     }
     static get watchers() { return {
         "templateId": ["onTemplateIdChanged"]
@@ -3909,11 +3904,147 @@ const VerdocsTemplateRoles = class {
 };
 VerdocsTemplateRoles.style = VerdocsTemplateRolesStyle0;
 
+const verdocsTemplateSettingsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-settings{display:block;max-width:600px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-settings>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-settings>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-settings>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-settings>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-settings>form input:focus{outline:none}verdocs-template-settings>form .row{margin:20px 0 0 0}verdocs-template-settings .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-settings ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-moz-placeholder{color:#aaaaaa}verdocs-template-settings :-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::placeholder{color:#aaaaaa}";
+const VerdocsTemplateSettingsStyle0 = verdocsTemplateSettingsCss;
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const VerdocsTemplateSettings = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.next = index$1.createEvent(this, "next", 7);
+        this.exit = index$1.createEvent(this, "exit", 7);
+        this.sdkError = index$1.createEvent(this, "sdkError", 7);
+        this.templateUpdated = index$1.createEvent(this, "templateUpdated", 7);
+        this.templateListenerId = null;
+        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.name = null;
+        this.visibility = 'private';
+        this.sender = 'envelope_creator';
+        this.sendReminders = false;
+        this.initialReminder = 0;
+        this.followupReminders = 0;
+        this.dirty = false;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[SETTINGS] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
+            console.log('[SETTINGS] Template Updated', template);
+            this.template = template;
+            this.name = template.name;
+            this.visibility = template.visibility;
+            this.sender = template.sender;
+            this.sendReminders = template.initial_reminder !== null;
+            this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;
+            this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;
+            this.dirty = false;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Datastore.Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
+    }
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[SETTINGS] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[SETTINGS] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.listenToTemplate();
+        }
+        catch (e) {
+            console.log('[SETTINGS] Error with preview session', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    handleCancel() {
+        var _a;
+        (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+    handleSubmit() {
+        jsSdk.updateTemplate(this.endpoint, this.templateId, {
+            name: this.name,
+            visibility: this.visibility,
+            sender: this.sender,
+            initial_reminder: this.sendReminders ? this.initialReminder * MS_PER_DAY : null,
+            followup_reminders: this.sendReminders ? this.followupReminders * MS_PER_DAY : null,
+        })
+            .then(template => {
+            var _a, _b;
+            console.log('[SETTINGS] Template Updated', template);
+            this.dirty = false;
+            this.name = template.name;
+            this.visibility = template.visibility;
+            this.sender = template.sender;
+            this.sendReminders = template.initial_reminder !== null;
+            this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;
+            this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, event: 'update' });
+            (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit();
+        })
+            .catch(e => {
+            var _a, _b, _c, _d, _e;
+            console.log('[SETTINGS] Error updating template', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            Toast.VerdocsToast(((_e = (_d = e.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error) || 'Error updating template, please try again later.');
+        });
+    }
+    render() {
+        if (!this.endpoint.session) {
+            return (index$1.h(index$1.Host, null, index$1.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        if (this.loading || !this.template) {
+            return (index$1.h(index$1.Host, { class: "loading" }, index$1.h("verdocs-loader", null)));
+        }
+        return (index$1.h(index$1.Host, null, index$1.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index$1.h("h5", null, "Settings"), index$1.h("div", { class: "row" }, index$1.h("verdocs-text-input", { id: "verdocs-field-name", label: "Template Name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
+                this.name = e.target.value;
+                this.dirty = true;
+            } })), index$1.h("div", { class: "row" }, index$1.h("verdocs-select-input", { label: "Visibility", value: this.visibility, onInput: (e) => {
+                this.visibility = e.target.value;
+                this.dirty = true;
+            }, options: [
+                { value: 'private', label: 'Private' },
+                { value: 'shared', label: 'Shared' },
+                { value: 'public', label: 'Public' },
+            ] })), index$1.h("div", { class: "row" }, index$1.h("verdocs-select-input", { label: "Owner for envelopes created from this template", value: this.sender, onInput: (e) => {
+                this.sender = e.target.value;
+                this.dirty = true;
+            }, options: [
+                { value: 'envelope_creator', label: 'Envelope Creator' },
+                { value: 'template_owner', label: 'Template Owner' },
+            ] })), index$1.h("div", { class: "row" }, index$1.h("label", null, "Send Reminders"), index$1.h("verdocs-switch", { checked: this.sendReminders, onCheckedChange: e => (this.sendReminders = e.detail) })), this.sendReminders && (index$1.h("div", { class: "row" }, index$1.h("verdocs-text-input", { id: "verdocs-field-name", label: "First Reminder (days)", value: String(this.initialReminder || 0), autocomplete: "off", placeholder: "Delay in days...", onInput: (e) => {
+                this.initialReminder = +e.target.value;
+                this.dirty = true;
+            } }))), this.sendReminders && (index$1.h("div", { class: "row" }, index$1.h("verdocs-text-input", { id: "verdocs-field-name", label: "Follow-up Reminders (days)", value: String(this.followupReminders || 0), autocomplete: "off", placeholder: "Delay in days...", onInput: (e) => {
+                this.followupReminders = +e.target.value;
+                this.dirty = true;
+            } }))), index$1.h("div", { class: "buttons" }, index$1.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index$1.h("verdocs-button", { label: "Save", size: "small", onClick: () => this.handleSubmit(), disabled: !this.dirty })))));
+    }
+    get el() { return index$1.getElement(this); }
+};
+VerdocsTemplateSettings.style = VerdocsTemplateSettingsStyle0;
+
 exports.verdocs_preview = VerdocsPreview;
 exports.verdocs_send = VerdocsSend;
 exports.verdocs_template_attachments = VerdocsTemplateAttachments;
 exports.verdocs_template_build_tabs = VerdocsTemplateBuildTabs;
 exports.verdocs_template_fields = VerdocsTemplateFields;
 exports.verdocs_template_roles = VerdocsTemplateRoles;
+exports.verdocs_template_settings = VerdocsTemplateSettings;
 
-//# sourceMappingURL=verdocs-preview_6.cjs.entry.js.map
+//# sourceMappingURL=verdocs-preview_7.cjs.entry.js.map