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

package/dist/cjs/{check-pkg-version-CgQ8N_ta.js → Analytics-CLEDjTfr.js}

@@ -1,15 +1,34 @@
 'use strict';
 
-var _package = require('./package-wSbEFwqE.js');
-var Api = require('./Api-BTdkb3Zh.js');
+var _package = require('./package-D89BDRKu.js');
+var Api = require('./Api-c8NBCwu4.js');
 require('./ComponentError-CEv9ltwy.js');
-require('./Checkout-BTgAlgVL.js');
+require('./Checkout-BsYZoJ0a.js');
 require('./Pagination-Dediz133.js');
 require('./Payment-D5UynU2f.js');
 require('./Refund-BFE-2OxN.js');
 require('./Business-DCRzZf0w.js');
 require('./Dispute-CruQTF6_.js');
 
+const latestVersion = async (packageName) => {
+    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
+    const json = await response.json();
+    return json.version;
+};
+const checkPkgVersion = async () => {
+    const version = _package.packageJson.version;
+    const packageName = _package.packageJson.name;
+    const latest = await latestVersion(packageName);
+    // remove rc from version and everything that comes after -rc
+    const latestNotRC = latest.replace(/-rc.*/, '');
+    // checkif there's a major version difference
+    const versionParts = version.split('.');
+    const latestParts = latest.split('.');
+    if (versionParts[0] !== latestParts[0]) {
+        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
+    }
+};
+
 const api = Api.Api();
 class AnalyticsService {
     async record(body) {
@@ -92,24 +111,5 @@ class JustifiAnalytics {
     }
 }
 
-const latestVersion = async (packageName) => {
-    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
-    const json = await response.json();
-    return json.version;
-};
-const checkPkgVersion = async () => {
-    const version = _package.packageJson.version;
-    const packageName = _package.packageJson.name;
-    const latest = await latestVersion(packageName);
-    // remove rc from version and everything that comes after -rc
-    const latestNotRC = latest.replace(/-rc.*/, '');
-    // checkif there's a major version difference
-    const versionParts = version.split('.');
-    const latestParts = latest.split('.');
-    if (versionParts[0] !== latestParts[0]) {
-        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
-    }
-};
-
 exports.JustifiAnalytics = JustifiAnalytics;
 exports.checkPkgVersion = checkPkgVersion;

package/dist/cjs/{Api-BTdkb3Zh.js → Api-c8NBCwu4.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var configState = require('./config-state-BTfJl-LU.js');
+var configState = require('./config-state-Dz9bnWHg.js');
 var utils = require('./utils-qOon0GWm.js');
 
 const Api = () => {

package/dist/cjs/{Checkout-BTgAlgVL.js → Checkout-BsYZoJ0a.js}

@@ -19,7 +19,7 @@ class Completion {
         this.updated_at = data.updated_at;
     }
 }
-let Checkout$1 = class Checkout {
+class Checkout {
     constructor(data) {
         var _a;
         this.id = data.id;
@@ -70,7 +70,7 @@ let Checkout$1 = class Checkout {
     formattedPaymentAmount(amount) {
         return utils.formatCurrency(amount, this.payment_currency);
     }
-};
+}
 var ICheckoutPaymentMode;
 (function (ICheckoutPaymentMode) {
     ICheckoutPaymentMode["bnpl"] = "Buy Now Pay Later";
@@ -98,4 +98,4 @@ var CompletionStatuses;
     CompletionStatuses["succeeded"] = "succeeded";
 })(CompletionStatuses || (CompletionStatuses = {}));
 
-exports.Checkout = Checkout$1;
+exports.Checkout = Checkout;

package/dist/cjs/additional-questions-details_5.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-2GwnTbNA.js');
-var utils$1 = require('./utils-bn0fXuc-.js');
+var index = require('./index-D5bL1DOi.js');
+var utils$1 = require('./utils-wkdkLmDI.js');
 var utils = require('./utils-qOon0GWm.js');
 require('./parts-9jMf1erK.js');
 require('./_commonjsHelpers-BJu3ubxk.js');

package/dist/cjs/{badge-sO_Hcamo.js → badge-DDksduwk.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-2GwnTbNA.js');
+var index = require('./index-D5bL1DOi.js');
 var parts = require('./parts-9jMf1erK.js');
 
 exports.BadgeVariant = void 0;

package/dist/cjs/bank-account-document-form-inputs_4.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-2GwnTbNA.js');
-require('./config-state-BTfJl-LU.js');
+var index = require('./index-D5bL1DOi.js');
+require('./config-state-Dz9bnWHg.js');
 var utils$1 = require('./utils-qOon0GWm.js');
 require('./ComponentError-CEv9ltwy.js');
-require('./Checkout-BTgAlgVL.js');
+require('./Checkout-BsYZoJ0a.js');
 require('./Pagination-Dediz133.js');
 require('./Payment-D5UynU2f.js');
 var Refund = require('./Refund-BFE-2OxN.js');
@@ -14,10 +14,10 @@ var businessFormOptions = require('./business-form-options-CMII7nIK.js');
 require('./event-types-DNOUef41.js');
 var utils = require('./utils-DAyWinG2.js');
 var parts = require('./parts-9jMf1erK.js');
-var skeleton = require('./skeleton-ByLavxr1.js');
+var skeleton = require('./skeleton-CbZBGO47.js');
 require('./event-types-YOY5TKUN.js');
-var formControlErrorText = require('./form-control-error-text-DPDsFdAT.js');
-require('./index-DEMVrrsF.js');
+var formControlErrorText = require('./form-control-error-text-CVPYL0lE.js');
+require('./index-BCtVWU61.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./helpers-B5OCqlIM.js');
 require('./state-options-CIT9xdTz.js');

package/dist/cjs/bank-account-form_7.cjs.entry.js

@@ -0,0 +1,410 @@
+'use strict';
+
+var index = require('./index-D5bL1DOi.js');
+var skeleton = require('./skeleton-CbZBGO47.js');
+var configState = require('./config-state-Dz9bnWHg.js');
+var form = require('./form-CWW8IM-X.js');
+var schemaValidations = require('./schema-validations-CllkToCZ.js');
+var parts = require('./parts-9jMf1erK.js');
+var header3 = require('./header-3-BnKbOjvz.js');
+require('./event-types-YOY5TKUN.js');
+var utils = require('./utils-DAyWinG2.js');
+var stateOptions = require('./state-options-CIT9xdTz.js');
+var Payment = require('./Payment-D5UynU2f.js');
+var paymentMethodOptionUtils = require('./payment-method-option-utils-imuSE7KV.js');
+require('./index-BCtVWU61.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+require('./business-form-options-CMII7nIK.js');
+require('./Business-DCRzZf0w.js');
+require('./helpers-B5OCqlIM.js');
+require('./utils-qOon0GWm.js');
+require('./Dispute-CruQTF6_.js');
+
+const BankAccountFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (index.h("div", { class: "container-fluid p-0" },
+        index.h("div", { class: "row mb-3" },
+            index.h("div", { class: "col-12 align-content-end" },
+                index.h(skeleton.Skeleton, { height: "18px", width: "120px" }),
+                index.h(skeleton.Skeleton, { height: "36px" }))),
+        index.h("div", { class: "row" },
+            index.h("div", { class: "col-12 align-content-end" },
+                index.h(skeleton.Skeleton, { height: "18px", width: "110px" }),
+                index.h(skeleton.Skeleton, { height: "36px" })))));
+};
+
+const BankAccountForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await configState.waitForConfig();
+        this.iframeOrigin = configState.configState.iframeOrigin;
+    }
+    componentDidRender() {
+        const elements = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    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 (index.h(index.Host, { key: 'cdddf967e7142731f3b5aef31bfc3d004ce97733' }, index.h(BankAccountFormSkeleton, { key: '5eafa58bd31bbbd5ff5ca90a036fc696f7bd05fb', isReady: this.isReady }), index.h("div", { key: 'c8486e0337df9a61bd1979014f3de53eef22b071', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, index.h("div", { key: '3db2146e4d770c024efab6e777dbfa4ace26f23a', class: "row mb-3" }, index.h("iframe-input", { key: '5f9da4873119c1a1e771c7663b98e283766a37a1', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), index.h("div", { key: '7ed20c940afd5ffc4348e4102a4cfd351d8e2198', class: "row" }, index.h("iframe-input", { key: '0667de245764f1d9181682beb674c4a376447a68', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+    }
+};
+
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (index.h("div", { class: "container-fluid p-0" },
+        index.h("div", { class: "mb-3" },
+            index.h(skeleton.Skeleton, { height: "18px", width: "100px" }),
+            index.h(skeleton.Skeleton, { height: "36px" })),
+        index.h("div", { class: "row" },
+            index.h("div", { class: "col-4 align-content-end" },
+                index.h(skeleton.Skeleton, { height: "18px", width: "80px" }),
+                index.h(skeleton.Skeleton, { height: "36px" })),
+            index.h("div", { class: "col-4 align-content-end" },
+                index.h(skeleton.Skeleton, { height: "36px" })),
+            index.h("div", { class: "col-4 align-content-end" },
+                index.h(skeleton.Skeleton, { height: "18px", width: "30px" }),
+                index.h(skeleton.Skeleton, { height: "36px" })))));
+};
+
+const CardForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await configState.waitForConfig();
+        this.iframeOrigin = configState.configState.iframeOrigin;
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c43351c7ab1eb6bf413f162634f55007798bb076' }, index.h(CardFormSkeleton, { key: 'f0a29497de2270108868e892d666b552dea27a1e', isReady: this.isReady }), index.h("div", { key: '2734b111c1f2f2275435d2141445ac30482946be', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, index.h("div", { key: '036c359caaf8fc36fa6ba56bbcad5d01de1fe9c9', class: "mb-3" }, index.h("iframe-input", { key: '9baf7dc76ff18f8dee6e6cd08b93e1ba155d5cf2', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), index.h("div", { key: '080769719aa9b0d6abc9b18c46247eecd6428833', class: "d-flex align-items-start" }, index.h("div", { key: 'b3a825ed849ec0032d4a9018537f8ffab4b93ca3', class: "flex-fill me-3" }, index.h("iframe-input", { key: '5f60eb2d3b3e1303e1a0f6a3f0cd60270bb2d0b8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), index.h("div", { key: 'cfd000502f10593b59608e13f5de7911c546d030', class: "flex-fill me-3" }, index.h("iframe-input", { key: 'ab2a45264fe5890c171d03000f30720eafe354b5', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), index.h("div", { key: '637516bfd8030e56c9b1e97edfd3a635edb95f20', class: "flex-fill" }, index.h("iframe-input", { key: 'e407cc2470841fe12b1bdb84bbc8ecfb0165c72d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+};
+
+const billingFormSchema = (postalOnly) => {
+    const fullBillingForm = form.create$3({
+        name: schemaValidations.identityNameValidation.required('Enter full name'),
+        address_line1: schemaValidations.lineOneValidation.required('Enter street address'),
+        address_line2: schemaValidations.lineTwoValidation.nullable(),
+        address_city: schemaValidations.cityValidation.required('Enter city'),
+        address_state: schemaValidations.stateValidation.required('Select state'),
+        address_postal_code: schemaValidations.postalValidation.required('Enter postal code')
+    });
+    const postalForm = form.create$3({
+        name: schemaValidations.identityNameValidation.nullable(),
+        address_line1: schemaValidations.lineOneValidation.nullable(),
+        address_line2: schemaValidations.lineTwoValidation.nullable(),
+        address_city: schemaValidations.cityValidation.nullable(),
+        address_state: schemaValidations.stateValidation.nullable(),
+        address_postal_code: schemaValidations.postalValidation.required('Enter postal code')
+    });
+    return postalOnly ? postalForm : fullBillingForm;
+};
+
+const BillingForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        const postalOnly = this.isPostalOnlyMode;
+        this.formController = new form.FormController(billingFormSchema(postalOnly));
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    get isPostalOnlyMode() {
+        return this.paymentMethodType === 'card' && this.hideCardBillingForm;
+    }
+    get hideAllBillingFields() {
+        return this.paymentMethodType === 'bankAccount' && this.hideBankAccountBillingForm;
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
+        return { isValid, errors };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
+        return (index.h(index.Host, { key: 'ffffb2d8a4571222645d3c47eb1e2286b8597140' }, index.h("div", { key: '69b4f6c623cacbf32a30a9b9f23c3de427835c25', part: parts.billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && index.h(header3.Header3, { key: '96c0781a9b3dd7c5ef0b75ac8667664fee0bd95e', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), index.h("form", { key: '97380a90146a9732594f1c356fab952089280f99' }, index.h("fieldset", { key: 'fd8bbea485c10633f1d8cca62b222a8abb0d022f' }, this.legend && index.h("legend", { key: '8febee534a2d055093309e8f8f06078b0b35f4e4' }, this.legend), index.h("div", { key: '16ac8abe899cdb964d83322fa74cb00f737ab338', class: "row gy-3" }, index.h("div", { key: '866f73c45b807aeeea4e6addf4de5f2d3a1a232d', class: "col-12", hidden: this.isPostalOnlyMode }, index.h("form-control-text", { key: '1734b2aac3eb0508f9ae2e4bf41836fc5dd71cad', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: '569c0dc60b47d3e9077af401b720d7777c903bde', class: "col-12", hidden: this.isPostalOnlyMode }, index.h("form-control-text", { key: '74406a7f4efde53a41141a218d246408c4807fc8', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: 'a7f3b7f137b0dd6a92cce6999ef65f13bcff4a31', class: "col-12", hidden: this.isPostalOnlyMode }, index.h("form-control-text", { key: '8b6d28170c44af6b7701499a8a4626749d4cd36d', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), index.h("div", { key: '3a9031a0ddbea7e1020c420cdd6811ea9c86b9e4', class: "col-12", hidden: this.isPostalOnlyMode }, index.h("form-control-text", { key: '730b395bb97c349a63f669669830cbce6ba86f83', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: '7998420d30b1957a086303862f7200f20541ead2', class: "col-12", hidden: this.isPostalOnlyMode }, index.h("form-control-select", { key: 'b94b623a26891646957f25e59cb03038a989eabf', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: '7b0d6eae7eb90f4b33b3e73f920b6ea25920f809', class: "col-12", hidden: this.hideAllBillingFields }, index.h("form-control-text", { key: '703e429c7999f5cc143c5648bd9fbdc4f5bb6ee9', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: utils.numberOnlyHandler }))))))));
+    }
+};
+
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
+const NewPaymentMethod = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = index.createEvent(this, "paymentMethodOptionSelected");
+        this.saveNewPaymentMethodChecked = false;
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+    }
+    handleCheckboxChanged(event) {
+        this.saveNewPaymentMethodChecked = event.detail;
+    }
+    async fillBillingForm(fields) {
+        this.billingFormRef.fill(fields);
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a, _b;
+        if (!this.paymentMethodFormRef || !this.billingFormRef)
+            return;
+        try {
+            const { isValid, errors } = await this.validate();
+            if (!isValid || !insuranceValidation.isValid) {
+                // get propety value from first property in errors object
+                const message = `${Object.values(errors)[0] || 'Validation error'}`;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message,
+                        decline_code: undefined
+                    }
+                };
+            }
+            const tokenizeResponse = await this.tokenize();
+            if (tokenizeResponse.error) {
+                return { error: tokenizeResponse.error };
+            }
+            else {
+                const tokenizeRessponseData = tokenizeResponse.data;
+                return {
+                    token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
+                    data: tokenizeRessponseData
+                };
+            }
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async validate() {
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        const isValid = billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+        const errors = Object.assign(Object.assign({}, billingFormValidation.errors), paymentMethodFormValidation.errors);
+        return { isValid, errors };
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            let paymentMethodData;
+            if (this.saveNewPaymentMethodChecked) {
+                paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
+            }
+            else {
+                paymentMethodData = Object.assign({}, billingFormFieldValues);
+            }
+            const clientId = this.authToken;
+            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
+            return tokenizeResponse;
+        }
+        catch (error) {
+            return error;
+        }
+    }
+    showNewPaymentMethodForm() {
+        var _a;
+        const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+        return (index.h("div", { class: "mt-4 pb-4" }, index.h("hidden-input", null), paymentMethodType === 'card' ? (index.h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (index.h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), index.h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), index.h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+    }
+    get hiddenRadioInput() {
+        return !this.showAch || !this.showCard;
+    }
+    render() {
+        var _a, _b;
+        return (index.h(index.Host, { key: '137378e62a729bd2287b1bdf89cb85c702cd4e12', class: "payment-method" }, index.h("div", { key: 'dabfcf5c56169708a8968a16aeaafefb43ca3ab8', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, index.h("form-control-radio", { key: 'd098e2b8f6e1230fc16fdc2cbfd616559bcf2b89', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+    }
+};
+
+const PaymentMethodOptions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.savedPaymentMethods = [];
+        this.paymentMethodOptions = [];
+    }
+    async fillBillingForm(fields) {
+        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
+        if (newPaymentMethodElement.fillBillingForm) {
+            newPaymentMethodElement.fillBillingForm(fields);
+        }
+    }
+    connectedCallback() {
+        this.paymentMethodsChanged();
+    }
+    paymentMethodsChanged() {
+        var _a;
+        this.paymentMethodOptions = this.savedPaymentMethods
+            .map((paymentMethod) => new paymentMethodOptionUtils.PaymentMethodOption(paymentMethod))
+            .filter((paymentMethod) => {
+            // Don't saved card or bank account if they are disabled
+            return ((this.showCard || paymentMethod.type !== Payment.PaymentMethodTypes.card) &&
+                (this.showAch || paymentMethod.type !== Payment.PaymentMethodTypes.bankAccount));
+        });
+        if (this.showCard) {
+            this.paymentMethodOptions.push(new paymentMethodOptionUtils.PaymentMethodOption({ id: Payment.PaymentMethodTypes.card }));
+        }
+        if (this.showAch) {
+            this.paymentMethodOptions.push(new paymentMethodOptionUtils.PaymentMethodOption({ id: Payment.PaymentMethodTypes.bankAccount }));
+        }
+        if (!this.selectedPaymentMethodId) {
+            this.selectedPaymentMethodId = (_a = this.paymentMethodOptions[0]) === null || _a === void 0 ? void 0 : _a.id;
+        }
+    }
+    paymentMethodOptionSelected(event) {
+        this.selectedPaymentMethodId = event.detail.id;
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a;
+        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod(insuranceValidation));
+    }
+    async validate() {
+        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
+        return newPaymentMethodElement.validate();
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '2d3dc8bc98cea3efbcf342a31b6883f30099b031' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+            const newCard = paymentMethodOption.id === Payment.PaymentMethodTypes.card;
+            const newBankAccount = paymentMethodOption.id === Payment.PaymentMethodTypes.bankAccount;
+            const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
+            if (newCard || newBankAccount) {
+                return (index.h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+            else if (this.showSavedPaymentMethods) {
+                return (index.h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+        })));
+    }
+    static get watchers() { return {
+        "savedPaymentMethods": ["paymentMethodsChanged"]
+    }; }
+};
+
+const SaveNewPaymentMethod = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkboxChanged = index.createEvent(this, "checkboxChanged");
+        this.isChecked = false;
+    }
+    handleCheckboxChange(_name, value) {
+        this.isChecked = value;
+        this.checkboxChanged.emit(this.isChecked);
+    }
+    render() {
+        return (index.h("div", { key: 'e6e7a75237ec2062188bf85deadac58892663b3b', class: "mt-4 form-check" }, index.h("form-control-checkbox", { key: 'abbaeb4e9119c4d41f0a727c7a070c14b7418302', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+    }
+};
+
+const SavedPaymentMethod = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = index.createEvent(this, "paymentMethodOptionSelected");
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        var _a;
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
+        return { token: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id };
+    }
+    ;
+    render() {
+        var _a, _b, _c;
+        return (index.h(index.Host, { key: '78487e52f549547f4c89f48a238a8916d77d4f1c', class: "payment-method" }, index.h("div", { key: 'd437a5f9e79356b1177703da2b5d7f4ca98072ce', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: '0dd03b9ebae98c441c63717aba310d77e587b1c8', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${paymentMethodOptionUtils.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}` }))));
+    }
+};
+
+exports.bank_account_form = BankAccountForm;
+exports.card_form = CardForm;
+exports.justifi_billing_form = BillingForm;
+exports.justifi_new_payment_method = NewPaymentMethod;
+exports.justifi_payment_method_options = PaymentMethodOptions;
+exports.justifi_save_new_payment_method = SaveNewPaymentMethod;
+exports.justifi_saved_payment_method = SavedPaymentMethod;

package/dist/cjs/billing-form-schema-X1bkxteI.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var form = require('./form-CWW8IM-X.js');
+var schemaValidations = require('./schema-validations-CllkToCZ.js');
+
+const billingFormSchema = (postalOnly) => {
+    const fullBillingForm = form.create$3({
+        name: schemaValidations.identityNameValidation.required('Enter full name'),
+        address_line1: schemaValidations.lineOneValidation.required('Enter street address'),
+        address_line2: schemaValidations.lineTwoValidation.nullable(),
+        address_city: schemaValidations.cityValidation.required('Enter city'),
+        address_state: schemaValidations.stateValidation.required('Select state'),
+        address_postal_code: schemaValidations.postalValidation.required('Enter postal code'),
+    });
+    const postalForm = form.create$3({
+        name: schemaValidations.identityNameValidation.nullable(),
+        address_line1: schemaValidations.lineOneValidation.nullable(),
+        address_line2: schemaValidations.lineTwoValidation.nullable(),
+        address_city: schemaValidations.cityValidation.nullable(),
+        address_state: schemaValidations.stateValidation.nullable(),
+        address_postal_code: schemaValidations.postalValidation.required('Enter postal code'),
+    });
+    return postalOnly ? postalForm : fullBillingForm;
+};
+
+exports.billingFormSchema = billingFormSchema;

package/dist/cjs/{business-additional-questions-schema-e3GCIHk5.js → business-additional-questions-schema-C1Ot5vrv.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var index_esm = require('./index.esm-CVuJLXJZ.js');
-var schemaValidations = require('./schema-validations-BSeMee-o.js');
+var form = require('./form-CWW8IM-X.js');
+var schemaValidations = require('./schema-validations-CllkToCZ.js');
 
 const businessCoreInfoSchema = (allowOptionalFields) => {
-    const schema = index_esm.create$3({
+    const schema = form.create$3({
         legal_name: schemaValidations.businessNameValidation.required('Enter legal name'),
         website_url: schemaValidations.websiteUrlValidation.required('Enter business website url'),
         email: schemaValidations.emailValidation.required('Enter business email'),
@@ -15,7 +15,7 @@ const businessCoreInfoSchema = (allowOptionalFields) => {
         tax_id: schemaValidations.taxIdValidation.required('Enter valid tax ID (SSN or EIN) without dashes'),
         date_of_incorporation: schemaValidations.dateOfIncorporationValidation.required('Enter date of incorporation'),
     });
-    const easySchema = index_esm.create$3({
+    const easySchema = form.create$3({
         legal_name: schemaValidations.businessNameValidation.required('Enter legal name'),
         website_url: schemaValidations.websiteUrlValidation.nullable(),
         email: schemaValidations.emailValidation.nullable(),
@@ -30,7 +30,7 @@ const businessCoreInfoSchema = (allowOptionalFields) => {
 };
 
 const additionalQuestionsSchema = (allowOptionalFields) => {
-    const schema = index_esm.create$3({
+    const schema = form.create$3({
         business_revenue: schemaValidations.revenueValidation.required('Enter business revenue'),
         business_payment_volume: schemaValidations.paymentVolumeValidation.required('Enter business payment volume'),
         business_when_service_received: schemaValidations.whenServiceReceivedValidation.required('Select when service is received'),
@@ -39,7 +39,7 @@ const additionalQuestionsSchema = (allowOptionalFields) => {
         business_seasonal: schemaValidations.seasonalBusinessValidation.required('Select business seasonal'),
         business_other_payment_details: schemaValidations.otherPaymentDetailsValidation.nullable(),
     });
-    const easySchema = index_esm.create$3({
+    const easySchema = form.create$3({
         business_revenue: schemaValidations.revenueValidation.nullable(),
         business_payment_volume: schemaValidations.paymentVolumeValidation.nullable(),
         business_when_service_received: schemaValidations.whenServiceReceivedValidation.nullable(),

package/dist/cjs/business-details-core.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-2GwnTbNA.js');
-var utils = require('./utils-bn0fXuc-.js');
-var styledHost = require('./styled-host-IMxk64cc.js');
+var index = require('./index-D5bL1DOi.js');
+var utils = require('./utils-wkdkLmDI.js');
+var styledHost = require('./styled-host-DXNHOiqW.js');
 require('./event-types-YOY5TKUN.js');
-var skeleton = require('./skeleton-ByLavxr1.js');
+var skeleton = require('./skeleton-CbZBGO47.js');
 require('./parts-9jMf1erK.js');
 
 const BusinessDetailsLoading = () => {