@justifi/webcomponents 5.0.0-rc-2 → 5.1.0

package/dist/cjs/{Api-f5280a80.js → Api-b0e4be29.js}

@@ -1,5 +1,16 @@
 'use strict';
 
+const config = {
+    proxyApiOrigin: "https://wc-proxy.justifi.ai",
+    proxyAuthToken: 'eyJraWQiOiJqdXN0aWZpLWUyNDgyMmU3ODE1MmEzZjRkMjU1IiwidHlwIjoiSldUIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2F1dGguanVzdGlmaS5haS8iLCJhenAiOiJvYXNfMmlsWHBqOHQ2WVlEQ0xWU0FiVFczMiIsInN1YiI6Im9hc18yaWxYcGo4dDZZWURDTFZTQWJUVzMyQHNlc3Npb25zIiwiYXVkIjoiaHR0cHM6Ly9hcGkuanVzdGlmaS5haS92MSIsImd0eSI6ImNsaWVudC1jcmVkZW50aWFscyIsInBlcm1pc3Npb25zIjpbeyJyb2xlIjoicmVhZDphY2NvdW50IiwicmVzb3VyY2VfaWQiOiJhY2NfNUV0OWlYclNTQVpSMktTb3VRR0FXaSJ9LHsicm9sZSI6InJlYWQ6YnVzaW5lc3MiLCJyZXNvdXJjZV9pZCI6ImJpel8zYmg2OWJxMXJrM2RtWE5vQUtWb251In1dLCJleHAiOjE3MTE1NTk0MTQsImlhdCI6MTcwMzc4MzQxNCwicGxhdGZvcm1fYWNjb3VudF9pZCI6ImFjY18zcmVOYjRhTll5MmlXRFpRVmN6bXg0In0.oPOoDYxzrnpE8PRUaz-FCU4KqnSuNbFTeDkl3AtMscjUkIctP1OIFh-ZGBjbH5eVH5noXCbaiin0j92dS7jx4gLpxuYT2Q8gpZbuIsT7fa58elvGeRkUUJ-AC5ueZxlv90yPWMm0OIbyrV7XZhuwYyKbV-ZczEbl2JpvBMe40CM-LdClQV66d_-Kw9a23SabBVfYgP5V-5OsagOIESvzZoO-27tGlNkV2a-hxqddDCOZv0HvRYAtp5S7EQrmRdEBu5gCNbf1eRFG424hxZUFVr2LdetYuKQLxJjDdUjf86ZwEUecrEaDSupiN1VC3CitdOwBVf6-R_N0VpN4VLVD5g',
+    exampleAccountId: 'acc_5Et9iXrSSAZR2KSouQGAWi',
+    exampleBusinessId: 'biz_3bh69bq1rk3dmXNoAKVonu',
+    examplePaymentId: 'py_1NNeEnf4FbelxDCQN2RHcE',
+    examplePayoutId: 'po_17745yESnHyEgWNeunmhmR',
+    privateApiOrigin: '',
+    privateAuthToken: '',
+};
+
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -116,3 +127,4 @@ function handleError(requestUrl) {
 }
 
 exports.Api = Api;
+exports.config = config;

package/dist/cjs/{Checkout-a528241d.js → Checkout-2ff4f9c8.js}

@@ -1,5 +1,7 @@
 'use strict';
 
+const utils = require('./utils-5fb95d31.js');
+
 class Completion {
     constructor(data) {
         this.payment_mode = ICheckoutPaymentMode[data.payment_mode];
@@ -66,6 +68,10 @@ class Checkout {
         return paymentMode;
     }
     ;
+    formattedPaymentAmount(amount) {
+        return utils.formatCurrency(amount, this.payment_currency);
+    }
+    ;
 }
 var ICheckoutPaymentMode;
 (function (ICheckoutPaymentMode) {

package/dist/cjs/{Payment-d074b246.js → Payment-84817e2d.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+const utils = require('./utils-5fb95d31.js');
 const Dispute = require('./Dispute-eb6bad54.js');
 
 var CaptureStrategy;
@@ -32,6 +33,11 @@ var PaymentStatuses;
     PaymentStatuses["fully_refunded"] = "fully_refunded";
     PaymentStatuses["partially_refunded"] = "partially_refunded";
 })(PaymentStatuses || (PaymentStatuses = {}));
+var CurrencyTypes;
+(function (CurrencyTypes) {
+    CurrencyTypes["usd"] = "usd";
+    CurrencyTypes["cad"] = "cad";
+})(CurrencyTypes || (CurrencyTypes = {}));
 class PaymentMethod {
     constructor(paymentMethod) {
         this.card = paymentMethod.card ? new Card(paymentMethod.card) : undefined;
@@ -84,6 +90,7 @@ class Payment {
     constructor(payment) {
         this.id = payment.id;
         this.account_id = payment.account_id;
+        this.currency = payment.currency;
         this.amount = payment.amount;
         this.amount_disputed = payment.amount_disputed;
         this.amount_refundable = payment.amount_refundable;
@@ -91,7 +98,6 @@ class Payment {
         this.balance = payment.balance;
         this.captured = payment.captured;
         this.capture_strategy = payment.capture_strategy;
-        this.currency = payment.currency;
         this.description = payment.description;
         this.disputed = payment.disputed;
         this.disputes = payment.disputes;
@@ -136,6 +142,9 @@ class Payment {
     get last_four_digits() {
         return this.payment_method.lastFourDigits;
     }
+    formattedPaymentAmount(amount) {
+        return utils.formatCurrency(amount, this.currency);
+    }
 }
 
 exports.Payment = Payment;

package/dist/cjs/{SubAccount-fda5ec5b.js → SubAccount-f236913b.js}

@@ -1,5 +1,7 @@
 'use strict';
 
+const utils = require('./utils-5fb95d31.js');
+
 var PayoutStatuses;
 (function (PayoutStatuses) {
     PayoutStatuses["paid"] = "paid";
@@ -22,9 +24,9 @@ class Payout {
     constructor(payout) {
         this.id = payout.id;
         this.account_id = payout.account_id;
+        this.currency = payout.currency;
         this.amount = payout.amount;
         this.bank_account = payout.bank_account;
-        this.currency = payout.currency;
         this.delivery_method = payout.delivery_method || 'standard';
         this.description = payout.description;
         this.deposits_at = payout.deposits_at;
@@ -43,6 +45,9 @@ class Payout {
     get csv() {
         return this.id;
     }
+    formattedPaymentAmount(amount) {
+        return utils.formatCurrency(amount, this.currency);
+    }
 }
 
 var TerminalStatuses;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
-const utils$1 = require('./utils-fc17191b.js');
-const utils = require('./utils-a21b7453.js');
-require('./parts-811ddb9c.js');
+const utils$1 = require('./utils-a05a8bf6.js');
+const utils = require('./utils-5fb95d31.js');
+require('./parts-addf2176.js');
 
 const AdditionalQuestionsDetails = class {
     constructor(hostRef) {

package/dist/cjs/badge-fbf58cb9.js

@@ -0,0 +1,44 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-addf2176.js');
+
+exports.BadgeVariant = void 0;
+(function (BadgeVariant) {
+    BadgeVariant["PRIMARY"] = "primary";
+    BadgeVariant["SECONDARY"] = "secondary";
+    BadgeVariant["SUCCESS"] = "success";
+    BadgeVariant["DANGER"] = "danger";
+    BadgeVariant["WARNING"] = "warning";
+    BadgeVariant["INFO"] = "info";
+    BadgeVariant["LIGHT"] = "light";
+    BadgeVariant["DARK"] = "dark";
+})(exports.BadgeVariant || (exports.BadgeVariant = {}));
+const Badge = (props) => {
+    const { variant, text, title } = props;
+    const cssClasses = {
+        default: 'badge',
+        primary: 'badge bg-primary',
+        secondary: 'badge bg-secondary',
+        success: 'badge bg-success',
+        danger: 'badge bg-danger',
+        warning: 'badge bg-warning',
+        info: 'badge bg-info',
+        light: 'badge bg-light',
+        dark: 'badge bg-dark',
+    };
+    const badgeVariant = {
+        default: parts.badge,
+        primary: parts.badgePrimary,
+        secondary: parts.badgeSecondary,
+        success: parts.badgeSuccess,
+        danger: parts.badgeDanger,
+        warning: parts.badgeWarning,
+        info: parts.badgeInfo,
+        light: parts.badgeLight,
+        dark: parts.badgeDark,
+    };
+    return (index.h("span", { class: cssClasses[variant] || cssClasses.default, part: badgeVariant[variant] || badgeVariant.default, title: title }, text));
+};
+
+exports.Badge = Badge;

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

@@ -4,19 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
 const iframeInputStylesState = require('./iframe-input-styles-state-d0de0b24.js');
-const parts = require('./parts-811ddb9c.js');
-const index_esm = require('./index.esm-a397536a.js');
-const schemaValidations = require('./schema-validations-0be8068a.js');
-const stateOptions = require('./state-options-4fbcb48a.js');
-const utils = require('./utils-bc03ca40.js');
-const config = require('./config-b190e93e.js');
-const header3 = require('./header-3-75e50713.js');
-const Payment = require('./Payment-d074b246.js');
-const utils$1 = require('./utils-a21b7453.js');
+const parts = require('./parts-addf2176.js');
+const header3 = require('./header-3-ce77b96b.js');
+const Payment = require('./Payment-84817e2d.js');
+const utils = require('./utils-5fb95d31.js');
 require('./index-d2d0b181.js');
-require('./business-form-options-4bcb8943.js');
-require('./Business-cfd6a2dd.js');
-require('./helpers-602962eb.js');
 require('./Dispute-eb6bad54.js');
 
 const BankAccountForm = class {
@@ -32,7 +24,7 @@ const BankAccountForm = class {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (index.h(index.Host, { key: 'd0f0426565fedc6697eb46e6bc8d03d31eee9c37' }, index.h("div", { key: '6e792d5cba9421d7d106805d0e0e070ef5b116f9', class: "container-fluid p-0" }, index.h("div", { key: '89def9b854a7dc9a2e2fbb62d70bc6eaccfa6b0f', class: "row mb-3" }, index.h("iframe-input", { key: '2c0392ed840edb2364922c0d523f509ea84b3cd3', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/accountNumber` })), index.h("div", { key: '6dbe7911ab8693a4850a60e2d86f4539382a341c', class: "row" }, index.h("iframe-input", { key: '042153db083d7fa8f4e6d2c5704054fbcf6c1af1', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/routingNumber` })))));
+        return (index.h(index.Host, { key: '1fb5075ddb4ee824fa3fbb12079ae0b978ef4e45' }, index.h("div", { key: '5384dda318b8e809cbee84f5e7796b68f19b780c', class: "container-fluid p-0" }, index.h("div", { key: '8e9a05728736960ac0e7f0d33a7e46d37b6a04fa', class: "row mb-3" }, index.h("iframe-input", { key: '46f8a193ed56ea621aac1399e8d7b22a286fd857', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/accountNumber` })), index.h("div", { key: '18db1dd7882e9c3d395f4c72833d96a8f7e1176d', class: "row" }, index.h("iframe-input", { key: 'ea1545703839166cb3352b789bac329f0d0b2918', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/routingNumber` })))));
     }
 };
 
@@ -51,7 +43,7 @@ const CardForm = class {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (index.h(index.Host, { key: 'd667f365a95a2251fadffce158033ca8fcbc5723', class: "container-fluid p-0" }, index.h("div", { key: '43d8e15de893154c96b49ea1917046120daa8b2c', class: "mb-3" }, index.h("iframe-input", { key: 'c342a50a3194511edfbe6c1f1033bf47b743ddd6', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/cardNumber` })), index.h("div", { key: '2fa70e85071ec6fe4525039de6215026795f71f4', class: "row" }, index.h("div", { key: 'e7dba59f040258e556664ccf84549edda8a1dd8d', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '0c2c63ee318b0fc61ff704ffe02160aee252d281', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${"https://components.justifi.ai/v2"}/expirationMonth` })), index.h("div", { key: 'e211c9bc9cb15ea9571af7d965fcb1d6e4c5669d', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'd783cb0d28f1d08826e773efc14c2aa871905a83', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${"https://components.justifi.ai/v2"}/expirationYear` })), index.h("div", { key: '83af611f578e7db1984713047708e725c9c1c7b5', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '1f53fce0b7856b8591f6454a549e123fa408be5f', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${"https://components.justifi.ai/v2"}/CVV` })))));
+        return (index.h(index.Host, { key: 'cc49f963960cc00ea499484ce257d0b902837c1e', class: "container-fluid p-0" }, index.h("div", { key: '873ee92597101d80c5c05f50a1428402061ed27f', class: "mb-3" }, index.h("iframe-input", { key: '4987b5fd997954e30450b5f0b5089c91523afe4f', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/cardNumber` })), index.h("div", { key: '7a50424f955163f9c213d81057338c915e046a41', class: "row" }, index.h("div", { key: 'ab117b543d5ba1b1ca5db6030480048fc266250b', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'e5b0f96d4be64fd07ac2417b23d8a3913d67145a', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${"https://components.justifi.ai/v2"}/expirationMonth` })), index.h("div", { key: 'c66377e9ae6b0f1a750933ca628edcb62b227e34', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '2fb5328b3b8b82d0bd2b0ad2272cd73b133cb548', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${"https://components.justifi.ai/v2"}/expirationYear` })), index.h("div", { key: 'add1b6be0df27a95b5c244a7bb2320f6f40ec930', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '3c0341c1111b1980d9868d314221857e7ff07996', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${"https://components.justifi.ai/v2"}/CVV` })))));
     }
 };
 
@@ -128,52 +120,54 @@ const HiddenInput = class {
         return parts.input;
     }
     render() {
-        return (index.h(index.Host, { key: '61734f69c30d37c98e3896c8407225dbe49fe3a2' }, index.h("input", { key: 'eda00a901e028a09ccd793b1fbc4136a048a0aad', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (index.h(index.Host, { key: 'ae03d3be50b34d6c98c8e1bd619f1d97049099a7' }, index.h("input", { key: '347725ba26e6aab3c0da4f9e3da5b2e4ec9f0e37', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
 };
 
-const BillingFormSchema = 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 BillingForm = class {
+const BillingFormWrapper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
         this.legend = undefined;
-        this.formController = undefined;
-        this.billingInfo = undefined;
-        this.errors = {};
+        this.hideCardBillingForm = undefined;
+        this.paymentMethodType = undefined;
     }
-    componentWillLoad() {
-        this.formController = new index_esm.FormController(BillingFormSchema);
+    get hideFullBillingForm() {
+        return this.hideCardBillingForm && this.paymentMethodType === 'card';
     }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
+    async fill(fields) {
+        if (this.hideFullBillingForm) {
+            this.postalFormRef.fill(fields);
+        }
+        else {
+            this.billingFormRef.fill(fields);
+        }
     }
     async getValues() {
-        return this.formController.values.getValue();
-    }
-    async fill(fields) {
-        this.formController.setInitialValues(fields);
+        if (this.hideFullBillingForm) {
+            return this.postalFormRef.getValues();
+        }
+        else {
+            return this.billingFormRef.getValues();
+        }
     }
     async validate() {
-        let isValid = await this.formController.validate();
-        return { isValid: isValid };
+        if (this.hideFullBillingForm) {
+            return this.postalFormRef.validate();
+        }
+        else {
+            return this.billingFormRef.validate();
+        }
+    }
+    get renderedForm() {
+        if (this.hideFullBillingForm) {
+            return (index.h("postal-form", { ref: (el) => (this.postalFormRef = el) }));
+        }
+        else {
+            return (index.h("div", null, index.h(header3.Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), index.h("billing-form", { ref: (el) => (this.billingFormRef = el) })));
+        }
     }
     render() {
-        const billingFormDefaultValue = this.formController.getInitialValues();
-        return (index.h(index.Host, { key: 'b3bb548839b39a87ad330b9048426baff317cae0' }, index.h("form", { key: '32e999825e5094e8e5399d46f67b67186f18d7b2' }, index.h("fieldset", { key: 'c8f13e2d392c45804bb51907a21ff80cb1148fd3' }, this.legend && index.h("legend", { key: 'c4117087a3391f8c28815069d832d6133459b250' }, this.legend), index.h("div", { key: '61d9de519f93d42bab36670108a6b923e30cff7f', class: "row gy-3" }, index.h("div", { key: '4753e297cbab92db6f073e9679ea9f3e9dacf432', class: "col-12" }, index.h("form-control-text", { key: '1f366def4cd8449cc242eb3bd71952a1548def08', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'c7efc6968d6f776be84ac16b56a785965a81501b', class: "col-12" }, index.h("form-control-text", { key: '789ca132aabfe42381ce55ec343494b9ac766e73', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: 'f750e3800a361e78c58a31091b8d07437fe7fdcf', class: "col-12" }, index.h("form-control-text", { key: '66e06c53dec8b254bf5f7b1d4029c17523f2ceb7', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), index.h("div", { key: '9868c2a9bcbed8c65ac8ca8d89ea2102fd0dd1c6', class: "col-12" }, index.h("form-control-text", { key: 'a637775b91a89fa32c54c97e6a97ec18b2e69024', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: '274656a1a879790c99a684da3aa6070f473e2d0b', class: "col-12" }, index.h("form-control-select", { key: '5fca9ff62f2e2f26fc936474133dbdf24183e86d', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: 'e24b2e9961e1a464a1d99fa4982814e7d43c5a79', class: "col-12" }, index.h("form-control-text", { key: '1992d68c496b1331a0efbbbeb03153f9155a77d3', 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 })))))));
+        return (index.h(index.Host, { key: '585ffd5fea9537675f0df77e1e4697a53dacf56f' }, index.h("div", { key: 'fb7cf4c2f763d64512b6f905aa29aded8060374c', part: parts.billingForm }, this.renderedForm)));
     }
 };
 
@@ -189,23 +183,23 @@ const NewPaymentMethod = class {
             e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
-        this.iframeOrigin = config.config.iframeOrigin;
         this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodOption = undefined;
         this.paymentMethodGroupId = undefined;
         this.isSelected = undefined;
+        this.hideCardBillingForm = undefined;
         this.saveNewPaymentMethodChecked = false;
     }
     handleCheckboxChanged(event) {
         this.saveNewPaymentMethodChecked = event.detail;
     }
     async fillBillingForm(fields) {
-        this.billingFormRef.fill(fields);
+        this.billingFormWrapperRef.fill(fields);
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a, _b;
-        if (!this.paymentMethodFormRef || !this.billingFormRef)
+        if (!this.paymentMethodFormRef || !this.billingFormWrapperRef)
             return;
         try {
             const isValid = await this.validate();
@@ -226,13 +220,13 @@ const NewPaymentMethod = class {
         }
     }
     async validate() {
-        const billingFormValidation = await this.billingFormRef.validate();
+        const billingFormValidation = await this.billingFormWrapperRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
     }
     async tokenize() {
         try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const billingFormFieldValues = await this.billingFormWrapperRef.getValues();
             let paymentMethodData;
             if (this.saveNewPaymentMethodChecked) {
                 paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
@@ -250,11 +244,12 @@ const NewPaymentMethod = class {
     }
     showNewPaymentMethodForm() {
         var _a;
-        return (index.h("div", { class: "mt-4 pb-4 border-bottom" }, index.h("hidden-input", null), index.h("div", { class: "mb-4" }, ((_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id) === 'card' ? (index.h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (index.h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), index.h("div", { part: parts.billingForm }, index.h(header3.Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), index.h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })), index.h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+        return (index.h("div", { class: "mt-4 pb-4 border-bottom" }, index.h("hidden-input", null), index.h("div", { class: "mb-4" }, 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-wrapper", { ref: (el) => (this.billingFormWrapperRef = el), hideCardBillingForm: this.hideCardBillingForm, paymentMethodType: paymentMethodType }), index.h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '4b6e52ca95845aa1c9163f4d3eafbfc98ca51deb', class: "payment-method" }, index.h("div", { key: 'd4aea7115ff71564a4d1e87a468174a29a040406', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: '0204f84a72bb89e03772894f208895359370714b', 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));
+        return (index.h(index.Host, { key: 'd28e0908fee9817719cd79d91621792862cd4e81', class: "payment-method" }, index.h("div", { key: '021d8458af22180cd5db65f346ab5d205e214e45', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: 'adaca7a258a726e97150e677e92004955e99a12c', 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));
     }
 };
 
@@ -263,7 +258,7 @@ class PaymentMethodOption {
         this.id = paymentMethod.id;
         this.brand = paymentMethod.brand;
         this.acct_last_four = paymentMethod.acct_last_four;
-        this.type = utils$1.snakeToCamel(paymentMethod.type);
+        this.type = utils.snakeToCamel(paymentMethod.type);
     }
 }
 var CardBrandLabels;
@@ -281,7 +276,6 @@ var CardBrandLabels;
 const PaymentMethodOptions = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.toggleCreatingNewPaymentMethod = index.createEvent(this, "toggleCreatingNewPaymentMethod", 7);
         this.showCard = undefined;
         this.showAch = undefined;
         this.showBnpl = undefined;
@@ -291,9 +285,9 @@ const PaymentMethodOptions = class {
         this.insuranceToggled = undefined;
         this.authToken = undefined;
         this.accountId = undefined;
-        this.iframeOrigin = config.config.iframeOrigin;
         this.savedPaymentMethods = [];
         this.paymentAmount = undefined;
+        this.hideCardBillingForm = undefined;
         this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
@@ -337,13 +331,13 @@ const PaymentMethodOptions = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '3ab3caf94332163f031ecebe101d45c35e1416bd' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (index.h(index.Host, { key: '22ab195ec840e971c774ad2886ebce979c13394d' }, (_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;
             const sezzle = paymentMethodOption.id === Payment.PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (index.h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, ref: (el) => {
+                return (index.h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -381,7 +375,7 @@ const SaveNewPaymentMethod = class {
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (index.h("div", { key: '4b0ac5e02aa02214bf8ddd574db56eb9508b0607', class: "mt-4 form-check" }, index.h("form-control-checkbox", { key: 'bca05c6b8fa00dd7bbc34ee36ef6086ae1764b82', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+        return (index.h("div", { key: '017cbce906d331b82eb5dc726197da3ea3ba51e5', class: "mt-4 form-check" }, index.h("form-control-checkbox", { key: 'ca22562653b216d16bd19765f1834ff2428820cc', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
     }
 };
 
@@ -393,7 +387,6 @@ const SavedPaymentMethod = class {
             e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
-        this.iframeOrigin = config.config.iframeOrigin;
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
@@ -407,7 +400,7 @@ const SavedPaymentMethod = class {
     ;
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '8e5a11a58cf828356df001461b6bb3163521f1ed', class: "payment-method" }, index.h("div", { key: 'c20a8a3dcea1f885b94c4829b85be8d6f401ad42', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: '72b970f6808e9f938869195fa29217f44b44250e', 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 (index.h(index.Host, { key: '10b18a7c77250aac57d6afef89aea752e3bc2c35', class: "payment-method" }, index.h("div", { key: '80910960904f3e01fd10cba4789af4004b434490', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: 'abccf6aca9316de983ba899eabfffcc7b05b1d48', 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}` }))));
     }
 };
 
@@ -452,7 +445,6 @@ const SezzlePaymentMethod = class {
             this.sezzleCheckout = checkout;
             this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
         };
-        this.iframeOrigin = config.config.iframeOrigin;
         this.bnpl = undefined;
         this.clientId = undefined;
         this.accountId = undefined;
@@ -478,14 +470,14 @@ const SezzlePaymentMethod = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'bbe1a2f4a2418d8c9e946e15567f7df89ac06084', class: "payment-method" }, index.h("script", { key: 'a254fbb032a531a889d81297053be07001262706', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", { key: '691439a9541b69f59fac8ed744d633a7cba69fbd', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: '4f03055cf993502ff1999abfbd14aa5e6977b811', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: index.h("div", null, index.h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (index.h("small", null, index.h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", index.h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", index.h("span", { class: "fw-bold" }, utils$1.formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
+        return (index.h(index.Host, { key: 'eaf1bd457f91f77bffa661875277c0709d5926d3', class: "payment-method" }, index.h("script", { key: '897bccdb0090b3e3b45b9913f7bdea6b838f63cb', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", { key: 'db32690b54bdb5045d701c888cd67c7d97d66243', class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { key: 'c3746a50bc7a5b8f079ed76c204790555983def1', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: index.h("div", null, index.h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (index.h("small", null, index.h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", index.h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", index.h("span", { class: "fw-bold" }, utils.formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
     }
 };
 
 exports.bank_account_form = BankAccountForm;
 exports.card_form = CardForm;
 exports.hidden_input = HiddenInput;
-exports.justifi_billing_form = BillingForm;
+exports.justifi_billing_form_wrapper = BillingFormWrapper;
 exports.justifi_new_payment_method = NewPaymentMethod;
 exports.justifi_payment_method_options = PaymentMethodOptions;
 exports.justifi_save_new_payment_method = SaveNewPaymentMethod;

package/dist/cjs/{iframe-input.cjs.entry.js → billing-form_3.cjs.entry.js}

@@ -3,12 +3,67 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
-const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
-const _package = require('./package-d6ef89ed.js');
+const index_esm = require('./index.esm-a397536a.js');
+const schemaValidations = require('./schema-validations-0be8068a.js');
+const stateOptions = require('./state-options-4fbcb48a.js');
+const utils = require('./utils-bc03ca40.js');
+const formControlErrorText = require('./form-control-error-text-c1f49f35.js');
+const _package = require('./package-52ac8376.js');
 const iframeInputStylesState = require('./iframe-input-styles-state-d0de0b24.js');
-const parts = require('./parts-811ddb9c.js');
+const parts = require('./parts-addf2176.js');
+require('./business-form-options-4bcb8943.js');
+require('./Business-cfd6a2dd.js');
+require('./helpers-602962eb.js');
 require('./index-d2d0b181.js');
 
+const BillingFormSchema = 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 PostalFormSchema = index_esm.create$3({
+    address_postal_code: schemaValidations.postalValidation.required('Enter postal code'),
+});
+
+const BillingForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.legend = undefined;
+        this.formController = undefined;
+        this.billingInfo = undefined;
+        this.errors = {};
+    }
+    componentWillLoad() {
+        this.formController = new index_esm.FormController(BillingFormSchema);
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (index.h(index.Host, { key: '2763b7ac25e51e9d206d6a0bc6ed28ec13f54cc3' }, index.h("form", { key: '758b52530cc945e9c3ce5a2ee11838a3776abc6b' }, index.h("fieldset", { key: '2ab7312e043d3cbc03993f11ac5692692319af4b' }, this.legend && index.h("legend", { key: '8e324a5bb2fabc975742e866341a3434e1950a3c' }, this.legend), index.h("div", { key: 'fafd0d9fa2784341dc80fea8c53d081d2c84af5d', class: "row gy-3" }, index.h("div", { key: '3aa18a756f3ea6ff9dcfa061cd845c714cab3540', class: "col-12" }, index.h("form-control-text", { key: '4b75c876eef667f3d353c802376774e7c1af1b84', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'dddc81024aef4757c18b31db84204fc9e70f9ab1', class: "col-12" }, index.h("form-control-text", { key: 'd9d63301e3d87885de9414164c820df2013cb6ae', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: 'f96675211a63fc785b9e759aef44f4dd4b22e0a3', class: "col-12" }, index.h("form-control-text", { key: 'f2c6a24150d640f9efbfa1748f577e32550b3507', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), index.h("div", { key: '83cf74afae2c4e899151cc5461a06632fef3c756', class: "col-12" }, index.h("form-control-text", { key: 'cbbf7dfac17eb69b2c9e80534051822cd4f94afd', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: '9331b691855dc4f9a60b746089552228a5b12942', class: "col-12" }, index.h("form-control-select", { key: 'f0f726fe2633ab45754691726a0008c4e50f41ac', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: '0d1d00ca86d09a370330cd9f3807783a8cd981a4', class: "col-12" }, index.h("form-control-text", { key: '0e43cfe70ca05a3d795d82f554453d12562b2ec9', 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 })))))));
+    }
+};
+
 var iframeResizer = {exports: {}};
 
 /*
@@ -1618,10 +1673,10 @@ const IframeInput = class {
         return params;
     }
     render() {
-        return (index.h(index.Host, { key: 'c0eca45af47958837580cc400e923135db070e75', class: "form-group d-flex flex-column" }, index.h("div", { key: '374d757e67e81deec4d7e20255710d5256983cb6', style: {
+        return (index.h(index.Host, { key: '0f84e1044b6bddb480dbb4b4fd2ba6f18d75a2a0', class: "form-group d-flex flex-column" }, index.h("div", { key: '25e6e196ccf3973b9a382f09efe5997bfb4abd1b', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, index.h("label", { key: '6054db3876710458e93dd8a11f7354d737e737d2', class: "form-label", htmlFor: "", part: parts.label }, this.label || ''), index.h("div", { key: '2ccc97c83798026666fc0abc4d23e6d83b19b2fa', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, index.h("iframe", { key: 'c71d778eaf2008ee4a2b237842e1dbec7abf5d43', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, index.h("label", { key: 'eeddbc0a03692c053898b761fca84635cb3c9323', class: "form-label", htmlFor: "", part: parts.label }, this.label || ''), index.h("div", { key: 'ce10d714ca67511b059adc4fb942ed42885f0a1a', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, index.h("iframe", { key: '85bedd02d3013ad4973d3ecfa0a7c530fddf5a7a', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -1631,9 +1686,47 @@ const IframeInput = class {
                         this.iframeLoaded = true;
                     }
                 }, this.iframeElement);
-            } })), index.h(formControlErrorText.FormControlErrorText, { key: '6f756711fccec14a52fa55e9faf0638546e80f77', errorText: this.errorText, name: this.inputId }))));
+            } })), index.h(formControlErrorText.FormControlErrorText, { key: '6533642027fa5184e120452f19e5274476210301', errorText: this.errorText, name: this.inputId }))));
     }
     get el() { return index.getElement(this); }
 };
 
+const PostalForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.legend = undefined;
+        this.formController = undefined;
+        this.billingInfo = undefined;
+        this.errors = {};
+    }
+    componentWillLoad() {
+        this.formController = new index_esm.FormController(PostalFormSchema);
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const postalFormDefaultValue = this.formController.getInitialValues();
+        return (index.h(index.Host, { key: 'e798e67c159b53a995e4a60246c6f6d6e872f1ec' }, index.h("form", { key: '24d6980de772a360c0218e9ab50550dcee5786d5' }, index.h("fieldset", { key: '9e990836becccdf5d12a9e15e2eb7f4078f74b08' }, this.legend && index.h("legend", { key: '12d445b392cf03114dbd2a37391ecc1b87304868' }, this.legend), index.h("div", { key: '2d2fed9cf30b3869633b80b39b7684dfde66f6b7', class: "row gy-3" }, index.h("div", { key: '8ec042863e646d5daffeb3fbb5395336406adcde', class: "col-12" }, index.h("form-control-text", { key: '82a2c18c2a7eef7ba7ac46e53dfc9c975c8d28b7', name: 'address_postal_code', label: "ZIP", defaultValue: postalFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: utils.numberOnlyHandler })))))));
+    }
+};
+
+exports.billing_form = BillingForm;
 exports.iframe_input = IframeInput;
+exports.postal_form = PostalForm;

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5b9a3b5f.js');
-const utils = require('./utils-fc17191b.js');
+const utils = require('./utils-a05a8bf6.js');
 const styledHost = require('./styled-host-94309bab.js');
-const skeleton = require('./skeleton-5ca03840.js');
-require('./parts-811ddb9c.js');
+const skeleton = require('./skeleton-c4903a53.js');
+require('./parts-addf2176.js');
 
 const BusinessDetailsLoading = () => {
     const Block = () => (index.h("div", { class: "mt-5" },