@justifi/webcomponents 4.7.5 → 4.8.0

package/dist/collection/components/payouts-list/payouts-list.js

@@ -1,8 +1,8 @@
 import { Host, h } from "@stencil/core";
-import { Api, Payout, PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults } from "../../api";
-import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { config } from "../../../config";
 import { tableExportedParts } from "../table/exported-parts";
+import { PayoutService } from "../../api/services/payout.service";
+import { makeGetPayouts } from "./get-payouts";
+import { ErrorState } from "../details/utils";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -24,129 +24,37 @@ import { tableExportedParts } from "../table/exported-parts";
 */
 export class PayoutsList {
     constructor() {
-        this.mapStatusToBadge = (status) => {
-            switch (status) {
-                case PayoutStatuses.scheduled:
-                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.in_transit:
-                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.failed:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.canceled:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.forwarded:
-                    return `<span class="badge bg-secondary" title='This payout initially failed; the funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.paid:
-                    return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
-            }
-        };
-        this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
-        };
-        this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
-        };
         this.accountId = undefined;
         this.authToken = undefined;
-        this.payouts = [];
-        this.loading = true;
-        this.errorMessage = undefined;
-        this.paging = pagingDefaults;
-        this.params = undefined;
+        this.getPayouts = undefined;
+        this.errorMessage = null;
     }
-    updateOnPropChange() {
-        this.fetchData();
+    componentWillLoad() {
+        this.initializeGetPayouts();
     }
-    connectedCallback() {
-        this.fetchData();
+    propChanged() {
+        this.initializeGetPayouts();
     }
-    async fetchData() {
-        var _a;
-        if (!this.accountId || !this.authToken) {
-            this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
-            this.loading = false;
-            return;
-        }
-        this.loading = true;
-        try {
-            const api = Api(this.authToken, config.proxyApiOrigin);
-            const endpoint = `account/${this.accountId}/payouts`;
-            const response = await api.get(endpoint, this.params);
-            if (!response.error) {
-                this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-                const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payout(dataItem));
-                this.payouts = data;
-            }
-            else {
-                const responseError = typeof response.error === 'string' ? response.error : response.error.message;
-                console.error(`Error fetching payouts: ${responseError}`);
-                this.errorMessage = 'No results';
-            }
+    initializeGetPayouts() {
+        if (this.accountId && this.authToken) {
+            this.getPayouts = makeGetPayouts({
+                id: this.accountId,
+                authToken: this.authToken,
+                service: new PayoutService(),
+            });
         }
-        catch (error) {
-            console.error(`Error fetching payouts: ${error}`);
-            this.errorMessage = 'No results';
-        }
-        finally {
-            this.loading = false;
+        else {
+            this.errorMessage = 'Account ID and Auth Token are required';
         }
     }
     render() {
-        return (h(Host, { exportedparts: tableExportedParts }, h("justifi-table", { rowClickHandler: (e) => {
-                const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPayoutID) {
-                    return;
-                }
-                this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
-            }, columnData: [
-                ['Paid Out On', 'The date each transaction occurred'],
-                ['Type', 'The type of each transaction'],
-                ['Account', 'The ID of the account associated with each payout'],
-                ['Paid Out To', 'The bank account to which each payout was transferred'],
-                ['Payments', 'Sum of payments in each payout'],
-                ['Refunds', 'Sum of refunds in each payout'],
-                ['Fees', 'Sum of fees in each payout'],
-                ['Other', 'Sum of less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
-                ['Payout Amount', 'The net sum of all transactions in each payout. This is the amount you\'ll see reflected on your bank statement'],
-                ['Status', 'The real-time status of each payout']
-            ], entityId: this.payouts.map((payout) => payout.id), rowData: this.payouts.map((payout) => ([
-                {
-                    type: 'head',
-                    value: `
-                    <div>${formatDate(payout.created_at)}</div>
-                    <div>${formatTime(payout.created_at)}</div>
-                  `,
-                },
-                payout.payout_type,
-                payout.account_id,
-                `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
-                formatCurrency(payout.payments_total),
-                formatCurrency(payout.refunds_total),
-                formatCurrency(payout.fees_total),
-                formatCurrency(payout.other_total),
-                formatCurrency(payout.amount),
-                {
-                    type: 'inner',
-                    value: this.mapStatusToBadge(payout.status)
-                }
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+        if (this.errorMessage) {
+            return ErrorState(this.errorMessage);
+        }
+        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payouts-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payouts-list.css"]
-        };
-    }
     static get properties() {
         return {
             "accountId": {
@@ -187,47 +95,17 @@ export class PayoutsList {
     }
     static get states() {
         return {
-            "payouts": {},
-            "loading": {},
-            "errorMessage": {},
-            "paging": {},
-            "params": {}
+            "getPayouts": {},
+            "errorMessage": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "rowClicked",
-                "name": "payout-row-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "Payout",
-                    "resolved": "Payout",
-                    "references": {
-                        "Payout": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::Payout"
-                        }
-                    }
-                }
-            }];
-    }
     static get watchers() {
         return [{
                 "propName": "accountId",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }, {
                 "propName": "authToken",
-                "methodName": "updateOnPropChange"
-            }, {
-                "propName": "params",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }];
     }
 }

package/dist/collection/components/payouts-list/test/get-payouts.spec.js

@@ -0,0 +1,64 @@
+import { Payout } from "../../../api";
+import { PayoutService } from "../../../api/services/payout.service";
+import { makeGetPayouts } from "../get-payouts";
+import mockResponse from "../../../api/mockData/mockPayoutsSuccess.json";
+describe('makeGetPayouts', () => {
+    const mockId = '123';
+    const mockAuthToken = 'token';
+    const mockParams = { limit: 10, page: 1 };
+    let mockServiceInstance;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Create a new instance of the mocked PayoutService
+        mockServiceInstance = new PayoutService();
+        // Explicitly mock fetchPayouts as a jest mock function
+        mockServiceInstance.fetchPayouts = jest.fn();
+    });
+    it('should call onSuccess with payouts and pagingInfo on successful fetch', async () => {
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayouts to resolve with mockResponse
+        mockServiceInstance.fetchPayouts.mockResolvedValue(mockResponse);
+        const getPayouts = makeGetPayouts({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayouts({ params: mockParams, onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith({
+            payouts: expect.arrayContaining([expect.any(Payout), expect.any(Payout)]),
+            pagingInfo: mockResponse.page_info,
+        });
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payouts');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayouts to reject with mockError
+        mockServiceInstance.fetchPayouts.mockRejectedValue(mockError);
+        const getPayouts = makeGetPayouts({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayouts({ params: mockParams, onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith('Error fetching payouts');
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payouts');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayouts to reject with mockError
+        mockServiceInstance.fetchPayouts.mockRejectedValue(mockError);
+        const getPayouts = makeGetPayouts({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayouts({ params: mockParams, onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith('Error fetching payouts');
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+});

package/dist/collection/components/payouts-list/test/payouts-list-core.spec.js

@@ -0,0 +1,105 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Table } from "../../table/table";
+import { PaginationMenu } from "../../pagination-menu/pagination-menu";
+import { PayoutsListCore } from "../payouts-list-core";
+import mockSuccessResponse from "../../../api/mockData/mockPayoutsSuccess.json";
+import { makeGetPayouts } from "../get-payouts";
+const mockPayoutsResponse = mockSuccessResponse;
+describe('payouts-list-core', () => {
+    it('renders properly', async () => {
+        const mockPayoutService = {
+            fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
+        };
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            html: `
+        <payouts-list-core></payouts-list-core>
+      `,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayouts = makeGetPayouts({
+            id: '123',
+            authToken: '123',
+            service: mockPayoutService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        const justifiTable = page.root.querySelector('justifi-table');
+        const shadowRoot = justifiTable.shadowRoot;
+        const rows = shadowRoot.querySelectorAll('[data-test-id="table-row"]');
+        expect(rows.length).toBe(4);
+        expect(page.root).toMatchSnapshot();
+    });
+    it('displays an error state on failed data fetch', async () => {
+        const mockPayoutService = {
+            fetchPayouts: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        const getPayouts = makeGetPayouts({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockPayoutService
+        });
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            html: '<payouts-list-core></payouts-list-core>',
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayouts = getPayouts;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        const justifiTable = page.root.querySelector('justifi-table');
+        const shadowRoot = justifiTable.shadowRoot;
+        const error = shadowRoot.querySelector('[data-test-id="table-error-state"]');
+        expect(error).toBeTruthy();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('emits payout-row-clicked event on row click', async () => {
+        const mockPayoutService = {
+            fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
+        };
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            html: '<payouts-list-core></payouts-list-core>',
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayouts = makeGetPayouts({
+            id: '123',
+            authToken: '123',
+            service: mockPayoutService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        const rowClickedHandler = jest.fn();
+        page.win.addEventListener('payout-row-clicked', rowClickedHandler);
+        const justifiTable = page.root.querySelector('justifi-table');
+        const shadowRoot = justifiTable.shadowRoot;
+        const rows = shadowRoot.querySelectorAll('[data-test-id="table-row"]');
+        if (rows.length > 0) {
+            rows[0].click();
+            await page.waitForChanges();
+        }
+    });
+    it('updates params and refetches data on pagination interaction', async () => {
+        const mockPayoutService = {
+            fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
+        };
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            html: `<payouts-list-core></payouts-list-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayouts = makeGetPayouts({
+            id: '123',
+            authToken: '123',
+            service: mockPayoutService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        page.rootInstance.handleClickNext('nextCursor');
+        await page.waitForChanges();
+        // The mock function should be called 3 times: once for the initial load, twice for when mockGetPayouts is set and later after the pagination interaction
+        expect(mockPayoutService.fetchPayouts).toHaveBeenCalledTimes(3);
+        const updatedParams = page.rootInstance.params;
+        expect(updatedParams.after_cursor).toBe('nextCursor');
+    });
+});

package/dist/collection/components/payouts-list/test/payouts-list.spec.js

@@ -0,0 +1,29 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PayoutsList } from "../payouts-list";
+import { PayoutsListCore } from "../payouts-list-core";
+describe('payouts-list', () => {
+    it('renders an error message when accountId and authToken are not provided', async () => {
+        const page = await newSpecPage({
+            components: [PayoutsList, PayoutsListCore],
+            html: '<justifi-payouts-list></justifi-payouts-list>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error message when accountId is not provided', async () => {
+        const page = await newSpecPage({
+            components: [PayoutsList, PayoutsListCore],
+            html: '<justifi-payouts-list auth-token="abc"></justifi-payouts-list>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error message when authToken is not provided', async () => {
+        const page = await newSpecPage({
+            components: [PayoutsList, PayoutsListCore],
+            html: '<justifi-payouts-list account-id="abc"></justifi-payouts-list>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/subaccounts-list/subaccounts-list.js

@@ -67,8 +67,8 @@ export class SubaccountsList {
                 {
                     type: 'head',
                     value: `
-                    <div>${subaccount.dateString}</div>
-                    <div>${subaccount.timeString}</div>
+                    <div class='fw-bold'>${subaccount.dateString}</div>
+                    <div class='fw-bold'>${subaccount.timeString}</div>
                   `,
                 },
                 subaccount.name,

package/dist/collection/components/table/table.js

@@ -1,20 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { ExtendedPagingDefaults } from "../../api/Pagination";
 import { tableExportedParts } from "./exported-parts";
+import { EmptyState, ErrorState, LoadingState } from "./utils";
 export class Table {
     constructor() {
-        this.emptyState = () => {
-            var _a;
-            return (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "No results")));
-        };
-        this.errorState = () => {
-            var _a;
-            return (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "An unexpected error occurred: ", this.errorMessage)));
-        };
-        this.loadingState = () => {
-            var _a;
-            return (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
-        };
         this.loading = true;
         this.errorMessage = '';
         this.rowData = [];
@@ -24,25 +13,29 @@ export class Table {
         this.entityId = undefined;
         this.rowClickHandler = undefined;
     }
-    showEmptyState() {
-        return this.rowData ? this.rowData.length < 1 : true;
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
     }
     render() {
-        var _a, _b, _c;
-        return (h(Host, { exportparts: tableExportedParts }, this.columnData ?
-            h("div", { class: "table-wrapper" }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light text-nowrap", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading ? this.loadingState() :
-                this.errorMessage ? this.errorState() :
-                    this.showEmptyState() ? this.emptyState() :
-                        (_b = this.rowData) === null || _b === void 0 ? void 0 : _b.map((data, index) => {
-                            return (h("tr", { "data-row-entity-id": this.entityId[index], onClick: e => this.rowClickHandler ? this.rowClickHandler(e) : null, part: `table-row${index % 2 ? ' table-row-even' : ' table-row-odd'}` }, data.map((dataEntry) => {
-                                return (!(dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type)
-                                    ? h("td", { part: "table-cell" }, dataEntry)
-                                    : h("th", { scope: "row", part: "table-cell" }, h("td", { part: "table-cell", innerHTML: dataEntry.value })));
-                            })));
-                        })), this.paging &&
-                h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_c = this.columnData) === null || _c === void 0 ? void 0 : _c.length }, h("pagination-menu", { paging: this.paging, params: this.params }))))))
-            :
-                h("div", { "data-test-id": "empty-error-state" }, "Column data is required")));
+        var _a, _b;
+        return (h(Host, { exportparts: tableExportedParts }, h("div", { class: "table-wrapper" }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light text-nowrap", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading && LoadingState(this.columnData.length), this.showEmptyState && EmptyState(this.columnData.length), this.showErrorState && ErrorState(this.columnData.length, this.errorMessage), this.showRowData && (this.rowData.map((data, index) => {
+            return (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: e => this.rowClickHandler ? this.rowClickHandler(e) : null, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => {
+                let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
+                if (nestedHtml) {
+                    return (h("td", { part: "table-cell", innerHTML: dataEntry.value }));
+                }
+                else {
+                    return (h("td", { part: "table-cell" }, dataEntry));
+                }
+            })));
+        }))), this.paging &&
+            h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { paging: this.paging, params: this.params }))))))));
     }
     static get is() { return "justifi-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/test/table.spec.js

@@ -2,21 +2,29 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Table } from "../table";
 describe('justifi-table', () => {
-    it('does not render properly without columnData', async () => {
+    it('enters loading state when loading is true', async () => {
         const page = await newSpecPage({
             components: [Table],
-            html: `<justifi-table></justifi-table>`,
+            template: () => h("justifi-table", { columnData: ['test', 'test'], loading: true })
         });
-        const error = page.root.shadowRoot.querySelector('[data-test-id="empty-error-state"]');
-        expect(error).toBeTruthy();
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeTruthy();
+        const loadingSpinner = page.root.shadowRoot.querySelector('.spinner-border');
+        expect(loadingSpinner).toBeTruthy();
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
-    it('stops loading', async () => {
+    it('renders the empty state when no data is passed', async () => {
         const page = await newSpecPage({
             components: [Table],
             template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false })
         });
-        const loading = page.root.shadowRoot.querySelector('.loading-state');
-        expect(loading).toBeNull();
+        const empty = page.root.shadowRoot.querySelector('.empty-state');
+        expect(empty).toBeTruthy();
+        const emptyStateMessage = empty.innerHTML;
+        expect(emptyStateMessage).toBe('No results');
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
     it('renders the state and displays error message passed', async () => {
         const ERROR_TEXT = 'error-123';
@@ -24,18 +32,20 @@ describe('justifi-table', () => {
             components: [Table],
             template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, errorMessage: ERROR_TEXT })
         });
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeNull();
         const error = page.root.shadowRoot.querySelector('.error-state');
-        expect(error).not.toBeNull();
+        expect(error).toBeTruthy();
         const errorText = error.innerHTML;
         expect(errorText).toBe(`An unexpected error occurred: ${ERROR_TEXT}`);
     });
     it('renders the pagination bar when pagination is passed', async () => {
         const PAG = {
-            amount: 25,
+            amount: 50,
             start_cursor: '',
             end_cursor: '',
             has_previous: false,
-            has_next: false,
+            has_next: true,
             handleClickNext: () => { },
             handleClickPrevious: () => { }
         };
@@ -43,8 +53,8 @@ describe('justifi-table', () => {
             components: [Table],
             template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, paging: PAG })
         });
-        const error = page.root.shadowRoot.querySelector('[part="pagination-bar"]');
-        expect(error).not.toBeNull();
+        const paginationBar = page.root.shadowRoot.querySelector('[part="pagination-bar"]');
+        expect(paginationBar).toBeTruthy();
     });
     it('has an ID for each row', async () => {
         const page = await newSpecPage({
@@ -52,7 +62,31 @@ describe('justifi-table', () => {
             template: () => h("justifi-table", { entityId: ['123'], rowData: [['test']], columnData: ['test', 'test'], loading: false })
         });
         const row = page.root.shadowRoot.querySelector('[data-row-entity-id]');
-        expect(row).not.toBeNull();
+        expect(row).toBeTruthy();
         expect(row.dataset.rowEntityId).toBe('123');
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeNull();
+        const empty = page.root.shadowRoot.querySelector('.empty-state');
+        expect(empty).toBeNull();
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
+    });
+    it('renders rows and columns based on columnData and rowData', async () => {
+        const columnData = ['Name', 'Age'];
+        const rowData = [['John Doe', 30], ['Jane Doe', 25]];
+        const entityId = ['id1', 'id2']; // Corresponding entity IDs for each row
+        const page = await newSpecPage({
+            components: [Table],
+            template: () => (h("justifi-table", { columnData: columnData, rowData: rowData, entityId: entityId, loading: false })),
+        });
+        const rows = page.root.shadowRoot.querySelectorAll('[data-test-id="table-row"]');
+        expect(rows.length).toBe(rowData.length);
+        rows.forEach((row, index) => {
+            const cells = row.querySelectorAll('td');
+            expect(cells.length).toBe(columnData.length);
+            cells.forEach((cell, cellIndex) => {
+                expect(cell.textContent).toBe(String(rowData[index][cellIndex]));
+            });
+        });
     });
 });

package/dist/collection/components/table/utils.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const LoadingState = (columnSpan) => (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: columnSpan, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
+export const EmptyState = (columnSpan) => (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
+export const ErrorState = (columnSpan, errorMessage) => (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: columnSpan, "data-test-id": "table-error-state", style: { textAlign: 'center' } }, "An unexpected error occurred: ", errorMessage)));

package/dist/collection/utils/{phone-masks.js → form-input-masks.js}

@@ -1,3 +1,4 @@
 export const PHONE_MASKS = {
     US: '(000) 000-0000',
 };
+export const TAX_ID_MASKS = { US: '00-000000000' };