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

package/dist/module/table-filters-menu2.js

@@ -11,9 +11,11 @@ const hasFilters = (params) => {
 };
 
 const TableFiltersMenu = /*@__PURE__*/ proxyCustomElement(class TableFiltersMenu extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.showClearButton = false;
     }
     watchParamsHandler(newValue) {
@@ -29,7 +31,7 @@ const TableFiltersMenu = /*@__PURE__*/ proxyCustomElement(class TableFiltersMenu
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'b270a6f9e52e45e958bb02e31569d4f56135ee25', class: "d-flex gap-2" }, h("div", { key: '76d9eef0672c27ec28a95bc062f946739a2c5dc7', class: "dropdown pb-3" }, h("button", { key: '3de6afb2c92bde835ae894e7548b3e07b86fb0bf', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: 'de744460fb721b5949ca0cfcf6a751e4b6a008d0', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'c8b6d3e8e28b90fb3dedd80e71c7a8a0f30b6a8f', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '44e50fab6d4f6c7a76f90659cced1c61e94ec43d' })))), h("div", { key: 'b5ec37cc1f28005c2b87b14bd10b74e619012ce5' }, h(Button, { key: '5bae9de44fcdb6e015ac3311945bdcee1887e827', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'db1619bbaa73d4102c684b2ca1b4897d1c36fa66', class: "d-flex gap-2" }, h("div", { key: '68f4538d4465aadbf20e322264e219ce7ca8078a', class: "dropdown pb-3" }, h("button", { key: 'cc1835756c1fa2a24a4bbc4ec2960caca0d24e75', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '14f88ecd195fcf3770cadd71659b00d4c117c460', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'd33a6875f30413f3a2f5b8d706cf0bf0e3d6620a', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '5923bb3684fc9f710a6686d9bf90a6d0f35a1818' })))), h("div", { key: 'eba66abc4ef60bf7603fd9459cf4040ed6105e8c' }, h(Button, { key: 'f5de28962ac56636904cee2a5e5d41204e07143c', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get watchers() { return {
         "params": ["watchParamsHandler"]

package/dist/module/table.js

@@ -35,8 +35,7 @@ const TableEmptyState = (props) => {
     if (!columnSpan || !isEmpty) {
         return null;
     }
-    return (h("tr", null,
-        h("td", { class: "empty-state", part: tableEmpty, colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
+    return (h("tr", null, h("td", { class: "empty-state", part: tableEmpty, colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
 };
 
 const TableErrorState = (props) => {
@@ -44,10 +43,7 @@ const TableErrorState = (props) => {
     if (!columnSpan || !errorMessage) {
         return null;
     }
-    return (h("tr", null,
-        h("td", { class: "error-state", part: tableError, colSpan: columnSpan, "data-test-id": "table-error-state", style: { textAlign: 'center' } },
-            "An unexpected error occurred: ",
-            errorMessage)));
+    return (h("tr", null, h("td", { class: "error-state", part: tableError, colSpan: columnSpan, "data-test-id": "table-error-state", style: { textAlign: 'center' } }, "An unexpected error occurred: ", errorMessage)));
 };
 
 const TableLoadingState = (props) => {
@@ -55,9 +51,7 @@ const TableLoadingState = (props) => {
     if (!columnSpan || !isLoading) {
         return null;
     }
-    return (h("tr", null,
-        h("td", { class: "loading-state", part: tableCell, colSpan: columnSpan, style: { textAlign: 'center' } },
-            h(Spinner, null))));
+    return (h("tr", null, h("td", { class: "loading-state", part: tableCell, colSpan: columnSpan, style: { textAlign: 'center' } }, h(Spinner, null))));
 };
 
 class Table {

package/dist/module/terminal-orders-list-core2.js

@@ -63,12 +63,8 @@ const terminalOrdersTableColumns = {
     quantity: () => (h("th", { part: tableHeadCell, scope: "col", title: "The number of terminals associated with the order" }, "Order Quantity")),
 };
 const terminalOrdersTableCells = {
-    created_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showDisplayDate: true })),
-        h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showTime: true })))),
-    updated_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showDisplayDate: true })),
-        h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showTime: true })))),
+    created_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showTime: true })))),
+    updated_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showTime: true })))),
     order_status: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapTerminalOrderStatusToBadge(terminalOrder.order_status))),
     business_id: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.business_id)),
     company_name: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.company_name)),
@@ -87,9 +83,11 @@ const terminalOrdersTableCells = {
 };
 
 const TerminalOrdersListCore = /*@__PURE__*/ proxyCustomElement(class TerminalOrdersListCore 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.terminalOrders = [];
@@ -166,7 +164,7 @@ const TerminalOrdersListCore = /*@__PURE__*/ proxyCustomElement(class TerminalOr
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'ae7811542ecbc0626fe3f77ee4b8dfc3157d3abf' }, h(TableComponent, { key: '2f933c6598a21e02d3dd8b5918702fc29843105c' }, h(TableHead, { key: '0b978eef17f17e9a7b3dbaacc6dd2b17a9672b04' }, h(TableHeadRow, { key: '5f47570ef1df9dbfd520ae04b45cbb259e37af8e' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '1d5a979390e41a9dba5a0eb23923c3056f02e8cf' }, h(TableLoadingState, { key: '59e22dadecd2849bc44f6bcd2c11998f4120ea60', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'f2b13ad54fc0fd1ac72889cbd0d4f79cd30fd481', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '0ad5ad03ed5ac1cbfc0614689913831c80831646', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.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: '353a7c374a71d5cd2706f7d4e33631f4a1b194e5' }, h(TableFootRow, { key: '4706433521171f8e026a1ff789cad0e1b219f214' }, h(TableFootCell, { key: '30b078f32ac4bb5bd3dd91d0016f13ee5eff01f8', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '3301ac2f23e8c8da065005bd6aed224a26bb59fc', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'a8131df17851ab1468e025932371fa4b97ccc144' }, h(TableComponent, { key: '0fc81f64fb8a8f138f25c70522d046921edbd094' }, h(TableHead, { key: '7cc8be0184008cf08128eb1f241ab670538ecc65' }, h(TableHeadRow, { key: '5a7aa37a2b8f02469ca6c703e098da9431c0b45f' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: 'ff32aad8d5c4f319550d47ae1e0f77b617aa3d70' }, h(TableLoadingState, { key: 'dcc25430c77867a2c9639eba359c0d54cbacb73a', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '474ecda7420d595f49777f31910a380b48a8a1bc', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'd91e28581823ca91778159914157a003b011caaf', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.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: '6dea4a93ab757d35916b9351e4e5fa7f76b4afd9' }, h(TableFootRow, { key: '5098c2d994bb0ba397bc94d7a0e9419b06e582a5' }, h(TableFootCell, { key: '5a8f90708691987f672cde0c102323225568d989', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '509e53f4c070fc9a8b479dc673c526417aceb5ef', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/terminal-quantity-selector2.js

@@ -4,9 +4,11 @@ import { d as defineCustomElement$2 } from './custom-popper2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const TerminalQuantitySelector = /*@__PURE__*/ proxyCustomElement(class TerminalQuantitySelector extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.selectedQuantityChange = createEvent(this, "selectedQuantityChange", 7);
         this.limit = Infinity;
         this.selectedQuantity = 0;
@@ -24,7 +26,7 @@ const TerminalQuantitySelector = /*@__PURE__*/ proxyCustomElement(class Terminal
         };
     }
     render() {
-        return (h("div", { key: '743e380fab2774245896bab10832b709d51c59fa', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '712c492c6d0f7e544e47b5292e4ad997efa820d9', class: "d-flex gap-3" }, h("div", { key: '8a99a1e1f0fb100cc5ee0a4654d5540c8667ed9d', class: "d-flex align-items-center" }, h("img", { key: 'c4ba1c6a2aa3a1e9849a1f2973fb18e6d063b931', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: 'f201217ae96374f9c7ee7baabe139063322c12f4', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '72aad03990ac9264678975388197a53d46c784f7', class: "row" }, h("div", { key: 'fe6b6c7c4760af00b7c09f5fb004effc99a50625', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '27ff88dcc68f4579bcdf57f3f309117866f60a1f', helpText: this.description })), h("div", { key: '5facc068f3f85b10e00664430682103bcead8178', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: 'ba1536b53c2c3f40f35d84ea015062273fdade3e', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '8a1224aa17f4908693e26b7cebb1b882ff079026', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'a9571114d42c80851635edf466f5cd0ea6fc0dab', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '852621f3c36375e9c300201e4405c95501488c6d', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '1695cd25eaf56619ef4cc39d81c11ca9b6a5cd45', class: "d-flex gap-3" }, h("div", { key: '9930b0bd8881bc70bc5bdb2b31428980ec83a49b', class: "d-flex align-items-center" }, h("img", { key: 'ac71b5e64fd9081e8dc9c962cac1e747f2234fc4', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '0d575087df793cdeaf7bc04744d60647ea7d563f', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '35f18a705ee606a825c8ad7a6ebe449e6941e4e5', class: "row" }, h("div", { key: 'bf4f916904479fc7abf3167cacd9a655709a5048', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '1a96f19f6f9732c5f8d9dbb2405de2d3f24b142d', helpText: this.description })), h("div", { key: 'af1ca75c5134c832d8f64b63833b7494c8c11ca5', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '0d400a00a808c508ba870dc8e37d597581dd86ae', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '4348aef4cf19c02c574242f82061087e74e82617', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '75791dfdb7861bb7c1e4a2dc5376bceb12a19009', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
 }, [256, "terminal-quantity-selector", {
         "modelName": [1, "model-name"],

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

@@ -10,7 +10,7 @@ import { T as TableClickActions } from './event-types.js';
 import './justifi-radio-list-item2.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
 import { v as tableHeadCell, a8 as getAlternateTableCellPart } from './parts.js';
-import { j as capitalFirstLetter } from './utils2.js';
+import { k as capitalFirstLetter } from './utils2.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './terminals-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -64,9 +64,11 @@ const terminalTableCells = {
 };
 
 const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCore 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.terminals = [];
@@ -180,7 +182,7 @@ const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'bf90dd5593c53e9ff39fffe62dc592d016badf63' }, h(TableComponent, { key: '158d9c72e9833e5d9aabadbe2c34659691feb41e' }, h(TableHead, { key: 'd949cfbf188ca38a42608684af32da640caa3132' }, h(TableHeadRow, { key: 'e720a7fe1d425905186c9e8fd3925ade2c037804' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: 'b8b518d93df15fb7050828bcc0a610426d99ec51' }, h(TableLoadingState, { key: 'a815d8a30476844a7ebdd8e43ffae7c1cafcb4fe', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'd2eca381346455a2292c9640c06005ab8681e36a', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'ce65f5c7c3db47d61f6d5c5e053d93a4bc9bb4a1', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.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: 'ed2e3d233e29a27be2e467e864c7758e9b771049' }, h(TableFootRow, { key: 'baef41fe45c46b2e4951783170933947127f3e08' }, h(TableFootCell, { key: 'a0f64165a750e872469d614ae63ea580ae38d347', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'ab865a2014823308aab0c7230111d870a326b794', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '27022f23dcede378c6a6d16bffb040aa6448f4be' }, h(TableComponent, { key: '5d369cf93698adb50b843f65c747672abeb74cb4' }, h(TableHead, { key: '21173a74ccb82d7c3278157dae4ef3d471dbee5f' }, h(TableHeadRow, { key: '43e425567500ff324fd6ed68647a9504df812bf6' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '1151ee93144161308f8b27b0172acb32d2096d25' }, h(TableLoadingState, { key: '353fb24dfbd941e8bba6f62799e0feea42d05c53', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'daa19b965b5519e766ba8bbb63cfc4327128bf22', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'ee44061fa93cd20a59040a7b3faaeac10a925810', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.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: '12cb09495ba8d416fd3593ccae4f205735226ecf' }, h(TableFootRow, { key: 'da2e2695e6101193db9f67a0a76ce1ce8abdc646' }, h(TableFootCell, { key: 'bffd81b4e90e668caa47813f96ab1a7764fa0f1b', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '61c268da3402e0675f54515617a6bd2d58834e17', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

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

@@ -9,7 +9,8 @@ import './dinero.js';
 import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './Refund.js';
 import './Pagination.js';
 import './Business.js';
-import { c as checkoutStore, P as PAYMENT_METHODS } from './checkout.store.js';
+import { c as checkoutStore } from './checkout.store.js';
+import { P as PAYMENT_METHODS } from './ModularCheckout.js';
 import { d as defineCustomElement$i } from './custom-popper2.js';
 import { d as defineCustomElement$h } from './form-control-checkbox2.js';
 import { d as defineCustomElement$g } from './form-control-help-text2.js';
@@ -40,9 +41,11 @@ const ERROR_MESSAGES = {
     VALIDATION_ERROR: 'Validation error',
 };
 const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePaymentMethod extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
         this.computedHideSubmitButton = false;
@@ -69,7 +72,7 @@ const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePay
     }
     handleRadioClick(event) {
         this.selectedPaymentMethod = event.detail;
-        checkoutStore.selectedPaymentMethod = event.detail;
+        checkoutStore.selectedPaymentMethod = { type: event.detail };
     }
     async fillBillingForm(fields) {
         var _a;
@@ -161,11 +164,11 @@ const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePay
         }
         if (!this.disableCreditCard) {
             this.selectedPaymentMethod = PAYMENT_METHODS.NEW_CARD;
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.NEW_CARD;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_CARD };
         }
         else if (!this.disableBankAccount) {
             this.selectedPaymentMethod = PAYMENT_METHODS.NEW_BANK_ACCOUNT;
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_BANK_ACCOUNT };
         }
     }
     setComputedHideSubmitButton() {
@@ -264,17 +267,17 @@ const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePay
         return this.disableCreditCard || this.disableBankAccount;
     }
     renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethod === paymentMethodType;
+        const isSelected = this.selectedPaymentMethod === paymentMethodType && checkoutStore.selectedPaymentMethod.id === undefined;
         return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
     }
-    renderSelectedPaymentMethodForm(paymentMethodId) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID }))));
+    renderSelectedPaymentMethodForm(paymentMethodType) {
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
     }
-    renderPaymentMethodForm(paymentMethodId) {
-        return paymentMethodId === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+    renderPaymentMethodForm(paymentMethodType) {
+        return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: '86f4eb7ae1ee329384e6bde2fdf1d7035a341488' }, h("form", { key: 'e3433176ea56ca9cbf831c9c4a8c2cfb3e41707a' }, h("fieldset", { key: 'c130d134bc8e5642881250586e8099e8eee7090b' }, h("div", { key: '0ff386b78ce610a22ddeed10b29a170259197f10', class: "row gy-3" }, h("div", { key: '020e8750dd774723083a84a4a4dc0637644ccd25', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'b3b53bca5369986e892913a87d7f77a463706015', class: "col-12" }, h("justifi-button", { key: '5f7a195926440cf5fba38b4f5781d45b6959ad6d', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h(StyledHost, { key: '5fc5dad15215fe24b421f4d6c13355fb849b8a76' }, h("form", { key: '0e0330e5b11ee3ae0bef9e092fa2fb2a0a6af3e7' }, h("fieldset", { key: 'ee4c026ccda62a249e019a9e105e40ea465fc400' }, h("div", { key: '15a8a86fa5be8a545745260d76a8c3b2569d6a0e', class: "row gy-3" }, h("div", { key: 'bbbeed6ee96311394a876b4beb206e8e335184c2', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'da2a2009abe4348e25a5fc712557e81e9f6c4c1f', class: "col-12" }, h("justifi-button", { key: '050939c757999383226f281ee0eff1ec178be203', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -291,6 +294,7 @@ const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePay
         "hideSubmitButton": [4, "hide-submit-button"],
         "paymentMethodGroupId": [1, "payment-method-group-id"],
         "submitButtonText": [1, "submit-button-text"],
+        "savePaymentMethodLabel": [1, "save-payment-method-label"],
         "computedHideSubmitButton": [32],
         "isLoading": [32],
         "selectedPaymentMethod": [32],

package/dist/module/utils.js

@@ -1,22 +1,11 @@
 import { h } from '@stencil/core/internal/client';
 import { h as heading2, t as text, a as heading1 } from './parts.js';
 
-const ErrorState = (errorMessage) => (h("main", { class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } },
-    h("p", { part: text }, errorMessage)));
+const ErrorState = (errorMessage) => (h("main", { class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("p", { part: text }, errorMessage)));
 const DetailSectionTitle = (props) => (h("h2", { part: heading2, class: "mt-4 fs-5 border-bottom pb-3" }, props.sectionTitle));
-const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" },
-    h("span", { class: "fw-bold d-table-cell px-2", part: text }, title),
-    h("span", { class: "flex-1 d-table-cell px-2 text-wrap", part: text }, value))) : null;
-const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { class: `d-flex flex-column ${classes}` },
-    h("span", { class: "fw-bold border-1 border-bottom ps-2 pe-2", part: heading2 }, title),
-    h("span", { class: "pt-2 ps-2 pe-2", part: text }, value)));
-const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, class: "p-2" },
-    h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" },
-        h("h1", { class: "m-0", part: heading1 }, title),
-        badge),
-    h("div", { class: "d-flex flex-row align-items-top", part: text }, children)));
-const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: 'mt-4' },
-    h("pre", { class: "p-2", "aria-label": "metadata content" },
-        h("code", null, JSON.stringify(metadata, null, 2))))) : null;
+const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" }, h("span", { class: "fw-bold d-table-cell px-2", part: text }, title), h("span", { class: "flex-1 d-table-cell px-2 text-wrap", part: text }, value))) : null;
+const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { class: `d-flex flex-column ${classes}` }, h("span", { class: "fw-bold border-1 border-bottom ps-2 pe-2", part: heading2 }, title), h("span", { class: "pt-2 ps-2 pe-2", part: text }, value)));
+const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: heading1 }, title), badge), h("div", { class: "d-flex flex-row align-items-top", part: text }, children)));
+const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: 'mt-4' }, h("pre", { class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(metadata, null, 2))))) : null;
 
 export { CodeBlock as C, DetailSectionTitle as D, ErrorState as E, DetailItem as a, EntityHeadInfo as b, EntityHeadInfoItem as c };

package/dist/module/utils2.js

@@ -22295,5 +22295,10 @@ function generateId(length = 10) {
     }
     return result;
 }
+function generateTabId() {
+    var _a;
+    return (((_a = crypto.randomUUID) === null || _a === void 0 ? void 0 : _a.call(crypto)) ||
+        `${Date.now()}-${Math.random().toString(36).slice(2)}`);
+}
 
-export { formatDate as a, formatTimeSeconds as b, formatCurrency as c, formatTime as d, convertToLocal as e, formatMediumDate as f, generateId as g, convertToUTC as h, isEmptyObject as i, capitalFirstLetter as j, formatDisplayDate as k, addAttribute as l, formatPhoneNumber as m, processHTML as p, removeAttribute as r, snakeCaseToHumanReadable as s };
+export { formatDate as a, formatTimeSeconds as b, formatCurrency as c, formatTime as d, convertToLocal as e, formatMediumDate as f, generateId as g, convertToUTC as h, isEmptyObject as i, generateTabId as j, capitalFirstLetter as k, formatDisplayDate as l, addAttribute as m, formatPhoneNumber as n, processHTML as p, removeAttribute as r, snakeCaseToHumanReadable as s };

package/dist/types/api/Checkout.d.ts

@@ -1,5 +1,6 @@
 import { IApiResponse } from './Api';
 import { CurrencyTypes } from './Payment';
+import { PAYMENT_METHOD_TYPES } from '../components/modular-checkout/ModularCheckout';
 export interface IBnpl {
     provider: string;
     provider_client_id: string;
@@ -48,19 +49,7 @@ export interface ICheckout {
     payment_amount: number;
     payment_client_id: string;
     payment_description: string;
-    payment_methods: {
-        id: string;
-        status: string;
-        invalid_reason: null;
-        name: string;
-        brand: string;
-        acct_last_four: string;
-        month: string;
-        year: string;
-        address_line1_check: string;
-        address_postal_code_check: string;
-        bin_details: null;
-    }[];
+    payment_methods: ICheckoutPaymentMethod[];
     payment_method_group_id: string;
     payment_settings: {
         ach_payments: boolean;
@@ -155,14 +144,17 @@ export interface CheckoutsQueryParams {
     status?: ICheckoutStatus;
     payment_mode?: ICheckoutPaymentMode;
 }
+export type CardBrand = 'visa' | 'mastercard' | 'american_express' | 'discover' | 'jcb' | 'diners_club' | 'unionpay';
+export type AccountType = 'checking' | 'savings';
 export interface ICheckoutPaymentMethod {
     id: string;
-    type?: string;
+    type: PAYMENT_METHOD_TYPES;
     status: string;
     invalid_reason: null;
     name: string;
-    brand: string;
+    brand: CardBrand;
     acct_last_four: string;
+    account_type: AccountType;
     month: string;
     year: string;
     address_line1_check: string;

package/dist/types/api/Payment.d.ts

@@ -7,7 +7,9 @@ export declare enum CaptureStrategy {
 export declare enum PaymentMethodTypes {
     card = "card",
     bankAccount = "bankAccount",
-    sezzle = "sezzle"
+    sezzle = "sezzle",
+    plaid = "plaid",
+    applePay = "applePay"
 }
 export declare enum PaymentTypes {
     card = "Card",

package/dist/types/api/index.d.ts

@@ -1,7 +1,8 @@
 export * from './Api';
 export * from './ComponentEvents';
 export * from './ComponentError';
-export * from './Checkout';
+export { IBnpl, Completion, ICheckout, Checkout, ICheckoutPaymentMode, ICheckoutPaymentModeParam, ICheckoutStatus, CompletionStatuses, ICheckoutCompleteResponse, ILoadedEventResponse, CheckoutsQueryParams, ICheckoutPaymentMethod, } from './Checkout';
+export { CardBrand as CheckoutCardBrand, AccountType as BankAccountType, } from './Checkout';
 export * from './Insurance';
 export * from './Pagination';
 export * from './Payment';
@@ -16,7 +17,6 @@ export * from './Document';
 export * from './Refund';
 export * from './Business';
 export * from './Identity';
-export * from './Document';
 export * from './Dispute';
 export * from './GrossVolume';
 export { BankAccount, IBankAccount } from './BankAccount';

package/dist/types/api/services/apple-pay.service.d.ts

@@ -1,4 +1,11 @@
 import { IApplePayConfig, IApplePayPaymentRequest, IApplePayError, ApplePayConfig, IMerchantSession, IApplePayService, IApplePayPaymentProcessRequest, IApplePayPaymentResponse, IApplePayToken } from '../ApplePay';
+export declare enum ApplePayServiceErrorCode {
+    UNAVAILABLE = "UNAVAILABLE",
+    SESSION_ERROR = "SESSION_ERROR",
+    MERCHANT_VALIDATION_ERROR = "MERCHANT_VALIDATION_ERROR",
+    PAYMENT_PROCESSING_ERROR = "PAYMENT_PROCESSING_ERROR",
+    USER_CANCELLED = "USER_CANCELLED"
+}
 export declare class ApplePayService implements IApplePayService {
     private applePayConfig?;
     private currentSession?;

package/dist/types/components/business-forms/schemas/business-form-schema.d.ts

@@ -26,8 +26,8 @@ export declare const businessFormSchema: import("yup").ObjectSchema<{
             country?: string;
         };
         title?: string;
-        ssn_last4?: string;
         name?: string;
+        ssn_last4?: string;
         email?: string;
         phone?: string;
         dob_full?: string;

package/dist/types/components/checkout/bank-account-form/bank-account-form.d.ts

@@ -1,6 +1,7 @@
 export declare class BankAccountForm {
     isReady: boolean;
     iframeOrigin: string;
+    tabId: string;
     private accountNumberIframeElement;
     private routingNumberIframeElement;
     componentWillLoad(): Promise<void>;

package/dist/types/components/checkout/card-form/card-form.d.ts

@@ -1,6 +1,7 @@
 export declare class CardForm {
     isReady: boolean;
     iframeOrigin: string;
+    tabId: string;
     private cardNumberIframeElement;
     private expirationMonthIframeElement;
     private expirationYearIframeElement;

package/dist/types/components/checkout/checkout.d.ts

@@ -3,10 +3,14 @@ import JustifiAnalytics from '../../api/Analytics';
 import { BillingFormFields } from './billing-form/billing-form-schema';
 import { ICheckout, ILoadedEventResponse } from '../../api';
 import { ComponentErrorEvent, ComponentSubmitEvent } from '../../api/ComponentEvents';
+import { CheckoutChangedEventDetail, PAYMENT_METHODS } from '../modular-checkout/ModularCheckout';
 export declare class Checkout {
     analytics: JustifiAnalytics;
     modularCheckoutRef?: HTMLJustifiModularCheckoutElement;
     tokenizePaymentMethodRef?: HTMLJustifiTokenizePaymentMethodElement;
+    plaidPaymentMethodRef?: HTMLJustifiPlaidPaymentMethodElement;
+    sezzlePaymentMethodRef?: HTMLJustifiSezzlePaymentMethodElement;
+    availablePaymentMethods: PAYMENT_METHODS[];
     checkout: ICheckout;
     complete: Function;
     errorMessage: string;
@@ -30,6 +34,7 @@ export declare class Checkout {
     disconnectedCallback(): void;
     checkoutComplete(_event: CustomEvent<any>): void;
     checkoutError(_event: CustomEvent<any>): void;
+    checkoutChanged(event: CustomEvent<CheckoutChangedEventDetail>): void;
     fillBillingForm(fields: BillingFormFields): Promise<void>;
     validate(): Promise<{
         isValid: boolean;

package/dist/types/components/checkout/save-new-payment-method.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SaveNewPaymentMethod {
+    label?: string;
     isChecked: boolean;
     checkboxChanged: EventEmitter<boolean>;
     private handleCheckboxChange;

package/dist/types/components/modular-checkout/ModularCheckout.d.ts

@@ -1,3 +1,4 @@
+import { CardBrand, ICheckoutPaymentMethod } from '../../api';
 export declare enum PAYMENT_MODE {
     ECOM = "ecom",
     BNPL = "bnpl",
@@ -21,3 +22,43 @@ export declare enum PAYMENT_METHODS {
     SEZZLE = "sezzle",
     PLAID = "plaid"
 }
+export type SelectedPaymentMethod = {
+    id?: string;
+    type: PAYMENT_METHODS;
+};
+export type SavedPaymentMethod = {
+    id: string;
+    type: PAYMENT_METHODS;
+    status: string;
+    invalid_reason: null;
+    name: string;
+    brand: CardBrand;
+    acct_last_four: string;
+    account_type: string;
+    month: string;
+    year: string;
+    address_line1_check: string;
+    address_postal_code_check: string;
+    bin_details: null;
+};
+export declare class PaymentMethod implements SavedPaymentMethod {
+    id: string;
+    type: PAYMENT_METHODS;
+    status: string;
+    invalid_reason: null;
+    name: string;
+    brand: CardBrand;
+    acct_last_four: string;
+    account_type: string;
+    month: string;
+    year: string;
+    address_line1_check: string;
+    address_postal_code_check: string;
+    bin_details: null;
+    constructor(paymentMethod: ICheckoutPaymentMethod);
+}
+export interface CheckoutChangedEventDetail {
+    availablePaymentMethodTypes: PAYMENT_METHODS[];
+    selectedPaymentMethod: SelectedPaymentMethod | undefined;
+    savedPaymentMethods: SavedPaymentMethod[];
+}

package/dist/types/components/modular-checkout/modular-checkout.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import JustifiAnalytics from "../../api/Analytics";
 import { BillingFormFields } from "../../components";
-import { PAYMENT_METHODS } from "./ModularCheckout";
+import { CheckoutChangedEventDetail, SelectedPaymentMethod } from "./ModularCheckout";
 export declare class ModularCheckout {
     analytics: JustifiAnalytics;
     private observer?;
@@ -11,20 +11,20 @@ export declare class ModularCheckout {
     private applePayRef?;
     private getCheckout;
     private completeCheckout;
+    private plaidService;
     authToken: string;
     checkoutId: string;
-    savePaymentMethod?: boolean;
     hostEl: HTMLElement;
     errorEvent: EventEmitter;
     submitEvent: EventEmitter;
-    paymentMethodChangedEvent: EventEmitter<string>;
-    savePaymentMethodChanged(newValue: boolean): void;
+    checkoutChangedEvent: EventEmitter<CheckoutChangedEventDetail>;
     connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private fetchCheckout;
     private updateStore;
+    private emitCheckoutChanged;
     private queryFormRefs;
     private setupApplePayListeners;
     private removeApplePayListeners;
@@ -32,7 +32,7 @@ export declare class ModularCheckout {
     private handleApplePayError;
     private handleApplePayCancelled;
     private tokenizePaymentMethod;
-    setSelectedPaymentMethod(paymentMethod: PAYMENT_METHODS): Promise<void>;
+    setSelectedPaymentMethod(paymentMethod: SelectedPaymentMethod): Promise<void>;
     validate(): Promise<boolean>;
     submitCheckout(submitCheckoutArgs?: BillingFormFields): Promise<void>;
     render(): any;

package/dist/types/components/modular-checkout/sub-components/apple-pay-skeleton.d.ts

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from "../../../stencil-public-runtime";
 interface ApplePaySkeletonProps {
-    isReady: boolean;
+    isLoading: boolean;
 }
 declare const ApplePaySkeleton: FunctionalComponent<ApplePaySkeletonProps>;
 export default ApplePaySkeleton;

package/dist/types/components/modular-checkout/sub-components/apple-pay.d.ts

@@ -14,6 +14,7 @@ export declare class ApplePay {
     isProcessing: boolean;
     isAvailable: boolean;
     canMakePayments: boolean;
+    isConfigValid: boolean;
     error: string | null;
     applePayStarted: EventEmitter<void>;
     applePayCompleted: EventEmitter<{
@@ -25,10 +26,15 @@ export declare class ApplePay {
     applePayCancelled: EventEmitter<void>;
     applePayError: EventEmitter<{
         error: string;
+        code: string;
     }>;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    watchPropsChange(): void;
+    static ErrorCode: {
+        readonly CONFIG_ERROR: "CONFIG_ERROR";
+        readonly NOT_SUPPORTED: "NOT_SUPPORTED";
+        readonly NOT_AVAILABLE: "NOT_AVAILABLE";
+        readonly INITIALIZATION_ERROR: "INITIALIZATION_ERROR";
+        readonly PAYMENT_FAILED: "PAYMENT_FAILED";
+    };
     private initializeApplePay;
     private handleApplePayClick;
     isSupported(): Promise<boolean>;

package/dist/types/components/modular-checkout/sub-components/plaid-payment-method.d.ts

@@ -51,13 +51,12 @@ export declare class PlaidPaymentMethod {
     waitForStoreAndInitialize: () => void;
     resolvePaymentMethod(): Promise<PaymentMethodPayload>;
     getPaymentToken(): Promise<string | undefined>;
-    onPaymentMethodOptionClick: (e: any) => void;
+    handleSelectionClick(): Promise<void>;
     initializePlaidLink: () => Promise<void>;
     getLinkToken: () => Promise<void>;
     mapApiErrorToPlaidError: (apiError: any) => PlaidErrorCodes;
     openPlaidLink: () => void;
     handlePlaidSuccess: (publicToken: string, _metadata: any) => void;
-    private exchangePublicTokenForPaymentMethod;
     handlePlaidExit: (err: any, _metadata: any) => void;
     handlePlaidEvent: (eventName: string, metadata: any) => void;
     handlePlaidLoad: () => void;

package/dist/types/components/modular-checkout/sub-components/saved-payment-methods.d.ts

@@ -1,7 +1,7 @@
-import { ICheckoutPaymentMethod } from '../../../api';
+import { PAYMENT_METHODS, SavedPaymentMethod } from "../ModularCheckout";
 export declare class SavedPaymentMethods {
     componentWillLoad(): void;
-    onPaymentMethodOptionClick: (paymentMethod: ICheckoutPaymentMethod) => (e: Event) => void;
-    isAllowedPaymentMethod: (paymentMethod: ICheckoutPaymentMethod) => boolean;
+    onPaymentMethodOptionClick: (paymentMethod: SavedPaymentMethod) => (e: Event) => void;
+    isAllowedPaymentMethod: (paymentMethodType: PAYMENT_METHODS) => boolean;
     render(): any;
 }

package/dist/types/components/modular-checkout/sub-components/sezzle-payment-method.d.ts

@@ -10,7 +10,7 @@ export declare class SezzlePaymentMethod {
     paymentMethodOptionSelected: EventEmitter;
     componentDidRender(): void;
     resolvePaymentMethod(insuranceValidation: any): Promise<PaymentMethodPayload>;
-    onPaymentMethodOptionClick: (e: any) => void;
+    handleSelectionClick(): Promise<void>;
     initializeSezzleCheckout: () => void;
     render(): any;
 }