@justifi/webcomponents 5.7.6-rc-02 → 5.7.6-rc-04

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as CardBrandLabels } from './payment-method-option-utils.js';
-import { W as radioListItem } from './parts.js';
+import { r as radioListItem } from './parts.js';
 import { d as defineCustomElement$3 } from './form-control-help-text2.js';
 import { d as defineCustomElement$2 } from './form-control-radio2.js';
 
@@ -24,7 +24,7 @@ const SavedPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMe
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'c6a1d3de6363c80a0acb15c6676d3e913beeda2d', class: "payment-method" }, h("div", { key: 'fdabb1a67f654a3bcf06e86e8c42f6aa281e6757', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0731e2ccb8080ee4972201a617cd99376627e332', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: '5f69545a8ce1bfb45f043c55a82c8f0b2d316d6f', class: "payment-method" }, h("div", { key: '85970200bf61dedf1916f5564d2b9dfed9012cd7', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '15ddbf64c39bfe955153b64bc42cf12a1c3147cd', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
     }
 }, [0, "justifi-saved-payment-method", {
         "paymentMethodOption": [16, "payment-method-option"],

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

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { A as Api } from './Api.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
@@ -114,7 +113,7 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
         this.toggleCoverage = makeToggleCoverage(config);
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: 'a563c1f6daf665c6ae06442c18dd25400b420f39', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId || checkoutStore.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '590b2cfe0962ab6778faa21e618f7023fa6b4784', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId || checkoutStore.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
 }, [0, "justifi-season-interruption-insurance", {
         "authToken": [1, "auth-token"],

package/dist/module/justifi-skeleton.js

@@ -9,7 +9,7 @@ const JustifiSkeleton$1 = /*@__PURE__*/ proxyCustomElement(class JustifiSkeleton
         this.__attachShadow();
     }
     render() {
-        return (h(StyledHost, { key: '61759f6fd8527466a50047fb01c510b3181fa6ca' }, h(Skeleton, { key: 'f0b84cafaca36053a5c4c359e9c1896123a8fae9', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: '9928d91672d7ce5854f08d190dc55d8dd1d763e9' }, h(Skeleton, { key: 'eb9bf35e904235d89cb06a2ee4de3edc8e05b12b', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
     }
 }, [1, "justifi-skeleton", {
         "component": [1],

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

@@ -4,11 +4,11 @@ import { ai as terminalOrdersListFilterMenu, aj as orderStatusTerminalOrdersList
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import './justifi-radio-list-item2.js';
 import './config-state.js';
-import { j as convertToUTC, h as convertToLocal } from './utils2.js';
-import { T as TerminalOrderStatus, c as TerminalOrderType } from './Refund.js';
+import { h as convertToUTC, e as convertToLocal } from './utils2.js';
+import { T as TerminalOrderStatus, f as TerminalOrderType } from './Refund.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
 import { d as defineCustomElement$5 } from './form-control-date2.js';
@@ -62,8 +62,8 @@ const TerminalOrdersListFilters = /*@__PURE__*/ proxyCustomElement(class Termina
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '9455a8028d5a2363ae8e95bbdc382886b7e6c34c' }, h("table-filters-menu", { key: 'c2d2288f12d8dade596cc5a2fd77a032dfeab741', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: 'bca04a463f8da0c16fd2e554910dac8b4bea85c8', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'f76a13c7c2b7e7a31f537c8d8c55d95c65d5af25', class: "p-2" }, h("form-control-select", { key: 'c5dbe04a3cb51fab100fada58db4d36a6bc40c43', 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: '147f79940553ec51f47a745422699f7c2b44d7a1', class: "p-2" }, h("form-control-select", { key: '321091e9227e1cc51085ad61975c44881077db7b', 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: '97dfc1953c6c1c1c2edd6cc5fbaf9f8831c22108', class: "p-2" }, h("form-control-date", { key: '0118c404ca0d1b98d017159ccf9b0c671f490a6b', 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: '1fcfca7be2b9bd1bd5aee2c442353f3143da1428', class: "p-2" }, h("form-control-date", { key: 'd3fb521a15596f539446dc8bb0239f802d811193', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '5b9798d42f48005e7422f1ed2c14372fb3837f2b' }, h("table-filters-menu", { key: '84cd025dd2f18a574cead52ab411105794c7c1c1', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '6fee37e85fcd2064793436faaff217ae8fddb326', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a69fa9c6f69f75bd200a5629843d268c02595498', class: "p-2" }, h("form-control-select", { key: '03ea6ad955f8a5b31011cf3f7446867b43349ae2', 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: '11b90f152086a43bfcb01f52c8566797884e081d', class: "p-2" }, h("form-control-select", { key: 'bc63d00ea926eafe0f3b02e8ea77e85c44e15cfc', 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: '0a7c63e637d8f016bf0e08a2c1bdea5a13c0dde1', class: "p-2" }, h("form-control-date", { key: '449666ba9aa6992999356cd7a153c3908787d80b', 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: '4c02f8c7a0b0eb9b330b1a001838e02a3c4bb007', class: "p-2" }, h("form-control-date", { key: 'faebed4ecb1316d06e54cb3204d03098d2eaf892', 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 }))))));
     }
 }, [1, "justifi-terminal-orders-list-filters", {

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

@@ -2,13 +2,13 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import './justifi-radio-list-item2.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { d as defineCustomElement$2, a as defaultColumnsKeys } from './terminal-orders-list-core2.js';
 import './config-state.js';
-import './utils2.js';
-import { k as TerminalOrder, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import './dinero.js';
+import { o as TerminalOrder, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { A as Api } from './Api.js';
@@ -96,7 +96,7 @@ const TerminalOrdersList = /*@__PURE__*/ proxyCustomElement(class TerminalOrders
         }
     }
     render() {
-        return (h(StyledHost, { key: '0972cc7db71033e123fe2022adc3eb8a98a4c291' }, h("terminal-orders-list-core", { key: '1403004df6d7234892db90573c384074dca04e25', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'e51250fa0af34799ed165080e8d0e1feb31cf6d8' }, h("terminal-orders-list-core", { key: 'b8f7b20bc976805fa522d3f85fe1382f1326381c', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
 }, [1, "justifi-terminal-orders-list", {
         "accountId": [1, "account-id"],

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

@@ -5,11 +5,11 @@ import { an as terminalsListFilterMenu, ao as terminalIdTerminalsListFilterParam
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import './justifi-radio-list-item2.js';
 import './config-state.js';
-import './utils2.js';
-import { d as ITerminalStatus } from './Refund.js';
+import './dinero.js';
+import { g as ITerminalStatus } from './Refund.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
 import { d as defineCustomElement$5 } from './form-control-select2.js';
@@ -51,7 +51,7 @@ const TerminalsListFilters = /*@__PURE__*/ proxyCustomElement(class TerminalsLis
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '0f68d3d45ff461011c59fb71c4c89391dbb72bb0' }, h("table-filters-menu", { key: 'ea051d926c2b20e95d055f8cacb6f40999b1ac7b', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'e7d6fe457e29da3b62e2a81511f939f87000a32e', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '2c5ef7dcfe6d3ccde2821a4ab2d5c6e2eef51311', class: "p-2" }, h("form-control-text", { key: 'a44a96a3d1ee83d234d0763fdb0ff2eea366a624', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'ee0f05b519eb61374880bdab865999e0d66d0782', class: "p-2" }, h("form-control-text", { key: '9f97053c46474dc2701b030b91126c2b4a8c3728', 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: '88535a61ee28d83c83e91200be4d9d8b3ed49530', class: "p-2" }, h("form-control-select", { key: '4a465b5b82a514fcd84c051969fe5e24b8a2d20d', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: '81ef3685f99ca6e33c2facd2bf22f186e54f3250' }, h("table-filters-menu", { key: '97218ed4bf43e21bde0f3ac282d77f584bb042b3', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '2f1b8d3d55be6f3448c344a90ababc120723b453', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'ab5d8d959bb8541df3bba8e18775fc1ead7cac48', class: "p-2" }, h("form-control-text", { key: '26234bc40edef8e4cc3be2d83e8a9beeb8906eff', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '1cd238d705fc3222694e882a5848e4f5caadc254', class: "p-2" }, h("form-control-text", { key: 'a8d17bb259f0003207f16c328eebc0673e8c4377', 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: 'fd1a215f7350a74dedd1eabd2c9ea3daaf72bea5', class: "p-2" }, h("form-control-select", { key: 'a2e14787e232b5415d2d4258e56e8618fd7a43bc', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
 }, [1, "justifi-terminals-list-filters", {
         "terminalId": [1, "terminal-id"],

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

@@ -1,17 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as Terminal, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { l as Terminal, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { T as TerminalService } from './terminal.service.js';
 import './config-state.js';
-import './utils2.js';
+import './dinero.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import './justifi-radio-list-item2.js';
 import { d as defineCustomElement$2, a as defaultColumnsKeys } from './terminals-list-core2.js';
 import { d as defineCustomElement$3 } from './pagination-menu2.js';
 
@@ -101,7 +101,7 @@ const TerminalsList = /*@__PURE__*/ proxyCustomElement(class TerminalsList exten
         }
     }
     render() {
-        return (h(StyledHost, { key: '2212743b516f92a5af51a6b9202b3679f22aadcc' }, h("terminals-list-core", { key: '5fabd291b0649fa3b893b3fff8200aafa053ab3c', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'fe998292778d729620666188320650f3a25c5bda' }, h("terminals-list-core", { key: '94d37a1376da8694c78d6b6dfa20528d5c008e7f', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

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

@@ -1,131 +1,395 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import { d as defineCustomElement$3 } from './justifi-radio-list-item2.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import { a as ComponentErrorCodes, c as PaymentMethodTypes, C as ComponentErrorSeverity } from './Refund.js';
 import './config-state.js';
-import './utils2.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import './dinero.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { c as checkoutStore } from './checkout.store.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';
+import { d as defineCustomElement$j } from './custom-popper2.js';
+import { d as defineCustomElement$i } from './form-control-checkbox2.js';
+import { d as defineCustomElement$h } from './form-control-help-text2.js';
+import { d as defineCustomElement$g } from './form-control-radio2.js';
+import { d as defineCustomElement$f } from './form-control-select2.js';
+import { d as defineCustomElement$e } from './form-control-text2.js';
+import { d as defineCustomElement$d } from './form-control-tooltip2.js';
+import { d as defineCustomElement$c } from './hidden-input2.js';
+import { d as defineCustomElement$b } from './iframe-input2.js';
+import { d as defineCustomElement$a } from './bank-account.js';
+import { d as defineCustomElement$9 } from './billing-form.js';
+import { d as defineCustomElement$8 } from './billing-information-form.js';
+import { d as defineCustomElement$7 } from './justifi-button2.js';
+import { d as defineCustomElement$6 } from './card-form2.js';
+import { d as defineCustomElement$5 } from './justifi-header2.js';
+import { d as defineCustomElement$4 } from './postal-code-form.js';
+import { d as defineCustomElement$2 } from './save-new-payment-method.js';
 
+// Constants
+const PAYMENT_METHOD_TYPE_LABELS = {
+    [PaymentMethodTypes.bankAccount]: 'New bank account',
+    [PaymentMethodTypes.card]: 'New credit or debit card',
+};
+const ERROR_MESSAGES = {
+    AUTH_TOKEN_REQUIRED: 'Auth token is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
+    ACCOUNT_ID_REQUIRED: 'Account ID is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
+    FORM_NOT_READY: 'Payment form not ready',
+    VALIDATION_ERROR: 'Validation error',
+};
 const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePaymentMethod extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
-        this.submitButtonText = 'Submit';
         this.isLoading = false;
+        this.computedHideSubmitButton = false;
+        this.submitButtonText = 'Submit';
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        if (!this.authToken) {
-            this.authToken = checkoutStore.authToken;
-        }
-        if (!this.accountId) {
-            this.accountId = checkoutStore.accountId;
-        }
+        this.validateRequiredProps();
+    }
+    connectedCallback() {
+        this.setDefaultSelectedPaymentMethod();
+        this.setComputedHideSubmitButton();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
+    paymentMethodsChanged() {
+        this.setDefaultSelectedPaymentMethod();
+    }
+    handleRadioClick(event) {
+        this.selectedPaymentMethodId = event.detail;
+    }
+    async fillBillingForm(fields) {
+        var _a;
+        (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
+    }
     async tokenizePaymentMethod(event) {
-        event && event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.preventDefault();
         this.isLoading = true;
-        let tokenizeResponse;
         try {
-            tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
-            if (tokenizeResponse.error) {
+            const validation = await this.validate();
+            if (!validation.isValid) {
                 this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: ERROR_MESSAGES.VALIDATION_ERROR,
+                });
+                this.isLoading = false;
+                return;
+            }
+            const tokenizeResponse = await this.resolvePaymentMethod({ isValid: true });
+            if (tokenizeResponse.error) {
+                this.emitError({
                     errorCode: tokenizeResponse.error.code,
                     message: tokenizeResponse.error.message,
-                    severity: ComponentErrorSeverity.ERROR,
                 });
             }
+            this.submitEvent.emit({ response: tokenizeResponse });
+            return tokenizeResponse;
         }
         catch (error) {
-            const errorData = {
+            const errorResponse = this.createErrorResponse(ComponentErrorCodes.TOKENIZE_ERROR, error.message);
+            this.emitError({
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 message: error.message,
-                severity: ComponentErrorSeverity.ERROR,
-            };
-            this.errorEvent.emit(errorData);
+            });
+            this.submitEvent.emit({ response: errorResponse });
+            return errorResponse;
         }
         finally {
-            this.submitEvent.emit({ response: tokenizeResponse });
             this.isLoading = false;
-            return tokenizeResponse;
         }
     }
-    async fillBillingForm(fields) {
-        this.paymentMethodOptionsRef.fillBillingForm(fields);
-    }
     async validate() {
-        return this.paymentMethodOptionsRef.validate();
+        if (!this.areFormsReady()) {
+            return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
+        }
+        const [billingValidation, paymentMethodValidation] = await Promise.all([
+            this.billingFormRef.validate(),
+            this.paymentMethodFormRef.validate(),
+        ]);
+        return {
+            isValid: billingValidation.isValid && paymentMethodValidation.isValid,
+            errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
+        };
+    }
+    validateRequiredProps() {
+        if (!this.authToken && !checkoutStore.authToken) {
+            this.emitError({
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: ERROR_MESSAGES.AUTH_TOKEN_REQUIRED,
+            });
+        }
+        if (!this.accountId && !checkoutStore.accountId) {
+            this.emitError({
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: ERROR_MESSAGES.ACCOUNT_ID_REQUIRED,
+            });
+        }
+    }
+    setDefaultSelectedPaymentMethod() {
+        if (!this.selectedPaymentMethodId) {
+            if (!this.disableCreditCard) {
+                this.selectedPaymentMethodId = PaymentMethodTypes.card;
+            }
+            else if (!this.disableBankAccount) {
+                this.selectedPaymentMethodId = PaymentMethodTypes.bankAccount;
+            }
+        }
+    }
+    setComputedHideSubmitButton() {
+        // If hideSubmitButton prop is explicitly set, use that value
+        if (this.hideSubmitButton !== undefined) {
+            this.computedHideSubmitButton = this.hideSubmitButton;
+            return;
+        }
+        // Otherwise, auto-detect if component is slotted within modular-checkout
+        const isWithinModularCheckout = this.isSlottedWithinModularCheckout();
+        this.computedHideSubmitButton = isWithinModularCheckout;
+    }
+    isSlottedWithinModularCheckout() {
+        var _a;
+        let parent = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement;
+        while (parent) {
+            if (parent.tagName === 'JUSTIFI-MODULAR-CHECKOUT') {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    get availablePaymentMethods() {
+        const methods = [];
+        if (!this.disableCreditCard) {
+            methods.push(PaymentMethodTypes.card);
+        }
+        if (!this.disableBankAccount) {
+            methods.push(PaymentMethodTypes.bankAccount);
+        }
+        return methods;
+    }
+    areFormsReady() {
+        return !!(this.billingFormRef && this.paymentMethodFormRef);
+    }
+    emitError(errorData) {
+        this.errorEvent.emit(Object.assign(Object.assign({}, errorData), { severity: ComponentErrorSeverity.ERROR }));
+    }
+    createErrorResponse(code, message) {
+        return {
+            error: {
+                code: code,
+                message,
+                decline_code: undefined,
+            },
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!this.areFormsReady()) {
+            return this.createErrorResponse('form_not_ready', ERROR_MESSAGES.FORM_NOT_READY);
+        }
+        try {
+            const validation = await this.validate();
+            if (!validation.isValid || !insuranceValidation.isValid) {
+                const errorMessage = Object.values(validation.errors)[0] || ERROR_MESSAGES.VALIDATION_ERROR;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message: String(errorMessage),
+                        decline_code: undefined,
+                    },
+                };
+            }
+            return await this.performTokenization();
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async performTokenization() {
+        var _a, _b;
+        const tokenizeResponse = await this.tokenize();
+        if (tokenizeResponse.error) {
+            return { error: tokenizeResponse.error };
+        }
+        const tokenizeResponseData = tokenizeResponse.data;
+        return {
+            token: ((_a = tokenizeResponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeResponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
+            data: tokenizeResponseData,
+        };
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const config = {
+                clientId: this.authToken || checkoutStore.authToken,
+                account: this.accountId || checkoutStore.accountId,
+                paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
+            };
+            return await this.paymentMethodFormRef.tokenize(config);
+        }
+        catch (error) {
+            return error;
+        }
+    }
+    buildPaymentMethodMetadata(billingFormFieldValues) {
+        return this.shouldSavePaymentMethod
+            ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupID }) : Object.assign({}, billingFormFieldValues);
+    }
+    get paymentMethodGroupID() {
+        return this.paymentMethodGroupId || checkoutStore.paymentMethodGroupId;
+    }
+    get shouldSavePaymentMethod() {
+        return !!(this.paymentMethodGroupId || checkoutStore.savePaymentMethod);
+    }
+    get shouldHideRadioInput() {
+        const showCard = !this.disableCreditCard;
+        const showAch = !this.disableBankAccount;
+        return !showAch || !showCard;
+    }
+    renderPaymentMethodOption(paymentMethodType) {
+        const isSelected = this.selectedPaymentMethodId === paymentMethodType;
+        return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
+    }
+    renderSelectedPaymentMethodForm(paymentMethodId) {
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
+    }
+    renderPaymentMethodForm(paymentMethodId) {
+        return paymentMethodId === PaymentMethodTypes.card ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: '0eea98bc9927bbd48841728ece5dd19bd23aa2dc' }, h("form", { key: '696040e74f6fe5b776edf8017d400165752e9715' }, h("fieldset", { key: 'af96f0fc95db821ce53c28496aef352416ff8a0e' }, h("div", { key: '68af7be6aac098150edce72a7372ed526e94a212', class: "row gy-3" }, h("div", { key: 'a9f477f7e85dd33c113ab95efd8d03aa7ce84049', class: "col-12" }, h("justifi-payment-method-options", { key: '2ec00aa262d3bceee0768a0a0c6eff499e0295c4', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'cd878391ee2af083a685daf2322cddc859398a3c', class: "col-12" }, h(Button, { key: '29bf32b687e73c00c1e6519d99b9dcd75dc968e4', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
+        return (h(StyledHost, { key: 'b8cf3e66f93bf1b1dd2c3116781ddf0168cbd4e7' }, h("form", { key: '70ad04762a32e930b6b96c2d8609577cd5d1e8d6' }, h("fieldset", { key: 'f7a7d53512b3d034999b18b666381c2df04f082b' }, h("div", { key: '6e5be958e583399ac733aefe4ddf935f5aec98df', class: "row gy-3" }, h("div", { key: '2d81034d2d95532a18bef58cdd1635b1d3b1d735', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'a791aac6520c187fd336012d97c976ece891edeb', class: "col-12" }, h("justifi-button", { key: '9ff1733b1811fea31b1e4dc41694db4eb40be14c', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
-}, [1, "justifi-tokenize-payment-method", {
-        "authToken": [1, "auth-token"],
+    get host() { return this; }
+    static get watchers() { return {
+        "disableCreditCard": ["paymentMethodsChanged"],
+        "disableBankAccount": ["paymentMethodsChanged"]
+    }; }
+}, [0, "justifi-tokenize-payment-method", {
         "accountId": [1, "account-id"],
-        "paymentMethodGroupId": [1, "payment-method-group-id"],
-        "submitButtonText": [1, "submit-button-text"],
-        "disableCreditCard": [4, "disable-credit-card"],
+        "authToken": [1, "auth-token"],
         "disableBankAccount": [4, "disable-bank-account"],
-        "hideSubmitButton": [4, "hide-submit-button"],
-        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "disableCreditCard": [4, "disable-credit-card"],
         "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideSubmitButton": [4, "hide-submit-button"],
+        "paymentMethodGroupId": [1, "payment-method-group-id"],
+        "submitButtonText": [1, "submit-button-text"],
         "isLoading": [32],
-        "tokenizePaymentMethod": [64],
+        "selectedPaymentMethodId": [32],
+        "computedHideSubmitButton": [32],
         "fillBillingForm": [64],
+        "tokenizePaymentMethod": [64],
         "validate": [64]
+    }, [[0, "radio-click", "handleRadioClick"]], {
+        "disableCreditCard": ["paymentMethodsChanged"],
+        "disableBankAccount": ["paymentMethodsChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-tokenize-payment-method", "form-control-help-text", "form-control-radio", "justifi-payment-method-options", "justifi-saved-payment-methods", "justifi-sezzle-payment-method"];
+    const components = ["justifi-tokenize-payment-method", "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-form", "justifi-billing-form", "justifi-billing-information-form", "justifi-button", "justifi-card-form", "justifi-header", "justifi-postal-code-form", "justifi-radio-list-item", "justifi-save-new-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-tokenize-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TokenizePaymentMethod);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$h();
             }
             break;
         case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "justifi-bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "justifi-billing-information-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-header":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-payment-method-options":
+        case "justifi-postal-code-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-saved-payment-methods":
+        case "justifi-radio-list-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-sezzle-payment-method":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -45,7 +45,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         }
     }
     render() {
-        return (h("justifi-legal-address-form-step-core", { key: '65d876bee76f4deb4df115e636fafaef2c883f24', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-legal-address-form-step-core", { key: 'bd286476461181f2e8a435a97bf148d55876b49c', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],