@finspringinnovations/fdsdk 0.0.1 → 0.0.3

package/src/components/PaymentDetailsCard.tsx

@@ -76,45 +76,50 @@ const PaymentDetailsCard: React.FC<PaymentDetailsCardProps> = ({
     );
 };
 
-const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
-    card: {
-        backgroundColor: themeName === 'dark' ? '#0B2940' : '#0B2940',
-        borderRadius: 16,
-        padding: 20,
-        alignItems: 'flex-start',
-        marginHorizontal: 16,
-        borderWidth: 1,
-        borderColor: '#1F4C73',
-    },
-    companyName: {
-        ...typography.styles.h3,
-        color: '#FFFFFF',
-        marginBottom: 12,
-    },
-    companyLine: {
-        height: 1,
-        backgroundColor: '#1F4C73',
-        marginBottom: 12,
-        width: '100%',
-    },
-    detailsContainer: {
-        width: '100%',
-    },
-    detailRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 8,
-    },
-    detailLabel: {
-        ...typography.styles.text12Regular,
-        color: '#BFD5F6',
-    },
-    detailValue: {
-        ...typography.styles.text14Medium,
-        color: '#FFFFFF',
-        lineHeight: (typography.styles.text14Medium?.lineHeight ?? typography.styles.text14Medium?.fontSize ?? 14) + 3,
-    },
-});
+const createStyles = (colors: any, typography: any, themeName: string) => {
+    const isDark = themeName === 'dark';
+
+    return StyleSheet.create({
+        card: {
+            backgroundColor: isDark ? colors.headerBg : 'rgba(0,235,180,0.1)',
+            borderRadius: 16,
+            padding: 20,
+            alignItems: 'flex-start',
+            marginHorizontal: 16,
+            borderWidth: isDark ? 1 : 0,
+            borderColor: isDark ? colors.headerBg + 'AA' : 'transparent',
+        },
+        companyName: {
+            ...typography.styles.h3,
+            color: isDark ? colors.headerText : colors.text,
+            marginBottom: 12,
+        },
+        companyLine: {
+            height: 1,
+            backgroundColor: isDark ? colors.headerText + '33' : colors.border + '40',
+            marginBottom: 12,
+            width: '100%',
+        },
+        detailsContainer: {
+            width: '100%',
+        },
+        detailRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 8,
+        },
+        detailLabel: {
+            ...typography.styles.text12Regular,
+            color: isDark ? colors.headerText : colors.text,
+            opacity: isDark ? 0.7 : 1,
+        },
+        detailValue: {
+            ...typography.styles.text14Medium,
+            color: isDark ? colors.headerText : colors.text,
+            lineHeight: (typography.styles.text14Medium?.lineHeight ?? typography.styles.text14Medium?.fontSize ?? 14) + 3,
+        },
+    });
+};
 
 export default PaymentDetailsCard;

package/src/components/PendingFDBottomSheet.tsx

@@ -218,7 +218,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     continueButton: {
         height: 50,
-        backgroundColor: '#007AFF',
+        backgroundColor: (colors as any).buttonBackground || (colors as any).headerBg || '#007AFF',
         borderRadius: 25,
         paddingHorizontal: spacing.lg,
         alignItems: 'center',
@@ -227,7 +227,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     continueButtonText: {
         ...typography.styles.button,
-        color: 'white',
+        color: (colors as any).buttonTextColor || (colors as any).headerText || '#FFFFFF',
         fontWeight: '600',
     },
 });

package/src/components/TextFieldWithLabel.tsx

@@ -409,7 +409,7 @@ const createStyles = (colors: any, typography: any, themeName: string) => StyleS
         height: '100%',
     },
     disabledTextInput: {
-        color: '#000000',
+        color: colors.text,
     },
     leftIcon: {
         marginRight: 12,

package/src/components/TrustBox.tsx

@@ -50,12 +50,12 @@ const createStyles = (colors: any, typography: any, themeName: string) => StyleS
     },
     titleLight: {
         ...typography.styles.bodyMedium,
-        color: themeName === 'dark' ? '#C4CDD3' : colors.textLight,
+        color: colors.textLight,
         marginBottom: 0,
     },
     title: {
         ...typography.styles.bodyMedium,
-        color: themeName === 'dark' ? colors.labelColor : colors.textLight,
+        color: colors.text,
         marginBottom: 0,
     },
 });

package/src/config/appDataConfig.ts

@@ -8,6 +8,36 @@ export interface EnvironmentData {
     enableLogging?: boolean;
 }
 
+/**
+ * Custom color overrides that can be passed during SDK initialization.
+ * Any color defined here will override the corresponding color from the selected theme.
+ */
+export interface CustomColors {
+    primary?: string;
+    tabSelected?: string;
+    headerBg?: string;
+    headerText?: string;
+    success?: string;
+    textSecondary?: string;
+    border?: string;
+    shadow?: string;
+    background?: string;
+    surface?: string;
+    text?: string;
+    textLight?: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    muted?: string;
+    inputBackground?: string;
+    inputBorder?: string;
+    placeholderColor?: string;
+    labelColor?: string;
+    buttonBackground?: string;
+    buttonTextColor?: string;
+    cancelButtonBg?: string;
+}
+
 export interface AppData {
     // Required user identification fields
     id: string; // Required: User ID from main app
@@ -16,8 +46,7 @@ export interface AppData {
     gender: string; // Required: Male, Female, Other
     mobNo: string; // Required: Mobile number (10 digits)
     email: string; // Required: Email address
-    panNumber: string; // Required: PAN number from main app
-
+    panNumber?: string;  // <-- change from required to optional
     // Optional fields - can be collected in SDK if not provided
     address?: string;
     area?: string;
@@ -32,6 +61,7 @@ export interface AppData {
     maritalStatus?: string; // Optional: Single, Married, Divorced, Widowed
     userReferenceId?: string; // Optional: User reference ID from main app
     eventNotifyUrl?: string; // Optional webhook/callback URL for SDK events
+    startFDAlertMessage?: string;  // ADD THIS LINE
 }
 
 // Global app data storage
@@ -40,6 +70,9 @@ let globalAppData: AppData | null = null;
 // Global environment data storage
 let globalEnvironmentData: EnvironmentData | null = null;
 
+// Global custom color overrides
+let globalCustomColors: CustomColors | null = null;
+
 /**
  * Initialize the SDK with app data from the main application
  * This should be called when the SDK starts
@@ -53,7 +86,7 @@ export const initializeSDK = (appData: AppData, onValidationError?: (errors: str
         { field: 'gender', label: 'Gender' },
         { field: 'mobNo', label: 'Mobile Number' },
         { field: 'email', label: 'Email' },
-        { field: 'panNumber', label: 'PAN Number' },
+        // { field: 'panNumber', label: 'PAN Number' },
     ];
 
     const missingFields: string[] = [];
@@ -227,14 +260,15 @@ export const validateAppData = (appData: AppData): { isValid: boolean; errors: s
     if (!appData.gender) errors.push('Gender is required');
     if (!appData.mobNo?.trim()) errors.push('Mobile number is required');
     if (!appData.email?.trim()) errors.push('Email is required');
-    if (!appData.panNumber?.trim()) errors.push('PAN number is required');
+    // PAN is optional — validated later on FD Calculator screen
+    // if (!appData.panNumber?.trim()) errors.push('PAN number is required');
 
     // Format validation (only if fields are provided)
     if (appData.dob && !/^\d{4}-\d{2}-\d{2}$/.test(appData.dob)) {
         errors.push('Date of birth must be in YYYY-MM-DD format');
     }
 
-    if (appData.panNumber && !/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(appData.panNumber)) {
+    if (appData.panNumber && appData.panNumber.trim() && !/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(appData.panNumber)) {
         errors.push('PAN number must be in valid format (e.g., ABCDE1234F)');
     }
 
@@ -256,6 +290,36 @@ export const validateAppData = (appData: AppData): { isValid: boolean; errors: s
     };
 };
 
+/**
+ * Set custom color overrides for the SDK theme.
+ * Colors defined here will override the corresponding color from the selected theme (primary/dark/corporate).
+ * Call this before rendering the SDK navigator.
+ *
+ * @example
+ * setSDKColors({
+ *     primary: '#FF5722',
+ *     headerBg: '#1976D2',
+ *     buttonBackground: '#1976D2',
+ * });
+ */
+export const setSDKColors = (customColors: CustomColors): void => {
+    globalCustomColors = customColors;
+};
+
+/**
+ * Get the current custom color overrides
+ */
+export const getSDKColors = (): CustomColors | null => {
+    return globalCustomColors;
+};
+
+/**
+ * Clear custom color overrides
+ */
+export const clearSDKColors = (): void => {
+    globalCustomColors = null;
+};
+
 /**
  * Clear app data (for testing or logout scenarios)
  */
@@ -276,4 +340,5 @@ export const clearEnvironmentData = (): void => {
 export const clearAllData = (): void => {
     globalAppData = null;
     globalEnvironmentData = null;
+    globalCustomColors = null;
 };

package/src/hooks/usePaymentSSE.ts

@@ -0,0 +1,155 @@
+/**
+ * usePaymentSSE - React Native SSE hook for payment status tracking.
+ *
+ * Uses XMLHttpRequest instead of fetch streams because
+ * React Native does not support ReadableStream / getReader().
+ *
+ * Usage:
+ *   const { start, stop } = usePaymentSSE();
+ *   start(applicationId, {
+ *       onPaymentStatus: (status, payload) => { ... },
+ *       onError: (error) => { ... },
+ *   });
+ *   stop(); // to cancel
+ */
+
+import { useCallback, useRef } from 'react';
+import { parseSSEBuffer, type SSEEvent } from '../utils/sseParser';
+import { getEnvironmentData } from '../config/appDataConfig';
+import { getApiConfig } from '../config/apiConfig';
+
+// -- Types --
+
+interface UsePaymentSSECallbacks {
+    onPaymentStatus: (status: string, payload: Record<string, unknown>) => void;
+    onError?: (error: any) => void;
+    onConnected?: () => void;
+}
+
+// -- Hook --
+
+export function usePaymentSSE() {
+    // Store the XMLHttpRequest so we can abort it later
+    const xhrRef = useRef<XMLHttpRequest | null>(null);
+    // Track how much of responseText we've already parsed
+    const lastIndexRef = useRef<number>(0);
+    // SSE text buffer (persists across onprogress calls)
+    const bufferRef = useRef<{ value: string }>({ value: '' });
+
+    const start = useCallback(
+        (applicationId: string, callbacks: UsePaymentSSECallbacks) => {
+            // Clean up any existing connection first
+            if (xhrRef.current) {
+                xhrRef.current.abort();
+                xhrRef.current = null;
+            }
+
+            // Reset parsing state
+            lastIndexRef.current = 0;
+            bufferRef.current = { value: '' };
+
+            // 1. Build the SSE endpoint URL
+            const envData = getEnvironmentData();
+            const apiConfig = getApiConfig();
+            const baseUrl = envData?.apiBaseUrl || apiConfig?.baseUrl || '';
+            const url = `${baseUrl}/events?applicationId=${encodeURIComponent(applicationId)}`;
+
+            // 2. Create XMLHttpRequest
+            const xhr = new XMLHttpRequest();
+            xhrRef.current = xhr;
+
+            xhr.open('GET', url);
+
+            // 3. Set headers (same headers your baseApi interceptor uses)
+            const apiKey = envData?.apiKey || apiConfig?.headers?.['X-API-Key'] || '';
+            if (apiKey) {
+                xhr.setRequestHeader('x-api-key', apiKey);
+            }
+            xhr.setRequestHeader('Accept', 'text/event-stream');
+            xhr.setRequestHeader('Cache-Control', 'no-cache');
+
+            // 4. Handle incoming data
+            xhr.onprogress = () => {
+                // responseText contains ALL text received so far
+                // Only parse the NEW text since last call
+                const newText = xhr.responseText.slice(lastIndexRef.current);
+                lastIndexRef.current = xhr.responseText.length;
+
+                if (!newText) return;
+
+                // Parse new text into SSE events
+                const events = parseSSEBuffer(bufferRef.current, newText);
+
+                // Handle each event
+                for (const { eventType, data } of events) {
+                    if (eventType === 'fd_payment_status') {
+                        try {
+                            const parsed = JSON.parse(data);
+                            const status = (parsed.paymentStatus ?? '').toUpperCase();
+                            callbacks.onPaymentStatus(status, parsed);
+                        } catch (parseError) {
+                            if (__DEV__) {
+                                console.error('[usePaymentSSE] Failed to parse event data:', parseError);
+                            }
+                        }
+                    }
+                }
+            };
+
+            // 5. Handle successful connection
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
+                    if (xhr.status === 200) {
+                        callbacks.onConnected?.();
+                        if (__DEV__) {
+                            console.log('[usePaymentSSE] Connected to SSE stream');
+                        }
+                    } else {
+                        if (__DEV__) {
+                            console.error('[usePaymentSSE] Bad status:', xhr.status);
+                        }
+                        callbacks.onError?.(new Error(`SSE response status: ${xhr.status}`));
+                    }
+                }
+            };
+
+            // 6. Handle errors
+            xhr.onerror = () => {
+                if (__DEV__) {
+                    console.error('[usePaymentSSE] Connection error');
+                }
+                callbacks.onError?.(new Error('SSE connection failed'));
+            };
+
+            // 7. Handle timeout
+            xhr.ontimeout = () => {
+                if (__DEV__) {
+                    console.error('[usePaymentSSE] Connection timed out');
+                }
+                callbacks.onError?.(new Error('SSE connection timed out'));
+            };
+
+            // 8. Send the request (connection stays open)
+            xhr.send();
+
+            if (__DEV__) {
+                console.log('[usePaymentSSE] Starting SSE connection to:', url);
+            }
+        },
+        []
+    );
+
+    const stop = useCallback(() => {
+        if (xhrRef.current) {
+            xhrRef.current.abort();
+            xhrRef.current = null;
+            if (__DEV__) {
+                console.log('[usePaymentSSE] SSE connection stopped');
+            }
+        }
+        lastIndexRef.current = 0;
+        bufferRef.current = { value: '' };
+    }, []);
+
+    return { start, stop };
+}

package/src/hooks/usePaymentStatusTimer.ts

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { usePaymentReverseFeedMutation } from '../api/fdApi';
+import { useAppSelector } from '../store';
+import { getUserInfoForAPI } from '../config/appDataConfig';
+import { getPaymentSession } from '../state/paymentSession';
+
+export type PaymentStatus = 'success' | 'failed' | 'pending';
+
+interface ReverseFeedOverrides {
+    providerId?: string;
+    workflowInstanceId?: string;
+    userreferenceid?: string;
+    applicationid?: string;
+    entityid?: string;
+    transactionId?: string;
+}
+
+interface UsePaymentStatusTimerConfig {
+    transactionId?: string;
+    overrides?: ReverseFeedOverrides;
+    initialDelayMs?: number;        // default 60_000
+    repeatDelayMs?: number;         // default 15_000
+    maxDurationMs?: number;         // default 15 * 60_000
+    onStatusUpdate?: (status: PaymentStatus, response?: any) => void;
+}
+
+export const usePaymentStatusTimer = ({
+    transactionId,
+    overrides,
+    initialDelayMs = 60_000,
+    repeatDelayMs = 15_000,
+    maxDurationMs = 15 * 60_000,
+    onStatusUpdate,
+}: UsePaymentStatusTimerConfig) => {
+    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);
+
+    const { transactionId: sessionTransactionId } = getPaymentSession();
+    const userInfo = getUserInfoForAPI();
+
+    const resolvedTransactionId = overrides?.transactionId || transactionId || sessionTransactionId || '';
+
+    const requestPayload = useMemo(() => ({
+        providerId: overrides?.providerId || providerId,
+        workflowInstanceId: overrides?.workflowInstanceId || workflowInstanceId,
+        userreferenceid: overrides?.userreferenceid || userInfo?.id,
+        applicationid: overrides?.applicationid || applicationId,
+        entityid: overrides?.entityid || entityId,
+        transactionId: resolvedTransactionId,
+    }), [
+        applicationId,
+        entityId,
+        overrides?.applicationid,
+        overrides?.entityid,
+        overrides?.providerId,
+        overrides?.transactionId,
+        overrides?.userreferenceid,
+        overrides?.workflowInstanceId,
+        providerId,
+        resolvedTransactionId,
+        userInfo?.id,
+        workflowInstanceId,
+    ]);
+
+    const [paymentReverseFeed, { isLoading: isCheckingStatus }] = usePaymentReverseFeedMutation();
+
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const startTimestampRef = useRef(0);
+    const isRunningRef = useRef(false);
+    const latestStatusRef = useRef<PaymentStatus>('pending');
+
+    const clearTimer = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+
+    const stopTimer = useCallback(() => {
+        isRunningRef.current = false;
+        clearTimer();
+    }, [clearTimer]);
+
+    const triggerStatusCheck = useCallback(async () => {
+    if (!requestPayload.transactionId) {
+        return latestStatusRef.current;
+    }
+
+    try {
+        const response = await paymentReverseFeed(requestPayload).unwrap();
+
+        const status = (response?.data?.paymentStatus || '').toUpperCase();
+
+        if (status === 'SUCCESS') {
+            latestStatusRef.current = 'success';
+            onStatusUpdate?.('success', response);
+            return 'success';
+        }
+
+        if (status === 'FAILED') {
+            latestStatusRef.current = 'failed';
+            onStatusUpdate?.('failed', response);
+            return 'failed';
+        }
+
+        // IN_PROGRESS OR ANY OTHER STATUS → do nothing
+        latestStatusRef.current = 'pending';
+        return 'pending';
+
+    } catch (error) {
+        // // ANY error → Pending
+        // latestStatusRef.current = 'pending';
+
+        // onStatusUpdate?.('pending', {
+        //     status: 'pending',
+        //     message: 'Reverse feed API failed or backend unreachable',
+        //     error
+        // });
+
+        // return 'pending';
+    }
+}, [onStatusUpdate, paymentReverseFeed, requestPayload]);
+
+
+    const scheduleNext = useCallback((delay: number) => {
+        clearTimer();
+        timeoutRef.current = setTimeout(async () => {
+            if (!isRunningRef.current) {
+                clearTimer();
+                return;
+            }
+
+            if (Date.now() - startTimestampRef.current >= maxDurationMs) {
+                stopTimer();
+                return;
+            }
+
+            const status = await triggerStatusCheck();
+
+            if (status === 'success' || status === 'failed') {
+                stopTimer();
+                return;
+            }
+
+            scheduleNext(repeatDelayMs);
+        }, delay);
+    }, [clearTimer, maxDurationMs, repeatDelayMs, stopTimer, triggerStatusCheck]);
+
+    const startTimer = useCallback(() => {
+        if (isRunningRef.current) {
+            return;
+        }
+        isRunningRef.current = true;
+        startTimestampRef.current = Date.now();
+        scheduleNext(initialDelayMs);
+    }, [initialDelayMs, scheduleNext]);
+
+    useEffect(() => stopTimer, [stopTimer]);
+
+    return {
+        startTimer,
+        stopTimer,
+        triggerStatusCheck,
+        isCheckingStatus,
+        latestStatusRef,
+    };
+};

package/src/index.tsx

@@ -92,8 +92,11 @@ export {
     isEnvironmentInitialized,
     clearEnvironmentData,
     clearAllData,
+    setSDKColors,
+    getSDKColors,
+    clearSDKColors,
 } from './config/appDataConfig';
-export type { AppData, EnvironmentData } from './config/appDataConfig';
+export type { AppData, EnvironmentData, CustomColors } from './config/appDataConfig';
 
 // Export validation utilities
 export { showValidationErrorAlert, validateAndProceed } from './components/ValidationErrorAlert';

package/src/navigation/RootNavigator.tsx

@@ -150,6 +150,7 @@ const RootNavigator: React.FC<RootNavigatorProps> = ({
                 {(props) => (
                     <FDCalculatorScreen
                         onGoBack={() => goBack()}
+                        onExitSDK={() => onExit?.()}
                         onNavigateToReviewKYC={() => navigate('ReviewKYC', { fdData: props.route.params?.fdData })}
                         fdData={(props.route.params as any)?.fdData}
                         {...props}
@@ -319,6 +320,12 @@ const RootNavigator: React.FC<RootNavigatorProps> = ({
                                 paymentData: error
                             } as any);
                         }}
+                        onPaymentPending={(info) => {
+                            navigate('PaymentStatus', {
+                                status: 'pending',
+                                paymentData: info
+                            } as any);
+                        }}
                         {...props}
                     />
                 )}