@justifi/webcomponents 5.7.6 → 6.0.0-rc.2

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

@@ -34,7 +34,7 @@ export class BusinessCoreInfoFormStep {
         }
     }
     render() {
-        return (h("justifi-business-core-info-form-step-core", { key: '21d9ea1603f0e9bf6fe842d177f0f6da0113fb73', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-core-info-form-step-core", { key: '1d2bd68e87d5f312c54f5a4bda8863b26fdeec5d', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-core-info-form-step"; }
     static get properties() {

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

@@ -34,7 +34,7 @@ export class BusinessOwnersFormStep {
         }
     }
     render() {
-        return (h(Host, { key: '39dcd68b6ef40bb24dfec2da03d420de7ff17f1a' }, h("justifi-business-owners-form-step-core", { key: 'f9958c7cb798f256106f93a45bcc8405da5f3b49', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
+        return (h(Host, { key: '3420b6e74da344665583a49146b5b7fd1be40155' }, h("justifi-business-owners-form-step-core", { key: '3e092450028815a0b134af4294edbb7589864409', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
     }
     static get is() { return "justifi-business-owners-form-step"; }
     static get properties() {

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

@@ -13,7 +13,7 @@ export class RepresentativeFormInputs {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h("form", { key: '02b2888267736b1441b16e569a7d1ff3ab3e7e17' }, h("fieldset", { key: 'd5d4afd7df869b87272407d4e401ad802708c870' }, h("div", { key: '4e2113e9d7d16c6d2b50625dba3dfa82f7b04832', class: "d-flex align-items-center gap-2" }, h("legend", { key: '17ffa94355f1d89223c554f4fb80e38735681725', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '0df0655bc4e409ae53b93e40260486e4ff610410', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: 'bb67f7aafe877075d18ac9a7e8acaa94267035de', class: "mt-2" }), h("div", { key: 'aa5b5fb1913f64c54384d793beeb6dcd5728d10e', class: "row gy-3" }, h("div", { key: '6fe16958c76e589581bd099192fc6886f3e7eb6c', class: "col-12 col-md-8" }, h("form-control-text", { key: 'e0579c2e09c9be66b431174b6d79122349e4d859', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '98cfa2ab8e5537452ab0dae54ad95f1ac2a541f4', class: "col-12 col-md-4" }, h("form-control-text", { key: '55962d3f118bc0ffbbe1fbf62d8d6e15c0f04dfb', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: 'c8bb3ea449d7adcd0d897ee64a1383ff7639305d', class: "col-12 col-md-6" }, h("form-control-text", { key: 'df99114c3d94073a3a95b7ea2f326d27db1d4fa9', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '9fe7cce8fbaa975f2cb2f890ec60cc5696356014', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '236d3629a7d97feb7c7556b7e7ba83b0b45ca3db', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'cf99a0654ed61f599d5d854149e68abb9e52798f', class: "col-12 col-md-4" }, h("form-control-date", { key: '8bc17351844b590e16f34daaee6da1e67d433d44', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '563dd2be61ca9238c915298fb5db51dfca6468e3', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'a99b04783e2a7a439091aa79394e614d82293ac8', name: "identification_number", label: "SSN", defaultValue: (_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: '4ae17d91e7428f54e07942a1429e554c6e7a37ac', class: "col-12" }, h("justifi-identity-address-form", { key: '8490e4d041ff22bcb481d553760ed6f34ca908aa', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h("form", { key: 'e4b7a532e18a921a5a28aab31f679fbbad164198' }, h("fieldset", { key: 'd7056e5ee25625adb563e2687f581157653c8a9d' }, h("div", { key: '456aab0ef1399a7c1d272059c881c6c6f3d0e87c', class: "d-flex align-items-center gap-2" }, h("legend", { key: '430b3731bbd97ff1589bd81bd6fdaa4082161180', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '47676ededb80e0f766cb786265d8fb307c60d125', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: '514197b5bd4868ec29e75dc74367deb187b32063', class: "mt-2" }), h("div", { key: 'f2986d55d0bfbf0e6059f0b2a766d2dc603acdc5', class: "row gy-3" }, h("div", { key: 'e4a3749c5e972f505527b8fc172f9a4214806345', class: "col-12 col-md-8" }, h("form-control-text", { key: 'd54c8d17f0360277fe04dd91a528e303182495c7', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '4fa0b1a192fb39a982c957d202ea2ac1e40dedd8', class: "col-12 col-md-4" }, h("form-control-text", { key: '8c3bca4234ea0e7ae3c79d810ffb469637898eb6', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '7e14a61364883172f2938bd8b1e53883ddd369fe', class: "col-12 col-md-6" }, h("form-control-text", { key: '8d9c81d374998dbaea5322906fddb5eeadea1546', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'c3f369b226a08497926b26d0732b7dc9d6413559', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '734625aeac8384f2b8676c4d350368675cff3a6f', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '23d509b724f2617eb0a4f85c74238b09a052a6cb', class: "col-12 col-md-4" }, h("form-control-date", { key: '0f838cc474beab9822a84856733a86ecf43f0ec3', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: 'f6d08c53dad2e9a550adf893ac59166015ffb6e4', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'dd610955fb7c62fd0aab9af925af34cdc47ab3e9', name: "identification_number", label: "SSN", defaultValue: (_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: 'd4e2a212a87ca9be4be8e21f3e47008b2201871c', class: "col-12" }, h("justifi-identity-address-form", { key: 'bb2d0d01e07be4d37acfd448796c8a33460111ed', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
     static get is() { return "justifi-business-representative-form-inputs"; }
     static get properties() {

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

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

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: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '843caa7d14d4694d78e477cb51d6caac387fdb23' }, h(BankAccountFormSkeleton, { key: 'f4381a71ef5831d159f51472744c7d7a85221464', isReady: this.isReady }), h("div", { key: '8de6e74f3559d94747d8ca942f777977325f16e5', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, 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` })))));
+            } }, h("div", { key: '09e19bc320f2095c9148ddaa2105813071d5f9da', class: "row mb-3" }, h("iframe-input", { key: 'e6262b9fa09d8b30da046dc0c1a01a7bbac33a7d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '15b85f900ce89f440ecbfe62e61d36d15eff9c2b', class: "row" }, h("iframe-input", { key: '9b4cf61adfd4a5c68e07cc4eb49841727ce2c63d', 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

@@ -6,7 +6,7 @@ export const fullBillingSchema = () => object({
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.required('Enter city'),
     address_state: stateValidation.required('Select state'),
-    address_postal_code: postalValidation.required('Enter postal code')
+    address_postal_code: postalValidation.required('Enter postal code'),
 });
 export const postalOnlySchema = () => object({
     name: identityNameValidation.nullable(),
@@ -14,7 +14,7 @@ export const postalOnlySchema = () => object({
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.nullable(),
     address_state: stateValidation.nullable(),
-    address_postal_code: postalValidation.required('Enter postal code')
+    address_postal_code: postalValidation.required('Enter postal code'),
 });
 export const nameOnlySchema = () => object({
     name: identityNameValidation.required('Enter full name'),
@@ -22,5 +22,5 @@ export const nameOnlySchema = () => object({
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.nullable(),
     address_state: stateValidation.nullable(),
-    address_postal_code: postalValidation.nullable()
+    address_postal_code: postalValidation.nullable(),
 });

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: '7d91102f0ecd44a368b614d6192b3c2c3955fcdf' }, h(CardFormSkeleton, { key: '721c79931188558801dc462ec55ab6feaa6a8e65', isReady: this.isReady }), h("div", { key: '8050c1d12e1c5a68e574d4db8cb35bd94e10f92d', class: "container-fluid p-0", style: {
+        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: '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: '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` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {

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

@@ -1,60 +1,101 @@
 import { h } from "@stencil/core";
-import { makeGetCheckout, makeCheckoutComplete } from "../../actions/checkout/checkout-actions";
-import { CheckoutService } from "../../api/services/checkout.service";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 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 { StyledHost } from "../../ui-components";
 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.disableBankAccount = false;
+        this.disableBnpl = false;
+        this.disableCreditCard = false;
+        this.disablePaymentMethodGroup = false;
+        this.hideBankAccountBillingForm = false;
+        this.hideCardBillingForm = false;
+    }
+    propChanged() {
+        this.updateStore();
+    }
+    connectedCallback() {
+        if (this.authToken && this.checkoutId) {
+            this.updateStore();
+        }
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.initializeGetCheckout();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
-    initializeGetCheckout() {
-        if (this.authToken && this.checkoutId) {
-            this.getCheckout = makeGetCheckout({
-                authToken: this.authToken,
-                checkoutId: this.checkoutId,
-                service: new CheckoutService()
-            });
-            this.complete = makeCheckoutComplete({
-                authToken: this.authToken,
-                checkoutId: this.checkoutId,
-                service: new CheckoutService()
-            });
-        }
-        else {
+    checkoutComplete(_event) {
+        this.isSubmitting = false;
+    }
+    checkoutError(event) {
+        this.isSubmitting = false;
+        console.error('checkout error', event.detail);
+    }
+    async handleTokenizeSubmit(event) {
+        this.tokenizedPaymentMethod = event.detail.response;
+        if (event.detail.response.error) {
+            this.isSubmitting = false;
             this.errorEvent.emit({
-                message: 'auth-token and checkout-id are required',
-                errorCode: ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentErrorSeverity.ERROR,
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: event.detail.response.error.message,
+                severity: ComponentErrorSeverity.ERROR
             });
+            return;
         }
-    }
-    propChanged() {
-        this.initializeGetCheckout();
+        // Now submit the checkout with the tokenized payment method
+        await this.submitCheckoutWithToken();
     }
     async fillBillingForm(fields) {
-        this.checkoutCoreRef.fillBillingForm(fields);
+        var _a;
+        checkoutStore.billingFormFields = fields;
+        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
-        const { isValid } = await this.checkoutCoreRef.validate();
-        return { isValid };
+        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;
+        checkoutStore.authToken = this.authToken;
+        checkoutStore.disableCreditCard = this.disableCreditCard;
+        checkoutStore.disableBankAccount = this.disableBankAccount;
+        checkoutStore.disableBnpl = this.disableBnpl;
+        checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
+    }
+    async submit(_event) {
+        var _a;
+        this.isSubmitting = true;
+        // Trigger the tokenize payment method submission
+        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
+    }
+    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;
     }
     render() {
-        return (h("justifi-checkout-core", { key: 'c1c7cf4f1aadce928e3ed6a6ae05a7824d875d68', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: el => {
-                if (el) {
-                    this.checkoutCoreRef = el;
-                }
-            } }, h("div", { key: '7a4be7220e5eb199f94c5086c23e10dce68d4854', slot: "insurance" }, h("slot", { key: 'f5db23ef6dc82d0521518ea2dbfe99d8c8b6c2cc', name: "insurance" }))));
+        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() {
@@ -97,9 +138,9 @@ export class Checkout {
                 "setter": false,
                 "reflect": false
             },
-            "disableCreditCard": {
+            "disableBankAccount": {
                 "type": "boolean",
-                "attribute": "disable-credit-card",
+                "attribute": "disable-bank-account",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -114,11 +155,12 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "disableBankAccount": {
+            "disableBnpl": {
                 "type": "boolean",
-                "attribute": "disable-bank-account",
+                "attribute": "disable-bnpl",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -133,11 +175,12 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "disableBnpl": {
+            "disableCreditCard": {
                 "type": "boolean",
-                "attribute": "disable-bnpl",
+                "attribute": "disable-credit-card",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -152,7 +195,8 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "disablePaymentMethodGroup": {
                 "type": "boolean",
@@ -171,11 +215,12 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "hideCardBillingForm": {
+            "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
+                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -190,11 +235,12 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "hideBankAccountBillingForm": {
+            "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
+                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -209,15 +255,20 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "getCheckout": {},
+            "checkout": {},
             "complete": {},
-            "errorMessage": {}
+            "errorMessage": {},
+            "insuranceToggled": {},
+            "isSubmitting": {},
+            "serverError": {},
+            "tokenizedPaymentMethod": {}
         };
     }
     static get events() {
@@ -263,6 +314,27 @@ export class Checkout {
                         }
                     }
                 }
+            }, {
+                "method": "submitEvent",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
+                    "references": {
+                        "ComponentSubmitEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -319,6 +391,39 @@ export class Checkout {
             }, {
                 "propName": "checkoutId",
                 "methodName": "propChanged"
+            }, {
+                "propName": "disableCreditCard",
+                "methodName": "propChanged"
+            }, {
+                "propName": "disableBankAccount",
+                "methodName": "propChanged"
+            }, {
+                "propName": "disableBnpl",
+                "methodName": "propChanged"
+            }, {
+                "propName": "disablePaymentMethodGroup",
+                "methodName": "propChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "submit-event",
+                "method": "checkoutComplete",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "error-event",
+                "method": "checkoutError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "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,16 +1,20 @@
 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("div", { key: 'e6e7a75237ec2062188bf85deadac58892663b3b', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'abbaeb4e9119c4d41f0a727c7a070c14b7418302', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+        return (h(StyledHost, { key: 'f23a4f992eef86df7ebfa86f4b46b232456016b2' }, h("form-control-checkbox", { key: 'aff52e51dac64207f95e439b26902c772d84963d', 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"; }
     static get states() {
         return {
             "isChecked": {}

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: '78487e52f549547f4c89f48a238a8916d77d4f1c', class: "payment-method" }, h("div", { key: 'd437a5f9e79356b1177703da2b5d7f4ca98072ce', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0dd03b9ebae98c441c63717aba310d77e587b1c8', 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: 'da871bcddcfe5ea01aab207d6a4004770b63a18a', class: "payment-method" }, h("div", { key: '06f7919ba9bc826fa8ae8391231fa173098cd212', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '304f073b7c969c31b17cc44a9e9fa16e00c41aec', 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: '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 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: 'da4917a79b2d4e5a00627a00036839caeeee1ce1' }, h("table-filters-menu", { key: 'ad310d55d131b4fcb64ccdcaedcfcd665843cee4', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: '9989d0a3e5b6672fb5e78d2c368380768fc34167', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a6182923403cfa9a4d7217e436acc6ee2133e270', class: "p-2" }, h("form-control-select", { key: '4b0314046130feae009a058e180108e9ea848cdc', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'a9b53a160ef84ca33003c481c4ab07b173d64825', class: "p-2" }, h("form-control-select", { key: 'ad304f8d8843d386feb90cc1a82259a168445331', 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: '75225e92af6efb7185735a63adf83ed7699452b1' }, h("table-filters-menu", { key: '086762cdd3a08d9221be6d374d4fd4d1b82c717f', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: '23f5d2938419a2e92cbacf79d82a3893b6d256c2', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '43bf85dccce2233d59720defbea2897df488d880', class: "p-2" }, h("form-control-select", { key: '61c381ec0a205245311ba2e490a03b1e571d366b', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '4d01e881ca741302be99559209ab383aad4ee739', class: "p-2" }, h("form-control-select", { key: '82a1c6c3cfa9c77bc656aff5d7b0130436a54042', 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"; }