@finspringinnovations/fdsdk 0.0.1

package/src/state/paymentSession.ts

@@ -0,0 +1,13 @@
+let lastPaymentUrl: string | undefined;
+let lastTransactionId: string | undefined;
+
+export function setPaymentSession(params: { paymentUrl?: string; transactionId?: string }) {
+    lastPaymentUrl = params.paymentUrl;
+    lastTransactionId = params.transactionId;
+}
+
+export function getPaymentSession() {
+    return { paymentUrl: lastPaymentUrl, transactionId: lastTransactionId };
+}
+
+

package/src/store/fdListSelectedSlice.ts

@@ -0,0 +1,42 @@
+import { createSlice, PayloadAction, createReducer } from '@reduxjs/toolkit';
+
+export interface FDListSelectedData {
+    id: string;
+    providerId: string;
+    name: string;
+    accountNumber: string;
+    roi: string;
+    tenure: string;
+    amount: number;
+    maturityDate: string;
+    status: 'active' | 'matured' | 'pending';
+    creditRating: string;
+    // Additional fields for PayNow display
+    companyName: string;
+    fdRate: string;
+    interestPayout: string;
+}
+
+const initialState: FDListSelectedData | null = null;
+
+const fdListSelectedSlice = createSlice({
+    name: 'fdListSelected',
+    initialState: initialState as any,
+    reducers: {
+        setFDListSelected: (state: any, action: PayloadAction<FDListSelectedData>) => {
+            // Replace the entire state with the new payload
+            return action.payload;
+        },
+        clearFDListSelected: (state: any) => {
+            return null;
+        },
+        updateFDListSelectedField: (state: any, action: PayloadAction<{ field: keyof FDListSelectedData; value: any }>) => {
+            if (state) {
+                state[action.payload.field] = action.payload.value;
+            }
+        },
+    },
+});
+
+export const { setFDListSelected, clearFDListSelected, updateFDListSelectedField } = fdListSelectedSlice.actions;
+export default fdListSelectedSlice.reducer;

package/src/store/hooks.ts

@@ -0,0 +1,27 @@
+import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+// ✅ These hooks automatically use the nearest Redux Provider's store
+// Since SDK screens are wrapped in ApiProvider, they will use SDK's store
+export const useAppDispatch = () => {
+    try {
+        return useDispatch<AppDispatch>();
+    } catch (error) {
+        if (__DEV__) {
+            console.error('❌ [useAppDispatch] Error: Component must be wrapped in ApiProvider', error);
+        }
+        throw error;
+    }
+};
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = (selector) => {
+    try {
+        return useSelector(selector);
+    } catch (error) {
+        if (__DEV__) {
+            console.error('❌ [useAppSelector] Error: Component must be wrapped in ApiProvider', error);
+        }
+        throw error;
+    }
+};

package/src/store/index.ts

@@ -0,0 +1,3 @@
+export { store } from './store';
+export { useAppDispatch, useAppSelector } from './hooks';
+export type { RootState, AppDispatch } from './store';

package/src/store/onboardingSlice.ts

@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface OnboardingIds {
+    workflowInstanceId?: string;
+    applicationId?: string;
+    entityid?: string;
+    customerId?: string;
+    fdId?: string;
+    providerId?: string;
+    wfStatus?: string;
+}
+
+const initialState: OnboardingIds = {};
+
+const onboardingSlice = createSlice({
+    name: 'onboarding',
+    initialState,
+    reducers: {
+        setOnboardingIds: (state, action: PayloadAction<OnboardingIds>) => {
+            const { workflowInstanceId, applicationId, entityid, customerId, fdId, providerId, wfStatus } = action.payload;
+            if (workflowInstanceId) state.workflowInstanceId = workflowInstanceId;
+            if (applicationId) state.applicationId = applicationId;
+            if (entityid) state.entityid = entityid;
+            if (customerId) state.customerId = customerId;
+            if (fdId) state.fdId = fdId;
+            if (providerId) state.providerId = providerId;
+            if (wfStatus) state.wfStatus = wfStatus;
+        },
+        clearOnboardingIds: () => initialState,
+
+    },
+});
+
+export const { setOnboardingIds, clearOnboardingIds } = onboardingSlice.actions;
+export default onboardingSlice.reducer;
+
+

package/src/store/store.ts

@@ -0,0 +1,35 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { baseApi, setSDKStoreRef } from '../api/baseApi';
+import onboardingReducer from './onboardingSlice';
+import fdListSelectedReducer from './fdListSelectedSlice';
+
+// Configure the Redux store
+export const store = configureStore({
+    reducer: {
+        // Add the generated reducer as a specific top-level slice
+        [baseApi.reducerPath]: baseApi.reducer,
+        onboarding: onboardingReducer,
+        fdListSelected: fdListSelectedReducer,
+    },
+    // Adding the api middleware enables caching, invalidation, polling,
+    // and other useful features of `rtk-query`.
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware({
+            serializableCheck: {
+                // Ignore these action types for serializable check
+                ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
+            },
+        }).concat(baseApi.middleware),
+});
+
+// ✅ FIX: Set SDK store reference in baseApi to ensure interceptor always uses SDK's store
+// This prevents conflicts when parent app also uses baseApi.middleware
+setSDKStoreRef(store);
+
+if (__DEV__) {
+    console.log('✅ [SDK Store] Store created and reference set in baseApi');
+}
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/src/theme/ThemeContext.tsx

@@ -0,0 +1,82 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { createTheme, type Theme, type ThemeName, defaultTheme } from './index';
+
+interface ThemeContextType {
+    theme: Theme;
+    themeName: ThemeName;
+    setTheme: (themeName: ThemeName) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+    children: ReactNode;
+    initialTheme?: ThemeName;
+    theme?: Theme; // Allow custom theme override
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+    children,
+    initialTheme = 'primary',
+    theme: customTheme,
+}) => {
+    const [currentThemeName, setCurrentThemeName] = React.useState<ThemeName>(initialTheme);
+
+    const theme = customTheme || createTheme(currentThemeName);
+
+    const setTheme = React.useCallback((themeName: ThemeName) => {
+        setCurrentThemeName(themeName);
+    }, []);
+
+    const value = React.useMemo(
+        () => ({
+            theme,
+            themeName: currentThemeName,
+            setTheme,
+        }),
+        [theme, currentThemeName, setTheme]
+    );
+
+    return (
+        <ThemeContext.Provider value={value}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = (): ThemeContextType => {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        // Return default theme if no provider
+        return {
+            theme: defaultTheme,
+            themeName: 'primary',
+            setTheme: () => { },
+        };
+    }
+    return context;
+};
+
+// Hook for just getting theme colors
+export const useColors = () => {
+    const { theme } = useTheme();
+    return theme.colors;
+};
+
+// Hook for getting typography
+export const useTypography = () => {
+    const { theme } = useTheme();
+    return theme.typography;
+};
+
+// Hook for getting shadows
+export const useShadows = () => {
+    const { theme } = useTheme();
+    return theme.shadows;
+};
+
+// Hook for getting spacing
+export const useSpacing = () => {
+    const { theme } = useTheme();
+    return theme.spacing;
+};

package/src/theme/colors.ts

@@ -0,0 +1,90 @@
+// Color palette for the SDK
+export const colors = {
+    // Primary Theme (Default)
+    primary: {
+        primary: '#3073e0', // Main primary color
+        tabSelected: '#3073e0',
+        headerBg: '#415fe6',
+        headerText: '#ffffff', // White header text
+        success: '#32c997', // 7.5% ap
+        textSecondary: '#8f8f8f', // ROI text
+        border: '#606677', // with 36% opacity
+        shadow: '#000000', // with 10% opacity
+
+        // Additional colors for complete theme
+        background: '#ffffff',
+        surface: '#f8f9fa',
+        text: '#1a1a1a',
+        textLight: '#6c757d',
+        error: '#dc3545',
+        warning: '#ffc107',
+        info: '#17a2b8',
+        muted: '#f0f0f0',
+        black: '#000000',
+        inputBackground: '#ffffff', // Input and box background color for primary theme
+        inputBorder: '#606677', // Input border color for primary theme
+        placeholderColor: 'rgba(0,0,0,0.2)', // Placeholder color for primary theme
+        labelColor: '#1a1a1a', // Label text color for primary theme
+        buttonBackground: '#415fe6', // Button background color for primary theme
+        buttonTextColor: '#ffffff', // Button text color for primary theme
+        cancelButtonBg: '#f8f9fa', // Cancel button background for primary theme
+    },
+
+    // Alternative themes can be added here
+    dark: {
+        primary: '#4285f4', // Main primary color
+        tabSelected: '#ffc631',
+        headerBg: '#051620',
+        headerText: '#ffffff', // White header text for dark theme
+        success: '#48bb78',
+        textSecondary: '#a0aec0',
+        border: '#154c6e',
+        shadow: '#154c6e',
+
+        background: '#000000', // Pure black background
+        surface: '#082739',
+        text: '#ffffff',
+        textLight: '#a0aec0',
+        error: '#f56565',
+        warning: '#ed8936',
+        info: '#4299e1',
+        muted: '#2a2a2a',
+        inputBackground: '#082739', // Input and box background color for dark theme
+        inputBorder: '#195C86', // Input border color for dark theme
+        placeholderColor: '#a0aec0', // Placeholder color for dark theme (light gray)
+        labelColor: '#ffffff', // Label text color for dark theme (white)
+        buttonBackground: '#ffc631', // Button background color for dark theme
+        buttonTextColor: '#000000', // Button text color for dark theme (black)
+        cancelButtonBg: '#0d3248', // Cancel button background for dark theme
+    },
+
+    corporate: {
+        primary: '#1e40af', // Main primary color
+        tabSelected: '#1e40af',
+        headerBg: '#3730a3',
+        headerText: '#ffffff', // White header text
+        success: '#059669',
+        textSecondary: '#6b7280',
+        border: '#9ca3af',
+        shadow: '#000000',
+
+        background: '#f9fafb',
+        surface: '#ffffff',
+        text: '#111827',
+        textLight: '#6b7280',
+        error: '#dc2626',
+        warning: '#d97706',
+        info: '#2563eb',
+        muted: '#e5e7eb',
+        inputBackground: '#ffffff', // Input and box background color for corporate theme
+        inputBorder: '#9ca3af', // Input border color for corporate theme
+        placeholderColor: 'rgba(0,0,0,0.2)', // Placeholder color for corporate theme
+        labelColor: '#111827', // Label text color for corporate theme
+        buttonBackground: '#3730a3', // Button background color for corporate theme
+        buttonTextColor: '#ffffff', // Button text color for corporate theme
+        cancelButtonBg: '#ffffff', // Cancel button background for corporate theme
+    },
+} as const;
+
+export type ThemeName = keyof typeof colors;
+export type ColorScheme = typeof colors[ThemeName];

package/src/theme/index.ts

@@ -0,0 +1,64 @@
+import { colors, type ThemeName, type ColorScheme } from './colors';
+import { typography } from './typography';
+import { shadows } from './shadows';
+
+// Spacing scale
+export const spacing = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    xxl: 24,
+    xxxl: 32,
+} as const;
+
+// Border radius scale
+export const borderRadius = {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+} as const;
+
+// Complete theme interface
+export interface Theme {
+    colors: ColorScheme;
+    typography: typeof typography;
+    shadows: typeof shadows;
+    spacing: typeof spacing;
+    borderRadius: typeof borderRadius;
+}
+
+// Theme factory function
+export const createTheme = (themeName: ThemeName = 'primary'): Theme => ({
+    colors: colors[themeName] as ColorScheme,
+    typography,
+    shadows,
+    spacing,
+    borderRadius,
+});
+
+// Helper function to get border with opacity
+export const getBorderColor = (theme: Theme, opacity: number = 0.36) => {
+    const hex = theme.colors.border.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+// Helper function to get shadow color with opacity
+export const getShadowColor = (opacity: number = 0.1) => {
+    return `rgba(0, 0, 0, ${opacity})`;
+};
+
+// Export everything
+export { colors, typography, shadows, type ThemeName, type ColorScheme };
+export * from './typography';
+export * from './shadows';
+
+// Default theme export
+export const defaultTheme = createTheme('primary');

package/src/theme/shadows.ts

@@ -0,0 +1,61 @@
+// Shadow configuration
+export const shadows = {
+    // Default shadow (black 10% spread)
+    default: {
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3, // Android
+    },
+
+    // Additional shadow variations
+    light: {
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 0.05,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+
+    medium: {
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 6,
+        elevation: 5,
+    },
+
+    heavy: {
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 6,
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 8,
+        elevation: 8,
+    },
+
+    card: {
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+} as const;
+
+export type ShadowType = keyof typeof shadows;

package/src/theme/typography.ts

@@ -0,0 +1,151 @@
+// Typography configuration with Poppins font
+export const typography = {
+    fontFamily: {
+        primary: 'poppins.regular',
+        medium: 'poppins.medium',
+        semiBold: 'poppins.semibold',
+        bold: 'poppins.bold',
+    },
+
+    fontSize: {
+        xxs: 8, // 8px
+        xs: 10, // 10px
+        sm: 12, // 12px
+        md: 14,
+        lg: 16,
+        xl: 18,
+        xxl: 20,
+        xxxl: 24,
+    },
+
+    fontWeight: {
+        regular: '400' as const,
+        medium: '500' as const,
+        semiBold: '600' as const,
+        bold: '700' as const,
+    },
+
+    lineHeight: {
+        tight: 1.2,
+        normal: 1.4,
+        relaxed: 1.6,
+    },
+
+    // Predefined text styles
+    styles: {
+        // Headers
+        h1: {
+            fontFamily: 'poppins.bold',
+            fontSize: 24,
+            fontWeight: '700' as const,
+            lineHeight: 32,
+        },
+        h2: {
+            fontFamily: 'poppins.semibold',
+            fontSize: 20,
+            fontWeight: '600' as const,
+            lineHeight: 28,
+        },
+        h3: {
+            fontFamily: 'poppins.medium',
+            fontSize: 16,
+            fontWeight: '500' as const,
+            lineHeight: 24,
+        },
+
+        // Body text
+        bodyLarge: {
+            fontFamily: 'poppins.regular',
+            fontSize: 16,
+            fontWeight: '400' as const,
+            lineHeight: 24,
+        },
+        bodyMedium: {
+            fontFamily: 'poppins.regular',
+            fontSize: 14,
+            fontWeight: '400' as const,
+            lineHeight: 20,
+        },
+        bodySmall: {
+            fontFamily: 'poppins.regular',
+            fontSize: 12,
+            fontWeight: '400' as const,
+            lineHeight: 16,
+        },
+
+        // Specific sizes requested
+        text14Medium: {
+            fontFamily: 'poppins.medium',
+            fontSize: 14,
+            fontWeight: '600' as const,
+            lineHeight: 12,
+        },
+        text12Regular: {
+            fontFamily: 'poppins.regular',
+            fontSize: 12,
+            fontWeight: '400' as const,
+            lineHeight: 16,
+        },
+
+        text12Medium: {
+            fontFamily: 'poppins.medium',
+            fontSize: 12,
+            fontWeight: '500' as const,
+            lineHeight: 12,
+        },
+        text11Regular: {
+            fontFamily: 'poppins.regular',
+            fontSize: 11,
+            fontWeight: '400' as const,
+            lineHeight: 11,
+        },
+        text10Regular: {
+            fontFamily: 'poppins.regular',
+            fontSize: 10,
+            fontWeight: '400' as const,
+            lineHeight: 12,
+        },
+        text10Medium: {
+            fontFamily: 'poppins.medium',
+            fontSize: 10,
+            fontWeight: '500' as const,
+            lineHeight: 14,
+        },
+        text8Regular: {
+            fontFamily: 'poppins.regular',
+            fontSize: 8,
+            fontWeight: '400' as const,
+            lineHeight: 10,
+        },
+
+        // Labels and captions
+        label: {
+            fontFamily: 'poppins.medium',
+            fontSize: 12,
+            fontWeight: '500' as const,
+            lineHeight: 16,
+        },
+        caption: {
+            fontFamily: 'poppins.regular',
+            fontSize: 10,
+            fontWeight: '400' as const,
+            lineHeight: 14,
+        },
+
+        // Buttons
+        button: {
+            fontFamily: 'poppins.medium',
+            fontSize: 16,
+            fontWeight: '500' as const,
+            lineHeight: 20,
+        },
+        buttonSmall: {
+            fontFamily: 'poppins.medium',
+            fontSize: 14,
+            fontWeight: '500' as const,
+            lineHeight: 18,
+        },
+    },
+} as const;
+
+export type TypographyStyle = keyof typeof typography.styles;

package/src/types/dataTypes.ts

@@ -0,0 +1,37 @@
+export interface InvestmentData {
+    amount?: number;
+    tenure?: string;
+    interestRate?: string;
+    interestPayout?: string;
+    companyName?: string;
+}
+
+export interface CustomerData {
+    name?: string;
+    email?: string;
+    phone?: string;
+    panNumber?: string;
+    aadhaarNumber?: string;
+    customerId?: string;
+}
+
+export interface AppData {
+    userReferenceId?: string;
+    ifsc?: string;
+    accountNo?: string;
+    nameOfBank?: string;
+    typeOfAccount?: string;
+}
+
+export interface FDData {
+    id: string;
+    providerId: string;
+    name: string;
+    accountNumber: string;
+    roi: string;
+    tenure: string;
+    amount: number;
+    maturityDate: string;
+    status: 'active' | 'matured' | 'pending';
+    creditRating: string;
+}