@justifi/webcomponents 6.0.0-rc.5 → 6.0.0-rc.6

package/dist/collection/components/modular-checkout/sub-components/plaid-payment-method.js

@@ -0,0 +1,864 @@
+import { h } from "@stencil/core";
+import { radioListItem } from "../../../styles/parts";
+import { checkoutStore, onChange } from "../../../store/checkout.store";
+import { StyledHost } from "../../../ui-components";
+import plaidLogoSvg from "../../../assets/plaid-icon.svg";
+import { PlaidService } from "../../../api/services/plaid.service";
+import { ComponentErrorSeverity } from "../../../api/ComponentError";
+import { PAYMENT_METHODS } from "../ModularCheckout";
+// Plaid-specific error codes
+export var PlaidErrorCodes;
+(function (PlaidErrorCodes) {
+    PlaidErrorCodes["PLAID_SDK_LOAD_FAILED"] = "plaid-sdk-load-failed";
+    PlaidErrorCodes["PLAID_LINK_INIT_FAILED"] = "plaid-link-init-failed";
+    PlaidErrorCodes["PLAID_LINK_TOKEN_FAILED"] = "plaid-link-token-failed";
+    PlaidErrorCodes["PLAID_AUTHENTICATION_FAILED"] = "plaid-authentication-failed";
+    PlaidErrorCodes["PLAID_BANK_NOT_SUPPORTED"] = "plaid-bank-not-supported";
+    PlaidErrorCodes["PLAID_TOKEN_EXPIRED"] = "plaid-token-expired";
+    PlaidErrorCodes["PLAID_NETWORK_ERROR"] = "plaid-network-error";
+    PlaidErrorCodes["PLAID_USER_CANCELLED"] = "plaid-user-cancelled";
+    PlaidErrorCodes["PLAID_TIMEOUT"] = "plaid-timeout";
+    PlaidErrorCodes["PLAID_INVALID_CREDENTIALS"] = "plaid-invalid-credentials";
+    PlaidErrorCodes["PLAID_ACCOUNT_LOCKED"] = "plaid-account-locked";
+    PlaidErrorCodes["PLAID_MAINTENANCE"] = "plaid-maintenance";
+    PlaidErrorCodes["PLAID_RATE_LIMITED"] = "plaid-rate-limited";
+})(PlaidErrorCodes || (PlaidErrorCodes = {}));
+// Plaid error message mapping
+const PLAID_ERROR_MESSAGES = {
+    [PlaidErrorCodes.PLAID_SDK_LOAD_FAILED]: 'Unable to load Plaid. Please refresh the page and try again.',
+    [PlaidErrorCodes.PLAID_LINK_INIT_FAILED]: 'Unable to initialize bank connection. Please try again.',
+    [PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED]: 'Unable to connect to bank service. Please try again.',
+    [PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED]: 'Bank authentication failed. Please try again.',
+    [PlaidErrorCodes.PLAID_BANK_NOT_SUPPORTED]: 'Your bank is not currently supported. Please try a different payment method.',
+    [PlaidErrorCodes.PLAID_TOKEN_EXPIRED]: 'Your bank session has expired. Please reconnect your account.',
+    [PlaidErrorCodes.PLAID_NETWORK_ERROR]: 'Network connection issue. Please check your internet connection and try again.',
+    [PlaidErrorCodes.PLAID_USER_CANCELLED]: 'Bank connection was cancelled. Click to try again.',
+    [PlaidErrorCodes.PLAID_TIMEOUT]: 'Bank connection timed out. Please try again.',
+    [PlaidErrorCodes.PLAID_INVALID_CREDENTIALS]: 'Invalid bank credentials. Please check your username and password.',
+    [PlaidErrorCodes.PLAID_ACCOUNT_LOCKED]: 'Your bank account is temporarily locked. Please contact your bank.',
+    [PlaidErrorCodes.PLAID_MAINTENANCE]: 'Bank service is temporarily unavailable. Please try again later.',
+    [PlaidErrorCodes.PLAID_RATE_LIMITED]: 'Too many connection attempts. Please wait a moment and try again.',
+};
+// Plaid error severity mapping
+const PLAID_ERROR_SEVERITY = {
+    [PlaidErrorCodes.PLAID_SDK_LOAD_FAILED]: ComponentErrorSeverity.ERROR,
+    [PlaidErrorCodes.PLAID_LINK_INIT_FAILED]: ComponentErrorSeverity.ERROR,
+    [PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED]: ComponentErrorSeverity.ERROR,
+    [PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED]: ComponentErrorSeverity.ERROR,
+    [PlaidErrorCodes.PLAID_BANK_NOT_SUPPORTED]: ComponentErrorSeverity.WARNING,
+    [PlaidErrorCodes.PLAID_TOKEN_EXPIRED]: ComponentErrorSeverity.WARNING,
+    [PlaidErrorCodes.PLAID_NETWORK_ERROR]: ComponentErrorSeverity.WARNING,
+    [PlaidErrorCodes.PLAID_USER_CANCELLED]: ComponentErrorSeverity.INFO,
+    [PlaidErrorCodes.PLAID_TIMEOUT]: ComponentErrorSeverity.WARNING,
+    [PlaidErrorCodes.PLAID_INVALID_CREDENTIALS]: ComponentErrorSeverity.ERROR,
+    [PlaidErrorCodes.PLAID_ACCOUNT_LOCKED]: ComponentErrorSeverity.ERROR,
+    [PlaidErrorCodes.PLAID_MAINTENANCE]: ComponentErrorSeverity.WARNING,
+    [PlaidErrorCodes.PLAID_RATE_LIMITED]: ComponentErrorSeverity.WARNING,
+};
+export class PlaidPaymentMethod {
+    constructor() {
+        this.isAuthenticating = false;
+        this.publicToken = null;
+        this.linkToken = null;
+        this.linkTokenId = null;
+        this.error = null;
+        this.plaidLink = null;
+        this.isSelected = false;
+        this.retryCount = 0;
+        this.isRetrying = false;
+        this.plaidService = new PlaidService();
+        this.maxRetries = 3;
+        this.retryDelay = 2000; // 2 seconds
+        this.timeoutId = null;
+        this.abortController = null;
+        this.hasLoggedDisabledWarning = false;
+        this.waitForStoreAndInitialize = () => {
+            // Check if store has necessary data
+            if (checkoutStore.authToken && checkoutStore.accountId && checkoutStore.checkoutId) {
+                this.initializePlaidLink();
+            }
+            else {
+                // Wait a bit and try again
+                setTimeout(() => {
+                    this.waitForStoreAndInitialize();
+                }, 100);
+            }
+        };
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            // Update local selection state
+            this.isSelected = true;
+            // Update store selection
+            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+            // Emit selection event
+            this.paymentMethodOptionSelected.emit(PAYMENT_METHODS.PLAID);
+            // If there's an error, clear it and try to initialize again
+            if (this.error) {
+                this.clearError();
+                this.waitForStoreAndInitialize();
+                return;
+            }
+            // If Plaid Link is ready and no public token exists, open Plaid Link
+            if (this.plaidLink && !this.publicToken && !this.isAuthenticating) {
+                this.openPlaidLink();
+            }
+        };
+        this.initializePlaidLink = async () => {
+            try {
+                // Check if Plaid is available globally
+                if (typeof window.Plaid === 'undefined') {
+                    this.handleError({
+                        code: PlaidErrorCodes.PLAID_SDK_LOAD_FAILED,
+                        message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                        severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                        retryable: true,
+                        userAction: 'Refresh the page and try again'
+                    });
+                    return;
+                }
+                // Get link token from backend
+                await this.getLinkToken();
+                if (!this.linkToken) {
+                    this.handleError({
+                        code: PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED,
+                        message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED],
+                        severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED],
+                        retryable: true,
+                        userAction: 'Click to try again'
+                    });
+                    return;
+                }
+                // Initialize Plaid Link
+                const Plaid = window.Plaid;
+                this.plaidLink = Plaid.create({
+                    token: this.linkToken,
+                    onSuccess: this.handlePlaidSuccess,
+                    onExit: this.handlePlaidExit,
+                    onEvent: this.handlePlaidEvent,
+                    onLoad: this.handlePlaidLoad,
+                });
+            }
+            catch (error) {
+                this.handleError({
+                    code: PlaidErrorCodes.PLAID_LINK_INIT_FAILED,
+                    message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_LINK_INIT_FAILED],
+                    severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_LINK_INIT_FAILED],
+                    originalError: error,
+                    retryable: true,
+                    userAction: 'Click to try again'
+                });
+            }
+        };
+        this.getLinkToken = async () => {
+            var _a, _b, _c, _d, _e;
+            try {
+                if (!checkoutStore.authToken || !checkoutStore.accountId) {
+                    this.handleError({
+                        code: PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED,
+                        message: 'Missing authentication. Please refresh the page and try again.',
+                        severity: ComponentErrorSeverity.ERROR,
+                        retryable: false,
+                        userAction: 'Refresh the page'
+                    });
+                    return;
+                }
+                // Create abort controller for timeout handling
+                this.abortController = new AbortController();
+                // Set timeout for the request
+                this.timeoutId = setTimeout(() => {
+                    var _a;
+                    (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+                }, 30000); // 30 second timeout
+                const response = await this.plaidService.getLinkToken(checkoutStore.authToken, checkoutStore.accountId, checkoutStore.checkoutId, this.abortController.signal);
+                // Clear timeout
+                if (this.timeoutId) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = null;
+                }
+                if (response.error) {
+                    const errorMessage = typeof response.error === 'string'
+                        ? response.error
+                        : response.error.message || 'Failed to get link token';
+                    throw new Error(errorMessage);
+                }
+                // Some backends may return an id along with the link token
+                this.linkToken = response.data.link_token;
+                // Try to capture link token id if present in envelope
+                this.linkTokenId = (response === null || response === void 0 ? void 0 : response.id) || ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.id) || null;
+            }
+            catch (error) {
+                // Clear timeout
+                if (this.timeoutId) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = null;
+                }
+                let errorCode = PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED;
+                let message = PLAID_ERROR_MESSAGES[errorCode];
+                let retryable = true;
+                // Handle specific error types
+                if (error.name === 'AbortError') {
+                    errorCode = PlaidErrorCodes.PLAID_TIMEOUT;
+                    message = PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = true;
+                }
+                else if (((_b = error.message) === null || _b === void 0 ? void 0 : _b.includes('network')) || ((_c = error.message) === null || _c === void 0 ? void 0 : _c.includes('fetch'))) {
+                    errorCode = PlaidErrorCodes.PLAID_NETWORK_ERROR;
+                    message = PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = true;
+                }
+                else if (((_d = error.message) === null || _d === void 0 ? void 0 : _d.includes('401')) || ((_e = error.message) === null || _e === void 0 ? void 0 : _e.includes('unauthorized'))) {
+                    errorCode = PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                    message = 'Authentication failed. Please refresh the page and try again.';
+                    retryable = false;
+                }
+                this.handleError({
+                    code: errorCode,
+                    message: message,
+                    severity: PLAID_ERROR_SEVERITY[errorCode],
+                    originalError: error,
+                    retryable,
+                    userAction: retryable ? 'Click to try again' : 'Refresh the page'
+                });
+            }
+        };
+        this.mapApiErrorToPlaidError = (apiError) => {
+            if (typeof apiError === 'string') {
+                if (apiError.includes('rate_limit'))
+                    return PlaidErrorCodes.PLAID_RATE_LIMITED;
+                if (apiError.includes('maintenance'))
+                    return PlaidErrorCodes.PLAID_MAINTENANCE;
+                if (apiError.includes('not_authenticated'))
+                    return PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+            }
+            if (apiError === null || apiError === void 0 ? void 0 : apiError.code) {
+                switch (apiError.code) {
+                    case 'rate_limited': return PlaidErrorCodes.PLAID_RATE_LIMITED;
+                    case 'maintenance': return PlaidErrorCodes.PLAID_MAINTENANCE;
+                    case 'not_authenticated': return PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                    case 'invalid_parameter': return PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED;
+                    default: return PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED;
+                }
+            }
+            return PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED;
+        };
+        this.openPlaidLink = () => {
+            if (this.plaidLink && this.linkToken) {
+                this.isAuthenticating = true;
+                this.clearError();
+                this.plaidLink.open();
+            }
+        };
+        this.handlePlaidSuccess = (publicToken, _metadata) => {
+            this.publicToken = publicToken;
+            this.isAuthenticating = false;
+            this.clearError();
+            this.retryCount = 0; // Reset retry count on success
+            // Ensure the component remains selected after successful authentication
+            if (!this.isSelected) {
+                this.isSelected = true;
+                checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+            }
+            // Emit success event for parent components
+            this.plaidErrorRecovered.emit({
+                code: 'plaid-success',
+                message: 'Bank account connected successfully',
+                severity: ComponentErrorSeverity.INFO
+            });
+            // Immediately exchange the public token for a payment method token via backend
+            this.exchangePublicTokenForPaymentMethod();
+        };
+        this.exchangePublicTokenForPaymentMethod = async () => {
+            var _a;
+            if (!this.publicToken) {
+                console.error('[PlaidPaymentMethod] exchange: missing publicToken');
+                return;
+            }
+            if (!checkoutStore.authToken || !checkoutStore.accountId) {
+                console.error('[PlaidPaymentMethod] exchange: missing auth/account context');
+                return;
+            }
+            try {
+                const response = await this.plaidService.tokenizeBankAccount(checkoutStore.authToken, checkoutStore.accountId, this.publicToken, this.linkTokenId || undefined, checkoutStore.savePaymentMethod ? checkoutStore.paymentMethodGroupId : undefined);
+                if (response === null || response === void 0 ? void 0 : response.error) {
+                    console.error('[PlaidPaymentMethod] exchange: backend error', response.error);
+                    return;
+                }
+                // Extract token from payment method response
+                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
+                const token = ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _a === void 0 ? void 0 : _a.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+                if (!token) {
+                    console.error('[PlaidPaymentMethod] exchange: no token in response');
+                    return;
+                }
+                // Save for downstream submit flows
+                checkoutStore.paymentToken = token;
+            }
+            catch (err) {
+                console.error('[PlaidPaymentMethod] exchange: exception', {
+                    message: (err === null || err === void 0 ? void 0 : err.message) || String(err),
+                });
+            }
+        };
+        this.handlePlaidExit = (err, _metadata) => {
+            this.isAuthenticating = false;
+            if (err) {
+                this.handlePlaidError(err);
+            }
+            else {
+                // User closed the modal without error
+                // If user closed without completing authentication, ensure component remains selected
+                // but clear any existing tokens to force re-authentication
+                if (this.isSelected && !this.publicToken) {
+                    // Component is selected but no token, this is expected state
+                }
+            }
+        };
+        this.handlePlaidEvent = (eventName, metadata) => {
+            // Handle specific events if needed
+            switch (eventName) {
+                case 'OPEN':
+                    this.isAuthenticating = true;
+                    break;
+                case 'CLOSE':
+                    this.isAuthenticating = false;
+                    break;
+                case 'ERROR':
+                    this.handlePlaidError(metadata);
+                    break;
+                case 'HANDOFF':
+                    // User is being redirected to their bank
+                    break;
+                case 'TRANSITION_VIEW':
+                    // Plaid Link view transition
+                    break;
+            }
+        };
+        this.handlePlaidLoad = () => {
+        };
+        this.handlePlaidError = (error) => {
+            let errorCode = PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED;
+            let message = PLAID_ERROR_MESSAGES[errorCode];
+            let retryable = true;
+            let userAction = 'Click to try again';
+            // Map Plaid error codes to our error codes
+            if (error.error_code) {
+                switch (error.error_code) {
+                    case 'INVALID_CREDENTIALS':
+                        errorCode = PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    case 'ITEM_LOGIN_REQUIRED':
+                        errorCode = PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                        message = 'Your bank requires re-authentication. Please try again.';
+                        retryable = true;
+                        break;
+                    case 'ITEM_LOCKED':
+                        errorCode = PlaidErrorCodes.PLAID_ACCOUNT_LOCKED;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = false;
+                        userAction = 'Contact your bank';
+                        break;
+                    case 'INSTITUTION_NOT_RESPONDING':
+                        errorCode = PlaidErrorCodes.PLAID_MAINTENANCE;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    case 'RATE_LIMIT_EXCEEDED':
+                        errorCode = PlaidErrorCodes.PLAID_RATE_LIMITED;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    case 'INVALID_REQUEST':
+                        errorCode = PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED;
+                        message = 'Invalid request. Please try again.';
+                        retryable = true;
+                        break;
+                    case 'PLAID_ERROR':
+                        errorCode = PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED;
+                        message = error.error_message || 'Bank authentication failed. Please try again.';
+                        retryable = true;
+                        break;
+                    default:
+                        // Use the error message from Plaid if available
+                        if (error.error_message) {
+                            message = error.error_message;
+                        }
+                        break;
+                }
+            }
+            // Handle specific error messages
+            if (error.error_message) {
+                const lowerMessage = error.error_message.toLowerCase();
+                if (lowerMessage.includes('not supported') || lowerMessage.includes('unsupported')) {
+                    errorCode = PlaidErrorCodes.PLAID_BANK_NOT_SUPPORTED;
+                    message = PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = false;
+                    userAction = 'Try a different payment method';
+                }
+                else if (lowerMessage.includes('expired') || lowerMessage.includes('timeout')) {
+                    errorCode = PlaidErrorCodes.PLAID_TOKEN_EXPIRED;
+                    message = PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = true;
+                }
+            }
+            this.handleError({
+                code: errorCode,
+                message,
+                severity: PLAID_ERROR_SEVERITY[errorCode],
+                originalError: error,
+                retryable,
+                userAction
+            });
+            this.isAuthenticating = false;
+            // Even with an error, the component should remain selected to allow retry
+            if (this.isSelected) {
+            }
+        };
+        this.handleError = (plaidError) => {
+            this.error = plaidError;
+            // Emit error event for parent components
+            this.plaidError.emit({
+                code: plaidError.code,
+                message: plaidError.message,
+                severity: plaidError.severity,
+                data: {
+                    originalError: plaidError.originalError,
+                    retryable: plaidError.retryable,
+                    userAction: plaidError.userAction,
+                    retryCount: this.retryCount
+                }
+            });
+            console.error('Plaid error:', plaidError);
+            // Auto-retry for retryable errors if under max retries
+            if (plaidError.retryable && this.retryCount < this.maxRetries) {
+                this.scheduleRetry();
+            }
+        };
+        this.scheduleRetry = () => {
+            if (this.isRetrying)
+                return;
+            this.isRetrying = true;
+            this.retryCount++;
+            setTimeout(() => {
+                this.isRetrying = false;
+                this.clearError();
+                this.waitForStoreAndInitialize();
+            }, this.retryDelay * this.retryCount); // Exponential backoff
+        };
+        this.clearError = () => {
+            if (this.error) {
+                this.error = null;
+                this.retryCount = 0;
+            }
+        };
+        // Watch for store changes to sync component state
+        this.syncWithStore = () => {
+            const shouldBeSelected = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.PLAID;
+            if (this.isSelected !== shouldBeSelected) {
+                this.isSelected = shouldBeSelected;
+            }
+        };
+    }
+    onSelectionChange(newValue) {
+        // Ensure store is updated when component selection changes
+        if (newValue && checkoutStore.selectedPaymentMethod !== PAYMENT_METHODS.PLAID) {
+            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+        }
+    }
+    componentDidRender() {
+        if (!this.scriptRef)
+            return;
+        this.scriptRef.onload = () => {
+            // Wait for store to be populated before initializing
+            this.waitForStoreAndInitialize();
+        };
+        // Add error handler for script loading failures
+        this.scriptRef.onerror = () => {
+            this.handleError({
+                code: PlaidErrorCodes.PLAID_SDK_LOAD_FAILED,
+                message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                retryable: true,
+                userAction: 'Refresh the page and try again'
+            });
+        };
+    }
+    componentWillLoad() {
+        // Initialize selection state based on store
+        this.isSelected = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.PLAID;
+    }
+    async resolvePaymentMethod() {
+        if (!this.publicToken) {
+            return { validationError: true };
+        }
+        return {
+            token: this.publicToken,
+            data: {
+                type: 'bank_account',
+                plaid_public_token: this.publicToken
+            }
+        };
+    }
+    // Returns a usable payment method token for checkout completion.
+    // Will perform the backend exchange if the token is not yet present in the store.
+    async getPaymentToken() {
+        if (checkoutStore.paymentToken) {
+            return checkoutStore.paymentToken;
+        }
+        await this.exchangePublicTokenForPaymentMethod();
+        return checkoutStore.paymentToken;
+    }
+    // Method to handle external selection changes (e.g., from other payment methods)
+    async setSelected(selected) {
+        this.isSelected = selected;
+        if (selected) {
+            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+        }
+    }
+    // Method to check if component is currently selected
+    async isCurrentlySelected() {
+        return this.isSelected;
+    }
+    // Method to handle external deselection (when another payment method is selected)
+    async deselect() {
+        this.isSelected = false;
+        // Don't clear the public token or error state as they might be needed if user reselects
+    }
+    // Method to reset component state (useful for testing or error recovery)
+    async reset() {
+        this.publicToken = null;
+        this.clearError();
+        this.isAuthenticating = false;
+        this.linkToken = null;
+        this.plaidLink = null;
+        this.retryCount = 0;
+        this.isRetrying = false;
+        // Clear any pending timeouts
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        // Abort any pending requests
+        if (this.abortController) {
+            this.abortController.abort();
+            this.abortController = null;
+        }
+    }
+    // Method to check if component is ready for authentication
+    async isReadyForAuthentication() {
+        return !!(this.plaidLink && this.linkToken && !this.isAuthenticating);
+    }
+    // Method to manually retry after an error
+    async retry() {
+        if (this.error && this.error.retryable) {
+            this.clearError();
+            this.waitForStoreAndInitialize();
+        }
+    }
+    // Method to get current error information
+    async getErrorInfo() {
+        return this.error;
+    }
+    componentDidLoad() {
+        // Set up store change listener to keep component in sync
+        const unsubscribe = onChange('selectedPaymentMethod', this.syncWithStore);
+        // Store unsubscribe function for cleanup
+        this.unsubscribeFromStore = unsubscribe;
+    }
+    disconnectedCallback() {
+        // Clean up store subscription
+        if (this.unsubscribeFromStore) {
+            this.unsubscribeFromStore();
+        }
+        // Clean up timeouts and abort controllers
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+    }
+    render() {
+        // Only allow use if enabled in checkout settings
+        if (checkoutStore.bankAccountVerification !== true) {
+            if (!this.hasLoggedDisabledWarning) {
+                // Log once per component lifecycle
+                console.warn('[PlaidPaymentMethod] bank_account_verification is disabled. Component will not render.');
+                this.hasLoggedDisabledWarning = true;
+            }
+            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 renderErrorState = () => {
+            if (!this.error)
+                return null;
+            const errorClass = this.error.severity === ComponentErrorSeverity.ERROR
+                ? 'text-danger'
+                : this.error.severity === ComponentErrorSeverity.WARNING
+                    ? 'text-warning'
+                    : 'text-info';
+            return (h("div", { class: `${errorClass} mt-2` }, h("small", null, this.error.message), h("br", null), h("small", { class: "text-muted" }, this.error.userAction, this.error.retryable && this.retryCount < this.maxRetries && (h("span", null, " \u2022 Auto-retry in progress...")))));
+        };
+        const renderStatusState = () => {
+            if (this.error)
+                return null;
+            if (this.isAuthenticating) {
+                return (h("div", { class: "text-info mt-2" }, h("small", null, "Connecting to your bank...")));
+            }
+            if (this.publicToken) {
+                return (h("div", { class: "text-success mt-2" }, h("small", null, "\u2713 Bank account connected successfully")));
+            }
+            if (this.isSelected && !this.publicToken && !this.error && !this.isAuthenticating) {
+                return (h("div", { class: "text-muted mt-2" }, h("small", null, "Click to connect your bank account")));
+            }
+            return null;
+        };
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, title: "Pay with Plaid" }, h("form-control-radio", { name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: this.isSelected, label: h("div", null, h("div", null, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState()) }))));
+    }
+    static get is() { return "justifi-plaid-payment-method"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "isAuthenticating": {},
+            "publicToken": {},
+            "linkToken": {},
+            "linkTokenId": {},
+            "error": {},
+            "plaidLink": {},
+            "isSelected": {},
+            "retryCount": {},
+            "isRetrying": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paymentMethodOptionSelected",
+                "name": "paymentMethodOptionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "plaidError",
+                "name": "plaidError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "plaidErrorRecovered",
+                "name": "plaidErrorRecovered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resolvePaymentMethod": {
+                "complexType": {
+                    "signature": "() => Promise<PaymentMethodPayload>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        }
+                    },
+                    "return": "Promise<PaymentMethodPayload>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getPaymentToken": {
+                "complexType": {
+                    "signature": "() => Promise<string | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setSelected": {
+                "complexType": {
+                    "signature": "(selected: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "selected",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "isCurrentlySelected": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "deselect": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "isReadyForAuthentication": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "retry": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getErrorInfo": {
+                "complexType": {
+                    "signature": "() => Promise<PlaidError | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PlaidError": {
+                            "location": "global",
+                            "id": "global::PlaidError"
+                        }
+                    },
+                    "return": "Promise<PlaidError>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "isSelected",
+                "methodName": "onSelectionChange"
+            }];
+    }
+}