@finspringinnovations/fdsdk 0.0.1

package/src/screens/ReviewKYC.tsx

@@ -0,0 +1,956 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useRoute } from '@react-navigation/native';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, Image, TouchableWithoutFeedback, Keyboard, TextInput, BackHandler, Platform, ActivityIndicator, KeyboardAvoidingView } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { Header, DropdownSelector } from '../components';
+import ActionButton from '../components/ActionButton';
+import TextFieldWithLabel from '../components/TextFieldWithLabel';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { usePreviousStateMutation } from '../api/workflowApi';
+import { getAppData, getUserInfoForAPI } from '../config/appDataConfig';
+import { useMasterData } from '../providers/MasterDataProvider';
+import { navigate } from '../navigation/helpers';
+import { useAppSelector } from '../store';
+import { useGetCustomerApplicationDetailsMutation } from '../api/customerApi';
+import { usePanRapidNoMutation } from '../api/kycApi';
+import { getGlobalData } from '../utils/globalData';
+import { base64Images } from '../constants/strings/base64Images';
+
+
+export interface ReviewKYCProps {
+    onGoBack?: () => void;
+    onContinue?: (kycData: KYCData) => void;
+    initialData?: Partial<KYCData>;
+}
+
+export interface KYCData {
+    panCard: string; // Maps to appData.panNumber (required from main app)
+    dateOfBirth: string; // Maps to appData.dob (formatted from YYYY-MM-DD to DD/MM/YYYY for display)
+    maritalStatus: string; // Maps to appData.maritalStatus (uses full values like Married/Unmarried/Other)
+    area: string; // Maps to appData.area
+    city: string; // Maps to appData.city
+    addressLine1: string; // Maps to appData.address
+    addressLine2: string; // Maps to appData.area (secondary address line)
+    pincode: string; // Maps to appData.pinCode
+    state: string; // Maps to appData.state
+    country: string; // Maps to appData.country
+    useExistingAddress: boolean; // User preference for address usage
+}
+
+const ReviewKYC: React.FC<ReviewKYCProps> = ({
+    onGoBack,
+    onContinue,
+    initialData,
+}) => {
+    const route = useRoute<any>();
+    const fdDataFromRoute = route?.params?.fdData;
+
+    // Route params processed
+
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    // Previous State API
+    const [previousState] = usePreviousStateMutation();
+    const { masterData, setMasterData } = useMasterData();
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const customerId = useAppSelector((state: any) => state?.onboarding?.customerId);
+    const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
+    const wfStatus = useAppSelector((state: any) => state?.onboarding?.wfStatus);
+
+
+    // Customer Application Details API
+    const [getCustomerApplicationDetails, {
+        data: customerApplicationDetails,
+        error: customerApplicationDetailsError,
+        isLoading: isLoadingCustomerApplicationDetails,
+    }] = useGetCustomerApplicationDetailsMutation();
+
+    // PAN Rapid API
+    const [panRapidNo, {
+        data: panRapidResponse,
+        error: panRapidError,
+        isLoading: isLoadingPanRapid,
+    }] = usePanRapidNoMutation();
+
+    // Get providerId from app data or use default
+    const appData = getAppData();
+    const defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+
+    // Use master data from global state if available
+    const effectiveMasterData = masterData;
+
+    // Call customer application details API on component mount
+    React.useEffect(() => {
+
+        // Ensure IDs are available from onboarding before calling API
+        if (!applicationId || !customerId) {
+            return;
+        }
+
+        // Use async/await for better error handling
+        const callAPI = async () => {
+            try {
+
+                // Add timeout to detect if API call is hanging
+                const timeoutPromise = new Promise((_, reject) => {
+                    setTimeout(() => reject(new Error('API call timeout after 60 seconds')), 60000);
+                });
+
+                // Get user info from app data
+                const userInfo = getUserInfoForAPI();
+
+                const apiPromise = getCustomerApplicationDetails({
+                    providerId: defaultProviderId,
+                    applicationId: applicationId,
+                    customerId: customerId,
+                    workflowInstanceId: workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: entityId,
+                }).unwrap();
+
+                const response = await Promise.race([apiPromise, timeoutPromise]);
+            } catch (error) {
+                // Handle error silently or implement proper error handling
+            }
+        };
+
+        callAPI();
+    }, [applicationId, customerId, workflowInstanceId]);
+
+    // Update form data when API response is received
+    React.useEffect(() => {
+        if (customerApplicationDetails?.data) {
+            const apiData = customerApplicationDetails.data;
+
+            // Check if KYC details exist in the response
+            if (apiData.kyc_details && Array.isArray(apiData.kyc_details) && apiData.kyc_details.length > 0) {
+
+                // Use the first KYC detail (assuming there's one primary KYC record)
+                const kycDetail = apiData.kyc_details[0];
+
+                setKycData(prev => ({
+                    ...prev,
+                    // Map KYC detail fields to form fields - API data takes priority
+                    panCard: kycDetail.panNumber || prev.panCard,
+                    dateOfBirth: kycDetail.dob ? formatDateForDisplay(kycDetail.dob) : prev.dateOfBirth,
+                    maritalStatus: kycDetail.maritalStatus || prev.maritalStatus,
+                    area: kycDetail.area || prev.area,
+                    city: kycDetail.city || prev.city,
+                    addressLine1: kycDetail.addressLine1 || kycDetail.address || prev.addressLine1,
+                    addressLine2: kycDetail.addressLine2 || prev.addressLine2,
+                    pincode: kycDetail.pincode || prev.pincode,
+                    state: kycDetail.state || prev.state,
+                    country: kycDetail.country || prev.country,
+                }));
+            }
+
+            // Also check for customer data in the response for marital status and other fields
+            if (apiData.customer) {
+                setKycData(prev => ({
+                    ...prev,
+                    maritalStatus: apiData.customer.marital_status || prev.maritalStatus,
+                    dateOfBirth: apiData.customer.dob ? formatDateForDisplay(apiData.customer.dob) : prev.dateOfBirth,
+                }));
+            }
+
+            // Check for address data in the response
+            if (apiData.address) {
+                setKycData(prev => ({
+                    ...prev,
+                    area: apiData.address.area || prev.area,
+                    city: apiData.address.city || prev.city,
+                    addressLine1: apiData.address.line1 || prev.addressLine1,
+                    addressLine2: apiData.address.line2 || prev.addressLine2,
+                    pincode: apiData.address.pincode || prev.pincode,
+                    state: apiData.address.state || prev.state,
+                    country: apiData.address.country || prev.country,
+                }));
+            }
+        }
+    }, [customerApplicationDetails]);
+
+    // App data is already loaded above
+
+    // Helper function to format date from YYYY-MM-DD to DD/MM/YYYY
+    const formatDateForDisplay = (dateString: string): string => {
+        if (!dateString) return '';
+        const [year, month, day] = dateString.split('-');
+        return `${day}/${month}/${year}`;
+    };
+
+    // Marital status is now used as-is from API without any code conversion
+
+    // App data processed
+
+    // API status monitoring complete
+
+    const [kycData, setKycData] = useState<KYCData>({
+        panCard: initialData?.panCard || appData?.panNumber || '',
+        dateOfBirth: initialData?.dateOfBirth || formatDateForDisplay(appData?.dob || ''),
+        maritalStatus: initialData?.maritalStatus || appData?.maritalStatus || '', // Keep empty to show placeholder
+        area: initialData?.area || appData?.area || '',
+        city: initialData?.city || appData?.city || '',
+        addressLine1: initialData?.addressLine1 || appData?.address || '',
+        addressLine2: initialData?.addressLine2 || appData?.area || '', // Use area as address line 2
+        pincode: initialData?.pincode || appData?.pinCode || '',
+        state: initialData?.state || appData?.state || '',
+        country: initialData?.country || appData?.country || '',
+        useExistingAddress: initialData?.useExistingAddress ?? false,
+    });
+
+    // Error states for each field
+    const [fieldErrors, setFieldErrors] = useState<{ [key: string]: string }>({});
+
+    // State to track marital status dropdown visibility
+    const [showMaritalStatusMenu, setShowMaritalStatusMenu] = useState(false);
+    const [isGoingBack, setIsGoingBack] = useState(false);
+
+    // Ref to track currently focused text input
+    const focusedTextInputRef = useRef<TextInput | null>(null);
+
+    // Refs for each text field
+    const panCardRef = useRef<TextInput>(null);
+    const dateOfBirthRef = useRef<TextInput>(null);
+    const areaRef = useRef<TextInput>(null);
+    const cityRef = useRef<TextInput>(null);
+    const addressLine1Ref = useRef<TextInput>(null);
+    const addressLine2Ref = useRef<TextInput>(null);
+    const pincodeRef = useRef<TextInput>(null);
+    const stateRef = useRef<TextInput>(null);
+    const countryRef = useRef<TextInput>(null);
+
+    // Function to close dropdown when other fields are focused
+    const closeDropdown = () => {
+        setShowMaritalStatusMenu(false);
+    };
+
+    // Function to blur currently focused text input
+    const blurFocusedTextInput = () => {
+        if (focusedTextInputRef.current) {
+            focusedTextInputRef.current.blur();
+            focusedTextInputRef.current = null;
+        }
+    };
+
+    // Function to handle focus and store ref
+    const handleFieldFocus = (ref: React.RefObject<TextInput>) => {
+        // Blur any previously focused field
+        blurFocusedTextInput();
+        // Store the new focused field ref
+        focusedTextInputRef.current = ref.current;
+        // Close dropdown
+        closeDropdown();
+    };
+
+    // Add keyboard event listener to close dropdown when keyboard appears
+    useEffect(() => {
+        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+            closeDropdown();
+        });
+
+        return () => {
+            keyboardDidShowListener?.remove();
+        };
+    }, []);
+
+    // Get marital status options from master data with fallback
+    const maritalStatusOptions: string[] = React.useMemo(() => {
+        try {
+            const src = (effectiveMasterData as any)?.data || effectiveMasterData || {};
+            const raw = src?.maritalStatusOptions ||
+                src?.maritalStatusList ||
+                src?.maritalStatus ||
+                src?.maritalOptions;
+
+            if (Array.isArray(raw) && raw.length) {
+                return raw.map((v: any) => String(v)).filter(Boolean);
+            }
+            if (typeof raw === 'string' && raw.trim().length) {
+                return raw.split(',').map((v: string) => v.trim()).filter(Boolean);
+            }
+
+            // Fallback defaults
+            return ['Married', 'Unmarried', 'Other'];
+        } catch (e) {
+            return ['Married', 'Unmarried', 'Other'];
+        }
+    }, [effectiveMasterData]);
+
+    // Do not auto-select a default marital status; keep empty to show placeholder when not provided by main app or API
+
+    // Validate individual field and set error
+    const validateField = (field: keyof KYCData, value: string): string => {
+        if (!value || value.trim().length === 0) {
+            // Use "District" for area field
+            if (field === 'area') {
+                return 'District is required';
+            }
+            return `${field.charAt(0).toUpperCase() + field.slice(1)} is required`;
+        }
+
+        // Minimum 2 characters validation for text fields (excluding PAN, pincode, dateOfBirth, maritalStatus)
+        const textFields = ['area', 'city', 'addressLine1', 'addressLine2', 'state', 'country'];
+        if (textFields.includes(field)) {
+            if (value.trim().length < 2) {
+                // Use "Address" for addressLine1 and addressLine2
+                if (field === 'addressLine1' || field === 'addressLine2') {
+                    return 'Address must be at least 2 characters';
+                } else if (field === 'area') {
+                    return 'District must be at least 2 characters';
+                }
+                return `${field.charAt(0).toUpperCase() + field.slice(1)} must be at least 2 characters`;
+            }
+        }
+
+        // Special validation for PAN Card
+        if (field === 'panCard') {
+            const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/;
+            const upperValue = value.toUpperCase();
+            if (!panRegex.test(upperValue)) {
+                return 'Please enter a valid PAN (e.g., ABCDE1234F)';
+            }
+        }
+
+        // Special validation for pincode
+        if (field === 'pincode') {
+            if (!validatePincode(value)) {
+                return 'Please enter a valid 6-digit pincode (should not start with 0)';
+            }
+        }
+
+        return '';
+    };
+
+    // Render error message for a field
+    const renderFieldError = (field: keyof KYCData) => {
+        const error = fieldErrors[field];
+        if (!error) return null;
+
+        return (
+            <View style={styles.errorContainer}>
+                {Platform.OS === 'android' && (
+                    <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
+                )}
+                <Text style={styles.errorText}>{error}</Text>
+            </View>
+        );
+    };
+
+    // Enhanced field validation functions
+    const validateAndCleanText = (text: string, field: keyof KYCData): string => {
+        let cleanedText = text;
+
+        // Apply field-specific validation
+        switch (field) {
+            case 'panCard':
+                // Only allow alphanumeric, limit to 10 characters
+                // Don't uppercase here to prevent cursor jumping - let autoCapitalize handle display
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9]/g, '').substring(0, 10);
+                break;
+            case 'area':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 50);
+                break;
+            case 'city':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 30);
+                break;
+            case 'addressLine1':
+            case 'addressLine2':
+                // Allow letters, numbers, spaces, and common address special characters (comma, period, hyphen, slash, hash, parentheses, apostrophe, quotes)
+                // Collapse multiple spaces to single space; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ,./()#'"-]/g, '').replace(/\s+/g, ' ').substring(0, 100);
+                break;
+            case 'pincode':
+                // Only allow digits and limit to 6 characters
+                cleanedText = cleanedText.replace(/[^0-9]/g, '').substring(0, 6);
+                break;
+            case 'state':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 40);
+                break;
+            case 'country':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 40);
+                break;
+            default:
+                // Default: allow only letters, numbers, spaces
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ');
+                break;
+        }
+
+        return cleanedText;
+    };
+
+    const validatePincode = (pincode: string): boolean => {
+        // Must be exactly 6 digits
+        if (pincode.length !== 6) return false;
+
+        // Must be all digits
+        if (!/^\d{6}$/.test(pincode)) return false;
+
+        // Basic pincode validation (first digit should be 1-9, not 0)
+        if (pincode.startsWith('0')) return false;
+
+        return true;
+    };
+
+    const updateField = (field: keyof KYCData, value: string | boolean) => {
+
+        // Apply validation and cleaning for text fields
+        let processedValue = value;
+        if (typeof value === 'string' && field !== 'useExistingAddress') {
+            processedValue = validateAndCleanText(value, field);
+        }
+
+        setKycData(prev => {
+            const newData = {
+                ...prev,
+                [field]: processedValue
+            };
+
+            // Log checkbox state changes
+            if (field === 'useExistingAddress') {
+                // Checkbox state changed
+            }
+
+            return newData;
+        });
+
+        // Validate field and set error
+        if (typeof processedValue === 'string') {
+            const error = validateField(field, processedValue);
+            setFieldErrors(prev => ({
+                ...prev,
+                [field]: error,
+            }));
+        }
+    };
+
+    // Helper function to format date from DD/MM/YYYY back to YYYY-MM-DD
+    const formatDateForAPI = (dateString: string): string => {
+        if (!dateString) return '';
+        const [day, month, year] = dateString.split('/');
+        return `${year}-${month}-${day}`;
+    };
+
+    // Pass-through marital status: use the exact value from master data (no S/M/D mapping)
+    const getMaritalStatusCode = (display: string): string => {
+        return display || '';
+    };
+
+    // Validation function to check if all required fields are filled and valid
+    const validateForm = (): boolean => {
+        const requiredFields = [
+            kycData.panCard,
+            kycData.dateOfBirth,
+            kycData.maritalStatus,
+            kycData.area,
+            kycData.city,
+            kycData.addressLine1,
+            kycData.pincode,
+            kycData.state,
+            kycData.country,
+        ];
+
+        // Check if all required fields are filled
+        const allFieldsFilled = requiredFields.every(field => field && field.trim().length > 0);
+
+        // Check minimum 2 characters for text fields (only if field is filled)
+        const textFields = {
+            area: kycData.area,
+            city: kycData.city,
+            addressLine1: kycData.addressLine1,
+            state: kycData.state,
+            country: kycData.country,
+        };
+        const allTextFieldsValid = Object.values(textFields).every(field => {
+            // If field is empty, it's already checked by allFieldsFilled
+            // If field has value, it must be at least 2 characters
+            return !field || field.trim().length === 0 || field.trim().length >= 2;
+        });
+
+        // Additional validation for pincode
+        const isPincodeValid = validatePincode(kycData.pincode);
+
+        return allFieldsFilled && allTextFieldsValid && isPincodeValid;
+    };
+
+    const handleContinue = async () => {
+        try {
+
+            // Validate all required fields
+            if (!validateForm()) {
+                // Check specifically for pincode validation
+                if (!validatePincode(kycData.pincode)) {
+                    Alert.alert('Invalid Pincode', 'Please enter a valid 6-digit pincode (should not start with 0).');
+                } else {
+                    Alert.alert('Required Fields', 'Please fill in all required fields before continuing.');
+                }
+                return;
+            }
+
+            // Convert the display format back to API format before sending
+            const apiFormattedData = {
+                ...kycData,
+                dateOfBirth: formatDateForAPI(kycData.dateOfBirth),
+                maritalStatus: getMaritalStatusCode(kycData.maritalStatus),
+            };
+
+
+            // Get user info from app data
+            const userInfo = getUserInfoForAPI();
+
+            // Call PAN rapid API (body fields from text fields/dropdowns)
+            const panRapidRequest = {
+                // headers via panApi: provider/workflowInstanceId/userreferenceid/applicationid
+                providerId: defaultProviderId,
+                workflowInstanceId, // from store
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+
+                // required body params
+                customerId: customerId,
+                applicationId: applicationId,
+                maritalStatus: getMaritalStatusCode(kycData.maritalStatus),
+                area: kycData.area,
+                addressLine1: kycData.addressLine1,
+                addressLine2: kycData.addressLine2, // Added missing addressLine2 field
+                city: kycData.city,
+                state: kycData.state,
+                country: kycData.country,
+                pincode: kycData.pincode,
+                panNo: kycData.panCard.toUpperCase(), // Uppercase PAN before sending to API
+                mobileNo: userInfo.mobileNumber,
+                addressConsentGiven: !!kycData.useExistingAddress,
+            };
+
+
+            const panResponse = await panRapidNo(panRapidRequest).unwrap();
+
+            // Normalize payload (API returns data as array of one element)
+            const payload: any = Array.isArray((panResponse as any)?.data)
+                ? (panResponse as any).data[0]
+                : (panResponse as any)?.data ?? (panResponse as any);
+
+            // Extract fields with tolerant casing/locations
+            const panRapidNumber = payload?.panRapidNumber ?? payload?.panrapidnumber ?? (panResponse as any)?.panRapidNumber ?? (panResponse as any)?.panrapidnumber ?? null;
+
+            // Check demographicInfoSaved gate
+            const demographicInfoSaved = payload?.demographicInfoSaved ?? (panResponse as any)?.demographicInfoSaved;
+
+            if (!demographicInfoSaved) {
+                Alert.alert('Action required', 'Your demographic information could not be saved. Please review the details and try again.');
+                return;
+            }
+            const data = getGlobalData();
+            // Decide next screen based on panrapidnumber existence
+            if (panRapidNumber && data.completeFDData) {
+                navigate('PayNow', { fdData: fdDataFromRoute });
+            } else if (panRapidNumber) {
+                navigate('Employee');
+            } else {
+                navigate('AadhaarVerification', { fdData: fdDataFromRoute });
+            }
+
+            // Do not trigger onContinue here; navigation is handled above
+
+        } catch (error) {
+            // Show error message to user
+            Alert.alert(
+                'PAN Verification Failed',
+                'Unable to verify your PAN details. Please check your information and try again.',
+                [{ text: 'OK' }]
+            );
+
+            // Do not navigate on failure - stay on current screen
+            // User can retry or correct their information
+        }
+    };
+
+    const renderInputField = (
+        label: string,
+        value: string,
+        field: keyof KYCData,
+        placeholder?: string,
+        editable: boolean = true,
+        variant: 'text' | 'numeric' | 'email' = 'text',
+        maxLength?: number,
+        textInputRef?: React.RefObject<TextInput>
+    ) => (
+        <View>
+            <TextFieldWithLabel
+                label={label}
+                value={value}
+                onChangeText={(text) => updateField(field, text)}
+                placeholder={placeholder}
+                editable={editable}
+                variant={variant}
+                maxLength={maxLength}
+                keyboardType={variant === 'numeric' ? 'numeric' : variant === 'email' ? 'email-address' : 'default'}
+                autoCapitalize={variant === 'email' ? 'none' : 'words'}
+                onFocus={() => textInputRef && handleFieldFocus(textInputRef)}
+                textInputRef={textInputRef}
+                returnKeyType="done"
+                onSubmitEditing={() => {
+                    if (textInputRef?.current) {
+                        textInputRef.current.blur();
+                    }
+                    Keyboard.dismiss();
+                }}
+            />
+            {renderFieldError(field)}
+        </View>
+    );
+
+    const renderMaritalStatusDropdown = () => {
+        return (
+            <View>
+                <TextFieldWithLabel
+                    label="Marital Status"
+                    value={kycData.maritalStatus}
+                    onChangeText={(text) => updateField('maritalStatus', text)}
+                    variant="dropdown"
+                    options={maritalStatusOptions}
+                    isDropdownOpen={showMaritalStatusMenu}
+                    onDropdownToggle={() => {
+                        // Blur any focused text field when dropdown is opened
+                        blurFocusedTextInput();
+                        setShowMaritalStatusMenu(prev => !prev);
+                    }}
+                    onDropdownSelect={(option) => {
+                        setShowMaritalStatusMenu(false);
+                        updateField('maritalStatus', option);
+                    }}
+                    placeholder="Select Marital Status"
+                    editable={true}
+                />
+                {showMaritalStatusMenu && (
+                    <View style={styles.inlineMenu}>
+                        {maritalStatusOptions.map((option: string) => (
+                            <TouchableOpacity
+                                key={option}
+                                style={styles.modalOption}
+                                onPress={() => {
+                                    setShowMaritalStatusMenu(false);
+                                    updateField('maritalStatus', option);
+                                }}
+                            >
+                                <Text style={styles.modalOptionText}>{option}</Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                )}
+                {renderFieldError('maritalStatus')}
+            </View>
+        );
+    };
+
+    const renderDateField = (
+        label: string,
+        value: string,
+        field: keyof KYCData,
+        editable: boolean = true,
+        textInputRef?: React.RefObject<TextInput>
+    ) => (
+        <View>
+            <TextFieldWithLabel
+                label={label}
+                value={value}
+                onChangeText={(text) => updateField(field, text)}
+                variant="date"
+                placeholder="DD/MM/YYYY"
+                maxLength={10}
+                dateFormat="DD/MM/YYYY"
+                editable={editable}
+                onFocus={() => textInputRef && handleFieldFocus(textInputRef)}
+                textInputRef={textInputRef}
+                onDatePress={() => {
+                    // TODO: Implement date picker if needed
+                }}
+                returnKeyType="done"
+                onSubmitEditing={() => {
+                    if (textInputRef?.current) {
+                        textInputRef.current.blur();
+                    }
+                    Keyboard.dismiss();
+                }}
+            />
+            {renderFieldError(field)}
+        </View>
+    );
+
+    // Handler for back button (used by both header and hardware back button)
+    const handleBackPress = async () => {
+        setIsGoingBack(true);
+        try {
+            const userInfo = getUserInfoForAPI();
+            await previousState({
+                providerId: defaultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+            });
+        } catch (e) {
+            // Handle error silently
+        } finally {
+            setIsGoingBack(false);
+            //onGoBack?.();
+            navigate('FDCalculator');
+        }
+    };
+
+    // Handle Android hardware back button
+    useEffect(() => {
+        if (Platform.OS !== 'android') return;
+
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            'hardwareBackPress',
+            onHardwareBackPress
+        );
+
+        return () => backHandler.remove();
+    }, [defaultProviderId, workflowInstanceId, applicationId, entityId]);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={false}
+            bottomPadding={25}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            <Header
+                title="Review KYC"
+                onBackPress={handleBackPress}
+                backgroundColor={colors.primary}
+            />
+
+            <KeyboardAvoidingView
+                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+                style={styles.keyboardAvoidingView}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+            >
+                <ScrollView
+                    style={styles.container}
+                    showsVerticalScrollIndicator={false}
+                    scrollEnabled={!isLoadingPanRapid}
+                    keyboardShouldPersistTaps="handled"
+                    contentContainerStyle={styles.scrollContent}
+                >
+                    <TouchableWithoutFeedback onPress={isLoadingPanRapid ? undefined : closeDropdown}>
+                        <View>
+                            <View>
+                                <TextFieldWithLabel
+                                    label="PAN Card"
+                                    value={kycData.panCard}
+                                    onChangeText={(text) => updateField('panCard', text)}
+                                    placeholder="Enter PAN Card"
+                                    editable={false}
+                                    variant="text"
+                                    maxLength={10}
+                                    keyboardType="default"
+                                    autoCapitalize="characters"
+                                    onFocus={() => handleFieldFocus(panCardRef)}
+                                    textInputRef={panCardRef}
+                                    returnKeyType="done"
+                                    onSubmitEditing={() => {
+                                        if (panCardRef?.current) {
+                                            panCardRef.current.blur();
+                                        }
+                                        Keyboard.dismiss();
+                                    }}
+                                />
+                                {renderFieldError('panCard')}
+                            </View>
+
+                            {renderDateField('Date of Birth', kycData.dateOfBirth, 'dateOfBirth', false, dateOfBirthRef)}
+
+                            {renderMaritalStatusDropdown()}
+
+                            {renderInputField('District', kycData.area, 'area', 'Enter District', true, 'text', 50, areaRef)}
+
+                            {renderInputField('City', kycData.city, 'city', 'Enter City', true, 'text', 30, cityRef)}
+
+                            {renderInputField('Address line 1', kycData.addressLine1, 'addressLine1', 'Enter Address Line 1', true, 'text', 100, addressLine1Ref)}
+
+                            {renderInputField('Address line 2', kycData.addressLine2, 'addressLine2', 'Enter Address Line 2', true, 'text', 100, addressLine2Ref)}
+
+                            {renderInputField('Pincode', kycData.pincode, 'pincode', 'Enter Pincode', true, 'numeric', 6, pincodeRef)}
+
+                            {renderInputField('State', kycData.state, 'state', 'Enter State', true, 'text', undefined, stateRef)}
+
+                            {renderInputField('Country', kycData.country, 'country', 'Enter Country', true, 'text', undefined, countryRef)}
+
+                            <View style={styles.checkboxContainer}>
+                                <TouchableOpacity
+                                    style={styles.checkbox}
+                                    onPress={() => updateField('useExistingAddress', !kycData.useExistingAddress)}
+                                >
+                                    <View style={[
+                                        styles.checkboxBox,
+                                        kycData.useExistingAddress && styles.checkboxChecked
+                                    ]}>
+                                        {kycData.useExistingAddress ? (
+                                            <Image
+                                                source={{ uri: (themeName === 'dark') ? base64Images.checkBoxDark : base64Images.filledCheckBox }}
+                                                resizeMode="cover"
+                                                width={20}
+                                                height={20}
+                                            />
+                                        ) : (
+                                            (themeName === 'dark') ? (
+                                                <Image
+                                                    source={{ uri: base64Images.unCheckBoxDark }}
+                                                    resizeMode="cover"
+                                                    width={20}
+                                                    height={20}
+                                                />
+                                            ) : null
+                                        )}
+                                    </View>
+                                </TouchableOpacity>
+                                <Text style={styles.checkboxText}>
+                                    For existing customers, we'll use the address from our records. For new customers, the address from your Aadhar card will be used. To update, please raise a service request with valid address proof.
+                                </Text>
+                            </View>
+
+
+                        </View>
+                    </TouchableWithoutFeedback>
+                </ScrollView>
+            </KeyboardAvoidingView>
+            <ActionButton
+                title="Continue"
+                onPress={handleContinue}
+                disabled={!kycData.useExistingAddress || isLoadingPanRapid || !validateForm()}
+                loading={isLoadingPanRapid}
+            />
+            {/* Overlay to disable screen interactions during API call */}
+            {isLoadingPanRapid && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                </View>
+            )}
+            {/* Loading overlay for back navigation */}
+            {isGoingBack && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                    <ActivityIndicator size="large" color={colors.primary} />
+                </View>
+            )}
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName?: string) => StyleSheet.create({
+    keyboardAvoidingView: {
+        flex: 1,
+    },
+    container: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 20,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    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',
+    },
+    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,
+    },
+    modalOption: {
+        paddingVertical: 14,
+    },
+    modalOptionText: {
+        ...typography.styles.bodyLarge,
+        color: colors.text,
+    },
+    debugButtonsContainer: {
+        marginBottom: 16,
+    },
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginBottom: 8,
+        alignItems: 'center',
+    },
+    debugButtonText: {
+        ...typography.styles.bodyMedium,
+        fontWeight: '600',
+    },
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: -20,
+        marginBottom: 20,
+    },
+    errorIcon: {
+        marginRight: 6,
+    },
+    errorText: {
+        fontSize: 12,
+        color: colors.error || '#FF0000',
+        fontWeight: '500',
+        flex: 1,
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1000,
+    },
+});
+
+export default ReviewKYC;