@justifi/webcomponents 5.7.3-rc-01 → 5.7.3-rc-02

package/dist/collection/components/business-forms/schemas/schema-validations.js

@@ -1,8 +1,7 @@
-import { mixed, string } from "yup";
+import { string } from "yup";
 import StateOptions from "../../../utils/state-options";
 import { businessServiceReceivedOptions, recurringPaymentsOptions, seasonalBusinessOptions, bankAccountTypeOptions, businessClassificationOptions, } from "../utils/business-form-options";
 import { numbersOnlyRegex, phoneRegex, poBoxRegex, ssnRegex, transformEmptyString, urlRegex, validateRoutingNumber, } from "./schema-helpers";
-import { EntityDocumentType } from "../../../api/Document";
 // Common Validations
 export const emailValidation = string()
     .email('Enter valid email')
@@ -161,48 +160,3 @@ export const routingNumberValidation = string()
     return validateRoutingNumber(value);
 })
     .transform(transformEmptyString);
-// Document Upload Validations
-const documentUploadValidation = mixed();
-export const ss4Validation = documentUploadValidation;
-export const governmentIdValidation = documentUploadValidation;
-export const otherDocumentValidation = documentUploadValidation;
-export const voidedCheckValidation = (documents, allowOptionalFields) => {
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.voidedCheck);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};
-export const bankStatementValidation = (documents, allowOptionalFields) => {
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.bankStatement);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};
-export const balanceSheetValidation = (volume, documents, allowOptionalFields) => {
-    const vol = parseInt(volume);
-    const balanceSheetRequiredAmount = 1000000;
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.balanceSheet);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else if (vol >= balanceSheetRequiredAmount && !allowOptionalFields) {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};
-export const profitAndLossStatementValidation = (volume, documents, allowOptionalFields) => {
-    const vol = parseInt(volume);
-    const profitLossRequiredAmount = 1000000;
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.profitAndLossStatement);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else if (vol >= profitLossRequiredAmount && !allowOptionalFields) {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -31,10 +31,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'cdddf967e7142731f3b5aef31bfc3d004ce97733' }, h(BankAccountFormSkeleton, { key: '5eafa58bd31bbbd5ff5ca90a036fc696f7bd05fb', isReady: this.isReady }), h("div", { key: 'c8486e0337df9a61bd1979014f3de53eef22b071', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '1b0156c264d4eddde8a97f78fefb70bd0c997aa0' }, h(BankAccountFormSkeleton, { key: '34cc2e35f9f3e5d88e03343db3b2a1fcf5d1b9e2', isReady: this.isReady }), h("div", { key: '472a483b7061174762ff3413f1da3af8952e100d', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '3db2146e4d770c024efab6e777dbfa4ace26f23a', class: "row mb-3" }, h("iframe-input", { key: '5f9da4873119c1a1e771c7663b98e283766a37a1', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '7ed20c940afd5ffc4348e4102a4cfd351d8e2198', class: "row" }, h("iframe-input", { key: '0667de245764f1d9181682beb674c4a376447a68', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: '975830a13c6f33fe89c1a40ac6d78c1a2342154d', class: "row mb-3" }, h("iframe-input", { key: '0c97e7e9fcc461ff67d572d6628639eb71368502', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '0648b42be75e251e20e47ebcc2599e597e03f1b3', class: "row" }, h("iframe-input", { key: 'e33011481a387bd05335804b82957b40129ddf4e', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

package/dist/collection/components/checkout/billing-form/billing-form.js

@@ -1,9 +1,7 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { billingFormSchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { Header3 } from "../../../ui-components";
-import { numberOnlyHandler } from "../../../ui-components/form/utils";
-import StateOptions from "../../../utils/state-options";
 import { FormController } from "../../../ui-components/form/form";
 export class BillingForm {
     constructor() {
@@ -40,9 +38,8 @@ export class BillingForm {
         return { isValid, errors };
     }
     render() {
-        const billingFormDefaultValue = this.formController.getInitialValues();
         const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
-        return (h(Host, { key: 'ffffb2d8a4571222645d3c47eb1e2286b8597140' }, h("div", { key: '69b4f6c623cacbf32a30a9b9f23c3de427835c25', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: '96c0781a9b3dd7c5ef0b75ac8667664fee0bd95e', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", { key: '97380a90146a9732594f1c356fab952089280f99' }, h("fieldset", { key: 'fd8bbea485c10633f1d8cca62b222a8abb0d022f' }, this.legend && h("legend", { key: '8febee534a2d055093309e8f8f06078b0b35f4e4' }, this.legend), h("div", { key: '16ac8abe899cdb964d83322fa74cb00f737ab338', class: "row gy-3" }, h("div", { key: '866f73c45b807aeeea4e6addf4de5f2d3a1a232d', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '1734b2aac3eb0508f9ae2e4bf41836fc5dd71cad', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '569c0dc60b47d3e9077af401b720d7777c903bde', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '74406a7f4efde53a41141a218d246408c4807fc8', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'a7f3b7f137b0dd6a92cce6999ef65f13bcff4a31', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '8b6d28170c44af6b7701499a8a4626749d4cd36d', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '3a9031a0ddbea7e1020c420cdd6811ea9c86b9e4', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '730b395bb97c349a63f669669830cbce6ba86f83', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '7998420d30b1957a086303862f7200f20541ead2', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-select", { key: 'b94b623a26891646957f25e59cb03038a989eabf', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '7b0d6eae7eb90f4b33b3e73f920b6ea25920f809', class: "col-12", hidden: this.hideAllBillingFields }, h("form-control-text", { key: '703e429c7999f5cc143c5648bd9fbdc4f5bb6ee9', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h("div", { key: 'e1834cb4638e0b5ea99c55e7a2f73542d2e5ea8d', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: '9936d16177d2c83219872c44b9ca91c264ae7052', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && h("legend", { key: 'c467223d7571122ea5c17885eed658c6cd6faf36' }, this.legend), this.isPostalOnlyMode ? (h("justifi-postal-code-form", null)) : (h("justifi-billing-information-form", null))));
     }
     static get is() { return "justifi-billing-form"; }
     static get properties() {

package/dist/collection/components/checkout/checkout.js

@@ -1,13 +1,49 @@
 import { h } from "@stencil/core";
-import { makeGetCheckout, makeCheckoutComplete } from "../../actions/checkout/checkout-actions";
+import { makeGetCheckout } from "../../actions/checkout/checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
+import { Checkout as CheckoutConstructor } from "../../api";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import checkoutStore from "../../store/checkout.store";
+import { Button, Header2, Header3, Skeleton, StyledHost } from "../../ui-components";
+import { checkoutSummary } from "../../styles/parts";
+import { insuranceValues, insuranceValuesOn, validateInsuranceValues } from "../insurance/insurance-state";
 export class Checkout {
     constructor() {
         this.errorMessage = '';
+        this.insuranceToggled = false;
+        this.renderState = 'loading';
+        this.fetchData = () => {
+            this.renderState = 'loading';
+            const actionsConfig = {
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            };
+            const getCheckout = makeGetCheckout(actionsConfig);
+            getCheckout({
+                onSuccess: ({ checkout }) => {
+                    this.checkout = new CheckoutConstructor(checkout);
+                    const { status } = this.checkout;
+                    this.loadedEvent.emit({ checkout_status: status });
+                    this.renderState = 'success';
+                },
+                onError: ({ error, code, severity }) => {
+                    this.serverError = error;
+                    this.renderState = 'error';
+                    this.errorEvent.emit({
+                        errorCode: code,
+                        message: error,
+                        severity,
+                    });
+                }
+            });
+        };
+    }
+    propChanged() {
+        checkoutStore.authToken = this.authToken;
+        checkoutStore.checkoutId = this.checkoutId;
+        this.fetchData();
     }
     connectedCallback() {
         if (this.authToken && this.checkoutId) {
@@ -18,54 +54,59 @@ export class Checkout {
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.initializeGetCheckout();
+        this.fetchData();
+        // Refresh the checkout data when insurance is added or removed
+        insuranceValuesOn('set', (key) => {
+            const value = insuranceValues[key];
+            if (value !== undefined) {
+                this.insuranceToggled = value;
+                this.fetchData();
+            }
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     ;
-    initializeGetCheckout() {
-        if (this.authToken && this.checkoutId) {
-            this.getCheckout = makeGetCheckout({
-                authToken: this.authToken,
-                checkoutId: this.checkoutId,
-                service: new CheckoutService()
-            });
-            this.complete = makeCheckoutComplete({
-                authToken: this.authToken,
-                checkoutId: this.checkoutId,
-                service: new CheckoutService()
-            });
-        }
-        else {
-            this.errorEvent.emit({
-                message: 'auth-token and checkout-id are required',
-                errorCode: ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-        }
+    async submit(_event) {
+        // calls the submitCheckout method on the checkout wrapper
+        this.modularCheckoutRef.submitCheckout();
     }
-    propChanged() {
-        checkoutStore.authToken = this.authToken;
-        checkoutStore.checkoutId = this.checkoutId;
-        this.initializeGetCheckout();
+    get isLoading() {
+        return this.renderState === 'loading';
+    }
+    get summary() {
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("justifi-checkout-summary", null)));
+    }
+    get paymentTypeHeader() {
+        const showPaymentTypeHeader = !this.disableCreditCard && !this.disableBankAccount;
+        if (!showPaymentTypeHeader)
+            return null;
+        return (h(Header3, { text: "Select payment type", class: "fs-6 fw-bold lh-lg" }));
+    }
+    get paymentType() {
+        var _a, _b, _c, _d, _e;
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     async fillBillingForm(fields) {
-        this.checkoutCoreRef.fillBillingForm(fields);
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     async validate() {
-        const { isValid } = await this.checkoutCoreRef.validate();
-        return { isValid };
+        const insuranceValidation = validateInsuranceValues();
+        const { isValid } = await this.paymentMethodOptionsRef.validate();
+        if (!insuranceValidation.isValid || !isValid) {
+            return { isValid: false };
+        }
+        else {
+            return { isValid: true };
+        }
     }
     render() {
-        return (h("justifi-checkout-core", { key: '3aaf3ff84469870995456a56ac4c2b5806a23802', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: el => {
-                if (el) {
-                    this.checkoutCoreRef = el;
-                }
-            } }, h("div", { key: 'ce9694f701ae7123a4ee5fbae76e9bbef1f7250c', slot: "insurance" }, h("slot", { key: '2049b12cfc42cc42c46be83e6305317e97ae5cba', name: "insurance" }))));
+        return (h(StyledHost, { key: '1a7978a2b2ae5f483ded09e8c2b49a1c3bee1dc1' }, h("justifi-modular-checkout", { key: '4da7015d6634fa1f703b88cd153bc55db256476a', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: 'e3560a86e3634836bab94ad424850dfb72789674', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '31bde37f031dc3b18fe1da5f2a30d615aa3d079f', class: "col-12", part: checkoutSummary }, h(Header2, { key: 'd46cd4136ad4f0cac076e866f8fe095510a6361d', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'efbba765415361bea56bc20d511640da23708c6a', class: "col-12" }, h("slot", { key: 'ca4d2531fb55c15ea1326921fb90d6a7cd14e579', name: "insurance" })), h("div", { key: '58b01f658771ef6be037713add40e7ff03361dc3', class: "col-12 mt-4" }, h(Header2, { key: '990723c85b6adf8eaa0711017d023d9103e1b8f2', text: "Payment", class: "fs-5 fw-bold pb-3" }), this.paymentTypeHeader, h("div", { key: 'dcc79ad150a87e7c67a78ff50b94585562d64d11', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '592f0c0d86c9f1bf9c56f82e8cdcfdcc12e7c5c4', class: "col-12" }, h("div", { key: '8130711b909ffca43c37b4eacab515c8a7acb77c', class: "d-flex justify-content-end" }, h(Button, { key: '7da0c99ff8438b22f6cf6a3f2d3bfc5d32a97ad2', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay")))))));
     }
     static get is() { return "justifi-checkout"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "authToken": {
@@ -224,9 +265,12 @@ export class Checkout {
     }
     static get states() {
         return {
-            "getCheckout": {},
+            "checkout": {},
             "complete": {},
-            "errorMessage": {}
+            "errorMessage": {},
+            "insuranceToggled": {},
+            "renderState": {},
+            "serverError": {}
         };
     }
     static get events() {
@@ -251,6 +295,27 @@ export class Checkout {
                         }
                     }
                 }
+            }, {
+                "method": "submitEvent",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
+                    "references": {
+                        "ComponentSubmitEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
+                        }
+                    }
+                }
             }, {
                 "method": "loadedEvent",
                 "name": "loaded",

package/dist/collection/components/checkout/new-payment-method.js

@@ -80,14 +80,14 @@ export class NewPaymentMethod {
     showNewPaymentMethodForm() {
         var _a;
         const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
-        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("justifi-card-form", null)) : (h("justifi-bank-account-form", null)), h("justifi-billing-form", { hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     get hiddenRadioInput() {
         return !this.showAch || !this.showCard;
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '137378e62a729bd2287b1bdf89cb85c702cd4e12', class: "payment-method" }, h("div", { key: 'dabfcf5c56169708a8968a16aeaafefb43ca3ab8', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'd098e2b8f6e1230fc16fdc2cbfd616559bcf2b89', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h(Host, { key: '86a50eecba10706b674e3517c7b1e5ba6674035a', class: "payment-method" }, h("div", { key: '54ec6ea1d0eb1f1bcbb0b5c145858a270dc7ccf4', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '348ab53888c29f3b942f2698dcb72450d73ed90d', 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));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {

package/dist/collection/components/checkout/payment-method-options.js

@@ -1,6 +1,12 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { PaymentMethodTypes } from "../../api/Payment";
 import { PaymentMethodOption } from "./payment-method-option-utils";
+import checkoutStore from "../../store/checkout.store";
+import { radioListItem } from "../../styles/parts";
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
 export class PaymentMethodOptions {
     constructor() {
         this.savedPaymentMethods = [];
@@ -16,7 +22,7 @@ export class PaymentMethodOptions {
         this.paymentMethodsChanged();
     }
     paymentMethodsChanged() {
-        var _a;
+        var _a, _b;
         this.paymentMethodOptions = this.savedPaymentMethods
             .map((paymentMethod) => new PaymentMethodOption(paymentMethod))
             .filter((paymentMethod) => {
@@ -24,18 +30,24 @@ export class PaymentMethodOptions {
             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 = (_a = this.paymentMethodOptions[0]) === null || _a === void 0 ? void 0 : _a.id;
+        if (!checkoutStore.selectedPaymentMethod) {
+            checkoutStore.selectedPaymentMethod = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
         }
     }
     paymentMethodOptionSelected(event) {
-        this.selectedPaymentMethodId = event.detail.id;
+        checkoutStore.selectedPaymentMethod = event.detail.id;
+    }
+    get hiddenRadioInput() {
+        return !this.showAch || !this.showCard;
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a;
@@ -46,26 +58,7 @@ export class PaymentMethodOptions {
         return newPaymentMethodElement.validate();
     }
     render() {
-        var _a;
-        return (h(Host, { key: '2d3dc8bc98cea3efbcf342a31b6883f30099b031' }, (_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;
-            if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-            else if (this.showSavedPaymentMethods) {
-                return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-        })));
+        return (h("div", { key: '43947388e9c3e84f5af7ebefb379dcb0fc89bae7' }, h("div", { key: '203dde4a60f39cfb38408f58670b89047cadd3b3', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'c26d64e69722cbdcdd1d573c93328d322b2db256', name: "paymentMethodType", value: PaymentMethodTypes.card, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] })), h("div", { key: '87799dce96c87b24d3f7ecc597021dbfde851a22', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '22df7be58ce8a58a8ce38a52912234bd313c4d2e', name: "paymentMethodType", value: PaymentMethodTypes.bankAccount, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] })), h("justifi-sezzle-payment-method", { key: '3ce43229e7268a453e5a2bad83f573105e8a6727' }), h("justifi-saved-payment-methods", { key: 'e6de7f6010736a702337dd91defc8bf00604ee34', exportparts: radioListItem.split(' ').join(',') })));
     }
     static get is() { return "justifi-payment-method-options"; }
     static get properties() {
@@ -127,6 +120,25 @@ export class PaymentMethodOptions {
                 "setter": false,
                 "reflect": false
             },
+            "showBnpl": {
+                "type": "boolean",
+                "attribute": "show-bnpl",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "paymentMethodGroupId": {
                 "type": "string",
                 "attribute": "payment-method-group-id",
@@ -307,7 +319,6 @@ export class PaymentMethodOptions {
     }
     static get states() {
         return {
-            "selectedPaymentMethodId": {},
             "paymentMethodOptions": {}
         };
     }

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -8,7 +8,7 @@ export class SaveNewPaymentMethod {
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: 'e6e7a75237ec2062188bf85deadac58892663b3b', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'abbaeb4e9119c4d41f0a727c7a070c14b7418302', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+        return (h("div", { key: 'b196a8d34fb4afe1293f4ff9f6eea8bb3ed4c1a6', class: "mt-4 form-check" }, h("form-control-checkbox", { key: '1f35cb80578373e1f77f2a95f08310f0830e1c90', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get states() {

package/dist/collection/components/checkout/saved-payment-method.js

@@ -18,7 +18,7 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '78487e52f549547f4c89f48a238a8916d77d4f1c', class: "payment-method" }, h("div", { key: 'd437a5f9e79356b1177703da2b5d7f4ca98072ce', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0dd03b9ebae98c441c63717aba310d77e587b1c8', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: '96a1e315728d17d67ef35f2a269210ec28b7eb24', class: "payment-method" }, h("div", { key: 'fb9edf8f6a5a2f76138a83f36c949ffdee4f0f01', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '14388b6e3ba9e631719587b798485e4d30664639', 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}` }))));
     }
     static get is() { return "justifi-saved-payment-method"; }
     static get properties() {

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance-core.js

@@ -92,9 +92,9 @@ export class SeasonInterruptionInsuranceCore {
         var _a, _b, _c, _d;
         if (this.isLoading)
             return (h(StyledHost, null, h(SeasonInterruptionInsuranceLoading, null)));
-        return (h(StyledHost, null, h("div", null, h(Header2, { text: (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title, class: "fs-5 fw-bold pb-3" }), h("small", { innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description, part: text }), h("form-control-radio", { label: `Accept coverage for ${formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents)}`, name: "opt-in", value: 'true', checked: this.accepted === 'true', inputHandler: this.onChangeHandler.bind(this),
+        return (h(StyledHost, null, h(Header2, { text: (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title, class: "fs-5 fw-bold pb-3" }), h("small", { innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description, part: text }), h("form-control-radio", { label: `Accept coverage for ${formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents)}`, name: "opt-in", value: 'true', checked: this.accepted === 'true', inputHandler: this.onChangeHandler.bind(this),
             // don't wanna show error message, but need to show the red border
-            errorText: this.error ? ' ' : undefined }), h("form-control-radio", { label: "Decline coverage", name: "opt-in", value: 'false', checked: this.accepted === 'false', inputHandler: this.onChangeHandler.bind(this), errorText: this.error ? ' ' : undefined }), h("div", { class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' }, part: textDanger }, "Please select an option"), h("small", { innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer, part: text }))));
+            errorText: this.error ? ' ' : undefined }), h("form-control-radio", { label: "Decline coverage", name: "opt-in", value: 'false', checked: this.accepted === 'false', inputHandler: this.onChangeHandler.bind(this), errorText: this.error ? ' ' : undefined }), h("div", { class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' }, part: textDanger }, "Please select an option"), h("small", { innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer, part: text })));
     }
     static get is() { return "justifi-season-interruption-insurance-core"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance.js

@@ -34,10 +34,9 @@ export class SeasonInterruptionInsurance {
         this.toggleCoverage = makeToggleCoverage(config);
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '6c412b4fc73345924b97add603216a61a697c206', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId || checkoutStore.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: 'a6354b724c14651a84d7ac7226fa12132d152b7d', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId || checkoutStore.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "authToken": {

package/dist/collection/components/modular-checkout/modular-checkout.js

@@ -177,7 +177,7 @@ export class CheckoutWrapper {
         });
     }
     render() {
-        return (h(Host, { key: '12db8b2a4ea3308772604d50e9223e48dda0f26f' }));
+        return (h(Host, { key: '8e15946406121bf7ac6a37f225a96728413ff334' }));
     }
     static get is() { return "justifi-modular-checkout"; }
     static get properties() {
@@ -315,7 +315,7 @@ export class CheckoutWrapper {
             },
             "submitCheckout": {
                 "complexType": {
-                    "signature": "(submitCheckoutArgs: IBillingInfo) => Promise<void>",
+                    "signature": "(submitCheckoutArgs?: IBillingInfo) => Promise<void>",
                     "parameters": [{
                             "name": "submitCheckoutArgs",
                             "type": "IBankAccountBillingInfo | IPostalCode",