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

package/dist/module/gross-payment-chart-core2.js

@@ -585,7 +585,7 @@ class Color {
 }
 
 /*!
- * Chart.js v4.4.9
+ * Chart.js v4.5.0
  * https://www.chartjs.org
  * (c) 2025 Chart.js Contributors
  * Released under the MIT License
@@ -2682,7 +2682,7 @@ function getDatasetClipArea(chart, meta) {
 }
 
 /*!
- * Chart.js v4.4.9
+ * Chart.js v4.5.0
  * https://www.chartjs.org
  * (c) 2025 Chart.js Contributors
  * Released under the MIT License
@@ -4202,6 +4202,22 @@ class BarController extends DatasetController {
  _getStackCount(index) {
         return this._getStacks(undefined, index).length;
     }
+    _getAxisCount() {
+        return this._getAxis().length;
+    }
+    getFirstScaleIdForIndexAxis() {
+        const scales = this.chart.scales;
+        const indexScaleId = this.chart.options.indexAxis;
+        return Object.keys(scales).filter((key)=>scales[key].axis === indexScaleId).shift();
+    }
+    _getAxis() {
+        const axis = {};
+        const firstScaleAxisId = this.getFirstScaleIdForIndexAxis();
+        for (const dataset of this.chart.data.datasets){
+            axis[valueOrDefault(this.chart.options.indexAxis === 'x' ? dataset.xAxisID : dataset.yAxisID, firstScaleAxisId)] = true;
+        }
+        return Object.keys(axis);
+    }
  _getStackIndex(datasetIndex, name, dataIndex) {
         const stacks = this._getStacks(datasetIndex, dataIndex);
         const index = name !== undefined ? stacks.indexOf(name) : -1;
@@ -4292,10 +4308,13 @@ class BarController extends DatasetController {
         const skipNull = options.skipNull;
         const maxBarThickness = valueOrDefault(options.maxBarThickness, Infinity);
         let center, size;
+        const axisCount = this._getAxisCount();
         if (ruler.grouped) {
             const stackCount = skipNull ? this._getStackCount(index) : ruler.stackCount;
-            const range = options.barThickness === 'flex' ? computeFlexCategoryTraits(index, ruler, options, stackCount) : computeFitCategoryTraits(index, ruler, options, stackCount);
-            const stackIndex = this._getStackIndex(this.index, this._cachedMeta.stack, skipNull ? index : undefined);
+            const range = options.barThickness === 'flex' ? computeFlexCategoryTraits(index, ruler, options, stackCount * axisCount) : computeFitCategoryTraits(index, ruler, options, stackCount * axisCount);
+            const axisID = this.chart.options.indexAxis === 'x' ? this.getDataset().xAxisID : this.getDataset().yAxisID;
+            const axisNumber = this._getAxis().indexOf(valueOrDefault(axisID, this.getFirstScaleIdForIndexAxis()));
+            const stackIndex = this._getStackIndex(this.index, this._cachedMeta.stack, skipNull ? index : undefined) + axisNumber;
             center = range.start + range.chunk * stackIndex + range.chunk / 2;
             size = Math.min(maxBarThickness, range.chunk * range.ratio);
         } else {
@@ -7707,7 +7726,7 @@ function needContext(proxy, names) {
     return false;
 }
 
-var version = "4.4.9";
+var version = "4.5.0";
 
 const KNOWN_POSITIONS = [
     'top',

package/dist/module/justifi-bank-account-form.js

@@ -1,4 +1,103 @@
-import { B as BankAccountForm, d as defineCustomElement$1 } from './bank-account.js';
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { S as Skeleton } from './skeleton.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$3 } from './hidden-input2.js';
+import { d as defineCustomElement$2 } from './iframe-input2.js';
+
+const BankAccountFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" },
+        h("div", { class: "row mb-3" },
+            h("div", { class: "col-12 align-content-end" },
+                h(Skeleton, { height: "18px", width: "120px" }),
+                h(Skeleton, { height: "36px" }))),
+        h("div", { class: "row" },
+            h("div", { class: "col-12 align-content-end" },
+                h(Skeleton, { height: "18px", width: "110px" }),
+                h(Skeleton, { height: "36px" })))));
+};
+
+const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm 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 = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: '4c176e2293be710024294860fa0be41f36395f72' }, h(BankAccountFormSkeleton, { key: 'c86a619edf7d99ce572a104ddde18598b057ebce', isReady: this.isReady }), h("hidden-input", { key: '0c8e152754b1746e7533d14450e3559df5a3c8cd' }), h("div", { key: '291c1adf2f8152fc13ed9296245fbbabd719bec7', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '53a755a4b1f9bf844c3dc68fa0a3343d415d7048', class: "row mb-3" }, h("iframe-input", { key: '369109cd12f6efd9768420cff1993f7b22d7cb76', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: 'd1ab53be0be78e24d0cfd3b93a0e94661f61f990', class: "row" }, h("iframe-input", { key: '96913caa7a1a2b338bf2fd63717fc8ad1d5fbcc5', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+    }
+}, [1, "justifi-bank-account-form", {
+        "iframeOrigin": [32],
+        "isReady": [32],
+        "validate": [64],
+        "tokenize": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-bank-account-form", "hidden-input", "iframe-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-bank-account-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BankAccountForm);
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const JustifiBankAccountForm = BankAccountForm;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/justifi-billing-information-form.js

@@ -1,4 +1,92 @@
-import { B as BillingInformationForm, d as defineCustomElement$1 } from './billing-form2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { b as billingFormSchema } from './billing-form-schema.js';
+import { $ as billingForm } from './parts.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { S as StateOptions } from './state-options.js';
+import { F as FormController } from './form.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$5 } from './custom-popper2.js';
+import { d as defineCustomElement$4 } from './form-control-select2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+
+const BillingInformationForm = /*@__PURE__*/ proxyCustomElement(class BillingInformationForm 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 }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(billingFormSchema());
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(StyledHost, { key: '69c50df0f08e367aeb924bdde683793a542179d5' }, h("div", { key: 'de669a4fc15f3041672d9a093ce6cc80cef65d9e', part: billingForm }, h("form", { key: 'fb079f46703caaed345a9d7cadd380eba599a972' }, h("fieldset", { key: '8ebed9ab4c21b4c4bd490df6654287ac5dd301c8' }, h("div", { key: 'a5a9d27770724af4ea4e2ffed03b26a1d12773f9', class: "row gy-3" }, h("div", { key: 'e5ed5cca7c1bee4033df78c86c8e992b6851ed10', class: "col-12" }, h("form-control-text", { key: '427c31a6f1344a2786dbde7288a0f958957fdd22', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '6e222b1644b34f20f11f516d6de5e8e85f8277ac', class: "col-12" }, h("form-control-text", { key: '011574712b4ae735bfee96c7d6739e23ddd7318c', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'ecddd8f79102ef471053b5920072350e39ac313d', class: "col-12" }, h("form-control-text", { key: '95a37ac3c37c4c717bbefe9fa1b172e84027422e', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '3b14bb063904e57a5e2b1112b6f719875bbf33b7', class: "col-12" }, h("form-control-text", { key: 'cfaf3a8bd3c7ce50f47d721170829e2bfb92fff6', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '5613add4617df1e292ed0b0ea3a8cefc619c71e2', class: "col-12" }, h("form-control-select", { key: '698b66f67beb9bb5d3501e23f49655e2b3a0a4f1', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '5dd514ba36bb2e1f398c88053dbb35356f3ef811', class: "col-12" }, h("form-control-text", { key: '8825a1a2c2235ee83461a626b0ccdfeb9adbb74a', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+    }
+}, [1, "justifi-billing-information-form", {
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "fill": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-billing-information-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-billing-information-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BillingInformationForm);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const JustifiBillingInformationForm = BillingInformationForm;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/justifi-card-form.js

@@ -1,4 +1,111 @@
-import { J as JustifiCardForm$1, d as defineCustomElement$1 } from './card-form2.js';
+import { h, proxyCustomElement, HTMLElement } 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$3 } from './hidden-input2.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 JustifiCardForm$1 = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm 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 = [
+            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;
+        });
+    }
+    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();
+        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(StyledHost, { key: '1b42c4a2b0adbd4d98bffc0cc0355ba7b1e10474' }, h(CardFormSkeleton, { key: 'ae04801424ca38c3831b951bcb6835ffcc1ccd94', isReady: this.isReady }), h("hidden-input", { key: '55396096f088bc5cde3b003ddaa9afda6848dfda' }), h("div", { key: '18f68ac5871fcb7ba8ce270bb552871709f468dd', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '3c9711c64c5d60a121545394c22c382be93882ed', class: "mb-3" }, h("iframe-input", { key: '45401d0f9f8abd4197bd6651c28f531562431989', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '60bae8a0fb35d86ec46d59f400e86af4a97d4c6a', class: "row" }, h("div", { key: '44883bb16cd5bb65fefb8e6b627b52625c2776d3', class: "col-4 align-content-end" }, h("iframe-input", { key: 'a9df6d2a23e7f586f08623a9e14c19264252c8e7', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '5436effb8f457cb4dae945e3d7ca29c9441df724', class: "col-4 align-content-end" }, h("iframe-input", { key: '550096ddd5488e3cd11b0ab6985636eedc8f0dda', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'a6a207066d6ef70c7c3545d9412eb6be0d252062', class: "col-4 align-content-end" }, h("iframe-input", { key: '74a1bec5108a25f6e6f953abf25bc756293dea99', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+}, [1, "justifi-card-form", {
+        "isReady": [32],
+        "iframeOrigin": [32],
+        "validate": [64],
+        "tokenize": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-card-form", "hidden-input", "iframe-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-card-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JustifiCardForm$1);
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const JustifiCardForm = JustifiCardForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/justifi-checkout-core.js

@@ -1,204 +1,4 @@
-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, a2 as checkoutSummary } from './parts.js';
-import { H as Header3 } from './header-3.js';
-import './details.js';
-import './event-types.js';
-import { d as defineCustomElement$6 } from './form-control-help-text2.js';
-import { d as defineCustomElement$5 } from './form-control-radio2.js';
-import { d as defineCustomElement$4 } from './payment-method-options.js';
-import { d as defineCustomElement$3 } from './saved-payment-methods.js';
-import { d as defineCustomElement$2 } 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"))))));
-    }
-}, [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$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-checkout-core", "form-control-help-text", "form-control-radio", "justifi-payment-method-options", "justifi-saved-payment-methods", "justifi-sezzle-payment-method"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-checkout-core":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CheckoutCore);
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "justifi-payment-method-options":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "justifi-saved-payment-methods":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "justifi-sezzle-payment-method":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { C as CheckoutCore, d as defineCustomElement$1 } from './checkout-core.js';
 
 const JustifiCheckoutCore = CheckoutCore;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/justifi-checkout-summary.js

@@ -1,4 +1,35 @@
-import { S as Summary, d as defineCustomElement$1 } from './summary.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { t as text } from './parts.js';
+import { c as formatCurrency } from './utils2.js';
+import { s as state } from './checkout.store.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+
+const Summary = /*@__PURE__*/ proxyCustomElement(class Summary extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(StyledHost, { key: '9a2eea1693287ad73dfedd3ddc24e949e9d75148' }, h("section", { key: '1943be6cef0c4a1c830ddfc14d893c3906482534' }, h("div", { key: 'cf3f41d3dd3c9829d93d7e56e3d2dfabbd99ccef' }, h("div", { key: 'b5bc944a5310252dc0720e3e7d709f1a57f898c8', part: text }, state === null || state === void 0 ? void 0 : state.paymentDescription), h("div", { key: 'dbe53880d7c3ff8d4513a570e1b024f1e2f43028' }, h("span", { key: 'd8986a9265463d8f9d7f62598cc4ec3203081c09', part: text }, "Total"), "\u00A0", h("span", { key: '32cbc6e259fdee2c71ad72fcf59ab157704c4758', part: text }, formatCurrency(+(state === null || state === void 0 ? void 0 : state.totalAmount))))))));
+    }
+}, [1, "justifi-checkout-summary"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-checkout-summary"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-checkout-summary":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Summary);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const JustifiCheckoutSummary = Summary;
 const defineCustomElement = defineCustomElement$1;