@finspringinnovations/fdsdk 0.0.1

package/src/screens/BankDetail.tsx

@@ -0,0 +1,826 @@
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, TouchableWithoutFeedback, BackHandler, Platform, ActivityIndicator, KeyboardAvoidingView } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { Header, IFSCSearchResultCard } from '../components';
+import ActionButton from '../components/ActionButton';
+import TextFieldWithLabel from '../components/TextFieldWithLabel';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { useMasterData } from '../providers/MasterDataProvider';
+import { getAppData, getUserInfoForAPI } from '../config/appDataConfig';
+import { useFdBankDetailsSearchMutation, useFdBankAccountMutation } from '../api/fdApi';
+import { usePreviousStateMutation } from '../api/workflowApi';
+import { useGetCustomerApplicationDetailsMutation } from '../api/customerApi';
+import { useAppSelector } from '../store';
+import { navigate } from '../navigation/helpers';
+import { useFocusEffect } from '@react-navigation/native';
+import { BANK_STRINGS } from '../constants/strings/bank';
+
+export interface BankDetailProps {
+    onGoBack?: () => void;
+    onContinue?: (data: BankData) => void;
+    onAddAccount?: () => void;
+    initialData?: Partial<BankData>;
+}
+
+export interface BankData {
+    accountType: string;
+    accountNumber: string;
+    ifscCode: string;
+    bankName: string;
+    branchName: string;
+}
+
+
+const BankDetail: React.FC<BankDetailProps> = ({ onGoBack, onContinue, onAddAccount, initialData }) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+    const { masterData } = useMasterData();
+
+    // Normalize helper for arrays or CSV strings
+    const normalizeOptions = (raw: any, fallback: string[]): string[] => {
+        if (Array.isArray(raw)) return raw.map((v) => String(v)).filter(Boolean);
+        if (typeof raw === 'string' && raw.trim().length) return raw.split(',').map((v) => v.trim()).filter(Boolean);
+        return fallback;
+    };
+
+    // Prefer nested data if present, memoized to avoid re-creation on each render
+    const mdRoot: any = React.useMemo(() => {
+        return (masterData as any)?.data || masterData || {};
+    }, [masterData]);
+
+    // Get account type options from master data, memoized
+    const accountTypeOptions: string[] = React.useMemo(() => {
+        const raw = mdRoot?.bankAccountType || mdRoot?.accountTypeOptions || mdRoot?.accountTypes;
+        return normalizeOptions(raw, []);
+    }, [mdRoot]);
+
+    // Get app data from global state
+    const appData = getAppData();
+    const defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
+    const customerId = useAppSelector((state: any) => state?.onboarding?.customerId);
+
+
+    // FD Bank Details API (mutation for on-demand calls)
+    const [fdBankDetails, {
+        data: fdBankDetailsResponse,
+        error: fdBankDetailsError,
+        isLoading: isLoadingFdBankDetails,
+    }] = useFdBankDetailsSearchMutation();
+
+    // FD Bank Account API
+    const [fdBankAccount, {
+        data: fdBankAccountResponse,
+        error: fdBankAccountError,
+        isLoading: isLoadingFdBankAccount,
+    }] = useFdBankAccountMutation();
+    const [previousState] = usePreviousStateMutation();
+
+    // Customer Application Details API (called on focus)
+    const [getCustomerApplicationDetails, {
+        data: customerApplicationDetailsResponse,
+        error: customerApplicationDetailsError,
+        isLoading: isLoadingCustomerApplicationDetails,
+    }] = useGetCustomerApplicationDetailsMutation();
+
+    // Helper function to get account type display name
+    const getAccountTypeDisplay = (code: string): string => {
+        if (!code || code.trim() === '') return '';
+        switch (code) {
+            case 'SB': return 'Saving A/c';
+            case 'CA': return 'Current A/c';
+            default: return 'Saving A/c';
+        }
+    };
+
+    // Loading state for back navigation
+    const [isGoingBack, setIsGoingBack] = useState(false);
+
+    const [form, setForm] = useState<BankData>({
+        accountType: initialData?.accountType || getAccountTypeDisplay(appData?.typeOfAccount || ''),
+        accountNumber: initialData?.accountNumber || appData?.accountNo || '',
+        ifscCode: initialData?.ifscCode || appData?.ifsc || '',
+        bankName: initialData?.bankName || appData?.nameOfBank || '',
+        branchName: initialData?.branchName || '',
+    });
+
+    // Ref to track last IFSC code that was used to call API (to prevent duplicate calls)
+    const lastFetchedIfscRef = useRef<string>('');
+
+    // Keep account type valid if options change after load
+    React.useEffect(() => {
+        if (form.accountType && !accountTypeOptions.includes(form.accountType)) {
+            setForm(prev => ({
+                ...prev,
+                accountType: '',
+            }));
+        }
+    }, [accountTypeOptions, form.accountType]);
+
+
+    // Call customer application details API when screen comes into focus
+    useFocusEffect(
+        React.useCallback(() => {
+            let isActive = true;
+            (async () => {
+                try {
+                    // Only call API if we have the required IDs
+                    if (!applicationId || !customerId) {
+                        return;
+                    }
+
+                    const userInfo = getUserInfoForAPI();
+                    const req = {
+                        providerId: defaultProviderId,
+                        workflowInstanceId,
+                        userreferenceid: userInfo.userReferenceId,
+                        applicationid: applicationId,
+                        entityid: entityId,
+                        // Body params
+                        applicationId: applicationId,
+                        customerId: customerId,
+                    } as any;
+
+                    const res = await getCustomerApplicationDetails(req).unwrap();
+                    if (!isActive) return;
+
+                    // Set form data from bank_account object in API response if available
+                    if (res?.data?.bank_account) {
+                        const bankData = res.data.bank_account;
+
+                        setForm(prev => ({
+                            ...prev,
+                            accountType: bankData.account_type || prev.accountType,
+                            accountNumber: bankData.account_no || prev.accountNumber,
+                            ifscCode: bankData.ifsc_code || prev.ifscCode,
+                            bankName: bankData.bank_name || prev.bankName,
+                            branchName: bankData.bank_branch || prev.branchName,
+                        }));
+                    }
+                } catch (error) {
+                    if (!isActive) return;
+                }
+            })();
+            return () => { isActive = false; };
+        }, [applicationId, customerId, defaultProviderId, workflowInstanceId, entityId, getCustomerApplicationDetails])
+    );
+
+    const [openMenus, setOpenMenus] = useState({
+        accountType: false,
+        branchName: false,
+    });
+
+    const [fieldErrors, setFieldErrors] = useState<{ [key: string]: string }>({});
+
+    // Validation functions
+    const validateAccountNumber = (accountNumber: string): string => {
+        if (!accountNumber || accountNumber.trim().length === 0) {
+            return 'Account number is required';
+        }
+        if (accountNumber.length < 9 || accountNumber.length > 18) {
+            return 'Account number must be between 9 and 18 digits';
+        }
+        if (!/^\d+$/.test(accountNumber)) {
+            return 'Account number must contain only digits';
+        }
+        return '';
+    };
+
+    const validateIFSC = (ifsc: string): string => {
+        if (!ifsc || ifsc.trim().length === 0) {
+            return 'IFSC code is required';
+        }
+        const ifscRegex = /^[A-Z]{4}0[A-Z0-9]{6}$/;
+        if (!ifscRegex.test(ifsc.toUpperCase())) {
+            return 'Please enter a valid IFSC code (e.g., SBIN0001234)';
+        }
+        return '';
+    };
+
+    const validateBankName = (bankName: string): string => {
+        if (!bankName || bankName.trim().length === 0) {
+            return 'Bank name is required';
+        }
+        if (bankName.trim().length < 2) {
+            return 'Bank name must be at least 2 characters';
+        }
+        return '';
+    };
+
+    const validateBranchName = (branchName: string): string => {
+        if (!branchName || branchName.trim().length === 0) {
+            return 'Branch name is required';
+        }
+        if (branchName.trim().length < 2) {
+            return 'Branch name must be at least 2 characters';
+        }
+        return '';
+    };
+
+    const validateField = (field: keyof BankData, value: string): string => {
+        switch (field) {
+            case 'accountNumber':
+                return validateAccountNumber(value);
+            case 'ifscCode':
+                return validateIFSC(value);
+            case 'bankName':
+                return validateBankName(value);
+            case 'branchName':
+                return validateBranchName(value);
+            default:
+                return '';
+        }
+    };
+
+    // Function to fetch bank details when IFSC code is entered
+    const fetchBankDetails = useCallback(async (ifscCode: string) => {
+        if (!ifscCode || ifscCode.trim().length === 0) {
+            return;
+        }
+
+        const upperIfsc = ifscCode.trim().toUpperCase();
+        // Validate IFSC - validateIFSC returns empty string if valid, error message if invalid
+        const validationError = validateIFSC(upperIfsc);
+        if (validationError) {
+            return;
+        }
+
+        try {
+            const fdBankDetailsRequest = {
+                providerId: defaultProviderId,
+                ifscCode: upperIfsc,
+            };
+
+            // Call the API
+            const response = await fdBankDetails(fdBankDetailsRequest).unwrap();
+
+            // Handle the actual API response structure (same as FindIFSC)
+            let bankName = '';
+            let branchName = '';
+            let ifscCodeFromApi = '';
+
+            if (response && response.data && Array.isArray(response.data) && response.data.length > 0) {
+                const bankData = response.data[0];
+                bankName = bankData.BnkDescr || '';
+                branchName = bankData.BankBranch || '';
+                ifscCodeFromApi = bankData.IfscCode || '';
+            } else if (response && response.bankName && response.branchName && response.ifscCode) {
+                // Fallback for old response format
+                bankName = response.bankName;
+                branchName = response.branchName;
+                ifscCodeFromApi = response.ifscCode;
+            }
+
+            // Update form with bank details from API response
+            if (bankName || branchName || ifscCodeFromApi) {
+                setForm(prev => ({
+                    ...prev,
+                    bankName: bankName || prev.bankName,
+                    branchName: branchName || prev.branchName,
+                    ifscCode: ifscCodeFromApi || prev.ifscCode,
+                }));
+            }
+        } catch (error) {
+            // Silently handle error - don't show alert, just don't update fields
+        }
+    }, [defaultProviderId, fdBankDetails]);
+
+    const updateField = (field: keyof BankData, value: string) => {
+        // Clean input based on field type
+        let cleanedValue = value;
+        if (field === 'accountNumber') {
+            cleanedValue = value.replace(/[^0-9]/g, '').substring(0, 18);
+        } else if (field === 'ifscCode') {
+            cleanedValue = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase().substring(0, 11);
+        }
+
+        // Validate field and set error
+        const error = validateField(field, cleanedValue);
+
+        // Handle IFSC code changes - clear bank and branch names when IFSC is removed, invalid, or changed
+        if (field === 'ifscCode') {
+            const upperIfsc = cleanedValue.trim().toUpperCase();
+            const validationError = validateIFSC(upperIfsc);
+            const isIfscValid = cleanedValue.length === 11 && validationError === '';
+            const previousIfsc = form.ifscCode?.trim().toUpperCase() || '';
+            const isIfscChanged = cleanedValue.trim().toUpperCase() !== previousIfsc;
+
+            // Determine if we should clear bank and branch names
+            const shouldClearBankBranch =
+                cleanedValue.length === 0 || // IFSC is removed (empty)
+                cleanedValue.length < 11 || // IFSC is incomplete
+                (cleanedValue.length === 11 && validationError !== '') || // IFSC is invalid (11 chars but fails validation)
+                (isIfscChanged && previousIfsc.length === 11 && previousIfsc === lastFetchedIfscRef.current); // IFSC changed from a previously valid one
+
+            if (shouldClearBankBranch) {
+                setForm(prev => ({
+                    ...prev,
+                    [field]: cleanedValue,
+                    bankName: '',
+                    branchName: '',
+                }));
+            } else {
+                setForm(prev => ({ ...prev, [field]: cleanedValue }));
+            }
+
+            setFieldErrors(prev => ({
+                ...prev,
+                [field]: error,
+            }));
+
+            // Call API immediately when IFSC code reaches 11 characters and is valid
+            if (isIfscValid && upperIfsc !== lastFetchedIfscRef.current) {
+                lastFetchedIfscRef.current = upperIfsc;
+                // Call API immediately - don't await, let it run in background
+                fetchBankDetails(upperIfsc).catch((err) => {
+                    // Reset ref on error so user can retry
+                    if (lastFetchedIfscRef.current === upperIfsc) {
+                        lastFetchedIfscRef.current = '';
+                    }
+                });
+            } else if (cleanedValue.length < 11) {
+                // Reset ref when IFSC code is less than 11 characters
+                lastFetchedIfscRef.current = '';
+            }
+        } else {
+            // For other fields, just update normally
+            setForm(prev => ({ ...prev, [field]: cleanedValue }));
+            setFieldErrors(prev => ({
+                ...prev,
+                [field]: error,
+            }));
+        }
+    };
+
+    // Call API when IFSC code becomes valid (11 characters and passes validation)
+    // Also clear bank and branch names when IFSC is invalid or removed
+    useEffect(() => {
+        if (form.ifscCode && form.ifscCode.length === 11) {
+            const upperIfsc = form.ifscCode.trim().toUpperCase();
+            const validationError = validateIFSC(upperIfsc);
+            // Only call API if IFSC is valid and different from last fetched IFSC
+            if (!validationError && upperIfsc !== lastFetchedIfscRef.current) {
+                lastFetchedIfscRef.current = upperIfsc;
+                fetchBankDetails(upperIfsc);
+            } else if (validationError) {
+                // IFSC is invalid - clear bank and branch names
+                setForm(prev => ({
+                    ...prev,
+                    bankName: '',
+                    branchName: '',
+                }));
+                lastFetchedIfscRef.current = '';
+            }
+        } else {
+            // IFSC code is removed or less than 11 characters - clear bank and branch names
+            if (form.bankName || form.branchName) {
+                setForm(prev => ({
+                    ...prev,
+                    bankName: '',
+                    branchName: '',
+                }));
+            }
+            // Reset ref when IFSC code is not 11 characters
+            lastFetchedIfscRef.current = '';
+        }
+    }, [form.ifscCode, fetchBankDetails]);
+
+    const toggleMenu = (key: keyof typeof openMenus) => {
+        setOpenMenus(prev => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    const closeAllMenus = () => {
+        setOpenMenus({
+            accountType: false,
+            branchName: false,
+        });
+    };
+
+    // Render error message for a field
+    const renderFieldError = (field: keyof BankData) => {
+        const error = fieldErrors[field];
+        if (!error) return null;
+
+        return (
+            <View style={styles.errorContainer}>
+                {Platform.OS === 'android' && (
+                    <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
+                )}
+                <Text style={styles.errorText}>{error}</Text>
+            </View>
+        );
+    };
+
+    // Mask account number to show first 4 digits and rest as X
+    const formatAccountNumber = (accountNumber: string): string => {
+        if (!accountNumber) return '';
+        if (accountNumber.length <= 4) return accountNumber;
+        const firstFour = accountNumber.substring(0, 4);
+        const masked = 'X'.repeat(Math.min(accountNumber.length - 4, 12));
+        return `${firstFour} ${masked}`;
+    };
+
+    // Validate all form fields (for submission)
+    const validateForm = (): boolean => {
+        const errors: { [key: string]: string } = {};
+
+        // Validate account type
+        if (!form.accountType || form.accountType.trim() === '') {
+            errors.accountType = 'Account type is required';
+        }
+
+        // Validate account number
+        const accountNumberError = validateAccountNumber(form.accountNumber);
+        if (accountNumberError) errors.accountNumber = accountNumberError;
+
+        // Validate IFSC code
+        const ifscError = validateIFSC(form.ifscCode);
+        if (ifscError) errors.ifscCode = ifscError;
+
+        // Validate bank name
+        const bankNameError = validateBankName(form.bankName);
+        if (bankNameError) errors.bankName = bankNameError;
+
+        // Validate branch name
+        const branchNameError = validateBranchName(form.branchName);
+        if (branchNameError) errors.branchName = branchNameError;
+
+        setFieldErrors(errors);
+        return Object.keys(errors).length === 0;
+    };
+
+    // Check if form is valid without setting errors (for button state)
+    const isFormValid = (): boolean => {
+        // Check account type
+        if (!form.accountType || form.accountType.trim() === '') {
+            return false;
+        }
+
+        // Check account number
+        if (!form.accountNumber || form.accountNumber.trim() === '') {
+            return false;
+        }
+        if (form.accountNumber.length < 9 || form.accountNumber.length > 18) {
+            return false;
+        }
+        if (!/^\d+$/.test(form.accountNumber)) {
+            return false;
+        }
+
+        // Check IFSC code
+        if (!form.ifscCode || form.ifscCode.trim() === '') {
+            return false;
+        }
+        const ifscRegex = /^[A-Z]{4}0[A-Z0-9]{6}$/;
+        if (!ifscRegex.test(form.ifscCode.toUpperCase())) {
+            return false;
+        }
+
+        // Check bank name
+        if (!form.bankName || form.bankName.trim() === '') {
+            return false;
+        }
+        if (form.bankName.trim().length < 2) {
+            return false;
+        }
+
+        // Check branch name
+        if (!form.branchName || form.branchName.trim() === '') {
+            return false;
+        }
+        if (form.branchName.trim().length < 2) {
+            return false;
+        }
+
+        return true;
+    };
+
+    const renderDropdown = (
+        label: string,
+        value: string,
+        field: keyof BankData,
+        options: string[],
+        menuKey: keyof typeof openMenus,
+        placeholder: string = 'Select option',
+        editable: boolean = true,
+    ) => (
+        <View>
+            <TextFieldWithLabel
+                label={label}
+                value={value}
+                onChangeText={(text) => updateField(field, text)}
+                variant="dropdown"
+                options={options}
+                isDropdownOpen={openMenus[menuKey]}
+                onDropdownToggle={() => toggleMenu(menuKey)}
+                onDropdownSelect={(option) => {
+                    updateField(field, option);
+                    setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                }}
+                placeholder={placeholder}
+                editable={editable}
+            />
+            {openMenus[menuKey] && editable && (
+                <View style={styles.inlineMenu}>
+                    {options.map((option) => (
+                        <TouchableOpacity
+                            key={option}
+                            style={styles.modalOption}
+                            onPress={() => {
+                                updateField(field, option);
+                                setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                            }}
+                        >
+                            <Text style={styles.modalOptionText}>{option}</Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            )}
+        </View>
+    );
+
+    const handleContinue = async () => {
+        // Validate form before submitting
+        if (!validateForm()) {
+            Alert.alert(
+                'Validation Error',
+                'Please fix all errors before continuing.',
+                [{ text: 'OK' }]
+            );
+            return;
+        }
+
+        try {
+
+            // Prepare the API request
+            const fdBankAccountRequest = {
+                // Headers
+                providerId: defaultProviderId,
+                workflowInstanceId,
+                userreferenceid: appData?.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+                // Body (entityid should NOT be in body, only in headers)
+                accountType: form.accountType,
+                accountNumber: form.accountNumber,
+                ifscCode: form.ifscCode.toUpperCase(), // Ensure IFSC is uppercase for API
+                bankName: form.bankName,
+                branchName: form.branchName,
+                customerId: customerId,
+            };
+
+            const response = await fdBankAccount(fdBankAccountRequest).unwrap();
+
+            // Call the original onContinue callback with form data
+            onContinue?.(form);
+
+        } catch (error) {
+
+            // Show error message to user
+            Alert.alert(
+                BANK_STRINGS.BANK_VERIFICATION_FAILED,
+                BANK_STRINGS.BANK_ACCOUNT_ADDED_FAILED,
+                [{ text: 'OK' }]
+            );
+
+            // Do not call onContinue on failure - stay on current screen
+            // User can retry or correct their information
+        }
+    };
+
+    // Handler for back button (used by both header and hardware back button)
+    const handleBackPress = async () => {
+        setIsGoingBack(true);
+        try {
+            await previousState({
+                providerId: defaultProviderId,
+                workflowInstanceId,
+                userreferenceid: appData?.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+            });
+        } catch (e) {
+            // Handle error silently
+        } finally {
+            setIsGoingBack(false);
+            // onGoBack?.();
+            navigate('NomineeDetail');
+        }
+    };
+
+    // Handle Android hardware back button
+    useEffect(() => {
+        if (Platform.OS !== 'android') return;
+
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            'hardwareBackPress',
+            onHardwareBackPress
+        );
+
+        return () => backHandler.remove();
+    }, [defaultProviderId, workflowInstanceId, applicationId, entityId, appData?.userReferenceId]);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={false}
+            bottomPadding={25}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            <Header
+                title={BANK_STRINGS.BANK_DETAILS_TITLE}
+                onBackPress={handleBackPress}
+                backgroundColor={colors.primary}
+            />
+
+            <KeyboardAvoidingView
+                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+                style={styles.keyboardAvoidingView}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+            >
+                <ScrollView
+                    style={styles.container}
+                    showsVerticalScrollIndicator={false}
+                    keyboardShouldPersistTaps="handled"
+                    contentContainerStyle={styles.scrollContent}
+                    scrollEnabled={!isLoadingFdBankAccount}
+                >
+                    <TouchableWithoutFeedback onPress={isLoadingFdBankAccount ? undefined : closeAllMenus}>
+                        <View>
+                            <View>
+                                {renderDropdown(
+                                    BANK_STRINGS.ACCOUNT_TYPE_LABEL,
+                                    form.accountType,
+                                    'accountType',
+                                    accountTypeOptions,
+                                    'accountType',
+                                    'Select option',
+                                    true // Always editable - user can change account type
+                                )}
+                                {renderFieldError('accountType')}
+                            </View>
+
+                            <View>
+                                <TextFieldWithLabel
+                                    label={BANK_STRINGS.ACCOUNT_NUMBER_LABEL}
+                                    value={!appData?.accountNo || appData.accountNo.trim() === '' ? form.accountNumber : formatAccountNumber(form.accountNumber)}
+                                    onChangeText={(text) => updateField('accountNumber', text)}
+                                    onFocus={() => { closeAllMenus(); }}
+                                    placeholder={BANK_STRINGS.ACCOUNT_NUMBER_PLACEHOLDER}
+                                    variant="numeric"
+                                    keyboardType="numeric"
+                                    maxLength={18}
+                                    editable={!appData?.accountNo || appData.accountNo.trim() === ''}
+                                />
+                                {renderFieldError('accountNumber')}
+                            </View>
+
+                            <View>
+                                <TextFieldWithLabel
+                                    label={BANK_STRINGS.IFSC_CODE_LABEL}
+                                    value={form.ifscCode}
+                                    onChangeText={(text) => updateField('ifscCode', text)}
+                                    onFocus={() => { closeAllMenus(); }}
+                                    placeholder={BANK_STRINGS.IFSC_CODE_PLACEHOLDER}
+                                    variant="text"
+                                    maxLength={11}
+                                    autoCapitalize="characters"
+                                    editable={!appData?.ifsc || appData.ifsc.trim() === ''}
+                                />
+                                {renderFieldError('ifscCode')}
+                            </View>
+
+                            <View>
+                                <TextFieldWithLabel
+                                    label={BANK_STRINGS.BANK_NAME_LABEL}
+                                    value={form.bankName}
+                                    onChangeText={(text) => updateField('bankName', text)}
+                                    onFocus={() => { closeAllMenus(); }}
+                                    placeholder={BANK_STRINGS.BANK_NAME_PLACEHOLDER}
+                                    variant="text"
+                                    editable={false}
+                                    inputStyle={{ color: '#000000' }}
+                                />
+                                {renderFieldError('bankName')}
+                            </View>
+
+                            <View>
+                                <TextFieldWithLabel
+                                    label={BANK_STRINGS.BRANCH_NAME_LABEL}
+                                    value={form.branchName}
+                                    onChangeText={(text) => updateField('branchName', text)}
+                                    onFocus={() => { closeAllMenus(); }}
+                                    placeholder={BANK_STRINGS.BRANCH_NAME_PLACEHOLDER}
+                                    variant="text"
+                                    editable={false}
+                                    inputStyle={{ color: '#000000' }}
+                                />
+                                {renderFieldError('branchName')}
+                            </View>
+
+                            <TouchableOpacity style={styles.addAccountButton} onPress={onAddAccount}>
+                                <Text style={styles.addAccountText}>{BANK_STRINGS.ADD_BANK_BUTTON}</Text>
+                            </TouchableOpacity>
+
+                            <ActionButton
+                                title="Continue"
+                                onPress={handleContinue}
+                                disabled={isLoadingFdBankAccount || !isFormValid()}
+                                loading={isLoadingFdBankAccount}
+                            />
+                        </View>
+                    </TouchableWithoutFeedback>
+                </ScrollView>
+            </KeyboardAvoidingView>
+            {/* Overlay to disable screen interactions during API call */}
+            {isLoadingFdBankAccount && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                </View>
+            )}
+            {/* Loading overlay for back navigation */}
+            {isGoingBack && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                    <ActivityIndicator size="large" color={colors.primary} />
+                </View>
+            )}
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    keyboardAvoidingView: {
+        flex: 1,
+    },
+    container: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 20,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    inlineMenu: {
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.background,
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderColor: themeName === 'dark' ? '#ffffff' : 'rgba(0,0,0,0.2)',
+        borderRadius: 8,
+        marginTop: -20,
+        marginBottom: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    modalOption: {
+        paddingVertical: 14,
+    },
+    modalOptionText: {
+        ...typography.styles.bodyLarge,
+        color: colors.text,
+    },
+    addAccountButton: {
+        alignItems: 'center',
+        paddingVertical: 16,
+        marginBottom: 20,
+    },
+    addAccountText: {
+        ...typography.styles.bodyLarge,
+        color: colors.primary,
+    },
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: -20,
+        marginBottom: 20,
+    },
+    errorIcon: {
+        marginRight: 6,
+    },
+    errorText: {
+        fontSize: 12,
+        color: colors.error || '#FF0000',
+        flex: 1,
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1000,
+    },
+});
+
+export default BankDetail;
+