@finspringinnovations/fdsdk 0.0.1

package/src/screens/PayNow.tsx

@@ -0,0 +1,282 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, BackHandler, Platform, ActivityIndicator } from 'react-native';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { Header, PaymentDetailsCard } from '../components';
+import ActionButton from '../components/ActionButton';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { useCreateFDMutation } from '../api/fdApi';
+import { useAppSelector } from '../store';
+import { getUserInfoForAPI } from '../config/appDataConfig';
+import { navigate } from '../navigation/helpers';
+import { usePreviousStateMutation } from '../api/workflowApi';
+import { setPaymentSession } from '../state/paymentSession';
+import { BANK_STRINGS } from '../constants/strings/bank';
+import { COMMON_STRINGS } from '../constants/strings/common';
+
+export interface PayNowProps {
+    onGoBack?: () => void;
+    onConfirm?: () => void;
+    fdData?: {
+        companyName: string;
+        amount: number;
+        fdRate: string;
+        tenure: string;
+        interestPayout: string;
+    };
+}
+
+const PayNow: React.FC<PayNowProps> = ({ onGoBack, onConfirm, fdData }) => {
+
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
+    const fdId = useAppSelector((state: any) => state?.onboarding?.fdId);
+
+    // Get providerId from app data or use default
+    const defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+
+    // Get FD data from Redux store (using only fdListSelected data)
+    const fdListSelectedData = useAppSelector((state: any) => state?.fdListSelected);
+    // const fdCalculationData = useAppSelector((state: any) => state?.fdCalculation);
+
+    // Create FD API
+    const [createFD, {
+        data: createFDResponse,
+        error: createFDError,
+        isLoading: isLoadingCreateFD,
+    }] = useCreateFDMutation();
+    const [previousState] = usePreviousStateMutation();
+
+    // Loading state for back navigation
+    const [isGoingBack, setIsGoingBack] = useState(false);
+
+    // Create FD API status monitored
+
+    // Use FD data with priority: FDList selected > Props > Empty
+    const displayData = fdListSelectedData ? {
+        // Data from FDList screen (selected FD)
+        companyName: fdListSelectedData.companyName || '',
+        amount: fdListSelectedData.amount || 0,
+        fdRate: fdListSelectedData.fdRate || '',
+        tenure: fdListSelectedData.tenure || '',
+        interestPayout: fdListSelectedData.interestPayout || '',
+    } : fdData || {
+        // Fallback to props or empty
+        companyName: '',
+        amount: 0,
+        fdRate: '',
+        tenure: '',
+        interestPayout: '',
+    };
+
+    // Data source processed
+
+    // Get first letter for avatar
+    const getAvatarLetter = (name: string): string => {
+        return name.charAt(0).toUpperCase();
+    };
+
+    const formatAmount = (amount: number): string => {
+        return amount.toLocaleString('en-IN');
+    };
+
+    const handleConfirm = async () => {
+        try {
+
+            // Get user info from app data
+            const userInfo = getUserInfoForAPI();
+
+            // Prepare Create FD request body with ONLY required fields
+            const createFDRequest = {
+                // Headers (will be extracted by API)
+                providerId: defaultProviderId,
+                workflowInstanceId: workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                // entityid: entityId,
+                // Body (applicationId is required in body, entityid should NOT be in body)
+                applicationId: applicationId,
+                fdId: fdId,
+                panNo: userInfo.panNumber,
+            } as const;
+
+            const response = await createFD(createFDRequest).unwrap();
+
+            // Extract paymentUrl and transactionId from response
+            const payload: any = Array.isArray((response as any)?.data)
+                ? (response as any).data[0]
+                : (response as any)?.data ?? (response as any);
+
+            const paymentUrl: string | undefined = payload?.paymentUrl;
+            const transactionId: string | undefined = payload?.transactionId;
+
+
+            // Save to session and navigate to Payment screen
+            setPaymentSession({ paymentUrl, transactionId });
+            navigate('Payment');
+
+        } catch (error) {
+
+            // Optional fallback: allow external handler
+            onConfirm?.();
+        }
+    };
+
+    // Handler for back button (used by both bottom back button 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);
+            navigate('BankDetail');
+        }
+    };
+
+    // Handle Android hardware back button
+    useEffect(() => {
+        if (Platform.OS !== 'android') return;
+
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            'hardwareBackPress',
+            onHardwareBackPress
+        );
+
+        return () => backHandler.remove();
+    }, [defaultProviderId, workflowInstanceId, applicationId, entityId]);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={false}
+            bottomPadding={25}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            <View style={styles.container}>
+                <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
+                    <Text style={styles.title}>{BANK_STRINGS.PAYMENT_DETAILS_TITLE}</Text>
+
+                    <PaymentDetailsCard
+                        companyName={displayData.companyName}
+                        amount={displayData.amount}
+                        fdRate={displayData.fdRate}
+                        tenure={displayData.tenure}
+                        interestPayout={displayData.interestPayout}
+                        showCompanyLine={true}
+                    />
+
+
+                </ScrollView>
+
+                <View style={styles.footer}>
+                    <ActionButton
+                        title={COMMON_STRINGS.BACK}
+                        onPress={handleBackPress}
+                        disabled={false}
+                        style={styles.backButton}
+                        textStyle={styles.backButtonText}
+                    />
+                    <ActionButton
+                        title={isLoadingCreateFD ? COMMON_STRINGS.CREATING : COMMON_STRINGS.CONFIRM}
+                        onPress={handleConfirm}
+                        disabled={isLoadingCreateFD}
+                        style={styles.confirmButton}
+                    />
+                </View>
+            </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({
+    container: {
+        flex: 1,
+        backgroundColor: colors.background,
+    },
+    scrollContent: {
+        flexGrow: 1,
+        paddingHorizontal: 16,
+        //paddingTop: 24,
+        //  paddingBottom: 100,
+        // justifyContent: 'center',
+    },
+    title: {
+        ...typography.styles.h1,
+        color: colors.text,
+        textAlign: 'center',
+        marginTop: 100,
+        marginBottom: 80,
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: colors.background,
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        flexDirection: 'row',
+        gap: 8,
+    },
+    backButton: {
+        flex: 1,
+        backgroundColor: themeName === 'dark' ? colors.cancelButtonBg : 'transparent',
+        borderWidth: themeName === 'dark' ? 1 : 0,
+        borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
+        borderRadius: themeName === 'dark' ? 10 : 0,
+    },
+    backButtonText: {
+        color: themeName === 'dark' ? '#ffffff' : colors.primary,
+    },
+    confirmButton: {
+        flex: 1,
+    },
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginTop: 20,
+        alignItems: 'center',
+    },
+    debugButtonText: {
+        ...typography.styles.bodyMedium,
+        fontWeight: '600',
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1000,
+    },
+});
+
+export default PayNow;
+

package/src/screens/Payment.tsx

@@ -0,0 +1,224 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { View, StyleSheet, ActivityIndicator, BackHandler, Platform, StatusBar } from 'react-native';
+import { WebView } from 'react-native-webview';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { useColors } from '../theme/ThemeContext';
+import { decryptResponse } from '../utils/encryption';
+import { getEncryptionConfig } from '../config/encryptionConfig';
+
+export interface PaymentProps {
+    onGoBack?: () => void;
+    onPaymentSuccess?: (data?: any) => void;
+    onPaymentFailure?: (error?: any) => void;
+    paymentUrl: string;
+    successUrl?: string;
+    failureUrl?: string;
+}
+
+const Payment: React.FC<PaymentProps> = ({
+    onGoBack,
+    onPaymentSuccess,
+    onPaymentFailure,
+    paymentUrl,
+    successUrl = 'payment/success',
+    failureUrl = 'payment/failure',
+}) => {
+    const colors = useColors();
+    const styles = createStyles(colors);
+    const webViewRef = useRef<WebView>(null);
+    const [loading, setLoading] = useState(true);
+
+    const handleNavigationStateChange = async (navState: any) => {
+        const { url } = navState;
+
+        if (url.includes('payment/status')) {
+            await handlePaymentStatusPage();
+            return;
+        }
+
+        if (url.includes(successUrl)) {
+            setLoading(false);
+            onPaymentSuccess?.(navState);
+            return;
+        }
+
+        if (url.includes(failureUrl)) {
+            setLoading(false);
+            onPaymentFailure?.(navState);
+            return;
+        }
+    };
+
+    const handleWebViewError = (syntheticEvent: any) => {
+        const { nativeEvent } = syntheticEvent;
+        setLoading(false);
+        onPaymentFailure?.(nativeEvent);
+    };
+
+    const handleLoadStart = () => {
+        setLoading(true);
+    };
+
+    const handleLoadEnd = () => {
+        setLoading(false);
+    };
+
+    const handleMessage = async (event: any) => {
+        try {
+            const dataString = event.nativeEvent.data;
+
+            // Check if data is empty or null
+            if (!dataString || dataString.trim() === '') {
+                return;
+            }
+
+            // Check if data looks like JSON
+            const trimmedData = dataString.trim();
+            if (!trimmedData.startsWith('{') && !trimmedData.startsWith('[') && !trimmedData.startsWith('"')) {
+                return;
+            }
+
+            const cleaned =
+                dataString.startsWith('"') && dataString.endsWith('"')
+                    ? dataString.substring(1, dataString.length - 1).replaceAll('\\"', '"')
+                    : dataString;
+
+            const parsed = JSON.parse(cleaned);
+
+            let response;
+
+            // Handle both encrypted and non-encrypted responses using the same method as API responses
+            if (parsed.encryptedResponse) {
+                const encryptionConfig = getEncryptionConfig();
+                try {
+                    // Use the same decryptResponse function used for API responses
+                    const decrypted = await decryptResponse({ encryptedResponse: parsed.encryptedResponse }, encryptionConfig);
+                    response = decrypted;
+                } catch (error) {
+                    response = parsed;
+                }
+            } else {
+                response = parsed;
+            }
+
+            // Check for success status
+            if (response.status?.toLowerCase() === 'success') {
+                // Check payment status in data
+                const paymentStatus = response.data?.paymentStatus?.toLowerCase();
+
+                if (paymentStatus === 'success') {
+                    onPaymentSuccess?.(response);
+                } else if (paymentStatus === 'failed') {
+                    onPaymentFailure?.(response);
+                } else {
+                    onPaymentFailure?.(response);
+                }
+            } else {
+                onPaymentFailure?.(response);
+            }
+
+            setLoading(false);
+        } catch (error) {
+            onPaymentFailure?.(error);
+            setLoading(false);
+        }
+    };
+
+    const handlePaymentStatusPage = async () => {
+        try {
+            setLoading(true);
+            webViewRef.current?.injectJavaScript(`
+                (function() {
+                    window.ReactNativeWebView.postMessage(document.body.innerText);
+                })();
+            `);
+        } catch (err) {
+            setLoading(false);
+            onPaymentFailure?.(err);
+        }
+    };
+
+    // Disable hardware back button on Payment 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={false}
+            bottomPadding={0}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
+
+            <View style={styles.container}>
+                {loading && (
+                    <View style={styles.loadingContainer}>
+                        <ActivityIndicator size="large" color={colors.primary} />
+                    </View>
+                )}
+
+                <WebView
+                    ref={webViewRef}
+                    source={{ uri: paymentUrl }}
+                    style={styles.webView}
+                    onNavigationStateChange={handleNavigationStateChange}
+                    onError={handleWebViewError}
+                    onLoadStart={handleLoadStart}
+                    onLoadEnd={handleLoadEnd}
+                    onMessage={handleMessage}
+                    javaScriptEnabled={true}
+                    domStorageEnabled={false}
+                    startInLoadingState={true}
+                    scalesPageToFit={true}
+                    mixedContentMode="never"
+                    allowsInlineMediaPlayback={false}
+                    mediaPlaybackRequiresUserAction={false}
+                    sharedCookiesEnabled={false}
+                    thirdPartyCookiesEnabled={false}
+                    cacheEnabled={false}
+                    originWhitelist={['*']}
+                />
+            </View>
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any) => StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: colors.background,
+    },
+    webView: {
+        flex: 1,
+        backgroundColor: colors.background,
+        marginTop: Platform.OS === 'ios' ? 15 : 0,
+    },
+    loadingContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.background,
+        zIndex: 1,
+    },
+});
+
+export default Payment;
+