@justifi/webcomponents 5.7.6-rc-07 → 5.7.6

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

@@ -1,17 +1,25 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { b as PaymentMethodTypes } from './Payment.js';
-import { P as PaymentMethodOption } from './payment-method-option-utils.js';
-import { c as checkoutStore } 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 { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PaymentMethodTypes } from './Payment.js';
+import { d as defineCustomElement$2, P as PaymentMethodOption } from './saved-payment-method.js';
+import { d as defineCustomElement$j } from './bank-account-form2.js';
+import { d as defineCustomElement$i } from './card-form2.js';
+import { d as defineCustomElement$h } from './custom-popper2.js';
+import { d as defineCustomElement$g } from './form-control-checkbox2.js';
+import { d as defineCustomElement$f } from './form-control-help-text2.js';
+import { d as defineCustomElement$e } from './form-control-radio2.js';
+import { d as defineCustomElement$d } from './form-control-select2.js';
+import { d as defineCustomElement$c } from './form-control-text2.js';
+import { d as defineCustomElement$b } from './form-control-tooltip2.js';
+import { d as defineCustomElement$a } from './hidden-input2.js';
+import { d as defineCustomElement$9 } from './iframe-input2.js';
+import { d as defineCustomElement$8 } from './bank-account-billing-form-simple.js';
+import { d as defineCustomElement$7 } from './billing-form.js';
+import { d as defineCustomElement$6 } from './billing-form-full.js';
+import { d as defineCustomElement$5 } from './card-billing-form-simple.js';
+import { d as defineCustomElement$4 } from './new-payment-method.js';
+import { d as defineCustomElement$3 } from './save-new-payment-method.js';
 import { d as defineCustomElement$1 } from './sezzle-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();
@@ -46,15 +54,12 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         if (this.showAch) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
         }
-        if (!checkoutStore.selectedPaymentMethod) {
-            checkoutStore.selectedPaymentMethod = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
+        if (!this.selectedPaymentMethodId) {
+            this.selectedPaymentMethodId = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
         }
     }
     paymentMethodOptionSelected(event) {
-        checkoutStore.selectedPaymentMethod = event.detail.id;
-    }
-    get hiddenRadioInput() {
-        return !this.showAch || !this.showCard;
+        this.selectedPaymentMethodId = event.detail.id;
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a;
@@ -65,7 +70,34 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         return newPaymentMethodElement.validate();
     }
     render() {
-        return (h("div", { key: 'e1a46216f766f12306302210bcba3147a4312cfa' }, h("justifi-saved-payment-methods", { key: '72ac4e440719ed1bbafc90f4cf0a2e3a52530713' }), h("justifi-sezzle-payment-method", { key: 'aaa89521f18ac4833d561c08b3fa50b00800a4bf' }), h("div", { key: '209001587e9f7e23f1147d4ef2d8ec4691f6c9fb', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '0baed32a40efc6ff0d77dcf53ae9e3ff3aab1185', name: "paymentMethodType", value: PaymentMethodTypes.card, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] })), h("div", { key: '53d8360fdecec5a6860f480901911bd2c396e1a2', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '901a45bae4b3faeed8daa147db5c8264c4bee08c', name: "paymentMethodType", value: PaymentMethodTypes.bankAccount, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }))));
+        var _a;
+        return (h(Host, { key: 'c61e82c72aaa25e87ded723799a1eb0961c05444' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+            const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
+            const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
+            const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
+            const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
+            if (newCard || newBankAccount) {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "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 (sezzle) {
+                return (h("justifi-sezzle-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+            else if (this.showSavedPaymentMethods) {
+                return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+        })));
     }
     static get watchers() { return {
         "savedPaymentMethods": ["paymentMethodsChanged"]
@@ -73,8 +105,8 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
 }, [256, "justifi-payment-method-options", {
         "showCard": [4, "show-card"],
         "showAch": [4, "show-ach"],
-        "showSavedPaymentMethods": [4, "show-saved-payment-methods"],
         "showBnpl": [4, "show-bnpl"],
+        "showSavedPaymentMethods": [4, "show-saved-payment-methods"],
         "paymentMethodGroupId": [1, "payment-method-group-id"],
         "bnpl": [16],
         "insuranceToggled": [4, "insurance-toggled"],
@@ -84,6 +116,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,24 +128,99 @@ 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-bank-account-billing-form-simple", "justifi-billing-form", "justifi-billing-form-full", "justifi-card-billing-form-simple", "justifi-new-payment-method", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-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$j();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$f();
             }
             break;
         case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "justifi-bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-billing-form-full":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-card-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-saved-payment-methods":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/payment-provisioning-actions.js

@@ -1,4 +1,4 @@
-import { C as ComponentErrorSeverity } from './Refund.js';
+import { C as ComponentErrorSeverity } from './Checkout.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 
 // Business / Entity API Actions

package/dist/module/payment-provisioning-core.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import { c as checkProvisioningStatus } from './helpers.js';
 import { t as text } from './parts.js';
 import { S as StyledHost } from './styled-host.js';

package/dist/module/payment.service.js

@@ -1,7 +1,8 @@
 import { A as Api } from './Api.js';
-import './Refund.js';
+import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 
 const api = Api();

package/dist/module/payments-list-core2.js

@@ -1,9 +1,10 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './config-state.js';
 import { h as convertToLocal } from './utils2.js';
-import './Refund.js';
+import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 import './details.js';
 import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
@@ -117,7 +118,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '39e6d19ecc20dc1b73a61df421660831cc52b404' }, h(TableComponent, { key: '3b1d480d2894052b283758fa98e47074add5f5e5' }, h(TableHead, { key: 'c7e85267ac2340750e53aeaa21374cd330ce63e4' }, h(TableHeadRow, { key: '88719513e265a1a2ceec0012660dc776ae9d8073' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'fd45fb6fcfa0916d8527f3901ee9a4a237b6fb7c' }, h(TableLoadingState, { key: '7859ab324790a44bd1c1ef372c1268f418f99ff2', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '0dfa69ee202a76f7bfd5f72a8df9e083fca00782', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '10c2579392f78c654f2d18c443f4e93e693f425c', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'd4f80eb087f9e412d445d0db3af682f25e780c77' }, h(TableFootRow, { key: '19e415c9ff69d594154cf0d99b31edd55e138e2b' }, h(TableFootCell, { key: 'a3a5432a9d0c55417dc8da22947bb197e3728970', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '0678623b92fb8f24ddac4e845f9c8a099066189e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'c281d15df6992c3e36501217c7b2fa86e12c4bee' }, h(TableComponent, { key: '40662062c7d4bccbf66e38d5e3200d55431dadf7' }, h(TableHead, { key: '9cfd5968a9ccdba77602cc7f73b8448feec7b45a' }, h(TableHeadRow, { key: 'b36f938d1de1946e19f2f8390d4f4c26f280544c' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'dad78f82e065f33481d5b28126953650f5cd8bf6' }, h(TableLoadingState, { key: '5a40ca1841e214914ba71d1e1ef1275ed46f39ab', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '6af3bc5d123604b70d20c01edaab74f1e26ab907', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '804f60d541d5943b8be9c9f0cc1313fffb709b69', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'a49708342b18f4e97c2001f27ae07c9914bf31d9' }, h(TableFootRow, { key: 'dbbedc3645cdb3f864076d56f4b979c8443540bd' }, h(TableFootCell, { key: '913b6fe962d07c870b6b262e5fb44e092b24ee62', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'a5e49ce92278aee49517120b791910def91a1871', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/payout-details-core2.js

@@ -73,9 +73,9 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '306014b2c3c942605a5f1cf9be9f3a286b6162be' }, this.loading && h(PayoutDetailsLoading, { key: '08bf26999178cfc9636eb8e368c280d0e4978955' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'd4621bb4f5000465a77dcce1d2cbac63e6ebc0cd', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'b514c64dae666d1a8e798c7f9a63ec82122b2e96', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '58e917a67bfd4fd9c92e93a5fbecf5daaf66c9f2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cc12b930220f8364e7506f4bd7fb6a0ef9d2a955', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '798289307649cefdaada2e19882d9c090e9281c3', title: "ID", value: this.payout.id }), h("div", { key: '6eae3ffe5896f96754ad98dcf01b492e4ed5dc8e', class: "m-4" }, h(Button, { key: 'b336fef8948df6fc28910a4e09c0773127bfbbc0', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '086f10377bcb5d88b864ce296fe86a076bceb845', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '9f2c10dede55c22d04bbe609b320ea4872c579ec', sectionTitle: "Details" }), h("div", { key: '889bcf99ddf7f9ff0393160e9ec861afb18ac48e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a5c1d143058a6b6966fdf449c9772915fb12c4ba', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '25b31031ce780389791a34d5420d99883b3ff17c', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'b3f4590115cc4face1fb52e6bb94370a2d925c88', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'fde6faaf672a61553f26c68805dce82494595c48', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '7b31b73cc7a0928ecc016c28af3825b7f688dbc1', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '493189833a52093ba3840e99105ead9cf77ce0ed', sectionTitle: "Account" }), h("div", { key: '3a4bcfe998ad9c4a3a495694100b3e2f9c1cdd0f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2c79c7f834f8a4498b588b56eeb4e69072c9c967', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '59e27655a40fb9090ffef7c22dcb372485a71480', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'c61c0957f84dc978e952924510ce95db82bbfeab', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '1843437e74de58f4dedd9288fd860d29caed37cc', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '5cda36b2aaf01bd93127d74e5a319cf0503288ba', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: '9945aed97c73ff1f2e9b26f9498eb197c7cbc2c0', sectionTitle: 'Metadata' }),
-            h("div", { key: '42ee9eb5a0941cc3e635154b40fa8bf7f9a6eaa7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'bb8e673153af8ebeee8a89d1b2a132d9229ca152', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: '4d09eb62be7246163d0641d8160e2997c4440a27' }, this.loading && h(PayoutDetailsLoading, { key: '02f44136c50fde8341cd3dbe6317c4878be0bfb9' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '2dfa8a26f1d88a1f0f1a8182595f8d188088ad27', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '157333a4565fe01e439dcfbc496ecbd49772596a', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '04f8d6e2add99d232f61dfbead40a0b99413546e', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'a682d2490f1b036eaffa591b3550fea27639dbb7', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '0c7e9c4a7f12105d710709f8ad91791c3aefb4f7', title: "ID", value: this.payout.id }), h("div", { key: '3dd3f3c2d4cedd9ec4282e3470567a31a5f34b45', class: "m-4" }, h(Button, { key: '769c5794b8c7714716a984b7e8b7c35b7e5dd644', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '2cb1713761bc269118f605bf7188eba68c823fa2', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '545a7eba7545164539f832e1bf921ed43dffdae5', sectionTitle: "Details" }), h("div", { key: '9d27cf1bc08cb37c70559d4a7b9fbfa3936c753d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'bf2c9cde5453afae4dca540b0c2a54b45b2cd7c8', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '907552c983f955efbf14f66d90d15aa4414be928', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '0d8bfba42271584b5bcc67ebc78d3b752325fb5d', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'a3a92245ad3f2c1b7c4747b46e9a7e9edd3aca5f', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'e31626c50900c3820a2977e997dc3ead504f3bd5', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'caaa03f34a09b525a86557d7e4ecf9892c50fe1d', sectionTitle: "Account" }), h("div", { key: '3b571a61a3aace395c993a52bdc1bf05c6b86bcf', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0226941cb99d1e0eb7dd0f83a35beb2164ef4b1f', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'f0d8987c4cc2688b3460786c4254cffef7a13b5a', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '3e9cd8cbbaf5364bdd94447a7e2990fc48848cfa', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'e416a8ed97ac72554921ed9eb258b03a5dbe9e69', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'df8c76de678a64c12309884e4a34ff1030d916de', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: '74a4d6f75efd53e9513be1f7a53fde4e35038911', sectionTitle: 'Metadata' }),
+            h("div", { key: '25254b4929ac6f0585172075aeffeec941e292f4', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '8a60b832ac1edaa2468b3ae412bbbac9353a750c', metadata: this.payout.metadata }))
         ])))));
     }
     static get watchers() { return {

package/dist/module/payout.service.js

@@ -1,7 +1,8 @@
 import { A as Api } from './Api.js';
-import './Refund.js';
+import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 
 const api = Api();

package/dist/module/payouts-list-core2.js

@@ -1,9 +1,10 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './config-state.js';
 import { h as convertToLocal } from './utils2.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 import './details.js';
 import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
@@ -172,7 +173,7 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '8778964432cbf71e780a4328a9a8e653aae44dbb' }, h(TableComponent, { key: '5c047eb4ea8aa3ae00ff6d98cdb07450ceba2cb7' }, h(TableHead, { key: 'cb3569dbecbbf9005cb6523a523ea5b2ccc470d4' }, h(TableHeadRow, { key: '421d4ea37a8a524c361a1e5f83e0aa83b9a72da9' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'f777aaf98c0028a67ff922f243613639db450555' }, h(TableLoadingState, { key: '7ea06d8bf343c3b313e28925edc4356ff228a170', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '33310d31d27d7f0965aa608cf001feb81051de77', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '3a62c9520376a641b765fbd66e563f3d48b8384a', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '52d120c4df6bf686e150a50629904118a64dd413' }, h(TableFootRow, { key: '699759d97a5414c31471ca5456d566767a92d5d2' }, h(TableFootCell, { key: 'dd3d077a2538331d5c593418550a06859949d576', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'ca13818ee80c3d2ff4a79fc7a00ddd0c46be147b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '45a3a0122a04157f8973b41c9eeb56c93716b1cc' }, h(TableComponent, { key: '209bf75f732420305b75a562eecaa927c780c4b7' }, h(TableHead, { key: 'a975d9d91fbeb27f17d745c901c18d31a1f34f5c' }, h(TableHeadRow, { key: '0dee293dff0cf126e749a7e105f351468c072298' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'e1386e1d3381665bf865e71868dc90748836e7db' }, h(TableLoadingState, { key: '0891f85f83515b7bf4c74490ab6631463e3cfd66', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '62177a9366eda951da44bffe1e0413ec81530465', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'f95aaa35e4d852b41f67092252b79dcbf353ed17', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '7b2b4123103664b051ceb9bfb6e8c00317e33e58' }, h(TableFootRow, { key: 'bb19ab81d64eac40475505e3e9d2eb735388c0d5' }, h(TableFootCell, { key: 'ee44f1fc1b292f3a8df9c93abd8542662dd0c002', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'c987240448e548256034675e5de769a19a8fea10', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/product-or-service.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
-import { _ as heading5 } from './parts.js';
+import { $ as heading5 } from './parts.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-date2.js';
 import { d as defineCustomElement$3 } from './form-control-file-v22.js';
@@ -39,7 +39,7 @@ const ProductOrService = /*@__PURE__*/ proxyCustomElement(class ProductOrService
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'c93f5bc2e64f5e2964eb033cb6c972283841876b' }, h("div", { key: '7986f459ba9cc0d7e896a418ba4bd9e51148d36f', class: "row gy-3" }, h("div", { key: 'ddf033f861a5b91961294600a5d6d7261937711c', class: "col-12" }, h("h2", { key: '2a33306859a2982fbb3457831c29a98cd3e86c4f', class: "h5", part: heading5 }, "Product & Service Details")), h("div", { key: '385212b08cbdcd4d610c806f1f9b5d18446a9831', class: "col-12" }, h("form-control-text", { key: '210a8c07288473e93737e93659dc91e7f813e306', label: "Product Description", name: "product_description", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.product_description, inputHandler: this.inputHandler, errorText: this.errors.product_description })), h("div", { key: '5a52ad00db803d2ddd0afe6ee7cde4b907e1ad1a', class: "col-12" }, h("form-control-date", { key: '1bdef3f3391b4a97aa3e97aefac3e29b5520f620', label: "Service Date", name: "service_date", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.service_date, inputHandler: this.inputHandler, errorText: this.errors.service_date })), h("div", { key: 'd4fc75d0f175914e2fbb134e6449e1d45742a9f3', class: "col-12" }, h("form-control-file-v2", { key: '62e1ae0f42103f49bc5c93427b62ad90570634f8', label: "Service Documentation", name: "service_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.service_documentation })))));
+        return (h("div", { key: 'c785e0f2960f5c3f345593cdf4a661ec23319318' }, h("div", { key: '889411f69d6da90b66aec38670275417ae453ad3', class: "row gy-3" }, h("div", { key: '32757c5d3976233bb651f0ca62d05dc641cd0bb6', class: "col-12" }, h("h2", { key: '069e07dba3f701fa9ae1b6c7c8cdbb87e87779f9', class: "h5", part: heading5 }, "Product & Service Details")), h("div", { key: '3159a507115e4ccee2ede664284b487a5b99789f', class: "col-12" }, h("form-control-text", { key: 'e9e37f925e8b2eba53cd69b62a9b397642ab8398', label: "Product Description", name: "product_description", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.product_description, inputHandler: this.inputHandler, errorText: this.errors.product_description })), h("div", { key: '9a98f1109a1a53dc1768ba65112a82564fcbc778', class: "col-12" }, h("form-control-date", { key: '9229934f3ce815511ebfc172acf2e74746f34961', label: "Service Date", name: "service_date", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.service_date, inputHandler: this.inputHandler, errorText: this.errors.service_date })), h("div", { key: '4bcbd5232ae025c0432b4b63db9d52a4d9a06da7', class: "col-12" }, h("form-control-file-v2", { key: '28f7a534590cc3583c409596353262d432366c20', label: "Service Documentation", name: "service_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.service_documentation })))));
     }
 }, [256, "justifi-product-or-service", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/refund-policy.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
-import { _ as heading5 } from './parts.js';
+import { $ as heading5 } from './parts.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-file-v22.js';
 import { d as defineCustomElement$3 } from './form-control-help-text2.js';
@@ -39,7 +39,7 @@ const RefundPolicy = /*@__PURE__*/ proxyCustomElement(class RefundPolicy extends
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: 'a300941b5472ab2cfd1dd212fbab4b280c132f73' }, h("div", { key: '1f11681c815c4f0676da384884b758b1bd49f3d1', class: "row gy-3" }, h("div", { key: '56f1575a5e2c7da5d725ca224b5d64163de0fd23', class: "col-12" }, h("h2", { key: '9ccb22c016184f233d1096b66380473a8e62c269', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: 'e602ac3e5fe3cbd3d12910d66cc8d879295a9e4a', class: "col-12" }, h("form-control-textarea", { key: 'f6e6dae3ab7d383da16fa5308933a77cf63f11d8', label: "Refund Policy Disclosure", name: "refund_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.refund_policy_disclosure, inputHandler: this.inputHandler })), h("div", { key: '8cdb3b28847683f5fd4594eb64522c899e5ef993', class: "col-12" }, h("form-control-textarea", { key: 'c8e4b7c760cbe8bb9cb30818b0c29f6012092649', label: "Refund Refusal Explanation", name: "refund_refusal_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.refund_refusal_explanation, inputHandler: this.inputHandler })), h("div", { key: '95c376af4517e3ee23afd64d479a6ae051f03d72', class: "col-12" }, h("form-control-file-v2", { key: 'dc2ef0d5911dbab2d820bc46563bbb7218390501', label: "Upload Refund Policy", name: "refund_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.refund_policy })), h("div", { key: 'b9d6ffb85e987f5037e414dde26e72f5219c0ea8', class: "col-12" }, h("form-control-file-v2", { key: 'c6513b7a2f9d68c2df2be8c21da0d16e03a6a885', label: "Upload Receipt", name: "receipt", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.receipt })))));
+        return (h("div", { key: '059fe88e8680cce1fff5d2fb78974c84b8419010' }, h("div", { key: '44540c58f93b7cb6e7c26913dd731bd108ad082e', class: "row gy-3" }, h("div", { key: 'b6a06bab2f9a50e4270ae2757f4a34bf377267f2', class: "col-12" }, h("h2", { key: 'bca449676b25c574e18f7f085db1015d0590ade3', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: 'fcf8e789a230d9b8a637b3dff1212d7493ebdecd', class: "col-12" }, h("form-control-textarea", { key: 'ece54130e8b8eaf0845c7a83f076ea37f0fe7ac5', label: "Refund Policy Disclosure", name: "refund_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.refund_policy_disclosure, inputHandler: this.inputHandler })), h("div", { key: '8f9abb62e4110a2ffc9335bf0e919d4c50b2c457', class: "col-12" }, h("form-control-textarea", { key: 'f4bdd5b908fff65d6a797802dbd901783d87f3f8', label: "Refund Refusal Explanation", name: "refund_refusal_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.refund_refusal_explanation, inputHandler: this.inputHandler })), h("div", { key: '43c55a470f2c66ae49104f8e82dd8ca9872f8b42', class: "col-12" }, h("form-control-file-v2", { key: 'dbb0f755afd709364a10ab5737f62c7b6050ddbf', label: "Upload Refund Policy", name: "refund_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.refund_policy })), h("div", { key: '5e130e88240ed520e93b6116d08ff0cbb4427084', class: "col-12" }, h("form-control-file-v2", { key: '90b51fd34f6ba84b6bcc706e7afdcc540a0435e4', label: "Upload Receipt", name: "receipt", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.receipt })))));
     }
 }, [256, "justifi-refund-policy", {
         "disputeResponse": [8, "dispute-response"],

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

@@ -1,14 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
 import { d as defineCustomElement$1 } from './form-control-checkbox2.js';
 
 const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPaymentMethod extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.checkboxChanged = createEvent(this, "checkboxChanged", 7);
         this.isChecked = false;
     }
@@ -17,9 +13,9 @@ const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPayme
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h(StyledHost, { key: '114f1887f2aebee2440d5c0b187fe1f361137230' }, h("div", { key: '8a967beb89065a8b3ee501f0589b6617764c641e', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'b22ca881a5fcda9dc044dfd1175e9ae06fd9f504', 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) })));
     }
-}, [257, "justifi-save-new-payment-method", {
+}, [256, "justifi-save-new-payment-method", {
         "isChecked": [32]
     }]);
 function defineCustomElement() {

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

@@ -0,0 +1,79 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as snakeToCamel } from './utils2.js';
+import { X 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';
+
+class PaymentMethodOption {
+    constructor(paymentMethod) {
+        this.id = paymentMethod.id;
+        this.brand = paymentMethod.brand;
+        this.acct_last_four = paymentMethod.acct_last_four;
+        this.type = snakeToCamel(paymentMethod.type);
+    }
+}
+var CardBrandLabels;
+(function (CardBrandLabels) {
+    CardBrandLabels["american_express"] = "American Express";
+    CardBrandLabels["diners_club"] = "Diners Club";
+    CardBrandLabels["discover"] = "Discover";
+    CardBrandLabels["jcb"] = "JCB";
+    CardBrandLabels["mastercard"] = "Mastercard";
+    CardBrandLabels["china_unionpay"] = "UnionPay";
+    CardBrandLabels["visa"] = "Visa";
+    CardBrandLabels["unknown"] = "Unknown";
+})(CardBrandLabels || (CardBrandLabels = {}));
+
+const 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}` }))));
+    }
+}, [256, "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 { PaymentMethodOption as P, SavedPaymentMethod as S, defineCustomElement as d };

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

@@ -1,9 +1,8 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { p as processHTML, c as formatCurrency, r as removeAttribute, k as addAttribute } from './utils2.js';
-import { v as validateInsuranceValues, a as insuranceValues, b as insuranceErrors } from './insurance-state.js';
+import { v as validateInsuranceValues, a as insuranceValues, b as insuranceErrors, H as Header2 } from './insurance-state.js';
 import { t as text, j as textDanger } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { H as Header2 } from './header-2.js';
 import './details.js';
 import './event-types.js';
 import { S as Skeleton } from './skeleton.js';
@@ -28,7 +27,6 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.insuranceUpdated = createEvent(this, "insurance-updated", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.isLoading = true;
@@ -36,6 +34,13 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
     async validate() {
         return validateInsuranceValues();
     }
+    processHTMLContent(html) {
+        return processHTML(html, [
+            (html) => removeAttribute(html, 'style'),
+            (html) => addAttribute(html, 'a', 'part', text),
+            (html) => addAttribute(html, 'p', 'part', text),
+        ]);
+    }
     componentWillLoad() {
         if (this.getQuote) {
             this.fetchData();
@@ -68,14 +73,8 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
             },
             onSuccess: ({ quote }) => {
                 this.quote = quote;
-                this.quote.product.description = processHTML(this.quote.product.description, [
-                    (html) => removeAttribute(html, 'style'),
-                    (html) => addAttribute(html, 'a', 'part', text)
-                ]);
-                this.quote.product.legal_disclaimer = processHTML(this.quote.product.legal_disclaimer, [
-                    (html) => removeAttribute(html, 'style'),
-                    (html) => addAttribute(html, 'a', 'part', text)
-                ]);
+                this.quote.product.description = this.processHTMLContent(this.quote.product.description);
+                this.quote.product.legal_disclaimer = this.processHTMLContent(this.quote.product.legal_disclaimer);
                 insuranceValues[quote.policy_type] = quote.accepted;
                 this.isLoading = false;
             },
@@ -117,11 +116,11 @@ 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", { part: text, innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), 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", { part: text, innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
     }
-}, [257, "justifi-season-interruption-insurance-core", {
+}, [256, "justifi-season-interruption-insurance-core", {
         "checkoutId": [1, "checkout-id"],
         "getQuote": [16, "get-quote"],
         "toggleCoverage": [16, "toggle-coverage"],