@justifi/webcomponents 4.21.0 → 4.22.1

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

@@ -0,0 +1,210 @@
+import { h } from "@stencil/core";
+import { makeGetCheckouts } from "./get-checkouts";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { config } from "../../../config";
+import JustifiAnalytics from "../../api/Analytics";
+import { CheckoutService } from "../../api/services/checkout.service";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
+import { SubAccountService } from "../../api/services/subaccounts.service";
+import { makeGetSubAccounts } from "../../api/get-subaccounts";
+import { StyledHost, tableExportedParts } from "../../ui-components";
+import { defaultColumnsKeys } from "./checkouts-table";
+/**
+  * @exportedPart label: Label for inputs
+  * @exportedPart input: The input fields
+  * @exportedPart input-invalid: Invalid state for inputs
+  * @exportedPart table-head: Table head
+  * @exportedPart table-head-row: Head row
+  * @exportedPart table-head-cell: Individual head cell
+  * @exportedPart table-body: Body of the table
+  * @exportedPart table-row: Row of the table
+  * @exportedPart table-cell: Individual cell of the table
+  * @exportedPart loading-state-cell: Row for loading state
+  * @exportedPart loading-state-spinner: Spinner element for loading state
+  * @exportedPart error-state: Row for Error state
+  * @exportedPart empty-state: Row for Emtpy state
+  * @exportedPart pagination-bar: Pagination bar
+  * @exportedPart arrow: Both paging buttons
+  * @exportedPart arrow-left: Previous page button
+  * @exportedPart arrow-right: Next page button
+  * @exportedPart button-disabled: Disabled state for paging buttons
+  * @exportedPart previous-button-text: Text for Previous button
+  * @exportedPart next-button-text: Text for Next button
+*/
+export class CheckoutsList {
+    constructor() {
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
+        this.getCheckouts = undefined;
+        this.getSubAccounts = undefined;
+        this.errorMessage = null;
+        this.accountId = undefined;
+        this.authToken = undefined;
+        this.apiOrigin = config.proxyApiOrigin;
+        this.columns = defaultColumnsKeys;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeGetData();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    propChanged() {
+        this.initializeGetData();
+    }
+    initializeGetData() {
+        this.initializeGetCheckouts();
+        this.initializeGetSubAccounts();
+    }
+    initializeGetCheckouts() {
+        if (this.accountId && this.authToken) {
+            this.getCheckouts = makeGetCheckouts({
+                accountId: this.accountId,
+                authToken: this.authToken,
+                service: new CheckoutService(),
+                apiOrigin: this.apiOrigin,
+            });
+        }
+        else {
+            this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    initializeGetSubAccounts() {
+        if (this.accountId && this.authToken) {
+            this.getSubAccounts = makeGetSubAccounts({
+                accountId: this.accountId,
+                authToken: this.authToken,
+                service: new SubAccountService(),
+                apiOrigin: this.apiOrigin
+            });
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: '6e6faed5df0fcdc48018650867672c5d325d1934', exportparts: tableExportedParts }, h("checkouts-list-core", { key: '92ceb10f7bd76864629ed0990a7f34fab76ce517', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+    }
+    static get is() { return "justifi-checkouts-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "api-origin",
+                "reflect": false,
+                "defaultValue": "config.proxyApiOrigin"
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "columns",
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "getCheckouts": {},
+            "getSubAccounts": {},
+            "errorMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "propChanged"
+            }, {
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,13 @@
+export const MapCheckoutStatusToBadge = (status) => {
+    switch (status) {
+        case 'created':
+            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
+        case 'completed':
+            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
+        case 'attempted':
+            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
+        case 'expired':
+            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
+    }
+    ;
+};

package/dist/collection/components/checkouts-list/checkouts-table.js

@@ -0,0 +1,20 @@
+import { h } from "@stencil/core";
+import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { MapCheckoutStatusToBadge } from "./checkouts-status";
+export const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
+export const checkoutTableColumns = {
+    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date each checkout occurred" }, "Processed On")),
+    payment_amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
+    payment_description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The description of each checkout" }, "Payment Description")),
+    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
+    payment_mode: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each checkout" }, "Status")),
+};
+export const checkoutTableCells = {
+    created_at: (value) => (h("th", null, h("div", { class: "fw-bold" }, formatDate(value), " "), h("div", { class: "fw-bold" }, formatTime(value), " "))),
+    payment_amount: (value) => (h("td", null, formatCurrency(value, true, true), " ")),
+    payment_description: (value) => (h("td", null, value)),
+    sub_account_name: (value) => (h("td", null, value)),
+    payment_mode: (value) => (h("td", null, value)),
+    status: (value) => (h("td", { innerHTML: MapCheckoutStatusToBadge(value) })),
+};

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

@@ -0,0 +1,31 @@
+import { Checkout } from "../../api";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
+export const makeGetCheckouts = ({ accountId, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
+    var _a, _b;
+    try {
+        const response = await service.fetchCheckouts(accountId, authToken, params, apiOrigin);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const checkouts = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new Checkout(dataItem))) || [];
+            onSuccess({ checkouts, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};

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

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class AdditionalStatement {
+    render() {
+        return (h("div", { key: '21cee41c41fa70a5cc6b82f14ea49ee01086fa71' }, h("div", { key: '90d9a279089ce3d5e6861aaab2175ded06a5b8b3', class: "row gy-3" }, h("div", { key: '15a2cdde695c98c47bae644964457c7275e0933f', class: "col-12" }, h("h2", { key: '515f18bc0215936f6dc28cefbabbdbdb12c6ba61', class: "h5" }, "Additional Evidence")), h("div", { key: 'e1ee3b76fb7455c4feeaef6bb9368b4b07ed361b', class: "col-12" }, h("form-control-textarea", { key: '3d4ce8f83f457dd28f08dc5f973a76f9a9d4e362', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement" })), h("div", { key: '46445fa4158cd16fb3e2e26111c4a62fe386bbc0', class: "col-12" }, h("form-control-file", { key: '025ada3f8f2c0a2c185f9be0bfbb9816a560371e', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided." })))));
+    }
+    static get is() { return "justifi-additional-statement"; }
+}
+;

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

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export class CancellationPolicy {
+    render() {
+        return (h("div", { key: 'a35e9980fbad9752a00473711fadc0e69c16a909' }, h("div", { key: '024a9bee273b6a1d470e218b2bbd541b299c0f24', class: "row gy-3" }, h("div", { key: '394ba5a5fa8bf4726ca4c96cc4f1d75454f6b563', class: "col-12" }, h("h2", { key: '0cb7dddab83455d8c11d888ce9638bb93d8e00c9', class: "h5" }, "Cancellation Policy")), h("div", { key: '02c70eaf5b9d9876c3aa31edb070006cd6b67b98', class: "col-12" }, h("form-control-textarea", { key: '266a114845ca7e793e0a8a5b98e506a867a7a98f', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure" })), h("div", { key: '943b51f7849ae1fcac7320f8532d15371f064db8', class: "col-12" }, h("form-control-textarea", { key: '89de507fbed48afb4733b87f5e249bdafecea3af', label: "Cancellation Rebuttal", name: "cancellation_rebuttal" })), h("div", { key: '078a0874b5d203d1de4e2f2e5ae9a2eb95f28015', class: "col-12" }, h("form-control-file", { key: '7f2003888aaf189a8d86ab010a54e0bd511cb198', label: "Upload Cancellation Policy", name: "cancellation_policy_file" })))));
+    }
+    static get is() { return "justifi-cancellation-policy"; }
+}
+;

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: 'aee0faee30a5c998410cdb28d52107ce2c0cb672' }, 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";