@finspringinnovations/fdsdk 0.0.1 → 0.0.3

package/lib/components/CompanyHeader.js

@@ -10,7 +10,8 @@ const base64Images_1 = require("../constants/strings/base64Images");
 const CompanyHeader = ({ companyName, rating }) => {
     const colors = (0, ThemeContext_1.useColors)();
     const typography = (0, ThemeContext_1.useTypography)();
-    const styles = createStyles(colors, typography);
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
     return (react_1.default.createElement(react_native_1.View, { style: styles.wrapper },
         react_1.default.createElement(react_native_1.View, { style: styles.card },
             react_1.default.createElement(react_native_1.View, { style: styles.innerBorder },
@@ -19,39 +20,42 @@ const CompanyHeader = ({ companyName, rating }) => {
                     react_1.default.createElement(react_native_1.Text, { style: styles.name }, companyName),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rating }, rating))))));
 };
-const createStyles = (colors, typography) => react_native_1.StyleSheet.create({
-    wrapper: {
-        paddingHorizontal: 2,
-        paddingTop: 12,
-        paddingBottom: 8,
-    },
-    card: {
-        backgroundColor: '#0B2940',
-        borderRadius: 24,
-        padding: 4,
-        borderWidth: 1,
-        borderColor: '#124061',
-        shadowColor: '#000',
-        shadowOpacity: 0.2,
-        shadowOffset: { width: 0, height: 4 },
-        shadowRadius: 12,
-        elevation: 4,
-    },
-    innerBorder: {
-        borderRadius: 20,
-        padding: 16,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    logo: {
-        width: 45,
-        height: 45,
-        marginRight: 12,
-    },
-    info: {
-        flex: 1,
-    },
-    name: Object.assign(Object.assign({}, typography.styles.h2), { color: '#FFFFFF', marginBottom: 6 }),
-    rating: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: '#BFD5F6' }),
-});
+const createStyles = (colors, typography, themeName) => {
+    const isDark = themeName === 'dark';
+    return react_native_1.StyleSheet.create({
+        wrapper: {
+            paddingHorizontal: 2,
+            paddingTop: 12,
+            paddingBottom: 8,
+        },
+        card: {
+            backgroundColor: isDark ? colors.headerBg : '#FFFFFF',
+            borderRadius: 24,
+            padding: 4,
+            borderWidth: 1,
+            borderColor: isDark ? colors.headerBg + 'AA' : colors.border + '40',
+            shadowColor: colors.shadow || '#000',
+            shadowOpacity: isDark ? 0.2 : 0.1,
+            shadowOffset: { width: 0, height: 4 },
+            shadowRadius: 12,
+            elevation: 4,
+        },
+        innerBorder: {
+            borderRadius: 20,
+            padding: 16,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        logo: {
+            width: 45,
+            height: 45,
+            marginRight: 12,
+        },
+        info: {
+            flex: 1,
+        },
+        name: Object.assign(Object.assign({}, typography.styles.h2), { color: isDark ? colors.headerText : colors.text, marginBottom: 6 }),
+        rating: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: isDark ? colors.headerText : colors.primary, opacity: isDark ? 0.8 : 1 }),
+    });
+};
 exports.default = CompanyHeader;

package/lib/components/InterestRateCard.js

@@ -24,9 +24,10 @@ const InterestRateCard = ({ interestRate, maturityAmount, children, }) => {
 const createStyles = (colors, typography, themeName) => react_native_1.StyleSheet.create({
     card: {
         backgroundColor: themeName === 'dark' ? colors.inputBackground : 'rgba(0,235,180,0.1)',
-        padding: 16,
+        paddingVertical: 16,
         borderRadius: 4,
         marginTop: 25,
+        paddingHorizontal: 12,
     },
     row: {
         flexDirection: 'row',
@@ -39,7 +40,7 @@ const createStyles = (colors, typography, themeName) => react_native_1.StyleShee
         flex: 1,
         alignItems: 'flex-end',
     },
-    label: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: themeName === 'dark' ? colors.labelColor : colors.textLight, marginBottom: 4 }),
+    label: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginBottom: 4 }),
     value: Object.assign(Object.assign({}, typography.styles.bodyLarge), { fontWeight: '600', color: colors.text }),
     valueRight: Object.assign(Object.assign({}, typography.styles.bodyLarge), { fontWeight: '700', color: colors.text }),
 });

package/lib/components/PaymentDetailsCard.js

@@ -35,20 +35,21 @@ const PaymentDetailsCard = ({ companyName, amount, fdRate, tenure, interestPayou
 };
 const createStyles = (colors, typography, themeName) => {
     var _a, _b, _c, _d;
+    const isDark = themeName === 'dark';
     return react_native_1.StyleSheet.create({
         card: {
-            backgroundColor: themeName === 'dark' ? '#0B2940' : '#0B2940',
+            backgroundColor: isDark ? colors.headerBg : 'rgba(0,235,180,0.1)',
             borderRadius: 16,
             padding: 20,
             alignItems: 'flex-start',
             marginHorizontal: 16,
-            borderWidth: 1,
-            borderColor: '#1F4C73',
+            borderWidth: isDark ? 1 : 0,
+            borderColor: isDark ? colors.headerBg + 'AA' : 'transparent',
         },
-        companyName: Object.assign(Object.assign({}, typography.styles.h3), { color: '#FFFFFF', marginBottom: 12 }),
+        companyName: Object.assign(Object.assign({}, typography.styles.h3), { color: isDark ? colors.headerText : colors.text, marginBottom: 12 }),
         companyLine: {
             height: 1,
-            backgroundColor: '#1F4C73',
+            backgroundColor: isDark ? colors.headerText + '33' : colors.border + '40',
             marginBottom: 12,
             width: '100%',
         },
@@ -61,8 +62,8 @@ const createStyles = (colors, typography, themeName) => {
             alignItems: 'center',
             paddingVertical: 8,
         },
-        detailLabel: Object.assign(Object.assign({}, typography.styles.text12Regular), { color: '#BFD5F6' }),
-        detailValue: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: '#FFFFFF', lineHeight: ((_d = (_b = (_a = typography.styles.text14Medium) === null || _a === void 0 ? void 0 : _a.lineHeight) !== null && _b !== void 0 ? _b : (_c = typography.styles.text14Medium) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _d !== void 0 ? _d : 14) + 3 }),
+        detailLabel: Object.assign(Object.assign({}, typography.styles.text12Regular), { color: isDark ? colors.headerText : colors.text, opacity: isDark ? 0.7 : 1 }),
+        detailValue: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: isDark ? colors.headerText : colors.text, lineHeight: ((_d = (_b = (_a = typography.styles.text14Medium) === null || _a === void 0 ? void 0 : _a.lineHeight) !== null && _b !== void 0 ? _b : (_c = typography.styles.text14Medium) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _d !== void 0 ? _d : 14) + 3 }),
     });
 };
 exports.default = PaymentDetailsCard;

package/lib/components/PendingFDBottomSheet.js

@@ -110,13 +110,13 @@ const createStyles = (colors, typography, spacing, themeName) => react_native_1.
     },
     continueButton: {
         height: 50,
-        backgroundColor: '#007AFF',
+        backgroundColor: colors.buttonBackground || colors.headerBg || '#007AFF',
         borderRadius: 25,
         paddingHorizontal: spacing.lg,
         alignItems: 'center',
         justifyContent: 'center',
         marginBottom: react_native_1.Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
     },
-    continueButtonText: Object.assign(Object.assign({}, typography.styles.button), { color: 'white', fontWeight: '600' }),
+    continueButtonText: Object.assign(Object.assign({}, typography.styles.button), { color: colors.buttonTextColor || colors.headerText || '#FFFFFF', fontWeight: '600' }),
 });
 exports.default = PendingFDBottomSheet;

package/lib/components/TextFieldWithLabel.js

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

package/lib/components/TrustBox.js

@@ -39,7 +39,7 @@ const createStyles = (colors, typography, themeName) => react_native_1.StyleShee
         flexDirection: 'column',
         flex: 1,
     },
-    titleLight: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: themeName === 'dark' ? '#C4CDD3' : colors.textLight, marginBottom: 0 }),
-    title: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: themeName === 'dark' ? colors.labelColor : colors.textLight, marginBottom: 0 }),
+    titleLight: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.textLight, marginBottom: 0 }),
+    title: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.text, marginBottom: 0 }),
 });
 exports.default = TrustBox;

package/lib/config/appDataConfig.d.ts

@@ -5,6 +5,35 @@ export interface EnvironmentData {
     encryptionKey?: string;
     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 {
     id: string;
     name: string;
@@ -12,7 +41,7 @@ export interface AppData {
     gender: string;
     mobNo: string;
     email: string;
-    panNumber: string;
+    panNumber?: string;
     address?: string;
     area?: string;
     city?: string;
@@ -26,6 +55,7 @@ export interface AppData {
     maritalStatus?: string;
     userReferenceId?: string;
     eventNotifyUrl?: string;
+    startFDAlertMessage?: string;
 }
 /**
  * Initialize the SDK with app data from the main application
@@ -61,7 +91,7 @@ export declare const getUserInfoForAPI: () => {
     name: string;
     dob: string;
     gender: string;
-    panNumber: string;
+    panNumber: string | undefined;
     mobileNumber: string;
     email: string;
     eventNotifyUrl: string | undefined;
@@ -100,6 +130,27 @@ export declare const validateAppData: (appData: AppData) => {
     isValid: boolean;
     errors: string[];
 };
+/**
+ * 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 declare const setSDKColors: (customColors: CustomColors) => void;
+/**
+ * Get the current custom color overrides
+ */
+export declare const getSDKColors: () => CustomColors | null;
+/**
+ * Clear custom color overrides
+ */
+export declare const clearSDKColors: () => void;
 /**
  * Clear app data (for testing or logout scenarios)
  */

package/lib/config/appDataConfig.js

@@ -34,11 +34,13 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearAllData = exports.clearEnvironmentData = exports.clearAppData = exports.validateAppData = exports.getUserDemographics = exports.getUserInfoForAPI = exports.isEnvironmentInitialized = exports.isSDKInitialized = exports.getEnvironmentData = exports.getAppData = exports.initializeEnvironment = exports.initializeSDK = void 0;
+exports.clearAllData = exports.clearEnvironmentData = exports.clearAppData = exports.clearSDKColors = exports.getSDKColors = exports.setSDKColors = exports.validateAppData = exports.getUserDemographics = exports.getUserInfoForAPI = exports.isEnvironmentInitialized = exports.isSDKInitialized = exports.getEnvironmentData = exports.getAppData = exports.initializeEnvironment = exports.initializeSDK = void 0;
 // Global app data storage
 let globalAppData = null;
 // Global environment data storage
 let globalEnvironmentData = null;
+// Global custom color overrides
+let globalCustomColors = null;
 /**
  * Initialize the SDK with app data from the main application
  * This should be called when the SDK starts
@@ -52,7 +54,7 @@ const initializeSDK = (appData, onValidationError) => {
         { 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 = [];
     requiredFields.forEach(({ field, label }) => {
@@ -201,7 +203,7 @@ exports.getUserDemographics = getUserDemographics;
  * Validate app data
  */
 const validateAppData = (appData) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const errors = [];
     // Required fields validation
     if (!((_a = appData.id) === null || _a === void 0 ? void 0 : _a.trim()))
@@ -216,13 +218,13 @@ const validateAppData = (appData) => {
         errors.push('Mobile number is required');
     if (!((_e = appData.email) === null || _e === void 0 ? void 0 : _e.trim()))
         errors.push('Email is required');
-    if (!((_f = appData.panNumber) === null || _f === void 0 ? void 0 : _f.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)');
     }
     if (appData.mobNo && !/^[6-9]\d{9}$/.test(appData.mobNo)) {
@@ -240,6 +242,36 @@ const validateAppData = (appData) => {
     };
 };
 exports.validateAppData = validateAppData;
+/**
+ * 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',
+ * });
+ */
+const setSDKColors = (customColors) => {
+    globalCustomColors = customColors;
+};
+exports.setSDKColors = setSDKColors;
+/**
+ * Get the current custom color overrides
+ */
+const getSDKColors = () => {
+    return globalCustomColors;
+};
+exports.getSDKColors = getSDKColors;
+/**
+ * Clear custom color overrides
+ */
+const clearSDKColors = () => {
+    globalCustomColors = null;
+};
+exports.clearSDKColors = clearSDKColors;
 /**
  * Clear app data (for testing or logout scenarios)
  */
@@ -260,5 +292,6 @@ exports.clearEnvironmentData = clearEnvironmentData;
 const clearAllData = () => {
     globalAppData = null;
     globalEnvironmentData = null;
+    globalCustomColors = null;
 };
 exports.clearAllData = clearAllData;

package/lib/hooks/usePaymentSSE.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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
+ */
+interface UsePaymentSSECallbacks {
+    onPaymentStatus: (status: string, payload: Record<string, unknown>) => void;
+    onError?: (error: any) => void;
+    onConnected?: () => void;
+}
+export declare function usePaymentSSE(): {
+    start: (applicationId: string, callbacks: UsePaymentSSECallbacks) => void;
+    stop: () => void;
+};
+export {};

package/lib/hooks/usePaymentSSE.js

@@ -0,0 +1,135 @@
+"use strict";
+/**
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePaymentSSE = usePaymentSSE;
+const react_1 = require("react");
+const sseParser_1 = require("../utils/sseParser");
+const appDataConfig_1 = require("../config/appDataConfig");
+const apiConfig_1 = require("../config/apiConfig");
+// -- Hook --
+function usePaymentSSE() {
+    // Store the XMLHttpRequest so we can abort it later
+    const xhrRef = (0, react_1.useRef)(null);
+    // Track how much of responseText we've already parsed
+    const lastIndexRef = (0, react_1.useRef)(0);
+    // SSE text buffer (persists across onprogress calls)
+    const bufferRef = (0, react_1.useRef)({ value: '' });
+    const start = (0, react_1.useCallback)((applicationId, callbacks) => {
+        var _a;
+        // 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 = (0, appDataConfig_1.getEnvironmentData)();
+        const apiConfig = (0, apiConfig_1.getApiConfig)();
+        const baseUrl = (envData === null || envData === void 0 ? void 0 : envData.apiBaseUrl) || (apiConfig === null || apiConfig === void 0 ? void 0 : 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 === null || envData === void 0 ? void 0 : envData.apiKey) || ((_a = apiConfig === null || apiConfig === void 0 ? void 0 : apiConfig.headers) === null || _a === void 0 ? void 0 : _a['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 = () => {
+            var _a;
+            // 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 = (0, sseParser_1.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 = ((_a = parsed.paymentStatus) !== null && _a !== void 0 ? _a : '').toUpperCase();
+                        callbacks.onPaymentStatus(status, parsed);
+                    }
+                    catch (parseError) {
+                        if (__DEV__) {
+                            console.error('[usePaymentSSE] Failed to parse event data:', parseError);
+                        }
+                    }
+                }
+            }
+        };
+        // 5. Handle successful connection
+        xhr.onreadystatechange = () => {
+            var _a, _b;
+            if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
+                if (xhr.status === 200) {
+                    (_a = callbacks.onConnected) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+                    if (__DEV__) {
+                        console.log('[usePaymentSSE] Connected to SSE stream');
+                    }
+                }
+                else {
+                    if (__DEV__) {
+                        console.error('[usePaymentSSE] Bad status:', xhr.status);
+                    }
+                    (_b = callbacks.onError) === null || _b === void 0 ? void 0 : _b.call(callbacks, new Error(`SSE response status: ${xhr.status}`));
+                }
+            }
+        };
+        // 6. Handle errors
+        xhr.onerror = () => {
+            var _a;
+            if (__DEV__) {
+                console.error('[usePaymentSSE] Connection error');
+            }
+            (_a = callbacks.onError) === null || _a === void 0 ? void 0 : _a.call(callbacks, new Error('SSE connection failed'));
+        };
+        // 7. Handle timeout
+        xhr.ontimeout = () => {
+            var _a;
+            if (__DEV__) {
+                console.error('[usePaymentSSE] Connection timed out');
+            }
+            (_a = callbacks.onError) === null || _a === void 0 ? void 0 : _a.call(callbacks, 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 = (0, react_1.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/lib/hooks/usePaymentStatusTimer.d.ts

@@ -0,0 +1,25 @@
+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;
+    repeatDelayMs?: number;
+    maxDurationMs?: number;
+    onStatusUpdate?: (status: PaymentStatus, response?: any) => void;
+}
+export declare const usePaymentStatusTimer: ({ transactionId, overrides, initialDelayMs, repeatDelayMs, maxDurationMs, onStatusUpdate, }: UsePaymentStatusTimerConfig) => {
+    startTimer: () => void;
+    stopTimer: () => void;
+    triggerStatusCheck: () => Promise<PaymentStatus | undefined>;
+    isCheckingStatus: boolean;
+    latestStatusRef: import("react").MutableRefObject<PaymentStatus>;
+};
+export {};