@justifi/webcomponents 5.7.7 → 6.0.0-rc.10

package/dist/module/justifi-tokenize-payment-method.js

@@ -1,222 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { B as Button } from './button.js';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
-import './config-state.js';
-import './utils2.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
-import './Pagination.js';
-import './Payment.js';
-import './Refund.js';
-import './Business.js';
-import { d as defineCustomElement$l } from './bank-account-form2.js';
-import { d as defineCustomElement$k } from './card-form2.js';
-import { d as defineCustomElement$j } from './custom-popper2.js';
-import { d as defineCustomElement$i } from './form-control-checkbox2.js';
-import { d as defineCustomElement$h } from './form-control-help-text2.js';
-import { d as defineCustomElement$g } from './form-control-radio2.js';
-import { d as defineCustomElement$f } from './form-control-select2.js';
-import { d as defineCustomElement$e } from './form-control-text2.js';
-import { d as defineCustomElement$d } from './form-control-tooltip2.js';
-import { d as defineCustomElement$c } from './hidden-input2.js';
-import { d as defineCustomElement$b } from './iframe-input2.js';
-import { d as defineCustomElement$a } from './bank-account-billing-form-simple.js';
-import { d as defineCustomElement$9 } from './billing-form.js';
-import { d as defineCustomElement$8 } from './billing-form-full.js';
-import { d as defineCustomElement$7 } from './card-billing-form-simple.js';
-import { d as defineCustomElement$6 } from './new-payment-method.js';
-import { d as defineCustomElement$5 } from './payment-method-options.js';
-import { d as defineCustomElement$4 } from './save-new-payment-method.js';
-import { d as defineCustomElement$3 } from './saved-payment-method.js';
-import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
-
-const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePaymentMethod extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.errorEvent = createEvent(this, "error-event", 7);
-        this.submitEvent = createEvent(this, "submit-event", 7);
-        this.submitButtonText = 'Submit';
-        this.isLoading = false;
-    }
-    componentWillLoad() {
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
-    }
-    ;
-    async tokenizePaymentMethod(event) {
-        event && event.preventDefault();
-        this.isLoading = true;
-        let tokenizeResponse;
-        try {
-            tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
-            if (tokenizeResponse.error) {
-                this.errorEvent.emit({
-                    errorCode: tokenizeResponse.error.code,
-                    message: tokenizeResponse.error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                });
-            }
-        }
-        catch (error) {
-            const errorData = {
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: error.message,
-                severity: ComponentErrorSeverity.ERROR,
-            };
-            this.errorEvent.emit(errorData);
-        }
-        finally {
-            this.submitEvent.emit({ response: tokenizeResponse });
-            this.isLoading = false;
-            return tokenizeResponse;
-        }
-    }
-    async fillBillingForm(fields) {
-        this.paymentMethodOptionsRef.fillBillingForm(fields);
-    }
-    async validate() {
-        return this.paymentMethodOptionsRef.validate();
-    }
-    render() {
-        return (h(StyledHost, { key: 'bde61e05e8148b4bb3c054d124070a160fd7ca13' }, h("form", { key: 'ea0dd3192fc924bbf22a80562030c6557e32d905' }, h("fieldset", { key: '8a96c0b8e5497d97f0e546558e0ad37a57a459cb' }, h("div", { key: '849547d7b1c810533af86104eb7ae42b569c9c97', class: "row gy-3" }, h("div", { key: 'afc1b73d0a027e2ea6e8cec831f43f53cd2b8666', class: "col-12" }, h("justifi-payment-method-options", { key: '8af2e6076d689ca358a9542cea10d314dee68444', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '62ac0ff4f7774adadfa8bbbdbc474ba3cd15c5f4', class: "col-12" }, h(Button, { key: 'c5212829153b3c217ce18aac4cbb3afa58f1e7b3', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
-    }
-}, [257, "justifi-tokenize-payment-method", {
-        "authToken": [1, "auth-token"],
-        "accountId": [1, "account-id"],
-        "paymentMethodGroupId": [1, "payment-method-group-id"],
-        "submitButtonText": [1, "submit-button-text"],
-        "disableCreditCard": [4, "disable-credit-card"],
-        "disableBankAccount": [4, "disable-bank-account"],
-        "hideSubmitButton": [4, "hide-submit-button"],
-        "hideCardBillingForm": [4, "hide-card-billing-form"],
-        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
-        "isLoading": [32],
-        "tokenizePaymentMethod": [64],
-        "fillBillingForm": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-tokenize-payment-method", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-bank-account-billing-form-simple", "justifi-billing-form", "justifi-billing-form-full", "justifi-card-billing-form-simple", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-tokenize-payment-method":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TokenizePaymentMethod);
-            }
-            break;
-        case "bank-account-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$l();
-            }
-            break;
-        case "card-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$k();
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$j();
-            }
-            break;
-        case "form-control-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "hidden-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "justifi-bank-account-billing-form-simple":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "justifi-billing-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "justifi-billing-form-full":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "justifi-card-billing-form-simple":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "justifi-new-payment-method":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "justifi-payment-method-options":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "justifi-save-new-payment-method":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "justifi-saved-payment-method":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "justifi-sezzle-payment-method":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { T as TokenizePaymentMethod, d as defineCustomElement$1 } from './tokenize-payment-method.js';
 
 const JustifiTokenizePaymentMethod = TokenizePaymentMethod;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/legal-address-form-step.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
@@ -45,7 +45,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         }
     }
     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 watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/legal-address-form.js

@@ -24,7 +24,7 @@ const LegalAddressForm = /*@__PURE__*/ proxyCustomElement(class LegalAddressForm
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { key: '129b2ec053708454db5a515fdae9a7fba5289336' }, h("fieldset", { key: '6af5c9469acc432ea01ff404af25727bd444abc7' }, h("legend", { key: '1af149db608a13d18142aaea83f9ed2e8271fdc0', part: heading2 }, "Business Legal Address"), h("div", { key: '805c6ae992ebed34937b9a2622f50a7f99c7d0e6', class: "row gy-3" }, h("div", { key: '78750dc68bcc6782bc4a71cfd14d417e980a57a6', class: "col-12" }, h("form-control-text", { key: '18a75e38a7a5fbfcbbbce56e4967ce34c5618c8e', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: '676622c84785edfafa3413359d4985d26a734985', class: "col-12" }, h("form-control-text", { key: 'e8467f96595d240f5fc93585e472ad844cc49143', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '01556012d9335d23c14e130ca72b6e75028bcb36', class: "col-12" }, h("form-control-text", { key: 'c08dcd0ef726ff714d60de26492ced763a7d32ff', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: 'ad811869e742f265a5441c6f36c2a55fa0b07952', class: "col-12" }, h("form-control-select", { key: '47cc4b15578257f3c1fdee7896d28da94b5aaa16', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: 'f732fd2ed3967ee7fd602f41c62efd24cf6038eb', class: "col-12" }, h("form-control-text", { key: '0431a63d11beb6682a2544d2483901f7fffa77bd', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'cca67b0cd006f6cf9f9bbfe147507eb0ac6fecca', class: "col-12" }, h("form-control-select", { key: 'f561947f9443ea6f56d7ae31d44a69e2462c0751', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: '5b21d99717f9b24c0551c7a96acf68e53e7787bf' }, h("fieldset", { key: 'd63cbd20b2648405c50a819724e0f8cf556f7d26' }, h("legend", { key: 'c0acd14073f13f914015f40d39bf22fb58792434', part: heading2 }, "Business Legal Address"), h("div", { key: 'ee4cee6bd662816f822ee209aeda5e9664f6a64d', class: "row gy-3" }, h("div", { key: '86b258fd09e73cbd2475330419274732231f3871', class: "col-12" }, h("form-control-text", { key: '8d898a9ae448f07932afe2d8cfc2314b92d9c597', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: '1a50c4b86a754035f71efacd39721219fcd54d60', class: "col-12" }, h("form-control-text", { key: '507b1451685e359a900f0bc7010ff39e3631daf2', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '1446b4db5f86a3b18e3aceb78274ffe458dbd3db', class: "col-12" }, h("form-control-text", { key: 'e17e4bd95ad4290d18edde79cf05a6b3a105166c', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '9b880203bad9e104e6d1299ff73c83cba46ab563', class: "col-12" }, h("form-control-select", { key: '24e4df10f688c9a1b5f2af5217f03919bf7abec7', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: '71f21b19602c268e3b6a839ce41ff9d4f8ffb8c4', class: "col-12" }, h("form-control-text", { key: 'ca71d3e21c5a0aea5367fa28ec1a2422ba9b1cf3', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'aaee0bf6a24ba182e002c1ffb49736fb622cde1f', class: "col-12" }, h("form-control-select", { key: '2b6486771818e584dcc195c304e5a6e16850b4a9', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }

package/dist/module/modular-checkout.js

@@ -0,0 +1,406 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as checkoutStore, o as onAnyChange, g as getAvailablePaymentMethodTypes } from './checkout.store.js';
+import { J as JustifiAnalytics, c as checkPkgVersion } from './Analytics.js';
+import './config-state.js';
+import './dinero.js';
+import { C as ComponentErrorSeverity, P as PaymentMethodTypes, a as ComponentErrorCodes, d as ComponentErrorMessages, I as ICheckoutStatus } from './Refund.js';
+import './Pagination.js';
+import './Business.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
+import { C as CheckoutService } from './checkout.service.js';
+import { i as insuranceValuesOn, h as hasInsuranceValueChanged, a as insuranceValues } from './insurance-state.js';
+import { b as PAYMENT_MODE } from './ModularCheckout.js';
+
+const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchCheckout(authToken, checkoutId);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.complete(authToken, checkoutId, payment);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+
+const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
+        this.checkoutChangedEvent = createEvent(this, "checkout-changed", 7);
+        this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, paymentMethodId, error } = event.detail;
+            if (success && token) {
+                checkoutStore.paymentToken = paymentMethodId;
+                checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.applePay };
+                this.submitCheckout();
+            }
+            else {
+                console.error("Apple Pay completed but failed:", error);
+                this.errorEvent.emit({
+                    message: (error === null || error === void 0 ? void 0 : error.message) || "Apple Pay payment failed",
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleApplePayError = (event) => {
+            const { error } = event.detail;
+            console.error("Apple Pay error:", error);
+            this.errorEvent.emit({
+                message: error || "Apple Pay error occurred",
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        };
+        this.handleApplePayCancelled = () => {
+            checkoutStore.paymentToken = undefined;
+            checkoutStore.selectedPaymentMethod = undefined;
+        };
+    }
+    savePaymentMethodChanged(newValue) {
+        checkoutStore.savePaymentMethod = newValue;
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
+        });
+        this.observer.observe(this.hostEl, {
+            childList: true,
+            subtree: true,
+        });
+        checkoutStore.checkoutId = this.checkoutId;
+        const config = {
+            authToken: this.authToken,
+            checkoutId: this.checkoutId,
+            service: new CheckoutService(),
+        };
+        this.getCheckout = makeGetCheckout(config);
+        this.completeCheckout = makeCheckoutComplete(config);
+        // Emit checkout-changed whenever any store key changes
+        onAnyChange(() => {
+            this.emitCheckoutChanged();
+        });
+    }
+    componentWillLoad() {
+        this.analytics = new JustifiAnalytics(this);
+        checkPkgVersion();
+        checkoutStore.authToken = this.authToken;
+        checkoutStore.savePaymentMethod = this.savePaymentMethod;
+        this.fetchCheckout();
+        // Refresh the checkout data when insurance values actually change (not on initial load)
+        insuranceValuesOn("set", (key) => {
+            const value = insuranceValues[key];
+            if (value !== undefined && hasInsuranceValueChanged(key, value)) {
+                this.fetchCheckout();
+            }
+        });
+    }
+    componentDidLoad() {
+        this.queryFormRefs();
+        this.setupApplePayListeners();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
+    }
+    fetchCheckout() {
+        if (!this.authToken || !this.checkoutId) {
+            this.errorEvent.emit({
+                message: ComponentErrorMessages.NOT_AUTHENTICATED,
+                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        if (this.getCheckout) {
+            this.getCheckout({
+                onSuccess: ({ checkout }) => {
+                    this.updateStore(checkout);
+                    if (checkout.status === ICheckoutStatus.completed) {
+                        this.errorEvent.emit({
+                            message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
+                            errorCode: ComponentErrorCodes.CHECKOUT_ALREADY_COMPLETED,
+                            severity: ComponentErrorSeverity.ERROR,
+                        });
+                        return;
+                    }
+                    else if (checkout.status === ICheckoutStatus.expired) {
+                        this.errorEvent.emit({
+                            message: ComponentErrorMessages.CHECKOUT_EXPIRED,
+                            errorCode: ComponentErrorCodes.CHECKOUT_EXPIRED,
+                            severity: ComponentErrorSeverity.ERROR,
+                        });
+                        return;
+                    }
+                },
+                onError: (error) => {
+                    this.errorEvent.emit({
+                        message: error.message,
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                },
+            });
+        }
+    }
+    updateStore(checkout) {
+        var _a, _b, _c, _d, _e;
+        checkoutStore.accountId = checkout.account_id;
+        checkoutStore.paymentMethods = checkout.payment_methods;
+        checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
+        checkoutStore.paymentDescription = checkout.payment_description;
+        checkoutStore.totalAmount = checkout.total_amount;
+        checkoutStore.paymentAmount = checkout.payment_amount;
+        checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
+        checkoutStore.insuranceEnabled = checkout.payment_settings.insurance_payments;
+        checkoutStore.bankAccountVerification = (_a = checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.bank_account_verification;
+        checkoutStore.bnplProviderClientId = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_client_id;
+        checkoutStore.bnplProviderMode = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_api_version;
+        checkoutStore.bnplProviderCheckoutUrl =
+            (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_checkout_url;
+    }
+    emitCheckoutChanged() {
+        const detail = {
+            availablePaymentMethodTypes: getAvailablePaymentMethodTypes(),
+            selectedPaymentMethod: checkoutStore.selectedPaymentMethod,
+            savedPaymentMethods: checkoutStore.paymentMethods,
+        };
+        this.checkoutChangedEvent.emit(detail);
+    }
+    queryFormRefs() {
+        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
+        this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+        this.paymentMethodFormRef =
+            this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form, justifi-tokenize-payment-method');
+        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
+    }
+    setupApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.addEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.addEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.addEventListener("applePayCancelled", this.handleApplePayCancelled);
+        }
+    }
+    removeApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.removeEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.removeEventListener("applePayCancelled", this.handleApplePayCancelled);
+        }
+    }
+    async tokenizePaymentMethod(tokenizeArgs) {
+        var _a, _b, _c;
+        const billingInfoValues = (_b = (await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues()))) !== null && _b !== void 0 ? _b : {};
+        const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
+        const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
+        if (checkoutStore.savePaymentMethod) {
+            paymentMethodMetadata.payment_method_group_id =
+                checkoutStore.paymentMethodGroupId;
+        }
+        const tokenizeResult = await ((_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+            clientId: this.authToken,
+            paymentMethodMetadata,
+            account: checkoutStore.accountId,
+        }));
+        if (tokenizeResult.error) {
+            return tokenizeResult;
+        }
+        checkoutStore.paymentToken = tokenizeResult.id;
+        return tokenizeResult.id;
+    }
+    // set the selected payment method to the checkout store from outside the component
+    async setSelectedPaymentMethod(paymentMethod) {
+        checkoutStore.selectedPaymentMethod = paymentMethod;
+    }
+    // getAvailablePaymentMethods removed in favor of checkout-changed event
+    // if validation fails, the error will be emitted by the component
+    async validate() {
+        const promises = [];
+        if (checkoutStore.insuranceEnabled && this.insuranceFormRef) {
+            promises.push(this.insuranceFormRef.validate());
+        }
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card && checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount && checkoutStore.selectedPaymentMethod.id === undefined;
+        // For new card/bank account, validate payment method + billing.
+        if (isNewCard ||
+            isNewBankAccount) {
+            if (this.paymentMethodFormRef)
+                promises.push(this.paymentMethodFormRef.validate());
+            if (this.billingFormRef)
+                promises.push(this.billingFormRef.validate());
+        }
+        if (promises.length === 0)
+            return true;
+        try {
+            const results = await Promise.all(promises);
+            // Normalize different validator return shapes:
+            // - boolean -> use it directly
+            // - object  -> look for isValid; treat missing isValid as falsey only if explicitly false
+            const resultsAreValid = results.every(r => typeof r === 'boolean' ? r : (r === null || r === void 0 ? void 0 : r.isValid) !== false);
+            if (!resultsAreValid) {
+                this.errorEvent.emit({
+                    message: 'Validation error',
+                    errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return false;
+            }
+            return true;
+        }
+        catch (_a) {
+            // If any validator throws/rejects, consider the whole validation failed.
+            return false;
+        }
+    }
+    async submitCheckout(submitCheckoutArgs) {
+        const isValid = await this.validate();
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const shouldTokenize = isNewCard || isNewBankAccount;
+        if (shouldTokenize) {
+            const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
+            if (tokenizeResult === null || tokenizeResult === void 0 ? void 0 : tokenizeResult.error) {
+                this.errorEvent.emit({
+                    message: tokenizeResult.error.message,
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+        }
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: "Please fill in all required fields.",
+                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        if (!checkoutStore.paymentToken) {
+            this.errorEvent.emit({
+                message: 'Payment token not found.',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        let payment;
+        const mapTypeToPaymentMode = (type) => {
+            switch (type) {
+                case PaymentMethodTypes.card:
+                case PaymentMethodTypes.bankAccount:
+                case PaymentMethodTypes.plaid:
+                    return PAYMENT_MODE.ECOM;
+                case PaymentMethodTypes.sezzle:
+                    return PAYMENT_MODE.BNPL;
+                case PaymentMethodTypes.applePay:
+                    return PAYMENT_MODE.APPLE_PAY;
+                default:
+                    return undefined;
+            }
+        };
+        payment = {
+            payment_mode: mapTypeToPaymentMode(checkoutStore.selectedPaymentMethod.type),
+            payment_token: checkoutStore.paymentToken,
+        };
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: "Checkout completed successfully",
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
+    }
+    render() {
+        return h(Host, { key: '4df5d1aa50fbeee7da93f8e19e45f6907b6ae2c7' });
+    }
+    get hostEl() { return this; }
+    static get watchers() { return {
+        "savePaymentMethod": ["savePaymentMethodChanged"]
+    }; }
+}, [256, "justifi-modular-checkout", {
+        "authToken": [1, "auth-token"],
+        "checkoutId": [1, "checkout-id"],
+        "savePaymentMethod": [4, "save-payment-method"],
+        "setSelectedPaymentMethod": [64],
+        "validate": [64],
+        "submitCheckout": [64]
+    }, undefined, {
+        "savePaymentMethod": ["savePaymentMethodChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-modular-checkout"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-modular-checkout":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ModularCheckout);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { ModularCheckout as M, defineCustomElement as d };