'use strict';

var index = require('./index-B2lA-USD.js');
var jsSdk = require('@verdocs/js-sdk');
var Toast = require('./Toast-CFBM1R4z.js');
var errors = require('./errors-D1XRvnet.js');
var Datastore = require('./Datastore-CIzsoGWH.js');

const verdocsEnvelopeRecipientLinkCss = "@-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-envelope-recipient-link{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-recipient-link .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-link .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-link .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-link .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-link .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-link .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .summary-recipient .recipient-link{width:120px;padding:0 16px;font-weight:500;margin:0 0 0 8px;text-align:center;font-size:0.875rem;border-radius:100%;color:rgb(55, 65, 81);line-height:1.25rem;background-color:#d8d8d8;border:2px solid rgb(156, 163, 175)}verdocs-envelope-recipient-link .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-link .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;overflow:hidden;margin:0 6px 0 0;border-radius:4px;white-space:nowrap;-ms-flex-align:center;align-items:center;text-overflow:ellipsis;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-link .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-link .buttons verdocs-button button{width:100%}";

const VerdocsEnvelopeRecipientLink = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.next = index.createEvent(this, "next");
        this.sdkError = index.createEvent(this, "sdkError");
        this.envelopeListenerId = null;
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
        /**
         * The envelope ID to edit.
         */
        this.envelopeId = '';
        /**
         * The role to load.
         */
        this.roleName = '';
        this.gettingLink = true;
        this.link = '';
        this.loading = true;
        this.envelope = null;
        this.recipient = null;
    }
    async componentWillLoad() {
        var _a, _b, _c;
        try {
            this.endpoint.loadSession();
            if (!this.envelopeId) {
                console.log(`[RECIPIENT_LINK] Missing required envelope ID ${this.envelopeId}`);
                return;
            }
            if (!this.endpoint.session) {
                console.log('[RECIPIENT_LINK] Unable to start session, must be authenticated');
                return;
            }
            this.listenToEnvelope();
        }
        catch (e) {
            console.log('[RECIPIENT_LINK] Error loading envelope', 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));
        }
    }
    disconnectedCallback() {
        this.unlistenToEnvelope();
    }
    async listenToEnvelope() {
        console.log('[RECIPIENT_LINK] Loading envelope', this.envelopeId);
        this.unlistenToEnvelope();
        Datastore.Store.subscribe('envelopes', this.envelopeId, () => jsSdk.getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
            var _a;
            this.envelope = envelope;
            this.loading = false;
            this.recipient = (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).find(r => r.role_name === this.roleName);
            this.getLink(this.recipient);
        });
    }
    unlistenToEnvelope() {
        if (this.envelopeListenerId) {
            Datastore.Store.store.delListener(this.envelopeListenerId);
            this.envelopeListenerId = null;
        }
    }
    handleDone(e) {
        var _a;
        e.preventDefault();
        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.envelope });
    }
    copyLink(link) {
        navigator.clipboard
            .writeText(link)
            .then(() => Toast.VerdocsToast('Link copied to clipboard!', { style: 'success', duration: 3000 }))
            .catch(e => {
            console.warn('[RECIPIENT_LINK] Error copying to clipboard', e);
            Toast.VerdocsToast(`Unable to copy to clipboard: ${e.message}`, { style: 'error' });
        });
    }
    getLink(recipient) {
        this.gettingLink = true;
        jsSdk.getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
            .then(response => {
            this.gettingLink = false;
            this.link = response.link;
            // NOTE: Left here for documentation purposes. We don't auto-copy the link because many browsers now
            // error on that because we aren't the focus/gesture-initiator since we're a new component just being
            // drawn in the DOM. So we let the user click to trigger that.
            // this.copyLink(response.link);
        })
            .catch(e => {
            this.gettingLink = false;
            console.log('[RECIPIENT_LINK] Error getting link', e);
            Toast.VerdocsToast('Unable to get link: ' + e.message, { style: 'error' });
        });
    }
    render() {
        if (this.loading || !this.recipient) {
            return index.h(index.Host, null);
        }
        // const recipientsWithActions = getRecipientsWithActions(this.store.state); const showLinkButton = recipientCanAct(recipient, recipientsWithActions); const link =
        //   this.links[recipient.role_name]; const gettingLink = this.gettingLinks[recipient.role_name]; return (
        const fullName = jsSdk.formatFullName(this.recipient);
        return (index.h(index.Host, null, index.h("div", { class: "summary-content" }, index.h("h1", { class: "summary-title" }, "In-Person Signing Link"), index.h("div", { class: "summary-rows" }, index.h("div", { class: "summary-recipient" }, index.h("div", { class: "role-name" }, this.recipient.role_name), index.h("div", { class: "role-details" }, index.h("div", { class: "role-info" }, index.h("div", { class: "role-full-name" }, fullName, " (", this.recipient.email || this.recipient.phone, ")"), !this.link && (index.h("verdocs-button", { size: "small", variant: "outline", label: this.gettingLink ? 'Loading...' : 'Get Link', disabled: this.gettingLink, onClick: () => this.getLink(this.recipient) }))), this.link && (index.h("div", { class: "link-wrapper" }, index.h("div", { class: "link" }, this.link), index.h("verdocs-button", { size: "small", variant: "outline", label: "Copy", onClick: () => this.copyLink(this.link) })))))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { size: "small", label: "Done", onClick: e => this.handleDone(e) })))));
    }
};
VerdocsEnvelopeRecipientLink.style = verdocsEnvelopeRecipientLinkCss;

const verdocsEnvelopeUpdateRecipientCss = "@-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-envelope-update-recipient{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-update-recipient .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-update-recipient .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-update-recipient .fields{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-update-recipient .fields .field{margin:2px 0}verdocs-envelope-update-recipient .fields .note{font-style:italic;font-size:14px}verdocs-envelope-update-recipient .fields .fields-row{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-update-recipient .fields .fields-row>*{-ms-flex:1;flex:1}verdocs-envelope-update-recipient .fields .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-update-recipient .fields textarea{width:100%;font-size:16px;padding:5px 7px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-envelope-update-recipient .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-update-recipient .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-update-recipient .buttons verdocs-button button{width:100%}";

const VerdocsEnvelopeUpdateRecipient = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.next = index.createEvent(this, "next");
        this.sdkError = index.createEvent(this, "sdkError");
        this.envelopeListenerId = null;
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
        /**
         * The envelope ID to edit.
         */
        this.envelopeId = '';
        /**
         * The role to load.
         */
        this.roleName = '';
        this.gettingLink = true;
        this.link = '';
        this.loading = true;
        this.envelope = null;
        this.originalRecipient = null;
        this.updatedRecipient = null;
    }
    async componentWillLoad() {
        var _a, _b, _c;
        try {
            this.endpoint.loadSession();
            if (!this.envelopeId) {
                console.log(`[UPDATE_RECIPIENT] Missing required envelope ID ${this.envelopeId}`);
                return;
            }
            if (!this.endpoint.session) {
                console.log('[UPDATE_RECIPIENT] Unable to start session, must be authenticated');
                return;
            }
            this.listenToEnvelope();
        }
        catch (e) {
            console.log('[UPDATE_RECIPIENT] Error loading envelope', 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));
        }
    }
    disconnectedCallback() {
        this.unlistenToEnvelope();
    }
    async listenToEnvelope() {
        console.log('[UPDATE_RECIPIENT] Loading envelope', this.envelopeId);
        this.unlistenToEnvelope();
        Datastore.Store.subscribe('envelopes', this.envelopeId, () => jsSdk.getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
            var _a;
            this.envelope = envelope;
            this.loading = false;
            const recipient = (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).find(r => r.role_name === this.roleName);
            this.originalRecipient = recipient;
            this.updatedRecipient = { ...recipient };
        });
    }
    unlistenToEnvelope() {
        if (this.envelopeListenerId) {
            Datastore.Store.store.delListener(this.envelopeListenerId);
            this.envelopeListenerId = null;
        }
    }
    handleSave(e) {
        var _a;
        e.preventDefault();
        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ action: 'save', originalRecipient: this.originalRecipient, updatedRecipient: this.updatedRecipient });
    }
    handleCancel(e) {
        var _a;
        e.preventDefault();
        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ action: 'cancel', originalRecipient: this.originalRecipient, updatedRecipient: this.updatedRecipient });
    }
    render() {
        if (this.loading || !this.updatedRecipient) {
            return index.h(index.Host, null);
        }
        return (index.h(index.Host, null, index.h("div", { class: "summary-content" }, index.h("h1", { class: "summary-title" }, "Update Recipient"), index.h("div", { class: "summary-rows" }, index.h("div", { class: "fields" }, index.h("div", { class: "role-name" }, this.updatedRecipient.role_name), index.h("div", { class: "field" }, index.h("div", { class: "fields-row" }, index.h("verdocs-text-input", { value: this.updatedRecipient.first_name, placeholder: "First Name...", onInput: (e) => (this.updatedRecipient.first_name = e.target.value) }), index.h("verdocs-text-input", { value: this.updatedRecipient.last_name, placeholder: "Last Name...", onInput: (e) => (this.updatedRecipient.last_name = e.target.value) }))), index.h("div", { class: "field" }, index.h("verdocs-text-input", { type: "email", value: this.updatedRecipient.email, placeholder: "Email Address...", onInput: (e) => (this.updatedRecipient.email = e.target.value) })), index.h("div", { class: "field" }, index.h("verdocs-text-input", { type: "tel", value: this.updatedRecipient.phone, placeholder: "Phone Number...", onInput: (e) => (this.updatedRecipient.phone = e.target.value) })), index.h("div", { class: "field" }, index.h("textarea", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Optional message to include in invitation...", onInput: (e) => (this.updatedRecipient.message = e.target.value) }, this.updatedRecipient.message)), index.h("div", { class: "note" }, "NOTE: If you change the recipient's email address or invite message, they will receive a new invitation to sign the envelope. This will also reset their status if they have previously declined to sign."))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { size: "small", label: "Save", onClick: e => this.handleSave(e) })))));
    }
};
VerdocsEnvelopeUpdateRecipient.style = verdocsEnvelopeUpdateRecipientCss;

exports.verdocs_envelope_recipient_link = VerdocsEnvelopeRecipientLink;
exports.verdocs_envelope_update_recipient = VerdocsEnvelopeUpdateRecipient;
//# sourceMappingURL=verdocs-envelope-recipient-link.verdocs-envelope-update-recipient.entry.cjs.js.map

//# sourceMappingURL=verdocs-envelope-recipient-link_2.cjs.entry.js.map