var { registerPaymentMethod } = wc.wcBlocksRegistry;
var { __ } = wp.i18n;
var eCheckBlocksSettings = wc.wcSettings.getSetting('anet_echeck_data');
var { decodeEntities } = wp.htmlEntities;
var canMakePayment = () => {
    return true;
};
const woocommerceVersionEcheck = eCheckBlocksSettings?.woocommerce_version || '0.0.0';
// Function to compare version strings
function compareVersions(version1, version2) {
    const v1parts = version1.split('.').map(Number);
    const v2parts = version2.split('.').map(Number);
    const maxLength = Math.max(v1parts.length, v2parts.length);
    for (let i = 0; i < maxLength; i++) {
        const v1part = v1parts[i] || 0;
        const v2part = v2parts[i] || 0;
        if (v1part > v2part) return 1;
        if (v1part < v2part) return -1;
    }
    return 0;
}
// Function to validate billing and shipping addresses for Blocks checkout
function validateBlocksAddresses() {
    // Use the correct selectors based on the HTML structure
    const billingAddress1 = document.querySelector('input[id="billing-address_1"]')?.value || '';
    const billingAddress2 = document.querySelector('input[id="billing-address_2"]')?.value || '';
    const shippingAddress1 = document.querySelector('input[id="shipping-address_1"]')?.value || '';
    const shippingAddress2 = document.querySelector('input[id="shipping-address_2"]')?.value || '';
    // Get name and postcode fields
    const billingFirstName = document.querySelector('input[id="billing-first_name"]')?.value || '';
    const billingLastName = document.querySelector('input[id="billing-last_name"]')?.value || '';
    const billingPostcode = document.querySelector('input[id="billing-postcode"]')?.value || '';
    const billingCity = document.querySelector('input[id="billing-city"]')?.value || '';
    const billingPhone = document.querySelector('input[id="billing-phone"]')?.value || '';
    const shippingFirstName = document.querySelector('input[id="shipping-first_name"]')?.value || '';
    const shippingLastName = document.querySelector('input[id="shipping-last_name"]')?.value || '';
    const shippingPostcode = document.querySelector('input[id="shipping-postcode"]')?.value || '';
    const shippingCity = document.querySelector('input[id="shipping-city"]')?.value || '';
    const shippingPhone = document.querySelector('input[id="shipping-phone"]')?.value || '';
    // Collect all validation errors
    const errors = [];
    // Validate shipping address if different from billing
    if (shippingAddress1) {
        if (shippingAddress1.includes('<') || shippingAddress1.includes('>') || !/^[a-zA-Z0-9\s\-\.]+$/.test(shippingAddress1)) {
            errors.push('Shipping Address is invalid. Special characters are not allowed.');
        }
    }
    // Validate shipping address line 2 if provided
    if (shippingAddress2 && shippingAddress2.trim() !== '') {
        if (shippingAddress2.includes('<') || shippingAddress2.includes('>') || !/^[a-zA-Z0-9\s\-\.]+$/.test(shippingAddress2)) {
            errors.push('Shipping Address is invalid. Special characters are not allowed.');
        }
    }
    // Validate billing Address
    if (billingAddress1) {
        if (billingAddress1.includes('<') || billingAddress1.includes('>') || !/^[a-zA-Z0-9\s\-\.]+$/.test(billingAddress1)) {
            errors.push('Billing Address is invalid. Special characters are not allowed.');
        }
    }
    // Validate billing Address if provided
    if (billingAddress2 && billingAddress2.trim() !== '') {
        if (billingAddress2.includes('<') || billingAddress2.includes('>') || !/^[a-zA-Z0-9\s\-\.]+$/.test(billingAddress2)) {
            errors.push('Billing Address is invalid. Special characters are not allowed.');
        }
    }
    // Validate shipping first name
    if (shippingFirstName) {
        if (shippingFirstName.includes('<') || shippingFirstName.includes('>') || !/^[a-zA-Z\s\-\.]+$/.test(shippingFirstName)) {
            errors.push('Shipping First name is invalid. Special characters are not allowed.');
        }
    }
    // Validate shipping last name
    if (shippingLastName) {
        if (shippingLastName.includes('<') || shippingLastName.includes('>') || !/^[a-zA-Z\s\-\.]+$/.test(shippingLastName)) {
            errors.push('Shipping Last name is invalid. Special characters are not allowed.');
        }
    }
    // Validate shipping postcode
    if (shippingPostcode) {
        if (shippingPostcode.includes('<') || shippingPostcode.includes('>') || !/^[a-zA-Z0-9\s\-]+$/.test(shippingPostcode)) {
            errors.push('Shipping ZIP Code is invalid. Special characters are not allowed.');
        }
    }
    // Validate billing first name
    if (billingFirstName) {
        if (billingFirstName.includes('<') || billingFirstName.includes('>') || !/^[a-zA-Z\s\-\.]+$/.test(billingFirstName)) {
            errors.push('Billing First name is invalid. Special characters are not allowed.');
        }
    }
    // Validate billing last name
    if (billingLastName) {
        if (billingLastName.includes('<') || billingLastName.includes('>') || !/^[a-zA-Z\s\-\.]+$/.test(billingLastName)) {
            errors.push('Billing Last name is invalid. Special characters are not allowed.');
        }
    }
    // Validate billing postcode
    if (billingPostcode) {
        if (billingPostcode.includes('<') || billingPostcode.includes('>') || !/^[a-zA-Z0-9\s\-]+$/.test(billingPostcode)) {
            errors.push('Billing ZIP Code is invalid. Special characters are not allowed.');
        }
    }
    // Validate shipping city
    if (shippingCity) {
        if (shippingCity.includes('<') || shippingCity.includes('>') || !/^[a-zA-Z\s\-\.]+$/.test(shippingCity)) {
            errors.push('Shipping City is invalid. Special characters are not allowed.');
        }
    }
    // Validate shipping phone if provided
    if (shippingPhone && shippingPhone.trim() !== '') {
        if (shippingPhone.includes('<') || shippingPhone.includes('>') || !/^[a-zA-Z0-9\s\-\+\(\)\.]+$/.test(shippingPhone)) {
            errors.push('Shipping Phone is invalid. Special characters are not allowed.');
        }
    }
    // Validate billing city
    if (billingCity) {
        if (billingCity.includes('<') || billingCity.includes('>') || !/^[a-zA-Z\s\-\.]+$/.test(billingCity)) {
            errors.push('Billing City is invalid. Special characters are not allowed.');
        }
    }
    // Validate billing phone if provided
    if (billingPhone && billingPhone.trim() !== '') {
        if (billingPhone.includes('<') || billingPhone.includes('>') || !/^[a-zA-Z0-9\s\-\+\(\)\.]+$/.test(billingPhone)) {
            errors.push('Billing Phone is invalid. Special characters are not allowed.');
        }
    }
    // Return all errors at once
    if (errors.length > 0) {
        return {
            valid: false,
            message: errors.join('<br/>')
        };
    }
    return { valid: true };
}
const echeckStoredCardComponentsAnet = (props) => {
    const { token, eventRegistration, emitResponse } = props;
    const { onPaymentProcessing, onCheckoutFail } = eventRegistration;
    React.useEffect(() => {
        const echeckStoredCardPaymentComponent = onPaymentProcessing(async () => {
            // Network connectivity check for saved eCheck
            if (!navigator.onLine) {
                return {
                    type: emitResponse.responseTypes.ERROR,
                    message: 'You appear to be offline. Please check your internet connection and try again.',
                    messageContext: emitResponse.noticeContexts.PAYMENTS,
                };
            }
            return {
                type: emitResponse.responseTypes.SUCCESS,
                meta: {
                    paymentMethodData: {
                        token: token,
                    },
                },
            };
        });
        const echeckStoredCardPaymentComponentFail = onCheckoutFail((processingResponse) => {
            const errorResponse = processingResponse;
            if (errorResponse.processingResponse?.paymentDetails?.message) {
                return {
                    type: emitResponse.responseTypes.ERROR,
                    message: errorResponse.processingResponse.paymentDetails.message,
                    messageContext: emitResponse.noticeContexts.PAYMENTS,
                };
            }
            return true;
        });
        return () => {
            echeckStoredCardPaymentComponent();
            echeckStoredCardPaymentComponentFail();
        };
    }, [onPaymentProcessing, onCheckoutFail, emitResponse]);
    return [];
}
const eCheckComponentsAnet = (props) => {
    const { onSubmit, eventRegistration, emitResponse } = props;
    const { onPaymentProcessing, onCheckoutFail } = eventRegistration;
    React.useEffect(() => {
        const eCheckPaymentComponent = onPaymentProcessing(async () => {
            // Network connectivity check before processing
            if (!navigator.onLine) {
                return {
                    type: emitResponse.responseTypes.ERROR,
                    message: 'You appear to be offline. Please check your internet connection and try again.',
                    messageContext: emitResponse.noticeContexts.PAYMENTS,
                };
            }
            // Validate billing and shipping addresses
            const addressValidation = validateBlocksAddresses();
            if (!addressValidation.valid) {
                return {
                    type: emitResponse.responseTypes.ERROR,
                    message: addressValidation.message.split('\n').join(' '),
                    messageContext: emitResponse.noticeContexts.CHECKOUT,
                };
            }
            const nameOnAccount = document.getElementById('nameOnAccount-container').value;
            const accountNumber = document.getElementById('accountNumber-container').value;
            const routingNumber = document.getElementById('routingNumber-container').value;
            // Validation for all eCheck fields
            const errors = [];
            // Validate routing number (must be exactly 9 digits)
            if (!routingNumber || routingNumber.trim() === '' || routingNumber.length !== 9 || !/^\d{9}$/.test(routingNumber)) {
                errors.push(__('Please enter a valid routing number.', 'authorize-net-payments-for-woocommerce'));
            }
            // Validate account number (must be 6-17 digits)
            if (!accountNumber || accountNumber.trim() === '' || accountNumber.length < 6 || accountNumber.length > 17 || !/^\d+$/.test(accountNumber)) {
                errors.push(__('Please enter a valid account number.', 'authorize-net-payments-for-woocommerce'));
            }
            // Validate name on account (must be 4-22 characters, letters and spaces only)
            if (!nameOnAccount || nameOnAccount.trim() === '' || nameOnAccount.length < 4 || nameOnAccount.length > 22 || !/^[a-zA-Z\s]+$/.test(nameOnAccount)) {
                errors.push(__('Please enter a valid account name.', 'authorize-net-payments-for-woocommerce'));
            }
            // Get account type based on version
            let accountTypeValue;
            if (compareVersions(woocommerceVersionEcheck, '8.3.0') > 0) {
                accountTypeValue = document.getElementById('accountType-container').value;
            } else {
                accountTypeValue = selectedAccountType;
            }
            // Validate account type
            if (!accountTypeValue || accountTypeValue === 'Select' || accountTypeValue === '') {
                errors.push(__('Please select an account type.', 'authorize-net-payments-for-woocommerce'));
            }
            // If validation fails, return error
            if (errors.length > 0) {
                return {
                    type: emitResponse.responseTypes.ERROR,
                    message: errors.join('<br/>'),
                    messageContext: emitResponse.noticeContexts.PAYMENTS,
                };
            }
            let bankData;
            if (compareVersions(woocommerceVersionEcheck, '8.3.0') > 0) {
                const accountTypeValue = document.getElementById('accountType-container').value;
                bankData = {
                    nameOnAccount: nameOnAccount,
                    accountNumber: accountNumber.replace(/\s/g, ''),
                    accountType: accountTypeValue,
                    routingNumber: routingNumber.replace(/\s/g, ''),
                };
            } else {
                bankData = {
                    nameOnAccount: nameOnAccount,
                    accountNumber: accountNumber.replace(/\s/g, ''),
                    accountType: selectedAccountType,
                    routingNumber: routingNumber.replace(/\s/g, ''),
                };
            }
            const authData = {
                clientKey: anet_echeck_params.client_key,
                apiLoginID: anet_echeck_params.login_id,
            };
            const secureData = {
                authData: authData,
                bankData: bankData,
            };
            const paymentNonce = await new Promise((resolve, reject) => {
                // Start network monitoring for Accept.js processing
                const networkTimeout = setTimeout(() => {
                    resolve({
                        error: new Error('Processing timeout - please check your connection and try again.'),
                    });
                }, 30000);
                const networkHandler = () => {
                    clearTimeout(networkTimeout);
                    resolve({
                        error: new Error('Connection lost during processing - please check your internet connection.'),
                    });
                };
                window.addEventListener('offline', networkHandler);
                Accept.dispatchData(secureData, (response) => {
                    // Clear network monitoring on response
                    clearTimeout(networkTimeout);
                    window.removeEventListener('offline', networkHandler);
                    jQuery('.wc-anet-error').remove();
                    if (response.messages.resultCode === 'Error') {
                        var i = 0;
                        var $errorMessages = jQuery('<ul>', {
                            class: 'woocommerce_error woocommerce-error wc-anet-error'
                        });
                        while (i < response.messages.message.length) {
                            console.log(response.messages.message[i].code + ": " + response.messages.message[i].text);
                            // For Client Potential XSS - Create error message safely 
                            var messageText = response.messages.message[i].text;
                            if (typeof messageText === 'string') {
                                // Create text node for the error message
                                var errorItem = document.createElement('li');
                                errorItem.textContent = messageText; // .textContent handles escaping automatically
                                $errorMessages[0].appendChild(errorItem);
                            }
                            i = i + 1;
                        }
                        jQuery('.wc-block-components-form-credit-card').before($errorMessages);
                        resolve({ error: new Error(__('Unable to load the payment form. Please contact customer care.', 'authorize-net-payments-for-woocommerce')) });
                    } else {
                        resolve({
                            nonce: response.opaqueData.dataValue,
                            descriptor: response.opaqueData.dataDescriptor,
                        });
                    }
                });
            });
            if (paymentNonce.error) {
                return { type: emitResponse.responseTypes.ERROR };
            }
            const { shouldSavePayment } = props; // Provided by WooCommerce Blocks
            return {
                type: emitResponse.responseTypes.SUCCESS,
                meta: {
                    paymentMethodData: {
                        anet_echeck_save_payment_method: shouldSavePayment,
                        anet_nonce: paymentNonce.nonce,
                        anet_data_descriptor: paymentNonce.descriptor
                    }
                },
            };
        });
        const eCheckPaymentComponentFail = onCheckoutFail((processingResponse) => {
            if (processingResponse.processingResponse?.paymentDetails?.message) {
                return {
                    type: emitResponse.responseTypes.ERROR,
                    message: processingResponse.processingResponse.paymentDetails.message,
                    messageContext: emitResponse.noticeContexts.PAYMENTS,
                };
            }
            return true;
        });
        return () => {
            eCheckPaymentComponent();
            eCheckPaymentComponentFail();
        };
    }, [onPaymentProcessing, onCheckoutFail, emitResponse]);
    const [routingNumber, setRoutingNumber] = React.useState('');
    const [routingNumberTouched, setRoutingNumberTouched] = React.useState(false);
    const [accountNumber, setAccountNumber] = React.useState('');
    const [accountNumberTouched, setAccountNumberTouched] = React.useState(false);
    const [nameOnAccount, setNameOnAccount] = React.useState('');
    const [nameOnAccountTouched, setNameOnAccountTouched] = React.useState(false);
    const [accountType, setAccountType] = React.useState('Select');
    const [accountTypeTouched, setAccountTypeTouched] = React.useState(false);
    // Mobile responsive state management - moved outside version check
    const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
    React.useEffect(() => {
        const handleResize = () => {
            setIsMobile(window.innerWidth <= 768);
        };
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    // Account type combobox state variables - moved outside version check
    const accountTypeOptions = [
        { value: 'checking', label: 'Checking' },
        { value: 'savings', label: 'Savings' }
    ];
    const [accountTypeQuery, setAccountTypeQuery] = React.useState('Select Account Type');
    const [selectedAccountType, setSelectedAccountType] = React.useState('');
    const [accountTypeActiveIndex, setAccountTypeActiveIndex] = React.useState(0);
    const [accountTypeFocused, setAccountTypeFocused] = React.useState(false);
    // Add this effect to toggle the is-active' class
    React.useEffect(() => {
        const routingnumberInput = document.getElementById('routingNumber-container');
        const accountNumberInput = document.getElementById('accountNumber-container');
        const nameOnAccountInput = document.getElementById('nameOnAccount-container');
        const handleFocus = (e) => {
            e.target.parentNode.classList.add('is-active');
            e.target.parentNode.classList.remove('has-error');
        };
        const handleBlur = (e) => {
            const value = e.target.value.trim();
            if (!value) {
                e.target.parentNode.classList.remove('is-active');
                e.target.parentNode.classList.add('has-error');
            }
        };
        if (routingnumberInput && accountNumberInput && nameOnAccountInput) {
            routingnumberInput.addEventListener('focus', handleFocus);
            routingnumberInput.addEventListener('blur', handleBlur);
            accountNumberInput.addEventListener('focus', handleFocus);
            accountNumberInput.addEventListener('blur', handleBlur);
            nameOnAccountInput.addEventListener('focus', handleFocus);
            nameOnAccountInput.addEventListener('blur', handleBlur);
        }
        // Cleanup listeners on unmount
        return () => {
            [routingnumberInput, accountNumberInput, nameOnAccountInput].forEach((input) => {
                if (input) {
                    input.removeEventListener('focus', handleFocus);
                    input.removeEventListener('blur', handleBlur);
                }
            });
        };
    }, []);
    const eCheckComponent = React.createElement("div", { className: "wc-blocks-echeck-component" },
        React.createElement("div", {}, eCheckBlocksSettings?.description),
        React.createElement("div", { className: 'wc-block-components-form-credit-card' },
            React.createElement("div", {
                className: 'wc-echeck-row',
                style: {
                    display: 'flex',
                    gap: '20px',
                    marginBottom: '20px',
                    //  flexDirection: compareVersions(woocommerceVersionEcheck, '8.3.0') < 0 ? 'column' : isMobile ? 'column' : 'row'
                }
            }, // for adding route num and account number in same line
                React.createElement("div", {
                    id: 'wc-echeck-routing-number',
                    className: 'wc-block-components-text-input',
                    style: { flex: 1 }
                },
                    React.createElement("input", {
                        type: 'text',
                        id: 'routingNumber-container',
                        value: routingNumber,
                        placeholder: " ",
                        autoCapitalize: "sentences",
                        autoComplete: "routingNumber-container",
                        onChange: (e) => {
                            const value = e.target.value.replace(/[^0-9]/g, '').slice(0, 9);
                            setRoutingNumber(value);
                        },
                        required: true,
                        "aria-invalid": routingNumberTouched && routingNumber.length !== 9 ? "true" : "false",
                        "aria-errormessage": "validate-error-routing",
                        "aria-label": "Routing Number",
                        "aria-describedby": "",
                        title: "Enter your Routing Number",
                        onFocus: (event) => event.target.classList.add('focused'),
                        onBlur: (event) => {
                            setRoutingNumberTouched(true)
                            if (!event.target.value) {
                                event.target.classList.remove('focused');
                            }
                        },
                        onInput: (event) => {
                            event.target.value = event.target.value.replace(/[^0-9]/g, '').slice(0, 9);
                        }
                    }),
                    React.createElement("label", {
                        htmlFor: 'routingNumber-container',
                    }, __("Routing Number", "authorize-net-payments-for-woocommerce")),
                    React.createElement("span", {
                        id: "validate-error-routing",
                        className: "error-message",
                        style: {
                            color: 'red',
                            fontSize: 'small',
                            display: routingNumberTouched && routingNumber.length !== 9 ? 'flex' : 'none',
                            alignItems: 'center',
                            gap: '6px'
                        }
                    },
                        // SVG Alert Icon
                        React.createElement("svg", {
                            xmlns: "http://www.w3.org/2000/svg",
                            viewBox: "-2 -2 24 24",
                            width: "24",
                            height: "24",
                            "aria-hidden": "true",
                            focusable: "false",
                            style: { fill: 'red' }
                        },
                            React.createElement("path", {
                                d: "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"
                            })
                        ), __("Please enter a valid routing number (9 digits).", "authorize-net-payments-for-woocommerce"))
                ),
                React.createElement("div", {
                    id: 'wc-echeck-account-number',
                    className: 'wc-block-components-text-input',
                    style: { flex: 1 }
                },
                    React.createElement("input", {
                        type: 'text',
                        id: 'accountNumber-container',
                        placeholder: " ",
                        autoCapitalize: "sentences",
                        autoComplete: "accountNumber-container",
                        value: accountNumber,
                        onChange: (e) => {
                            const value = e.target.value.replace(/[^0-9]/g, '').slice(0, 17);
                            setAccountNumber(value);
                        },
                        required: true,
                        "aria-invalid": accountNumberTouched && (accountNumber.length < 6 || accountNumber.length > 17) ? "true" : "false",
                        "aria-errormessage": "validate-error-account",
                        "aria-label": "Account Number",
                        "aria-describedby": "",
                        title: "Enter your Account Number",
                        onFocus: (event) => event.target.classList.add('focused'),
                        onBlur: (event) => {
                            setAccountNumberTouched(true)
                            if (!event.target.value) {
                                event.target.classList.remove('focused');
                            }
                        },
                        onInput: (event) => {
                            event.target.value = event.target.value.replace(/[^0-9]/g, '').slice(0, 17);
                        }
                    }),
                    React.createElement("label", {
                        htmlFor: 'accountNumber-container',
                    }, __("Account Number", "authorize-net-payments-for-woocommerce")),
                    React.createElement("span", {
                        id: "validate-error-account",
                        className: "error-message",
                        style: {
                            color: 'red',
                            fontSize: 'small',
                            display: accountNumberTouched && (accountNumber.length < 6 || accountNumber.length > 17) ? 'flex' : 'none',
                            alignItems: 'center',
                            gap: '6px'
                        }
                    }
                        , // SVG Alert Icon
                        React.createElement("svg", {
                            xmlns: "http://www.w3.org/2000/svg",
                            viewBox: "-2 -2 24 24",
                            width: "24",
                            height: "24",
                            "aria-hidden": "true",
                            focusable: "false",
                            style: { fill: 'red' }
                        },
                            React.createElement("path", {
                                d: "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"
                            })
                        ), __("Please enter a valid account number.", "authorize-net-payments-for-woocommerce"))
                ),
            ), // end of first wc-echeck-row
            React.createElement("div", {
                className: 'wc-echeck-row',
                style: {
                    display: 'flex',
                    gap: '20px',
                    marginBottom: '20px',
                    //  flexDirection: compareVersions(woocommerceVersionEcheck, '8.3.0') < 0 ? 'column' : isMobile ? 'column' : 'row'
                }
            },
                React.createElement("div", {
                    id: 'wc-echeck-name-on-account',
                    className: 'wc-block-components-text-input',
                    style: { flex: 1 }
                },
                    React.createElement("input", {
                        type: 'text',
                        id: 'nameOnAccount-container',
                        placeholder: " ",
                        autoCapitalize: "sentences",
                        autoComplete: "nameOnAccount-container",
                        value: nameOnAccount,
                        onChange: (e) => {
                            const value = e.target.value.replace(/[^a-zA-Z\s]/g, '').slice(0, 22);
                            setNameOnAccount(value);
                        },
                        required: true,
                        "aria-invalid": nameOnAccountTouched && (nameOnAccount.trim() === '' || nameOnAccount.length < 4 || nameOnAccount.length > 22 || !/^[a-zA-Z\s]+$/.test(nameOnAccount)) ? "true" : "false",
                        "aria-errormessage": "validate-error-name",
                        "aria-label": "Name of Account",
                        "aria-describedby": "",
                        title: "Enter your Name of Account",
                        onFocus: (event) => event.target.classList.add('focused'),
                        onBlur: (event) => {
                            setNameOnAccountTouched(true)
                            if (!event.target.value) {
                                event.target.classList.remove('focused');
                            }
                        }
                    }),
                    React.createElement("label", {
                        htmlFor: 'nameOnAccount-container',
                    }, __("Name on Account", "authorize-net-payments-for-woocommerce")),
                    React.createElement("span", {
                        id: "validate-error-name",
                        className: "error-message",
                        style: {
                            color: 'red',
                            fontSize: 'small',
                            display: nameOnAccountTouched && (nameOnAccount.trim() === '' || nameOnAccount.length < 4 || nameOnAccount.length > 22 || !/^[a-zA-Z\s]+$/.test(nameOnAccount)) ? 'flex' : 'none',
                            alignItems: 'center',
                             gap: '6px'
                        }
                    }, // SVG Alert Icon
                        React.createElement("svg", {
                            xmlns: "http://www.w3.org/2000/svg",
                            viewBox: "-2 -2 24 24",
                            width: "24",
                            height: "24",
                            "aria-hidden": "true",
                            focusable: "false",
                            style: { fill: 'red' }
                        },
                            React.createElement("path", {
                                d: "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"
                            })
                        ), __("Please enter a valid account name.", "authorize-net-payments-for-woocommerce"))
                ),
                (compareVersions(woocommerceVersionEcheck, '8.3.0') > 0 ?
                    React.createElement("div", { className: "wc-block-components-state-input" },
                        React.createElement("div", {
                            id: 'wc-account-type-fields1',
                            className: 'wc-blocks-components-select',
                            style: { flex: 1 }
                        },
                            React.createElement("div", {
                                id: 'wc-account-type-fields',
                                className: 'wc-blocks-components-select__container'
                            },
                                React.createElement("label", {
                                    htmlFor: 'accountType-container',
                                    className: "wc-blocks-components-select__label",
                                    id: "floating-label-account-type"
                                }, "Account Type"),
                                React.createElement("select", {
                                    id: 'accountType-container',
                                    className: "wc-blocks-components-select__select",
                                    autoComplete: "accountType",
                                    value: accountType,
                                    onChange: (e) => setAccountType(e.target.value),
                                    required: true,
                                    "aria-invalid": accountTypeTouched && accountType === 'Select' ? "true" : "false",
                                    "aria-errormessage": "validate-error-type",
                                    onFocus: (event) => event.target.classList.add('focused'),
                                    onBlur: (event) => {
                                        setAccountTypeTouched(true)
                                        if (!event.target.value) {
                                            event.target.classList.remove('focused');
                                        }
                                    }
                                },
                                    React.createElement('option', { value: 'Select' }, 'Select Account Type'),
                                    React.createElement("option", { value: 'checking', "data-alternate-values": "[Checking]" }, 'Checking'),
                                    React.createElement("option", { value: 'savings', "data-alternate-values": "[Savings]" }, 'Savings')
                                ),
                                React.createElement("span", {
                                    id: "validate-error-type",
                                    className: "error-message",
                                    style: {
                                        color: 'red',
                                        fontSize: 'small',
                                        display: accountTypeTouched && accountType === 'Select' ? 'flex' : 'none',
                                        alignItems: 'center',
                                        gap: '6px'
                                    }
                                }, // SVG Alert Icon
                                    React.createElement("svg", {
                                        xmlns: "http://www.w3.org/2000/svg",
                                        viewBox: "-2 -2 24 24",
                                        width: "24",
                                        height: "24",
                                        "aria-hidden": "true",
                                        focusable: "false",
                                        style: { fill: 'red' }
                                    },
                                        React.createElement("path", {
                                            d: "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"
                                        })
                                    ), __("Please select an account type.", "authorize-net-payments-for-woocommerce")),
                                // SVG Icon
                                React.createElement("svg", {
                                    viewBox: "0 0 24 24",
                                    xmlns: "http://www.w3.org/2000/svg",
                                    width: "24",
                                    height: "24",
                                    className: "wc-blocks-components-select__expand",
                                    "aria-hidden": "true",
                                    focusable: "false"
                                },
                                    React.createElement("path", {
                                        d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
                                    })
                                )
                            )
                        )) :
                    // Account Type
                    React.createElement("div", {
                        className: "wc-block-components-country-input",
                        style: {
                            flex: '1',
                            width: isMobile ? '100%' : '50%'
                        }
                    },
                        React.createElement("div", {
                            id: "account-type",
                            className: "wc-block-components-combobox is-active"
                        },
                            React.createElement("div", {},
                                React.createElement("div", {
                                    className: "components-base-control wc-block-components-combobox-control components-combobox-control css-1wzzj1a e1puf3u3"
                                },
                                    React.createElement("div", {
                                        className: "components-base-control__field css-1kyqli5 e1puf3u2"
                                    },
                                        React.createElement("label", {
                                            className: "components-base-control__label css-4dk55l e1puf3u1",
                                            htmlFor: "account-type-input",
                                            style: {
                                                color: accountTypeTouched && !selectedAccountType ? '#e74c3c' : 'inherit'
                                            }
                                        }, __("Account Type", "authorize-net-payments-for-woocommerce")),
                                        // Input and Suggestions Container
                                        React.createElement("div", { className: "components-combobox-control__suggestions-container", tabIndex: "-1" },
                                            React.createElement("div", {
                                                "data-wp-c16t": "true",
                                                "data-wp-component": "Flex",
                                                className: "components-flex css-dfwk0q css-0 em57xhy0"
                                            },
                                                React.createElement("div", {
                                                    "data-wp-c16t": "true",
                                                    "data-wp-component": "FlexBlock",
                                                    className: "components-flex-item components-flex-block css-106zala css-0 em57xhy0"
                                                },
                                                    React.createElement("input", {
                                                        id: "account-type-input",
                                                        type: "text",
                                                        "aria-label": "Account Type",
                                                        className: "components-combobox-control__input components-form-token-field__input",
                                                        autoComplete: "off",
                                                        role: "combobox",
                                                        "aria-expanded": accountTypeFocused ? "true" : "false",
                                                        "aria-autocomplete": "list",
                                                        "aria-describedby": "components-form-token-suggestions-howto-account-type",
                                                        value: accountTypeQuery,
                                                        size: accountTypeQuery.length > 0 ? Math.max(accountTypeQuery.length, 10) : 10,
                                                        style: {
                                                            border: accountTypeTouched && !selectedAccountType ? '1px solid #e74c3c' : '1px solid #757575',
                                                            borderColor: accountTypeTouched && !selectedAccountType ? '#e74c3c' : '#757575',
                                                            boxShadow: accountTypeTouched && !selectedAccountType ? '0 0 3px rgba(231, 76, 60, 0.3)' : 'none'
                                                        },
                                                        onChange: (e) => {
                                                            setAccountTypeQuery(e.target.value);
                                                            setAccountTypeTouched(true);
                                                        },
                                                        onFocus: () => {
                                                            setAccountTypeFocused(true);
                                                            if (accountTypeQuery === 'Select Account Type') {
                                                                setAccountTypeQuery('');
                                                            }
                                                        },
                                                        onBlur: () => {
                                                            setTimeout(() => {
                                                                setAccountTypeFocused(false);
                                                                if (!selectedAccountType && accountTypeQuery.trim() === '') {
                                                                    setAccountTypeQuery('Select Account Type');
                                                                }
                                                            }, 150);
                                                            setAccountTypeTouched(true);
                                                        },
                                                        onKeyDown: (e) => {
                                                            const searchQuery = accountTypeQuery === 'Select Account Type' ? '' : accountTypeQuery;
                                                            const filteredOptions = accountTypeOptions.filter(opt =>
                                                                opt.label.toLowerCase().includes(searchQuery.toLowerCase())
                                                            );
                                                            if (e.key === 'ArrowDown') {
                                                                e.preventDefault();
                                                                setAccountTypeActiveIndex(prev =>
                                                                    prev < filteredOptions.length - 1 ? prev + 1 : 0
                                                                );
                                                            } else if (e.key === 'ArrowUp') {
                                                                e.preventDefault();
                                                                setAccountTypeActiveIndex(prev =>
                                                                    prev > 0 ? prev - 1 : filteredOptions.length - 1
                                                                );
                                                            } else if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                                if (filteredOptions[accountTypeActiveIndex]) {
                                                                    const selectedType = filteredOptions[accountTypeActiveIndex];
                                                                    setSelectedAccountType(selectedType.value);
                                                                    setAccountTypeQuery(selectedType.label);
                                                                    setAccountTypeFocused(false);
                                                                }
                                                            } else if (e.key === 'Escape') {
                                                                setAccountTypeFocused(false);
                                                            }
                                                        },
                                                        "aria-activedescendant": `components-form-token-suggestions-account-type-${accountTypeActiveIndex}`
                                                    })
                                                )
                                            ),
                                            // Account type suggestions list - only show when focused
                                            accountTypeFocused && React.createElement("ul", {
                                                className: "components-form-token-field__suggestions-list",
                                                id: "components-form-token-suggestions-account-type",
                                                role: "listbox"
                                            },
                                                accountTypeOptions
                                                    .filter(opt => {
                                                        const searchQuery = accountTypeQuery === 'Select Account Type' ? '' : accountTypeQuery;
                                                        return opt.label.toLowerCase().includes(searchQuery.toLowerCase());
                                                    })
                                                    .map((option, index) =>
                                                        React.createElement("li", {
                                                            key: index,
                                                            id: `components-form-token-suggestions-account-type-${index}`,
                                                            role: "option",
                                                            className: `components-form-token-field__suggestion ${index === accountTypeActiveIndex ? 'is-selected' : ''}`,
                                                            "aria-selected": index === accountTypeActiveIndex,
                                                            onMouseEnter: () => setAccountTypeActiveIndex(index),
                                                            onMouseDown: (e) => {
                                                                e.preventDefault(); // Prevent blur
                                                                setSelectedAccountType(option.value);
                                                                setAccountTypeQuery(option.label);
                                                                setAccountTypeFocused(false);
                                                            }
                                                        }, option.label)
                                                    )
                                            )
                                        )
                                    )
                                )
                            )
                        ),
                        // Error Message
                        React.createElement("span", {
                            id: "validate-error-account-type",
                            className: "error-message",
                            style: {
                                color: 'red',
                                fontSize: 'small',
                                display: accountTypeTouched && !selectedAccountType ? 'flex' : 'none',
                                alignItems: 'center',
                                gap: '6px'
                            }
                        },
                            React.createElement("svg", {
                                xmlns: "http://www.w3.org/2000/svg",
                                viewBox: "-2 -2 24 24",
                                width: "24",
                                height: "24",
                                "aria-hidden": "true",
                                focusable: "false",
                                style: { fill: 'red' }
                            },
                                React.createElement("path", {
                                    d: "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"
                                })
                            ),
                            __("Please select an account type.", "authorize-net-payments-for-woocommerce")
                        )
                    )),
            ),/// end of second wc-echeck-row
        )
    );
    if (!(eCheckBlocksSettings.validate_configuration_key)) {
        jQuery('.blocks-error-div-echeck').show();
        jQuery('.wc-blocks-echeck-component').hide();
    }
    const errorDiv = React.createElement("p", {
        className: 'blocks-error-div-echeck',
        style: {
            display: "none",
            color: 'red'
        }
    }, __('Unable to load the payment form. Please contact customer care for any assistance.'));
    return [eCheckComponent, errorDiv];
};
const anetECheckOptions = {
    name: "anet_echeck",
    label: React.createElement("div", {}, eCheckBlocksSettings?.title),
    content: React.createElement(eCheckComponentsAnet, {}, null),
    edit: React.createElement(eCheckComponentsAnet, {}, null),
    canMakePayment,
    paymentMethodId: "anet_echeck",
    ariaLabel: "Authorize.net eCheck Block",
    supports: {
        showSaveOption: eCheckBlocksSettings?.tokenization,
        features: ['products']
    },
    savedTokenComponent: React.createElement(echeckStoredCardComponentsAnet, {}, null),
};
registerPaymentMethod(anetECheckOptions);