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

package/dist/cjs/justifi-additional-questions-form-step-core_6.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-2GwnTbNA.js');
-var businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-CHOaeZot.js');
-var form = require('./form-CWW8IM-X.js');
+var businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-e3GCIHk5.js');
+var index_esm = require('./index.esm-CVuJLXJZ.js');
 var Business = require('./Business-DCRzZf0w.js');
 var formInputMasks = require('./form-input-masks-DgXd0f4V.js');
 var parts = require('./parts-9jMf1erK.js');
@@ -10,19 +10,18 @@ var skeleton = require('./skeleton-ByLavxr1.js');
 require('./event-types-YOY5TKUN.js');
 var businessFormOptions = require('./business-form-options-CMII7nIK.js');
 var eventTypes = require('./event-types-DNOUef41.js');
-var schemaValidations = require('./schema-validations-C0BNwMBi.js');
+var Refund = require('./Refund-BFE-2OxN.js');
+var schemaValidations = require('./schema-validations-BSeMee-o.js');
 require('./config-state-BTfJl-LU.js');
 require('./utils-qOon0GWm.js');
 var ComponentError = require('./ComponentError-CEv9ltwy.js');
-require('./Checkout-BsYZoJ0a.js');
+require('./Checkout-BTgAlgVL.js');
 require('./Pagination-Dediz133.js');
 require('./Payment-D5UynU2f.js');
-require('./Refund-BDFOEJv_.js');
-var Document = require('./Document-rXGBUaOh.js');
 require('./Dispute-CruQTF6_.js');
 var utils = require('./utils-DAyWinG2.js');
 var button = require('./button-CCZd8WSY.js');
-var businessIdentitySchema = require('./business-identity-schema-DmpEndsx.js');
+var businessIdentitySchema = require('./business-identity-schema-Diqj_WVQ.js');
 var stateOptions = require('./state-options-CIT9xdTz.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./helpers-B5OCqlIM.js');
@@ -158,7 +157,7 @@ const AdditionalQuestionsFormStepCore = class {
     }
     componentWillLoad() {
         this.getBusiness && this.getData();
-        this.formController = new form.FormController(businessAdditionalQuestionsSchema.additionalQuestionsSchema(this.allowOptionalFields));
+        this.formController = new index_esm.FormController(businessAdditionalQuestionsSchema.additionalQuestionsSchema(this.allowOptionalFields));
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
@@ -178,26 +177,53 @@ const AdditionalQuestionsFormStepCore = class {
     }; }
 };
 
+const checkExistingDocs = (documents, documentType) => {
+    return documents.some((doc) => doc.document_type === documentType);
+};
+const documentErrorText = 'Please upload either a voided check or a bank statement. Only one is required.';
 const businessBankAccountSchema = (documents, allowOptionalFields) => {
-    const schema = form.create$3({
+    const existingVoidedCheck = checkExistingDocs(documents, Refund.EntityDocumentType.voidedCheck);
+    const existingBankStatement = checkExistingDocs(documents, Refund.EntityDocumentType.bankStatement);
+    const existingDocument = existingVoidedCheck || existingBankStatement;
+    const schema = index_esm.create$3().shape({
         bank_name: schemaValidations.bankNameValidation.required('Enter bank name'),
         nickname: schemaValidations.nicknameValidation.required('Enter nickname'),
         account_owner_name: schemaValidations.identityNameValidation.required('Enter account owner name'),
         account_type: schemaValidations.accountTypeValidation.required('Select account type'),
         account_number: schemaValidations.accountNumberValidation.required('Enter account number'),
         routing_number: schemaValidations.routingNumberValidation.required('Enter routing number'),
-        voided_check: schemaValidations.voidedCheckValidation(documents, allowOptionalFields),
-        bank_statement: schemaValidations.bankStatementValidation(documents, allowOptionalFields)
-    });
-    const easySchema = form.create$3({
+        voided_check: index_esm.create$8().when('bank_statement', {
+            is: (val) => {
+                return !val && !existingDocument;
+            },
+            then: (schema) => {
+                return schema.required(documentErrorText);
+            },
+            otherwise: (schema) => {
+                return schema.notRequired();
+            }
+        }),
+        bank_statement: index_esm.create$8().when('voided_check', {
+            is: (val) => {
+                return !val && !existingDocument;
+            },
+            then: (schema) => {
+                return schema.required(documentErrorText);
+            },
+            otherwise: (schema) => {
+                return schema.notRequired();
+            }
+        }),
+    }, [['voided_check', 'bank_statement']]);
+    const easySchema = index_esm.create$3({
         bank_name: schemaValidations.bankNameValidation.nullable(),
         nickname: schemaValidations.nicknameValidation.nullable(),
         account_owner_name: schemaValidations.identityNameValidation.nullable(),
         account_type: schemaValidations.accountTypeValidation.nullable(),
         account_number: schemaValidations.accountNumberValidation.nullable(),
         routing_number: schemaValidations.routingNumberValidation.nullable(),
-        voided_check: schemaValidations.voidedCheckValidation(documents, allowOptionalFields),
-        bank_statement: schemaValidations.bankStatementValidation(documents, allowOptionalFields)
+        voided_check: index_esm.create$8().nullable(),
+        bank_statement: index_esm.create$8().nullable(),
     });
     return allowOptionalFields ? easySchema : schema;
 };
@@ -211,10 +237,10 @@ const BusinessBankAccountFormStepCore = class {
         this.errors = {};
         this.bankAccount = {};
         this.existingDocuments = [];
-        this.documentData = new Document.EntityDocumentStorage();
+        this.documentData = new Refund.EntityDocumentStorage();
         this.isLoading = false;
         this.initializeFormController = () => {
-            this.formController = new form.FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
+            this.formController = new index_esm.FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
             this.formController.setInitialValues(Object.assign({}, this.bankAccount));
             this.formController.errors.subscribe(errors => {
                 this.errors = Object.assign({}, errors);
@@ -226,7 +252,7 @@ const BusinessBankAccountFormStepCore = class {
         this.storeFiles = (e) => {
             const fileList = Array.from(e.detail.fileList);
             const docType = e.detail.document_type;
-            const documentList = fileList.map(file => new Document.EntityDocument({ file, document_type: docType }, this.businessId));
+            const documentList = fileList.map(file => new Refund.EntityDocument({ file, document_type: docType }, this.businessId));
             this.documentData[docType] = documentList;
         };
         this.getData = () => {
@@ -330,7 +356,7 @@ const BusinessBankAccountFormStepCore = class {
     }
     componentWillLoad() {
         this.getBusiness && this.getData();
-        this.formController = new form.FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
+        this.formController = new index_esm.FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
@@ -420,7 +446,7 @@ const BusinessBankAccountFormStepCore = class {
         if (this.isLoading) {
             return index.h(PaymentProvisioningLoading, null);
         }
-        return (index.h("form", null, index.h("fieldset", { class: "mb-4" }, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Bank Account Info"), index.h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), index.h("hr", { class: "mt-2" }), index.h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount })), index.h("fieldset", { class: "mt-4" }, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Document Uploads"), index.h("form-control-tooltip", { helpText: "These documents are required for underwriting purposes. Various file formats such as PDF, DOC, DOCX, JPEG, and others are accepted. Multiple files can be uploaded for each document category." })), index.h("hr", { class: "mt-2" }), index.h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), index.h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
+        return (index.h("form", null, index.h("fieldset", { class: "mb-4" }, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Bank Account Info"), index.h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), index.h("hr", { class: "mt-2" }), index.h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount })), index.h("fieldset", { class: "mt-4" }, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Document Uploads"), index.h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), index.h("hr", { class: "mt-2" }), index.h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), index.h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
     }
     static get watchers() { return {
         "isLoading": ["watchHandler"]
@@ -494,7 +520,7 @@ const BusinessCoreInfoFormStepCore = class {
     }
     componentWillLoad() {
         this.getBusiness && this.getData();
-        this.formController = new form.FormController(businessAdditionalQuestionsSchema.businessCoreInfoSchema(this.allowOptionalFields));
+        this.formController = new index_esm.FormController(businessAdditionalQuestionsSchema.businessCoreInfoSchema(this.allowOptionalFields));
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
@@ -697,7 +723,7 @@ const BusinessRepresentativeFormStepCore = class {
     }
     componentWillLoad() {
         this.getBusiness && this.getData();
-        this.formController = new form.FormController(businessIdentitySchema.identitySchema('representative', this.allowOptionalFields));
+        this.formController = new index_esm.FormController(businessIdentitySchema.identitySchema('representative', this.allowOptionalFields));
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
@@ -779,7 +805,7 @@ const LegalAddressFormStepCore = class {
     }
     componentWillLoad() {
         this.getBusiness && this.getData();
-        this.formController = new form.FormController(businessIdentitySchema.addressSchema(this.allowOptionalFields));
+        this.formController = new index_esm.FormController(businessIdentitySchema.addressSchema(this.allowOptionalFields));
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {

package/dist/cjs/justifi-additional-questions-form-step_9.cjs.entry.js

@@ -3,17 +3,16 @@
 var index = require('./index-2GwnTbNA.js');
 var ComponentError = require('./ComponentError-CEv9ltwy.js');
 var paymentProvisioningActions = require('./payment-provisioning-actions-SNMCdsyF.js');
-var business_service = require('./business.service-ev-3rHag.js');
+var business_service = require('./business.service-DNoCHqtI.js');
 require('./config-state-BTfJl-LU.js');
 require('./utils-qOon0GWm.js');
-require('./Checkout-BsYZoJ0a.js');
+require('./Checkout-BTgAlgVL.js');
 require('./Pagination-Dediz133.js');
 require('./Payment-D5UynU2f.js');
-require('./Refund-BDFOEJv_.js');
-require('./Document-rXGBUaOh.js');
+require('./Refund-BFE-2OxN.js');
 require('./Business-DCRzZf0w.js');
 require('./Dispute-CruQTF6_.js');
-var form = require('./form-CWW8IM-X.js');
+var index_esm = require('./index.esm-CVuJLXJZ.js');
 var Api = require('./Api-BTdkb3Zh.js');
 var parts = require('./parts-9jMf1erK.js');
 var eventTypes = require('./event-types-DNOUef41.js');
@@ -249,13 +248,13 @@ const BusinessRepresentativeFormStep = class {
 };
 
 const businessTermsConditionsSchema = (allowOptionalFields) => {
-    const schema = form.create$3({
-        accepted: form.create$7()
+    const schema = index_esm.create$3({
+        accepted: index_esm.create$7()
             .oneOf([true], 'You must agree to the terms and conditions to continue')
             .required('You must agree to the terms and conditions to continue')
     });
-    const easySchema = form.create$3({
-        accepted: form.create$7().nullable()
+    const easySchema = index_esm.create$3({
+        accepted: index_esm.create$7().nullable()
     });
     return allowOptionalFields ? easySchema : schema;
 };
@@ -328,7 +327,7 @@ const BusinessTermsConditionsFormStep = class {
     }
     async componentWillLoad() {
         this.api = Api.Api();
-        this.formController = new form.FormController(businessTermsConditionsSchema(this.allowOptionalFields));
+        this.formController = new index_esm.FormController(businessTermsConditionsSchema(this.allowOptionalFields));
         if (this.businessId && this.authToken) {
             this.fetchData();
         }

package/dist/cjs/justifi-additional-statement_8.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var index = require('./index-2GwnTbNA.js');
-var form = require('./form-CWW8IM-X.js');
+var index_esm = require('./index.esm-CVuJLXJZ.js');
 var parts = require('./parts-9jMf1erK.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 
-const AdditionalStatementSchema = form.create$3({
-    additional_statement: form.create$6().nullable(),
+const AdditionalStatementSchema = index_esm.create$3({
+    additional_statement: index_esm.create$6().nullable(),
 });
 
 var DisputeResponseFormStep;
@@ -94,7 +94,7 @@ const AdditionalStatement = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(AdditionalStatementSchema);
+        this.form = new index_esm.FormController(AdditionalStatementSchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {
@@ -107,9 +107,9 @@ const AdditionalStatement = class {
     }
 };
 
-const CancellationPolicySchema = form.create$3({
-    cancellation_policy_disclosure: form.create$6().nullable(),
-    cancellation_rebuttal: form.create$6().nullable(),
+const CancellationPolicySchema = index_esm.create$3({
+    cancellation_policy_disclosure: index_esm.create$6().nullable(),
+    cancellation_rebuttal: index_esm.create$6().nullable(),
 });
 
 const CancellationPolicy = class {
@@ -128,7 +128,7 @@ const CancellationPolicy = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(CancellationPolicySchema);
+        this.form = new index_esm.FormController(CancellationPolicySchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {
@@ -141,10 +141,10 @@ const CancellationPolicy = class {
     }
 };
 
-const CustomerDetailsSchema = form.create$3({
-    customer_name: form.create$6().nullable(),
-    customer_email_address: form.create$6().nullable(),
-    customer_billing_address: form.create$6().nullable(),
+const CustomerDetailsSchema = index_esm.create$3({
+    customer_name: index_esm.create$6().nullable(),
+    customer_email_address: index_esm.create$6().nullable(),
+    customer_billing_address: index_esm.create$6().nullable(),
 });
 
 const CustomerDetails = class {
@@ -163,7 +163,7 @@ const CustomerDetails = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(CustomerDetailsSchema);
+        this.form = new index_esm.FormController(CustomerDetailsSchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {
@@ -176,9 +176,9 @@ const CustomerDetails = class {
     }
 };
 
-const DuplicateChargeSchema = form.create$3({
-    duplicate_charge_original_payment_id: form.create$6().nullable(),
-    duplicate_charge_explanation: form.create$6().nullable(),
+const DuplicateChargeSchema = index_esm.create$3({
+    duplicate_charge_original_payment_id: index_esm.create$6().nullable(),
+    duplicate_charge_explanation: index_esm.create$6().nullable(),
 });
 
 const DuplicateCharge = class {
@@ -197,7 +197,7 @@ const DuplicateCharge = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(DuplicateChargeSchema);
+        this.form = new index_esm.FormController(DuplicateChargeSchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {
@@ -210,8 +210,8 @@ const DuplicateCharge = class {
     }
 };
 
-const ElectronicEvidenceSchema = form.create$3({
-    customer_purchase_ip_address: form.create$6().nullable(),
+const ElectronicEvidenceSchema = index_esm.create$3({
+    customer_purchase_ip_address: index_esm.create$6().nullable(),
 });
 
 const ElectronicEvidence = class {
@@ -230,7 +230,7 @@ const ElectronicEvidence = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(ElectronicEvidenceSchema);
+        this.form = new index_esm.FormController(ElectronicEvidenceSchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {
@@ -243,9 +243,9 @@ const ElectronicEvidence = class {
     }
 };
 
-const ProductOrServiceSchema = form.create$3({
-    product_description: form.create$6().nullable(),
-    service_date: form.create$6().nullable(),
+const ProductOrServiceSchema = index_esm.create$3({
+    product_description: index_esm.create$6().nullable(),
+    service_date: index_esm.create$6().nullable(),
 });
 
 const ProductOrService = class {
@@ -264,7 +264,7 @@ const ProductOrService = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(ProductOrServiceSchema);
+        this.form = new index_esm.FormController(ProductOrServiceSchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {
@@ -277,9 +277,9 @@ const ProductOrService = class {
     }
 };
 
-const RefundPolicySchema = form.create$3({
-    refund_policy_disclosure: form.create$6().nullable(),
-    refund_refusal_explanation: form.create$6().nullable(),
+const RefundPolicySchema = index_esm.create$3({
+    refund_policy_disclosure: index_esm.create$6().nullable(),
+    refund_refusal_explanation: index_esm.create$6().nullable(),
 });
 
 const RefundPolicy = class {
@@ -298,7 +298,7 @@ const RefundPolicy = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(RefundPolicySchema);
+        this.form = new index_esm.FormController(RefundPolicySchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {
@@ -311,11 +311,11 @@ const RefundPolicy = class {
     }
 };
 
-const ShippingDetailsSchema = form.create$3({
-    shipping_carrier: form.create$6().nullable(),
-    shipping_tracking_number: form.create$6().nullable(),
-    shipping_date: form.create$6().nullable(),
-    shipping_address: form.create$6().nullable(),
+const ShippingDetailsSchema = index_esm.create$3({
+    shipping_carrier: index_esm.create$6().nullable(),
+    shipping_tracking_number: index_esm.create$6().nullable(),
+    shipping_date: index_esm.create$6().nullable(),
+    shipping_address: index_esm.create$6().nullable(),
 });
 
 const ShippingDetails = class {
@@ -335,7 +335,7 @@ const ShippingDetails = class {
     }
     ;
     componentWillLoad() {
-        this.form = new form.FormController(ShippingDetailsSchema);
+        this.form = new index_esm.FormController(ShippingDetailsSchema);
     }
     componentDidLoad() {
         this.form.errors.subscribe(errors => {

package/dist/cjs/justifi-bank-account-form_4.cjs.entry.js

@@ -0,0 +1,234 @@
+'use strict';
+
+var index = require('./index-2GwnTbNA.js');
+var styledHost = require('./styled-host-IMxk64cc.js');
+require('./event-types-YOY5TKUN.js');
+var skeleton = require('./skeleton-ByLavxr1.js');
+var checkPkgVersion = require('./check-pkg-version-CgQ8N_ta.js');
+var index_esm = require('./index.esm-CVuJLXJZ.js');
+var schemaValidations = require('./schema-validations-BSeMee-o.js');
+var parts = require('./parts-9jMf1erK.js');
+var header3 = require('./header-3-DxUQJ7TT.js');
+require('./package-wSbEFwqE.js');
+require('./Api-BTdkb3Zh.js');
+require('./config-state-BTfJl-LU.js');
+require('./index-DEMVrrsF.js');
+require('./utils-qOon0GWm.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+require('./ComponentError-CEv9ltwy.js');
+require('./Checkout-BTgAlgVL.js');
+require('./Pagination-Dediz133.js');
+require('./Payment-D5UynU2f.js');
+require('./Dispute-CruQTF6_.js');
+require('./Refund-BFE-2OxN.js');
+require('./Business-DCRzZf0w.js');
+require('./helpers-B5OCqlIM.js');
+require('./state-options-CIT9xdTz.js');
+require('./business-form-options-CMII7nIK.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.iframeOrigin = "https://components.justifi.ai";
+        this.isReady = false;
+    }
+    componentWillLoad() {
+        checkPkgVersion.checkPkgVersion();
+        this.analytics = new checkPkgVersion.JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (index.h(styledHost.StyledHost, { key: 'e0a71dff66a2786c0f182595758c2fc7a36c940e' }, index.h(BankAccountFormSkeleton, { key: 'b8e530e282ff062f53e196782c49855aed5084d3', isReady: this.isReady }), index.h("hidden-input", { key: '9b877adccc33cfa1151c6fcc0a847fddd7459875' }), index.h("div", { key: '6fc462b4aea6d7a3d469eda6c077c09202ac5066', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, index.h("div", { key: 'bad1c793767232d22139f06e91c63fecb75d5e6b', class: "row mb-3" }, index.h("iframe-input", { key: '2e015f0d5e526f309d63b122f0ea900224b0eb91', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), index.h("div", { key: '7f2c7e8ca7675c3f936702f605a26f4698addf65', class: "row" }, index.h("iframe-input", { key: '21eb81b7e69f3e1b376b38e7d533992d977cc2c7', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+    }
+};
+
+const billingFormSchema = (postalOnly) => {
+    const fullBillingForm = index_esm.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 = index_esm.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 index_esm.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 showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
+        return (index.h("div", { key: 'e1834cb4638e0b5ea99c55e7a2f73542d2e5ea8d', part: parts.billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && index.h(header3.Header3, { key: '9936d16177d2c83219872c44b9ca91c264ae7052', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && index.h("legend", { key: 'c467223d7571122ea5c17885eed658c6cd6faf36' }, this.legend), this.isPostalOnlyMode ? (index.h("justifi-postal-code-form", null)) : (index.h("justifi-billing-information-form", null))));
+    }
+};
+
+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 JustifiCardForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.iframeOrigin = "https://components.justifi.ai";
+        this.isReady = false;
+    }
+    componentWillLoad() {
+        checkPkgVersion.checkPkgVersion();
+        this.analytics = new checkPkgVersion.JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (index.h(styledHost.StyledHost, { key: '44aa8e7da60f3dc8408e53f1ca4bf1ec98e838be' }, index.h(CardFormSkeleton, { key: 'eaea67379e10386d215284de04cd140ac0af0274', isReady: this.isReady }), index.h("hidden-input", { key: '6bdd3a8aef52e4d2bb7e5a7855578af5e491d04f' }), index.h("div", { key: '8e271c01ecd6c178f44f9cd9d331d6fc6240bce4', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, index.h("div", { key: '568ac8e93eac648b43d047b2ba149230f7bd2e2f', class: "mb-3" }, index.h("iframe-input", { key: '5dde288003664ba6fb768a9e5837e4069e749ae5', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), index.h("div", { key: '57d7153ff9f21fbbfe2fbf41d664fbbc05fd72db', class: "row" }, index.h("div", { key: 'a6f2dcd5a98428f2af8773c7ebf76ea3c232a2a9', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'ac7ef13f9c9e788a065f6fe3485f8aeb20a3f6e8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), index.h("div", { key: '36c7531f0f7f4a5c98eb36f1c3c395d392567041', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '2c04a8aa66b73e1e485dd124b27ebf8d9da043d8', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), index.h("div", { key: 'e413f4a9232c6c8f21fd9738d6b641d2ff9c547f', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'bf1204c99ec33e349fe07a741a4ba80d20def1f8', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+};
+
+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: 'b196a8d34fb4afe1293f4ff9f6eea8bb3ed4c1a6', class: "mt-4 form-check" }, index.h("form-control-checkbox", { key: '1f35cb80578373e1f77f2a95f08310f0830e1c90', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+    }
+};
+
+exports.justifi_bank_account_form = BankAccountForm;
+exports.justifi_billing_form = BillingForm;
+exports.justifi_card_form = JustifiCardForm;
+exports.justifi_save_new_payment_method = SaveNewPaymentMethod;