@justifi/webcomponents 5.7.6 → 6.0.0-rc.2

package/dist/cjs/justifi-checkout-summary_6.cjs.entry.js

@@ -0,0 +1,785 @@
+'use strict';
+
+var index = require('./index-dm_GlYlb.js');
+var parts = require('./parts-9jMf1erK.js');
+var utils = require('./utils-BaGF9XIe.js');
+var checkout_store = require('./checkout.store-Cn3Jj5gi.js');
+var styledHost = require('./styled-host-CqQYxX-w.js');
+require('./event-types-YOY5TKUN.js');
+var header1 = require('./header-1-DD41iNlG.js');
+var insuranceState = require('./insurance-state-Cyva9u6S.js');
+var header3 = require('./header-3-D9Wa0IfT.js');
+var checkPkgVersion = require('./check-pkg-version-BfmeLSXP.js');
+require('./config-state-5xZf-jax.js');
+require('./dinero-BwNN_k7x.js');
+var ComponentError = require('./ComponentError-D4OLnOkg.js');
+var Refund = require('./Refund-CqWNG8sx.js');
+require('./Pagination-Dediz133.js');
+require('./Business-DCRzZf0w.js');
+require('./Dispute-CruQTF6_.js');
+var utils$1 = require('./utils-DvUQQLmR.js');
+var checkout_service = require('./checkout.service-B0ZmvWwI.js');
+var paymentMethodOptionUtils = require('./payment-method-option-utils-WYHIHy-l.js');
+require('./index-Yd9aLenr.js');
+require('./package-CuNDvHTB.js');
+require('./Api-CPuq_15r.js');
+require('./helpers-B5OCqlIM.js');
+require('./state-options-CIT9xdTz.js');
+
+const Summary = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(styledHost.StyledHost, { key: '28a1a324b8cdf2dea0aafe91fbdd3679482e76f8' }, index.h("section", { key: 'e8ffe2fdd1592a0b762647fdab94ee5e21436a93' }, index.h("div", { key: '099fbfb449066290cdcd113b0de5f87334777a0e' }, index.h("div", { key: 'c78325957b4e00299366b8e9efe6fd6e86da3b97', part: parts.text }, checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.paymentDescription), index.h("div", { key: 'd077da888b03a34e540f66ebaa57502fe22be7c4' }, index.h("span", { key: 'd4f7ddd24e10302222679a9f73c3b5ed305267a7', part: parts.text }, "Total"), "\u00A0", index.h("span", { key: '1f5d7b6b0cce64eea04879e7767ff87ce5a64069', part: parts.text }, utils.formatCurrency(+(checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.totalAmount))))))));
+    }
+};
+
+const Header = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.levels = {
+            h1: header1.Header1,
+            h2: insuranceState.Header2,
+            h3: header3.Header3,
+        };
+        this.level = 'h1';
+    }
+    render() {
+        const HeaderComponent = this.levels[this.level];
+        return (index.h(styledHost.StyledHost, { key: '73104ea086f8a9948e69f86451adf19e0f39fb32' }, index.h(HeaderComponent, { key: 'a8582109634299a24e2a9b3c7181c6bba511fde7', text: this.text, class: this.class })));
+    }
+};
+
+const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchCheckout(authToken, checkoutId);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = utils$1.getErrorMessage(response.error);
+            const code = utils$1.getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = utils$1.getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentError.ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.complete(authToken, checkoutId, payment);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = utils$1.getErrorMessage(response.error);
+            const code = utils$1.getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = utils$1.getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentError.ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+
+const ModularCheckout = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errorEvent = index.createEvent(this, "error-event");
+        this.submitEvent = index.createEvent(this, "submit-event");
+        this.paymentMethodChangedEvent = index.createEvent(this, "payment-method-changed");
+        this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, error } = event.detail;
+            if (success && token) {
+                this.applePayToken = token;
+                // Complete the checkout with Apple Pay token
+                this.submitCheckoutWithApplePay();
+            }
+            else {
+                console.error('Apple Pay completed but failed:', error);
+                this.errorEvent.emit({
+                    message: (error === null || error === void 0 ? void 0 : error.message) || 'Apple Pay payment failed',
+                    errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleApplePayError = (event) => {
+            const { error } = event.detail;
+            console.error('Apple Pay error:', error);
+            this.errorEvent.emit({
+                message: error || 'Apple Pay error occurred',
+                errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+        };
+        this.handleApplePayCancelled = () => {
+            console.log('Apple Pay cancelled by user');
+            // Reset the token if cancelled
+            this.applePayToken = undefined;
+        };
+    }
+    savePaymentMethodChanged(newValue) {
+        checkout_store.checkoutStore.savePaymentMethod = newValue;
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
+        });
+        this.observer.observe(this.hostEl, {
+            childList: true,
+            subtree: true
+        });
+        checkout_store.checkoutStore.checkoutId = this.checkoutId;
+        const config = {
+            authToken: this.authToken,
+            checkoutId: this.checkoutId,
+            service: new checkout_service.CheckoutService()
+        };
+        this.getCheckout = makeGetCheckout(config);
+        this.completeCheckout = makeCheckoutComplete(config);
+        checkout_store.onChange('selectedPaymentMethod', (newValue) => {
+            this.paymentMethodChangedEvent.emit(newValue);
+        });
+    }
+    componentWillLoad() {
+        if (!this.authToken || !this.checkoutId) {
+            this.errorEvent.emit({
+                message: ComponentError.ComponentErrorMessages.NOT_AUTHENTICATED,
+                errorCode: ComponentError.ComponentErrorCodes.NOT_AUTHENTICATED,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        this.analytics = new checkPkgVersion.JustifiAnalytics(this);
+        checkPkgVersion.checkPkgVersion();
+        checkout_store.checkoutStore.authToken = this.authToken;
+        checkout_store.checkoutStore.savePaymentMethod = this.savePaymentMethod;
+        this.fetchCheckout();
+        // Refresh the checkout data when insurance values actually change (not on initial load)
+        insuranceState.insuranceValuesOn('set', (key) => {
+            const value = insuranceState.insuranceValues[key];
+            if (value !== undefined && insuranceState.hasInsuranceValueChanged(key, value)) {
+                this.fetchCheckout();
+            }
+        });
+    }
+    componentDidLoad() {
+        this.queryFormRefs();
+        this.setupApplePayListeners();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
+    }
+    fetchCheckout() {
+        if (this.getCheckout) {
+            this.getCheckout({
+                onSuccess: ({ checkout }) => {
+                    if (checkout.status === Refund.ICheckoutStatus.completed) {
+                        this.errorEvent.emit({
+                            message: ComponentError.ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
+                            errorCode: ComponentError.ComponentErrorCodes.CHECKOUT_ALREADY_COMPLETED,
+                            severity: ComponentError.ComponentErrorSeverity.ERROR,
+                        });
+                        return;
+                    }
+                    else if (checkout.status === Refund.ICheckoutStatus.expired) {
+                        this.errorEvent.emit({
+                            message: ComponentError.ComponentErrorMessages.CHECKOUT_EXPIRED,
+                            errorCode: ComponentError.ComponentErrorCodes.CHECKOUT_EXPIRED,
+                            severity: ComponentError.ComponentErrorSeverity.ERROR,
+                        });
+                        return;
+                    }
+                    this.updateStore(checkout);
+                },
+                onError: (error) => {
+                    this.errorEvent.emit({
+                        message: error.message,
+                        errorCode: ComponentError.ComponentErrorCodes.FETCH_ERROR,
+                        severity: ComponentError.ComponentErrorSeverity.ERROR,
+                    });
+                }
+            });
+        }
+    }
+    updateStore(checkout) {
+        var _a, _b, _c, _d;
+        checkout_store.checkoutStore.accountId = checkout.account_id;
+        checkout_store.checkoutStore.paymentMethods = checkout.payment_methods;
+        checkout_store.checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
+        checkout_store.checkoutStore.paymentDescription = checkout.payment_description;
+        checkout_store.checkoutStore.totalAmount = checkout.total_amount;
+        checkout_store.checkoutStore.paymentAmount = checkout.payment_amount;
+        checkout_store.checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
+        checkout_store.checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
+        checkout_store.checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
+        checkout_store.checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
+        checkout_store.checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
+    }
+    queryFormRefs() {
+        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
+        this.billingFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full');
+        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
+        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+        this.applePayRef = this.hostEl.querySelector('justifi-apple-pay');
+    }
+    setupApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.addEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.addEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.addEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    removeApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.removeEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.removeEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    async submitCheckoutWithApplePay() {
+        if (!this.applePayToken) {
+            this.errorEvent.emit({
+                message: 'No Apple Pay token available',
+                errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        const payment = {
+            payment_mode: 'apple_pay',
+            payment_token: this.applePayToken,
+        };
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: 'Apple Pay checkout completed successfully',
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentError.ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
+    }
+    async tokenizePaymentMethod(tokenizeArgs) {
+        var _a, _b, _c;
+        const billingInfoValues = (_b = await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
+        const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
+        const paymentMethodMetadata = Object.assign({ accountId: checkout_store.checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
+        if (checkout_store.checkoutStore.savePaymentMethod) {
+            paymentMethodMetadata.payment_method_group_id = checkout_store.checkoutStore.paymentMethodGroupId;
+        }
+        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+            clientId: this.authToken,
+            paymentMethodMetadata,
+            account: checkout_store.checkoutStore.accountId,
+        });
+    }
+    async getPaymentMethod(submitCheckoutArgs) {
+        // If Apple Pay token is available, return a placeholder since we handle it differently
+        if (this.applePayToken) {
+            return 'apple_pay_token';
+        }
+        // If we have a payment token from the store (set by tokenize-payment-method), use it
+        if (checkout_store.checkoutStore.paymentToken) {
+            return checkout_store.checkoutStore.paymentToken;
+        }
+        // Fallback to the original tokenization logic for backward compatibility
+        if (!this.paymentMethodFormRef) {
+            return checkout_store.checkoutStore.selectedPaymentMethod;
+        }
+        const { error, id: token } = await this.tokenizePaymentMethod(submitCheckoutArgs);
+        if (error) {
+            this.errorEvent.emit({
+                errorCode: error.code,
+                message: error.message,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+            return undefined;
+        }
+        return token;
+    }
+    async validate() {
+        var _a, _b;
+        // If Apple Pay token is available, validation is already complete
+        if (this.applePayToken) {
+            return true;
+        }
+        const promises = [
+            (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
+            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate()
+        ];
+        if (this.insuranceFormRef) {
+            promises.push(this.insuranceFormRef.validate());
+        }
+        const validationResults = await Promise.all(promises);
+        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
+    }
+    async submitCheckout(submitCheckoutArgs) {
+        var _a;
+        // If Apple Pay token is available, use Apple Pay flow
+        if (this.applePayToken) {
+            await this.submitCheckoutWithApplePay();
+            return;
+        }
+        const isValid = await this.validate();
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: 'Please fill in all required fields.',
+                errorCode: ComponentError.ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        let payment;
+        if (checkout_store.checkoutStore.selectedPaymentMethod === 'sezzle') {
+            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
+            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
+            if (sezzleResult.error) {
+                this.errorEvent.emit({
+                    message: sezzleResult.error.message,
+                    errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+                payment = {
+                    payment_mode: 'bnpl',
+                    payment_token: undefined,
+                };
+            }
+        }
+        else {
+            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
+            if (!paymentMethod) {
+                this.errorEvent.emit({
+                    message: 'Payment method tokenization failed.',
+                    errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            payment = {
+                payment_mode: 'ecom',
+                payment_token: paymentMethod,
+            };
+        }
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: 'Checkout completed successfully',
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentError.ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
+    }
+    async setSelectedPaymentMethod(paymentMethodId) {
+        checkout_store.checkoutStore.selectedPaymentMethod = paymentMethodId;
+    }
+    render() {
+        return (index.h(index.Host, { key: '1b0c613494dde43962dc963618d5a81c4423b218' }));
+    }
+    get hostEl() { return index.getElement(this); }
+    static get watchers() { return {
+        "savePaymentMethod": ["savePaymentMethodChanged"]
+    }; }
+};
+
+const SavedPaymentMethods = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
+            e.preventDefault();
+            checkout_store.checkoutStore.selectedPaymentMethod = paymentMethodId;
+        };
+        this.isAllowedPaymentMethod = (paymentMethod) => {
+            if (paymentMethod.type === 'card' && checkout_store.checkoutStore.disableCreditCard) {
+                return false;
+            }
+            if (paymentMethod.type === 'bank_account' && checkout_store.checkoutStore.disableBankAccount) {
+                return false;
+            }
+            return true;
+        };
+    }
+    componentWillLoad() {
+        if (!checkout_store.checkoutStore.paymentMethods.length) {
+            console.warn('No saved payment methods available.');
+        }
+        if (checkout_store.checkoutStore.disablePaymentMethodGroup) {
+            console.warn('Payment method group is disabled.');
+        }
+    }
+    render() {
+        if (checkout_store.checkoutStore.disablePaymentMethodGroup) {
+            return null;
+        }
+        return (index.h(styledHost.StyledHost, null, index.h("div", { class: "saved-payment-methods" }, checkout_store.checkoutStore.paymentMethods.length ? checkout_store.checkoutStore.paymentMethods
+            .filter(this.isAllowedPaymentMethod)
+            .map((paymentMethod) => (index.h("div", { class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, index.h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkout_store.checkoutStore.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${paymentMethodOptionUtils.CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
+    }
+};
+
+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");
+        this.paymentMethodOptionId = 'sezzle';
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            checkout_store.checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
+        };
+        this.initializeSezzleCheckout = () => {
+            let resolveSezzlePromise;
+            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
+            const amount = Number(checkout_store.checkoutStore.paymentAmount);
+            const Checkout = window.Checkout;
+            const checkout = new Checkout({
+                mode: 'popup',
+                publicKey: checkout_store.checkoutStore.bnplProviderClientId,
+                apiMode: checkout_store.checkoutStore.bnplProviderMode,
+                apiVersion: checkout_store.checkoutStore.bnplProviderApiVersion,
+            });
+            checkout.sezzleButtonElement = this.sezzleButtonRef;
+            checkout.init({
+                onClick: function (event) {
+                    event.preventDefault();
+                    checkout.startCheckout({
+                        checkout_url: checkout_store.checkoutStore.bnplProviderCheckoutUrl,
+                    });
+                },
+                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() {
+        if (!this.scriptRef)
+            return;
+        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;
+        if (!checkout_store.checkoutStore.bnplEnabled || checkout_store.checkoutStore.disableBnpl) {
+            console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
+            return null;
+        }
+        return (index.h(styledHost.StyledHost, { class: "payment-method" }, index.h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", { class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkout_store.checkoutStore.selectedPaymentMethod === this.paymentMethodOptionId, 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, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", index.h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", index.h("span", { class: "fw-bold" }, utils.formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
+    }
+};
+
+// Constants
+const PAYMENT_METHOD_TYPE_LABELS = {
+    [Refund.PaymentMethodTypes.bankAccount]: 'New bank account',
+    [Refund.PaymentMethodTypes.card]: 'New credit or debit card',
+};
+const ERROR_MESSAGES = {
+    AUTH_TOKEN_REQUIRED: 'Auth token is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
+    ACCOUNT_ID_REQUIRED: 'Account ID is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
+    FORM_NOT_READY: 'Payment form not ready',
+    VALIDATION_ERROR: 'Validation error',
+};
+const TokenizePaymentMethod = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errorEvent = index.createEvent(this, "error-event");
+        this.submitEvent = index.createEvent(this, "submit-event");
+        this.isLoading = false;
+        this.computedHideSubmitButton = false;
+        this.submitButtonText = 'Submit';
+    }
+    componentWillLoad() {
+        checkPkgVersion.checkPkgVersion();
+        this.analytics = new checkPkgVersion.JustifiAnalytics(this);
+        this.validateRequiredProps();
+    }
+    connectedCallback() {
+        this.setDefaultSelectedPaymentMethod();
+        this.setComputedHideSubmitButton();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    paymentMethodsChanged() {
+        this.setDefaultSelectedPaymentMethod();
+    }
+    handleRadioClick(event) {
+        this.selectedPaymentMethodId = event.detail;
+    }
+    async fillBillingForm(fields) {
+        var _a;
+        (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
+    }
+    async tokenizePaymentMethod(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.isLoading = true;
+        try {
+            const validation = await this.validate();
+            if (!validation.isValid) {
+                this.errorEvent.emit({
+                    errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: ERROR_MESSAGES.VALIDATION_ERROR,
+                });
+                this.isLoading = false;
+                return;
+            }
+            const tokenizeResponse = await this.resolvePaymentMethod({ isValid: true });
+            if (tokenizeResponse.error) {
+                this.emitError({
+                    errorCode: tokenizeResponse.error.code,
+                    message: tokenizeResponse.error.message,
+                });
+            }
+            this.submitEvent.emit({ response: tokenizeResponse });
+            return tokenizeResponse;
+        }
+        catch (error) {
+            const errorResponse = this.createErrorResponse(ComponentError.ComponentErrorCodes.TOKENIZE_ERROR, error.message);
+            this.emitError({
+                errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                message: error.message,
+            });
+            this.submitEvent.emit({ response: errorResponse });
+            return errorResponse;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async validate() {
+        if (!this.areFormsReady()) {
+            return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
+        }
+        const [billingValidation, paymentMethodValidation] = await Promise.all([
+            this.billingFormRef.validate(),
+            this.paymentMethodFormRef.validate(),
+        ]);
+        return {
+            isValid: billingValidation.isValid && paymentMethodValidation.isValid,
+            errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
+        };
+    }
+    validateRequiredProps() {
+        if (!this.authToken && !checkout_store.checkoutStore.authToken) {
+            this.emitError({
+                errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                message: ERROR_MESSAGES.AUTH_TOKEN_REQUIRED,
+            });
+        }
+        if (!this.accountId && !checkout_store.checkoutStore.accountId) {
+            this.emitError({
+                errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                message: ERROR_MESSAGES.ACCOUNT_ID_REQUIRED,
+            });
+        }
+    }
+    setDefaultSelectedPaymentMethod() {
+        if (this.selectedPaymentMethodId) {
+            return;
+        }
+        if (!this.disableCreditCard) {
+            this.selectedPaymentMethodId = Refund.PaymentMethodTypes.card;
+        }
+        else if (!this.disableBankAccount) {
+            this.selectedPaymentMethodId = Refund.PaymentMethodTypes.bankAccount;
+        }
+    }
+    setComputedHideSubmitButton() {
+        // If hideSubmitButton prop is explicitly set, use that value
+        if (this.hideSubmitButton !== undefined) {
+            this.computedHideSubmitButton = this.hideSubmitButton;
+            return;
+        }
+        // Otherwise, auto-detect if component is slotted within modular-checkout
+        const isWithinModularCheckout = this.isSlottedWithinModularCheckout();
+        this.computedHideSubmitButton = isWithinModularCheckout;
+    }
+    isSlottedWithinModularCheckout() {
+        var _a;
+        let parent = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement;
+        while (parent) {
+            if (parent.tagName === 'JUSTIFI-MODULAR-CHECKOUT') {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    get availablePaymentMethods() {
+        const methods = [];
+        if (!this.disableCreditCard) {
+            methods.push(Refund.PaymentMethodTypes.card);
+        }
+        if (!this.disableBankAccount) {
+            methods.push(Refund.PaymentMethodTypes.bankAccount);
+        }
+        return methods;
+    }
+    areFormsReady() {
+        return !!(this.billingFormRef && this.paymentMethodFormRef);
+    }
+    emitError(errorData) {
+        this.errorEvent.emit(Object.assign(Object.assign({}, errorData), { severity: ComponentError.ComponentErrorSeverity.ERROR }));
+    }
+    createErrorResponse(code, message) {
+        return {
+            error: {
+                code: code,
+                message,
+                decline_code: undefined,
+            },
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!this.areFormsReady()) {
+            return this.createErrorResponse('form_not_ready', ERROR_MESSAGES.FORM_NOT_READY);
+        }
+        try {
+            const validation = await this.validate();
+            if (!validation.isValid || !insuranceValidation.isValid) {
+                const errorMessage = Object.values(validation.errors)[0] || ERROR_MESSAGES.VALIDATION_ERROR;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message: String(errorMessage),
+                        decline_code: undefined,
+                    },
+                };
+            }
+            return await this.performTokenization();
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async performTokenization() {
+        var _a, _b;
+        const tokenizeResponse = await this.tokenize();
+        if (tokenizeResponse.error) {
+            return { error: tokenizeResponse.error };
+        }
+        const tokenizeResponseData = tokenizeResponse.data;
+        return {
+            token: ((_a = tokenizeResponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeResponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
+            data: tokenizeResponseData,
+        };
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const config = {
+                clientId: this.authToken || checkout_store.checkoutStore.authToken,
+                account: this.accountId || checkout_store.checkoutStore.accountId,
+                paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
+            };
+            return await this.paymentMethodFormRef.tokenize(config);
+        }
+        catch (error) {
+            return error;
+        }
+    }
+    buildPaymentMethodMetadata(billingFormFieldValues) {
+        return this.shouldSavePaymentMethod
+            ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupID }) : Object.assign({}, billingFormFieldValues);
+    }
+    get paymentMethodGroupID() {
+        return this.paymentMethodGroupId || checkout_store.checkoutStore.paymentMethodGroupId;
+    }
+    get shouldSavePaymentMethod() {
+        return !!(this.paymentMethodGroupId || checkout_store.checkoutStore.savePaymentMethod);
+    }
+    get shouldHideRadioInput() {
+        return this.disableCreditCard || this.disableBankAccount;
+    }
+    renderPaymentMethodOption(paymentMethodType) {
+        const isSelected = this.selectedPaymentMethodId === paymentMethodType;
+        return (index.h("div", { class: "payment-method" }, index.h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
+    }
+    renderSelectedPaymentMethodForm(paymentMethodId) {
+        return (index.h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), index.h("div", { class: "mt-4" }, index.h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), index.h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
+    }
+    renderPaymentMethodForm(paymentMethodId) {
+        return paymentMethodId === Refund.PaymentMethodTypes.card ? (index.h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (index.h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+    }
+    render() {
+        return (index.h(styledHost.StyledHost, { key: '47fb6432264a7009d1df82cac73c3283be5a1514' }, index.h("form", { key: 'b283f414e00296cbf08960a669fbd0f91a2cb554' }, index.h("fieldset", { key: 'bfaddf226f5ec365ceb22185804f29d46f9f59c7' }, index.h("div", { key: 'b828e27ea63fa96dd7f38ef8d6038e3a6d1f234c', class: "row gy-3" }, index.h("div", { key: '1b34dba8e5d3a5426f002e4b2eace7dbc32b80e8', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: 'd62cdda4a73c39ce53936717c5c22779dd9c3c48', class: "col-12" }, index.h("justifi-button", { key: '24bbd9e275990e59d0549b07725111aa0fffa8c4', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "disableCreditCard": ["paymentMethodsChanged"],
+        "disableBankAccount": ["paymentMethodsChanged"]
+    }; }
+};
+
+exports.justifi_checkout_summary = Summary;
+exports.justifi_header = Header;
+exports.justifi_modular_checkout = ModularCheckout;
+exports.justifi_saved_payment_methods = SavedPaymentMethods;
+exports.justifi_sezzle_payment_method = SezzlePaymentMethod;
+exports.justifi_tokenize_payment_method = TokenizePaymentMethod;