@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

package/dist/esm/bank-account-form_9.entry.js

@@ -0,0 +1,534 @@
+import { h, r as registerInstance, H as Host, c as createEvent } from './index-Bn7inNWG.js';
+import { S as Skeleton } from './skeleton-DK6mW457.js';
+import { w as waitForConfig, c as configState } from './config-state-DZeVYerv.js';
+import { n as generateTabId, o as snakeToCamel, f as formatCurrency } from './utils-CKEiU2Q5.js';
+import { a as iframeInputStylesSet } from './iframe-input-styles-state-Cqb62KAu.js';
+import { i as inputInvalidAndFocused, b as inputInvalid, a as inputFocused, c as input, ay as radioListItem } from './parts-CVGBVdVC.js';
+import { a as PaymentMethodTypes } from './Payment-DrCqUoz-.js';
+import './index-B_KxSZIF.js';
+import './Dispute-7MWRbTXI.js';
+
+const BankAccountFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" },
+        h("div", { class: "row mb-3" },
+            h("div", { class: "col-12 align-content-end" },
+                h(Skeleton, { height: "18px", width: "120px" }),
+                h(Skeleton, { height: "36px" }))),
+        h("div", { class: "row" },
+            h("div", { class: "col-12 align-content-end" },
+                h(Skeleton, { height: "18px", width: "110px" }),
+                h(Skeleton, { height: "36px" })))));
+};
+
+const BankAccountForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
+    }
+    componentDidRender() {
+        const elements = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(Host, { key: '7ee7c6e3c26ab1a90bdbf7215fe13f65aade1025' }, h(BankAccountFormSkeleton, { key: 'e4afc94a21b041972d031cfce88a102f763932d1', isReady: this.isReady }), h("div", { key: '8980e0dc0048dbd9cd93a4f93fab8c4cbfeef611', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: 'd04bb6b18498de9646ba6e2ee32f223774a72cc7', class: "row mb-3" }, h("iframe-input", { key: '7eb29da8beff34cbe5d2b7c151fec433d17f8555', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'c6345cddc37cbe5627ca4581fb98be55b85550a6', class: "row" }, h("iframe-input", { key: '0bf71a22e9126e04f15f213d84953ccfd3388ef0', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+    }
+};
+
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" },
+        h("div", { class: "mb-3" },
+            h(Skeleton, { height: "18px", width: "100px" }),
+            h(Skeleton, { height: "36px" })),
+        h("div", { class: "row" },
+            h("div", { class: "col-4 align-content-end" },
+                h(Skeleton, { height: "18px", width: "80px" }),
+                h(Skeleton, { height: "36px" })),
+            h("div", { class: "col-4 align-content-end" },
+                h(Skeleton, { height: "36px" })),
+            h("div", { class: "col-4 align-content-end" },
+                h(Skeleton, { height: "18px", width: "30px" }),
+                h(Skeleton, { height: "36px" })))));
+};
+
+const CardForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(Host, { key: 'fab2d810cd4a51aacd81ca5d43e61ee27e5fb8a4' }, h(CardFormSkeleton, { key: '42d31a9cf55dea31a21fa92d9a5c74ce4ec8d768', isReady: this.isReady }), h("div", { key: 'f1df6f6a3bfdf5f51ecf34a2e27a8de3e63dccd3', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: 'bafadf410b8a1e623a98da33ab3a3834d62c716c', class: "mb-3" }, h("iframe-input", { key: '0e32596def3eb412eedaedabd675d34046293a32', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '1166f127047cb248eb8981dc18c8a2d5f597ee2d', class: "d-flex align-items-start" }, h("div", { key: 'f1daac286bfd44a5a90d4dea160760409169d0a2', class: "flex-fill me-3" }, h("iframe-input", { key: 'b100858ff3d439677b60e21bf0b2a8cc48f0a616', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '6a3b0ee0cb1de0a12e363c0fb8137b70f20f1fa5', class: "flex-fill me-3" }, h("iframe-input", { key: 'd58cba3700bec37fcb2cb79d80ae23d71896e140', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '6026f8b15e8b2d9a8cc518c9e9ddb259629714c8', class: "flex-fill" }, h("iframe-input", { key: '880ffeabf823ca80bc49bbda23750002cc470143', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+    }
+};
+
+const HiddenInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isFocused = false;
+        this.errorText = '';
+    }
+    async componentDidLoad() {
+        const fontStyles = await this.getBaseFontStyles();
+        iframeInputStylesSet('fontStyles', fontStyles);
+        const focusedStyles = await this.getFocusedStyles();
+        iframeInputStylesSet('focused', focusedStyles);
+        const focusedAndInvalidStyles = await this.getFocusedAndInvalidStyles();
+        iframeInputStylesSet('focusedAndInvalid', focusedAndInvalidStyles);
+    }
+    async getBaseFontStyles() {
+        return new Promise((resolve, _reject) => {
+            setTimeout(() => {
+                const computedStyles = getComputedStyle(this.hiddenInput);
+                const styles = {
+                    fontFamily: computedStyles.fontFamily,
+                    fontSize: computedStyles.fontSize,
+                    fontWeight: computedStyles.fontWeight,
+                    lineHeight: computedStyles.lineHeight,
+                    margin: computedStyles.margin,
+                    padding: computedStyles.padding,
+                    color: computedStyles.color,
+                };
+                resolve(styles);
+            }, 500);
+        });
+    }
+    ;
+    async getFocusedStyles() {
+        return new Promise((resolve, _reject) => {
+            this.hiddenInput.focus();
+            setTimeout(() => {
+                this.hiddenInput.blur();
+                let computedStyles = getComputedStyle(this.hiddenInput);
+                resolve({
+                    boxShadow: computedStyles.boxShadow,
+                    border: computedStyles.border,
+                });
+            }, 500);
+        });
+    }
+    async getFocusedAndInvalidStyles() {
+        return new Promise((resolve, _reject) => {
+            this.hiddenInput.focus();
+            this.errorText = 'Error';
+            setTimeout(() => {
+                const computedStyles = getComputedStyle(this.hiddenInput);
+                const styles = {
+                    boxShadow: computedStyles.boxShadow,
+                    border: computedStyles.border,
+                };
+                this.hiddenInput.blur();
+                resolve(styles);
+            }, 500);
+        });
+    }
+    get part() {
+        if (this.isFocused && this.errorText) {
+            return inputInvalidAndFocused;
+        }
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        return input;
+    }
+    render() {
+        return (h(Host, { key: '61f65f5960ecc45fe7e321299bdd367fde6f3f57' }, h("input", { key: 'ae2126e3efa70fe09a1211e0335667f324471649', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+    }
+};
+
+const BillingForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get showSimpleCardBillingForm() {
+        return this.paymentMethodType === 'card' && this.hideCardBillingForm;
+    }
+    get showSimpleBankAccountBillingForm() {
+        return this.paymentMethodType === 'bankAccount' && this.hideBankAccountBillingForm;
+    }
+    async getValues() {
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
+    }
+    async fill(fields) {
+        var _a;
+        (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
+    }
+    async validate() {
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
+    }
+    render() {
+        if (this.showSimpleBankAccountBillingForm) {
+            return (h(Host, null, h("justifi-bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        if (this.showSimpleCardBillingForm) {
+            return (h(Host, null, h("justifi-card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        return (h(Host, null, h("justifi-billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+    }
+};
+
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
+const NewPaymentMethod = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected");
+        this.saveNewPaymentMethodChecked = false;
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+    }
+    handleCheckboxChanged(event) {
+        this.saveNewPaymentMethodChecked = event.detail;
+    }
+    async fillBillingForm(fields) {
+        this.billingFormRef.fill(fields);
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a, _b;
+        if (!this.paymentMethodFormRef || !this.billingFormRef)
+            return;
+        try {
+            const { isValid, errors } = await this.validate();
+            if (!isValid || !insuranceValidation.isValid) {
+                // get propety value from first property in errors object
+                const message = `${Object.values(errors)[0] || 'Validation error'}`;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message,
+                        decline_code: undefined
+                    }
+                };
+            }
+            const tokenizeResponse = await this.tokenize();
+            if (tokenizeResponse.error) {
+                return { error: tokenizeResponse.error };
+            }
+            else {
+                const tokenizeRessponseData = tokenizeResponse.data;
+                return {
+                    token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
+                    data: tokenizeRessponseData
+                };
+            }
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async validate() {
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        const isValid = billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+        const errors = Object.assign(Object.assign({}, billingFormValidation.errors), paymentMethodFormValidation.errors);
+        return { isValid, errors };
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            let paymentMethodData;
+            if (this.saveNewPaymentMethodChecked) {
+                paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
+            }
+            else {
+                paymentMethodData = Object.assign({}, billingFormFieldValues);
+            }
+            const clientId = this.authToken;
+            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
+            return tokenizeResponse;
+        }
+        catch (error) {
+            return error;
+        }
+    }
+    showNewPaymentMethodForm() {
+        var _a;
+        const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+    }
+    get hiddenRadioInput() {
+        return !this.showAch || !this.showCard;
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { key: '137378e62a729bd2287b1bdf89cb85c702cd4e12', class: "payment-method" }, h("div", { key: 'dabfcf5c56169708a8968a16aeaafefb43ca3ab8', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'd098e2b8f6e1230fc16fdc2cbfd616559bcf2b89', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+    }
+};
+
+class PaymentMethodOption {
+    constructor(paymentMethod) {
+        this.id = paymentMethod.id;
+        this.brand = paymentMethod.brand;
+        this.acct_last_four = paymentMethod.acct_last_four;
+        this.type = snakeToCamel(paymentMethod.type);
+    }
+}
+var CardBrandLabels;
+(function (CardBrandLabels) {
+    CardBrandLabels["american_express"] = "American Express";
+    CardBrandLabels["diners_club"] = "Diners Club";
+    CardBrandLabels["discover"] = "Discover";
+    CardBrandLabels["jcb"] = "JCB";
+    CardBrandLabels["mastercard"] = "Mastercard";
+    CardBrandLabels["china_unionpay"] = "UnionPay";
+    CardBrandLabels["visa"] = "Visa";
+    CardBrandLabels["unknown"] = "Unknown";
+})(CardBrandLabels || (CardBrandLabels = {}));
+
+const PaymentMethodOptions = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.savedPaymentMethods = [];
+        this.paymentMethodOptions = [];
+    }
+    async fillBillingForm(fields) {
+        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
+        if (newPaymentMethodElement.fillBillingForm) {
+            newPaymentMethodElement.fillBillingForm(fields);
+        }
+    }
+    connectedCallback() {
+        this.paymentMethodsChanged();
+    }
+    paymentMethodsChanged() {
+        var _a, _b;
+        this.paymentMethodOptions = this.savedPaymentMethods
+            .map((paymentMethod) => new PaymentMethodOption(paymentMethod))
+            .filter((paymentMethod) => {
+            // Don't saved card or bank account if they are disabled
+            return ((this.showCard || paymentMethod.type !== PaymentMethodTypes.card) &&
+                (this.showAch || paymentMethod.type !== PaymentMethodTypes.bankAccount));
+        });
+        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle' && !this.insuranceToggled) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
+        }
+        if (this.showCard) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.card }));
+        }
+        if (this.showAch) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
+        }
+        if (!this.selectedPaymentMethodId) {
+            this.selectedPaymentMethodId = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
+        }
+    }
+    paymentMethodOptionSelected(event) {
+        this.selectedPaymentMethodId = event.detail.id;
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a;
+        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod(insuranceValidation));
+    }
+    async validate() {
+        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
+        return newPaymentMethodElement.validate();
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'c61e82c72aaa25e87ded723799a1eb0961c05444' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+            const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
+            const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
+            const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
+            const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
+            if (newCard || newBankAccount) {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+            else if (sezzle) {
+                return (h("justifi-sezzle-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+            else if (this.showSavedPaymentMethods) {
+                return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+        })));
+    }
+    static get watchers() { return {
+        "savedPaymentMethods": ["paymentMethodsChanged"]
+    }; }
+};
+
+const SaveNewPaymentMethod = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checkboxChanged = createEvent(this, "checkboxChanged");
+        this.isChecked = false;
+    }
+    handleCheckboxChange(_name, value) {
+        this.isChecked = value;
+        this.checkboxChanged.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: 'e6e7a75237ec2062188bf85deadac58892663b3b', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'abbaeb4e9119c4d41f0a727c7a070c14b7418302', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+    }
+};
+
+const SavedPaymentMethod = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected");
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a;
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
+        return { token: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id };
+    }
+    ;
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '78487e52f549547f4c89f48a238a8916d77d4f1c', class: "payment-method" }, h("div", { key: 'd437a5f9e79356b1177703da2b5d7f4ca98072ce', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0dd03b9ebae98c441c63717aba310d77e587b1c8', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+    }
+};
+
+const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
+        display: 'inline',
+        width: '80px',
+        marginLeft: '5px',
+        marginTop: '-5px',
+    } }));
+const SezzlePaymentMethod = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected");
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.initializeSezzleCheckout = () => {
+            let resolveSezzlePromise;
+            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
+            const bnpl = this.bnpl;
+            const amount = +this.paymentAmount; // convert to number
+            const Checkout = window.Checkout;
+            const checkout = new Checkout({
+                mode: 'popup',
+                publicKey: bnpl.provider_client_id,
+                apiMode: bnpl.provider_mode,
+                apiVersion: bnpl.provider_api_version,
+            });
+            checkout.sezzleButtonElement = this.sezzleButtonRef;
+            checkout.init({
+                onClick: function (event) {
+                    event.preventDefault();
+                    checkout.startCheckout({
+                        checkout_url: bnpl.provider_checkout_url
+                    });
+                },
+                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
+            });
+            this.sezzleCheckout = checkout;
+            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
+        };
+    }
+    componentDidRender() {
+        this.scriptRef.onload = () => {
+            this.sezzleButtonRef = document.createElement('button');
+            this.initializeSezzleCheckout();
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
+        this.sezzleButtonRef.click();
+        return this.sezzlePromise;
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '4ae50e7bbb15d0049d069edacd0d95ba7c13dbe5', class: "payment-method" }, h("script", { key: '42a0590d89626ba7a93852e421eb121626b48375', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '31a2a72650486c258267c6d4de3723f7afa5b063', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: 'eac1adbcd82fcb4f9c440c53c40ce34af6092991', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
+    }
+};
+
+export { BankAccountForm as bank_account_form, CardForm as card_form, HiddenInput as hidden_input, BillingForm as justifi_billing_form, NewPaymentMethod as justifi_new_payment_method, PaymentMethodOptions as justifi_payment_method_options, SaveNewPaymentMethod as justifi_save_new_payment_method, SavedPaymentMethod as justifi_saved_payment_method, SezzlePaymentMethod as justifi_sezzle_payment_method };

package/dist/esm/business-details-core.entry.js

@@ -1,9 +1,9 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-kpoIU4v_.js';
-import { E as ErrorState } from './utils-kWaZhFAd.js';
-import { S as StyledHost } from './styled-host-B_XBaM7z.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-Bn7inNWG.js';
+import { E as ErrorState } from './utils-_kzStVq_.js';
+import { S as StyledHost } from './styled-host-CTAGIN84.js';
 import './event-types-CZfYo5-1.js';
-import { S as Skeleton } from './skeleton-DrHwsgs_.js';
-import './parts-CfF8KKwx.js';
+import { S as Skeleton } from './skeleton-DK6mW457.js';
+import './parts-CVGBVdVC.js';
 
 const BusinessDetailsLoading = () => {
     const Block = () => (h("div", { class: "mt-5" },

package/dist/esm/{business.service-Bdvhdc_d.js → business.service-Di9jP2_p.js}

@@ -1,9 +1,11 @@
-import { A as Api } from './Api-N_veT2p6.js';
-import './ComponentError-Cjcsf8ku.js';
-import './Refund-Di6J0oN2.js';
+import { A as Api } from './Api-BJv2_XdA.js';
+import './ComponentError-SdntD1xf.js';
+import './Checkout-CIUkm9aQ.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-DrCqUoz-.js';
+import './Refund-Dwnnpqim.js';
 import './Business-BCoP0TAV.js';
-import './Dispute-BH0Xfn-F.js';
+import './Dispute-7MWRbTXI.js';
 
 const api = Api();
 class BusinessService {

package/dist/esm/{button-CeR8qVS3.js → button-C-ZZ9yD1.js}

@@ -1,5 +1,5 @@
-import { h } from './index-kpoIU4v_.js';
-import { ad as buttonSecondary, ae as buttonPrimary, af as buttonLoading } from './parts-CfF8KKwx.js';
+import { h } from './index-Bn7inNWG.js';
+import { ac as buttonSecondary, ad as buttonPrimary, ae as buttonLoading } from './parts-CVGBVdVC.js';
 
 const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" },
     h("span", { class: "visually-hidden" }, "Loading...")));

package/dist/esm/{check-pkg-version-D3fhoIFS.js → check-pkg-version-8KHO3ihW.js}

@@ -1,10 +1,12 @@
-import { p as packageJson } from './package-wutYt_7D.js';
-import { A as Api } from './Api-N_veT2p6.js';
-import './ComponentError-Cjcsf8ku.js';
-import './Refund-Di6J0oN2.js';
+import { p as packageJson } from './package-BOCuVjGs.js';
+import { A as Api } from './Api-BJv2_XdA.js';
+import './ComponentError-SdntD1xf.js';
+import './Checkout-CIUkm9aQ.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-DrCqUoz-.js';
+import './Refund-Dwnnpqim.js';
 import './Business-BCoP0TAV.js';
-import './Dispute-BH0Xfn-F.js';
+import './Dispute-7MWRbTXI.js';
 
 const api = Api();
 class AnalyticsService {

package/dist/esm/{checkout.service-XgGFa7H8.js → checkout.service-l-H_OIZa.js}

@@ -1,9 +1,11 @@
-import { A as Api } from './Api-N_veT2p6.js';
-import './ComponentError-Cjcsf8ku.js';
-import './Refund-Di6J0oN2.js';
+import { A as Api } from './Api-BJv2_XdA.js';
+import './ComponentError-SdntD1xf.js';
+import './Checkout-CIUkm9aQ.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-DrCqUoz-.js';
+import './Refund-Dwnnpqim.js';
 import './Business-BCoP0TAV.js';
-import './Dispute-BH0Xfn-F.js';
+import './Dispute-7MWRbTXI.js';
 
 const api = Api();
 class CheckoutService {