@justifi/webcomponents 4.20.1 → 4.22.0

package/dist/collection/components/dispute-management/counter-dispute/counter-dispute.js

@@ -0,0 +1,90 @@
+import { h } from "@stencil/core";
+import { DisputeManagementClickEvents } from "../dispute";
+export class CounterDispute {
+    constructor() {
+        this.componentStepMapping = [
+            () => h("justifi-dispute-reason", { ref: (el) => this.refs['disputeReason'] = el }),
+            () => h("justifi-product-or-service", { ref: (el) => this.refs['productOrService'] = el }),
+            () => h("justifi-customer-details", { ref: (el) => this.refs['customerDetails'] = el }),
+            () => h("justifi-cancellation-policy", { ref: (el) => this.refs['cancellationPolicy'] = el }),
+            () => h("justifi-refund-policy", { ref: (el) => this.refs['refundPolicy'] = el }),
+            () => h("justifi-duplicate-charge", { ref: (el) => this.refs['duplicateCharge'] = el }),
+            () => h("justifi-electronic-evidence", { ref: (el) => this.refs['electronicEvidence'] = el }),
+            () => h("justifi-shipping-details", { ref: (el) => this.refs['shippingDetails'] = el }),
+            () => h("justifi-additional-statement", { ref: (el) => this.refs['additionalStatement'] = el }),
+        ];
+        this.currentStep = 0;
+        this.refs = [];
+    }
+    get currentStepComponent() {
+        return this.componentStepMapping[this.currentStep]();
+    }
+    get isLastStep() {
+        return this.currentStep === this.componentStepMapping.length - 1;
+    }
+    get isFirstStep() {
+        return this.currentStep === 0;
+    }
+    onNext() {
+        if (this.isLastStep) {
+            this.submit.emit();
+        }
+        else {
+            this.currentStep++;
+            this.clickEvent.emit({ name: DisputeManagementClickEvents.nextStep });
+        }
+    }
+    onBack() {
+        if (this.isFirstStep) {
+            this.clickEvent.emit({ name: DisputeManagementClickEvents.cancelDispute });
+        }
+        else {
+            this.currentStep--;
+            this.clickEvent.emit({ name: DisputeManagementClickEvents.previousStep });
+        }
+    }
+    render() {
+        return (h("div", { key: 'cd8ced72339631d8f2f9439ee26f1187b7b8ab21', class: "row gy-3" }, h("div", { key: '6ae94b1ce9d12b12044c4baa3c3eb9966b4b176e', class: "col-12" }, h("h1", { key: '6893f2dacb6e8932e67d67095076cd2d1bc12b38', class: "h4" }, "Counter dispute")), h("div", { key: '6d34423a06c634824a8b2f2ad5538e4c0b6fbf5c', class: "col-12" }, this.currentStepComponent), h("div", { key: 'fdfc725f0dacae3abb56dfe7300399f57300ffd5', class: "col-12" }, h("div", { key: 'b590b19dda4fbe8d8245dedbb66c421866b2b8f3', class: "d-flex gap-2 mt-4 justify-content-end" }, h("button", { key: '4d91e8db6f5c2ef26ac938c57f7dca33cf9a33ee', class: "btn btn-secondary", onClick: () => this.onBack() }, this.isFirstStep ? 'Cancel' : 'Back'), h("button", { key: 'f56fa57dd1aef4bd5b537d9e67c3aaaa784ccba2', class: "btn btn-primary", onClick: () => this.onNext() }, this.isLastStep ? 'Submit Counter Dispute' : 'Next')))));
+    }
+    static get is() { return "justifi-counter-dispute"; }
+    static get states() {
+        return {
+            "currentStep": {},
+            "refs": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submit",
+                "name": "submit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "clickEvent",
+                "name": "clickEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+;

package/dist/collection/components/dispute-management/counter-dispute/customer-details.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class CustomerDetails {
+    render() {
+        return (h("div", { key: '4511521cc0b5d152847fe47515a932bc25632b69' }, h("div", { key: 'ccc20447c74727d926159c4bbd78d7aa81f406fb', class: "row gy-3" }, h("div", { key: '09d693c977d9f55978df56fd94f37e65fcf42548', class: "col-12" }, h("h2", { key: 'ef47704c5d35b7b18e49603e050a1128728219b4', class: "h5" }, "Customer Details")), h("div", { key: '0f6ee829c192d15b22208d207ab34d7c433b1c8d', class: "col-12" }, h("form-control-text", { key: '8f64ca680c0dcd4b41d93523a62e0b3bbf1daf3e', label: "Full Name", name: "customer_name" })), h("div", { key: '8789d52f77c2cb673260fa12382c31725e2a7ffa', class: "col-12" }, h("form-control-text", { key: 'af48dedd7c9ce318a7d1009c1227cceda2d799b0', label: "Email", name: "customer_email_address" })), h("div", { key: '17fdeea69f9eab82e55d63cd55af079532696d57', class: "col-12" }, h("form-control-textarea", { key: '05d930b272e0162100412bc81a05df8cd2817e21', label: "Billing Address", name: "customer_billing_address" })), h("div", { key: 'abd6e1f661bfb2b5ac54460d97283b7a1092ac79', class: "col-12" }, h("form-control-file", { key: '4ee87cf74482c31a297bcd108ddd0ad69f3d7366', label: "Customer Signature", name: "customer_signature" })), h("div", { key: 'f33ec1c7c4791828d456e27ee1dcbc665220821d', class: "col-12" }, h("form-control-file", { key: 'c2bb6a3c58eb20652566d9cb1c524b4390bbab33', label: "Customer Communication", name: "customer_communication" })))));
+    }
+    static get is() { return "justifi-customer-details"; }
+}
+;

package/dist/collection/components/dispute-management/counter-dispute/dispute-reason.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class DisputeReason {
+    render() {
+        return (h("div", { key: '012cc41aff83527468bbd2aa375c436876bc95ab', class: "row gy-3" }, h("div", { key: 'b52a68e86969e7f581e07b2d30b536a764778a7e', class: "col-12" }, h("h2", { key: '0c03884aef100c47a4b178b2da84a7c0c6ac7609', class: "h5" }, "Why are you countering this dispute?"), h("div", { key: 'f538c9bb9134bc57e69e9edce4087cef376634fa', class: "row gy-3" }, h("div", { key: '9c1f5e09e19d8d4830526bd2cf14c02c7b56d1f9', class: "col-12" }, h("form-control-radio", { key: 'f0498d4524db28040f460632165213b7756263b4', name: "disputeReason", label: "The cardholder withdrew the dispute", value: "reason1" }), h("form-control-radio", { key: 'c62c544f6099c3dccf5b34cb8a0db003496b370d', name: "disputeReason", label: "The cardholder received the product or service", value: "reason2" }), h("form-control-radio", { key: 'c3ea107bddf2a740612100bd67b99010fb2a345e', name: "disputeReason", label: "The cardholder was refunded", value: "reason3" }), h("form-control-radio", { key: 'd31e6a36cb3adc470809bfc92f48a7a13f0f8b03', name: "disputeReason", label: "The product, service, event or booking was cancelled or delayed due to a government order or other circumstances beyond your control", value: "reason4" }), h("form-control-radio", { key: '4dd304a181be479f7a1db6eb8e6882ce801915fb', name: "disputeReason", label: "Other", value: "reason5" }))))));
+    }
+    static get is() { return "justifi-dispute-reason"; }
+}
+;

package/dist/collection/components/dispute-management/counter-dispute/duplicate-charge.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class DuplicateCharge {
+    render() {
+        return (h("div", { key: 'b02f7b5b70969b8bf441266b368e8ddff43dd1e0' }, h("div", { key: 'f6fd012b8b477f4e2130872d0b43b85adad25fdd', class: "row gy-3" }, h("div", { key: '22f93a10a461f4e6e746b019861380c08bee9715', class: "col-12" }, h("h2", { key: 'fdcc6a3b8120bb3efa124e6bb79e96f5b444578a', class: "h5" }, "Duplicate Charge")), h("div", { key: '750890417b504f0477cf3359384c589f835847e5', class: "col-12" }, h("form-control-text", { key: 'e3d5f7886d8c6adea82f05a29ed45b41cd7db60e', label: "Original Payment ID", name: "duplicate_charge_original_payment_id" })), h("div", { key: 'd7c96b14fc113f70b88c24127edac5311323eb0a', class: "col-12" }, h("form-control-textarea", { key: '26fcb96b35087c948cbfd6a469a92ca7cdb86330', label: "Duplicate Charge Explanation", name: "duplicate_charge_explanation" })), h("div", { key: 'eadcc0457689882a1c19d18dd2898059d87547b0', class: "col-12" }, h("form-control-file", { key: 'f7aea8d759f94876bca6213de22cff28f8db8783', label: "Duplicate Charge Documentation", name: "duplicate_charge_documentation" })))));
+    }
+    static get is() { return "justifi-duplicate-charge"; }
+}
+;

package/dist/collection/components/dispute-management/counter-dispute/electronic-evidence.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class ElectronicEvidence {
+    render() {
+        return (h("div", { key: '9db83df31da31c0f2506636c3626bd7edfce8ee4' }, h("div", { key: '5d7ddc3e3a54efe160240d1996f405e4d3038ed6', class: "row gy-3" }, h("div", { key: 'ea60427980d5b149ab8df1490334fda670c1af42', class: "col-12" }, h("h2", { key: 'b50cbc7b5d48d62dc88c4c27c568f67d46ea212f', class: "h5" }, "Electronic Evidence")), h("div", { key: '523b2a97794e2772c74633bbda2926f339ad7797', class: "col-12" }, h("form-control-text", { key: 'f4769f6d1f3e175963fe7e8b547ae005866ba758', label: "Purchase IP Address", name: "customer_purchase_ip_address", helpText: "The IP address used by the customer during the purchase." })), h("div", { key: 'eb86f2c489bfaa93daa12fb126cff980249a16de', class: "col-12" }, h("form-control-textarea", { key: '7d5090db5478ec0ac38a68113a8786eca7e63549', label: "Activity Logs", name: "access_activity_log", helpText: "Any server or activity logs that provide evidence of the customer's access to or download of the purchased digital product. This information should encompass IP addresses, relevant timestamps, and any detailed records of activity." })))));
+    }
+    static get is() { return "justifi-electronic-evidence"; }
+}
+;

package/dist/collection/components/dispute-management/counter-dispute/product-or-service.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export class ProductOrService {
+    constructor() {
+        this.productOrService = undefined;
+    }
+    render() {
+        return (h("div", { key: '1093c8d9b1fe6875c3cd0fc8422f46d6ed5b8aae' }, h("div", { key: '6d6df2f3a1c3567bac929adde53dd91d8aee98a3', class: "row gy-3" }, h("div", { key: '0111ec6b367ab5728afba391fb62c034c68f75f4', class: "col-12" }, h("h2", { key: '850b6360c847ad3da0c16e275acd07a70dcec0c2', class: "h5" }, "Product & Service Details")), h("div", { key: 'b00fe2787f21032de5203660f6d467d2d3bbecdc', class: "col-12" }, h("form-control-text", { key: 'd7ac38a0efc9f36894227f85fbee2e2886e96757', label: "Product Description", name: "product_description" })), h("div", { key: '6cda4e7ac36e124043078b3d47513d5a4ec5cac4', class: "col-12" }, h("form-control-text", { key: '585744cbc9775643779ecb59752d1f883c4cdea0', label: "Service Date", name: "service_date" })), h("div", { key: '07e96df94d2c40fc9e0e2868cf5b8d4a519d1895', class: "col-12" }, h("form-control-file", { key: 'e98020135a597563248a5dac713d87715c11752c', label: "Service Documentation", name: "service_documentation" })))));
+    }
+    static get is() { return "justifi-product-or-service"; }
+    static get states() {
+        return {
+            "productOrService": {}
+        };
+    }
+}
+;

package/dist/collection/components/dispute-management/counter-dispute/refund-policy.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class RefundPolicy {
+    render() {
+        return (h("div", { key: '7f9095e25e7fce0b5277d332f304f99d81693a72' }, h("div", { key: '9c81d685961f496f680c795d25f1d33da8693a98', class: "row gy-3" }, h("div", { key: '983622ce45a875c01b6d4479e84ce5bfe079e0d6', class: "col-12" }, h("h2", { key: '33e426cd1aabf66e97eaf2292c2e79e0f27a82c8', class: "h5" }, "Refund Policy and Receipt")), h("div", { key: '6968a33fef60038777e4b34a528c07361486262e', class: "col-12" }, h("form-control-textarea", { key: 'dcded5a84ef9104045fe228f5a498b42b7c4bc72', label: "Refund Policy Disclosure", name: "refund_policy_disclosure" })), h("div", { key: '5cf7d7017f4a43f3dbf592e2191b8ac5a53f9695', class: "col-12" }, h("form-control-textarea", { key: '81c95385cb04ef82fb23b95bc084c118a153280a', label: "Refund Refund Explanation", name: "refund_refusal_explanation" })), h("div", { key: '8ff60b9d1a1159073314905b56ecf46eb35a321e', class: "col-12" }, h("form-control-file", { key: 'f308750940e7fd12972584281169c265c28834d6', label: "Upload Refund Policy", name: "refund_policy" })), h("div", { key: '802abe379ac422c927022be29effecee97dd1694', class: "col-12" }, h("form-control-file", { key: '2d166d7768de62e5f6efb3cd466b856296ce4929', label: "Upload Receipt", name: "receipt" })))));
+    }
+    static get is() { return "justifi-refund-policy"; }
+}
+;

package/dist/collection/components/dispute-management/counter-dispute/shipping-details.js

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+export class ShippingDetails {
+    // "shipping_address": "...",
+    // "shipping_carrier": "...",
+    // "shipping_date": "...",
+    // "shipping_tracking_number": "...",
+    render() {
+        return (h("div", { key: 'b751c099794fd1e199fc33c5d09899dfd112983b' }, h("div", { key: '199584570dafdf9d7592b58c786c40eab29a9e2d', class: "row gy-3" }, h("div", { key: 'aa22d4ccaa52177f51584faf433208d55de363af', class: "col-12" }, h("h2", { key: '43b90ea2ccca89595bc9edd44e6b6c7231f6a417', class: "h5" }, "Shipping Details")), h("div", { key: '337e087f6a073ce3e5add78813e127578599009f', class: "col-12" }, h("form-control-text", { key: '6b451a1c2e730adb7672a7d31e2a329ddddb9801', label: "Shipping Carrier Name", name: "shipping_carrier" })), h("div", { key: 'ff49c1efb33231b0c81a1b03062031eabcc8b2b5', class: "col-12" }, h("form-control-text", { key: '54b17aba899f77e7c988a367fa3405fbed62b7ed', label: "Tracking Number", name: "shipping_tracking_number" })), h("div", { key: 'cc9a4441663f35a49d119ffdd71562fec327d6da', class: "col-12" }, h("form-control-date", { key: '3e8a41b5a6247a11e11311dcb93e5e567a2bf647', label: "Date Shipped", name: "shipping_date" })), h("div", { key: '0d76ef386013035480f2c1041ddaf4f0a7e88522', class: "col-12" }, h("form-control-textarea", { key: '2c587c5c24127aac5c60c20cf6717060a5fbb35f', label: "Shipping Address", name: "shipping_address" })), h("div", { key: '783465b60c9529abfae87c0c92915c3a79e4a3e8', class: "col-12" }, h("form-control-file", { key: 'ab665466efa871edacc58e60ba572db7f570a83f', label: "Shipping Documentation", name: "shipping_documentation" })))));
+    }
+    static get is() { return "justifi-shipping-details"; }
+}
+;

package/dist/collection/components/dispute-management/dispute-management-core.js

@@ -0,0 +1,53 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../ui-components";
+import { DisputeManagementClickEvents } from "./dispute";
+export class DisputeManagementCore {
+    constructor() {
+        this.showCounterDispute = false;
+    }
+    counterDisputeHandler(event) {
+        if (event.detail.name === DisputeManagementClickEvents.counterDispute) {
+            this.showCounterDispute = true;
+        }
+        if (event.detail.name === DisputeManagementClickEvents.cancelDispute) {
+            this.showCounterDispute = false;
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: 'cb4d87f38d2e577efaf8dfc088f272e05a158dcb' }, this.showCounterDispute ? h("justifi-counter-dispute", null) : h("justifi-dispute-notification", null)));
+    }
+    static get is() { return "justifi-dispute-management-core"; }
+    static get states() {
+        return {
+            "showCounterDispute": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submit",
+                "name": "submit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "clickEvent",
+                "method": "counterDisputeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+;

package/dist/collection/components/dispute-management/dispute-management.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class DisputeManagement {
+    render() {
+        return (h("justifi-dispute-management-core", { key: 'ed28c52d4621058967a53f79c1f00db1d453f5a9' }));
+    }
+    static get is() { return "justifi-dispute-management"; }
+    static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/dispute-management/dispute-notification.js

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+export class DisputeNotification {
+    acceptDispute() {
+        // submit the dispute as forfeited, then emit submit event
+        this.submit.emit();
+    }
+    initiateCounterDispute() {
+        this.clickEvent.emit({ name: 'counterDispute' });
+    }
+    render() {
+        return (h("div", { key: 'e4d4de3446f6cd1b21fceb5b51bbbb912e2becbd' }, h("h1", { key: '4f6c5d36c498c4828f9234c02910f68f1563f683', class: "h4" }, "This payment was disputed"), h("p", { key: 'dd69d64f749dbd7ef3dee0c02121f7a4d5c43935' }, "The cardholder for this payment claims that the product was not received."), h("p", { key: '012671e73722cf571e2ffe9ec7268fc5a68211b8' }, "You can either counter the dispute by presenting proof of the product's delivery to or use by the cardholder, or you can choose to accept the dispute right away, refund the cardholder, and resolve the matter."), h("h2", { key: 'a305a609445a42ed31486089ee50fb6e826333e3', class: "h5" }, "Dispute details"), h("div", { key: 'c383e914b7f80d4899c9f9a161ede6ab19b0bb20', class: "d-table gap-2" }, h("div", { key: '3a17b05d7608bd3e85462e225829e540073a58c3', class: "d-table-row gap-2" }, h("span", { key: '26410fd189aede2ce647d80c17c5b1de81ae1e33', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'cf978f0256bca203c8ffba95b7d207f10354b154', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, "$50.00")), h("div", { key: '2a84d71d53c8cd8fd55bd788dd8cf5f4390876fa', class: "d-table-row gap-2" }, h("span", { key: '196bc7ca8a74bcb63f72f979b1f219adedb1f19e', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '46b8a0867cae071a1d929beb684930f59b7b6bfa', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, "Product not received")), h("div", { key: '491e7f02249c12159a8488943659ba6bf2e27d71', class: "d-table-row gap-2" }, h("span", { key: '04af38ed973f99c2b1e7a82c64fc27ff87a01a15', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '8929ec9b7bb528d9b47851df29bd75e816018e70', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, "dis_1234567890"))), h("div", { key: '2693379df3be7315ee7acf751af6c2eaeca56dcc', class: "d-flex gap-2 mt-4 justify-content-end" }, h("button", { key: '738f868f185f9bbf98d41306e8b260959b2295bd', class: "btn btn-secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h("button", { key: '83712ad248a0f8784b8b176c5620b531b21df50e', class: "btn btn-primary", onClick: () => this.initiateCounterDispute() }, "Counter dispute"))));
+    }
+    static get is() { return "justifi-dispute-notification"; }
+    static get events() {
+        return [{
+                "method": "submit",
+                "name": "submit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "clickEvent",
+                "name": "clickEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+;

package/dist/collection/components/dispute-management/dispute.js

@@ -0,0 +1,8 @@
+export var DisputeManagementClickEvents;
+(function (DisputeManagementClickEvents) {
+    DisputeManagementClickEvents["nextStep"] = "nextStep";
+    DisputeManagementClickEvents["previousStep"] = "previousStep";
+    DisputeManagementClickEvents["cancelDispute"] = "cancelDispute";
+    DisputeManagementClickEvents["counterDispute"] = "counterDispute";
+    DisputeManagementClickEvents["submit"] = "submit";
+})(DisputeManagementClickEvents || (DisputeManagementClickEvents = {}));

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { Chart, BarController, Colors, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title } from "chart.js";
 import { generateChartOptions } from "./chart-utils";
-import { ErrorState, LoadingState } from "../details/utils";
+import { ErrorState, LoadingState } from "../../ui-components/details/utils";
 Chart.register(Colors, BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title);
 export class GrossPaymentChartCore {
     constructor() {
@@ -68,7 +68,7 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: '463d7e132e647e1da6dc5ad5ea54abf95a60e715' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: '80dfc1ae805ac7e1d34222037de6f492feabf619' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
     static get originalStyleUrls() {

package/dist/collection/components/gross-payment-chart/gross-payment-chart.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { ReportsService } from "../../api/services/reports.service";
 import { makeGetGrossPaymentChartData } from "./get-gross-payment-chart-data";
-import { ErrorState } from "../details/utils";
+import { ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance-core.js

@@ -96,8 +96,8 @@ export class SeasonInterruptionInsuranceCore {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(StyledHost, { key: '7b1384ddbc83b5f92d3a2c4f8e544c8bd06fa716' }, !this.isLoading &&
-            h("div", { key: 'd94a61158ceb79c30d81ee5186195d3454c01323' }, h("h2", { key: '05d5b1499cf7de28823ec98ebd2c220eca7471f1', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'fa26cf97a06a9910d7f4cb04d149bbcd9f30d103', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '287de8ed4ca603b3162b4158d18d7e8a53e3b453' }, h("input", { key: '59adbc8ac892e572bc1aa68f3c626beab76af282', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '469ac2622be0c76564de8102a499d3d3790380b2', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '7a8827c4261d5978ecca31fc42397f233b3e37fc', class: "mb-2" }, h("input", { key: 'e25994c491ca5d74d20ec5f5787ff88ee9575ca0', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '0a5f13213a19e13258c72ccbbe7a2e148daf1750', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '33a190aa52dfefd6accf77a9e00598563a8f5e6c', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: 'f10e4ebd9a896fc792bb3d18d6014100013cb0b7', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        return (h(StyledHost, { key: 'ca90d98930a8edff34e6690caa04421a70fa9238' }, !this.isLoading &&
+            h("div", { key: 'ff7e145e0fe3e4cc1b1b476369dec63228aeafbf' }, h("h2", { key: '206a364e3efdeafc1c17c6d25ec5de1b8ce21c29', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: '0f3ef80b76e2d50b793175dfd9de9910329254ea', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '5fa4ea480c0ebc1870f222a4f58529676451e9d4' }, h("input", { key: '40f5f25d82c9a5ecea558ea0f6763d619f82727e', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'c7e2cd5fa6052765e2155cbc24f6fd9d6b8da723', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '47d716b0cb114e3c0a62776491153ca2ce389ce7', class: "mb-2" }, h("input", { key: 'dd442bb652f98a75d184e99d78d79292189ef867', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'e5b7a36f006ed6a78eb762c1bea131800ab45ae4', htmlFor: "decline" }, "Decline coverage")), h("div", { key: 'dddae2c74c62641ccd2ba7352190d6e4731ef19b', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '67684b8a101061c54b0629ae35000032232e6847', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
     }
     static get is() { return "justifi-season-interruption-insurance-core"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance.js

@@ -53,7 +53,7 @@ export class SeasonInterruptionInsurance {
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '0ef99882f70c9886e8a5b49da5fe89dd4421067a', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '205515d248ac43b9de8e7c8f9fec41b93f6e1237', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../../ui-components/details/utils";
 import { StyledHost } from "../../ui-components";
+import { MapPaymentStatusToBadge } from "../payments-list/payments-status";
 export class PaymentDetailsCore {
     constructor() {
         this.getPaymentDetails = undefined;
@@ -38,14 +39,14 @@ export class PaymentDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'aaaea4076938af5a74197256dba1093265f0e2d6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '12f06fa05915380403e244cbed053d0c04bfa1d4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d496def6abfc728e6f184fb0729ac648fb2deaf', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '78dcff13206646d594bdc80f6297d45dc9932694', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'dfa0de667ebd28efd217b6bdf548b9b1b728b57e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b449b180034f28504007a9c2fb0598607dc00efb', title: "ID", value: this.payment.id })), h("div", { key: '62af84e244e38b24b32f791d13f1b21b49942597', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0ddb0366b4ab737c7b08a37764b8ce2f7ec4a1e9', sectionTitle: "Details" }), h("div", { key: 'cb699194db16cb8608834779f560e882f6f9da7c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b6eb4a8b782668951bba90be3b5d522f3f7c69b', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7a59ab0b12a263c38c40a98acbff6492d370b28b', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'a9eaa5d1959425205c144dc2aa7c7fad77014290', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'd70c3a4bf48c9c69625d5f27f1095f9b0744a71e', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '28f526b1adcd475c2ae88a8bf09ae4aea7935df6', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '700f51d787f20f575e3e11aa72a8da29a9587c2a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ea72ecc9c2f5055d4b0f6b37cd16cb318f9a797c', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9d66af2c0c0baef4e8b7b021daf0b4d6adb267d2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '3f21501c1e08feeee1e7427a42faf1c5d1d9c84d', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'b7767b93e090c0195aca6c99b66b48d61b6134b3', sectionTitle: "Payment Method" }),
-            h("div", { key: 'a363c7a7e69932a8ffeddb5e0d53f7df13119a9a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fb0e1f64fcec23e513590b3048593565685d8400', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'bc181b1b94039e1aad341a8e563ba923976c806b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '88b21dd2368b88232cd0f464c381d4423fe3c774', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '040fd71315ead633f9c89e9a9dad906889759d77', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '35ebc74de2c5c8fafd95fc5b15ff4f2ca85220cc', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '85c684ff2f417380042e5245e3e6546874a75e72' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'a1afa8ca107867f4d48a6069d8df08942e7cb4b2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'c7e93e52c041808c816768cfd56c2e035410bea3', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '2dba396e28b3daa61b722ffe32d98c3065ed2e18', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '9c0417863d9b0ba186c7547d41b02372c9ab3d54', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '7a7e31453894d70671b0f001b30aa74c72380308', title: "ID", value: this.payment.id })), h("div", { key: 'd6b72faca6ce471ce914ff5184e6cc2419a2ef84', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'c794e7f7a4ac3fc3442fea20ba6aaf00ca1b52fd', sectionTitle: "Details" }), h("div", { key: '5f34cd707d0f7ca2ed3c0dbd2abc2fc1c5f9ee4c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f64631d74fb728487477e61d99f93b72ccf03b45', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7e751f1c2e62ea45fbdb910b4bfb10f2c30e923a', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1a536d5e027c98aeabd44cbb83f8f38322c37a95', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a1739f90e3d8cc1724b556168c86e392d1ef84fa', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '0a1f7b910421fe8568c5bbb6a70732f392486370', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6c45ac2b6e0e84fbdd9e9f6fa26764a351c2495f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '6571a1faf8daf4079187ccf37603cdec6e7f7602', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1b343529481cf7143855513e44428cf3188b8326', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd0ff8578503733c6b580131aed9d3f284e7ab3e8', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'c0ec143f86d9c817380efa58cea2a48476df77d8', sectionTitle: "Payment Method" }),
+            h("div", { key: '278b6ef36cf15e9037b4ec94846fc8215b766f61', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcbf3d1747b9e84cb10430ee595806381cac21bd', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '0c4f1701aa28272e93d2f13251da5261f90e83cc', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'f8f90a838143fde661a612c5d880ffc98eb468a2', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '37a455f5451973c3388dd8cf0841320564f9f034', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '156c2b789d28d1ae7b5e4c912c99f29681a2f7ef', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'f10eef0b4e4067fb78dbff16719a6f266f4e6bab', sectionTitle: "Payment Method" }),
-            h("div", { key: '6c1ef713b5dcabba5b516f3cbbd088d098873303', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8880fd0fb2b16ee6f177aba15d6f4485c95af252', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'baa70304d2972f69ce8a5d077a076b16f986745b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'dcb63b9258bea698bf2d165c611dfa05cb320f30', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '806696c15aa5ef242c230d9c9aea642ddfdfd93d', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '83289d8f2cf57a624678260555f00af4ea96a566', sectionTitle: 'Metadata' }), h("div", { key: '02e248b962e0c06f4d83bae75a5759b234fea36b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5d81879c7815102219ed010dab9f573ad6b7985d', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '4f5e2cc8141a336e4e9181cee653fda1bf38ecf7', sectionTitle: "Payment Method" }),
+            h("div", { key: '402ae401e93231e6369f9bb76ac48805d7d28f09', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ef33c8d86b6ae69ae94cce998ef9d120b20e66d1', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'db745f865358ab8f8537cc491d6d7ce021e7db29', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9a15f1c0990145a0ebbbf4ebab04c7b8be3f447b', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'dad1476170af5c5cb51a7fbd9329bbe969c51e3e', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'fbfc61ca6adb02cca215e1dda51eca1de03023ea', sectionTitle: 'Metadata' }), h("div", { key: '7018390fa3a2304a936999a0c7ceb04d3bd7fed5', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '4ec963eedfb62ab1d038d3f50b4c7199e4954623', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { PaymentService } from "../../api/services/payment.service";
 import { makeGetPaymentDetails } from "./get-payment-details";
-import { ErrorState } from "../details/utils";
+import { ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";

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

@@ -108,15 +108,15 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'f7d035a9ed8b16016493aa07a85a6b4d6d83b5f5' }, h("form", { key: 'fb9354b439332ef4ee67e915f27b60b9b744e6e2', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '303fbccf9beb30c1d822f0ac148128dfba9d158f', class: "col-12" }, h("justifi-payment-method-selector", { key: 'f71353d3f90ab50461a57ce3738ea853ca4d1cc3', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: 'd9024a406dcde487ff2bb7d34385da0a1be8aef5', class: "col-12" }, h("justifi-payment-method-form", { key: '010488c96f1b6b5af049b89151cea9ce61f263bb', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        return (h(StyledHost, { key: 'a2391aac29babb363f477ec8254491e5790ee34e' }, h("form", { key: 'd41b1f80b10c9be6def16ba694a8a94a14b09d13', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '26c13e2fa0f1df35c8477b14fbd5a91e65b3d2fa', class: "col-12" }, h("justifi-payment-method-selector", { key: '8c8a4989c3bef7f1b701ab06494e65d1d5f18fff', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '49917b87314717b1cb0cd9be42ae1f88a05bebad', class: "col-12" }, h("justifi-payment-method-form", { key: '786aa47bacfeea8dc2ae0e878633ad33e771892d', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: 'c8b41e9d6bc0d21db4bc1efa12852480ed4a0bbd', class: "col-12" }, h("justifi-billing-form", { key: '2226122296e6b9da8359b90fe563b6c4342c72f3', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: '7bd1068b1eb84e58ad0b13702b4d5e6d1bb548a4', class: "col-12" }, h("justifi-billing-form", { key: '63e53f0e0073f84b3d665d6cc7f7381f0d74e653', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: '5aa12164db0d1ac4570db49b7a1bc527d974a8ab', name: 'insurance' }), h("div", { key: '5b0ad786dcf96a4c83696b1e3d1cd09345313807', class: "col-12" }, h(Button, { key: 'b3a55eaf9403d33a0e0769ca2c6c42b086f4da9a', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
+            } })), h("slot", { key: 'bd274a3501c6ad6225bb928a9e0c3354a075ee5b', name: 'insurance' }), h("div", { key: '5c777cc15acc4e74690e7060130c35398227f60d', class: "col-12" }, h(Button, { key: '6c5b367e177f64d6034eac6fc21468ab34ab9e5e', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
     }
     static get is() { return "justifi-payment-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -13,7 +13,7 @@ export class PaymentMethodSelector {
         this.paymentMethodSelected.emit(event.target.value);
     }
     render() {
-        return (h("div", { key: 'a0cd592094f7f69955469de84addde1d4bc5af4d', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
+        return (h("div", { key: '66ac630ad3bd8379c28743402fd1df3e4386dac5', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
     }
     static get is() { return "justifi-payment-method-selector"; }
     static get originalStyleUrls() {

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

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { tableExportedParts } from "../table/exported-parts";
-import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { onFilterChange } from "../../ui-components/filters/utils";
+import { MapPaymentStatusToBadge } from "./payments-status";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -69,13 +69,13 @@ export class PaymentsListCore {
     }
     get columnData() {
         return [
-            ['Made On', 'The date and time each payment was made'],
+            ['Date', 'The date and time each payment was made'],
             ['Amount', 'The dollar amount of each payment'],
+            ['Status', 'The current status of each payment'],
+            ['Type', 'The type of each payment'],
             ['Description', 'The payment description, if you provided one'],
-            ['Cardholder', 'The name associated with the payment method'],
+            ['Account Holder', 'The name associated with the payment method'],
             ['Payment Method', 'The brand and last 4 digits of the payment method'],
-            ['Status', 'The current status of each payment'],
-            ['Payment ID', 'The unique identifier of each payment'],
         ];
     }
     get rowData() {
@@ -87,15 +87,15 @@ export class PaymentsListCore {
           <div class="fw-bold">${formatTime(payment.created_at)}</div>
         `,
             },
-            formatCurrency(payment.amount),
-            payment.description,
-            payment.payment_method.payersName,
-            payment.payment_method.lastFourDigits,
+            formatCurrency(payment.amount, true, true),
             {
                 type: 'inner',
                 value: MapPaymentStatusToBadge(payment.status),
             },
-            payment.id,
+            payment.paymentType,
+            payment.description,
+            payment.payment_method.payersName,
+            payment.payment_method.lastFourDigits,
         ]);
     }
     get showEmptyState() {
@@ -109,7 +109,7 @@ export class PaymentsListCore {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'aa139e92669ea06532373a64f08a9926f9ddb4d0', exportparts: tableExportedParts }, h("payments-list-filters", { key: 'd5338eb8899dc99a9633cd892400fc4749edb4b6', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'dd452f6a2920ef50fb24324efdf65407f7d964f7', class: "table-wrapper" }, h("table", { key: '64d2d4304549595b80a45ee5684f7ac3cd296245', class: "table table-hover" }, h("thead", { key: '256145c2eea8ac35f1c83663cba68d85287f33fc', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '43a9d75516e80bb5cd04f2575370c863f6413528', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : "" }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'f95b3b11a9fe046a14a78aaa9f08a5522bead677', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'f92ed5822f5f3946463b89ed746ab641cbf3b2b3', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ddd2a229c0bb493480504ddcd855d2957b5acedd', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '0a42c24d04d0cb23804e4a55d185cb9da4b205ab', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+        return (h("div", { key: 'e51632f2cff6529131bf09250374f5609b8bbbd2' }, h("payments-list-filters", { key: '335944968281577a826fe2aa2a3866b282c6528c', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'ebff773b76f1a4b68a00675fa3499b8de71b1fe2', class: "table-wrapper" }, h("table", { key: '88e00cb3e4a98aa456b8bfb8d2d444d407aadb55', class: "table table-hover" }, h("thead", { key: '8c0bda771073274164ab4299bfdee85d70b0ccd8', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1d3774f8ecfa33cd68bd299d5d6f5f9364f557c4', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : "" }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: '9ef8a6b5e19edf824ca91c58ce901a83b12e5d86', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '6f41adae546948d437b09c73611df813160be2d1', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'd359e393f80cdf45d9746a5e4ee979079a11b870', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd2d81ee9b5abcf732972afa56e6e2abc3c7c2e98', 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) => {
                 let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
                 if (nestedHtml) {
@@ -118,7 +118,7 @@ export class PaymentsListCore {
                 else {
                     return h("td", { part: "table-cell" }, dataEntry);
                 }
-            }))))), this.paging && (h("tfoot", { key: '20f135407c3d167359b1e2dd1f12b751b31ac80e', class: "sticky-bottom" }, h("tr", { key: 'dae4f695a77846739f2cc80f1e210f0d24d4671e', class: "table-light align-middle" }, h("td", { key: '6f2ed8b9b062a008f521aad3fe7f2ac923316955', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '18c83657e78378ce8b59d6216479047f7728691f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+            }))))), this.paging && (h("tfoot", { key: '556eb5c90bf12c3d1b577fc74911e3318a95b87c', class: "sticky-bottom" }, h("tr", { key: 'e69f4f7a9510131a737460568a2e398908315848', class: "table-light align-middle" }, h("td", { key: '518a89afe7e7aaf02857ef9e7f0bad0fc0220eeb', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '4510a747b96502d86615c90f8ba0d051b3f1cec8', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

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

@@ -22,7 +22,7 @@ export class PaymentsListFilters {
         ];
     }
     render() {
-        return (h("table-filters-menu", { key: '490bab461b6e9f7d3d6296e0d7b59cd0379750a9', params: this.params, clearParams: this.clearParams }, h("div", { key: '03541b6698c5c7fd3f82133e5c391c1a88516a09', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'da16493e48e338b7a44acdfd8adfc74536580c76', class: "p-2" }, h("form-control-text", { key: '5c3c66c184bc1753ce8a8c9dd8644a15338dba27', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: 'cc1637833295948df93b3fc5e3a9240b8c401840', class: "p-2" }, h("form-control-text", { key: '9201deffdc08ddadbcb4b1b817550116ce5e4eb9', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '8bba67af45d8ae3427c0df2fd7e3e01bfb081ade', class: "p-2" }, h("form-control-select", { key: '9744947523c0ba7f840946b9d21574d93b239efe', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status })), h("div", { key: '3e15042ad46b11ea1ba086a284a32b7a661362d9', class: "p-2" }, h("form-control-date", { key: '4cb7f7356fb9a3e86834511eefd16c5b3334b976', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after })), h("div", { key: '88315cc708c3e4e526e0a80f04a114bf0f9600bf', class: "p-2" }, h("form-control-date", { key: '537eee72fc813d0c73d830641db73eadabef5d18', name: "created_before", label: "End Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_before })))));
+        return (h("table-filters-menu", { key: 'a155feec339f48d77b25f4036bb185125bc0a7ce', params: this.params, clearParams: this.clearParams }, h("div", { key: '57c1528bdd86374dd2c780ae0d6b4850e7a96bcd', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'fc61d1e3c37cb3d5914b517e72ec569094c0cc8f', class: "p-2" }, h("form-control-text", { key: '7a81ebac31e074b3bd499c275d5ef68fd02d4910', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: '3926d05f92b0a16581f1dd66dcc1aee300d2bc98', class: "p-2" }, h("form-control-text", { key: '48b999c9543ca31146fb010d02074be69544fabc', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '64d87e35e59931fc76ab9f4e1a6c486f839b9fbb', class: "p-2" }, h("form-control-select", { key: 'a3fe39cd40dccb2143139a127e1d37ef669acf63', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status || '' })), h("div", { key: 'a522b9e4d8e9c4e3e3bf577deb4db56ffc13fc13', class: "p-2" }, h("form-control-date", { key: 'd2d277dc5f3bf4b80b4f09b60ed7f76bedaa46ab', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after, showTime: true, filterTimeZone: true })), h("div", { key: 'b6e15a8cfca24097432edd77fa339c09b72ce74c', class: "p-2" }, h("form-control-date", { key: '5c27469e525dba1111eaec6a8446bdacf34baee4', name: "created_before", label: "End Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_before, showTime: true, filterTimeZone: true })))));
     }
     static get is() { return "payments-list-filters"; }
     static get properties() {

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

@@ -1,11 +1,12 @@
 import { h } from "@stencil/core";
 import { PaymentService } from "../../api/services/payment.service";
 import { makeGetPayments } from "./get-payments";
-import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { config } from "../../../config";
+import { StyledHost } from "../../ui-components/styled-host/styled-host";
+import { tableExportedParts } from "../../ui-components/table/exported-parts";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -70,10 +71,7 @@ export class PaymentsList {
         }
     }
     render() {
-        if (this.errorMessage) {
-            return ErrorState(this.errorMessage);
-        }
-        return (h("payments-list-core", { getPayments: this.getPayments, "onError-event": this.handleErrorEvent }));
+        return (h(StyledHost, { key: 'a1c35cabf7026d694df44351b0879839a21376b8', exportparts: tableExportedParts }, h("payments-list-core", { key: 'c07919c4982f04122d5e4b2a6bdb4e506f7384e5', getPayments: this.getPayments, "onError-event": this.handleErrorEvent })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }