@justifi/webcomponents 5.7.6-rc-19 → 5.7.6-rc-21

package/dist/collection/components/business-forms/payment-provisioning/form-control-monetary-provisioning.js

@@ -56,10 +56,10 @@ export class MonetaryInputProvisioning {
         return part;
     }
     render() {
-        return (h(Host, { key: '950019f15743434eaa378b48338e73157525d677' }, h("div", { key: '9a4dab257ec7a62f3f3f1ba1cc2c4aad3f823c17', class: "form-group d-flex flex-column" }, h("label", { key: '19d046ba0d9f5d2b8fc7c3d8c1b9dc893a5834e5', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'ba7df233aa5965ee0a7f5c01dfd84aabd3cecf70', class: "input-group" }, h("span", { key: 'e325e64173d5d7c260b824ef492f02f2333bdb8f', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '5b1632e00657f9aa31139a9869ab63ad9388612e', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '59e5e4d46e7d4ece898464d846505756611f6635' }, h("div", { key: 'e82201d6777584666ec5ca04ad9e02b83fa956c0', class: "form-group d-flex flex-column" }, h("label", { key: '9bbb22bb201d3db07670e4f26521593ff229f583', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '61909b4796f78e22d9e6508d9257cdf16220e675', class: "input-group" }, h("span", { key: '152a4f1a6323e55bf6f48aa25353939569acc419', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'cc8055c02a4ccb4f63553f45b5ded4ee3d8cf972', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.inputPart, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: 'cb7f04dc7e6849d335eb0cfecfb05d7e0c26ff1f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '6ad1b947a48e8c97a2f5a1c4c2c1094679ce25cd', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.inputPart, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '776dfb4a9d74342ba139dda6706af8e60b4700fc', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '74e503b7e525aeeb994b1ae94941f07365d2460e', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary-provisioning"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/legal-address-form/legal-address-form-step.js

@@ -34,7 +34,7 @@ export class LegalAddressFormStep {
         }
     }
     render() {
-        return (h("justifi-legal-address-form-step-core", { key: '65d876bee76f4deb4df115e636fafaef2c883f24', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-legal-address-form-step-core", { key: 'bd286476461181f2e8a435a97bf148d55876b49c', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-legal-address-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-core.js

@@ -87,7 +87,7 @@ export class PaymentProvisioningCore {
         this.loading = event.detail;
     }
     render() {
-        return (h(StyledHost, { key: 'e195b19df4d1061ecf8b305005faf0ffce68221e' }, h("div", { key: '17d42ba0a22567dce6760e2047478eb1bc36a794', class: 'row gap-3' }, h(Header1, { key: '507788c4af5572cbb09037443ae51b505567d825', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: '4b7e73217ff8230756542c3b0c069e18b7f23356', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '2ae1e8386114181cbd6f7999ac047b7709daa4fb', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'a126b618a3028c4c7a9c12145ab63e222a17e51f', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'a66e1ac554e0dffa78be59df6a74d8175ba0376c', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        return (h(StyledHost, { key: '621b616a3b9d5be0fcc1180dcdb0db6a89ec5aa2' }, h("div", { key: 'b51c6814bb81a6cdc6cd0c5ede4d485582f154ee', class: 'row gap-3' }, h(Header1, { key: '7c03561b4c2b0cfc237d6b933aeffe532f35b626', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: 'b616b52cc9a0057f27ddbae1356710cee05c60fa', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '2447bad174b5d32d253e821e76ebb32fb9ec50e3', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'd746b5275ae0866a8619f67fe00217916153ea0a', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'add808398005b6076d91788cc220ab6620f3ddfc', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
     static get is() { return "justifi-payment-provisioning-core"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-form-buttons.js

@@ -12,7 +12,7 @@ export class PaymentProvisioningFormButtons {
         return this.currentStep === this.totalSteps;
     }
     render() {
-        return (h("div", { key: '7c793a33752cd9b3dd1ebc6c30b7a98002ef8820', class: 'd-flex gap-2' }, h(Button, { key: '5127c233ef8c819fe17204baaff7370d78ec70e7', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: 'd889e96935718eb333eaac70023fd7b273118676', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: '5502d7d73084119862451389bf85705407187016', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
+        return (h("div", { key: '5869ed8c350e3a1ae5fe62dcd04493f432eecff7', class: 'd-flex gap-2' }, h(Button, { key: 'b1e8c2fff97e9a053d715860a43ddd78c99b255a', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '8696fe4f0bde5434e51f05f67b39a8e5b2f550bf', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: 'b1750a849d60244bdb3cf82690c6cbd15b6e1110', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
     }
     static get is() { return "justifi-payment-provisioning-form-buttons"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-form-steps.js

@@ -16,7 +16,7 @@ export class PaymentProvisioningFormSteps {
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h("div", { key: 'f25bbaeeac7ea49b2d99f746af0aec7b637d879a', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (h("div", { key: '9a09e562d0a3548cb40863ba5780c5d1692b6ec3', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
     static get is() { return "justifi-payment-provisioning-form-steps"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning.js

@@ -46,7 +46,7 @@ export class PaymentProvisioning {
         }
     }
     render() {
-        return (h("justifi-payment-provisioning-core", { key: '11871305b4b4974787a9278195ea0b314be250b0', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
+        return (h("justifi-payment-provisioning-core", { key: '6d77016584f204fdc4be5fd554b4eb1639e856ab', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
     }
     static get is() { return "justifi-payment-provisioning"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/business-forms/payment-provisioning/terms-and-conditions/business-terms-conditions-form-step.js

@@ -108,7 +108,7 @@ export class BusinessTermsConditionsFormStep {
         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 }))))));
     }
     static get is() { return "justifi-business-terms-conditions-form-step"; }
     static get properties() {

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -31,10 +31,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '91e0861d760dfa016e72b8758c37b86ce3fe8225' }, h(BankAccountFormSkeleton, { key: '806f012f41018540d3e1be34cb6d03fc61174253', isReady: this.isReady }), h("div", { key: '4660ea1bac93feaa04d643c1bf7a34da790bf308', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '0d123854987108eb70d4818a2f909fafa6945109', class: "row mb-3" }, h("iframe-input", { key: '1520dbb02a93848e53dd2b4636c7951a20efe462', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '9365ffe0a279c92d7129c894afa52c7b2060573a', class: "row" }, h("iframe-input", { key: 'bfe10d4fd3f3aab6c035c03ce85e0786876adfce', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

package/dist/collection/components/checkout/billing-form/billing-form-schema.js

@@ -1,21 +1,26 @@
 import { object } from "yup";
 import { cityValidation, identityNameValidation, lineOneValidation, lineTwoValidation, postalValidation, stateValidation, } from "../../business-forms/schemas/schema-validations";
-export const billingFormSchema = (postalOnly) => {
-    const fullBillingForm = object({
-        name: identityNameValidation.required('Enter full name'),
-        address_line1: lineOneValidation.required('Enter street address'),
-        address_line2: lineTwoValidation.nullable(),
-        address_city: cityValidation.required('Enter city'),
-        address_state: stateValidation.required('Select state'),
-        address_postal_code: postalValidation.required('Enter postal code'),
-    });
-    const postalForm = object({
-        name: identityNameValidation.nullable(),
-        address_line1: lineOneValidation.nullable(),
-        address_line2: lineTwoValidation.nullable(),
-        address_city: cityValidation.nullable(),
-        address_state: stateValidation.nullable(),
-        address_postal_code: postalValidation.required('Enter postal code'),
-    });
-    return postalOnly ? postalForm : fullBillingForm;
-};
+export const fullBillingSchema = () => object({
+    name: identityNameValidation.required('Enter full name'),
+    address_line1: lineOneValidation.required('Enter street address'),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.required('Enter city'),
+    address_state: stateValidation.required('Select state'),
+    address_postal_code: postalValidation.required('Enter postal code'),
+});
+export const postalOnlySchema = () => object({
+    name: identityNameValidation.nullable(),
+    address_line1: lineOneValidation.nullable(),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.nullable(),
+    address_state: stateValidation.nullable(),
+    address_postal_code: postalValidation.required('Enter postal code'),
+});
+export const nameOnlySchema = () => object({
+    name: identityNameValidation.required('Enter full name'),
+    address_line1: lineOneValidation.nullable(),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.nullable(),
+    address_state: stateValidation.nullable(),
+    address_postal_code: postalValidation.nullable(),
+});

package/dist/collection/components/checkout/billing-form/billing-form.js

@@ -1,45 +1,31 @@
-import { h } from "@stencil/core";
-import { billingFormSchema } from "./billing-form-schema";
-import { billingForm } from "../../../styles/parts";
-import { Header3 } from "../../../ui-components";
-import { FormController } from "../../../ui-components/form/form";
+import { h, Host } from "@stencil/core";
 export class BillingForm {
-    constructor() {
-        this.errors = {};
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-    }
-    componentWillLoad() {
-        const postalOnly = this.isPostalOnlyMode;
-        this.formController = new FormController(billingFormSchema(postalOnly));
-    }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-    }
-    get isPostalOnlyMode() {
+    get showSimpleCardBillingForm() {
         return this.paymentMethodType === 'card' && this.hideCardBillingForm;
     }
-    get hideAllBillingFields() {
+    get showSimpleBankAccountBillingForm() {
         return this.paymentMethodType === 'bankAccount' && this.hideBankAccountBillingForm;
     }
     async getValues() {
-        return this.formController.values.getValue();
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
     }
     async fill(fields) {
-        this.formController.setInitialValues(fields);
+        var _a;
+        (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
     }
     async validate() {
-        const isValid = await this.formController.validate();
-        const errors = this.formController.errors.getValue();
-        return { isValid, errors };
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
     }
     render() {
-        const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
-        return (h("div", { key: '91beaa8646dd35b12e4ef90ce4cdcb73f1a441b2', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: 'ca3c1fbba66828371c2172e0d6c6607b36836b00', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && h("legend", { key: '50f2c5e1f7a7b4f14841a91afb7ad7be79e0f89d' }, this.legend), this.isPostalOnlyMode ? (h("justifi-postal-code-form", null)) : (h("justifi-billing-information-form", null))));
+        if (this.showSimpleBankAccountBillingForm) {
+            return (h(Host, null, h("justifi-bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        if (this.showSimpleCardBillingForm) {
+            return (h(Host, null, h("justifi-card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        return (h(Host, null, h("justifi-billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
     }
     static get is() { return "justifi-billing-form"; }
     static get properties() {
@@ -122,13 +108,6 @@ export class BillingForm {
             }
         };
     }
-    static get states() {
-        return {
-            "formController": {},
-            "billingInfo": {},
-            "errors": {}
-        };
-    }
     static get methods() {
         return {
             "getValues": {

package/dist/collection/components/checkout/card-form/card-form.js

@@ -35,10 +35,10 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '0f8d1d7a069380709165302ab55b8f272eb1d721' }, h(CardFormSkeleton, { key: 'f269c934c7b1712cc82a58f6a52a98ae06de0427', isReady: this.isReady }), h("div", { key: 'af64a2c9bff9e71427605d863613810aabbbf50e', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'd5e5c74e5e3be0bb5a9603a89724d23cc6216d6c' }, h(CardFormSkeleton, { key: 'a1e90d74ca6e72678255590a94937932a9520046', isReady: this.isReady }), h("div", { key: 'bb303552ed581492de8ebb0d83cea751ddd90a09', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'b07542c92ca49a44a8c9ea04919ec3db14100cac', class: "mb-3" }, h("iframe-input", { key: 'a13821b11e3c3b9b5cfd42a967c5c708ee5fbb9e', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '4ffe80a04c90546ae26b7239d7a081c251b1e9a5', class: "d-flex align-items-start" }, h("div", { key: '8b86e21933299ace1eb6914ea003eb368f164945', class: "flex-fill me-3" }, h("iframe-input", { key: 'a1c4b27683e2685a4fe4da5ae7d86b9439ec90d9', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '614059cd2995bd630709b75e9e6c29c8134c8762', class: "flex-fill me-3" }, h("iframe-input", { key: '178b15d416591122cf271e63d633950fa6a67617', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '097a78e72fa9eadd4b930b7eaf4afca5c3bf7d6b', class: "flex-fill" }, h("iframe-input", { key: 'cbe3bc2f75863d19a8e5345f0d2a68aa75a54a98', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '9641c97124a504729b1eba3e8704d8fd3fda7fde', class: "mb-3" }, h("iframe-input", { key: 'a5a73c00c2ac0cd12ef98b155a40108248529fb7', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dad1b83f028745aa8b85a8e552f702d5daa3ac6f', class: "d-flex align-items-start" }, h("div", { key: '5de05029d93a81d5ad8c799135863e8cdd1e8619', class: "flex-fill me-3" }, h("iframe-input", { key: '4ec81652e51187bbaa25600299f8cb89f0c41c5c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0280f01efdbbfa3542036fa4ee7baec130e42688', class: "flex-fill me-3" }, h("iframe-input", { key: 'b13dba61a6bd18529e70987029592b5b7307e74b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'edf1e383a148a2d535c4733a2b5af2d8e31e2f43', class: "flex-fill" }, h("iframe-input", { key: 'd63e832db1a089f36909db23cacb110f6571535c', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {

package/dist/collection/components/checkout/checkout.js

@@ -1,21 +1,15 @@
 import { h } from "@stencil/core";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { checkoutStore } from "../../store/checkout.store";
 import { checkoutSummary } from "../../styles/parts";
-import { PaymentMethodTypes } from "../../api/Payment";
 import { StyledHost } from "../../ui-components";
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
-};
 export class Checkout {
     constructor() {
         this.errorMessage = '';
         this.insuranceToggled = false;
         this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
-        this.paymentMethodOptions = [];
-        this.savePaymentMethod = false;
         this.disableBankAccount = false;
         this.disableBnpl = false;
         this.disableCreditCard = false;
@@ -39,9 +33,6 @@ export class Checkout {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    savePaymentMethodChanged(event) {
-        this.savePaymentMethod = event.detail;
-    }
     checkoutComplete(_event) {
         this.isSubmitting = false;
     }
@@ -49,15 +40,32 @@ export class Checkout {
         this.isSubmitting = false;
         console.error('checkout error', event.detail);
     }
-    paymentMethodOptionSelected(event) {
-        checkoutStore.selectedPaymentMethod = event.detail.id;
+    async handleTokenizeSubmit(event) {
+        this.tokenizedPaymentMethod = event.detail.response;
+        if (event.detail.response.error) {
+            this.isSubmitting = false;
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: event.detail.response.error.message,
+                severity: ComponentErrorSeverity.ERROR
+            });
+            return;
+        }
+        // Now submit the checkout with the tokenized payment method
+        await this.submitCheckoutWithToken();
     }
     async fillBillingForm(fields) {
+        var _a;
         checkoutStore.billingFormFields = fields;
+        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
-        var _a;
-        return { isValid: await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.validate()) };
+        var _a, _b, _c;
+        const tokenizeValidation = await ((_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.validate());
+        const modularValidation = await ((_b = this.modularCheckoutRef) === null || _b === void 0 ? void 0 : _b.validate());
+        return {
+            isValid: ((_c = tokenizeValidation === null || tokenizeValidation === void 0 ? void 0 : tokenizeValidation.isValid) !== null && _c !== void 0 ? _c : true) && (modularValidation !== null && modularValidation !== void 0 ? modularValidation : true)
+        };
     }
     updateStore() {
         checkoutStore.checkoutId = this.checkoutId;
@@ -68,27 +76,26 @@ export class Checkout {
         checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
     }
     async submit(_event) {
+        var _a;
         this.isSubmitting = true;
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
-    }
-    get canSavePaymentMethod() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
+        // Trigger the tokenize payment method submission
+        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
     }
-    get showBillingForm() {
-        return (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && !this.hideCardBillingForm)
-            || (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && !this.hideBankAccountBillingForm);
-    }
-    get showBillingFormSection() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
+    async submitCheckoutWithToken() {
+        if (!this.tokenizedPaymentMethod || this.tokenizedPaymentMethod.error) {
+            this.isSubmitting = false;
+            return;
+        }
+        // Set the payment token in the store for the modular checkout to use
+        checkoutStore.paymentToken = this.tokenizedPaymentMethod.token;
+        // Submit the checkout
+        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
     }
     get showPaymentTypeHeader() {
         return !this.disableCreditCard && !this.disableBankAccount;
     }
-    get showPostalCodeForm() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && this.hideCardBillingForm;
-    }
     render() {
-        return (h(StyledHost, { key: '4fb1d82b065de6c1e4651a246a53f8e58451d6f6' }, h("justifi-modular-checkout", { key: '232cf32890422f474cf929b7c7ed7246d7b39c75', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '677ad110b05520be3b729995657086f0f6cbf337', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '458c84541dd154dd8b4ad1d0f2320e2308cc1785', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '440a7d1ad7b21da3db66e6c6f1f9afefb434a089', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '99bd431a8f70ce6e764cc04da3d0aaae6f0ebcbe' }, h("justifi-checkout-summary", { key: '52da663e5bed35f0deb220800c7ede8835a3671b' }))), h("div", { key: 'e95b1c6830d20c5af57c558badb04d07d3c48f23', class: "col-12 mt-4" }, h("slot", { key: '527d58d4806d2e1bbcba499e97ab65f6c9c7efb9', name: "insurance" })), h("div", { key: '69d1319d1e05852de4f5566ad3be20bc9a6ee499', class: "col-12 mt-4" }, h("justifi-header", { key: '1682f909f22172a44da54118aefe428f92908e91', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '7942a12143bea0235705969737e11d59bc5180e1', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '497664d455695693c4f9a1a4465c62ad4d5b6bdf', class: "d-flex flex-column" }, h("section", { key: 'd3da4c18b430e1b36f7b9ba20be517994e763b5e' }, h("div", { key: '1cc0f0462a0f70d2acc4c9fdee25fbb2fe953c22' }, h("justifi-saved-payment-methods", { key: '576da27df84d67bc69f2d95f00a6c440fa73f7ed' }), h("justifi-sezzle-payment-method", { key: '6544a3a250ee012870a9edce71dd763553d44554' }), !this.disableCreditCard && (h("div", { key: '79050f768d8d76c4d882bed667e85391c230a960' }, h("payment-method-option", { key: '5a6c1dc583766707e6215203fdba176bd65b501d', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '5e6f0b854191a9a5db8936b2e30518fba251e478', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c3f72f27dfe36924fe94ab4f7c79b6b9ff19b47' }))))), !this.disableBankAccount && (h("div", { key: 'f6a88103b2c30e4dd10e733b19aaa29a7a44430c' }, h("payment-method-option", { key: '67ef047a8caad5bc389238d54bb3d7056ca4b9e6', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'e67924184fc43811523081711f59865a01d7cf9f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'a01cdfe8be1bc98d4c0f75c2a9f2ca1cce519042' }))))))))), this.showBillingFormSection && (h("div", { key: 'a15f1202548c7d6c302c2b2827168a6a119f8634', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'ee654c812cb097449937da4253e191de1ee669d5', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '2a5736e6da3354f7a9d1a5b8870a2f61c09c2592' })), this.showBillingForm && (h("justifi-billing-information-form", { key: '7dd63931e75d7583b4f51a1f6bb2b1e84a46e078' })))), h("div", { key: '54aeb0f07f574ee004ec02cd279265202cffa9bf', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: '2e010be22091cee1ebc4353d5dac3b49639175e7' }))), h("div", { key: '71df812c8a922ae8b447d647f69675230c092db9', class: "mt-4" }, h("justifi-button", { key: '057cd18c6235c73cc69ca85e9cb35a2a614a4d9a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '516d33e24d351df623d07b8c27113568b2868aa0' }, h("justifi-modular-checkout", { key: 'd75f9484d6b77cf6ddb11f56beaa47ade1dead3f', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: '05984eb0fb57e63d2f89d3eb8d37bcaa3e212547', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '4bf6c78f9052118d24c8258c1926ebeccea304ef', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '772ce7a33a42025e37891dc72bc89ee164dfafa7', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'abaee0bf9c978fcaff1941cfa61fa08f64312d60' }, h("justifi-checkout-summary", { key: '8833e3a419f769b6df1f73aaf58fa0f3d761e726' }))), h("div", { key: 'a1f4ed10a8c0e87ab229a4d28893e623c6db6162', class: "col-12 mt-4" }, h("slot", { key: 'c80d7f40db60e1b8cf4f408d44f9c0bbe17bcd24', name: "insurance" })), h("div", { key: '1c75a9d0d5cc74cc5a804218960f5be9e3532bbe', class: "col-12 mt-4" }, h("justifi-header", { key: '8800e249bc4d92cf38611eaefc8230ad5f35c447', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'bff61808c64fa281230642d385c6081a51276e9d', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1bfbac09bc3e91d07e2eb003c38cbf2bc3bea1cd', class: "d-flex flex-column" }, h("section", { key: 'd383841d037516896511f72e40d3eb3fd6f9c272' }, h("div", { key: '5440f8343465f39697ca87f3bcdfe3f5fa511685' }, h("justifi-saved-payment-methods", { key: '23ee2270b2ffecd43cc8d608482a4f77d7ce0ee3' }), h("justifi-sezzle-payment-method", { key: '0a5577cb1070563ba5fb7dd8c3b05977ee340bd6' }), h("justifi-tokenize-payment-method", { key: 'd03e8a971e532781c7d9087345fe1b4a8741f492', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '9e488234ee43bed70992e190a23b1faf5fe61308', class: "mt-4" }, h("justifi-button", { key: '31571a8fda37762731679d69b9017e1b553bef8a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -260,9 +267,8 @@ export class Checkout {
             "errorMessage": {},
             "insuranceToggled": {},
             "isSubmitting": {},
-            "paymentMethodOptions": {},
-            "savePaymentMethod": {},
-            "serverError": {}
+            "serverError": {},
+            "tokenizedPaymentMethod": {}
         };
     }
     static get events() {
@@ -401,12 +407,6 @@ export class Checkout {
     }
     static get listeners() {
         return [{
-                "name": "checkboxChanged",
-                "method": "savePaymentMethodChanged",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "submit-event",
                 "method": "checkoutComplete",
                 "target": undefined,
@@ -419,8 +419,8 @@ export class Checkout {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "paymentMethodOptionSelected",
-                "method": "paymentMethodOptionSelected",
+                "name": "submit-event",
+                "method": "handleTokenizeSubmit",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/checkout/payment-method-option-utils.js

@@ -7,7 +7,6 @@ export class PaymentMethodOption {
         this.type = snakeToCamel(paymentMethod.type);
     }
 }
-;
 export var CardBrandLabels;
 (function (CardBrandLabels) {
     CardBrandLabels["american_express"] = "American Express";

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -1,15 +1,17 @@
 import { h } from "@stencil/core";
 import { StyledHost } from "../../ui-components";
+import { checkoutStore } from "../../store/checkout.store";
 export class SaveNewPaymentMethod {
     constructor() {
         this.isChecked = false;
-    }
-    handleCheckboxChange(_name, value) {
-        this.isChecked = value;
-        this.checkboxChanged.emit(this.isChecked);
+        this.handleCheckboxChange = (_name, value) => {
+            this.isChecked = value;
+            checkoutStore.savePaymentMethod = value;
+            this.checkboxChanged.emit(this.isChecked);
+        };
     }
     render() {
-        return (h(StyledHost, { key: '114f1887f2aebee2440d5c0b187fe1f361137230' }, h("div", { key: '8a967beb89065a8b3ee501f0589b6617764c641e', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'b22ca881a5fcda9dc044dfd1175e9ae06fd9f504', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) }))));
+        return (h(StyledHost, { key: 'f23a4f992eef86df7ebfa86f4b46b232456016b2' }, h("div", { key: '0ef7c08423451655318751a6377f0ba8ffda3c7c', class: "mt-4 form-check" }, h("form-control-checkbox", { key: '609527d08abb45603ea683a051cf9c09435fc5bc', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange }))));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkout/saved-payment-method.js

@@ -18,7 +18,7 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'c6a1d3de6363c80a0acb15c6676d3e913beeda2d', class: "payment-method" }, h("div", { key: 'fdabb1a67f654a3bcf06e86e8c42f6aa281e6757', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0731e2ccb8080ee4972201a617cd99376627e332', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: '077ad61b1a84963ebaad43397aa7c88211d9dd7e', class: "payment-method" }, h("div", { key: 'e01a2e45c55273cb0ee9774b60504d7098a74cf9', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: 'f34e9fe3f52fbf1acfdc72993259d6f6f58ac470', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
     }
     static get is() { return "justifi-saved-payment-method"; }
     static get properties() {

package/dist/collection/components/checkouts-list/checkouts-list-core.js

@@ -118,7 +118,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'c411d1c3a54fd8a331f0c5cdbae344e231482c0f' }, h(TableComponent, { key: '21774546f3500612497943869017fa7c712dff7e' }, h(TableHead, { key: 'c4e745ead905a393ff1b0cd0fba23db2fcc03ad8' }, h(TableHeadRow, { key: '88063d0baedd1febe0febcab1ccefc512accfd7d' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'e2534bc13d9e015f127c5396bbe73545d92536b4' }, h(TableLoadingState, { key: '0f0958fa87403652880222365cf7f88dd33335cc', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '588bb80d518892791ed2134dd5405940e7c28db7', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '219cce1137232c64b7c9188042c4aaca7e0e91b6', 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: '16978b3be698ceabd1d19b9eaa3f85c01a862b83' }, h(TableFootRow, { key: 'cd26e5b6f03dff77e09dfb4f9962e7601b2e40dc' }, h(TableFootCell, { key: '508008cf682b393549a839453d4b4c2eee1f67a4', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '688702c35e666def509ccb77b88b88ddd5e0d58a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'ac27fa8b086e64e53a287f96be1d1212a7c23fc3' }, h(TableComponent, { key: '965b9e4761f686a254297a753b638952181d9758' }, h(TableHead, { key: '41502bb86d87acd8f730f22705d82a2bb4c3787c' }, h(TableHeadRow, { key: '9aa770a8bbb3c9623fde336580dcecda0ee6909e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'ad20f6287a2eefd0aa659925cf4be8a03766c1c2' }, h(TableLoadingState, { key: 'bdd7d89bed12c4451199b59e2793cc3d4dbc24a8', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8b89063a5cc78beb42a52375c431e834583ef12a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a557b0a68af21a5501139433f980a6c083536d71', 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: '0ba995e692b70214b1f63f3fbb7e05e76f229304' }, h(TableFootRow, { key: '25703345e36b46ce3a4cd9d09893c744b6db4d86' }, h(TableFootCell, { key: '07f5df6019322cb80053e4c061a2b5cb6ba7187e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'daf2dd74a5f24192c9052a2906459a6d2b53544d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {

package/dist/collection/components/checkouts-list/checkouts-list-filters.js

@@ -38,7 +38,7 @@ export class CheckoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '5474a09b729c816bafb47101dbf5a25aff92eb1b' }, h("table-filters-menu", { key: '92e46a05e67bdf84b74cd644c1b89d0fc4c86af9', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'd8562876f8a0c1d85caa5a298cccdb1143bd7512', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '4162644cf10861d91a79dc07f845dd21a6c8d6a5', class: "p-2" }, h("form-control-select", { key: '2b13ef4af25f6ac3865f3b0edde91929655537bf', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '9aee7f453be147b03a548fe9ea9bd9bcc6a233aa', class: "p-2" }, h("form-control-select", { key: '8f375d5660c3414e5f3796e02694fa46ed761871', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
+        return (h(StyledHost, { key: '05a4d429a1acd7bbaf202872523284e2b2cd3677' }, h("table-filters-menu", { key: 'abf61654a75212537af580f3bfd2646042eaba8a', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'f8e5cfe4b0a23723d0df939a1d1873adffcb1da9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd9e23e96a7269b3609e690a1e64e8c20bd125cb7', class: "p-2" }, h("form-control-select", { key: 'e1899dbc615be07486bc54f8baa395bee776d8ce', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'bedbc26d9d9f6906013ef4b80542d9031822b19c', class: "p-2" }, h("form-control-select", { key: '3bfef7fabeb85a29304e11093005bb1f58b23f41', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkouts-list/checkouts-list.js

@@ -61,7 +61,7 @@ export class CheckoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '41bf633467138b6af13b1c02ccf1e1016ec54bfe' }, h("checkouts-list-core", { key: 'cd3ca431258ad73e701fe74612ecdf2c0f2a1bda', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'b0c774c4f56f94cd6b4a3dc8651938f9f33ca94e' }, h("checkouts-list-core", { key: 'd524423a791f70c234044f5ba27d7bc3648fc988', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dispute-management/dispute-management-core.js

@@ -46,7 +46,7 @@ export class DisputeManagementCore {
         });
     }
     render() {
-        return (h("div", { key: 'c85852cbd1169f371eb30ae06b6a2a564a15ece7' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
+        return (h("div", { key: 'b5a802e8c418b3b7f3235f43260186084a6ee079' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
     }
     static get is() { return "justifi-dispute-management-core"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-management.js

@@ -43,7 +43,7 @@ export class DisputeManagement {
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: '4087eb105a046a3cc194d9f25c80fa11298fa0a2', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '8c800827aaa9d549a734ea05698763685e160a98', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-dispute-management"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-notification.js

@@ -30,7 +30,7 @@ export class DisputeNotification {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(StyledHost, { key: '0f1028825a7a96a06e7219518ffed54bc0db1b2b' }, this.isLoading && (h("div", { key: 'f4b704182a5a7085827854634d38c56423cc2e1b', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'b2062d8b683ab110c26fc30f1600c4500f668d87', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'b5d2afe1fdd2e5ee0ec60048a48778bcfa6c78d3', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '1e87c8936b3f2e26e680786927c5a4609aca0b83', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '49090493e3921353b7a830397795496bb234d112', part: text }, h("h1", { key: 'fd7b56a7cfeaa6820bf2cc121575314d075b5a83', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '72ba296695928baca8f7c5c3b1f858c596efedb2' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: 'cce733ff1bbca7a9530a442035cbae2995e018e7', class: "h5" }, "Dispute details"), h("div", { key: '28b7f081e345112d99c52d05f205734995617253', class: "d-table gap-2" }, h("div", { key: 'd9476d8d0adfa3c6eccad229e94cd3824a720c7d', class: "d-table-row gap-2" }, h("span", { key: '4d9e0714eee778c326ee1d70a32f79d90d3d4b09', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'b227edcf9b4b65b790d8aa98021d2662a12855bc', 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: 'b1b1cdaac5482f565a6f26af71c0b526b8c19f4e', class: "d-table-row gap-2" }, h("span", { key: '0a479a9de96cce6e42bec90a17affe2c93ced44f', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '5d5020dda571f4465e2a358880ad5f20bc6171ea', 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: 'a5f42c3fcbb5d14f8479d0a576d31a50f8fc6441', class: "d-table-row gap-2" }, h("span", { key: '280fca5a101eb0e823eb9ccc13c746ac7ed62069', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '4dfc0b9a295ffc804b708d3590358256009e5376', 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: '654e7baccd08628bc90d050bad108011b49f9972', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'd0817cdb23bf33086c6ce5122f4ed5388027d96c', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '5446bef44a0ca747692d59fd5490409d00a9e285', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: '17fbc5902badc4230c5485b326f480180c844768' }, h("h1", { key: 'fefa0234306588d9e7f56733872bf8c9793f51dd', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'eaad72aa8d9f65ca296379a2800180878ec8a7e5' }, "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: 'ec1b0d728a7518f913c2a69976fa1f5fc8f76c74' }, h("h1", { key: '9d42fad15fbeee507e2f364c3a35f143ff7599e2', class: "h4" }, "This payment was disputed"), h("p", { key: '3b728a5544fe17a6c58c12f7e8eef290022945b6' }, "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: '6d1813508a657265546fbef00bd1e8f46ffaf740' }, h("h1", { key: 'de981fc2e06e860f47146647975965a903a39b55', class: "h4" }, "This payment was disputed"), h("p", { key: '4e57ab86518bd678a3a5402b712d40d573b3a970' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h(StyledHost, { key: '90d2506d5bde2ea478fa3575fc162bb356b67fac' }, this.isLoading && (h("div", { key: '4877ae22d3d8e312640b122c9107b6bdd8f924cb', style: { marginBottom: '8px' } }, h(Skeleton, { key: '31fa0717949bbc6aa49db1c6ae0e324099ae1de2', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'ac5179232cb9ee33d3f3e16d9f93536ecfbf46a5', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'c22a5e3b257d01f92de7f6188fa0758861abc747', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: 'be331b1a5e2fa0baf46bc593ef7ce4f5872abcff', part: text }, h("h1", { key: '8094c16d3b375f28ffe314613f21ae25b63e59ef', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: 'd89ae665e1f9bd99c9338e2132c1dc56e5386696' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '2786733eac76628019993e13473d1f43c0c395ed', class: "h5" }, "Dispute details"), h("div", { key: '663c28c46136bd56889b6ad0b9bfce9e5adbb590', class: "d-table gap-2" }, h("div", { key: 'dc688fad875d1591dcb7f31d423b61a3df2ff954', class: "d-table-row gap-2" }, h("span", { key: '442db7a6e95524ca6b092794c7a4a4d987c9866e', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '0a31de8692c9b00f43fcf3c0508e4d00a221d096', 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: '9fe0c1a3d3350c36fca190ae748dafe24d41b5fc', class: "d-table-row gap-2" }, h("span", { key: '12165cb6671519130a5f2e0d8938aaa55e7e3ead', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '4a37ca8a7d64b97142997bb50ec11d737ac6a882', 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: '4d9cf74a8ed26dd84e4ce7325d4b8703352362a4', class: "d-table-row gap-2" }, h("span", { key: '8c0eaa24ebec7703eb18384b0b1f2eae8a684b55', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '238813abf2ea0848e1fe817d5798b9b0d0b78ffc', 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: 'd156a7e9bf0e7214ff2164fc09b12c0b8f1d2b36', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '7822fd12dfc39bd2aced043956d012fd34cc1b01', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '05132b3a6d1fc3d136dc227008ea1999330cdb96', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'b04dd0c34f608b75ea3997a9c28ce948fa9dba5c' }, h("h1", { key: 'ac2a13373315703e86247b6707097af7cf2e6757', class: "h4" }, "This payment is disputed and under review"), h("p", { key: '203aed553e01bbaebe44bb370a1d088c149cda06' }, "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: '6325264f8ad7b6678825878ed59f03f90eee421a' }, h("h1", { key: '7b647ed77373884e0751de4fc39403211c249db6', class: "h4" }, "This payment was disputed"), h("p", { key: '2a5c1560d341af9b743234a058a1187f245a2ae8' }, "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: 'a89e7f4d7e8926ed052023c7dbbbaf076a03ed9c' }, h("h1", { key: '534b560aa35dd43ba0eba668904ef70dc1a6954f', class: "h4" }, "This payment was disputed"), h("p", { key: '2381f2f6418b47dce67c498c56d5f3789add57dc' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
     static get is() { return "justifi-dispute-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dispute-management/dispute-response/additional-statement.js

@@ -29,7 +29,7 @@ export class AdditionalStatement {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '4d0fbca80a880577be7853efc494807d7d1e2fd9' }, h("div", { key: '6c3a82afe01b0812807a8e19dc750d4e9901876a', class: "row gy-3" }, h("div", { key: '89e7f50b0c6d67249b892caf8c6b2d78c1742309', class: "col-12" }, h("h2", { key: 'e0c4db3f5330cdd0e00897da0a54b898f0056f93', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: '58d4506d4bc0470afa4de87fdcf25ce4397d4180', class: "col-12" }, h("form-control-textarea", { key: 'aee641d90803d0ff483cfe75d881e3259303d4bc', 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: '19377eb6382adc9cb69ec57fe7928b7d477110d8', class: "col-12" }, h("form-control-file-v2", { key: '9529de236046398904d4780fcedada3a67ce4daf', 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 })))));
+        return (h("div", { key: '3904e1b961f9e1a0683647d306a128efcd7b9202' }, h("div", { key: '37ae13e4b7ad7bc8a18b588c4e591cde9030147e', class: "row gy-3" }, h("div", { key: '2f9b835795f21e4585638ad8be2093642f08b982', class: "col-12" }, h("h2", { key: '9ff1aeb8256ffe97c6300bd48597542519cda0a7', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: 'e4c6b9f4624b06103b6c643838a76c4a724e3168', class: "col-12" }, h("form-control-textarea", { key: 'dc9a5cb126a2d6f70cd8d59cdcfcd29f5c4e341b', 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: 'ba5202a5d8df30f5f4b7217341110646bb76e082', class: "col-12" }, h("form-control-file-v2", { key: '3168fc63d6bd6013821ee335914d916bb680fe42', 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 })))));
     }
     static get is() { return "justifi-additional-statement"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-response/cancellation-policy.js

@@ -28,7 +28,7 @@ export class CancellationPolicy {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'ac10b9b21d37179211d74118b06f561e95d9ea71' }, h("div", { key: '8ff525f8ed20828ed153b7dc23cb84a0277b81d4', class: "row gy-3" }, h("div", { key: '4f22ed526972a6625dc77b3ab0ab5b074277d7b2', class: "col-12" }, h("h2", { key: 'd78d54468b91edd99238bd757f871b18ec5b58ca', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '629c9660446cbba8951cd8396d9b72aea71c731b', class: "col-12" }, h("form-control-textarea", { key: '60e0b4903e4ddec6915d23617f215d5d2ea20935', 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: 'aec3e4561f880b86ba6f5c7ce0298e45b837c2fd', class: "col-12" }, h("form-control-textarea", { key: 'e77d126709037cb22e6e4fcf2228652ffeb672ee', 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: '407c071a0f7a1e488eb2ef4d522e515138a5ed2c', class: "col-12" }, h("form-control-file-v2", { key: '15dfacd8e1de439848d12ecec9a0f5ffac259484', 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: '29819e51969e655219ccbdbb2e1d1b738b64f7d3' }, h("div", { key: '28279bbc8354128a5041ed6eac16d4966be1584c', class: "row gy-3" }, h("div", { key: '8b6215544f87a8c35b81a93a5f4826a35e0c0f9f', class: "col-12" }, h("h2", { key: 'b6337efb93f03ea48f2c29b1baef4929f236df2d', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: 'b7d78115378ecd0b4a4f8a43349f1b4f2527ca35', class: "col-12" }, h("form-control-textarea", { key: '6ab47f5626a945f222efceef43dc096061cb67ed', 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: '6aeccf798d112e79251408401c99d916a9065e94', class: "col-12" }, h("form-control-textarea", { key: '580e61e4370570c9a04496fef4b7ad9c19058336', 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: 'e0deddf002b64d02bc5a5db075da11d2566dc3bb', class: "col-12" }, h("form-control-file-v2", { key: '3da55e915d4d3126456de8e95debc6d9e46dca42', 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 })))));
     }
     static get is() { return "justifi-cancellation-policy"; }
     static get properties() {