@justifi/webcomponents 6.12.3 → 6.12.4

package/dist/esm/justifi-business-details.entry.js

@@ -1,14 +1,14 @@
 import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
-import { E as ErrorState } from './utils-BxYS3WDw.js';
-import { B as BusinessService } from './business.service-BPbZ5fxQ.js';
-import { m as makeGetBusiness } from './get-business-DIpEbczl.js';
-import { C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
-import { J as JustifiAnalytics } from './Analytics-Cyc3ZLPx.js';
-import { c as checkPkgVersion } from './check-pkg-version-6iGDh82c.js';
+import { E as ErrorState } from './utils-CX6puxwf.js';
+import { B as BusinessService } from './business.service-C31wbMVs.js';
+import { m as makeGetBusiness } from './get-business-Gg6qn5on.js';
+import { C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-l6nNIjab.js';
+import { J as JustifiAnalytics } from './Analytics-B1bQP71R.js';
+import { c as checkPkgVersion } from './check-pkg-version-CNwUC4SV.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import { S as Skeleton } from './skeleton-CXGFVqDf.js';
-import './parts-DnrawQn3.js';
+import { S as Skeleton } from './skeleton-BEHo2ypu.js';
+import './parts-CPKMvyV_.js';
 import './Api-DMd8hTI-.js';
 import './config-state-kKn89dp1.js';
 import './index-cDVGjRkU.js';
@@ -16,9 +16,8 @@ import './utils-BTtxWI2r.js';
 import './dinero-HXpYMWUU.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
-import './Dispute-BH0Xfn-F.js';
-import './utils-DcfpJGDZ.js';
-import './package-beXEDfB9.js';
+import './utils-C1B2hVAB.js';
+import './package-OGt0dCJl.js';
 
 const BusinessDetailsLoading = () => {
     const Block = () => (h("div", { class: "mt-5" }, h(Skeleton, { width: "40%", height: "1.5rem" }), h("hr", null), h("div", { class: "row g-3" }, h("div", { class: "col-12 col-md-6" }, h(Skeleton, null), h(Skeleton, null), h(Skeleton, null)), h("div", { class: "col-12 col-md-6" }, h(Skeleton, null), h(Skeleton, null), h(Skeleton, null)))));

package/dist/esm/justifi-business-form.entry.js

@@ -1,33 +1,31 @@
 import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
-import { c as create$3, F as FormController } from './index.esm-BHdVU4hV.js';
-import { b as businessCoreInfoSchemaUSA, a as additionalQuestionsSchema, c as businessCoreInfoSchemaCAN } from './business-additional-questions-schema-DKudYaoE.js';
-import { i as identitySchemaUSA, a as addressSchemaUSA, b as identitySchemaCAN, c as addressSchemaCAN } from './business-identity-schema-CFhSc0cA.js';
+import { a as create$3, F as FormController } from './index.esm-CgNcFueq.js';
+import { b as businessCoreInfoSchemaUSA, i as identitySchemaUSA, a as additionalQuestionsSchema, c as addressSchemaUSA, d as businessCoreInfoSchemaCAN, e as identitySchemaCAN, f as addressSchemaCAN } from './business-identity-schema-D-Nk9aGV.js';
 import './config-state-kKn89dp1.js';
 import './dinero-HXpYMWUU.js';
-import { C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
+import { C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-l6nNIjab.js';
 import './Pagination-CLHwhyvu.js';
 import { C as CountryCode, B as Business, b as BusinessFormServerErrors } from './Business-BcNb9bVO.js';
-import './Dispute-BH0Xfn-F.js';
-import { J as JustifiAnalytics } from './Analytics-Cyc3ZLPx.js';
-import { B as Button } from './button-DRdaAudE.js';
+import { J as JustifiAnalytics } from './Analytics-B1bQP71R.js';
+import { B as Button } from './button-BvzOzV4l.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
-import { H as Header1 } from './header-1-Bl7MHW0w.js';
+import { H as Header1 } from './header-1-evYxFIGN.js';
 import './event-types-CZfYo5-1.js';
-import { c as checkPkgVersion } from './check-pkg-version-6iGDh82c.js';
-import { S as Skeleton } from './skeleton-CXGFVqDf.js';
+import { c as checkPkgVersion } from './check-pkg-version-CNwUC4SV.js';
+import { S as Skeleton } from './skeleton-BEHo2ypu.js';
 import { B as BusinessFormClickActions } from './event-types-XYgDHrVL.js';
-import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions-Dr0YIShV.js';
-import { B as BusinessService } from './business.service-BPbZ5fxQ.js';
+import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions-cl5xIYnF.js';
+import { B as BusinessService } from './business.service-C31wbMVs.js';
 import './_commonjsHelpers-BFTU3MAI.js';
-import './schema-validations-v6WGlZkq.js';
-import './country-config-P042rrI3.js';
+import './schema-validations-u9_XnlUL.js';
+import './country-config-B_fuF6JU.js';
 import './business-form-options-DRalxlqN.js';
 import './index-cDVGjRkU.js';
 import './utils-BTtxWI2r.js';
-import './package-beXEDfB9.js';
+import './package-OGt0dCJl.js';
 import './Api-DMd8hTI-.js';
-import './parts-DnrawQn3.js';
-import './utils-DcfpJGDZ.js';
+import './parts-CPKMvyV_.js';
+import './utils-C1B2hVAB.js';
 
 const businessFormSchemaUSA = create$3(Object.assign(Object.assign({}, businessCoreInfoSchemaUSA().fields), { legal_address: addressSchemaUSA(), additional_questions: additionalQuestionsSchema(), representative: identitySchemaUSA('representative') }));
 create$3(Object.assign(Object.assign({}, businessCoreInfoSchemaCAN().fields), { legal_address: addressSchemaCAN(), additional_questions: additionalQuestionsSchema(), representative: identitySchemaCAN('representative') }));

package/dist/esm/justifi-card-billing-form-simple.entry.js

@@ -15,7 +15,7 @@ const JustifiCardBillingFormSimple = class {
         return (_b = (_a = this.cardBillingFormSimpleRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
     }
     render() {
-        return (h(StyledHost, { key: '958a6f3085b8ec0eb3d978de7100049576485b2b' }, h("card-billing-form-simple", { key: 'a98e775d5a4585d4e3ef32353af0f724a6d442a1', legend: this.legend, ref: (el) => (this.cardBillingFormSimpleRef = el) })));
+        return (h(StyledHost, { key: '1e25de93c795dd6c8ec2979918a5b10389a55354' }, h("card-billing-form-simple", { key: 'd9db1793b83e5fa216f72bfe7803d968ee499ac7', legend: this.legend, ref: (el) => (this.cardBillingFormSimpleRef = el) })));
     }
 };
 

package/dist/esm/justifi-card-form.entry.js

@@ -1,15 +1,14 @@
 import { r as registerInstance, h } from './index-CV0Pyo1O.js';
-import { J as JustifiAnalytics } from './Analytics-Cyc3ZLPx.js';
-import { c as checkPkgVersion } from './check-pkg-version-6iGDh82c.js';
+import { J as JustifiAnalytics } from './Analytics-B1bQP71R.js';
+import { c as checkPkgVersion } from './check-pkg-version-CNwUC4SV.js';
 import { w as waitForConfig } from './config-state-kKn89dp1.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import './package-beXEDfB9.js';
+import './package-OGt0dCJl.js';
 import './Api-DMd8hTI-.js';
 import './utils-BTtxWI2r.js';
 import './dinero-HXpYMWUU.js';
-import './Plaid-BuKEVgbB.js';
-import './Dispute-BH0Xfn-F.js';
+import './Plaid-l6nNIjab.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './index-cDVGjRkU.js';
@@ -34,7 +33,7 @@ const JustifiCardForm = class {
         return this.cardFormElement.tokenize({ clientId, paymentMethodMetadata, account });
     }
     render() {
-        return (h(StyledHost, { key: 'd4c6ec37fc92036326c7a20b5a6ff189880ad6f5' }, h("card-form", { key: '8411003a749dc97a953874601e676beaf5bc4a6d', ref: (el) => (this.cardFormElement = el) })));
+        return (h(StyledHost, { key: 'c571f41c79f46143bbee7063a05f8b973b7732d0' }, h("card-form", { key: 'a70c853efeddcedd71343208ab29d89231b6c8fa', ref: (el) => (this.cardFormElement = el) })));
     }
 };
 

package/dist/esm/justifi-checkout.entry.js

@@ -1,19 +1,18 @@
 import { r as registerInstance, c as createEvent, h } from './index-CV0Pyo1O.js';
-import { J as JustifiAnalytics } from './Analytics-Cyc3ZLPx.js';
-import { c as checkPkgVersion } from './check-pkg-version-6iGDh82c.js';
+import { J as JustifiAnalytics } from './Analytics-B1bQP71R.js';
+import { c as checkPkgVersion } from './check-pkg-version-CNwUC4SV.js';
 import { c as checkoutStore } from './checkout.store-DFnkcDZ8.js';
-import { c as checkoutSummary } from './parts-DnrawQn3.js';
+import { c as checkoutSummary } from './parts-CPKMvyV_.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
 import { P as PAYMENT_METHODS } from './index-DkoufM1t.js';
-import './package-beXEDfB9.js';
+import './package-OGt0dCJl.js';
 import './Api-DMd8hTI-.js';
 import './config-state-kKn89dp1.js';
 import './index-cDVGjRkU.js';
 import './utils-BTtxWI2r.js';
 import './dinero-HXpYMWUU.js';
-import './Plaid-BuKEVgbB.js';
-import './Dispute-BH0Xfn-F.js';
+import './Plaid-l6nNIjab.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 

package/dist/esm/justifi-checkouts-list-filters.entry.js

@@ -2,12 +2,11 @@ import { r as registerInstance, h } from './index-CV0Pyo1O.js';
 import { l as lodashExports } from './lodash-CrGKVSPp.js';
 import './config-state-kKn89dp1.js';
 import { c as convertToUTC, a as convertToLocal } from './utils-BTtxWI2r.js';
-import { I as ICheckoutStatus, a as ICheckoutPaymentModeParam } from './Plaid-BuKEVgbB.js';
+import { I as ICheckoutStatus, a as ICheckoutPaymentModeParam } from './Plaid-l6nNIjab.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
-import './Dispute-BH0Xfn-F.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './checkouts-list-params-state-CiGfmyWW.js';
-import { f as filterMenu, a as filterParam } from './parts-DnrawQn3.js';
+import { f as filterMenu, a as filterParam } from './parts-CPKMvyV_.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
 import './_commonjsHelpers-BFTU3MAI.js';
@@ -61,8 +60,8 @@ const JustifiCheckoutsListFilters = class {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '1a55c7d5e185991eeaa7b5a58c447dc229281368' }, h("table-filters-menu", { key: '0dbea29d3dc84376462d61d6c0591166b86a47e1', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '88e49e1259669f6fc20e7947858f703e8a72fcd6', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '52502aa4976f3b046d58ff8377dc1350b3e10f30', class: "p-2" }, h("form-control-text", { key: 'e4baba52dd0bd17c571c55e8b4793dc6aca37dae', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: '979bc95675a30e20c54bc501675682573a278c0a', class: "p-2" }, h("form-control-text", { key: 'af46d55904f0ed639519335212a88bf92eaa1146', name: "successful_payment_id", label: "Successful Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.successfulPaymentId || filterParams.successful_payment_id, disabled: !!this.successfulPaymentId, part: filterParam })), h("div", { key: 'aa44b5c554324653cdc4bb70fb230605f38204ca', class: "p-2" }, h("form-control-select", { key: '49a76ec2a929b76ef87e2c2098ed6bb4523b499d', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: filterParam })), h("div", { key: '48be0da14579ea55be39dd3bb239ba4c8dd9321d', class: "p-2" }, h("form-control-select", { key: '9e3111a896e7364ad6c35997e625270ed4f239d0', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: '38a52faf33e088c3119ffabbe3b52965e4f3f896', class: "p-2" }, h("form-control-date", { key: 'a2167a3113fd736b95138cd3da14573e0ad2558f', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '0ae414564ad4dfc7fb84c202320d110a1bf9dc6a', class: "p-2" }, h("form-control-date", { key: 'c3130e521009eab1df12283a275459ff5f82aa75', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '1bb72de3ffad74d0e287f6f988f2737a94190709' }, h("table-filters-menu", { key: 'e7e1c2d657b5af5dfcf6e13b262dbd3787583206', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'df26c6a8c7ec477103995c07c079c01a4bea0729', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '6fd0f286cb30997439879d1c9b69b8ab39651a99', class: "p-2" }, h("form-control-text", { key: 'b6a070c40b1da5ea9f59c8c6f47f517181948230', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: 'f6ae07ac4b9afcb307fa6ce5ff6a0b6610169a69', class: "p-2" }, h("form-control-text", { key: 'c27c86b9a14d806bcd6d2d2a070812e31ae558ee', name: "successful_payment_id", label: "Successful Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.successfulPaymentId || filterParams.successful_payment_id, disabled: !!this.successfulPaymentId, part: filterParam })), h("div", { key: '54b26c583902c853db8709b311870c94d5332bd2', class: "p-2" }, h("form-control-select", { key: '3747bd2c6f2196a56059f36febc30057b8dc13de', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: filterParam })), h("div", { key: '5a875750872d5446c42db9a840c3670425c46ebb', class: "p-2" }, h("form-control-select", { key: '58eff7fbca6653532540506c7cef66df0f54af38', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: 'dca10b3b14055c6c2351f4fa8f11b609625f1a26', class: "p-2" }, h("form-control-date", { key: 'bfb85e61a9ee01a1cb3c2907ad06b6d37bbdc081', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '1772c182c957b053e77599935e3d61c1a66186a6', class: "p-2" }, h("form-control-date", { key: 'f7965bd4b2689359e76d3cec250bfd7eb5ba7870', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
     }
 };

package/dist/esm/justifi-checkouts-list.entry.js

@@ -1,24 +1,25 @@
-import { r as registerInstance, c as createEvent, h } from './index-CV0Pyo1O.js';
+import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
 import './config-state-kKn89dp1.js';
 import './dinero-HXpYMWUU.js';
-import { f as Checkout, C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
-import './Pagination-CLHwhyvu.js';
+import { k as Checkout, C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-l6nNIjab.js';
+import { p as pagingDefaults } from './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
-import './Dispute-BH0Xfn-F.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
-import { c as checkPkgVersion } from './check-pkg-version-6iGDh82c.js';
-import { J as JustifiAnalytics } from './Analytics-Cyc3ZLPx.js';
-import { C as CheckoutService } from './checkout.service-CJMfFKyS.js';
-import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-CgDWE_5o.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-C1B2hVAB.js';
+import { c as checkPkgVersion } from './check-pkg-version-CNwUC4SV.js';
+import { J as JustifiAnalytics } from './Analytics-B1bQP71R.js';
+import { C as CheckoutService } from './checkout.service-cVdOGDuI.js';
+import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-CkjZeR9U.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
-import './event-types-CZfYo5-1.js';
-import { d as defaultColumnsKeys } from './checkouts-table-C8sPHeTm.js';
+import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table-DqGfsdys.js';
+import { T as TableClickActions } from './event-types-CZfYo5-1.js';
+import { d as formatTime, b as formatDate } from './utils-BTtxWI2r.js';
+import { B as BadgeVariant, a as Badge } from './badge-Dlcl9qdm.js';
+import { a6 as tableHeadCell, a7 as getAlternateTableCellPart } from './parts-CPKMvyV_.js';
+import { o as onQueryParamsChange, g as getRequestParams } from './checkouts-list-params-state-CiGfmyWW.js';
 import './index-cDVGjRkU.js';
-import './utils-BTtxWI2r.js';
-import './package-beXEDfB9.js';
+import './package-OGt0dCJl.js';
 import './Api-DMd8hTI-.js';
-import './badge-B6dp1XGV.js';
-import './parts-DnrawQn3.js';
+import './spinner-DIiQZd6_.js';
 
 const makeGetCheckouts = ({ accountId, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -49,29 +50,108 @@ const makeGetCheckouts = ({ accountId, authToken, service }) => async ({ params,
     }
 };
 
+const MapCheckoutStatusToBadge = (status) => {
+    const statusToBadgeProps = {
+        created: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'The checkout has been created',
+            text: 'Created',
+        },
+        completed: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'The checkout has been completed',
+            text: 'Completed',
+        },
+        attempted: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The checkout has been attempted',
+            text: 'Attempted',
+        },
+        expired: {
+            variant: BadgeVariant.DANGER,
+            title: 'The checkout has expired',
+            text: 'Expired',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
+};
+
+const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
+const checkoutTableColumns = {
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date each checkout occurred" }, "Processed On")),
+    payment_amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
+    payment_description: () => (h("th", { part: tableHeadCell, scope: "col", title: "The description of each checkout" }, "Payment Description")),
+    sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
+    payment_mode: () => (h("th", { part: tableHeadCell, scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each checkout" }, "Status")),
+};
+const checkoutTableCells = {
+    created_at: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, formatDate(checkout.created_at)), h("div", { class: "fw-bold" }, formatTime(checkout.created_at)))),
+    payment_amount: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.formattedPaymentAmount(checkout.payment_amount))),
+    payment_description: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.payment_description)),
+    sub_account_name: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.sub_account_name)),
+    payment_mode: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.payment_mode)),
+    status: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapCheckoutStatusToBadge(checkout.status))),
+};
+
 const JustifiCheckoutsList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
-        this.errorMessage = null;
         this.columns = defaultColumnsKeys;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.checkouts = [];
+        this.subAccounts = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedCheckoutID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedCheckoutID)
+                return;
+            const checkoutData = this.checkouts.find((checkout) => checkout.id === clickedCheckoutID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: checkoutData });
         };
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
         this.initializeGetData();
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
-    propChanged() {
+    authPropChanged() {
         this.initializeGetData();
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
+    }
+    pagingOrColumnsChanged() {
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
     }
     initializeGetData() {
         this.initializeGetCheckouts();
@@ -83,7 +163,7 @@ const JustifiCheckoutsList = class {
             this.getCheckouts = makeGetCheckouts({
                 accountId: accountToUse,
                 authToken: this.authToken,
-                service: new CheckoutService()
+                service: new CheckoutService(),
             });
         }
         else {
@@ -100,17 +180,100 @@ const JustifiCheckoutsList = class {
             this.getSubAccounts = makeGetSubAccounts({
                 primaryAccountId: this.accountId,
                 authToken: this.authToken,
-                service: new SubAccountService()
+                service: new SubAccountService(),
             });
         }
     }
+    fetchData() {
+        if (!this.getCheckouts) {
+            return;
+        }
+        this.loading = true;
+        this.getCheckouts({
+            params: this.checkoutParams,
+            onSuccess: async ({ checkouts, pagingInfo }) => {
+                this.checkouts = checkouts;
+                this.paging = pagingInfo;
+                this.checkoutsTable.collectionData = this.checkouts;
+                const shouldFetchSubAccounts = this.checkoutsTable.columnKeys.includes('sub_account_name');
+                if (shouldFetchSubAccounts) {
+                    await this.fetchSubAccounts();
+                }
+                else {
+                    this.loading = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    async fetchSubAccounts() {
+        if (!this.getSubAccounts) {
+            this.loading = false;
+            return;
+        }
+        this.getSubAccounts({
+            params: this.subAccountParams,
+            onSuccess: ({ subAccounts }) => {
+                this.subAccounts = subAccounts;
+                this.checkouts = this.checkouts.map((checkout) => {
+                    var _a;
+                    checkout.sub_account_name = (_a = this.subAccounts.find((subAccount) => subAccount.id === checkout.account_id)) === null || _a === void 0 ? void 0 : _a.name;
+                    return checkout;
+                });
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get checkoutParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
+    }
+    get subAccountParams() {
+        const accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
+        const uniqueAccountIds = [...new Set(accountIdNumbers)];
+        const accountIdString = uniqueAccountIds.join(',');
+        return { sub_account_id: accountIdString };
+    }
+    get entityId() {
+        return this.checkouts.map((checkout) => checkout.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.checkoutsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
     render() {
-        return (h(StyledHost, { key: '27491f40eb96742cee1fe81023a9e423ab5b22a5' }, h("checkouts-list-core", { key: '2b2526aa7dee3cd216bc481144d3239a5389872c', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '2f9efac8723333029415ef131516946912bb313c' }, h(TableWrapper, { key: '024c7a532533721acda9740a0888b1c15fa624fe' }, h(TableComponent, { key: '06bf1c6db731eb5857b08615222ca47a85ffc4a8' }, h(TableHead, { key: '0754f9cd87a3b32a5368e7fb7538071cf6be0505' }, h(TableHeadRow, { key: '5db4c5beea0e6e9afc29e16b5789a32ad94509dd' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '9140294035b04b549578d74374271f8a9fd78162' }, h(TableLoadingState, { key: 'bf495d00b9bc4ee28b67c8f1b3258306f9202142', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '92f8a1245cc022fa3b254bb1fe8d659f75c62923', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '2e6ab100026afb29f199dd33e52de5ae77e6576c', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.checkoutsTable.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: '3a1b55572eb0fc2ffcef1a39f6bfae5693056752' }, h(TableFootRow, { key: 'f61a3cc86fda3ec95075381403916f5fb1c46ca6' }, h(TableFootCell, { key: '7d937a0d228062f42f49dca5bdb436d54354563e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '05454876b7faeeb73fb8f896a2425e5f9db12ee3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
-        "accountId": ["propChanged"],
-        "authToken": ["propChanged"],
-        "subAccountId": ["propChanged"]
+        "accountId": ["authPropChanged"],
+        "authToken": ["authPropChanged"],
+        "subAccountId": ["authPropChanged"],
+        "pagingParams": ["pagingOrColumnsChanged"],
+        "columns": ["pagingOrColumnsChanged"]
     }; }
 };
 

package/dist/esm/justifi-details.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-CV0Pyo1O.js';
-import { E as ErrorState } from './utils-BxYS3WDw.js';
-import './parts-DnrawQn3.js';
+import { E as ErrorState } from './utils-CX6puxwf.js';
+import './parts-CPKMvyV_.js';
 
 const JustifiDetails = class {
     constructor(hostRef) {

package/dist/esm/justifi-dispute-management.entry.js

@@ -1,13 +1,14 @@
 import { r as registerInstance, c as createEvent, h } from './index-CV0Pyo1O.js';
-import { C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
-import { J as JustifiAnalytics } from './Analytics-Cyc3ZLPx.js';
-import { c as checkPkgVersion } from './check-pkg-version-6iGDh82c.js';
-import { D as Dispute } from './Dispute-BH0Xfn-F.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
-import { D as DisputeService } from './dispute.service-vlYGy0nR.js';
+import { D as Dispute, C as ComponentErrorSeverity, e as ComponentErrorCodes, f as DisputeStatus } from './Plaid-l6nNIjab.js';
+import { J as JustifiAnalytics } from './Analytics-B1bQP71R.js';
+import { c as checkPkgVersion } from './check-pkg-version-CNwUC4SV.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-C1B2hVAB.js';
+import { D as DisputeManagementClickActions, a as DisputeService } from './event-types-DalU_6SB.js';
+import { S as StyledHost } from './styled-host-D6byRazK.js';
+import './event-types-CZfYo5-1.js';
 import './utils-BTtxWI2r.js';
 import './dinero-HXpYMWUU.js';
-import './package-beXEDfB9.js';
+import './package-OGt0dCJl.js';
 import './Api-DMd8hTI-.js';
 import './config-state-kKn89dp1.js';
 import './index-cDVGjRkU.js';
@@ -47,44 +48,90 @@ const JustifiDisputeManagement = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.errorEvent = createEvent(this, "error-event", 7);
-        this.errorMessage = null;
-        this.handleErrorEvent = event => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
-        };
+        this.isLoading = true;
+        this.showDisputeResponseForm = false;
+        this.fetchDisputePending = false;
+    }
+    scheduleFetchDispute() {
+        if (!this.getDispute || this.fetchDisputePending) {
+            return;
+        }
+        this.fetchDisputePending = true;
+        queueMicrotask(() => {
+            this.fetchDisputePending = false;
+            if (this.getDispute) {
+                this.fetchData();
+            }
+        });
+    }
+    disputeResponseHandler(event) {
+        if (event.detail.name === DisputeManagementClickActions.respondToDispute) {
+            this.showDisputeResponseForm = true;
+        }
+        if (event.detail.name === DisputeManagementClickActions.cancelDispute) {
+            this.showDisputeResponseForm = false;
+        }
+    }
+    disputeSubmittedHandler() {
+        this.fetchData();
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetDispute();
     }
+    componentDidLoad() {
+        this.scheduleFetchDispute();
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
     propChanged() {
         this.initializeGetDispute();
+        this.scheduleFetchDispute();
     }
     initializeGetDispute() {
         if (this.disputeId && this.authToken) {
             this.getDispute = makeGetDispute({
                 id: this.disputeId,
                 authToken: this.authToken,
-                service: new DisputeService()
+                service: new DisputeService(),
             });
         }
         else {
-            this.errorMessage = 'Dispute ID and Auth Token are required';
             this.errorEvent.emit({
-                message: this.errorMessage,
+                message: 'Dispute ID and Auth Token are required',
                 errorCode: ComponentErrorCodes.MISSING_PROPS,
                 severity: ComponentErrorSeverity.ERROR,
             });
         }
     }
+    fetchData() {
+        if (!this.getDispute) {
+            return;
+        }
+        this.isLoading = true;
+        this.getDispute({
+            onSuccess: ({ dispute }) => {
+                this.dispute = new Dispute(dispute);
+                this.isLoading = false;
+                if (this.dispute.status !== DisputeStatus.needsResponse) {
+                    this.showDisputeResponseForm = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.isLoading = false;
+            },
+        });
+    }
     render() {
-        return (h("justifi-dispute-management-core", { key: 'db9bf0998d45a71d9c2a72f4cedbe4276e67a238', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h(StyledHost, { key: 'a9185f55e6f2704ec8ba85c5061e8c46338481e3' }, h("div", { key: 'e4851b3fa85ec428929b7868c0748b56c0172c8b' }, this.showDisputeResponseForm ? (h("dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading })))));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],