@finspringinnovations/fdsdk 0.0.1

package/src/screens/FindIFSC.tsx

@@ -0,0 +1,332 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, Image, BackHandler, Platform } from 'react-native';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { Header, IFSCSearchResultCard } from '../components';
+import ActionButton from '../components/ActionButton';
+import ValidationMessage from '../components/ValidationMessage';
+import TextFieldWithLabel from '../components/TextFieldWithLabel';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+import { useFdBankDetailsSearchMutation } from '../api/fdApi';
+import { useAppSelector } from '../store';
+import { base64Images } from '../constants/strings/base64Images';
+import { BANK_STRINGS } from '../constants/strings/bank';
+import { COMMON_STRINGS } from '../constants/strings/common';
+import { navigate } from '../navigation/helpers';
+
+export interface FindIFSCProps {
+    onGoBack?: () => void;
+    onSelect?: (ifscData: IFSCData) => void;
+    initialSearchTerm?: string;
+}
+
+export interface IFSCData {
+    bankName: string;
+    branchName: string;
+    ifscCode: string;
+    bankShortDesc?: string;
+    bankCode?: string;
+    customerBankPk?: string;
+}
+
+const FindIFSC: React.FC<FindIFSCProps> = ({ onGoBack, onSelect, initialSearchTerm }) => {
+
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    // Get providerId from app data or use default
+    const defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+
+
+    // FD Bank Details API
+    const [fdBankDetails, {
+        data: fdBankDetailsResponse,
+        error: fdBankDetailsError,
+        isLoading: isLoadingFDBankDetails,
+    }] = useFdBankDetailsSearchMutation();
+
+    const [searchTerm, setSearchTerm] = useState(initialSearchTerm || '');
+    const [searchResults, setSearchResults] = useState<IFSCData[]>([]);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [ifscError, setIfscError] = useState<string>('');
+
+    // FD bank details API status monitored
+
+    // Strict IFSC validation: 4 letters, then 0, then 6 alphanumeric
+    const validateIFSC = (ifsc: string): boolean => {
+        const ifscRegex = /^[A-Z]{4}0[A-Z0-9]{6}$/;
+        return ifscRegex.test(ifsc);
+    };
+
+    // Search function with FD bank details API call
+    const handleSearch = async () => {
+        if (!searchTerm.trim()) {
+            Alert.alert(COMMON_STRINGS.REQUIRED_FIELD, BANK_STRINGS.IFSC_INSTRUCTIONS);
+            return;
+        }
+
+        const upper = searchTerm.trim().toUpperCase();
+        if (!validateIFSC(upper)) {
+            Alert.alert(BANK_STRINGS.INVALID_IFSC_CODE, BANK_STRINGS.IFSC_CODE_NOT_FOUND);
+            return;
+        }
+
+        setHasSearched(true);
+
+        try {
+
+            // Prepare FD bank details request data
+            const fdBankDetailsRequest = {
+                providerId: defaultProviderId,
+                ifscCode: upper,
+            };
+
+            const response = await fdBankDetails(fdBankDetailsRequest).unwrap();
+
+            // Transform API response to IFSCData format
+            let searchResults: IFSCData[] = [];
+
+            // Handle the actual API response structure
+            if (response && response.data && Array.isArray(response.data) && response.data.length > 0) {
+                const bankData = response.data[0];
+                searchResults = [{
+                    bankName: bankData.BnkDescr || '',
+                    branchName: bankData.BankBranch || '',
+                    ifscCode: bankData.IfscCode || '',
+                    bankShortDesc: bankData.BnkShrtDescr || '',
+                    bankCode: bankData.Code || '',
+                    customerBankPk: bankData.intCustbnk_pk || '',
+                }];
+            } else if (response && response.bankName && response.branchName && response.ifscCode) {
+                // Fallback for old response format
+                searchResults = [{
+                    bankName: response.bankName,
+                    branchName: response.branchName,
+                    ifscCode: response.ifscCode,
+                }];
+            } else {
+                searchResults = [];
+            }
+
+            // Set search results to display in card
+            setSearchResults(searchResults);
+
+        } catch (error) {
+
+            // Set empty results when API fails
+            setSearchResults([]);
+            setHasSearched(true);
+        }
+    };
+
+    const handleCancel = () => {
+        setSearchTerm('');
+        setSearchResults([]);
+        setHasSearched(false);
+        navigate('AddBankAccount');
+    };
+
+    const handleSelect = (ifscData: IFSCData) => {
+
+        onSelect?.(ifscData);
+        // Note: onGoBack is not needed since we're using replace in navigation
+    };
+
+    // Handler for back button (used by both header and hardware back button)
+    const handleBackPress = () => {
+        navigate('AddBankAccount');
+    };
+
+    // 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.FIND_IFSC_TITLE}
+                onBackPress={handleBackPress}
+                backgroundColor={colors.primary}
+            />
+
+            <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+                <View style={styles.searchSection}>
+                    <TextFieldWithLabel
+                        label=""
+                        value={searchTerm}
+                        onChangeText={(text) => {
+                            // Convert to uppercase and allow only alphanumeric
+                            const cleaned = text.toUpperCase().replace(/[^A-Z0-9]/g, '');
+                            setSearchTerm(cleaned);
+                            // Show inline error as user types when format is invalid
+                            if (cleaned.length > 0 && !validateIFSC(cleaned)) {
+                                setIfscError(BANK_STRINGS.INVALID_IFSC_CODE);
+                            } else {
+                                setIfscError('');
+                            }
+                            // Clear any shown results when user edits IFSC
+                            if (hasSearched || searchResults.length) {
+                                setHasSearched(false);
+                                setSearchResults([]);
+                            }
+                        }}
+                        placeholder={BANK_STRINGS.IFSC_CODE_PLACEHOLDER}
+                        variant="text"
+                        maxLength={11}
+                        autoCapitalize="characters"
+                    />
+
+                    {ifscError ? (
+                        <View style={{ marginTop: -15 }}>
+                            <ValidationMessage type="error" message={ifscError} visible={true} />
+                        </View>
+                    ) : null}
+
+                    <ActionButton
+                        title={isLoadingFDBankDetails ? COMMON_STRINGS.SEARCHING : BANK_STRINGS.FIND_IFSC_BUTTON}
+                        onPress={handleSearch}
+                        disabled={!validateIFSC(searchTerm.trim().toUpperCase()) || isLoadingFDBankDetails}
+                        style={styles.findButton}
+                    />
+
+                    <TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
+                        <Text style={styles.cancelText}>{COMMON_STRINGS.CANCEL}</Text>
+                    </TouchableOpacity>
+
+                </View>
+
+                {hasSearched && searchResults.length > 0 && (
+                    <View style={styles.resultsSection}>
+                        <Text style={styles.resultsTitle}>Search Results</Text>
+                        {searchResults.map((result, index) => {
+                            return (
+                                <IFSCSearchResultCard
+                                    key={index}
+                                    bankName={result.bankName}
+                                    branchName={result.branchName}
+                                    ifscCode={result.ifscCode}
+                                    bankShortDesc={result.bankShortDesc}
+                                    bankCode={result.bankCode}
+                                    onSelect={() => {
+                                        handleSelect(result);
+                                    }}
+                                />
+                            );
+                        })}
+                    </View>
+                )}
+
+                {hasSearched && searchResults.length === 0 && (
+                    <View style={styles.noResultsContainer}>
+                        <Text style={styles.noResultsText}>{BANK_STRINGS.IFSC_NOT_FOUND}</Text>
+                        <Text style={styles.noResultsSubtext}>{BANK_STRINGS.IFSC_CODE_NOT_FOUND}</Text>
+                        <TouchableOpacity style={{ marginTop: 16 }} onPress={onGoBack}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <Image source={{ uri: base64Images.search }} style={{ width: 16, height: 16, marginRight: 8 }} />
+                                <Text style={styles.findIFSCText}>{BANK_STRINGS.FIND_IFSC_BUTTON}</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                )}
+            </ScrollView>
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 20,
+    },
+    searchSection: {
+        marginBottom: 24,
+    },
+    findButton: {
+        padding: 12,
+        paddingHorizontal: 20,
+        height: 50,
+        width: 330,
+        alignSelf: 'center',
+    },
+    cancelButton: {
+        alignItems: 'center',
+        marginHorizontal: 16,
+        marginBottom: 24,
+        padding: 12,
+        paddingHorizontal: 20,
+        borderRadius: themeName === 'dark' ? 10 : 30,
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderColor: themeName === 'dark' ? '#ffffff' : getBorderColor({ colors } as any, 0.36),
+        backgroundColor: themeName === 'dark' ? colors.cancelButtonBg : colors.background,
+        height: 50,
+        width: 330,
+        alignSelf: 'center',
+        justifyContent: 'center',
+    },
+    findIFSCText: {
+        ...typography.styles.bodyMedium,
+        color: colors.primary,
+    },
+    cancelText: {
+        ...typography.styles.bodyLarge,
+        color: themeName === 'dark' ? '#ffffff' : colors.primary,
+    },
+    resultsSection: {
+        marginTop: 8,
+    },
+    resultsTitle: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        marginBottom: 16,
+    },
+    noResultsContainer: {
+        alignItems: 'center',
+        paddingVertical: 40,
+    },
+    noResultsText: {
+        ...typography.styles.bodyLarge,
+        fontWeight: typography.fontWeight.semiBold,
+        color: colors.text,
+        marginBottom: 8,
+    },
+    noResultsSubtext: {
+        fontSize: 14,
+        color: colors.textLight,
+        textAlign: 'center',
+    },
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+        alignItems: 'center',
+    },
+    debugButtonText: {
+        ...typography.styles.bodyMedium,
+        fontWeight: '600',
+    },
+});
+
+export default FindIFSC;
+

package/src/screens/Home.tsx

@@ -0,0 +1,152 @@
+// import React from 'react';
+// import {
+//     View,
+//     Text,
+//     StyleSheet,
+//     TouchableOpacity,
+//     Platform,
+// } from 'react-native';
+// import { useTheme, useColors, useTypography, useShadows, useSpacing } from '../theme/ThemeContext';
+// import type { ColorScheme } from '../theme';
+// import SafeAreaWrapper from '../components/SafeAreaWrapper';
+
+// // Enable Fast Refresh for this module
+// if (__DEV__) {
+//     // @ts-ignore
+//     module.hot?.accept();
+// }
+
+// export interface HomeProps {
+//     onNavigateToBookFD?: () => void;
+//     onNavigateToFDList?: () => void;
+//     customStyles?: {
+//         container?: object;
+//         title?: object;
+//         button?: object;
+//         buttonText?: object;
+//     };
+// }
+
+// const Home: React.FC<HomeProps> = ({
+//     onNavigateToBookFD,
+//     onNavigateToFDList,
+//     customStyles = {},
+// }) => {
+//     const colors = useColors();
+//     const typography = useTypography();
+//     const shadows = useShadows();
+//     const spacing = useSpacing();
+
+//     const styles = createStyles(colors, typography, shadows, spacing);
+
+//     return (
+//         <SafeAreaWrapper
+//             style={customStyles.container}
+//             statusBarColor="#f8f9fa"
+//             statusBarStyle="dark-content"
+//         >
+//             <View style={styles.content}>
+//                 <Text style={[styles.title, customStyles.title]}>
+//                     Shriram FD SDK
+//                 </Text>
+//                 <Text style={styles.subtitle}>
+//                     Manage your Fixed Deposits with ease
+//                 </Text>
+
+//                 <View style={styles.buttonContainer}>
+//                     <TouchableOpacity
+//                         style={[styles.button, customStyles.button]}
+//                         onPress={onNavigateToFDList}
+//                         activeOpacity={0.8}
+//                     >
+//                         <Text style={[styles.buttonText, customStyles.buttonText]}>
+//                             View My FDs
+//                         </Text>
+//                     </TouchableOpacity>
+
+//                     <TouchableOpacity
+//                         style={[styles.button, styles.secondaryButton, customStyles.button]}
+//                         onPress={onNavigateToBookFD}
+//                         activeOpacity={0.8}
+//                     >
+//                         <Text style={[styles.buttonText, styles.secondaryButtonText, customStyles.buttonText]}>
+//                             Book New FD
+//                         </Text>
+//                     </TouchableOpacity>
+//                 </View>
+
+//                 <View style={styles.infoContainer}>
+//                     <Text style={styles.infoText}>
+//                         Platform: {Platform.OS}
+//                     </Text>
+//                     <Text style={styles.infoText}>
+//                         SDK Version: 1.0.0
+//                     </Text>
+//                 </View>
+//             </View>
+//         </SafeAreaWrapper>
+//     );
+// };
+
+// const createStyles = (colors: ColorScheme, typography: any, shadows: any, spacing: any) => StyleSheet.create({
+//     container: {
+//         flex: 1,
+//         backgroundColor: colors.background,
+//     },
+//     content: {
+//         flex: 1,
+//         justifyContent: 'center',
+//         alignItems: 'center',
+//         paddingHorizontal: spacing.xl,
+//     },
+//     title: {
+//         ...typography.styles.h1,
+//         color: colors.text,
+//         marginBottom: spacing.md,
+//         textAlign: 'center',
+//     },
+//     subtitle: {
+//         ...typography.styles.bodyMedium,
+//         color: colors.textSecondary,
+//         marginBottom: spacing.xxxl,
+//         textAlign: 'center',
+//     },
+//     buttonContainer: {
+//         width: '100%',
+//         marginBottom: spacing.xxxl,
+//         gap: spacing.lg,
+//     },
+//     button: {
+//         backgroundColor: colors.tabSelected,
+//         paddingVertical: spacing.lg,
+//         paddingHorizontal: spacing.xl,
+//         borderRadius: 8,
+//         alignItems: 'center',
+//         ...shadows.default,
+//     },
+//     secondaryButton: {
+//         backgroundColor: 'transparent',
+//         borderWidth: 2,
+//         borderColor: colors.tabSelected,
+//         shadowOpacity: 0,
+//         elevation: 0,
+//     },
+//     buttonText: {
+//         ...typography.styles.button,
+//         color: colors.background,
+//     },
+//     secondaryButtonText: {
+//         color: colors.tabSelected,
+//     },
+//     infoContainer: {
+//         alignItems: 'center',
+//     },
+//     infoText: {
+//         ...typography.styles.text12Regular,
+//         color: colors.textSecondary,
+//         marginTop: spacing.xs,
+//     },
+// });
+
+// export { Home };
+// export default Home;