@justifi/webcomponents 5.7.3-rc-02 → 5.7.4-rc-01

package/dist/module/billing-form.js

@@ -1,16 +1,19 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { c as create$3, F as FormController } from './form.js';
 import { c as postalValidation, d as stateValidation, e as cityValidation, l as lineTwoValidation, f as lineOneValidation, i as identityNameValidation } from './schema-validations.js';
-import { V as billingForm } from './parts.js';
-import { H as Header3 } from './header-3.js';
+import { U as heading3, $ as billingForm } from './parts.js';
 import './details.js';
 import './event-types.js';
-import { d as defineCustomElement$6 } from './custom-popper2.js';
-import { d as defineCustomElement$5 } from './form-control-select2.js';
-import { d as defineCustomElement$4 } from './form-control-text2.js';
-import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$2 } from './billing-form2.js';
-import { d as defineCustomElement$1 } from './postal-code-form.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { S as StateOptions } from './state-options.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const Header3 = (props) => {
+    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
+};
 
 const billingFormSchema = (postalOnly) => {
     const fullBillingForm = create$3({
@@ -69,8 +72,9 @@ const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends H
         return { isValid, errors };
     }
     render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
         const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
-        return (h("div", { key: 'e1834cb4638e0b5ea99c55e7a2f73542d2e5ea8d', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: '9936d16177d2c83219872c44b9ca91c264ae7052', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && h("legend", { key: 'c467223d7571122ea5c17885eed658c6cd6faf36' }, this.legend), this.isPostalOnlyMode ? (h("justifi-postal-code-form", null)) : (h("justifi-billing-information-form", null))));
+        return (h(Host, { key: 'ffffb2d8a4571222645d3c47eb1e2286b8597140' }, h("div", { key: '69b4f6c623cacbf32a30a9b9f23c3de427835c25', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: '96c0781a9b3dd7c5ef0b75ac8667664fee0bd95e', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", { key: '97380a90146a9732594f1c356fab952089280f99' }, h("fieldset", { key: 'fd8bbea485c10633f1d8cca62b222a8abb0d022f' }, this.legend && h("legend", { key: '8febee534a2d055093309e8f8f06078b0b35f4e4' }, this.legend), h("div", { key: '16ac8abe899cdb964d83322fa74cb00f737ab338', class: "row gy-3" }, h("div", { key: '866f73c45b807aeeea4e6addf4de5f2d3a1a232d', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '1734b2aac3eb0508f9ae2e4bf41836fc5dd71cad', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '569c0dc60b47d3e9077af401b720d7777c903bde', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '74406a7f4efde53a41141a218d246408c4807fc8', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'a7f3b7f137b0dd6a92cce6999ef65f13bcff4a31', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '8b6d28170c44af6b7701499a8a4626749d4cd36d', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '3a9031a0ddbea7e1020c420cdd6811ea9c86b9e4', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '730b395bb97c349a63f669669830cbce6ba86f83', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '7998420d30b1957a086303862f7200f20541ead2', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-select", { key: 'b94b623a26891646957f25e59cb03038a989eabf', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '7b0d6eae7eb90f4b33b3e73f920b6ea25920f809', class: "col-12", hidden: this.hideAllBillingFields }, h("form-control-text", { key: '703e429c7999f5cc143c5648bd9fbdc4f5bb6ee9', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
 }, [0, "justifi-billing-form", {
         "legend": [1025],
@@ -88,7 +92,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-billing-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-information-form", "justifi-postal-code-form"];
+    const components = ["justifi-billing-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-billing-form":
             if (!customElements.get(tagName)) {
@@ -96,31 +100,21 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "form-control-tooltip":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-billing-information-form":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "justifi-postal-code-form":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -129,4 +123,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { BillingForm as B, defineCustomElement as d };
+export { BillingForm as B, Header3 as H, defineCustomElement as d };

package/dist/module/button.js

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

package/dist/module/card-form.js

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

package/dist/module/card-form2.js

@@ -1,10 +1,6 @@
-import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
-import './details.js';
-import './event-types.js';
-import { S as StyledHost } from './styled-host.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { d as defineCustomElement$2 } from './hidden-input2.js';
+import { w as waitForConfig, c as configState } from './config-state.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
 const CardFormSkeleton = (props) => {
@@ -27,17 +23,15 @@ const CardFormSkeleton = (props) => {
                 h(Skeleton, { height: "36px" })))));
 };
 
-const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm extends HTMLElement {
+const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
-        this.iframeOrigin = "https://components.justifi.ai";
         this.isReady = false;
     }
-    componentWillLoad() {
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
     }
     componentDidRender() {
         const elements = [
@@ -54,10 +48,6 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
             this.isReady = true;
         });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
-    }
     async validate() {
         const cardNumberIsValid = await this.cardNumberIframeElement.validate();
         const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
@@ -65,18 +55,18 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
         const cvvIsValid = await this.cvvIframeElement.validate();
         return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
     }
-    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+    async tokenize(clientId, paymentMethodMetadata, account) {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '44aa8e7da60f3dc8408e53f1ca4bf1ec98e838be' }, h(CardFormSkeleton, { key: 'eaea67379e10386d215284de04cd140ac0af0274', isReady: this.isReady }), h("hidden-input", { key: '6bdd3a8aef52e4d2bb7e5a7855578af5e491d04f' }), h("div", { key: '8e271c01ecd6c178f44f9cd9d331d6fc6240bce4', 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: '568ac8e93eac648b43d047b2ba149230f7bd2e2f', class: "mb-3" }, h("iframe-input", { key: '5dde288003664ba6fb768a9e5837e4069e749ae5', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '57d7153ff9f21fbbfe2fbf41d664fbbc05fd72db', class: "row" }, h("div", { key: 'a6f2dcd5a98428f2af8773c7ebf76ea3c232a2a9', class: "col-4 align-content-end" }, h("iframe-input", { key: 'ac7ef13f9c9e788a065f6fe3485f8aeb20a3f6e8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '36c7531f0f7f4a5c98eb36f1c3c395d392567041', class: "col-4 align-content-end" }, h("iframe-input", { key: '2c04a8aa66b73e1e485dd124b27ebf8d9da043d8', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'e413f4a9232c6c8f21fd9738d6b641d2ff9c547f', class: "col-4 align-content-end" }, h("iframe-input", { key: 'bf1204c99ec33e349fe07a741a4ba80d20def1f8', 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` }))))));
     }
-}, [1, "justifi-card-form", {
-        "iframeOrigin": [1, "iframe-origin"],
+}, [0, "card-form", {
         "isReady": [32],
+        "iframeOrigin": [32],
         "validate": [64],
         "tokenize": [64]
     }]);
@@ -84,16 +74,11 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-card-form", "hidden-input", "iframe-input"];
+    const components = ["card-form", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
-        case "justifi-card-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JustifiCardForm);
-            }
-            break;
-        case "hidden-input":
+        case "card-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                customElements.define(tagName, CardForm);
             }
             break;
         case "iframe-input":
@@ -105,4 +90,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { JustifiCardForm as J, defineCustomElement as d };
+export { CardForm as C, defineCustomElement as d };

package/dist/module/checkout-actions.js

@@ -0,0 +1,58 @@
+import { C as ComponentErrorSeverity } from './Checkout.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils4.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) {
+            onSuccess(response);
+        }
+        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,
+        });
+    }
+};
+
+export { makeCheckoutComplete as a, makeGetCheckout as m };

package/dist/module/checkout-core.js

@@ -0,0 +1,268 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as formatCurrency } from './utils2.js';
+import { b as Checkout, C as ComponentErrorSeverity } from './Checkout.js';
+import { v as validateInsuranceValues, i as insuranceValuesOn, a as insuranceValues, H as Header2 } from './insurance-state.js';
+import { B as Button } from './button.js';
+import { S as StyledHost } from './styled-host.js';
+import { S as Skeleton } from './skeleton.js';
+import { t as text, V as checkoutSummary } from './parts.js';
+import { d as defineCustomElement$5, H as Header3 } from './billing-form.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$g } from './bank-account-form2.js';
+import { d as defineCustomElement$f } from './card-form2.js';
+import { d as defineCustomElement$e } from './custom-popper2.js';
+import { d as defineCustomElement$d } from './form-control-checkbox2.js';
+import { d as defineCustomElement$c } from './form-control-help-text2.js';
+import { d as defineCustomElement$b } from './form-control-radio2.js';
+import { d as defineCustomElement$a } from './form-control-select2.js';
+import { d as defineCustomElement$9 } from './form-control-text2.js';
+import { d as defineCustomElement$8 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$7 } from './hidden-input2.js';
+import { d as defineCustomElement$6 } from './iframe-input2.js';
+import { d as defineCustomElement$4 } from './new-payment-method.js';
+import { d as defineCustomElement$3 } from './payment-method-options.js';
+import { d as defineCustomElement$2 } from './save-new-payment-method.js';
+import { d as defineCustomElement$1 } from './saved-payment-method.js';
+
+const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.submitEvent = createEvent(this, "submit-event", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.loaded = createEvent(this, "loaded", 7);
+        this.hasLoadedFonts = false;
+        this.renderState = 'loading';
+        this.creatingNewPaymentMethod = false;
+        this.insuranceToggled = false;
+        this.completeCheckout = async (payment) => {
+            this.complete({
+                payment,
+                onSuccess: this.onSubmitted,
+                onError: this.onError,
+            });
+        };
+        this.onSubmitted = (response) => {
+            this.submitEvent.emit({ response: response });
+            this.renderState = 'success';
+        };
+        this.onError = ({ error, code, severity }) => {
+            this.serverError = error;
+            this.errorEvent.emit({
+                errorCode: code,
+                message: error,
+                severity,
+            });
+            this.renderState = 'error';
+        };
+    }
+    async fillBillingForm(fields) {
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
+    }
+    async validate() {
+        const insuranceValidation = validateInsuranceValues();
+        const { isValid } = await this.paymentMethodOptionsRef.validate();
+        if (!insuranceValidation.isValid || !isValid) {
+            return { isValid: false };
+        }
+        else {
+            return { isValid: true };
+        }
+    }
+    componentWillLoad() {
+        if (this.getCheckout) {
+            this.fetchData();
+            // Refresh the checkout data when insurance is added or removed
+            insuranceValuesOn('set', (key) => {
+                const value = insuranceValues[key];
+                if (value !== undefined) {
+                    this.insuranceToggled = value;
+                    this.fetchData();
+                }
+            });
+        }
+    }
+    fetchData() {
+        this.renderState = 'loading';
+        this.getCheckout({
+            onSuccess: ({ checkout }) => {
+                this.checkout = new Checkout(checkout);
+                const { status } = this.checkout;
+                this.loaded.emit({ checkout_status: status });
+                this.renderState = 'success';
+            },
+            onError: ({ error, code, severity }) => {
+                this.serverError = error;
+                this.renderState = 'error';
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            }
+        });
+    }
+    ;
+    async submit(event) {
+        var _a;
+        event.preventDefault();
+        this.renderState = 'loading';
+        const insuranceValidation = validateInsuranceValues();
+        const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod(insuranceValidation);
+        if (payload.validationError) {
+            this.renderState = 'error';
+        }
+        else if (payload.error) {
+            this.renderState = 'error';
+            this.serverError = payload.error.message;
+            this.onError({
+                code: payload.error.code,
+                error: payload.error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        else if (payload.token) {
+            this.completeCheckout({ payment_mode: 'ecom', payment_token: payload.token });
+        }
+        else if (((_a = payload.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+            this.completeCheckout({ payment_mode: 'bnpl' });
+        }
+        else {
+            this.renderState = 'error';
+        }
+    }
+    get isLoading() {
+        return this.renderState === 'loading';
+    }
+    get isError() {
+        return this.renderState === 'error';
+    }
+    get paymentType() {
+        var _a, _b, _c, _d, _e;
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
+    }
+    get summary() {
+        var _a, _b;
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
+    }
+    render() {
+        return (h(StyledHost, { key: '2fb8b2c2b543712023c74cf9b41dc57675c89237' }, h("div", { key: 'caba36e076e4162d9c92844f7c0632b5bf678de6', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6a27d64005d785815d5567894d6e2a6e1e515cf8', class: "col-12", part: checkoutSummary }, h(Header2, { key: '645fe4250331805e86811700b453458f065188bd', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'c49c73eb3462ad17e0344e74be508abe958a9358', class: "col-12" }, h("slot", { key: 'be626bff57c95b92f9853e2e9b63dd9279834142', name: "insurance" })), h("div", { key: '025b0400164935f10d6c79d445bfdcf157290fd6', class: "col-12 mt-4" }, h(Header2, { key: '483b5d53b5cea3ae6fccfbb3aa9d3efe0dc8fcab', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '21abbd4d669e351c8ad0a87b7b408a4998948b46', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: '9441e97e1bd64b796ebcf1404d4ca04964990982', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '9db2e4fccff5b868e7d329d9b0be864942adcc3d', class: "col-12" }, h("div", { key: '2eaef4ed6062b27de2516de7b71a056c829f8cab', class: "d-flex justify-content-end" }, h(Button, { key: '505869afa61094d628b58a32749c44f678e4fda3', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+    }
+}, [1, "justifi-checkout-core", {
+        "authToken": [1, "auth-token"],
+        "getCheckout": [16, "get-checkout"],
+        "complete": [16],
+        "checkoutId": [1, "checkout-id"],
+        "disableCreditCard": [4, "disable-credit-card"],
+        "disableBankAccount": [4, "disable-bank-account"],
+        "disableBnpl": [4, "disable-bnpl"],
+        "disablePaymentMethodGroup": [4, "disable-payment-method-group"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "hasLoadedFonts": [32],
+        "checkout": [32],
+        "serverError": [32],
+        "renderState": [32],
+        "creatingNewPaymentMethod": [32],
+        "insuranceToggled": [32],
+        "fillBillingForm": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-checkout-core", "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-billing-form", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-checkout-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CheckoutCore);
+            }
+            break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-payment-method-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-save-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-saved-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CheckoutCore as C, defineCustomElement as d };