@justifi/webcomponents 6.10.2 → 6.10.4

package/dist/collection/components/business-forms/payment-provisioning/bank-account/business-bank-account-form-step.js

@@ -16,22 +16,20 @@ export class BusinessBankAccountFormStep {
         this.existingDocuments = [];
         this.documentData = new EntityDocumentStorage();
         this.isLoading = false;
-        this.isAddingNewBankAccount = true;
+        this.viewMode = 'manual';
         this.bankAccountVerification = false;
         this.platformAccountId = null;
-        this.usePlaidVerification = true;
         this.getSchema = () => {
             const schema = bankAccountSchemaByCountry[this.country];
             return schema(this.allowOptionalFields, this.existingDocuments);
         };
         this.initializeFormController = () => {
             this.formController = new FormController(this.getSchema());
-            if (this.isAddingNewBankAccount) {
-                // Clear form when adding a new bank account
-                this.formController.setInitialValues({ business_id: this.businessId });
+            if (this.viewMode === 'readonly') {
+                this.formController.setInitialValues(Object.assign({}, this.bankAccount));
             }
             else {
-                this.formController.setInitialValues(Object.assign({}, this.bankAccount));
+                this.formController.setInitialValues({ business_id: this.businessId });
             }
             this.formController.errors.subscribe(errors => {
                 this.errors = Object.assign({}, errors);
@@ -50,20 +48,8 @@ export class BusinessBankAccountFormStep {
             this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
-                    if (response.data.bank_accounts.length > 0) {
-                        // Get the latest bank account (last in array)
-                        const bankAccounts = response.data.bank_accounts;
-                        const latestBankAccount = bankAccounts[bankAccounts.length - 1];
-                        this.bankAccount = new BankAccount(latestBankAccount);
-                        this.isAddingNewBankAccount = false;
-                    }
-                    else {
-                        this.bankAccount = new BankAccount({});
-                        this.bankAccount.business_id = this.businessId;
-                    }
-                    this.existingDocuments = response.data.documents;
-                    this.bankAccountVerification = response.data.settings.bank_account_verification === true;
-                    this.platformAccountId = response.data.platform_account_id;
+                    this.processBusinessResponse(response.data);
+                    this.determineViewMode();
                 },
                 onError: ({ error, code, severity }) => {
                     this.errorEvent.emit({
@@ -79,24 +65,20 @@ export class BusinessBankAccountFormStep {
             });
         };
         this.handleChangeBankAccount = () => {
-            this.isAddingNewBankAccount = true;
+            this.viewMode = this.plaidAvailable ? 'plaid' : 'manual';
             this.documentData = new EntityDocumentStorage();
-            // Reset to Plaid if available when changing bank account
-            this.usePlaidVerification = this.bankAccountVerification && !!this.platformAccountId;
             this.initializeFormController();
         };
         this.handleCancel = () => {
-            this.isAddingNewBankAccount = false;
+            this.viewMode = this.existingBankAccount ? 'readonly' : 'plaid';
             this.documentData = new EntityDocumentStorage();
-            // Reset toggle state when canceling
-            this.usePlaidVerification = true;
             this.initializeFormController();
         };
         this.handleToggleToManualEntry = () => {
-            this.usePlaidVerification = false;
+            this.viewMode = 'manual';
         };
         this.handleToggleToPlaidVerification = () => {
-            this.usePlaidVerification = true;
+            this.viewMode = 'plaid';
         };
         this.handleSaveBankAccount = async () => {
             this.formController.validateAndSubmit(() => {
@@ -173,12 +155,10 @@ export class BusinessBankAccountFormStep {
         this.formLoading.emit(newValue);
     }
     async validateAndSubmit({ onSuccess }) {
-        if (this.existingBankAccount && !this.isAddingNewBankAccount) {
-            // If a bank account already exists and we're not adding a new one, skip bank account posting; proceed directly to document upload
+        if (this.viewMode === 'readonly') {
             this.sendData(onSuccess);
         }
         else {
-            // If bank account is new, validate form inputs (bank account fields), then proceed
             this.formController.validateAndSubmit(() => this.sendData(onSuccess));
         }
     }
@@ -227,24 +207,48 @@ export class BusinessBankAccountFormStep {
         var _a;
         return !!((_a = this.bankAccount) === null || _a === void 0 ? void 0 : _a.id);
     }
-    get showReadOnlyView() {
-        return this.existingBankAccount && !this.isAddingNewBankAccount;
+    get plaidAvailable() {
+        return this.bankAccountVerification && !!this.platformAccountId;
+    }
+    get showCancel() {
+        return this.bankAccountVerification || this.existingBankAccount;
+    }
+    processBusinessResponse(data) {
+        const { bank_accounts, documents, settings, platform_account_id } = data;
+        if (bank_accounts.length > 0) {
+            this.bankAccount = new BankAccount(bank_accounts[bank_accounts.length - 1]);
+        }
+        else {
+            this.bankAccount = new BankAccount({});
+            this.bankAccount.business_id = this.businessId;
+        }
+        this.existingDocuments = documents;
+        this.bankAccountVerification = settings.bank_account_verification === true;
+        this.platformAccountId = platform_account_id;
+    }
+    determineViewMode() {
+        if (this.existingBankAccount) {
+            this.viewMode = 'readonly';
+        }
+        else if (this.plaidAvailable) {
+            this.viewMode = 'plaid';
+        }
+        else {
+            this.viewMode = 'manual';
+        }
     }
     async sendData(onSuccess) {
         try {
-            // Post bank account data if we're adding a new bank account
-            const bankAccountPosted = this.isAddingNewBankAccount ? await this.postBankAccountData() : true;
-            if (!bankAccountPosted) {
-                return;
+            if (this.viewMode === 'manual') {
+                const bankAccountPosted = await this.postBankAccountData();
+                if (!bankAccountPosted)
+                    return;
             }
-            // Post documents only after bank account was successfully created
             const documentsUploaded = await this.postBusinessDocuments();
-            if (!documentsUploaded) {
+            if (!documentsUploaded)
                 return;
-            }
-            // Refresh bank account data after successful save
-            if (this.isAddingNewBankAccount) {
-                this.isAddingNewBankAccount = false;
+            if (this.viewMode === 'manual') {
+                this.viewMode = 'readonly';
                 await this.refreshBankAccountData();
             }
             onSuccess();
@@ -289,17 +293,8 @@ export class BusinessBankAccountFormStep {
             this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
-                    const { data } = response;
-                    const { bank_accounts, documents, settings, platform_account_id } = data;
-                    if (bank_accounts.length > 0) {
-                        // Get the latest bank account (last in array)
-                        const bankAccounts = bank_accounts;
-                        const latestBankAccount = bankAccounts[bankAccounts.length - 1];
-                        this.bankAccount = new BankAccount(latestBankAccount);
-                    }
-                    this.existingDocuments = documents;
-                    this.bankAccountVerification = settings.bank_account_verification === true;
-                    this.platformAccountId = platform_account_id;
+                    this.processBusinessResponse(response.data);
+                    this.determineViewMode();
                     this.initializeFormController();
                 },
                 onError: ({ error, code, severity }) => {
@@ -337,17 +332,30 @@ export class BusinessBankAccountFormStep {
             this.isLoading = false;
         }
     }
+    renderBankAccountInputs(disabled) {
+        const defaultValue = this.formController.getInitialValues();
+        return this.country === CountryCode.CAN ? (h("bank-account-form-inputs-canada", { defaultValue: defaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: disabled })) : (h("bank-account-form-inputs", { defaultValue: defaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: disabled }));
+    }
+    renderReadonlyView() {
+        return (h("div", null, this.renderBankAccountInputs(true), h("div", { class: "mt-3" }, h(Button, { variant: "secondary", type: "button", onClick: this.handleChangeBankAccount, disabled: this.isLoading, part: buttonSecondary }, "Change Bank Account"))));
+    }
+    renderPlaidView() {
+        return (h("div", { class: "mt-3" }, h("plaid-verification", { authToken: this.authToken, accountId: this.platformAccountId, businessId: this.businessId, onPlaidVerificationSuccess: () => {
+                this.viewMode = 'readonly';
+                this.refreshBankAccountData();
+            } }), h("div", { class: "mt-3" }, h(Button, { type: "button", variant: "link", className: "p-0", onClick: this.handleToggleToManualEntry, disabled: this.isLoading, part: buttonLink }, "Enter bank details manually (document upload required)"))));
+    }
+    renderManualEntryView() {
+        return (h("div", null, this.plaidAvailable && (h("div", { class: "mb-3" }, h(Button, { type: "button", variant: "secondary", onClick: this.handleToggleToPlaidVerification, disabled: this.isLoading, part: buttonSecondary }, "Link bank account with Plaid instead"))), this.renderBankAccountInputs(false), h("div", { class: "mt-3 d-flex gap-2" }, this.showCancel && (h(Button, { variant: "secondary", type: "button", onClick: this.handleCancel, disabled: this.isLoading, part: buttonSecondary }, "Cancel")), h(Button, { variant: "primary", type: "button", onClick: this.handleSaveBankAccount, disabled: this.isLoading, isLoading: this.isLoading }, "Save Bank Account"))));
+    }
+    renderDocumentUploads() {
+        return (h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles })));
+    }
     render() {
-        const bankAccountDefaultValue = this.formController.getInitialValues();
-        const shouldShowPlaidVerification = this.bankAccountVerification && this.platformAccountId;
         if (this.isLoading) {
             return h(PaymentProvisioningLoading, null);
         }
-        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { class: "mt-2" }), shouldShowPlaidVerification && this.usePlaidVerification && !this.showReadOnlyView && (h("div", { class: "mt-3" }, h("plaid-verification", { authToken: this.authToken, accountId: this.platformAccountId, businessId: this.businessId, onPlaidVerificationSuccess: () => {
-                // Refresh bank account data after successful Plaid verification
-                this.isAddingNewBankAccount = false;
-                this.refreshBankAccountData();
-            } }), h("div", { class: "mt-3" }, h(Button, { type: "button", variant: "link", onClick: this.handleToggleToManualEntry, disabled: this.isLoading, part: buttonLink }, "Enter bank details manually (document upload required)")))), (!this.usePlaidVerification || this.showReadOnlyView) && (h("div", null, shouldShowPlaidVerification && !this.usePlaidVerification && !this.showReadOnlyView && (h("div", { class: "mb-3" }, h(Button, { type: "button", variant: "secondary", onClick: this.handleToggleToPlaidVerification, disabled: this.isLoading, part: buttonSecondary }, "Link bank account with Plaid instead"))), this.country === CountryCode.CAN ? (h("bank-account-form-inputs-canada", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.showReadOnlyView })) : (h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.showReadOnlyView })))), this.showReadOnlyView && (h("div", { class: "mt-3" }, h(Button, { variant: "secondary", type: "button", onClick: this.handleChangeBankAccount, disabled: this.isLoading, part: buttonSecondary }, "Change Bank Account"))), (!this.existingBankAccount || this.isAddingNewBankAccount) && !this.usePlaidVerification && (h("div", { class: "mt-3 d-flex gap-2" }, this.isAddingNewBankAccount && (h(Button, { variant: "secondary", type: "button", onClick: this.handleCancel, disabled: this.isLoading, part: buttonSecondary }, "Cancel")), h(Button, { variant: "primary", type: "button", onClick: this.handleSaveBankAccount, disabled: this.isLoading, isLoading: this.isLoading }, "Save Bank Account")))), (!this.usePlaidVerification || this.showReadOnlyView) && (h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles })))));
+        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { class: "mt-2" }), this.viewMode === 'readonly' && this.renderReadonlyView(), this.viewMode === 'plaid' && this.renderPlaidView(), this.viewMode === 'manual' && this.renderManualEntryView()), this.viewMode !== 'plaid' && this.renderDocumentUploads()));
     }
     static get is() { return "justifi-business-bank-account-form-step"; }
     static get properties() {
@@ -444,14 +452,13 @@ export class BusinessBankAccountFormStep {
             "existingDocuments": {},
             "documentData": {},
             "isLoading": {},
-            "isAddingNewBankAccount": {},
+            "viewMode": {},
             "getBusiness": {},
             "postBankAccount": {},
             "postDocumentRecord": {},
             "postDocument": {},
             "bankAccountVerification": {},
-            "platformAccountId": {},
-            "usePlaidVerification": {}
+            "platformAccountId": {}
         };
     }
     static get events() {

package/dist/collection/components/business-forms/payment-provisioning/plaid-verification/plaid-verification.js

@@ -3,7 +3,6 @@ import { Button, StyledHost } from "../../../../ui-components";
 import { PlaidService } from "../../../../api/services/plaid.service";
 import { ComponentErrorSeverity } from "../../../../api/ComponentError";
 import { PlaidErrorCodes, PLAID_ERROR_MESSAGES, PLAID_ERROR_SEVERITY, } from "../../../../api/Plaid";
-import plaidLogoSvg from "../../../../assets/plaid-icon.svg";
 import { buttonPrimary } from "../../../../styles/parts";
 export class PlaidVerification {
     constructor() {
@@ -309,13 +308,7 @@ export class PlaidVerification {
             }
             return null;
         };
-        const plaidLogo = (h("img", { class: "plaid-logo-img", src: plaidLogoSvg, alt: "Plaid", title: "Plaid", style: {
-                display: 'inline',
-                width: '20px',
-                height: '20px',
-                marginLeft: '5px',
-                marginTop: '-2px',
-            } }));
+        const plaidLogo = (h("svg", { class: "plaid-logo-img", height: "20", width: "20", viewBox: "0 0 28 29", xmlns: "http://www.w3.org/2000/svg", style: { display: 'inline', marginLeft: '5px', marginRight: '5px', marginTop: '-2px' } }, h("g", { fill: "#fff", "fill-rule": "evenodd" }, h("path", { d: "M25.7629 26.2628L28 17.5309L24.9691 14.5001L27.9999 11.4691L25.7628 2.73706L17.0309 0.5L14.0001 3.531L10.969 0.50014L2.23706 2.73734L0 11.4691L3.03128 14.4999L0.00014 17.531L2.2372 26.2629L10.9691 28.5L14.0001 25.469L17.031 28.4999L25.7629 26.2628ZM15.7321 23.7371L18.6186 20.8505L22.2912 24.5233L17.6956 25.7007L15.7321 23.7371ZM11.1136 9.88154L14.0003 6.99502L16.8868 9.8814L14.0001 12.7679L11.1136 9.88154ZM12.2682 14.5L9.38154 17.3865L6.49502 14.5L9.38154 11.6135L12.2682 14.5ZM18.6187 11.6133L21.5053 14.5L18.6186 17.3865L15.7321 14.5L18.6187 11.6133ZM16.8867 19.1186L14.0001 22.0051L11.1135 19.1185L14.0001 16.2319L16.8867 19.1186ZM10.3044 25.7007L5.70864 24.5233L9.38154 20.8504L12.2682 23.7371L10.3044 25.7007ZM4.76308 16.2319L7.6496 19.1185L3.9767 22.7914L2.7993 18.1957L4.76308 16.2319ZM3.9767 6.20836L7.64974 9.8814L4.76308 12.7681L2.7993 10.8041L3.9767 6.20836ZM12.2683 5.26294L9.38168 8.1496L5.70892 4.4767L10.3047 3.2993L12.2683 5.26294ZM17.6959 3.2993L22.2915 4.4767L18.6186 8.14946L15.7321 5.26294L17.6959 3.2993ZM23.2372 12.7681L20.3505 9.8814L24.0233 6.20878L25.2007 10.8046L23.2372 12.7681ZM24.0233 22.7914L20.3505 19.1186L23.2372 16.2321L25.2007 18.1957L24.0233 22.7914Z" }))));
         return (h(StyledHost, null, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", null, h("div", { class: "mb-3" }, h(Button, { variant: "primary", type: "button", onClick: (event) => { event.preventDefault(); this.openPlaidLink(); }, disabled: this.isLoading, part: buttonPrimary }, "Connect with Plaid ", plaidLogo, " (instant verification)")), renderErrorState(), renderStatusState())));
     }
     static get is() { return "plaid-verification"; }

package/dist/collection/components/modular-checkout/sub-components/apple-pay.js

@@ -1,5 +1,5 @@
 import { h, } from "@stencil/core";
-import { ApplePayService } from "../../../api/services/apple-pay.service";
+import { ApplePayService, ApplePayServiceErrorCode } from "../../../api/services/apple-pay.service";
 import { ApplePayButtonType, ApplePayButtonStyle, ApplePayHelpers, ApplePayMerchantCapability, } from "../../../api/ApplePay";
 import { StyledHost } from "../../../ui-components";
 import ApplePaySkeleton from "./apple-pay-skeleton";
@@ -27,7 +27,7 @@ export class ApplePay {
         this.isConfigValid = true;
         this.error = null;
         this.handleApplePayClick = async () => {
-            var _a, _b;
+            var _a, _b, _c;
             if (this.isProcessing || this.disabled || !this.isAvailable) {
                 return;
             }
@@ -66,13 +66,18 @@ export class ApplePay {
                 }
             }
             catch (error) {
-                const errorMessage = error instanceof Error ? error.message : "Payment failed";
-                this.error = errorMessage;
-                this.applePayError.emit({ error: errorMessage, code: ApplePay.ErrorCode.PAYMENT_FAILED });
-                this.applePayCompleted.emit({
-                    success: false,
-                    error: errorMessage,
-                });
+                if (((_c = error === null || error === void 0 ? void 0 : error.error) === null || _c === void 0 ? void 0 : _c.code) === ApplePayServiceErrorCode.USER_CANCELLED) {
+                    this.applePayCancelled.emit();
+                }
+                else {
+                    const errorMessage = error instanceof Error ? error.message : "Payment failed";
+                    this.error = errorMessage;
+                    this.applePayError.emit({ error: errorMessage, code: ApplePay.ErrorCode.PAYMENT_FAILED });
+                    this.applePayCompleted.emit({
+                        success: false,
+                        error: errorMessage,
+                    });
+                }
             }
             finally {
                 this.isProcessing = false;

package/dist/collection/components/payout-details/payout-details-core.js

@@ -64,9 +64,9 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '6720c8a6f5919d8f563cd9e21a93d64de0916060' }, this.loading && h(PayoutDetailsLoading, { key: '26214ad3e6d784f4810155addcf19b9e4b869269' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'fd810d7c04562bd4aa21681b9473bf32c84bb368', errorMessage: this.errorMessage }, h(EntityHeadInfo, { key: '2d379a2836fc98964b048a284eaa0d3b51f404fa', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '43b43e3c1d35bba3111c202310a2a96f1a916e9f', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '68203b090ad2aab3aaf0a2070a0a5b5a8f471fc0', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd427383d0b66287d36ec142b3edfdf89d1ff53d6', title: "ID", value: this.payout.id }), h("div", { key: '172eaee1f1f66c361e366e8c1422d158c44991ca', class: "m-4" }, h(Button, { key: 'be4f35824fb23d0e4e8f388bba68cefe0815d2dc', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'c7fbea5e32197a274996d40923241edb13f3798d', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '9dad47de35bac8d7cb45607056da12556fe681b3', sectionTitle: "Details" }), h("div", { key: 'e889bfde7c758b6045859799e19b60ef7022b062', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '88fdcd57e8c98ec293c31da382ce6bfe00dc3a84', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '5968c19435286ef71d29ee97bf73c54662689b8b', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '87b93c3c3d5bd773f705635a1c3a8271561c908f', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '5c112d61cefa291561da07223de757c689a83d0f', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '782fdaf83dccb429e188f7b640a89ccdbba6ef70', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '3780d13b8a9e293cfe2065c3743f39b09ea5fdd4', sectionTitle: "Account" }), h("div", { key: 'b8541c8d22964b50187d6b2a048d371980a25140', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '59043863ae4f2a168d4e0f03ffe97dbe34cb9c1b', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: 'd8e556e3c65efff35720771efafee8481a891189', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '7e144e30873a684b734260006d0e65bd19bf4401', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'fa2c09668f30f9be27c0398ea3ea3e2c8ddf2b46', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '209363e18d5675dd248adc1e8fa9e0c754868729', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: 'f0cfa34d7e523499e83e8b577c9ee757bbfb5652', sectionTitle: 'Metadata' }),
-            h("div", { key: 'b06f65ecb6632f47d838bf834be4b4daa66ec8b8', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'c5bcce86c13de75311b8f145f63f045fe13db17d', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: '6720c8a6f5919d8f563cd9e21a93d64de0916060' }, this.loading && h(PayoutDetailsLoading, { key: '26214ad3e6d784f4810155addcf19b9e4b869269' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'fd810d7c04562bd4aa21681b9473bf32c84bb368', errorMessage: this.errorMessage }, h(EntityHeadInfo, { key: '2d379a2836fc98964b048a284eaa0d3b51f404fa', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '43b43e3c1d35bba3111c202310a2a96f1a916e9f', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '68203b090ad2aab3aaf0a2070a0a5b5a8f471fc0', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd427383d0b66287d36ec142b3edfdf89d1ff53d6', title: "ID", value: this.payout.id }), h("div", { key: '172eaee1f1f66c361e366e8c1422d158c44991ca', class: "m-4" }, h(Button, { key: '59e3f95f23d29681bb36b297e954140d3e056474', variant: "outline-secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'a32accc21bcf9c8b7db906b62fc0dc179d126e10', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '46c8fa58f696bed5628a129b8c956aa3ccc7a8a9', sectionTitle: "Details" }), h("div", { key: '43cea4c35521d0ec45b2eb73f0ec3aa4cbe076bb', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'e19c95cbced986d7e0aa7dd5a59d0e3425c1a492', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'e64dbb1e230816f589600d97bece2aaecf7e3837', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '0009fb64dccd61d1941dc80c5613d54316e6e8fc', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '933746728601556d77e135f031d5bbce4227beb3', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'a2dac791b686fc7ca35da5a51a64c5e47fb94fa6', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'f2334d9d641f6f096a7fa4d3d04fe496c19fcf2d', sectionTitle: "Account" }), h("div", { key: 'f76e30ebbe32c0d37ebcf205371b5e40cd4be768', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '0878dca0ec871ce45a3bf548fd987596d98a2bb3', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: '7c751efac65871cdc8041cb0645cb11f30e9e188', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'e4a169e43cda405be68e07ec191e981f8fb32d13', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '7740bd18dca90ec0f64de729712a49e4c510056a', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'a7798c561869ebfa212b724af432f304654d4c3f', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: '4e2a9585769fc5ebe1dc57e78781568bad07d004', sectionTitle: 'Metadata' }),
+            h("div", { key: '26258eaf4e250e200cf4515c283ef1fa6085fb88', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'fe30682ce11c5a7dc9d401ba7af42b1a33ce437f', metadata: this.payout.metadata }))
         ])))));
     }
     static get is() { return "payout-details-core"; }

package/dist/collection/styles/parts.js

@@ -20,7 +20,14 @@ export const button = `button ${text}`;
 export const buttonPrimary = `button-primary ${button}`;
 export const buttonSecondary = `button-secondary ${button}`;
 export const buttonDanger = `button-danger ${button}`;
+export const buttonSuccess = `button-success ${button}`;
+export const buttonWarning = `button-warning ${button}`;
+export const buttonInfo = `button-info ${button}`;
+export const buttonLight = `button-light ${button}`;
+export const buttonDark = `button-dark ${button}`;
 export const buttonLink = `button-link ${button}`;
+export const buttonOutlinePrimary = `button-outline-primary ${button}`;
+export const buttonOutlineSecondary = `button-outline-secondary ${button}`;
 export const buttonLoading = `button-loading`;
 export const buttonDisabled = `button-disabled ${button}`;
 // Input

package/dist/collection/ui-components/button.js

@@ -1,13 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { h } from "@stencil/core";
 import { ButtonSpinner } from "./button-spinner";
-import { buttonLoading, buttonPrimary, buttonSecondary } from "../styles/parts";
+import { buttonLoading, buttonPrimary, buttonSecondary, buttonSuccess, buttonDanger, buttonWarning, buttonInfo, buttonLight, buttonDark, buttonLink, buttonOutlinePrimary, buttonOutlineSecondary, } from "../styles/parts";
 export const Button = (props, children) => {
+    const { variant, isLoading, className, class: classProp, clickHandler } = props, rest = __rest(props, ["variant", "isLoading", "className", "class", "clickHandler"]);
     const variantToButton = {
         primary: buttonPrimary,
         secondary: buttonSecondary,
+        success: buttonSuccess,
+        danger: buttonDanger,
+        warning: buttonWarning,
+        info: buttonInfo,
+        light: buttonLight,
+        dark: buttonDark,
+        link: buttonLink,
+        'outline-primary': buttonOutlinePrimary,
+        'outline-secondary': buttonOutlineSecondary,
     };
     const getCSSParts = () => {
-        return `${variantToButton[props.variant]} ${(props.isLoading) ? buttonLoading : ''}`;
+        return `${variantToButton[variant]} ${isLoading ? buttonLoading : ''}`;
     };
-    return (h("button", Object.assign({ class: `btn btn-${props.variant}`, onClick: props.clickHandler, part: getCSSParts() }, props), props.isLoading ? ButtonSpinner() : children));
+    const extraClasses = className || classProp || '';
+    const computedClass = `btn btn-${variant}${extraClasses ? ` ${extraClasses}` : ''}`;
+    return (h("button", Object.assign({ class: computedClass, onClick: clickHandler, part: getCSSParts() }, rest), isLoading ? ButtonSpinner() : children));
 };

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-13T17:59:42",
+  "timestamp": "2026-02-19T16:24:51",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.3",
@@ -7590,25 +7590,22 @@
         "justifi-payment-provisioning-form-steps"
       ],
       "dependencies": [
-        "form-control-tooltip",
-        "plaid-verification",
         "bank-account-form-inputs-canada",
         "bank-account-form-inputs",
+        "plaid-verification",
+        "form-control-tooltip",
         "business-documents-on-file",
         "bank-account-document-form-inputs"
       ],
       "dependencyGraph": {
         "justifi-business-bank-account-form-step": [
-          "form-control-tooltip",
-          "plaid-verification",
           "bank-account-form-inputs-canada",
           "bank-account-form-inputs",
+          "plaid-verification",
+          "form-control-tooltip",
           "business-documents-on-file",
           "bank-account-document-form-inputs"
         ],
-        "form-control-tooltip": [
-          "custom-popper"
-        ],
         "bank-account-form-inputs-canada": [
           "bank-account-read-only-value",
           "form-control-text",
@@ -7617,6 +7614,9 @@
         "form-control-text": [
           "form-control-tooltip"
         ],
+        "form-control-tooltip": [
+          "custom-popper"
+        ],
         "form-control-select": [
           "form-control-tooltip"
         ],
@@ -14744,10 +14744,10 @@
           "justifi-identity-address-form"
         ],
         "justifi-business-bank-account-form-step": [
-          "form-control-tooltip",
-          "plaid-verification",
           "bank-account-form-inputs-canada",
           "bank-account-form-inputs",
+          "plaid-verification",
+          "form-control-tooltip",
           "business-documents-on-file",
           "bank-account-document-form-inputs"
         ],
@@ -15099,10 +15099,10 @@
           "justifi-identity-address-form"
         ],
         "justifi-business-bank-account-form-step": [
-          "form-control-tooltip",
-          "plaid-verification",
           "bank-account-form-inputs-canada",
           "bank-account-form-inputs",
+          "plaid-verification",
+          "form-control-tooltip",
           "business-documents-on-file",
           "bank-account-document-form-inputs"
         ],
@@ -15591,10 +15591,10 @@
           "justifi-identity-address-form"
         ],
         "justifi-business-bank-account-form-step": [
-          "form-control-tooltip",
-          "plaid-verification",
           "bank-account-form-inputs-canada",
           "bank-account-form-inputs",
+          "plaid-verification",
+          "form-control-tooltip",
           "business-documents-on-file",
           "bank-account-document-form-inputs"
         ],

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-CV0Pyo1O.js';
-import { c as DetailItem, D as DetailSectionTitle } from './utils-BSpK1eMX.js';
+import { c as DetailItem, D as DetailSectionTitle } from './utils-BGbtbDiV.js';
 import { n as isEmptyObject, s as snakeCaseToHumanReadable, o as formatMediumDate } from './utils-7bp92NC7.js';
-import './parts-C4FLe2pT.js';
+import './parts-c8J1gsDg.js';
 import './dinero-HXpYMWUU.js';
 
 const AdditionalQuestionsDetails = class {

package/dist/esm/{badge-AZ7Z3PKH.js → badge-BfWXAKIJ.js}

@@ -1,5 +1,5 @@
 import { h } from './index-CV0Pyo1O.js';
-import { L as badgeDark, M as badgeLight, N as badgeInfo, O as badgeWarning, P as badgeDanger, Q as badgeSuccess, R as badgeSecondary, S as badgePrimary, T as badge } from './parts-C4FLe2pT.js';
+import { L as badgeDark, M as badgeLight, N as badgeInfo, O as badgeWarning, P as badgeDanger, Q as badgeSuccess, R as badgeSecondary, S as badgePrimary, T as badge } from './parts-c8J1gsDg.js';
 
 var BadgeVariant;
 (function (BadgeVariant) {

package/dist/esm/bank-account-document-form-inputs_9.entry.js

@@ -9,19 +9,19 @@ import './Dispute-BH0Xfn-F.js';
 import { a as bankAccountTypeOptions } from './business-form-options-DRalxlqN.js';
 import './event-types-XYgDHrVL.js';
 import { n as numberOnlyHandler } from './utils-BnjCmwMr.js';
-import { H as text, a5 as card, J as heading2, av as table, V as tableHeadCell, aE as tableCell, _ as input, $ as label, X as inputInvalid, Y as inputDisabled, Z as inputFocused, am as buttonSecondary, an as buttonPrimary } from './parts-C4FLe2pT.js';
+import { H as text, a5 as card, J as heading2, aD as table, V as tableHeadCell, aM as tableCell, _ as input, $ as label, X as inputInvalid, Y as inputDisabled, Z as inputFocused, au as buttonSecondary, av as buttonPrimary } from './parts-c8J1gsDg.js';
 import { s as snakeCaseToHumanReadable, e as formatDate, d as formatTime } from './utils-7bp92NC7.js';
-import { S as Skeleton } from './skeleton-C162KC3u.js';
+import { S as Skeleton } from './skeleton-DzBAY0bs.js';
 import './event-types-CZfYo5-1.js';
-import { F as FormControlErrorText } from './form-control-error-text-xEskXF-M.js';
+import { F as FormControlErrorText } from './form-control-error-text-D5B0Wy4Q.js';
 import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers-1lVyzImK.js';
 import { P as PHONE_MASKS, I as IDENTITY_MASKS } from './form-input-masks-CVaOFfrI.js';
 import { c as countryLabels } from './country-config-P042rrI3.js';
 import { c as makeGetIdentity, d as makePatchIdentity, e as makePostIdentity } from './payment-provisioning-actions-CBvplwPf.js';
 import { I as IdentityService } from './business.service-CS-wQJoN.js';
-import { B as Button } from './button-DOkTCYSa.js';
+import { B as Button } from './button-DoF-zpiW.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
-import { P as PlaidService, p as plaidIconSvg } from './plaid-icon-B7a1QC7F.js';
+import { P as PlaidService } from './plaid.service-C59iS7tB.js';
 import './index-cDVGjRkU.js';
 import './utils-BeQLScSm.js';
 import './Api-CLZVsXZg.js';
@@ -507,13 +507,7 @@ const PlaidVerification = class {
             }
             return null;
         };
-        const plaidLogo = (h("img", { class: "plaid-logo-img", src: plaidIconSvg, alt: "Plaid", title: "Plaid", style: {
-                display: 'inline',
-                width: '20px',
-                height: '20px',
-                marginLeft: '5px',
-                marginTop: '-2px',
-            } }));
+        const plaidLogo = (h("svg", { class: "plaid-logo-img", height: "20", width: "20", viewBox: "0 0 28 29", xmlns: "http://www.w3.org/2000/svg", style: { display: 'inline', marginLeft: '5px', marginRight: '5px', marginTop: '-2px' } }, h("g", { fill: "#fff", "fill-rule": "evenodd" }, h("path", { d: "M25.7629 26.2628L28 17.5309L24.9691 14.5001L27.9999 11.4691L25.7628 2.73706L17.0309 0.5L14.0001 3.531L10.969 0.50014L2.23706 2.73734L0 11.4691L3.03128 14.4999L0.00014 17.531L2.2372 26.2629L10.9691 28.5L14.0001 25.469L17.031 28.4999L25.7629 26.2628ZM15.7321 23.7371L18.6186 20.8505L22.2912 24.5233L17.6956 25.7007L15.7321 23.7371ZM11.1136 9.88154L14.0003 6.99502L16.8868 9.8814L14.0001 12.7679L11.1136 9.88154ZM12.2682 14.5L9.38154 17.3865L6.49502 14.5L9.38154 11.6135L12.2682 14.5ZM18.6187 11.6133L21.5053 14.5L18.6186 17.3865L15.7321 14.5L18.6187 11.6133ZM16.8867 19.1186L14.0001 22.0051L11.1135 19.1185L14.0001 16.2319L16.8867 19.1186ZM10.3044 25.7007L5.70864 24.5233L9.38154 20.8504L12.2682 23.7371L10.3044 25.7007ZM4.76308 16.2319L7.6496 19.1185L3.9767 22.7914L2.7993 18.1957L4.76308 16.2319ZM3.9767 6.20836L7.64974 9.8814L4.76308 12.7681L2.7993 10.8041L3.9767 6.20836ZM12.2683 5.26294L9.38168 8.1496L5.70892 4.4767L10.3047 3.2993L12.2683 5.26294ZM17.6959 3.2993L22.2915 4.4767L18.6186 8.14946L15.7321 5.26294L17.6959 3.2993ZM23.2372 12.7681L20.3505 9.8814L24.0233 6.20878L25.2007 10.8046L23.2372 12.7681ZM24.0233 22.7914L20.3505 19.1186L23.2372 16.2321L25.2007 18.1957L24.0233 22.7914Z" }))));
         return (h(StyledHost, null, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", null, h("div", { class: "mb-3" }, h(Button, { variant: "primary", type: "button", onClick: (event) => { event.preventDefault(); this.openPlaidLink(); }, disabled: this.isLoading, part: buttonPrimary }, "Connect with Plaid ", plaidLogo, " (instant verification)")), renderErrorState(), renderStatusState())));
     }
 };

package/dist/esm/bank-account-form.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, H as Host } from './index-CV0Pyo1O.js';
-import { S as Skeleton } from './skeleton-C162KC3u.js';
+import { S as Skeleton } from './skeleton-DzBAY0bs.js';
 import { w as waitForConfig, c as configState } from './config-state-kKn89dp1.js';
 import { b as generateTabId } from './utils-7bp92NC7.js';
-import './parts-C4FLe2pT.js';
+import './parts-c8J1gsDg.js';
 import './index-cDVGjRkU.js';
 import './dinero-HXpYMWUU.js';
 

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

@@ -1,9 +1,9 @@
 import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
-import { E as ErrorState } from './utils-BSpK1eMX.js';
+import { E as ErrorState } from './utils-BGbtbDiV.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import { S as Skeleton } from './skeleton-C162KC3u.js';
-import './parts-C4FLe2pT.js';
+import { S as Skeleton } from './skeleton-DzBAY0bs.js';
+import './parts-c8J1gsDg.js';
 
 const BusinessDetailsLoading = () => {
     const Block = () => (h("div", { class: "mt-5" }, h(Skeleton, { width: "40%", height: "1.5rem" }), h("hr", null), h("div", { class: "row g-3" }, h("div", { class: "col-12 col-md-6" }, h(Skeleton, null), h(Skeleton, null), h(Skeleton, null)), h("div", { class: "col-12 col-md-6" }, h(Skeleton, null), h(Skeleton, null), h(Skeleton, null)))));

package/dist/esm/button-DoF-zpiW.js

@@ -0,0 +1,41 @@
+import { h } from './index-CV0Pyo1O.js';
+import { am as buttonOutlineSecondary, an as buttonOutlinePrimary, a4 as buttonLink, ao as buttonDark, ap as buttonLight, aq as buttonInfo, ar as buttonWarning, as as buttonDanger, at as buttonSuccess, au as buttonSecondary, av as buttonPrimary, aw as buttonLoading } from './parts-c8J1gsDg.js';
+
+const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" }, h("span", { class: "visually-hidden" }, "Loading...")));
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const Button = (props, children) => {
+    const { variant, isLoading, className, class: classProp, clickHandler } = props, rest = __rest(props, ["variant", "isLoading", "className", "class", "clickHandler"]);
+    const variantToButton = {
+        primary: buttonPrimary,
+        secondary: buttonSecondary,
+        success: buttonSuccess,
+        danger: buttonDanger,
+        warning: buttonWarning,
+        info: buttonInfo,
+        light: buttonLight,
+        dark: buttonDark,
+        link: buttonLink,
+        'outline-primary': buttonOutlinePrimary,
+        'outline-secondary': buttonOutlineSecondary,
+    };
+    const getCSSParts = () => {
+        return `${variantToButton[variant]} ${isLoading ? buttonLoading : ''}`;
+    };
+    const extraClasses = className || classProp || '';
+    const computedClass = `btn btn-${variant}${extraClasses ? ` ${extraClasses}` : ''}`;
+    return (h("button", Object.assign({ class: computedClass, onClick: clickHandler, part: getCSSParts() }, rest), isLoading ? ButtonSpinner() : children));
+};
+
+export { Button as B };

package/dist/esm/card-form.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, H as Host } from './index-CV0Pyo1O.js';
-import { S as Skeleton } from './skeleton-C162KC3u.js';
+import { S as Skeleton } from './skeleton-DzBAY0bs.js';
 import { w as waitForConfig, c as configState } from './config-state-kKn89dp1.js';
 import { b as generateTabId } from './utils-7bp92NC7.js';
-import './parts-C4FLe2pT.js';
+import './parts-c8J1gsDg.js';
 import './index-cDVGjRkU.js';
 import './dinero-HXpYMWUU.js';
 

package/dist/esm/{check-pkg-version-BVLXSZXz.js → check-pkg-version-QOngucT4.js}

@@ -1,4 +1,4 @@
-import { p as packageJson } from './package-Bjv3eJBk.js';
+import { p as packageJson } from './package-Cc6518FT.js';
 import { A as Api } from './Api-CLZVsXZg.js';
 import './ComponentError-Cjcsf8ku.js';
 import './Plaid-Cmyilr-q.js';