@finspringinnovations/fdsdk 0.0.1

package/lib/screens/NomineeDetail.js

@@ -0,0 +1,592 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+const datetimepicker_1 = __importDefault(require("@react-native-community/datetimepicker"));
+// import DatePicker from 'react-native-date-picker'; // Commented out old date picker
+const SafeAreaWrapper_1 = __importDefault(require("../components/SafeAreaWrapper"));
+const components_1 = require("../components");
+const ActionButton_1 = __importDefault(require("../components/ActionButton"));
+const TextFieldWithLabel_1 = __importDefault(require("../components/TextFieldWithLabel"));
+const ThemeContext_1 = require("../theme/ThemeContext");
+const customerApi_1 = require("../api/customerApi");
+const MasterDataProvider_1 = require("../providers/MasterDataProvider");
+const store_1 = require("../store");
+const appDataConfig_1 = require("../config/appDataConfig");
+const workflowApi_1 = require("../api/workflowApi");
+const native_1 = require("@react-navigation/native");
+const helpers_1 = require("../navigation/helpers");
+const base64Images_1 = require("../constants/strings/base64Images");
+const nominee_1 = require("../constants/strings/nominee");
+const common_1 = require("../constants/strings/common");
+const makeNominationOptions = ['Yes', 'No'];
+const NomineeDetail = ({ onGoBack, onSave, initialData }) => {
+    var _a;
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    const { masterData, setMasterData } = (0, MasterDataProvider_1.useMasterData)();
+    const workflowInstanceId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.workflowInstanceId; });
+    const applicationId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.applicationId; });
+    const customerId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.customerId; });
+    const defaultProviderId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.providerId; }); // Default Shriram provider ID
+    const [customerNominee, { data: customerNomineeResponse, error: customerNomineeError, isLoading: isLoadingCustomerNominee, }] = (0, customerApi_1.useCustomerNomineeMutation)();
+    const [previousState] = (0, workflowApi_1.usePreviousStateMutation)();
+    const [getCustomerApplicationDetails] = (0, customerApi_1.useGetCustomerApplicationDetailsMutation)();
+    // Master data state
+    // const [masterData, setMasterData] = useState<{
+    //     nomineePrefix: string[];
+    //     nomineeRelation: string[];
+    // }>({
+    //     nomineePrefix: [],
+    //     nomineeRelation: [],
+    // });
+    // Loading state for back navigation
+    const [isGoingBack, setIsGoingBack] = (0, react_1.useState)(false);
+    // Form state
+    const [form, setForm] = (0, react_1.useState)({
+        makeNomination: (initialData === null || initialData === void 0 ? void 0 : initialData.makeNomination) || 'Yes',
+        nomineeTitle: '', // will be set after master data loads
+        nomineeName: (initialData === null || initialData === void 0 ? void 0 : initialData.nomineeName) || '',
+        relationship: '', // will be set after master data loads
+        customRelationship: (initialData === null || initialData === void 0 ? void 0 : initialData.customRelationship) || '',
+        dateOfBirth: (initialData === null || initialData === void 0 ? void 0 : initialData.dateOfBirth) || '',
+        printNameOnCertificate: (_a = initialData === null || initialData === void 0 ? void 0 : initialData.printNameOnCertificate) !== null && _a !== void 0 ? _a : false,
+    });
+    // Dropdown menu state
+    const [openMenus, setOpenMenus] = (0, react_1.useState)({
+        makeNomination: false,
+        title: false,
+        relationship: false,
+    });
+    // Error state for custom relationship
+    const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
+    // Date picker state
+    const [showDatePicker, setShowDatePicker] = (0, react_1.useState)(false);
+    const datePickerLockRef = (0, react_1.useRef)(false);
+    const [selectedDate, setSelectedDate] = (0, react_1.useState)(new Date());
+    // ScrollView ref for auto-scrolling
+    const scrollViewRef = (0, react_1.useRef)(null);
+    // Ref for nominee name text field
+    const nomineeNameRef = (0, react_1.useRef)(null);
+    // Derive nominee prefix and relationship options from master data
+    const normalizeOptions = (raw) => {
+        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 = (masterData === null || masterData === void 0 ? void 0 : masterData.data) || masterData || {};
+    const nomineePrefixOptions = react_1.default.useMemo(() => {
+        const raw = (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.nomineePrefix) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.titleOptions) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.prefixOptions);
+        const opts = normalizeOptions(raw);
+        return opts.length ? opts : ['Mr', 'Ms', 'Mrsww'];
+    }, [mdRoot]);
+    const nomineeRelationOptions = react_1.default.useMemo(() => {
+        const raw = (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.nomineeRelation) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.relationshipOptions) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.relations) || (mdRoot === null || mdRoot === void 0 ? void 0 : 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
+    (0, react_1.useEffect)(() => {
+        // no-op to preserve empty state when no API data
+    }, [nomineePrefixOptions, nomineeRelationOptions]);
+    // Sync selectedDate with form.dateOfBirth when form data changes
+    (0, react_1.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
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        let isActive = true;
+        (async () => {
+            var _a;
+            try {
+                const userInfo = (0, appDataConfig_1.getUserInfoForAPI)();
+                const req = {
+                    providerId: defaultProviderId,
+                    workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: '',
+                    applicationId: applicationId,
+                    customerId: customerId,
+                };
+                const res = await getCustomerApplicationDetails(req).unwrap();
+                if (!isActive)
+                    return;
+                const nominee = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.nominee;
+                if (nominee && Object.keys(nominee).length > 0) {
+                    // ✅ Prefill only if nominee has valid data
+                    const makeNomination = (nominee === null || nominee === void 0 ? void 0 : nominee.intend_to_nominate) ? 'Yes' : 'No';
+                    const convertFromISO = (iso) => {
+                        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 => (Object.assign(Object.assign({}, prev), { makeNomination, nomineeTitle: (nominee === null || nominee === void 0 ? void 0 : nominee.prefix) || '', nomineeName: (nominee === null || nominee === void 0 ? void 0 : nominee.full_name) || '', relationship: (nominee === null || nominee === void 0 ? void 0 : nominee.relation) || '', dateOfBirth: convertFromISO((nominee === null || nominee === void 0 ? void 0 : nominee.dob) || ''), printNameOnCertificate: !!(nominee === null || nominee === void 0 ? void 0 : 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, value) => {
+        closeAllMenus();
+        setForm(prev => {
+            // Handle dependent clearing when user selects No for nomination
+            if (field === 'makeNomination') {
+                const isYes = String(value).toLowerCase() === 'yes';
+                if (!isYes) {
+                    return Object.assign(Object.assign({}, 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 Object.assign(Object.assign({}, prev), { makeNomination: String(value), nomineeTitle: prev.nomineeTitle || "", relationship: prev.relationship || "" });
+            }
+            const next = Object.assign(Object.assign({}, prev), { [field]: value });
+            if (field === 'relationship') {
+                const rel = String(value || '').trim().toLowerCase();
+                const isOther = rel === 'other' || rel === 'others';
+                if (!isOther) {
+                    next.customRelationship = '';
+                    setFieldErrors(prevErr => (Object.assign(Object.assign({}, prevErr), { customRelationship: '' })));
+                }
+            }
+            return next;
+        });
+    };
+    const toggleMenu = (key) => {
+        var _a;
+        // Remove focus from nominee name field when any dropdown is clicked
+        (_a = nomineeNameRef.current) === null || _a === void 0 ? void 0 : _a.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 = () => {
+        var _a;
+        if (datePickerLockRef.current || showDatePicker)
+            return;
+        datePickerLockRef.current = true;
+        closeAllMenus();
+        // Remove focus from nominee name field when date picker is opened
+        (_a = nomineeNameRef.current) === null || _a === void 0 ? void 0 : _a.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, selectedDate) => {
+        closeDatePicker();
+        if (react_native_1.Platform.OS === 'android') {
+            // Android fires with types: 'set' and 'dismissed'
+            if ((event === null || event === void 0 ? void 0 : 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', '');
+                    react_native_1.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 === null || event === void 0 ? void 0 : 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, value, field, options, menuKey) => {
+        // Determine placeholder based on field
+        let placeholderText = nominee_1.NOMINEE_STRINGS.MAKE_NOMINATION_PLACEHOLDER;
+        if (field === 'relationship') {
+            placeholderText = nominee_1.NOMINEE_STRINGS.RELATIONSHIP_PLACEHOLDER;
+        }
+        else if (field === 'nomineeTitle') {
+            placeholderText = nominee_1.NOMINEE_STRINGS.NOMINEE_TITLE_PLACEHOLDER;
+        }
+        return (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(TextFieldWithLabel_1.default, { 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 => (Object.assign(Object.assign({}, prev), { [menuKey]: false })));
+                }, placeholder: placeholderText, placeholderColor: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,32,34,0.2)' }),
+            openMenus[menuKey] && (react_1.default.createElement(react_native_1.View, { style: styles.inlineMenu }, options.map(option => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: option, style: styles.modalOption, onPress: () => {
+                    closeAllMenus();
+                    updateField(field, option);
+                    setOpenMenus(prev => (Object.assign(Object.assign({}, prev), { [menuKey]: false })));
+                } },
+                react_1.default.createElement(react_native_1.Text, { style: styles.modalOptionText }, option)))))),
+            field === 'relationship' && ((String(value || '').trim().toLowerCase() === 'other') || (String(value || '').trim().toLowerCase() === 'others')) && (react_1.default.createElement(react_native_1.View, null,
+                react_1.default.createElement(TextFieldWithLabel_1.default, { 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 => (Object.assign(Object.assign({}, prev), { customRelationship: 'Relationship is required' })));
+                            }
+                            else if (lettersOnly.trim().length < 2) {
+                                setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customRelationship: 'Relationship must be at least 2 characters' })));
+                            }
+                            else {
+                                setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customRelationship: '' })));
+                            }
+                        }
+                        else {
+                            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customRelationship: '' })));
+                        }
+                        updateField('customRelationship', lettersOnly);
+                    }, placeholder: 'Enter Custom Relationship', placeholderColor: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)', variant: "text" }),
+                fieldErrors.customRelationship ? (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
+                    react_native_1.Platform.OS === 'android' && (react_1.default.createElement(Ionicons_1.default, { name: "warning", size: 16, color: colors.error || '#FF0000', style: styles.errorIcon })),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, fieldErrors.customRelationship))) : null))));
+    };
+    const renderNomineeNameFields = () => (react_1.default.createElement(react_native_1.View, null,
+        react_1.default.createElement(react_native_1.Text, { style: styles.fieldLabel }, nominee_1.NOMINEE_STRINGS.NOMINEE_NAME_LABEL),
+        react_1.default.createElement(react_native_1.View, { style: styles.nameFieldsContainer },
+            react_1.default.createElement(react_native_1.View, { style: styles.titleField }, renderDropdown('', form.nomineeTitle, 'nomineeTitle', nomineePrefixOptions, 'title')),
+            react_1.default.createElement(react_native_1.View, { style: styles.nameField },
+                react_1.default.createElement(TextFieldWithLabel_1.default, { label: "", value: form.nomineeName, onChangeText: (text) => { closeAllMenus(); updateField('nomineeName', text); }, onFocus: () => { closeAllMenus(); }, textInputRef: nomineeNameRef, placeholder: nominee_1.NOMINEE_STRINGS.NOMINEE_NAME_PLACEHOLDER, placeholderColor: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)', variant: "text" })))));
+    const renderDateField = (label, value, field) => (react_1.default.createElement(TextFieldWithLabel_1.default, { 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 = () => {
+        // 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 => (Object.assign(Object.assign({}, prev), { customRelationship: 'Relationship is required' })));
+                    react_native_1.Alert.alert(common_1.COMMON_STRINGS.REQUIRED_FIELD, common_1.COMMON_STRINGS.FILL_REQUIRED_FIELDS);
+                    return;
+                }
+                if (customRel.length < 2) {
+                    setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customRelationship: 'Relationship must be at least 2 characters' })));
+                    react_native_1.Alert.alert(common_1.COMMON_STRINGS.REQUIRED_FIELD, 'Relationship must be at least 2 characters');
+                    return;
+                }
+            }
+            if (!validateForm()) {
+                react_native_1.Alert.alert(common_1.COMMON_STRINGS.REQUIRED_FIELD, common_1.COMMON_STRINGS.FILL_REQUIRED_FIELDS);
+                return;
+            }
+            // Get user info from app data
+            const userInfo = (0, appDataConfig_1.getUserInfoForAPI)();
+            // Convert date from DD/MM/YYYY to ISO 8601 format (YYYY-MM-DD)
+            const convertToISO8601 = (dateString) => {
+                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 === null || onSave === void 0 ? void 0 : onSave(form);
+        }
+        catch (error) {
+            // Show error message to user
+            react_native_1.Alert.alert(nominee_1.NOMINEE_STRINGS.NOMINEE_SAVED_FAILED, nominee_1.NOMINEE_STRINGS.NOMINEE_SAVE_ERROR, [{ text: common_1.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 = (0, appDataConfig_1.getUserInfoForAPI)();
+            await previousState({
+                providerId: defaultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                entityid: '',
+            });
+        }
+        catch (e) {
+            // Handle error silently
+        }
+        finally {
+            setIsGoingBack(false);
+            (0, helpers_1.navigate)('Employee');
+        }
+    };
+    // Handle Android hardware back button
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS !== 'android')
+            return;
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+        const backHandler = react_native_1.BackHandler.addEventListener('hardwareBackPress', onHardwareBackPress);
+        return () => backHandler.remove();
+    }, [defaultProviderId, workflowInstanceId, applicationId]);
+    return (react_1.default.createElement(SafeAreaWrapper_1.default, { includeTop: false, bottomPadding: 25, statusBarColor: "#000000", statusBarStyle: "light-content" },
+        react_1.default.createElement(components_1.Header, { title: nominee_1.NOMINEE_STRINGS.NOMINEE_DETAILS_TITLE, onBackPress: handleBackPress, backgroundColor: colors.primary }),
+        react_1.default.createElement(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : undefined, style: styles.keyboardAvoidingView, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 0 : 0 },
+            react_1.default.createElement(react_native_1.ScrollView, { ref: scrollViewRef, style: styles.container, showsVerticalScrollIndicator: false, contentContainerStyle: styles.scrollContent, scrollEnabled: !isLoadingCustomerNominee, keyboardShouldPersistTaps: "handled" },
+                react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: isLoadingCustomerNominee ? undefined : closeAllMenus },
+                    react_1.default.createElement(react_native_1.View, null,
+                        renderDropdown(nominee_1.NOMINEE_STRINGS.MAKE_NOMINATION_LABEL, form.makeNomination, 'makeNomination', makeNominationOptions, 'makeNomination'),
+                        String(form.makeNomination).toLowerCase() === 'yes' && (react_1.default.createElement(react_1.default.Fragment, null,
+                            renderNomineeNameFields(),
+                            renderDropdown(nominee_1.NOMINEE_STRINGS.RELATIONSHIP_LABEL, form.relationship, 'relationship', nomineeRelationOptions, 'relationship'),
+                            renderDateField(nominee_1.NOMINEE_STRINGS.DATE_OF_BIRTH_LABEL, form.dateOfBirth, 'dateOfBirth'),
+                            showDatePicker && (react_1.default.createElement(react_native_1.View, { style: styles.datePickerContainer },
+                                react_1.default.createElement(datetimepicker_1.default, { value: selectedDate, mode: "date", display: react_native_1.Platform.OS === 'ios' ? 'spinner' : 'default', onChange: onDateChange, maximumDate: new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate()), themeVariant: "light" }))),
+                            react_1.default.createElement(react_native_1.View, { style: styles.checkboxContainer },
+                                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.checkbox, onPress: () => updateField('printNameOnCertificate', !form.printNameOnCertificate) },
+                                    react_1.default.createElement(react_native_1.View, { style: [styles.checkboxBox, form.printNameOnCertificate && styles.checkboxChecked] }, form.printNameOnCertificate ? (react_1.default.createElement(react_native_1.Image, { source: { uri: ((0, ThemeContext_1.useTheme)().themeName === 'dark') ? base64Images_1.base64Images.checkBoxDark : base64Images_1.base64Images.filledCheckBox }, style: { width: 22, height: 22 }, resizeMode: "contain" })) : (((0, ThemeContext_1.useTheme)().themeName === 'dark') ? (react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.unCheckBoxDark }, style: { width: 22, height: 22 }, resizeMode: "contain" })) : null))),
+                                react_1.default.createElement(react_native_1.Text, { style: styles.checkboxText }, nominee_1.NOMINEE_STRINGS.PRINT_NAME_INSTRUCTIONS)))))))),
+        react_1.default.createElement(react_native_1.View, { style: styles.footer },
+            react_1.default.createElement(ActionButton_1.default, { title: common_1.COMMON_STRINGS.SAVE, onPress: () => { closeAllMenus(); handleSave(); }, disabled: isLoadingCustomerNominee || !validateForm(), loading: isLoadingCustomerNominee })),
+        isLoadingCustomerNominee && (react_1.default.createElement(react_native_1.View, { style: styles.loadingOverlay, pointerEvents: "auto" })),
+        isGoingBack && (react_1.default.createElement(react_native_1.View, { style: styles.loadingOverlay, pointerEvents: "auto" },
+            react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: colors.primary })))));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.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: Object.assign(Object.assign({}, 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: Object.assign(Object.assign({}, 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: Object.assign(Object.assign({}, 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,
+    },
+});
+exports.default = NomineeDetail;

package/lib/screens/PayNow.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface PayNowProps {
+    onGoBack?: () => void;
+    onConfirm?: () => void;
+    fdData?: {
+        companyName: string;
+        amount: number;
+        fdRate: string;
+        tenure: string;
+        interestPayout: string;
+    };
+}
+declare const PayNow: React.FC<PayNowProps>;
+export default PayNow;