@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

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

@@ -0,0 +1,481 @@
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-29fcfdf5.js';
+import { i as iframeInputStylesSet } from './iframe-input-styles-state-ff730fe5.js';
+import { i as inputInvalidAndFocused, b as inputInvalid, a as inputFocused, c as input, y as billingForm, z as radioListItem } from './parts-186d437f.js';
+import { c as create$3, F as FormController } from './index.esm-0b6849c2.js';
+import { u as identityNameValidation, l as lineOneValidation, k as lineTwoValidation, m as cityValidation, n as stateValidation, q as postalValidation } from './schema-validations-c7d4f9df.js';
+import { S as StateOptions } from './state-options-a356fb11.js';
+import { n as numberOnlyHandler } from './utils-20cdf321.js';
+import { c as config } from './config-27764a9d.js';
+import { H as Header3 } from './header-3-a1c6d475.js';
+import { a as PaymentMethodTypes } from './Payment-4f72d277.js';
+import { j as snakeToCamel, b as formatCurrency } from './utils-54543523.js';
+import './index-a47fdc7f.js';
+import './business-form-options-018f62a5.js';
+import './Business-29c69f22.js';
+import './helpers-96ea3464.js';
+import './Dispute-5fd28ec9.js';
+
+const BankAccountForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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: 'd0f0426565fedc6697eb46e6bc8d03d31eee9c37' }, h("div", { key: '6e792d5cba9421d7d106805d0e0e070ef5b116f9', class: "container-fluid p-0" }, h("div", { key: '89def9b854a7dc9a2e2fbb62d70bc6eaccfa6b0f', class: "row mb-3" }, h("iframe-input", { key: '2c0392ed840edb2364922c0d523f509ea84b3cd3', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${"https://components.justifi.ai/v1"}/accountNumber` })), h("div", { key: '6dbe7911ab8693a4850a60e2d86f4539382a341c', class: "row" }, h("iframe-input", { key: '042153db083d7fa8f4e6d2c5704054fbcf6c1af1', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${"https://components.justifi.ai/v1"}/routingNumber` })))));
+    }
+};
+
+const CardForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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: 'd667f365a95a2251fadffce158033ca8fcbc5723', class: "container-fluid p-0" }, h("div", { key: '43d8e15de893154c96b49ea1917046120daa8b2c', class: "mb-3" }, h("iframe-input", { key: 'c342a50a3194511edfbe6c1f1033bf47b743ddd6', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${"https://components.justifi.ai/v1"}/cardNumber` })), h("div", { key: '2fa70e85071ec6fe4525039de6215026795f71f4', class: "row" }, h("div", { key: 'e7dba59f040258e556664ccf84549edda8a1dd8d', class: "col-4 align-content-end" }, h("iframe-input", { key: '0c2c63ee318b0fc61ff704ffe02160aee252d281', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${"https://components.justifi.ai/v1"}/expirationMonth` })), h("div", { key: 'e211c9bc9cb15ea9571af7d965fcb1d6e4c5669d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'd783cb0d28f1d08826e773efc14c2aa871905a83', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${"https://components.justifi.ai/v1"}/expirationYear` })), h("div", { key: '83af611f578e7db1984713047708e725c9c1c7b5', class: "col-4 align-content-end" }, h("iframe-input", { key: '1f53fce0b7856b8591f6454a549e123fa408be5f', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${"https://components.justifi.ai/v1"}/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: '61734f69c30d37c98e3896c8407225dbe49fe3a2' }, h("input", { key: 'eda00a901e028a09ccd793b1fbc4136a048a0aad', 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 BillingFormSchema = create$3({
+    name: identityNameValidation.required('Enter full name'),
+    address_line1: lineOneValidation.required('Enter street address'),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.required('Enter city'),
+    address_state: stateValidation.required('Select state'),
+    address_postal_code: postalValidation.required('Enter postal code'),
+});
+
+const BillingForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.legend = undefined;
+        this.formController = undefined;
+        this.billingInfo = undefined;
+        this.errors = {};
+    }
+    componentWillLoad() {
+        this.formController = new FormController(BillingFormSchema);
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { key: 'b3bb548839b39a87ad330b9048426baff317cae0' }, h("form", { key: '32e999825e5094e8e5399d46f67b67186f18d7b2' }, h("fieldset", { key: 'c8f13e2d392c45804bb51907a21ff80cb1148fd3' }, this.legend && h("legend", { key: 'c4117087a3391f8c28815069d832d6133459b250' }, this.legend), h("div", { key: '61d9de519f93d42bab36670108a6b923e30cff7f', class: "row gy-3" }, h("div", { key: '4753e297cbab92db6f073e9679ea9f3e9dacf432', class: "col-12" }, h("form-control-text", { key: '1f366def4cd8449cc242eb3bd71952a1548def08', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'c7efc6968d6f776be84ac16b56a785965a81501b', class: "col-12" }, h("form-control-text", { key: '789ca132aabfe42381ce55ec343494b9ac766e73', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'f750e3800a361e78c58a31091b8d07437fe7fdcf', class: "col-12" }, h("form-control-text", { key: '66e06c53dec8b254bf5f7b1d4029c17523f2ceb7', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '9868c2a9bcbed8c65ac8ca8d89ea2102fd0dd1c6', class: "col-12" }, h("form-control-text", { key: 'a637775b91a89fa32c54c97e6a97ec18b2e69024', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '274656a1a879790c99a684da3aa6070f473e2d0b', class: "col-12" }, h("form-control-select", { key: '5fca9ff62f2e2f26fc936474133dbdf24183e86d', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: 'e24b2e9961e1a464a1d99fa4982814e7d43c5a79', class: "col-12" }, h("form-control-text", { key: '1992d68c496b1331a0efbbbeb03153f9155a77d3', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler })))))));
+    }
+};
+
+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", 7);
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.iframeOrigin = config.iframeOrigin;
+        this.authToken = undefined;
+        this.accountId = undefined;
+        this.paymentMethodOption = undefined;
+        this.paymentMethodGroupId = undefined;
+        this.isSelected = undefined;
+        this.saveNewPaymentMethodChecked = false;
+    }
+    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 = await this.validate();
+            if (!isValid || !insuranceValidation.isValid) {
+                return { validationError: true };
+            }
+            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) };
+            }
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async validate() {
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+    }
+    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;
+        return (h("div", { class: "mt-4 pb-4 border-bottom" }, h("hidden-input", null), h("div", { class: "mb-4" }, ((_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id) === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), h("div", { part: billingForm }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { key: '4b6e52ca95845aa1c9163f4d3eafbfc98ca51deb', class: "payment-method" }, h("div", { key: 'd4aea7115ff71564a4d1e87a468174a29a040406', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0204f84a72bb89e03772894f208895359370714b', 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.toggleCreatingNewPaymentMethod = createEvent(this, "toggleCreatingNewPaymentMethod", 7);
+        this.showCard = undefined;
+        this.showAch = undefined;
+        this.showBnpl = undefined;
+        this.showSavedPaymentMethods = undefined;
+        this.paymentMethodGroupId = undefined;
+        this.bnpl = undefined;
+        this.insuranceToggled = undefined;
+        this.authToken = undefined;
+        this.accountId = undefined;
+        this.iframeOrigin = config.iframeOrigin;
+        this.savedPaymentMethods = [];
+        this.paymentAmount = undefined;
+        this.selectedPaymentMethodId = undefined;
+        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));
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '3ab3caf94332163f031ecebe101d45c35e1416bd' }, (_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, paymentMethodGroupId: this.paymentMethodGroupId, 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", 7);
+        this.isChecked = false;
+    }
+    handleCheckboxChange(_name, value) {
+        this.isChecked = value;
+        this.checkboxChanged.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: '4b0ac5e02aa02214bf8ddd574db56eb9508b0607', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'bca05c6b8fa00dd7bbc34ee36ef6086ae1764b82', 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", 7);
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.iframeOrigin = config.iframeOrigin;
+        this.paymentMethodOption = undefined;
+        this.isSelected = undefined;
+    }
+    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: '8e5a11a58cf828356df001461b6bb3163521f1ed', class: "payment-method" }, h("div", { key: 'c20a8a3dcea1f885b94c4829b85be8d6f401ad42', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '72b970f6808e9f938869195fa29217f44b44250e', 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", 7);
+        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);
+        };
+        this.iframeOrigin = config.iframeOrigin;
+        this.bnpl = undefined;
+        this.clientId = undefined;
+        this.accountId = undefined;
+        this.paymentMethodOption = undefined;
+        this.isSelected = undefined;
+        this.paymentAmount = undefined;
+        this.installmentPlan = undefined;
+        this.sezzleCheckout = undefined;
+        this.sezzlePromise = undefined;
+    }
+    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: 'bbe1a2f4a2418d8c9e946e15567f7df89ac06084', class: "payment-method" }, h("script", { key: 'a254fbb032a531a889d81297053be07001262706', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '691439a9541b69f59fac8ed744d633a7cba69fbd', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '4f03055cf993502ff1999abfbd14aa5e6977b811', 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-additional-questions-schema-d94f8975.js → business-additional-questions-schema-48e93928.js}

@@ -1,5 +1,5 @@
-import { c as create$3 } from './index.esm-ed37201b.js';
-import { b as businessNameValidation, w as websiteUrlValidation, e as emailValidation, p as phoneValidation, d as doingBusinessAsValidation, a as businessClassificationValidation, i as industryValidation, t as taxIdValidation, c as dateOfIncorporationValidation, r as revenueValidation, f as paymentVolumeValidation, g as whenServiceReceivedValidation, h as recurringPaymentsValidation, j as recurringPaymentsPercentageValidation, s as seasonalBusinessValidation, o as otherPaymentDetailsValidation } from './schema-validations-93a9d504.js';
+import { c as create$3 } from './index.esm-0b6849c2.js';
+import { b as businessNameValidation, w as websiteUrlValidation, e as emailValidation, p as phoneValidation, d as doingBusinessAsValidation, a as businessClassificationValidation, i as industryValidation, t as taxIdValidation, c as dateOfIncorporationValidation, r as revenueValidation, f as paymentVolumeValidation, g as whenServiceReceivedValidation, h as recurringPaymentsValidation, j as recurringPaymentsPercentageValidation, s as seasonalBusinessValidation, o as otherPaymentDetailsValidation } from './schema-validations-c7d4f9df.js';
 
 const businessCoreInfoSchema = (allowOptionalFields) => {
     const schema = create$3({

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

@@ -1,6 +1,28 @@
-import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { L as LoadingState, E as ErrorState } from './utils-218275b7.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-29fcfdf5.js';
+import { E as ErrorState } from './utils-d7633e66.js';
+import { S as StyledHost } from './styled-host-32228b45.js';
+import { S as Skeleton } from './skeleton-8f71cdf7.js';
+import './parts-186d437f.js';
+
+const BusinessDetailsLoading = () => {
+    const Block = () => (h("div", { class: "mt-5" },
+        h(Skeleton, { width: "40%", height: "1.5rem" }),
+        h("hr", null),
+        h("div", { class: "row g-3" },
+            h("div", { class: "col-12 col-md-6" },
+                h(Skeleton, null),
+                h(Skeleton, null),
+                h(Skeleton, null)),
+            h("div", { class: "col-12 col-md-6" },
+                h(Skeleton, null),
+                h(Skeleton, null),
+                h(Skeleton, null)))));
+    return (h(Fragment, null,
+        h(Block, null),
+        h(Block, null),
+        h(Block, null),
+        h(Block, null)));
+};
 
 var RENDER_STATES;
 (function (RENDER_STATES) {
@@ -42,7 +64,7 @@ const BusinessDetailsCore = class {
     }
     render() {
         if (this.renderState === RENDER_STATES.LOADING) {
-            return h(StyledHost, null, LoadingState());
+            return (h(StyledHost, null, h(BusinessDetailsLoading, null)));
         }
         if (this.renderState === RENDER_STATES.ERROR) {
             return h(StyledHost, null, ErrorState(this.errorMessage));

package/dist/esm/{business-form-options-d790973e.js → business-form-options-018f62a5.js}

@@ -1,4 +1,4 @@
-import { a as BusinessClassification } from './Business-b73d5055.js';
+import { b as BusinessClassification } from './Business-29c69f22.js';
 
 const businessClassificationOptions = [
     {

package/dist/esm/{business-identity-schema-2756dbc6.js → business-identity-schema-75126188.js}

@@ -1,5 +1,5 @@
-import { c as create$3, a as create$6 } from './index.esm-ed37201b.js';
-import { l as lineOneValidation, k as lineTwoValidation, m as cityValidation, n as stateValidation, q as postalValidation, u as identityNameValidation, v as identityTitleValidation, e as emailValidation, p as phoneValidation, x as dobValidation, y as ssnValidation } from './schema-validations-93a9d504.js';
+import { c as create$3, a as create$6 } from './index.esm-0b6849c2.js';
+import { l as lineOneValidation, k as lineTwoValidation, m as cityValidation, n as stateValidation, q as postalValidation, u as identityNameValidation, v as identityTitleValidation, e as emailValidation, p as phoneValidation, x as dobValidation, y as ssnValidation } from './schema-validations-c7d4f9df.js';
 
 const addressSchema = (allowOptionalFields) => {
     const schema = create$3({

package/dist/esm/button-1886a33d.js

@@ -0,0 +1,18 @@
+import { h } from './index-29fcfdf5.js';
+import { f as buttonLoading, g as buttonPrimary, j as buttonSecondary } from './parts-186d437f.js';
+
+const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" },
+    h("span", { class: "visually-hidden" }, "Loading...")));
+
+const Button = (props, children) => {
+    const variantToButton = {
+        primary: buttonPrimary,
+        secondary: buttonSecondary,
+    };
+    const getCSSParts = () => {
+        return `${variantToButton[props.variant]} ${(props.isLoading) ? buttonLoading : ''}`;
+    };
+    return (h("button", Object.assign({ class: `btn btn-${props.variant}`, onClick: props.clickHandler, part: getCSSParts() }, props), props.isLoading ? ButtonSpinner() : children));
+};
+
+export { Button as B };

package/dist/esm/{Analytics-77dc80f3.js → check-pkg-version-c2078b31.js}

@@ -1,4 +1,4 @@
-import { p as packageJson } from './package-627f73c1.js';
+import { p as packageJson } from './package-84f77b11.js';
 import { c as config } from './config-27764a9d.js';
 import { A as Api } from './Api-391d00e2.js';
 
@@ -46,7 +46,7 @@ class JustifiAnalytics {
         };
     }
     trackCustomEvents() {
-        this.eventEmitters = ['submitted', 'error-event'];
+        this.eventEmitters = ['submit-event', 'error-event'];
         // for each event, add an event listener
         this.eventEmitters.forEach((eventName) => {
             // if this.componentInstance.addEventListener is a function add the event listener
@@ -75,4 +75,23 @@ class JustifiAnalytics {
     }
 }
 
-export { JustifiAnalytics as J };
+const latestVersion = async (packageName) => {
+    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
+    const json = await response.json();
+    return json.version;
+};
+const checkPkgVersion = async () => {
+    const version = packageJson.version;
+    const packageName = packageJson.name;
+    const latest = await latestVersion(packageName);
+    // remove rc from version and everything that comes after -rc
+    const latestNotRC = latest.replace(/-rc.*/, '');
+    // checkif there's a major version difference
+    const versionParts = version.split('.');
+    const latestParts = latest.split('.');
+    if (versionParts[0] !== latestParts[0]) {
+        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
+    }
+};
+
+export { JustifiAnalytics as J, checkPkgVersion as c };

package/dist/esm/{checkout.service-c1e44e0c.js → checkout.service-925ded8e.js}

@@ -2,7 +2,7 @@ import { c as config } from './config-27764a9d.js';
 import { A as Api } from './Api-391d00e2.js';
 import './Checkout-0b4086f8.js';
 import './Pagination-afc8f96d.js';
-import './Payment-2a868d0c.js';
+import './Payment-4f72d277.js';
 import './SubAccount-99a00594.js';
 
 class CheckoutService {