@finspringinnovations/fdsdk 0.0.5 → 0.0.7

package/src/screens/Payment.tsx

@@ -1,12 +1,14 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useCallback } 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 { parseSSEBuffer } from '../utils/sseParser';
 import { getEncryptionConfig } from '../config/encryptionConfig';
+import { getEnvironmentData, getUserInfoForAPI } from '../config/appDataConfig';
+import { getApiConfig, getSecureHeaders } from '../config/apiConfig';
 import { useAppSelector } from '../store';
-import { usePaymentSSE } from '../hooks/usePaymentSSE';
 
 export interface PaymentProps {
     onGoBack?: () => void;
@@ -36,14 +38,22 @@ const Payment: React.FC<PaymentProps> = ({
     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 sseXhrRef = useRef<XMLHttpRequest | null>(null);
+    const sseLastIndexRef = useRef<number>(0);
+    const sseBufferRef = useRef<{ value: string }>({ value: '' });
     const onSuccessRef = useRef(onPaymentSuccess);
     const onFailureRef = useRef(onPaymentFailure);
     onSuccessRef.current = onPaymentSuccess;
     onFailureRef.current = onPaymentFailure;
 
-
-
+    const stopPaymentSSE = useCallback(() => {
+        if (sseXhrRef.current) {
+            sseXhrRef.current.abort();
+            sseXhrRef.current = null;
+        }
+        sseLastIndexRef.current = 0;
+        sseBufferRef.current = { value: '' };
+    }, []);
 
     const handleNavigationStateChange = async (navState: any) => {
         const { url } = navState;
@@ -73,37 +83,160 @@ const Payment: React.FC<PaymentProps> = ({
 
     // 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 (!applicationId || !paymentUrl?.trim()) {
+            stopPaymentSSE();
+            return;
+        }
+
+        const envData = getEnvironmentData();
+        const apiConfig = getApiConfig();
+        const baseUrl = (envData?.apiBaseUrl || apiConfig?.baseUrl || '').replace(/\/$/, '');
+        const url = baseUrl ? `${baseUrl}/events?applicationId=${encodeURIComponent(applicationId)}` : '';
+
+        if (!url) return;
+
+        stopPaymentSSE();
+
+        const xhr = new XMLHttpRequest();
+        sseXhrRef.current = xhr;
+        xhr.open('GET', url);
+
+        const apiKey = envData?.apiKey || apiConfig?.headers?.['X-API-Key'] || '';
+        if (apiKey) {
+            xhr.setRequestHeader('x-api-key', apiKey);
+            xhr.setRequestHeader('X-API-Key', apiKey);
+        }
+
+        const secureHeaders = getSecureHeaders();
+        Object.entries(secureHeaders).forEach(([key, value]) => {
+            if (key.toLowerCase() !== 'content-type') {
+                xhr.setRequestHeader(key, value);
+            }
+        });
+
+        xhr.setRequestHeader('Accept', 'text/event-stream');
+        xhr.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+        xhr.setRequestHeader('Pragma', 'no-cache');
+        xhr.setRequestHeader('Expires', '0');
+
+        try {
+            const userInfo = getUserInfoForAPI();
+            const userRefId = userInfo?.userReferenceId || userInfo?.id;
+            if (userRefId) {
+                xhr.setRequestHeader('userreferenceid', userRefId);
+                xhr.setRequestHeader('userReferenceId', userRefId);
+            }
+        } catch {
+            // ignore
+        }
+
+        if (providerId) {
+            xhr.setRequestHeader('provider', providerId);
+            xhr.setRequestHeader('providerid', providerId);
+            xhr.setRequestHeader('providerId', providerId);
+        }
+        if (workflowInstanceId) {
+            xhr.setRequestHeader('workflowInstanceId', workflowInstanceId);
+            xhr.setRequestHeader('workflowinstanceid', workflowInstanceId);
+        }
+        if (applicationId) {
+            xhr.setRequestHeader('applicationId', applicationId);
+            xhr.setRequestHeader('applicationid', applicationId);
+        }
+        if (entityId) {
+            xhr.setRequestHeader('entityid', entityId);
+            xhr.setRequestHeader('entityId', entityId);
+        }
+
+        const handleEventData = async (rawData: string) => {
+            try {
+                const parsed = JSON.parse(rawData || '{}') as Record<string, unknown>;
+                let payload = parsed;
+                if (typeof parsed?.encryptedResponse === 'string' && parsed.encryptedResponse) {
+                    try {
+                        const config = getEncryptionConfig();
+                        const decrypted = await decryptResponse(
+                            { encryptedResponse: parsed.encryptedResponse },
+                            config
+                        );
+                        payload = (decrypted || {}) as Record<string, unknown>;
+                    } catch {
+                        // ignore and use raw payload
                     }
-                    if (normalized === 'FAILED') {
-                        stopPaymentSSE();
-                        onFailureRef.current?.(payload);
+                }
+
+                const payloadData = (payload?.data as Record<string, unknown> | undefined) || {};
+                const status = String(
+                    payload?.paymentStatus ??
+                    payload?.payment_status ??
+                    payloadData?.paymentStatus ??
+                    payloadData?.payment_status ??
+                    ''
+                ).toUpperCase();
+
+                if (status === 'SUCCESS') {
+                    stopPaymentSSE();
+                    onSuccessRef.current?.(payload);
+                    return;
+                }
+
+                if (status === 'FAILED') {
+                    stopPaymentSSE();
+                    onFailureRef.current?.(payload);
+                }
+            } catch {
+                // ignore parse errors
+            }
+        };
+
+        xhr.onprogress = () => {
+            setLoading(false);
+
+            const newText = xhr.responseText.slice(sseLastIndexRef.current);
+            sseLastIndexRef.current = xhr.responseText.length;
+            if (!newText) return;
+
+            const events = parseSSEBuffer(sseBufferRef.current, newText);
+            for (const { eventType, data } of events) {
+                if (!data) continue;
+                const normalizedEventType = String(eventType || '').trim().toLowerCase();
+                if (normalizedEventType === 'fd_payment_status') {
+                    handleEventData(data);
+                } else if (normalizedEventType === 'message') {
+                    try {
+                        const parsed = JSON.parse(data) as { event?: string; [k: string]: unknown };
+                        const embeddedEvent = String(parsed?.event || '').trim().toLowerCase();
+                        if (embeddedEvent === 'fd_payment_status') {
+                            handleEventData(data);
+                        }
+                    } catch {
+                        // ignore
                     }
-                },
-                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 }
-        );
+                }
+            }
+        };
+
+        xhr.onreadystatechange = () => {
+            if (
+                (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED ||
+                    xhr.readyState === XMLHttpRequest.LOADING) &&
+                xhr.status === 200
+            ) {
+                setLoading(false);
+                if (__DEV__) console.log('[Payment] SSE connected for payment status');
+            }
+        };
+
+        xhr.onerror = () => {
+            if (__DEV__) console.warn('[Payment] SSE connection error');
+        };
+
+        xhr.send();
 
         return () => {
             stopPaymentSSE();
         };
-    }, [applicationId, paymentUrl, workflowInstanceId, entityId, providerId, startPaymentSSE, stopPaymentSSE]);
+    }, [applicationId, paymentUrl, workflowInstanceId, entityId, providerId, stopPaymentSSE]);
 
     const handleMessage = async (event: any) => {
         try {

package/src/screens/PaymentStatus.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } 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';
@@ -9,13 +9,16 @@ import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
 import { usePaymentRetryMutation } from '../api/fdApi';
 import { useGetCustomerApplicationsMutation } from '../api/customerApi';
 import { useAppSelector } from '../store';
-import { getUserInfoForAPI } from '../config/appDataConfig';
+import { getEnvironmentData, getUserInfoForAPI } from '../config/appDataConfig';
+import { getApiConfig, getSecureHeaders } from '../config/apiConfig';
 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 { usePaymentSSE } from '../hooks/usePaymentSSE';
+import { parseSSEBuffer } from '../utils/sseParser';
+import { decryptResponse } from '../utils/encryption';
+import { getEncryptionConfig } from '../config/encryptionConfig';
 
 export interface PaymentStatusProps {
     onRetry?: () => void;
@@ -62,8 +65,9 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
     const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
     const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
     const providerId = useAppSelector((state: any) => state?.onboarding?.providerId);
-
-    const { start: startPaymentSSE, stop: stopPaymentSSE } = usePaymentSSE();
+    const sseXhrRef = useRef<XMLHttpRequest | null>(null);
+    const sseLastIndexRef = useRef<number>(0);
+    const sseBufferRef = useRef<{ value: string }>({ value: '' });
 
     // Payment Retry API
     const [paymentRetry, {
@@ -100,34 +104,160 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
         return amount.toLocaleString('en-IN');
     };
 
+    const stopPaymentSSE = useCallback(() => {
+        if (sseXhrRef.current) {
+            sseXhrRef.current.abort();
+            sseXhrRef.current = null;
+        }
+        sseLastIndexRef.current = 0;
+        sseBufferRef.current = { value: '' };
+    }, []);
+
     useEffect(() => {
         if (currentStatus !== 'pending' || !applicationId) {
             stopPaymentSSE();
             return;
         }
 
-        startPaymentSSE(applicationId, {
-            onPaymentStatus: (status) => {
-                const normalized = String(status || '').toUpperCase();
-                if (normalized === 'SUCCESS') {
+        const envData = getEnvironmentData();
+        const apiConfig = getApiConfig();
+        const baseUrl = (envData?.apiBaseUrl || apiConfig?.baseUrl || '').replace(/\/$/, '');
+        const url = baseUrl ? `${baseUrl}/events?applicationId=${encodeURIComponent(applicationId)}` : '';
+
+        if (!url) return;
+
+        stopPaymentSSE();
+
+        const xhr = new XMLHttpRequest();
+        sseXhrRef.current = xhr;
+        xhr.open('GET', url);
+
+        const apiKey = envData?.apiKey || apiConfig?.headers?.['X-API-Key'] || '';
+        if (apiKey) {
+            xhr.setRequestHeader('x-api-key', apiKey);
+            xhr.setRequestHeader('X-API-Key', apiKey);
+        }
+
+        const secureHeaders = getSecureHeaders();
+        Object.entries(secureHeaders).forEach(([key, value]) => {
+            if (key.toLowerCase() !== 'content-type') {
+                xhr.setRequestHeader(key, value);
+            }
+        });
+
+        xhr.setRequestHeader('Accept', 'text/event-stream');
+        xhr.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+        xhr.setRequestHeader('Pragma', 'no-cache');
+        xhr.setRequestHeader('Expires', '0');
+
+        try {
+            const userInfo = getUserInfoForAPI();
+            const userRefId = userInfo?.userReferenceId || userInfo?.id;
+            if (userRefId) {
+                xhr.setRequestHeader('userreferenceid', userRefId);
+                xhr.setRequestHeader('userReferenceId', userRefId);
+            }
+        } catch {
+            // ignore
+        }
+
+        if (providerId) {
+            xhr.setRequestHeader('provider', providerId);
+            xhr.setRequestHeader('providerid', providerId);
+            xhr.setRequestHeader('providerId', providerId);
+        }
+        if (workflowInstanceId) {
+            xhr.setRequestHeader('workflowInstanceId', workflowInstanceId);
+            xhr.setRequestHeader('workflowinstanceid', workflowInstanceId);
+        }
+        if (applicationId) {
+            xhr.setRequestHeader('applicationId', applicationId);
+            xhr.setRequestHeader('applicationid', applicationId);
+        }
+        if (entityId) {
+            xhr.setRequestHeader('entityid', entityId);
+            xhr.setRequestHeader('entityId', entityId);
+        }
+
+        const handleEventData = async (rawData: string) => {
+            try {
+                const parsed = JSON.parse(rawData || '{}') as Record<string, unknown>;
+                let payload = parsed;
+                if (typeof parsed?.encryptedResponse === 'string' && parsed.encryptedResponse) {
+                    try {
+                        const config = getEncryptionConfig();
+                        const decrypted = await decryptResponse(
+                            { encryptedResponse: parsed.encryptedResponse },
+                            config
+                        );
+                        payload = (decrypted || {}) as Record<string, unknown>;
+                    } catch {
+                        // ignore and use raw payload
+                    }
+                }
+
+                const payloadData = (payload?.data as Record<string, unknown> | undefined) || {};
+                const status = String(
+                    payload?.paymentStatus ??
+                    payload?.payment_status ??
+                    payloadData?.paymentStatus ??
+                    payloadData?.payment_status ??
+                    ''
+                ).toUpperCase();
+
+                if (status === 'SUCCESS') {
                     setCurrentStatus('success');
                     stopPaymentSSE();
                     return;
                 }
-                if (normalized === 'FAILED') {
+
+                if (status === 'FAILED') {
                     setCurrentStatus('failed');
                     stopPaymentSSE();
                 }
-            },
-            onError: () => {
-                // keep pending state; stream can be restarted on re-render
-            },
-        });
+            } catch {
+                // ignore parse errors
+            }
+        };
+
+        xhr.onprogress = () => {
+            const newText = xhr.responseText.slice(sseLastIndexRef.current);
+            sseLastIndexRef.current = xhr.responseText.length;
+            if (!newText) return;
+
+            const events = parseSSEBuffer(sseBufferRef.current, newText);
+            for (const { eventType, data } of events) {
+                if (!data) continue;
+                const normalizedEventType = String(eventType || '').trim().toLowerCase();
+                if (normalizedEventType === 'fd_payment_status') {
+                    handleEventData(data);
+                } else if (normalizedEventType === 'message') {
+                    try {
+                        const parsed = JSON.parse(data) as { event?: string; [k: string]: unknown };
+                        const embeddedEvent = String(parsed?.event || '').trim().toLowerCase();
+                        if (embeddedEvent === 'fd_payment_status') {
+                            handleEventData(data);
+                        }
+                    } catch {
+                        // ignore
+                    }
+                }
+            }
+        };
+
+        xhr.send();
 
         return () => {
             stopPaymentSSE();
         };
-    }, [applicationId, currentStatus, startPaymentSSE, stopPaymentSSE]);
+    }, [
+        applicationId,
+        currentStatus,
+        entityId,
+        providerId,
+        stopPaymentSSE,
+        workflowInstanceId
+    ]);
 
     // Handle payment retry when status is failed
     const handlePaymentRetry = async () => {

package/src/utils/sseParser.ts

@@ -11,13 +11,29 @@ export function parseSSEBuffer(
 
     buffer.value += chunk;
 
-    let idx: number;
+    let idx = -1;
+    let delimiterLength = 0;
+    const findDelimiter = () => {
+        const unixIdx = buffer.value.indexOf('\n\n');
+        const windowsIdx = buffer.value.indexOf('\r\n\r\n');
+        if (windowsIdx >= 0 && (unixIdx < 0 || windowsIdx < unixIdx)) {
+            idx = windowsIdx;
+            delimiterLength = 4;
+            return true;
+        }
+        if (unixIdx >= 0) {
+            idx = unixIdx;
+            delimiterLength = 2;
+            return true;
+        }
+        return false;
+    };
 
-    while ((idx = buffer.value.indexOf('\n\n')) >= 0) {
+    while (findDelimiter()) {
 
         const block = buffer.value.slice(0, idx);
 
-        buffer.value = buffer.value.slice(idx + 2);
+        buffer.value = buffer.value.slice(idx + delimiterLength);
 
         let eventType = 'message';
 
@@ -37,4 +53,4 @@ export function parseSSEBuffer(
         }
     }
     return results;
-}
+}