@justifi/webcomponents 6.0.0-rc.9 → 6.0.1-rc.0

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

@@ -4,24 +4,9 @@ import './details.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
 
-const FormBlock = () => (h("div", { class: "row gap-3" },
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "25%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "100%" })),
-    h("div", { class: "col-12 d-flex gap-3" },
-        h(Skeleton, { width: "50%" }),
-        h(Skeleton, { width: "50%" })),
-    h("div", { class: "col-12 d-flex gap-3" },
-        h(Skeleton, { width: "65%" }),
-        h(Skeleton, { width: "35%" }))));
+const FormBlock = () => (h("div", { class: "row gap-3" }, h("div", { class: "col-12" }, h(Skeleton, { width: "25%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "100%" })), h("div", { class: "col-12 d-flex gap-3" }, h(Skeleton, { width: "50%" }), h(Skeleton, { width: "50%" })), h("div", { class: "col-12 d-flex gap-3" }, h(Skeleton, { width: "65%" }), h(Skeleton, { width: "35%" }))));
 const PaymentProvisioningLoading = () => {
-    return (h("div", { class: "row gap-5" },
-        h("div", { class: "col-12" },
-            h(Skeleton, { width: "40%", height: "40px" })),
-        h(FormBlock, null),
-        h(FormBlock, null),
-        h(FormBlock, null)));
+    return (h("div", { class: "row gap-5" }, h("div", { class: "col-12" }, h(Skeleton, { width: "40%", height: "40px" })), h(FormBlock, null), h(FormBlock, null), h(FormBlock, null)));
 };
 
 export { PaymentProvisioningLoading as P };

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

@@ -25,9 +25,7 @@ const paymentTableColumns = {
     last_four_digits: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
 };
 const paymentTableCells = {
-    created_at: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showDisplayDate: true })),
-        h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showTime: true })))),
+    created_at: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showTime: true })))),
     amount: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.formattedPaymentAmount(payment.amount))),
     status: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPaymentStatusToBadge(payment.status))),
     payment_type: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.payment_type)),
@@ -37,9 +35,11 @@ const paymentTableCells = {
 };
 
 const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.payments = [];
@@ -118,7 +118,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'caf37a011b6c7cc178c61ffe4cf6a9d5a5a191df' }, h(TableComponent, { key: '8be3bcd856da13dfd7932d4fc49fea655c9efa6b' }, h(TableHead, { key: 'b81696116e224ca8e8549cc6abeb6f96f211f2c4' }, h(TableHeadRow, { key: '6494e391b3755792d69feee684987e605e3979e7' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '5ee3267e6dfe675cb95d74b45f901ee2bc4ab974' }, h(TableLoadingState, { key: '66e830d87aa347dfc91dde691a7b30fcd172bcf6', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '644fc974b572f6f543ad7d1cdbf95f884c9a0b29', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'e898bc1b37c8d6edfda9fc4e57c2ef7762ae1299', 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: '8a39a512dd1ca821877737a75d9b841c9c2246bc' }, h(TableFootRow, { key: '396029ecb6523af607537cb25aaefd9f4d449fc2' }, h(TableFootCell, { key: '6e674ead7dcbf67b757d565762ab4898f28c33fd', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '550e7d3e45ec694013221fbcdcd41e8f821a37d6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '0f667b8996650351ee636d548437217696ba8845' }, h(TableComponent, { key: 'ea49b5f4a53b03525a960954df711f39ee1ec41d' }, h(TableHead, { key: '7e06f612e6aa80267abba505c5b44506a907ae1a' }, h(TableHeadRow, { key: '561827555ab274f70fe4e2e08442689b82f8b2c9' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'a1f724d553ca43fbe20aeeb1bcbedf87e7d5b917' }, h(TableLoadingState, { key: '27c9f9e459857cf208f9bcb1a5a81f02fcac0850', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '546e87c7198e6b7efaf1dde4dba0e2bc9dd9e4a7', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'cbb35d379ac52943549b58128af24f682b53254f', 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: '4b8de6a6841bd6f087f8819febd3136742e535eb' }, h(TableFootRow, { key: 'cb2f446cd73c72e551378d73d5fb7089bcf9b8a0' }, h(TableFootCell, { key: '01098f6891794529ddfc1d7b1303706313694316', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'a907422b1d6246570d14862478154465c4ad59c9', 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

@@ -10,24 +10,14 @@ import { M as MapPayoutStatusToBadge } from './payouts-status.js';
 import { S as Skeleton } from './skeleton.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
 
-const PayoutDetailsLoading = () => (h("div", { class: "row gap-3" },
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "35%", height: "30px" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "70%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "40%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "40%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "100%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "80%" }))));
+const PayoutDetailsLoading = () => (h("div", { class: "row gap-3" }, h("div", { class: "col-12" }, h(Skeleton, { width: "35%", height: "30px" })), h("div", { class: "col-12" }, h(Skeleton, { width: "70%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "100%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "80%" }))));
 
 const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
         this.loading = true;
         this.errorMessage = null;
@@ -74,9 +64,9 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '73f8d47c383ee5e75d570551b85b5875756abfa9' }, this.loading && h(PayoutDetailsLoading, { key: 'edfae6a15aeef91fba70f9942157846cf6bf1148' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '15864ba1557f0d815ef9d1cf0c56b943f85d762f', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '8bfc8d9dc2c114b7ce5fd10f70cdd4a6bb8f2390', 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: 'd2871ba3d08fa0d1ceb16120a86e44b0cd2409e1', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cdd88c0018a68aa7f78b1f4713acac38262b763f', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'ec1e542ab548ef4f8d1879a6a7d50511f0b9c2e1', title: "ID", value: this.payout.id }), h("div", { key: '798a4ac96bb892cd19336fd420be31ae078f349f', class: "m-4" }, h(Button, { key: 'bf13d13182906611fe8968f1fdcd55fbe9df2278', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'abfb113b2ca7886ac862809d855cf69db70b59d8', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '418ea65833dc8273395152dc6d03fc90f8f1b499', sectionTitle: "Details" }), h("div", { key: 'ad254148623a0335e83ddb0c9164539fa91fd79e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '4fae616d86317e6a7d2526fdc173dfd5ebf0f71e', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b36f365baab61c4cf21d2010d12bd633a11ad725', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'ea27486a634e46f16a1a1ffb42bf24d0930e1411', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'cf3d249060f0922fee694c0fbba55c03144c43d2', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '671eabdea3c75af6219d00bfd433e608ab449281', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '99257f947894416f58a1bdcebd7868a7a976b42f', sectionTitle: "Account" }), h("div", { key: 'fdb3439056d6a58a677b73b3ec77629cd6e57866', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6a506eb78e41cd10850c724a68f1a0a02e08fdb9', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '659fbffb9ef6051db5787b38d6b4eaf7160b8565', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '6f56bd7d5ef75c434b02ca3989297cc661145bc3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '746d25a70d38ff9eba5a1984ad320063d9dc50f6', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '4b94711834f28cab64f3685e078069d766471d27', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: 'df22f127b90caaecd1c25fa7ceb2679a79422f27', sectionTitle: 'Metadata' }),
-            h("div", { key: 'c56bdeb40259fad8ff249e65db9c8207308e7cc5', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a9b8c7ee3fe8714c1fa5db79dd879e1b7da683ce', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: '142cd93a5538d48542c001dfaf8ecf0a8f0649e1' }, this.loading && h(PayoutDetailsLoading, { key: 'e4a301d09a48776c7cbc3c9b606e42558748301b' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '65c7a12cf23056d1940d08b0c3ff96368c601720', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'ef299affbf2facfb03f4af8f7d8933fb7cc0dac5', 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: '585d7d174f20f6b49e3fce34e0e236a89b90d083', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '6066bfdaef670375ae97453d84422228d2a5eead', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '7e526cbd6e31ca6139c8f31e7946749a59905fea', title: "ID", value: this.payout.id }), h("div", { key: 'eeeab1a03a0097c3c1be036d6f3f2a72dfb376dc', class: "m-4" }, h(Button, { key: 'ac90d236d37a925c157b99e1c348128bb0835060', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '3d01f52695bb407cba4a2166ebbd90d09580cbe9', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'ec7727a7c9a93bd51ae670f20c1453538676a95c', sectionTitle: "Details" }), h("div", { key: '469fad5f27810729811fba91c4a4275d27cbf18e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5f32a3e8631fdd2d047f5ccd933e200322d50de2', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '807284a840687b7257176366ff06f5150ba4a0ad', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '908464c42582f596e114c18f873ec3b3eac332ed', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '736b86cfb1cbfaad58e042e6a936db4237e5fbb7', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '919453e082a6f8534df07f3fd2cd0ffc6bf81539', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7b033d532fa94ddb0a6e53861d126a50601f8bdf', sectionTitle: "Account" }), h("div", { key: '373c6745a0ab57d21fa88e9a470e63bd8c0ad999', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ea140c2b46fd503a85c97ec9cd5859fa8c0fc8e3', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'd94a8db9bdc0f5ab359e3cb7b9c0cfb1002db550', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '5317a5bef89080a7e70732025ab030674fcb79c3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f46e83995276c83361933381bc620336ef44f166', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '933aee12e24e152a5a8628f303b7c7e9709baf64', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: '1e5233f88f9254c0a5525032470273e2f58ed59c', sectionTitle: 'Metadata' }),
+            h("div", { key: '63678c1f4eb207a4aced6f132e95c7cd646da9a3', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '7e5095e9be051524e8ab17ffe380b1315c5f7c98', metadata: this.payout.metadata }))
         ])))));
     }
     static get watchers() { return {

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

@@ -27,8 +27,7 @@ const payoutTableColumns = {
     csv: () => (h("th", { part: tableHeadCell, scope: "col", title: "Export CSV" })),
 };
 const payoutTableCells = (downloadCSV) => ({
-    created_at: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" }, convertToLocal(payout.created_at, { showDisplayDate: true })))),
+    created_at: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(payout.created_at, { showDisplayDate: true })))),
     sub_account_name: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.sub_account_name)),
     payments_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.payments_total))),
     refunds_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.refunds_total))),
@@ -36,14 +35,15 @@ const payoutTableCells = (downloadCSV) => ({
     other_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.other_total))),
     amount: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.amount))),
     status: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPayoutStatusToBadge(payout.status))),
-    csv: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout.id); } }, "CSV"))),
+    csv: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout.id); } }, "CSV"))),
 });
 
 const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.payouts = [];
@@ -173,7 +173,7 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '01d97366d41b48cacb348dd46be971daf830a8d5' }, h(TableComponent, { key: '9aa664d16807d0e90c349fea0d34784a1fe9cf25' }, h(TableHead, { key: 'f0039efcf46d63b8d426c99e9e5e4cfb7ff20ad7' }, h(TableHeadRow, { key: '3b9cd46c7cf917e8a83c5ac8c0bfbd35824b4b52' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '2dab432894511eabf5db8738763d33aecc632935' }, h(TableLoadingState, { key: 'f1442909f04f84becb562584fedcd12b08d4b3fc', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'af4311a420da0ef6624f470bcd3f579fdb3d912d', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '4fe8e5492b63b34f79fc52053a180329533b3689', 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: 'd6fa03ee9a542576814a81cc5705688392940753' }, h(TableFootRow, { key: '9954754fe9af5e1c30d18ebe6d65bac770338e43' }, h(TableFootCell, { key: '59354502b1c467a4ae4177b3e3c11cc9782255f3', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'acddece313974ac003ae7375be70a655039df38f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '503793db2fd72d3854bfa1eba2051bc822000a1a' }, h(TableComponent, { key: '1db195f7f1206bef7236ccd814c464c61b12f3d3' }, h(TableHead, { key: 'a61137a34fddf3f854102ec7a2964f127d7555f9' }, h(TableHeadRow, { key: '3d3c330e5758ccb4aa14bb7b5ae993d8d2c1718e' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'a483803ea8dd9db844f36f9f8c7a89e81d7322b4' }, h(TableLoadingState, { key: '10bee5e971e10b0313b9b411c292f8f65bf1cf82', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c8ec9f17a98baa81b4b1830eb8d0bfad45cc8ee1', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '94cd786053173ce22f797b0da263488cab9b5139', 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: '533bb1571ae70a03f60d13d5742296f425512919' }, h(TableFootRow, { key: '15924c92e5c9f2202066ebfa02aebc2c52fccee3' }, h(TableFootCell, { key: '48bd284c90d4ac044b5fd5f323c90fab5e9fdb5d', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'cfc4bc6b077267ced59bf8b2519ee0354e676560', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

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

@@ -1,39 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as radioListItem } from './parts.js';
-import { c as checkoutStore, P as PAYMENT_METHODS, o as onChange } from './checkout.store.js';
+import { c as checkoutStore, a as onChange } from './checkout.store.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
-import { A as Api } from './Api.js';
+import { P as PlaidService } from './plaid.service.js';
 import { C as ComponentErrorSeverity } from './Refund.js';
-import './Pagination.js';
-import './Business.js';
-import { d as defineCustomElement$2 } from './form-control-help-text2.js';
-import { d as defineCustomElement$1 } from './form-control-radio2.js';
+import { P as PAYMENT_METHODS } from './ModularCheckout.js';
 
 const plaidIconSvg = 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjggMjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY2xhc3M9ImNzcy0xcmRhajhtIj48ZyBmaWxsPSIjMTExIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNS43NjI5IDI2LjI2MjhMMjggMTcuNTMwOUwyNC45NjkxIDE0LjUwMDFMMjcuOTk5OSAxMS40NjkxTDI1Ljc2MjggMi43MzcwNkwxNy4wMzA5IDAuNUwxNC4wMDAxIDMuNTMxTDEwLjk2OSAwLjUwMDE0TDIuMjM3MDYgMi43MzczNEwwIDExLjQ2OTFMMy4wMzEyOCAxNC40OTk5TDAuMDAwMTQgMTcuNTMxTDIuMjM3MiAyNi4yNjI5TDEwLjk2OTEgMjguNUwxNC4wMDAxIDI1LjQ2OUwxNy4wMzEgMjguNDk5OUwyNS43NjI5IDI2LjI2MjhaTTE1LjczMjEgMjMuNzM3MUwxOC42MTg2IDIwLjg1MDVMMjIuMjkxMiAyNC41MjMzTDE3LjY5NTYgMjUuNzAwN0wxNS43MzIxIDIzLjczNzFaTTExLjExMzYgOS44ODE1NEwxNC4wMDAzIDYuOTk1MDJMMTYuODg2OCA5Ljg4MTRMMTQuMDAwMSAxMi43Njc5TDExLjExMzYgOS44ODE1NFpNMTIuMjY4MiAxNC41TDkuMzgxNTQgMTcuMzg2NUw2LjQ5NTAyIDE0LjVMOS4zODE1NCAxMS42MTM1TDEyLjI2ODIgMTQuNVpNMTguNjE4NyAxMS42MTMzTDIxLjUwNTMgMTQuNUwxOC42MTg2IDE3LjM4NjVMMTUuNzMyMSAxNC41TDE4LjYxODcgMTEuNjEzM1pNMTYuODg2NyAxOS4xMTg2TDE0LjAwMDEgMjIuMDA1MUwxMS4xMTM1IDE5LjExODVMMTQuMDAwMSAxNi4yMzE5TDE2Ljg4NjcgMTkuMTE4NlpNMTAuMzA0NCAyNS43MDA3TDUuNzA4NjQgMjQuNTIzM0w5LjM4MTU0IDIwLjg1MDRMMTIuMjY4MiAyMy43MzcxTDEwLjMwNDQgMjUuNzAwN1pNNC43NjMwOCAxNi4yMzE5TDcuNjQ5NiAxOS4xMTg1TDMuOTc2NyAyMi43OTE0TDIuNzk5MyAxOC4xOTU3TDQuNzYzMDggMTYuMjMxOVpNMy45NzY3IDYuMjA4MzZMNy42NDk3NCA5Ljg4MTRMNC43NjMwOCAxMi43NjgxTDIuNzk5MyAxMC44MDQxTDMuOTc2NyA2LjIwODM2Wk0xMi4yNjgzIDUuMjYyOTRMOS4zODE2OCA4LjE0OTZMNS43MDg5MiA0LjQ3NjdMMTAuMzA0NyAzLjI5OTNMMTIuMjY4MyA1LjI2Mjk0Wk0xNy42OTU5IDMuMjk5M0wyMi4yOTE1IDQuNDc2N0wxOC42MTg2IDguMTQ5NDZMMTUuNzMyMSA1LjI2Mjk0TDE3LjY5NTkgMy4yOTkzWk0yMy4yMzcyIDEyLjc2ODFMMjAuMzUwNSA5Ljg4MTRMMjQuMDIzMyA2LjIwODc4TDI1LjIwMDcgMTAuODA0NkwyMy4yMzcyIDEyLjc2ODFaTTI0LjAyMzMgMjIuNzkxNEwyMC4zNTA1IDE5LjExODZMMjMuMjM3MiAxNi4yMzIxTDI1LjIwMDcgMTguMTk1N0wyNC4wMjMzIDIyLjc5MTRaIj48L3BhdGg+PC9nPjwvc3ZnPgo=';
 
-const api = Api();
-class PlaidService {
-    async getLinkToken(authToken, accountId, checkoutId, signal) {
-        const endpoint = `plaid/${accountId}/link`;
-        const body = { checkout_id: checkoutId };
-        return api.post({ endpoint, body, authToken, signal });
-    }
-    async tokenizeBankAccount(authToken, accountId, publicToken, linkTokenId, paymentMethodGroupId, signal) {
-        const endpoint = `plaid/${accountId}/tokenize`;
-        const body = { public_token: publicToken };
-        if (linkTokenId) {
-            body.link_token_id = linkTokenId;
-        }
-        if (paymentMethodGroupId) {
-            body.payment_method_group_id = paymentMethodGroupId;
-        }
-        return api.post({ endpoint, body, authToken, signal });
-    }
-}
-
 // Plaid-specific error codes
 var PlaidErrorCodes;
 (function (PlaidErrorCodes) {
@@ -84,9 +60,11 @@ const PLAID_ERROR_SEVERITY = {
     [PlaidErrorCodes.PLAID_RATE_LIMITED]: ComponentErrorSeverity.WARNING,
 };
 const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMethod extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
         this.plaidError = createEvent(this, "plaidError", 7);
@@ -118,25 +96,6 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
                 }, 100);
             }
         };
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            // Update local selection state
-            this.isSelected = true;
-            // Update store selection
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
-            // Emit selection event
-            this.paymentMethodOptionSelected.emit(PAYMENT_METHODS.PLAID);
-            // If there's an error, clear it and try to initialize again
-            if (this.error) {
-                this.clearError();
-                this.waitForStoreAndInitialize();
-                return;
-            }
-            // If Plaid Link is ready and no public token exists, open Plaid Link
-            if (this.plaidLink && !this.publicToken && !this.isAuthenticating) {
-                this.openPlaidLink();
-            }
-        };
         this.initializePlaidLink = async () => {
             try {
                 // Check if Plaid is available globally
@@ -219,6 +178,9 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
                 this.linkToken = response.data.link_token;
                 // Try to capture link token id if present in envelope
                 this.linkTokenId = (response === null || response === void 0 ? void 0 : response.id) || ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.id) || null;
+                if (this.linkTokenId) {
+                    checkoutStore.plaidLinkTokenId = this.linkTokenId;
+                }
             }
             catch (error) {
                 // Clear timeout
@@ -290,7 +252,7 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
             // Ensure the component remains selected after successful authentication
             if (!this.isSelected) {
                 this.isSelected = true;
-                checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+                checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
             }
             // Emit success event for parent components
             this.plaidErrorRecovered.emit({
@@ -298,41 +260,10 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
                 message: 'Bank account connected successfully',
                 severity: ComponentErrorSeverity.INFO
             });
-            // Immediately exchange the public token for a payment method token via backend
-            this.exchangePublicTokenForPaymentMethod();
-        };
-        this.exchangePublicTokenForPaymentMethod = async () => {
-            var _a;
-            if (!this.publicToken) {
-                console.error('[PlaidPaymentMethod] exchange: missing publicToken');
-                return;
-            }
-            if (!checkoutStore.authToken || !checkoutStore.accountId) {
-                console.error('[PlaidPaymentMethod] exchange: missing auth/account context');
-                return;
-            }
-            try {
-                const response = await this.plaidService.tokenizeBankAccount(checkoutStore.authToken, checkoutStore.accountId, this.publicToken, this.linkTokenId || undefined, checkoutStore.savePaymentMethod ? checkoutStore.paymentMethodGroupId : undefined);
-                if (response === null || response === void 0 ? void 0 : response.error) {
-                    console.error('[PlaidPaymentMethod] exchange: backend error', response.error);
-                    return;
-                }
-                // Extract token from payment method response
-                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
-                const token = ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _a === void 0 ? void 0 : _a.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
-                if (!token) {
-                    console.error('[PlaidPaymentMethod] exchange: no token in response');
-                    return;
-                }
-                // Save for downstream submit flows
-                checkoutStore.paymentToken = token;
-            }
-            catch (err) {
-                console.error('[PlaidPaymentMethod] exchange: exception', {
-                    message: (err === null || err === void 0 ? void 0 : err.message) || String(err),
-                });
-            }
+            // Store public token in checkout store; exchange will be handled on submit
+            checkoutStore.plaidPublicToken = publicToken;
         };
+        // Exchange logic moved to Modular Checkout submit flow.
         this.handlePlaidExit = (err, _metadata) => {
             this.isAuthenticating = false;
             if (err) {
@@ -471,16 +402,26 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
         };
         // Watch for store changes to sync component state
         this.syncWithStore = () => {
-            const shouldBeSelected = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.PLAID;
+            var _a;
+            const shouldBeSelected = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.PLAID;
             if (this.isSelected !== shouldBeSelected) {
                 this.isSelected = shouldBeSelected;
             }
         };
     }
     onSelectionChange(newValue) {
+        var _a;
         // Ensure store is updated when component selection changes
-        if (newValue && checkoutStore.selectedPaymentMethod !== PAYMENT_METHODS.PLAID) {
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+        if (newValue && ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) !== PAYMENT_METHODS.PLAID) {
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
+        }
+        // Auto-start Plaid flow when selected and ready
+        if (newValue &&
+            this.plaidLink &&
+            !this.publicToken &&
+            !this.isAuthenticating &&
+            !this.error) {
+            this.openPlaidLink();
         }
     }
     componentDidRender() {
@@ -502,8 +443,9 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
         };
     }
     componentWillLoad() {
+        var _a;
         // Initialize selection state based on store
-        this.isSelected = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.PLAID;
+        this.isSelected = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.PLAID;
     }
     async resolvePaymentMethod() {
         if (!this.publicToken) {
@@ -520,17 +462,29 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
     // Returns a usable payment method token for checkout completion.
     // Will perform the backend exchange if the token is not yet present in the store.
     async getPaymentToken() {
-        if (checkoutStore.paymentToken) {
-            return checkoutStore.paymentToken;
-        }
-        await this.exchangePublicTokenForPaymentMethod();
         return checkoutStore.paymentToken;
     }
+    async handleSelectionClick() {
+        // Update local selection state
+        this.isSelected = true;
+        // Update store selection
+        checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
+        // If there's an error, clear it and try to initialize again
+        if (this.error) {
+            this.clearError();
+            this.waitForStoreAndInitialize();
+            return;
+        }
+        // If Plaid Link is ready and no public token exists, open Plaid Link
+        if (this.plaidLink && !this.publicToken && !this.isAuthenticating) {
+            this.openPlaidLink();
+        }
+    }
     // Method to handle external selection changes (e.g., from other payment methods)
     async setSelected(selected) {
         this.isSelected = selected;
         if (selected) {
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
         }
     }
     // Method to check if component is currently selected
@@ -637,7 +591,7 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
             }
             return null;
         };
-        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, title: "Pay with Plaid" }, h("form-control-radio", { name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: this.isSelected, label: h("div", null, h("div", null, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState()) }))));
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { title: "Pay with Plaid" }, h("div", { onClick: (event) => { event.preventDefault(); this.handleSelectionClick(); } }, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState())));
     }
     static get watchers() { return {
         "isSelected": ["onSelectionChange"]
@@ -654,6 +608,7 @@ const PlaidPaymentMethod = /*@__PURE__*/ proxyCustomElement(class PlaidPaymentMe
         "isRetrying": [32],
         "resolvePaymentMethod": [64],
         "getPaymentToken": [64],
+        "handleSelectionClick": [64],
         "setSelected": [64],
         "isCurrentlySelected": [64],
         "deselect": [64],
@@ -668,23 +623,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-plaid-payment-method", "form-control-help-text", "form-control-radio"];
+    const components = ["justifi-plaid-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-plaid-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PlaidPaymentMethod);
             }
             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();

package/dist/module/plaid.service.js

@@ -0,0 +1,26 @@
+import { A as Api } from './Api.js';
+import './Refund.js';
+import './Pagination.js';
+import './Business.js';
+
+const api = Api();
+class PlaidService {
+    async getLinkToken(authToken, accountId, checkoutId, signal) {
+        const endpoint = `plaid/${accountId}/link`;
+        const body = { checkout_id: checkoutId };
+        return api.post({ endpoint, body, authToken, signal });
+    }
+    async tokenizeBankAccount(authToken, accountId, publicToken, linkTokenId, paymentMethodGroupId, signal) {
+        const endpoint = `plaid/${accountId}/tokenize`;
+        const body = { public_token: publicToken };
+        if (linkTokenId) {
+            body.link_token_id = linkTokenId;
+        }
+        if (paymentMethodGroupId) {
+            body.payment_method_group_id = paymentMethodGroupId;
+        }
+        return api.post({ endpoint, body, authToken, signal });
+    }
+}
+
+export { PlaidService as P };

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

@@ -14,9 +14,11 @@ const ProductOrServiceSchema = create$3({
 });
 
 const ProductOrService = /*@__PURE__*/ proxyCustomElement(class ProductOrService extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.documentErrors = {};
         this.errors = {};
         this.documents = { service_documentation: [] };
@@ -39,7 +41,7 @@ const ProductOrService = /*@__PURE__*/ proxyCustomElement(class ProductOrService
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'f1f7d30bd481b5e3b49d9aaffd6e9bc1266b3c17' }, h("div", { key: 'c41caefa4937db6b0669cd28e84b6918c719d8f0', class: "row gy-3" }, h("div", { key: 'be3b622f366017c7a8bdddfc363a0a46216de2ea', class: "col-12" }, h("h2", { key: '39374858f492c6e20e637dab0c73356fb6c6499d', class: "h5", part: heading5 }, "Product & Service Details")), h("div", { key: 'c910f0b2a6c1574f2b09348e4d3b889a675bbfeb', class: "col-12" }, h("form-control-text", { key: '636616c14d388dd25c33d81220231f2e7b36ec2f', 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: '44da2982c48cd5da994aec38f5196205b25c4868', class: "col-12" }, h("form-control-date", { key: '6b5ff071f9e941caaadff9fbaf18501524f71fce', 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: '8ae3d7fbc3826f932ee14d98a48d90cf913606af', class: "col-12" }, h("form-control-file-v2", { key: '5990ebe0df1e74fd7b1d6a6cf1dd8d08cd680a68', 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: '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 })))));
     }
 }, [256, "justifi-product-or-service", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/refund-policy.js

@@ -14,9 +14,11 @@ const RefundPolicySchema = create$3({
 });
 
 const RefundPolicy = /*@__PURE__*/ proxyCustomElement(class RefundPolicy extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.documentErrors = {};
         this.errors = {};
         this.documents = { refund_policy: [], receipt: [] };
@@ -39,7 +41,7 @@ const RefundPolicy = /*@__PURE__*/ proxyCustomElement(class RefundPolicy extends
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '75d1e4a99166f8b8f112746fd5a786ed4b41b6ae' }, h("div", { key: 'c4a137ad32f0a0e5580061b1cc2443399d5baf15', class: "row gy-3" }, h("div", { key: '8b864aacd4b1334f9a5e7ffdf116345db20aac58', class: "col-12" }, h("h2", { key: 'e319c7e0d2ebedf204e6845fb977651b96f4a9b8', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: '72cc1aff194c70395f8002b4af6842cd42046d80', class: "col-12" }, h("form-control-textarea", { key: '798219393da9f68198205bb877a5a3aa2ac2d1bb', 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: 'bc0d341abb63327da6d97fba120c34aebabd50b3', class: "col-12" }, h("form-control-textarea", { key: '2aa931300951be7897d9ba4adeda6be5e94a00d8', 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: 'c3cad588c5b40a6133920a0c43f71d7b172abdab', class: "col-12" }, h("form-control-file-v2", { key: '8f2184a0d95804a85d61de763c14b1a6fb44c566', 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: '183f6286e96694e54fd31213b514349a43d0446f', class: "col-12" }, h("form-control-file-v2", { key: 'e3f97404946c8e6a813d397141d10e372df5f520', 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: '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 })))));
     }
 }, [256, "justifi-refund-policy", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/representative-details2.js

@@ -3,9 +3,11 @@ import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { i as isEmptyObject, f as formatMediumDate } from './utils2.js';
 
 const JustifiRepresentativeDetails = /*@__PURE__*/ proxyCustomElement(class JustifiRepresentativeDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;

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

@@ -7,11 +7,14 @@ import { c as checkoutStore } from './checkout.store.js';
 import { d as defineCustomElement$1 } from './form-control-checkbox2.js';
 
 const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPaymentMethod extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.checkboxChanged = createEvent(this, "checkboxChanged", 7);
+        this.label = 'Save New Payment Method';
         this.isChecked = false;
         this.handleCheckboxChange = (_name, value) => {
             this.isChecked = value;
@@ -20,9 +23,10 @@ const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPayme
         };
     }
     render() {
-        return (h(StyledHost, { key: '407e24ad9cd84378dab6a85ed813a8040f93942a' }, h("form-control-checkbox", { key: '73dc01e01c4ca57e26c6897c06a0280fda8c98db', label: "Save New Payment Method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (h(StyledHost, { key: '0ac7e7b80c9a00737eed4f9345020994eb5d92bf' }, h("form-control-checkbox", { key: '3396c0a413c3d498d7cdccc12ad97739d97f74c8', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
 }, [257, "justifi-save-new-payment-method", {
+        "label": [1],
         "isChecked": [32]
     }]);
 function defineCustomElement() {

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

@@ -4,30 +4,31 @@ import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
-import { P as PAYMENT_METHODS, c as checkoutStore, a as PAYMENT_METHOD_TYPES } from './checkout.store.js';
+import { c as checkoutStore } from './checkout.store.js';
 import { C as CardBrandLabels } from './payment-method-option-utils.js';
+import { P as PAYMENT_METHODS } from './ModularCheckout.js';
 import { d as defineCustomElement$2 } from './form-control-help-text2.js';
 import { d as defineCustomElement$1 } from './form-control-radio2.js';
 
 const SavedPaymentMethods = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMethods extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.onPaymentMethodOptionClick = (paymentMethod) => (e) => {
             e.preventDefault();
-            const SELECTED_PAYMENT_METHODS = {
-                [PAYMENT_METHOD_TYPES.CARD]: PAYMENT_METHODS.SAVED_CARD,
-                [PAYMENT_METHOD_TYPES.BANK_ACCOUNT]: PAYMENT_METHODS.SAVED_BANK_ACCOUNT,
-            };
-            checkoutStore.selectedPaymentMethod = SELECTED_PAYMENT_METHODS[paymentMethod.type];
+            checkoutStore.selectedPaymentMethod = { id: paymentMethod.id, type: paymentMethod.type };
             checkoutStore.paymentToken = paymentMethod.id;
         };
-        this.isAllowedPaymentMethod = (paymentMethod) => {
-            if (paymentMethod.type === PAYMENT_METHOD_TYPES.CARD && checkoutStore.disableCreditCard) {
+        this.isAllowedPaymentMethod = (paymentMethodType) => {
+            const isCard = paymentMethodType === PAYMENT_METHODS.SAVED_CARD;
+            const isBankAccount = paymentMethodType === PAYMENT_METHODS.SAVED_BANK_ACCOUNT;
+            if (isCard && checkoutStore.disableCreditCard) {
                 return false;
             }
-            if (paymentMethod.type === PAYMENT_METHOD_TYPES.BANK_ACCOUNT && checkoutStore.disableBankAccount) {
+            if (isBankAccount && checkoutStore.disableBankAccount) {
                 return false;
             }
             return true;
@@ -46,7 +47,7 @@ const SavedPaymentMethods = /*@__PURE__*/ proxyCustomElement(class SavedPaymentM
             return null;
         }
         return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
-            .filter(this.isAllowedPaymentMethod)
+            .filter((paymentMethod) => this.isAllowedPaymentMethod(paymentMethod.type))
             .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.paymentToken === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
     }
 }, [257, "justifi-saved-payment-methods"]);