@verdocs/web-sdk 6.12.1 → 6.13.0

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

@@ -1,14 +1,31 @@
 import { h, Host } from "@stencil/core";
-import { createEnvelope, formatFullName, getTemplate, getOrganizationContacts, getRGBA, isValidEmail } from "@verdocs/js-sdk";
+import { createEnvelope, formatFullName, getBrands, getOrganization, getTemplate, getOrganizationContacts, getRGBA, isValidEmail } from "@verdocs/js-sdk";
+import { DefaultEndpoint, getWebAppUrl } from "../../../utils/Environment";
 import { getRoleIndex, getRoleNames } from "../../../utils/Templates";
-import { DefaultEndpoint } from "../../../utils/Environment";
+import { updateScrollFade } from "../../../utils/ScrollFade";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
 import { Store } from "../../../utils/Datastore";
-const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
-const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
-const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
-const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
+const chevronRightIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>';
+const chevronLeftIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';
+const warningIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg>';
+const externalLinkIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M21 14v7H3V3h7"/></svg>';
+const VERDOCS_LOGO_URL = 'https://app.verdocs.com/assets/blue-logo.svg';
+// Swipe mechanics for mobile users in detail views
+const SWIPE_START_FRACTION = 0.25;
+const SWIPE_MIN_DISTANCE = 60;
+const SWIPE_MAX_DURATION = 500;
+// Expiration controls. The API is less strict, but Web users prefer a simpler setup so we just range-limit it 1..120 here.
+const MIN_EXPIRY_DAYS = 1;
+const MAX_EXPIRY_DAYS = 120;
+const DEFAULT_EXPIRY_DAYS = 120;
+const AUTH_METHOD_LABELS = {
+    email: 'Email',
+    passcode: 'Passcode',
+    sms: 'SMS',
+    kba: 'KBA',
+    id: 'ID check',
+};
 /**
  * Display a form to send a template to one or more recipients in an envelope for signing.
  * Host applications should ensure the template is "sendable" before displaying this component.
@@ -49,10 +66,22 @@ export class VerdocsSend {
          * the embed is shown in a non-wizard flow with its own navigation for the user to exit.
          */
         this.showCancel = true;
+        /**
+         * Preselect a brand by key, overriding the organization default.
+         */
+        this.brandKey = '';
+        this.swipeStart = null;
+        this.swallowNextClick = false;
+        this.loadedOrganizationId = '';
         this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
-        this.showPickerForId = '';
+        this.view = 'main';
+        this.editingRoleId = '';
         this.sessionContacts = [];
         this.sending = false;
+        this.brands = [];
+        this.organization = null;
+        this.expiresInDays = '';
+        this.noContact = false;
         this.rolesCompleted = {};
         this.loading = true;
         this.template = null;
@@ -60,6 +89,22 @@ export class VerdocsSend {
     disconnectedCallback() {
         this.unlistenToTemplate();
     }
+    componentDidLoad() {
+        this.el.addEventListener('click', e => {
+            if (this.swallowNextClick) {
+                this.swallowNextClick = false;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        }, true);
+    }
+    // Make off-canvas controls leave the tab order
+    componentDidRender() {
+        var _a, _b;
+        updateScrollFade(this.el.querySelector('.detail-body'));
+        (_a = this.el.querySelector('.main-pane')) === null || _a === void 0 ? void 0 : _a.toggleAttribute('inert', this.view !== 'main');
+        (_b = this.el.querySelector('.detail-pane')) === null || _b === void 0 ? void 0 : _b.toggleAttribute('inert', this.view === 'main');
+    }
     async listenToTemplate() {
         console.log('[SEND] Loading template', this.templateId);
         this.unlistenToTemplate();
@@ -68,9 +113,53 @@ export class VerdocsSend {
             this.template = template;
             this.loading = false;
             this.rolesCompleted = {};
+            this.view = 'main';
+            this.editingRoleId = '';
             this.recomputeRolesCompleted();
+            this.loadBrands();
         });
     }
+    loadBrands() {
+        var _a;
+        const organizationId = (_a = this.template) === null || _a === void 0 ? void 0 : _a.organization_id;
+        if (!organizationId || organizationId === this.loadedOrganizationId) {
+            return;
+        }
+        const changedOrganization = !!this.loadedOrganizationId;
+        this.loadedOrganizationId = organizationId;
+        this.brands = [];
+        this.organization = null;
+        if (changedOrganization) {
+            this.brandKey = '';
+        }
+        const stillCurrent = () => { var _a; return ((_a = this.template) === null || _a === void 0 ? void 0 : _a.organization_id) === organizationId; };
+        getBrands(this.endpoint, organizationId)
+            .then(brands => {
+            if (stillCurrent()) {
+                this.brands = brands || [];
+            }
+        })
+            .catch(e => console.log('[SEND] Unable to load brands', e));
+        getOrganization(this.endpoint, organizationId)
+            .then(organization => {
+            if (stillCurrent()) {
+                this.organization = organization;
+            }
+        })
+            .catch(e => console.log('[SEND] Unable to load organization', e));
+    }
+    handleExpiryInput(e) {
+        const digits = (e.target.value || '').replace(/[^0-9]/g, '');
+        this.expiresInDays = digits ? String(Math.min(Math.max(Number(digits), MIN_EXPIRY_DAYS), MAX_EXPIRY_DAYS)) : '';
+        e.target.value = this.expiresInDays;
+    }
+    effectiveExpiryDays() {
+        const days = Number(this.expiresInDays);
+        return days >= MIN_EXPIRY_DAYS ? days : DEFAULT_EXPIRY_DAYS;
+    }
+    expiresAt() {
+        return new Date(Date.now() + this.effectiveExpiryDays() * 24 * 60 * 60 * 1000);
+    }
     unlistenToTemplate() {
         if (this.templateListenerId) {
             Store.store.delListener(this.templateListenerId);
@@ -79,6 +168,11 @@ export class VerdocsSend {
     }
     async reset() {
         this.rolesCompleted = {};
+        this.view = 'main';
+        this.editingRoleId = '';
+        this.brandKey = '';
+        this.expiresInDays = '';
+        this.noContact = false;
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[SEND] Template ID changed', newTemplateId);
@@ -166,25 +260,59 @@ export class VerdocsSend {
         }));
         return rolesAtLevel;
     }
-    getLevelIcon(level) {
-        if (level === 'start') {
-            return h("div", { class: "level-icon", innerHTML: startIcon });
+    getRoleById(id) {
+        for (const level of this.getSequenceNumbers()) {
+            const match = this.getRolesAtLevel(level).find(role => role.id === id);
+            if (match) {
+                return match;
+            }
         }
-        else if (level === 'end') {
-            return h("div", { class: "level-icon", innerHTML: doneIcon });
+        return null;
+    }
+    // We only show options the sender switched on.
+    getRecipientOptionLabels(recipient) {
+        if (!recipient) {
+            return [];
         }
-        else {
-            return h("div", { class: "level-icon", innerHTML: stepIcon });
+        const labels = (recipient.auth_methods || []).filter(method => method !== 'email').map(method => AUTH_METHOD_LABELS[method] || method);
+        if (recipient.delegator) {
+            labels.push('May delegate');
         }
+        if (recipient.name_locked) {
+            labels.push('Name locked');
+        }
+        return labels;
+    }
+    getDefaultBrand() {
+        var _a;
+        const defaultId = (_a = this.organization) === null || _a === void 0 ? void 0 : _a.default_brand_id;
+        return (defaultId && this.brands.find(brand => brand.id === defaultId)) || null;
+    }
+    getDefaultBrandLabel() {
+        var _a;
+        const name = (_a = this.getDefaultBrand()) === null || _a === void 0 ? void 0 : _a.name;
+        return `Default (${name || 'Verdocs'})`;
+    }
+    getSelectedBrandLabel() {
+        if (!this.brandKey) {
+            return this.getDefaultBrandLabel();
+        }
+        const brand = this.brands.find(b => b.key === this.brandKey);
+        return (brand === null || brand === void 0 ? void 0 : brand.name) || (brand === null || brand === void 0 ? void 0 : brand.key) || this.brandKey;
+    }
+    showView(view) {
+        this.view = view;
     }
     handleSelectContact(e, role) {
         e.preventDefault();
-        this.rolesCompleted[role.id] = { ...role, ...e.detail };
-        this.showPickerForId = '';
+        this.rolesCompleted = { ...this.rolesCompleted, [role.id]: { ...role, ...e.detail } };
+        this.editingRoleId = '';
+        this.view = 'main';
     }
     handleClickRole(e, role) {
         e.stopPropagation();
-        this.showPickerForId = role.id;
+        this.editingRoleId = role.id;
+        this.view = 'recipient';
     }
     handleSend(e) {
         var _a;
@@ -206,7 +334,12 @@ export class VerdocsSend {
             recipients: Object.values(this.rolesCompleted),
             timezone: localeData.timeZone,
             locale: localeData.locale,
+            expires_at: this.expiresAt().toISOString(),
         };
+        details.no_contact = this.noContact;
+        if (this.brandKey) {
+            details.brand_key = this.brandKey;
+        }
         const beforeSendResult = this.beforeSend.emit({ ...details, name: details.name, template: this.template });
         if (beforeSendResult.defaultPrevented) {
             console.log('[SEND] Send cancelled by parent', details);
@@ -235,6 +368,96 @@ export class VerdocsSend {
         e.stopPropagation();
         (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
     }
+    handleSwipeStart(e) {
+        var _a, _b;
+        this.swallowNextClick = false;
+        const pane = e.currentTarget;
+        const rect = pane.getBoundingClientRect();
+        const onTextEntry = !!((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'input, textarea, select, [contenteditable]'));
+        if (this.view === 'main' || onTextEntry || e.clientX - rect.left > rect.width * SWIPE_START_FRACTION) {
+            this.swipeStart = null;
+            return;
+        }
+        this.swipeStart = { x: e.clientX, y: e.clientY, time: Date.now() };
+    }
+    handleSwipeEnd(e) {
+        const start = this.swipeStart;
+        this.swipeStart = null;
+        if (!start) {
+            return;
+        }
+        const dx = e.clientX - start.x;
+        const dy = Math.abs(e.clientY - start.y);
+        if (dx >= SWIPE_MIN_DISTANCE && dx > dy && Date.now() - start.time <= SWIPE_MAX_DURATION) {
+            this.swallowNextClick = true;
+            this.showView('main');
+        }
+    }
+    renderDetailHeader(title) {
+        return (h("div", { class: "detail-header" }, h("button", { type: "button", class: "back", onClick: () => this.showView('main') }, h("span", { class: "icon", innerHTML: chevronLeftIcon }), "Back"), h("div", { class: "detail-title" }, title), h("div", { class: "detail-header-spacer" })));
+    }
+    renderDetailBody(content) {
+        return (h("div", { class: "detail-body-wrap" }, h("div", { class: "detail-body", onScroll: (e) => updateScrollFade(e.target) }, content), h("div", { class: "scroll-fade" })));
+    }
+    renderDoneButton() {
+        return (h("div", { class: "detail-footer" }, h("verdocs-button", { label: "Done", size: "small", onClick: () => this.showView('main') })));
+    }
+    renderRecipientView() {
+        var _a;
+        const role = this.getRoleById(this.editingRoleId);
+        if (!role) {
+            return h("div", { class: "detail recipient-detail" }, this.renderDetailHeader('Recipient'));
+        }
+        const roleIndex = getRoleIndex(this.template, role.role_name);
+        return (h("div", { class: "detail recipient-detail" }, this.renderDetailHeader([h("span", { class: "role-dot", style: { backgroundColor: getRGBA(roleIndex) } }), role.role_name]), h("verdocs-contact-picker", { key: role.id, showCancel: false, onExit: () => this.showView('main'), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_a = this.rolesCompleted[role.id]) !== null && _a !== void 0 ? _a : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })));
+    }
+    renderBrandSwatch(brand, fallbackInitial) {
+        const image = (brand === null || brand === void 0 ? void 0 : brand.favicon_url) || (brand === null || brand === void 0 ? void 0 : brand.thumbnail_url) || (brand ? null : VERDOCS_LOGO_URL);
+        if (image) {
+            return (h("span", { class: "swatch logo" }, h("img", { src: image, alt: "" })));
+        }
+        return (h("span", { class: "swatch", style: { backgroundColor: (brand === null || brand === void 0 ? void 0 : brand.primary_color) || '#4c56cb' } }, fallbackInitial.substring(0, 2).toUpperCase()));
+    }
+    renderBrandOption(key, label, sub, swatch) {
+        return (h("button", { type: "button", class: { option: true, selected: this.brandKey === key }, onClick: () => (this.brandKey = key) }, h("span", { class: "radio" }), swatch, h("span", { class: "option-label" }, label, h("small", null, sub))));
+    }
+    renderBrandView() {
+        const defaultBrand = this.getDefaultBrand();
+        const others = this.brands.filter(brand => brand.id !== (defaultBrand === null || defaultBrand === void 0 ? void 0 : defaultBrand.id)).sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key));
+        const hasBrands = this.brands.length > 0;
+        return (h("div", { class: "detail" }, this.renderDetailHeader('Brand'), this.renderDetailBody([
+            h("div", { class: "option-list" }, this.renderBrandOption('', this.getDefaultBrandLabel(), 'Organization default', this.renderBrandSwatch(defaultBrand, (defaultBrand === null || defaultBrand === void 0 ? void 0 : defaultBrand.name) || 'V')), others.length > 0 && h("div", { class: "option-divider" }), others.map(brand => this.renderBrandOption(brand.key, brand.name || brand.key, brand.key, this.renderBrandSwatch(brand, brand.name || brand.key)))),
+            !hasBrands && (h("p", { class: "hint" }, "Configure the look and feel of the signing experience by", ' ', h("a", { href: `${getWebAppUrl(this.endpoint)}/settings/branding`, target: "_blank", rel: "noopener" }, "Creating a Brand", h("span", { class: "icon", innerHTML: externalLinkIcon })), ".")),
+        ]), this.renderDoneButton()));
+    }
+    renderExpiresView() {
+        const expiresAt = this.expiresAt();
+        const when = `${expiresAt.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })} at ${expiresAt.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })}`;
+        return (h("div", { class: "detail" }, this.renderDetailHeader('Expiration'), this.renderDetailBody([
+            h("div", { class: "expires-field" }, h("input", { type: "text", inputMode: "numeric", "aria-label": "Expires in (days)", placeholder: String(DEFAULT_EXPIRY_DAYS), value: this.expiresInDays, disabled: this.sending, onInput: (e) => this.handleExpiryInput(e) }), h("span", { class: "suffix" }, "days")),
+            h("p", { class: "hint" }, "This envelope will expire on ", when, ". Expirations may be set from ", MIN_EXPIRY_DAYS, "-", MAX_EXPIRY_DAYS, " days. If left blank, this will default to ", DEFAULT_EXPIRY_DAYS, "."),
+        ]), this.renderDoneButton()));
+    }
+    renderNotificationsView() {
+        return (h("div", { class: "detail" }, this.renderDetailHeader('Notifications'), this.renderDetailBody([
+            h("verdocs-checkbox", { size: "small", label: "Disable notifications", checked: this.noContact, onInput: (e) => (this.noContact = !!e.target.checked) }),
+            this.noContact && (h("div", { class: "warning" }, h("span", { class: "icon", innerHTML: warningIcon }), h("div", null, "Disabling notifications turns off invitations and reminders to recipients as well as status updates to you. You may obtain invite links in the recipient summary or via an API call. We strongly recommend enabling", ' ', h("a", { href: `${getWebAppUrl(this.endpoint)}/settings/webhooks`, target: "_blank", rel: "noopener" }, "Webhooks", h("span", { class: "icon", innerHTML: externalLinkIcon })), ' ', "to help automate this process."))),
+        ]), this.renderDoneButton()));
+    }
+    renderDetail() {
+        switch (this.view) {
+            case 'recipient':
+                return this.renderRecipientView();
+            case 'brand':
+                return this.renderBrandView();
+            case 'expires':
+                return this.renderExpiresView();
+            case 'notifications':
+                return this.renderNotificationsView();
+            default:
+                return null;
+        }
+    }
     render() {
         var _a;
         if (this.loading) {
@@ -248,20 +471,18 @@ export class VerdocsSend {
         const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
         const assignedEmails = rolesAssigned.map(r => r.email.toLowerCase());
         const hasDuplicateEmails = new Set(assignedEmails).size < assignedEmails.length;
-        return (h(Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon('start'), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (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) ? formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : formatFullName(role);
-            const elId = `verdocs-send-recipient-${role.role_name}`;
-            const roleIndex = getRoleIndex(this.template, role.role_name);
-            const rgba = getRGBA(roleIndex);
-            const completed = rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
-            const style = {
-                backgroundColor: rgba,
-                border: completed ? '2px solid #55bc81' : '2px solid #dddddd',
-            };
-            return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, 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); } }))))) : (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, 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); } })))));
-        })))), h("div", { class: `level level-done` }, this.getLevelIcon('end'), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
+        const expiresAt = this.expiresAt();
+        const expiresShort = expiresAt.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+        return (h(Host, { class: { 'sendable': (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable, 'detail-open': this.view !== 'main' } }, h("div", { class: "track" }, h("div", { class: "pane main-pane", "aria-hidden": this.view !== 'main' ? 'true' : 'false' }, h("div", { class: "section-title" }, "Recipients"), h("div", { class: "recipients" }, levels.map(level => [
+            levels.length > 1 && h("div", { class: "step" }, "Step ", level),
+            this.getRolesAtLevel(level).map(role => {
+                const roleIndex = getRoleIndex(this.template, role.role_name);
+                const completed = this.rolesCompleted[role.id];
+                const assigned = completed && rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
+                const optionLabels = this.getRecipientOptionLabels(completed);
+                return (h("button", { type: "button", class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, onClick: e => this.handleClickRole(e, role) }, h("span", { class: "role-dot", style: { backgroundColor: getRGBA(roleIndex) } }), h("span", { class: "who" }, h("span", { class: "role-name" }, role.role_name), assigned ? (h("span", { class: "who-detail" }, formatFullName(completed), " \u00B7 ", completed.email)) : (h("span", { class: "who-detail configure" }, "Configure recipient")), optionLabels.length > 0 && (h("span", { class: "options" }, optionLabels.map(label => (h("span", { class: "pill" }, label)))))), h("span", { class: "chevron", innerHTML: chevronRightIcon })));
+            }),
+        ])), h("div", { class: "section-title delivery-title" }, "Delivery"), h("div", { class: "delivery" }, h("button", { type: "button", class: "kv", onClick: () => this.showView('brand'), disabled: this.sending }, h("span", { class: "key" }, "Brand"), h("span", { class: "value" }, this.getSelectedBrandLabel()), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('expires'), disabled: this.sending }, h("span", { class: "key" }, "Expires"), h("span", { class: "value" }, this.effectiveExpiryDays(), " days ", h("small", null, "\u00B7 ", expiresShort)), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('notifications'), disabled: this.sending }, h("span", { class: "key" }, "Notifications"), h("span", { class: { value: true, off: this.noContact } }, this.noContact ? 'Off' : 'On'), h("span", { class: "chevron", innerHTML: chevronRightIcon }))), h("div", { class: "main-spacer" }), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.sending && h("verdocs-spinner", null), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }))), h("div", { class: "pane detail-pane", "aria-hidden": this.view === 'main' ? 'true' : 'false', onPointerDown: e => this.handleSwipeStart(e), onPointerUp: e => this.handleSwipeEnd(e), onPointerCancel: () => (this.swipeStart = null) }, this.renderDetail()))));
     }
     static get is() { return "verdocs-send"; }
     static get originalStyleUrls() {
@@ -360,15 +581,40 @@ export class VerdocsSend {
                 "reflect": false,
                 "attribute": "show-cancel",
                 "defaultValue": "true"
+            },
+            "brandKey": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preselect a brand by key, overriding the organization default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "brand-key",
+                "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
             "containerId": {},
-            "showPickerForId": {},
+            "view": {},
+            "editingRoleId": {},
             "sessionContacts": {},
             "sending": {},
+            "brands": {},
+            "organization": {},
+            "expiresInDays": {},
+            "noContact": {},
             "rolesCompleted": {},
             "loading": {},
             "template": {}
@@ -386,20 +632,13 @@ export class VerdocsSend {
                     "text": "The user is sending an envelope the form and clicked send."
                 },
                 "complexType": {
-                    "original": "{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; template: ITemplate}",
-                    "resolved": "{ recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; template: ITemplate; }",
+                    "original": "ISendEventDetail",
+                    "resolved": "ISendEventDetail",
                     "references": {
-                        "ICreateEnvelopeRecipientFromTemplate": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ICreateEnvelopeRecipientFromTemplate",
-                            "referenceLocation": "ICreateEnvelopeRecipientFromTemplate"
-                        },
-                        "ITemplate": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplate",
-                            "referenceLocation": "ITemplate"
+                        "ISendEventDetail": {
+                            "location": "local",
+                            "path": "/Users/chad/projects/verdocs/active/web-sdk/verdocs-web-sdk/src/components/embeds/verdocs-send/verdocs-send.tsx",
+                            "id": "src/components/embeds/verdocs-send/verdocs-send.tsx::ISendEventDetail"
                         }
                     }
                 }
@@ -414,20 +653,13 @@ export class VerdocsSend {
                     "text": "The user completed the form and clicked send."
                 },
                 "complexType": {
-                    "original": "{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; envelope_id: string; envelope: IEnvelope}",
-                    "resolved": "{ recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; envelope_id: string; envelope: IEnvelope; }",
+                    "original": "ISentEventDetail",
+                    "resolved": "ISentEventDetail",
                     "references": {
-                        "ICreateEnvelopeRecipientFromTemplate": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ICreateEnvelopeRecipientFromTemplate",
-                            "referenceLocation": "ICreateEnvelopeRecipientFromTemplate"
-                        },
-                        "IEnvelope": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::IEnvelope",
-                            "referenceLocation": "IEnvelope"
+                        "ISentEventDetail": {
+                            "location": "local",
+                            "path": "/Users/chad/projects/verdocs/active/web-sdk/verdocs-web-sdk/src/components/embeds/verdocs-send/verdocs-send.tsx",
+                            "id": "src/components/embeds/verdocs-send/verdocs-send.tsx::ISentEventDetail"
                         }
                     }
                 }
@@ -513,6 +745,7 @@ export class VerdocsSend {
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "templateId",