@justifi/webcomponents 5.3.4 → 5.3.6

package/dist/module/additional-statement.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 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 { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
 import { T 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';
@@ -19,23 +19,17 @@ const AdditionalStatement = /*@__PURE__*/ proxyCustomElement(class AdditionalSta
         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.documentErrors = {};
         this.form = undefined;
         this.errors = {};
-        this.documentList = [];
         this.acceptedTerms = false;
         this.acceptedTermsErrorText = undefined;
+        this.documents = { uncategorized_file: [] };
     }
     async validateAndSubmit(onSuccess) {
-        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.additionalStatement));
+        const documentList = Object.values(this.documents).flat();
+        this.form.validateAndSubmit((formData) => onSuccess(formData, documentList, DisputeResponseFormStep.additionalStatement));
     }
     ;
     componentWillLoad() {
@@ -47,16 +41,17 @@ const AdditionalStatement = /*@__PURE__*/ proxyCustomElement(class AdditionalSta
         });
     }
     render() {
-        var _a;
-        return (h("div", { key: '083f14b645e1e04bdcbf966ae3b7849559c41104' }, h("div", { key: '08bfee9d04c586bb56a5a077363f05c39aad1330', class: "row gy-3" }, h("div", { key: 'd118d863cfd771562eea8ab95027e0c68f78fb83', class: "col-12" }, h("h2", { key: 'ed467dd3210f8a7f8da11e0c38ab6e2b30cf7137', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: 'aabe0f4f662cd44db39b28d17bd37514aa7e3be0', class: "col-12" }, h("form-control-textarea", { key: 'ea4c86dd49d91ed386db8e00bf42315813a0ee62', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: 'a9279734278c970e210795ca6a52c1fd9e44de91', class: "col-12" }, h("form-control-file-v2", { key: 'edc1e80a9a2115ca0b0aacaf43bec320edcce150', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: this.handleFileSelection })))));
+        var _a, _b;
+        return (h("div", { key: '5e572a30ed53b4fbcf3808ba545ce2fdf5b988aa' }, h("div", { key: '90870dc58e0eab72e64ae03bdaa25bb1749d8e23', class: "row gy-3" }, h("div", { key: 'cc3b6f19687d02e047744e8a53d22a2f91a8b968', class: "col-12" }, h("h2", { key: '230c20dc3f75e48afa4008369374fd8c175cb7ea', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: '7b49c8012cfc07c44399969f8505db786389b38b', class: "col-12" }, h("form-control-textarea", { key: '349a8a2ebda338e170c90266801ae93b6f9482ea', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: '01cd368a2278c5de462f0998a50ba4ca5889be26', class: "col-12" }, h("form-control-file-v2", { key: 'f95d0b78704f9a1fd154003edbbffb062659ae27', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
     }
 }, [0, "justifi-additional-statement", {
         "disputeResponse": [8, "dispute-response"],
+        "documentErrors": [8, "document-errors"],
         "form": [32],
         "errors": [32],
-        "documentList": [32],
         "acceptedTerms": [32],
         "acceptedTermsErrorText": [32],
+        "documents": [32],
         "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {

package/dist/module/cancellation-policy.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 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 { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
 import { T 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';
@@ -20,21 +20,15 @@ const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPo
         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.documentErrors = {};
         this.form = undefined;
         this.errors = {};
-        this.documentList = [];
+        this.documents = { cancellation_policy: [] };
     }
     async validateAndSubmit(onSuccess) {
-        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.cancellationPolicy));
+        const documentList = Object.values(this.documents).flat();
+        this.form.validateAndSubmit((formData) => onSuccess(formData, documentList, DisputeResponseFormStep.cancellationPolicy));
     }
     ;
     componentWillLoad() {
@@ -46,14 +40,15 @@ const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPo
         });
     }
     render() {
-        var _a, _b;
-        return (h("div", { key: 'a3547f9f1e7f9a00e08a63302138574b1e21ac77' }, h("div", { key: '5cb90af6d52f208e70e82abe7486f8f02320b94b', class: "row gy-3" }, h("div", { key: 'b042e320b7017a836f0d075ca9131dfeaf696eaf', class: "col-12" }, h("h2", { key: '6d055390874e5679f073a4641933aa979864c916', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: 'd05a7f01f33b16b887fcd08d8dbccd6656286cc6', class: "col-12" }, h("form-control-textarea", { key: 'd6a09e94f42aee41d7147be39df6cd1771ea4b36', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: '4d72c534c23013caa94ba3f61a3570f742194c45', class: "col-12" }, h("form-control-textarea", { key: 'b63ddec49b8ca7e10b1a7003d6cbab7e22c667d6', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: '13f3dddacbf160789af2364455e138ea156929b9', class: "col-12" }, h("form-control-file-v2", { key: '9f950b05c37edf21f342ef880d0c784df93b11d5', label: "Upload Cancellation Policy", name: "cancellation_policy_file", onChange: this.handleFileSelection })))));
+        var _a, _b, _c;
+        return (h("div", { key: '6dc5100426e8e4124d19a375250f85f8e15b28d4' }, h("div", { key: 'fb950108be5fd4096a7717c88943938261787f99', class: "row gy-3" }, h("div", { key: '08f85a06288e19939a16d3fa52ef3b3199c56f36', class: "col-12" }, h("h2", { key: 'a585b93921814b1ffbb95c6f9c1de37d4104049b', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '3b7c620518006738d2e36863b62a72142f167733', class: "col-12" }, h("form-control-textarea", { key: '70a76160b0d29648a9e0598dd5b867a382935e03', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: 'e06d4c794bad47e366ca702e764307fdab5e33a8', class: "col-12" }, h("form-control-textarea", { key: '1b783920c5a5b94bff60d4b061cc7cc6666cc184', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: '3cb3371c1d3727e55140ea60a0cff96bc0f42702', class: "col-12" }, h("form-control-file-v2", { key: '738a456bf4653240180963fa7e5ab20a7a4add7c', label: "Upload Cancellation Policy", name: "cancellation_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.cancellation_policy })))));
     }
 }, [0, "justifi-cancellation-policy", {
         "disputeResponse": [8, "dispute-response"],
+        "documentErrors": [8, "document-errors"],
         "form": [32],
         "errors": [32],
-        "documentList": [32],
+        "documents": [32],
         "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {

package/dist/module/check-pkg-version.js

@@ -1,4 +1,83 @@
 import { p as packageJson } from './package.js';
+import { A as Api } from './Api.js';
+
+class AnalyticsService {
+    async record(body) {
+        const endpoint = 'analytics';
+        return Api({ apiOrigin: "https://wc-proxy.justifi.ai" }).post(endpoint, body);
+    }
+}
+
+/**
+ * @class JustifiAnalytics
+ * @description A class to track analytics for a component
+ * @param { component } ComponentInterface - The component to track
+ *
+ */
+class JustifiAnalytics {
+    constructor(component) {
+        this.handleCustomEvent = async (data) => {
+            // Track the event
+            await this.service.record(data);
+        };
+        // dont track analytics in local or storybook
+        if (window.location.origin.includes('localhost') ||
+            window.location.origin.includes('storybook')) {
+            return;
+        }
+        this.service = new AnalyticsService();
+        this.componentInstance = component;
+        this.setUpBasicData();
+        this.setupLifecycleTracking();
+        this.trackCustomEvents();
+    }
+    get resourceId() {
+        return (this.componentInstance.accountId ||
+            this.componentInstance.businessId ||
+            this.componentInstance.paymentId ||
+            this.componentInstance.payoutId ||
+            this.componentInstance.checkoutId);
+    }
+    setUpBasicData() {
+        this.basicData = {
+            component_name: this.componentInstance.tagName,
+            component_version: packageJson.version,
+            client_user_agent: navigator.userAgent,
+            // navigator.platform is deprecated, use navigator.userAgent instead
+            client_platform: navigator.userAgent,
+            client_origin: window.location.origin,
+            resource_id: this.resourceId,
+        };
+    }
+    trackCustomEvents() {
+        this.eventEmitters = ['submit-event', 'error-event'];
+        // for each event, add an event listener
+        this.eventEmitters.forEach((eventName) => {
+            // if this.componentInstance.addEventListener is a function add the event listener
+            if (typeof this.componentInstance.addEventListener === 'function') {
+                this.componentInstance.addEventListener(eventName, (event) => this.handleCustomEvent({
+                    event_type: eventName,
+                    data: Object.assign(Object.assign({}, this.basicData), { error: event.detail }),
+                }));
+            }
+        });
+    }
+    setupLifecycleTracking() {
+        const originalComponentDidLoad = this.componentInstance.componentDidLoad;
+        this.componentInstance.componentDidLoad = () => {
+            this.service.record({ event_type: 'init', data: this.basicData });
+            if (originalComponentDidLoad) {
+                return originalComponentDidLoad.apply(this.componentInstance);
+            }
+        };
+    }
+    cleanup() {
+        // Remove event listeners
+        this.eventEmitters.forEach((event) => {
+            this.componentInstance.removeEventListener(event, this.handleCustomEvent);
+        });
+    }
+}
 
 const latestVersion = async (packageName) => {
     const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
@@ -19,4 +98,4 @@ const checkPkgVersion = async () => {
     }
 };
 
-export { checkPkgVersion as c };
+export { JustifiAnalytics as J, checkPkgVersion as c };

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

@@ -6,12 +6,11 @@ import './Payment.js';
 import './SubAccount.js';
 import './Document.js';
 import { o as tableHeadCell, q as getAlternateTableCellPart, n as table, p as tableCell } from './parts.js';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types2.js';
 import './details.js';
 import { b as formatDate, d as formatTime } from './utils2.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './checkouts-list-params-state.js';
-import { T as TableClickActions } from './event-types2.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const MapCheckoutStatusToBadge = (status) => {

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: '1b95226961006ba80bb96911078f7cde90f32def' }, h("style", { key: '3b20790da8600b3835e5874acab8cd49a741dbfa' }, `
+        return (h("div", { key: '4591c97abf65078bc67a82895364e4e3cf9e85d7' }, h("style", { key: 'bdedcb809a4197f8b40d2c37af00c8bb17028669' }, `
           .popper-content {
             display: none;
           }
@@ -1884,7 +1884,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '05d166976a3aa254c1d0722c272bd9b0adc24862', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '95d3a563a9d7a1598ec35c8042a9a1088070a4bc' }))));
+          `), h("div", { key: '555995bdc16a697f7b38ba9113b8973b7dae1bbe', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'b71f5d424096805ed2d64ee20f30d63a9044c39c' }))));
     }
 }, [4, "custom-popper", {
         "placement": [1],

package/dist/module/customer-details.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 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 { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
 import { T 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';
@@ -22,21 +22,15 @@ const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails e
         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.documentErrors = {};
         this.form = undefined;
         this.errors = {};
-        this.documentList = [];
+        this.documents = { customer_signature: [], customer_communication: [] };
     }
     async validateAndSubmit(onSuccess) {
-        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.customerDetails));
+        const documentList = Object.values(this.documents).flat();
+        this.form.validateAndSubmit((formData) => onSuccess(formData, documentList, DisputeResponseFormStep.customerDetails));
     }
     ;
     componentWillLoad() {
@@ -48,14 +42,15 @@ const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails e
         });
     }
     render() {
-        var _a, _b, _c;
-        return (h("div", { key: '7c8bb0293eee2006e4e8e7aa65a692b3ce211c43' }, h("div", { key: '677de6f4bbf636dbbba97f5a188b076985fc6f0a', class: "row gy-3" }, h("div", { key: 'b1044548517ab9bc2f8a873965e1f81fd98a6216', class: "col-12" }, h("h2", { key: 'e3c6706441eee0adbfdf540528511353686d1fb9', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '2e5e5eda8c07941358a02430aa06bcd4ce13a5ca', class: "col-12" }, h("form-control-text", { key: '6271fd7c5def3e501501f5a8af00bcbc77b5e67d', 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: '4347830601eda422e863cbdd70cf4d9862d19fb2', class: "col-12" }, h("form-control-text", { key: '4dbb512ac5a81de067d2fb9c2b9edeffda1f199b', 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: 'ee16ae4bd2ea9c4e3949af9705e05fd6709b7f5d', class: "col-12" }, h("form-control-textarea", { key: 'd2339c6ebc8ffbe24f68ce079f0d623f7107cf29', 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: 'eff1fb76a8cab96b0fba6e7b8a1aab2b6dc405e7', class: "col-12" }, h("form-control-file-v2", { key: 'ece727a3d010e0ba4741874992ed3e92d711b338', label: "Customer Signature", name: "customer_signature", onChange: this.handleFileSelection })), h("div", { key: 'b585af6033d79e16a71ff8ff9ee34176910ae109', class: "col-12" }, h("form-control-file-v2", { key: '74473ea1ac14a7efaa4a0032bea1d2c4b5ca6339', label: "Customer Communication", name: "customer_communication", onChange: this.handleFileSelection })))));
+        var _a, _b, _c, _d, _e;
+        return (h("div", { key: '70e29d650d5304522f927c15b4eb5e62e203c5e0' }, h("div", { key: 'f50422b29cb2a4f3bca911ced94dc681adb3fc41', class: "row gy-3" }, h("div", { key: 'f29816d9281ea4c4db5018d3b7edb1600569357a', class: "col-12" }, h("h2", { key: 'a2889c95c293bf0bbf97c16e4486e307ca87729c', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '9cd45719434a1740f67b73c13fd08e0fe562168e', class: "col-12" }, h("form-control-text", { key: '5a30a3aef7fbe2d3013c46e43a437724dae41213', 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: '9812e1f9f6df949b9f15b2c3f28857db7dcf5cb7', class: "col-12" }, h("form-control-text", { key: '10b146053a399039e8dbd42c3cab53b4b55c0ec3', 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: '2742a0922a223bd60d6e3d08a55190742ecf5112', class: "col-12" }, h("form-control-textarea", { key: '41491e238c75716520d747cbf9f1bcc329a2d686', 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: '71074f31e565c24107b91b04d9aa16da77ba618c', class: "col-12" }, h("form-control-file-v2", { key: '17f70cf96927b01e65430e13c2d21209e9170603', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: 'ec696695191e68c7ceb0cc41f99f9e53f2d59da1', class: "col-12" }, h("form-control-file-v2", { key: '562ff8b3819f536d491f2e2e55a85a55fcda0e1c', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
     }
 }, [0, "justifi-customer-details", {
         "disputeResponse": [8, "dispute-response"],
+        "documentErrors": [8, "document-errors"],
         "form": [32],
         "errors": [32],
-        "documentList": [32],
+        "documents": [32],
         "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {

package/dist/module/dispute-notification.js

@@ -44,7 +44,7 @@ const DisputeNotification = /*@__PURE__*/ proxyCustomElement(class DisputeNotifi
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(StyledHost, { key: '77119b1227200909f4742e24df0a45e1f631c65c' }, this.isLoading && (h("div", { key: 'f0766ff057fb2f4b75b34c7d4a386bde43e49652', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'd7268194dea5ac2a3b87aea8e17573b4768e308f', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'f8863e45a917f56be302ca1b0b3d472119f6465c', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'c7b8c9c89d9488eea3be8ea0b4536f98a8151487', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '875fe7def317ce1c4547e04e83baf2b232209058', part: text }, h("h1", { key: '09646afc2aac3bf4ef9737bc12442660bbafb2dd', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '14224cffb16726eaa589118be954e0f844ffaee8' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '415028b91872a2391796872fdffdbee837a2a511', class: "h5" }, "Dispute details"), h("div", { key: 'c2b8c6be3132f98eb8c686ab88a5a6a68f92a60e', class: "d-table gap-2" }, h("div", { key: 'd11bd8b3bc680183e8bee40281cc2c294aedbd5a', class: "d-table-row gap-2" }, h("span", { key: 'd77796c0d2764329c3b482ae49ceb8b4cac03d37', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '716d8af2a250c3237af6e23b43bf50e032e9f203', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: 'daba4379197533d2a4b246e81139d81cd15761c6', class: "d-table-row gap-2" }, h("span", { key: 'a039fbf47aff16445e3411c33a7b53716c42866d', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '19087aba5c516d0c71e9f84e8b3323a044ae532a', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: '68ef78b15627df3b22bcde4b90f7c216466e7468', class: "d-table-row gap-2" }, h("span", { key: '9463c281d76b5e201a55c2993253fc22d04168dc', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '5cffed27038f5571f37377c5023a88c8b7773a59', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: 'e856d924edac10116781425f6d7c4c8c6b26ced2', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '6d5278a91f79c2fe8fbdd9e391b109a6491b13b6', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '242b9076b482aae731ab6bedc1592a1a826e24c5', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'f3711546ce5bf8b6a4a8689f5db3fdbf58f45bf4' }, h("h1", { key: '06e39be43cfacf667919adbd2f4f8c596702c340', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'b3bfef2d40e197f8dc9df6f71d9f13017a4b923d' }, "The cardholder is disputing this payment. A counter dispute has been submitEvent and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: 'cb6185865417d70ab67734db37b880f67160ea62' }, h("h1", { key: '96dfe178f6d5de97f190f0df6bb0bf19e7b04227', class: "h4" }, "This payment was disputed"), h("p", { key: '4f6e8bdd940b69d34c1d84564b83f0a1f8c76059' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: '3852f5221f59739d5079ad0e56b99409167678b0' }, h("h1", { key: 'f6052feaabc3b94c727465a8f02534805ba968c8', class: "h4" }, "This payment was disputed"), h("p", { key: 'b0c91b828828842bf7a706e794124d0a8404c25e' }, "The cardholder disputed this payment and the card issuer has settled it their favor.")))));
+        return (h(StyledHost, { key: '77119b1227200909f4742e24df0a45e1f631c65c' }, this.isLoading && (h("div", { key: 'f0766ff057fb2f4b75b34c7d4a386bde43e49652', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'd7268194dea5ac2a3b87aea8e17573b4768e308f', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'f8863e45a917f56be302ca1b0b3d472119f6465c', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'c7b8c9c89d9488eea3be8ea0b4536f98a8151487', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '875fe7def317ce1c4547e04e83baf2b232209058', part: text }, h("h1", { key: '09646afc2aac3bf4ef9737bc12442660bbafb2dd', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '14224cffb16726eaa589118be954e0f844ffaee8' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '415028b91872a2391796872fdffdbee837a2a511', class: "h5" }, "Dispute details"), h("div", { key: 'c2b8c6be3132f98eb8c686ab88a5a6a68f92a60e', class: "d-table gap-2" }, h("div", { key: 'd11bd8b3bc680183e8bee40281cc2c294aedbd5a', class: "d-table-row gap-2" }, h("span", { key: 'd77796c0d2764329c3b482ae49ceb8b4cac03d37', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '716d8af2a250c3237af6e23b43bf50e032e9f203', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: 'daba4379197533d2a4b246e81139d81cd15761c6', class: "d-table-row gap-2" }, h("span", { key: 'a039fbf47aff16445e3411c33a7b53716c42866d', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '19087aba5c516d0c71e9f84e8b3323a044ae532a', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: '68ef78b15627df3b22bcde4b90f7c216466e7468', class: "d-table-row gap-2" }, h("span", { key: '9463c281d76b5e201a55c2993253fc22d04168dc', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '5cffed27038f5571f37377c5023a88c8b7773a59', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: 'e856d924edac10116781425f6d7c4c8c6b26ced2', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '6d5278a91f79c2fe8fbdd9e391b109a6491b13b6', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '242b9076b482aae731ab6bedc1592a1a826e24c5', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'f3711546ce5bf8b6a4a8689f5db3fdbf58f45bf4' }, h("h1", { key: '06e39be43cfacf667919adbd2f4f8c596702c340', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'b3bfef2d40e197f8dc9df6f71d9f13017a4b923d' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: '580144b1439d6e017726b9731b7bb15e71900092' }, h("h1", { key: '42d74d215d23409672449af86e25c945aac33ea1', class: "h4" }, "This payment was disputed"), h("p", { key: '4c337e89a32f62c8f03a53eb84737785f4b0bdb4' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: '66c0f7bbada42053683dd25776a7c0abdb708315' }, h("h1", { key: '273f2d82dbe73a15da3186946763579be2801aa4', class: "h4" }, "This payment was disputed"), h("p", { key: '22172d1c6833eb5407c19dd31b85db805d07d177' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
 }, [1, "justifi-dispute-notification", {
         "dispute": [16],

package/dist/module/dispute-response-core.js

@@ -27,14 +27,14 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
         this.componentStepMapping = [
-            () => h("justifi-product-or-service", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
-            () => h("justifi-customer-details", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
-            () => h("justifi-cancellation-policy", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
-            () => h("justifi-refund-policy", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
-            () => h("justifi-duplicate-charge", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
-            () => h("justifi-electronic-evidence", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
-            () => h("justifi-shipping-details", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
-            () => h("justifi-additional-statement", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-product-or-service", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
+            () => h("justifi-customer-details", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
+            () => h("justifi-cancellation-policy", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
+            () => h("justifi-refund-policy", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
+            () => h("justifi-duplicate-charge", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
+            () => h("justifi-electronic-evidence", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
+            () => h("justifi-shipping-details", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
+            () => h("justifi-additional-statement", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse, documentErrors: this.documentErrors }),
         ];
         this.saveData = async (formData, formStep) => {
             const hasFormData = Object.keys(formData).length;
@@ -96,15 +96,15 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
                 },
                 onSuccess: (response) => {
                     document.presignedUrl = response.data.presigned_url;
-                    this.isLoading = false;
                 },
                 onError: ({ error, code, severity }) => {
+                    const errors = { [document.dispute_evidence_type]: error };
+                    this.documentErrors = Object.assign(Object.assign({}, this.documentErrors), errors);
                     this.errorEvent.emit({
                         errorCode: code,
                         message: error,
                         severity,
                     });
-                    this.isLoading = false;
                 },
             });
         };
@@ -119,20 +119,26 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
             });
             return response;
         };
-        this.onCancel = () => {
-            this.clickEvent.emit({ name: DisputeManagementClickActions.cancelDispute });
-        };
         this.handleSubmit = async (formData, documentList, formStep) => {
             this.isLoading = true;
             if (documentList.length) {
+                this.documentErrors = {};
                 this.documentList = documentList;
                 await this.initializeMakePresignedURLs();
+                const hasPresigningErrors = Object.keys(this.documentErrors).length;
+                if (hasPresigningErrors) {
+                    this.isLoading = false;
+                    throw new Error('Could not presign all documents');
+                }
                 await this.initializeFileUploads();
             }
             // this needs to happen last because it fires the 'submit-event' and 'complete-form-step-event' event
             await this.saveData(formData, formStep);
             this.isLoading = false;
         };
+        this.onCancel = () => {
+            this.clickEvent.emit({ name: DisputeManagementClickActions.cancelDispute });
+        };
         // after each of these steps where validateAndSubmit is called, reload the dispute
         // and set isLoading, and pass defaults into each step
         this.onBack = async () => {
@@ -162,6 +168,7 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
         this.disputeResponse = {};
         this.isLoading = false;
         this.documentList = [];
+        this.documentErrors = {};
         this.currentStep = 0;
         this.currentStepComponentRef = undefined;
     }
@@ -175,7 +182,7 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
         return this.currentStep === 0;
     }
     render() {
-        return (h("div", { key: 'a031de7ea80f4f31c6e841be4b4640a8b7db7dcd', class: "row gy-3" }, h("div", { key: 'cd7ef54b4643e1a74022ed7c2e075e75076c4c44', class: "col-12" }, h("h1", { key: '705612783bc67e0d01f4d24e01c9c09d1b2a7362', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '72c35e89dc87377fe4dbcbb9fe2e2c1b58767a21', class: "col-12" }, this.currentStepComponent), h("div", { key: '37d85a8980293390f15b45271f8b2a8fa4cadb29', class: "col-12" }, h("div", { key: 'c3b281e02b19598b11acdb09a34212edf1745173', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
+        return (h("div", { key: '452cfcf106f40c27f34df05ae2923c0909de9245', class: "row gy-3" }, h("div", { key: 'd9b608a8d880310b96e98cd4a00cabfcca77dc79', class: "col-12" }, h("h1", { key: '050aef1fa636d09880edc7d738d56eab2cf62e52', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '4e6094f9240d4db3d4bc03c59754ab3d04fed5bc', class: "col-12" }, this.currentStepComponent), h("div", { key: '9c1739bc4ed1a9104fd04531a11e02cbbb4f11cc', class: "col-12" }, h("div", { key: 'd37cda5a7689d8bf9263283eb24e1074ee3d97a0', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
     }
 }, [0, "justifi-dispute-response-core", {
         "updateDisputeResponse": [16],
@@ -184,6 +191,7 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
         "disputeResponse": [8, "dispute-response"],
         "isLoading": [32],
         "documentList": [32],
+        "documentErrors": [32],
         "currentStep": [32],
         "currentStepComponentRef": [32]
     }]);

package/dist/module/dispute-response.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as checkPkgVersion } from './check-pkg-version.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import { a as makeUpdateDisputeResponse, b as makeCreateDisputeEvidence, m as makeSubmitDisputeResponse, D as DisputeService } from './dispute-response-actions.js';
-import { J as JustifiAnalytics } from './Analytics.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
 import { d as defineCustomElement$g } from './custom-popper2.js';
 import { d as defineCustomElement$f } from './form-control-date2.js';

package/dist/module/duplicate-charge.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 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 { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
 import { T 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';
@@ -21,21 +21,15 @@ const DuplicateCharge = /*@__PURE__*/ proxyCustomElement(class DuplicateCharge e
         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.documentErrors = {};
         this.form = undefined;
         this.errors = {};
-        this.documentList = [];
+        this.documents = { duplicate_charge_documentation: [] };
     }
     async validateAndSubmit(onSuccess) {
-        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.duplicateCharge));
+        const documentList = Object.values(this.documents).flat();
+        this.form.validateAndSubmit((formData) => onSuccess(formData, documentList, DisputeResponseFormStep.duplicateCharge));
     }
     ;
     componentWillLoad() {
@@ -47,14 +41,15 @@ const DuplicateCharge = /*@__PURE__*/ proxyCustomElement(class DuplicateCharge e
         });
     }
     render() {
-        var _a, _b;
-        return (h("div", { key: '3714de9262cead1d09db56792ba11b3357f54a0a' }, h("div", { key: '10d1612387d0d5085a1e98b761a59eff4fb8d9a9', class: "row gy-3" }, h("div", { key: 'b69b5b378e9104c5aa413a7099868b8376dac04c', class: "col-12" }, h("h2", { key: '39c935c74773c20de95b7f735e7efc11e1b16618', class: "h5", part: heading5 }, "Duplicate Charge")), h("div", { key: '63531ffa973de2f6948ad61091467661cd22c917', class: "col-12" }, h("form-control-text", { key: '8a1346115f3e3c1e12e6b6fc50d816829dd218f6', label: "Original Payment ID", name: "duplicate_charge_original_payment_id", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.duplicate_charge_original_payment_id, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_original_payment_id })), h("div", { key: '7f6f5ba85681e208d2c5727c1d3d6512e43df99a', class: "col-12" }, h("form-control-textarea", { key: '4265b06d5980c7bea096c001f52d80180c20fec5', label: "Duplicate Charge Explanation", name: "duplicate_charge_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.duplicate_charge_explanation, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_explanation })), h("div", { key: '9bdfeb8fd8d334de4bf51d10e76752a28d54ff55', class: "col-12" }, h("form-control-file-v2", { key: '03062c1a7e8e2dc98cc8b43394562720843d4956', label: "Duplicate Charge Documentation", name: "duplicate_charge_documentation", onChange: this.handleFileSelection })))));
+        var _a, _b, _c;
+        return (h("div", { key: '0b0d73b396b32f29fa389d3981d48c3f30f96fd7' }, h("div", { key: '2fd16a4cf964c863a59789a2be60d94b27a95de8', class: "row gy-3" }, h("div", { key: '48c15f7db3285caa9164d815615b82a84283fbfe', class: "col-12" }, h("h2", { key: '397b3026311bf57588b172146fc9822f99ede63e', class: "h5", part: heading5 }, "Duplicate Charge")), h("div", { key: 'c825b6efd428bee298b9b0ddf2265378cf999de9', class: "col-12" }, h("form-control-text", { key: 'b43283087a10826bf8e582a1e863ed4982b5c000', label: "Original Payment ID", name: "duplicate_charge_original_payment_id", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.duplicate_charge_original_payment_id, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_original_payment_id })), h("div", { key: '66d5cefa16c341f5c523eaa46de5c11f5b16e619', class: "col-12" }, h("form-control-textarea", { key: 'f83573136fc2ce108f186f9434f46a3f157bd102', label: "Duplicate Charge Explanation", name: "duplicate_charge_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.duplicate_charge_explanation, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_explanation })), h("div", { key: 'cc47dc1d9dbac962d27494b5ff3fef572c98c7b4', class: "col-12" }, h("form-control-file-v2", { key: '3cf06b6d61edd6ac96d02b12639d040f698b2526', label: "Duplicate Charge Documentation", name: "duplicate_charge_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.duplicate_charge_documentation })))));
     }
 }, [0, "justifi-duplicate-charge", {
         "disputeResponse": [8, "dispute-response"],
+        "documentErrors": [8, "document-errors"],
         "form": [32],
         "errors": [32],
-        "documentList": [32],
+        "documents": [32],
         "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {

package/dist/module/electronic-evidence.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 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 { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
 import { T 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';
@@ -15,24 +15,18 @@ const ElectronicEvidence = /*@__PURE__*/ proxyCustomElement(class ElectronicEvid
     constructor() {
         super();
         this.__registerHost();
-        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.documentErrors = {};
         this.form = undefined;
         this.errors = {};
-        this.documentList = [];
+        this.documents = { activity_log: [] };
     }
     async validateAndSubmit(onSuccess) {
-        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.electronicEvidence));
+        const documentList = Object.values(this.documents).flat();
+        this.form.validateAndSubmit((formData) => onSuccess(formData, documentList, DisputeResponseFormStep.electronicEvidence));
     }
     ;
     componentWillLoad() {
@@ -44,14 +38,15 @@ const ElectronicEvidence = /*@__PURE__*/ proxyCustomElement(class ElectronicEvid
         });
     }
     render() {
-        var _a;
-        return (h("div", { key: 'a75975ee478e0754c38e67edd1fbf702364f23a7' }, h("div", { key: '32f60518951cd7270901c50b44acf11bde22a041', class: "row gy-3" }, h("div", { key: '8f3aed3249af4852b3ef9d35b5ad09b80947c5b3', class: "col-12" }, h("h2", { key: '7fee82b939aab2131eb573fcf3189aac8a816e7d', class: "h5", part: heading5 }, "Electronic Evidence")), h("div", { key: 'db919599078f089e70b182b44980a62588ce90cf', class: "col-12" }, h("form-control-text", { key: 'ea3e78ebe16d9def88b08910a700f01f5f5e0992', label: "Purchase IP Address", name: "customer_purchase_ip_address", helpText: "The IP address used by the customer during the purchase.", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_purchase_ip_address, inputHandler: this.inputHandler, errorText: this.errors.customer_purchase_ip_address })), h("div", { key: 'e4d03c158110ef7d10bf290b036536bc654f36ea', class: "col-12" }, h("form-control-file-v2", { key: 'a87c4d1502434b740e41e01a3ddc33d5d069557d', label: "Activity Logs", name: "activity_log", helpText: "Any server or activity logs that provide evidence of the customer's access to or download of the purchased digital product. This information should encompass IP addresses, relevant timestamps, and any detailed records of activity.", onChange: this.handleFileSelection, errorText: this.errors.activity_log })))));
+        var _a, _b;
+        return (h("div", { key: '1a4a1d78529c48b8f32029a3efa05b4430c6d271' }, h("div", { key: '593d167f4e6b610ac3cdb8a04b4eee30a1cb4f91', class: "row gy-3" }, h("div", { key: '39440c3a2802b823c85f251c4393ba76bad287c0', class: "col-12" }, h("h2", { key: 'f5ec8cce1bbadb772ac6dbe668cf54187d2690d7', class: "h5", part: heading5 }, "Electronic Evidence")), h("div", { key: 'b9020a773c45a8f59a31ffef44b32253fdb4a551', class: "col-12" }, h("form-control-text", { key: '56122eafb7f138f4472a5818cddd32cb0e17fc7e', label: "Purchase IP Address", name: "customer_purchase_ip_address", helpText: "The IP address used by the customer during the purchase.", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_purchase_ip_address, inputHandler: this.inputHandler, errorText: this.errors.customer_purchase_ip_address })), h("div", { key: '0737f585271838dd60ab9ee1e6ac83d0c6362b96', class: "col-12" }, h("form-control-file-v2", { key: '63590d574ee151cbf82638002dfe513cea471035', label: "Activity Logs", name: "activity_log", helpText: "Any server or activity logs that provide evidence of the customer's access to or download of the purchased digital product. This information should encompass IP addresses, relevant timestamps, and any detailed records of activity.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.activity_log })))));
     }
 }, [0, "justifi-electronic-evidence", {
         "disputeResponse": [8, "dispute-response"],
+        "documentErrors": [8, "document-errors"],
         "form": [32],
         "errors": [32],
-        "documentList": [32],
+        "documents": [32],
         "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {