@finspringinnovations/fdsdk 0.0.1 → 0.0.2

package/src/screens/FDCalculator.tsx

@@ -200,16 +200,6 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
             setPayoutValue(defaultOption);
         }
     }, [payoutOptions]);
-
-    React.useEffect(() => {
-        if (amount && payoutValue) {
-            // Only call if amount is valid
-            const numericValue = parseInt(amount.replace(/,/g, ''), 10);
-            if (numericValue >= 5000 && numericValue <= 50000000 && numericValue % 1000 === 0) {
-                handleCalculateFD(amount, payoutValue);
-            }
-        }
-    }, [payoutValue]);
     // Master data processing complete
 
     // FD Calculator API
@@ -232,6 +222,17 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
     }, [interestRates]);
 
     const [tenureValue, setTenureValue] = useState<string>('');
+    
+    // Effect to recalculate when payout or tenure changes
+    React.useEffect(() => {
+        if (amount && payoutValue && tenureValue) {
+            // Only call if amount is valid
+            const numericValue = parseInt(amount.replace(/,/g, ''), 10);
+            if (numericValue >= 5000 && numericValue <= 50000000 && numericValue % 1000 === 0) {
+                handleCalculateFD(amount, payoutValue, tenureValue);
+            }
+        }
+    }, [payoutValue, tenureValue]);
     React.useEffect(() => {
         if (tenureOptions.length > 0) {
             // If effectiveFdData has tenure, use it; otherwise use first option
@@ -253,15 +254,16 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
     };
 
     // Function to call FD calculator API
-    const handleCalculateFD = React.useCallback(async (currentAmount?: string, selectedPayout?: string) => {
+    const handleCalculateFD = React.useCallback(async (currentAmount?: string, selectedPayout?: string, selectedTenure?: string) => {
         const payoutToUse = selectedPayout || payoutValue;
         const amountToUse = currentAmount || amount; // ✅ use latest if provided
+        const tenureToUse = selectedTenure || tenureValue; // ✅ use latest if provided
 
-        if (!amountToUse || !payoutToUse) return;
+        if (!amountToUse || !payoutToUse || !tenureToUse) return;
 
         try {
             const amountValue = parseFloat(amountToUse.replace(/,/g, ''));
-            const tenureMonths = parseInt(tenureValue.replace(' Months', ''));
+            const tenureMonths = parseInt(tenureToUse.replace(' Months', ''));
 
             if (isNaN(amountValue) || isNaN(tenureMonths) || amountValue <= 0 || tenureMonths <= 0) return;
 
@@ -272,7 +274,7 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
 
             const appData = getAppData();
             const userDob = appData?.dob || '1990-01-01';
-            const isWomenDepositor = appData?.gender === 'F';
+            const isWomenDepositor = appData?.gender === 'Female';
 
             const requestData = {
                 principalAmount: amountValue,
@@ -286,6 +288,7 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
 
             const result = await calculateFD(requestData).unwrap();
             setCalculationResult(result);
+            console.log(';following is the calculation result', result, 'requestData', requestData, 'appData', appData)
         } catch (error) {
             // FD calculation failed
         } finally {
@@ -326,10 +329,10 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
 
         // Step 7: Debounced API call
         const isValidLocal = numericValue >= 5000 && numericValue <= 50000000 && numericValue % 1000 === 0;
-        if (cleanedText && isValidLocal && payoutValue) {
+        if (cleanedText && isValidLocal && payoutValue && tenureValue) {
             const newTimer = setTimeout(() => {
-                // Pass latest cleanedText directly to avoid stale state
-                handleCalculateFD(cleanedText);
+                // Pass latest values directly to avoid stale state
+                handleCalculateFD(cleanedText, payoutValue, tenureValue);
             }, 1000);
             setDebounceTimer(newTimer);
         }
@@ -591,19 +594,18 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
         <SafeAreaWrapper
             includeTop={false}
             bottomPadding={25}
-            statusBarColor="#000000"
-            statusBarStyle="light-content"
+            statusBarColor={colors.background}
+            statusBarStyle={themeName === 'dark' ? 'light-content' : 'dark-content'}
         >
             {/* Header */}
             <View style={styles.header}>
                 <TouchableOpacity onPress={() => navigate('FDList')} style={styles.backButton}>
                     <Image
                         source={{ uri: base64Images.backArrow }}
-                        style={[styles.backIcon, { tintColor: themeName === 'dark' ? colors.headerText : undefined }]}
+                        style={[styles.backIcon, { tintColor: colors.text }]}
                         resizeMode="contain"
                         width={24}
                         height={24}
-
                     />
                 </TouchableOpacity>
             </View>
@@ -656,8 +658,8 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
                                     onPress={() => {
                                         setTenureValue(option);
                                         setShowTenureMenu(false);
-                                        // Call API after dropdown value changes
-                                        setTimeout(() => handleCalculateFD(), 100);
+                                        // Call API with the new tenure value directly to avoid closure issues
+                                        setTimeout(() => handleCalculateFD(amount, payoutValue, option), 100);
                                     }}
                                 >
                                     <Text style={styles.modalOptionText}>{option}</Text>
@@ -688,9 +690,8 @@ const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToRevie
                                         onPress={() => {
                                             setPayoutValue(option);
                                             setShowPayoutModal(false);
-                                            handleCalculateFD(amount, option);
-                                            // Pass the selected option directly to avoid stale state
-                                            // setTimeout(() => handleCalculateFD(option), 100);
+                                            // Pass all values directly to avoid stale state
+                                            handleCalculateFD(amount, option, tenureValue);
                                         }}
                                     >
                                         <Text style={styles.modalOptionText}>{option}</Text>
@@ -893,34 +894,32 @@ const createStyles = (typography: any, colors: any, themeName: string) => StyleS
         position: 'relative',
     },
     startButton: {
-        backgroundColor: themeName === 'dark' ? colors.buttonBackground : colors.headerBg,
-        paddingVertical: themeName === 'dark' ? 1 : 20,
+        backgroundColor: colors.buttonBackground || colors.headerBg,
+        paddingVertical: 20,
         paddingHorizontal: 20,
-        borderRadius: themeName === 'dark' ? 10 : 30,
+        borderRadius: 30,
         marginTop: 30,
         alignItems: 'center',
         justifyContent: 'center',
-        height: themeName === 'dark' ? 50 : 56,
+        height: 56,
         width: '90%',
         alignSelf: 'center',
     },
     startButtonDisabled: {
-        backgroundColor: '#909090',
-        color: '#ffffff',
+        backgroundColor: colors.muted || '#909090',
     },
     startButtonText: {
         ...typography.styles.button,
-        color: themeName === 'dark' ? colors.buttonTextColor : colors.background,
-        lineHeight: themeName === 'dark' ? 24 : typography.styles.button.lineHeight,
+        color: colors.buttonTextColor || colors.background,
         fontSize: 16,
     },
     startButtonTextDisabled: {
-        color: themeName === 'dark' ? "#ffffff" : colors.tabSelected,
+        color: colors.textSecondary,
     },
     inlineMenu: {
-        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.background,
-        borderWidth: themeName === 'dark' ? 1 : 0.5,
-        borderColor: themeName === 'dark' ? '#ffffff' : 'rgba(0,0,0,0.2)',
+        backgroundColor: colors.inputBackground || colors.background,
+        borderWidth: 0.5,
+        borderColor: colors.inputBorder || colors.border,
         borderRadius: 8,
         marginTop: 6,
         paddingHorizontal: 12,

package/src/screens/FDList.tsx

@@ -888,7 +888,7 @@ const FDList: React.FC<FDListProps> = ({
             <SafeAreaWrapper
                 style={customStyles.container}
                 includeTop={false}
-                statusBarColor="#000000"
+                statusBarColor={colors.headerBg}
                 statusBarStyle="light-content"
             >
                 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -903,7 +903,7 @@ const FDList: React.FC<FDListProps> = ({
         <SafeAreaWrapper
             style={customStyles.container}
             includeTop={false}
-            statusBarColor="#0A1929"
+            statusBarColor={colors.headerBg}
             statusBarStyle="light-content"
         >
             {/* Custom FDList Header */}
@@ -923,12 +923,12 @@ const FDList: React.FC<FDListProps> = ({
                 <View style={styles.headerContent}>
                     <Text style={styles.headerTitle}>{FD_STRINGS.CORPORATE_FDS_TITLE}</Text>
                     <View style={styles.poweredByContainer}>
-                        <Text style={styles.poweredByText}>Powered by</Text>
+                        {/* <Text style={styles.poweredByText}>Powered by</Text>
                         <Image
                             source={{ uri: base64Images.simplfylogo }}
                             style={styles.simplifyLogo}
                             resizeMode="contain"
-                        />
+                        /> */}
                     </View>
                 </View>
             </View>
@@ -1105,7 +1105,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
         backgroundColor: colors.surface,
     },
     customHeader: {
-        backgroundColor: '#0A1929',
+        backgroundColor: colors.headerBg,
         paddingTop: Platform.OS === 'ios' ? 50 : 20,
         paddingBottom: spacing.md,
         paddingHorizontal: spacing.lg,
@@ -1121,7 +1121,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     backIcon: {
         width: 24,
         height: 24,
-        tintColor: '#FFFFFF',
+        tintColor: colors.headerText,
     },
     headerContent: {
         flex: 1,
@@ -1130,7 +1130,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     headerTitle: {
         ...typography.styles.h3,
-        color: '#FFFFFF',
+        color: colors.headerText,
         marginBottom: spacing.xs,
     },
     poweredByContainer: {
@@ -1139,7 +1139,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     poweredByText: {
         ...typography.styles.text10Regular,
-        color: '#FFFFFF',
+        color: colors.headerText,
         opacity: 0.7,
         marginRight: 0,
     },
@@ -1175,14 +1175,14 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
         paddingVertical: spacing.md,
         marginHorizontal: 2,
         borderBottomWidth: 3,
-        borderBottomColor: 'white',
+        borderBottomColor: colors.surface,
         borderBottomLeftRadius: 8,
         borderBottomRightRadius: 8,
         backgroundColor: 'transparent',
     },
     activeTab: {
         borderBottomColor: colors.tabSelected,
-        backgroundColor: themeName === 'dark' ? '#000000' : '#fff',
+        backgroundColor: colors.background,
         borderBottomLeftRadius: 12,
         borderBottomRightRadius: 12,
     },
@@ -1276,7 +1276,7 @@ const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeN
     },
     showAllButtonText: {
         ...typography.styles.text14Medium,
-        color: '#ffffff', // Use white color directly
+        color: colors.headerText, // Use theme header text color
         textAlign: 'center',
     },
 });

package/src/screens/NomineeDetail.tsx

@@ -140,7 +140,8 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                 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);
                     }
@@ -286,7 +287,8 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
 
                 // 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);
                     } else {
@@ -320,12 +322,14 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
         if (Platform.OS === 'android') {
             // Android fires with types: 'set' and 'dismissed'
             if (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--;
                 }
 
@@ -336,9 +340,9 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                     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();
@@ -353,10 +357,12 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
 
         // 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);
         }
@@ -393,7 +399,7 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                         setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
                     }}
                     placeholder={placeholderText}
-                    placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,32,34,0.2)'}
+                    placeholderColor={colors.placeholderColor || 'rgba(0,0,0,0.2)'}
                 />
                 {openMenus[menuKey] && (
                     <View style={styles.inlineMenu}>
@@ -438,7 +444,7 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                                 updateField('customRelationship' as any, lettersOnly);
                             }}
                             placeholder={'Enter Custom Relationship'}
-                            placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+                            placeholderColor={colors.placeholderColor || 'rgba(0,0,0,0.2)'}
                             variant="text"
                         />
                         {fieldErrors.customRelationship ? (
@@ -470,7 +476,7 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                         onFocus={() => { closeAllMenus(); }}
                         textInputRef={nomineeNameRef}
                         placeholder={NOMINEE_STRINGS.NOMINEE_NAME_PLACEHOLDER}
-                        placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+                        placeholderColor={colors.placeholderColor || 'rgba(0,0,0,0.2)'}
                         variant="text"
                     />
                 </View>
@@ -489,7 +495,7 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
             onChangeText={(text) => updateField(field, text)}
             variant="date"
             placeholder="DD/MM/YYYY"
-            placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+            placeholderColor={colors.placeholderColor || 'rgba(0,0,0,0.2)'}
             maxLength={10}
             dateFormat="DD/MM/YYYY"
             onDatePress={() => {
@@ -499,7 +505,7 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
             }}
             editable={false}
             keepWhiteBackground={true}
-            inputStyle={{ color: 'white' }}
+            inputStyle={{ color: colors.text }}
         />
     );
 
@@ -679,6 +685,7 @@ const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initial
                                                 mode="date"
                                                 display={Platform.OS === 'ios' ? 'spinner' : 'default'}
                                                 onChange={onDateChange}
+                                                minimumDate={new Date(1900, 0, 1)}  // January 1, 1900
                                                 maximumDate={new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate())}
                                                 themeVariant="light"
                                             />
@@ -764,7 +771,7 @@ const createStyles = (colors: any, typography: any, themeName: string) => StyleS
     titleField: { width: 80 },
     nameField: { flex: 1 },
     datePickerContainer: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: colors.background,
         borderRadius: 12,
         padding: 16,
         marginBottom: 20,
@@ -772,12 +779,12 @@ const createStyles = (colors: any, typography: any, themeName: string) => StyleS
     },
     checkboxContainer: { flexDirection: 'row', alignItems: 'flex-start', marginBottom: 40, paddingHorizontal: 4, marginTop: 16 },
     checkbox: { marginRight: 12, marginTop: 2 },
-    checkboxBox: { width: 20, height: 20, borderWidth: 2, borderColor: themeName === 'dark' ? colors.tabSelected : colors.primary, borderRadius: 4, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' },
+    checkboxBox: { width: 20, height: 20, borderWidth: 2, borderColor: colors.inputBorder || colors.border, borderRadius: 4, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.background },
     checkboxChecked: {
         //  backgroundColor: colors.primary
     },
     checkboxText: { ...typography.styles.bodySmall, color: colors.textLight, flex: 1, lineHeight: 18 },
-    inlineMenu: { backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.background, borderWidth: themeName === 'dark' ? 1 : 0.5, borderColor: themeName === 'dark' ? '#ffffff' : 'rgba(0,0,0,0.2)', borderRadius: 8, marginTop: -20, marginBottom: 10, paddingHorizontal: 12, paddingVertical: 6 },
+    inlineMenu: { backgroundColor: colors.inputBackground || colors.background, borderWidth: 0.5, borderColor: colors.inputBorder || colors.border, borderRadius: 8, marginTop: -20, marginBottom: 10, paddingHorizontal: 12, paddingVertical: 6 },
     modalOption: { paddingVertical: 14 },
     modalOptionText: { ...typography.styles.bodyLarge, color: colors.text },
     // Added to fix TS error where these styles are referenced above

package/src/screens/PayNow.tsx

@@ -166,8 +166,8 @@ const PayNow: React.FC<PayNowProps> = ({ onGoBack, onConfirm, fdData }) => {
         <SafeAreaWrapper
             includeTop={false}
             bottomPadding={25}
-            statusBarColor="#000000"
-            statusBarStyle="light-content"
+            statusBarColor={colors.background}
+            statusBarStyle={themeName === 'dark' ? 'light-content' : 'dark-content'}
         >
             <View style={styles.container}>
                 <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
@@ -243,13 +243,13 @@ const createStyles = (colors: any, typography: any, themeName: string) => StyleS
     },
     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,