@justifi/webcomponents 5.7.6 → 6.0.0-rc.2

package/dist/esm/Payment-93PpwzdC.js

@@ -1,149 +0,0 @@
-import { f as formatCurrency } from './utils-DIxPWgIk.js';
-import { D as DisputeStatus } from './Dispute-7MWRbTXI.js';
-
-var CaptureStrategy;
-(function (CaptureStrategy) {
-    CaptureStrategy["automatic"] = "automatic";
-    CaptureStrategy["manual"] = "manual";
-})(CaptureStrategy || (CaptureStrategy = {}));
-var PaymentMethodTypes;
-(function (PaymentMethodTypes) {
-    PaymentMethodTypes["card"] = "card";
-    PaymentMethodTypes["bankAccount"] = "bankAccount";
-    PaymentMethodTypes["sezzle"] = "sezzle";
-    PaymentMethodTypes["saved"] = "saved";
-})(PaymentMethodTypes || (PaymentMethodTypes = {}));
-var PaymentTypes;
-(function (PaymentTypes) {
-    PaymentTypes["card"] = "Card";
-    PaymentTypes["bankAccount"] = "ACH";
-    PaymentTypes["unknown"] = "Unknown";
-})(PaymentTypes || (PaymentTypes = {}));
-var PaymentStatuses;
-(function (PaymentStatuses) {
-    PaymentStatuses["pending"] = "pending";
-    PaymentStatuses["automatic"] = "automatic";
-    PaymentStatuses["authorized"] = "authorized";
-    PaymentStatuses["succeeded"] = "succeeded";
-    PaymentStatuses["failed"] = "failed";
-    PaymentStatuses["canceled"] = "canceled";
-    PaymentStatuses["disputed"] = "disputed";
-    PaymentStatuses["fully_refunded"] = "fully_refunded";
-    PaymentStatuses["partially_refunded"] = "partially_refunded";
-})(PaymentStatuses || (PaymentStatuses = {}));
-var CurrencyTypes;
-(function (CurrencyTypes) {
-    CurrencyTypes["usd"] = "usd";
-    CurrencyTypes["cad"] = "cad";
-})(CurrencyTypes || (CurrencyTypes = {}));
-class PaymentMethod {
-    constructor(paymentMethod) {
-        this.card = paymentMethod.card ? new Card(paymentMethod.card) : undefined;
-        this.bank_account = paymentMethod.bank_account
-            ? new BankAccount(paymentMethod.bank_account)
-            : undefined;
-    }
-    get payersName() {
-        if (this.card) {
-            return this.card.name;
-        }
-        else if (this.bank_account) {
-            return this.bank_account.name;
-        }
-        return null;
-    }
-    get lastFourDigits() {
-        if (this.card) {
-            return `**** ${this.card.acct_last_four}`;
-        }
-        else if (this.bank_account) {
-            return `**** ${this.bank_account.acct_last_four}`;
-        }
-        return null;
-    }
-}
-class BankAccount {
-    constructor(bankAccount) {
-        this.id = bankAccount.id;
-        this.acct_last_four = bankAccount.acct_last_four;
-        this.name = bankAccount.name;
-        this.brand = bankAccount.brand;
-        this.token = bankAccount.token;
-        this.created_at = bankAccount.created_at;
-        this.updated_at = bankAccount.updated_at;
-    }
-}
-class Card {
-    constructor(card) {
-        this.id = card.id || '';
-        this.acct_last_four = card.acct_last_four;
-        this.name = card.name;
-        this.brand = card.brand;
-        this.token = card.token;
-        this.created_at = card.created_at;
-        this.updated_at = card.updated_at;
-    }
-}
-class Payment {
-    constructor(payment) {
-        this.id = payment.id;
-        this.account_id = payment.account_id;
-        this.currency = payment.currency;
-        this.amount = payment.amount;
-        this.amount_disputed = payment.amount_disputed;
-        this.amount_refundable = payment.amount_refundable;
-        this.amount_refunded = payment.amount_refunded;
-        this.balance = payment.balance;
-        this.captured = payment.captured;
-        this.capture_strategy = payment.capture_strategy;
-        this.description = payment.description;
-        this.disputed = payment.disputed;
-        this.disputes = payment.disputes;
-        this.error_code = payment.error_code;
-        this.error_description = payment.error_description;
-        this.expedited = payment.expedited;
-        this.fee_amount = payment.fee_amount;
-        this.is_test = payment.is_test;
-        this.metadata = payment.metadata;
-        this.payment_method = new PaymentMethod(payment.payment_method);
-        this.payment_intent_id = payment.payment_intent_id;
-        this.refunded = payment.refunded;
-        this.status = payment.status;
-        this.created_at = payment.created_at;
-        this.updated_at = payment.updated_at;
-    }
-    get disputedStatus() {
-        const lost = this.disputes.some((dispute) => dispute.status === DisputeStatus.lost);
-        // if a dispute is 'won', we don't show a dispute status, just general status
-        // TODO: update this logic to work with new DisputeStatus enum
-        // (cast 'open' as DisputeStatus in the meantime to keep existing functionality)
-        if (!this.disputed) {
-            return null;
-        }
-        else if (lost) {
-            return DisputeStatus.lost;
-        }
-        else {
-            return 'open';
-        }
-    }
-    get payment_type() {
-        if (this.payment_method) {
-            return this.payment_method.card ? PaymentTypes.card : PaymentTypes.bankAccount;
-        }
-        else {
-            return PaymentTypes.unknown;
-        }
-    }
-    get payers_name() {
-        return this.payment_method.payersName;
-    }
-    get last_four_digits() {
-        return this.payment_method.lastFourDigits;
-    }
-    formattedPaymentAmount(amount) {
-        return formatCurrency(amount, this.currency);
-    }
-}
-
-export { Payment as P, PaymentMethodTypes as a };

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

@@ -1,532 +0,0 @@
-import { h, r as registerInstance, H as Host, c as createEvent } from './index-kpoIU4v_.js';
-import { S as Skeleton } from './skeleton-MHyzfkPM.js';
-import { w as waitForConfig, c as configState } from './config-state-BrllxiM0.js';
-import { a as iframeInputStylesSet } from './iframe-input-styles-state-2KXH-_4X.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-93PpwzdC.js';
-import { n as snakeToCamel, f as formatCurrency } from './utils-DIxPWgIk.js';
-import './index-B9me4yN2.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;
-    }
-    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: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
-    }
-};
-
-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;
-    }
-    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: '7d91102f0ecd44a368b614d6192b3c2c3955fcdf' }, h(CardFormSkeleton, { key: '721c79931188558801dc462ec55ab6feaa6a8e65', isReady: this.isReady }), h("div", { key: '8050c1d12e1c5a68e574d4db8cb35bd94e10f92d', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'b53acd53cbd40f1127b4a15685630f7cac18643f', class: "mb-3" }, h("iframe-input", { key: '0d1f70562753c975e5ca91d118a3621427e52cad', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '2b6077a165609aafb7d2f7a83029b225e9fb4193', class: "d-flex align-items-start" }, h("div", { key: '7bf09dc36d84749035ff22607f802688cb96179a', class: "flex-fill me-3" }, h("iframe-input", { key: '7a3e75c1b85a4de5b4430e4d81ac6173eb72ac8f', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0372db745a61fddd0d4e7568302ea9ba9aeef250', class: "flex-fill me-3" }, h("iframe-input", { key: 'e37bd58f6704ab443e41bf4616641667b9d1cdde', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '659735815eb06b33d959ce1d77eb7d0673a80684', class: "flex-fill" }, h("iframe-input", { key: '69650550c43f239a53011222a776ed6912895e52', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
-    }
-};
-
-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 };