@finspringinnovations/fdsdk 0.0.1

package/src/screens/FDCalculator.tsx

@@ -0,0 +1,987 @@
+// FDCalculator.tsx
+import React, { useState, useEffect } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    ScrollView,
+    ActivityIndicator,
+    Image,
+    Platform,
+    BackHandler,
+    Keyboard,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import {
+    CompanyHeader,
+    AmountInput,
+    DropdownSelector,
+    InterestRateCard,
+    CheckboxOption,
+    InfoBox,
+    TrustBox,
+    FAQItem,
+} from '../components';
+import { useTypography, useColors, useTheme } from '../theme/ThemeContext';
+import { useMasterData } from '../providers/MasterDataProvider';
+import { useCalculateFDMutation } from '../api/fdCalculatorApi';
+import { useGetInterestRatesMutation } from '../api/interestRateApi';
+import { useStartOnboardingMutation } from '../api/onboardingApi';
+import { useGetMasterDataQuery } from '../api/masterDataApi';
+import { getAppData } from '../config/appDataConfig';
+import { useAppSelector, useAppDispatch } from '../store';
+// import { setFDCalculationData } from '../store/fdCalculationSlice';
+import { setFDListSelected } from '../store/fdListSelectedSlice';
+import { navigate } from '../navigation/helpers';
+import { COMMON_STRINGS, FD_STRINGS, FAQ_STRINGS } from '../constants/strings';
+import { base64Images } from '../constants/strings/base64Images';
+
+export interface FDCalculatorProps {
+    onGoBack?: () => void;
+    onNavigateToReviewKYC?: () => void;
+    fdData?: {
+        id: string;
+        name: string;
+        accountNumber: string;
+        roi: string;
+        tenure: string;
+        amount: number;
+        maturityDate: string;
+        status: 'active' | 'matured' | 'pending';
+        creditRating: string;
+    };
+}
+
+const FDCalculator: React.FC<FDCalculatorProps> = ({ onGoBack, onNavigateToReviewKYC, fdData }) => {
+    const typography = useTypography();
+    const colors = useColors();
+    const { themeName } = useTheme();
+    const styles = React.useMemo(() => createStyles(typography, colors, themeName), [typography, colors, themeName]);
+    const { masterData, setMasterData } = useMasterData();
+
+    // Get FD data from Redux as fallback if not passed as props
+    const fdListSelectedData = useAppSelector((state: any) => state?.fdListSelected);
+    const effectiveFdData = fdData || fdListSelectedData;
+
+
+    const [amount, setAmount] = useState('');
+    const [seniorCitizen, setSeniorCitizen] = useState(false);
+    const [taxResident, setTaxResident] = useState(true);
+    const [autoRenewal, setAutoRenewal] = useState(false);
+    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+    const [calculationResult, setCalculationResult] = useState<any>(null);
+    const [debounceTimer, setDebounceTimer] = useState<NodeJS.Timeout | null>(null);
+    const [amountError, setAmountError] = useState<string>('');
+    const [taxResidentError, setTaxResidentError] = useState<string>('');
+    const [isAmountEditing, setIsAmountEditing] = useState<boolean>(false);
+
+    // Calculate age from DOB and set senior citizen status
+    const calculateAgeAndSetSeniorCitizen = React.useCallback((dob: string) => {
+        if (!dob) return;
+
+        const today = new Date();
+        const birthDate = new Date(dob);
+        let age = today.getFullYear() - birthDate.getFullYear();
+        const monthDiff = today.getMonth() - birthDate.getMonth();
+
+        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+            age--;
+        }
+
+        setSeniorCitizen(age >= 60);
+    }, []);
+
+    // Interest payout dropdown state - will be updated after master data is loaded
+    const [payoutValue, setPayoutValue] = useState<string>('');
+    const [showPayoutModal, setShowPayoutModal] = useState<boolean>(false);
+
+    // Map dropdown values to API values
+    const mapPayoutToAPI = (dropdownValue: string): string => {
+        const mapping: { [key: string]: string } = {
+            'On Maturity': 'On Maturity',
+            'Monthly': 'Monthly',
+            'Quarterly': 'Quarterly',
+            'Yearly': 'Yearly',
+            'Half-Yearly': 'Half-Yearly',
+        };
+        return mapping[dropdownValue] || '';
+    };
+
+    // Check senior citizen status on component mount
+    React.useEffect(() => {
+        try {
+            const appData = getAppData();
+            if (appData?.dob) {
+                calculateAgeAndSetSeniorCitizen(appData.dob);
+            }
+        } catch (error) {
+            // Handle error silently
+        }
+    }, [calculateAgeAndSetSeniorCitizen]);
+
+    // Interest rates for Tenure options (real API)
+    const [getInterestRates, { data: interestRates }] = useGetInterestRatesMutation();
+    React.useEffect(() => {
+        try {
+            getInterestRates({});
+        } catch (e) {
+            // Handle error silently
+        }
+    }, [getInterestRates]);
+
+    // Fallback: Load master data if not available from global state
+    const defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+    // Default Shriram provider ID
+
+    const { data: fallbackMasterData, isLoading: isLoadingFallback, error: fallbackError, refetch: refetchMasterData } = useGetMasterDataQuery(
+        { providerId: defaultProviderId }, // Use default provider ID
+        { skip: !!masterData } // Skip if master data is already available
+    );
+
+    // Use fallback master data if global master data is not available
+    // Store only the data parameter after stringifying instead of complete response
+    const effectiveMasterData = React.useMemo(() => {
+        const sourceData = masterData || fallbackMasterData;
+        if (!sourceData) return null;
+
+        // If sourceData has a data property, extract and stringify it
+        if (sourceData.data) {
+            return JSON.stringify(sourceData.data);
+        }
+
+        // If sourceData is already the data object, stringify it
+        return JSON.stringify(sourceData);
+    }, [masterData, fallbackMasterData]);
+
+    // Default payout options as fallback
+    //  const defaultPayoutOptions = ['Maturity', 'Monthly eee', 'Quarterly', 'Half-Yearly', 'Yearly'];
+
+    const payoutOptions: string[] = React.useMemo(() => {
+        try {
+            const parsedData = JSON.parse(effectiveMasterData || '{}');
+            // If master data gives a single value instead of an array
+            const rawValue = parsedData?.interestPayoutTerm;
+
+            if (!rawValue) return [];
+
+            // Handle both array and string types
+            if (Array.isArray(rawValue)) {
+                return rawValue;
+            }
+
+            // If it's a comma-separated string or a single string
+            if (typeof rawValue === 'string') {
+                // e.g. "Maturity,Monthly,Quarterly" → ['Maturity', 'Monthly', 'Quarterly']
+                return rawValue.split(',').map(v => v.trim());
+            }
+
+            return [];
+        } catch (error) {
+            return [];
+        }
+    }, [effectiveMasterData]);
+
+    // Store fallback master data in global state if it becomes available
+    React.useEffect(() => {
+        if (fallbackMasterData && !masterData) {
+            setMasterData(fallbackMasterData);
+        }
+    }, [fallbackMasterData, masterData, setMasterData]);
+
+
+
+    // Update payout value when master data becomes available
+    React.useEffect(() => {
+        if (payoutOptions.length > 0 && !payoutValue) {
+            // Set "On Maturity" as default if available, otherwise use first option
+            const defaultOption = payoutOptions.find(option => option === 'On Maturity') || payoutOptions[0];
+            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
+    const [calculateFD, { isLoading: isCalculating }] = useCalculateFDMutation();
+
+    // Onboarding API
+    const [startOnboarding, { isLoading: isOnboarding }] = useStartOnboardingMutation();
+    const [isBooking, setIsBooking] = React.useState(false);
+    const dispatch = useAppDispatch();
+    const { setOnboardingIds } = require('../store/onboardingSlice');
+
+    const tenureOptions: string[] = React.useMemo(() => {
+        const months: number[] = [];
+        const sdr = interestRates?.data?.sdrScheme || [];
+        const fdr = interestRates?.data?.fdrScheme || [];
+        sdr.forEach((r: any) => { if (typeof r?.perdMonth === 'number') months.push(r.perdMonth); });
+        fdr.forEach((r: any) => { if (typeof r?.perdMonth === 'number') months.push(r.perdMonth); });
+        const unique = Array.from(new Set(months)).sort((a, b) => a - b);
+        return unique.map(m => `${m} Months`);
+    }, [interestRates]);
+
+    const [tenureValue, setTenureValue] = useState<string>('');
+    React.useEffect(() => {
+        if (tenureOptions.length > 0) {
+            // If effectiveFdData has tenure, use it; otherwise use first option
+            if (effectiveFdData?.tenure) {
+                // Check if the effectiveFdData tenure exists in tenureOptions
+                const matchingTenure = tenureOptions.find(option => option === effectiveFdData.tenure);
+                setTenureValue(matchingTenure || effectiveFdData.tenure);
+            } else {
+                setTenureValue(tenureOptions[0]);
+            }
+        }
+    }, [tenureOptions, effectiveFdData?.tenure]);
+    const [showTenureMenu, setShowTenureMenu] = useState<boolean>(false);
+
+    // Function to close all dropdown menus
+    const closeAllMenus = () => {
+        setShowTenureMenu(false);
+        setShowPayoutModal(false);
+    };
+
+    // Function to call FD calculator API
+    const handleCalculateFD = React.useCallback(async (currentAmount?: string, selectedPayout?: string) => {
+        const payoutToUse = selectedPayout || payoutValue;
+        const amountToUse = currentAmount || amount; // ✅ use latest if provided
+
+        if (!amountToUse || !payoutToUse) return;
+
+        try {
+            const amountValue = parseFloat(amountToUse.replace(/,/g, ''));
+            const tenureMonths = parseInt(tenureValue.replace(' Months', ''));
+
+            if (isNaN(amountValue) || isNaN(tenureMonths) || amountValue <= 0 || tenureMonths <= 0) return;
+
+            const sdr = interestRates?.data?.sdrScheme || [];
+            const fdr = interestRates?.data?.fdrScheme || [];
+            const firstRate = sdr[0] || fdr[0];
+            const providerId = firstRate?.providerId;
+
+            const appData = getAppData();
+            const userDob = appData?.dob || '1990-01-01';
+            const isWomenDepositor = appData?.gender === 'F';
+
+            const requestData = {
+                principalAmount: amountValue,
+                tenureInMonths: tenureMonths,
+                dob: userDob,
+                isWomenDepositor,
+                investmentType: payoutToUse === 'On Maturity' ? 'SDR' : 'FDR',
+                providerId,
+                interestPayout: payoutToUse,
+            };
+
+            const result = await calculateFD(requestData).unwrap();
+            setCalculationResult(result);
+        } catch (error) {
+            // FD calculation failed
+        } finally {
+            setIsAmountEditing(false);
+        }
+    }, [amount, tenureValue, payoutValue, calculateFD, interestRates]);
+
+    // Debounced amount change handler
+    const handleAmountChange = React.useCallback((text: string) => {
+        setIsAmountEditing(true);
+        // Step 1: Always remove commas first
+        const unformatted = text.replace(/,/g, '');
+
+        // Step 2: Allow only numbers
+        let cleanedText = unformatted.replace(/[^0-9]/g, '');
+        if (cleanedText.length > 1 && cleanedText.startsWith('0')) {
+            cleanedText = cleanedText.replace(/^0+/, '');
+        }
+
+        // Step 3: Stop if greater than 5 crores
+        const numericValue = parseInt(cleanedText || '0', 10);
+        if (numericValue > 50000000) return;
+
+        // Step 4: Update state with raw digits (not formatted)
+        setAmount(cleanedText);
+
+        // Step 5: Validate
+        if (!cleanedText) {
+            setAmountError('');
+            setIsAmountEditing(false);
+        }
+        else if (numericValue < 5000) setAmountError(FD_STRINGS.MINIMUM_AMOUNT_ERROR);
+        else if (numericValue % 1000 !== 0) setAmountError(FD_STRINGS.AMOUNT_MULTIPLES_ERROR);
+        else setAmountError('');
+
+        // Step 6: Clear previous debounce timer
+        if (debounceTimer) clearTimeout(debounceTimer);
+
+        // Step 7: Debounced API call
+        const isValidLocal = numericValue >= 5000 && numericValue <= 50000000 && numericValue % 1000 === 0;
+        if (cleanedText && isValidLocal && payoutValue) {
+            const newTimer = setTimeout(() => {
+                // Pass latest cleanedText directly to avoid stale state
+                handleCalculateFD(cleanedText);
+            }, 1000);
+            setDebounceTimer(newTimer);
+        }
+    }, [debounceTimer, handleCalculateFD, payoutValue]);
+
+    // Function to call onboarding API
+    const handleStartOnboarding = React.useCallback(async (selectedPayout?: string) => {
+        if (isBooking) return;
+        setIsBooking(true);
+        const payoutToUse = selectedPayout || payoutValue;
+        try {
+            // Check if required fields are filled
+            if (!amount || !tenureValue) {
+                return;
+            }
+
+            const amountValue = parseFloat(amount.replace(/,/g, ''));
+            const tenureMonths = parseInt(tenureValue.replace(' Months', ''));
+
+            if (isNaN(amountValue) || isNaN(tenureMonths) || amountValue <= 0 || tenureMonths <= 0) {
+                return;
+            }
+
+            // Check minimum amount requirement
+            if (amountValue < 5000) {
+                return;
+            }
+
+            // Get providerId from interest rates data
+            const sdr = interestRates?.data?.sdrScheme || [];
+            const fdr = interestRates?.data?.fdrScheme || [];
+            const firstRate = sdr[0] || fdr[0];
+            const providerId = firstRate?.providerId;
+
+            // Get user data for all required fields
+            const appData = getAppData();
+            const userDob = appData?.dob || '1990-01-01';
+            const isWomenDepositor = appData?.gender === 'F';
+
+            // Get calculated values from API response based on investment type
+            const investmentType = payoutValue === 'On Maturity' ? 'SDR' : 'FDR';
+            const calcData = investmentType === 'SDR'
+                ? calculationResult?.data?.sdrCalc?.[0]
+                : calculationResult?.data?.fdrCalc?.[0];
+            const interestRate = calcData?.wRoi;
+            const maturityAmount = calcData?.maturityAmount;
+
+            // Calculate maturity date
+            const maturityDate = new Date();
+            maturityDate.setMonth(maturityDate.getMonth() + tenureMonths);
+            const formattedMaturityDate = maturityDate.toISOString().split('T')[0];
+
+            const onboardingData = {
+                // User personal details
+                mobile: appData?.mobNo || '',
+                prefix: appData?.gender === 'M' ? 'Mr.' : (appData?.gender === 'F' ? 'Ms.' : 'Mr.'),
+                fullName: appData?.name || '',
+                firstName: appData?.name?.split(' ')[0] || '',
+                lastName: appData?.name?.split(' ').slice(1).join(' ') || '',
+                userReferenceId: appData?.id || '',
+                dob: userDob,
+                email: appData?.email || '',
+                gender: appData?.gender === 'M' ? 'Male' : (appData?.gender === 'F' ? 'Female' : 'Male'),
+
+                // FD details
+                autoRenewal: autoRenewal,
+                investmentAmount: amountValue,
+                tenureInMonths: tenureMonths,
+                interestPayoutTerm: payoutToUse,
+                interestRate: interestRate,
+                maturityDate: formattedMaturityDate,
+                maturityAmount: Math.round(maturityAmount),
+
+                // Additional fields
+                principalAmount: amountValue,
+                isWomenDepositor: isWomenDepositor,
+                investmentType: payoutToUse === 'On Maturity' ? 'SDR' : 'FDR',
+                providerId: providerId,
+                eventNotifyUrl: appData?.eventNotifyUrl,
+            };
+
+            const result = await startOnboarding(onboardingData).unwrap();
+
+            // Store FD calculation data directly into FDListSelected for PayNow screen
+            try {
+                const fdListSelectedData = {
+                    id: effectiveFdData?.id || '',
+                    providerId: providerId || '',
+                    name: effectiveFdData?.name || '',
+                    accountNumber: '',
+                    roi: effectiveFdData?.roi || '',
+                    tenure: tenureValue,
+                    amount: parseInt(amount) || 0,
+                    maturityDate: '',
+                    status: 'pending' as const,
+                    creditRating: effectiveFdData?.creditRating || 'NA',
+                    companyName: effectiveFdData?.name || '',
+                    fdRate: effectiveFdData?.roi || '',
+                    interestPayout: payoutToUse,
+                };
+                dispatch(setFDListSelected(fdListSelectedData as any));
+            } catch (e) {
+                // Handle error silently
+            }
+
+            // Persist onboarding identifiers globally for subsequent API calls
+            try {
+                const ids = {
+                    workflowInstanceId: result?.data?.workflowInstanceId,
+                    applicationId: result?.data?.applicationId,
+                    entityid: result?.data?.entityid,
+                    customerId: result?.data?.customerId,
+                    fdId: result?.data?.fdId,
+                };
+                if (dispatch && setOnboardingIds) {
+                    dispatch(setOnboardingIds(ids));
+                } else {
+                    // Dispatch or setOnboardingIds unavailable
+                }
+            } catch (e) {
+                // Handle error silently
+            }
+
+            // Navigate to ReviewKYC after successful onboarding
+            if (result.status === 'success' && onNavigateToReviewKYC) {
+                onNavigateToReviewKYC();
+            }
+        } catch (error) {
+            // Handle error silently
+        } finally {
+            setIsBooking(false);
+        }
+    }, [amount, tenureValue, interestRates, startOnboarding, onNavigateToReviewKYC, isBooking, payoutValue, calculationResult, autoRenewal]);
+
+    // Cleanup timer on unmount
+    React.useEffect(() => {
+        return () => {
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+            }
+        };
+    }, [debounceTimer]);
+
+    // Derived validation state for amount input
+    const isAmountValid = React.useMemo(() => {
+        const amountValue = parseFloat(amount.replace(/,/g, ''));
+        return !!amount && !isNaN(amountValue) && amountValue >= 5000 && amountValue <= 50000000 && amountValue % 1000 === 0;
+    }, [amount]);
+
+    // Derived validation state for payout selection
+    const isPayoutValid = React.useMemo(() => {
+        return !!payoutValue && payoutValue.trim() !== '';
+    }, [payoutValue]);
+
+    // Handle tax resident checkbox change
+    const handleTaxResidentChange = () => {
+        const newValue = !taxResident;
+        setTaxResident(newValue);
+
+        // Show error if unchecked
+        if (!newValue) {
+            setTaxResidentError(FD_STRINGS.TAX_RESIDENT_ERROR);
+        } else {
+            setTaxResidentError('');
+        }
+    };
+
+    // Extract FAQ data from master data API response
+    const faqData: { title: string; description: string }[] = React.useMemo(() => {
+        try {
+            const parsedData = JSON.parse(effectiveMasterData || '{}');
+
+            // Check if master data contains FAQ information (exact field name from API response)
+            const masterDataFaq = parsedData?.Faq || parsedData?.faq || parsedData?.faqData || parsedData?.frequentlyAskedQuestions;
+
+            if (masterDataFaq && Array.isArray(masterDataFaq) && masterDataFaq.length > 0) {
+                return masterDataFaq.map((faq: any) => ({
+                    title: faq.title || faq.question || faq.q || '',
+                    description: faq.description || faq.answer || faq.a || ''
+                })).filter((faq: any) => faq.title && faq.description);
+            }
+
+            // Fallback to hardcoded FAQ strings if master data doesn't contain FAQ
+            return [
+                {
+                    title: FAQ_STRINGS.FAQ_WITHDRAWAL_QUESTION,
+                    description: FAQ_STRINGS.FAQ_WITHDRAWAL_ANSWER,
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_CREDIT_QUESTION,
+                    description: FAQ_STRINGS.FAQ_CREDIT_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_TAX_EXEMPTION_QUESTION,
+                    description: FAQ_STRINGS.FAQ_TAX_EXEMPTION_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_CUMULATIVE_QUESTION,
+                    description: FAQ_STRINGS.FAQ_CUMULATIVE_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_OPENING_TIME_QUESTION,
+                    description: FAQ_STRINGS.FAQ_OPENING_TIME_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_TDS_AVOIDANCE_QUESTION,
+                    description: FAQ_STRINGS.FAQ_TDS_AVOIDANCE_ANSWER
+                },
+            ];
+        } catch (error) {
+            // Return fallback FAQ data on error
+            return [
+                {
+                    title: FAQ_STRINGS.FAQ_WITHDRAWAL_QUESTION,
+                    description: FAQ_STRINGS.FAQ_WITHDRAWAL_ANSWER,
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_CREDIT_QUESTION,
+                    description: FAQ_STRINGS.FAQ_CREDIT_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_TAX_EXEMPTION_QUESTION,
+                    description: FAQ_STRINGS.FAQ_TAX_EXEMPTION_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_CUMULATIVE_QUESTION,
+                    description: FAQ_STRINGS.FAQ_CUMULATIVE_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_OPENING_TIME_QUESTION,
+                    description: FAQ_STRINGS.FAQ_OPENING_TIME_ANSWER
+                },
+                {
+                    title: FAQ_STRINGS.FAQ_TDS_AVOIDANCE_QUESTION,
+                    description: FAQ_STRINGS.FAQ_TDS_AVOIDANCE_ANSWER
+                },
+            ];
+        }
+    }, [effectiveMasterData]);
+
+    // Handle Android hardware back button - use same navigation as header back button
+    useEffect(() => {
+        if (Platform.OS !== 'android') return;
+
+        const onHardwareBackPress = () => {
+            navigate('FDList'); // Same as header back button
+            return true; // Prevent default behavior
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            'hardwareBackPress',
+            onHardwareBackPress
+        );
+
+        return () => backHandler.remove();
+    }, []);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={false}
+            bottomPadding={25}
+            statusBarColor="#000000"
+            statusBarStyle="light-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 }]}
+                        resizeMode="contain"
+                        width={24}
+                        height={24}
+
+                    />
+                </TouchableOpacity>
+            </View>
+
+            <View style={{ flex: 1, justifyContent: 'space-between' }}>
+                <ScrollView
+                    style={styles.scrollContainer}
+                    contentContainerStyle={styles.scrollContent}
+                    showsVerticalScrollIndicator={false}
+                    onScrollBeginDrag={closeAllMenus}
+                    scrollEnabled={!(isOnboarding || isBooking)}
+                    keyboardShouldPersistTaps="handled"
+                    bounces={true}
+                    alwaysBounceVertical={true}
+                >
+                    {/* Company Header */}
+                    <CompanyHeader
+                        companyName={effectiveFdData?.name || ''}
+                        rating={effectiveFdData?.creditRating || 'AA+'}
+                    />
+
+                    {/* Amount Input */}
+                    <AmountInput
+                        label={FD_STRINGS.INVESTMENT_AMOUNT_LABEL}
+                        value={amount}
+                        onChangeText={handleAmountChange}
+                        onFocus={closeAllMenus}
+                        placeholder={FD_STRINGS.AMOUNT_PLACEHOLDER}
+                        noteText={FD_STRINGS.AMOUNT_NOTE}
+                        minMaxText={FD_STRINGS.AMOUNT_MIN_MAX}
+                        errorMessage={amountError}
+                    />
+
+                    {/* Tenure Selector */}
+                    <DropdownSelector
+                        label={FD_STRINGS.TENURE_LABEL}
+                        value={tenureValue || COMMON_STRINGS.SELECT}
+                        onPress={() => {
+                            Keyboard.dismiss();
+                            closeAllMenus();
+                            setShowTenureMenu(prev => !prev);
+                        }}
+                    />
+                    {showTenureMenu && (
+                        <View style={styles.inlineMenu}>
+                            {(tenureOptions.length > 0 ? tenureOptions : [FD_STRINGS.TENURE_12_MONTHS, FD_STRINGS.TENURE_24_MONTHS, FD_STRINGS.TENURE_36_MONTHS]).map((option) => (
+                                <TouchableOpacity
+                                    key={option}
+                                    style={styles.modalOption}
+                                    onPress={() => {
+                                        setTenureValue(option);
+                                        setShowTenureMenu(false);
+                                        // Call API after dropdown value changes
+                                        setTimeout(() => handleCalculateFD(), 100);
+                                    }}
+                                >
+                                    <Text style={styles.modalOptionText}>{option}</Text>
+                                </TouchableOpacity>
+                            ))}
+                        </View>
+                    )}
+
+                    {/* Interest Payout Selector */}
+                    <DropdownSelector
+                        label={FD_STRINGS.INTEREST_PAYOUT_TERM_LABEL}
+                        value={payoutValue}
+                        onPress={() => {
+                            Keyboard.dismiss();
+                            closeAllMenus();
+                            setShowPayoutModal(prev => !prev);
+                        }}
+                        placeholder={FD_STRINGS.PAYOUT_MONTHLY}
+                    />
+                    {showPayoutModal && (
+                        <View style={styles.inlineMenu}>
+                            {payoutOptions
+                                .filter((v, i, a) => !!v && a.indexOf(v) === i)
+                                .map((option) => (
+                                    <TouchableOpacity
+                                        key={option}
+                                        style={styles.modalOption}
+                                        onPress={() => {
+                                            setPayoutValue(option);
+                                            setShowPayoutModal(false);
+                                            handleCalculateFD(amount, option);
+                                            // Pass the selected option directly to avoid stale state
+                                            // setTimeout(() => handleCalculateFD(option), 100);
+                                        }}
+                                    >
+                                        <Text style={styles.modalOptionText}>{option}</Text>
+                                    </TouchableOpacity>
+                                ))}
+                        </View>
+                    )}
+
+                    {/* Interest Rate Card */}
+                    {isCalculating && (
+                        <View style={styles.loadingContainer}>
+                            <ActivityIndicator size="small" color={colors.primary} />
+                            <Text style={styles.loadingText}>{COMMON_STRINGS.PROCESSING}</Text>
+                        </View>
+                    )}
+                    <InterestRateCard
+                        interestRate={(() => {
+                            const data = calculationResult?.data;
+                            const investmentType = payoutValue === 'On Maturity' ? 'SDR' : 'FDR';
+                            const calcData = investmentType === 'SDR'
+                                ? data?.sdrCalc?.[0]
+                                : data?.fdrCalc?.[0];
+                            const wroi = calcData?.wRoi || data?.wroi || data?.interestRate || data?.rate;
+                            return wroi ? `${Number(wroi).toFixed(1)}% p.a.` : "";
+                        })()}
+                        maturityAmount={(() => {
+                            const data = calculationResult?.data;
+                            const investmentType = payoutValue === 'On Maturity' ? 'SDR' : 'FDR';
+                            const calcData = investmentType === 'SDR'
+                                ? data?.sdrCalc?.[0]
+                                : data?.fdrCalc?.[0];
+                            const maturityAmount = calcData?.maturityAmount || data?.maturityAmount || data?.totalAmount || data?.finalAmount || data?.amount;
+                            return maturityAmount ? `₹${maturityAmount.toLocaleString()}` : "";
+                        })()}
+                    >
+                        <CheckboxOption
+                            label={FD_STRINGS.SENIOR_CITIZEN_BENEFIT}
+                            checked={seniorCitizen}
+                            onPress={() => setSeniorCitizen(!seniorCitizen)}
+                            numberOfLines={1}
+                            containerStyle={{ marginTop: 12 }}
+                            disabled={true}
+                        />
+                    </InterestRateCard>
+
+                    {/* Tax Resident Checkbox */}
+                    <View style={[styles.checkboxCard, !taxResident && styles.checkboxCardError]}>
+                        <CheckboxOption
+                            label={FD_STRINGS.TAX_RESIDENT_CONFIRMATION}
+                            checked={taxResident}
+                            onPress={handleTaxResidentChange}
+                        />
+                    </View>
+                    {taxResidentError && (
+                        <View style={styles.errorContainer}>
+                            {Platform.OS === 'android' && (
+                                <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
+                            )}
+                            <Text style={styles.errorText}>{taxResidentError}</Text>
+                        </View>
+                    )}
+
+                    {/* Auto Renewal Checkbox */}
+                    <View style={styles.checkboxCard}>
+                        <CheckboxOption
+                            label={FD_STRINGS.MATURITY_AUTO_RENEWAL}
+                            checked={autoRenewal}
+                            onPress={() => setAutoRenewal(!autoRenewal)}
+                        />
+                    </View>
+
+                    {/* Info Box with nonStock icon before withdrawal text */}
+                    <InfoBox message={FD_STRINGS.WITHDRAWAL_INFO} containerStyle={styles.infoBoxCard} showNonStockIcon={true} />
+
+                    {/* Safety & Trust */}
+                    <Text style={styles.sectionTitle}>{FD_STRINGS.SAFETY_TRUST_TITLE}</Text>
+                    <View style={styles.trustRow}>
+                        <TrustBox title1={FD_STRINGS.TRUSTED_BY} title2={FD_STRINGS.CRORES_INDIANS} />
+                        <TrustBox title1={FD_STRINGS.AAA_RATING} title2={FD_STRINGS.RATING} style={{ marginLeft: 10 }} />
+                    </View>
+
+                    {/* FAQ Section */}
+                    <Text style={styles.sectionTitle}>{FD_STRINGS.FAQ_TITLE}</Text>
+                    {faqData.map((item, index) => (
+                        <FAQItem
+                            key={index}
+                            question={item.title}
+                            answer={item.description}
+                            isExpanded={expandedIndex === index}
+                            onToggle={() => setExpandedIndex(expandedIndex === index ? null : index)}
+                        />
+                    ))}
+
+
+                </ScrollView>
+                {/* Start FD Button */}
+                <TouchableOpacity
+                    style={[
+                        styles.startButton,
+                        (!taxResident || isOnboarding || isBooking || !isAmountValid || !isPayoutValid || isCalculating || isAmountEditing) ? styles.startButtonDisabled : null
+                    ]}
+                    disabled={!taxResident || isOnboarding || isBooking || !isAmountValid || !isPayoutValid || isCalculating || isAmountEditing}
+                    activeOpacity={(!taxResident || isOnboarding || isBooking || !isAmountValid || !isPayoutValid || isCalculating || isAmountEditing) ? 1 : 0.7}
+                    onPress={() => {
+                        if (taxResident && !isOnboarding && !isBooking && isAmountValid && isPayoutValid && !isCalculating && !isAmountEditing) {
+                            handleStartOnboarding(payoutValue);
+                        }
+                    }}
+                >
+                    {(isOnboarding || isBooking) ? (
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                            <ActivityIndicator size="small" color={themeName === 'dark' ? colors.buttonTextColor : colors.background} style={{ marginRight: 8 }} />
+                            <Text style={[
+                                styles.startButtonText,
+                                (!taxResident || isOnboarding || isBooking || !isAmountValid || !isPayoutValid || isCalculating || isAmountEditing) ? styles.startButtonTextDisabled : null
+                            ]}>
+                                {COMMON_STRINGS.PROCESSING}
+                            </Text>
+                        </View>
+                    ) : (
+                        <Text style={[
+                            styles.startButtonText,
+                            (!taxResident || isOnboarding || isBooking || !isAmountValid || !isPayoutValid || isCalculating || isAmountEditing) ? styles.startButtonTextDisabled : null
+                        ]}>
+                            {FD_STRINGS.BOOK_FD_BUTTON}
+                        </Text>
+                    )}
+                </TouchableOpacity>
+            </View>
+            {/* Overlay to disable screen interactions during API call */}
+            {
+                (isOnboarding || isBooking) && (
+                    <View style={styles.loadingOverlay} pointerEvents="auto">
+                    </View>
+                )
+            }
+
+            {/* Inline dropdown renders just under the field; closes on selection */}
+        </SafeAreaWrapper >
+    );
+};
+
+export default FDCalculator;
+
+const isAndroid15OrHigher = Platform.OS === "android" && Platform.Version >= 15;
+const createStyles = (typography: any, colors: any, themeName: string) => StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingTop: Platform.OS === 'ios' ? 40 : 20,
+        paddingBottom: 10,
+        backgroundColor: colors.background,
+    },
+    backIcon: {
+        // Icon styling handled by Ionicons component
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+        // backgroundColor: "red",
+    },
+    backButton: {
+        padding: 8,
+        marginTop: isAndroid15OrHigher ? 10 : 0,
+    },
+    scrollContainer: {
+        flex: 1,
+    },
+    scrollContent: {
+        paddingHorizontal: 16,
+        paddingBottom: 40,
+    },
+    checkboxCard: {
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'rgba(0,235,180,0.1)',
+        padding: 12,
+        borderRadius: 4,
+        marginTop: 16,
+    },
+    infoBoxCard: {
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'rgba(0,235,180,0.1)',
+        padding: 16,
+        borderRadius: 4,
+        marginTop: 16,
+    },
+    sectionTitle: {
+        ...typography.styles.bodyMedium,
+        fontWeight: typography.fontWeight.semiBold,
+        marginTop: 25,
+        marginBottom: 8,
+        color: colors.text,
+        fontSize: 16,
+    },
+    trustRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 10,
+    },
+    startButtonWrapper: {
+        position: 'relative',
+    },
+    startButton: {
+        backgroundColor: themeName === 'dark' ? colors.buttonBackground : colors.headerBg,
+        paddingVertical: themeName === 'dark' ? 1 : 20,
+        paddingHorizontal: 20,
+        borderRadius: themeName === 'dark' ? 10 : 30,
+        marginTop: 30,
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: themeName === 'dark' ? 50 : 56,
+        width: '90%',
+        alignSelf: 'center',
+    },
+    startButtonDisabled: {
+        backgroundColor: '#909090',
+        color: '#ffffff',
+    },
+    startButtonText: {
+        ...typography.styles.button,
+        color: themeName === 'dark' ? colors.buttonTextColor : colors.background,
+        lineHeight: themeName === 'dark' ? 24 : typography.styles.button.lineHeight,
+        fontSize: 16,
+    },
+    startButtonTextDisabled: {
+        color: themeName === 'dark' ? "#ffffff" : colors.tabSelected,
+    },
+    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: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    modalOption: {
+        paddingVertical: 14,
+    },
+    modalOptionText: {
+        ...typography.styles.bodyLarge,
+        color: colors.text,
+        fontSize: 16,
+        placeholderTextColor: '#9ca9b0',
+    },
+
+    loadingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        fontSize: 14,
+        marginTop: 16,
+    },
+    loadingText: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        marginLeft: 8,
+    },
+    overlayAboveInterestRate: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 20,
+        backgroundColor: 'rgba(128, 128, 128, 0.3)', // Light gray translucent overlay
+        zIndex: 1,
+    },
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 8,
+    },
+    errorIcon: {
+        marginRight: 6,
+    },
+    errorText: {
+        fontSize: 14,
+        color: colors.error || '#FF0000',
+        fontWeight: '500',
+        flex: 1,
+    },
+    checkboxCardError: {
+        backgroundColor: 'rgba(255, 0, 0, 0.08)', // Red with same opacity as the original green
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        zIndex: 1000,
+    },
+});