@justifi/webcomponents 6.12.3 → 6.12.4

package/dist/collection/components/business-forms/owner-form/owner-form.js

@@ -1,18 +1,154 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
+import { FormController } from "../../../ui-components/form/form";
+import { Owner } from "../../../api/Identity";
+import { identitySchemaByCountry } from "../schemas/business-identity-schema";
+import { Button } from "../../../ui-components";
+import { heading3 } from "../../../styles/parts";
+import { BusinessFormClickActions } from "../utils/event-types";
 import { makeGetIdentity, makePatchIdentity, makePostIdentity } from "../payment-provisioning/payment-provisioning-actions";
 import { IdentityService } from "../../../api/services/business.service";
 export class OwnerForm {
+    loadingWatcher() {
+        this.formLoading.emit(this.isLoading);
+    }
+    constructor() {
+        this.isLoading = false;
+        this.errors = {};
+        this.owner = {};
+        this.getData = () => {
+            if (!this.getOwner) {
+                return;
+            }
+            this.isLoading = true;
+            this.getOwner({
+                onSuccess: (response) => {
+                    this.instantiateOwner(response.data);
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity,
+                    });
+                },
+                final: () => (this.isLoading = false),
+            });
+        };
+        this.sendData = () => {
+            this.isLoading = true;
+            return new Promise((resolve) => {
+                if (this.ownerId) {
+                    this.patchOwner({
+                        payload: this.payload,
+                        onSuccess: (response) => {
+                            this.ownerSubmitted.emit({ id: response.data.id });
+                            this.instantiateOwner(response.data);
+                            resolve(true);
+                        },
+                        onError: ({ error, code, severity }) => {
+                            this.errorEvent.emit({
+                                message: error,
+                                errorCode: code,
+                                severity: severity,
+                            });
+                            resolve(false);
+                        },
+                        final: () => (this.isLoading = false),
+                    });
+                }
+                else {
+                    this.postOwner({
+                        payload: this.payload,
+                        onSuccess: (response) => {
+                            this.ownerSubmitted.emit({ id: response.data.id });
+                            this.instantiateOwner(response.data);
+                            resolve(true);
+                        },
+                        onError: ({ error, code, severity }) => {
+                            this.errorEvent.emit({
+                                message: error,
+                                errorCode: code,
+                                severity: severity,
+                            });
+                            resolve(false);
+                        },
+                        final: () => (this.isLoading = false),
+                    });
+                }
+            });
+        };
+        this.instantiateOwner = async (data) => {
+            this.owner = Object.assign({}, new Owner(data));
+            await this.formController.setInitialValues(this.owner);
+        };
+        this.handleAddOwner = () => {
+            const eventName = this.ownerId ? BusinessFormClickActions.updateOwner : BusinessFormClickActions.addOwner;
+            this.clickEvent.emit({ name: eventName });
+        };
+        this.handleRemoveOwner = () => {
+            this.removeOwner(this.ownerId);
+            this.clickEvent.emit({ name: BusinessFormClickActions.removeOwner });
+        };
+        this.validate = this.validate.bind(this);
+        this.submit = this.submit.bind(this);
+        this.validateAndSubmit = this.validateAndSubmit.bind(this);
+    }
+    async returnOwnerData() {
+        return this.ownerId;
+    }
     async validate() {
-        return this.coreComponent.validate();
+        return this.formController.validate();
     }
     async submit() {
-        return this.coreComponent.submit();
+        const isValid = await this.validate();
+        if (isValid) {
+            return this.sendData();
+        }
+    }
+    async validateAndSubmit(event) {
+        event.preventDefault();
+        const isValid = await this.validate();
+        if (isValid) {
+            this.submit();
+        }
+    }
+    get payload() {
+        const formValues = new Owner(this.formController.values.getValue()).payload;
+        if (this.ownerId) {
+            return formValues;
+        }
+        else {
+            return Object.assign(Object.assign({}, formValues), { business_id: this.businessId });
+        }
+    }
+    get formTitle() {
+        return this.ownerId ? 'Edit Business Owner' : 'Add Business Owner';
     }
-    async validateAndSubmit({ onSuccess }) {
-        this.coreComponent.validateAndSubmit({ onSuccess });
+    get submitButtonText() {
+        return this.ownerId ? 'Update' : 'Add';
+    }
+    get showRemoveButton() {
+        const blankForm = !this.ownerId && this.newFormOpen;
+        if (this.ownersLength <= 1) {
+            return false;
+        }
+        else {
+            if (blankForm) {
+                return true;
+            }
+            else if (this.ownerId && !this.newFormOpen) {
+                return true;
+            }
+        }
     }
     componentWillLoad() {
+        const schemaFactory = identitySchemaByCountry[this.country];
+        this.formController = new FormController(schemaFactory('owner', this.allowOptionalFields));
         this.initializeApi();
+        this.ownerId && this.getOwner ? this.getData() : this.instantiateOwner({});
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe((errors) => (this.errors = Object.assign({}, errors)));
     }
     initializeApi() {
         if (!this.authToken) {
@@ -21,20 +157,20 @@ export class OwnerForm {
         this.getOwner = makeGetIdentity({
             authToken: this.authToken,
             identityId: this.ownerId,
-            service: new IdentityService()
+            service: new IdentityService(),
         });
         this.patchOwner = makePatchIdentity({
             authToken: this.authToken,
             identityId: this.ownerId,
-            service: new IdentityService()
+            service: new IdentityService(),
         });
         this.postOwner = makePostIdentity({
             authToken: this.authToken,
-            service: new IdentityService()
+            service: new IdentityService(),
         });
     }
     render() {
-        return (h("owner-form-core", { key: '598c7413dbae853f432e64ac549025442083fbb9', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, country: this.country, ref: ref => this.coreComponent = ref }));
+        return (h(Host, { key: '1661676befd63f9308edcb02be179db71b7c9d99', style: { display: 'block' } }, h("form", { key: '4961f358ca8953156477d455cacb19e4dec3cc29', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '27ecfec87ae93a1bdec94f3cc925558dc8f0ff23' }, h("legend", { key: '4c194cf9e08e6fab9982b95a4b12c3c3a8cecdc3', class: "fw-semibold fs-5", part: heading3 }, this.formTitle), h("br", { key: 'ef1f9b184dac866d27cfa245106d90db0954fa51' }), h("div", { key: '2936ecc396220f8b80e5d8454bc6f6f70cb3ae73', class: "row gy-3" }, h("owner-form-inputs", { key: 'f34d38b718ed7fde67102aa1034b5e6377e001f8', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController, country: this.country }), h("div", { key: '2d5266bc1a7f4aeb12cab8a494107f2668b2fb0e', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '39631fd0364221ac2a274d8aa794a1f3c8d28780', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: '120fbae294f8f67bd14fe0be5dc1bcf881ffd489', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: '73eccba19a595b67f64139769a495d5a27e02b2f' })))));
     }
     static get is() { return "owner-form"; }
     static get properties() {
@@ -199,6 +335,10 @@ export class OwnerForm {
     }
     static get states() {
         return {
+            "isLoading": {},
+            "formController": {},
+            "errors": {},
+            "owner": {},
             "getOwner": {},
             "patchOwner": {},
             "postOwner": {}
@@ -206,6 +346,27 @@ export class OwnerForm {
     }
     static get events() {
         return [{
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
+                    "references": {
+                        "ComponentClickEvent": {
+                            "location": "import",
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "errorEvent",
                 "name": "error-event",
                 "bubbles": true,
@@ -226,10 +387,57 @@ export class OwnerForm {
                         }
                     }
                 }
+            }, {
+                "method": "formLoading",
+                "name": "formLoading",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "ownerSubmitted",
+                "name": "ownerSubmitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
+            "returnOwnerData": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "validate": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
@@ -266,10 +474,10 @@ export class OwnerForm {
             },
             "validateAndSubmit": {
                 "complexType": {
-                    "signature": "({ onSuccess }: { onSuccess: any; }) => Promise<void>",
+                    "signature": "(event: any) => Promise<void>",
                     "parameters": [{
-                            "name": "__0",
-                            "type": "{ onSuccess: any; }",
+                            "name": "event",
+                            "type": "any",
                             "docs": ""
                         }],
                     "references": {
@@ -287,4 +495,10 @@ export class OwnerForm {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "isLoading",
+                "methodName": "loadingWatcher"
+            }];
+    }
 }

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

@@ -51,8 +51,8 @@ export class JustifiCheckoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '1a55c7d5e185991eeaa7b5a58c447dc229281368' }, h("table-filters-menu", { key: '0dbea29d3dc84376462d61d6c0591166b86a47e1', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '88e49e1259669f6fc20e7947858f703e8a72fcd6', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '52502aa4976f3b046d58ff8377dc1350b3e10f30', class: "p-2" }, h("form-control-text", { key: 'e4baba52dd0bd17c571c55e8b4793dc6aca37dae', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: '979bc95675a30e20c54bc501675682573a278c0a', class: "p-2" }, h("form-control-text", { key: 'af46d55904f0ed639519335212a88bf92eaa1146', name: "successful_payment_id", label: "Successful Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.successfulPaymentId || filterParams.successful_payment_id, disabled: !!this.successfulPaymentId, part: filterParam })), h("div", { key: 'aa44b5c554324653cdc4bb70fb230605f38204ca', class: "p-2" }, h("form-control-select", { key: '49a76ec2a929b76ef87e2c2098ed6bb4523b499d', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: filterParam })), h("div", { key: '48be0da14579ea55be39dd3bb239ba4c8dd9321d', class: "p-2" }, h("form-control-select", { key: '9e3111a896e7364ad6c35997e625270ed4f239d0', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: '38a52faf33e088c3119ffabbe3b52965e4f3f896', class: "p-2" }, h("form-control-date", { key: 'a2167a3113fd736b95138cd3da14573e0ad2558f', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '0ae414564ad4dfc7fb84c202320d110a1bf9dc6a', class: "p-2" }, h("form-control-date", { key: 'c3130e521009eab1df12283a275459ff5f82aa75', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '1bb72de3ffad74d0e287f6f988f2737a94190709' }, h("table-filters-menu", { key: 'e7e1c2d657b5af5dfcf6e13b262dbd3787583206', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'df26c6a8c7ec477103995c07c079c01a4bea0729', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '6fd0f286cb30997439879d1c9b69b8ab39651a99', class: "p-2" }, h("form-control-text", { key: 'b6a070c40b1da5ea9f59c8c6f47f517181948230', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: 'f6ae07ac4b9afcb307fa6ce5ff6a0b6610169a69', class: "p-2" }, h("form-control-text", { key: 'c27c86b9a14d806bcd6d2d2a070812e31ae558ee', name: "successful_payment_id", label: "Successful Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.successfulPaymentId || filterParams.successful_payment_id, disabled: !!this.successfulPaymentId, part: filterParam })), h("div", { key: '54b26c583902c853db8709b311870c94d5332bd2', class: "p-2" }, h("form-control-select", { key: '3747bd2c6f2196a56059f36febc30057b8dc13de', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: filterParam })), h("div", { key: '5a875750872d5446c42db9a840c3670425c46ebb', class: "p-2" }, h("form-control-select", { key: '58eff7fbca6653532540506c7cef66df0f54af38', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: 'dca10b3b14055c6c2351f4fa8f11b609625f1a26', class: "p-2" }, h("form-control-date", { key: 'bfb85e61a9ee01a1cb3c2907ad06b6d37bbdc081', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '1772c182c957b053e77599935e3d61c1a66186a6', class: "p-2" }, h("form-control-date", { key: 'f7965bd4b2689359e76d3cec250bfd7eb5ba7870', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { pagingDefaults } from "../../api";
 import { makeGetCheckouts } from "../../actions/checkout/get-checkouts";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
@@ -6,29 +7,64 @@ import { CheckoutService } from "../../api/services/checkout.service";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { SubAccountService } from "../../api/services/subaccounts.service";
 import { makeGetSubAccounts } from "../../actions/sub-account/get-subaccounts";
-import { StyledHost } from "../../ui-components";
-import { defaultColumnsKeys } from "./checkouts-table";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState, TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions, } from "../../ui-components";
+import { checkoutTableColumns, checkoutTableCells, defaultColumnsKeys } from "./checkouts-table";
+import { Table } from "../../utils/table";
+import { getRequestParams, onQueryParamsChange } from "./checkouts-list-params-state";
 export class JustifiCheckoutsList {
     constructor() {
-        this.errorMessage = null;
         this.columns = defaultColumnsKeys;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.checkouts = [];
+        this.subAccounts = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (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;
+            const checkoutData = this.checkouts.find((checkout) => checkout.id === clickedCheckoutID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: checkoutData });
         };
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
         this.initializeGetData();
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
-    propChanged() {
+    authPropChanged() {
         this.initializeGetData();
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
+    }
+    pagingOrColumnsChanged() {
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
     }
     initializeGetData() {
         this.initializeGetCheckouts();
@@ -40,7 +76,7 @@ export class JustifiCheckoutsList {
             this.getCheckouts = makeGetCheckouts({
                 accountId: accountToUse,
                 authToken: this.authToken,
-                service: new CheckoutService()
+                service: new CheckoutService(),
             });
         }
         else {
@@ -57,12 +93,93 @@ export class JustifiCheckoutsList {
             this.getSubAccounts = makeGetSubAccounts({
                 primaryAccountId: this.accountId,
                 authToken: this.authToken,
-                service: new SubAccountService()
+                service: new SubAccountService(),
             });
         }
     }
+    fetchData() {
+        if (!this.getCheckouts) {
+            return;
+        }
+        this.loading = true;
+        this.getCheckouts({
+            params: this.checkoutParams,
+            onSuccess: async ({ checkouts, pagingInfo }) => {
+                this.checkouts = checkouts;
+                this.paging = pagingInfo;
+                this.checkoutsTable.collectionData = this.checkouts;
+                const shouldFetchSubAccounts = this.checkoutsTable.columnKeys.includes('sub_account_name');
+                if (shouldFetchSubAccounts) {
+                    await this.fetchSubAccounts();
+                }
+                else {
+                    this.loading = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    async fetchSubAccounts() {
+        if (!this.getSubAccounts) {
+            this.loading = false;
+            return;
+        }
+        this.getSubAccounts({
+            params: this.subAccountParams,
+            onSuccess: ({ subAccounts }) => {
+                this.subAccounts = subAccounts;
+                this.checkouts = this.checkouts.map((checkout) => {
+                    var _a;
+                    checkout.sub_account_name = (_a = this.subAccounts.find((subAccount) => subAccount.id === checkout.account_id)) === null || _a === void 0 ? void 0 : _a.name;
+                    return checkout;
+                });
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get checkoutParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
+    }
+    get subAccountParams() {
+        const accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
+        const uniqueAccountIds = [...new Set(accountIdNumbers)];
+        const accountIdString = uniqueAccountIds.join(',');
+        return { sub_account_id: accountIdString };
+    }
+    get entityId() {
+        return this.checkouts.map((checkout) => checkout.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.checkoutsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
     render() {
-        return (h(StyledHost, { key: '27491f40eb96742cee1fe81023a9e423ab5b22a5' }, h("checkouts-list-core", { key: '2b2526aa7dee3cd216bc481144d3239a5389872c', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '2f9efac8723333029415ef131516946912bb313c' }, h(TableWrapper, { key: '024c7a532533721acda9740a0888b1c15fa624fe' }, h(TableComponent, { key: '06bf1c6db731eb5857b08615222ca47a85ffc4a8' }, h(TableHead, { key: '0754f9cd87a3b32a5368e7fb7538071cf6be0505' }, h(TableHeadRow, { key: '5db4c5beea0e6e9afc29e16b5789a32ad94509dd' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '9140294035b04b549578d74374271f8a9fd78162' }, h(TableLoadingState, { key: 'bf495d00b9bc4ee28b67c8f1b3258306f9202142', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '92f8a1245cc022fa3b254bb1fe8d659f75c62923', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '2e6ab100026afb29f199dd33e52de5ae77e6576c', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '3a1b55572eb0fc2ffcef1a39f6bfae5693056752' }, h(TableFootRow, { key: 'f61a3cc86fda3ec95075381403916f5fb1c46ca6' }, h(TableFootCell, { key: '7d937a0d228062f42f49dca5bdb436d54354563e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '05454876b7faeeb73fb8f896a2425e5f9db12ee3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -149,13 +266,40 @@ export class JustifiCheckoutsList {
     }
     static get states() {
         return {
+            "checkouts": {},
+            "checkoutsTable": {},
+            "subAccounts": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "pagingParams": {},
             "getCheckouts": {},
-            "getSubAccounts": {},
-            "errorMessage": {}
+            "getSubAccounts": {}
         };
     }
     static get events() {
         return [{
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
+                    "references": {
+                        "ComponentClickEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "errorEvent",
                 "name": "error-event",
                 "bubbles": true,
@@ -181,13 +325,19 @@ export class JustifiCheckoutsList {
     static get watchers() {
         return [{
                 "propName": "accountId",
-                "methodName": "propChanged"
+                "methodName": "authPropChanged"
             }, {
                 "propName": "authToken",
-                "methodName": "propChanged"
+                "methodName": "authPropChanged"
             }, {
                 "propName": "subAccountId",
-                "methodName": "propChanged"
+                "methodName": "authPropChanged"
+            }, {
+                "propName": "pagingParams",
+                "methodName": "pagingOrColumnsChanged"
+            }, {
+                "propName": "columns",
+                "methodName": "pagingOrColumnsChanged"
             }];
     }
 }

package/dist/collection/components/dispute-management/{justifi-dispute-notification.js → dispute-notification.js}

@@ -1,11 +1,11 @@
 import { h } from "@stencil/core";
 import { formatCurrency } from "../../utils/utils";
 import { heading4, text } from "../../styles/parts";
-import { Skeleton, Button, StyledHost } from "../../ui-components";
+import { Skeleton, Button } from "../../ui-components";
 import { makeSubmitDisputeResponse } from "./dispute-response/dispute-response-actions";
 import { DisputeService } from "../../api/services/dispute.service";
 import { DisputeManagementClickActions } from "./event-types";
-export class JustifiDisputeNotification {
+export class DisputeNotification {
     acceptDispute() {
         makeSubmitDisputeResponse({
             disputeId: this.dispute.id,
@@ -44,11 +44,10 @@ export class JustifiDisputeNotification {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (h(StyledHost, { key: '736e9c381309e08926162292fdbf7b62cc2087e9' }, this.isLoading && (h("div", { key: '21bdc2b142c32d00323211dda36074976b63dbb4', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'e73b642a8c2a02b397affeb1fff5e5c35a3d87fb', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '8ba58aa2227e88903a3eccc2bb8b577c05515139', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'fb88ccd69ee44cf8af5e9093906fc21016a2a5b6', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && this.isDueDatePassed() && (h("div", { key: 'e1fb6db600ef9418b47eb5e51ef8c62f4b005183', part: text }, h("h1", { key: 'ac2e9efc93c68d30f2a20ce2816c668826adfe6d', class: "h4", part: heading4 }, "The due date (", (_b = this.dispute) === null || _b === void 0 ? void 0 :
-            _b.due_date, ") for this dispute has passed"), h("p", { key: '6d189ad1eaa6c9e144749a5bab6aefcf3541e382' }, "You can no longer submit evidence to counter this dispute."))), ((_c = this.dispute) === null || _c === void 0 ? void 0 : _c.needsResponse) && !this.isDueDatePassed() && (h("div", { key: '2212952890d5fedb650c15d6e526e3fbf9ab9a68', part: text }, h("h1", { key: '67426dbff584f957e89a8d86570fab038de53f8d', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '513490e2c25f4b12d1400d74862618aaf9794bd3' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '352898d8cae890914bf8feffd0ca913b71cd6c18', class: "h5" }, "Dispute details"), h("div", { key: 'b2b00e53e015d2cfb7a58ee66220af6dbb22467a', class: "d-table gap-2" }, h("div", { key: 'ee7162b5c176c1d334f09cdda553a1ef6e9b1dd0', class: "d-table-row gap-2" }, h("span", { key: '863e381c1610481ae609e4f9e3bc4d4cba6981cb', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'a4860c2b8b4f9f79cea5b45e8da37509368e02fd', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_d = this.dispute) === null || _d === void 0 ? void 0 : _d.amount))), h("div", { key: '15b6c3183065af7771ffd31971e9c120c28cb285', class: "d-table-row gap-2" }, h("span", { key: '1a43935f1a8fa71dbd7b511430d5b29179a00d40', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '6351bb9fcc392700e52f6a19a5b7796f0db81b7c', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_e = this.dispute) === null || _e === void 0 ? void 0 : _e.reason)), h("div", { key: '07badb71175a086399c2cd7e21f20eef2dc71547', class: "d-table-row gap-2" }, h("span", { key: '7f000a4206424cd4808d5cd9a20c339bf3ecaf18', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Due Date"), h("span", { key: 'a768799fd24012e11c9a3907f9da9959c815d475', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_f = this.dispute) === null || _f === void 0 ? void 0 : _f.due_date))), h("div", { key: 'b077e8d4e7c446db5c46f41174dbbf18647da81d', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'b113557e1ebabd4d787d95d3cf65c50c66085f0b', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '8fc56615440cd75503c7ce9324670592e1c88068', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.underReview) && (h("div", { key: '1419d80deb612294fe979d8cbf2fb76eab05c30c', part: text }, h("h1", { key: 'd77570d765ec7c1161c29f667911df1a40004c5b', class: "h4", part: heading4 }, "This payment is disputed and under review"), h("p", { key: 'b4e258895b34f062b244d710a0b947e08bb5bbea' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_h = this.dispute) === null || _h === void 0 ? void 0 : _h.won) && (h("div", { key: '7e32157b5bcdc02bfd125b9b03607f67488ab48e', part: text }, h("h1", { key: 'd087b4fcb56468bd8aa9904286f858591af94ba1', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '0aa0f4003d253874c6bd639afffba2ca37c9985e' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_j = this.dispute) === null || _j === void 0 ? void 0 : _j.lost) && (h("div", { key: 'f3855957e8222a4837f5cee6026b0c56df3ed185', part: text }, h("h1", { key: '1c0261b5d45e54b26982be2112b92d8585933b7a', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: 'f8ae5063b7254794687af55b989a5f282846fbfb' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h("div", { key: 'c5963c0823e635ee0c2e88979b174c89c96af134', class: "dispute-notification-root" }, this.isLoading && (h("div", { key: '4de146d999a16e1b4ad3e393285a843d86febdda', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'ccbf1fe76ac5582cb2536548901c12768096e867', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '06ede07362fe88dfd4ec6b38c80bf619b9c7a134', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '768613c5b20ef403c468b12d5dacbea4b211ebef', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && this.isDueDatePassed() && (h("div", { key: 'a22e18df2764ddb6bee0db7e4da388bd9aec0d99', part: text }, h("h1", { key: 'b602464b54aacc6c0776975921dbe3fceeda1f04', class: "h4", part: heading4 }, "The due date (", (_b = this.dispute) === null || _b === void 0 ? void 0 :
+            _b.due_date, ") for this dispute has passed"), h("p", { key: 'e4b8615f75914e7aa613f6120172bc2cc0f6dd31' }, "You can no longer submit evidence to counter this dispute."))), ((_c = this.dispute) === null || _c === void 0 ? void 0 : _c.needsResponse) && !this.isDueDatePassed() && (h("div", { key: '2b09cc88b63ca582e2ef8cb83ef4455d4af493cc', part: text }, h("h1", { key: '74ac700bc104aac085712a30da0b968a1bec41fe', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '2d133967991c3ee44f022ac925c873c198b71315' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '376936590aaeb5903f430eedb84984704966563d', class: "h5" }, "Dispute details"), h("div", { key: '8afea9772ee48495c8b731ba8602c48e00061f8c', class: "d-table gap-2" }, h("div", { key: '14630372fff051e1baadb7239ced63ae56edaf7e', class: "d-table-row gap-2" }, h("span", { key: '4ec3fc5233e87b07021eeb78ac7d4e09666502c7', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'fe19ae497136c8ef5511a0197952c6d3cd889b84', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_d = this.dispute) === null || _d === void 0 ? void 0 : _d.amount))), h("div", { key: '0f955e0707a9b8126868a34dafa39320e00d7706', class: "d-table-row gap-2" }, h("span", { key: '63dc2ebf125f6ec52a155ced1324a02b0735c78b', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '5a6e543559e873811348fa0b68d21fe0f1dac781', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_e = this.dispute) === null || _e === void 0 ? void 0 : _e.reason)), h("div", { key: '7656de07c60c137dd7005f96370a71442dcdb526', class: "d-table-row gap-2" }, h("span", { key: '817a89c84f605cbfac346f0d39790b35a73d51a4', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Due Date"), h("span", { key: 'e0e7c74f85934f6a1d2e02bc24d5563e1a37222e', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_f = this.dispute) === null || _f === void 0 ? void 0 : _f.due_date))), h("div", { key: '2ef721cebd617709242a0b4b9713ff264f73eac0', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '530f16709538e4146e542b88177145e4b2c9808a', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: 'a498af8eb2d5a41e75a8fb044b981463b8e3bbd4', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.underReview) && (h("div", { key: 'f01a89cda469402b5543b64b02ddfc9ec66cc62b', part: text }, h("h1", { key: '15f0173bdfc20dea6fb16b030479f8554e40b716', class: "h4", part: heading4 }, "This payment is disputed and under review"), h("p", { key: 'a444d77fad985cddf37a0386db7ee65f321fa11c' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_h = this.dispute) === null || _h === void 0 ? void 0 : _h.won) && (h("div", { key: '08bf0f31e5fe43dbf1058709f500d0b592827dcb', part: text }, h("h1", { key: 'e9925566140ac26b9fb42026258f3ca2bebc002f', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: 'b0dd7cec8cad943d46d7e2d7d919f15b29d08fbd' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_j = this.dispute) === null || _j === void 0 ? void 0 : _j.lost) && (h("div", { key: '4b037a462c3e9b3c7b7296e15b443c94a4310f46', part: text }, h("h1", { key: 'b614282d90adb69e9c638ed7a6f80566033c69ed', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '3808b99fb69241784c6f3e09bbd6b13636cb26a3' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
-    static get is() { return "justifi-dispute-notification"; }
-    static get encapsulation() { return "shadow"; }
+    static get is() { return "dispute-notification"; }
     static get properties() {
         return {
             "dispute": {

package/dist/collection/components/dispute-management/dispute-response/{justifi-additional-statement.js → additional-statement.js}

@@ -4,7 +4,7 @@ import AdditionalStatementSchema from "./schemas/additional-statement-schema";
 import { DisputeResponseFormStep } from "./dispute-response-form-types";
 import { heading5 } from "../../../styles/parts";
 import fileInputHandler from "./file-input-handler";
-export class JustifiAdditionalStatement {
+export class AdditionalStatement {
     constructor() {
         this.documentErrors = {};
         this.errors = {};
@@ -29,9 +29,9 @@ export class JustifiAdditionalStatement {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '97175b1ff6bee9154ec66df8710c7343cdd9a2dd' }, h("div", { key: 'f36de20ce5e724780550bcb0eaa4512b5d1559ef', class: "row gy-3" }, h("div", { key: 'bf5002c5e8b8c3f516fa8cad1f42e7b7ca9e55f9', class: "col-12" }, h("h2", { key: '64f6517d1029463cfe07c435f6b4a1cdca95f097', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: '81ced6dd86b41293b6692d3023fbe5e9e11cc392', class: "col-12" }, h("form-control-textarea", { key: 'd5f28108a9dbea3e0f2634b1cd96316a9f986c90', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: '19d8047c4fc03376f77f5331f2fcfea6cd20e2b9', class: "col-12" }, h("form-control-file-v2", { key: '871bc06d4f7b5e3d56dd73ddfc9a8061d701f501', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
+        return (h("div", { key: '6981b81dee8ead47d8e86c501b82d61aa4c337b9' }, h("div", { key: '0bf8ad743eaf5fe2e8c68d79947a4c2303e782f1', class: "row gy-3" }, h("div", { key: 'bdd3e46477ed7667a73a81d98c62e1121660b820', class: "col-12" }, h("h2", { key: 'b0b8e093b3c7204526b19fc54f80ea8c681ff22e', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: '15570a6b33fab873a7fc9faa544c8fb234515f38', class: "col-12" }, h("form-control-textarea", { key: '68e08b8e96dbb74c35f1fabbb769aa95a3e0ada9', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: 'f684ffc7e55aac7d0667326c99480b796f2a9cfc', class: "col-12" }, h("form-control-file-v2", { key: '8ea248120f9f2ed5fb689a1a25855266dbe561a0', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
     }
-    static get is() { return "justifi-additional-statement"; }
+    static get is() { return "additional-statement"; }
     static get properties() {
         return {
             "disputeResponse": {