@finspringinnovations/fdsdk 0.0.1

package/lib/screens/Employee.js

@@ -0,0 +1,594 @@
+"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 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 MasterDataProvider_1 = require("../providers/MasterDataProvider");
+const customerApi_1 = require("../api/customerApi");
+const store_1 = require("../store");
+const appDataConfig_1 = require("../config/appDataConfig");
+const workflowApi_1 = require("../api/workflowApi");
+const helpers_1 = require("../navigation/helpers");
+const native_1 = require("@react-navigation/native");
+const employee_1 = require("../constants/strings/employee");
+const common_1 = require("../constants/strings/common");
+// These will be replaced/augmented with master data
+const defaultOccupationOptions = ['Salaried', 'Self Employed', 'Professional', 'Student', 'Retired', 'Other'];
+const defaultNatureOfBusinessOptions = ['IT Services', 'Manufacturing', 'Trading', 'Finance', 'Other'];
+const defaultAnnualIncomeOptions = ['< 2 lakhs', '3-5 lakhs', '5-10 lakhs', '10-20 lakhs', '> 20 lakhs'];
+const defaultSourceOfFundOptions = ['Salary', 'Business', 'Investment', 'Individual', 'Other'];
+const defaultPepOptions = ['Individual', 'Family Member', 'Associate', 'No'];
+const Employee = ({ onGoBack, onContinue, initialData }) => {
+    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; });
+    // Get providerId from app data or use default
+    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
+    // Customer Occupation API
+    const [customerOccupation, { data: customerOccupationResponse, error: customerOccupationError, isLoading: isLoadingCustomerOccupation, }] = (0, customerApi_1.useCustomerOccupationMutation)();
+    // Previous State API
+    const [previousState] = (0, workflowApi_1.usePreviousStateMutation)();
+    // Customer Application Details API (called on focus)
+    const [getCustomerApplicationDetails, { data: customerApplicationDetailsResponse, error: customerApplicationDetailsError, isLoading: isLoadingCustomerApplicationDetails, }] = (0, customerApi_1.useGetCustomerApplicationDetailsMutation)();
+    // Call customer/application/details whenever this screen gains focus
+    (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: '',
+                    // Body params
+                    applicationId: applicationId,
+                    customerId: customerId,
+                };
+                const res = await getCustomerApplicationDetails(req).unwrap();
+                if (!isActive)
+                    return;
+                // Set form data from employment object in API response
+                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.employment) {
+                    const employment = res.data.employment;
+                    setForm(prev => (Object.assign(Object.assign({}, prev), { occupation: employment.occupation || '', natureOfBusiness: employment.nature_of_business || '', customOccupation: employment.custom_occupation || '', customNatureOfBusiness: employment.custom_nature_of_business || '', annualIncome: employment.income || '', sourceOfFund: employment.source_of_fund || '', customSourceOfFund: employment.custom_source_of_fund || '', politicallyExposedPerson: employment.politically_exposed_person || '' })));
+                }
+                else {
+                    // If employment is empty, clear all fields
+                    setForm(prev => (Object.assign(Object.assign({}, prev), { occupation: '', natureOfBusiness: '', customOccupation: '', customNatureOfBusiness: '', annualIncome: '', sourceOfFund: '', customSourceOfFund: '', politicallyExposedPerson: '' })));
+                }
+            }
+            catch (e) {
+                if (!isActive)
+                    return;
+            }
+        })();
+        return () => { isActive = false; };
+    }, [defaultProviderId, workflowInstanceId, applicationId, customerId, getCustomerApplicationDetails]));
+    // Customer occupation API status monitored
+    // Helper to normalize arrays/CSV strings to string[]
+    const normalizeOptions = (raw, fallback) => {
+        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 fallback;
+    };
+    // Master data root may be data-wrapped
+    const md = (masterData === null || masterData === void 0 ? void 0 : masterData.data) || masterData || {};
+    // Get options from master data with fallbacks
+    const occupationOptions = react_1.default.useMemo(() => {
+        const fromGlobal = (md === null || md === void 0 ? void 0 : md.occupation) || (masterData === null || masterData === void 0 ? void 0 : masterData.occupation);
+        return normalizeOptions(fromGlobal, defaultOccupationOptions);
+    }, [md, masterData]);
+    const natureOfBusinessOptions = react_1.default.useMemo(() => {
+        const raw = (md === null || md === void 0 ? void 0 : md.natureOfBusiness) || (md === null || md === void 0 ? void 0 : md.natureOfBusinessOptions) || (md === null || md === void 0 ? void 0 : md.natureOfBusinessList);
+        return normalizeOptions(raw, defaultNatureOfBusinessOptions);
+    }, [md]);
+    const annualIncomeOptions = react_1.default.useMemo(() => {
+        const raw = (md === null || md === void 0 ? void 0 : md.annualIncome) || (md === null || md === void 0 ? void 0 : md.annualIncomeOptions) || (md === null || md === void 0 ? void 0 : md.annualIncomeList);
+        return normalizeOptions(raw, defaultAnnualIncomeOptions);
+    }, [md]);
+    const sourceOfFundOptions = react_1.default.useMemo(() => {
+        const raw = (md === null || md === void 0 ? void 0 : md.sourceOfFund) || (md === null || md === void 0 ? void 0 : md.sourceOfFundOptions) || (md === null || md === void 0 ? void 0 : md.sourceOfFundList) || (md === null || md === void 0 ? void 0 : md.sourceOfFunds);
+        return normalizeOptions(raw, defaultSourceOfFundOptions);
+    }, [md]);
+    const pepOptions = react_1.default.useMemo(() => {
+        const raw = (md === null || md === void 0 ? void 0 : md.pepOptions)
+            || (md === null || md === void 0 ? void 0 : md.politicallyExposedPersonOptions)
+            || (md === null || md === void 0 ? void 0 : md.pepList)
+            || (md === null || md === void 0 ? void 0 : md.politicallyExposedPersonList)
+            || (md === null || md === void 0 ? void 0 : md.politicallyExposedPerson) // sometimes provided as CSV/string
+            || (md === null || md === void 0 ? void 0 : md.pep); // alternate short key
+        return normalizeOptions(raw, defaultPepOptions);
+    }, [md]);
+    const [form, setForm] = (0, react_1.useState)({
+        occupation: (initialData === null || initialData === void 0 ? void 0 : initialData.occupation) || (occupationOptions[0] || 'Self Employed'),
+        natureOfBusiness: (initialData === null || initialData === void 0 ? void 0 : initialData.natureOfBusiness) || (natureOfBusinessOptions[0] || 'Other'),
+        customOccupation: (initialData === null || initialData === void 0 ? void 0 : initialData.customOccupation) || '',
+        customNatureOfBusiness: (initialData === null || initialData === void 0 ? void 0 : initialData.customNatureOfBusiness) || '',
+        annualIncome: (initialData === null || initialData === void 0 ? void 0 : initialData.annualIncome) || (annualIncomeOptions[0] || defaultAnnualIncomeOptions[0]),
+        sourceOfFund: (initialData === null || initialData === void 0 ? void 0 : initialData.sourceOfFund) || (sourceOfFundOptions[0] || defaultSourceOfFundOptions[0]),
+        customSourceOfFund: (initialData === null || initialData === void 0 ? void 0 : initialData.customSourceOfFund) || '',
+        politicallyExposedPerson: (initialData === null || initialData === void 0 ? void 0 : initialData.politicallyExposedPerson) || (pepOptions[0] || defaultPepOptions[0]),
+    });
+    // Keep selections valid if options change after load
+    react_1.default.useEffect(() => {
+        setForm(prev => (Object.assign(Object.assign({}, prev), { occupation: occupationOptions.includes(prev.occupation) ? prev.occupation : (occupationOptions[0] || prev.occupation), natureOfBusiness: natureOfBusinessOptions.includes(prev.natureOfBusiness) ? prev.natureOfBusiness : (natureOfBusinessOptions[0] || prev.natureOfBusiness), annualIncome: annualIncomeOptions.includes(prev.annualIncome) ? prev.annualIncome : (annualIncomeOptions[0] || prev.annualIncome), sourceOfFund: sourceOfFundOptions.includes(prev.sourceOfFund) ? prev.sourceOfFund : (sourceOfFundOptions[0] || prev.sourceOfFund), politicallyExposedPerson: pepOptions.includes(prev.politicallyExposedPerson) ? prev.politicallyExposedPerson : (pepOptions[0] || prev.politicallyExposedPerson) })));
+    }, [occupationOptions, natureOfBusinessOptions, annualIncomeOptions, sourceOfFundOptions, pepOptions]);
+    const [isGoingBack, setIsGoingBack] = (0, react_1.useState)(false);
+    const [openMenus, setOpenMenus] = (0, react_1.useState)({
+        occupation: false,
+        natureOfBusiness: false,
+        annualIncome: false,
+        sourceOfFund: false,
+        pep: false,
+    });
+    // Error states for custom fields
+    const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
+    // Track if continue button was pressed to disable it immediately
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    // Track if component is mounted to prevent API calls after unmount
+    const isMountedRef = react_1.default.useRef(true);
+    // Use ref for immediate synchronous check to prevent race conditions
+    const isApiCallInProgressRef = react_1.default.useRef(false);
+    // Validate custom fields when form data changes
+    react_1.default.useEffect(() => {
+        // Validate custom occupation
+        const occupationError = validateCustomField('customOccupation', form.customOccupation, 'occupation');
+        setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customOccupation: occupationError })));
+        // Validate custom nature of business
+        const natureError = validateCustomField('customNatureOfBusiness', form.customNatureOfBusiness, 'natureOfBusiness');
+        setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customNatureOfBusiness: natureError })));
+        // Validate custom source of fund
+        const sourceError = validateCustomField('customSourceOfFund', form.customSourceOfFund, 'sourceOfFund');
+        setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customSourceOfFund: sourceError })));
+    }, [form.occupation, form.natureOfBusiness, form.sourceOfFund, form.customOccupation, form.customNatureOfBusiness, form.customSourceOfFund]);
+    // Validate custom field and set error
+    const validateCustomField = (field, value, parentField) => {
+        const parentValue = String(form[parentField] || '').trim().toLowerCase();
+        const isOther = parentValue === 'other' || parentValue === 'others';
+        // Show error immediately when "Other" is selected, even if custom field is empty
+        if (isOther) {
+            if (!value || value.trim().length === 0) {
+                // Get user-friendly label based on parent field
+                let label = '';
+                switch (parentField) {
+                    case 'occupation':
+                        label = employee_1.EMPLOYEE_STRINGS.OCCUPATION_LABEL;
+                        break;
+                    case 'natureOfBusiness':
+                        label = employee_1.EMPLOYEE_STRINGS.NATURE_OF_BUSINESS_LABEL;
+                        break;
+                    case 'sourceOfFund':
+                        label = employee_1.EMPLOYEE_STRINGS.SOURCE_OF_FUND_LABEL;
+                        break;
+                    default:
+                        label = parentField;
+                }
+                return `${label} is required`;
+            }
+            // Validate minimum 2 characters
+            if (value && value.trim().length > 0 && value.trim().length < 2) {
+                // Get user-friendly label based on parent field
+                let label = '';
+                switch (parentField) {
+                    case 'occupation':
+                        label = employee_1.EMPLOYEE_STRINGS.OCCUPATION_LABEL;
+                        break;
+                    case 'natureOfBusiness':
+                        label = employee_1.EMPLOYEE_STRINGS.NATURE_OF_BUSINESS_LABEL;
+                        break;
+                    case 'sourceOfFund':
+                        label = employee_1.EMPLOYEE_STRINGS.SOURCE_OF_FUND_LABEL;
+                        break;
+                    default:
+                        label = parentField;
+                }
+                return `${label} must be at least 2 characters`;
+            }
+        }
+        return '';
+    };
+    // Render error message for a field
+    const renderFieldError = (field) => {
+        const error = fieldErrors[field];
+        if (!error)
+            return null;
+        return (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 }, error)));
+    };
+    // Check if occupation is "Self Employed" to conditionally show nature of business
+    const isSelfEmployed = react_1.default.useMemo(() => {
+        const occupation = String(form.occupation || '').trim().toLowerCase();
+        return occupation === 'self employed';
+    }, [form.occupation]);
+    // Validate required fields; require custom fields when "Other" selected
+    const isFormValid = react_1.default.useMemo(() => {
+        const hasBasic = Boolean(String(form.occupation || '').trim() &&
+            (isSelfEmployed ? String(form.natureOfBusiness || '').trim() : true) &&
+            String(form.annualIncome || '').trim() &&
+            String(form.sourceOfFund || '').trim() &&
+            String(form.politicallyExposedPerson || '').trim());
+        const occ = String(form.occupation || '').trim().toLowerCase();
+        const nbf = String(form.natureOfBusiness || '').trim().toLowerCase();
+        const sof = String(form.sourceOfFund || '').trim().toLowerCase();
+        const needsCustomOcc = occ === 'other' || occ === 'others';
+        const needsCustomNob = isSelfEmployed && (nbf === 'other' || nbf === 'others');
+        const needsCustomSof = sof === 'other' || sof === 'others';
+        const customOk = ((!needsCustomOcc || String(form.customOccupation || '').trim().length >= 2) &&
+            (!needsCustomNob || String(form.customNatureOfBusiness || '').trim().length >= 2) &&
+            (!needsCustomSof || String(form.customSourceOfFund || '').trim().length >= 2));
+        return hasBasic && customOk;
+    }, [form, isSelfEmployed]);
+    const updateField = (field, value) => {
+        setForm(prev => {
+            const newForm = Object.assign(Object.assign({}, prev), { [field]: value });
+            // Clear Nature of Business fields when occupation changes to non-self-employed
+            if (field === 'occupation') {
+                const occupation = String(value || '').trim().toLowerCase();
+                const isSelfEmployed = occupation === 'self employed';
+                if (!isSelfEmployed) {
+                    newForm.natureOfBusiness = '';
+                    newForm.customNatureOfBusiness = '';
+                    // Also clear any field errors for Nature of Business
+                    setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { natureOfBusiness: '', customNatureOfBusiness: '' })));
+                }
+                // If occupation is not Other, clear customOccupation
+                const isOccOther = occupation === 'other' || occupation === 'others';
+                if (!isOccOther) {
+                    newForm.customOccupation = '';
+                    setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customOccupation: '' })));
+                }
+            }
+            // If Nature of Business changes away from Other, clear its custom field
+            if (field === 'natureOfBusiness') {
+                const nob = String(value || '').trim().toLowerCase();
+                const isOther = nob === 'other' || nob === 'others';
+                if (!isOther) {
+                    newForm.customNatureOfBusiness = '';
+                    setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customNatureOfBusiness: '' })));
+                }
+            }
+            // If Source of Fund changes away from Other, clear its custom field
+            if (field === 'sourceOfFund') {
+                const sof = String(value || '').trim().toLowerCase();
+                const isOther = sof === 'other' || sof === 'others';
+                if (!isOther) {
+                    newForm.customSourceOfFund = '';
+                    setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customSourceOfFund: '' })));
+                }
+            }
+            return newForm;
+        });
+        // Validate custom fields when they are updated
+        if (field === 'customOccupation') {
+            const error = validateCustomField('customOccupation', value, 'occupation');
+            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customOccupation: error })));
+        }
+        else if (field === 'customNatureOfBusiness') {
+            const error = validateCustomField('customNatureOfBusiness', value, 'natureOfBusiness');
+            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customNatureOfBusiness: error })));
+        }
+        else if (field === 'customSourceOfFund') {
+            const error = validateCustomField('customSourceOfFund', value, 'sourceOfFund');
+            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customSourceOfFund: error })));
+        }
+        // Also validate custom fields when parent fields change
+        if (field === 'occupation') {
+            const error = validateCustomField('customOccupation', form.customOccupation, 'occupation');
+            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customOccupation: error })));
+        }
+        else if (field === 'natureOfBusiness') {
+            const error = validateCustomField('customNatureOfBusiness', form.customNatureOfBusiness, 'natureOfBusiness');
+            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customNatureOfBusiness: error })));
+        }
+        else if (field === 'sourceOfFund') {
+            const error = validateCustomField('customSourceOfFund', form.customSourceOfFund, 'sourceOfFund');
+            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { customSourceOfFund: error })));
+        }
+    };
+    const toggleMenu = (key) => {
+        setOpenMenus(prev => ({
+            occupation: false,
+            natureOfBusiness: false,
+            annualIncome: false,
+            sourceOfFund: false,
+            pep: false,
+            [key]: !prev[key],
+        }));
+    };
+    const closeAllMenus = () => {
+        setOpenMenus({
+            occupation: false,
+            natureOfBusiness: false,
+            annualIncome: false,
+            sourceOfFund: false,
+            pep: false,
+        });
+    };
+    const renderDropdown = (label, value, field, options, menuKey) => (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: employee_1.EMPLOYEE_STRINGS.OCCUPATION_PLACEHOLDER, placeholderColor: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,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))))))));
+    // Reset button states when component mounts (in case user navigates back)
+    react_1.default.useEffect(() => {
+        isApiCallInProgressRef.current = false;
+        setIsSubmitting(false);
+    }, []);
+    // Cleanup on unmount
+    react_1.default.useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    // customer/occupation API is ONLY called when user clicks Continue button on Employee screen
+    const handleContinue = async () => {
+        var _a;
+        // Immediately disable button for double-click prevention
+        if (isApiCallInProgressRef.current || isSubmitting || isLoadingCustomerOccupation) {
+            return;
+        }
+        // Set lock synchronously
+        isApiCallInProgressRef.current = true;
+        setIsSubmitting(true);
+        try {
+            // Get user info from app data
+            const userInfo = (0, appDataConfig_1.getUserInfoForAPI)();
+            // Prepare customer occupation request data
+            const customerOccupationRequest = {
+                providerId: defaultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                customerId: customerId,
+                name: form.occupation,
+                natureOfBusiness: isSelfEmployed ? form.natureOfBusiness : '',
+                income: form.annualIncome,
+                sourceOfFund: form.sourceOfFund,
+                politicallyExposedPerson: form.politicallyExposedPerson,
+                customSourceOfFund: form.customSourceOfFund,
+                customNatureOfBusiness: isSelfEmployed ? form.customNatureOfBusiness : '',
+                customName: form.customOccupation,
+            };
+            const response = await customerOccupation(customerOccupationRequest).unwrap();
+            // Reset states before navigation to ensure button is enabled if user comes back
+            isApiCallInProgressRef.current = false;
+            setIsSubmitting(false);
+            if (!isMountedRef.current)
+                return;
+            onContinue === null || onContinue === void 0 ? void 0 : onContinue(form);
+        }
+        catch (error) {
+            // Reset states on error so user can retry
+            isApiCallInProgressRef.current = false;
+            setIsSubmitting(false);
+            if (!isMountedRef.current)
+                return;
+            const apiMessage = (error && error.data && (error.data.message || error.data.error || error.data.detail)) ||
+                (error === null || error === void 0 ? void 0 : error.error) ||
+                (error === null || error === void 0 ? void 0 : error.message) ||
+                '';
+            const fieldErrorsArr = (_a = error === null || error === void 0 ? void 0 : error.data) === null || _a === void 0 ? void 0 : _a.errors;
+            const fieldErrorsText = Array.isArray(fieldErrorsArr)
+                ? fieldErrorsArr.map((e) => (typeof e === 'string' ? e : e === null || e === void 0 ? void 0 : e.message)).filter(Boolean).join('\n')
+                : '';
+            const message = [apiMessage, fieldErrorsText]
+                .filter((s) => typeof s === 'string' && s.trim().length)
+                .join('\n') || 'Unable to save your occupation details. Please check your information and try again.';
+            react_native_1.Alert.alert('Occupation Details Save Failed', message, [{ text: common_1.COMMON_STRINGS.OK }]);
+        }
+    };
+    // 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);
+            // Navigate to ReviewKYC screen instead of just going back
+            (0, helpers_1.navigate)('ReviewKYC');
+        }
+    };
+    // 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: employee_1.EMPLOYEE_STRINGS.OCCUPATION_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, { style: styles.container, showsVerticalScrollIndicator: false, scrollEnabled: !(isLoadingCustomerOccupation || isSubmitting), keyboardShouldPersistTaps: "handled", contentContainerStyle: styles.scrollContent },
+                react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: isLoadingCustomerOccupation || isSubmitting ? undefined : closeAllMenus },
+                    react_1.default.createElement(react_native_1.View, null,
+                        renderDropdown(employee_1.EMPLOYEE_STRINGS.OCCUPATION_LABEL, form.occupation, 'occupation', occupationOptions, 'occupation'),
+                        (() => {
+                            const val = String(form.occupation || '').trim().toLowerCase();
+                            const isOther = val === 'other' || val === 'others';
+                            return isOther ? (react_1.default.createElement(react_native_1.View, null,
+                                react_1.default.createElement(TextFieldWithLabel_1.default, { label: "", containerStyle: { marginTop: -40 }, value: form.customOccupation || '', onChangeText: (text) => {
+                                        const lettersOnly = text.replace(/[^A-Za-z ]/g, '');
+                                        closeAllMenus();
+                                        updateField('customOccupation', lettersOnly);
+                                    }, placeholder: employee_1.EMPLOYEE_STRINGS.CUSTOM_OCCUPATION_PLACEHOLDER, placeholderColor: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)', variant: "text" }),
+                                renderFieldError('customOccupation'))) : null;
+                        })(),
+                        isSelfEmployed && (react_1.default.createElement(react_1.default.Fragment, null,
+                            renderDropdown(employee_1.EMPLOYEE_STRINGS.NATURE_OF_BUSINESS_LABEL, form.natureOfBusiness, 'natureOfBusiness', natureOfBusinessOptions, 'natureOfBusiness'),
+                            (() => {
+                                const val = String(form.natureOfBusiness || '').trim().toLowerCase();
+                                const isOther = val === 'other' || val === 'others';
+                                return isOther ? (react_1.default.createElement(react_native_1.View, null,
+                                    react_1.default.createElement(TextFieldWithLabel_1.default, { label: "", containerStyle: { marginTop: -40 }, value: form.customNatureOfBusiness || '', onChangeText: (text) => {
+                                            const lettersOnly = text.replace(/[^A-Za-z ]/g, '');
+                                            closeAllMenus();
+                                            updateField('customNatureOfBusiness', lettersOnly);
+                                        }, placeholder: employee_1.EMPLOYEE_STRINGS.CUSTOM_NATURE_OF_BUSINESS_PLACEHOLDER, placeholderColor: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)', variant: "text" }),
+                                    renderFieldError('customNatureOfBusiness'))) : null;
+                            })())),
+                        renderDropdown(employee_1.EMPLOYEE_STRINGS.ANNUAL_INCOME_LABEL, form.annualIncome, 'annualIncome', annualIncomeOptions, 'annualIncome'),
+                        renderDropdown(employee_1.EMPLOYEE_STRINGS.SOURCE_OF_FUND_LABEL, form.sourceOfFund, 'sourceOfFund', sourceOfFundOptions, 'sourceOfFund'),
+                        (() => {
+                            const val = String(form.sourceOfFund || '').trim().toLowerCase();
+                            const isOther = val === 'other' || val === 'others';
+                            return isOther ? (react_1.default.createElement(react_native_1.View, null,
+                                react_1.default.createElement(TextFieldWithLabel_1.default, { label: "", containerStyle: { marginTop: -40 }, value: form.customSourceOfFund || '', onChangeText: (text) => {
+                                        const lettersOnly = text.replace(/[^A-Za-z ]/g, '');
+                                        closeAllMenus();
+                                        updateField('customSourceOfFund', lettersOnly);
+                                    }, placeholder: employee_1.EMPLOYEE_STRINGS.CUSTOM_SOURCE_OF_FUND_PLACEHOLDER, placeholderColor: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)', variant: "text" }),
+                                renderFieldError('customSourceOfFund'))) : null;
+                        })(),
+                        renderDropdown(employee_1.EMPLOYEE_STRINGS.POLITICALLY_EXPOSED_PERSON_LABEL, form.politicallyExposedPerson, 'politicallyExposedPerson', pepOptions, 'pep'),
+                        react_1.default.createElement(react_native_1.View, { style: { height: 120 } }))))),
+        react_1.default.createElement(react_native_1.View, { style: styles.footer },
+            react_1.default.createElement(ActionButton_1.default, { title: common_1.COMMON_STRINGS.CONTINUE, onPress: handleContinue, disabled: isLoadingCustomerOccupation || isSubmitting || !isFormValid, loading: isLoadingCustomerOccupation || isSubmitting })),
+        (isLoadingCustomerOccupation || isSubmitting) && (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,
+    },
+    footer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: colors.background,
+        paddingTop: 8,
+        paddingBottom: 16,
+    },
+    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 }),
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+        alignItems: 'center',
+    },
+    debugButtonText: Object.assign(Object.assign({}, 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,
+    },
+});
+exports.default = Employee;

package/lib/screens/FDCalculator.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface FDCalculatorProps {
+    onGoBack?: () => void;
+    onNavigateToReviewKYC?: () => void;
+    fdData?: {
+        id: string;
+        name: string;
+        accountNumber: string;
+        roi: string;
+        tenure: string;
+        amount: number;
+        maturityDate: string;
+        status: 'active' | 'matured' | 'pending';
+        creditRating: string;
+    };
+}
+declare const FDCalculator: React.FC<FDCalculatorProps>;
+export default FDCalculator;