@justifi/webcomponents 4.20.1 → 4.22.0

package/dist/esm/{Analytics-b0f6936a.js → Analytics-777962a4.js}

@@ -1,6 +1,6 @@
-import { p as packageJson } from './package-2ef16e2c.js';
+import { p as packageJson } from './package-5144835c.js';
 import { c as config } from './config-27764a9d.js';
-import { A as Api } from './Api-c8abc2e0.js';
+import { A as Api } from './Api-391d00e2.js';
 
 class AnalyticsService {
     async record(body) {

package/dist/esm/{Api-c8abc2e0.js → Api-391d00e2.js}

@@ -76,12 +76,14 @@ const Api = ({ authToken, apiOrigin }) => {
             'Content-Type': 'application/json',
         };
     }
-    async function makeRequest(endpoint, method, params, body, signal) {
+    async function makeRequest(endpoint, method, params, body, signal, headers) {
         const url = `${apiOrigin}/v1/${endpoint}`;
         const requestUrl = params ? `${url}?${new URLSearchParams(params)}` : url;
+        const defaultHeaders = await getAuthorizationHeader();
+        const mergedHeaders = Object.assign(Object.assign({}, defaultHeaders), headers);
         const response = await fetch(requestUrl, {
             method: method,
-            headers: await getAuthorizationHeader(),
+            headers: mergedHeaders,
             body: body,
             signal: signal,
         });
@@ -90,8 +92,8 @@ const Api = ({ authToken, apiOrigin }) => {
         }
         handleError(requestUrl);
     }
-    async function get(endpoint, params, signal) {
-        return makeRequest(endpoint, 'GET', params, null, signal);
+    async function get(endpoint, params, signal, headers) {
+        return makeRequest(endpoint, 'GET', params, null, signal, headers);
     }
     async function post(endpoint, body, params, signal) {
         return makeRequest(endpoint, 'POST', params, JSON.stringify(body), signal);

package/dist/esm/Checkout-0b4086f8.js

@@ -0,0 +1,83 @@
+class Completion {
+    constructor(data) {
+        this.payment_mode = ICheckoutPaymentMode[data.payment_mode];
+        this.payment_token = data.payment_token;
+        this.payment_status = data.payment_status;
+        this.payment_response = data.payment_response;
+        this.payment_error_code = data.payment_error_code;
+        this.payment_error_description = data.payment_error_description;
+        this.checkout_id = data.checkout_id;
+        this.additional_transactions = data.additional_transactions;
+        this.payment_id = data.payment_id;
+        this.payment_method_id = data.payment_method_id;
+        this.status = data.status;
+        this.created_at = data.created_at;
+        this.updated_at = data.updated_at;
+    }
+}
+class Checkout {
+    constructor(data) {
+        var _a;
+        this.id = data.id;
+        this.description = data.description;
+        this.payment_intent_id = data.payment_intent_id;
+        this.account_id = data.account_id;
+        this.platform_account_id = data.platform_account_id;
+        this.payment_amount = data.payment_amount;
+        this.payment_client_id = data.payment_client_id;
+        this.payment_description = data.payment_description;
+        this.payment_methods = data.payment_methods;
+        this.payment_method_group_id = data.payment_method_group_id;
+        this.payment_settings = data.payment_settings;
+        this.bnpl = data.bnpl;
+        this.total_amount = data.total_amount;
+        this.insurance_amount = data.insurance_amount;
+        this.status = data.status;
+        this.payment_currency = data.payment_currency;
+        this.mode = data.mode;
+        this.statement_descriptor = data.statement_descriptor;
+        this.application_fees = data.application_fees;
+        this.successful_payment_id = data.successful_payment_id;
+        this.created_at = data.created_at;
+        this.updated_at = data.updated_at;
+        this.completions = (_a = data.completions) === null || _a === void 0 ? void 0 : _a.map((completion) => new Completion(completion));
+    }
+    get payment_mode() {
+        var _a, _b, _c, _d, _e, _f;
+        let paymentMode;
+        if (!this.completions || this.completions.length === 0) {
+            return ICheckoutPaymentMode.unknown;
+        }
+        const sortedCompletions = this.completions.sort((a, b) => {
+            return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
+        });
+        const lastCompletion = sortedCompletions[0];
+        if (lastCompletion.payment_mode) {
+            paymentMode = lastCompletion.payment_mode;
+        }
+        else if ((_c = (_b = (_a = lastCompletion.payment_response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.payment_method) === null || _c === void 0 ? void 0 : _c.card) {
+            paymentMode = ICheckoutPaymentMode.card;
+        }
+        else if ((_f = (_e = (_d = lastCompletion.payment_response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.payment_method) === null || _f === void 0 ? void 0 : _f.bank_account) {
+            paymentMode = ICheckoutPaymentMode.bank_account;
+        }
+        return paymentMode;
+    }
+    ;
+}
+var ICheckoutPaymentMode;
+(function (ICheckoutPaymentMode) {
+    ICheckoutPaymentMode["bnpl"] = "Buy Now Pay Later";
+    ICheckoutPaymentMode["ecom"] = "E-commerce";
+    ICheckoutPaymentMode["card"] = "Card";
+    ICheckoutPaymentMode["bank_account"] = "Bank Account";
+    ICheckoutPaymentMode["card_present"] = "Card Present";
+    ICheckoutPaymentMode["unknown"] = "";
+})(ICheckoutPaymentMode || (ICheckoutPaymentMode = {}));
+var CompletionStatuses;
+(function (CompletionStatuses) {
+    CompletionStatuses["failed"] = "failed";
+    CompletionStatuses["succeeded"] = "succeeded";
+})(CompletionStatuses || (CompletionStatuses = {}));
+
+export { Checkout as C };

package/dist/esm/{Payment-6bf26fe2.js → Payment-30790721.js}

@@ -10,6 +10,12 @@ var PaymentMethodTypes;
     PaymentMethodTypes["sezzle"] = "sezzle";
     PaymentMethodTypes["saved"] = "saved";
 })(PaymentMethodTypes || (PaymentMethodTypes = {}));
+var PaymentTypes;
+(function (PaymentTypes) {
+    PaymentTypes["card"] = "Card";
+    PaymentTypes["bankAccount"] = "ACH";
+    PaymentTypes["unknown"] = "Unknown";
+})(PaymentTypes || (PaymentTypes = {}));
 var PaymentStatuses;
 (function (PaymentStatuses) {
     PaymentStatuses["pending"] = "pending";
@@ -17,6 +23,7 @@ var PaymentStatuses;
     PaymentStatuses["authorized"] = "authorized";
     PaymentStatuses["succeeded"] = "succeeded";
     PaymentStatuses["failed"] = "failed";
+    PaymentStatuses["canceled"] = "canceled";
     PaymentStatuses["disputed"] = "disputed";
     PaymentStatuses["fully_refunded"] = "fully_refunded";
     PaymentStatuses["partially_refunded"] = "partially_refunded";
@@ -115,6 +122,14 @@ class Payment {
             return PaymentDisputedStatuses.open;
         }
     }
+    get paymentType() {
+        if (this.payment_method) {
+            return this.payment_method.card ? PaymentTypes.card : PaymentTypes.bankAccount;
+        }
+        else {
+            return PaymentTypes.unknown;
+        }
+    }
 }
 
 export { Payment as P, PaymentMethodTypes as a };

package/dist/esm/SubAccount-7f7e4c56.js

@@ -0,0 +1,102 @@
+var PayoutStatuses;
+(function (PayoutStatuses) {
+    PayoutStatuses["paid"] = "paid";
+    PayoutStatuses["failed"] = "failed";
+    PayoutStatuses["forwarded"] = "forwarded";
+    PayoutStatuses["scheduled"] = "scheduled";
+    PayoutStatuses["in_transit"] = "in_transit";
+    PayoutStatuses["canceled"] = "canceled";
+})(PayoutStatuses || (PayoutStatuses = {}));
+var PayoutStatusesSafeNames;
+(function (PayoutStatusesSafeNames) {
+    PayoutStatusesSafeNames["paid"] = "Paid";
+    PayoutStatusesSafeNames["failed"] = "Failed";
+    PayoutStatusesSafeNames["forwarded"] = "Forwarded";
+    PayoutStatusesSafeNames["scheduled"] = "Scheduled";
+    PayoutStatusesSafeNames["in_transit"] = "In Transit";
+    PayoutStatusesSafeNames["canceled"] = "Canceled";
+})(PayoutStatusesSafeNames || (PayoutStatusesSafeNames = {}));
+class Payout {
+    constructor(payout) {
+        this.id = payout.id;
+        this.account_id = payout.account_id;
+        this.amount = payout.amount;
+        this.bank_account = payout.bank_account;
+        this.currency = payout.currency;
+        this.delivery_method = payout.delivery_method || 'standard';
+        this.description = payout.description;
+        this.deposits_at = payout.deposits_at;
+        this.fees_total = payout.fees_total;
+        this.refunds_count = payout.refunds_count;
+        this.refunds_total = payout.refunds_total;
+        this.payments_count = payout.payments_count;
+        this.payments_total = payout.payments_total;
+        this.payout_type = payout.payout_type;
+        this.other_total = payout.other_total;
+        this.status = payout.status;
+        this.metadata = payout.metadata;
+        this.created_at = payout.created_at;
+        this.updated_at = payout.updated_at;
+    }
+}
+
+var TerminalStatuses;
+(function (TerminalStatuses) {
+    TerminalStatuses["connected"] = "connected";
+    TerminalStatuses["disconnected"] = "disconnected";
+    TerminalStatuses["unknown"] = "unknown";
+})(TerminalStatuses || (TerminalStatuses = {}));
+var TerminalProviders;
+(function (TerminalProviders) {
+    TerminalProviders["verifone"] = "verifone";
+})(TerminalProviders || (TerminalProviders = {}));
+class Terminal {
+    constructor(data) {
+        this.id = data.id || '';
+        this.status = data.status;
+        this.account_id = data.account_id || '';
+        this.platform_account_id = data.platform_account_id || '';
+        this.provider = data.provider || '';
+        this.provider_id = data.provider_id || '';
+        this.created_at = data.created_at || '';
+        this.updated_at = data.updated_at || '';
+        this.verified_at = data.verified_at || '';
+        this.nickname = data.nickname || '';
+    }
+}
+
+var AccountType;
+(function (AccountType) {
+    AccountType["test"] = "test";
+    AccountType["live"] = "live";
+})(AccountType || (AccountType = {}));
+var AccountStatus;
+(function (AccountStatus) {
+    AccountStatus["created"] = "created";
+    AccountStatus["submitted"] = "submitted";
+    AccountStatus["information_needed"] = "information_needed";
+    AccountStatus["rejected"] = "rejected";
+    AccountStatus["enabled"] = "enabled";
+    AccountStatus["disabled"] = "disabled";
+    AccountStatus["archived"] = "archived";
+})(AccountStatus || (AccountStatus = {}));
+class SubAccount {
+    constructor(subAccount) {
+        this.id = subAccount.id;
+        this.name = subAccount.name;
+        this.account_type = subAccount.account_type;
+        this.status = subAccount.status;
+        this.currency = subAccount.currency;
+        this.platform_account_id = subAccount.platform_account_id;
+        this.payout_account_id = subAccount.payout_account_id;
+        this.business_id = subAccount.business_id;
+        this.application_fee_rates = subAccount.application_fee_rates;
+        this.processing_ready = subAccount.processing_ready;
+        this.payout_ready = subAccount.payout_ready;
+        this.related_accounts = subAccount.related_accounts;
+        this.created_at = subAccount.created_at;
+        this.updated_at = subAccount.updated_at;
+    }
+}
+
+export { Payout as P, SubAccount as S, Terminal as T };

package/dist/esm/additional-questions-details_5.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-57431c24.js';
-import { c as DetailItem, D as DetailSectionTitle } from './utils-01413a95.js';
-import { i as isEmptyObject, s as snakeCaseToHumanReadable, e as formatMediumDate } from './utils-e66d8bca.js';
+import { c as DetailItem, D as DetailSectionTitle } from './utils-218275b7.js';
+import { i as isEmptyObject, s as snakeCaseToHumanReadable, d as formatMediumDate } from './utils-3daada24.js';
 
 const sharedBusinessDetailsCss$4 = ".flex-1{flex:1}";
 const AdditionalQuestionsDetailsStyle0 = sharedBusinessDetailsCss$4;

package/dist/esm/{business-additional-questions-schema-a5583cf8.js → business-additional-questions-schema-97f52255.js}

@@ -1,5 +1,5 @@
-import { c as create$3 } from './index.esm-fc4f5c0c.js';
-import { b as businessNameValidation, w as websiteUrlValidation, e as emailValidation, p as phoneValidation, d as doingBusinessAsValidation, a as businessClassificationValidation, i as industryValidation, t as taxIdValidation, c as dateOfIncorporationValidation, r as revenueValidation, f as paymentVolumeValidation, g as whenServiceReceivedValidation, h as recurringPaymentsValidation, j as recurringPaymentsPercentageValidation, s as seasonalBusinessValidation, o as otherPaymentDetailsValidation } from './schema-validations-e725d701.js';
+import { c as create$3 } from './index.esm-ed37201b.js';
+import { b as businessNameValidation, w as websiteUrlValidation, e as emailValidation, p as phoneValidation, d as doingBusinessAsValidation, a as businessClassificationValidation, i as industryValidation, t as taxIdValidation, c as dateOfIncorporationValidation, r as revenueValidation, f as paymentVolumeValidation, g as whenServiceReceivedValidation, h as recurringPaymentsValidation, j as recurringPaymentsPercentageValidation, s as seasonalBusinessValidation, o as otherPaymentDetailsValidation } from './schema-validations-c1728516.js';
 
 const businessCoreInfoSchema = (allowOptionalFields) => {
     const schema = create$3({

package/dist/esm/business-details-core.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { L as LoadingState, E as ErrorState } from './utils-01413a95.js';
-import { S as StyledHost } from './styled-host-3171ae1f.js';
+import { L as LoadingState, E as ErrorState } from './utils-218275b7.js';
+import { S as StyledHost } from './styled-host-e0ddb759.js';
 
 var RENDER_STATES;
 (function (RENDER_STATES) {

package/dist/esm/{business-form-types-1bc5fe08.js → business-form-types-8fd61b0e.js}

@@ -9,6 +9,17 @@ var BusinessFormStep;
     BusinessFormStep["documentUpload"] = "documentUpload";
     BusinessFormStep["termsAndConditions"] = "termsAndConditions";
 })(BusinessFormStep || (BusinessFormStep = {}));
+var BusinessFormStepV2;
+(function (BusinessFormStepV2) {
+    BusinessFormStepV2["businessInfo"] = "business_info";
+    BusinessFormStepV2["legalAddress"] = "legal_address";
+    BusinessFormStepV2["additionalQuestions"] = "additional_questions";
+    BusinessFormStepV2["representative"] = "representative";
+    BusinessFormStepV2["owners"] = "owners";
+    BusinessFormStepV2["bankAccount"] = "bank_account";
+    BusinessFormStepV2["documentUpload"] = "document_upload";
+    BusinessFormStepV2["termsAndConditions"] = "terms_and_conditions";
+})(BusinessFormStepV2 || (BusinessFormStepV2 = {}));
 var BusinessFormServerErrors;
 (function (BusinessFormServerErrors) {
     BusinessFormServerErrors["fetchData"] = "Error retrieving business data";
@@ -36,4 +47,4 @@ var DocumentFormServerErrors;
     DocumentFormServerErrors["sendData"] = "Error uploading document data";
 })(DocumentFormServerErrors || (DocumentFormServerErrors = {}));
 
-export { BusinessFormServerErrors as B, BusinessFormClickActions as a, BusinessFormStep as b };
+export { BusinessFormServerErrors as B, BusinessFormClickActions as a, BusinessFormStep as b, BusinessFormStepV2 as c };

package/dist/esm/{business-identity-schema-9e3269fb.js → business-identity-schema-434e16bc.js}

@@ -1,5 +1,5 @@
-import { c as create$3, a as create$6 } from './index.esm-fc4f5c0c.js';
-import { l as lineOneValidation, k as lineTwoValidation, m as cityValidation, n as stateValidation, q as postalValidation, u as identityNameValidation, v as identityTitleValidation, e as emailValidation, p as phoneValidation, x as dobValidation, y as ssnValidation } from './schema-validations-e725d701.js';
+import { c as create$3, a as create$6 } from './index.esm-ed37201b.js';
+import { l as lineOneValidation, k as lineTwoValidation, m as cityValidation, n as stateValidation, q as postalValidation, u as identityNameValidation, v as identityTitleValidation, e as emailValidation, p as phoneValidation, x as dobValidation, y as ssnValidation } from './schema-validations-c1728516.js';
 
 const addressSchema = (allowOptionalFields) => {
     const schema = create$3({

package/dist/esm/{business.service-1f589b6e.js → business.service-97a3da69.js}

@@ -1,5 +1,5 @@
 import { c as config } from './config-27764a9d.js';
-import { A as Api } from './Api-c8abc2e0.js';
+import { A as Api } from './Api-391d00e2.js';
 
 class BusinessService {
     async fetchBusiness(businessId, authToken) {

package/dist/esm/{check-pkg-version-10cadb08.js → check-pkg-version-bac8fac0.js}

@@ -1,4 +1,4 @@
-import { p as packageJson } from './package-2ef16e2c.js';
+import { p as packageJson } from './package-5144835c.js';
 
 const latestVersion = async (packageName) => {
     const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');

package/dist/esm/checkout.service-ef1549c6.js

@@ -0,0 +1,34 @@
+import { c as config } from './config-27764a9d.js';
+import { A as Api } from './Api-391d00e2.js';
+import './Checkout-0b4086f8.js';
+import './Pagination-afc8f96d.js';
+import './Payment-30790721.js';
+import './SubAccount-7f7e4c56.js';
+
+class CheckoutService {
+    async fetchCheckout(authToken, checkoutId) {
+        const endpoint = `checkouts/${checkoutId}`;
+        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).get(endpoint);
+    }
+    async fetchCheckouts(accountId, authToken, params, apiOrigin) {
+        if (!apiOrigin) {
+            apiOrigin = config.proxyApiOrigin;
+        }
+        const headers = { Account: accountId };
+        const api = Api({ authToken, apiOrigin: apiOrigin });
+        const endpoint = 'checkouts';
+        return api.get(endpoint, params, null, headers);
+    }
+    async complete(authToken, checkoutId, payment) {
+        const endpoint = `checkouts/${checkoutId}/complete`;
+        const payload = {
+            payment_mode: payment.payment_mode,
+        };
+        if (payment.payment_token) {
+            payload.payment_token = payment.payment_token;
+        }
+        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).post(endpoint, payload);
+    }
+}
+
+export { CheckoutService as C };

package/dist/esm/checkouts-list-core.entry.js

@@ -0,0 +1,177 @@
+import { h, r as registerInstance, c as createEvent } from './index-57431c24.js';
+import './Checkout-0b4086f8.js';
+import { p as pagingDefaults } from './Pagination-afc8f96d.js';
+import './Payment-30790721.js';
+import './SubAccount-7f7e4c56.js';
+import { o as onFilterChange } from './utils-3a4d8f3a.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state-356c7215.js';
+import { f as formatTime, a as formatDate, b as formatCurrency } from './utils-3daada24.js';
+import { T as Table } from './table-75364107.js';
+
+const MapCheckoutStatusToBadge = (status) => {
+    switch (status) {
+        case 'created':
+            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
+        case 'completed':
+            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
+        case 'attempted':
+            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
+        case 'expired':
+            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
+    }
+};
+
+const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
+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")),
+};
+const checkoutTableCells = {
+    created_at: (value) => (h("th", null,
+        h("div", { class: "fw-bold" },
+            formatDate(value),
+            " "),
+        h("div", { class: "fw-bold" },
+            formatTime(value),
+            " "))),
+    payment_amount: (value) => (h("td", null,
+        formatCurrency(value, true, true),
+        " ")),
+    payment_description: (value) => (h("td", null, value)),
+    sub_account_name: (value) => (h("td", null, value)),
+    payment_mode: (value) => (h("td", null, value)),
+    status: (value) => (h("td", { innerHTML: MapCheckoutStatusToBadge(value) })),
+};
+
+const CheckoutsListCore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rowClicked = createEvent(this, "checkout-row-clicked", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+        };
+        this.handleClickNext = (afterCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.before_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+        };
+        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 = {};
+        };
+        this.getCheckouts = undefined;
+        this.getSubAccounts = undefined;
+        this.columns = defaultColumnsKeys;
+        this.checkouts = [];
+        this.checkoutsTable = new Table([], this.columns, checkoutTableColumns, checkoutTableCells);
+        this.subAccounts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = {};
+    }
+    updateOnPropChange() {
+        this.fetchCheckouts();
+    }
+    componentWillLoad() {
+        if (this.getCheckouts && this.getSubAccounts) {
+            this.fetchCheckouts();
+        }
+    }
+    fetchCheckouts() {
+        this.loading = true;
+        this.getCheckouts({
+            params: this.params,
+            onSuccess: async ({ checkouts, pagingInfo }) => {
+                this.checkouts = checkouts;
+                this.paging = pagingInfo;
+                this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
+                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() {
+        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 subAccountParams() {
+        let accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
+        let uniqueAccountIds = [...new Set(accountIdNumbers)];
+        let 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("div", { key: '2734f704620a60a5bedc46e3e41ab758af3fcb33' }, h("checkouts-list-filters", { key: '88ec654a9e15b976c47baee51ebed8c4bd8f11d7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '929ce2e4dbee2b6aad94705b90b33527ef88f324', class: "table-wrapper" }, h("table", { key: '734d75f3f6d0189ce21560a89e9bc28628188798', class: "table table-hover" }, h("thead", { key: '6b1bba45aaa29b741cf3422902bf1d63cb89fe9a', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '54f3e19d0d8b1414e9c0df4a6b9cd59516eb0e2e', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: '7454d36c6595e8341c0405833a919c56cd09fa3d', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'b6fc81a9293727005f0a13afbf518e57efeb8469', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ce449e05b1c0643f8a2157f44f2f2af16ee08f8c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '89d0b6d1c4eb966fe0195cfe6e854a7cca10c7ed', 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: 'ac6bb6d3cf02abc3f386a7d6bf92927f4a0ad244', class: "sticky-bottom" }, h("tr", { key: '352544ebda3e9a899fcb640b350fd60c55b97d17', class: "table-light align-middle" }, h("td", { key: '2dfc279e5e94bb1c0ea75670eb6584ff39a98f4a', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'a8ba0fd21c0dd9be75662b62db78980a74d5fbc6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+    }
+    static get watchers() { return {
+        "params": ["updateOnPropChange"],
+        "getCheckouts": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
+    }; }
+};
+
+export { CheckoutsListCore as checkouts_list_core };

package/dist/esm/checkouts-list-filters.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h } from './index-57431c24.js';
+
+const CheckoutsListFilters = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.params = {};
+        this.setParamsOnChange = undefined;
+        this.clearParams = undefined;
+    }
+    get checkoutStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Created', value: 'created' },
+            { label: 'Completed', value: 'completed' },
+            { label: 'Attempted', value: 'attempted' },
+            { label: 'Expired', value: 'expired' },
+        ];
+    }
+    get checkoutPaymentModeOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'E-commerce', value: 'ecom' },
+            { label: 'BNPL', value: 'bnpl' },
+        ];
+    }
+    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 || '' })))));
+    }
+};
+
+export { CheckoutsListFilters as checkouts_list_filters };