@justifi/webcomponents 4.20.1 → 4.22.0

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

@@ -0,0 +1,23 @@
+export const MapPaymentStatusToBadge = (status) => {
+    switch (status) {
+        case 'succeeded':
+            return "<span class='badge bg-success' title='This payment was successfully captured'>Succeeded</span>";
+        case 'authorized':
+            return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
+        case 'pending':
+            return "<span class='badge bg-primary' title='This ACH payment was processed, but the funds haven't settled. It could still succeed or fail.'>Pending</span>";
+        case 'achFailed':
+            return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
+        case 'failed':
+            return "<span class='badge bg-danger' title='This card payment didn't go through (it won't appear in a payout)'>Failed</span>";
+        case 'canceled':
+            return "<span class='badge bg-danger' title='This payment was canceled'>Canceled</span>";
+        case 'disputed':
+            return "<span class='badge bg-secondary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</span>";
+        case 'fully_refunded':
+            return "<span class='badge bg-secondary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
+        case 'partially_refunded':
+            return "<span class='badge bg-secondary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
+    }
+    ;
+};

package/dist/collection/components/payout-details/payout-details-core.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
-import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../../ui-components/details/utils";
 import { StyledHost } from "../../ui-components";
+import { MapPayoutStatusToBadge } from "../payouts-list/payouts-status";
 export class PayoutDetailsCore {
     constructor() {
         this.downloadCSV = () => {
@@ -52,7 +53,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '3ab39ca75aa7f1db8daf8442d2ae9131085375ae' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c423b3e994e2ceb3b9f641752f1747aa8d8e7b4e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'e39f07636edbe3527707c538f296133a24a92aa1', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '3424ff97b7a41fdbd784a982617af0ab2ff004e7', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'c2584993d369514e2413c7d23a9b731eb2c9135a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '958856c1acbc34394d2fbc453d9e2dd1f437fe38', title: "ID", value: this.payout.id }), h("div", { key: 'dd097a51e1b02a7624614cb7f554789302e36bcd', class: "m-4" }, h("button", { key: 'f565ec22830ea1fd53e9f14d4f184a4a97e975ea', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'a12b5c5a78c1e21d905a8049537d8775765766d1', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b3ef435e2cce25f91e3d015098c199a95acfd76e', sectionTitle: "Details" }), h("div", { key: '585f9454474ce9b5691265cfe44309220b737a8a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '20deb7901ee526c84966e43e020b7aec9ce2d014', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'e0f17db65ed53f3c4b3eff511dcf44784e9d0be5', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '5c665c9b5eca28d09c46367156a586b64bb20ee5', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'e0a39aad45a06185498256859947f8f64312bbc4', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: 'd0fcad35843acf001cc73c0fe3f67ca85fa99007', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '08d127690a8e63e852cd23ed53cc83da77c9de46', sectionTitle: "Account" }), h("div", { key: '1ebc113b76f30abd208374a0cfaa60c3ac6c30d2', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f61baf5b0e38d0e1c31d9f32109d4eb87a1dcc51', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '01aa558d404b8bb3d170812828ee0929e60bc2c9', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '8298458ba6dc9bcdaa7f992d530e179e3d8a3bc3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'b15a016b489bd61f55670beec610f49c56659b87', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'cd9e466eaadf645fcabad56c1ee2493e6f5ac11c', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'b30058d0ebd67c91ba182e1e2231ff72d9adf5c5', sectionTitle: 'Metadata' }), h("div", { key: '02876e9c23abea853218c78b99e1b46795af7a93', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '9e6dee3bda335ff836e650741a00b75800da7dab', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '77668046c9b20d8e5fa2b1cf278925a8646052d7' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '975c61e183b809b42e96b1785a9c8c60ac397231', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '0258d3adf8c1f65c0f78446a3c5fa6c5a39fdde4', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: 'd845cd2abc1d82cc62ea7116a405570b235bcde0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '8ae3e1f22c0fb5fd76e1fdbecb91bc70be0ffe21', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '8d0405aa11c546ddc92b4e2e65c651a4aae2c82f', title: "ID", value: this.payout.id }), h("div", { key: 'a2b2b06a33009bb27c60aa0d2af74f0ec18db3d1', class: "m-4" }, h("button", { key: 'ae32f0567a4d4d533a322c20668b2a165fe71f4c', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '1519308f535b2f7dbc065f3320b60755c732f5e4', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b4da3442d6e86f9a4d6b2a8ffd6ed40053294151', sectionTitle: "Details" }), h("div", { key: '1a83acdafddfda491141cc68b70fbf2c9d4df69c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ac81d5cb6b185a4e40c5a27bd75113657a86d087', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '9b327577694e255d466a6009de0d39d67a144063', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '8ac6c81f11caa365e6b530bedeb26a7682199538', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '1cd8424c8299f8f334bd08e85cbe81018dfd69c3', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '44f6cbf82e5f79d8fa532923233d6a5eedeef19c', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'fc4366a767fd89ab25939d1d3cef9e2372c6b7ba', sectionTitle: "Account" }), h("div", { key: '7ea8ccb28ef7cb32490e82cf8470c88de6275fcb', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9e50c25012fe1873ef4bf8dd65d9aa1f0b2f6252', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'be19c35d8766716abe7a94a43ff1360fb2bc8caf', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f3ceaa15d8e8c8de8a4b57d431049b5f1f12b7aa', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '25468ae8b033172207f130448926eda8333df841', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'c5b60f0bfa2cfdc826cc54670ab66af199c8babc', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '78392b7f27b6ceb3499c512f2174e3d4b4058f63', sectionTitle: 'Metadata' }), h("div", { key: '43c5439322874b89612f37ec41e906fda030dd3b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2929f26c8b7932862cbb735bc8644eabd9494e14', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

package/dist/collection/components/payout-details/payout-details.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayoutDetails } from "./get-payout-details";
-import { ErrorState } from "../details/utils";
+import { ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { makeGetPayoutCSV } from "./get-payout-csv";

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

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
-import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults, } from "../../api";
+import { pagingDefaults } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { DownloadIcon } from "../../assets/download-icon";
-import { tableExportedParts } from "../table/exported-parts";
-import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { MapPayoutStatusToBadge } from "./payouts-status";
 export class PayoutsListCore {
     constructor() {
         this.downloadCSV = (payoutId) => {
@@ -32,22 +32,6 @@ export class PayoutsListCore {
             delete newParams.before_cursor;
             this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
         };
-        this.mapStatusToBadge = (status) => {
-            switch (status) {
-                case PayoutStatuses.scheduled:
-                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.in_transit:
-                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.failed:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.canceled:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.forwarded:
-                    return `<span class="badge bg-secondary" title='The funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.paid:
-                    return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
-            }
-        };
         this.rowClickHandler = (e) => {
             const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedPayoutID)
@@ -125,7 +109,7 @@ export class PayoutsListCore {
             formatCurrency(payout.fees_total),
             formatCurrency(payout.other_total),
             formatCurrency(payout.amount),
-            { type: 'inner', value: this.mapStatusToBadge(payout.status) },
+            { type: 'inner', value: MapPayoutStatusToBadge(payout.status) },
             (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
         ]);
     }
@@ -139,8 +123,8 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState;
     }
     render() {
-        return (h(StyledHost, { key: 'c160bca06a40b0bde1d0ecf3bbbf081535c23487', exportedparts: tableExportedParts }, h("div", { key: 'ba6b1418212fc79f2eb4a2c4835de9f2df7fd8e9', class: "row gy-3 mb-4" }, h("div", { key: '0c7323ec2551a29df6a9e273e53ca965b4422ce5', class: "col-2" }, h("form-control-date", { key: 'f3cd038ef750e1022e29dba96e201e669f0d2f84', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '46f0a88e563ace9d4476940abec758721e40d217', class: "col-2" }, h("form-control-date", { key: 'c80de9111c3b4fb9c526c0668b4154753fd78ebd', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '570a74e2c87f2d685f932c5a0182a77a7cf296c0', class: "table-wrapper" }, h("table", { key: 'dba141a302aeb90c45bb64171870bf1cd097576b', class: "table table-hover" }, h("thead", { key: 'ea6fb0e3d3aecf89216d310bc66874602a64af40', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'daa4eab66cdaad6af240704f24c1e22f9d1ff999', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: '1f7ffd08ce54fe4b47560e3465e18bd163065be0', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8a2668b61449c0a16183bff5a2de120cb8898922', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a419e933f349cc126afac309c0647a985590dfc5', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'b3a0267af5bdfdf7ca28caa4b2427437fb6f806f', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
-            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: '11aabf956abf100c8988c7fc0dc6fe1327b0a45d', class: "sticky-bottom" }, h("tr", { key: '37bf8a636469e15cb73d0730e2a2269decc83693', class: "table-light align-middle" }, h("td", { key: '785d2f4b39153842a9a9a0ab40ace7c2a35c6b6c', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: 'f39e621434687eab1b7fccdfda56cbecfe59d64d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '536d8a921bb7b6517dc65afd307507668e74e92f' }, h("div", { key: '5d33c651af05927db51e7d855772ff1c60f71ef0', class: "row gy-3 mb-4" }, h("div", { key: '53f246db4d96ef4ac445c0b57d4da3471c9fdbdb', class: "col-2" }, h("form-control-date", { key: 'd6e711e3e92e53cff8e2ee4a8c4a3788584c0f77', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '86ab746d1e7f9e11dfeca4cd185909d9d447fe85', class: "col-2" }, h("form-control-date", { key: '232edbf8284d14ed3659a199b144eb5596e22b88', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '10c720e38bd24ff9431d59a28ec46f62bd8c04a7', class: "table-wrapper" }, h("table", { key: 'fdbf0978c018315d5e67caf9273e59bf4e50205c', class: "table table-hover" }, h("thead", { key: 'f3fc1532a46f8b92eff8d385462fe8ba9448840b', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'fe552206bf026258b40031c10a030fb32f98879d', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: '1247efd4d95cfb257d052acf9dbcac84203aaaaf', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '1107d1a965651133504db486d4d0b692fe9735e9', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '8435806053ae9d16a05cc031f33d3b97e4d02248', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '01213ac9d7f63e0eaa11c38f4aebe59aef3650d9', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: 'd2a1b0dd2340cf64816ad05c1c03f136b21df0a6', class: "sticky-bottom" }, h("tr", { key: 'abb87b7c026475da175a6bec772887bf3ac08933', class: "table-light align-middle" }, h("td", { key: '32070f512aebc77a42693a93e717d31ef9ed4509', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: '57ee656553f4afee96f5dbdac5866f103cde97eb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -1,12 +1,12 @@
-import { Host, h } from "@stencil/core";
-import { tableExportedParts } from "../table/exported-parts";
+import { h } from "@stencil/core";
+import { tableExportedParts } from "../../ui-components/table/exported-parts";
 import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayouts } from "./get-payouts";
-import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { makeGetPayoutCSV } from "../payout-details/get-payout-csv";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { StyledHost } from "../../ui-components/styled-host/styled-host";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -71,10 +71,7 @@ export class PayoutsList {
         }
     }
     render() {
-        if (this.errorMessage) {
-            return ErrorState(this.errorMessage);
-        }
-        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleOnError })));
+        return (h(StyledHost, { key: '8d72aa16705df76ed49a13a59e88a40a75c23488', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '94428c879981bbc036e1d4f6c59c1e1c1146c824', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleOnError })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,21 @@
+export const MapPayoutStatusToBadge = (status) => {
+    switch (status) {
+        case 'canceled':
+            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Canceled</span>";
+        case 'failed':
+            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Failed</span>";
+        case 'forwarded':
+            return "<span class='badge bg-secondary' title='This payout initially failed; the funds have been forwarded to your next successful payout'>Forwarded</span>";
+        case 'in_transit':
+            return "<span class='badge bg-primary' title='Transfer to your bank account has been initiated'>In Transit</span>";
+        case 'paid':
+            return "<span class='badge bg-success' title='Successfully deposited into your bank account'>Paid</span>";
+        case 'pending':
+            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Pending</span>";
+        case 'scheduled':
+            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Scheduled</span>";
+        case 'withdrawn':
+            return "<span class='badge bg-success' title='Negative payout balance successfully withdrawn from your bank account'>Withdrawn</span>";
+    }
+    ;
+};

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

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import RefundFormSchema from "./refund-form-schema";
 import { Api } from "../../api";
-import { FormController } from "../form/form";
+import { FormController } from "../../ui-components/form/form";
 import { config } from "../../../config";
 import { CURRENCY_MASK } from "../../utils/form-input-masks";
 import { StyledHost } from "../../ui-components";
@@ -75,7 +75,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'bb3d26c841a9697e5881426fb92027e1fff62e9f' }, h("h1", { key: 'b89354d3dec27b3e496af20957fa4d30b7c2e99e' }, "Refund"), this.refundInfoText && (h("div", { key: '493ff3e052c5b28bb382355dd32ebf407446346d', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '72211dc3be8aef8bb87aaff278455170a2be0ed4', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'fa22ea217cbb789cd6a4d2798903df20c7a99c3a', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'd698a190fbc5f92375cda2707ea54a0b7d7ca4c3', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '68796a301cea039ba86eaba91e4a63f7db800f47', class: "form-group" }, h("form-control-monetary", { key: '7a03e3d50bad0f932ca69ba7bb8c20cf80d62bc7', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: 'b4c548b884d7b537a8caa8c91da505af6f6bd6ad', class: "form-group" }, h("form-control-text", { key: '936fb7ee8ce365311c9f368fc7a3c4f183d675ba', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '9b8c5c4175279e8ce5d4d5c10de9ac1e3249bae7', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '8f8a0a878a541d1740d63927d36ad7f2982f83cb', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: '05a417edd28ecdb609c9ca6abaa60004fe782beb' }, h("h1", { key: '05450dad6321a3cb94461d020a64dde7abfcb287' }, "Refund"), this.refundInfoText && (h("div", { key: '4874c1bbbbcb0caac057e7d29eb5d62f998e7f70', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: 'cb64bc85188e882e6c863bb2e56411f31f9675d3', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'd1497287435d3b87f77bf37d4bd1473cf1ddc4f3', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '4936209e143d8c5d6ef6a32ddc49d63b92711351', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'fc6e616809550f22b949d1f256b4ddc922e1fab9', class: "form-group" }, h("form-control-monetary", { key: '220c36b30960e85b30999267b7daa933062e4ca0', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: 'd40556a67819325134ff1389a8e8018b024ce0da', class: "form-group" }, h("form-control-text", { key: '1c1cb5a345118902830bad6ec852bfb0641a983c', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: 'bb167956ce0a4bef63fbdee79681348a963f55be', class: "form-group d-flex flex-row-reverse" }, h("button", { key: 'd6767bf536e4416f4071271cc2028be69686a59e', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminals-list/get-terminal-detail.js

@@ -0,0 +1,29 @@
+import { Terminal } from "../../api";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
+export const makeGetTerminalDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchTerminal(id, authToken);
+        if (!response.error) {
+            onSuccess({ terminal: new Terminal(response.data) });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: getErrorMessage(error),
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};

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

@@ -0,0 +1,31 @@
+import { Terminal } from "../../api";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
+export const makeGetTerminals = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
+    var _a, _b;
+    try {
+        const response = await service.fetchTerminals(id, authToken, params, apiOrigin);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const terminals = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new Terminal(dataItem))) || [];
+            onSuccess({ terminals, 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,
+        });
+    }
+};

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

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

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

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