@finspringinnovations/fdsdk 0.0.1

package/src/screens/NomineeDetail.tsx

@@ -0,0 +1,800 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, Platform, Image, TextInput, TouchableWithoutFeedback, BackHandler, ActivityIndicator, KeyboardAvoidingView } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import DateTimePicker from '@react-native-community/datetimepicker';
+// import DatePicker from 'react-native-date-picker'; // Commented out old date picker
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { Header } from '../components';
+import ActionButton from '../components/ActionButton';
+import TextFieldWithLabel from '../components/TextFieldWithLabel';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { useCustomerNomineeMutation, useGetCustomerApplicationDetailsMutation } from '../api/customerApi';
+import { useMasterData } from '../providers/MasterDataProvider';
+import { useAppSelector } from '../store';
+import { getUserInfoForAPI } from '../config/appDataConfig';
+import { usePreviousStateMutation } from '../api/workflowApi';
+import { useFocusEffect } from '@react-navigation/native';
+import { navigate } from '../navigation/helpers';
+import { base64Images } from '../constants/strings/base64Images';
+import { NOMINEE_STRINGS } from '../constants/strings/nominee';
+import { COMMON_STRINGS } from '../constants/strings/common';
+
+export interface NomineeDetailProps {
+    onGoBack?: () => void;
+    onSave?: (data: NomineeData) => void;
+    initialData?: Partial<NomineeData>;
+}
+
+export interface NomineeData {
+    makeNomination: string;
+    nomineeTitle: string;
+    nomineeName: string;
+    relationship: string;
+    customRelationship?: string;
+    dateOfBirth: string;
+    printNameOnCertificate: boolean;
+}
+
+const makeNominationOptions = ['Yes', 'No'];
+
+const NomineeDetail: React.FC<NomineeDetailProps> = ({ onGoBack, onSave, initialData }) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    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 defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+
+    const [customerNominee, {
+        data: customerNomineeResponse,
+        error: customerNomineeError,
+        isLoading: isLoadingCustomerNominee,
+    }] = useCustomerNomineeMutation();
+    const [previousState] = usePreviousStateMutation();
+    const [getCustomerApplicationDetails] = useGetCustomerApplicationDetailsMutation();
+
+    // Master data state
+    // const [masterData, setMasterData] = useState<{
+    //     nomineePrefix: string[];
+    //     nomineeRelation: string[];
+    // }>({
+    //     nomineePrefix: [],
+    //     nomineeRelation: [],
+    // });
+
+    // Loading state for back navigation
+    const [isGoingBack, setIsGoingBack] = useState(false);
+
+    // Form state
+    const [form, setForm] = useState<NomineeData>({
+        makeNomination: initialData?.makeNomination || 'Yes',
+        nomineeTitle: '', // will be set after master data loads
+        nomineeName: initialData?.nomineeName || '',
+        relationship: '', // will be set after master data loads
+        customRelationship: (initialData as any)?.customRelationship || '',
+        dateOfBirth: initialData?.dateOfBirth || '',
+        printNameOnCertificate: initialData?.printNameOnCertificate ?? false,
+    });
+
+
+    // Dropdown menu state
+    const [openMenus, setOpenMenus] = useState({
+        makeNomination: false,
+        title: false,
+        relationship: false,
+    });
+
+    // Error state for custom relationship
+    const [fieldErrors, setFieldErrors] = useState<{ [key: string]: string }>({});
+
+    // Date picker state
+    const [showDatePicker, setShowDatePicker] = useState(false);
+    const datePickerLockRef = useRef(false);
+    const [selectedDate, setSelectedDate] = useState(new Date());
+
+    // ScrollView ref for auto-scrolling
+    const scrollViewRef = useRef<ScrollView>(null);
+
+    // Ref for nominee name text field
+    const nomineeNameRef = useRef<TextInput>(null);
+
+    // Derive nominee prefix and relationship options from master data
+    const normalizeOptions = (raw: any): string[] => {
+        if (Array.isArray(raw)) return raw.map((v) => String(v)).filter(Boolean);
+        if (typeof raw === 'string' && raw.trim().length) return raw.split(',').map((v) => v.trim()).filter(Boolean);
+        return [];
+    };
+
+    const mdRoot: any = (masterData as any)?.data || masterData || {};
+
+    const nomineePrefixOptions: string[] = React.useMemo(() => {
+        const raw = mdRoot?.nomineePrefix || mdRoot?.titleOptions || mdRoot?.prefixOptions;
+        const opts = normalizeOptions(raw);
+        return opts.length ? opts : ['Mr', 'Ms', 'Mrsww'];
+    }, [mdRoot]);
+
+    const nomineeRelationOptions: string[] = React.useMemo(() => {
+        const raw = mdRoot?.nomineeRelation || mdRoot?.relationshipOptions || mdRoot?.relations || mdRoot?.relationOptions;
+        const opts = normalizeOptions(raw);
+        return opts.length ? opts : ['Father', 'Mother', 'Spouse', 'Son', 'Daughter', 'Others'];
+    }, [mdRoot]);
+
+    // Do not auto-select defaults; placeholders should remain if API does not provide data
+    // Intentionally no-op here to avoid preselecting values
+    useEffect(() => {
+        // no-op to preserve empty state when no API data
+    }, [nomineePrefixOptions, nomineeRelationOptions]);
+
+    // Sync selectedDate with form.dateOfBirth when form data changes
+    useEffect(() => {
+        if (form.dateOfBirth && form.dateOfBirth.trim() !== '') {
+            const dateParts = form.dateOfBirth.split('/');
+            if (dateParts.length === 3) {
+                const day = parseInt(dateParts[0], 10);
+                const month = parseInt(dateParts[1], 10);
+                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);
+                    if (!isNaN(parsedDate.getTime()) && parsedDate.getDate() === day && parsedDate.getMonth() === month - 1 && parsedDate.getFullYear() === year) {
+                        setSelectedDate(parsedDate);
+                    }
+                }
+            }
+        }
+    }, [form.dateOfBirth]);
+
+    // Fetch customer application details on focus and set form from nominee data
+    useFocusEffect(
+        React.useCallback(() => {
+            let isActive = true;
+            (async () => {
+                try {
+                    const userInfo = getUserInfoForAPI();
+                    const req = {
+                        providerId: defaultProviderId,
+                        workflowInstanceId,
+                        userreferenceid: userInfo.userReferenceId,
+                        applicationid: applicationId,
+                        entityid: '',
+                        applicationId: applicationId,
+                        customerId: customerId,
+                    } as any;
+                    const res = await getCustomerApplicationDetails(req).unwrap();
+                    if (!isActive) return;
+                    const nominee = res?.data?.nominee;
+                    if (nominee && Object.keys(nominee).length > 0) {
+                        // ✅ Prefill only if nominee has valid data
+                        const makeNomination = nominee?.intend_to_nominate ? 'Yes' : 'No';
+                        const convertFromISO = (iso: string): string => {
+                            if (!iso) return '';
+                            const [y, m, d] = iso.split('-');
+                            if (y && m && d) return `${d.padStart(2, '0')}/${m.padStart(2, '0')}/${y}`;
+                            return '';
+                        };
+
+                        setForm(prev => ({
+                            ...prev,
+                            makeNomination,
+                            nomineeTitle: nominee?.prefix || '',
+                            nomineeName: nominee?.full_name || '',
+                            relationship: nominee?.relation || '',
+                            dateOfBirth: convertFromISO((nominee as any)?.dob || ''),
+                            printNameOnCertificate: !!nominee?.print_name_on_certificate,
+                        }));
+                    } else {
+                        // 🧹 No nominee data — leave dropdowns empty
+                        setForm({
+                            makeNomination: '',
+                            nomineeTitle: '',
+                            nomineeName: '',
+                            relationship: '',
+                            dateOfBirth: '',
+                            printNameOnCertificate: false,
+                        });
+                    }
+                } catch (e) {
+                    // On error, do not prefill anything
+                    setForm({
+                        makeNomination: '',
+                        nomineeTitle: '', // Empty to show placeholder "No"
+                        nomineeName: '',
+                        relationship: '', // Empty to show placeholder "No"
+                        dateOfBirth: '',
+                        printNameOnCertificate: false,
+                    });
+                }
+            })();
+            return () => { isActive = false; };
+        }, [defaultProviderId, workflowInstanceId, applicationId, customerId, getCustomerApplicationDetails])
+    );
+
+    const closeAllMenus = () => {
+        setOpenMenus({ makeNomination: false, title: false, relationship: false });
+    };
+
+    const updateField = (field: keyof NomineeData, value: string | boolean) => {
+        closeAllMenus();
+        setForm(prev => {
+            // Handle dependent clearing when user selects No for nomination
+            if (field === 'makeNomination') {
+                const isYes = String(value).toLowerCase() === 'yes';
+                if (!isYes) {
+                    return {
+                        ...prev,
+                        makeNomination: String(value),
+                        nomineeTitle: '',
+                        nomineeName: '',
+                        relationship: '',
+                        customRelationship: '',
+                        dateOfBirth: '',
+                        printNameOnCertificate: false,
+                    };
+                }
+                // If switching to Yes and fields are empty, prefill with first master data options
+                return {
+                    ...prev,
+                    makeNomination: String(value),
+                    nomineeTitle: prev.nomineeTitle || "",
+                    relationship: prev.relationship || "",
+                };
+            }
+            const next = { ...prev, [field]: value } as NomineeData;
+            if (field === 'relationship') {
+                const rel = String(value || '').trim().toLowerCase();
+                const isOther = rel === 'other' || rel === 'others';
+                if (!isOther) {
+                    (next as any).customRelationship = '';
+                    setFieldErrors(prevErr => ({ ...prevErr, customRelationship: '' }));
+                }
+            }
+            return next;
+        });
+    };
+
+    const toggleMenu = (key: keyof typeof openMenus) => {
+        // Remove focus from nominee name field when any dropdown is clicked
+        nomineeNameRef.current?.blur();
+
+        setOpenMenus(prev => ({
+            makeNomination: key === 'makeNomination' ? !prev.makeNomination : false,
+            title: key === 'title' ? !prev.title : false,
+            relationship: key === 'relationship' ? !prev.relationship : false,
+        }));
+    };
+
+    // Date picker functions
+    const openDatePicker = () => {
+        if (datePickerLockRef.current || showDatePicker) return;
+        datePickerLockRef.current = true;
+        closeAllMenus();
+        // Remove focus from nominee name field when date picker is opened
+        nomineeNameRef.current?.blur();
+
+        // Parse existing date from field
+        if (form.dateOfBirth && form.dateOfBirth.trim() !== '') {
+            const dateParts = form.dateOfBirth.split('/');
+            if (dateParts.length === 3) {
+                const day = parseInt(dateParts[0], 10);
+                const month = parseInt(dateParts[1], 10);
+                const year = parseInt(dateParts[2], 10);
+
+                // 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);
+                    if (!isNaN(parsedDate.getTime()) && parsedDate.getDate() === day && parsedDate.getMonth() === month - 1 && parsedDate.getFullYear() === year) {
+                        setSelectedDate(parsedDate);
+                    } else {
+                        // If parsing fails, use current date
+                        setSelectedDate(new Date());
+                    }
+                } else {
+                    // If validation fails, use current date
+                    setSelectedDate(new Date());
+                }
+            } else {
+                // If format is invalid, use current date
+                setSelectedDate(new Date());
+            }
+        } else {
+            // If no date in field, use current date
+            setSelectedDate(new Date());
+        }
+        setShowDatePicker(true);
+    };
+
+    const closeDatePicker = () => {
+        setShowDatePicker(false);
+        // Release the lock shortly after closing to avoid immediate re-open from the same tap
+        setTimeout(() => { datePickerLockRef.current = false; }, 500);
+    };
+
+    const onDateChange = (event: any, selectedDate?: Date) => {
+
+        closeDatePicker();
+        if (Platform.OS === 'android') {
+            // Android fires with types: 'set' and 'dismissed'
+            if (event?.type === 'set' && selectedDate) {
+                setSelectedDate(selectedDate);
+
+                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())) {
+                    age--;
+                }
+
+                if (age < 18) {
+                    updateField('dateOfBirth', '');
+                    Alert.alert('Invalid Age', 'Nominee must be at least 18 years old.');
+                    closeDatePicker();
+                    return;
+                }
+
+                const day = selectedDate.getDate().toString().padStart(2, '0');
+                const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0');
+                const year = selectedDate.getFullYear().toString();
+                const formattedDate = `${day}/${month}/${year}`;
+                updateField('dateOfBirth', formattedDate);
+                closeDatePicker();
+                return;
+            }
+            if (event?.type === 'dismissed') {
+                closeDatePicker();
+                return;
+            }
+            return;
+        }
+
+        // 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();
+            const formattedDate = `${day}/${month}/${year}`;
+            updateField('dateOfBirth', formattedDate);
+        }
+    };
+
+    const renderDropdown = (
+        label: string,
+        value: string,
+        field: keyof NomineeData,
+        options: string[],
+        menuKey: keyof typeof openMenus,
+    ) => {
+        // Determine placeholder based on field
+        let placeholderText: string = NOMINEE_STRINGS.MAKE_NOMINATION_PLACEHOLDER;
+        if (field === 'relationship') {
+            placeholderText = NOMINEE_STRINGS.RELATIONSHIP_PLACEHOLDER;
+        } else if (field === 'nomineeTitle') {
+            placeholderText = NOMINEE_STRINGS.NOMINEE_TITLE_PLACEHOLDER;
+        }
+
+        return (
+            <View>
+                <TextFieldWithLabel
+                    label={label}
+                    value={value}
+                    onChangeText={(text) => updateField(field, text)}
+                    variant="dropdown"
+                    options={options}
+                    isDropdownOpen={openMenus[menuKey]}
+                    onDropdownToggle={() => toggleMenu(menuKey)}
+                    onDropdownSelect={(option) => {
+                        closeAllMenus();
+                        updateField(field, option);
+                        setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                    }}
+                    placeholder={placeholderText}
+                    placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,32,34,0.2)'}
+                />
+                {openMenus[menuKey] && (
+                    <View style={styles.inlineMenu}>
+                        {options.map(option => (
+                            <TouchableOpacity
+                                key={option}
+                                style={styles.modalOption}
+                                onPress={() => {
+                                    closeAllMenus();
+                                    updateField(field, option);
+                                    setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                                }}
+                            >
+                                <Text style={styles.modalOptionText}>{option}</Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                )}
+                {/* Show custom relationship field when 'Other' selected */}
+                {field === 'relationship' && ((String(value || '').trim().toLowerCase() === 'other') || (String(value || '').trim().toLowerCase() === 'others')) && (
+                    <View>
+                        <TextFieldWithLabel
+                            label=""
+                            containerStyle={{ marginTop: -40 }}
+                            value={form.customRelationship || ''}
+                            onChangeText={(text) => {
+                                const lettersOnly = text.replace(/[^A-Za-z ]/g, '');
+                                // Validate on change
+                                const rel = String(form.relationship || '').trim().toLowerCase();
+                                const isOther = rel === 'other' || rel === 'others';
+                                if (isOther) {
+                                    if (!lettersOnly || lettersOnly.trim().length === 0) {
+                                        setFieldErrors(prev => ({ ...prev, customRelationship: 'Relationship is required' }));
+                                    } else if (lettersOnly.trim().length < 2) {
+                                        setFieldErrors(prev => ({ ...prev, customRelationship: 'Relationship must be at least 2 characters' }));
+                                    } else {
+                                        setFieldErrors(prev => ({ ...prev, customRelationship: '' }));
+                                    }
+                                } else {
+                                    setFieldErrors(prev => ({ ...prev, customRelationship: '' }));
+                                }
+                                updateField('customRelationship' as any, lettersOnly);
+                            }}
+                            placeholder={'Enter Custom Relationship'}
+                            placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+                            variant="text"
+                        />
+                        {fieldErrors.customRelationship ? (
+                            <View style={styles.errorContainer}>
+                                {Platform.OS === 'android' && (
+                                    <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
+                                )}
+                                <Text style={styles.errorText}>{fieldErrors.customRelationship}</Text>
+                            </View>
+                        ) : null}
+                    </View>
+                )}
+            </View>
+        );
+    };
+
+    const renderNomineeNameFields = () => (
+        <View>
+            <Text style={styles.fieldLabel}>{NOMINEE_STRINGS.NOMINEE_NAME_LABEL}</Text>
+            <View style={styles.nameFieldsContainer}>
+                <View style={styles.titleField}>
+                    {renderDropdown('', form.nomineeTitle, 'nomineeTitle', nomineePrefixOptions, 'title')}
+                </View>
+                <View style={styles.nameField}>
+                    <TextFieldWithLabel
+                        label=""
+                        value={form.nomineeName}
+                        onChangeText={(text) => { closeAllMenus(); updateField('nomineeName', text); }}
+                        onFocus={() => { closeAllMenus(); }}
+                        textInputRef={nomineeNameRef}
+                        placeholder={NOMINEE_STRINGS.NOMINEE_NAME_PLACEHOLDER}
+                        placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+                        variant="text"
+                    />
+                </View>
+            </View>
+        </View>
+    );
+
+    const renderDateField = (
+        label: string,
+        value: string,
+        field: keyof NomineeData,
+    ) => (
+        <TextFieldWithLabel
+            label={label}
+            value={value}
+            onChangeText={(text) => updateField(field, text)}
+            variant="date"
+            placeholder="DD/MM/YYYY"
+            placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+            maxLength={10}
+            dateFormat="DD/MM/YYYY"
+            onDatePress={() => {
+                if (datePickerLockRef.current || showDatePicker) return;
+                closeAllMenus();
+                openDatePicker();
+            }}
+            editable={false}
+            keepWhiteBackground={true}
+            inputStyle={{ color: 'white' }}
+        />
+    );
+
+    // Validation function to check if all required fields are filled (pure function - no setState)
+    const validateForm = (): boolean => {
+        // If makeNomination is "No", no other fields are required
+        if (form.makeNomination.toLowerCase() === 'no') {
+            return true;
+        }
+
+        // If makeNomination is "Yes", all nominee fields are required
+        const requiredFields = [
+            form.nomineeTitle,
+            form.nomineeName,
+            form.relationship,
+            form.dateOfBirth,
+        ];
+
+        const baseValid = requiredFields.every(field => field && field.trim().length > 0);
+        const rel = String(form.relationship || '').trim().toLowerCase();
+        const needsCustom = rel === 'other' || rel === 'others';
+        if (needsCustom) {
+            const customRel = String(form.customRelationship || '').trim();
+            if (!customRel || customRel.length < 2) {
+                return false;
+            }
+        }
+        return baseValid;
+    };
+
+    const handleSave = async () => {
+        try {
+            // Clear previous errors
+            setFieldErrors({});
+
+            // Validate all required fields
+            const rel = String(form.relationship || '').trim().toLowerCase();
+            const needsCustom = rel === 'other' || rel === 'others';
+            if (needsCustom) {
+                const customRel = String(form.customRelationship || '').trim();
+                if (!customRel) {
+                    setFieldErrors(prev => ({ ...prev, customRelationship: 'Relationship is required' }));
+                    Alert.alert(COMMON_STRINGS.REQUIRED_FIELD, COMMON_STRINGS.FILL_REQUIRED_FIELDS);
+                    return;
+                }
+                if (customRel.length < 2) {
+                    setFieldErrors(prev => ({ ...prev, customRelationship: 'Relationship must be at least 2 characters' }));
+                    Alert.alert(COMMON_STRINGS.REQUIRED_FIELD, 'Relationship must be at least 2 characters');
+                    return;
+                }
+            }
+
+            if (!validateForm()) {
+                Alert.alert(COMMON_STRINGS.REQUIRED_FIELD, COMMON_STRINGS.FILL_REQUIRED_FIELDS);
+                return;
+            }
+
+            // Get user info from app data
+            const userInfo = getUserInfoForAPI();
+
+            // Convert date from DD/MM/YYYY to ISO 8601 format (YYYY-MM-DD)
+            const convertToISO8601 = (dateString: string): string => {
+                if (!dateString) return '';
+                const [day, month, year] = dateString.split('/');
+                if (day && month && year) {
+                    const isoDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+                    return isoDate;
+                }
+                return '';
+            };
+
+            const customerNomineeRequest = {
+                providerId: defaultProviderId,
+                workflowInstanceId, // from store
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                // Only the specified parameters
+                customerId: customerId,
+                intentToNominate: form.makeNomination === 'Yes',
+                fullName: form.nomineeName,
+                nomineePrefix: form.nomineeTitle,
+                relation: form.relationship,
+                customRelation: form.customRelationship || '',
+                dob: convertToISO8601(form.dateOfBirth),
+                nomineeNameOnCertificate: form.printNameOnCertificate,
+            };
+            const response = await customerNominee(customerNomineeRequest).unwrap();
+            onSave?.(form);
+        } catch (error) {
+
+            // Show error message to user
+            Alert.alert(
+                NOMINEE_STRINGS.NOMINEE_SAVED_FAILED,
+                NOMINEE_STRINGS.NOMINEE_SAVE_ERROR,
+                [{ text: COMMON_STRINGS.OK }]
+            );
+
+            // Do not call onSave on failure - stay on current screen
+            // User can retry or correct their information
+        }
+    };
+
+    // 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: '',
+            });
+        } catch (e) {
+            // Handle error silently
+        } finally {
+            setIsGoingBack(false);
+            navigate('Employee');
+        }
+    };
+
+    // 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]);
+
+    return (
+        <SafeAreaWrapper includeTop={false} bottomPadding={25} statusBarColor="#000000" statusBarStyle="light-content">
+            <Header title={NOMINEE_STRINGS.NOMINEE_DETAILS_TITLE} onBackPress={handleBackPress} backgroundColor={colors.primary} />
+            <KeyboardAvoidingView
+                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+                style={styles.keyboardAvoidingView}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+            >
+                <ScrollView
+                    ref={scrollViewRef}
+                    style={styles.container}
+                    showsVerticalScrollIndicator={false}
+                    contentContainerStyle={styles.scrollContent}
+                    scrollEnabled={!isLoadingCustomerNominee}
+                    keyboardShouldPersistTaps="handled"
+                >
+                    <TouchableWithoutFeedback onPress={isLoadingCustomerNominee ? undefined : closeAllMenus}>
+                        <View>
+                            {renderDropdown(
+                                NOMINEE_STRINGS.MAKE_NOMINATION_LABEL,
+                                form.makeNomination,
+                                'makeNomination',
+                                makeNominationOptions,
+                                'makeNomination'
+                            )}
+
+                            {String(form.makeNomination).toLowerCase() === 'yes' && (
+                                <>
+                                    {renderNomineeNameFields()}
+                                    {renderDropdown(NOMINEE_STRINGS.RELATIONSHIP_LABEL, form.relationship, 'relationship', nomineeRelationOptions, 'relationship')}
+                                    {renderDateField(NOMINEE_STRINGS.DATE_OF_BIRTH_LABEL, form.dateOfBirth, 'dateOfBirth')}
+
+                                    {/* Date Picker Modal */}
+                                    {showDatePicker && (
+                                        <View style={styles.datePickerContainer}>
+                                            <DateTimePicker
+                                                value={selectedDate}
+                                                mode="date"
+                                                display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+                                                onChange={onDateChange}
+                                                maximumDate={new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate())}
+                                                themeVariant="light"
+                                            />
+                                        </View>
+                                    )}
+
+                                    <View style={styles.checkboxContainer}>
+                                        <TouchableOpacity
+                                            style={styles.checkbox}
+                                            onPress={() => updateField('printNameOnCertificate', !form.printNameOnCertificate)}
+                                        >
+                                            <View style={[styles.checkboxBox, form.printNameOnCertificate && styles.checkboxChecked]}>
+                                                {form.printNameOnCertificate ? (
+                                                    <Image
+                                                        source={{ uri: (useTheme().themeName === 'dark') ? base64Images.checkBoxDark : base64Images.filledCheckBox }}
+                                                        style={{ width: 22, height: 22 }}
+                                                        resizeMode="contain"
+                                                    />
+                                                ) : (
+                                                    (useTheme().themeName === 'dark') ? (
+                                                        <Image
+                                                            source={{ uri: base64Images.unCheckBoxDark }}
+                                                            style={{ width: 22, height: 22 }}
+                                                            resizeMode="contain"
+                                                        />
+                                                    ) : null
+                                                )}
+                                            </View>
+                                        </TouchableOpacity>
+                                        <Text style={styles.checkboxText}>
+                                            {NOMINEE_STRINGS.PRINT_NAME_INSTRUCTIONS}
+                                        </Text>
+                                    </View>
+                                </>
+                            )}
+                        </View>
+                    </TouchableWithoutFeedback>
+                </ScrollView>
+            </KeyboardAvoidingView>
+            <View style={styles.footer}>
+                <ActionButton
+                    title={COMMON_STRINGS.SAVE}
+                    onPress={() => { closeAllMenus(); handleSave(); }}
+                    disabled={isLoadingCustomerNominee || !validateForm()}
+                    loading={isLoadingCustomerNominee}
+                />
+            </View>
+            {/* Overlay to disable screen interactions during API call */}
+            {isLoadingCustomerNominee && (
+                <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,
+        paddingBottom: 120,
+    },
+    footer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: colors.background,
+        paddingTop: 8,
+        paddingBottom: 16,
+    },
+    fieldLabel: { ...typography.styles.bodySmall, color: colors.textLight, marginBottom: -16 },
+    nameFieldsContainer: { flexDirection: 'row', gap: 12, marginBottom: 0 },
+    titleField: { width: 80 },
+    nameField: { flex: 1 },
+    datePickerContainer: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 20,
+        marginTop: 10,
+    },
+    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 },
+    // Added to fix TS error where these styles are referenced above
+    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 NomineeDetail;