@justifi/webcomponents 5.0.0-rc-2 → 5.1.0

package/dist/cjs/{payments-table-cf5d1c33.js → payments-table-16f3f95e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-5b9a3b5f.js');
-const paymentsStatus = require('./payments-status-68ac449d.js');
-const utils = require('./utils-a21b7453.js');
-const parts = require('./parts-811ddb9c.js');
+const paymentsStatus = require('./payments-status-411c325c.js');
+const utils = require('./utils-5fb95d31.js');
+const parts = require('./parts-addf2176.js');
 
 const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
 const paymentTableColumns = {
@@ -16,15 +16,15 @@ const paymentTableColumns = {
     last_four_digits: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
 };
 const paymentTableCells = {
-    created_at: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) },
-        index.h("div", { class: "fw-bold" }, utils.convertToLocal(value, { showDisplayDate: true })),
-        index.h("div", { class: "fw-bold" }, utils.convertToLocal(value, { showTime: true })))),
-    amount: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, utils.formatCurrency(value, true, true))),
-    status: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1), innerHTML: paymentsStatus.MapPaymentStatusToBadge(value) })),
-    payment_type: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, value)),
-    description: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, value)),
-    payers_name: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, value)),
-    last_four_digits: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, value))
+    created_at: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) },
+        index.h("div", { class: "fw-bold" }, utils.convertToLocal(payment.created_at, { showDisplayDate: true })),
+        index.h("div", { class: "fw-bold" }, utils.convertToLocal(payment.created_at, { showTime: true })))),
+    amount: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.formattedPaymentAmount(payment.amount))),
+    status: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, paymentsStatus.MapPaymentStatusToBadge(payment.status))),
+    payment_type: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.payment_type)),
+    description: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.description)),
+    payers_name: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.payers_name)),
+    last_four_digits: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.last_four_digits)),
 };
 
 exports.defaultColumnsKeys = defaultColumnsKeys;

package/dist/cjs/payout-details-core.cjs.entry.js

@@ -3,13 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
-const utils$1 = require('./utils-a21b7453.js');
-const utils = require('./utils-fc17191b.js');
-const button = require('./button-94bdc1f0.js');
+const utils$1 = require('./utils-5fb95d31.js');
+const utils = require('./utils-a05a8bf6.js');
+const button = require('./button-e7796b07.js');
 const styledHost = require('./styled-host-94309bab.js');
-const parts = require('./parts-811ddb9c.js');
-const spinner = require('./spinner-c11fcb44.js');
-const payoutsStatus = require('./payouts-status-2f7be07d.js');
+const payoutsStatus = require('./payouts-status-0951e39d.js');
+const skeleton = require('./skeleton-c4903a53.js');
+require('./parts-addf2176.js');
+require('./badge-fbf58cb9.js');
+
+const PayoutDetailsLoading = () => (index.h("div", { class: "row gap-3" },
+    index.h("div", { class: "col-12" },
+        index.h(skeleton.Skeleton, { width: "35%", height: "30px" })),
+    index.h("div", { class: "col-12" },
+        index.h(skeleton.Skeleton, { width: "70%" })),
+    index.h("div", { class: "col-12" },
+        index.h(skeleton.Skeleton, { width: "40%" })),
+    index.h("div", { class: "col-12" },
+        index.h(skeleton.Skeleton, { width: "40%" })),
+    index.h("div", { class: "col-12" },
+        index.h(skeleton.Skeleton, { width: "100%" })),
+    index.h("div", { class: "col-12" },
+        index.h(skeleton.Skeleton, { width: "80%" }))));
 
 const PayoutDetailsCore = class {
     constructor(hostRef) {
@@ -63,7 +78,7 @@ const PayoutDetailsCore = class {
     }
     render() {
         var _a;
-        return (index.h(styledHost.StyledHost, { key: '00dce2f3bddb29647880b82a2055580346b7ff38' }, this.loading && index.h(spinner.Spinner, { key: 'de524e2f77fb4dd20f4fcb7dff41f256f3ee74b5' }), !this.loading && this.errorMessage && utils.ErrorState(this.errorMessage), !this.loading && this.payout && (index.h("justifi-details", { key: 'c0b7449ff0e5773be97fb27485638acdce79b50a', "error-message": this.errorMessage }, index.h(utils.EntityHeadInfo, { key: '1aa8719fb989c9993ac30803440d16ce3590038e', slot: "head-info", badge: index.h("span", { slot: 'badge', part: parts.badge, innerHTML: payoutsStatus.MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${utils$1.formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, index.h(utils.EntityHeadInfoItem, { key: '30c9240747e66e38056cd870e5703b4d027b3ea2', classes: "border-1 border-end", title: "Updated At", value: `${utils$1.formatDate(this.payout.updated_at)} ${utils$1.formatTime(this.payout.updated_at)}` }), index.h(utils.EntityHeadInfoItem, { key: '2d93c5594c1451a3d566afe0431da34994ccc94a', classes: "border-1 border-end", title: "Created At", value: `${utils$1.formatDate(this.payout.created_at)} ${utils$1.formatTime(this.payout.created_at)}` }), index.h(utils.EntityHeadInfoItem, { key: 'd9116166e2c7f95e8a7e110146f492bf0329e01e', title: "ID", value: this.payout.id }), index.h("div", { key: '9b3c12058b396637632c3d46a24ed426a1bd518c', class: "m-4" }, index.h(button.Button, { key: 'eaf5339cb60b3ae759b0ca94ffb07f20f044feec', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), index.h("div", { key: '61372b0167f0a07231fd1cf69d61f156e42c3a0a', slot: 'detail-sections' }, index.h(utils.DetailSectionTitle, { key: '6113095a35b746b7b03e15af9e195fe7247148c0', sectionTitle: "Details" }), index.h("div", { key: 'dcdc2cf2c73516e603492aae6f81a12a2dd10d1f', class: "d-table gap-2 w-100" }, index.h(utils.DetailItem, { key: '797cf1e1b4a0521ff01a8c985c260b998ad3d3e9', title: "Date paid", value: utils$1.formatDate(this.payout.deposits_at) }), index.h(utils.DetailItem, { key: 'bd3162d95fa4a98e2db4e42a9de39c91ca209b45', title: "Statement Description", value: this.payout.description }), index.h(utils.DetailItem, { key: 'adef2b9dcbad873f570530761cf887c9a4efa052', title: "Payout Method", value: this.payout.delivery_method }), index.h(utils.DetailItem, { key: '8c6ca766f17f9dd140fa0778fecd648a72244b92', title: "Amount", value: utils$1.formatCurrency(this.payout.amount) }), index.h(utils.DetailItem, { key: '4c4448677902c19011cf36b0d71d85eb54083bbf', title: "Fee", value: utils$1.formatCurrency(this.payout.fees_total) })), index.h(utils.DetailSectionTitle, { key: '7f4a0ed8518b957cbfcfb15e5ea62963e5ba5013', sectionTitle: "Account" }), index.h("div", { key: '3d878a54ddffb40e55610224fc97f182f4255e51', class: "d-table gap-2 w-100" }, index.h(utils.DetailItem, { key: 'd9eb8870ca1b4bf0c04bcb2f3b4362ebf9712a88', title: "ID", value: this.payout.account_id }), index.h(utils.DetailItem, { key: 'f320a0fb646a5352173341083f384bd6d7a30a61', title: "Account Type", value: this.payout.bank_account.account_type }), index.h(utils.DetailItem, { key: '35cc07ec9ee8e3155606851eeb9864d9f6df6e05', title: "Institution", value: this.payout.bank_account.account_type }), index.h(utils.DetailItem, { key: 'ac0962b80347b619e4cc534781df397d9bc510e2', title: "Routing Number", value: this.payout.bank_account.routing_number }), index.h(utils.DetailItem, { key: '65db983d9504b912f12cefc7eea7a5bc8e9f3d73', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), index.h(utils.DetailSectionTitle, { key: 'bc94a109cf5e2c4dcd32972387a4b167b85d8ccc', sectionTitle: 'Metadata' }), index.h("div", { key: '1918677f3559ff779b3f1613ee9b2367110f4648', class: "d-table gap-2 w-100" }, index.h(utils.CodeBlock, { key: '2b5dd103cebe0960bdcc6a68f7389780e9d1029b', metadata: this.payout.metadata })))))));
+        return (index.h(styledHost.StyledHost, { key: 'ace7565dae883381e2668214e01cc949470f4a6a' }, this.loading && index.h(PayoutDetailsLoading, { key: '9412e6135da55bddc2964b87065f212bdb1399eb' }), !this.loading && this.errorMessage && utils.ErrorState(this.errorMessage), !this.loading && this.payout && (index.h("justifi-details", { key: 'df9b5bf40cc35a5366e9b1ed296b0e289a9f182c', "error-message": this.errorMessage }, index.h(utils.EntityHeadInfo, { key: '64575c2f0be0beaf72094c0dfe9a343fdcd25c88', slot: "head-info", badge: payoutsStatus.MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, index.h(utils.EntityHeadInfoItem, { key: 'c95da0d064416dd0fbdff948c92dcd2b116e1da5', classes: "border-1 border-end", title: "Updated At", value: `${utils$1.formatDate(this.payout.updated_at)} ${utils$1.formatTime(this.payout.updated_at)}` }), index.h(utils.EntityHeadInfoItem, { key: '765da16cba8659fecc6a4c11b2856f8b1edc3a32', classes: "border-1 border-end", title: "Created At", value: `${utils$1.formatDate(this.payout.created_at)} ${utils$1.formatTime(this.payout.created_at)}` }), index.h(utils.EntityHeadInfoItem, { key: 'ff60105de95f6ef897618a5e7cef2fb39257b9c5', title: "ID", value: this.payout.id }), index.h("div", { key: '8444116278f29220fe7260d6849ed7db2296d4b4', class: "m-4" }, index.h(button.Button, { key: '686e61a3ea27b62024e3544c32542e9ca710c96f', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), index.h("div", { key: '5d70b7fcd4ac63002659ffc08c3c18e4b18e3f46', slot: 'detail-sections' }, index.h(utils.DetailSectionTitle, { key: '8d17ae90696880259707d0500873127c7f134339', sectionTitle: "Details" }), index.h("div", { key: '80111eb713f6b643a415aaf66accfdb9e279fe03', class: "d-table gap-2 w-100" }, index.h(utils.DetailItem, { key: 'a7c7809a862b315960fd3f7aa5c73c45efb55512', title: "Date paid", value: utils$1.formatDate(this.payout.deposits_at) }), index.h(utils.DetailItem, { key: 'b9b03681675854eb3f0d1445f45b1e20a648ded4', title: "Statement Description", value: this.payout.description }), index.h(utils.DetailItem, { key: 'fa34b24385e0638d7ccd8ceb7382a1f113f0c966', title: "Payout Method", value: this.payout.delivery_method }), index.h(utils.DetailItem, { key: '6acc6435f7f8b277abd35a8ac90e01556aaab18e', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), index.h(utils.DetailItem, { key: '560cedeb5230503e74e90bb3e531aed21d317f6c', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), index.h(utils.DetailSectionTitle, { key: '42e2d36cb570acad67366e65316a22dac8f4d4fc', sectionTitle: "Account" }), index.h("div", { key: 'f2eebf080a48ba0d818363c09269689e201ed5fc', class: "d-table gap-2 w-100" }, index.h(utils.DetailItem, { key: '6064911935f9e3ef75db3ec7707dd3a182c98c5c', title: "ID", value: this.payout.account_id }), index.h(utils.DetailItem, { key: 'eb44916f2659dfc6d81f4e995b3f34527d15e6c2', title: "Account Type", value: this.payout.bank_account.account_type }), index.h(utils.DetailItem, { key: '0dbf8e17dfbc1ff1cd70be1d67a6907b91478a98', title: "Institution", value: this.payout.bank_account.account_type }), index.h(utils.DetailItem, { key: '2b377f8749d66f6fd58f5a8437c1e21fbb774706', title: "Routing Number", value: this.payout.bank_account.routing_number }), index.h(utils.DetailItem, { key: '886cc82be28c9cd86200adf78a61846fece1cf40', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), index.h(utils.DetailSectionTitle, { key: 'ec5c8ab11778eff8b89be26f85c7172d38b5d4b3', sectionTitle: 'Metadata' }), index.h("div", { key: '9c72eeee6fb33e536c8425ba1dd6d4a0c8b066ce', class: "d-table gap-2 w-100" }, index.h(utils.CodeBlock, { key: '85ea6096635c9bb6c8fc0b5298dd4cbb6411392c', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]

package/dist/cjs/payouts-list-core.cjs.entry.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
-require('./Checkout-a528241d.js');
+require('./Checkout-2ff4f9c8.js');
 const Pagination = require('./Pagination-0da8f095.js');
-require('./Payment-d074b246.js');
-require('./SubAccount-fda5ec5b.js');
+require('./Payment-84817e2d.js');
+require('./SubAccount-f236913b.js');
 const ComponentError = require('./ComponentError-233ac749.js');
-const parts = require('./parts-811ddb9c.js');
-const eventTypes = require('./event-types-4df47396.js');
-const payoutsTable = require('./payouts-table-58881d95.js');
+const parts = require('./parts-addf2176.js');
+const eventTypes = require('./event-types-aa1a9be1.js');
+const payoutsTable = require('./payouts-table-bc15179c.js');
 const payoutsListParamsState = require('./payouts-list-params-state-16348184.js');
+require('./utils-5fb95d31.js');
 require('./Dispute-eb6bad54.js');
-require('./spinner-c11fcb44.js');
-require('./utils-a21b7453.js');
-require('./payouts-status-2f7be07d.js');
+require('./spinner-aac395e3.js');
+require('./payouts-status-0951e39d.js');
+require('./badge-fbf58cb9.js');
 require('./index-d2d0b181.js');
 
 const PayoutsListCore = class {
@@ -151,7 +152,7 @@ const PayoutsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (index.h("div", { key: 'b32c27e9cd63eebde1bbce6634eeb8be1c804db8' }, index.h("div", { key: '842d7df46f21510c872e34234d70a3adef80ebd9', class: "table-wrapper", part: "table-wrapper" }, index.h("table", { key: '3fb2afe1a78cbb39f896d1833a06c4c976e53292', class: "table table-hover", part: parts.table }, index.h("thead", { key: '65e335052e013f6bd2ddd154b0772d813b03e02f', class: "table-head sticky-top", part: "table-head" }, index.h("tr", { key: '0d113369ff9e4a1933b8c0f699e03ab3812d30d4', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), index.h("tbody", { key: '64eea2dda7fe52844a39fe4a78840444959c9bf8', class: "table-body" }, index.h(eventTypes.TableLoadingState, { key: '3f3fb69c8105de8374e57e7279ad0d3e4e88f777', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), index.h(eventTypes.TableEmptyState, { key: 'df74f8ea143edbfb57efee6952c7ddffc690db8e', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), index.h(eventTypes.TableErrorState, { key: 'd12c61e243397de8024c8fe13e518ae3328b5d95', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h("tfoot", { key: '23f8f411959eb2464a4f0d75830adedf5cc9d15b', class: "sticky-bottom" }, index.h("tr", { key: '63a62a4743ef38050ef9d6f2870fc74b5a011568', class: "table-light align-middle" }, index.h("td", { key: '23a7b62618db1dd52da8c43627f7d512c2f18bc1', part: parts.tableCell, colSpan: this.payoutsTable.columnData.length }, index.h("pagination-menu", { key: '3c401e3d08d930cc19c5a09e1b34c740f2dd833b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (index.h("div", { key: 'c546790efb9cc49a78063b3761a9c92038acedd5' }, index.h("div", { key: '60cc337e0c1c4eb7eb59599cdd0520e4031d1ce9', class: "table-wrapper", part: "table-wrapper" }, index.h("table", { key: 'e7188291031c23dd5bb7f843b4adebb2c5f2675e', class: "table table-hover", part: parts.table }, index.h("thead", { key: 'eb3a3b5af4016ae73da8af381e778fe433e683c6', class: "table-head sticky-top", part: "table-head" }, index.h("tr", { key: '9352fcc352a8ea33aa1d49844e092f89a9863ce9', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), index.h("tbody", { key: 'c924a2a65215845c119f3339b7905a6d7c3cc1fa', class: "table-body" }, index.h(eventTypes.TableLoadingState, { key: '1d811e44a1319a102a0c56a62c56dda13eb6463e', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), index.h(eventTypes.TableEmptyState, { key: '4dacb3d2cf264c1c367a465cb04221be6b2f1e21', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), index.h(eventTypes.TableErrorState, { key: 'b294b854e12adcf39c32aaaa34b260775c5195b3', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h("tfoot", { key: '668400d517551fa89af74f655befc11a091a0de0', class: "sticky-bottom" }, index.h("tr", { key: 'b59f6342dccf4c34cbdbddcce7cb4e1c12116fe1', class: "table-light align-middle" }, index.h("td", { key: '022afdd48ae81ec33f85c90e045d197f0e2f90ec', part: parts.tableCell, colSpan: this.payoutsTable.columnData.length }, index.h("pagination-menu", { key: 'a7e7a1ccdc238af532608626b25123fcd93a6206', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "queryParams": ["updateOnPropChange"],

package/dist/cjs/payouts-status-0951e39d.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const badge = require('./badge-fbf58cb9.js');
+
+const MapPayoutStatusToBadge = (status) => {
+    const statusToBadgeProps = {
+        canceled: {
+            variant: badge.BadgeVariant.DANGER,
+            title: 'Transfer to your bank account failed',
+            text: 'Canceled',
+        },
+        failed: {
+            variant: badge.BadgeVariant.DANGER,
+            title: 'Transfer to your bank account failed',
+            text: 'Failed',
+        },
+        forwarded: {
+            variant: badge.BadgeVariant.SECONDARY,
+            title: 'This payout initially failed; the funds have been forwarded to your next successful payout',
+            text: 'Forwarded',
+        },
+        in_transit: {
+            variant: badge.BadgeVariant.PRIMARY,
+            title: 'Transfer to your bank account has been initiated',
+            text: 'In Transit',
+        },
+        paid: {
+            variant: badge.BadgeVariant.SUCCESS,
+            title: 'Successfully deposited into your bank account',
+            text: 'Paid',
+        },
+        pending: {
+            variant: badge.BadgeVariant.PRIMARY,
+            title: 'Batched and scheduled to be transferred',
+            text: 'Pending',
+        },
+        scheduled: {
+            variant: badge.BadgeVariant.PRIMARY,
+            title: 'Batched and scheduled to be transferred',
+            text: 'Scheduled',
+        },
+        withdrawn: {
+            variant: badge.BadgeVariant.SUCCESS,
+            title: 'Negative payout balance successfully withdrawn from your bank account',
+            text: 'Withdrawn',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return index.h(badge.Badge, Object.assign({}, badgeProps));
+};
+
+exports.MapPayoutStatusToBadge = MapPayoutStatusToBadge;

package/dist/cjs/{payouts-table-58881d95.js → payouts-table-bc15179c.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-5b9a3b5f.js');
-const utils = require('./utils-a21b7453.js');
-const payoutsStatus = require('./payouts-status-2f7be07d.js');
-const parts = require('./parts-811ddb9c.js');
+const utils = require('./utils-5fb95d31.js');
+const payoutsStatus = require('./payouts-status-0951e39d.js');
+const parts = require('./parts-addf2176.js');
 
 const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
 const payoutTableColumns = {
@@ -18,19 +18,17 @@ const payoutTableColumns = {
     csv: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "Export CSV" })),
 };
 const payoutTableCells = (downloadCSV) => ({
-    created_at: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) },
-        index.h("div", { class: "fw-bold" },
-            utils.convertToLocal(value, { showDisplayDate: true }),
-            " "))),
-    sub_account_name: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, value)),
-    payments_total: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, utils.formatCurrency(value))),
-    refunds_total: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, utils.formatCurrency(value))),
-    fees_total: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, utils.formatCurrency(value))),
-    other_total: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, utils.formatCurrency(value))),
-    amount: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, utils.formatCurrency(value))),
-    status: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1), innerHTML: payoutsStatus.MapPayoutStatusToBadge(value) })),
-    csv: (value, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) },
-        index.h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(value); } }, "CSV"))),
+    created_at: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) },
+        index.h("div", { class: "fw-bold" }, utils.convertToLocal(payout.created_at, { showDisplayDate: true })))),
+    sub_account_name: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payout.sub_account_name)),
+    payments_total: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payout.formattedPaymentAmount(payout.payments_total))),
+    refunds_total: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payout.formattedPaymentAmount(payout.refunds_total))),
+    fees_total: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payout.formattedPaymentAmount(payout.fees_total))),
+    other_total: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payout.formattedPaymentAmount(payout.other_total))),
+    amount: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payout.formattedPaymentAmount(payout.amount))),
+    status: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payoutsStatus.MapPayoutStatusToBadge(payout.status))),
+    csv: (payout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) },
+        index.h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout); } }, "CSV"))),
 });
 
 exports.defaultColumnsKeys = defaultColumnsKeys;

package/dist/cjs/{skeleton-5ca03840.js → skeleton-c4903a53.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-5b9a3b5f.js');
-const parts = require('./parts-811ddb9c.js');
+const parts = require('./parts-addf2176.js');
 
 const Skeleton = ({ component = 'div', height, width, className, styles = {}, }) => {
     const combinedStyle = Object.assign(Object.assign({}, styles), { width,

package/dist/cjs/{spinner-c11fcb44.js → spinner-aac395e3.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-5b9a3b5f.js');
-const parts = require('./parts-811ddb9c.js');
+const parts = require('./parts-addf2176.js');
 
 const Spinner = () => {
     return (index.h("div", { class: "d-flex justify-content-center" },

package/dist/cjs/table-filters-menu.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
-const button = require('./button-94bdc1f0.js');
-const parts = require('./parts-811ddb9c.js');
+const button = require('./button-e7796b07.js');
+const parts = require('./parts-addf2176.js');
 
 const hasFilters = (params) => {
     const paginationKeys = ['after_cursor', 'before_cursor'];
@@ -35,7 +35,7 @@ const TableFiltersMenu = class {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (index.h("div", { key: 'b50b85bc459e9f217a70c49505479944572b5daf', class: "d-flex gap-2" }, index.h("div", { key: 'eedc2d34795d42f10b1db7b7f163096f06b519ff', class: "dropdown pb-3" }, index.h(button.Button, { key: '97d365b9c8ac6e5f33fa98768ffa55b988c90a17', 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"), index.h("custom-popper", { key: 'e0f52c3aeb555de14d1e999818468debc59a9fa7', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, index.h("form", { key: 'bd83ec6ea2949b2313078431c91c711682c5ed53', class: "dropdown-menu", part: parts.dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, index.h("slot", { key: '08a53808fffd6f029ac83229fa86d13bacf39a7b' })))), index.h("div", { key: 'f28533474420ac5d80ba3ab6bb5e919ebf644779' }, index.h(button.Button, { key: 'cde26e935489d12a34758cf766bcb87296e0f5e8', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (index.h("div", { key: 'ee398b42698ce14cd7d7ac914fe05ecf827adb90', class: "d-flex gap-2" }, index.h("div", { key: 'd097692b7b7dba1da5b141fccf472a454f008988', class: "dropdown pb-3" }, index.h(button.Button, { key: 'bfdc5605e6f771b5492ebecb3a9e857e561c9351', 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"), index.h("custom-popper", { key: '7974738ccf48f25886eb22838744e8761a8aab89', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, index.h("form", { key: '0f099e12ea159a912874894cdb5533f7bb64a356', class: "dropdown-menu", part: parts.dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, index.h("slot", { key: '525abf57ddb5a3ab0606037f0538f08ddf6a370b' })))), index.h("div", { key: '5381355037c7703a4c89015cd0a5ee34e652e221' }, index.h(button.Button, { key: 'e304b0f033a95757a9682257c2e4ff6793cd7cdd', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get watchers() { return {
         "params": ["watchParamsHandler"]

package/dist/cjs/terminals-list-core.cjs.entry.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
-require('./Checkout-a528241d.js');
+require('./Checkout-2ff4f9c8.js');
 const Pagination = require('./Pagination-0da8f095.js');
-require('./Payment-d074b246.js');
-require('./SubAccount-fda5ec5b.js');
-const parts = require('./parts-811ddb9c.js');
-const eventTypes = require('./event-types-4df47396.js');
-const terminalsTable = require('./terminals-table-91985249.js');
+require('./Payment-84817e2d.js');
+require('./SubAccount-f236913b.js');
+const parts = require('./parts-addf2176.js');
+const eventTypes = require('./event-types-aa1a9be1.js');
+const terminalsTable = require('./terminals-table-3c19847b.js');
 const terminalsListParamsState = require('./terminals-list-params-state-95ff6a64.js');
+require('./utils-5fb95d31.js');
 require('./Dispute-eb6bad54.js');
-require('./spinner-c11fcb44.js');
+require('./spinner-aac395e3.js');
+require('./badge-fbf58cb9.js');
 require('./index-d2d0b181.js');
 
 const TerminalsListCore = class {
@@ -135,7 +137,7 @@ const TerminalsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (index.h("div", { key: 'a293f76edb152df4636282a1bdb64526743ba62b' }, index.h("div", { key: '91c87549f3da243bcbc5e8c3f30690b4f3568312', class: "table-wrapper" }, index.h("table", { key: 'b8666ef07d7cddecfd576520004cb9ae369816d0', class: "table table-hover", part: parts.table }, index.h("thead", { key: '82f882e9c8ad8cb8b86fdd8054b2db202f31aee6', class: "table-head sticky-top" }, index.h("tr", { key: 'db96b27008b1cdfb394f7480d163ba98a564e654', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), index.h("tbody", { key: 'afe168ca0facd25953f8e23c82ee40b37ff56418', class: "table-body" }, index.h(eventTypes.TableLoadingState, { key: 'fa4a276edaa35687efd922d987b51248670aad4c', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), index.h(eventTypes.TableEmptyState, { key: 'a7450b6fc3b6e659c46c57c4bb1e06c8102da809', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), index.h(eventTypes.TableErrorState, { key: '89894e4c62d1ec4b4d10f1ca8fd50098e655dcf1', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h("tfoot", { key: 'ba93ff43a8562b4e77b48a0a026d75d9f84e5249', class: "sticky-bottom" }, index.h("tr", { key: 'bd75b89450eec1db55c7e92b2e79eab559605bba', class: "table-light align-middle" }, index.h("td", { key: 'b27b8a0bbe6c2d38393684752809d5e909948567', part: parts.tableCell, colSpan: this.terminalsTable.columnData.length }, index.h("pagination-menu", { key: '959649b1f3c8099c5b929543557823eccd3e9dd9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (index.h("div", { key: '6d26b39501a43d464cdf017f18a277f761f7091e' }, index.h("div", { key: '1742f9eec4c84c80563d9e52829cda195f6d0f35', class: "table-wrapper" }, index.h("table", { key: 'c286d9fe9e0e42631f281820f4d01bf3a0530a37', class: "table table-hover", part: parts.table }, index.h("thead", { key: '313503778cc7867e9c1276b8ac65d06367efa9b8', class: "table-head sticky-top" }, index.h("tr", { key: 'fbc26ae3d1ac4600c03c171c3e77624e66fa7915', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), index.h("tbody", { key: '458b4d6639c232a169a37e1920c5765f461fc5ed', class: "table-body" }, index.h(eventTypes.TableLoadingState, { key: 'ceeef6c53322679adff07b9bb336d9597dd573c7', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), index.h(eventTypes.TableEmptyState, { key: 'a1ef7bd86fd98c0320539a4c146d41de07901145', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), index.h(eventTypes.TableErrorState, { key: '5f6cbd7d7e2d09ebb38677f1b141ccbdbac70a9f', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h("tfoot", { key: 'cc1e06c683ad4bb83e80bd960342773cb3c78cd7', class: "sticky-bottom" }, index.h("tr", { key: 'e83f5fa8207affced7c4cd507aab27ba48e7df52', class: "table-light align-middle" }, index.h("td", { key: 'f1b6214fc5455ca39cdf2369636b07ad18b54d3d', part: parts.tableCell, colSpan: this.terminalsTable.columnData.length }, index.h("pagination-menu", { key: '5ef057eef49aaa9081b9de5ea8c48e996fa5e35a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "queryParams": ["updateOnPropChange"],

package/dist/cjs/terminals-table-3c19847b.js

@@ -0,0 +1,45 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const badge = require('./badge-fbf58cb9.js');
+const parts = require('./parts-addf2176.js');
+
+const MapTerminalStatusToBadge = (status) => {
+    const statusToBadgeProps = {
+        connected: {
+            variant: badge.BadgeVariant.SUCCESS,
+            title: 'This terminal is connected',
+            text: 'Connected',
+        },
+        disconnected: {
+            variant: badge.BadgeVariant.DANGER,
+            title: 'This terminal is disconnected',
+            text: 'Disconnected',
+        },
+        unknown: {
+            variant: badge.BadgeVariant.SECONDARY,
+            title: 'The status of this terminal is unknown',
+            text: 'Unknown',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return index.h(badge.Badge, Object.assign({}, badgeProps));
+};
+
+const defaultColumnsKeys = 'nickname,provider_id,status';
+const terminalTableColumns = {
+    nickname: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
+    provider_id: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    sub_account_name: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
+    status: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The current status of each terminal" }, "Status")),
+};
+const terminalTableCells = {
+    nickname: (terminal, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, terminal.nickname)),
+    provider_id: (terminal, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, terminal.provider_id)),
+    sub_account_name: (terminal, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, terminal.sub_account_name)),
+    status: (terminal, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, MapTerminalStatusToBadge(terminal.status))),
+};
+
+exports.defaultColumnsKeys = defaultColumnsKeys;
+exports.terminalTableCells = terminalTableCells;
+exports.terminalTableColumns = terminalTableColumns;

package/dist/cjs/{utils-a21b7453.js → utils-5fb95d31.js}

@@ -3851,16 +3851,14 @@ var Dinero = function Dinero(options) {
 var dinero = Object.assign(Dinero, Defaults, Globals, Static);
 
 // Currency Formatting
-function formatCurrency(amount, withSymbol = true, withCurrencyName = false) {
+const formatCurrency = (amount, currency) => {
     if (!amount)
         amount = 0;
-    function format(amount) {
-        const formattedString = withSymbol ? '$0,0.00' : '0,0.00';
-        return dinero({ amount: amount, currency: 'USD' }).toFormat(formattedString);
-    }
-    const formattedAmount = amount < 0 ? `(${format(-amount)})` : format(amount);
-    return withCurrencyName ? `${formattedAmount} USD` : formattedAmount;
-}
+    const formattedString = '$0,0.00';
+    const formattedCurrency = currency === null || currency === void 0 ? void 0 : currency.toUpperCase();
+    const formattedAmount = dinero({ amount: amount }).toFormat(formattedString);
+    return currency ? `${formattedAmount} ${formattedCurrency}` : formattedAmount;
+};
 // Date Formatting and Conversion
 function formatDate(dateString) {
     if (!dateString)

package/dist/cjs/{utils-fc17191b.js → utils-a05a8bf6.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 const index = require('./index-5b9a3b5f.js');
-const parts = require('./parts-811ddb9c.js');
+const parts = require('./parts-addf2176.js');
 
 const ErrorState = (errorMessage) => (index.h("main", { class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } },
     index.h("p", { part: parts.text }, errorMessage)));
 const DetailSectionTitle = (props) => (index.h("h2", { part: parts.heading2, class: "mt-4 fs-5 border-bottom pb-3" }, props.sectionTitle));
 const DetailItem = ({ title, value, }) => title && value ? (index.h("div", { class: "d-table-row gap-2" },
     index.h("span", { class: "fw-bold d-table-cell px-2", part: parts.text }, title),
-    index.h("span", { class: "flex-1 d-table-cell px-2 text-wrap", part: parts.text, innerHTML: value }))) : null;
+    index.h("span", { class: "flex-1 d-table-cell px-2 text-wrap", part: parts.text }, value))) : null;
 const EntityHeadInfoItem = ({ title, value, classes, }) => (index.h("div", { class: `d-flex flex-column ${classes}` },
     index.h("span", { class: "fw-bold border-1 border-bottom ps-2 pe-2", part: parts.heading2 }, title),
     index.h("span", { class: "pt-2 ps-2 pe-2", part: parts.text }, value)));