@justifi/webcomponents 6.12.3 → 6.12.5

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/business-forms/payment-provisioning/business-owners/business-owners-form-step.js

@@ -92,6 +92,7 @@ export class BusinessOwnersFormStep {
                 this.ownersPayload = this.ownersPayload.filter(owner => owner.id !== '');
                 this.patchBusiness({
                     payload: {
+                        representative: { is_owner: true },
                         owners: [{ id: this.representative.id }, ...this.ownersPayload],
                     },
                     onSuccess: () => {

package/dist/collection/components/business-forms/schemas/schema-validations.js

@@ -1,5 +1,5 @@
 import { string } from "yup";
-import StateOptions from "../../../utils/state-options";
+import checkoutBillingStateOptions from "../../../utils/checkout-billing-state-options";
 import { CountryCode } from "../../../utils/country-codes";
 import { countryValidation } from "../utils/country-config";
 import { businessServiceReceivedOptions, bankAccountTypeOptions, } from "../utils/business-form-options";
@@ -158,7 +158,7 @@ export const cityValidation = string()
     .max(50, 'City must be less than 50 characters')
     .transform(transformEmptyString);
 export const stateValidation = string()
-    .oneOf(StateOptions.map((option) => option.value), 'Enter a 2-letter state abbreviation, such as CA')
+    .oneOf(checkoutBillingStateOptions.map((option) => option.value), 'Select a valid state or province')
     .transform(transformEmptyString);
 export const postalValidation = string()
     .matches(/^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/, 'Enter valid postal code')

package/dist/collection/components/checkout/billing-form/billing-form-full.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { fullBillingSchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { Header3 } from "../../../ui-components";
-import StateOptions from "../../../utils/state-options";
+import checkoutBillingStateOptions from "../../../utils/checkout-billing-state-options";
 import { FormController } from "../../../ui-components/form/form";
 import { checkoutStore, onChange } from "../../../store/checkout.store";
 export class BillingFormFull {
@@ -45,7 +45,7 @@ export class BillingFormFull {
             return null;
         }
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
+        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State / Province', options: checkoutBillingStateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
     }
     static get is() { return "billing-form-full"; }
     static get properties() {

package/dist/collection/components/checkout/billing-form/billing-form-schema.js

@@ -5,7 +5,7 @@ export const fullBillingSchema = () => object({
     address_line1: lineOneValidation.required('Enter street address'),
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.required('Enter city'),
-    address_state: stateValidation.required('Select state'),
+    address_state: stateValidation.required('Select state or province'),
     address_postal_code: postalValidation.required('Enter postal code'),
 });
 export const postalOnlySchema = () => object({

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"
             }];
     }
 }