@justifi/webcomponents 5.3.5 → 5.4.0

package/dist/collection/components/order-terminals/order-terminals.js

@@ -8,85 +8,100 @@ import { ErrorState } from "../../ui-components/details/utils";
 import { Business } from "../../api/Business";
 import { makeGetBusiness } from "../../actions/business/get-business";
 import { OrderTerminalsLoading } from "./order-terminals-loading";
-import { heading4, listGroup, listGroupItem, text } from "../../styles/parts";
-import { TerminalSelectorLoading } from "../terminal-quantity-selector/terminal-quantity-selector-loading";
+import { buttonPrimary, heading4, heading5, text } from "../../styles/parts";
+import { TerminalSelectorLoading } from "./terminal-quantity-selector/terminal-quantity-selector-loading";
 import { makeGetTerminalModels } from "../../actions/terminal/get-terminal-models";
 import { TerminalService } from "../../api/services/terminal.service";
-import { TerminalOrder } from "../../api/TerminalOrder";
+import { TerminalOrder, TerminalOrderType } from "../../api/TerminalOrder";
+import { makeOrderTerminals } from "../../actions/terminal/order-terminals";
 export class OrderTerminals {
     constructor() {
         this.businessId = undefined;
         this.authToken = undefined;
         this.accountId = undefined;
-        this.errorMessage = undefined;
-        this.businessIsLoading = true;
-        this.terminalsIsLoading = true;
+        this.shipping = false;
+        this.loading = {
+            business: true,
+            terminals: true,
+        };
+        this.submitting = false;
+        this.error = null;
         this.business = undefined;
         this.terminalModels = undefined;
         this.orderLimit = undefined;
-        this.order = new TerminalOrder({});
+        this.order = undefined;
         this.totalQuantity = 0;
     }
     componentWillLoad() {
+        this.order = new TerminalOrder({
+            business_id: this.businessId,
+            sub_account_id: this.accountId,
+            order_type: this.shipping ? TerminalOrderType.boardingShipping : TerminalOrderType.boardingOnly,
+        });
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.loadData();
     }
+    handleError(errorMessage, code, severity) {
+        this.error = { message: errorMessage, code, severity };
+        this.errorEvent.emit({ errorCode: code, message: errorMessage, severity });
+    }
     loadData() {
         if (!this.businessId || !this.authToken) {
-            this.errorMessage = 'Invalid business id or auth token';
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.MISSING_PROPS,
-                message: this.errorMessage,
-                severity: ComponentErrorSeverity.ERROR,
-            });
+            this.handleError("Invalid business id or auth token", ComponentErrorCodes.MISSING_PROPS, ComponentErrorSeverity.ERROR);
             return;
         }
         this.initializeGetBusiness();
         this.initializeGetTerminalModels();
     }
     initializeGetBusiness() {
-        const getBusiness = makeGetBusiness({
+        makeGetBusiness({
             id: this.businessId,
             authToken: this.authToken,
             service: new BusinessService(),
-        });
-        getBusiness({
+        })({
             onSuccess: ({ business }) => {
                 this.business = new Business(business);
-                this.businessIsLoading = false;
+                this.loading.business = false;
             },
             onError: ({ error, code, severity }) => {
-                this.errorMessage = error;
-                this.errorEvent.emit({
-                    errorCode: code,
-                    message: error,
-                    severity,
-                });
-                this.businessIsLoading = false;
+                this.handleError(error, code, severity);
+                this.loading.business = false;
             }
         });
     }
     initializeGetTerminalModels() {
-        const getTerminalModels = makeGetTerminalModels({
+        makeGetTerminalModels({
             id: this.accountId,
             authToken: this.authToken,
             service: new TerminalService(),
-        });
-        getTerminalModels({
+        })({
             onSuccess: ({ terminals, orderLimit }) => {
                 this.terminalModels = terminals;
                 this.orderLimit = orderLimit;
-                this.terminalsIsLoading = false;
+                this.loading.terminals = false;
             },
             onError: ({ error, code, severity }) => {
-                this.errorMessage = error;
-                this.errorEvent.emit({
-                    errorCode: code,
-                    message: error,
-                    severity,
-                });
-                this.terminalsIsLoading = false;
+                this.handleError(error, code, severity);
+                this.loading.terminals = false;
+            }
+        });
+    }
+    submitOrder() {
+        const orderTerminals = makeOrderTerminals({
+            authToken: this.authToken,
+            service: new TerminalService(),
+        });
+        this.submitting = true;
+        orderTerminals({
+            terminalOrder: this.order.payload,
+            onSuccess: ({ data }) => {
+                this.submitted.emit(data);
+                this.submitting = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.handleError(error, code, severity);
+                this.submitting = false;
             }
         });
     }
@@ -94,17 +109,30 @@ export class OrderTerminals {
         this.order.updateTerminal(event.detail.modelName, event.detail.quantity);
         this.totalQuantity = this.order.totalQuantity;
     }
+    renderLoading() {
+        return (h("div", null, this.loading.business && h(OrderTerminalsLoading, null), this.loading.terminals && (h("div", { class: "mt-5" }, h(TerminalSelectorLoading, null), h(TerminalSelectorLoading, null), h(TerminalSelectorLoading, null)))));
+    }
+    renderError() {
+        if (!this.loading.business && this.error) {
+            return ErrorState(this.error.message);
+        }
+    }
+    renderBusinessDetails() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!this.loading.business && this.business) {
+            return (h("div", { class: "gap-5 pt-5 mb-5" }, h("div", { class: "row" }, h("div", { class: "col-12" }, h("h2", { part: heading4 }, this.business.legal_name))), h("div", { class: "row" }, h("h5", { part: heading5 }, "Representative:"), h("div", null, h("div", null, (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.representative) === null || _b === void 0 ? void 0 : _b.name), h("div", null, (_d = (_c = this.business) === null || _c === void 0 ? void 0 : _c.representative) === null || _d === void 0 ? void 0 : _d.title), h("div", null, (_f = (_e = this.business) === null || _e === void 0 ? void 0 : _e.representative) === null || _f === void 0 ? void 0 : _f.email), h("div", null, (_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.representative) === null || _h === void 0 ? void 0 : _h.phone)))));
+        }
+    }
+    renderTerminals() {
+        if (!this.loading.terminals && this.terminalModels) {
+            return (h("div", { class: "d-flex flex-column gap-2 mt-5" }, this.terminalModels.map((terminal) => (h("terminal-quantity-selector", { modelName: terminal.model_name, description: terminal.description, imageUrl: terminal.image_url, helpUrl: terminal.help_url, limit: this.orderLimit - this.order.totalQuantity, onSelectedQuantityChange: this.onSelectedQuantityChange.bind(this) })))));
+        }
+    }
+    renderOrderSection() {
+        return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : 'Submit Order'))));
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        return (h(StyledHost, { key: 'd0839c5f8e62091959cfac6c19fd8e6010ed17fa' }, this.businessIsLoading && h(OrderTerminalsLoading, { key: '4f2e27a144af74dc7a5b24afd04319169af85975' }), !this.businessIsLoading && this.errorMessage && ErrorState(this.errorMessage), !this.businessIsLoading && !this.errorMessage && this.business && (h("div", { key: '275c0bdc797dd7deb0b9a6e0bcb4b8bb1bb5a0c7', class: "gap-5 pt-5", part: text }, h("div", { key: '34cff142a272edd3ee7ac19da4e897dcbd29053a', class: "row" }, h("div", { key: '5ced2a28b10f3c3a6df1967df4ff3963fa210aeb', class: "col-12" }, h("h2", { key: 'cddb025d86d3b20e0fdbe44f38a01f4c9f8b0cc9', part: heading4 }, "Business Information:"), h("p", { key: '1729e714fbde0db3bfa2335b984191c88a821d48' }, "Business Name: ", this.business.legal_name))), h("div", { key: '07e0124bf74aa1e6019f3831e1101612ea22a974', class: "row" }, h("div", { key: '984fa3b23a5f963c0132db5629a84a0f33b5876f', class: "col-6" }, h("h2", { key: '620518c99e7c24323908964069a845bdc6bc7977', part: heading4 }, "Representative:"), h("ul", { key: '2a647948f4dd177f727caeb564874025e685154d', class: "list-group", part: listGroup }, h("li", { key: 'eef9b978a739e423e500f2c684adbd29b615d672', class: "list-group-item", part: listGroupItem }, "Name: ", (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.representative) === null || _b === void 0 ? void 0 :
-            _b.name), h("li", { key: 'f668a95618f4f9f15a3f393e0f832edf019495d4', class: "list-group-item", part: listGroupItem }, "Title: ", (_d = (_c = this.business) === null || _c === void 0 ? void 0 : _c.representative) === null || _d === void 0 ? void 0 :
-            _d.title), h("li", { key: '7b0f4f9b59ce658b2589d794759a8eb2d286618d', class: "list-group-item", part: listGroupItem }, "Email: ", (_f = (_e = this.business) === null || _e === void 0 ? void 0 : _e.representative) === null || _f === void 0 ? void 0 :
-            _f.email), h("li", { key: '6868db3079895895817b46f577a4aec763370c8a', class: "list-group-item", part: listGroupItem }, "Phone: ", (_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.representative) === null || _h === void 0 ? void 0 :
-            _h.phone))), h("div", { key: '58e3a903859cfcb48ee9c94eae603e6013b49ddc', class: "col-6" }, h("h2", { key: '5575e0a3882f6118784f0a2ae5ba3b16ca2cf3d0', part: heading4 }, "Shipping Address:"), h("ul", { key: 'a786f951ba416a8a87b2cbd041208a00316a654c', class: "list-group", part: listGroup }, h("li", { key: 'f195e9fe86e532e5082fa6cec74d498fd3721b9f', class: "list-group-item", part: listGroupItem }, "Street: ", (_j = this.business.legal_address) === null || _j === void 0 ? void 0 :
-            _j.line1), h("li", { key: 'cc3effbf28ed5529ab453c9a3df593faed8453b0', class: "list-group-item", part: listGroupItem }, (_k = this.business.legal_address) === null || _k === void 0 ? void 0 : _k.line2), h("li", { key: '024d702c7483ff81ad3ac877b5ae708ca18f0441', class: "list-group-item", part: listGroupItem }, "Postal Code: ", (_l = this.business.legal_address) === null || _l === void 0 ? void 0 :
-            _l.postal_code), h("li", { key: 'b49173b42d91e1bad378912fb9ecf8cd74c38110', class: "list-group-item", part: listGroupItem }, "City: ", (_m = this.business.legal_address) === null || _m === void 0 ? void 0 :
-            _m.city), h("li", { key: '87656e83f01433a2f8116996d42e482a906fbc43', class: "list-group-item", part: listGroupItem }, "State: ", (_o = this.business.legal_address) === null || _o === void 0 ? void 0 :
-            _o.state)))))), this.terminalsIsLoading && (h("div", { key: 'f136b3b5ea1d28b8d4f2dcf18445c21afc8ff94b', class: "mt-5" }, h(TerminalSelectorLoading, { key: 'eaf847a6fa517aae9af8abd6138ea6b7084e26ab' }), h(TerminalSelectorLoading, { key: '9bc4ca1106c9c96b30d8318e11bca7d5b976dde2' }), h(TerminalSelectorLoading, { key: 'eb8885c81374329c42194e7a32c9031eeccf68ba' }))), !this.terminalsIsLoading && this.terminalModels && this.terminalModels.map((terminal) => (h("terminal-quantity-selector", { modelName: terminal.model_name, description: terminal.description, imageUrl: terminal.image_url, helpUrl: terminal.help_url, limit: this.orderLimit - this.order.totalQuantity, onSelectedQuantityChange: this.onSelectedQuantityChange.bind(this) })))));
+        return (h(StyledHost, { key: '42f9aec08c7bdb7ed3cfb6e206b032ceb8148827' }, h("div", { key: '54ebadbfc98a501e59880c5e7f96a288cb559a34', part: text }, this.renderLoading(), this.renderError(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }
@@ -160,14 +188,32 @@ export class OrderTerminals {
                 },
                 "attribute": "account-id",
                 "reflect": false
+            },
+            "shipping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "shipping",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "errorMessage": {},
-            "businessIsLoading": {},
-            "terminalsIsLoading": {},
+            "loading": {},
+            "submitting": {},
+            "error": {},
             "business": {},
             "terminalModels": {},
             "orderLimit": {},
@@ -197,6 +243,21 @@ export class OrderTerminals {
                         }
                     }
                 }
+            }, {
+                "method": "submitted",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
 }

package/dist/collection/components/{terminal-quantity-selector → order-terminals/terminal-quantity-selector}/terminal-quantity-selector-loading.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { Skeleton } from "../../ui-components";
+import { Skeleton } from "../../../ui-components";
 export const TerminalSelectorLoading = () => {
     return (h("div", { class: "terminal-selector-skeleton mt-4 rounded shadow-sm" }, h("div", { class: "d-flex align-items-center gap-3" }, h(Skeleton, { width: "125px", height: "125px", styles: { borderRadius: '8px' } }), h("div", { class: "flex-grow-1" }, h("div", { class: "d-flex row flex-row" }, h("div", { class: "col-6 flex-column" }, h(Skeleton, null), h(Skeleton, { width: "60%" })), h("div", { class: "d-flex justify-content-end align-items-center gap-2 col-6" }, h(Skeleton, { width: "32px", height: "32px", styles: { borderRadius: '50%' } }), h(Skeleton, { width: "80px", height: "32px" }), h(Skeleton, { width: "32px", height: "32px", styles: { borderRadius: '50%' } }))), h("div", { class: "mt-4" }, h("div", { class: "d-flex flex-column gap-2" }, h(Skeleton, null), h(Skeleton, null)))))));
 };

package/dist/collection/components/{terminal-quantity-selector → order-terminals/terminal-quantity-selector}/terminal-quantity-selector.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { buttonLink, image, text } from "../../styles/parts";
+import { buttonLink, image, text } from "../../../styles/parts";
 export class TerminalQuantitySelector {
     constructor() {
         this.removeUnit = () => {
@@ -22,7 +22,7 @@ export class TerminalQuantitySelector {
         this.selectedQuantity = 0;
     }
     render() {
-        return (h("div", { key: 'a357a6bd3454287325a10d381d4587c39552e2a6', class: "rounded shadow-sm", part: text }, h("div", { key: '9e34e99cf6f5cefd4ef28c0fb98ad163d331c5d8', class: "d-flex gap-3" }, h("div", { key: '2dad93d7ad2cdecfd0848862bfc6a30bf0900ae6', class: "d-flex align-items-center" }, h("img", { key: '91929adc5f870eb024226a90d699ae68705f80ec', src: this.imageUrl, alt: this.modelName, height: 125, width: 125, part: image })), h("div", { key: '2fdd8c22699c09830f20f39a86a1e306702dc435', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'f25c1fbe3b6bc4cb2f262e7acce3232e3a726d7d', class: "row" }, h("div", { key: 'b18358391814b283ee5f9f4984301a3c44340986', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '2c2dc0b58140144b63be06ad273b9567ca107d9a', helpText: this.description })), h("div", { key: '7b20f58d55f9413d04185df7ecc04ebe37a3854e', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '27d472613a8146985bfb2f7f9149ac97d71039a5', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '45136a5b9dcb7aeeb58407f51fbb76c0f924ff93', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'e07c48829ebe9106d4a26e9a17728ecef01574b6', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '5bbf669ab479523290b2d8a9f5b6ec2000ff0f96', class: "rounded shadow-sm card p-2", part: text }, h("div", { key: '47ead96654c97aeae6b24058a4f7759918d3d0ad', class: "d-flex gap-3" }, h("div", { key: '3763eda68e7849c87f0e67b905e09267c10481c8', class: "d-flex align-items-center" }, h("img", { key: 'ef0a61d5c1d27c600fd93813b594ec2ec2fadec3', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '5a632f69e2045fbfcd35932af3c5fd027dcca66f', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'be00d142f07945a15e882d2da4c505ffbf67fe88', class: "row" }, h("div", { key: '1c434628ae872d22efa7d2adb611b04868c85eb1', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '21f571a1b0e5ba7d528727f6476e134b9657e124', helpText: this.description })), h("div", { key: 'f4077bfa6beb4f0070bdbf4bd28021f88bcaf5b1', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '7dc6853fb7641b99a9a9ee82dcb3db8fce1d6c01', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'faab14e72773f12f69ea69e855bafb27ef3328b8', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '390e6b4b049fa64e2b7354a3676621844291feb0', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {
@@ -36,7 +36,7 @@ export class TerminalQuantitySelector {
                     "references": {
                         "TerminalModelName": {
                             "location": "import",
-                            "path": "../../api",
+                            "path": "../../../api",
                             "id": "src/api/index.ts::TerminalModelName"
                         }
                     }
@@ -143,7 +143,7 @@ export class TerminalQuantitySelector {
                     "references": {
                         "TerminalModelName": {
                             "location": "import",
-                            "path": "../../api",
+                            "path": "../../../api",
                             "id": "src/api/index.ts::TerminalModelName"
                         }
                     }

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

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

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

@@ -88,7 +88,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '43aa1d53dc7c63eda036624d897d92670ff4dec7' }, h("div", { key: '84ac82efec3738e1a07bcf5fbfdf62426bacaad0', class: "table-wrapper" }, h("table", { key: '65e2ab73a63fa1d89b1b7fb0cd9809d951de657a', class: "table table-hover", part: table }, h("thead", { key: '81ff867eb4b86905049e57c9c9ee331ad9a43f22', class: "table-head sticky-top" }, h("tr", { key: 'edecfccffc49b21f4d9d01396ab4d22dda6f853b', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1df70e89ad33f83dbf18c6c5135bcda2753413a8', class: "table-body" }, h(TableLoadingState, { key: '23cfc404da1ccfada68146b83343e9ee348bac05', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '9929a89448678aa010ecfb43377c38f53b1896d2', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '1734903104bb6c6e9b382661bc353731c5cf92aa', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '08277c1742a8ff36079a2fd4d4c3a31e628617dc', class: "sticky-bottom" }, h("tr", { key: '6012aa5a86f140007504d056f53eba3a21aacc40', class: "table-light align-middle" }, h("td", { key: 'e67d2f48a9d1002086a18ebd4ca00a5b22903c06', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'afcfbab93aa8bb33d6aac50b11c803ebb3284bf1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '91c30f03d9b807ff84224ae25a0bcc84b5c17d20' }, h("div", { key: '447c694f9dcfee6363bafd369f53152ef1797c60', class: "table-wrapper" }, h("table", { key: 'fe3a2911b4d7aa109319d6dabc77eb338b910df9', class: "table table-hover", part: table }, h("thead", { key: 'a3ec810da46e43f786def86991f74e1c0f3c269b', class: "table-head sticky-top" }, h("tr", { key: '94b80f23224624d2f4be81cffa5365d9a725bf33', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'd2c24a19bebcd4872dc36c4f8c6a47678a912d6d', class: "table-body" }, h(TableLoadingState, { key: 'dfcc51f6307996ea5383c4da3ddde61c973d946b', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a81643fd528bff0ad8a57ea17aed718dbfcff6c5', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '3c50d2d7ee8bd5e8c03db7c1d01db8fbb6de4b9b', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '601bb3cd6f8b54fa262d572f715a6208df515f47', class: "sticky-bottom" }, h("tr", { key: '3fbcc03fc841c196cc52b2572387d243d74b2f44', class: "table-light align-middle" }, h("td", { key: 'a1d593b29235432bc668564d784b594dea8ae13c', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '1a427ec2e181baad95ffd14a6c77485f86786f6d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

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

@@ -48,8 +48,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'c00c7c279eeaacb8acc1ea3154c29b2cddd99faa' }, h("table-filters-menu", { key: 'c47ba2b6da0f9463a22e50f1a8ffd26e886c1a99', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'e93077f53d6d22fc286701c28352872175b8db3b', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a101154b3b747eb20667e64dac36e00d7f35f56c', class: "p-2" }, h("form-control-text", { key: '3042199c9a79162c5c5bc6053c46bc76b9f553ee', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '8877a68b1dfc50116f59e503db6d8a3afc53616d', class: "p-2" }, h("form-control-text", { key: '40747d56f2907151ee86468ecb5b72457fa4c3f6', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'ddb445d4da2e8f625c091c41ac080be8ae0a7b8d', class: "p-2" }, h("form-control-select", { key: '9cfe853ab39f60ed7c9130f49059b731ce308af9', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '4a22a12131ae097c774d6f3af3a93de7c984ff76', class: "p-2" }, h("form-control-date", { key: '0ab671ac93fe922a72f85de5bd0b00781176a61f', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '11d71b25672f27f3457386f960ac85f644e162de', class: "p-2" }, h("form-control-date", { key: 'd03ee67df04aa591c655944465fec021684f2b3a', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'e86e4d5f0a36516103a04539fd9ba2d1b698a06c' }, h("table-filters-menu", { key: 'bf4986bea9280046e8c5719dfdba6390d0cc7419', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'c9e898c5e4944f97ba66a8b72d6f940fce47f3f3', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '02eb01fee1165a1cd7174aa066147812d7a9cb44', class: "p-2" }, h("form-control-text", { key: 'cbeeef72894b2016d101b933412b797827513dd2', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '5daedbb20682ad6b295049a865c3377e2ef79d8a', class: "p-2" }, h("form-control-text", { key: '26cd105c075114cfd062fccde5500f2eeb55888b', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '92349a4ebb343af3a8d54601fea4c177c2ff14b2', class: "p-2" }, h("form-control-select", { key: '0e5f7cf57a22d3eeb6e4aebdbac2fe1bb13288eb', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '5d5cc079285045a858bfbcf9646a54b8f4c70b8b', class: "p-2" }, h("form-control-date", { key: 'b8fb06fa8506503bcf89c50523dd8e036852557c', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '3d6a1de1b08e1a326e107e60c78580848ffdda19', class: "p-2" }, h("form-control-date", { key: '6f7bf72ac396429a3d8318ee17d5459147a4f60e', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }

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

@@ -49,7 +49,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '8df5e9111900d12bb5e4eea2ad44c59b7864cf58' }, h("payments-list-core", { key: 'ad6c2795436b8fc38f5fb7b031d3b41251a6281d', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'ade68405b7b039032dc8d4a271bdafd6b5b3dfe8' }, h("payments-list-core", { key: '30844738130c05a96bd93d670bad14d544368fb2', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -142,7 +142,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'b7befcaf0a42986dc821d97e371fb93920b16358' }, h("div", { key: 'c405055d05c2f1b5e622ab28fc9744962f1907a1', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'db36400212d74c17e0aad133717475ce3b142308', class: "table table-hover", part: table }, h("thead", { key: 'a3e208126c4d2c0ab2b6d9ef27f8c1410e029907', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '37f25650e0c03cf8985ec68211eefc0980dd5a92', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '7879e0b39a52ef735ff71960498e1405ff8f98b0', class: "table-body" }, h(TableLoadingState, { key: '91fdd3ed14d5c63ac8c536a5d8da05bb491d49a1', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '577748b2fa32b265a6a1afbad3460c4628d21ba6', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '351848f6ee13c7be8735757ce3dcbcce18bb4fff', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '889ef01055c10f969d4d51f6d114bd3654a06ce3', class: "sticky-bottom" }, h("tr", { key: '6c49a3b386a64023d0701445e7589cced7f4f4df', class: "table-light align-middle" }, h("td", { key: '7782a9152e0d8037afb6528897a9358da204bfb7', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'eac386f11674a29452831bdbe183bfefe4347389', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'ed85d9ce4cc88007b8c623ba57cb8dfbd4de7874' }, h("div", { key: '5760742d19653abb6ce3e45f4f773cd1bd5e612f', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'f09a0ea7fff83b23e8e82fda18c73b25e0a46b07', class: "table table-hover", part: table }, h("thead", { key: 'b056f2ef2b6a229cd436ed0e4789f9d19849e956', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '16e6651c934d1d4120ceaeb4732e807666f0404d', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '4b552d171131958f696077a66c4256e45ccaf7b2', class: "table-body" }, h(TableLoadingState, { key: 'aded291b5961c14d828ecff475120e48d3913293', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a3044be9a44798a4f8800978fd0734de31de6809', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '98c909ea58a0dd7f0cbbd8ac9842380b91b92386', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '0c58d215c797798f87affb37d1f7622de3ca7407', class: "sticky-bottom" }, h("tr", { key: '9a3b39c8836bb817428bd307110fee62db8d7589', class: "table-light align-middle" }, h("td", { key: 'a3eef122632c9459d5fa31d4542b6b085645b738', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '8d77a7e40f9e7c6770812ba8b45a6e0f5f57193e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -28,8 +28,8 @@ export class PayoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '42c48bbbfa426540d33c49d5ef927d2da316fda5' }, h("table-filters-menu", { key: '7741ef6667ed7dc6ebbc312f145590939ce1b071', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '0f983dc3e6a735ad12aea940d7663bab98cf623d', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '27faddc94394d5e52de9d1a65a69ecda2f840360', class: "p-2" }, h("form-control-date", { key: '58cd7720a5dbcc31b32151de1402b2c4b09b94de', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'a2a8d153acc9fa8371c8effb4cfd0146e31a3018', class: "p-2" }, h("form-control-date", { key: '9fc58f04079445952586d0913fad92305fa537a8', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: 'fca8f3d0daf92026b7d3cccdd096c8650eb31d28' }, h("table-filters-menu", { key: 'b166ff52682804bd241866ffbe53ada0cf6133e8', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: 'f72774348aac13463934af8c8bfb3aa9b29a3942', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '87ee14df90cd83394e573f1f4e75d315cd48b2d3', class: "p-2" }, h("form-control-date", { key: 'f14e2dd16a24d8f6ac41ed110bdf2e5f0e7b0389', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'fe9b41fcc98571f9f5f477a0006a2a00a5bdba1c', class: "p-2" }, h("form-control-date", { key: '9ab09d81f389f410ea7d1d533a0f25995d261aef', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: createdBeforePayoutsListFilterParam }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }

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

@@ -70,7 +70,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '1dc2cb28607d7afaaf9d463633a3c127e79acdfb', exportedparts: tableExportedParts }, h("payouts-list-core", { key: 'c404ee62ba0a0e6ed800073d0740182e831b3610', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '7456971cf903af6fd77385fd01dac69760b9df11', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '6bf911cb5a793f49fb19903013c48e6df93f9866', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,7 +74,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'b5540793d02eca530f994d28487dbb17d4a7bde9' }, h("h1", { key: '4fdee343ce80c42f4592b8399d2608cf21388ef3' }, "Refund"), this.refundInfoText && (h("div", { key: '592e0e5bf3f34d2deacf6bde6d55305afad9ed93', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '0d1f91e3e31d9205bdc87988a3d153c82c288316', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '5509b76cdd8fc744b243342c70f9f17a53998f58', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '54c976a7e5f2eabef889051900065fdc689929dc', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '8c8b2a532b0eb147b6618e4d9f5a6eff459a876f', class: "form-group" }, h("form-control-monetary", { key: 'b5e5101c9c3a911d5188b7fcf1bc8b6a6a3ea79f', 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: 'df2344c5721515f540a880e0fd69c44dc9782c7f', class: "form-group" }, h("form-control-text", { key: 'fc736f897af16d21bae503593b7dea26de8775c8', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: 'db7b4908952001857d7a56d2bce6804fa4c77176', class: "form-group d-flex flex-row-reverse" }, h("button", { key: 'f4a186765f14c59e4c096bf48dba5f371f1a65fb', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: '7becd3fcc3a0beefef5efdb860616aa60f7e61ad' }, h("h1", { key: '7125ac0e8452db4013d9065054aca8d65ead0138' }, "Refund"), this.refundInfoText && (h("div", { key: 'b60dbcac95e75469bab9e575efe5eba40d629693', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '231e5bcb4fdd82ea4e9bb0597bfe194759eb8e22', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '21faa4040e99ee142e0f06246fc8317dcc5dfa28', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '4a8671c7f833279c14e29ae0f4054586fa7ecbba', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'd4296520cb377a6b61547615a2b95a3088ace83a', class: "form-group" }, h("form-control-monetary", { key: 'dbe00249e022722aea24f9967408625b7460f0f7', 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: '765d36337fc31bd6ade5b9a94397b83e7f46e2a8', class: "form-group" }, h("form-control-text", { key: '3f3bc7e95568944d876fcf95e98ba9d871479096', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '4576ce0e5d04f063fd53045845fa5a4cf5bc6383', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '6165726b003006432d82ce5792a961ea2f42d654', 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/terminal-orders-list/terminal-order-status.js

@@ -11,7 +11,12 @@ export const MapTerminalOrderStatusToBadge = (status) => {
             variant: BadgeVariant.SUCCESS,
             title: 'This order has been completed',
             text: 'Completed',
-        }
+        },
+        created: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'This order is created',
+            text: 'Created',
+        },
     };
     const badgeProps = statusToBadgeProps[status];
     return h(Badge, Object.assign({}, badgeProps));