@justifi/webcomponents 5.7.6-rc-07 → 5.7.6

package/dist/module/{postal-code-form.js → card-billing-form-simple.js}

@@ -1,36 +1,23 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as postalOnlySchema } from './billing-form-schema.js';
+import { U as billingForm } from './parts.js';
 import { n as numberOnlyHandler } from './utils3.js';
 import { F as FormController } from './form.js';
-import { b as billingFormSchema } from './billing-form-schema.js';
-import { o as onChange } from './checkout.store.js';
 import { d as defineCustomElement$3 } from './custom-popper2.js';
 import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
-const PostalCodeForm = /*@__PURE__*/ proxyCustomElement(class PostalCodeForm extends HTMLElement {
+const CardBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class CardBillingFormSimple extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.errors = {};
         this.inputHandler = (name, value) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
         };
     }
-    connectedCallback() {
-        this.unsubscribe = onChange('billingFormFields', (newValue) => {
-            this.formController.setInitialValues(newValue);
-        });
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
-    }
     componentWillLoad() {
-        this.formController = new FormController(billingFormSchema(true));
+        this.formController = new FormController(postalOnlySchema());
     }
     componentDidLoad() {
         this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
@@ -45,14 +32,16 @@ const PostalCodeForm = /*@__PURE__*/ proxyCustomElement(class PostalCodeForm ext
         this.formController.setInitialValues(fields);
     }
     async validate() {
-        let isValid = await this.formController.validate();
-        return { isValid: isValid };
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
+        return { isValid, errors };
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: 'be5335622cb907795f13522a0b12e70e9854b2b6' }, h("form", { key: '9fd26fb2568030bf000d5501e5063b79a98ab02e' }, h("form-control-text", { key: 'aed14596c15442d99705dd75f5349186b60a8a89', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))));
+        return (h(Host, { key: '579768ec89e37b775a2406ba687a9a18e1c1fb44' }, h("div", { key: '5a98c4adf327f5e09421fbbd78c9f13f031579c6', part: billingForm, class: "mt-4" }, h("form", { key: '4e2b9e9b3ae5d15f6705e418edb2307ec28e19f2' }, h("fieldset", { key: 'baa9735b69a185a229a6db3fa9ddc3adb02a8748' }, this.legend && (h("legend", { key: '65320d5245a39d67aa9389e54ef02fa87bea9bb8' }, this.legend)), h("div", { key: '1e8b4f9de1d6b0f24bb6ef3c8b282f34bf16c04c', class: "row gy-3" }, h("div", { key: '75fb250b91a586982c9a80fc544c2685cfb2f0e1', class: "col-12" }, h("form-control-text", { key: 'db2be476b7f49596faf8a93f40501d89aae3d84f', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
-}, [257, "justifi-postal-code-form", {
+}, [256, "justifi-card-billing-form-simple", {
+        "legend": [1025],
         "formController": [32],
         "billingInfo": [32],
         "errors": [32],
@@ -64,11 +53,11 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-postal-code-form", "custom-popper", "form-control-text", "form-control-tooltip"];
+    const components = ["justifi-card-billing-form-simple", "custom-popper", "form-control-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
-        case "justifi-postal-code-form":
+        case "justifi-card-billing-form-simple":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostalCodeForm);
+                customElements.define(tagName, CardBillingFormSimple);
             }
             break;
         case "custom-popper":
@@ -90,4 +79,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { PostalCodeForm as P, defineCustomElement as d };
+export { CardBillingFormSimple as C, defineCustomElement as d };

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: '0f8d1d7a069380709165302ab55b8f272eb1d721' }, h(CardFormSkeleton, { key: 'f269c934c7b1712cc82a58f6a52a98ae06de0427', isReady: this.isReady }), h("div", { key: 'af64a2c9bff9e71427605d863613810aabbbf50e', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'b07542c92ca49a44a8c9ea04919ec3db14100cac', class: "mb-3" }, h("iframe-input", { key: 'a13821b11e3c3b9b5cfd42a967c5c708ee5fbb9e', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '4ffe80a04c90546ae26b7239d7a081c251b1e9a5', class: "d-flex align-items-start" }, h("div", { key: '8b86e21933299ace1eb6914ea003eb368f164945', class: "flex-fill me-3" }, h("iframe-input", { key: 'a1c4b27683e2685a4fe4da5ae7d86b9439ec90d9', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '614059cd2995bd630709b75e9e6c29c8134c8762', class: "flex-fill me-3" }, h("iframe-input", { key: '178b15d416591122cf271e63d633950fa6a67617', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '097a78e72fa9eadd4b930b7eaf4afca5c3bf7d6b', class: "flex-fill" }, h("iframe-input", { key: 'cbe3bc2f75863d19a8e5345f0d2a68aa75a54a98', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
-    }
-}, [256, "card-form", {
-        "isReady": [32],
-        "iframeOrigin": [32],
-        "validate": [64],
-        "tokenize": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["card-form", "iframe-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "card-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardForm$1);
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+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,11 +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 { w as waitForConfig, c as configState } from './config-state.js';
-import { d as defineCustomElement$2 } from './hidden-input2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
 const CardFormSkeleton = (props) => {
@@ -28,18 +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.isReady = false;
     }
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
     }
     componentDidRender() {
         const elements = [
@@ -56,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();
@@ -67,16 +55,16 @@ 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: '7cb0c0a08ef0572fa1604e17edbf19478ea3f36b' }, h(CardFormSkeleton, { key: '5314b766fd972e03dbb7632776c97617132a861d', isReady: this.isReady }), h("hidden-input", { key: '479b8a68d10eb9e7e0358e165345020290ed6690' }), h("div", { key: 'a71bc32cfbef8b37d47c56662094dc6e292ff1f3', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '7d91102f0ecd44a368b614d6192b3c2c3955fcdf' }, h(CardFormSkeleton, { key: '721c79931188558801dc462ec55ab6feaa6a8e65', isReady: this.isReady }), h("div", { key: '8050c1d12e1c5a68e574d4db8cb35bd94e10f92d', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '64c8b172e9786cf1cdefaea11bcb27d665015ecf', class: "mb-3" }, h("iframe-input", { key: 'c31ef9a392acbe9b2aabcacb0a37d4999853bbfc', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '7c60c66b4212423fa08a902c6550c2ca757198b8', class: "row" }, h("div", { key: '712d7b397299596d4b9dfd91ebdce84e028ec925', class: "col-4 align-content-end" }, h("iframe-input", { key: '2caf6a11018a30dbac0b973387e23fd0d00f96bd', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '41122ae04a8b6c568157213874df4a7d483cba41', class: "col-4 align-content-end" }, h("iframe-input", { key: 'abd6e99b75446663e428094dd3588e02f849fb85', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'c974afa273e7f150cb365704401e49408074faac', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c3998a85c9043a08d60b667c86e20bee5e5f007c', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, 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` }))))));
     }
-}, [257, "justifi-card-form", {
+}, [256, "card-form", {
         "isReady": [32],
         "iframeOrigin": [32],
         "validate": [64],
@@ -86,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":
@@ -107,4 +90,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { JustifiCardForm as J, defineCustomElement as d };
+export { CardForm as C, defineCustomElement as d };

package/dist/module/{Analytics.js → check-pkg-version.js}

@@ -1,29 +1,11 @@
-import { w as webcomponentsPackageJson } from './package.js';
+import { p as packageJson } from './package.js';
 import { A as Api } from './Api.js';
-import './Refund.js';
+import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 
-const latestVersion = async (packageName) => {
-    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
-    const json = await response.json();
-    return json.version;
-};
-const checkPkgVersion = async () => {
-    const version = webcomponentsPackageJson.version;
-    const packageName = webcomponentsPackageJson.name;
-    const latest = await latestVersion(packageName);
-    // remove rc from version and everything that comes after -rc
-    const latestNotRC = latest.replace(/-rc.*/, '');
-    // checkif there's a major version difference
-    const versionParts = version.split('.');
-    const latestParts = latest.split('.');
-    if (versionParts[0] !== latestParts[0]) {
-        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
-    }
-};
-
 const api = Api();
 class AnalyticsService {
     async record(body) {
@@ -65,7 +47,7 @@ class JustifiAnalytics {
     setUpBasicData() {
         this.basicData = {
             component_name: this.componentInstance.tagName,
-            component_version: webcomponentsPackageJson.version,
+            component_version: packageJson.version,
             client_user_agent: navigator.userAgent,
             // navigator.platform is deprecated, use navigator.userAgent instead
             client_platform: navigator.userAgent,
@@ -106,4 +88,23 @@ class JustifiAnalytics {
     }
 }
 
+const latestVersion = async (packageName) => {
+    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
+    const json = await response.json();
+    return json.version;
+};
+const checkPkgVersion = async () => {
+    const version = packageJson.version;
+    const packageName = packageJson.name;
+    const latest = await latestVersion(packageName);
+    // remove rc from version and everything that comes after -rc
+    const latestNotRC = latest.replace(/-rc.*/, '');
+    // checkif there's a major version difference
+    const versionParts = version.split('.');
+    const latestParts = latest.split('.');
+    if (versionParts[0] !== latestParts[0]) {
+        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
+    }
+};
+
 export { JustifiAnalytics as J, checkPkgVersion as c };

package/dist/module/checkout-core.js

@@ -0,0 +1,292 @@
+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, W as checkoutSummary } from './parts.js';
+import { d as defineCustomElement$7, H as Header3 } from './billing-form-full.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$k } from './bank-account-form2.js';
+import { d as defineCustomElement$j } from './card-form2.js';
+import { d as defineCustomElement$i } from './custom-popper2.js';
+import { d as defineCustomElement$h } from './form-control-checkbox2.js';
+import { d as defineCustomElement$g } from './form-control-help-text2.js';
+import { d as defineCustomElement$f } from './form-control-radio2.js';
+import { d as defineCustomElement$e } from './form-control-select2.js';
+import { d as defineCustomElement$d } from './form-control-text2.js';
+import { d as defineCustomElement$c } from './form-control-tooltip2.js';
+import { d as defineCustomElement$b } from './hidden-input2.js';
+import { d as defineCustomElement$a } from './iframe-input2.js';
+import { d as defineCustomElement$9 } from './bank-account-billing-form-simple.js';
+import { d as defineCustomElement$8 } from './billing-form.js';
+import { d as defineCustomElement$6 } from './card-billing-form-simple.js';
+import { d as defineCustomElement$5 } from './new-payment-method.js';
+import { d as defineCustomElement$4 } from './payment-method-options.js';
+import { d as defineCustomElement$3 } from './save-new-payment-method.js';
+import { d as defineCustomElement$2 } from './saved-payment-method.js';
+import { d as defineCustomElement$1 } from './sezzle-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"))))));
+    }
+}, [257, "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-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-checkout-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CheckoutCore);
+            }
+            break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "justifi-bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-billing-form-full":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-card-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-payment-method-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-save-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-saved-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-sezzle-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CheckoutCore as C, defineCustomElement as d };

package/dist/module/checkout.service.js

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