@justifi/webcomponents 4.19.0 → 4.19.1-rc-3

package/dist/webcomponents/p-800d31fe.entry.js

@@ -0,0 +1,162 @@
+import { h, r as registerInstance, c as createEvent } from './p-fad19d75.js';
+import { p as pagingDefaults } from './p-56f6ce4c.js';
+import './p-df21aaad.js';
+import { a as PayoutStatuses, b as PayoutStatusesSafeNames } from './p-e3fab0e2.js';
+import { b as formatDate, c as formatTime, f as formatCurrency } from './p-83125497.js';
+import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './p-14c91ffd.js';
+import { t as tableExportedParts } from './p-2b6c9c4f.js';
+import { S as StyledHost } from './p-ba4bae6f.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './p-e333620e.js';
+
+const DownloadIcon = (props) => (h("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' }, props),
+    h("path", { d: 'M12 15.5l-5-5 1.41-1.41L12 12.67l3.59-3.58L17 10.5l-5 5z' }),
+    h("path", { d: 'M11 4h2v9h-2z' }),
+    h("path", { d: 'M5 18h14v2H5z' })));
+
+const PayoutsListCore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rowClicked = createEvent(this, "payout-row-clicked", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.downloadCSV = (payoutId) => {
+            this.getPayoutCSV({
+                payoutId,
+                onError: () => {
+                    this.errorEvent.emit({
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        message: 'Failed to download CSV',
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                },
+            });
+        };
+        this.handleDateChange = (name, value) => {
+            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        };
+        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.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)
+                return;
+            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
+        };
+        this.getPayouts = undefined;
+        this.getPayoutCSV = undefined;
+        this.payouts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    componentWillLoad() {
+        if (this.getPayouts) {
+            this.fetchData();
+        }
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPayouts({
+            params: this.params,
+            onSuccess: ({ payouts, pagingInfo }) => {
+                this.payouts = payouts;
+                this.paging = pagingInfo;
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get entityId() {
+        return this.payouts.map((payout) => payout.id);
+    }
+    get columnData() {
+        return [
+            ['Paid Out On', 'The date each transaction occurred'],
+            ['Type', 'The type of each transaction'],
+            ['Account', 'The ID of the account associated with each payout'],
+            ['Paid Out To', 'The bank account to which each payout was transferred'],
+            ['Payments', 'Sum of payments in each payout'],
+            ['Refunds', 'Sum of refunds in each payout'],
+            ['Fees', 'Sum of fees in each payout'],
+            ['Other', 'Sum of less common transactions in each payout'],
+            ['Payout Amount', 'The net sum of all transactions in each payout'],
+            ['Status', 'The real-time status of each payout'],
+            ['Actions', ''],
+        ];
+    }
+    get rowData() {
+        return this.payouts.map((payout) => [
+            {
+                type: 'head',
+                value: `
+          <div class='fw-bold'>${formatDate(payout.created_at)}</div>
+          <div class='fw-bold'>${formatTime(payout.created_at)}</div>
+        `,
+            },
+            payout.payout_type,
+            payout.account_id,
+            `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
+            formatCurrency(payout.payments_total),
+            formatCurrency(payout.refunds_total),
+            formatCurrency(payout.fees_total),
+            formatCurrency(payout.other_total),
+            formatCurrency(payout.amount),
+            { type: 'inner', value: this.mapStatusToBadge(payout.status) },
+            (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
+        ]);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
+    }
+    render() {
+        return (h(StyledHost, { key: '594c52003f897f4c50f79935e42a7042fb5ec168', exportedparts: tableExportedParts }, h("div", { key: 'f2b1d971e1e7bc5596459c071c3aa931ba4cb4b9', class: "row gy-3 mb-4" }, h("div", { key: 'd98e3ed56421493a60bd0a285079aa99ae705506', class: "col-2" }, h("form-control-date", { key: 'c9c899884bcc6fa6d306b95473ef0a7354e57bd5', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '0059a75bf2f478b107d59bd9d7cc29de10dffe57', class: "col-2" }, h("form-control-date", { key: 'ef9a31ac8a8e7336386664b70289ee34677152a4', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '65da1114a66ac4cdf8d6ec012a42b2f760af5c76', class: "table-wrapper" }, h("table", { key: 'd68d8f61835cc4dc5dc988ff61843e6254494ace', class: "table table-hover" }, h("thead", { key: 'aa691db8fbfbcdad59acbdc1ef38497b552928ab', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'aa9f61cbf05b9420026861cb14e6a30a6c9e347e', 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: 'cf0127f26e8bc5b7afbbfc4a36fab4de948d1727', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'd6b832786c4959176974c7a343442c8d1c50b5c2', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '398a20957f76ba14e1b0677fbd6fbfbacce61fbb', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd9f755a07a6f8cd4967eac60beff92f36322dcdd', 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: '503fa3a3a7ffe5d52b614153b286dd0326c02091', class: "sticky-bottom" }, h("tr", { key: 'e3af74b96bfc1f5ac1f0f0655eaed096102d0e89', class: "table-light align-middle" }, h("td", { key: 'a53f9d37181ea29a9fcb6ab46b2daf7cc66509be', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: 'b0779289444747e0b18bb63e6a17cdc89bd390ca', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+    }
+    static get watchers() { return {
+        "params": ["updateOnPropChange"],
+        "getPayouts": ["updateOnPropChange"]
+    }; }
+};
+
+export { PayoutsListCore as payouts_list_core };

package/dist/webcomponents/p-8115b2f4.js

@@ -1 +1,28 @@
-import{a as t}from"./p-14c91ffd.js";const a=t=>"string"==typeof t?t:t.message,e=a=>{switch(a){case"not_authenticated":return t.NOT_AUTHENTICATED;case"invalid_parameter":return t.INVALID_PARAMETER;default:return t.FETCH_ERROR}};export{e as a,a as g}
+import { a as ComponentErrorCodes } from './p-14c91ffd.js';
+
+// Errors on [capital]/config/locales/en.yml
+// Add more errors as needed
+const API_ERRORS = {
+    NOT_AUTHENTICATED: 'not_authenticated',
+    INVALID_PARAMETER: 'invalid_parameter',
+};
+
+const getErrorMessage = (error) => {
+    if (typeof error === 'string') {
+        return error;
+    }
+    return error.message;
+};
+const getErrorCode = (code) => {
+    switch (code) {
+        case API_ERRORS.NOT_AUTHENTICATED:
+            return ComponentErrorCodes.NOT_AUTHENTICATED;
+        case API_ERRORS.INVALID_PARAMETER:
+            return ComponentErrorCodes.INVALID_PARAMETER;
+        // add more cases as needed
+        default:
+            return ComponentErrorCodes.FETCH_ERROR;
+    }
+};
+
+export { getErrorCode as a, getErrorMessage as g };