@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

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

@@ -1,34 +1,27 @@
 import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
-import { onFilterChange } from "../../ui-components/filters/utils";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { checkoutTableColumns, checkoutTableCells } from "./checkouts-table";
 import { Table } from "../../utils/table";
+import { queryParams, onQueryParamsChange } from "./checkouts-list-params-state";
+import { table, tableCell } from "../../styles/parts";
+import { TableClickActions } from "../../ui-components/table/event-types";
 export class CheckoutsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedCheckoutID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedCheckoutID)
                 return;
-            this.rowClicked.emit(this.checkouts.find((checkout) => checkout.id === clickedCheckoutID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const checkoutData = this.checkouts.find((checkout) => checkout.id === clickedCheckoutID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: checkoutData });
         };
         this.getCheckouts = undefined;
         this.getSubAccounts = undefined;
@@ -39,21 +32,28 @@ export class CheckoutsListCore {
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
-        this.fetchCheckouts();
+        this.fetchData();
     }
     componentWillLoad() {
         this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
         if (this.getCheckouts && this.getSubAccounts) {
-            this.fetchCheckouts();
+            this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
-    fetchCheckouts() {
+    fetchData() {
         this.loading = true;
         this.getCheckouts({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: async ({ checkouts, pagingInfo }) => {
                 this.checkouts = checkouts;
                 this.paging = pagingInfo;
@@ -100,6 +100,10 @@ export class CheckoutsListCore {
             },
         });
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     get subAccountParams() {
         let accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
         let uniqueAccountIds = [...new Set(accountIdNumbers)];
@@ -119,7 +123,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '8d2c1fd960b2b3a66f3a1bf648b75576ad2e8857' }, h("checkouts-list-filters", { key: '18ba9bf560499112f71a690da751c8e3c4d345a7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '12cf6ee2912ac6a9518634ebd470dac5f7623aff', class: "table-wrapper" }, h("table", { key: '1ea2c118d7efb620dc1f39db55a510a8a473cb31', class: "table table-hover" }, h("thead", { key: '5e334a090be56c82b11ae7584bdf4014cc8743c7', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '233137a8b4e30bac28ded78010199bfecd0ac4e7', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'd4ed9d4bf3ac17d4dc7294b875734e02996c7444', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'a7afbb627c768139af4244da5c12fae493dceafb', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '802c43c8da770bca9a249a88d115901e9b14e102', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'f1cd197cf7d1d5d81868a5abfafa40df762ca3c8', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.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)))), this.paging && (h("tfoot", { key: 'f0c367854322c341515bc481159101e9659117c7', class: "sticky-bottom" }, h("tr", { key: '88bc665c23665eddc4c88d27acc8c8f1cb39e277', class: "table-light align-middle" }, h("td", { key: '8be265c9b43033cfd3e2c4b3f12ac6d6c104e53d', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '6abdb6091b78e58ec71ac6bf66f278ed9b6542fb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '7079f5dbb8f52d0e99da70f6975e65f2024bd7c9' }, h("div", { key: '8d73be1816687fe3af837d5853f75b5aad756f6e', class: "table-wrapper" }, h("table", { key: '3a9d8cb62a25d28660fa160de263ae80c2b67804', class: "table table-hover", part: table }, h("thead", { key: 'cc1954f52372d481e789cf5460118952633ab34e', class: "table-head sticky-top" }, h("tr", { key: '141e9d5f5e671181487a77dd01ea86d0f2927ba6', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'c6f1ba23fcda58bef598d32ec6901e7bae56fe9c', class: "table-body" }, h(TableLoadingState, { key: '746e4eaab6f4840f95a7243ac7d9a119fe4dac6c', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7d7cfed557fe138cfd56a8283da75b8fd55ef01e', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '71e438127afde6489e232ecd19f91545da9ca8fa', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '45a0d79963f2e6edd7f2f11620c0314345b3d6d5', class: "sticky-bottom" }, h("tr", { key: '8d502311b14f5f1a7cae5d00f3bff361f4816d72', class: "table-light align-middle" }, h("td", { key: '522745aa9b5d46188dd4b351debc83601c144dfe', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '41323e6e3aa31631dca4dba29e40551b9a9d5446', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {
@@ -191,13 +195,13 @@ export class CheckoutsListCore {
             "loading": {},
             "errorMessage": {},
             "paging": {},
-            "params": {}
+            "pagingParams": {}
         };
     }
     static get events() {
         return [{
-                "method": "rowClicked",
-                "name": "checkout-row-clicked",
+                "method": "clickEvent",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -206,13 +210,13 @@ export class CheckoutsListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "Checkout",
-                    "resolved": "Checkout",
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
                     "references": {
-                        "Checkout": {
+                        "ComponentClickEvent": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::Checkout"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
                         }
                     }
                 }
@@ -227,13 +231,13 @@ export class CheckoutsListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -241,7 +245,10 @@ export class CheckoutsListCore {
     }
     static get watchers() {
         return [{
-                "propName": "params",
+                "propName": "queryParams",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "pagingParams",
                 "methodName": "updateOnPropChange"
             }, {
                 "propName": "getCheckouts",

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

@@ -1,9 +1,11 @@
 import { h } from "@stencil/core";
+import { queryParams, clearParams } from "./checkouts-list-params-state";
+import { StyledHost } from "../../ui-components";
 export class CheckoutsListFilters {
     constructor() {
-        this.params = {};
-        this.setParamsOnChange = undefined;
-        this.clearParams = undefined;
+        this.setParamsOnChange = (name, value) => {
+            queryParams[name] = value;
+        };
     }
     get checkoutStatusOptions() {
         return [
@@ -22,63 +24,8 @@ export class CheckoutsListFilters {
         ];
     }
     render() {
-        return (h("table-filters-menu", { key: '9bbefced0a75175612e10d18a2399c2fba54a541', params: this.params, clearParams: this.clearParams }, h("div", { key: 'c9788ad56827b8a3d4452da28678d56b0b7db11c', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '4f4eefcdecb67f6fa58f7daa5044bae0e0df5f6c', class: "p-2" }, h("form-control-select", { key: 'cb3d3801b90102e330a96a0454074b5374f15326', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.status || '' })), h("div", { key: 'b43631eb9021c8d496551d359440696686a3a50b', class: "p-2" }, h("form-control-select", { key: '7f2a33df18fb3d48dba2ad726a96d9107cca2bf3', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_mode || '' })))));
-    }
-    static get is() { return "checkouts-list-filters"; }
-    static get properties() {
-        return {
-            "params": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "ICheckoutsParams",
-                    "resolved": "ICheckoutsParams",
-                    "references": {
-                        "ICheckoutsParams": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::ICheckoutsParams"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "defaultValue": "{}"
-            },
-            "setParamsOnChange": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(name: string, value: string) => void",
-                    "resolved": "(name: string, value: string) => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            },
-            "clearParams": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            }
-        };
+        return (h(StyledHost, { key: '7eedab4f46529871c876c5b36c3dfdc4a76442bc' }, h("table-filters-menu", { key: '645593908d9b2b258a520d6fd469f668a34d5980', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'dd06db2469e9666efd44f0625bd41a69dd45fb1a', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'dba0a96a17a1c255236e0733fe5394638f1abc1f', class: "p-2" }, h("form-control-select", { key: 'a833d0ece1a88f04f9a68a27098c035b71bc2d86', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' })), h("div", { key: 'bb90e2e96b0542e8fb00a2ccd7cbb43f4dc8b6a8', class: "p-2" }, h("form-control-select", { key: 'c214d31111ad970f9f40c0b6b948302e4702d2ba', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.payment_mode || '' }))))));
     }
+    static get is() { return "justifi-checkouts-list-filters"; }
+    static get encapsulation() { return "shadow"; }
 }

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

@@ -0,0 +1,8 @@
+import { createStore } from "@stencil/store";
+const initialState = {};
+const checkoutsListQueryParams = createStore(() => initialState);
+const { state: queryParams, on: onQueryParamsChange } = checkoutsListQueryParams;
+const clearParams = () => {
+    checkoutsListQueryParams.reset();
+};
+export { checkoutsListQueryParams, queryParams, onQueryParamsChange, clearParams };

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

@@ -7,30 +7,8 @@ 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 { StyledHost } 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) => {
@@ -89,7 +67,7 @@ export class CheckoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '34696607c3d7588b1909a055cbc80a8b96689037', exportparts: tableExportedParts }, h("checkouts-list-core", { key: 'ee0682ff230d2ae4ec38dc7caef942a85acd4871', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'f96da05a065d13a24cb4de2cc114a0dc10833ab2' }, h("checkouts-list-core", { key: '4e98c537644a3e22fb63d15736f5c22ff26a931f', 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"; }
@@ -186,13 +164,13 @@ export class CheckoutsList {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

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

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

@@ -0,0 +1,31 @@
+import { Dispute } from "../../api/Dispute";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
+export const makeGetDispute = ({ id, authToken, service, apiOrigin }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchDispute(id, authToken, apiOrigin);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const dispute = new Dispute(response.data);
+            onSuccess({ dispute, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.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/dispute-management-core.js

@@ -1,31 +1,127 @@
 import { h } from "@stencil/core";
-import { StyledHost } from "../../ui-components";
-import { DisputeManagementClickEvents } from "./dispute";
+import { DisputeManagementClickActions } from "./event-types";
+import { Dispute, DisputeStatus } from "../../api/Dispute";
 export class DisputeManagementCore {
     constructor() {
-        this.showCounterDispute = false;
+        this.getDispute = undefined;
+        this.disputeId = undefined;
+        this.authToken = undefined;
+        this.dispute = undefined;
+        this.isLoading = true;
+        this.showDisputeResponseForm = false;
     }
-    counterDisputeHandler(event) {
-        if (event.detail.name === DisputeManagementClickEvents.counterDispute) {
-            this.showCounterDispute = true;
+    disputeResponseHandler(event) {
+        if (event.detail.name === DisputeManagementClickActions.respondToDispute) {
+            this.showDisputeResponseForm = true;
         }
-        if (event.detail.name === DisputeManagementClickEvents.cancelDispute) {
-            this.showCounterDispute = false;
+        if (event.detail.name === DisputeManagementClickActions.cancelDispute) {
+            this.showDisputeResponseForm = false;
         }
     }
+    disputeSubmittedHandler() {
+        this.fetchData();
+    }
+    componentWillLoad() {
+        if (this.getDispute) {
+            this.fetchData();
+        }
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    fetchData() {
+        this.isLoading = true;
+        this.getDispute({
+            onSuccess: ({ dispute }) => {
+                this.dispute = new Dispute(dispute);
+                this.isLoading = false;
+                if (this.dispute.status !== DisputeStatus.needsResponse) {
+                    this.showDisputeResponseForm = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.isLoading = false;
+            },
+        });
+    }
     render() {
-        return (h(StyledHost, { key: '9bd815e88277ff5d96239bb6d005e1469f2762d2' }, this.showCounterDispute ? h("justifi-counter-dispute", null) : h("justifi-dispute-notification", null)));
+        return (h("div", { key: 'd147755d1f58c2ad2230f1afd511f03ee9053b75' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
     }
     static get is() { return "justifi-dispute-management-core"; }
+    static get properties() {
+        return {
+            "getDispute": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "disputeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dispute-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
+            }
+        };
+    }
     static get states() {
         return {
-            "showCounterDispute": {}
+            "dispute": {},
+            "isLoading": {},
+            "showDisputeResponseForm": {}
         };
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
+                "method": "errorEvent",
+                "name": "error-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -34,16 +130,34 @@ export class DisputeManagementCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
+                        }
+                    }
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "getDispute",
+                "methodName": "updateOnPropChange"
+            }];
+    }
     static get listeners() {
         return [{
-                "name": "clickEvent",
-                "method": "counterDisputeHandler",
+                "name": "click-event",
+                "method": "disputeResponseHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "submit-event",
+                "method": "disputeSubmittedHandler",
                 "target": undefined,
                 "capture": false,
                 "passive": false