@justifi/webcomponents 5.7.6 → 6.0.0-rc.2

package/dist/module/business-representative-form-step.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
 import { d as defineCustomElement$9 } from './custom-popper2.js';
@@ -49,7 +49,7 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '53c23a79fc8c678d98ca016f38fe7e6fe6ad9fba', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-representative-form-step-core", { key: '582c77f4b763573a1d29726285a9b871afe96d89', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/business-representative.js

@@ -36,7 +36,7 @@ const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRe
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { key: 'eb9c09602a11107abc465463bf7e7cdbeb98cede' }, h("fieldset", { key: '1f2a035f9796c29269a7dcd7ca874c73ed6493bb' }, h("legend", { key: '1aeaba7f119f15e1ffa75cd58d77608fe51a60c8', part: heading2 }, "Representative"), h("div", { key: '5d09c634135046c79b4ac80b5c1cfee9fbd26ce0', class: "row gy-3" }, h("div", { key: '6f03250bf88cc79ff07a1de68fef97a41a376aec', class: "col-12 col-md-8" }, h("form-control-text", { key: 'd6696ab573a305e277db56a578eaeb3fc4adf9ff', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'fd6ddc83d99b4f86f29566077249a23724741438', class: "col-12 col-md-4" }, h("form-control-text", { key: '632b12a09042ffdaf85d2fafecfab1736bbc8d36', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '65842c9cb8c616806631bd1d2902342cebf5326e', class: "col-12 col-md-6" }, h("form-control-text", { key: '8e1f64cc7f97e4b337dfcda6494fca5750656130', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'e050604c8d71e1d07f916822fbb73da4c3f5e034', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'a5bba8b362ce6070efc65e88ee80880ce855e624', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'dcbd23ab368e630ebaea9e8bdbb6985a98d5fbeb', class: "col-12 col-md-4" }, h("form-control-date", { key: '05e0e255549ad8f0760102aab5cbfe444cae5996', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '764595ed842fd09221ef71d5c921a9ebe947556d', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '91761e52dd724a27e135a3db8b7c85643f7891d9', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '4be6739744d6d9fcd060ed9d894502f35396a9a9', class: "col-12" }, h("justifi-identity-address-form", { key: '7c9d98057e908a068aa0783b10b2bd0f634d7ab9', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { key: '88bd35928331776d5cbb7d085fd55a76fde1a084' }, h("fieldset", { key: '202c40f332352c2f4d3c8a136888c39c67379e5f' }, h("legend", { key: 'a0b5043b348b1d8632a6bf0fe2d4309a8132d1f7', part: heading2 }, "Representative"), h("div", { key: 'ba50c004e2b37f384dd8af63b1e0e397abadb9de', class: "row gy-3" }, h("div", { key: 'b85bf5fb0da9e8feae19dbebb0a911362e914601', class: "col-12 col-md-8" }, h("form-control-text", { key: '95f849c7c0ba0c67bdc0a55727e00755e03897ef', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '074067a3ce960b678ea38d53b84adda24e60754c', class: "col-12 col-md-4" }, h("form-control-text", { key: '7ef397af32b7c0f79eeae1499bf3d3d147961c96', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'a26bfd8a0824aaa12c6ffa48ac58c2bccc7236ef', class: "col-12 col-md-6" }, h("form-control-text", { key: '39174c4b812462d1aa28824bca550e3f6e1d98b4', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'ed0a2c52e4df0c43b2536dfd1ff3692a4e5716d9', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '07bdcc1dd2e1473b64218eb28c8cdcf1cdce2a91', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '96092fd371ec82a8f8ebbf8bc4e3064768d4ad97', class: "col-12 col-md-4" }, h("form-control-date", { key: 'c24980f126c056aff139e897fdef9795905ea89b', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '9d1695fa6e68bb4ae9a8184dcb5e15d588474ab8', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '8d8a56c08fb06f1a54baf3ee3d6e31a684205290', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '22fa5e16517e14ab031aa5e7e95ea77bd7b28986', class: "col-12" }, h("justifi-identity-address-form", { key: '4a990de739a0ae6fbf1f6a621ff7c0078517e970', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
 }, [256, "justifi-business-representative", {
         "formController": [16, "form-controller"],

package/dist/module/business-terms-conditions-form-step.js

@@ -1,10 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as create$3, b as create$7, F as FormController } from './form.js';
 import { A as Api } from './Api.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
-import './Payment.js';
-import './Refund.js';
 import './Business.js';
 import { h as heading2 } from './parts.js';
 import { B as BusinessFormStep } from './event-types2.js';
@@ -131,7 +129,7 @@ const BusinessTermsConditionsFormStep = /*@__PURE__*/ proxyCustomElement(class B
         return (h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (h("form", { key: 'c1ca0ecd364a999e7525e9ac3da82e874a8784e8' }, h("fieldset", { key: 'a77178a38044c458d8dbd31a7e1aeb3f1a34c968' }, h("legend", { key: '7e933517fca8d54095466715bf1f0485625be74f', part: heading2 }, "Terms and Conditions"), h("hr", { key: '1c1da0b7378c51ad2be5efc0e51dedd3ed178c8f' }), h("div", { key: 'bc37aa5162dddc8ade4316b5f24deb1d4a4b6f86' }, h("p", { key: 'aef3d0c9186845e3f44b8e1906c405647f489b53' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '2a6a480916cc0c4bf35d96c96c3f0250e87149cb' }), h("div", { key: '2e3bed3a57bcb026152fcdc82debab0e667f8148', class: "row-gy-3" }, h("div", { key: '3243c1819e4e61921421467271b2a4d2a89e73d4', class: "col-12" }, h("form-control-checkbox", { key: '20b9b72809148ef390a6da7d9f5bc216436d34a5', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (h("form", { key: '8cea6fff2e5b5cbfa7de6b3adfce238153599d1e' }, h("fieldset", { key: 'ef3c4ce5d0d03f1d048e072c6f7ac3da565ffb18' }, h("legend", { key: 'caa5fee86bd4b5c2a7204a76ae3533146526b9e1', part: heading2 }, "Terms and Conditions"), h("hr", { key: '5a72caeaf2dae8f57c0be09ca21feceb0793daf4' }), h("div", { key: 'e39700b83a10c479cf6d767c1af61ac8b480e4d5' }, h("p", { key: '2b8520977bedf73c295a387095724a561391b005' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '706ec9ecfd4a0909583745f90b36eeb42fa5e690' }), h("div", { key: 'd915e2c49188b829b33b03f07cc8f1ccea99ee1d', class: "row-gy-3" }, h("div", { key: 'cbbc74e6b5e80bf54884a8f41eb94f6d5bcdb6dd', class: "col-12" }, h("form-control-checkbox", { key: 'f63aed196d33f1760dae8c5ac5487c0fbc7d4838', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
 }, [256, "justifi-business-terms-conditions-form-step", {
         "authToken": [1, "auth-token"],

package/dist/module/business.service.js

@@ -1,8 +1,6 @@
 import { A as Api } from './Api.js';
-import './Checkout.js';
-import './Pagination.js';
-import './Payment.js';
 import './Refund.js';
+import './Pagination.js';
 import './Business.js';
 
 const api = Api();

package/dist/module/button.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { a0 as buttonSecondary, a1 as buttonPrimary, a2 as buttonLoading } from './parts.js';
+import { $ as buttonSecondary, a0 as buttonPrimary, a1 as buttonLoading } from './parts.js';
 
 const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" },
     h("span", { class: "visually-hidden" }, "Loading...")));

package/dist/module/cancellation-policy.js

@@ -1,7 +1,7 @@
 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 DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
-import { $ as heading5 } from './parts.js';
+import { _ 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-text2.js';
@@ -39,7 +39,7 @@ const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPo
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '6abface896835eb55168c6eaffb3f895b48169aa' }, h("div", { key: '73c586824840a3a054f2178ff2378489a861f7c7', class: "row gy-3" }, h("div", { key: '6381696528b65954c9756aa804713247a628aceb', class: "col-12" }, h("h2", { key: 'c7892b9be4dc85e48d7aba11695ebed34e4902bc', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '7b561cfe03ac8d26e104fcc2d01ada81610e2032', class: "col-12" }, h("form-control-textarea", { key: '5adfc8407a00ef4114be45a6dcd958dc5ee798d3', 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: 'b43cad5c9201429abc8392370230f8df6be2fe36', class: "col-12" }, h("form-control-textarea", { key: '498ef3c2624009083f65be964b3a417c13682232', 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: '8564d0c2d27d78b7b6c61897a955da4129175c7a', class: "col-12" }, h("form-control-file-v2", { key: 'b55c3cf8b3e98f90b11bc41fa00db8e245b00d47', 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 })))));
+        return (h("div", { key: '53b8b9ca5ef0b2fbb3801aeed7c442517b54ffa8' }, h("div", { key: 'e122c095d856545b52d5958db10b8e982de73073', class: "row gy-3" }, h("div", { key: '9ddc0fa91765209b3fa393c0ebf17598af90b3b9', class: "col-12" }, h("h2", { key: 'a7e3001dbc2b36e20e2a1dd1d16b44a023610010', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '7b5481566998713ba87519b999e5acdf3eb0ef52', class: "col-12" }, h("form-control-textarea", { key: 'c67604fa2133a3ed9b5b67a7150e488673d21478', 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: '4b96c57d15060a0a6c42bede64110d67be557060', class: "col-12" }, h("form-control-textarea", { key: '60ddac4a5c2574461dbb28281b89851d0e89600c', 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: '42015bc3bbcbf208d39906d7b270776e3e90ddac', class: "col-12" }, h("form-control-file-v2", { key: '76365a80cd7068267a8a40c6be608a9344e884ce', 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 })))));
     }
 }, [256, "justifi-cancellation-policy", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/card-billing-form-simple.js

@@ -1,8 +1,12 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { p as postalOnlySchema } from './billing-form-schema.js';
-import { U as billingForm } from './parts.js';
+import { V as billingForm } from './parts.js';
 import { n as numberOnlyHandler } from './utils3.js';
 import { F as FormController } from './form.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
 import { d as defineCustomElement$3 } from './custom-popper2.js';
 import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
@@ -11,6 +15,7 @@ const CardBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class CardBilling
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.errors = {};
         this.inputHandler = (name, value) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
@@ -38,9 +43,9 @@ const CardBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class CardBilling
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '579768ec89e37b775a2406ba687a9a18e1c1fb44' }, h("div", { key: '5a98c4adf327f5e09421fbbd78c9f13f031579c6', part: billingForm, class: "mt-4" }, h("form", { key: '4e2b9e9b3ae5d15f6705e418edb2307ec28e19f2' }, h("fieldset", { key: 'baa9735b69a185a229a6db3fa9ddc3adb02a8748' }, this.legend && (h("legend", { key: '65320d5245a39d67aa9389e54ef02fa87bea9bb8' }, this.legend)), h("div", { key: '1e8b4f9de1d6b0f24bb6ef3c8b282f34bf16c04c', class: "row gy-3" }, h("div", { key: '75fb250b91a586982c9a80fc544c2685cfb2f0e1', class: "col-12" }, h("form-control-text", { key: 'db2be476b7f49596faf8a93f40501d89aae3d84f', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(StyledHost, { key: '2d6aa2cd3535338d3944b5bfa1f3e1b6c9fa237d' }, h("div", { key: '0d05444651f2ff00d25b11522ab4e30ce7e24f03', part: billingForm }, h("form", { key: 'fb3daca11e18c7cc068cc29650265a6fc2f48f7c' }, h("fieldset", { key: '2f32c7b540623519c2c7b3f781a1353be847e28c' }, this.legend && (h("legend", { key: '1def4406192651e851b94574abdb10c6f4c86a42' }, this.legend)), h("div", { key: '242b2ef201c5eafe083200cc1d9c4988f4229f5c', class: "row gy-3" }, h("div", { key: 'c7d8084f259ad0591bdd524af579b98048730f19', class: "col-12" }, h("form-control-text", { key: '8ad5e18bde33254f02d72307f8b16e0ba6212beb', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
-}, [256, "justifi-card-billing-form-simple", {
+}, [257, "justifi-card-billing-form-simple", {
         "legend": [1025],
         "formController": [32],
         "billingInfo": [32],

package/dist/module/card-form.js

@@ -1,4 +1,94 @@
-import { C as CardForm$1, d as defineCustomElement$1 } from './card-form2.js';
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { S as Skeleton } from './skeleton.js';
+import { w as waitForConfig, c as configState } from './config-state.js';
+import { d as defineCustomElement$2 } from './iframe-input2.js';
+
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" },
+        h("div", { class: "mb-3" },
+            h(Skeleton, { height: "18px", width: "100px" }),
+            h(Skeleton, { height: "36px" })),
+        h("div", { class: "row" },
+            h("div", { class: "col-4 align-content-end" },
+                h(Skeleton, { height: "18px", width: "80px" }),
+                h(Skeleton, { height: "36px" })),
+            h("div", { class: "col-4 align-content-end" },
+                h(Skeleton, { height: "36px" })),
+            h("div", { class: "col-4 align-content-end" },
+                h(Skeleton, { height: "18px", width: "30px" }),
+                h(Skeleton, { height: "36px" })))));
+};
+
+const CardForm$1 = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(Host, { key: 'c43351c7ab1eb6bf413f162634f55007798bb076' }, h(CardFormSkeleton, { key: 'f0a29497de2270108868e892d666b552dea27a1e', isReady: this.isReady }), h("div", { key: '2734b111c1f2f2275435d2141445ac30482946be', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '036c359caaf8fc36fa6ba56bbcad5d01de1fe9c9', class: "mb-3" }, h("iframe-input", { key: '9baf7dc76ff18f8dee6e6cd08b93e1ba155d5cf2', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '080769719aa9b0d6abc9b18c46247eecd6428833', class: "d-flex align-items-start" }, h("div", { key: 'b3a825ed849ec0032d4a9018537f8ffab4b93ca3', class: "flex-fill me-3" }, h("iframe-input", { key: '5f60eb2d3b3e1303e1a0f6a3f0cd60270bb2d0b8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'cfd000502f10593b59608e13f5de7911c546d030', class: "flex-fill me-3" }, h("iframe-input", { key: 'ab2a45264fe5890c171d03000f30720eafe354b5', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '637516bfd8030e56c9b1e97edfd3a635edb95f20', class: "flex-fill" }, h("iframe-input", { key: 'e407cc2470841fe12b1bdb84bbc8ecfb0165c72d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+}, [256, "card-form", {
+        "isReady": [32],
+        "iframeOrigin": [32],
+        "validate": [64],
+        "tokenize": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["card-form", "iframe-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardForm$1);
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const CardForm = CardForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/card-form2.js

@@ -1,6 +1,12 @@
-import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
+import './details.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { S as StyledHost } from './styled-host.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
+import { d as defineCustomElement$2 } from './hidden-input2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
 const CardFormSkeleton = (props) => {
@@ -23,15 +29,18 @@ const CardFormSkeleton = (props) => {
                 h(Skeleton, { height: "36px" })))));
 };
 
-const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
+const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.isReady = false;
     }
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
     }
     componentDidRender() {
         const elements = [
@@ -48,6 +57,10 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
             this.isReady = true;
         });
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
     async validate() {
         const cardNumberIsValid = await this.cardNumberIframeElement.validate();
         const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
@@ -55,16 +68,16 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
         const cvvIsValid = await this.cvvIframeElement.validate();
         return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
     }
-    async tokenize(clientId, paymentMethodMetadata, account) {
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '7d91102f0ecd44a368b614d6192b3c2c3955fcdf' }, h(CardFormSkeleton, { key: '721c79931188558801dc462ec55ab6feaa6a8e65', isReady: this.isReady }), h("div", { key: '8050c1d12e1c5a68e574d4db8cb35bd94e10f92d', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '18d429a9feac5ab030ab040a9aec0efdc0a09b3a' }, h(CardFormSkeleton, { key: '8a7a41be9477f7656601a1b21bbd89398846ddda', isReady: this.isReady }), h("hidden-input", { key: '256715cd96354c50903c03e15b3de7a81c25e59f' }), h("div", { key: 'd55bae0a16f8572e476f012594ca99074e1f3af5', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'b53acd53cbd40f1127b4a15685630f7cac18643f', class: "mb-3" }, h("iframe-input", { key: '0d1f70562753c975e5ca91d118a3621427e52cad', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '2b6077a165609aafb7d2f7a83029b225e9fb4193', class: "d-flex align-items-start" }, h("div", { key: '7bf09dc36d84749035ff22607f802688cb96179a', class: "flex-fill me-3" }, h("iframe-input", { key: '7a3e75c1b85a4de5b4430e4d81ac6173eb72ac8f', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0372db745a61fddd0d4e7568302ea9ba9aeef250', class: "flex-fill me-3" }, h("iframe-input", { key: 'e37bd58f6704ab443e41bf4616641667b9d1cdde', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '659735815eb06b33d959ce1d77eb7d0673a80684', class: "flex-fill" }, h("iframe-input", { key: '69650550c43f239a53011222a776ed6912895e52', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '7d1906ad3065c71e5871c0fbb30686dcfa011ecb', class: "mb-3" }, h("iframe-input", { key: 'cabb51df56859dcf77a8e7b1bd18841eea872a96', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dc14f4d1cadd95587cee0e0fbf82b48b7ade1ffb', class: "row" }, h("div", { key: 'd6637ada2d0b35e41ffceedd4427bc8e819a564d', class: "col-4 align-content-end" }, h("iframe-input", { key: '57bac9f6b1695cb62f60483b4350aa9a1365f944', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '2264ccbe1c8ca30b3359cf52b3cef7ac0707462e', class: "col-4 align-content-end" }, h("iframe-input", { key: '0195b665d1b4809c9ab04c68fcd3de6a1f6af562', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '07578e7173b66895b84091184f7f3166fcf00314', class: "col-4 align-content-end" }, h("iframe-input", { key: 'cea4796ffdec09d0c9b56d3a09d5e0571744a966', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
-}, [256, "card-form", {
+}, [257, "justifi-card-form", {
         "isReady": [32],
         "iframeOrigin": [32],
         "validate": [64],
@@ -74,11 +87,16 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["card-form", "iframe-input"];
+    const components = ["justifi-card-form", "hidden-input", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
-        case "card-form":
+        case "justifi-card-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JustifiCardForm);
+            }
+            break;
+        case "hidden-input":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardForm);
+                defineCustomElement$2();
             }
             break;
         case "iframe-input":
@@ -90,4 +108,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { CardForm as C, defineCustomElement as d };
+export { JustifiCardForm as J, defineCustomElement as d };

package/dist/module/checkout.service.js

@@ -1,8 +1,6 @@
 import { A as Api } from './Api.js';
-import './Checkout.js';
-import './Pagination.js';
-import './Payment.js';
 import './Refund.js';
+import './Pagination.js';
 import './Business.js';
 
 const api = Api();

package/dist/module/checkout.store.js

@@ -0,0 +1,37 @@
+import { c as createStore } from './index2.js';
+
+const initialState = {
+    accountId: '',
+    authToken: '',
+    billingFormFields: {
+        address_postal_code: '',
+    },
+    bnplEnabled: false,
+    bnplProviderApiVersion: '',
+    bnplProviderCheckoutUrl: '',
+    bnplProviderClientId: '',
+    bnplProviderMode: '',
+    checkoutId: '',
+    disableBankAccount: false,
+    disableBnpl: false,
+    disableCreditCard: false,
+    disablePaymentMethodGroup: false,
+    paymentAmount: 0,
+    paymentCurrency: 'USD',
+    paymentDescription: '',
+    paymentMethodGroupId: undefined,
+    paymentMethods: [],
+    paymentToken: undefined,
+    savePaymentMethod: false,
+    selectedPaymentMethod: '',
+    totalAmount: 0,
+};
+const { state: checkoutStore, onChange } = createStore(initialState);
+Object.keys(initialState).forEach((key) => {
+    // @ts-ignore
+    onChange(key, (newValue) => {
+        checkoutStore[key] = newValue;
+    });
+});
+
+export { checkoutStore as c, onChange as o };

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

@@ -1,16 +1,16 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './config-state.js';
-import { a as formatDate, e as formatTime } from './utils2.js';
-import './Checkout.js';
-import { p as pagingDefaults } from './Pagination.js';
-import './Payment.js';
+import './dinero.js';
 import './Refund.js';
+import { p as pagingDefaults } from './Pagination.js';
 import './Business.js';
 import './details.js';
 import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
 import { T as TableClickActions } from './event-types.js';
+import './justifi-radio-list-item2.js';
+import { a as formatDate, d as formatTime } from './utils2.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
-import { n as tableHeadCell, a8 as getAlternateTableCellPart } from './parts.js';
+import { v as tableHeadCell, a8 as getAlternateTableCellPart } from './parts.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './checkouts-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -178,7 +178,7 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '2e28ecaebdb41c3f1caae3446e50b7c12ae41fd3' }, h(TableComponent, { key: '91f18d0eb5b540dadb8c3f2ca5e5fdb9fa8c58a6' }, h(TableHead, { key: 'cb525fc273469ed377c77aa2768ac9591e2c9887' }, h(TableHeadRow, { key: '2daca61b401b6ec76003127e203312521031d494' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '54af9509fb1a3e8ca277420bbd52e6cb91af1c16' }, h(TableLoadingState, { key: '8361ac7b551d50df31b39d824ac1312eb11dcff4', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '774aeed2b5cb2599fe969640aa8676a14ed7961a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'd647967604a57d0430935b913eaa155a0b1f807c', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'ff25938a838ca2729262ca6918ae76ff919f50d2' }, h(TableFootRow, { key: '4baaf61f51193dd07d7f8d5a75c2b6068137a2de' }, h(TableFootCell, { key: '2994105ef8df42647f9ad16c6ccbf0365008f41b', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'b2f3e86d0c25eed661896e915f8dba72b615e311', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'c496328d1840fb1f823f233c04c78525b5f12553' }, h(TableComponent, { key: 'f994cfed9bf75a299fc94dd22306911d84b44541' }, h(TableHead, { key: '0ffb6ce97ebe1a35eb0143b43767223d844a70e0' }, h(TableHeadRow, { key: 'd063eaafc44bf75be0de5463a1f9b2789ec8b76e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '624a316c1631070a999c48342e71c55207b51be3' }, h(TableLoadingState, { key: '0f7444acf626537bf2179fdb64a435550bcf20d3', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ea68f85498d3bcbb44c8d9158d5cc6a228867e6c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'db72f0190431182f410f246ad00fceb51901fd66', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '855184d90f85a1dd299c372b5b065e1af2151a99' }, h(TableFootRow, { key: 'b216c505abd04f79c0a733312fc5babdb35f2b77' }, h(TableFootCell, { key: 'efa83af6ee8543443826ccfe4efc230afc5d05f6', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '70664e167672a40b63c7fdd2603c52e8584870e9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/custom-popper2.js

@@ -1873,7 +1873,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: 'fe9f155b8fc3d007a94654801edeacf2d52b9382' }, h("style", { key: '00f31be773f765a7857f0e07d8e1162b721bde11' }, `
+        return (h("div", { key: 'c5c8d766dfa1ad756a4133c8cafb7904802378dd' }, h("style", { key: 'e7362e29a1971eb98c78b9b1b27e7fd254c259c8' }, `
           .popper-content {
             display: none;
           }
@@ -1881,7 +1881,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '8a790cb7a27fe293308ab5845c8911e4857d92a4', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'fc26f065c685d6787561157d1deac4f1f8757024' }))));
+          `), h("div", { key: 'f317844cc31312b38d5a2c01f55c3c82d7b4966f', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '84c82c3768182536c2dcbf84c445ef67b4311d24' }))));
     }
 }, [260, "custom-popper", {
         "placement": [1],

package/dist/module/customer-details.js

@@ -1,7 +1,7 @@
 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 DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
-import { $ as heading5 } from './parts.js';
+import { _ as heading5 } from './parts.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
 import { d as defineCustomElement$5 } from './form-control-file-v22.js';
 import { d as defineCustomElement$4 } from './form-control-help-text2.js';
@@ -41,7 +41,7 @@ const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails e
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'b16377889ebc16a5a86dd7b1961e00e42bd7c882' }, h("div", { key: '4a1b27996c1d834922ab953915dfdc974328e287', class: "row gy-3" }, h("div", { key: 'dabb895b8c24bc24fb76283c98c7c32d75e524a4', class: "col-12" }, h("h2", { key: 'e377b7e920288456b6ceccebcc0a358c94f5d3f2', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '3785ca021c3e6f1e59b6c43167667a6056b88f48', class: "col-12" }, h("form-control-text", { key: '2a0e8de20fca9db5e340a93f3c63936112dbb252', 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: '17a1e76d62da5675dea32feb4e4955eb5dd9266c', class: "col-12" }, h("form-control-text", { key: '52487008c35cbe621fcb4ae75b1d06474675416f', 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: '630fda9158a82a0fb13b3aacea29b9d777ca96d3', class: "col-12" }, h("form-control-textarea", { key: '6aa0b5f16e96168b8a9ee18f9477ba61fdf5321b', 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: 'be67c3f4247267017b2d83f43f67778792b48b60', class: "col-12" }, h("form-control-file-v2", { key: '056c53ccf6c08e9f6343b03c5174805552559be0', 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: '416f2b6256bcc3a4a448db66e5c172669b520e7f', class: "col-12" }, h("form-control-file-v2", { key: '714c98f07e8cdf96bc350ce3955ebd996c537826', 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 })))));
+        return (h("div", { key: 'a8fde002d56a1c5ff7bace9e7ad8282b3e8396c1' }, h("div", { key: 'b1ec9e406e26de2bdb179afbfa3a9a7ad7612fe9', class: "row gy-3" }, h("div", { key: 'a0a31924c5cc7f0a35859899851e003eec970c50', class: "col-12" }, h("h2", { key: 'de62f11cc36fbf96a0a1d409cc35adba2e997bb8', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '65cd3d78b510ad95f97dcadcbb60d91caf950f22', class: "col-12" }, h("form-control-text", { key: 'e539cbbac218f3d1927f3ddccca4c0c0e958eec1', 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: 'a6eca53da11014123325064fe09b6df37709f113', class: "col-12" }, h("form-control-text", { key: '9b874331a62dffb2f00af002b0637fdd0f1a8d2c', 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: '69be313a715c3fe9a78ecffaca75b3a4dff5bed2', class: "col-12" }, h("form-control-textarea", { key: 'e366f5ebed7a117c2e1f4e1c3c3a740aa9e5475a', 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: '3b177078766a8b04f3de68889cb991b23c15752c', class: "col-12" }, h("form-control-file-v2", { key: '0d2cc6edded1211028460ef506ef470d14a09718', 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: '4a624251414dcfad4b5e2b6d34b99dc2ef9b59dc', class: "col-12" }, h("form-control-file-v2", { key: '442dc7cc2f851879ebb1504d761e2315c6f45141', 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 })))));
     }
 }, [256, "justifi-customer-details", {
         "disputeResponse": [8, "dispute-response"],