@finspringinnovations/fdsdk 0.0.1

package/src/screens/AddBankAccount.tsx

@@ -0,0 +1,541 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, Image, TouchableWithoutFeedback, TextInput, KeyboardAvoidingView, Platform, BackHandler } 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 { useFdBankAccountMutation } from '../api/fdApi';
+import { useAppSelector } from '../store';
+import { getUserInfoForAPI } from '../config/appDataConfig';
+import { navigate } from '../navigation/helpers';
+import { BANK_STRINGS } from '../constants/strings/bank';
+import { COMMON_STRINGS } from '../constants/strings/common';
+import { base64Images } from '../constants/strings/base64Images';
+
+export interface AddBankAccountProps {
+    onGoBack?: () => void;
+    onContinue?: (data: AddBankAccountData) => void;
+    onFindIFSC?: () => void;
+    initialData?: Partial<AddBankAccountData>;
+    selectedIFSC?: IFSCData;
+}
+
+export interface IFSCData {
+    bankName: string;
+    branchName: string;
+    ifscCode: string;
+    bankShortDesc?: string;
+    bankCode?: string;
+    customerBankPk?: string;
+}
+
+export interface AddBankAccountData {
+    accountType: string;
+    accountNumber: string;
+}
+
+const defaultAccountTypeOptions = ['Saving', 'Current'];
+
+const AddBankAccount: React.FC<AddBankAccountProps> = ({ onGoBack, onContinue, onFindIFSC, initialData, selectedIFSC }) => {
+
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const customerId = useAppSelector((state: any) => state?.onboarding?.customerId);
+    const { masterData } = useMasterData();
+
+    // Get providerId from app data or use default
+    const defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+
+
+    // FD Bank Account API
+    const [fdBankAccount, {
+        data: fdBankAccountResponse,
+        error: fdBankAccountError,
+        isLoading: isLoadingFDBankAccount,
+    }] = useFdBankAccountMutation();
+
+    // 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 with fallback, memoized
+    const accountTypeOptions: string[] = React.useMemo(() => {
+        const raw = mdRoot?.bankAccountType || mdRoot?.accountTypeOptions || mdRoot?.accountTypes;
+        return normalizeOptions(raw, defaultAccountTypeOptions);
+    }, [mdRoot]);
+
+    const [form, setForm] = useState<AddBankAccountData>({
+        accountType: initialData?.accountType || '',
+        accountNumber: initialData?.accountNumber || '',
+    });
+
+    // Keep account type valid if options change after load
+    React.useEffect(() => {
+        setForm(prev => ({
+            ...prev,
+            accountType: accountTypeOptions.includes(prev.accountType) ? prev.accountType : '',
+        }));
+    }, [accountTypeOptions]);
+
+    // Track which fields have been touched by the user
+    const [touchedFields, setTouchedFields] = useState<{
+        accountType: boolean;
+        accountNumber: boolean;
+    }>({
+        accountType: false,
+        accountNumber: false,
+    });
+
+    // Show errors only for touched fields
+    React.useEffect(() => {
+        // Validate account type only if it has been touched
+        if (touchedFields.accountType && !form.accountType.trim()) {
+            setErrors(prev => ({ ...prev, accountType: BANK_STRINGS.ACCOUNT_TYPE_REQUIRED }));
+        } else if (touchedFields.accountType && form.accountType.trim()) {
+            setErrors(prev => ({ ...prev, accountType: undefined }));
+        }
+
+        // Validate account number if it has content and has been touched
+        if (touchedFields.accountNumber && form.accountNumber.trim() && !isAccountNumberValid(form.accountNumber)) {
+            setErrors(prev => ({ ...prev, accountNumber: BANK_STRINGS.INVALID_ACCOUNT_NUMBER }));
+        } else if (touchedFields.accountNumber && form.accountNumber.trim() && isAccountNumberValid(form.accountNumber)) {
+            setErrors(prev => ({ ...prev, accountNumber: undefined }));
+        }
+    }, [form.accountType, form.accountNumber, touchedFields]);
+
+    const [errors, setErrors] = useState<{
+        accountType?: string;
+        accountNumber?: string;
+    }>({});
+
+    const [openMenus, setOpenMenus] = useState({
+        accountType: false,
+    });
+
+    // Ref for account number text input to blur when dropdown is opened
+    const accountNumberRef = useRef<TextInput>(null);
+    // Ref for ScrollView to enable auto-scroll when input is focused
+    const scrollViewRef = useRef<ScrollView>(null);
+
+    const updateField = (field: keyof AddBankAccountData, value: string) => {
+        setForm(prev => ({ ...prev, [field]: value }));
+
+        // Mark field as touched when user interacts with it
+        setTouchedFields(prev => ({ ...prev, [field]: true }));
+    };
+
+    const toggleMenu = (key: keyof typeof openMenus) => {
+        // Remove focus from account number field when dropdown is opened
+        accountNumberRef.current?.blur();
+
+        // Mark field as touched when user opens dropdown
+        if (key === 'accountType') {
+            setTouchedFields(prev => ({ ...prev, accountType: true }));
+        }
+
+        setOpenMenus(prev => ({
+            accountType: key === 'accountType' ? !prev.accountType : false,
+        }));
+    };
+
+    const closeAllMenus = () => setOpenMenus({ accountType: false });
+
+    // FD bank account API status monitored
+
+    // Pure validation (does not update state)
+    const isAccountNumberValid = (accountNumber: string): boolean => {
+        const cleaned = accountNumber.replace(/\s/g, '');
+        if (!cleaned) return false;
+        if (!/^\d{9,18}$/.test(cleaned)) return false;
+        return true;
+    };
+
+    // Validation and set error
+    const validateAccountNumber = (accountNumber: string): boolean => {
+        const valid = isAccountNumberValid(accountNumber);
+        if (!valid) {
+            setErrors(prev => ({ ...prev, accountNumber: BANK_STRINGS.INVALID_ACCOUNT_NUMBER }));
+        } else {
+            setErrors(prev => ({ ...prev, accountNumber: undefined }));
+        }
+        return valid;
+    };
+
+
+    const handleAccountNumberBlur = () => {
+        if (form.accountNumber) {
+            validateAccountNumber(form.accountNumber);
+        }
+    };
+
+
+    const renderDropdown = (
+        label: string,
+        value: string,
+        field: keyof AddBankAccountData,
+        options: string[],
+        menuKey: keyof typeof openMenus,
+    ) => (
+        <View>
+            <TextFieldWithLabel
+                label={label}
+                value={value}
+                onChangeText={(text) => updateField(field, text)}
+                variant="dropdown"
+                options={options}
+                isDropdownOpen={openMenus[menuKey]}
+                onDropdownToggle={() => toggleMenu(menuKey)}
+                onDropdownSelect={(option) => {
+                    closeAllMenus();
+                    updateField(field, option);
+                    setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                }}
+                placeholder={BANK_STRINGS.ACCOUNT_TYPE_PLACEHOLDER}
+            />
+            {errors[field] && !openMenus[menuKey] && (
+                <View style={styles.errorContainer}>
+                    {Platform.OS === 'android' && (
+                        <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
+                    )}
+                    <Text style={styles.errorText}>{errors[field]}</Text>
+                </View>
+            )}
+            {openMenus[menuKey] && (
+                <View style={styles.inlineMenu}>
+                    {options.map((option) => (
+                        <TouchableOpacity
+                            key={option}
+                            style={styles.modalOption}
+                            onPress={() => {
+                                closeAllMenus();
+                                updateField(field, option);
+                                setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                            }}
+                        >
+                            <Text style={styles.modalOptionText}>{option}</Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            )}
+        </View>
+    );
+
+    // Validation function to check if all required fields are filled (pure, no setErrors)
+    const isFormValid = (): boolean => {
+        const isAccountTypeValid = !!form.accountType;
+        const isAccountNumberValidVal = isAccountNumberValid(form.accountNumber);
+        const isIFSCSelected = !!selectedIFSC;
+        return isAccountTypeValid && isAccountNumberValidVal && isIFSCSelected;
+    };
+
+    const handleContinue = async () => {
+        // Mark all fields as touched when validating form
+        setTouchedFields({
+            accountType: true,
+            accountNumber: true,
+        });
+
+        // Validate all fields and set errors if needed
+        let valid = true;
+        if (!form.accountType) {
+            setErrors(prev => ({ ...prev, accountType: BANK_STRINGS.ACCOUNT_TYPE_REQUIRED }));
+            valid = false;
+        }
+        if (!isAccountNumberValid(form.accountNumber)) {
+            setErrors(prev => ({ ...prev, accountNumber: BANK_STRINGS.INVALID_ACCOUNT_NUMBER }));
+            valid = false;
+        }
+        if (!valid) {
+            Alert.alert(COMMON_STRINGS.REQUIRED_FIELD, COMMON_STRINGS.FILL_REQUIRED_FIELDS);
+            return;
+        }
+
+        // Check if IFSC data is available
+        if (!selectedIFSC) {
+            Alert.alert(COMMON_STRINGS.REQUIRED_FIELD, BANK_STRINGS.IFSC_CODE_REQUIRED);
+            return;
+        }
+
+        try {
+            // Get user info from app data
+            const userInfo = getUserInfoForAPI();
+
+            if (!customerId) {
+                Alert.alert(COMMON_STRINGS.ERROR, 'Customer ID not found. Please try again.');
+                return;
+            }
+
+            // Prepare FD bank account request data with required parameters
+            const fdBankAccountRequest = {
+                providerId: defaultProviderId,
+                workflowInstanceId: workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                accountType: form.accountType,
+                accountNumber: form.accountNumber,
+                ifscCode: selectedIFSC.ifscCode,
+                bankName: selectedIFSC.bankName,
+                branchName: selectedIFSC.branchName,
+                customerId: customerId,
+            };
+
+            const response = await fdBankAccount(fdBankAccountRequest).unwrap();
+
+            // Navigate to PayNow screen after successful API call
+            navigate('PayNow');
+        } catch (error) {
+
+            // Show error message to user and stay on current screen
+            Alert.alert(COMMON_STRINGS.ERROR, BANK_STRINGS.BANK_ACCOUNT_ADDED_FAILED);
+        }
+    };
+
+    // Handler for back button (used by both header and hardware back button)
+    const handleBackPress = () => {
+        navigate('BankDetail');
+    };
+
+    // 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();
+    }, []);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={false}
+            bottomPadding={25}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            <Header
+                title={BANK_STRINGS.ADD_BANK_ACCOUNT_TITLE}
+                onBackPress={handleBackPress}
+                backgroundColor={colors.primary}
+            />
+
+            <KeyboardAvoidingView
+                style={{ flex: 1 }}
+                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+            >
+                <ScrollView
+                    ref={scrollViewRef}
+                    style={styles.scrollContent}
+                    showsVerticalScrollIndicator={false}
+                    keyboardShouldPersistTaps="handled"
+                    onScrollBeginDrag={closeAllMenus}
+                    contentContainerStyle={styles.scrollContentContainer}
+                    scrollEnabled={!isLoadingFDBankAccount}
+                >
+                    <TouchableWithoutFeedback onPress={isLoadingFDBankAccount ? undefined : closeAllMenus}>
+                        <View>
+                            {renderDropdown(BANK_STRINGS.ACCOUNT_TYPE_LABEL, form.accountType, 'accountType', accountTypeOptions, 'accountType')}
+
+                            <View>
+                                <TextFieldWithLabel
+                                    label={BANK_STRINGS.ACCOUNT_NUMBER_LABEL}
+                                    value={form.accountNumber}
+                                    onChangeText={(text) => {
+                                        // Allow only numbers
+                                        const cleaned = text.replace(/\D/g, '');
+                                        updateField('accountNumber', cleaned);
+                                    }}
+                                    onFocus={() => {
+                                        closeAllMenus();
+                                        setTouchedFields(prev => ({ ...prev, accountNumber: true }));
+                                        // Scroll to input when focused to keep it visible above keyboard
+                                        setTimeout(() => {
+                                            scrollViewRef.current?.scrollToEnd({ animated: true });
+                                        }, 300);
+                                    }}
+                                    textInputRef={accountNumberRef}
+                                    placeholder={BANK_STRINGS.ACCOUNT_NUMBER_PLACEHOLDER}
+                                    variant="numeric"
+                                    keyboardType="numeric"
+                                    maxLength={18}
+                                />
+                                {errors.accountNumber && (
+                                    <View style={styles.errorContainer}>
+                                        {Platform.OS === 'android' && (
+                                            <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
+                                        )}
+                                        <Text style={styles.errorText}>{errors.accountNumber}</Text>
+                                    </View>
+                                )}
+                            </View>
+
+                            <View>
+                                <Text style={styles.ifscLabel}>{BANK_STRINGS.IFSC_CODE_LABEL} (Required)</Text>
+                                {(() => {
+                                    return null;
+                                })()}
+                                {selectedIFSC ? (
+                                    <IFSCSearchResultCard
+                                        bankName={selectedIFSC.bankName}
+                                        branchName={selectedIFSC.branchName}
+                                        ifscCode={selectedIFSC.ifscCode}
+                                        bankShortDesc={selectedIFSC.bankShortDesc}
+                                        bankCode={selectedIFSC.bankCode}
+                                        onSelect={onFindIFSC || (() => { })}
+                                        buttonTitle="Change"
+                                    />
+                                ) : (
+                                    <TouchableOpacity style={styles.findIFSCButton} onPress={() => { closeAllMenus(); onFindIFSC?.(); }}>
+                                        <View style={styles.findIFSCContainer}>
+                                            <Image source={{ uri: base64Images.search }} style={styles.searchIcon} />
+                                            <Text style={styles.findIFSCText}>{BANK_STRINGS.FIND_IFSC_BUTTON}</Text>
+                                        </View>
+                                    </TouchableOpacity>
+                                )}
+                            </View>
+
+                        </View>
+                    </TouchableWithoutFeedback>
+                </ScrollView>
+            </KeyboardAvoidingView>
+
+            <View style={styles.footer}>
+                <ActionButton
+                    title={COMMON_STRINGS.CONTINUE}
+                    onPress={handleContinue}
+                    disabled={isLoadingFDBankAccount || !isFormValid()}
+                    loading={isLoadingFDBankAccount}
+                />
+            </View>
+            {/* Overlay to disable screen interactions during API call */}
+            {isLoadingFDBankAccount && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                </View>
+            )}
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    scrollContent: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 20,
+    },
+    scrollContentContainer: {
+        flexGrow: 1,
+        paddingBottom: 200,
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: colors.background,
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 25,
+    },
+    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,
+    },
+    ifscLabel: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginBottom: 8,
+    },
+    findIFSCButton: {
+        marginBottom: 10,
+    },
+    findIFSCContainer: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+    },
+    searchIcon: {
+        width: 14,
+        height: 14,
+        marginRight: 4,
+        marginTop: 2,
+        tintColor: colors.primary,
+    },
+    findIFSCText: {
+        ...typography.styles.bodyMedium,
+        color: colors.primary,
+    },
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+        alignItems: 'center',
+    },
+    debugButtonText: {
+        ...typography.styles.bodyMedium,
+        fontWeight: '600',
+    },
+    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)',
+        zIndex: 1000,
+    },
+});
+
+export default AddBankAccount;
+
+