@finspringinnovations/fdsdk 0.0.1 → 0.0.3

package/lib/screens/NomineeDetail.js

@@ -140,7 +140,8 @@ const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
                 const month = parseInt(dateParts[1], 10);
                 const year = parseInt(dateParts[2], 10);
                 if (day >= 1 && day <= 31 && month >= 1 && month <= 12 && year >= 1900 && year <= new Date().getFullYear()) {
-                    const parsedDate = new Date(year, month - 1, day);
+                    // Use noon to avoid timezone issues
+                    const parsedDate = new Date(year, month - 1, day, 12, 0, 0);
                     if (!isNaN(parsedDate.getTime()) && parsedDate.getDate() === day && parsedDate.getMonth() === month - 1 && parsedDate.getFullYear() === year) {
                         setSelectedDate(parsedDate);
                     }
@@ -262,7 +263,8 @@ const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
                 const year = parseInt(dateParts[2], 10);
                 // Validate the parsed values
                 if (day >= 1 && day <= 31 && month >= 1 && month <= 12 && year >= 1900 && year <= new Date().getFullYear()) {
-                    const parsedDate = new Date(year, month - 1, day);
+                    // Use noon to avoid timezone issues
+                    const parsedDate = new Date(year, month - 1, day, 12, 0, 0);
                     if (!isNaN(parsedDate.getTime()) && parsedDate.getDate() === day && parsedDate.getMonth() === month - 1 && parsedDate.getFullYear() === year) {
                         setSelectedDate(parsedDate);
                     }
@@ -297,11 +299,13 @@ const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
         if (react_native_1.Platform.OS === 'android') {
             // Android fires with types: 'set' and 'dismissed'
             if ((event === null || event === void 0 ? void 0 : event.type) === 'set' && selectedDate) {
-                setSelectedDate(selectedDate);
+                // Normalize to noon to avoid timezone issues
+                const normalizedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 12, 0, 0);
+                setSelectedDate(normalizedDate);
                 const today = new Date();
-                let age = today.getFullYear() - selectedDate.getFullYear();
-                const m = today.getMonth() - selectedDate.getMonth();
-                if (m < 0 || (m === 0 && today.getDate() < selectedDate.getDate())) {
+                let age = today.getFullYear() - normalizedDate.getFullYear();
+                const m = today.getMonth() - normalizedDate.getMonth();
+                if (m < 0 || (m === 0 && today.getDate() < normalizedDate.getDate())) {
                     age--;
                 }
                 if (age < 18) {
@@ -310,9 +314,9 @@ const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
                     closeDatePicker();
                     return;
                 }
-                const day = selectedDate.getDate().toString().padStart(2, '0');
-                const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0');
-                const year = selectedDate.getFullYear().toString();
+                const day = normalizedDate.getDate().toString().padStart(2, '0');
+                const month = (normalizedDate.getMonth() + 1).toString().padStart(2, '0');
+                const year = normalizedDate.getFullYear().toString();
                 const formattedDate = `${day}/${month}/${year}`;
                 updateField('dateOfBirth', formattedDate);
                 closeDatePicker();
@@ -326,10 +330,12 @@ const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
         }
         // iOS inline/spinner handling
         if (selectedDate) {
-            setSelectedDate(selectedDate);
-            const day = selectedDate.getDate().toString().padStart(2, '0');
-            const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0');
-            const year = selectedDate.getFullYear().toString();
+            // Normalize to noon to avoid timezone issues
+            const normalizedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 12, 0, 0);
+            setSelectedDate(normalizedDate);
+            const day = normalizedDate.getDate().toString().padStart(2, '0');
+            const month = (normalizedDate.getMonth() + 1).toString().padStart(2, '0');
+            const year = normalizedDate.getFullYear().toString();
             const formattedDate = `${day}/${month}/${year}`;
             updateField('dateOfBirth', formattedDate);
         }
@@ -392,7 +398,7 @@ const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
                 return;
             closeAllMenus();
             openDatePicker();
-        }, editable: false, keepWhiteBackground: true, inputStyle: { color: 'white' } }));
+        }, editable: false, keepWhiteBackground: true }));
     // Validation function to check if all required fields are filled (pure function - no setState)
     const validateForm = () => {
         // If makeNomination is "No", no other fields are required
@@ -523,7 +529,7 @@ const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
                             renderDropdown(nominee_1.NOMINEE_STRINGS.RELATIONSHIP_LABEL, form.relationship, 'relationship', nomineeRelationOptions, 'relationship'),
                             renderDateField(nominee_1.NOMINEE_STRINGS.DATE_OF_BIRTH_LABEL, form.dateOfBirth, 'dateOfBirth'),
                             showDatePicker && (react_1.default.createElement(react_native_1.View, { style: styles.datePickerContainer },
-                                react_1.default.createElement(datetimepicker_1.default, { value: selectedDate, mode: "date", display: react_native_1.Platform.OS === 'ios' ? 'spinner' : 'default', onChange: onDateChange, maximumDate: new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate()), themeVariant: "light" }))),
+                                react_1.default.createElement(datetimepicker_1.default, { value: selectedDate, mode: "date", display: react_native_1.Platform.OS === 'ios' ? 'spinner' : 'default', onChange: onDateChange, minimumDate: new Date(1900, 0, 1), maximumDate: new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate()), themeVariant: "light" }))),
                             react_1.default.createElement(react_native_1.View, { style: styles.checkboxContainer },
                                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.checkbox, onPress: () => updateField('printNameOnCertificate', !form.printNameOnCertificate) },
                                     react_1.default.createElement(react_native_1.View, { style: [styles.checkboxBox, form.printNameOnCertificate && styles.checkboxChecked] }, form.printNameOnCertificate ? (react_1.default.createElement(react_native_1.Image, { source: { uri: ((0, ThemeContext_1.useTheme)().themeName === 'dark') ? base64Images_1.base64Images.checkBoxDark : base64Images_1.base64Images.filledCheckBox }, style: { width: 22, height: 22 }, resizeMode: "contain" })) : (((0, ThemeContext_1.useTheme)().themeName === 'dark') ? (react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.unCheckBoxDark }, style: { width: 22, height: 22 }, resizeMode: "contain" })) : null))),

package/lib/screens/PayNow.js

@@ -159,7 +159,7 @@ const PayNow = ({ onGoBack, onConfirm, fdData }) => {
         const backHandler = react_native_1.BackHandler.addEventListener('hardwareBackPress', onHardwareBackPress);
         return () => backHandler.remove();
     }, [defaultProviderId, workflowInstanceId, applicationId, entityId]);
-    return (react_1.default.createElement(SafeAreaWrapper_1.default, { includeTop: false, bottomPadding: 25, statusBarColor: "#000000", statusBarStyle: "light-content" },
+    return (react_1.default.createElement(SafeAreaWrapper_1.default, { includeTop: false, bottomPadding: 25, statusBarColor: colors.background, statusBarStyle: themeName === 'dark' ? 'light-content' : 'dark-content' },
         react_1.default.createElement(react_native_1.View, { style: styles.container },
             react_1.default.createElement(react_native_1.ScrollView, { showsVerticalScrollIndicator: false, contentContainerStyle: styles.scrollContent },
                 react_1.default.createElement(react_native_1.Text, { style: styles.title }, bank_1.BANK_STRINGS.PAYMENT_DETAILS_TITLE),
@@ -196,13 +196,13 @@ const createStyles = (colors, typography, themeName) => react_native_1.StyleShee
     },
     backButton: {
         flex: 1,
-        backgroundColor: themeName === 'dark' ? colors.cancelButtonBg : 'transparent',
-        borderWidth: themeName === 'dark' ? 1 : 0,
-        borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
-        borderRadius: themeName === 'dark' ? 10 : 0,
+        backgroundColor: colors.cancelButtonBg || 'transparent',
+        borderWidth: 0,
+        borderColor: 'transparent',
+        borderRadius: 10,
     },
     backButtonText: {
-        color: themeName === 'dark' ? '#ffffff' : colors.primary,
+        color: colors.primary,
     },
     confirmButton: {
         flex: 1,

package/lib/screens/Payment.d.ts

@@ -3,6 +3,7 @@ export interface PaymentProps {
     onGoBack?: () => void;
     onPaymentSuccess?: (data?: any) => void;
     onPaymentFailure?: (error?: any) => void;
+    onPaymentPending?: (data?: any) => void;
     paymentUrl: string;
     successUrl?: string;
     failureUrl?: string;

package/lib/screens/Payment.js

@@ -43,27 +43,43 @@ const SafeAreaWrapper_1 = __importDefault(require("../components/SafeAreaWrapper
 const ThemeContext_1 = require("../theme/ThemeContext");
 const encryption_1 = require("../utils/encryption");
 const encryptionConfig_1 = require("../config/encryptionConfig");
-const Payment = ({ onGoBack, onPaymentSuccess, onPaymentFailure, paymentUrl, successUrl = 'payment/success', failureUrl = 'payment/failure', }) => {
+const native_1 = require("@react-navigation/native");
+const paymentSession_1 = require("../state/paymentSession");
+const usePaymentStatusTimer_1 = require("../hooks/usePaymentStatusTimer");
+const Payment = ({ onGoBack, onPaymentSuccess, onPaymentFailure, onPaymentPending, paymentUrl, successUrl = 'payment/success', failureUrl = 'payment/failure', }) => {
     const colors = (0, ThemeContext_1.useColors)();
     const styles = createStyles(colors);
     const webViewRef = (0, react_1.useRef)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
+    const currentStatusRef = (0, react_1.useRef)('pending');
+    const { transactionId } = (0, paymentSession_1.getPaymentSession)();
+    const { startTimer, stopTimer } = (0, usePaymentStatusTimer_1.usePaymentStatusTimer)({
+        transactionId,
+        onStatusUpdate: (status, response) => {
+            currentStatusRef.current = status;
+            if (status === 'success') {
+                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+            }
+            else if (status === 'failed') {
+                onPaymentFailure === null || onPaymentFailure === void 0 ? void 0 : onPaymentFailure(response);
+            }
+            else if (status === 'pending') {
+                onPaymentPending === null || onPaymentPending === void 0 ? void 0 : onPaymentPending(response);
+            }
+        }
+    });
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        startTimer();
+    }, [startTimer, stopTimer]));
     const handleNavigationStateChange = async (navState) => {
         const { url } = navState;
         if (url.includes('payment/status')) {
             await handlePaymentStatusPage();
             return;
         }
-        if (url.includes(successUrl)) {
-            setLoading(false);
-            onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(navState);
-            return;
-        }
-        if (url.includes(failureUrl)) {
-            setLoading(false);
-            onPaymentFailure === null || onPaymentFailure === void 0 ? void 0 : onPaymentFailure(navState);
-            return;
-        }
+        // else{
+        //     onPaymentPending?.(url);
+        // }
     };
     const handleWebViewError = (syntheticEvent) => {
         const { nativeEvent } = syntheticEvent;
@@ -114,17 +130,22 @@ const Payment = ({ onGoBack, onPaymentSuccess, onPaymentFailure, paymentUrl, suc
                 // Check payment status in data
                 const paymentStatus = (_c = (_b = response.data) === null || _b === void 0 ? void 0 : _b.paymentStatus) === null || _c === void 0 ? void 0 : _c.toLowerCase();
                 if (paymentStatus === 'success') {
+                    currentStatusRef.current = "success";
+                    stopTimer();
                     onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
                 }
                 else if (paymentStatus === 'failed') {
+                    currentStatusRef.current = "failed";
+                    stopTimer();
                     onPaymentFailure === null || onPaymentFailure === void 0 ? void 0 : onPaymentFailure(response);
                 }
                 else {
-                    onPaymentFailure === null || onPaymentFailure === void 0 ? void 0 : onPaymentFailure(response);
+                    onPaymentPending === null || onPaymentPending === void 0 ? void 0 : onPaymentPending(response);
                 }
             }
             else {
-                onPaymentFailure === null || onPaymentFailure === void 0 ? void 0 : onPaymentFailure(response);
+                currentStatusRef.current = "pending";
+                onPaymentPending === null || onPaymentPending === void 0 ? void 0 : onPaymentPending(response);
             }
             setLoading(false);
         }

package/lib/screens/PaymentStatus.js

@@ -54,6 +54,7 @@ const native_1 = require("@react-navigation/native");
 const bank_1 = require("../constants/strings/bank");
 const common_1 = require("../constants/strings/common");
 const apiConfig_1 = require("../config/apiConfig");
+const usePaymentStatusTimer_1 = require("../hooks/usePaymentStatusTimer");
 const PaymentStatus = ({ onRetry, onContinue, status, transactionId, fdData }) => {
     var _a;
     const colors = (0, ThemeContext_1.useColors)();
@@ -61,7 +62,7 @@ const PaymentStatus = ({ onRetry, onContinue, status, transactionId, fdData }) =
     const { themeName } = (0, ThemeContext_1.useTheme)();
     // Local state to track current status (can be updated from API responses)
     const [currentStatus, setCurrentStatus] = (0, react_1.useState)(status);
-    const styles = createStyles(colors, typography, currentStatus);
+    const styles = createStyles(colors, typography, currentStatus, themeName);
     const route = (0, native_1.useRoute)();
     // Get transaction ID from navigation props (route params)
     const navigationTransactionId = (_a = route.params) === null || _a === void 0 ? void 0 : _a.transactionId;
@@ -74,8 +75,18 @@ const PaymentStatus = ({ onRetry, onContinue, status, transactionId, fdData }) =
     const applicationId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.applicationId; });
     const entityId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.entityid; });
     const providerId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.providerId; });
-    // Payment Reverse Feed API
-    const [paymentReverseFeed, { data: paymentReverseFeedResponse, error: paymentReverseFeedError, isLoading: isLoadingPaymentReverseFeed, }] = (0, fdApi_1.usePaymentReverseFeedMutation)();
+    const { startTimer, stopTimer, triggerStatusCheck, isCheckingStatus, } = (0, usePaymentStatusTimer_1.usePaymentStatusTimer)({
+        transactionId: finalTransactionId,
+        overrides: {
+            providerId,
+            workflowInstanceId,
+            applicationid: applicationId,
+            entityid: entityId,
+        },
+        onStatusUpdate: (nextStatus) => {
+            setCurrentStatus(nextStatus);
+        },
+    });
     // Payment Retry API
     const [paymentRetry, { data: paymentRetryResponse, error: paymentRetryError, isLoading: isLoadingPaymentRetry, }] = (0, fdApi_1.usePaymentRetryMutation)();
     // Get Customer Applications API
@@ -99,37 +110,19 @@ const PaymentStatus = ({ onRetry, onContinue, status, transactionId, fdData }) =
     const formatAmount = (amount) => {
         return amount.toLocaleString('en-IN');
     };
-    // Handle payment reverse feed API call for pending status
-    const handlePaymentReverseFeed = async () => {
-        var _a, _b, _c, _d;
-        try {
-            // Get user info from app data
-            const userInfo = (0, appDataConfig_1.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 (((_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.paymentStatus) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'success') {
-                setCurrentStatus('success');
-            }
-            else if (((_d = (_c = response === null || response === void 0 ? void 0 : response.data) === null || _c === void 0 ? void 0 : _c.paymentStatus) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === 'failed') {
-                setCurrentStatus('failed');
-            }
+    (0, react_1.useEffect)(() => {
+        if (currentStatus === 'pending') {
+            startTimer();
         }
-        catch (error) {
-            // Alert.alert(COMMON_STRINGS.ERROR, BANK_STRINGS.PAYMENT_GATEWAY_ERROR, [
-            //     { text: COMMON_STRINGS.OK }
-            // ]);
+        else {
+            stopTimer();
         }
+        return () => {
+            stopTimer();
+        };
+    }, [currentStatus, startTimer, stopTimer]);
+    const handlePaymentReverseFeed = async () => {
+        await triggerStatusCheck();
     };
     // Handle payment retry when status is failed
     const handlePaymentRetry = async () => {
@@ -278,8 +271,8 @@ const PaymentStatus = ({ onRetry, onContinue, status, transactionId, fdData }) =
         const backHandler = react_native_1.BackHandler.addEventListener('hardwareBackPress', onBackPress);
         return () => backHandler.remove();
     }, []);
-    return (react_1.default.createElement(SafeAreaWrapper_1.default, { includeTop: true, bottomPadding: 0, statusBarColor: "#000000", statusBarStyle: "light-content" },
-        react_native_1.Platform.OS === 'ios' && react_1.default.createElement(react_native_1.StatusBar, { barStyle: "light-content" }),
+    return (react_1.default.createElement(SafeAreaWrapper_1.default, { includeTop: true, bottomPadding: 0, statusBarColor: colors.background, statusBarStyle: themeName === 'dark' ? 'light-content' : 'dark-content' },
+        react_native_1.Platform.OS === 'ios' && react_1.default.createElement(react_native_1.StatusBar, { barStyle: themeName === 'dark' ? 'light-content' : 'dark-content' }),
         react_1.default.createElement(react_native_1.View, { style: styles.container },
             react_1.default.createElement(react_native_1.ScrollView, { showsVerticalScrollIndicator: false, contentContainerStyle: styles.scrollContent },
                 react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
@@ -301,12 +294,10 @@ const PaymentStatus = ({ onRetry, onContinue, status, transactionId, fdData }) =
                     react_1.default.createElement(react_native_1.Text, { style: styles.disclaimerText }, bank_1.BANK_STRINGS.PAYMENT_SUCCESS_DISCLAIMER)))),
             react_1.default.createElement(react_native_1.View, { style: styles.footer },
                 currentStatus === 'success' && (react_1.default.createElement(ActionButton_1.default, { title: isLoadingCustomerApplications ? common_1.COMMON_STRINGS.LOADING : common_1.COMMON_STRINGS.EXIT, onPress: handleExit, disabled: isLoadingCustomerApplications })),
-                currentStatus === 'failed' && (react_1.default.createElement(ActionButton_1.default, { title: isLoadingPaymentRetry ? common_1.COMMON_STRINGS.RETRYING : bank_1.BANK_STRINGS.RETRY_PAYMENT_BUTTON, onPress: handlePaymentRetry, disabled: isLoadingPaymentRetry })),
-                currentStatus === 'pending' && (react_1.default.createElement(ActionButton_1.default, { title: isLoadingPaymentReverseFeed ? common_1.COMMON_STRINGS.CHECKING : bank_1.BANK_STRINGS.REFRESH_STATUS_BUTTON, onPress: handlePaymentReverseFeed, disabled: isLoadingPaymentReverseFeed }))))));
+                currentStatus === 'failed' && (react_1.default.createElement(ActionButton_1.default, { title: isLoadingPaymentRetry ? common_1.COMMON_STRINGS.RETRYING : bank_1.BANK_STRINGS.RETRY_PAYMENT_BUTTON, onPress: handlePaymentRetry, disabled: isLoadingPaymentRetry }))))));
 };
-const createStyles = (colors, typography, status) => {
-    const statusColor = status === 'success' ? '#4CAF50' : status === 'failed' ? '#F44336' : '#FF9800';
-    const cardBgColor = status === 'success' ? '#E8F5F0' : status === 'failed' ? '#FFF3F3' : '#FFF8E1';
+const createStyles = (colors, typography, status, themeName) => {
+    const isDark = themeName === 'dark';
     return react_native_1.StyleSheet.create({
         container: {
             flex: 1,
@@ -342,7 +333,7 @@ const createStyles = (colors, typography, status) => {
             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',
         },
@@ -359,7 +350,7 @@ const createStyles = (colors, typography, status) => {
             width: 56,
             height: 56,
             borderRadius: 28,
-            backgroundColor: '#5F9E8F',
+            backgroundColor: colors.primary,
             alignItems: 'center',
             justifyContent: 'center',
             borderWidth: 4,
@@ -368,7 +359,7 @@ const createStyles = (colors, typography, status) => {
         avatarText: {
             fontSize: 24,
             fontWeight: '600',
-            color: 'white',
+            color: colors.headerText,
         },
         footer: {
             position: 'absolute',

package/lib/theme/ThemeContext.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { type Theme, type ThemeName } from './index';
+import type { CustomColors } from '../config/appDataConfig';
 interface ThemeContextType {
     theme: Theme;
     themeName: ThemeName;
@@ -9,6 +10,7 @@ interface ThemeProviderProps {
     children: ReactNode;
     initialTheme?: ThemeName;
     theme?: Theme;
+    colorOverrides?: CustomColors | null;
 }
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export declare const useTheme: () => ThemeContextType;

package/lib/theme/ThemeContext.js

@@ -37,9 +37,11 @@ exports.useSpacing = exports.useShadows = exports.useTypography = exports.useCol
 const react_1 = __importStar(require("react"));
 const index_1 = require("./index");
 const ThemeContext = (0, react_1.createContext)(undefined);
-const ThemeProvider = ({ children, initialTheme = 'primary', theme: customTheme, }) => {
+const ThemeProvider = ({ children, initialTheme = 'primary', theme: customTheme, colorOverrides, }) => {
     const [currentThemeName, setCurrentThemeName] = react_1.default.useState(initialTheme);
-    const theme = customTheme || (0, index_1.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 || (0, index_1.createTheme)(currentThemeName, colorOverrides);
     const setTheme = react_1.default.useCallback((themeName) => {
         setCurrentThemeName(themeName);
     }, []);

package/lib/theme/index.d.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';
 export declare const spacing: {
     readonly xs: 4;
     readonly sm: 8;
@@ -25,7 +26,11 @@ export interface Theme {
     spacing: typeof spacing;
     borderRadius: typeof borderRadius;
 }
-export declare const createTheme: (themeName?: ThemeName) => Theme;
+/**
+ * Theme factory function.
+ * If customColors are provided, they override the corresponding colors from the base theme.
+ */
+export declare const createTheme: (themeName?: ThemeName, customColors?: CustomColors | null) => Theme;
 export declare const getBorderColor: (theme: Theme, opacity?: number) => string;
 export declare const getShadowColor: (opacity?: number) => string;
 export { colors, typography, shadows, type ThemeName, type ColorScheme };

package/lib/theme/index.js

@@ -40,15 +40,31 @@ exports.borderRadius = {
     xl: 16,
     full: 9999,
 };
-// Theme factory function
-const createTheme = (themeName = 'primary') => ({
-    colors: colors_1.colors[themeName],
-    typography: typography_1.typography,
-    shadows: shadows_1.shadows,
-    spacing: exports.spacing,
-    borderRadius: exports.borderRadius,
-});
+/**
+ * Theme factory function.
+ * If customColors are provided, they override the corresponding colors from the base theme.
+ */
+const createTheme = (themeName = 'primary', customColors) => {
+    const baseColors = colors_1.colors[themeName];
+    // Merge custom color overrides on top of the base theme colors
+    const mergedColors = customColors
+        ? Object.assign(Object.assign({}, baseColors), filterDefinedValues(customColors))
+        : baseColors;
+    return {
+        colors: mergedColors,
+        typography: typography_1.typography,
+        shadows: shadows_1.shadows,
+        spacing: exports.spacing,
+        borderRadius: exports.borderRadius,
+    };
+};
 exports.createTheme = createTheme;
+/**
+ * Utility to filter out undefined/null values so only explicitly set colors override the theme.
+ */
+const filterDefinedValues = (obj) => {
+    return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== undefined && value !== null));
+};
 // Helper function to get border with opacity
 const getBorderColor = (theme, opacity = 0.36) => {
     const hex = theme.colors.border.replace('#', '');

package/lib/utils/sseParser.d.ts

@@ -0,0 +1,7 @@
+export interface SSEEvent {
+    eventType: string;
+    data: string;
+}
+export declare function parseSSEBuffer(buffer: {
+    value: string;
+}, chunk: string): SSEEvent[];

package/lib/utils/sseParser.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSSEBuffer = parseSSEBuffer;
+function parseSSEBuffer(buffer, chunk) {
+    const results = [];
+    buffer.value += chunk;
+    let idx;
+    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 = [];
+        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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@finspringinnovations/fdsdk",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "FD SDK for React Native applications",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -73,4 +73,4 @@
         "url": "https://github.com/shriram-finance/shriramsdk/issues"
     },
     "license": "MIT"
-}
+}

package/src/components/CompanyHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Image } from 'react-native';
-import { useColors, useTypography } from '../theme/ThemeContext';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
 import { base64Images } from '../constants/strings/base64Images';
 
 interface CompanyHeaderProps {
@@ -11,7 +11,8 @@ interface CompanyHeaderProps {
 const CompanyHeader: React.FC<CompanyHeaderProps> = ({ companyName, rating }) => {
     const colors = useColors();
     const typography = useTypography();
-    const styles = createStyles(colors, typography);
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
 
     return (
         <View style={styles.wrapper}>
@@ -32,47 +33,52 @@ const CompanyHeader: React.FC<CompanyHeaderProps> = ({ companyName, rating }) =>
     );
 };
 
-const createStyles = (colors: any, typography: any) => 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: {
-        ...typography.styles.h2,
-        color: '#FFFFFF',
-        marginBottom: 6,
-    },
-    rating: {
-        ...typography.styles.text14Medium,
-        color: '#BFD5F6',
-    },
-});
+const createStyles = (colors: any, typography: any, themeName: string) => {
+    const isDark = themeName === 'dark';
+
+    return 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: {
+            ...typography.styles.h2,
+            color: isDark ? colors.headerText : colors.text,
+            marginBottom: 6,
+        },
+        rating: {
+            ...typography.styles.text14Medium,
+            color: isDark ? colors.headerText : colors.primary,
+            opacity: isDark ? 0.8 : 1,
+        },
+    });
+};
 
 export default CompanyHeader;

package/src/components/InterestRateCard.tsx

@@ -42,9 +42,10 @@ const InterestRateCard: React.FC<InterestRateCardProps> = ({
 const createStyles = (colors: any, typography: any, themeName: string) => 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',
@@ -59,7 +60,7 @@ const createStyles = (colors: any, typography: any, themeName: string) => StyleS
     },
     label: {
         ...typography.styles.bodySmall,
-        color: themeName === 'dark' ? colors.labelColor : colors.textLight,
+        color: colors.textLight,
         marginBottom: 4,
     },
     value: {