@justifi/webcomponents 4.21.0 → 4.22.0

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

@@ -0,0 +1,257 @@
+import { h } from "@stencil/core";
+import { pagingDefaults } from "../../api";
+import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { onFilterChange } from "../../ui-components/filters/utils";
+import { defaultColumnsKeys, terminalTableColumns, terminalTableCells } from "./terminals-table";
+import { Table } from "../../utils/table";
+export class TerminalsListCore {
+    constructor() {
+        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.rowClickHandler = (e) => {
+            const clickedTerminalID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedTerminalID)
+                return;
+            this.rowClicked.emit(this.terminals.find((terminal) => terminal.id === clickedTerminalID));
+        };
+        this.setParamsOnChange = (name, value) => {
+            let newParams = { [name]: value };
+            this.params = onFilterChange(newParams, this.params);
+        };
+        this.clearParams = () => {
+            this.errorMessage = '';
+            this.params = {};
+        };
+        this.getTerminals = undefined;
+        this.getSubAccounts = undefined;
+        this.columns = defaultColumnsKeys;
+        this.terminals = [];
+        this.terminalsTable = new Table([], this.columns, terminalTableColumns, terminalTableCells);
+        this.subAccounts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = {};
+    }
+    updateOnPropChange() {
+        this.fetchTerminals();
+    }
+    componentWillLoad() {
+        if (this.getTerminals && this.getSubAccounts) {
+            this.fetchTerminals();
+        }
+    }
+    fetchTerminals() {
+        this.loading = true;
+        this.getTerminals({
+            params: this.params,
+            onSuccess: async ({ terminals, pagingInfo }) => {
+                this.terminals = terminals;
+                this.paging = pagingInfo;
+                this.terminalsTable = new Table(this.terminals, this.columns, terminalTableColumns, terminalTableCells);
+                const shouldFetchSubAccounts = this.terminalsTable.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() {
+        this.getSubAccounts({
+            params: this.subAccountParams,
+            onSuccess: ({ subAccounts }) => {
+                this.subAccounts = subAccounts;
+                this.terminals = this.terminals.map((terminal) => {
+                    var _a;
+                    terminal.sub_account_name = (_a = this.subAccounts.find((subAccount) => subAccount.id === terminal.account_id)) === null || _a === void 0 ? void 0 : _a.name;
+                    return terminal;
+                });
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get subAccountParams() {
+        let accountIdNumbers = this.terminals.map((terminal) => terminal.account_id);
+        let uniqueAccountIds = [...new Set(accountIdNumbers)];
+        let accountIdString = uniqueAccountIds.join(',');
+        return { sub_account_id: accountIdString };
+    }
+    get entityId() {
+        return this.terminals.map((terminal) => terminal.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.terminalsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
+    render() {
+        return (h("div", { key: 'd6bd09387fc558286f09cc98e7b5423a57410440' }, h("terminals-list-filters", { key: '27f3b5ca45bad96695364e96f0c047db8465f061', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '693ef5e9383ad2d4433a79872d51a922f1bb0cbb', class: "table-wrapper" }, h("table", { key: 'd6779ca5094593e21ddee4f0b236b0fa94c7cfe5', class: "table table-hover" }, h("thead", { key: '5b7524c86b32d61d2b087c9ace5673276a6525e2', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '6f3f3f560f5eaa38a700aacf850c01ce7224c617', class: "table-light text-nowrap", part: "table-head-row" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'd65612fc80a216dbbce686e1e5cdd06bc7c934ad', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '9ffbafb5105380d685e9cad76b627afe96c8e724', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '692c6cb35da2c9057bbac4e5d8e7536017ef1694', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '5072ca0cb9f9ca3d77fc394c935cc1ae473b8864', 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, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: 'b043af164be76a5bdbaf53e5a0563f48049925b0', class: "sticky-bottom" }, h("tr", { key: '2fed67d847e113c371213643c07a79208701c1e5', class: "table-light align-middle" }, h("td", { key: 'b3fac5af2d92a8ea93daefd24310ed5b45d32764', part: "pagination-bar", colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '4e5a82670a7aa1fee01b71fbc20b65824300a07f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+    }
+    static get is() { return "terminals-list-core"; }
+    static get properties() {
+        return {
+            "getTerminals": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "getSubAccounts": {
+                "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,
+                "defaultValue": "defaultColumnsKeys"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "terminals": {},
+            "terminalsTable": {},
+            "subAccounts": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClicked",
+                "name": "terminal-row-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Terminal",
+                    "resolved": "Terminal",
+                    "references": {
+                        "Terminal": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Terminal"
+                        }
+                    }
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getTerminals",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getSubAccounts",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "columns",
+                "methodName": "updateOnPropChange"
+            }];
+    }
+}

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

@@ -0,0 +1,81 @@
+import { h } from "@stencil/core";
+import { debounce } from "lodash";
+export class TerminalsListFilters {
+    constructor() {
+        this.params = {};
+        this.setParamsOnChange = undefined;
+        this.clearParams = undefined;
+    }
+    componentWillLoad() {
+        // debounced input handler for text input
+        this.debouncedSetParamsOnChange = debounce(this.setParamsOnChange, 300);
+    }
+    get terminalStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Connected', value: 'connected' },
+            { label: 'Disconnected', value: 'disconnected' },
+            { label: 'Unknown', value: 'unknown' },
+        ];
+    }
+    render() {
+        return (h("table-filters-menu", { key: '4bfd04cf078878811b2692ff166598deb22b7d92', params: this.params, clearParams: this.clearParams }, h("div", { key: '470d4eb34429c887d03beb0caedd8c9486d18900', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '34d34e8c90c36b7cab1fb3442cb04e58f9ebb334', class: "p-2" }, h("form-control-text", { key: '5234008261646f1a090686fc0d795a6e846c9e04', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: 'fdd089fa29bf030ed3825993ff4e50a9ecefa1dc', class: "p-2" }, h("form-control-select", { key: '0c078ec1ecffea26e0cec5633cb4748337a75643', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.status || '' })))));
+    }
+    static get is() { return "terminals-list-filters"; }
+    static get properties() {
+        return {
+            "params": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TerminalsTableFilterParams",
+                    "resolved": "TerminalsTableFilterParams",
+                    "references": {
+                        "TerminalsTableFilterParams": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::TerminalsTableFilterParams"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "{}"
+            },
+            "setParamsOnChange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "clearParams": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,209 @@
+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 { TerminalService } from "../../api/services/terminal.service";
+import { makeGetTerminals } from "./get-terminals";
+import { SubAccountService } from "../../api/services/subaccounts.service";
+import { makeGetSubAccounts } from "../../api/get-subaccounts";
+import { StyledHost, tableExportedParts } from "../../ui-components";
+/**
+  * @exportedPart label: Label for inputs
+  * @exportedPart input: The input fields
+  * @exportedPart input-invalid: Invalid state for inputs
+  * @exportedPart table-head: Table head
+  * @exportedPart table-head-row: Head row
+  * @exportedPart table-head-cell: Individual head cell
+  * @exportedPart table-body: Body of the table
+  * @exportedPart table-row: Row of the table
+  * @exportedPart table-cell: Individual cell of the table
+  * @exportedPart loading-state-cell: Row for loading state
+  * @exportedPart loading-state-spinner: Spinner element for loading state
+  * @exportedPart error-state: Row for Error state
+  * @exportedPart empty-state: Row for Emtpy state
+  * @exportedPart pagination-bar: Pagination bar
+  * @exportedPart arrow: Both paging buttons
+  * @exportedPart arrow-left: Previous page button
+  * @exportedPart arrow-right: Next page button
+  * @exportedPart button-disabled: Disabled state for paging buttons
+  * @exportedPart previous-button-text: Text for Previous button
+  * @exportedPart next-button-text: Text for Next button
+*/
+export class TerminalsList {
+    constructor() {
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
+        this.getTerminals = undefined;
+        this.getSubAccounts = undefined;
+        this.errorMessage = null;
+        this.accountId = undefined;
+        this.authToken = undefined;
+        this.apiOrigin = config.proxyApiOrigin;
+        this.columns = undefined;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeGetData();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    propChanged() {
+        this.initializeGetData();
+    }
+    initializeGetData() {
+        this.initializeGetTerminals();
+        this.initializeGetSubAccounts();
+    }
+    initializeGetTerminals() {
+        if (this.accountId && this.authToken) {
+            this.getTerminals = makeGetTerminals({
+                id: this.accountId,
+                authToken: this.authToken,
+                service: new TerminalService(),
+                apiOrigin: this.apiOrigin
+            });
+        }
+        else {
+            this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    initializeGetSubAccounts() {
+        if (this.accountId && this.authToken) {
+            this.getSubAccounts = makeGetSubAccounts({
+                accountId: this.accountId,
+                authToken: this.authToken,
+                service: new SubAccountService(),
+                apiOrigin: this.apiOrigin
+            });
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: 'b150133d9e787d0a4f32d92d9fb26df50391e632', exportparts: tableExportedParts }, h("terminals-list-core", { key: '59302d93d0a308c34aacabf7e5a006099eaff2d6', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+    }
+    static get is() { return "justifi-terminals-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-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": "config.proxyApiOrigin"
+            },
+            "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 {
+            "getTerminals": {},
+            "getSubAccounts": {},
+            "errorMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "propChanged"
+            }, {
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }];
+    }
+}
+;

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

@@ -0,0 +1,11 @@
+export const MapTerminalStatusToBadge = (status) => {
+    switch (status) {
+        case 'connected':
+            return "<span class='badge bg-success' title='This terminal is connected.'>Connected</span>";
+        case 'disconnected':
+            return "<span class='badge bg-danger' title='This terminal is disconnected.'>Disconnected</span>";
+        case 'unknown':
+            return "<span class='badge bg-secondary' title='The status of this terminal is unknown'>Unknown</span>";
+    }
+    ;
+};

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

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+import { MapTerminalStatusToBadge } from "./terminals-status";
+export const defaultColumnsKeys = 'nickname,provider_id,status';
+export const terminalTableColumns = {
+    nickname: () => (h("th", { part: "table-head-cell", scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
+    provider_id: () => (h("th", { part: "table-head-cell", scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each terminal" }, "Status")),
+};
+export const terminalTableCells = {
+    nickname: (value) => (h("td", null, value)),
+    provider_id: (value) => (h("td", null, value)),
+    sub_account_name: (value) => (h("td", null, value)),
+    status: (value) => (h("td", { innerHTML: MapTerminalStatusToBadge(value) })),
+};

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+
+justifi-payment-method-form {
+  display: block;
+  margin-left: calc(var(--jfi-layout-padding) * -1);
+  margin-right: calc(var(--jfi-layout-padding) * -1);
+}