@finspringinnovations/fdsdk 0.0.1 → 0.0.3

package/src/screens/PaymentStatus.tsx

@@ -6,7 +6,7 @@ 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 { usePaymentRetryMutation } from '../api/fdApi';
 import { useGetCustomerApplicationsMutation } from '../api/customerApi';
 import { useAppSelector } from '../store';
 import { getUserInfoForAPI } from '../config/appDataConfig';
@@ -16,6 +16,7 @@ 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';
 
 export interface PaymentStatusProps {
     onRetry?: () => void;
@@ -45,7 +46,7 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
     // 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 styles = createStyles(colors, typography, currentStatus, themeName);
     const route = useRoute();
 
     // Get transaction ID from navigation props (route params)
@@ -63,12 +64,23 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
     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();
+    const {
+        startTimer,
+        stopTimer,
+        triggerStatusCheck,
+        isCheckingStatus,
+    } = usePaymentStatusTimer({
+        transactionId: finalTransactionId,
+        overrides: {
+            providerId,
+            workflowInstanceId,
+            applicationid: applicationId,
+            entityid: entityId,
+        },
+        onStatusUpdate: (nextStatus) => {
+            setCurrentStatus(nextStatus);
+        },
+    });
 
     // Payment Retry API
     const [paymentRetry, {
@@ -105,43 +117,20 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
         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');
-
-            }
+    useEffect(() => {
+        if (currentStatus === 'pending') {
+            startTimer();
+        } else {
+            stopTimer();
+        }
 
-        } catch (error) {
+        return () => {
+            stopTimer();
+        };
+    }, [currentStatus, startTimer, stopTimer]);
 
-            // Alert.alert(COMMON_STRINGS.ERROR, BANK_STRINGS.PAYMENT_GATEWAY_ERROR, [
-            //     { text: COMMON_STRINGS.OK }
-            // ]);
-        }
+    const handlePaymentReverseFeed = async () => {
+        await triggerStatusCheck();
     };
 
     // Handle payment retry when status is failed
@@ -321,10 +310,10 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
         <SafeAreaWrapper
             includeTop={true}
             bottomPadding={0}
-            statusBarColor="#000000"
-            statusBarStyle="light-content"
+            statusBarColor={colors.background}
+            statusBarStyle={themeName === 'dark' ? 'light-content' : 'dark-content'}
         >
-            {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
+            {Platform.OS === 'ios' && <StatusBar barStyle={themeName === 'dark' ? 'light-content' : 'dark-content'} />}
 
             <View style={styles.container}>
                 {/* <Text style={styles.headerTitle}>
@@ -423,22 +412,21 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
                             disabled={isLoadingPaymentRetry}
                         />
                     )}
-                    {currentStatus === 'pending' && (
+                    {/* {currentStatus === 'pending' && (
                         <ActionButton
-                            title={isLoadingPaymentReverseFeed ? COMMON_STRINGS.CHECKING : BANK_STRINGS.REFRESH_STATUS_BUTTON}
+                            title={isCheckingStatus ? COMMON_STRINGS.CHECKING : BANK_STRINGS.REFRESH_STATUS_BUTTON}
                             onPress={handlePaymentReverseFeed}
-                            disabled={isLoadingPaymentReverseFeed}
+                            disabled={isCheckingStatus}
                         />
-                    )}
+                    )} */}
                 </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';
+const createStyles = (colors: any, typography: any, status: 'success' | 'failed' | 'pending', themeName: string) => {
+    const isDark = themeName === 'dark';
 
     return StyleSheet.create({
         container: {
@@ -475,7 +463,7 @@ const createStyles = (colors: any, typography: any, status: 'success' | 'failed'
             width: 60,
             height: 60,
             borderRadius: 30,
-            backgroundColor: status === 'success' ? '#ffffff' : status === 'failed' ? 'rgba(244, 67, 54, 0.0)' : 'rgba(255, 152, 0, 0.2)',
+            backgroundColor: status === 'success' ? (isDark ? colors.surface : '#ffffff') : status === 'failed' ? 'rgba(244, 67, 54, 0.0)' : 'rgba(255, 152, 0, 0.2)',
             alignItems: 'center',
             justifyContent: 'center',
         },
@@ -492,7 +480,6 @@ const createStyles = (colors: any, typography: any, status: 'success' | 'failed'
             textAlign: 'center',
             marginBottom: 30,
             marginTop: -30,
-
         },
         transactionLabel: {
             ...typography.styles.bodyMedium,
@@ -516,7 +503,7 @@ const createStyles = (colors: any, typography: any, status: 'success' | 'failed'
             width: 56,
             height: 56,
             borderRadius: 28,
-            backgroundColor: '#5F9E8F',
+            backgroundColor: colors.primary,
             alignItems: 'center',
             justifyContent: 'center',
             borderWidth: 4,
@@ -525,7 +512,7 @@ const createStyles = (colors: any, typography: any, status: 'success' | 'failed'
         avatarText: {
             fontSize: 24,
             fontWeight: '600',
-            color: 'white',
+            color: colors.headerText,
         },
         footer: {
             position: 'absolute',

package/src/theme/ThemeContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, ReactNode } from 'react';
 import { createTheme, type Theme, type ThemeName, defaultTheme } from './index';
+import type { CustomColors } from '../config/appDataConfig';
 
 interface ThemeContextType {
     theme: Theme;
@@ -13,16 +14,20 @@ interface ThemeProviderProps {
     children: ReactNode;
     initialTheme?: ThemeName;
     theme?: Theme; // Allow custom theme override
+    colorOverrides?: CustomColors | null; // Custom color overrides from SDK initialization
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     children,
     initialTheme = 'primary',
     theme: customTheme,
+    colorOverrides,
 }) => {
     const [currentThemeName, setCurrentThemeName] = React.useState<ThemeName>(initialTheme);
 
-    const theme = customTheme || createTheme(currentThemeName);
+    // If a full custom theme is provided, use it directly.
+    // Otherwise, create theme from name and merge any color overrides on top.
+    const theme = customTheme || createTheme(currentThemeName, colorOverrides);
 
     const setTheme = React.useCallback((themeName: ThemeName) => {
         setCurrentThemeName(themeName);

package/src/theme/index.ts

@@ -1,6 +1,7 @@
 import { colors, type ThemeName, type ColorScheme } from './colors';
 import { typography } from './typography';
 import { shadows } from './shadows';
+import type { CustomColors } from '../config/appDataConfig';
 
 // Spacing scale
 export const spacing = {
@@ -32,14 +33,35 @@ export interface Theme {
     borderRadius: typeof borderRadius;
 }
 
-// Theme factory function
-export const createTheme = (themeName: ThemeName = 'primary'): Theme => ({
-    colors: colors[themeName] as ColorScheme,
-    typography,
-    shadows,
-    spacing,
-    borderRadius,
-});
+/**
+ * Theme factory function.
+ * If customColors are provided, they override the corresponding colors from the base theme.
+ */
+export const createTheme = (themeName: ThemeName = 'primary', customColors?: CustomColors | null): Theme => {
+    const baseColors = colors[themeName] as ColorScheme;
+
+    // Merge custom color overrides on top of the base theme colors
+    const mergedColors = customColors
+        ? { ...baseColors, ...filterDefinedValues(customColors) } as ColorScheme
+        : baseColors;
+
+    return {
+        colors: mergedColors,
+        typography,
+        shadows,
+        spacing,
+        borderRadius,
+    };
+};
+
+/**
+ * Utility to filter out undefined/null values so only explicitly set colors override the theme.
+ */
+const filterDefinedValues = (obj: Record<string, any>): Record<string, any> => {
+    return Object.fromEntries(
+        Object.entries(obj).filter(([_, value]) => value !== undefined && value !== null)
+    );
+};
 
 // Helper function to get border with opacity
 export const getBorderColor = (theme: Theme, opacity: number = 0.36) => {

package/src/utils/sseParser.ts

@@ -0,0 +1,40 @@
+export interface SSEEvent {
+    eventType: string;
+    data: string;
+}
+
+export function parseSSEBuffer(
+    buffer: { value: string },
+    chunk: string
+): SSEEvent[] {
+    const results: SSEEvent[] = [];
+
+    buffer.value += chunk;
+
+    let idx: number;
+
+    while ((idx = buffer.value.indexOf('\n\n')) >= 0) {
+
+        const block = buffer.value.slice(0, idx);
+
+        buffer.value = buffer.value.slice(idx + 2);
+
+        let eventType = 'message';
+
+        const dataparts: string[] = [];
+
+        for (const line of block.split(/\r?\n/)) {
+            if (line.startsWith('event:')) {
+                eventType = line.slice(6).trim();
+            } else if (line.startsWith('data:')) {
+                dataparts.push(line.slice(5).trim());
+            }
+        }
+
+        const data = dataparts.join('\n').trim();
+        if (data) {
+            results.push({ eventType, data });
+        }
+    }
+    return results;
+}