@justifi/webcomponents 6.5.1-rc.5 → 6.7.0

package/package.json

@@ -1,24 +1,11 @@
 {
   "name": "@justifi/webcomponents",
-  "version": "6.5.1-rc.5",
+  "version": "6.7.0",
   "description": "JustiFi Web Components",
   "collection": "dist/collection/collection-manifest.json",
   "main": "dist/index.cjs.js",
   "module": "dist/module/index.js",
   "types": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/index.cjs.js",
-      "import": "./dist/module/index.js"
-    },
-    "./docs/*": "./docs/*",
-    "./docs/helpers": "./docs/helpers/index.ts",
-    "./docs/helpers/*": "./docs/helpers/*.tsx",
-    "./dist/module/*": "./dist/module/*.js",
-    "./dist/docs.json": "./dist/docs.json",
-    "./package.json": "./package.json"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/justifi-tech/web-component-library.git"
@@ -28,20 +15,8 @@
     "registry": "https://registry.npmjs.org"
   },
   "files": [
-    "dist/",
-    "docs/"
+    "dist/"
   ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "dev": "stencil build --watch",
-    "lint": "eslint . --max-warnings 0",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "generate": "stencil generate",
-    "test": "TZ=utc stencil test --spec",
-    "test:watch": "TZ=utc stencil test --spec --watchAll",
-    "test:file": "stencil test --spec --watch --",
-    "docs:lint": "eslint --ext .md,.mdx --config docs/.eslintrc.cjs docs"
-  },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@stencil/core": "^4.0.5",
@@ -59,14 +34,14 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@eslint/eslintrc": "^3.3.1",
     "@rollup/plugin-replace": "^6.0.1",
     "@stencil/sass": "^3.0.1",
     "@types/jest": "29.5.14",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
     "dotenv": "^16.3.1",
-    "eslint": "^9.27.0",
-    "eslint-plugin-mdx": "^3.1.5",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-node": "^29.7.0",
@@ -74,5 +49,15 @@
     "ts-jest": "^29.1.2"
   },
   "license": "MIT",
-  "gitHead": "507bac1d941eae6e1f56e185ecd9bc9d22637783"
-}
+  "gitHead": "507bac1d941eae6e1f56e185ecd9bc9d22637783",
+  "scripts": {
+    "build": "stencil build --docs",
+    "dev": "stencil build --watch",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "generate": "stencil generate",
+    "test": "TZ=utc stencil test --spec",
+    "test:watch": "TZ=utc stencil test --spec --watchAll",
+    "test:file": "stencil test --spec --watch --"
+  }
+}

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

@@ -1,132 +0,0 @@
-'use strict';
-
-var index = require('./index-BhI7cJcE.js');
-require('./config-state-CYoBVAca.js');
-require('./dinero-BwNN_k7x.js');
-require('./ComponentError-D4OLnOkg.js');
-var Refund = require('./Refund-Blquw3jZ.js');
-require('./Pagination-Dediz133.js');
-require('./Business-DWHy_-z9.js');
-require('./Dispute-CruQTF6_.js');
-var businessFormOptions = require('./business-form-options-e9UFw4P-.js');
-require('./event-types-DNOUef41.js');
-var utils = require('./utils-DAyWinG2.js');
-var parts = require('./parts-Pb06tUMp.js');
-var utils$1 = require('./utils-Bab-tddY.js');
-var skeleton = require('./skeleton-BF3HGL9X.js');
-require('./event-types-YOY5TKUN.js');
-var formControlErrorText = require('./form-control-error-text-mhOq2Edp.js');
-require('./index-mmd0OhmD.js');
-
-const BankAccountDocumentFormInputs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: '4daf6eadf7e1213c3534bd845c917af0b1ec1fec', class: "row gy-3" }, index.h("div", { key: '9d7235d40a0884960948eaac7dc990e947bf5165', class: "col-12" }, index.h("form-control-file", { key: 'e0e3704079e20c86dacec668d27ca23ef981aa2f', name: "voided_check", label: "Voided Check", documentType: Refund.EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), index.h("div", { key: '5c4c20191c6c54170896a9c0f893a7fe06ff6a70', class: "col-12" }, index.h("form-control-file", { key: '6d4ac9d3a47952644bab5afe4b23332a56c04035', name: "bank_statement", label: "Bank Statement", documentType: Refund.EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
-    }
-};
-
-const BankAccountFormInputs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: '951373cbaf604ec2f34364fd93ac9ccf666a4e58', class: "row gy-3" }, index.h("div", { key: 'a2fbc555aeb3b9bed12f032385ea9889482e6caf', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'c05c9e185293799ee94cbd8bec3976d115469b00', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: 'b3cc026a1c2079ddcd744d7557742ac98073f03c', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'f3649a91a8af13374eb55f06ecc81e6e06bd4b01', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: '34eb7df603e1d7d9bb616c51057dd5da9a2e3e3f', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." }))), index.h("div", { key: '64897a96be65ddd311267e5ea1571993ab61787d', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Routing Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.routing_number) || '' })) : (index.h("form-control-text", { name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." })))));
-    }
-};
-
-const BankAccountFormInputsCanada = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return (index.h("div", { key: '80b2030f1c1840df293a5ec600fe16836b502647', class: "row gy-3" }, index.h("div", { key: '5a28a5b515856da7808fc49cf0f775f8c4c71daa', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: '62761912ccf0ee5ba1e5c13cbb08cde9687d05bd', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: '04472a07096890a51d2e2db463f7040a389fd4e1', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'c2caa8ddb2b1038efb49e3361eab760108a34308', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: '2446720991bd2512f6bb8a779e47e526100dacb3', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Transit Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.transit_number) || '' })) : (index.h("form-control-text", { name: "transit_number", label: "Transit Number", defaultValue: this.defaultValue.transit_number, maxLength: 5, errorText: this.errors.transit_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "5 digits" }))), index.h("div", { key: '98cda3809e604cc3e863f2d01698e217694b2550', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Institution Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.institution_number) || '' })) : (index.h("form-control-text", { name: "institution_number", label: "Institution Number", defaultValue: this.defaultValue.institution_number, maxLength: 3, errorText: this.errors.institution_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "3 digits" }))), index.h("div", { key: 'de285afb20fe922e3a8dd66727222e2f49567aae', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_g = this.defaultValue) === null || _g === void 0 ? void 0 : _g.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement. Do not include spaces or dashes." })))));
-    }
-};
-
-const BankAccountReadOnlyValue = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: '0d44d4aa265a5fd36ca30f1db072eb834f8bdf1b' }, index.h("label", { key: '892e6dbdbff5d484df4dfb522f3db8968f46d7d4', class: "form-label", part: parts.text }, this.label), index.h("div", { key: 'cd617e2302834ad67ebccd64e24d535b2cc19da8', part: parts.text }, this.value || '')));
-    }
-};
-
-const BusinessDocumentsOnFile = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.documents = [];
-        this.isLoading = false;
-    }
-    render() {
-        if (this.isLoading) {
-            return index.h(skeleton.Skeleton, { height: "50px" });
-        }
-        if (!this.documents.length) {
-            return null;
-        }
-        return (index.h(index.Host, null, index.h("div", { class: "card", part: parts.card }, index.h("div", { class: "card-body" }, index.h("h5", { class: "card-title", part: parts.heading2 }, "Documents Already on File"), index.h("div", { class: "table-responsive" }, index.h("table", { class: "table table-sm table-borderless", part: parts.table }, index.h("thead", null, index.h("tr", null, index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "File Name"), index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "File Type"), index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "Document Type"), index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "Date Uploaded"))), index.h("tbody", null, this.documents.sort((a, b) => a.document_type.localeCompare(b.document_type))
-            .map((document, index$1) => {
-            return (index.h("tr", { class: index$1 === 0 ? "border-bottom border-top" : "border-bottom" }, index.h("td", { part: parts.tableCell }, document.file_name), index.h("td", { part: parts.tableCell }, document.file_type), index.h("td", { part: parts.tableCell }, utils$1.snakeCaseToHumanReadable(document.document_type)), index.h("td", { part: parts.tableCell }, `${utils$1.formatDate(document.created_at)} - ${utils$1.formatTimeSeconds(document.created_at)}`)));
-        })))))), index.h("hr", null)));
-    }
-};
-
-const FileInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.formControlInput = index.createEvent(this, "formControlInput");
-        this.formControlBlur = index.createEvent(this, "formControlBlur");
-        this.fileSelected = index.createEvent(this, "fileSelected");
-        this.isFocused = false;
-        this.handleFormControlInput = (event) => {
-            const target = event.target;
-            const name = target.getAttribute('name');
-            this.inputHandler(name, target.value);
-            this.formControlInput.emit({ name, value: target.value });
-        };
-        this.changeHandler = () => {
-            const inputFileList = this.fileInput.files;
-            if (inputFileList) {
-                this.fileSelected.emit({
-                    fileList: inputFileList,
-                    document_type: this.documentType
-                });
-            }
-        };
-    }
-    componentDidLoad() {
-        this.fileInput = this.el.querySelector('input');
-    }
-    get part() {
-        let part = parts.input;
-        if (this.errorText) {
-            part = parts.inputInvalid;
-        }
-        if (this.disabled) {
-            part = parts.inputDisabled;
-        }
-        if (this.isFocused) {
-            part = parts.inputFocused;
-        }
-        return part;
-    }
-    render() {
-        return (index.h(index.Host, { key: 'c1d92b4464500d430ad828ce374b864f0abf79dc' }, index.h("div", { key: '7753e5875afe4c6da178a088721b62590e104039', class: "form-group d-flex flex-column" }, index.h("div", { key: '35732250f1da24e5d8af9d6c984360402aa8c749', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '1dbdb4c74c82415714295d882a48ea3634265cae', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '132b4e5b01986aba2f1999db2f19373477b0af9d', helpText: this.helpText })), index.h("input", { key: '4c371be7c4d784fb7ba3dc3244aaab5ef7dea763', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
-                this.isFocused = false;
-                this.formControlBlur.emit();
-            } }), index.h(formControlErrorText.FormControlErrorText, { key: 'f9c2a057b20ccf863331c90156a5a9df65bb85a6', errorText: this.errorText, name: this.name }))));
-    }
-    get el() { return index.getElement(this); }
-};
-
-exports.bank_account_document_form_inputs = BankAccountDocumentFormInputs;
-exports.bank_account_form_inputs = BankAccountFormInputs;
-exports.bank_account_form_inputs_canada = BankAccountFormInputsCanada;
-exports.bank_account_read_only_value = BankAccountReadOnlyValue;
-exports.business_documents_on_file = BusinessDocumentsOnFile;
-exports.form_control_file = FileInput;

package/dist/cjs/checkout.store-BA6h-dp2.js

@@ -1,107 +0,0 @@
-'use strict';
-
-var index = require('./index-mmd0OhmD.js');
-var index$1 = require('./index-C2ITzalN.js');
-
-const initialState = {
-    accountId: '',
-    authToken: '',
-    billingFormFields: {
-        address_postal_code: '',
-    },
-    bnplEnabled: false,
-    applePayEnabled: false,
-    insuranceEnabled: false,
-    bnplProviderApiVersion: '',
-    bnplProviderCheckoutUrl: '',
-    bnplProviderClientId: '',
-    bnplProviderMode: '',
-    checkoutId: '',
-    checkoutLoaded: false,
-    bankAccountVerification: undefined,
-    disableBankAccount: false,
-    disableCreditCard: false,
-    disablePaymentMethodGroup: false,
-    paymentAmount: 0,
-    paymentCurrency: 'USD',
-    paymentDescription: '',
-    paymentMethodGroupId: undefined,
-    paymentMethods: [],
-    paymentToken: undefined,
-    savePaymentMethod: false,
-    selectedPaymentMethod: undefined,
-    totalAmount: 0,
-    plaidPublicToken: undefined,
-    plaidLinkTokenId: undefined,
-};
-const { state: checkoutStore, onChange } = index.createStore(initialState);
-Object.keys(initialState).forEach((key) => {
-    // @ts-ignore
-    onChange(key, (newValue) => {
-        checkoutStore[key] = newValue;
-    });
-});
-// Helper: compute available payment methods based on store flags
-function getAvailablePaymentMethodTypes() {
-    var _a;
-    const methods = [];
-    if (!checkoutStore.disablePaymentMethodGroup &&
-        ((_a = checkoutStore.paymentMethods) === null || _a === void 0 ? void 0 : _a.length)) {
-        const hasSavedCard = checkoutStore.paymentMethods.some((pm) => pm.type === index$1.PAYMENT_METHODS.SAVED_CARD);
-        const hasSavedBank = checkoutStore.paymentMethods.some((pm) => pm.type === index$1.PAYMENT_METHODS.SAVED_BANK_ACCOUNT);
-        if (hasSavedCard && !checkoutStore.disableCreditCard) {
-            methods.push(index$1.PAYMENT_METHODS.SAVED_CARD);
-        }
-        if (hasSavedBank && !checkoutStore.disableBankAccount) {
-            methods.push(index$1.PAYMENT_METHODS.SAVED_BANK_ACCOUNT);
-        }
-    }
-    if (!checkoutStore.disableCreditCard) {
-        methods.push(index$1.PAYMENT_METHODS.NEW_CARD);
-    }
-    if (!checkoutStore.disableBankAccount) {
-        methods.push(index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT);
-    }
-    if (checkoutStore.bnplEnabled) {
-        methods.push(index$1.PAYMENT_METHODS.SEZZLE);
-    }
-    if (checkoutStore.applePayEnabled) {
-        methods.push(index$1.PAYMENT_METHODS.APPLE_PAY);
-    }
-    if (checkoutStore.bankAccountVerification === true &&
-        !checkoutStore.disableBankAccount) {
-        methods.push(index$1.PAYMENT_METHODS.PLAID);
-    }
-    return methods;
-}
-function getCheckoutState() {
-    var _a;
-    return {
-        selectedPaymentMethod: checkoutStore.selectedPaymentMethod,
-        paymentAmount: checkoutStore.paymentAmount,
-        totalAmount: checkoutStore.totalAmount,
-        paymentCurrency: checkoutStore.paymentCurrency,
-        paymentDescription: checkoutStore.paymentDescription,
-        savedPaymentMethods: checkoutStore.paymentMethods,
-        savePaymentMethod: checkoutStore.savePaymentMethod,
-        bnplEnabled: checkoutStore.bnplEnabled,
-        applePayEnabled: checkoutStore.applePayEnabled,
-        insuranceEnabled: checkoutStore.insuranceEnabled,
-        disableBankAccount: checkoutStore.disableBankAccount,
-        disableCreditCard: checkoutStore.disableCreditCard,
-        disablePaymentMethodGroup: checkoutStore.disablePaymentMethodGroup,
-        paymentToken: (_a = checkoutStore.paymentToken) !== null && _a !== void 0 ? _a : undefined,
-    };
-}
-function onAnyChange(callback) {
-    Object.keys(initialState).forEach((key) => {
-        // @ts-ignore - onChange is generically typed by stencil/store but not exported here
-        onChange(key, (newValue) => callback(key, newValue));
-    });
-}
-
-exports.checkoutStore = checkoutStore;
-exports.getAvailablePaymentMethodTypes = getAvailablePaymentMethodTypes;
-exports.getCheckoutState = getCheckoutState;
-exports.onAnyChange = onAnyChange;
-exports.onChange = onChange;