@finspringinnovations/fdsdk 0.0.3 → 0.0.5

package/src/screens/Payment.tsx

@@ -5,9 +5,8 @@ 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';
+import { useAppSelector } from '../store';
+import { usePaymentSSE } from '../hooks/usePaymentSSE';
 
 export interface PaymentProps {
     onGoBack?: () => void;
@@ -32,33 +31,16 @@ 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 applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
+    const providerId = useAppSelector((state: any) => state?.onboarding?.providerId);
+    const { start: startPaymentSSE, stop: stopPaymentSSE } = usePaymentSSE();
+    const onSuccessRef = useRef(onPaymentSuccess);
+    const onFailureRef = useRef(onPaymentFailure);
+    onSuccessRef.current = onPaymentSuccess;
+    onFailureRef.current = onPaymentFailure;
 
 
 
@@ -89,6 +71,40 @@ const Payment: React.FC<PaymentProps> = ({
         setLoading(false);
     };
 
+    // SSE: listen for payment status while user is on Payment WebView (same as web integration)
+    useEffect(() => {
+        if (!applicationId || !paymentUrl?.trim()) return;
+
+        startPaymentSSE(
+            applicationId,
+            {
+                onPaymentStatus: (status, payload) => {
+                    const normalized = String(status || '').toUpperCase();
+                    if (normalized === 'SUCCESS') {
+                        stopPaymentSSE();
+                        onSuccessRef.current?.(payload);
+                        return;
+                    }
+                    if (normalized === 'FAILED') {
+                        stopPaymentSSE();
+                        onFailureRef.current?.(payload);
+                    }
+                },
+                onError: () => {
+                    if (__DEV__) console.warn('[Payment] SSE connection error');
+                },
+                onConnected: () => {
+                    if (__DEV__) console.log('[Payment] SSE connected for payment status');
+                },
+            },
+            { workflowInstanceId, applicationId, entityid: entityId, providerId }
+        );
+
+        return () => {
+            stopPaymentSSE();
+        };
+    }, [applicationId, paymentUrl, workflowInstanceId, entityId, providerId, startPaymentSSE, stopPaymentSSE]);
+
     const handleMessage = async (event: any) => {
         try {
             const dataString = event.nativeEvent.data;
@@ -133,18 +149,13 @@ 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 {
                     onPaymentPending?.(response);
                 }
             } else {
-                currentStatusRef.current = "pending";
                 onPaymentPending?.(response);
             }
 
@@ -252,4 +263,3 @@ const createStyles = (colors: any) => StyleSheet.create({
 });
 
 export default Payment;
-

package/src/screens/PaymentStatus.tsx

@@ -15,8 +15,7 @@ import { setPaymentSession, getPaymentSession } from '../state/paymentSession';
 import { useRoute } from '@react-navigation/native';
 import { BANK_STRINGS } from '../constants/strings/bank';
 import { COMMON_STRINGS } from '../constants/strings/common';
-import { getApiConfig } from '../config/apiConfig';
-import { usePaymentStatusTimer } from '../hooks/usePaymentStatusTimer';
+import { usePaymentSSE } from '../hooks/usePaymentSSE';
 
 export interface PaymentStatusProps {
     onRetry?: () => void;
@@ -64,23 +63,7 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
     const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
     const providerId = useAppSelector((state: any) => state?.onboarding?.providerId);
 
-    const {
-        startTimer,
-        stopTimer,
-        triggerStatusCheck,
-        isCheckingStatus,
-    } = usePaymentStatusTimer({
-        transactionId: finalTransactionId,
-        overrides: {
-            providerId,
-            workflowInstanceId,
-            applicationid: applicationId,
-            entityid: entityId,
-        },
-        onStatusUpdate: (nextStatus) => {
-            setCurrentStatus(nextStatus);
-        },
-    });
+    const { start: startPaymentSSE, stop: stopPaymentSSE } = usePaymentSSE();
 
     // Payment Retry API
     const [paymentRetry, {
@@ -118,20 +101,33 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
     };
 
     useEffect(() => {
-        if (currentStatus === 'pending') {
-            startTimer();
-        } else {
-            stopTimer();
+        if (currentStatus !== 'pending' || !applicationId) {
+            stopPaymentSSE();
+            return;
         }
 
+        startPaymentSSE(applicationId, {
+            onPaymentStatus: (status) => {
+                const normalized = String(status || '').toUpperCase();
+                if (normalized === 'SUCCESS') {
+                    setCurrentStatus('success');
+                    stopPaymentSSE();
+                    return;
+                }
+                if (normalized === 'FAILED') {
+                    setCurrentStatus('failed');
+                    stopPaymentSSE();
+                }
+            },
+            onError: () => {
+                // keep pending state; stream can be restarted on re-render
+            },
+        });
+
         return () => {
-            stopTimer();
+            stopPaymentSSE();
         };
-    }, [currentStatus, startTimer, stopTimer]);
-
-    const handlePaymentReverseFeed = async () => {
-        await triggerStatusCheck();
-    };
+    }, [applicationId, currentStatus, startPaymentSSE, stopPaymentSSE]);
 
     // Handle payment retry when status is failed
     const handlePaymentRetry = async () => {
@@ -181,9 +177,6 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
             // Get user info from app data
             const userInfo = getUserInfoForAPI();
 
-            // Get API configuration
-            const apiConfig = getApiConfig();
-
             // Prepare request payload
             const requestPayload = {
                 userReferenceId: userInfo.id
@@ -412,13 +405,6 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
                             disabled={isLoadingPaymentRetry}
                         />
                     )}
-                    {/* {currentStatus === 'pending' && (
-                        <ActionButton
-                            title={isCheckingStatus ? COMMON_STRINGS.CHECKING : BANK_STRINGS.REFRESH_STATUS_BUTTON}
-                            onPress={handlePaymentReverseFeed}
-                            disabled={isCheckingStatus}
-                        />
-                    )} */}
                 </View>
             </View>
         </SafeAreaWrapper>
@@ -545,4 +531,3 @@ const createStyles = (colors: any, typography: any, status: 'success' | 'failed'
 };
 
 export default PaymentStatus;
-

package/src/screens/ReviewKYC.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useRoute } from '@react-navigation/native';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, Image, TouchableWithoutFeedback, Keyboard, TextInput, BackHandler, Platform, ActivityIndicator, KeyboardAvoidingView } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, Image, TouchableWithoutFeedback, Keyboard, TextInput } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import SafeAreaWrapper from '../components/SafeAreaWrapper';
 import { Header, DropdownSelector } from '../components';
@@ -209,7 +209,6 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
 
     // State to track marital status dropdown visibility
     const [showMaritalStatusMenu, setShowMaritalStatusMenu] = useState(false);
-    const [isGoingBack, setIsGoingBack] = useState(false);
 
     // Ref to track currently focused text input
     const focusedTextInputRef = useRef<TextInput | null>(null);
@@ -287,10 +286,6 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
     // Validate individual field and set error
     const validateField = (field: keyof KYCData, value: string): string => {
         if (!value || value.trim().length === 0) {
-            // Use "District" for area field
-            if (field === 'area') {
-                return 'District is required';
-            }
             return `${field.charAt(0).toUpperCase() + field.slice(1)} is required`;
         }
 
@@ -298,12 +293,6 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
         const textFields = ['area', 'city', 'addressLine1', 'addressLine2', 'state', 'country'];
         if (textFields.includes(field)) {
             if (value.trim().length < 2) {
-                // Use "Address" for addressLine1 and addressLine2
-                if (field === 'addressLine1' || field === 'addressLine2') {
-                    return 'Address must be at least 2 characters';
-                } else if (field === 'area') {
-                    return 'District must be at least 2 characters';
-                }
                 return `${field.charAt(0).toUpperCase() + field.slice(1)} must be at least 2 characters`;
             }
         }
@@ -334,9 +323,7 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
 
         return (
             <View style={styles.errorContainer}>
-                {Platform.OS === 'android' && (
-                    <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
-                )}
+                <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
                 <Text style={styles.errorText}>{error}</Text>
             </View>
         );
@@ -550,6 +537,8 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
                 return;
             }
             const data = getGlobalData();
+
+            console.log('panRapidNumber global data check', data, panRapidNumber);
             // Decide next screen based on panrapidnumber existence
             if (panRapidNumber && data.completeFDData) {
                 navigate('PayNow', { fdData: fdDataFromRoute });
@@ -597,13 +586,6 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
                 autoCapitalize={variant === 'email' ? 'none' : 'words'}
                 onFocus={() => textInputRef && handleFieldFocus(textInputRef)}
                 textInputRef={textInputRef}
-                returnKeyType="done"
-                onSubmitEditing={() => {
-                    if (textInputRef?.current) {
-                        textInputRef.current.blur();
-                    }
-                    Keyboard.dismiss();
-                }}
             />
             {renderFieldError(field)}
         </View>
@@ -674,163 +656,119 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
                 onDatePress={() => {
                     // TODO: Implement date picker if needed
                 }}
-                returnKeyType="done"
-                onSubmitEditing={() => {
-                    if (textInputRef?.current) {
-                        textInputRef.current.blur();
-                    }
-                    Keyboard.dismiss();
-                }}
             />
             {renderFieldError(field)}
         </View>
     );
 
-    // Handler for back button (used by both header and hardware back button)
-    const handleBackPress = async () => {
-        setIsGoingBack(true);
-        try {
-            const userInfo = getUserInfoForAPI();
-            await previousState({
-                providerId: defaultProviderId,
-                workflowInstanceId,
-                userreferenceid: userInfo.userReferenceId,
-                applicationid: applicationId,
-                entityid: entityId,
-            });
-        } catch (e) {
-            // Handle error silently
-        } finally {
-            setIsGoingBack(false);
-            //onGoBack?.();
-            navigate('FDCalculator');
-        }
-    };
-
-    // Handle Android hardware back button
-    useEffect(() => {
-        if (Platform.OS !== 'android') return;
-
-        const onHardwareBackPress = () => {
-            handleBackPress();
-            return true; // Prevent default behavior
-        };
-
-        const backHandler = BackHandler.addEventListener(
-            'hardwareBackPress',
-            onHardwareBackPress
-        );
-
-        return () => backHandler.remove();
-    }, [defaultProviderId, workflowInstanceId, applicationId, entityId]);
-
     return (
         <SafeAreaWrapper
             includeTop={false}
             bottomPadding={25}
-            statusBarColor="#000000"
-            statusBarStyle="light-content"
+            statusBarColor="#f8f9fa"
+            statusBarStyle="dark-content"
         >
             <Header
                 title="Review KYC"
-                onBackPress={handleBackPress}
+                onBackPress={async () => {
+                    try {
+                        const userInfo = getUserInfoForAPI();
+                        await previousState({
+                            providerId: defaultProviderId,
+                            workflowInstanceId,
+                            userreferenceid: userInfo.userReferenceId,
+                            applicationid: applicationId,
+                            entityid: entityId,
+                        });
+                    } catch (e) {
+                        // Handle error silently
+                    } finally {
+                        //onGoBack?.();
+                        navigate('FDCalculator');
+                    }
+                }}
                 backgroundColor={colors.primary}
             />
 
-            <KeyboardAvoidingView
-                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-                style={styles.keyboardAvoidingView}
-                keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+            <ScrollView
+                style={styles.container}
+                showsVerticalScrollIndicator={false}
+                scrollEnabled={!isLoadingPanRapid}
             >
-                <ScrollView
-                    style={styles.container}
-                    showsVerticalScrollIndicator={false}
-                    scrollEnabled={!isLoadingPanRapid}
-                    keyboardShouldPersistTaps="handled"
-                    contentContainerStyle={styles.scrollContent}
-                >
-                    <TouchableWithoutFeedback onPress={isLoadingPanRapid ? undefined : closeDropdown}>
+                <TouchableWithoutFeedback onPress={isLoadingPanRapid ? undefined : closeDropdown}>
+                    <View>
                         <View>
-                            <View>
-                                <TextFieldWithLabel
-                                    label="PAN Card"
-                                    value={kycData.panCard}
-                                    onChangeText={(text) => updateField('panCard', text)}
-                                    placeholder="Enter PAN Card"
-                                    editable={false}
-                                    variant="text"
-                                    maxLength={10}
-                                    keyboardType="default"
-                                    autoCapitalize="characters"
-                                    onFocus={() => handleFieldFocus(panCardRef)}
-                                    textInputRef={panCardRef}
-                                    returnKeyType="done"
-                                    onSubmitEditing={() => {
-                                        if (panCardRef?.current) {
-                                            panCardRef.current.blur();
-                                        }
-                                        Keyboard.dismiss();
-                                    }}
-                                />
-                                {renderFieldError('panCard')}
-                            </View>
-
-                            {renderDateField('Date of Birth', kycData.dateOfBirth, 'dateOfBirth', false, dateOfBirthRef)}
-
-                            {renderMaritalStatusDropdown()}
-
-                            {renderInputField('District', kycData.area, 'area', 'Enter District', true, 'text', 50, areaRef)}
-
-                            {renderInputField('City', kycData.city, 'city', 'Enter City', true, 'text', 30, cityRef)}
-
-                            {renderInputField('Address line 1', kycData.addressLine1, 'addressLine1', 'Enter Address Line 1', true, 'text', 100, addressLine1Ref)}
-
-                            {renderInputField('Address line 2', kycData.addressLine2, 'addressLine2', 'Enter Address Line 2', true, 'text', 100, addressLine2Ref)}
-
-                            {renderInputField('Pincode', kycData.pincode, 'pincode', 'Enter Pincode', true, 'numeric', 6, pincodeRef)}
-
-                            {renderInputField('State', kycData.state, 'state', 'Enter State', true, 'text', undefined, stateRef)}
-
-                            {renderInputField('Country', kycData.country, 'country', 'Enter Country', true, 'text', undefined, countryRef)}
-
-                            <View style={styles.checkboxContainer}>
-                                <TouchableOpacity
-                                    style={styles.checkbox}
-                                    onPress={() => updateField('useExistingAddress', !kycData.useExistingAddress)}
-                                >
-                                    <View style={[
-                                        styles.checkboxBox,
-                                        kycData.useExistingAddress && styles.checkboxChecked
-                                    ]}>
-                                        {kycData.useExistingAddress ? (
+                            <TextFieldWithLabel
+                                label="Pan Card"
+                                value={kycData.panCard}
+                                onChangeText={(text) => updateField('panCard', text)}
+                                placeholder="Enter PAN Card"
+                                editable={false}
+                                variant="text"
+                                maxLength={10}
+                                keyboardType="default"
+                                autoCapitalize="characters"
+                                onFocus={() => handleFieldFocus(panCardRef)}
+                                textInputRef={panCardRef}
+                            />
+                            {renderFieldError('panCard')}
+                        </View>
+
+                        {renderDateField('Date of Birth', kycData.dateOfBirth, 'dateOfBirth', false, dateOfBirthRef)}
+
+                        {renderMaritalStatusDropdown()}
+
+                        {renderInputField('Area', kycData.area, 'area', 'Enter Area', true, 'text', 50, areaRef)}
+
+                        {renderInputField('City', kycData.city, 'city', 'Enter City', true, 'text', 30, cityRef)}
+
+                        {renderInputField('Address line 1', kycData.addressLine1, 'addressLine1', 'Enter Address Line 1', true, 'text', 100, addressLine1Ref)}
+
+                        {renderInputField('Address line 2', kycData.addressLine2, 'addressLine2', 'Enter Address Line 2', true, 'text', 100, addressLine2Ref)}
+
+                        {renderInputField('Pincode', kycData.pincode, 'pincode', 'Enter Pincode', true, 'numeric', 6, pincodeRef)}
+
+                        {renderInputField('State', kycData.state, 'state', 'Enter State', true, 'text', undefined, stateRef)}
+
+                        {renderInputField('Country', kycData.country, 'country', 'Enter Country', true, 'text', undefined, countryRef)}
+
+                        <View style={styles.checkboxContainer}>
+                            <TouchableOpacity
+                                style={styles.checkbox}
+                                onPress={() => updateField('useExistingAddress', !kycData.useExistingAddress)}
+                            >
+                                <View style={[
+                                    styles.checkboxBox,
+                                    kycData.useExistingAddress && styles.checkboxChecked
+                                ]}>
+                                    {kycData.useExistingAddress ? (
+                                        <Image
+                                            source={{ uri: (themeName === 'dark') ? base64Images.checkBoxDark : base64Images.filledCheckBox }}
+                                            resizeMode="cover"
+                                            width={20}
+                                            height={20}
+                                        />
+                                    ) : (
+                                        (themeName === 'dark') ? (
                                             <Image
-                                                source={{ uri: (themeName === 'dark') ? base64Images.checkBoxDark : base64Images.filledCheckBox }}
+                                                source={{ uri: base64Images.unCheckBoxDark }}
                                                 resizeMode="cover"
                                                 width={20}
                                                 height={20}
                                             />
-                                        ) : (
-                                            (themeName === 'dark') ? (
-                                                <Image
-                                                    source={{ uri: base64Images.unCheckBoxDark }}
-                                                    resizeMode="cover"
-                                                    width={20}
-                                                    height={20}
-                                                />
-                                            ) : null
-                                        )}
-                                    </View>
-                                </TouchableOpacity>
-                                <Text style={styles.checkboxText}>
-                                    For existing customers, we'll use the address from our records. For new customers, the address from your Aadhar card will be used. To update, please raise a service request with valid address proof.
-                                </Text>
-                            </View>
+                                        ) : null
+                                    )}
+                                </View>
+                            </TouchableOpacity>
+                            <Text style={styles.checkboxText}>
+                                For existing customers, we'll use the address from our records. For new customers, the address from your Aadhar card will be used. To update, please raise a service request with valid address proof.
+                            </Text>
+                        </View>
 
 
-                        </View>
-                    </TouchableWithoutFeedback>
-                </ScrollView>
-            </KeyboardAvoidingView>
+                    </View>
+                </TouchableWithoutFeedback>
+            </ScrollView>
             <ActionButton
                 title="Continue"
                 onPress={handleContinue}
@@ -842,28 +780,16 @@ const ReviewKYC: React.FC<ReviewKYCProps> = ({
                 <View style={styles.loadingOverlay} pointerEvents="auto">
                 </View>
             )}
-            {/* Loading overlay for back navigation */}
-            {isGoingBack && (
-                <View style={styles.loadingOverlay} pointerEvents="auto">
-                    <ActivityIndicator size="large" color={colors.primary} />
-                </View>
-            )}
         </SafeAreaWrapper>
     );
 };
 
 const createStyles = (colors: any, typography: any, themeName?: string) => StyleSheet.create({
-    keyboardAvoidingView: {
-        flex: 1,
-    },
     container: {
         flex: 1,
         paddingHorizontal: 16,
         paddingTop: 20,
     },
-    scrollContent: {
-        flexGrow: 1,
-    },
     checkboxContainer: {
         flexDirection: 'row',
         alignItems: 'flex-start',
@@ -947,10 +873,8 @@ const createStyles = (colors: any, typography: any, themeName?: string) => Style
         right: 0,
         bottom: 0,
         backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        justifyContent: 'center',
-        alignItems: 'center',
         zIndex: 1000,
     },
 });
 
-export default ReviewKYC;
+export default ReviewKYC;