@justifi/webcomponents 4.23.0 → 5.0.0-rc-1

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

@@ -0,0 +1,493 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5b9a3b5f.js');
+const iframeInputStylesState = require('./iframe-input-styles-state-d0de0b24.js');
+const parts = require('./parts-811ddb9c.js');
+const index_esm = require('./index.esm-a397536a.js');
+const schemaValidations = require('./schema-validations-0be8068a.js');
+const stateOptions = require('./state-options-4fbcb48a.js');
+const utils = require('./utils-bc03ca40.js');
+const config = require('./config-05767cba.js');
+const header3 = require('./header-3-75e50713.js');
+const Payment = require('./Payment-d074b246.js');
+const utils$1 = require('./utils-a21b7453.js');
+require('./index-d2d0b181.js');
+require('./business-form-options-4bcb8943.js');
+require('./Business-cfd6a2dd.js');
+require('./helpers-602962eb.js');
+require('./Dispute-eb6bad54.js');
+
+const BankAccountForm = class {
+    constructor(hostRef) {
+        index.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 (index.h(index.Host, { key: 'd0f0426565fedc6697eb46e6bc8d03d31eee9c37' }, index.h("div", { key: '6e792d5cba9421d7d106805d0e0e070ef5b116f9', class: "container-fluid p-0" }, index.h("div", { key: '89def9b854a7dc9a2e2fbb62d70bc6eaccfa6b0f', class: "row mb-3" }, index.h("iframe-input", { key: '2c0392ed840edb2364922c0d523f509ea84b3cd3', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${"https://components.justifi.ai/v1"}/accountNumber` })), index.h("div", { key: '6dbe7911ab8693a4850a60e2d86f4539382a341c', class: "row" }, index.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) {
+        index.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 (index.h(index.Host, { key: 'd667f365a95a2251fadffce158033ca8fcbc5723', class: "container-fluid p-0" }, index.h("div", { key: '43d8e15de893154c96b49ea1917046120daa8b2c', class: "mb-3" }, index.h("iframe-input", { key: 'c342a50a3194511edfbe6c1f1033bf47b743ddd6', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${"https://components.justifi.ai/v1"}/cardNumber` })), index.h("div", { key: '2fa70e85071ec6fe4525039de6215026795f71f4', class: "row" }, index.h("div", { key: 'e7dba59f040258e556664ccf84549edda8a1dd8d', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '0c2c63ee318b0fc61ff704ffe02160aee252d281', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${"https://components.justifi.ai/v1"}/expirationMonth` })), index.h("div", { key: 'e211c9bc9cb15ea9571af7d965fcb1d6e4c5669d', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'd783cb0d28f1d08826e773efc14c2aa871905a83', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${"https://components.justifi.ai/v1"}/expirationYear` })), index.h("div", { key: '83af611f578e7db1984713047708e725c9c1c7b5', class: "col-4 align-content-end" }, index.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) {
+        index.registerInstance(this, hostRef);
+        this.isFocused = false;
+        this.errorText = '';
+    }
+    async componentDidLoad() {
+        const fontStyles = await this.getBaseFontStyles();
+        iframeInputStylesState.iframeInputStylesSet('fontStyles', fontStyles);
+        const focusedStyles = await this.getFocusedStyles();
+        iframeInputStylesState.iframeInputStylesSet('focused', focusedStyles);
+        const focusedAndInvalidStyles = await this.getFocusedAndInvalidStyles();
+        iframeInputStylesState.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 parts.inputInvalidAndFocused;
+        }
+        if (this.errorText) {
+            return parts.inputInvalid;
+        }
+        if (this.isFocused) {
+            return parts.inputFocused;
+        }
+        return parts.input;
+    }
+    render() {
+        return (index.h(index.Host, { key: '61734f69c30d37c98e3896c8407225dbe49fe3a2' }, index.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 = index_esm.create$3({
+    name: schemaValidations.identityNameValidation.required('Enter full name'),
+    address_line1: schemaValidations.lineOneValidation.required('Enter street address'),
+    address_line2: schemaValidations.lineTwoValidation.nullable(),
+    address_city: schemaValidations.cityValidation.required('Enter city'),
+    address_state: schemaValidations.stateValidation.required('Select state'),
+    address_postal_code: schemaValidations.postalValidation.required('Enter postal code'),
+});
+
+const BillingForm = class {
+    constructor(hostRef) {
+        index.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 index_esm.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 (index.h(index.Host, { key: 'b3bb548839b39a87ad330b9048426baff317cae0' }, index.h("form", { key: '32e999825e5094e8e5399d46f67b67186f18d7b2' }, index.h("fieldset", { key: 'c8f13e2d392c45804bb51907a21ff80cb1148fd3' }, this.legend && index.h("legend", { key: 'c4117087a3391f8c28815069d832d6133459b250' }, this.legend), index.h("div", { key: '61d9de519f93d42bab36670108a6b923e30cff7f', class: "row gy-3" }, index.h("div", { key: '4753e297cbab92db6f073e9679ea9f3e9dacf432', class: "col-12" }, index.h("form-control-text", { key: '1f366def4cd8449cc242eb3bd71952a1548def08', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'c7efc6968d6f776be84ac16b56a785965a81501b', class: "col-12" }, index.h("form-control-text", { key: '789ca132aabfe42381ce55ec343494b9ac766e73', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: 'f750e3800a361e78c58a31091b8d07437fe7fdcf', class: "col-12" }, index.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 })), index.h("div", { key: '9868c2a9bcbed8c65ac8ca8d89ea2102fd0dd1c6', class: "col-12" }, index.h("form-control-text", { key: 'a637775b91a89fa32c54c97e6a97ec18b2e69024', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: '274656a1a879790c99a684da3aa6070f473e2d0b', class: "col-12" }, index.h("form-control-select", { key: '5fca9ff62f2e2f26fc936474133dbdf24183e86d', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: 'e24b2e9961e1a464a1d99fa4982814e7d43c5a79', class: "col-12" }, index.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: utils.numberOnlyHandler })))))));
+    }
+};
+
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
+const NewPaymentMethod = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = index.createEvent(this, "paymentMethodOptionSelected", 7);
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.iframeOrigin = config.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 (index.h("div", { class: "mt-4 pb-4 border-bottom" }, index.h("hidden-input", null), index.h("div", { class: "mb-4" }, ((_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id) === 'card' ? (index.h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (index.h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), index.h("div", { part: parts.billingForm }, index.h(header3.Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), index.h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })), index.h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+    }
+    render() {
+        var _a, _b;
+        return (index.h(index.Host, { key: '4b6e52ca95845aa1c9163f4d3eafbfc98ca51deb', class: "payment-method" }, index.h("div", { key: 'd4aea7115ff71564a4d1e87a468174a29a040406', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.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 = utils$1.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) {
+        index.registerInstance(this, hostRef);
+        this.toggleCreatingNewPaymentMethod = index.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.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 !== Payment.PaymentMethodTypes.card) &&
+                (this.showAch || paymentMethod.type !== Payment.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: Payment.PaymentMethodTypes.sezzle }));
+        }
+        if (this.showCard) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: Payment.PaymentMethodTypes.card }));
+        }
+        if (this.showAch) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: Payment.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 (index.h(index.Host, { key: '3ab3caf94332163f031ecebe101d45c35e1416bd' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+            const newCard = paymentMethodOption.id === Payment.PaymentMethodTypes.card;
+            const newBankAccount = paymentMethodOption.id === Payment.PaymentMethodTypes.bankAccount;
+            const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
+            const sezzle = paymentMethodOption.id === Payment.PaymentMethodTypes.sezzle;
+            if (newCard || newBankAccount) {
+                return (index.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 (index.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 (index.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) {
+        index.registerInstance(this, hostRef);
+        this.checkboxChanged = index.createEvent(this, "checkboxChanged", 7);
+        this.isChecked = false;
+    }
+    handleCheckboxChange(_name, value) {
+        this.isChecked = value;
+        this.checkboxChanged.emit(this.isChecked);
+    }
+    render() {
+        return (index.h("div", { key: '4b0ac5e02aa02214bf8ddd574db56eb9508b0607', class: "mt-4 form-check" }, index.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) {
+        index.registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = index.createEvent(this, "paymentMethodOptionSelected", 7);
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.iframeOrigin = config.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 (index.h(index.Host, { key: '8e5a11a58cf828356df001461b6bb3163521f1ed', class: "payment-method" }, index.h("div", { key: 'c20a8a3dcea1f885b94c4829b85be8d6f401ad42', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.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 = (index.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) {
+        index.registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = index.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.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 (index.h(index.Host, { key: 'bbe1a2f4a2418d8c9e946e15567f7df89ac06084', class: "payment-method" }, index.h("script", { key: 'a254fbb032a531a889d81297053be07001262706', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", { key: '691439a9541b69f59fac8ed744d633a7cba69fbd', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: '4f03055cf993502ff1999abfbd14aa5e6977b811', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: index.h("div", null, index.h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (index.h("small", null, index.h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", index.h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", index.h("span", { class: "fw-bold" }, utils$1.formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
+    }
+};
+
+exports.bank_account_form = BankAccountForm;
+exports.card_form = CardForm;
+exports.hidden_input = HiddenInput;
+exports.justifi_billing_form = BillingForm;
+exports.justifi_new_payment_method = NewPaymentMethod;
+exports.justifi_payment_method_options = PaymentMethodOptions;
+exports.justifi_save_new_payment_method = SaveNewPaymentMethod;
+exports.justifi_saved_payment_method = SavedPaymentMethod;
+exports.justifi_sezzle_payment_method = SezzlePaymentMethod;

package/dist/cjs/{business-additional-questions-schema-0cddd038.js → business-additional-questions-schema-caa23e95.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index_esm = require('./index.esm-97cf6825.js');
-const schemaValidations = require('./schema-validations-e8a17401.js');
+const index_esm = require('./index.esm-a397536a.js');
+const schemaValidations = require('./schema-validations-0be8068a.js');
 
 const businessCoreInfoSchema = (allowOptionalFields) => {
     const schema = index_esm.create$3({

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

@@ -2,9 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
-const utils = require('./utils-189dc30d.js');
-const styledHost = require('./styled-host-1adf46c3.js');
+const index = require('./index-5b9a3b5f.js');
+const utils = require('./utils-fc17191b.js');
+const styledHost = require('./styled-host-94309bab.js');
+const skeleton = require('./skeleton-5ca03840.js');
+require('./parts-811ddb9c.js');
+
+const BusinessDetailsLoading = () => {
+    const Block = () => (index.h("div", { class: "mt-5" },
+        index.h(skeleton.Skeleton, { width: "40%", height: "1.5rem" }),
+        index.h("hr", null),
+        index.h("div", { class: "row g-3" },
+            index.h("div", { class: "col-12 col-md-6" },
+                index.h(skeleton.Skeleton, null),
+                index.h(skeleton.Skeleton, null),
+                index.h(skeleton.Skeleton, null)),
+            index.h("div", { class: "col-12 col-md-6" },
+                index.h(skeleton.Skeleton, null),
+                index.h(skeleton.Skeleton, null),
+                index.h(skeleton.Skeleton, null)))));
+    return (index.h(index.Fragment, null,
+        index.h(Block, null),
+        index.h(Block, null),
+        index.h(Block, null),
+        index.h(Block, null)));
+};
 
 var RENDER_STATES;
 (function (RENDER_STATES) {
@@ -46,7 +68,7 @@ const BusinessDetailsCore = class {
     }
     render() {
         if (this.renderState === RENDER_STATES.LOADING) {
-            return index.h(styledHost.StyledHost, null, utils.LoadingState());
+            return (index.h(styledHost.StyledHost, null, index.h(BusinessDetailsLoading, null)));
         }
         if (this.renderState === RENDER_STATES.ERROR) {
             return index.h(styledHost.StyledHost, null, utils.ErrorState(this.errorMessage));

package/dist/cjs/{business-form-options-5db0bd5e.js → business-form-options-4bcb8943.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const Business = require('./Business-aa799fec.js');
+const Business = require('./Business-cfd6a2dd.js');
 
 const businessClassificationOptions = [
     {

package/dist/cjs/{business-identity-schema-f5a3b008.js → business-identity-schema-0c537067.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index_esm = require('./index.esm-97cf6825.js');
-const schemaValidations = require('./schema-validations-e8a17401.js');
+const index_esm = require('./index.esm-a397536a.js');
+const schemaValidations = require('./schema-validations-0be8068a.js');
 
 const addressSchema = (allowOptionalFields) => {
     const schema = index_esm.create$3({

package/dist/cjs/button-94bdc1f0.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+
+const ButtonSpinner = () => (index.h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" },
+    index.h("span", { class: "visually-hidden" }, "Loading...")));
+
+const Button = (props, children) => {
+    const variantToButton = {
+        primary: parts.buttonPrimary,
+        secondary: parts.buttonSecondary,
+    };
+    const getCSSParts = () => {
+        return `${variantToButton[props.variant]} ${(props.isLoading) ? parts.buttonLoading : ''}`;
+    };
+    return (index.h("button", Object.assign({ class: `btn btn-${props.variant}`, onClick: props.clickHandler, part: getCSSParts() }, props), props.isLoading ? ButtonSpinner() : children));
+};
+
+exports.Button = Button;

package/dist/cjs/{Analytics-25d3d168.js → check-pkg-version-23c816dd.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const _package = require('./package-bc606eae.js');
+const _package = require('./package-1a3b3cdf.js');
 const config = require('./config-05767cba.js');
 const Api = require('./Api-f5280a80.js');
 
@@ -48,7 +48,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
@@ -77,4 +77,24 @@ class JustifiAnalytics {
     }
 }
 
+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 = _package.packageJson.version;
+    const packageName = _package.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.`);
+    }
+};
+
 exports.JustifiAnalytics = JustifiAnalytics;
+exports.checkPkgVersion = checkPkgVersion;

package/dist/cjs/{checkout.service-aae1996c.js → checkout.service-9891a349.js}

@@ -4,7 +4,7 @@ const config = require('./config-05767cba.js');
 const Api = require('./Api-f5280a80.js');
 require('./Checkout-a528241d.js');
 require('./Pagination-0da8f095.js');
-require('./Payment-87b47c43.js');
+require('./Payment-d074b246.js');
 require('./SubAccount-fda5ec5b.js');
 
 class CheckoutService {