@finspringinnovations/fdsdk 0.0.1

package/src/screens/PaymentStatus.tsx

@@ -0,0 +1,561 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, Alert, Image, BackHandler, Platform, StatusBar } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { base64Images } from '../constants/strings/base64Images';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { PaymentDetailsCard } from '../components';
+import ActionButton from '../components/ActionButton';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { usePaymentReverseFeedMutation, usePaymentRetryMutation } from '../api/fdApi';
+import { useGetCustomerApplicationsMutation } from '../api/customerApi';
+import { useAppSelector } from '../store';
+import { getUserInfoForAPI } from '../config/appDataConfig';
+import { navigate } from '../navigation/helpers';
+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';
+
+export interface PaymentStatusProps {
+    onRetry?: () => void;
+    onContinue?: (fdDetails?: any) => void; // Callback when user clicks Continue on success - should redirect to main app with FD details
+    status: 'success' | 'failed' | 'pending';
+    transactionId?: string;
+    fdData?: {
+        companyName: string;
+        amount: number;
+        fdRate: string;
+        tenure: string;
+        interestPayout: string;
+    };
+}
+
+const PaymentStatus: React.FC<PaymentStatusProps> = ({
+    onRetry,
+    onContinue,
+    status,
+    transactionId,
+    fdData
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+
+    // Local state to track current status (can be updated from API responses)
+    const [currentStatus, setCurrentStatus] = useState<'success' | 'failed' | 'pending'>(status);
+
+    const styles = createStyles(colors, typography, currentStatus);
+    const route = useRoute();
+
+    // Get transaction ID from navigation props (route params)
+    const navigationTransactionId = (route.params as any)?.transactionId;
+
+    // Fallback: Get transaction ID from payment session if not in navigation params
+    const paymentSession = getPaymentSession();
+    const sessionTransactionId = paymentSession.transactionId;
+
+    const finalTransactionId = navigationTransactionId || sessionTransactionId || transactionId || "";
+
+    // Redux selectors
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
+    const providerId = useAppSelector((state: any) => state?.onboarding?.providerId);
+
+    // Payment Reverse Feed API
+    const [paymentReverseFeed, {
+        data: paymentReverseFeedResponse,
+        error: paymentReverseFeedError,
+        isLoading: isLoadingPaymentReverseFeed,
+    }] = usePaymentReverseFeedMutation();
+
+    // Payment Retry API
+    const [paymentRetry, {
+        data: paymentRetryResponse,
+        error: paymentRetryError,
+        isLoading: isLoadingPaymentRetry,
+    }] = usePaymentRetryMutation();
+
+    // Get Customer Applications API
+    const [getCustomerApplications, {
+        isLoading: isLoadingCustomerApplications,
+    }] = useGetCustomerApplicationsMutation();
+
+    // Pull FD data: fdListSelected > fdData prop > default
+    const fdListSelectedData = useAppSelector((state: any) => state?.fdListSelected);
+
+    const displayData = fdListSelectedData ? {
+        companyName: fdListSelectedData.companyName,
+        amount: fdListSelectedData.amount,
+        fdRate: fdListSelectedData.fdRate,
+        tenure: fdListSelectedData.tenure,
+        interestPayout: fdListSelectedData.interestPayout,
+    } : fdData || {
+        companyName: '',
+        amount: 0,
+        fdRate: '',
+        tenure: '',
+        interestPayout: '',
+    };
+
+    const displayTransactionId = finalTransactionId || '';
+
+    const formatAmount = (amount: number): string => {
+        return amount.toLocaleString('en-IN');
+    };
+
+    // Handle payment reverse feed API call for pending status
+    const handlePaymentReverseFeed = async () => {
+
+        try {
+
+            // Get user info from app data
+            const userInfo = getUserInfoForAPI();
+
+            // Prepare the API request
+            const paymentReverseFeedRequest = {
+                // Headers
+                providerId: providerId,
+                workflowInstanceId: workflowInstanceId,
+                userreferenceid: userInfo.id,
+                applicationid: applicationId,
+                entityid: entityId,
+                // Body
+                transactionId: finalTransactionId,
+            };
+
+            const response = await paymentReverseFeed(paymentReverseFeedRequest).unwrap();
+
+            // Handle the response based on payment status
+            if (response?.data?.paymentStatus?.toLowerCase() === 'success') {
+                setCurrentStatus('success');
+
+            } else if (response?.data?.paymentStatus?.toLowerCase() === 'failed') {
+                setCurrentStatus('failed');
+
+            }
+
+        } catch (error) {
+
+            // Alert.alert(COMMON_STRINGS.ERROR, BANK_STRINGS.PAYMENT_GATEWAY_ERROR, [
+            //     { text: COMMON_STRINGS.OK }
+            // ]);
+        }
+    };
+
+    // Handle payment retry when status is failed
+    const handlePaymentRetry = async () => {
+        if (!finalTransactionId) {
+            Alert.alert(COMMON_STRINGS.ERROR, BANK_STRINGS.PAYMENT_GATEWAY_ERROR);
+            return;
+        }
+
+        try {
+
+            const userInfo = getUserInfoForAPI();
+            const paymentRetryRequest = {
+                // Headers
+                providerId: providerId,
+                workflowInstanceId: workflowInstanceId,
+                userreferenceid: userInfo.id,
+                applicationid: applicationId,
+                entityid: entityId,
+                // Body
+                transactionId: finalTransactionId,
+            };
+
+            const response = await paymentRetry(paymentRetryRequest).unwrap();
+
+            const payload: any = Array.isArray((response as any)?.data)
+                ? (response as any).data[0]
+                : (response as any)?.data ?? (response as any);
+
+            // Support multiple response key casings
+            const newPaymentUrl: string | undefined = payload?.PaymentUrl || payload?.paymentUrl;
+            const newTransactionId: string | undefined = payload?.Transactionid || payload?.transactionId || finalTransactionId;
+
+            if (newPaymentUrl) {
+                // Save session and navigate to Payment screen
+                setPaymentSession({ paymentUrl: newPaymentUrl, transactionId: newTransactionId });
+                navigate('Payment');
+            } else {
+                Alert.alert(BANK_STRINGS.PAYMENT_FAILED, BANK_STRINGS.PAYMENT_GATEWAY_ERROR);
+            }
+        } catch (error) {
+        }
+    };
+
+    // Handle exit button click - fetch FD details and pass to main app
+    const handleExit = async () => {
+        try {
+            // Get user info from app data
+            const userInfo = getUserInfoForAPI();
+
+            // Get API configuration
+            const apiConfig = getApiConfig();
+
+            // Prepare request payload
+            const requestPayload = {
+                userReferenceId: userInfo.id
+            };
+
+            // Call API to get customer applications
+            const response = await getCustomerApplications(requestPayload).unwrap();
+
+            // Extract applications from response (handle different response structures)
+            let applications: any[] = [];
+            if (Array.isArray(response)) {
+                applications = response;
+            } else if (response?.data && Array.isArray(response.data)) {
+                applications = response.data;
+            } else if (response?.applications && Array.isArray(response.applications)) {
+                applications = response.applications;
+            }
+
+            // Find the currently booked FD - search by transaction_id first (most specific)
+            let bookedFD: any = null;
+
+            // Priority 1: Match by transaction_id from payment
+            if (finalTransactionId) {
+                bookedFD = applications.find((app: any) =>
+                    app?.transactionId === finalTransactionId ||
+                    app?.transaction_id === finalTransactionId ||
+                    app?.Transactionid === finalTransactionId ||
+                    app?.TransactionId === finalTransactionId
+                );
+
+                if (__DEV__ && bookedFD) {
+                    console.log('═══════════════════════════════════════════════════════════════');
+                    console.log('✅ [PaymentStatus] Found FD by Transaction ID');
+                    console.log('───────────────────────────────────────────────────────────────');
+                    console.log('🔍 Searched Transaction ID:', finalTransactionId);
+                    console.log('📋 Found Application:', bookedFD);
+                    console.log('═══════════════════════════════════════════════════════════════');
+                }
+            }
+
+            // Priority 2: Match by applicationId (fallback)
+            if (!bookedFD && applicationId) {
+                bookedFD = applications.find((app: any) =>
+                    app?.applicationId === applicationId ||
+                    app?.applicationid === applicationId ||
+                    app?.id === applicationId
+                );
+
+                if (__DEV__ && bookedFD) {
+                    console.log('═══════════════════════════════════════════════════════════════');
+                    console.log('✅ [PaymentStatus] Found FD by Application ID');
+                    console.log('───────────────────────────────────────────────────────────────');
+                    console.log('🔍 Searched Application ID:', applicationId);
+                    console.log('📋 Found Application:', bookedFD);
+                    console.log('═══════════════════════════════════════════════════════════════');
+                }
+            }
+
+            // Priority 3: Get the most recent one (last resort)
+            if (!bookedFD && applications.length > 0) {
+                const sortedApps = [...applications].sort((a: any, b: any) => {
+                    const dateA = a?.createdDate || a?.created_date || a?.createdAt || 0;
+                    const dateB = b?.createdDate || b?.created_date || b?.createdAt || 0;
+                    return new Date(dateB).getTime() - new Date(dateA).getTime();
+                });
+                bookedFD = sortedApps[0];
+
+                if (__DEV__ && bookedFD) {
+                    console.log('═══════════════════════════════════════════════════════════════');
+                    console.log('⚠️  [PaymentStatus] Using Most Recent FD (fallback)');
+                    console.log('───────────────────────────────────────────────────────────────');
+                    console.log('📋 Found Application:', bookedFD);
+                    console.log('═══════════════════════════════════════════════════════════════');
+                }
+            }
+
+            if (__DEV__) {
+                console.log('═══════════════════════════════════════════════════════════════');
+                console.log('📤 [PaymentStatus] Passing FD Data to Main App');
+                console.log('───────────────────────────────────────────────────────────────');
+                console.log('💳 Transaction ID:', finalTransactionId);
+                console.log('📋 FD Data:', bookedFD);
+                console.log('═══════════════════════════════════════════════════════════════');
+            }
+
+            // Pass FD details to main app via onContinue callback
+            if (onContinue) {
+                onContinue(bookedFD || null);
+            }
+        } catch (error) {
+            if (__DEV__) {
+                console.log('═══════════════════════════════════════════════════════════════');
+                console.log('❌ [PaymentStatus] Error Fetching FD Data');
+                console.log('───────────────────────────────────────────────────────────────');
+                console.log('⚠️  Error:', error);
+                console.log('═══════════════════════════════════════════════════════════════');
+            }
+
+            // If API call fails, still call onContinue but without FD details
+            if (onContinue) {
+                onContinue(null);
+            }
+        }
+    };
+
+    // Disable hardware back button on PaymentStatus screen
+    useEffect(() => {
+        if (Platform.OS !== 'android') return;
+
+        const onBackPress = () => {
+            // Return true to prevent default behavior (block back button)
+            return true;
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            'hardwareBackPress',
+            onBackPress
+        );
+
+        return () => backHandler.remove();
+    }, []);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={true}
+            bottomPadding={0}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
+
+            <View style={styles.container}>
+                {/* <Text style={styles.headerTitle}>
+                    {status === 'success' ? 'PAYMENT SUCCESSFUL' : 'PAYMENT FAILED'}
+                </Text> */}
+
+                <ScrollView
+                    showsVerticalScrollIndicator={false}
+                    contentContainerStyle={styles.scrollContent}
+                >
+                    {/* Status Icon */}
+                    <View style={styles.iconContainer}>
+                        <View style={styles.iconCircleOuter}>
+                            <View style={styles.iconCircleInner}>
+                                {currentStatus === 'success' && (
+                                    <Image
+                                        source={{ uri: base64Images.successBig }}
+                                        style={{ width: 60, height: 60 }}
+                                        resizeMode="contain"
+                                    />
+                                )}
+                                {currentStatus === 'failed' && (
+                                    <Image
+                                        source={{ uri: base64Images.error }}
+                                        style={{ width: 48, height: 48 }}
+                                        resizeMode="contain"
+                                    />
+                                )}
+                                {currentStatus === 'pending' && (
+                                    <Image
+                                        source={{ uri: base64Images.pending }}
+                                        style={{ width: 48, height: 48 }}
+                                        resizeMode="contain"
+                                    />
+                                )}
+                            </View>
+                        </View>
+                    </View>
+
+                    {/* Status Title */}
+                    <Text style={styles.statusTitle}>
+                        {currentStatus === 'success' && BANK_STRINGS.PAYMENT_STATUS_SUCCESS}
+                        {currentStatus === 'failed' && BANK_STRINGS.PAYMENT_STATUS_FAILED}
+                        {currentStatus === 'pending' && BANK_STRINGS.PAYMENT_STATUS_PENDING}
+                    </Text>
+
+                    {/* Pending Status Subtitle */}
+                    {currentStatus === 'pending' && (
+                        <Text style={styles.pendingSubtitle}>
+                            {BANK_STRINGS.PAYMENT_STATUS_PROCESSING}
+                        </Text>
+                    )}
+
+                    {/* Transaction ID */}
+                    <Text style={styles.transactionLabel}>
+                        Transaction ID
+                    </Text>
+                    <Text style={styles.transactionId}>{displayTransactionId}</Text>
+
+                    {/* Details Card */}
+                    <PaymentDetailsCard
+                        companyName={displayData.companyName}
+                        amount={displayData.amount}
+                        fdRate={displayData.fdRate}
+                        tenure={displayData.tenure}
+                        interestPayout={displayData.interestPayout}
+                    />
+
+                    {/* Success Disclaimer */}
+                    {currentStatus === 'success' && (
+                        <View style={styles.disclaimerContainer}>
+                            {Platform.OS === 'android' && (
+                                <Icon name="information-circle-outline" size={20} color={colors.textSecondary} style={styles.disclaimerIcon} />
+                            )}
+                            <Text style={styles.disclaimerText}>
+                                {BANK_STRINGS.PAYMENT_SUCCESS_DISCLAIMER}
+                            </Text>
+                        </View>
+                    )}
+
+                </ScrollView>
+
+                {/* Action Button */}
+                <View style={styles.footer}>
+                    {currentStatus === 'success' && (
+                        <ActionButton
+                            title={isLoadingCustomerApplications ? COMMON_STRINGS.LOADING : COMMON_STRINGS.EXIT}
+                            onPress={handleExit}
+                            disabled={isLoadingCustomerApplications}
+                        />
+                    )}
+                    {currentStatus === 'failed' && (
+                        <ActionButton
+                            title={isLoadingPaymentRetry ? COMMON_STRINGS.RETRYING : BANK_STRINGS.RETRY_PAYMENT_BUTTON}
+                            onPress={handlePaymentRetry}
+                            disabled={isLoadingPaymentRetry}
+                        />
+                    )}
+                    {currentStatus === 'pending' && (
+                        <ActionButton
+                            title={isLoadingPaymentReverseFeed ? COMMON_STRINGS.CHECKING : BANK_STRINGS.REFRESH_STATUS_BUTTON}
+                            onPress={handlePaymentReverseFeed}
+                            disabled={isLoadingPaymentReverseFeed}
+                        />
+                    )}
+                </View>
+            </View>
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any, typography: any, status: 'success' | 'failed' | 'pending') => {
+    const statusColor = status === 'success' ? '#4CAF50' : status === 'failed' ? '#F44336' : '#FF9800';
+    const cardBgColor = status === 'success' ? '#E8F5F0' : status === 'failed' ? '#FFF3F3' : '#FFF8E1';
+
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: colors.background,
+        },
+        headerTitle: {
+            fontSize: 14,
+            fontWeight: '600',
+            color: colors.textLight,
+            textAlign: 'center',
+            paddingVertical: 16,
+            letterSpacing: 1,
+        },
+        scrollContent: {
+            flexGrow: 1,
+            paddingHorizontal: 24,
+            paddingBottom: 120,
+        },
+        iconContainer: {
+            alignItems: 'center',
+            marginTop: 40,
+            marginBottom: 32,
+        },
+        iconCircleOuter: {
+            width: 120,
+            height: 120,
+            borderRadius: 60,
+            backgroundColor: status === 'success' ? '#e8f5e9' : status === 'failed' ? 'rgba(244, 67, 54, 0.1)' : 'rgba(255, 152, 0, 0.1)',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        iconCircleInner: {
+            width: 60,
+            height: 60,
+            borderRadius: 30,
+            backgroundColor: status === 'success' ? '#ffffff' : status === 'failed' ? 'rgba(244, 67, 54, 0.0)' : 'rgba(255, 152, 0, 0.2)',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        statusTitle: {
+            ...typography.styles.h1,
+            color: colors.text,
+            textAlign: 'center',
+            marginBottom: 32,
+            letterSpacing: 0.5,
+        },
+        pendingSubtitle: {
+            ...typography.styles.bodyMedium,
+            color: colors.textSecondary,
+            textAlign: 'center',
+            marginBottom: 30,
+            marginTop: -30,
+
+        },
+        transactionLabel: {
+            ...typography.styles.bodyMedium,
+            color: colors.textLight,
+            textAlign: 'center',
+            marginBottom: 8,
+        },
+        transactionId: {
+            ...typography.styles.h2,
+            color: colors.text,
+            textAlign: 'center',
+            marginBottom: 32,
+            letterSpacing: 1,
+        },
+        avatarContainer: {
+            alignItems: 'center',
+            marginTop: -28,
+            marginBottom: 24,
+        },
+        avatar: {
+            width: 56,
+            height: 56,
+            borderRadius: 28,
+            backgroundColor: '#5F9E8F',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: 4,
+            borderColor: colors.background,
+        },
+        avatarText: {
+            fontSize: 24,
+            fontWeight: '600',
+            color: 'white',
+        },
+        footer: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: colors.background,
+            paddingTop: 16,
+        },
+        disclaimerContainer: {
+            flexDirection: 'row',
+            backgroundColor: 'transparent',
+            borderRadius: 8,
+            padding: 16,
+            marginTop: 24,
+            marginBottom: 16,
+            alignItems: 'flex-start',
+        },
+        disclaimerIcon: {
+            marginRight: 12,
+            marginTop: 2,
+        },
+        disclaimerText: {
+            ...typography.styles.bodySmall,
+            color: colors.textSecondary,
+            flex: 1,
+            lineHeight: 18,
+        },
+    });
+};
+
+export default PaymentStatus;
+