@justifi/webcomponents 4.20.1 → 4.22.0

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

@@ -43,7 +43,7 @@ const TableFiltersMenu = /*@__PURE__*/ proxyCustomElement(class TableFiltersMenu
         this.menu.classList.remove('show');
     }
     render() {
-        return (h("div", { key: 'dd6aae6e43579e8f833b1f3f6a6227d2522d79ec', class: "d-flex gap-2" }, h("div", { key: '6decd268cf11d67c3f9e3c2b22e60cbdf328763a', class: "dropdown pb-3" }, h(Button, { key: 'af22247916f55da650da95006e3317316a4122f5', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '0516d664adf8feccb9dd9cb74023241867285bd6', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'd42f891b0b30fa152e03bfe3fbcb12da4707974b', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '77eb00715458275e6df23da973103046364f50aa' })))), h("div", { key: 'c9070c2d5ee453cf3a97908514877975c55813b8' }, h(Button, { key: '99b38ff5ac51ee21227832b2200f2dcdec40a70c', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'de116fd5406fcc4feb36df24f8fc3162b39567e8', class: "d-flex gap-2" }, h("div", { key: '07c7d885acc4816d28e3c2653d5e4c9a7ea42108', class: "dropdown pb-3" }, h(Button, { key: '34cee2bf49991340c4291c5014d17bfa9c3593d8', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '19640a1ab19bdda14398c4a76392584c6bf1e6d9', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'a72ce2a8ab9fc317236128980bd4bc9be92faf2c', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '008b23e2dc775ec59247df27379780d1ccdd81eb' })))), h("div", { key: '5b60c0821e4cfe5395c6eca11957e18446039cd7' }, h(Button, { key: '56d032309bdff48f6501ae6be6344860d008f481', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get watchers() { return {
         "params": ["watchParamsHandler"]

package/dist/module/table-loading-state.js

@@ -0,0 +1,34 @@
+import { h } from '@stencil/core/internal/client';
+
+const TableEmptyState = (props) => {
+    const { columnSpan, isEmpty } = props;
+    if (!columnSpan || !isEmpty) {
+        return null;
+    }
+    return (h("tr", null,
+        h("td", { class: "empty-state", part: "empty-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
+};
+
+const TableErrorState = (props) => {
+    const { columnSpan, errorMessage } = props;
+    if (!columnSpan || !errorMessage) {
+        return null;
+    }
+    return (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)));
+};
+
+const TableLoadingState = (props) => {
+    const { columnSpan, isLoading } = props;
+    if (!columnSpan || !isLoading) {
+        return null;
+    }
+    return (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 { TableLoadingState as T, TableEmptyState as a, TableErrorState as b };

package/dist/module/table.js

@@ -0,0 +1,18 @@
+class Table {
+    get columnData() {
+        return this.columnKeys.map((key) => this.tableColumns[key]());
+    }
+    get rowData() {
+        return this.collection.map((checkout) => {
+            return this.columnKeys.map((key) => this.tableCells[key](checkout[key]));
+        });
+    }
+    constructor(collection, columns, tableColumns, tableCells) {
+        this.columnKeys = columns.split(',');
+        this.collection = collection;
+        this.tableColumns = tableColumns;
+        this.tableCells = tableCells;
+    }
+}
+
+export { Table as T };

package/dist/module/terminals-list-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TerminalsListCore extends Components.TerminalsListCore, HTMLElement {}
+export const TerminalsListCore: {
+    prototype: TerminalsListCore;
+    new (): TerminalsListCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { T as TerminalsListCore$1, d as defineCustomElement$1 } from './terminals-list-core2.js';
+
+const TerminalsListCore = TerminalsListCore$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TerminalsListCore, defineCustomElement };

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

@@ -0,0 +1,240 @@
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import './Checkout.js';
+import { p as pagingDefaults } from './Pagination.js';
+import './Payment.js';
+import './SubAccount.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state.js';
+import { d as defineCustomElement$2, o as onFilterChange } from './table-filters-menu2.js';
+import { T as Table } from './table.js';
+import { d as defineCustomElement$8 } from './custom-popper2.js';
+import { d as defineCustomElement$7 } from './form-control-error-text2.js';
+import { d as defineCustomElement$6 } from './form-control-select2.js';
+import { d as defineCustomElement$5 } from './form-control-text2.js';
+import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$3 } from './pagination-menu2.js';
+import { d as defineCustomElement$1 } from './terminals-list-filters2.js';
+
+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>";
+    }
+};
+
+const defaultColumnsKeys = 'nickname,provider_id,status';
+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")),
+};
+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) })),
+};
+
+const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.rowClicked = createEvent(this, "terminal-row-clicked", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        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 watchers() { return {
+        "params": ["updateOnPropChange"],
+        "getTerminals": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
+    }; }
+}, [0, "terminals-list-core", {
+        "getTerminals": [16],
+        "getSubAccounts": [16],
+        "columns": [1],
+        "terminals": [32],
+        "terminalsTable": [32],
+        "subAccounts": [32],
+        "loading": [32],
+        "errorMessage": [32],
+        "paging": [32],
+        "params": [32]
+    }, undefined, {
+        "params": ["updateOnPropChange"],
+        "getTerminals": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["terminals-list-core", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "pagination-menu", "table-filters-menu", "terminals-list-filters"];
+    components.forEach(tagName => { switch (tagName) {
+        case "terminals-list-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TerminalsListCore);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "form-control-error-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "pagination-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "table-filters-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "terminals-list-filters":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { TerminalsListCore as T, defineCustomElement as d };

package/dist/module/terminals-list-filters.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TerminalsListFilters extends Components.TerminalsListFilters, HTMLElement {}
+export const TerminalsListFilters: {
+    prototype: TerminalsListFilters;
+    new (): TerminalsListFilters;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { T as TerminalsListFilters$1, d as defineCustomElement$1 } from './terminals-list-filters2.js';
+
+const TerminalsListFilters = TerminalsListFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TerminalsListFilters, defineCustomElement };

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

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { l as lodash } from './lodash.js';
+import { d as defineCustomElement$6 } from './custom-popper2.js';
+import { d as defineCustomElement$5 } from './form-control-error-text2.js';
+import { d as defineCustomElement$4 } from './form-control-select2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$1 } from './table-filters-menu2.js';
+
+const TerminalsListFilters = /*@__PURE__*/ proxyCustomElement(class TerminalsListFilters extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.params = {};
+        this.setParamsOnChange = undefined;
+        this.clearParams = undefined;
+    }
+    componentWillLoad() {
+        // debounced input handler for text input
+        this.debouncedSetParamsOnChange = lodash.exports.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 || '' })))));
+    }
+}, [0, "terminals-list-filters", {
+        "params": [16],
+        "setParamsOnChange": [16],
+        "clearParams": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["terminals-list-filters", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "table-filters-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "terminals-list-filters":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TerminalsListFilters);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-error-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "table-filters-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { TerminalsListFilters as T, defineCustomElement as d };

package/dist/module/utils2.js

@@ -3848,14 +3848,15 @@ var Dinero = function Dinero(options) {
 
 var dinero = Object.assign(Dinero, Defaults, Globals, Static);
 
-function formatCurrency(amount, withSymbol = true) {
+function formatCurrency(amount, withSymbol = true, withCurrencyName = false) {
     if (!amount)
         amount = 0;
     function format(amount) {
         const formattedString = withSymbol ? '$0,0.00' : '0,0.00';
         return dinero({ amount: amount, currency: 'USD' }).toFormat(formattedString);
     }
-    return amount < 0 ? `(${format(-amount)})` : format(amount);
+    const formattedAmount = amount < 0 ? `(${format(-amount)})` : format(amount);
+    return withCurrencyName ? `${formattedAmount} USD` : formattedAmount;
 }
 function formatDate(dateString) {
     if (!dateString)
@@ -3908,46 +3909,6 @@ function extractComputedFontsToLoad() {
     const computedStyles = getComputedStyle(document.body);
     return (((_a = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('--jfi-load-google-font')) === null || _a === void 0 ? void 0 : _a.trim().replace(/'|"/g, '').replace(' ', '+')) || null);
 }
-const MapPaymentStatusToBadge = (status) => {
-    switch (status) {
-        case 'authorized':
-            return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
-        case 'disputed':
-            return "<span class='badge bg-primary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</span>";
-        case 'achFailed':
-            return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
-        case 'failed':
-            return "<span class='badge bg-danger' title='This card payment didn't go through (it won't appear in a payout)'>Failed</span>";
-        case 'fully_refunded':
-            return "<span class='badge bg-primary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
-        case 'partially_refunded':
-            return "<span class='badge bg-primary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
-        case 'pending':
-            return "<span class='badge bg-secondary' title='This ACH payment was processed, but the funds haven't settled. It could still succeed or fail.'>Pending</span>";
-        case 'succeeded':
-            return "<span class='badge bg-success' title='This payment was successfully captured'>Successful</span>";
-    }
-};
-const MapPayoutStatusToBadge = (status) => {
-    switch (status) {
-        case 'canceled':
-            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Canceled</span>";
-        case 'failed':
-            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Failed</span>";
-        case 'forwarded':
-            return "<span class='badge bg-secondary' title='This payout initially failed; the funds have been forwarded to your next successful payout'>Forwarded</span>";
-        case 'in_transit':
-            return "<span class='badge bg-primary' title='Transfer to your bank account has been initiated'>In Transit</span>";
-        case 'paid':
-            return "<span class='badge bg-success' title='Successfully deposited into your bank account'>Paid</span>";
-        case 'pending':
-            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Pending</span>";
-        case 'scheduled':
-            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Scheduled</span>";
-        case 'withdrawn':
-            return "<span class='badge bg-success' title='Negative payout balance successfully withdrawn from your bank account'>Withdrawn</span>";
-    }
-};
 /**
  * Converts a snake_case string to a human-readable format by replacing underscores with spaces and capitalizing the first letter of each word.
  *
@@ -4009,4 +3970,4 @@ const isInRange = (num, min, max) => {
     return num >= min && num <= max;
 };
 
-export { MapPaymentStatusToBadge as M, formatCurrency as a, formatDisplayDate as b, composeQueryParams as c, isInRange as d, formatDate as e, formatMediumDate as f, formatTimeSeconds as g, snakeToCamel as h, isEmptyObject as i, formatTime as j, MapPayoutStatusToBadge as k, loadFontsOnParent as l, snakeCaseToHumanReadable as s };
+export { formatDate as a, formatTime as b, formatCurrency as c, formatDisplayDate as d, composeQueryParams as e, formatMediumDate as f, isInRange as g, formatTimeSeconds as h, isEmptyObject as i, snakeToCamel as j, loadFontsOnParent as l, snakeCaseToHumanReadable as s };

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

@@ -21,7 +21,7 @@ interface IApiProps {
     apiOrigin: string;
 }
 declare const Api: ({ authToken, apiOrigin }: IApiProps) => {
-    get: (endpoint: string, params?: any, signal?: AbortSignal) => Promise<any>;
+    get: (endpoint: string, params?: any, signal?: AbortSignal, headers?: HeadersInit) => Promise<any>;
     post: (endpoint: string, body?: any, params?: any, signal?: AbortSignal) => Promise<any>;
     put: (endpoint: string, body?: any, params?: any, signal?: AbortSignal) => Promise<any>;
     patch: (endpoint: string, body?: any, params?: any, signal?: AbortSignal) => Promise<any>;

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

@@ -7,7 +7,40 @@ export interface IBnpl {
     provider_order_id: string;
     provider_api_version: string;
 }
+interface ICompletion {
+    payment_mode?: ICheckoutPaymentMode;
+    payment_token?: string | null;
+    payment_status?: string | null;
+    payment_response?: any;
+    payment_error_code?: string | null;
+    payment_error_description?: string | null;
+    checkout_id?: string;
+    additional_transactions?: any[];
+    payment_id?: string;
+    payment_method_id?: string;
+    status?: string;
+    created_at: string;
+    updated_at: string;
+}
+export declare class Completion implements ICompletion {
+    payment_mode?: ICheckoutPaymentMode;
+    payment_token?: string | null;
+    payment_status?: string | null;
+    payment_response?: any;
+    payment_error_code?: string | null;
+    payment_error_description?: string | null;
+    checkout_id?: string;
+    additional_transactions?: any[];
+    payment_id?: string;
+    payment_method_id?: string;
+    status?: string;
+    created_at: string;
+    updated_at: string;
+    constructor(data: ICompletion);
+}
 export interface ICheckout {
+    id: string;
+    description: string;
     payment_intent_id: string;
     account_id: string;
     platform_account_id: string;
@@ -37,8 +70,18 @@ export interface ICheckout {
     total_amount: number;
     insurance_amount: number;
     status: ICheckoutStatus;
+    payment_currency?: string;
+    mode?: string | null;
+    statement_descriptor?: string | null;
+    application_fees?: any[] | null;
+    successful_payment_id?: string | null;
+    created_at: string;
+    updated_at: string;
+    completions?: ICompletion[];
 }
 export declare class Checkout implements ICheckout {
+    id: string;
+    description: string;
     payment_intent_id: string;
     account_id: string;
     platform_account_id: string;
@@ -68,10 +111,33 @@ export declare class Checkout implements ICheckout {
     total_amount: number;
     insurance_amount: number;
     status: ICheckoutStatus;
+    payment_currency?: string;
+    mode?: string | null;
+    statement_descriptor?: string | null;
+    application_fees?: any[] | null;
+    successful_payment_id?: string | null;
+    created_at: string;
+    updated_at: string;
+    completions?: ICompletion[];
+    sub_account_name?: string;
     constructor(data: ICheckout);
+    get payment_mode(): ICheckoutPaymentMode;
+}
+export declare enum ICheckoutPaymentMode {
+    bnpl = "Buy Now Pay Later",
+    ecom = "E-commerce",
+    card = "Card",
+    bank_account = "Bank Account",
+    card_present = "Card Present",
+    unknown = ""
+}
+export declare enum CompletionStatuses {
+    failed = "failed",
+    succeeded = "succeeded"
 }
+export type ICheckoutStatus = 'created' | 'completed' | 'attempted' | 'expired';
 export type ICheckoutCompleteResponse = IApiResponse<{
-    payment_mode: 'ecom' | 'bnpl';
+    payment_mode: ICheckoutPaymentMode;
     payment_token: null;
     payment_status: string;
     payment_response: null;
@@ -79,7 +145,13 @@ export type ICheckoutCompleteResponse = IApiResponse<{
     additional_transactions: any[];
     checkout: ICheckout;
 }>;
-export type ICheckoutStatus = 'created' | 'completed' | 'attempted' | 'expired';
 export type ILoadedEventResponse = {
     checkout_status: ICheckoutStatus;
 };
+export interface ICheckoutsParams {
+    status?: ICheckoutStatus;
+    payment_mode?: ICheckoutPaymentMode;
+    after_cursor?: string;
+    before_cursor?: string;
+}
+export {};

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

@@ -8,12 +8,18 @@ export declare enum PaymentMethodTypes {
     sezzle = "sezzle",
     saved = "saved"
 }
+export declare enum PaymentTypes {
+    card = "Card",
+    bankAccount = "ACH",
+    unknown = "Unknown"
+}
 export declare enum PaymentStatuses {
     pending = "pending",
     automatic = "automatic",
     authorized = "authorized",
     succeeded = "succeeded",
     failed = "failed",
+    canceled = "canceled",
     disputed = "disputed",
     fully_refunded = "fully_refunded",
     partially_refunded = "partially_refunded"
@@ -150,6 +156,7 @@ export declare class Payment implements IPayment {
     transaction_hold: null;
     constructor(payment: IPayment);
     get disputedStatus(): PaymentDisputedStatuses | null;
+    get paymentType(): PaymentTypes;
 }
 export interface IRefund {
     id: string;