@finspringinnovations/fdsdk 0.0.1 → 0.0.3

package/src/navigation/index.tsx

@@ -9,12 +9,14 @@ import { ApiProvider } from '../providers/ApiProvider';
 import { MasterDataProvider } from '../providers/MasterDataProvider';
 import { navigationRef } from './helpers';
 import type { ThemeName, Theme } from '../theme';
+import { getSDKColors, type CustomColors } from '../config/appDataConfig';
 
 interface SDKNavigationContainerProps {
     config?: SDKNavigationConfig;
     onExit?: (fdDetails?: any) => void;
     children?: React.ReactNode;
     theme?: ThemeName | Theme;
+    colors?: CustomColors; // Custom color overrides (prop-level, highest priority)
     useReactNavigation?: boolean; // Flag to use React Navigation vs Simple Navigator
 }
 
@@ -24,8 +26,15 @@ export const SDKNavigationContainer: React.FC<SDKNavigationContainerProps> = ({
     onExit,
     children,
     theme,
+    colors: propColors,
     useReactNavigation = true, // Default to React Navigation
 }) => {
+    // Merge color overrides: prop-level colors take priority over global SDK colors
+    const globalColors = getSDKColors();
+    const colorOverrides = (propColors || globalColors)
+        ? { ...(globalColors || {}), ...(propColors || {}) }
+        : null;
+
     // Choose navigator based on flag
     const navigator = useReactNavigation
         ? <RootNavigator config={config} onExit={onExit} />
@@ -41,27 +50,17 @@ export const SDKNavigationContainer: React.FC<SDKNavigationContainerProps> = ({
         )
     );
 
-    if (theme) {
-        const themeProps = typeof theme === 'string'
-            ? { initialTheme: theme }
-            : { theme };
-
-        return (
-            <ApiProvider>
-                <MasterDataProvider>
-                    <ThemeProvider {...themeProps}>
-                        {content}
-                    </ThemeProvider>
-                </MasterDataProvider>
-            </ApiProvider>
-        );
-    }
+    // Build ThemeProvider props
+    const themeProps = typeof theme === 'string'
+        ? { initialTheme: theme, colorOverrides }
+        : theme
+            ? { theme, colorOverrides }
+            : { colorOverrides };
 
-    // Default theme provider with API provider
     return (
         <ApiProvider>
             <MasterDataProvider>
-                <ThemeProvider>
+                <ThemeProvider {...themeProps}>
                     {content}
                 </ThemeProvider>
             </MasterDataProvider>

package/src/screens/FDCalculator.tsx

@@ -11,6 +11,7 @@ import {
     Platform,
     BackHandler,
     Keyboard,
+    Alert,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import SafeAreaWrapper from '../components/SafeAreaWrapper';
@@ -40,6 +41,7 @@ import { base64Images } from '../constants/strings/base64Images';
 
 export interface FDCalculatorProps {
     onGoBack?: () => void;
+    onExitSDK?: () => void;
     onNavigateToReviewKYC?: () => void;
     fdData?: {
         id: string;
@@ -54,7 +56,7 @@ export interface FDCalculatorProps {
     };
 }
 
-const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToReviewKYC, fdData }) => {
+const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onExitSDK, onNavigateToReviewKYC, fdData }) => {
     const typography = useTypography();
     const colors = useColors();
     const { themeName } = useTheme();
@@ -200,16 +202,6 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
             setPayoutValue(defaultOption);
         }
     }, [payoutOptions]);
-
-    React.useEffect(() => {
-        if (amount && payoutValue) {
-            // Only call if amount is valid
-            const numericValue = parseInt(amount.replace(/,/g, ''), 10);
-            if (numericValue >= 5000 && numericValue <= 50000000 && numericValue % 1000 === 0) {
-                handleCalculateFD(amount, payoutValue);
-            }
-        }
-    }, [payoutValue]);
     // Master data processing complete
 
     // FD Calculator API
@@ -232,6 +224,17 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
     }, [interestRates]);
 
     const [tenureValue, setTenureValue] = useState<string>('');
+    
+    // Effect to recalculate when payout or tenure changes
+    React.useEffect(() => {
+        if (amount && payoutValue && tenureValue) {
+            // Only call if amount is valid
+            const numericValue = parseInt(amount.replace(/,/g, ''), 10);
+            if (numericValue >= 5000 && numericValue <= 50000000 && numericValue % 1000 === 0) {
+                handleCalculateFD(amount, payoutValue, tenureValue);
+            }
+        }
+    }, [payoutValue, tenureValue]);
     React.useEffect(() => {
         if (tenureOptions.length > 0) {
             // If effectiveFdData has tenure, use it; otherwise use first option
@@ -253,15 +256,16 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
     };
 
     // Function to call FD calculator API
-    const handleCalculateFD = React.useCallback(async (currentAmount?: string, selectedPayout?: string) => {
+    const handleCalculateFD = React.useCallback(async (currentAmount?: string, selectedPayout?: string, selectedTenure?: string) => {
         const payoutToUse = selectedPayout || payoutValue;
         const amountToUse = currentAmount || amount; // ✅ use latest if provided
+        const tenureToUse = selectedTenure || tenureValue; // ✅ use latest if provided
 
-        if (!amountToUse || !payoutToUse) return;
+        if (!amountToUse || !payoutToUse || !tenureToUse) return;
 
         try {
             const amountValue = parseFloat(amountToUse.replace(/,/g, ''));
-            const tenureMonths = parseInt(tenureValue.replace(' Months', ''));
+            const tenureMonths = parseInt(tenureToUse.replace(' Months', ''));
 
             if (isNaN(amountValue) || isNaN(tenureMonths) || amountValue <= 0 || tenureMonths <= 0) return;
 
@@ -272,7 +276,7 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
 
             const appData = getAppData();
             const userDob = appData?.dob || '1990-01-01';
-            const isWomenDepositor = appData?.gender === 'F';
+            const isWomenDepositor = appData?.gender === 'Female';
 
             const requestData = {
                 principalAmount: amountValue,
@@ -286,6 +290,7 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
 
             const result = await calculateFD(requestData).unwrap();
             setCalculationResult(result);
+            console.log(';following is the calculation result', result, 'requestData', requestData, 'appData', appData)
         } catch (error) {
             // FD calculation failed
         } finally {
@@ -326,10 +331,10 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
 
         // Step 7: Debounced API call
         const isValidLocal = numericValue >= 5000 && numericValue <= 50000000 && numericValue % 1000 === 0;
-        if (cleanedText && isValidLocal && payoutValue) {
+        if (cleanedText && isValidLocal && payoutValue && tenureValue) {
             const newTimer = setTimeout(() => {
-                // Pass latest cleanedText directly to avoid stale state
-                handleCalculateFD(cleanedText);
+                // Pass latest values directly to avoid stale state
+                handleCalculateFD(cleanedText, payoutValue, tenureValue);
             }, 1000);
             setDebounceTimer(newTimer);
         }
@@ -358,6 +363,30 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
                 return;
             }
 
+            const appData = getAppData();
+
+            const hasEssentialData = appData?.panNumber?.trim();
+
+            if(!hasEssentialData) {
+                const alertMessage = appData?.startFDAlertMessage || 'Please complete your KYC details to start an FD, Update your profile in the app and try again.';
+                Alert.alert(
+                    'Action Required',
+                    alertMessage,
+                    [
+                        {
+                            text: 'OK',
+                            onPress: () => {
+                                if (onExitSDK) {
+                                    onExitSDK();
+                                }
+                            },
+                        },
+                    ],
+                    { cancelable: false }
+                );
+                return;
+            }
+
             // Get providerId from interest rates data
             const sdr = interestRates?.data?.sdrScheme || [];
             const fdr = interestRates?.data?.fdrScheme || [];
@@ -365,7 +394,6 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
             const providerId = firstRate?.providerId;
 
             // Get user data for all required fields
-            const appData = getAppData();
             const userDob = appData?.dob || '1990-01-01';
             const isWomenDepositor = appData?.gender === 'F';
 
@@ -591,19 +619,18 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
         <SafeAreaWrapper
             includeTop={false}
             bottomPadding={25}
-            statusBarColor="#000000"
-            statusBarStyle="light-content"
+            statusBarColor={colors.background}
+            statusBarStyle={themeName === 'dark' ? 'light-content' : 'dark-content'}
         >
             {/* Header */}
             <View style={styles.header}>
                 <TouchableOpacity onPress={() => navigate('FDList')} style={styles.backButton}>
                     <Image
                         source={{ uri: base64Images.backArrow }}
-                        style={[styles.backIcon, { tintColor: themeName === 'dark' ? colors.headerText : undefined }]}
+                        style={[styles.backIcon, { tintColor: colors.text }]}
                         resizeMode="contain"
                         width={24}
                         height={24}
-
                     />
                 </TouchableOpacity>
             </View>
@@ -656,8 +683,8 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
                                     onPress={() => {
                                         setTenureValue(option);
                                         setShowTenureMenu(false);
-                                        // Call API after dropdown value changes
-                                        setTimeout(() => handleCalculateFD(), 100);
+                                        // Call API with the new tenure value directly to avoid closure issues
+                                        setTimeout(() => handleCalculateFD(amount, payoutValue, option), 100);
                                     }}
                                 >
                                     <Text style={styles.modalOptionText}>{option}</Text>
@@ -688,9 +715,8 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
                                         onPress={() => {
                                             setPayoutValue(option);
                                             setShowPayoutModal(false);
-                                            handleCalculateFD(amount, option);
-                                            // Pass the selected option directly to avoid stale state
-                                            // setTimeout(() => handleCalculateFD(option), 100);
+                                            // Pass all values directly to avoid stale state
+                                            handleCalculateFD(amount, option, tenureValue);
                                         }}
                                     >
                                         <Text style={styles.modalOptionText}>{option}</Text>
@@ -893,34 +919,32 @@ const createStyles = (typography: any, colors: any, themeName: string) => StyleS
         position: 'relative',
     },
     startButton: {
-        backgroundColor: themeName === 'dark' ? colors.buttonBackground : colors.headerBg,
-        paddingVertical: themeName === 'dark' ? 1 : 20,
+        backgroundColor: colors.buttonBackground || colors.headerBg,
+        paddingVertical: 20,
         paddingHorizontal: 20,
-        borderRadius: themeName === 'dark' ? 10 : 30,
+        borderRadius: 30,
         marginTop: 30,
         alignItems: 'center',
         justifyContent: 'center',
-        height: themeName === 'dark' ? 50 : 56,
+        height: 56,
         width: '90%',
         alignSelf: 'center',
     },
     startButtonDisabled: {
-        backgroundColor: '#909090',
-        color: '#ffffff',
+        backgroundColor: colors.muted || '#909090',
     },
     startButtonText: {
         ...typography.styles.button,
-        color: themeName === 'dark' ? colors.buttonTextColor : colors.background,
-        lineHeight: themeName === 'dark' ? 24 : typography.styles.button.lineHeight,
+        color: colors.buttonTextColor || colors.background,
         fontSize: 16,
     },
     startButtonTextDisabled: {
-        color: themeName === 'dark' ? "#ffffff" : colors.tabSelected,
+        color: colors.textSecondary,
     },
     inlineMenu: {
-        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.background,
-        borderWidth: themeName === 'dark' ? 1 : 0.5,
-        borderColor: themeName === 'dark' ? '#ffffff' : 'rgba(0,0,0,0.2)',
+        backgroundColor: colors.inputBackground || colors.background,
+        borderWidth: 0.5,
+        borderColor: colors.inputBorder || colors.border,
         borderRadius: 8,
         marginTop: 6,
         paddingHorizontal: 12,

package/src/screens/FDList.tsx

@@ -888,7 +888,7 @@ const FDList: React.FC<FDListProps> = ({
             <SafeAreaWrapper
                 style={customStyles.container}
                 includeTop={false}
-                statusBarColor="#000000"
+                statusBarColor={colors.headerBg}
                 statusBarStyle="light-content"
             >
                 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -903,7 +903,7 @@ const FDList: React.FC<FDListProps> = ({
         <SafeAreaWrapper
             style={customStyles.container}
             includeTop={false}
-            statusBarColor="#0A1929"
+            statusBarColor={colors.headerBg}
             statusBarStyle="light-content"
         >
             {/* Custom FDList Header */}
@@ -923,12 +923,12 @@ const FDList: React.FC<FDListProps> = ({
                 <View style={styles.headerContent}>
                     <Text style={styles.headerTitle}>{FD_STRINGS.CORPORATE_FDS_TITLE}</Text>
                     <View style={styles.poweredByContainer}>
-                        <Text style={styles.poweredByText}>Powered by</Text>
+                        {/* <Text style={styles.poweredByText}>Powered by</Text>
                         <Image
                             source={{ uri: base64Images.simplfylogo }}
                             style={styles.simplifyLogo}
                             resizeMode="contain"
-                        />
+                        /> */}
                     </View>
                 </View>
             </View>
@@ -1105,7 +1105,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
         backgroundColor: colors.surface,
     },
     customHeader: {
-        backgroundColor: '#0A1929',
+        backgroundColor: colors.headerBg,
         paddingTop: Platform.OS === 'ios' ? 50 : 20,
         paddingBottom: spacing.md,
         paddingHorizontal: spacing.lg,
@@ -1121,7 +1121,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     backIcon: {
         width: 24,
         height: 24,
-        tintColor: '#FFFFFF',
+        tintColor: colors.headerText,
     },
     headerContent: {
         flex: 1,
@@ -1130,7 +1130,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     headerTitle: {
         ...typography.styles.h3,
-        color: '#FFFFFF',
+        color: colors.headerText,
         marginBottom: spacing.xs,
     },
     poweredByContainer: {
@@ -1139,7 +1139,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     poweredByText: {
         ...typography.styles.text10Regular,
-        color: '#FFFFFF',
+        color: colors.headerText,
         opacity: 0.7,
         marginRight: 0,
     },
@@ -1175,14 +1175,14 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
         paddingVertical: spacing.md,
         marginHorizontal: 2,
         borderBottomWidth: 3,
-        borderBottomColor: 'white',
+        borderBottomColor: colors.surface,
         borderBottomLeftRadius: 8,
         borderBottomRightRadius: 8,
         backgroundColor: 'transparent',
     },
     activeTab: {
         borderBottomColor: colors.tabSelected,
-        backgroundColor: themeName === 'dark' ? '#000000' : '#fff',
+        backgroundColor: colors.background,
         borderBottomLeftRadius: 12,
         borderBottomRightRadius: 12,
     },
@@ -1276,7 +1276,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     showAllButtonText: {
         ...typography.styles.text14Medium,
-        color: '#ffffff', // Use white color directly
+        color: colors.headerText, // Use theme header text color
         textAlign: 'center',
     },
 });

package/src/screens/NomineeDetail.tsx

@@ -140,7 +140,8 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                 const year = parseInt(dateParts[2], 10);
 
                 if (day >= 1 && day <= 31 && month >= 1 && month <= 12 && year >= 1900 && year <= new Date().getFullYear()) {
-                    const parsedDate = new Date(year, month - 1, day);
+                    // Use noon to avoid timezone issues
+                    const parsedDate = new Date(year, month - 1, day, 12, 0, 0);
                     if (!isNaN(parsedDate.getTime()) && parsedDate.getDate() === day && parsedDate.getMonth() === month - 1 && parsedDate.getFullYear() === year) {
                         setSelectedDate(parsedDate);
                     }
@@ -286,7 +287,8 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
 
                 // Validate the parsed values
                 if (day >= 1 && day <= 31 && month >= 1 && month <= 12 && year >= 1900 && year <= new Date().getFullYear()) {
-                    const parsedDate = new Date(year, month - 1, day);
+                    // Use noon to avoid timezone issues
+                    const parsedDate = new Date(year, month - 1, day, 12, 0, 0);
                     if (!isNaN(parsedDate.getTime()) && parsedDate.getDate() === day && parsedDate.getMonth() === month - 1 && parsedDate.getFullYear() === year) {
                         setSelectedDate(parsedDate);
                     } else {
@@ -320,12 +322,14 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
         if (Platform.OS === 'android') {
             // Android fires with types: 'set' and 'dismissed'
             if (event?.type === 'set' && selectedDate) {
-                setSelectedDate(selectedDate);
+                // Normalize to noon to avoid timezone issues
+                const normalizedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 12, 0, 0);
+                setSelectedDate(normalizedDate);
 
                 const today = new Date();
-                let age = today.getFullYear() - selectedDate.getFullYear();
-                const m = today.getMonth() - selectedDate.getMonth();
-                if (m < 0 || (m === 0 && today.getDate() < selectedDate.getDate())) {
+                let age = today.getFullYear() - normalizedDate.getFullYear();
+                const m = today.getMonth() - normalizedDate.getMonth();
+                if (m < 0 || (m === 0 && today.getDate() < normalizedDate.getDate())) {
                     age--;
                 }
 
@@ -336,9 +340,9 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                     return;
                 }
 
-                const day = selectedDate.getDate().toString().padStart(2, '0');
-                const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0');
-                const year = selectedDate.getFullYear().toString();
+                const day = normalizedDate.getDate().toString().padStart(2, '0');
+                const month = (normalizedDate.getMonth() + 1).toString().padStart(2, '0');
+                const year = normalizedDate.getFullYear().toString();
                 const formattedDate = `${day}/${month}/${year}`;
                 updateField('dateOfBirth', formattedDate);
                 closeDatePicker();
@@ -353,10 +357,12 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
 
         // iOS inline/spinner handling
         if (selectedDate) {
-            setSelectedDate(selectedDate);
-            const day = selectedDate.getDate().toString().padStart(2, '0');
-            const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0');
-            const year = selectedDate.getFullYear().toString();
+            // Normalize to noon to avoid timezone issues
+            const normalizedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 12, 0, 0);
+            setSelectedDate(normalizedDate);
+            const day = normalizedDate.getDate().toString().padStart(2, '0');
+            const month = (normalizedDate.getMonth() + 1).toString().padStart(2, '0');
+            const year = normalizedDate.getFullYear().toString();
             const formattedDate = `${day}/${month}/${year}`;
             updateField('dateOfBirth', formattedDate);
         }
@@ -499,7 +505,6 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
             }}
             editable={false}
             keepWhiteBackground={true}
-            inputStyle={{ color: 'white' }}
         />
     );
 
@@ -679,6 +684,7 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                                                 mode="date"
                                                 display={Platform.OS === 'ios' ? 'spinner' : 'default'}
                                                 onChange={onDateChange}
+                                                minimumDate={new Date(1900, 0, 1)}  // January 1, 1900
                                                 maximumDate={new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate())}
                                                 themeVariant="light"
                                             />

package/src/screens/PayNow.tsx

@@ -166,8 +166,8 @@ const PayNow: React.FC<PayNowProps> = ({ onGoBack, onConfirm, fdData }) => {
         <SafeAreaWrapper
             includeTop={false}
             bottomPadding={25}
-            statusBarColor="#000000"
-            statusBarStyle="light-content"
+            statusBarColor={colors.background}
+            statusBarStyle={themeName === 'dark' ? 'light-content' : 'dark-content'}
         >
             <View style={styles.container}>
                 <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
@@ -243,13 +243,13 @@ const createStyles = (colors: any, typography: any, themeName: string) => StyleS
     },
     backButton: {
         flex: 1,
-        backgroundColor: themeName === 'dark' ? colors.cancelButtonBg : 'transparent',
-        borderWidth: themeName === 'dark' ? 1 : 0,
-        borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
-        borderRadius: themeName === 'dark' ? 10 : 0,
+        backgroundColor: colors.cancelButtonBg || 'transparent',
+        borderWidth: 0,
+        borderColor: 'transparent',
+        borderRadius: 10,
     },
     backButtonText: {
-        color: themeName === 'dark' ? '#ffffff' : colors.primary,
+        color: colors.primary,
     },
     confirmButton: {
         flex: 1,

package/src/screens/Payment.tsx

@@ -5,11 +5,15 @@ import SafeAreaWrapper from '../components/SafeAreaWrapper';
 import { useColors } from '../theme/ThemeContext';
 import { decryptResponse } from '../utils/encryption';
 import { getEncryptionConfig } from '../config/encryptionConfig';
+import { useFocusEffect } from '@react-navigation/native';
+import { getPaymentSession } from '../state/paymentSession';
+import { usePaymentStatusTimer, PaymentStatus } from '../hooks/usePaymentStatusTimer';
 
 export interface PaymentProps {
     onGoBack?: () => void;
     onPaymentSuccess?: (data?: any) => void;
     onPaymentFailure?: (error?: any) => void;
+    onPaymentPending?: (data?: any) => void;
     paymentUrl: string;
     successUrl?: string;
     failureUrl?: string;
@@ -19,6 +23,7 @@ const Payment: React.FC<PaymentProps> = ({
     onGoBack,
     onPaymentSuccess,
     onPaymentFailure,
+    onPaymentPending,
     paymentUrl,
     successUrl = 'payment/success',
     failureUrl = 'payment/failure',
@@ -27,6 +32,36 @@ const Payment: React.FC<PaymentProps> = ({
     const styles = createStyles(colors);
     const webViewRef = useRef<WebView>(null);
     const [loading, setLoading] = useState(true);
+    const currentStatusRef = useRef<PaymentStatus>('pending');
+    const { transactionId } = getPaymentSession();
+
+    const { startTimer, stopTimer } = usePaymentStatusTimer({
+        transactionId,
+        onStatusUpdate: (status, response) => {
+            currentStatusRef.current = status;
+
+            if (status === 'success') {
+                onPaymentSuccess?.(response);
+            }
+            else if (status === 'failed') {
+                onPaymentFailure?.(response);
+            }
+            else if (status === 'pending') {
+                onPaymentPending?.(response);  
+            }
+        }
+
+    });
+
+    useFocusEffect(
+        React.useCallback(() => {
+            startTimer();
+
+        }, [startTimer, stopTimer])
+    );
+
+
+
 
     const handleNavigationStateChange = async (navState: any) => {
         const { url } = navState;
@@ -35,18 +70,9 @@ const Payment: React.FC<PaymentProps> = ({
             await handlePaymentStatusPage();
             return;
         }
-
-        if (url.includes(successUrl)) {
-            setLoading(false);
-            onPaymentSuccess?.(navState);
-            return;
-        }
-
-        if (url.includes(failureUrl)) {
-            setLoading(false);
-            onPaymentFailure?.(navState);
-            return;
-        }
+        // else{
+        //     onPaymentPending?.(url);
+        // }
     };
 
     const handleWebViewError = (syntheticEvent: any) => {
@@ -107,14 +133,19 @@ const Payment: React.FC<PaymentProps> = ({
                 const paymentStatus = response.data?.paymentStatus?.toLowerCase();
 
                 if (paymentStatus === 'success') {
+                    currentStatusRef.current = "success";
+                    stopTimer();
                     onPaymentSuccess?.(response);
                 } else if (paymentStatus === 'failed') {
+                    currentStatusRef.current = "failed";
+                    stopTimer();
                     onPaymentFailure?.(response);
                 } else {
-                    onPaymentFailure?.(response);
+                    onPaymentPending?.(response);
                 }
             } else {
-                onPaymentFailure?.(response);
+                currentStatusRef.current = "pending";
+                onPaymentPending?.(response);
             }
 
             setLoading(false);