@finspringinnovations/fdsdk 0.0.1

package/lib/screens/BankDetail.js

@@ -0,0 +1,596 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+const SafeAreaWrapper_1 = __importDefault(require("../components/SafeAreaWrapper"));
+const components_1 = require("../components");
+const ActionButton_1 = __importDefault(require("../components/ActionButton"));
+const TextFieldWithLabel_1 = __importDefault(require("../components/TextFieldWithLabel"));
+const ThemeContext_1 = require("../theme/ThemeContext");
+const MasterDataProvider_1 = require("../providers/MasterDataProvider");
+const appDataConfig_1 = require("../config/appDataConfig");
+const fdApi_1 = require("../api/fdApi");
+const workflowApi_1 = require("../api/workflowApi");
+const customerApi_1 = require("../api/customerApi");
+const store_1 = require("../store");
+const helpers_1 = require("../navigation/helpers");
+const native_1 = require("@react-navigation/native");
+const bank_1 = require("../constants/strings/bank");
+const BankDetail = ({ onGoBack, onContinue, onAddAccount, initialData }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    const { masterData } = (0, MasterDataProvider_1.useMasterData)();
+    // Normalize helper for arrays or CSV strings
+    const normalizeOptions = (raw, fallback) => {
+        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 = react_1.default.useMemo(() => {
+        return (masterData === null || masterData === void 0 ? void 0 : masterData.data) || masterData || {};
+    }, [masterData]);
+    // Get account type options from master data, memoized
+    const accountTypeOptions = react_1.default.useMemo(() => {
+        const raw = (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.bankAccountType) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.accountTypeOptions) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.accountTypes);
+        return normalizeOptions(raw, []);
+    }, [mdRoot]);
+    // Get app data from global state
+    const appData = (0, appDataConfig_1.getAppData)();
+    const defaultProviderId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.providerId; }); // Default Shriram provider ID
+    const workflowInstanceId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.workflowInstanceId; });
+    const applicationId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.applicationId; });
+    const entityId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.entityid; });
+    const customerId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.customerId; });
+    // FD Bank Details API (mutation for on-demand calls)
+    const [fdBankDetails, { data: fdBankDetailsResponse, error: fdBankDetailsError, isLoading: isLoadingFdBankDetails, }] = (0, fdApi_1.useFdBankDetailsSearchMutation)();
+    // FD Bank Account API
+    const [fdBankAccount, { data: fdBankAccountResponse, error: fdBankAccountError, isLoading: isLoadingFdBankAccount, }] = (0, fdApi_1.useFdBankAccountMutation)();
+    const [previousState] = (0, workflowApi_1.usePreviousStateMutation)();
+    // Customer Application Details API (called on focus)
+    const [getCustomerApplicationDetails, { data: customerApplicationDetailsResponse, error: customerApplicationDetailsError, isLoading: isLoadingCustomerApplicationDetails, }] = (0, customerApi_1.useGetCustomerApplicationDetailsMutation)();
+    // Helper function to get account type display name
+    const getAccountTypeDisplay = (code) => {
+        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] = (0, react_1.useState)(false);
+    const [form, setForm] = (0, react_1.useState)({
+        accountType: (initialData === null || initialData === void 0 ? void 0 : initialData.accountType) || getAccountTypeDisplay((appData === null || appData === void 0 ? void 0 : appData.typeOfAccount) || ''),
+        accountNumber: (initialData === null || initialData === void 0 ? void 0 : initialData.accountNumber) || (appData === null || appData === void 0 ? void 0 : appData.accountNo) || '',
+        ifscCode: (initialData === null || initialData === void 0 ? void 0 : initialData.ifscCode) || (appData === null || appData === void 0 ? void 0 : appData.ifsc) || '',
+        bankName: (initialData === null || initialData === void 0 ? void 0 : initialData.bankName) || (appData === null || appData === void 0 ? void 0 : appData.nameOfBank) || '',
+        branchName: (initialData === null || initialData === void 0 ? void 0 : initialData.branchName) || '',
+    });
+    // Ref to track last IFSC code that was used to call API (to prevent duplicate calls)
+    const lastFetchedIfscRef = (0, react_1.useRef)('');
+    // Keep account type valid if options change after load
+    react_1.default.useEffect(() => {
+        if (form.accountType && !accountTypeOptions.includes(form.accountType)) {
+            setForm(prev => (Object.assign(Object.assign({}, prev), { accountType: '' })));
+        }
+    }, [accountTypeOptions, form.accountType]);
+    // Call customer application details API when screen comes into focus
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        let isActive = true;
+        (async () => {
+            var _a;
+            try {
+                // Only call API if we have the required IDs
+                if (!applicationId || !customerId) {
+                    return;
+                }
+                const userInfo = (0, appDataConfig_1.getUserInfoForAPI)();
+                const req = {
+                    providerId: defaultProviderId,
+                    workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: entityId,
+                    // Body params
+                    applicationId: applicationId,
+                    customerId: customerId,
+                };
+                const res = await getCustomerApplicationDetails(req).unwrap();
+                if (!isActive)
+                    return;
+                // Set form data from bank_account object in API response if available
+                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.bank_account) {
+                    const bankData = res.data.bank_account;
+                    setForm(prev => (Object.assign(Object.assign({}, 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] = (0, react_1.useState)({
+        accountType: false,
+        branchName: false,
+    });
+    const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
+    // Validation functions
+    const validateAccountNumber = (accountNumber) => {
+        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) => {
+        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) => {
+        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) => {
+        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, value) => {
+        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 = (0, react_1.useCallback)(async (ifscCode) => {
+        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 => (Object.assign(Object.assign({}, 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, value) => {
+        var _a;
+        // 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 = ((_a = form.ifscCode) === null || _a === void 0 ? void 0 : _a.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 => (Object.assign(Object.assign({}, prev), { [field]: cleanedValue, bankName: '', branchName: '' })));
+            }
+            else {
+                setForm(prev => (Object.assign(Object.assign({}, prev), { [field]: cleanedValue })));
+            }
+            setFieldErrors(prev => (Object.assign(Object.assign({}, 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 => (Object.assign(Object.assign({}, prev), { [field]: cleanedValue })));
+            setFieldErrors(prev => (Object.assign(Object.assign({}, 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
+    (0, react_1.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 => (Object.assign(Object.assign({}, 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 => (Object.assign(Object.assign({}, prev), { bankName: '', branchName: '' })));
+            }
+            // Reset ref when IFSC code is not 11 characters
+            lastFetchedIfscRef.current = '';
+        }
+    }, [form.ifscCode, fetchBankDetails]);
+    const toggleMenu = (key) => {
+        setOpenMenus(prev => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+    };
+    const closeAllMenus = () => {
+        setOpenMenus({
+            accountType: false,
+            branchName: false,
+        });
+    };
+    // Render error message for a field
+    const renderFieldError = (field) => {
+        const error = fieldErrors[field];
+        if (!error)
+            return null;
+        return (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
+            react_native_1.Platform.OS === 'android' && (react_1.default.createElement(Ionicons_1.default, { name: "warning", size: 16, color: colors.error || '#FF0000', style: styles.errorIcon })),
+            react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, error)));
+    };
+    // Mask account number to show first 4 digits and rest as X
+    const formatAccountNumber = (accountNumber) => {
+        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 = () => {
+        const errors = {};
+        // 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 = () => {
+        // 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, value, field, options, menuKey, placeholder = 'Select option', editable = true) => (react_1.default.createElement(react_native_1.View, null,
+        react_1.default.createElement(TextFieldWithLabel_1.default, { 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 => (Object.assign(Object.assign({}, prev), { [menuKey]: false })));
+            }, placeholder: placeholder, editable: editable }),
+        openMenus[menuKey] && editable && (react_1.default.createElement(react_native_1.View, { style: styles.inlineMenu }, options.map((option) => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: option, style: styles.modalOption, onPress: () => {
+                updateField(field, option);
+                setOpenMenus(prev => (Object.assign(Object.assign({}, prev), { [menuKey]: false })));
+            } },
+            react_1.default.createElement(react_native_1.Text, { style: styles.modalOptionText }, option))))))));
+    const handleContinue = async () => {
+        // Validate form before submitting
+        if (!validateForm()) {
+            react_native_1.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 === null || appData === void 0 ? void 0 : 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 === null || onContinue === void 0 ? void 0 : onContinue(form);
+        }
+        catch (error) {
+            // Show error message to user
+            react_native_1.Alert.alert(bank_1.BANK_STRINGS.BANK_VERIFICATION_FAILED, bank_1.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 === null || appData === void 0 ? void 0 : appData.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+            });
+        }
+        catch (e) {
+            // Handle error silently
+        }
+        finally {
+            setIsGoingBack(false);
+            // onGoBack?.();
+            (0, helpers_1.navigate)('NomineeDetail');
+        }
+    };
+    // Handle Android hardware back button
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS !== 'android')
+            return;
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+        const backHandler = react_native_1.BackHandler.addEventListener('hardwareBackPress', onHardwareBackPress);
+        return () => backHandler.remove();
+    }, [defaultProviderId, workflowInstanceId, applicationId, entityId, appData === null || appData === void 0 ? void 0 : appData.userReferenceId]);
+    return (react_1.default.createElement(SafeAreaWrapper_1.default, { includeTop: false, bottomPadding: 25, statusBarColor: "#000000", statusBarStyle: "light-content" },
+        react_1.default.createElement(components_1.Header, { title: bank_1.BANK_STRINGS.BANK_DETAILS_TITLE, onBackPress: handleBackPress, backgroundColor: colors.primary }),
+        react_1.default.createElement(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : undefined, style: styles.keyboardAvoidingView, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 0 : 0 },
+            react_1.default.createElement(react_native_1.ScrollView, { style: styles.container, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", contentContainerStyle: styles.scrollContent, scrollEnabled: !isLoadingFdBankAccount },
+                react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: isLoadingFdBankAccount ? undefined : closeAllMenus },
+                    react_1.default.createElement(react_native_1.View, null,
+                        react_1.default.createElement(react_native_1.View, null,
+                            renderDropdown(bank_1.BANK_STRINGS.ACCOUNT_TYPE_LABEL, form.accountType, 'accountType', accountTypeOptions, 'accountType', 'Select option', true // Always editable - user can change account type
+                            ),
+                            renderFieldError('accountType')),
+                        react_1.default.createElement(react_native_1.View, null,
+                            react_1.default.createElement(TextFieldWithLabel_1.default, { label: bank_1.BANK_STRINGS.ACCOUNT_NUMBER_LABEL, value: !(appData === null || appData === void 0 ? void 0 : appData.accountNo) || appData.accountNo.trim() === '' ? form.accountNumber : formatAccountNumber(form.accountNumber), onChangeText: (text) => updateField('accountNumber', text), onFocus: () => { closeAllMenus(); }, placeholder: bank_1.BANK_STRINGS.ACCOUNT_NUMBER_PLACEHOLDER, variant: "numeric", keyboardType: "numeric", maxLength: 18, editable: !(appData === null || appData === void 0 ? void 0 : appData.accountNo) || appData.accountNo.trim() === '' }),
+                            renderFieldError('accountNumber')),
+                        react_1.default.createElement(react_native_1.View, null,
+                            react_1.default.createElement(TextFieldWithLabel_1.default, { label: bank_1.BANK_STRINGS.IFSC_CODE_LABEL, value: form.ifscCode, onChangeText: (text) => updateField('ifscCode', text), onFocus: () => { closeAllMenus(); }, placeholder: bank_1.BANK_STRINGS.IFSC_CODE_PLACEHOLDER, variant: "text", maxLength: 11, autoCapitalize: "characters", editable: !(appData === null || appData === void 0 ? void 0 : appData.ifsc) || appData.ifsc.trim() === '' }),
+                            renderFieldError('ifscCode')),
+                        react_1.default.createElement(react_native_1.View, null,
+                            react_1.default.createElement(TextFieldWithLabel_1.default, { label: bank_1.BANK_STRINGS.BANK_NAME_LABEL, value: form.bankName, onChangeText: (text) => updateField('bankName', text), onFocus: () => { closeAllMenus(); }, placeholder: bank_1.BANK_STRINGS.BANK_NAME_PLACEHOLDER, variant: "text", editable: false, inputStyle: { color: '#000000' } }),
+                            renderFieldError('bankName')),
+                        react_1.default.createElement(react_native_1.View, null,
+                            react_1.default.createElement(TextFieldWithLabel_1.default, { label: bank_1.BANK_STRINGS.BRANCH_NAME_LABEL, value: form.branchName, onChangeText: (text) => updateField('branchName', text), onFocus: () => { closeAllMenus(); }, placeholder: bank_1.BANK_STRINGS.BRANCH_NAME_PLACEHOLDER, variant: "text", editable: false, inputStyle: { color: '#000000' } }),
+                            renderFieldError('branchName')),
+                        react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.addAccountButton, onPress: onAddAccount },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.addAccountText }, bank_1.BANK_STRINGS.ADD_BANK_BUTTON)),
+                        react_1.default.createElement(ActionButton_1.default, { title: "Continue", onPress: handleContinue, disabled: isLoadingFdBankAccount || !isFormValid(), loading: isLoadingFdBankAccount }))))),
+        isLoadingFdBankAccount && (react_1.default.createElement(react_native_1.View, { style: styles.loadingOverlay, pointerEvents: "auto" })),
+        isGoingBack && (react_1.default.createElement(react_native_1.View, { style: styles.loadingOverlay, pointerEvents: "auto" },
+            react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: colors.primary })))));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.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: Object.assign(Object.assign({}, typography.styles.bodyLarge), { color: colors.text }),
+    addAccountButton: {
+        alignItems: 'center',
+        paddingVertical: 16,
+        marginBottom: 20,
+    },
+    addAccountText: Object.assign(Object.assign({}, 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,
+    },
+});
+exports.default = BankDetail;