@justifi/webcomponents 4.23.0 → 5.0.0-rc-1

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

@@ -4,43 +4,39 @@ import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
-import { o as onFilterChange } from './utils3.js';
+import { g as getAlternateTableCellPart, f as tableHeadCell, 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 { j as convertToLocal, c as formatCurrency } from './utils2.js';
 import { M as MapPayoutStatusToBadge } from './payouts-status.js';
-import { d as defineCustomElement$7 } from './custom-popper2.js';
-import { d as defineCustomElement$6 } from './form-control-date2.js';
-import { d as defineCustomElement$5 } from './form-control-error-text2.js';
-import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$3 } from './pagination-menu2.js';
-import { d as defineCustomElement$2 } from './payouts-list-filters2.js';
-import { d as defineCustomElement$1 } from './table-filters-menu2.js';
+import { o as onQueryParamsChange, q as queryParams } from './payouts-list-params-state.js';
+import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
 const payoutTableColumns = {
-    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date the payout was deposited" }, "Created")),
-    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the payout" }, "Sub Account")),
-    payments_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total payments amount associated with the payout" }, "Payments")),
-    refunds_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total refunds amount associated with the payout" }, "Refunds")),
-    fees_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total fees amount associated with the payout" }, "Fees")),
-    other_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total other amount" }, "Other")),
-    amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total amount of the payout" }, "Amount")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The real-time status of each payout" }, "Status")),
-    csv: () => (h("th", { part: "table-head-cell", scope: "col", title: "Export CSV" })),
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date the payout was deposited" }, "Created")),
+    sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the payout" }, "Sub Account")),
+    payments_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total payments amount associated with the payout" }, "Payments")),
+    refunds_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total refunds amount associated with the payout" }, "Refunds")),
+    fees_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total fees amount associated with the payout" }, "Fees")),
+    other_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total other amount" }, "Other")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total amount of the payout" }, "Amount")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The real-time status of each payout" }, "Status")),
+    csv: () => (h("th", { part: tableHeadCell, scope: "col", title: "Export CSV" })),
 };
 const payoutTableCells = (downloadCSV) => ({
-    created_at: (value) => (h("td", { part: "table-cell" },
+    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
         h("div", { class: "fw-bold" },
             convertToLocal(value, { showDisplayDate: true }),
             " "))),
-    sub_account_name: (value) => (h("td", { part: "table-cell" }, value)),
-    payments_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    refunds_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    fees_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    other_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    amount: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapPayoutStatusToBadge(value) })),
-    csv: (value) => (h("td", { part: "table-cell" },
+    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    payments_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    refunds_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    fees_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    other_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPayoutStatusToBadge(value) })),
+    csv: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
         h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(value); } }, "CSV"))),
 });
 
@@ -48,7 +44,7 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
     constructor() {
         super();
         this.__registerHost();
-        this.rowClicked = createEvent(this, "payout-row-clicked", 7);
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.downloadCSV = (payoutId) => {
             this.getPayoutCSV({
@@ -63,28 +59,19 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
             });
         };
         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 clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedPayoutID)
                 return;
-            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const payoutData = this.payouts.find((payout) => payout.id === clickedPayoutID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: payoutData });
         };
         this.getPayouts = undefined;
         this.getSubAccounts = undefined;
@@ -96,21 +83,28 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
-        this.fetchPayouts();
+        this.fetchData();
     }
     componentWillLoad() {
         this.payoutsTable = new Table(this.payouts, this.columns, payoutTableColumns, payoutTableCells(this.downloadCSV));
         if (this.getPayouts && this.getSubAccounts) {
-            this.fetchPayouts();
+            this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
-    fetchPayouts() {
+    fetchData() {
         this.loading = true;
         this.getPayouts({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: ({ payouts, pagingInfo }) => {
                 this.payouts = payouts;
                 this.paging = pagingInfo;
@@ -157,6 +151,10 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
             },
         });
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     get subAccountParams() {
         let accountIdNumbers = this.payouts.map((payout) => payout.account_id);
         let uniqueAccountIds = [...new Set(accountIdNumbers)];
@@ -176,10 +174,11 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '3768192e14155536f0fb53d2abc5f1e92b04cc01' }, h("payouts-list-filters", { key: '3fec8cfc6b9d68798148e9eea0725079d32e3406', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '291b7a53bb5657c87568169ebccc1dead39d10c9', class: "table-wrapper" }, h("table", { key: '624389fddf8b00dcaf70a75693b542b2f4af4982', class: "table table-hover" }, h("thead", { key: '1e28a2a6988eac106c40b8f029d9fa2118cbdb6d', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1f05dd4c54fb350545cf6b1b3e86b80d96932585', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '3af09dc61461f31f61c2cfdf7896b7dfe9441450', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '715a3d0732e45810bdfdcbe5c7db8f29934a1a62', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '3aac2554828eac0c6b0645da5df811b5e5463235', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'cf2b312830b9f59550346085f00bc519e496b2b2', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.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: '3d7389fb825a7eafcd456b3ae95b115a4218fea3', class: "sticky-bottom" }, h("tr", { key: '4c10aa64144a281d8303b04f013bfcc2390f4d04', class: "table-light align-middle" }, h("td", { key: '63614e636203a5f15beb26b4d19eed393b6ea481', part: "pagination-bar", colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '7708ac8b21d2db0ec9ade773dd46cd944374ede5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: 'b32c27e9cd63eebde1bbce6634eeb8be1c804db8' }, h("div", { key: '842d7df46f21510c872e34234d70a3adef80ebd9', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '3fb2afe1a78cbb39f896d1833a06c4c976e53292', class: "table table-hover", part: table }, h("thead", { key: '65e335052e013f6bd2ddd154b0772d813b03e02f', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '0d113369ff9e4a1933b8c0f699e03ab3812d30d4', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '64eea2dda7fe52844a39fe4a78840444959c9bf8', class: "table-body" }, h(TableLoadingState, { key: '3f3fb69c8105de8374e57e7279ad0d3e4e88f777', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'df74f8ea143edbfb57efee6952c7ddffc690db8e', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'd12c61e243397de8024c8fe13e518ae3328b5d95', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.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: '23f8f411959eb2464a4f0d75830adedf5cc9d15b', class: "sticky-bottom" }, h("tr", { key: '63a62a4743ef38050ef9d6f2870fc74b5a011568', class: "table-light align-middle" }, h("td", { key: '23a7b62618db1dd52da8c43627f7d512c2f18bc1', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '3c401e3d08d930cc19c5a09e1b34c740f2dd833b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getPayouts": ["updateOnPropChange"],
         "getSubAccounts": ["updateOnPropChange"]
     }; }
@@ -194,9 +193,10 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         "loading": [32],
         "errorMessage": [32],
         "paging": [32],
-        "params": [32]
+        "pagingParams": [32]
     }, undefined, {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getPayouts": ["updateOnPropChange"],
         "getSubAccounts": ["updateOnPropChange"]
     }]);
@@ -204,44 +204,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["payouts-list-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-tooltip", "pagination-menu", "payouts-list-filters", "table-filters-menu"];
+    const components = ["payouts-list-core", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "payouts-list-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PayoutsListCore);
             }
             break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "form-control-date":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
         case "pagination-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "payouts-list-filters":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "table-filters-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

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

package/dist/module/product-or-service.js

@@ -1,27 +1,65 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './custom-popper2.js';
-import { d as defineCustomElement$4 } from './form-control-error-text2.js';
-import { d as defineCustomElement$3 } from './form-control-file2.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$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-file-v22.js';
 import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
+const ProductOrServiceSchema = create$3({
+    product_description: create$6().nullable(),
+    service_date: create$6().nullable(),
+});
+
 const ProductOrService = /*@__PURE__*/ proxyCustomElement(class ProductOrService extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.productOrService = undefined;
+        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.inputHandler = (name, value) => {
+            this.form.setValues(Object.assign(Object.assign({}, this.form.values.getValue()), { [name]: value }));
+        };
+        this.disputeResponse = undefined;
+        this.form = undefined;
+        this.errors = {};
+        this.documentList = [];
+    }
+    async validateAndSubmit(onSuccess) {
+        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.productOrService));
+    }
+    ;
+    componentWillLoad() {
+        this.form = new FormController(ProductOrServiceSchema);
+    }
+    componentDidLoad() {
+        this.form.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
     render() {
-        return (h("div", { key: '1093c8d9b1fe6875c3cd0fc8422f46d6ed5b8aae' }, h("div", { key: '6d6df2f3a1c3567bac929adde53dd91d8aee98a3', class: "row gy-3" }, h("div", { key: '0111ec6b367ab5728afba391fb62c034c68f75f4', class: "col-12" }, h("h2", { key: '850b6360c847ad3da0c16e275acd07a70dcec0c2', class: "h5" }, "Product & Service Details")), h("div", { key: 'b00fe2787f21032de5203660f6d467d2d3bbecdc', class: "col-12" }, h("form-control-text", { key: 'd7ac38a0efc9f36894227f85fbee2e2886e96757', label: "Product Description", name: "product_description" })), h("div", { key: '6cda4e7ac36e124043078b3d47513d5a4ec5cac4', class: "col-12" }, h("form-control-text", { key: '585744cbc9775643779ecb59752d1f883c4cdea0', label: "Service Date", name: "service_date" })), h("div", { key: '07e96df94d2c40fc9e0e2868cf5b8d4a519d1895', class: "col-12" }, h("form-control-file", { key: 'e98020135a597563248a5dac713d87715c11752c', label: "Service Documentation", name: "service_documentation" })))));
+        var _a, _b;
+        return (h("div", { key: 'ad4e3c33f8bc1c295ea51257afc41e6247537022' }, h("div", { key: 'a87f06ff09eadf63ee358a84759d6bd9223c76ec', class: "row gy-3" }, h("div", { key: 'a3053e1d5e2192786fab4592a3ef5a6614fa0de3', class: "col-12" }, h("h2", { key: 'e2b97bf1d8e6f964306f1d2292f00daf5f4e997d', class: "h5", part: heading5 }, "Product & Service Details")), h("div", { key: '0f4e0c72a0b145ec689e7f0a96df86d10be38423', class: "col-12" }, h("form-control-text", { key: 'dd6a94690ac454a35d3b9ddeadde3ae5926ae170', label: "Product Description", name: "product_description", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.product_description, inputHandler: this.inputHandler, errorText: this.errors.product_description })), h("div", { key: 'd9c437dfc8e02bfacc27143e16b753b7940db409', class: "col-12" }, h("form-control-text", { key: '42e638a983cf713f0055d409b305b8fca2ac6bda', label: "Service Date", name: "service_date", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.service_date, inputHandler: this.inputHandler, errorText: this.errors.service_date })), h("div", { key: 'df1f9b6153433e60973723ab20139fe3c739a4cf', class: "col-12" }, h("form-control-file-v2", { key: '6a03cdafcf9d8a4913eaf9b876500792022c58f4', label: "Service Documentation", name: "service_documentation", onChange: this.handleFileSelection, errorText: this.errors.service_documentation })))));
     }
 }, [0, "justifi-product-or-service", {
-        "productOrService": [32]
+        "disputeResponse": [8, "dispute-response"],
+        "form": [32],
+        "errors": [32],
+        "documentList": [32],
+        "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-product-or-service", "custom-popper", "form-control-error-text", "form-control-file", "form-control-text", "form-control-tooltip"];
+    const components = ["justifi-product-or-service", "custom-popper", "form-control-file-v2", "form-control-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-product-or-service":
             if (!customElements.get(tagName)) {
@@ -29,16 +67,11 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "form-control-file":
+        case "form-control-file-v2":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/module/refund-policy.js

@@ -1,25 +1,66 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-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-file2.js';
-import { d as defineCustomElement$3 } 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$5 } from './custom-popper2.js';
+import { d as defineCustomElement$4 } from './form-control-file-v22.js';
+import { d as defineCustomElement$3 } from './form-control-help-text3.js';
 import { d as defineCustomElement$2 } from './form-control-textarea2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
+const RefundPolicySchema = create$3({
+    refund_policy_disclosure: create$6().nullable(),
+    refund_refusal_explanation: create$6().nullable(),
+});
+
 const RefundPolicy = /*@__PURE__*/ proxyCustomElement(class RefundPolicy 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.refundPolicy));
+    }
+    ;
+    componentWillLoad() {
+        this.form = new FormController(RefundPolicySchema);
+    }
+    componentDidLoad() {
+        this.form.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
     render() {
-        return (h("div", { key: '7f9095e25e7fce0b5277d332f304f99d81693a72' }, h("div", { key: '9c81d685961f496f680c795d25f1d33da8693a98', class: "row gy-3" }, h("div", { key: '983622ce45a875c01b6d4479e84ce5bfe079e0d6', class: "col-12" }, h("h2", { key: '33e426cd1aabf66e97eaf2292c2e79e0f27a82c8', class: "h5" }, "Refund Policy and Receipt")), h("div", { key: '6968a33fef60038777e4b34a528c07361486262e', class: "col-12" }, h("form-control-textarea", { key: 'dcded5a84ef9104045fe228f5a498b42b7c4bc72', label: "Refund Policy Disclosure", name: "refund_policy_disclosure" })), h("div", { key: '5cf7d7017f4a43f3dbf592e2191b8ac5a53f9695', class: "col-12" }, h("form-control-textarea", { key: '81c95385cb04ef82fb23b95bc084c118a153280a', label: "Refund Refund Explanation", name: "refund_refusal_explanation" })), h("div", { key: '8ff60b9d1a1159073314905b56ecf46eb35a321e', class: "col-12" }, h("form-control-file", { key: 'f308750940e7fd12972584281169c265c28834d6', label: "Upload Refund Policy", name: "refund_policy" })), h("div", { key: '802abe379ac422c927022be29effecee97dd1694', class: "col-12" }, h("form-control-file", { key: '2d166d7768de62e5f6efb3cd466b856296ce4929', label: "Upload Receipt", name: "receipt" })))));
+        var _a, _b;
+        return (h("div", { key: '54885e971c2d21be1d3c2a4654616e6406a425e5' }, h("div", { key: 'aefe693ee221d72f44a87806ca5ddc257bbf4073', class: "row gy-3" }, h("div", { key: '5a4c220a9cbcd8accd8dd3a3e9c5db74f520f483', class: "col-12" }, h("h2", { key: 'fee6747bc31eeee7648c5af1fec4e86dd33d2f21', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: '70f2d38f553a77c6e5a4e2ec25bed11665cd56e5', class: "col-12" }, h("form-control-textarea", { key: 'a0635424932726c980d68bad1c7758159d382575', label: "Refund Policy Disclosure", name: "refund_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.refund_policy_disclosure, inputHandler: this.inputHandler })), h("div", { key: 'b63f29f32b4a2bb35ec2dbeb2d26695bd58d2c32', class: "col-12" }, h("form-control-textarea", { key: '41787fd17b44810eb19945ce7ea5f340ee40ea98', label: "Refund Refusal Explanation", name: "refund_refusal_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.refund_refusal_explanation, inputHandler: this.inputHandler })), h("div", { key: 'acff917b1af1babc1f93cf0541d9d2f22f8f4460', class: "col-12" }, h("form-control-file-v2", { key: '52bee3670ca1cae28fd2d07033796245b13306d4', label: "Upload Refund Policy", name: "refund_policy", onChange: this.handleFileSelection })), h("div", { key: '6e63ed1828f61cfec3882fba0ce0439668111a7a', class: "col-12" }, h("form-control-file-v2", { key: '99a13cfd6c0e662794c013368209c88065a7e404', label: "Upload Receipt", name: "receipt", onChange: this.handleFileSelection })))));
     }
-}, [0, "justifi-refund-policy"]);
+}, [0, "justifi-refund-policy", {
+        "disputeResponse": [8, "dispute-response"],
+        "form": [32],
+        "errors": [32],
+        "documentList": [32],
+        "validateAndSubmit": [64]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-refund-policy", "custom-popper", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-textarea", "form-control-tooltip"];
+    const components = ["justifi-refund-policy", "custom-popper", "form-control-file-v2", "form-control-help-text", "form-control-textarea", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-refund-policy":
             if (!customElements.get(tagName)) {
@@ -27,16 +68,11 @@ function defineCustomElement() {
             }
             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-file":
+        case "form-control-file-v2":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/module/representative-details2.js

@@ -2,9 +2,6 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { i as isEmptyObject, f as formatMediumDate } from './utils2.js';
 
-const sharedBusinessDetailsCss = ".flex-1{flex:1}";
-const RepresentativeDetailsStyle0 = sharedBusinessDetailsCss;
-
 const JustifiRepresentativeDetails = /*@__PURE__*/ proxyCustomElement(class JustifiRepresentativeDetails extends HTMLElement {
     constructor() {
         super();
@@ -15,9 +12,8 @@ const JustifiRepresentativeDetails = /*@__PURE__*/ proxyCustomElement(class Just
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (isEmptyObject(this.representative))
             return null;
-        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Representative Details" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Address", value: (_d = (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d.line1 }), h(DetailItem, { title: "Created At", value: ((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) && formatMediumDate((_f = this.representative) === null || _f === void 0 ? void 0 : _f.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Is Owner?", value: (_h = this.representative) === null || _h === void 0 ? void 0 : _h.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && formatMediumDate(new Date(Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_year), Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_month) - 1, Number((_l = this.representative) === null || _l === void 0 ? void 0 : _l.dob_day))) }), h(DetailItem, { title: "Email", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.email }), h(DetailItem, { title: "Phone", value: (_o = this.representative) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_p = this.representative) === null || _p === void 0 ? void 0 : _p.updated_at) }))))));
+        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Representative Details" }), h("div", { class: "d-table gap-2 w-100 mt-3" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Address", value: (_d = (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d.line1 }), h(DetailItem, { title: "Created At", value: ((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) && formatMediumDate((_f = this.representative) === null || _f === void 0 ? void 0 : _f.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Is Owner?", value: (_h = this.representative) === null || _h === void 0 ? void 0 : _h.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && formatMediumDate(new Date(Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_year), Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_month) - 1, Number((_l = this.representative) === null || _l === void 0 ? void 0 : _l.dob_day))) }), h(DetailItem, { title: "Email", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.email }), h(DetailItem, { title: "Phone", value: (_o = this.representative) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_p = this.representative) === null || _p === void 0 ? void 0 : _p.updated_at) }))))));
     }
-    static get style() { return RepresentativeDetailsStyle0; }
 }, [0, "representative-details", {
         "representative": [16]
     }]);

package/dist/module/save-new-payment-method.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './form-control-checkbox2.js';
 
 const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPaymentMethod extends HTMLElement {
     constructor() {
@@ -7,13 +8,12 @@ const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPayme
         this.checkboxChanged = createEvent(this, "checkboxChanged", 7);
         this.isChecked = false;
     }
-    handleCheckboxChange(event) {
-        const target = event.target;
-        this.isChecked = target.checked;
+    handleCheckboxChange(_name, value) {
+        this.isChecked = value;
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: 'dc65b5d53172a7d3b26f7a09ea98b865fcc4689a', class: "mt-4 form-check" }, h("input", { key: 'e4af44c05c9f45ffe6d2eb88199983725d421d7b', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: 'ad6aa82a60e4d2c6f73cda78a819e9f1590a598b', class: "form-check-label" }, "Save new payment method")));
+        return (h("div", { key: '4b0ac5e02aa02214bf8ddd574db56eb9508b0607', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'bca05c6b8fa00dd7bbc34ee36ef6086ae1764b82', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
     }
 }, [0, "justifi-save-new-payment-method", {
         "isChecked": [32]
@@ -22,13 +22,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-save-new-payment-method"];
+    const components = ["justifi-save-new-payment-method", "form-control-checkbox"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SaveNewPaymentMethod);
             }
             break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/module/saved-payment-method.js

@@ -1,6 +1,9 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
 import { h as snakeToCamel } from './utils2.js';
+import { Q as radioListItem } from './parts.js';
+import { d as defineCustomElement$2 } from './form-control-help-text3.js';
+import { d as defineCustomElement$1 } from './form-control-radio2.js';
 
 class PaymentMethodOption {
     constructor(paymentMethod) {
@@ -27,7 +30,8 @@ const SavedPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMe
         super();
         this.__registerHost();
         this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.onPaymentMethodOptionClick = () => {
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.iframeOrigin = config.iframeOrigin;
@@ -43,9 +47,8 @@ const SavedPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMe
     }
     ;
     render() {
-        var _a, _b, _c, _d, _e;
-        return (h(Fragment, { key: '9bcd2cd5776229c7eff6658e3dc1f98429d0812d' }, h("div", { key: '00edbed020974c57713d9864b83a811189fbfea1', class: "payment-method" }, h("div", { key: 'a4af4151ddb4d300ec6b543942710439032ee27b', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'd210d4826658e7ebd26bcb5da2f5e2cd1f495f9b', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'ef66a85ab7e8526f826ef4f57e262c4bd31dafaa', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
-            _e.acct_last_four)))));
+        var _a, _b, _c;
+        return (h(Host, { key: '8e5a11a58cf828356df001461b6bb3163521f1ed', class: "payment-method" }, h("div", { key: 'c20a8a3dcea1f885b94c4829b85be8d6f401ad42', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '72b970f6808e9f938869195fa29217f44b44250e', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
     }
 }, [0, "justifi-saved-payment-method", {
         "iframeOrigin": [1025, "iframe-origin"],
@@ -57,13 +60,23 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-saved-payment-method"];
+    const components = ["justifi-saved-payment-method", "form-control-help-text", "form-control-radio"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SavedPaymentMethod);
             }
             break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/module/schema-validations.js

@@ -167,7 +167,7 @@ const accountTypeValidation = create$6()
     .oneOf(bankAccountTypeOptions.map((option) => option.value), 'Select account type')
     .transform(transformEmptyString);
 const accountNumberValidation = create$6()
-    .min(8, 'Account number must be at least 8 digits')
+    .min(7, 'Account number must be at least 7 digits')
     .max(17, 'Account number must be less than 17 digits')
     .matches(numbersOnlyRegex, 'Enter valid account number')
     .test('not-repeat', 'Enter valid account number', (value) => {