@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/module/checkout-core.js

@@ -3,35 +3,36 @@ import { c as formatCurrency } from './utils2.js';
 import { c as config } from './config.js';
 import { C as Checkout } from './Checkout.js';
 import { a as ComponentErrorSeverity } from './ComponentError.js';
-import { i as insuranceValuesOn, v as validateInsuranceValues, a as insuranceValues } from './insurance-state.js';
+import { i as insuranceValuesOn, v as validateInsuranceValues, H as Header2, a as insuranceValues } from './insurance-state.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
+import { t as text } from './parts.js';
 import { S as Skeleton } from './skeleton.js';
-import { d as defineCustomElement$c } from './custom-popper2.js';
-import { d as defineCustomElement$b } from './form-control-error-text2.js';
-import { d as defineCustomElement$a } from './form-control-select2.js';
-import { d as defineCustomElement$9 } from './form-control-text2.js';
-import { d as defineCustomElement$8 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$7 } from './billing-form.js';
-import { d as defineCustomElement$6 } from './new-payment-method.js';
-import { d as defineCustomElement$5 } from './payment-method-form.js';
+import { d as defineCustomElement$5, H as Header3 } from './new-payment-method.js';
+import './details.js';
+import { d as defineCustomElement$h } from './bank-account-form2.js';
+import { d as defineCustomElement$g } from './card-form2.js';
+import { d as defineCustomElement$f } from './custom-popper2.js';
+import { d as defineCustomElement$e } from './form-control-checkbox2.js';
+import { d as defineCustomElement$d } from './form-control-help-text3.js';
+import { d as defineCustomElement$c } from './form-control-radio2.js';
+import { d as defineCustomElement$b } from './form-control-select2.js';
+import { d as defineCustomElement$a } from './form-control-text2.js';
+import { d as defineCustomElement$9 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$8 } from './hidden-input2.js';
+import { d as defineCustomElement$7 } from './iframe-input2.js';
+import { d as defineCustomElement$6 } from './billing-form.js';
 import { d as defineCustomElement$4 } from './payment-method-options.js';
 import { d as defineCustomElement$3 } from './save-new-payment-method.js';
 import { d as defineCustomElement$2 } from './saved-payment-method.js';
 import { d as defineCustomElement$1 } from './sezzle-payment-method.js';
 
-const checkoutCoreCss = ":host{display:block}justifi-payment-method-form{display:block;margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}.jfi-checkout-core{color:var(--jfi-body-color)}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){font-family:var(--jfi-layout-font-family);background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}*::part(invalid-feedback){color:var(--jfi-error-message-color);font-size:var(--jfi-error-message-font-size);margin:var(--jfi-error-message-margin);line-height:normal}.jfi-submit-button{font-family:var(--jfi-layout-font-family);color:var(--jfi-submit-button-color);background-color:var(--jfi-submit-button-background-color);border-color:var(--jfi-submit-button-border-color);padding:var(--jfi-submit-button-padding);font-size:var(--jfi-submit-button-font-size);border-radius:var(--jfi-submit-button-border-radius);width:var(--jfi-submit-button-width);box-shadow:var(--jfi-submit-button-box-shadow);line-height:var(--jfi-submit-button-line-height);text-transform:var(--jfi-submit-button-text-transform)}.jfi-submit-button:hover{color:var(--jfi-submit-button-color-hover);background-color:var(--jfi-submit-button-background-color-hover);border-color:var(--jfi-submit-button-border-color-hover)}.jfi-submit-button:focus{color:var(--jfi-submit-button-color-focus);background-color:var(--jfi-submit-button-background-color-focus);border-color:var(--jfi-submit-button-border-color-focus)}.btn.jfi-submit-button:active{color:var(--jfi-submit-button-color-active);background-color:var(--jfi-submit-button-background-color-active);border-color:var(--jfi-submit-button-border-color-active)}.btn.jfi-submit-button-loading{min-width:75px;color:var(--jfi-submit-button-color-loading);background-color:var(--jfi-submit-button-background-color-loading);border-color:var(--jfi-submit-button-border-color-loading)}.btn.jfi-submit-button-loading .spinner-border{border-top-color:var(--jfi-submit-button-color-loading);border-bottom-color:var(--jfi-submit-button-color-loading);border-left-color:var(--jfi-submit-button-color-loading)}";
-const JustifiCheckoutCoreStyle0 = checkoutCoreCss;
-
-const headerCss = ".jfi-header{color:var(--jfi-header-color);border-bottom:var(--jfi-header-border)}";
-const JustifiCheckoutCoreStyle1 = headerCss;
-
 const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.submitted = createEvent(this, "submitted", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.loaded = createEvent(this, "loaded", 7);
         this.completeCheckout = async (payment) => {
@@ -41,8 +42,8 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
                 onError: this.onError,
             });
         };
-        this.onSubmitted = (data) => {
-            this.submitted.emit(data);
+        this.onSubmitted = (response) => {
+            this.submitEvent.emit({ response: response });
             this.renderState = 'success';
         };
         this.onError = ({ error, code, severity }) => {
@@ -143,16 +144,15 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { variant: "rounded", height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     get summary() {
         var _a, _b;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
     }
     render() {
-        return (h(StyledHost, { key: '5f0d9ae550582f13376cc242bd8654e440f83219' }, h("div", { key: '6acd2acafa61be4a59b6ebbfdd7f14aac282d1dc', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '23089c7a0e688fc44ab66dc46470f115bb430d0f', class: "col-12" }, h("h2", { key: '1888832c214484c0904135029f5f6bbdba356049', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '47cac0b14213043a8b7c15127c17b51e92e6bef3', class: "col-12" }, h("slot", { key: '3548f92bee3b6b23bd74a8578601b1f1aac05960', name: "insurance" })), h("div", { key: 'ee3a5b2a7598ded7c88a17400e01b4dd8a4048bf', class: "col-12 mt-4" }, h("h2", { key: '65d196aa405f018a2f0c6606363a6d3fc0f957d6', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: '10b7613dec7240a342d147c11431a9217fd514e5', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: '29d3f1cca38f76f8cdee726cc779a0e0853124a2', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: 'ebfdd182534f510887a8921d89054ae329d01cfd', class: "col-12" }, h("div", { key: '1a607695a7de0ef135e9ae2ee1ac63e174e71135', class: "d-flex justify-content-end" }, h(Button, { key: 'f3e9b863354b022f872b27434e1a020d03c6979e', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+        return (h(StyledHost, { key: '7ea5d909a307d335327b652bc247718a7b2973ff' }, h("div", { key: '0f7e9baffebadad78c28c318a770b681cabd7579', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2453b63f1a3cffe56a85b38005a8e3cabd666f47', class: "col-12" }, h(Header2, { key: 'ea4bbc494746c1042d8976aa72f66ebc20f257ef', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'bee560cf279315e76551513c5135ab1a0b180de4', class: "col-12" }, h("slot", { key: '3b2260c580a2a3a4b8bafe46d215cd5821b17815', name: "insurance" })), h("div", { key: '6d0f4b6ea7ea611fe4eacc13e6cf1bf2cddfba64', class: "col-12 mt-4" }, h(Header2, { key: '1eae72a345d5f255573237cf45b4b6359ff5729c', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '89a6fefa7693ef3094128485531cb7c57a314b36', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: 'ffe09e15c81fbb821fc99031c13b753bfa943596', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '8b635fa70dbaadc8530ccb7105ed9590ce87e2ed', class: "col-12" }, h("div", { key: '9caa17a123c1ff08391c48632facfb4fe33809d2', class: "d-flex justify-content-end" }, h(Button, { key: '53faa444e15b719e9e41d8ce01295f841b9507d2', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
     }
-    static get style() { return JustifiCheckoutCoreStyle0 + JustifiCheckoutCoreStyle1; }
 }, [1, "justifi-checkout-core", {
         "iframeOrigin": [1025, "iframe-origin"],
         "authToken": [1, "auth-token"],
@@ -175,49 +175,74 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout-core", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-checkout-core", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CheckoutCore);
             }
             break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
         case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "form-control-tooltip":
+        case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "justifi-billing-form":
+        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-payment-method-form":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/module/checkouts-list-core2.js

@@ -3,16 +3,12 @@ import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { o as onFilterChange } from './utils3.js';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
+import { f as tableHeadCell, g as getAlternateTableCellPart, j as table, k as tableCell } from './parts.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types.js';
+import './details.js';
 import { a as formatDate, b as formatTime, c as formatCurrency } from './utils2.js';
-import { d as defineCustomElement$7 } from './checkouts-list-filters2.js';
-import { d as defineCustomElement$6 } from './custom-popper2.js';
-import { d as defineCustomElement$5 } from './form-control-error-text2.js';
-import { d as defineCustomElement$4 } from './form-control-select2.js';
-import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$2 } from './pagination-menu2.js';
-import { d as defineCustomElement$1 } from './table-filters-menu2.js';
+import { o as onQueryParamsChange, q as queryParams } from './checkouts-list-params-state.js';
+import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const MapCheckoutStatusToBadge = (status) => {
     switch (status) {
@@ -29,59 +25,50 @@ const MapCheckoutStatusToBadge = (status) => {
 
 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")),
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date each checkout occurred" }, "Processed On")),
+    payment_amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
+    payment_description: () => (h("th", { part: tableHeadCell, scope: "col", title: "The description of each checkout" }, "Payment Description")),
+    sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
+    payment_mode: () => (h("th", { part: tableHeadCell, scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each checkout" }, "Status")),
 };
 const checkoutTableCells = {
-    created_at: (value) => (h("td", { part: "table-cell" },
+    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
         h("div", { class: "fw-bold" },
             formatDate(value),
             " "),
         h("div", { class: "fw-bold" },
             formatTime(value),
             " "))),
-    payment_amount: (value) => (h("td", { part: "table-cell" },
+    payment_amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
         formatCurrency(value, true, true),
         " ")),
-    payment_description: (value) => (h("td", { part: "table-cell" }, value)),
-    sub_account_name: (value) => (h("td", { part: "table-cell" }, value)),
-    payment_mode: (value) => (h("td", { part: "table-cell" }, value)),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapCheckoutStatusToBadge(value) })),
+    payment_description: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    payment_mode: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapCheckoutStatusToBadge(value) })),
 };
 
 const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCore extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.rowClicked = createEvent(this, "checkout-row-clicked", 7);
+        this.clickEvent = createEvent(this, "click-event", 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.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedCheckoutID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedCheckoutID)
                 return;
-            this.rowClicked.emit(this.checkouts.find((checkout) => checkout.id === clickedCheckoutID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const checkoutData = this.checkouts.find((checkout) => checkout.id === clickedCheckoutID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: checkoutData });
         };
         this.getCheckouts = undefined;
         this.getSubAccounts = undefined;
@@ -92,21 +79,28 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
-        this.fetchCheckouts();
+        this.fetchData();
     }
     componentWillLoad() {
         this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
         if (this.getCheckouts && this.getSubAccounts) {
-            this.fetchCheckouts();
+            this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
-    fetchCheckouts() {
+    fetchData() {
         this.loading = true;
         this.getCheckouts({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: async ({ checkouts, pagingInfo }) => {
                 this.checkouts = checkouts;
                 this.paging = pagingInfo;
@@ -153,6 +147,10 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
             },
         });
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     get subAccountParams() {
         let accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
         let uniqueAccountIds = [...new Set(accountIdNumbers)];
@@ -172,10 +170,11 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '8d2c1fd960b2b3a66f3a1bf648b75576ad2e8857' }, h("checkouts-list-filters", { key: '18ba9bf560499112f71a690da751c8e3c4d345a7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '12cf6ee2912ac6a9518634ebd470dac5f7623aff', class: "table-wrapper" }, h("table", { key: '1ea2c118d7efb620dc1f39db55a510a8a473cb31', class: "table table-hover" }, h("thead", { key: '5e334a090be56c82b11ae7584bdf4014cc8743c7', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '233137a8b4e30bac28ded78010199bfecd0ac4e7', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'd4ed9d4bf3ac17d4dc7294b875734e02996c7444', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'a7afbb627c768139af4244da5c12fae493dceafb', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '802c43c8da770bca9a249a88d115901e9b14e102', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'f1cd197cf7d1d5d81868a5abfafa40df762ca3c8', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: 'f0c367854322c341515bc481159101e9659117c7', class: "sticky-bottom" }, h("tr", { key: '88bc665c23665eddc4c88d27acc8c8f1cb39e277', class: "table-light align-middle" }, h("td", { key: '8be265c9b43033cfd3e2c4b3f12ac6d6c104e53d', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '6abdb6091b78e58ec71ac6bf66f278ed9b6542fb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '7079f5dbb8f52d0e99da70f6975e65f2024bd7c9' }, h("div", { key: '8d73be1816687fe3af837d5853f75b5aad756f6e', class: "table-wrapper" }, h("table", { key: '3a9d8cb62a25d28660fa160de263ae80c2b67804', class: "table table-hover", part: table }, h("thead", { key: 'cc1954f52372d481e789cf5460118952633ab34e', class: "table-head sticky-top" }, h("tr", { key: '141e9d5f5e671181487a77dd01ea86d0f2927ba6', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'c6f1ba23fcda58bef598d32ec6901e7bae56fe9c', class: "table-body" }, h(TableLoadingState, { key: '746e4eaab6f4840f95a7243ac7d9a119fe4dac6c', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7d7cfed557fe138cfd56a8283da75b8fd55ef01e', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '71e438127afde6489e232ecd19f91545da9ca8fa', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '45a0d79963f2e6edd7f2f11620c0314345b3d6d5', class: "sticky-bottom" }, h("tr", { key: '8d502311b14f5f1a7cae5d00f3bff361f4816d72', class: "table-light align-middle" }, h("td", { key: '522745aa9b5d46188dd4b351debc83601c144dfe', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '41323e6e3aa31631dca4dba29e40551b9a9d5446', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getCheckouts": ["updateOnPropChange"],
         "getSubAccounts": ["updateOnPropChange"],
         "columns": ["updateOnPropChange"]
@@ -190,9 +189,10 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         "loading": [32],
         "errorMessage": [32],
         "paging": [32],
-        "params": [32]
+        "pagingParams": [32]
     }, undefined, {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getCheckouts": ["updateOnPropChange"],
         "getSubAccounts": ["updateOnPropChange"],
         "columns": ["updateOnPropChange"]
@@ -201,44 +201,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["checkouts-list-core", "checkouts-list-filters", "custom-popper", "form-control-error-text", "form-control-select", "form-control-tooltip", "pagination-menu", "table-filters-menu"];
+    const components = ["checkouts-list-core", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "checkouts-list-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CheckoutsListCore);
             }
             break;
-        case "checkouts-list-filters":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "pagination-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "table-filters-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/checkouts-list-params-state.js

@@ -0,0 +1,10 @@
+import { c as createStore } from './index2.js';
+
+const initialState = {};
+const checkoutsListQueryParams = createStore(() => initialState);
+const { state: queryParams, on: onQueryParamsChange } = checkoutsListQueryParams;
+const clearParams = () => {
+    checkoutsListQueryParams.reset();
+};
+
+export { clearParams as c, onQueryParamsChange as o, queryParams as q };

package/dist/module/config.js

@@ -1,5 +1,5 @@
 const config = {
-    iframeOrigin: "https://components.justifi.ai/v1",
+    iframeOrigin: "https://components.justifi.ai/v2",
     proxyApiOrigin: "https://wc-proxy.justifi.ai",
     proxyAuthToken: 'eyJraWQiOiJqdXN0aWZpLWUyNDgyMmU3ODE1MmEzZjRkMjU1IiwidHlwIjoiSldUIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2F1dGguanVzdGlmaS5haS8iLCJhenAiOiJvYXNfMmlsWHBqOHQ2WVlEQ0xWU0FiVFczMiIsInN1YiI6Im9hc18yaWxYcGo4dDZZWURDTFZTQWJUVzMyQHNlc3Npb25zIiwiYXVkIjoiaHR0cHM6Ly9hcGkuanVzdGlmaS5haS92MSIsImd0eSI6ImNsaWVudC1jcmVkZW50aWFscyIsInBlcm1pc3Npb25zIjpbeyJyb2xlIjoicmVhZDphY2NvdW50IiwicmVzb3VyY2VfaWQiOiJhY2NfNUV0OWlYclNTQVpSMktTb3VRR0FXaSJ9LHsicm9sZSI6InJlYWQ6YnVzaW5lc3MiLCJyZXNvdXJjZV9pZCI6ImJpel8zYmg2OWJxMXJrM2RtWE5vQUtWb251In1dLCJleHAiOjE3MTE1NTk0MTQsImlhdCI6MTcwMzc4MzQxNCwicGxhdGZvcm1fYWNjb3VudF9pZCI6ImFjY18zcmVOYjRhTll5MmlXRFpRVmN6bXg0In0.oPOoDYxzrnpE8PRUaz-FCU4KqnSuNbFTeDkl3AtMscjUkIctP1OIFh-ZGBjbH5eVH5noXCbaiin0j92dS7jx4gLpxuYT2Q8gpZbuIsT7fa58elvGeRkUUJ-AC5ueZxlv90yPWMm0OIbyrV7XZhuwYyKbV-ZczEbl2JpvBMe40CM-LdClQV66d_-Kw9a23SabBVfYgP5V-5OsagOIESvzZoO-27tGlNkV2a-hxqddDCOZv0HvRYAtp5S7EQrmRdEBu5gCNbf1eRFG424hxZUFVr2LdetYuKQLxJjDdUjf86ZwEUecrEaDSupiN1VC3CitdOwBVf6-R_N0VpN4VLVD5g',
     exampleAccountId: 'acc_5Et9iXrSSAZR2KSouQGAWi',

package/dist/module/custom-popper2.js

@@ -1876,7 +1876,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '486c7b71b1b4f6d3ad8a9b9042fe5bdfe0427443' }, h("style", { key: '54a5bed99c8cf367642c63650200376cc5a90142' }, `
+        return (h("div", { key: '153f64dde49d3c00975e4ab967092fe0eab2e096' }, h("style", { key: 'f3441ee39263f615a907d371e5a75be910e6ad80' }, `
           .popper-content {
             display: none;
           }
@@ -1884,7 +1884,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '1c4dc36300485c1c331f39998bf23127ea5e6177', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '9dbb8f23779595303814ef10762663b809447c32' }))));
+          `), h("div", { key: '840e5c3a19a9d57dda561971967130e8bf53518b', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '2b9bbfe2b4cd7bfb5ff3a6c21a99dea7e23d1124' }))));
     }
 }, [4, "custom-popper", {
         "placement": [1],

package/dist/module/customer-details.js

@@ -1,26 +1,68 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$7 } from './custom-popper2.js';
-import { d as defineCustomElement$6 } from './form-control-error-text2.js';
-import { d as defineCustomElement$5 } from './form-control-file2.js';
-import { d as defineCustomElement$4 } from './form-control-help-text2.js';
+import { c as create$3, a as create$6, F as FormController } from './form.js';
+import { D as DisputeEvidenceDocument, a as DisputeResponseFormStep } from './dispute-response-form-types.js';
+import { J as heading5 } from './parts.js';
+import { d as defineCustomElement$6 } from './custom-popper2.js';
+import { d as defineCustomElement$5 } from './form-control-file-v22.js';
+import { d as defineCustomElement$4 } from './form-control-help-text3.js';
 import { d as defineCustomElement$3 } from './form-control-text2.js';
 import { d as defineCustomElement$2 } from './form-control-textarea2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
+const CustomerDetailsSchema = create$3({
+    customer_name: create$6().nullable(),
+    customer_email_address: create$6().nullable(),
+    customer_billing_address: create$6().nullable(),
+});
+
 const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.inputHandler = (name, value) => {
+            this.form.setValues(Object.assign(Object.assign({}, this.form.values.getValue()), { [name]: value }));
+        };
+        this.handleFileSelection = (e) => {
+            const target = e.target;
+            const name = target.name;
+            const files = target.files;
+            for (const file of files) {
+                this.documentList.push(new DisputeEvidenceDocument(file, name));
+            }
+        };
+        this.disputeResponse = undefined;
+        this.form = undefined;
+        this.errors = {};
+        this.documentList = [];
+    }
+    async validateAndSubmit(onSuccess) {
+        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.customerDetails));
+    }
+    ;
+    componentWillLoad() {
+        this.form = new FormController(CustomerDetailsSchema);
+    }
+    componentDidLoad() {
+        this.form.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
     render() {
-        return (h("div", { key: '4511521cc0b5d152847fe47515a932bc25632b69' }, h("div", { key: 'ccc20447c74727d926159c4bbd78d7aa81f406fb', class: "row gy-3" }, h("div", { key: '09d693c977d9f55978df56fd94f37e65fcf42548', class: "col-12" }, h("h2", { key: 'ef47704c5d35b7b18e49603e050a1128728219b4', class: "h5" }, "Customer Details")), h("div", { key: '0f6ee829c192d15b22208d207ab34d7c433b1c8d', class: "col-12" }, h("form-control-text", { key: '8f64ca680c0dcd4b41d93523a62e0b3bbf1daf3e', label: "Full Name", name: "customer_name" })), h("div", { key: '8789d52f77c2cb673260fa12382c31725e2a7ffa', class: "col-12" }, h("form-control-text", { key: 'af48dedd7c9ce318a7d1009c1227cceda2d799b0', label: "Email", name: "customer_email_address" })), h("div", { key: '17fdeea69f9eab82e55d63cd55af079532696d57', class: "col-12" }, h("form-control-textarea", { key: '05d930b272e0162100412bc81a05df8cd2817e21', label: "Billing Address", name: "customer_billing_address" })), h("div", { key: 'abd6e1f661bfb2b5ac54460d97283b7a1092ac79', class: "col-12" }, h("form-control-file", { key: '4ee87cf74482c31a297bcd108ddd0ad69f3d7366', label: "Customer Signature", name: "customer_signature" })), h("div", { key: 'f33ec1c7c4791828d456e27ee1dcbc665220821d', class: "col-12" }, h("form-control-file", { key: 'c2bb6a3c58eb20652566d9cb1c524b4390bbab33', label: "Customer Communication", name: "customer_communication" })))));
+        var _a, _b, _c;
+        return (h("div", { key: 'f3b9a18d93cea09e6c9f7a134ed566ad12887839' }, h("div", { key: 'f9d3594930e9ae5d5907462bbe76c242019a19bc', class: "row gy-3" }, h("div", { key: '809f4e25c8a4d8652ae4711a33321b17d35f5796', class: "col-12" }, h("h2", { key: '56f784698452620cb30b532840b02ee2ca3b6a7a', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '6775574f0e8f1047a11e3e9594f9f237aee09aa2', class: "col-12" }, h("form-control-text", { key: '4fc621b96baed074292ccbe8507a58d18f005237', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: 'f57ace60afc3a74711dc98ea054345413ff51d48', class: "col-12" }, h("form-control-text", { key: '31a88ff6476ecd98fd6def5c39778940b448da51', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '3ea9b1729c1a516fdbf33b28674e33a5ec5f200a', class: "col-12" }, h("form-control-textarea", { key: '6eb19b40b3a514db9e1ead3e57832da37d791db6', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: '363371261754410c5548fc9286a5d9edbec5e4a0', class: "col-12" }, h("form-control-file-v2", { key: 'bf3976ab48c50bb7cd6fd7c29a39a36bee8a70c5', label: "Customer Signature", name: "customer_signature", onChange: this.handleFileSelection })), h("div", { key: '7a85113b3a4c95e0571759f040a63757eead2788', class: "col-12" }, h("form-control-file-v2", { key: '686b82077404ce7c345a51b4c572452fa0491b7d', label: "Customer Communication", name: "customer_communication", onChange: this.handleFileSelection })))));
     }
-}, [0, "justifi-customer-details"]);
+}, [0, "justifi-customer-details", {
+        "disputeResponse": [8, "dispute-response"],
+        "form": [32],
+        "errors": [32],
+        "documentList": [32],
+        "validateAndSubmit": [64]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-customer-details", "custom-popper", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-text", "form-control-textarea", "form-control-tooltip"];
+    const components = ["justifi-customer-details", "custom-popper", "form-control-file-v2", "form-control-help-text", "form-control-text", "form-control-textarea", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-customer-details":
             if (!customElements.get(tagName)) {
@@ -28,16 +70,11 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-file":
+        case "form-control-file-v2":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/module/details.js

@@ -1,21 +1,19 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as ErrorState } from './utils.js';
-import { S as StyledHost } from './styled-host.js';
 
 const Details = /*@__PURE__*/ proxyCustomElement(class Details extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.errorMessage = undefined;
     }
     render() {
-        return (h(StyledHost, { key: 'c7c725936e4987ca76781b7edc73f1b67e00f21a', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
+        return (h(Host, { key: '14ab849e7b60f834d823bb6d10f8b772a1184ad4' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));
     }
-}, [1, "justifi-details", {
+}, [4, "justifi-details", {
         "errorMessage": [1, "error-message"]
     }]);
 function defineCustomElement() {