@justifi/webcomponents 5.3.1 → 5.3.3

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

@@ -1,20 +1,75 @@
 import { h } from "@stencil/core";
-import { queryParams, clearParams } from "./payouts-list-params-state";
+import { filterParams, propsParams, clearParams } from "./payouts-list-params-state";
 import { StyledHost } from "../../ui-components";
 import { convertToLocal, convertToUTC } from "../../utils/utils";
+import { createdAfterPayoutsListFilterParam, createdBeforePayoutsListFilterParam, payoutsListFilterMenu } from "../../styles/parts";
 export class PayoutsListFilters {
     constructor() {
         this.setParamsOnChange = (name, value) => {
-            queryParams[name] = value;
+            filterParams[name] = value;
         };
         this.handleDateInput = (name, value) => {
             const utcDate = convertToUTC(value, { setEndOfDay: true });
             this.setParamsOnChange(name, utcDate);
         };
+        this.createdAfter = undefined;
+        this.createdBefore = undefined;
+    }
+    componentWillLoad() {
+        const propsToSet = {
+            created_after: this.createdAfter,
+            created_before: this.createdBefore
+        };
+        Object.entries(propsToSet).forEach(([key, value]) => {
+            if (value) {
+                propsParams[key] = value;
+            }
+        });
     }
     render() {
-        return (h(StyledHost, { key: 'f9ee0c87b7b241ade995fc9bbec00fa6f38c4207' }, h("table-filters-menu", { key: '2811b3d4673191dd3e1f2e1546389841d6f3dec2', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '6f0584fbaed4fd931da456ee7a68ad25843e84d3', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '60dba9253fa74815d2af5d9d6993d4941530da6d', class: "p-2" }, h("form-control-date", { key: '453826549a4f379eca9c4ffc9d57f18f078af347', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDate: true }) })), h("div", { key: '646566a69b9d4a82c24151e6773eaa381c1c4970', class: "p-2" }, h("form-control-date", { key: '14a62f94d8b27d88306ed58cbfcbb0b377e57587', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_before, { showInputDate: true }) }))))));
+        const filterMenuParams = Object.assign({}, filterParams);
+        return (h(StyledHost, { key: '195227f14aa0fc371cc2ceb62089b26df8491525' }, h("table-filters-menu", { key: '86cc1b04b210cf0cd3fc422438b1cdfc7c0b4242', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: 'c75c167f849c5f0558bf7b0569f6f79083b858f0', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '09d46810296de9dc272f66ce2bd3ba726ebc6386', class: "p-2" }, h("form-control-date", { key: '0bbd9294c788f2dada3e8630e32619e1730f7b40', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'c238988bd2b31b0374e515713fc2c55f59d6f9ba', class: "p-2" }, h("form-control-date", { key: '188106d28d4ac201e48b45e3ce417f26621af46a', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: createdBeforePayoutsListFilterParam }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }
     static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "createdAfter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "created-after",
+                "reflect": false
+            },
+            "createdBefore": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "created-before",
+                "reflect": false
+            }
+        };
+    }
 }

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

@@ -1,8 +1,14 @@
 import { createStore } from "@stencil/store";
-const initialState = {};
-const payoutsListQueryParams = createStore(() => initialState);
-const { state: queryParams, on: onQueryParamsChange } = payoutsListQueryParams;
+const filterParamsInitialState = {};
+const propsParamsInitialState = {};
+const filterParamsStore = createStore(() => filterParamsInitialState);
+const { state: filterParams, on: onQueryParamsChange } = filterParamsStore;
+const propsParamsStore = createStore(() => propsParamsInitialState);
+const { state: propsParams } = propsParamsStore;
+const getRequestParams = () => {
+    return Object.assign(Object.assign({}, filterParams), propsParams);
+};
 const clearParams = () => {
-    payoutsListQueryParams.reset();
+    filterParamsStore.reset();
 };
-export { payoutsListQueryParams, queryParams, onQueryParamsChange, clearParams };
+export { filterParams, propsParams, onQueryParamsChange, clearParams, getRequestParams };

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

@@ -2,14 +2,13 @@ import { h } from "@stencil/core";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { config } from "../../../config";
 import { PayoutService } from "../../api/services/payout.service";
-import { makeGetPayouts } from "./get-payouts";
+import { makeGetPayouts } from "../../actions/payout/get-payouts";
 import { makeGetPayoutCSV } from "../payout-details/get-payout-csv";
-import { makeGetSubAccounts } from "../../api/get-subaccounts";
 import { SubAccountService } from "../../api/services/subaccounts.service";
 import { StyledHost, tableExportedParts } from "../../ui-components";
 import { defaultColumnsKeys } from "./payouts-table";
+import { makeGetSubAccounts } from "../../actions/sub-account/get-subaccounts";
 export class PayoutsList {
     constructor() {
         this.handleOnError = (event) => {
@@ -22,7 +21,7 @@ export class PayoutsList {
         this.errorMessage = null;
         this.accountId = undefined;
         this.authToken = undefined;
-        this.apiOrigin = config.proxyApiOrigin;
+        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
@@ -71,7 +70,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '7e8c3bf1df6c6cdffdc7205f84d4b451b331f6db', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '9ba8af8a562107b8fdc5bece521187ab70b90669', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '259a62df9d161fc97d731ccc8488f556580f5378', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '9733d459d09173f4b9dec953d9c763910ac54e1d', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -127,7 +126,7 @@ export class PayoutsList {
                 },
                 "attribute": "api-origin",
                 "reflect": false,
-                "defaultValue": "config.proxyApiOrigin"
+                "defaultValue": "PROXY_API_ORIGIN"
             },
             "columns": {
                 "type": "string",

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

@@ -23,5 +23,5 @@ export const payoutTableCells = (downloadCSV) => ({
     other_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.other_total))),
     amount: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.amount))),
     status: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPayoutStatusToBadge(payout.status))),
-    csv: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout); } }, "CSV"))),
+    csv: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout.id); } }, "CSV"))),
 });

package/dist/collection/components/refund-form/refund-form.js

@@ -2,7 +2,6 @@ import { h, } from "@stencil/core";
 import RefundFormSchema from "./refund-form-schema";
 import { Api } from "../../api";
 import { FormController } from "../../ui-components/form/form";
-import { config } from "../../../config";
 import { CURRENCY_MASK } from "../../utils/form-input-masks";
 import { StyledHost } from "../../ui-components";
 export class RefundForm {
@@ -71,11 +70,11 @@ export class RefundForm {
         if (!this.authToken) {
             console.warn('Warning: Missing auth-token.');
         }
-        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
+        this.api = Api({ authToken: this.authToken, apiOrigin: PROXY_API_ORIGIN });
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '21bb5742fac6f75a96b334e2806906e9d9d3a215' }, h("h1", { key: '74c81b6918611e8506bcec7ad28080437a435d35' }, "Refund"), this.refundInfoText && (h("div", { key: '1cd42cd6bf063fe52b35c9adeccbba366147a8a0', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '338b9ffd53bc98da86a0c96eceb4057c235cc524', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'e8335bcee9ce21198a2104913b5f084e897807d4', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '6efdd00f3a96bafb713e2d9f23a77a9cfd88dc21', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '55680d454a42549b8c442f1897455cc6c0f4e973', class: "form-group" }, h("form-control-monetary", { key: 'c38894006ce18238f1fd7738feea4ca3c710930d', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: 'fe803d97c9b90bdb87fa99dd454859a365901688', class: "form-group" }, h("form-control-text", { key: '08a129a72043547fb57ee99a1b3326dbfb03b871', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '08ba9b480faf93f81d5f1396bc42469735fdf46d', class: "form-group d-flex flex-row-reverse" }, h("button", { key: 'a07f1a85156ef80e87e9d0b5e615c1c08eebd7d2', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: '10aa3a31daedcb1bc4213abb3062b09745427370' }, h("h1", { key: '1b0b9c6a22dda364275f6da46e8e58015eb3378d' }, "Refund"), this.refundInfoText && (h("div", { key: '1d51f74c4e2c6419afe046a95f23f16f99209982', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '4d6b0140f2bd3666000df1374a2ab6573ce2a7ee', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '1e740ebd882fd08df43d23919325f6556ac04b29', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '242bfd0f2a30be1fdaa477341e2d480108633551', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '681a00fc41eb1701f8f189fa5139bf42ce43453f', class: "form-group" }, h("form-control-monetary", { key: '2f5a906d7a415391a339236d7e7e189db4febd95', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: '9f0f6b5c2f5010ba1c51757bf4667ced40615738', class: "form-group" }, h("form-control-text", { key: 'c4f9a4431224763820dacc404ea1b693630a7ede', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: 'df5d528c865684da0c7583114a7d02b6cb6d5a6e', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '05af832414b65d41760ca6d8b001a4affbf807c4', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list-core.js

@@ -0,0 +1,141 @@
+import { h } from "@stencil/core";
+import { Table } from "../../utils/table";
+import { table, tableCell } from "../../styles/parts";
+import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { pagingDefaults } from "../../api";
+import { terminalOrdersTableCells, terminalOrdersTableColumns } from "./terminal-orders-table";
+export class TerminalOrdersListCore {
+    constructor() {
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+        };
+        this.rowClickHandler = (e) => {
+            const clickedOrderId = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedOrderId)
+                return;
+            console.log('clickedOrderId', clickedOrderId);
+        };
+        this.getTerminalOrders = undefined;
+        this.columns = undefined;
+        this.terminalOrders = [];
+        this.terminalOrdersTable = undefined;
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    componentWillLoad() {
+        this.terminalOrdersTable = new Table(this.terminalOrders, this.columns, terminalOrdersTableColumns, terminalOrdersTableCells);
+        if (this.getTerminalOrders) {
+            this.fetchData();
+        }
+    }
+    fetchData() {
+        this.loading = true;
+        console.log('fetching terminal orders');
+        this.loading = false;
+    }
+    get entityId() {
+        return this.terminalOrders.map((terminalOrder) => terminalOrder.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.terminalOrdersTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
+    render() {
+        return (h("div", { key: '0985e60932d09dafc25f5d98415a7dc0b56d64a8' }, h("div", { key: '390633346017eaced1704ea7b5c800aae0f9df57', class: "table-wrapper" }, h("table", { key: '56959798f3fab7ff46d410908f7cf0e889940a51', class: "table table-hover", part: table }, h("thead", { key: '25fab5c7217777cd10ef8515ce5745748d8cdb22', class: "table-head sticky-top" }, h("tr", { key: '6c5606a186e0a3bacda194cd348d92798d63b9e4', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: 'cff51b485040873e6bde770269d4aa4a161c4c82', class: "table-body" }, h(TableLoadingState, { key: 'f38917eb02c8f537496b2465e5b64da302e8c19a', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '2f7ee4c2c1a9d37134df4a955f92a33ef2ac6ca3', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'c9bbb80471f1ad7ef04199949cfd0583852a5a26', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'c476e3245d5365d6facff461ea921c18c3001caf', class: "sticky-bottom" }, h("tr", { key: 'ae0d4344538d1f3ee7c2702c1475e730e1d25b8c', class: "table-light align-middle" }, h("td", { key: 'f5c8fa258bcc8d0853f9f419722d7e995f2a771b', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '2e73c5c292533441692ed97ee065448426c43f85', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+    }
+    static get is() { return "terminal-orders-list-core"; }
+    static get properties() {
+        return {
+            "getTerminalOrders": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "columns",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "terminalOrders": {},
+            "terminalOrdersTable": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "pagingParams": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "pagingParams",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getTerminalOrders",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "columns",
+                "methodName": "updateOnPropChange"
+            }];
+    }
+}

package/dist/collection/components/terminal-orders-list/terminal-orders-list.js

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../ui-components";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { defaultColumnsKeys } from "./terminal-orders-table";
+export class TerminalOrdersList {
+    constructor() {
+        this.getTerminalOrders = undefined;
+        this.errorMessage = null;
+        this.businessId = undefined;
+        this.authToken = undefined;
+        this.apiOrigin = PROXY_API_ORIGIN;
+        this.columns = defaultColumnsKeys;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.initializeGetTerminalOrders();
+    }
+    initializeGetTerminalOrders() {
+        if (this.businessId && this.authToken) {
+            this.getTerminalOrders = () => {
+                console.log('getTerminalOrders');
+            };
+        }
+        else {
+            this.errorMessage = 'Business ID and Auth Token are required';
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: '54ebb6b9b12b123caaa6d5190d0a1c6c2198d3e3' }, h("terminal-orders-list-core", { key: '99376fd9a6b5657d8777a4873f16b98a4bcf03cf', getTerminalOrders: this.getTerminalOrders, columns: this.columns })));
+    }
+    static get is() { return "justifi-terminal-orders-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "businessId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "business-id",
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "api-origin",
+                "reflect": false,
+                "defaultValue": "PROXY_API_ORIGIN"
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "columns",
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "getTerminalOrders": {},
+            "errorMessage": {}
+        };
+    }
+}

package/dist/collection/components/terminal-orders-list/terminal-orders-table.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
+export const defaultColumnsKeys = 'id,status';
+export const terminalOrdersTableColumns = {
+    id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The ID of the terminal order" }, "ID")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The status of the terminal order" }, "Status")),
+};
+export const terminalOrdersTableCells = {
+    id: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.id)),
+    status: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.status)),
+};

package/dist/collection/components/terminals-list/terminals-list-core.js

@@ -3,7 +3,7 @@ import { pagingDefaults } from "../../api";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { terminalTableColumns, terminalTableCells } from "./terminals-table";
 import { Table } from "../../utils/table";
-import { queryParams, onQueryParamsChange } from "./terminals-list-params-state";
+import { getRequestParams, onQueryParamsChange } from "./terminals-list-params-state";
 import { table, tableCell } from "../../styles/parts";
 import { TableClickActions } from "../../ui-components/table/event-types";
 export class TerminalsListCore {
@@ -53,7 +53,7 @@ export class TerminalsListCore {
     fetchData() {
         this.loading = true;
         this.getTerminals({
-            params: this.requestParams,
+            params: this.terminalParams,
             onSuccess: async ({ terminals, pagingInfo }) => {
                 this.terminals = terminals;
                 this.paging = pagingInfo;
@@ -100,9 +100,10 @@ export class TerminalsListCore {
             },
         });
     }
-    get requestParams() {
-        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
-        return combinedParams;
+    get terminalParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
     }
     get subAccountParams() {
         let accountIdNumbers = this.terminals.map((terminal) => terminal.account_id);
@@ -123,7 +124,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'a80b76fc1f535c9d1fea371b7655a2baa373e53c' }, h("div", { key: '3c6fb067ed034fd09c767e5f1b7ffa7ab2b0b6c2', class: "table-wrapper" }, h("table", { key: 'e24cff12e153db046b1565011bbae3db133609f9', class: "table table-hover", part: table }, h("thead", { key: 'd91e948a4b0a6da3bc67ea489bf6deb828ccb9e5', class: "table-head sticky-top" }, h("tr", { key: '7e629ab6636fceb70dd75e1163094cd44d1f525d', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '760ed57f2a669d3a6cd54953c9d5259cb6518a60', class: "table-body" }, h(TableLoadingState, { key: '4cb50cce3d9644904fffd1969de19647c6eabc11', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '84ea8077a878aa6b94c1bd2eb1c9393ffc41b983', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '94cb9745f2951383625833a783d4d2bf8e88b1b2', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '0e111df52934ff81bddd77a15d720c44f53e3096', class: "sticky-bottom" }, h("tr", { key: '0abc10194bb09342ecefb62b7a981c3809542a99', class: "table-light align-middle" }, h("td", { key: '828f58c6054dd437cb597696d5bdaf33069e69cf', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'd9f4db3f7c580fda067afff8919a695776c8f502', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '074b9925b7092b69d4073b86e926bc6e627ba8cd' }, h("div", { key: '195acd38db8ecc931e86e517a5e626ced44ce66f', class: "table-wrapper" }, h("table", { key: '6534aba9b68490de5a7bd03d9760021db02e3f61', class: "table table-hover", part: table }, h("thead", { key: 'bf8dc807e1b31ed1e8040f952b5bfc3cfa77116d', class: "table-head sticky-top" }, h("tr", { key: 'b6828dbb38504d1f410f4c1199ea12d03b66292a', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '2080463e7f6ac9995b30e38e52f1650f75983dab', class: "table-body" }, h(TableLoadingState, { key: '36b61e1fb8c23dea61aa3a41b2749f80dbfb34bb', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c2a11b7e3ebb37538522026854faf3f10e405271', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'a40dd753552ee8ad3fae2655a4e890e67a8c14f0', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '0af6b6aefe2160a36e773deabed1c6d006d0cde2', class: "sticky-bottom" }, h("tr", { key: '8576eee95c757c41d6b0a6838933e9c123f519d3', class: "table-light align-middle" }, h("td", { key: '87ca55905ecb734ddb059dce080256af6a7f1be1', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '08f29c2415998948e4dc020487fe10215bf10c3d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {
@@ -245,9 +246,6 @@ export class TerminalsListCore {
     }
     static get watchers() {
         return [{
-                "propName": "queryParams",
-                "methodName": "updateOnPropChange"
-            }, {
                 "propName": "pagingParams",
                 "methodName": "updateOnPropChange"
             }, {

package/dist/collection/components/terminals-list/terminals-list-filters.js

@@ -1,28 +1,86 @@
 import { h } from "@stencil/core";
 import { debounce } from "lodash";
-import { queryParams, clearParams } from "./terminals-list-params-state";
+import { filterParams, propsParams, clearParams } from "./terminals-list-params-state";
 import { StyledHost } from "../../ui-components";
+import { ITerminalStatus } from "../../api";
+import { terminalsListFilterMenu, terminalIdTerminalsListFilterParam, terminalStatusTerminalsListFilterParam } from "../../styles/parts";
 export class TerminalsListFilters {
     constructor() {
         this.setParamsOnChange = (name, value) => {
-            queryParams[name] = value;
+            filterParams[name] = value;
         };
+        this.terminalId = undefined;
+        this.terminalStatus = undefined;
     }
     componentWillLoad() {
         // debounced input handler for text input
         this.debouncedSetParamsOnChange = debounce(this.setParamsOnChange, 300);
+        const propsToSet = {
+            terminal_id: this.terminalId,
+            status: this.terminalStatus,
+        };
+        Object.entries(propsToSet).forEach(([key, value]) => {
+            if (value) {
+                propsParams[key] = value;
+            }
+        });
     }
     get terminalStatusOptions() {
         return [
             { label: 'All', value: '' },
-            { label: 'Connected', value: 'connected' },
-            { label: 'Disconnected', value: 'disconnected' },
-            { label: 'Unknown', value: 'unknown' },
+            { label: 'Connected', value: ITerminalStatus.connected },
+            { label: 'Disconnected', value: ITerminalStatus.disconnected },
+            { label: 'Unknown', value: ITerminalStatus.unknown },
         ];
     }
     render() {
-        return (h(StyledHost, { key: 'f1af204ada5efea668078a7f311dead116050f92' }, h("table-filters-menu", { key: 'f7d13437f2ca0733694d8a676bde72e9b26e49e6', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'eb1539830b47437e8dd713a580fa3b2aa1e1bb9b', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'cbd11d34040889eb4fdceee8c1d0fa64c0b62bab', class: "p-2" }, h("form-control-text", { key: '4cfdef309714ef532970db63f7d372bf59b0b0d3', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: 'd740dfff6b6c920be52bff5c17ba00fa592a083c', class: "p-2" }, h("form-control-select", { key: 'dcc2f6d5a73674bb4e7810da5cb7694074ab7d6b', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' }))))));
+        const filterMenuParams = Object.assign({}, filterParams);
+        return (h(StyledHost, { key: '9e55f56855ebf7f0755c5750bfe4ae57bcc2a48e' }, h("table-filters-menu", { key: 'dae12779f49c3264cb3a5362cc4e4edc2aa6447c', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '9767d61b94a7de6bc290a1dc97e5ecdb7e75beb8', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'cab20a5aab288920f205835c4343b44502cc4a1e', class: "p-2" }, h("form-control-text", { key: '58600a426dded8a9efc05e444439c36e3eab5bc8', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '81f513ae03435ea2c97e43f460aab430ebd4a490', class: "p-2" }, h("form-control-select", { key: 'ee04592e4f117f7b58984932d10081a4383d7a65', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "terminalId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "terminal-id",
+                "reflect": false
+            },
+            "terminalStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITerminalStatus",
+                    "resolved": "ITerminalStatus.connected | ITerminalStatus.disconnected | ITerminalStatus.unknown",
+                    "references": {
+                        "ITerminalStatus": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ITerminalStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "terminal-status",
+                "reflect": false
+            }
+        };
+    }
 }

package/dist/collection/components/terminals-list/terminals-list-params-state.js

@@ -1,8 +1,14 @@
 import { createStore } from "@stencil/store";
-const initialState = {};
-const terminalsListQueryParams = createStore(() => initialState);
-const { state: queryParams, on: onQueryParamsChange } = terminalsListQueryParams;
+const filterParamsInitialState = {};
+const propsParamsInitialState = {};
+const filterParamsStore = createStore(() => filterParamsInitialState);
+const { state: filterParams, on: onQueryParamsChange } = filterParamsStore;
+const propsParamsStore = createStore(() => propsParamsInitialState);
+const { state: propsParams } = propsParamsStore;
+const getRequestParams = () => {
+    return Object.assign(Object.assign({}, filterParams), propsParams);
+};
 const clearParams = () => {
-    terminalsListQueryParams.reset();
+    filterParamsStore.reset();
 };
-export { terminalsListQueryParams, queryParams, onQueryParamsChange, clearParams };
+export { filterParams, propsParams, onQueryParamsChange, clearParams, getRequestParams };