@justifi/webcomponents 4.18.0 → 4.19.0

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

@@ -1,12 +1,37 @@
 import { h } from "@stencil/core";
-import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults } from "../../api";
+import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults, } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { tableExportedParts } from "../table/exported-parts";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
-import StyledHost from "../../utils/styled-host/styled-host";
 import { DownloadIcon } from "../../assets/download-icon";
+import { tableExportedParts } from "../table/exported-parts";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 export class PayoutsListCore {
     constructor() {
+        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:
@@ -18,35 +43,16 @@ export class PayoutsListCore {
                 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='This payout initially failed; the funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
+                    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.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.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.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;
@@ -56,14 +62,14 @@ export class PayoutsListCore {
         this.paging = pagingDefaults;
         this.params = undefined;
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     componentWillLoad() {
         if (this.getPayouts) {
             this.fetchData();
         }
     }
-    updateOnPropChange() {
-        this.fetchData();
-    }
     fetchData() {
         this.loading = true;
         this.getPayouts({
@@ -78,54 +84,63 @@ export class PayoutsListCore {
                 this.errorEvent.emit({
                     errorCode: code,
                     message: error,
-                    severity
+                    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: '469e4d0a5fcb7370d0d076e9f27cf5102235324e', exportedparts: tableExportedParts }, h("div", { key: '883f193b2da3cdd3da3f31422def69d206ead983', class: "row gy-3 mb-4" }, h("div", { key: '585684441aeded4619f9a0f03151b5e8dd2219d8', class: "col-2" }, h("form-control-date", { key: 'bc69d932f1d32074b3f0fdd2c9dba6f9601db891', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: 'd026150a6a09ad49f549ea2b5174a1ed311987dc', class: "col-2" }, h("form-control-date", { key: '2621b14359b8159270d67e53f9ad2f6464cbb467', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("justifi-table", { key: '757c9bbee39356ee23819f0e7e4d3b096bdf38f6', rowClickHandler: (e) => {
-                const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPayoutID) {
-                    return;
-                }
-                this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
-            }, columnData: [
-                ['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 (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
-                ['Payout Amount', 'The net sum of all transactions in each payout. This is the amount you\'ll see reflected on your bank statement'],
-                ['Status', 'The real-time status of each payout'],
-                ['Actions', '']
-            ], entityId: this.payouts.map((payout) => payout.id), rowData: 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' } }))
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+        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 is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -4,7 +4,7 @@ import { Api } from "../../api";
 import { FormController } from "../form/form";
 import { config } from "../../../config";
 import { CURRENCY_MASK } from "../../utils/form-input-masks";
-import StyledHost from "../../utils/styled-host/styled-host";
+import { StyledHost } from "../../ui-components";
 export class RefundForm {
     constructor() {
         this.authToken = undefined;
@@ -75,7 +75,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '33fe820ac401dce5903071de975343fb4577e8bc' }, h("h1", { key: 'f249b4ab8c6817d995566434055c64dc11e6f1aa' }, "Refund"), this.refundInfoText && (h("div", { key: 'e152d19001ab00d1b7d213f44f8f384a4bdd3dcf', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '177e584498bd6e23b152f8daf5c51989bbf6509e', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '4b094ae72aea352c4cf4bc85610e8ede298549e0', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '04501cd8aa10b65e9d2cd2940bdffb89688ff30c', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '44811330173bc418413a2e9cab0249f541ffe517', class: "form-group" }, h("form-control-monetary", { key: '384e732335cf8e8782af48da6709f06028181c19', 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: '137a007a7e795b7d1a8b86ddd05982a7e79bd66a', class: "form-group" }, h("form-control-text", { key: '2a2fc63cb0131614044f15132ed56a845cae0646', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '4e3229087cca4cf5c4a133b49cc04a527bd3a716', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '2f44170e8b632ba3b2db98ada5c54944495ce4d6', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: 'd0d0962eaecab749aa1eb124e86701a2fb4dfd53' }, h("h1", { key: 'cb3071d89c291b1664e551fcf2808a64569ba5eb' }, "Refund"), this.refundInfoText && (h("div", { key: '01a6f4567f882d2eec492ef6d98db7d04747ecb4', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '8ae5928aaf8ead35a7ad180a01bdde05ebec3d5f', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '425a7dfe9d8b886b55fd0878f3989373733c1758', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '5516d2ac500611d2410b9b4c2a4d0d15e417b2d1', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'b67a7c56f070a5a25d91aa0cc77755b27d420fdc', class: "form-group" }, h("form-control-monetary", { key: '76b6cfdf2b39674434f4d880333dd5d5f603f0b6', 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: '5e581cdea69d2ce9dbad774214cd904923d199b3', class: "form-group" }, h("form-control-text", { key: '926ae888676a4089d3381bd4d650e6f84f6e206a', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: 'de5df506b7b64a69a16241f117bf9bea4fd79b57', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '92ad4d43677587c2c20dc03c6f03a6cf1f20ac12', 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/ui-components/button-spinner.js

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" }, h("span", { class: "visually-hidden" }, "Loading...")));

package/dist/collection/ui-components/button.js

@@ -0,0 +1,19 @@
+import { h } from "@stencil/core";
+import { ButtonSpinner } from "./button-spinner";
+export const Button = (props, children) => {
+    const classMap = {
+        primary: 'btn btn-primary',
+        secondary: 'btn btn-secondary',
+    };
+    const exportPartMapping = {
+        primary: ['button', 'button-primary'],
+        secondary: ['button', 'button-secondary'],
+    };
+    const getCSSParts = () => {
+        const baseCSSParts = exportPartMapping[props.variant];
+        if (props.isLoading)
+            baseCSSParts.push('button-loading');
+        return baseCSSParts.join(' ');
+    };
+    return (h("button", Object.assign({ class: classMap[props.variant], onClick: props.clickHandler, part: getCSSParts() }, props), props.isLoading ? ButtonSpinner() : children));
+};

package/dist/collection/ui-components/index.js

@@ -0,0 +1,7 @@
+export * from './button';
+export * from './button-spinner';
+export * from './styled-host/styled-host';
+export * from './table-empty-state';
+export * from './table-error-state';
+export * from './table-loading-state';
+export * from './skeleton';

package/dist/collection/ui-components/skeleton.js

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+// This component relies on "src/styles/animations.css" 
+// where it is defined the pulsation animation.
+// Because of shadow-dom, it's not possible to add it to the root.css.
+// Don't forget to include this file in the `styleUrls` 
+// property of the web component that will render the Skeleton
+export const Skeleton = ({ component = 'div', height, width, variant = 'text', componentClassName, styles = {}, }) => {
+    const getVariantStyle = () => {
+        if (variant === 'text') {
+            return {
+                marginTop: 0,
+                marginBottom: 0,
+                height: 'auto',
+                transformOrigin: '0 55%',
+                transform: 'scale(1, 0.60)',
+                borderRadius: '4px/6.67px',
+                '::before': {
+                    content: '"\\00a0"',
+                },
+            };
+        }
+        else if (variant === 'circular') {
+            return {
+                borderRadius: '50%',
+            };
+        }
+        else if (variant === 'rounded') {
+            return {
+                borderRadius: '4px',
+            };
+        }
+        return {};
+    };
+    const combinedStyle = Object.assign(Object.assign(Object.assign({}, styles), getVariantStyle()), { width,
+        height });
+    const TagType = component;
+    return (h(TagType, { class: componentClassName, style: combinedStyle, part: "skeleton" }));
+};
+export default Skeleton;

package/dist/collection/ui-components/styled-host/styled-host.js

@@ -0,0 +1,5 @@
+import { Host, h } from "@stencil/core";
+import styledHostStyles from "./styled-host.css";
+export const StyledHost = (props, children) => {
+    return (h(Host, Object.assign({}, props, { class: "body", style: { display: 'block' } }), h("style", null, styledHostStyles), children));
+};

package/dist/collection/ui-components/table-empty-state.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export const TableEmptyState = (props) => {
+    const { columnSpan, isEmpty } = props;
+    if (!columnSpan || !isEmpty) {
+        return null;
+    }
+    return (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
+};

package/dist/collection/ui-components/table-error-state.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export const TableErrorState = (props) => {
+    const { columnSpan, errorMessage } = props;
+    if (!columnSpan || !errorMessage) {
+        return null;
+    }
+    return (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: columnSpan, "data-test-id": "table-error-state", style: { textAlign: 'center' } }, "An unexpected error occurred: ", errorMessage)));
+};

package/dist/collection/ui-components/table-loading-state.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export const TableLoadingState = (props) => {
+    const { columnSpan, isLoading } = props;
+    if (!columnSpan || !isLoading) {
+        return null;
+    }
+    return (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: columnSpan, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
+};

package/dist/collection/utils/utils.js

@@ -70,9 +70,6 @@ export function formatTimeSeconds(dateString) {
 export function formatAddress(address) {
     return `${address.line1}, ${address.city}, ${address.state} ${address.postal_code}`;
 }
-export function formatLegalAddress(address) {
-    return `${address.address_line1}, ${address.address_city}, ${address.address_state}, ${address.address_postal_code}`;
-}
 export function extractComputedFontsToLoad() {
     var _a;
     const computedStyles = getComputedStyle(document.body);
@@ -118,24 +115,6 @@ export const MapPayoutStatusToBadge = (status) => {
             return "<span class='badge bg-success' title='Negative payout balance successfully withdrawn from your bank account'>Withdrawn</span>";
     }
 };
-export const MapSubAccountStatusToBadge = (status) => {
-    switch (status) {
-        case 'created':
-            return "<span class='badge bg-primary' title='This sub account has been created, but we haven't received their onboarding yet'>Canceled</span>";
-        case 'submitted':
-            return "<span class='badge bg-info' title='We've received this sub account's onboarding and we're reviewing their information'>Submitted</span>";
-        case 'information_needed':
-            return "<span class='badge bg-warning' title='We've reviewed this sub account's onboarding information and found an issue'>Information Needed</span>";
-        case 'enabled':
-            return "<span class='badge bg-success' title='This sub account is approved to process payments'>Enabled</span>";
-        case 'disabled':
-            return "<span class='badge bg-danger' title='This sub account was previously approved, but has since become ineligible to process payments'>Disabled</span>";
-        case 'rejected':
-            return "<span class='badge bg-danger' title='This sub account didn't pass approval, so they won't be able to process payments'>Rejected</span>";
-        case 'archived':
-            return "<span class='badge bg-primary' title='This sub account has been archived. They won't be able to process payments unless they are restored'>Archived</span>";
-    }
-};
 /**
  * Converts a snake_case string to a human-readable format by replacing underscores with spaces and capitalizing the first letter of each word.
  *