@justifi/webcomponents 6.0.0-rc.9 → 6.0.0

package/dist/module/justifi-season-interruption-insurance.js

@@ -6,7 +6,7 @@ import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { c as checkoutStore } from './checkout.store.js';
-import { p as processHTML, c as formatCurrency, r as removeAttribute, l as addAttribute } from './utils2.js';
+import { p as processHTML, c as formatCurrency, r as removeAttribute, m as addAttribute } from './utils2.js';
 import { v as validateInsuranceValues, a as insuranceValues, b as insuranceErrors } from './insurance-state.js';
 import { t as text, j as textDanger } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
@@ -87,24 +87,14 @@ const makeToggleCoverage = ({ authToken, service }) => async ({ quoteId, payload
     }
 };
 
-const SeasonInterruptionInsuranceLoading = () => (h("div", { class: "row gap-3" },
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "35%", height: "30px" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "70%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "40%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "40%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "100%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "80%" }))));
+const SeasonInterruptionInsuranceLoading = () => (h("div", { class: "row gap-3" }, h("div", { class: "col-12" }, h(Skeleton, { width: "35%", height: "30px" })), h("div", { class: "col-12" }, h(Skeleton, { width: "70%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "100%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "80%" }))));
 
 const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class SeasonInterruptionInsurance extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.insuranceUpdated = createEvent(this, "insurance-updated", 7);
         this.errorEvent = createEvent(this, "error-event", 7);

package/dist/module/justifi-skeleton.js

@@ -3,13 +3,15 @@ import { S as StyledHost } from './styled-host.js';
 import { S as Skeleton } from './skeleton.js';
 
 const JustifiSkeleton$1 = /*@__PURE__*/ proxyCustomElement(class JustifiSkeleton extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
-        return (h(StyledHost, { key: 'd19fcf55df4b5b001d31af93c263fef39fc0d160' }, h(Skeleton, { key: '9ab49d76aa71146287fff2013050e008342f0275', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: 'c995981caeae785829f1ef75454b2759243e8adb' }, h(Skeleton, { key: '9c63cf385499820bb1acd3503e126363485684f6', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
     }
 }, [257, "justifi-skeleton", {
         "component": [1],

package/dist/module/justifi-terminal-orders-list-filters.js

@@ -17,9 +17,11 @@ import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$2 } from './table-filters-menu2.js';
 
 const TerminalOrdersListFilters = /*@__PURE__*/ proxyCustomElement(class TerminalOrdersListFilters extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.setParamsOnChange = (name, value) => {
             filterParams[name] = value;
@@ -62,8 +64,8 @@ const TerminalOrdersListFilters = /*@__PURE__*/ proxyCustomElement(class Termina
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'b6a93f69fa0c0852d7acdb9329e2e07112d5b682' }, h("table-filters-menu", { key: 'f943e8ca3b73ff9e6cc254ba0bd1836dc777d922', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: 'a38c0c9279aa181e3908321cd57c82d61c7a8d7f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'da7aa4de8f51d822df29c6920b3d6c0874bf7823', class: "p-2" }, h("form-control-select", { key: 'bfae6425df3a1812f28a9ad44ce69f563fdabf9e', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: '2acab48883e9f462e4be2ac2c58d58f164772ec8', class: "p-2" }, h("form-control-select", { key: '31b7d020bdcb0eab2ff1727973cb16c02b8d2ca7', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: '67324655a1b10000887714026d8fe0a8ce67dfe8', class: "p-2" }, h("form-control-date", { key: '2bfc40bc7d52458b9ed58dd26c7d9e843345f209', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '3bca9a59df57f33f4d96834cca5e39d7c7068c51', class: "p-2" }, h("form-control-date", { key: 'fd876d75d0f681c4627252bd7096930785795827', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '3042752f6f3bf4eb4f379aa256ff2a17d7fe8627' }, h("table-filters-menu", { key: '9a2a446701c17e3aa1ecbc89fa383c3a3c16b3d1', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '8c5533b280615974883fba9da4b87c066f7af5be', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'bbe71c8c5f2b49da9a38638ac4bda646cc4f7770', class: "p-2" }, h("form-control-select", { key: '235922673a4ef8e7392b3e46b3c0bd326f7abe79', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: 'd66c4305848a6f85867307d0448bfb2d7a80b698', class: "p-2" }, h("form-control-select", { key: '480bd03e3ba6ea595c1602bbdf657f369f133adb', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: 'ffdbbbac93a6498fe52f21c91a70998ad1094596', class: "p-2" }, h("form-control-date", { key: '60c95da005a50430e5a81d3b14f0b7a627480534', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '7e30fed8bbf9ba6db03d70d7b70a5f669d761ce9', class: "p-2" }, h("form-control-date", { key: 'ce490f4c346a3e455ae6f44e781b126ca46391d5', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforeTerminalOrdersListFilterParam }))))));
     }
 }, [257, "justifi-terminal-orders-list-filters", {

package/dist/module/justifi-terminal-orders-list.js

@@ -56,9 +56,11 @@ class TerminalOrderService {
 }
 
 const TerminalOrdersList = /*@__PURE__*/ proxyCustomElement(class TerminalOrdersList extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.errorMessage = null;
@@ -96,7 +98,7 @@ const TerminalOrdersList = /*@__PURE__*/ proxyCustomElement(class TerminalOrders
         }
     }
     render() {
-        return (h(StyledHost, { key: 'e5e49813521cab770fd45d4cf16fdb347ca5f1a8' }, h("terminal-orders-list-core", { key: '162c8dee504228025cefec946124becea3522af3', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '55f0bf858787e00c304972c941a477815712df9d' }, h("terminal-orders-list-core", { key: '2d47e23bc2157d79254f34dfe0551fb32a9d88cc', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
 }, [257, "justifi-terminal-orders-list", {
         "accountId": [1, "account-id"],

package/dist/module/justifi-terminals-list-filters.js

@@ -18,9 +18,11 @@ import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$2 } from './table-filters-menu2.js';
 
 const TerminalsListFilters = /*@__PURE__*/ proxyCustomElement(class TerminalsListFilters extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.setParamsOnChange = (name, value) => {
             filterParams[name] = value;
@@ -51,7 +53,7 @@ const TerminalsListFilters = /*@__PURE__*/ proxyCustomElement(class TerminalsLis
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '653849e5d1094dff32f986a5710bf4fb8fa792ef' }, h("table-filters-menu", { key: '129ea81e6071f719f5f54613462ea2bf33d860a0', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '01c23c89129c746e5477fe910eff85a1484c05f2', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8b31ce4b3d80a42e865d38c798afdf2a0ca6fead', class: "p-2" }, h("form-control-text", { key: '5cbe8bd912a342f4e5b70a7e5f95b8663e713a49', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'fe17b736b67c74474b89b535075863bd98aa27b8', class: "p-2" }, h("form-control-text", { key: '49bae44c482770545185013c2d82a7a3f636ecf4', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '0c30aa7e5a6e204ba7425196eaaeddb0334a4563', class: "p-2" }, h("form-control-select", { key: '0db45f763aea2fb35cb6e961bd696f7bdf507471', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: '5e6f1e8abcc7cffc26c101160bff40ff5092ff90' }, h("table-filters-menu", { key: '6a57cb7deeb0c6927ee557402ef2618a3d3d8a29', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'aaa63156c9603aafbe1b9dd4d4f87670b4e0ab66', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'f76ca827834a98595a98d6bb6f982807506fe240', class: "p-2" }, h("form-control-text", { key: 'f9acf97e42e3e5f5ee216a10e116ab1aff2e6390', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'c4ac977f7433193e7a9c52be483c65cb5f96f214', class: "p-2" }, h("form-control-text", { key: '035fc59523056240eea5da7b63d75028278d3102', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: 'ab72f5ef8a0191b1726cd84c36a7cca28a78ecf0', class: "p-2" }, h("form-control-select", { key: '4a684c87e04e11f55c59d45a281f7c258fae4f0d', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
 }, [257, "justifi-terminals-list-filters", {
         "terminalId": [1, "terminal-id"],

package/dist/module/justifi-terminals-list.js

@@ -45,9 +45,11 @@ const makeGetTerminals = ({ id, authToken, service }) => async ({ params, onSucc
 };
 
 const TerminalsList = /*@__PURE__*/ proxyCustomElement(class TerminalsList extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.errorMessage = null;
@@ -101,7 +103,7 @@ const TerminalsList = /*@__PURE__*/ proxyCustomElement(class TerminalsList exten
         }
     }
     render() {
-        return (h(StyledHost, { key: '6034706e77de0a703455368eaab0ef0cbbfb5765' }, h("terminals-list-core", { key: 'b9e3292829be1b48b6f6146b9a97f9060b1540c1', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '705ee40711e90c28a6b1699f450befa7c5b5529b' }, h("terminals-list-core", { key: '3d54a1519e5299eb83d16bf2034711fc0dd0cc18', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

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

@@ -3,9 +3,11 @@ import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { i as isEmptyObject } from './utils2.js';
 
 const LegalAddressDetails = /*@__PURE__*/ proxyCustomElement(class LegalAddressDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;

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

@@ -13,9 +13,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const LegalAddressFormStepCore = /*@__PURE__*/ proxyCustomElement(class LegalAddressFormStepCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

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

@@ -9,9 +9,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './legal-address-form-step-core.js';
 
 const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddressFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     propChanged() {

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

@@ -8,9 +8,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const LegalAddressForm = /*@__PURE__*/ proxyCustomElement(class LegalAddressForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errors = {};
         this.inputHandler = this.inputHandler.bind(this);
     }

package/dist/module/modular-checkout.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkoutStore, P as PAYMENT_METHODS, o as onChange, b as PAYMENT_MODE } from './checkout.store.js';
+import { c as checkoutStore, o as onAnyChange, g as getAvailablePaymentMethodTypes } from './checkout.store.js';
 import { J as JustifiAnalytics, c as checkPkgVersion } from './Analytics.js';
 import './config-state.js';
 import './dinero.js';
@@ -8,7 +8,9 @@ import './Pagination.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { C as CheckoutService } from './checkout.service.js';
+import { P as PlaidService } from './plaid.service.js';
 import { i as insuranceValuesOn, h as hasInsuranceValueChanged, a as insuranceValues } from './insurance-state.js';
+import { P as PAYMENT_METHODS, a as PaymentMethod, b as PAYMENT_MODE } from './ModularCheckout.js';
 
 const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -66,18 +68,20 @@ const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ pa
 };
 
 const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
-        this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed", 7);
-        this.savePaymentMethod = false;
+        this.checkoutChangedEvent = createEvent(this, "checkout-changed", 7);
+        this.plaidService = new PlaidService();
         this.handleApplePayCompleted = (event) => {
             const { success, token, paymentMethodId, error } = event.detail;
             if (success && token) {
                 checkoutStore.paymentToken = paymentMethodId;
-                checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.APPLE_PAY;
+                checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.APPLE_PAY };
                 this.submitCheckout();
             }
             else {
@@ -90,11 +94,12 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
             }
         };
         this.handleApplePayError = (event) => {
-            const { error } = event.detail;
+            const { error, code } = event.detail;
             console.error("Apple Pay error:", error);
             this.errorEvent.emit({
                 message: error || "Apple Pay error occurred",
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                // prefix with APPLE_PAY_
+                errorCode: `APPLE_PAY_${code}`,
                 severity: ComponentErrorSeverity.ERROR,
             });
         };
@@ -103,9 +108,6 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
             checkoutStore.selectedPaymentMethod = undefined;
         };
     }
-    savePaymentMethodChanged(newValue) {
-        checkoutStore.savePaymentMethod = newValue;
-    }
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
@@ -123,15 +125,15 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        onChange("selectedPaymentMethod", (newValue) => {
-            this.paymentMethodChangedEvent.emit(newValue);
+        // Emit checkout-changed whenever any store key changes
+        onAnyChange(() => {
+            this.emitCheckoutChanged();
         });
     }
     componentWillLoad() {
         this.analytics = new JustifiAnalytics(this);
         checkPkgVersion();
         checkoutStore.authToken = this.authToken;
-        checkoutStore.savePaymentMethod = this.savePaymentMethod;
         this.fetchCheckout();
         // Refresh the checkout data when insurance values actually change (not on initial load)
         insuranceValuesOn("set", (key) => {
@@ -162,6 +164,7 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         if (this.getCheckout) {
             this.getCheckout({
                 onSuccess: ({ checkout }) => {
+                    this.updateStore(checkout);
                     if (checkout.status === ICheckoutStatus.completed) {
                         this.errorEvent.emit({
                             message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
@@ -178,13 +181,12 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                         });
                         return;
                     }
-                    this.updateStore(checkout);
                 },
                 onError: (error) => {
                     this.errorEvent.emit({
                         message: error.message,
-                        errorCode: ComponentErrorCodes.FETCH_ERROR,
-                        severity: ComponentErrorSeverity.ERROR,
+                        errorCode: error.code,
+                        severity: error.severity,
                     });
                 },
             });
@@ -193,7 +195,8 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
     updateStore(checkout) {
         var _a, _b, _c, _d, _e;
         checkoutStore.accountId = checkout.account_id;
-        checkoutStore.paymentMethods = checkout.payment_methods;
+        checkoutStore.checkoutLoaded = true;
+        checkoutStore.paymentMethods = checkout.payment_methods.map((paymentMethod) => new PaymentMethod(paymentMethod));
         checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
         checkoutStore.paymentDescription = checkout.payment_description;
         checkoutStore.totalAmount = checkout.total_amount;
@@ -207,6 +210,14 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         checkoutStore.bnplProviderCheckoutUrl =
             (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_checkout_url;
     }
+    emitCheckoutChanged() {
+        const detail = {
+            availablePaymentMethodTypes: getAvailablePaymentMethodTypes(),
+            selectedPaymentMethod: checkoutStore.selectedPaymentMethod,
+            savedPaymentMethods: checkoutStore.paymentMethods,
+        };
+        this.checkoutChangedEvent.emit(detail);
+    }
     queryFormRefs() {
         this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
         this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
@@ -251,16 +262,19 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
     // set the selected payment method to the checkout store from outside the component
     async setSelectedPaymentMethod(paymentMethod) {
         checkoutStore.selectedPaymentMethod = paymentMethod;
+        checkoutStore.paymentToken = paymentMethod.id || undefined;
     }
     // if validation fails, the error will be emitted by the component
     async validate() {
+        var _a, _b;
         const promises = [];
         if (checkoutStore.insuranceEnabled && this.insuranceFormRef) {
             promises.push(this.insuranceFormRef.validate());
         }
+        const isNewCard = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.NEW_CARD;
+        const isNewBankAccount = ((_b = checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
         // For new card/bank account, validate payment method + billing.
-        if (checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD ||
-            checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT) {
+        if (isNewCard || isNewBankAccount) {
             if (this.paymentMethodFormRef)
                 promises.push(this.paymentMethodFormRef.validate());
             if (this.billingFormRef)
@@ -284,17 +298,21 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
             }
             return true;
         }
-        catch (_a) {
+        catch (_c) {
             // If any validator throws/rejects, consider the whole validation failed.
             return false;
         }
     }
     async submitCheckout(submitCheckoutArgs) {
+        var _a, _b, _c, _d;
         const isValid = await this.validate();
-        const shouldTokenize = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD || checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        const isNewCard = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.NEW_CARD;
+        const isNewBankAccount = ((_b = checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        const isPlaid = checkoutStore.selectedPaymentMethod.type === PAYMENT_METHODS.PLAID;
+        const shouldTokenize = isNewCard || isNewBankAccount;
         if (shouldTokenize) {
             const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
-            if (tokenizeResult.error) {
+            if (tokenizeResult === null || tokenizeResult === void 0 ? void 0 : tokenizeResult.error) {
                 this.errorEvent.emit({
                     message: tokenizeResult.error.message,
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
@@ -303,6 +321,41 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                 return;
             }
         }
+        // For Plaid, perform exchange at submit time using stored public token and link token id
+        if (isPlaid && !checkoutStore.paymentToken) {
+            const publicToken = checkoutStore.plaidPublicToken;
+            const linkTokenId = checkoutStore.plaidLinkTokenId;
+            if (!publicToken) {
+                this.errorEvent.emit({
+                    message: 'Missing Plaid public token. Please connect your bank.',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            try {
+                const response = await this.plaidService.tokenizeBankAccount(checkoutStore.authToken, checkoutStore.accountId, publicToken, linkTokenId || undefined, checkoutStore.savePaymentMethod ? checkoutStore.paymentMethodGroupId : undefined);
+                if (response === null || response === void 0 ? void 0 : response.error) {
+                    this.errorEvent.emit({
+                        message: typeof response.error === 'string' ? response.error : response.error.message || 'Failed to tokenize bank account',
+                        errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                    return;
+                }
+                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
+                const token = ((_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _c === void 0 ? void 0 : _c.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+                checkoutStore.paymentToken = token;
+            }
+            catch (err) {
+                this.errorEvent.emit({
+                    message: (err === null || err === void 0 ? void 0 : err.message) || 'Plaid exchange error',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+        }
         if (!isValid) {
             this.errorEvent.emit({
                 message: "Please fill in all required fields.",
@@ -317,19 +370,27 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 severity: ComponentErrorSeverity.ERROR,
             });
+            return;
         }
         let payment;
-        const MAP_PAYMENT_METHOD_TO_PAYMENT_MODE = {
-            [PAYMENT_METHODS.NEW_CARD]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.NEW_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.SAVED_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.SAVED_CARD]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.SEZZLE]: PAYMENT_MODE.BNPL,
-            [PAYMENT_METHODS.PLAID]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.APPLE_PAY]: PAYMENT_MODE.APPLE_PAY,
+        const mapTypeToPaymentMode = (type) => {
+            switch (type) {
+                case PAYMENT_METHODS.NEW_CARD:
+                case PAYMENT_METHODS.SAVED_CARD:
+                case PAYMENT_METHODS.NEW_BANK_ACCOUNT:
+                case PAYMENT_METHODS.SAVED_BANK_ACCOUNT:
+                case PAYMENT_METHODS.PLAID:
+                    return PAYMENT_MODE.ECOM;
+                case PAYMENT_METHODS.SEZZLE:
+                    return PAYMENT_MODE.BNPL;
+                case PAYMENT_METHODS.APPLE_PAY:
+                    return PAYMENT_MODE.APPLE_PAY;
+                default:
+                    return undefined;
+            }
         };
         payment = {
-            payment_mode: MAP_PAYMENT_METHOD_TO_PAYMENT_MODE[checkoutStore.selectedPaymentMethod],
+            payment_mode: mapTypeToPaymentMode((_d = checkoutStore.selectedPaymentMethod) === null || _d === void 0 ? void 0 : _d.type),
             payment_token: checkoutStore.paymentToken,
         };
         this.completeCheckout({
@@ -350,21 +411,15 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         });
     }
     render() {
-        return h(Host, { key: 'fcff4ca415a65b77b730328379dc8df9aacba648' });
+        return h(Host, { key: 'f13bda646a7cfcbe339baad474554b38fb0ebae5' });
     }
     get hostEl() { return this; }
-    static get watchers() { return {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
-    }; }
 }, [256, "justifi-modular-checkout", {
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
-        "savePaymentMethod": [4, "save-payment-method"],
         "setSelectedPaymentMethod": [64],
         "validate": [64],
         "submitCheckout": [64]
-    }, undefined, {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/module/owner-details2.js

@@ -3,9 +3,11 @@ import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { f as formatMediumDate } from './utils2.js';
 
 const OwnerDetails = /*@__PURE__*/ proxyCustomElement(class OwnerDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         var _a;

package/dist/module/owner-form-core2.js

@@ -21,9 +21,11 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
     loadingWatcher() {
         this.formLoading.emit(this.isLoading);
     }
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

package/dist/module/owner-form-inputs2.js

@@ -10,9 +10,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessOwnerFormInputs = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFormInputs extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.inputHandler = (name, value) => {
             updateFormValues(this.formController, { [name]: value });
         };

package/dist/module/owner-form.js

@@ -12,9 +12,11 @@ import { d as defineCustomElement$2 } from './owner-form-core2.js';
 import { d as defineCustomElement$1 } from './owner-form-inputs2.js';
 
 const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     async validate() {

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "6.0.0-rc.9";
+const version = "6.0.0";
 var webcomponentsPackageJson = {
 	name: name,
 	version: version};

package/dist/module/pagination-menu2.js

@@ -3,9 +3,11 @@ import { E as ExtendedPagingDefaults } from './Pagination.js';
 import { x as paginationButton, y as paginationButtonDisabled, z as paginationButtonIconPrevious, A as paginationButtonText, B as paginationButtonIconNext } from './parts.js';
 
 const PaginationMenu = /*@__PURE__*/ proxyCustomElement(class PaginationMenu extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.paging = ExtendedPagingDefaults;
         this.params = {};
     }