@finspringinnovations/fdsdk 0.0.1 → 0.0.2

package/lib/components/AmountInput.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
-const Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
 const base64Images_1 = require("../constants/strings/base64Images");
 const ThemeContext_1 = require("../theme/ThemeContext");
 const theme_1 = require("../theme");
@@ -40,7 +39,7 @@ const AmountInput = ({ label, value, onChangeText, onBlur, onFocus, placeholder
             react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.error }, style: { width: 16, height: 16, marginRight: 6 }, resizeMode: "contain" }),
             react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, errorMessage))),
         noteText && (react_1.default.createElement(react_native_1.View, { style: styles.noteRow },
-            react_1.default.createElement(Ionicons_1.default, { name: "information-circle-outline", size: 14, color: themeName === 'dark' ? colors.labelColor : colors.textLight, style: styles.noteIcon }),
+            react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.info }, style: [styles.noteIcon, { width: 14, height: 14, tintColor: colors.textLight }], resizeMode: "contain" }),
             react_1.default.createElement(react_native_1.Text, { style: styles.noteText }, noteText))),
         minMaxText && (react_1.default.createElement(react_native_1.View, { style: styles.limitContainer },
             react_1.default.createElement(react_native_1.Text, { style: styles.limitLabel }, "Min: "),

package/lib/components/CheckboxOption.js

@@ -21,20 +21,20 @@ const createStyles = (colors, typography, themeName) => react_native_1.StyleShee
         flexDirection: 'row',
         alignItems: 'center',
         paddingVertical: 0,
+        paddingHorizontal: 5
     },
     checkbox: {
         width: 18,
         height: 18,
         borderRadius: 3,
         borderWidth: 1.5,
-        borderColor: themeName === 'dark' ? colors.tabSelected : colors.primary,
+        borderColor: colors.inputBorder || colors.border,
         marginRight: 12,
         alignItems: 'center',
         justifyContent: 'center',
     },
     checkboxChecked: {
-        // backgroundColor: colors.tabSelected,
-        borderColor: colors.tabSelected,
+        borderColor: colors.inputBorder || colors.border,
     },
     label: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.text, flex: 1 }),
 });

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/OTPInput.js

@@ -117,7 +117,7 @@ const createStyles = (colors, typography, themeName) => react_native_1.StyleShee
         marginBottom: 16,
         gap: 8,
     },
-    otpInput: Object.assign(Object.assign({ width: 48, height: 48, borderWidth: 1, borderColor: themeName === 'dark' ? colors.inputBorder : colors.primary, borderRadius: 8 }, typography.styles.bodyLarge), { color: colors.text, backgroundColor: themeName === 'dark' ? colors.inputBackground : 'white' }),
+    otpInput: Object.assign(Object.assign({ width: 48, height: 48, borderWidth: 1, borderColor: colors.inputBorder || colors.border, borderRadius: 8 }, typography.styles.bodyLarge), { color: colors.text, backgroundColor: themeName === 'dark' ? colors.inputBackground : 'white' }),
     otpInputError: {
         borderColor: colors.error,
         borderWidth: 2,

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

@@ -47,11 +47,11 @@ const createStyles = (colors, typography, spacing, themeName) => react_native_1.
     },
     bottomSheet: {
         padding: spacing.sm,
-        backgroundColor: themeName === 'dark' ? colors.background : 'white',
+        backgroundColor: colors.background,
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
         borderWidth: themeName === 'dark' ? 1 : 0,
-        borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
+        borderColor: themeName === 'dark' ? colors.border : 'transparent',
         maxHeight: react_native_1.Dimensions.get('window').height * 0.8,
         minHeight: react_native_1.Platform.OS === 'ios' ? 430 : 400,
     },
@@ -71,7 +71,7 @@ const createStyles = (colors, typography, spacing, themeName) => react_native_1.
     title: {
         fontSize: 17,
         fontWeight: '500',
-        color: themeName === 'dark' ? colors.labelColor : '#333',
+        color: colors.text,
         flex: 1,
         marginRight: spacing.md,
         lineHeight: 24,
@@ -80,7 +80,7 @@ const createStyles = (colors, typography, spacing, themeName) => react_native_1.
         width: 32,
         height: 32,
         borderRadius: 16,
-        backgroundColor: '#f5f5f5',
+        backgroundColor: colors.surface,
         justifyContent: 'center',
         alignItems: 'center',
     },
@@ -90,13 +90,13 @@ const createStyles = (colors, typography, spacing, themeName) => react_native_1.
         paddingTop: spacing.lg,
         paddingBottom: react_native_1.Platform.OS === 'ios' ? 20 : 0,
     },
-    sectionTitle: Object.assign(Object.assign({}, typography.styles.h3), { color: themeName === 'dark' ? colors.labelColor : '#333', marginBottom: spacing.md }),
+    sectionTitle: Object.assign(Object.assign({}, typography.styles.h3), { color: colors.text, marginBottom: spacing.md }),
     bookNewButton: {
         marginTop: spacing.xxxl,
         marginBottom: spacing.xxxl,
         alignItems: 'center',
     },
-    bookNewText: Object.assign(Object.assign({}, typography.styles.body2), { color: themeName === 'dark' ? colors.labelColor : '#000000' }),
+    bookNewText: Object.assign(Object.assign({}, typography.styles.body2), { color: colors.text }),
     disabledButton: {
         opacity: 0.6,
     },
@@ -110,13 +110,13 @@ const createStyles = (colors, typography, spacing, themeName) => react_native_1.
     },
     continueButton: {
         height: 50,
-        backgroundColor: '#007AFF',
+        backgroundColor: colors.buttonBackground || colors.headerBg,
         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, fontWeight: '600' }),
 });
 exports.default = PendingFDBottomSheet;

package/lib/components/TextFieldWithLabel.js

@@ -91,7 +91,7 @@ const TextFieldWithLabel = ({ label, value, onChangeText, placeholder, placehold
             return { borderColor: colors.success, borderWidth: 1 };
         }
         if (isFocused) {
-            return { borderColor: colors.primary, borderWidth: 1 };
+            return { borderColor: colors.inputBorder || colors.border, borderWidth: 1 };
         }
         if (themeName === 'dark') {
             return {

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;
@@ -100,6 +129,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
@@ -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,27 @@
+/**
+ * usePaymentSSE - React Native SSE hook for payment status tracking.
+ *
+ * Mirrors the web app's usePaymentSSE (FDWebApplication/src/hooks/usePaymentSSE.ts).
+ * Uses XMLHttpRequest instead of fetch+ReadableStream because
+ * React Native does not support ReadableStream / getReader().
+ *
+ * Backend spec:
+ *   Endpoint:  GET /events?applicationId=<id>
+ *   Events:    fd_payment_status, digilocker_verification_status
+ *   Format:    Standard SSE  →  event: fd_payment_status\ndata: {"paymentStatus":"FAILED"}\n\n
+ *
+ * Usage:
+ *   const { start, stop } = usePaymentSSE();
+ *   start(applicationId, { onPaymentStatus: (status, payload) => { ... } });
+ *   stop();
+ */
+export interface UsePaymentSSECallbacks {
+    onPaymentStatus: (status: string, payload: Record<string, unknown>) => void;
+    onDigilockerStatus?: (payload: Record<string, unknown>) => void;
+    onError?: (error: any) => void;
+    onConnected?: () => void;
+}
+export declare function usePaymentSSE(): {
+    start: (applicationId: string, callbacks: UsePaymentSSECallbacks) => void;
+    stop: () => void;
+};