@justifi/webcomponents 5.3.5 → 5.4.0

package/dist/module/justifi-terminal-orders-list.js

@@ -1,41 +1,104 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
-import { c as checkPkgVersion } from './check-pkg-version.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
 import { d as defineCustomElement$2, a as defaultColumnsKeys } from './terminal-orders-list-core2.js';
+import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
+import './Checkout.js';
+import './Pagination.js';
+import './Payment.js';
+import { a as TerminalOrder } from './SubAccount.js';
+import './Document.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
+import { A as Api } from './Api.js';
 import { d as defineCustomElement$3 } from './pagination-menu2.js';
 
+const makeGetTerminalOrders = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError, final }) => {
+    var _a, _b;
+    try {
+        const response = await service.fetchTerminalOrders(id, authToken, params, apiOrigin);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const terminalOrders = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new TerminalOrder(dataItem))) || [];
+            onSuccess({ terminalOrders, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+
+class TerminalOrderService {
+    async fetchTerminalOrders(accountId, authToken, params, apiOrigin = "https://wc-proxy.justifi.ai") {
+        const headers = { account: accountId };
+        const api = Api({ authToken, apiOrigin });
+        const endpoint = 'terminals/orders';
+        return api.get(endpoint, params, null, headers);
+    }
+}
+
 const TerminalOrdersList = /*@__PURE__*/ proxyCustomElement(class TerminalOrdersList extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.getTerminalOrders = undefined;
         this.errorMessage = null;
-        this.businessId = undefined;
+        this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = "https://wc-proxy.justifi.ai";
         this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion();
-        this.initializeGetTerminalOrders();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeGetData();
     }
-    initializeGetTerminalOrders() {
-        if (this.businessId && this.authToken) {
-            this.getTerminalOrders = () => {
-                console.log('getTerminalOrders');
-            };
+    initializeGetData() {
+        if (this.accountId && this.authToken) {
+            this.getTerminalOrders = makeGetTerminalOrders({
+                id: this.accountId,
+                authToken: this.authToken,
+                service: new TerminalOrderService(),
+                apiOrigin: this.apiOrigin
+            });
         }
         else {
-            this.errorMessage = 'Business ID and Auth Token are required';
+            this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
-        return (h(StyledHost, { key: 'f64c444f9e93c3f520bd5c119b49b6b51163e03b' }, h("terminal-orders-list-core", { key: 'd7601588a25fd5ee08ad8faddc02807a61015d15', getTerminalOrders: this.getTerminalOrders, columns: this.columns })));
+        return (h(StyledHost, { key: '1975f9c01aa35624f1b7f0fc5b444a9b688fb01a' }, h("terminal-orders-list-core", { key: '5488661e4526af1e3db008e56baf5289c46737e6', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
 }, [1, "justifi-terminal-orders-list", {
-        "businessId": [1, "business-id"],
+        "accountId": [1, "account-id"],
         "authToken": [1, "auth-token"],
         "apiOrigin": [1, "api-origin"],
         "columns": [1],

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { l as lodash } from './lodash.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './terminals-list-params-state.js';
-import { ag as terminalsListFilterMenu, ah as terminalIdTerminalsListFilterParam, ai as terminalStatusTerminalsListFilterParam } from './parts.js';
+import { aj as terminalsListFilterMenu, ak as terminalIdTerminalsListFilterParam, al as terminalStatusTerminalsListFilterParam } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './ComponentError.js';
@@ -50,7 +50,7 @@ const TerminalsListFilters = /*@__PURE__*/ proxyCustomElement(class TerminalsLis
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'c0dc68ecfc49cbb1ec3297c1ae9b66e4d21fecc5' }, h("table-filters-menu", { key: '74a2627c14a61251052647bc41b6a9d331f04a20', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '0aa6684df6548ffc721507ba11d8494a7ac56d46', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '6cb0918e840d7651e41b11c262cae4c6932c32ef', class: "p-2" }, h("form-control-text", { key: 'b5b134f5c243596b1232404b8f341bd46f69ae40', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '8d88708e80c08fcfa9fb204afa1b0aade761d440', class: "p-2" }, h("form-control-select", { key: 'cfd6300240fd31d6e826f9f0662cdabf5b950497', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: 'b731afdb3ffb0c9bc35c5e04177b0db9bc5b9a69' }, h("table-filters-menu", { key: '8ee2d6e6f4e12e03a8236b35aae3132f5a72c204', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'a8b6adb28c43a2f528554ee9ae582001bddcaac5', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '08cc61200740cb6fac0b123bd2005942ea9d6c3f', class: "p-2" }, h("form-control-text", { key: 'd0f572c893e3d44256d482e791b93588422bcf86', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'a498de1139b122bad5416267ecc949debc43491d', class: "p-2" }, h("form-control-select", { key: '6235e893b62882e993e798b9a3cc1fafc84f215c', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
 }, [1, "justifi-terminals-list-filters", {
         "terminalId": [1, "terminal-id"],

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

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
-import { J as JustifiAnalytics } from './Analytics.js';
-import { c as checkPkgVersion } from './check-pkg-version.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
 import { T as TerminalService } from './terminal.service.js';
 import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
-import { b as Terminal } from './SubAccount.js';
+import { d as Terminal } from './SubAccount.js';
 import './Document.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
 import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts.js';
@@ -106,7 +105,7 @@ const TerminalsList = /*@__PURE__*/ proxyCustomElement(class TerminalsList exten
         }
     }
     render() {
-        return (h(StyledHost, { key: '8829e2070592554b23ea8593c2528a6582374b1e' }, h("terminals-list-core", { key: '7dfa54f94366214f53fae5240050955a5f5750f4', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '9ad0d637bd745ee2296142c426d539f90cf403a5' }, h("terminals-list-core", { key: '26b420a410976adea74b8545d367b5f9df7178d3', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/justifi-tokenize-payment-method.js

@@ -2,8 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
-import { c as checkPkgVersion } from './check-pkg-version.js';
-import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
 import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
 import './Checkout.js';
 import './Pagination.js';
@@ -45,7 +44,7 @@ const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePay
         this.disableBankAccount = undefined;
         this.hideSubmitButton = undefined;
         this.hideCardBillingForm = undefined;
-        this.iframeOrigin = "https://components.justifi.ai/v2";
+        this.iframeOrigin = "https://components.justifi.ai";
         this.isLoading = false;
     }
     componentWillLoad() {
@@ -84,7 +83,7 @@ const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePay
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: '8377b1e614cb8c1f737ce7f81b35017c7bf4b390' }, h("form", { key: 'a30d047312977dec17fc810dd7039d64a71396d0' }, h("fieldset", { key: 'ffda409f721f09fef1397cef899b49c2f70d51e3' }, h("div", { key: 'cbaa2c97e2be236df2f2e7e3a1df0eca0b20f75a', class: "row gy-3" }, h("div", { key: 'cc9bac328a0feaf2c1754c50e9790eb1dbd04768', class: "col-12" }, h("justifi-payment-method-options", { key: 'bc646adf579be124bc110aa04256bcafe419ca3b', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId, iframeOrigin: this.iframeOrigin })), h("div", { key: 'e65e8a79fd265a053e46e9ee215f84abb57e1212', class: "col-12" }, h(Button, { key: 'f568dc1cb0c6ca2f22897b3ad94f37383ac8ac26', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: 'b4c878459fb1601d429140d80ce02b898d6ca2ed' }, h("form", { key: '11917b591a4116e5711c0afd3e68b6599d064cae' }, h("fieldset", { key: 'b3c4ad0c42a424091a433e9aa8375108831e6c47' }, h("div", { key: 'bee2fa3c6c5de31d25cb102185fc977a5436a53b', class: "row gy-3" }, h("div", { key: 'fb32aa9f47716077a3dad2bfd7bfc950200014ba', class: "col-12" }, h("justifi-payment-method-options", { key: 'dca7ac67609a13e1b14bdc042eb131a07305e0d8', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId, iframeOrigin: this.iframeOrigin })), h("div", { key: '2218cb2eac22fd6187da4d205fc2437a980fa2a5', class: "col-12" }, h(Button, { key: '1299a5a10261b375cfec1b2599cc6de7f606bad9', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
     }
 }, [1, "justifi-tokenize-payment-method", {
         "authToken": [1, "auth-token"],

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "5.3.5";
+const version = "5.4.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

package/dist/module/parts.js

@@ -70,9 +70,6 @@ const badgeDark = `${badge} badge-dark`;
 const dropdownMenu = `dropdown-menu ${text}`;
 // Radio List Item
 const radioListItem = `radio-list-item ${text}`;
-// Bootstrap list-group
-const listGroup = `list-group ${text} ${backgroundColor}`;
-const listGroupItem = `list-group-item ${text} ${backgroundColor}`;
 // Skeleton
 const skeleton = `skeleton`;
 // Image
@@ -107,5 +104,12 @@ const terminalsListFilterMenu = `${filterMenu} terminals-list-filter-menu`;
 const terminalsListFilterParam = `terminals-list-filter-param`;
 const terminalIdTerminalsListFilterParam = `${terminalsListFilterParam} terminal-id-terminals-list-filter-param`;
 const terminalStatusTerminalsListFilterParam = `${terminalsListFilterParam} terminal-status-terminals-list-filter-param`;
+// Terminal Orders List Filters
+const terminalOrdersListFilterMenu = `${filterMenu} terminal-orders-list-filter-menu`;
+const terminalOrdersListFilterParam = `terminal-orders-list-filter-param`;
+const orderStatusTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} order-status-terminal-orders-list-filter-param`;
+const orderTypeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} order-type-terminal-orders-list-filter-param`;
+const createdAfterTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-after-terminal-orders-list-filter-param`;
+const createdBeforeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-before-terminal-orders-list-filter-param`;
 
-export { checkoutsListFilterMenu as $, badgeSecondary as A, badgeSuccess as B, badgeDanger as C, badgeWarning as D, badgeInfo as E, badgeLight as F, badgeDark as G, alertDanger as H, inputCheckboxInvalid as I, inputCheckboxCheckedFocused as J, inputCheckboxFocused as K, inputCheckboxChecked as L, inputCheckbox as M, inputGroup as N, inputRadioInvalid as O, inputRadioCheckedFocused as P, inputRadioChecked as Q, inputRadioFocused as R, inputRadio as S, heading5 as T, heading3 as U, billingForm as V, buttonLoading as W, buttonPrimary as X, buttonSecondary as Y, checkoutSummary as Z, radioListItem as _, heading1 as a, statusCheckoutsListFilterParam as a0, paymentModeCheckoutsListFilterParam as a1, dropdownMenu as a2, heading4 as a3, listGroup as a4, listGroupItem as a5, image as a6, paymentsListFilterMenu as a7, paymentIdPaymentsListFilterParam as a8, terminalIdPaymentsListFilterParam as a9, paymentStatusPaymentsListFilterParam as aa, createdAfterPaymentsListFilterParam as ab, createdBeforePaymentsListFilterParam as ac, payoutsListFilterMenu as ad, createdAfterPayoutsListFilterParam as ae, createdBeforePayoutsListFilterParam as af, terminalsListFilterMenu as ag, terminalIdTerminalsListFilterParam as ah, terminalStatusTerminalsListFilterParam as ai, inputInvalid as b, inputDisabled as c, inputFocused as d, tooltipIcon as e, tooltip as f, tooltipInner as g, heading2 as h, input as i, textDanger as j, inputInvalidAndFocused as k, label as l, card as m, table as n, tableHeadCell as o, tableCell as p, getAlternateTableCellPart as q, tableEmpty as r, skeleton as s, text as t, tableError as u, buttonLink as v, buttonDisabled as w, loadingSpinner as x, badge as y, badgePrimary as z };
+export { checkoutsListFilterMenu as $, badgeSecondary as A, badgeSuccess as B, badgeDanger as C, badgeWarning as D, badgeInfo as E, badgeLight as F, badgeDark as G, alertDanger as H, inputCheckboxInvalid as I, inputCheckboxCheckedFocused as J, inputCheckboxFocused as K, inputCheckboxChecked as L, inputCheckbox as M, inputGroup as N, inputRadioInvalid as O, inputRadioCheckedFocused as P, inputRadioChecked as Q, inputRadioFocused as R, inputRadio as S, heading5 as T, heading3 as U, billingForm as V, buttonLoading as W, buttonPrimary as X, buttonSecondary as Y, checkoutSummary as Z, radioListItem as _, heading1 as a, statusCheckoutsListFilterParam as a0, paymentModeCheckoutsListFilterParam as a1, dropdownMenu as a2, heading4 as a3, image as a4, paymentsListFilterMenu as a5, paymentIdPaymentsListFilterParam as a6, terminalIdPaymentsListFilterParam as a7, paymentStatusPaymentsListFilterParam as a8, createdAfterPaymentsListFilterParam as a9, createdBeforePaymentsListFilterParam as aa, payoutsListFilterMenu as ab, createdAfterPayoutsListFilterParam as ac, createdBeforePayoutsListFilterParam as ad, terminalOrdersListFilterMenu as ae, orderStatusTerminalOrdersListFilterParam as af, orderTypeTerminalOrdersListFilterParam as ag, createdAfterTerminalOrdersListFilterParam as ah, createdBeforeTerminalOrdersListFilterParam as ai, terminalsListFilterMenu as aj, terminalIdTerminalsListFilterParam as ak, terminalStatusTerminalsListFilterParam as al, inputInvalid as b, inputDisabled as c, inputFocused as d, tooltipIcon as e, tooltip as f, tooltipInner as g, heading2 as h, input as i, textDanger as j, inputInvalidAndFocused as k, label as l, card as m, table as n, tableHeadCell as o, tableCell as p, getAlternateTableCellPart as q, tableEmpty as r, skeleton as s, text as t, tableError as u, buttonLink as v, buttonDisabled as w, loadingSpinner as x, badge as y, badgePrimary as z };

package/dist/module/payment-details-core2.js

@@ -58,14 +58,14 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
         });
     }
     render() {
-        return (h(StyledHost, { key: '1978689b8278990966596fa7d5a155208ddbf7e2' }, this.loading && h(PaymentDetailsLoading, { key: 'c9e75ceefc675e7f198d395f53ae90b056526261' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '629457b2841589c47e4d9e0127b530a40f79569e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '8433e393af0bc9c12dd1bfc1c74c7e71d1bd7533', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '899e2e0bfcf92ee28af12a882a0390792865e56d', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '87e38c31d21643bf9e9d532f8351c5e6cdf86ce0', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '71e629744d267e75037e226a46911ad121107855', title: "ID", value: this.payment.id })), h("div", { key: 'b1ad6c37738d078d4d0c50943fa484f73bed19ae', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '4b2407c4e45bb062c9d29da68321d58dd8f5cdb2', sectionTitle: "Details" }), h("div", { key: 'e8b1208771061477f00a2f5d5160464117b21421', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9ac1b4794f5afac73a307dfff7b78f6d9b936b77', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '4d36bfa5117c66288a41803df1373c3f09311c5a', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'edc981480e3bb975170fe8de4ec76c3074c732da', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '290a04ecac3267ee71389668321fcbf9987a4f2c', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: 'f6995f8ba441eb7c5fdbea7ede2e5baccca79489', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '96b1788fda31eb7090c7bf5ae61ad1c4c6517acd', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '2e78ed29b424f8edcb5f62dcca1583aa92696797', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'd1d7025e7557f6566e519933cdbc6d3fb153b08f', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '8e369df9afaf1368cfe67928c9ffd3d761f7e4c5', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '4275caef28d50b41b4f1cf573ef21f5cad3ad137', sectionTitle: "Payment Method" }),
-            h("div", { key: '0e5414c43a1273ae8fdfab4ac2f123a584aa0015', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fe15b439f0eaadcd44d0dd4313fa8a432f13d47a', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'e13a36067875455c89eaf466618507903ae515c3', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '04e73a55bc15db2103c10ccdaa09417a77d5ec4b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'f7213832d1ddbabafe31080d8f4d9ac8b29436a6', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '105b7aa79ff05c0f2837ca0de9a84b05da411c7d', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '00ba42c81617d9593246956e97b6b962817cc167' }, this.loading && h(PaymentDetailsLoading, { key: '1c0fee27dec985cad2cc7d41f61d137246ffcc3e' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'e264b42451a8966a4e6313486bc9d1ccaea0141b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'af96a0f502cce1be451160e8ac2f92074b0ee168', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '94f876bd62dd9ccaa6f63f25326390b03c9938d5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '96c629e2d1a99eca277ec7337cb3e00e88c1b31e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '0d18abfae7e9fd0a692ac54640194033a5c36f41', title: "ID", value: this.payment.id })), h("div", { key: '7f9e14d7e0312ba1136cf5734754bf0af6c19774', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'a11b47796dada4f9678487edf19dcd7928b08e94', sectionTitle: "Details" }), h("div", { key: 'fa8a895e037adbbcf5856aae4f40306b789a90c8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '84a8fa2b0dc39aa331501e00a8eb9bf93e8bb8c2', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '632fa4e703aabc7b606b939e95d1633a43fedfaa', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'bc37a80a15fea95932d04676f2c5a8a57276958b', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '588a76203897cd31b9d0c1c8de1b7b9b0b107421', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: 'c0fea24390417c591327c76568829cbf9f9147a9', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: 'e332a896b55bb58f3fd26ee892556acb08ced52d', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '844fdb40ed55ca0e2f848e7325dcb64f134fa5d6', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'dce95b409eb465e8d6373ad80b7b14a0eecc5aca', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bed2051bd720b1a790ff59b50bee7f01e3fb222a', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '3283ea5236fab75a32fe569ad29d9b70c62b49a0', sectionTitle: "Payment Method" }),
+            h("div", { key: 'b9a0d9cfca791e3afb4a2e1e73b036319191d485', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '15da44c97292af05a14b3f7840b07bdcf34ae953', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'd8a4a431c3e3ab0d14be8992521ee89b5e126a04', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '1a8ed38a316ea943761d2dd7fda58490180ef3bc', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'db695d1b89896a7a73c83fd8a7d5837ad1e69909', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'd94879fb30ac0a05a16ce9ddb199fb5cb003a8c1', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '0e98838bfda48e8680bc4732c28956df01e24e1e', sectionTitle: "Payment Method" }),
-            h("div", { key: '6d18b4960dc81742a7fc7c9d687fb47a2001026c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'af4221654d5f15767a77660d34dd1e110a55f178', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '5ada65c0a6e924f2de218f3e75d8e72e3cebe032', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: 'aab41f9c2221a91ce4acceba59bd8a47ab4866fa', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '7c3cf837177b6fe60a311e0044d17a9b67885ac8', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'f84f8d6078683651793b2021aa992aac96f015a0', sectionTitle: 'Metadata' }), h("div", { key: '06f0a1b0f18cea6f2804043dd432fe42f7352c9a', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '06273e39e83b0bc1fa5316c65f848986b0f4c1a1', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '84dae904db3c22ff5ed03abaeb57d3b0736d1fbb', sectionTitle: "Payment Method" }),
+            h("div", { key: '400801019a53feec0478273866fffa5683b408aa', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ca7bb52e4275659b18daacfa6367de2f32617e70', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '4885d2b5f05b6a713d61074271c7a95b23604dca', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '604ec4efe78a12a1c36d8416c9fdec70351a6dad', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '1ef77a81232e19d1063af9e863f5c9ada183715f', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '1d0a45dd7b7f44b2bad75db9ddb7886b9fc36c9c', sectionTitle: 'Metadata' }), h("div", { key: '364dfb72b9585b672a510b11ecf794c8293ac88d', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1b9254f2f5f81959ea4e190a3a84129d8c54eccd', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/module/payment-provisioning-core.js

@@ -115,7 +115,7 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
     }
     componentWillLoad() {
         this.getBusiness && this.setBusinessProvisioned();
-        this.refs = [this.coreInfoRef, this.legalAddressRef, this.additionalQuestionsRef, this.representativeRef, this.ownersRef, this.bankAccountRef, this.documentUploadRef, this.termsRef];
+        this.refs = [this.coreInfoRef, this.legalAddressRef, this.additionalQuestionsRef, this.representativeRef, this.ownersRef, this.bankAccountRef, this.termsRef];
     }
     get businessEndpoint() {
         return `entities/business/${this.businessId}`;
@@ -133,7 +133,7 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.loading = event.detail;
     }
     render() {
-        return (h(StyledHost, { key: '03dc39eadbac2f9a9a4326bab1355bfc300c392e' }, h("div", { key: '86e6e57fc104c87696c5825119a15c0a642c4bd2', class: 'row gap-3' }, h(Header1, { key: 'd4df3ead1037464624fb8cc465427c6b90bd0e36', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: '7f3d977b8dfbb29c03125c173e9d41558de08322', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '283568d94267850b0eb41fa6a52dbc6b0abf4642', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: '6abf09f174e71767087b57180e976546c057499f', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'b38ed082d216556c6ae93bde3ec1324e69f8fcee', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        return (h(StyledHost, { key: '498b6e0a593808dd761b9cefdb7e94124d445348' }, h("div", { key: 'd746caba6329ac82e75978bd19fbc09c8a43d60f', class: 'row gap-3' }, h(Header1, { key: '439425337ed7767ce4fc8c94e31f6997aa1b62d8', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: 'fd95a40c0a72c94cbb146cbc866d6b057cbfc5c0', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '350fc615685f872cb6ba5537dc2de5d2a205e5cc', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: '3f9a36bc1d58efdfe81b4d7022647b0c1fbc1911', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'e1c061aa840b3b8ac1bad472d763fcd54c902681', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
 }, [0, "justifi-payment-provisioning-core", {
         "businessId": [1, "business-id"],

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

@@ -6,12 +6,11 @@ import './Payment.js';
 import './SubAccount.js';
 import './Document.js';
 import { o as tableHeadCell, q as getAlternateTableCellPart, n as table, p as tableCell } from './parts.js';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types2.js';
 import './details.js';
 import { M as MapPaymentStatusToBadge } from './payments-status.js';
 import { h as convertToLocal } from './utils2.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './payments-list-params-state.js';
-import { T as TableClickActions } from './event-types2.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
@@ -122,7 +121,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '43aa1d53dc7c63eda036624d897d92670ff4dec7' }, h("div", { key: '84ac82efec3738e1a07bcf5fbfdf62426bacaad0', class: "table-wrapper" }, h("table", { key: '65e2ab73a63fa1d89b1b7fb0cd9809d951de657a', class: "table table-hover", part: table }, h("thead", { key: '81ff867eb4b86905049e57c9c9ee331ad9a43f22', class: "table-head sticky-top" }, h("tr", { key: 'edecfccffc49b21f4d9d01396ab4d22dda6f853b', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1df70e89ad33f83dbf18c6c5135bcda2753413a8', class: "table-body" }, h(TableLoadingState, { key: '23cfc404da1ccfada68146b83343e9ee348bac05', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '9929a89448678aa010ecfb43377c38f53b1896d2', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '1734903104bb6c6e9b382661bc353731c5cf92aa', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.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: '08277c1742a8ff36079a2fd4d4c3a31e628617dc', class: "sticky-bottom" }, h("tr", { key: '6012aa5a86f140007504d056f53eba3a21aacc40', class: "table-light align-middle" }, h("td", { key: 'e67d2f48a9d1002086a18ebd4ca00a5b22903c06', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'afcfbab93aa8bb33d6aac50b11c803ebb3284bf1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '91c30f03d9b807ff84224ae25a0bcc84b5c17d20' }, h("div", { key: '447c694f9dcfee6363bafd369f53152ef1797c60', class: "table-wrapper" }, h("table", { key: 'fe3a2911b4d7aa109319d6dabc77eb338b910df9', class: "table table-hover", part: table }, h("thead", { key: 'a3ec810da46e43f786def86991f74e1c0f3c269b', class: "table-head sticky-top" }, h("tr", { key: '94b80f23224624d2f4be81cffa5365d9a725bf33', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'd2c24a19bebcd4872dc36c4f8c6a47678a912d6d', class: "table-body" }, h(TableLoadingState, { key: 'dfcc51f6307996ea5383c4da3ddde61c973d946b', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a81643fd528bff0ad8a57ea17aed718dbfcff6c5', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '3c50d2d7ee8bd5e8c03db7c1d01db8fbb6de4b9b', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.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: '601bb3cd6f8b54fa262d572f715a6208df515f47', class: "sticky-bottom" }, h("tr", { key: '3fbcc03fc841c196cc52b2572387d243d74b2f44', class: "table-light align-middle" }, h("td", { key: 'a1d593b29235432bc668564d784b594dea8ae13c', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '1a427ec2e181baad95ffd14a6c77485f86786f6d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/payout-details-core2.js

@@ -74,7 +74,7 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '7d648508011ea664a85dcd3e83d45835d769f195' }, this.loading && h(PayoutDetailsLoading, { key: 'c5aa47291bd8a66174c0caf11d4043d5c8084183' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'bbb88f0e6895ab4e4a03fbcc2c33dd925ede8731', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'c8cc282e0e53bd605d47e30f38bc924cfb20b19e', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ada8dc55c9ad5324cf406cd8118b5087542d9958', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'f590cc91cd49709c8f47bfb2285d335f55153f44', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '95d767d779203c9d78734d35933f5d1672ae6ec9', title: "ID", value: this.payout.id }), h("div", { key: '83a7e4dd33af9d5a62a1ec7e898d0c56c71e633a', class: "m-4" }, h(Button, { key: '0f622ebc090782a89d506d22b67f43177dbfda79', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '35300a91f58a9ce822323c03cbc139d35312bc3d', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '34db8325ff9e72e166e80e4f1e3cb98b6757f750', sectionTitle: "Details" }), h("div", { key: '7515ec409c0b31c530d072684694e3721ddb1562', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '544be85ea95c951c85ffd539a8ef73fc8a65f747', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'ebc505407ae3e436143d3a10c59541bef5459488', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '3ae0229489cb9f287c3141e090b3cd260f98affd', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'e11e04fc8e57d5036cfdcaf8a928886a6d1ac6bc', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'd98c8c10d875aa9ce4a561f1813188d8ec2fe88d', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '65d1ea7d5ff2e25ac89b2de8a0fdf59850a3d4ed', sectionTitle: "Account" }), h("div", { key: '0d593cec0b5ddc1ed45880410fb91acb4a210e37', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '356dab04877a39166ad2cc68154c03125acb3f49', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '2a4b60d5d695fd102f8ed8bc3ad8d61d47886c89', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '1bd1c40fac3a0e409a7d6082c70f0695f0b850bc', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '9d08a53899f17c7fd7bdcab7a6e11f9b02ff9694', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'e2e8487b4555ae6e9c6ff799150a6bef49eeb82a', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '82408f25fc1700cb7c55afd7b0ef116ad43659c0', sectionTitle: 'Metadata' }), h("div", { key: '16c5967632b3a95bc8cbc787a2e8400319537184', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'e3b2041e7c2e76c8994754be30a885b92673b75d', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '6aab170bbe708372d913c14bcb58b3b0d60dafd8' }, this.loading && h(PayoutDetailsLoading, { key: '0aee9ad36b3c4e74b1cb3f8251d0488cede1355c' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c9ad74b0385260d4b1f2d2f7b3e66563b2d706a4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '6b67e623a6cb67207007ba4319aa437996118dd9', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ff1c335e90ad0403a607491e4ff0b0adac52f255', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '0c2e9555136ce806bc744dd2a83c7a1e10fa7ea7', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '0c813d23ddbe26f29f1ad03dc43b9c5fbf2d6ab6', title: "ID", value: this.payout.id }), h("div", { key: '762b4fc60643def05b7f8e84ce170d6295654631', class: "m-4" }, h(Button, { key: 'c5f304fb7f54838da6785a0bf19c423a98bdbf34', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'b307f177086cd6b1eeb0f384cce772cd04ff33ad', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'bad67a9d2cde5bff23b5c959f9b7564fdc996300', sectionTitle: "Details" }), h("div", { key: '6986bef4813aadb505acaf5cdd07b853c271e442', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dad10fde82b1009a9821f1e1cc2c2e65baa5f6b7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bf21ac446b54bdfcec020d6086546a0b20f42d01', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '30f7609216b42f3918929a6a02b30a6a23689921', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'e7d93fa8d865162098e105d4041c12af757db68b', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '99b76f8abc8f0077df988cf38cfb74e77a7e881f', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'cfef47442eeb83514ca10fab25d12f1439414fc0', sectionTitle: "Account" }), h("div", { key: '901423f1ca47bf79ab6daa63368fea0032e46d58', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f3e215b7aad43a3a3914b885189700e87758cca6', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '795054cd2f8bda2a735e9ac64652da92dac34f61', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '9c190036635aed95d74bce36ec257ada41b57cba', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'c1002cff85b80024804a858ef519feb4a86d46ff', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '0183bef106233f302cd8762c7483482bea849ac2', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'e87d57050d5dee72a8dccfe2ca2deee385e6dc61', sectionTitle: 'Metadata' }), h("div", { key: '9aefd212e7aa680b34f5af6a373a47997238496e', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a9c9337a788cb2611787278768968e638a8c000d', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]

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

@@ -6,12 +6,11 @@ import './Payment.js';
 import './SubAccount.js';
 import './Document.js';
 import { q as getAlternateTableCellPart, o as tableHeadCell, n as table, p as tableCell } from './parts.js';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types2.js';
 import './details.js';
 import { h as convertToLocal } from './utils2.js';
 import { M as MapPayoutStatusToBadge } from './payouts-status.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './payouts-list-params-state.js';
-import { T as TableClickActions } from './event-types2.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
@@ -179,7 +178,7 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'b7befcaf0a42986dc821d97e371fb93920b16358' }, h("div", { key: 'c405055d05c2f1b5e622ab28fc9744962f1907a1', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'db36400212d74c17e0aad133717475ce3b142308', class: "table table-hover", part: table }, h("thead", { key: 'a3e208126c4d2c0ab2b6d9ef27f8c1410e029907', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '37f25650e0c03cf8985ec68211eefc0980dd5a92', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '7879e0b39a52ef735ff71960498e1405ff8f98b0', class: "table-body" }, h(TableLoadingState, { key: '91fdd3ed14d5c63ac8c536a5d8da05bb491d49a1', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '577748b2fa32b265a6a1afbad3460c4628d21ba6', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '351848f6ee13c7be8735757ce3dcbcce18bb4fff', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.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: '889ef01055c10f969d4d51f6d114bd3654a06ce3', class: "sticky-bottom" }, h("tr", { key: '6c49a3b386a64023d0701445e7589cced7f4f4df', class: "table-light align-middle" }, h("td", { key: '7782a9152e0d8037afb6528897a9358da204bfb7', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'eac386f11674a29452831bdbe183bfefe4347389', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'ed85d9ce4cc88007b8c623ba57cb8dfbd4de7874' }, h("div", { key: '5760742d19653abb6ce3e45f4f773cd1bd5e612f', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'f09a0ea7fff83b23e8e82fda18c73b25e0a46b07', class: "table table-hover", part: table }, h("thead", { key: 'b056f2ef2b6a229cd436ed0e4789f9d19849e956', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '16e6651c934d1d4120ceaeb4732e807666f0404d', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '4b552d171131958f696077a66c4256e45ccaf7b2', class: "table-body" }, h(TableLoadingState, { key: 'aded291b5961c14d828ecff475120e48d3913293', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a3044be9a44798a4f8800978fd0734de31de6809', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '98c909ea58a0dd7f0cbbd8ac9842380b91b92386', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.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: '0c58d215c797798f87affb37d1f7622de3ca7407', class: "sticky-bottom" }, h("tr", { key: '9a3b39c8836bb817428bd307110fee62db8d7589', class: "table-light align-middle" }, h("td", { key: 'a3eef122632c9459d5fa31d4542b6b085645b738', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '8d77a7e40f9e7c6770812ba8b45a6e0f5f57193e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/terminal-orders-list-core2.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types2.js';
 import { o as tableHeadCell, q as getAlternateTableCellPart, n as table, p as tableCell } from './parts.js';
 import './details.js';
 import './ComponentError.js';
@@ -10,6 +10,7 @@ import './SubAccount.js';
 import './Document.js';
 import { h as convertToLocal } from './utils2.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
+import { o as onQueryParamsChange, g as getRequestParams } from './terminal-orders-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const MapTerminalOrderStatusToBadge = (status) => {
@@ -23,7 +24,12 @@ const MapTerminalOrderStatusToBadge = (status) => {
             variant: BadgeVariant.SUCCESS,
             title: 'This order has been completed',
             text: 'Completed',
-        }
+        },
+        created: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'This order is created',
+            text: 'Created',
+        },
     };
     const badgeProps = statusToBadgeProps[status];
     return h(Badge, Object.assign({}, badgeProps));
@@ -53,78 +59,30 @@ const terminalOrdersTableCells = {
     quantity: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.terminals.length)),
 };
 
-const id = null;
-const type = "array";
-const page_info = {
-	has_previous: false,
-	has_next: false,
-	start_cursor: "mockCursorPage1",
-	end_cursor: "mockCursorPage2",
-	amount: 2
-};
-const data = [
-	{
-		id: "tord_ABCD1234",
-		business_id: "biz_0987",
-		account_id: "acc_5678",
-		provider: "verifone",
-		order_type: "boarding_only",
-		order_status: "submitted",
-		terminals: [
-			{
-				terminal_id: "tmn_QWER",
-				terminal_did: "11112222",
-				model_name: "v400"
-			}
-		],
-		created_at: "2025-01-02T10:30:00Z",
-		updated_at: "2025-01-02T10:45:00Z"
-	},
-	{
-		id: "tord_WXYZ5678",
-		business_id: "biz_1234",
-		account_id: "acc_4321",
-		provider: "verifone",
-		order_type: "boarding_shipping",
-		order_status: "completed",
-		terminals: [
-			{
-				terminal_id: "tmn_ASDF",
-				terminal_did: "33334444",
-				model_name: "e355"
-			}
-		],
-		created_at: "2025-02-10T09:20:00Z",
-		updated_at: "2025-02-10T09:25:00Z"
-	}
-];
-const mockTerminalOrders = {
-	id: id,
-	type: type,
-	page_info: page_info,
-	data: data
-};
-
 const TerminalOrdersListCore = /*@__PURE__*/ proxyCustomElement(class TerminalOrdersListCore extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.handleClickPrevious = (beforeCursor) => {
             this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
             this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedOrderId = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedOrderId)
                 return;
-            console.log('clickedOrderId', clickedOrderId);
+            const orderData = this.terminalOrders.find((order) => order.id === clickedOrderId);
+            this.clickEvent.emit({ name: TableClickActions.row, data: orderData });
         };
         this.getTerminalOrders = undefined;
         this.columns = undefined;
-        this.terminalOrders = mockTerminalOrders.data;
+        this.terminalOrders = [];
         this.terminalOrdersTable = undefined;
         this.loading = true;
         this.errorMessage = undefined;
@@ -139,11 +97,38 @@ const TerminalOrdersListCore = /*@__PURE__*/ proxyCustomElement(class TerminalOr
         if (this.getTerminalOrders) {
             this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     fetchData() {
         this.loading = true;
-        console.log('fetching terminal orders');
-        this.loading = false;
+        this.getTerminalOrders({
+            params: this.terminalOrderParams,
+            onSuccess: async ({ terminalOrders, pagingInfo }) => {
+                this.terminalOrders = terminalOrders;
+                this.paging = pagingInfo;
+                this.terminalOrdersTable.collectionData = this.terminalOrders;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            },
+            final: () => { this.loading = false; },
+        });
+    }
+    get terminalOrderParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
     }
     get entityId() {
         return this.terminalOrders.map((terminalOrder) => terminalOrder.id);
@@ -158,7 +143,7 @@ const TerminalOrdersListCore = /*@__PURE__*/ proxyCustomElement(class TerminalOr
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'e07bb592d2d419079a00fe017789c98dc5814202' }, h("div", { key: '1090df8ad75e0fdcd07a625c608c2fc0d38391d9', class: "table-wrapper" }, h("table", { key: '31637db0926f2cd88d1333d5f512842406b1e0ef', class: "table table-hover", part: table }, h("thead", { key: '2af2d35a486433b2cb2bab0b7d61d4be9e8d70ab', class: "table-head sticky-top" }, h("tr", { key: 'a42e578f3369b6466a331abeb34d63d9c09c0122', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: '16c4a9e940268fe2da49a9b14680d34a0f160ccc', class: "table-body" }, h(TableLoadingState, { key: 'a1ce6dcc9799bdd215b5d686d05e3014e594d975', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '135df5499de4e17855643d8ce4ebeb7f71aa5e85', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '00d2f0bc0bceb46178970c1eb0a0eb87c6fa6054', 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: '49ce37b7ea5e979c8d754d48b9c803a163623387', class: "sticky-bottom" }, h("tr", { key: 'b73f32023e01d82c3eb91120c7eae907a9367517', class: "table-light align-middle" }, h("td", { key: 'cae073d169507d459d60f150fecbaad287996c74', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '9a9fa1cd2c520ee09814adf6d060d048bd77dcc1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '07a7b40585feb4644ddcf1a8c202460c79c8b045' }, h("div", { key: 'e03fc01808d22ce86bfdfaa2086f8492f45ee64e', class: "table-wrapper" }, h("table", { key: '0c54da0a4526466e487ad5093cb6c426c4cfb81a', class: "table table-hover", part: table }, h("thead", { key: 'b4495bd1eb73750104667cb7b74061dca4bb6257', class: "table-head sticky-top" }, h("tr", { key: '8df705836f557da6c08b33094eecb0505f8d3ec8', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: '47b008d75931b177e1acd3bc073f6015dfb17498', class: "table-body" }, h(TableLoadingState, { key: '7f2e4e329ec342db4aac981e514e28245cdbc992', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'f4a17608ce889a890f5dd1bf689e6ae24ad28ca9', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'e57677d193f4eff27793d684607572631dc97d8a', 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: '7c427d0b2db99df57ebd097ef8671566f6239d50', class: "sticky-bottom" }, h("tr", { key: 'b5d8bf7d6d43119f8f31a2ea0e0966e8f0888889', class: "table-light align-middle" }, h("td", { key: 'f36bd4d815ca6be5c69a264c90b0ce6696bc6664', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '25f4964ec46220bbceac9f763e668f77bac79299', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/terminal-orders-list-params-state.js

@@ -0,0 +1,16 @@
+import { c as createStore } from './index2.js';
+
+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 = () => {
+    filterParamsStore.reset();
+};
+
+export { clearParams as c, filterParams as f, getRequestParams as g, onQueryParamsChange as o, propsParams as p };

package/dist/module/terminal-quantity-selector2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { t as text, a6 as image, v as buttonLink } from './parts.js';
+import { t as text, a4 as image, v as buttonLink } from './parts.js';
 import { d as defineCustomElement$2 } from './custom-popper2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
@@ -28,7 +28,7 @@ const TerminalQuantitySelector = /*@__PURE__*/ proxyCustomElement(class Terminal
         this.selectedQuantity = 0;
     }
     render() {
-        return (h("div", { key: 'a357a6bd3454287325a10d381d4587c39552e2a6', class: "rounded shadow-sm", part: text }, h("div", { key: '9e34e99cf6f5cefd4ef28c0fb98ad163d331c5d8', class: "d-flex gap-3" }, h("div", { key: '2dad93d7ad2cdecfd0848862bfc6a30bf0900ae6', class: "d-flex align-items-center" }, h("img", { key: '91929adc5f870eb024226a90d699ae68705f80ec', src: this.imageUrl, alt: this.modelName, height: 125, width: 125, part: image })), h("div", { key: '2fdd8c22699c09830f20f39a86a1e306702dc435', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'f25c1fbe3b6bc4cb2f262e7acce3232e3a726d7d', class: "row" }, h("div", { key: 'b18358391814b283ee5f9f4984301a3c44340986', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '2c2dc0b58140144b63be06ad273b9567ca107d9a', helpText: this.description })), h("div", { key: '7b20f58d55f9413d04185df7ecc04ebe37a3854e', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '27d472613a8146985bfb2f7f9149ac97d71039a5', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '45136a5b9dcb7aeeb58407f51fbb76c0f924ff93', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'e07c48829ebe9106d4a26e9a17728ecef01574b6', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '5bbf669ab479523290b2d8a9f5b6ec2000ff0f96', class: "rounded shadow-sm card p-2", part: text }, h("div", { key: '47ead96654c97aeae6b24058a4f7759918d3d0ad', class: "d-flex gap-3" }, h("div", { key: '3763eda68e7849c87f0e67b905e09267c10481c8', class: "d-flex align-items-center" }, h("img", { key: 'ef0a61d5c1d27c600fd93813b594ec2ec2fadec3', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '5a632f69e2045fbfcd35932af3c5fd027dcca66f', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'be00d142f07945a15e882d2da4c505ffbf67fe88', class: "row" }, h("div", { key: '1c434628ae872d22efa7d2adb611b04868c85eb1', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '21f571a1b0e5ba7d528727f6476e134b9657e124', helpText: this.description })), h("div", { key: 'f4077bfa6beb4f0070bdbf4bd28021f88bcaf5b1', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '7dc6853fb7641b99a9a9ee82dcb3db8fce1d6c01', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'faab14e72773f12f69ea69e855bafb27ef3328b8', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '390e6b4b049fa64e2b7354a3676621844291feb0', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
 }, [0, "terminal-quantity-selector", {
         "modelName": [1, "model-name"],

package/dist/module/terminal.service.js

@@ -23,6 +23,12 @@ class TerminalService {
         const endpoint = 'terminals/order_models';
         return api.get(endpoint, null, null, headers);
     }
+    async orderTerminals(authToken, terminalOrder, apiOrigin = "") {
+        const headers = { 'sub-account': terminalOrder.sub_account_id };
+        const api = Api({ authToken, apiOrigin });
+        const endpoint = 'terminals/orders';
+        return api.post(endpoint, terminalOrder, null, null, headers);
+    }
 }
 
 export { TerminalService as T };