@justifi/webcomponents 6.1.0-rc.2 → 6.1.0-rc.3

package/dist/collection/components/business-forms/schemas/schema-validations.js

@@ -1,6 +1,8 @@
 import { string } from "yup";
 import StateOptions from "../../../utils/state-options";
-import { businessServiceReceivedOptions, recurringPaymentsOptions, seasonalBusinessOptions, bankAccountTypeOptions, businessClassificationOptions, } from "../utils/business-form-options";
+import { CountryCode } from "../../../utils/country-codes";
+import { countryValidation } from "../utils/country-config";
+import { businessServiceReceivedOptions, recurringPaymentsOptions, seasonalBusinessOptions, bankAccountTypeOptions, } from "../utils/business-form-options";
 import { numbersOnlyRegex, phoneRegex, poBoxRegex, ssnRegex, transformEmptyString, urlRegex, validateRoutingNumber, } from "./schema-helpers";
 // Common Validations
 export const emailValidation = string()
@@ -21,9 +23,7 @@ export const doingBusinessAsValidation = string()
 export const websiteUrlValidation = string()
     .matches(urlRegex, 'Enter valid website url')
     .transform(transformEmptyString);
-export const businessClassificationValidation = string()
-    .oneOf(businessClassificationOptions.map((option) => option.value), 'Select business classification')
-    .transform(transformEmptyString);
+export const businessClassificationValidation = string().transform(transformEmptyString);
 export const industryValidation = string()
     .min(2, 'Industry must be at least 2 characters')
     .max(50, 'Industry must be less than 50 characters')
@@ -37,6 +37,43 @@ export const taxIdValidation = string()
     return value !== '123456789';
 })
     .transform(transformEmptyString);
+// Country-aware helpers (backward compatible)
+export const makePostalValidation = (country) => string()
+    .matches(countryValidation[country].postalRegex, 'Enter valid postal code')
+    .transform(transformEmptyString);
+export const makeIdentityNumberValidation = (country) => {
+    if (country === CountryCode.CAN) {
+        return string()
+            .matches(numbersOnlyRegex, 'Enter valid SIN')
+            .length(countryValidation[country].identityDigits, 'Enter valid SIN')
+            .test('not-repeat', 'Enter valid SIN', (value) => {
+            return !/^(\d)\1+$/.test(value);
+        })
+            .test('not-seq', 'Enter valid SIN', (value) => {
+            return value !== '123456789';
+        })
+            .transform(transformEmptyString);
+    }
+    // USA default (SSN)
+    return ssnValidation;
+};
+export const makeTaxIdValidation = (country) => {
+    if (country === CountryCode.CAN) {
+        return string()
+            .matches(numbersOnlyRegex, 'Enter valid Business Number (BN)')
+            .length(countryValidation[country].taxIdDigits, 'Enter valid Business Number (BN)')
+            .test('not-repeat', 'Enter valid Business Number (BN)', (value) => {
+            return !/^(\d)\1+$/.test(value);
+        })
+            .test('not-seq', 'Enter valid Business Number (BN)', (value) => {
+            return value !== '123456789';
+        })
+            .transform(transformEmptyString);
+    }
+    // USA default
+    return taxIdValidation;
+};
+export const makeBusinessClassificationValidation = (_country) => string().transform(transformEmptyString);
 export const dateOfIncorporationValidation = string()
     .test('not-future', 'Date of incorporation cannot be in the future', (value) => {
     const inputDate = new Date(value);

package/dist/collection/components/business-forms/utils/country-config.js

@@ -0,0 +1,47 @@
+import StateOptions from "../../../utils/state-options";
+import ProvinceOptions from "../../../utils/province-options";
+import { businessClassificationOptions } from "./business-form-options";
+export const countryLabels = {
+    USA: {
+        stateLabel: 'State',
+        postalLabel: 'Zip Code',
+        idNumberLabel: 'SSN',
+        idNumberLabelOptional: 'SSN (optional)',
+        identityHelpText: 'Enter your full Social Security Number. It is required for Federal OFAC check.',
+        taxIdLabel: 'Tax ID (EIN or SSN)',
+        taxIdHelpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns. Enter value without dashes.",
+    },
+    CAN: {
+        stateLabel: 'Province',
+        postalLabel: 'Postal Code',
+        idNumberLabel: 'SIN',
+        idNumberLabelOptional: 'SIN (optional)',
+        identityHelpText: 'Enter your full Social Insurance Number.',
+        taxIdLabel: 'Business Number (BN)',
+        taxIdHelpText: 'Business Numbers (BN) are nine digits. Enter value without spaces or dashes.',
+    },
+};
+export const countryOptions = {
+    USA: {
+        stateOptions: StateOptions,
+    },
+    CAN: {
+        stateOptions: ProvinceOptions,
+    },
+};
+export const countryValidation = {
+    USA: {
+        postalRegex: /^[0-9]{5}(-[0-9]{4})?$/,
+        identityDigits: 9,
+        taxIdDigits: 9,
+    },
+    CAN: {
+        postalRegex: /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/,
+        identityDigits: 9,
+        taxIdDigits: 9,
+    },
+};
+export const getStateValues = (country) => (countryOptions[country].stateOptions || []).map((o) => o.value);
+// Business structures (placeholder for CAN duplicates USA for now)
+export const businessClassificationOptionsUSA = businessClassificationOptions;
+export const businessClassificationOptionsCAN = businessClassificationOptions;

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -33,10 +33,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '10c2cf450e59fd8ac8b020e2e2b77cfc8821b215' }, h(BankAccountFormSkeleton, { key: '6fbcdf90c6da356b44813e7245054bad69fac4ca', isReady: this.isReady }), h("div", { key: 'c1df41c8bd3b3986191b0abad815667e1b88a135', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '3176dc188869e5b233095a9cbbf0309b92445ee1' }, h(BankAccountFormSkeleton, { key: '192ba2270459bf2da49473095f5b7038b220e9c3', isReady: this.isReady }), h("div", { key: '9304caeb4d54ba9f33850849352ab344cdbce2c4', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'e4643bc24f565a43a00f09cc93ba1d1fe7063435', class: "row mb-3" }, h("iframe-input", { key: '82850d403c7a137392acd3425c0f1daa3b6e97c9', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '23854468a9e34f4f940b0988f3debc5f035d9102', class: "row" }, h("iframe-input", { key: '595739da0710dae542e4fa9b6286e957f599c502', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, h("div", { key: 'fa7880671ebd1972ff7224c6b70b4fee7e626fe2', class: "row mb-3" }, h("iframe-input", { key: 'd59e0c2ebb8dd89f60ef33a6c4b26b2e09cd09af', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '78cf00f1340bff12dfd40e62a1f5307adb49567d', class: "row" }, h("iframe-input", { key: 'f6098a33489f1fbfdb2c52644d77218c53f9e243', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

package/dist/collection/components/checkout/billing-form/billing-form.js

@@ -32,7 +32,6 @@ export class BillingForm {
         return {
             "legend": {
                 "type": "string",
-                "attribute": "legend",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -47,11 +46,11 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "legend"
             },
             "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -66,11 +65,11 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "hide-card-billing-form"
             },
             "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -85,11 +84,11 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "hide-bank-account-billing-form"
             },
             "paymentMethodType": {
                 "type": "string",
-                "attribute": "payment-method-type",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -104,7 +103,8 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-method-type"
             }
         };
     }

package/dist/collection/components/checkout/card-form/card-form.js

@@ -37,10 +37,10 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '4918918c10e558587e1d356cee9ec8540ed88e1c' }, h(CardFormSkeleton, { key: 'e61d11784aa1a9ea84fe9f0544a84f587cdf6fa4', isReady: this.isReady }), h("div", { key: 'd0640890482bcb679c0d49e569ed34912aa37426', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'a2e24bea5b9452109cc2e8bace48715d4891a8fd' }, h(CardFormSkeleton, { key: '72eaccbcbc44276f717796a6d43a7237ea9aa53c', isReady: this.isReady }), h("div", { key: 'ecaf4c87c39ef1613962a2ede31401f1ebc83510', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'ef3548ee5dcf517f5c31b3aa40fc5ed5f8e37f59', class: "mb-3" }, h("iframe-input", { key: '4fa52574bfe8334f3294e45b2e63bf109750f925', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '5ad5bfe88c1531a74a636e2e07572b8401095ecf', class: "d-flex align-items-start" }, h("div", { key: '29d9d3e3c0080243ea44ca7515c690b90bd0d944', class: "flex-fill me-3" }, h("iframe-input", { key: '01ebb2a6101d33b08135ac879fce192f57ea822e', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '769c4e873c4062ec90fae3a7b0606e8db49754c0', class: "flex-fill me-3" }, h("iframe-input", { key: 'a36c705e6f8231f01615ee8a878aa5427a11bcce', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '2923118dc4ec2f107aad34e0f77ea3d58340a734', class: "flex-fill" }, h("iframe-input", { key: 'ec3226c1eca1705672e8ea7f80be47ca6f81838b', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, h("div", { key: 'f2d7aa181c3fab31a660fb61cd05086a801f2ae3', class: "mb-3" }, h("iframe-input", { key: '146fd7622be45cd3d672449021bb2e5cae863c14', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: 'cbbf5b2e280fa0974c1416c3291ad69be778dad0', class: "d-flex align-items-start" }, h("div", { key: 'b624938df43a99cc8bdfee12ad375c2f794eb716', class: "flex-fill me-3" }, h("iframe-input", { key: '73324463e7f4e383db349d500104ea566b1302c5', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '00a3e4c7cf98b02c8dc915e4d62efde12caea4b4', class: "flex-fill me-3" }, h("iframe-input", { key: 'd6546cabba6d82560e51e8a0d66b0078eaeded74', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '1489393a907289649b9e20597012dc57d865dc59', class: "flex-fill" }, h("iframe-input", { key: 'd5ecc403c460aa9c3757c48970b4e83edb805796', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {

package/dist/collection/components/checkout/checkout.js

@@ -41,6 +41,11 @@ export class Checkout {
         this.isSubmitting = false;
     }
     checkoutChanged(event) {
+        // if disabled bnpl, remove sezzle from available payment methods
+        if (this.disableBnpl) {
+            this.availablePaymentMethods = event.detail.availablePaymentMethodTypes.filter((method) => method !== PAYMENT_METHODS.SEZZLE);
+            return;
+        }
         this.availablePaymentMethods = event.detail.availablePaymentMethodTypes;
     }
     async fillBillingForm(fields) {
@@ -58,7 +63,6 @@ export class Checkout {
         checkoutStore.authToken = this.authToken;
         checkoutStore.disableCreditCard = this.disableCreditCard;
         checkoutStore.disableBankAccount = this.disableBankAccount;
-        checkoutStore.disableBnpl = this.disableBnpl;
         checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
     }
     async submit(_event) {
@@ -71,16 +75,15 @@ export class Checkout {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: '65e97b6e7b25f885beda63487d96877ac4785847' }, h("justifi-modular-checkout", { key: 'dc009a2897ae02dfaa9ca7694dc20a588bca5b8a', ref: (el) => {
+        return (h(StyledHost, { key: '40765f54a977fb2e8e450eba0bf9731132ae4897' }, h("justifi-modular-checkout", { key: '3e698888a43c585749644d874dd49510889b04ca', ref: (el) => {
                 this.modularCheckoutRef = el;
-            }, authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: '8c8536f5139ad2d05316546a5442552e87992d89', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '20135fb737963df1d2c5e790881b98d6efa8c04b', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '4fa1fdcad237ce5014266adbd6fec1fa766c3e44', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '44a694a98e30ebd21e1f3d2beaafe8d5d11f1a36' }, h("justifi-checkout-summary", { key: '1ff39b9c2d31649f2346d0aa666168d1cbe1deca' }))), h("div", { key: '6401bebd557fcf9ef73746c2ee4f2d67ccccf73b', class: "col-12 mt-4" }, h("slot", { key: '72d1e32aaed73232cf2b2d247ab5e7fc19a36092', name: "insurance" })), h("div", { key: '2fea8b30dd19032afc7a5b37abe897aa1aee1362', class: "col-12 mt-4" }, h("justifi-header", { key: '8b2d443e9e5db4ba95ab72983e737a7579824e69', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '67a2c1a30841a789b9b2ee2d16209373ad055783', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1fdb903931cd73a801975eabd12d7ad43cefcb97', class: "d-flex flex-column" }, h("section", { key: '29b3a041e397aebae60106ac508188d6b4770f1f' }, h("div", { key: '0ab54f7a284a59d8bcae57df1abe8e8347628fc2' }, h("justifi-saved-payment-methods", { key: 'b8f73b6e8992e99332dc55cf6ed099ccb60953c3' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: 'd87bd60da7d44160a56de342fcbe6c505e8d79e5', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && (h("justifi-radio-list-item", { key: '9d0527fe516eaee74a10314a6f7a866cf40a6942', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: 'fd29144c8e488ee48361df556bde824a80d1a207', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '9f3cc42ae66e37193ab0b6df7f5235aaf8cc3c84', class: "mt-4" }, h("justifi-button", { key: '2cbd13a7bde5ce0478e948456edb2191f9b96c0b', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+            }, authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: '2491242f0619ea24fbd0e50fbdda4cc2bad9915f', class: "row gy-3 jfi-checkout-core" }, h("div", { key: 'a965de56c5190e62bbad82116874c78c57f9d9c6', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: 'ad29fd4619a5bf9e38cbca2e24f8c6818419c022', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '4b1691f7f54a8e83f649a3d1346ec5e0f4ebb588' }, h("justifi-checkout-summary", { key: '8ea50acbcd67ea9f26dbdf74f3a0a30062926364' }))), h("div", { key: 'b024b6c6debc74443abca6b7776c29ce0253da34', class: "col-12 mt-4" }, h("slot", { key: '00b9e18b4fb5278085a3752cdd009d29b0a97a04', name: "insurance" })), h("div", { key: '7dac621b116926cbd860ca975aa642bc207fc62e', class: "col-12 mt-4" }, h("justifi-header", { key: '228d89e8fc31e9e0d6e67907b45f74b8af601e30', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '6cc7b7a742f679029f40d8c64c9d59004604f67b', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: 'd5ca29544817acbd96c6cff74de27ed13b9ac42f', class: "d-flex flex-column" }, h("section", { key: 'd149835076b70d73c61cfa6e219ac613cf93e817' }, h("div", { key: 'c4562096a2bbd0bacb907c1bbb5cf741d5c77cb3' }, h("justifi-saved-payment-methods", { key: '077666867b456945c6da965a2ebebfd2faaa66b9' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: 'bcf02b77573ff17e37b5b61793bd26351979b088', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && !this.disableBnpl && (h("justifi-radio-list-item", { key: '496cf7bd1c93724a5608bc3dba4756ae8dc605a6', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: 'eeb4dd27a8f448cc69e85bce8a4412306dbf0af2', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: 'ad13982f1c15dd574e915e8a3a1adac55b21c188', class: "mt-4" }, h("justifi-button", { key: '0a0ffc091fbe77e9221114643d5e17e891977594', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,11 +98,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "checkoutId": {
                 "type": "string",
-                "attribute": "checkout-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +117,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "checkout-id"
             },
             "disableBankAccount": {
                 "type": "boolean",
-                "attribute": "disable-bank-account",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -134,11 +137,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-bank-account",
                 "defaultValue": "false"
             },
             "disableBnpl": {
                 "type": "boolean",
-                "attribute": "disable-bnpl",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -154,11 +157,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-bnpl",
                 "defaultValue": "false"
             },
             "disableCreditCard": {
                 "type": "boolean",
-                "attribute": "disable-credit-card",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -174,11 +177,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-credit-card",
                 "defaultValue": "false"
             },
             "disablePaymentMethodGroup": {
                 "type": "boolean",
-                "attribute": "disable-payment-method-group",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -194,11 +197,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-payment-method-group",
                 "defaultValue": "false"
             },
             "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -214,11 +217,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-bank-account-billing-form",
                 "defaultValue": "false"
             },
             "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -234,6 +237,7 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-card-billing-form",
                 "defaultValue": "false"
             }
         };
@@ -375,9 +379,6 @@ export class Checkout {
             }, {
                 "propName": "disableBankAccount",
                 "methodName": "propChanged"
-            }, {
-                "propName": "disableBnpl",
-                "methodName": "propChanged"
             }, {
                 "propName": "disablePaymentMethodGroup",
                 "methodName": "propChanged"

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -12,7 +12,7 @@ export class SaveNewPaymentMethod {
         };
     }
     render() {
-        return (h(StyledHost, { key: '0ac7e7b80c9a00737eed4f9345020994eb5d92bf' }, h("form-control-checkbox", { key: '3396c0a413c3d498d7cdccc12ad97739d97f74c8', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (h(StyledHost, { key: '28c13afd8a8f21e5f67e362c19c6e6225838f472' }, h("form-control-checkbox", { key: '205ae5a43d5634c4ec1e692d3e3b123e6b3adc34', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -20,7 +20,6 @@ export class SaveNewPaymentMethod {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -36,6 +35,7 @@ export class SaveNewPaymentMethod {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "'Save New Payment Method'"
             }
         };

package/dist/collection/components/checkout/saved-payment-method.js

@@ -18,14 +18,13 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '5ec0e8509e57396844602de87fde994f5da2ba83', class: "payment-method" }, h("div", { key: 'f2a45d84e969cd04aca91d61f5819bfc85f558c9', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '1f4c35b2b6faa8ee42a1ee7347ddf2238b47fe50', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: '3ac45b0d672d5780664205822c712d4afd01d5c0', class: "payment-method" }, h("div", { key: 'e0ad4b748d79c50ef963b16f33b7c322c6819b79', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '181ecb03715f1c3c8d3d9dbf802d8e4d0fd72ec1', 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}` }))));
     }
     static get is() { return "justifi-saved-payment-method"; }
     static get properties() {
         return {
             "paymentMethodOption": {
                 "type": "unknown",
-                "attribute": "payment-method-option",
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodOption",
@@ -49,7 +48,6 @@ export class SavedPaymentMethod {
             },
             "isSelected": {
                 "type": "boolean",
-                "attribute": "is-selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -64,7 +62,8 @@ export class SavedPaymentMethod {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "is-selected"
             }
         };
     }

package/dist/collection/components/checkouts-list/checkouts-list-core.js

@@ -118,14 +118,13 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '04dae06915792f92df18740353f63781fbc15558' }, h(TableComponent, { key: '87f0d5658e76198d6332c272eabc09236569a6c3' }, h(TableHead, { key: '7b9d1d9e5875b7c83c126c06a80b1e4f8e9ec86c' }, h(TableHeadRow, { key: '8e8963b02099f6ae81a1ab9b9e00212a87be742f' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '2e1b461150fc01112c08f030402c8433611da6f3' }, h(TableLoadingState, { key: 'aefba717db73fb1052eb49906354492548eda57d', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'b353ddae94305c6f58c4026ab6a48ef16a05005c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '852bb7c4f1968f56a692e595dbe9a6223b5b3b1d', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '5077d7f5843d62b73d85adafff03022db168de0f' }, h(TableFootRow, { key: 'b338655c2ef2fb256795f781113a0fc312d76a1b' }, h(TableFootCell, { key: 'c6f4f321400d0f6a73f2ef85a77ea9dab38270b6', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'de00aeea2bbf8cf88c2e31105967d6355ebb18f0', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '9d3a3574320cbb521457bb130ff5bfe9eca0ad71' }, h(TableComponent, { key: 'c52b7ed59ea7c68607506751754a4f5bbc46f394' }, h(TableHead, { key: '24d2ee3ae48ed8687e43ee209a0260d2969a2b96' }, h(TableHeadRow, { key: 'dcaf7c316283c7fac6bd8be6e119c965eb91590f' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '57cf5bf625cf994aa0abb5e5d71dad0ffe2eb049' }, h(TableLoadingState, { key: '4a33477c76c38205d907d38d122f03339a57a65c', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'e48a334af552ef4e747f069a88d4aa1638d09b0d', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'dd2892c5e9bdfa46e4faf465a6e9411890461ea5', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '17b824a591a68fe3ecf8c4b15d3404d27378d25f' }, h(TableFootRow, { key: '425c02a9cc4992896847d4b7cc114f55e165687b' }, h(TableFootCell, { key: '78bcf9f3dae3c166a57ebd4bc39453d0f8f29d6b', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '4ea9982a48440c1fa4ef7f4919e24c06a783d707', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {
         return {
             "getCheckouts": {
                 "type": "unknown",
-                "attribute": "get-checkouts",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -148,7 +147,6 @@ export class CheckoutsListCore {
             },
             "getSubAccounts": {
                 "type": "unknown",
-                "attribute": "get-sub-accounts",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -171,7 +169,6 @@ export class CheckoutsListCore {
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -186,7 +183,8 @@ export class CheckoutsListCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "columns"
             }
         };
     }

package/dist/collection/components/checkouts-list/checkouts-list-filters.js

@@ -38,7 +38,7 @@ export class CheckoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '0899d18449324a8dc022297d9ab5b4f726d091f9' }, h("table-filters-menu", { key: '8b110d394a685f0f4868c089621711086384ab1c', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'e556d20b1ff0fe9fe3a8c4ad38e58701cb27d6f7', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'ba35f335ab22792af155140efbe01b7deed60e25', class: "p-2" }, h("form-control-select", { key: '6669b68303f80616ce2f307d653e4775c9d2483b', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '7ddd00d88cc28ea92540b83a5b40354ca69803b8', class: "p-2" }, h("form-control-select", { key: 'dfecff15700e174c3fe12a2aa5bc724e8826b831', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
+        return (h(StyledHost, { key: '6dbdb00f79ef53a27be368d8fe4cbe2f16f2dd4f' }, h("table-filters-menu", { key: 'de5804ab5f58f460dbff9a271ef54c2ad36189b2', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: '3cf13c643c5bdddf18228b3e1a5c3bb1fa8888d1', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '18b4c17805ab037e9cedc0deb64728d5b0678a4d', class: "p-2" }, h("form-control-select", { key: '07fc0b1645bfca511e08fc6e1752405c7c07a33c', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '49ae4add03dc26083430ebc17b5e382a63b820b4', class: "p-2" }, h("form-control-select", { key: 'a5479b1e04a0d393ea9007e032453f05efaf2e68', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,6 @@ export class CheckoutsListFilters {
         return {
             "checkoutStatus": {
                 "type": "string",
-                "attribute": "checkout-status",
                 "mutable": false,
                 "complexType": {
                     "original": "ICheckoutStatus",
@@ -67,11 +66,11 @@ export class CheckoutsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "checkout-status"
             },
             "paymentMode": {
                 "type": "string",
-                "attribute": "payment-mode",
                 "mutable": false,
                 "complexType": {
                     "original": "ICheckoutPaymentModeParam",
@@ -92,7 +91,8 @@ export class CheckoutsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-mode"
             }
         };
     }

package/dist/collection/components/checkouts-list/checkouts-list.js

@@ -61,7 +61,7 @@ export class CheckoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '4889226a2351b13dde8cbbfb0ba5fb3156226c5f' }, h("checkouts-list-core", { key: '56c36469e55f5ce33da5cc3224ebfd83057811d7', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'e4cb557d2c2a552f8491c9360ae937d8403e7355' }, h("checkouts-list-core", { key: 'cd12ed4b958bac696e3801951110d2d227dbfb16', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +69,6 @@ export class CheckoutsList {
         return {
             "accountId": {
                 "type": "string",
-                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -84,11 +83,11 @@ export class CheckoutsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "account-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -103,11 +102,11 @@ export class CheckoutsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -123,6 +122,7 @@ export class CheckoutsList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "columns",
                 "defaultValue": "defaultColumnsKeys"
             }
         };

package/dist/collection/components/config-provider/config-provider.js

@@ -20,7 +20,6 @@ export class ConfigProvider {
         return {
             "apiOrigin": {
                 "type": "string",
-                "attribute": "api-origin",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -36,11 +35,11 @@ export class ConfigProvider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "api-origin",
                 "defaultValue": "PROXY_API_ORIGIN"
             },
             "iframeOrigin": {
                 "type": "string",
-                "attribute": "iframe-origin",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,11 +55,11 @@ export class ConfigProvider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "iframe-origin",
                 "defaultValue": "IFRAME_ORIGIN"
             },
             "accountId": {
                 "type": "string",
-                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -76,6 +75,7 @@ export class ConfigProvider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "account-id",
                 "defaultValue": "''"
             }
         };