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

package/dist/module/justifi-tokenize-payment-method.js

@@ -12,11 +12,22 @@ import './Payment.js';
 import './Refund.js';
 import './Business.js';
 import { s as state } from './checkout.store.js';
-import { d as defineCustomElement$6 } from './form-control-help-text2.js';
-import { d as defineCustomElement$5 } from './form-control-radio2.js';
+import { d as defineCustomElement$h } from './bank-account-form2.js';
+import { d as defineCustomElement$g } from './card-form2.js';
+import { d as defineCustomElement$f } from './custom-popper2.js';
+import { d as defineCustomElement$e } from './form-control-checkbox2.js';
+import { d as defineCustomElement$d } from './form-control-help-text2.js';
+import { d as defineCustomElement$c } from './form-control-radio2.js';
+import { d as defineCustomElement$b } from './form-control-select2.js';
+import { d as defineCustomElement$a } from './form-control-text2.js';
+import { d as defineCustomElement$9 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$8 } from './hidden-input2.js';
+import { d as defineCustomElement$7 } from './iframe-input2.js';
+import { d as defineCustomElement$6 } from './billing-form.js';
+import { d as defineCustomElement$5 } from './new-payment-method.js';
 import { d as defineCustomElement$4 } from './payment-method-options.js';
-import { d as defineCustomElement$3 } from './saved-payment-methods.js';
-import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
+import { d as defineCustomElement$3 } from './save-new-payment-method.js';
+import { d as defineCustomElement$2 } from './saved-payment-method.js';
 
 const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePaymentMethod extends HTMLElement {
     constructor() {
@@ -99,19 +110,74 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-tokenize-payment-method", "form-control-help-text", "form-control-radio", "justifi-payment-method-options", "justifi-saved-payment-methods", "justifi-sezzle-payment-method"];
+    const components = ["justifi-tokenize-payment-method", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-tokenize-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TokenizePaymentMethod);
             }
             break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$d();
             }
             break;
         case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
@@ -121,12 +187,12 @@ function defineCustomElement$1() {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-saved-payment-methods":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-sezzle-payment-method":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/new-payment-method.js

@@ -0,0 +1,204 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { W as radioListItem } from './parts.js';
+import { d as defineCustomElement$d } from './bank-account-form2.js';
+import { d as defineCustomElement$c } from './card-form2.js';
+import { d as defineCustomElement$b } from './custom-popper2.js';
+import { d as defineCustomElement$a } from './form-control-checkbox2.js';
+import { d as defineCustomElement$9 } from './form-control-help-text2.js';
+import { d as defineCustomElement$8 } from './form-control-radio2.js';
+import { d as defineCustomElement$7 } from './form-control-select2.js';
+import { d as defineCustomElement$6 } from './form-control-text2.js';
+import { d as defineCustomElement$5 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$4 } from './hidden-input2.js';
+import { d as defineCustomElement$3 } from './iframe-input2.js';
+import { d as defineCustomElement$2 } from './billing-form.js';
+import { d as defineCustomElement$1 } from './save-new-payment-method.js';
+
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
+const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
+        this.saveNewPaymentMethodChecked = false;
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+    }
+    handleCheckboxChanged(event) {
+        this.saveNewPaymentMethodChecked = event.detail;
+    }
+    async fillBillingForm(fields) {
+        this.billingFormRef.fill(fields);
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a, _b;
+        if (!this.paymentMethodFormRef || !this.billingFormRef)
+            return;
+        try {
+            const { isValid, errors } = await this.validate();
+            if (!isValid || !insuranceValidation.isValid) {
+                // get propety value from first property in errors object
+                const message = `${Object.values(errors)[0] || 'Validation error'}`;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message,
+                        decline_code: undefined
+                    }
+                };
+            }
+            const tokenizeResponse = await this.tokenize();
+            if (tokenizeResponse.error) {
+                return { error: tokenizeResponse.error };
+            }
+            else {
+                const tokenizeRessponseData = tokenizeResponse.data;
+                return {
+                    token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
+                    data: tokenizeRessponseData
+                };
+            }
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async validate() {
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        const isValid = billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+        const errors = Object.assign(Object.assign({}, billingFormValidation.errors), paymentMethodFormValidation.errors);
+        return { isValid, errors };
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            let paymentMethodData;
+            if (this.saveNewPaymentMethodChecked) {
+                paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
+            }
+            else {
+                paymentMethodData = Object.assign({}, billingFormFieldValues);
+            }
+            const clientId = this.authToken;
+            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
+            return tokenizeResponse;
+        }
+        catch (error) {
+            return error;
+        }
+    }
+    showNewPaymentMethodForm() {
+        var _a;
+        const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+    }
+    get hiddenRadioInput() {
+        return !this.showAch || !this.showCard;
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { key: '137378e62a729bd2287b1bdf89cb85c702cd4e12', class: "payment-method" }, h("div", { key: 'dabfcf5c56169708a8968a16aeaafefb43ca3ab8', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'd098e2b8f6e1230fc16fdc2cbfd616559bcf2b89', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+    }
+}, [0, "justifi-new-payment-method", {
+        "authToken": [1, "auth-token"],
+        "accountId": [1, "account-id"],
+        "paymentMethodOption": [16, "payment-method-option"],
+        "paymentMethodGroupId": [1, "payment-method-group-id"],
+        "isSelected": [4, "is-selected"],
+        "showCard": [4, "show-card"],
+        "showAch": [4, "show-ach"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "saveNewPaymentMethodChecked": [32],
+        "fillBillingForm": [64],
+        "resolvePaymentMethod": [64],
+        "validate": [64]
+    }, [[0, "checkboxChanged", "handleCheckboxChanged"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-new-payment-method", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-save-new-payment-method"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-new-payment-method":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NewPaymentMethod);
+            }
+            break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-save-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NewPaymentMethod as N, defineCustomElement as d };

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "5.7.3-rc-02";
+const version = "5.7.4-rc-01";
 var webcomponentsPackageJson = {
 	name: name,
 	version: version};

package/dist/module/parts.js

@@ -128,4 +128,4 @@ const orderTypeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam}
 const createdAfterTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-after-terminal-orders-list-filter-param`;
 const createdBeforeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-before-terminal-orders-list-filter-param`;
 
-export { buttonSecondary as $, badgeWarning as A, badgeDanger as B, badgeSuccess as C, badgeSecondary as D, badgePrimary as E, badge as F, alertDanger as G, inputCheckboxInvalid as H, inputCheckboxCheckedFocused as I, inputCheckboxFocused as J, inputCheckboxChecked as K, inputCheckbox as L, inputAdornment as M, inputGroup as N, inputRadioInvalid as O, inputRadioCheckedFocused as P, inputRadioChecked as Q, inputRadioFocused as R, inputRadio as S, inputInvalidAndFocused as T, heading3 as U, billingForm as V, radioListItem as W, heading4 as X, image as Y, buttonLink as Z, heading5 as _, heading1 as a, buttonPrimary as a0, buttonLoading as a1, checkoutSummary as a2, checkoutsListFilterMenu as a3, statusCheckoutsListFilterParam as a4, paymentModeCheckoutsListFilterParam as a5, dropdownMenuButton as a6, dropdownMenu as a7, getAlternateTableCellPart as a8, paymentsListFilterMenu as a9, paymentIdPaymentsListFilterParam as aa, terminalIdPaymentsListFilterParam as ab, paymentStatusPaymentsListFilterParam as ac, createdAfterPaymentsListFilterParam as ad, createdBeforePaymentsListFilterParam as ae, payoutsListFilterMenu as af, createdAfterPayoutsListFilterParam as ag, createdBeforePayoutsListFilterParam as ah, terminalOrdersListFilterMenu as ai, orderStatusTerminalOrdersListFilterParam as aj, orderTypeTerminalOrdersListFilterParam as ak, createdAfterTerminalOrdersListFilterParam as al, createdBeforeTerminalOrdersListFilterParam as am, terminalsListFilterMenu as an, terminalIdTerminalsListFilterParam as ao, terminalOrderIdTerminalsListFilterParam as ap, terminalStatusTerminalsListFilterParam as aq, tableHead as ar, tableHeadRow as as, tableRow as at, tableFoot as au, tableFootRow as av, tableFootCell as aw, tableEmpty as ax, tableError as ay, inputInvalid as b, inputDisabled as c, inputFocused as d, tooltipIcon as e, tooltip as f, tooltipInner as g, heading2 as h, input as i, textDanger as j, card as k, label as l, table as m, tableHeadCell as n, tableCell as o, paginationButton as p, paginationButtonDisabled as q, paginationButtonIconPrevious as r, skeleton as s, text as t, paginationButtonText as u, paginationButtonIconNext as v, loadingSpinner as w, badgeDark as x, badgeLight as y, badgeInfo as z };
+export { billingForm as $, badgeWarning as A, badgeDanger as B, badgeSuccess as C, badgeSecondary as D, badgePrimary as E, badge as F, alertDanger as G, inputCheckboxInvalid as H, inputCheckboxCheckedFocused as I, inputCheckboxFocused as J, inputCheckboxChecked as K, inputCheckbox as L, inputAdornment as M, inputGroup as N, inputRadioInvalid as O, inputRadioCheckedFocused as P, inputRadioChecked as Q, inputRadioFocused as R, inputRadio as S, inputInvalidAndFocused as T, heading3 as U, checkoutSummary as V, radioListItem as W, heading4 as X, image as Y, buttonLink as Z, heading5 as _, heading1 as a, buttonSecondary as a0, buttonPrimary as a1, buttonLoading as a2, checkoutsListFilterMenu as a3, statusCheckoutsListFilterParam as a4, paymentModeCheckoutsListFilterParam as a5, dropdownMenuButton as a6, dropdownMenu as a7, getAlternateTableCellPart as a8, paymentsListFilterMenu as a9, paymentIdPaymentsListFilterParam as aa, terminalIdPaymentsListFilterParam as ab, paymentStatusPaymentsListFilterParam as ac, createdAfterPaymentsListFilterParam as ad, createdBeforePaymentsListFilterParam as ae, payoutsListFilterMenu as af, createdAfterPayoutsListFilterParam as ag, createdBeforePayoutsListFilterParam as ah, terminalOrdersListFilterMenu as ai, orderStatusTerminalOrdersListFilterParam as aj, orderTypeTerminalOrdersListFilterParam as ak, createdAfterTerminalOrdersListFilterParam as al, createdBeforeTerminalOrdersListFilterParam as am, terminalsListFilterMenu as an, terminalIdTerminalsListFilterParam as ao, terminalOrderIdTerminalsListFilterParam as ap, terminalStatusTerminalsListFilterParam as aq, tableHead as ar, tableHeadRow as as, tableRow as at, tableFoot as au, tableFootRow as av, tableFootCell as aw, tableEmpty as ax, tableError as ay, inputInvalid as b, inputDisabled as c, inputFocused as d, tooltipIcon as e, tooltip as f, tooltipInner as g, heading2 as h, input as i, textDanger as j, card as k, label as l, table as m, tableHeadCell as n, tableCell as o, paginationButton as p, paginationButtonDisabled as q, paginationButtonIconPrevious as r, skeleton as s, text as t, paginationButtonText as u, paginationButtonIconNext as v, loadingSpinner as w, badgeDark as x, badgeLight as y, badgeInfo as z };

package/dist/module/payment-method-options.js

@@ -1,17 +1,22 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { P as PaymentMethodTypes } from './Payment.js';
 import { P as PaymentMethodOption } from './payment-method-option-utils.js';
-import { s as state } from './checkout.store.js';
-import { W as radioListItem } from './parts.js';
-import { d as defineCustomElement$4 } from './form-control-help-text2.js';
-import { d as defineCustomElement$3 } from './form-control-radio2.js';
-import { d as defineCustomElement$2 } from './saved-payment-methods.js';
-import { d as defineCustomElement$1 } from './sezzle-payment-method.js';
+import { d as defineCustomElement$f } from './bank-account-form2.js';
+import { d as defineCustomElement$e } from './card-form2.js';
+import { d as defineCustomElement$d } from './custom-popper2.js';
+import { d as defineCustomElement$c } from './form-control-checkbox2.js';
+import { d as defineCustomElement$b } from './form-control-help-text2.js';
+import { d as defineCustomElement$a } from './form-control-radio2.js';
+import { d as defineCustomElement$9 } from './form-control-select2.js';
+import { d as defineCustomElement$8 } from './form-control-text2.js';
+import { d as defineCustomElement$7 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$6 } from './hidden-input2.js';
+import { d as defineCustomElement$5 } from './iframe-input2.js';
+import { d as defineCustomElement$4 } from './billing-form.js';
+import { d as defineCustomElement$3 } from './new-payment-method.js';
+import { d as defineCustomElement$2 } from './save-new-payment-method.js';
+import { d as defineCustomElement$1 } from './saved-payment-method.js';
 
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
-};
 const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMethodOptions extends HTMLElement {
     constructor() {
         super();
@@ -29,7 +34,7 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         this.paymentMethodsChanged();
     }
     paymentMethodsChanged() {
-        var _a, _b;
+        var _a;
         this.paymentMethodOptions = this.savedPaymentMethods
             .map((paymentMethod) => new PaymentMethodOption(paymentMethod))
             .filter((paymentMethod) => {
@@ -37,24 +42,18 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
             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 (!state.selectedPaymentMethod) {
-            state.selectedPaymentMethod = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
+        if (!this.selectedPaymentMethodId) {
+            this.selectedPaymentMethodId = (_a = this.paymentMethodOptions[0]) === null || _a === void 0 ? void 0 : _a.id;
         }
     }
     paymentMethodOptionSelected(event) {
-        state.selectedPaymentMethod = event.detail.id;
-    }
-    get hiddenRadioInput() {
-        return !this.showAch || !this.showCard;
+        this.selectedPaymentMethodId = event.detail.id;
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a;
@@ -65,7 +64,26 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         return newPaymentMethodElement.validate();
     }
     render() {
-        return (h("div", { key: '43947388e9c3e84f5af7ebefb379dcb0fc89bae7' }, h("div", { key: '203dde4a60f39cfb38408f58670b89047cadd3b3', class: "radio-list-item p-3", part: radioListItem, onClick: () => { state.selectedPaymentMethod = PaymentMethodTypes.card; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'c26d64e69722cbdcdd1d573c93328d322b2db256', name: "paymentMethodType", value: PaymentMethodTypes.card, checked: state.selectedPaymentMethod === PaymentMethodTypes.card, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] })), h("div", { key: '87799dce96c87b24d3f7ecc597021dbfde851a22', class: "radio-list-item p-3", part: radioListItem, onClick: () => { state.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '22df7be58ce8a58a8ce38a52912234bd313c4d2e', name: "paymentMethodType", value: PaymentMethodTypes.bankAccount, checked: state.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(',') })));
+        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;
+                        }
+                    } }));
+            }
+        })));
     }
     static get watchers() { return {
         "savedPaymentMethods": ["paymentMethodsChanged"]
@@ -74,7 +92,6 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         "showCard": [4, "show-card"],
         "showAch": [4, "show-ach"],
         "showSavedPaymentMethods": [4, "show-saved-payment-methods"],
-        "showBnpl": [4, "show-bnpl"],
         "paymentMethodGroupId": [1, "payment-method-group-id"],
         "bnpl": [16],
         "insuranceToggled": [4, "insurance-toggled"],
@@ -84,6 +101,7 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         "paymentAmount": [2, "payment-amount"],
         "hideCardBillingForm": [4, "hide-card-billing-form"],
         "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "selectedPaymentMethodId": [32],
         "paymentMethodOptions": [32],
         "fillBillingForm": [64],
         "resolvePaymentMethod": [64],
@@ -95,29 +113,84 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-method-options", "form-control-help-text", "form-control-radio", "justifi-saved-payment-methods", "justifi-sezzle-payment-method"];
+    const components = ["justifi-payment-method-options", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-new-payment-method", "justifi-save-new-payment-method", "justifi-saved-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentMethodOptions);
             }
             break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$b();
             }
             break;
         case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-saved-payment-methods":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "justifi-sezzle-payment-method":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/save-new-payment-method.js

@@ -13,7 +13,7 @@ const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPayme
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        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) })));
+        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) })));
     }
 }, [0, "justifi-save-new-payment-method", {
         "isChecked": [32]

package/dist/module/saved-payment-method.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { C as CardBrandLabels } from './payment-method-option-utils.js';
+import { W as radioListItem } from './parts.js';
+import { d as defineCustomElement$2 } from './form-control-help-text2.js';
+import { d as defineCustomElement$1 } from './form-control-radio2.js';
+
+const SavedPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMethod extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a;
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
+        return { token: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id };
+    }
+    ;
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '78487e52f549547f4c89f48a238a8916d77d4f1c', class: "payment-method" }, h("div", { key: 'd437a5f9e79356b1177703da2b5d7f4ca98072ce', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0dd03b9ebae98c441c63717aba310d77e587b1c8', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+    }
+}, [0, "justifi-saved-payment-method", {
+        "paymentMethodOption": [16, "payment-method-option"],
+        "isSelected": [4, "is-selected"],
+        "resolvePaymentMethod": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-saved-payment-method", "form-control-help-text", "form-control-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-saved-payment-method":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SavedPaymentMethod);
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SavedPaymentMethod as S, defineCustomElement as d };

package/dist/module/season-interruption-insurance-core.js

@@ -116,9 +116,9 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
         var _a, _b, _c, _d;
         if (this.isLoading)
             return (h(StyledHost, null, h(SeasonInterruptionInsuranceLoading, null)));
-        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),
+        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),
             // 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 }))));
     }
 }, [1, "justifi-season-interruption-insurance-core", {
         "checkoutId": [1, "checkout-id"],