@finspringinnovations/fixeddepositsdk 1.0.0

package/lib/screens/ReviewKYC.js

@@ -0,0 +1,727 @@
+"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 native_1 = require("@react-navigation/native");
+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 workflowApi_1 = require("../api/workflowApi");
+const appDataConfig_1 = require("../config/appDataConfig");
+const MasterDataProvider_1 = require("../providers/MasterDataProvider");
+const helpers_1 = require("../navigation/helpers");
+const store_1 = require("../store");
+const customerApi_1 = require("../api/customerApi");
+const kycApi_1 = require("../api/kycApi");
+const base64Images_1 = require("../constants/strings/base64Images");
+const ReviewKYC = ({ onGoBack, onContinue, initialData, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const route = (0, native_1.useRoute)();
+    const fdDataFromRoute = (_a = route === null || route === void 0 ? void 0 : route.params) === null || _a === void 0 ? void 0 : _a.fdData;
+    // Route params processed
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    // Previous State API
+    const [previousState] = (0, workflowApi_1.usePreviousStateMutation)();
+    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 entityId = (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.entityid; });
+    const wfStatus = (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.wfStatus; });
+    // Customer Application Details API
+    const [getCustomerApplicationDetails, { data: customerApplicationDetails, error: customerApplicationDetailsError, isLoading: isLoadingCustomerApplicationDetails, }] = (0, customerApi_1.useGetCustomerApplicationDetailsMutation)();
+    // PAN Rapid API
+    const [panRapidNo, { data: panRapidResponse, error: panRapidError, isLoading: isLoadingPanRapid, }] = (0, kycApi_1.usePanRapidNoMutation)();
+    // Get providerId from app data or use default
+    const appData = (0, appDataConfig_1.getAppData)();
+    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 FD provider ID
+    // Use master data from global state if available
+    const effectiveMasterData = masterData;
+    // Call customer application details API on component mount
+    react_1.default.useEffect(() => {
+        // Ensure IDs are available from onboarding before calling API
+        if (!applicationId || !customerId) {
+            return;
+        }
+        // Use async/await for better error handling
+        const callAPI = async () => {
+            try {
+                // Add timeout to detect if API call is hanging
+                const timeoutPromise = new Promise((_, reject) => {
+                    setTimeout(() => reject(new Error('API call timeout after 60 seconds')), 60000);
+                });
+                // Get user info from app data
+                const userInfo = (0, appDataConfig_1.getUserInfoForAPI)();
+                const apiPromise = getCustomerApplicationDetails({
+                    providerId: defaultProviderId,
+                    applicationId: applicationId,
+                    customerId: customerId,
+                    workflowInstanceId: workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: entityId,
+                }).unwrap();
+                const response = await Promise.race([apiPromise, timeoutPromise]);
+            }
+            catch (error) {
+                // Handle error silently or implement proper error handling
+            }
+        };
+        callAPI();
+    }, [applicationId, customerId, workflowInstanceId]);
+    // Update form data when API response is received
+    react_1.default.useEffect(() => {
+        if (customerApplicationDetails === null || customerApplicationDetails === void 0 ? void 0 : customerApplicationDetails.data) {
+            const apiData = customerApplicationDetails.data;
+            // Check if KYC details exist in the response
+            if (apiData.kyc_details && Array.isArray(apiData.kyc_details) && apiData.kyc_details.length > 0) {
+                // Use the first KYC detail (assuming there's one primary KYC record)
+                const kycDetail = apiData.kyc_details[0];
+                setKycData(prev => (Object.assign(Object.assign({}, prev), { 
+                    // Map KYC detail fields to form fields - API data takes priority
+                    panCard: kycDetail.panNumber || prev.panCard, dateOfBirth: kycDetail.dob ? formatDateForDisplay(kycDetail.dob) : prev.dateOfBirth, maritalStatus: kycDetail.maritalStatus || prev.maritalStatus, kycRelation: kycDetail.kycRelation || kycDetail.KYCRelation || kycDetail.kycrelation || prev.kycRelation, kycRelationName: kycDetail.kycRelationName || kycDetail.KYCRelationName || kycDetail.kycrelationname || prev.kycRelationName, area: kycDetail.area || prev.area, city: kycDetail.city || prev.city, addressLine1: kycDetail.addressLine1 || kycDetail.address || prev.addressLine1, addressLine2: kycDetail.addressLine2 || prev.addressLine2, pincode: kycDetail.pincode || prev.pincode, state: kycDetail.state || prev.state, country: kycDetail.country || prev.country })));
+            }
+            // Also check for customer data in the response for marital status and other fields
+            if (apiData.customer) {
+                setKycData(prev => (Object.assign(Object.assign({}, prev), { maritalStatus: apiData.customer.marital_status || prev.maritalStatus, dateOfBirth: apiData.customer.dob ? formatDateForDisplay(apiData.customer.dob) : prev.dateOfBirth, kycRelation: apiData.customer.kycRelation || apiData.customer.KYCRelation || apiData.customer.kycrelation || prev.kycRelation, kycRelationName: apiData.customer.kycRelationName || apiData.customer.KYCRelationName || apiData.customer.kycrelationname || prev.kycRelationName })));
+            }
+            // Check for address data in the response
+            if (apiData.address) {
+                setKycData(prev => (Object.assign(Object.assign({}, prev), { area: apiData.address.area || prev.area, city: apiData.address.city || prev.city, addressLine1: apiData.address.line1 || prev.addressLine1, addressLine2: apiData.address.line2 || prev.addressLine2, pincode: apiData.address.pincode || prev.pincode, state: apiData.address.state || prev.state, country: apiData.address.country || prev.country })));
+            }
+        }
+    }, [customerApplicationDetails]);
+    // App data is already loaded above
+    // Helper function to format date from YYYY-MM-DD to DD/MM/YYYY
+    const formatDateForDisplay = (dateString) => {
+        if (!dateString)
+            return '';
+        const [year, month, day] = dateString.split('-');
+        return `${day}/${month}/${year}`;
+    };
+    // Marital status is now used as-is from API without any code conversion
+    // App data processed
+    // API status monitoring complete
+    const initialKycRelation = (_e = (_d = (_c = (_b = initialData === null || initialData === void 0 ? void 0 : initialData.kycRelation) !== null && _b !== void 0 ? _b : initialData === null || initialData === void 0 ? void 0 : initialData.KYCRelation) !== null && _c !== void 0 ? _c : appData === null || appData === void 0 ? void 0 : appData.kycRelation) !== null && _d !== void 0 ? _d : appData === null || appData === void 0 ? void 0 : appData.KYCRelation) !== null && _e !== void 0 ? _e : '';
+    const [kycData, setKycData] = (0, react_1.useState)({
+        panCard: (initialData === null || initialData === void 0 ? void 0 : initialData.panCard) || (appData === null || appData === void 0 ? void 0 : appData.panNumber) || '',
+        dateOfBirth: (initialData === null || initialData === void 0 ? void 0 : initialData.dateOfBirth) || formatDateForDisplay((appData === null || appData === void 0 ? void 0 : appData.dob) || ''),
+        maritalStatus: (initialData === null || initialData === void 0 ? void 0 : initialData.maritalStatus) || (appData === null || appData === void 0 ? void 0 : appData.maritalStatus) || '', // Keep empty to show placeholder
+        kycRelation: initialKycRelation, // Keep empty to show placeholder
+        kycRelationName: (initialData === null || initialData === void 0 ? void 0 : initialData.kycRelationName) || (appData === null || appData === void 0 ? void 0 : appData.kycRelationName) || '',
+        area: (initialData === null || initialData === void 0 ? void 0 : initialData.area) || (appData === null || appData === void 0 ? void 0 : appData.area) || '',
+        city: (initialData === null || initialData === void 0 ? void 0 : initialData.city) || (appData === null || appData === void 0 ? void 0 : appData.city) || '',
+        addressLine1: (initialData === null || initialData === void 0 ? void 0 : initialData.addressLine1) || (appData === null || appData === void 0 ? void 0 : appData.address) || '',
+        addressLine2: (initialData === null || initialData === void 0 ? void 0 : initialData.addressLine2) || (appData === null || appData === void 0 ? void 0 : appData.area) || '', // Use area as address line 2
+        pincode: (initialData === null || initialData === void 0 ? void 0 : initialData.pincode) || (appData === null || appData === void 0 ? void 0 : appData.pinCode) || '',
+        state: (initialData === null || initialData === void 0 ? void 0 : initialData.state) || (appData === null || appData === void 0 ? void 0 : appData.state) || '',
+        country: (initialData === null || initialData === void 0 ? void 0 : initialData.country) || (appData === null || appData === void 0 ? void 0 : appData.country) || '',
+        useExistingAddress: (_f = initialData === null || initialData === void 0 ? void 0 : initialData.useExistingAddress) !== null && _f !== void 0 ? _f : false,
+    });
+    // Error states for each field
+    const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
+    // State to track marital status dropdown visibility
+    const [showMaritalStatusMenu, setShowMaritalStatusMenu] = (0, react_1.useState)(false);
+    const [isGoingBack, setIsGoingBack] = (0, react_1.useState)(false);
+    //State to track KYC relation dropdown visibility
+    const [showKYCRelationMenu, setShowKYCRelationMenu] = (0, react_1.useState)(false);
+    // Ref to track currently focused text input
+    const focusedTextInputRef = (0, react_1.useRef)(null);
+    // Refs for each text field
+    const panCardRef = (0, react_1.useRef)(null);
+    const dateOfBirthRef = (0, react_1.useRef)(null);
+    const kycRelationNameRef = (0, react_1.useRef)(null);
+    const areaRef = (0, react_1.useRef)(null);
+    const cityRef = (0, react_1.useRef)(null);
+    const addressLine1Ref = (0, react_1.useRef)(null);
+    const addressLine2Ref = (0, react_1.useRef)(null);
+    const pincodeRef = (0, react_1.useRef)(null);
+    const stateRef = (0, react_1.useRef)(null);
+    const countryRef = (0, react_1.useRef)(null);
+    // Function to close dropdown when other fields are focused
+    const closeDropdown = () => {
+        setShowMaritalStatusMenu(false);
+        setShowKYCRelationMenu(false);
+    };
+    // Function to blur currently focused text input
+    const blurFocusedTextInput = () => {
+        if (focusedTextInputRef.current) {
+            focusedTextInputRef.current.blur();
+            focusedTextInputRef.current = null;
+        }
+    };
+    // Function to handle focus and store ref
+    const handleFieldFocus = (ref) => {
+        // Blur any previously focused field
+        blurFocusedTextInput();
+        // Store the new focused field ref
+        focusedTextInputRef.current = ref.current;
+        // Close dropdown
+        closeDropdown();
+    };
+    // Add keyboard event listener to close dropdown when keyboard appears
+    (0, react_1.useEffect)(() => {
+        const keyboardDidShowListener = react_native_1.Keyboard.addListener('keyboardDidShow', () => {
+            closeDropdown();
+        });
+        return () => {
+            keyboardDidShowListener === null || keyboardDidShowListener === void 0 ? void 0 : keyboardDidShowListener.remove();
+        };
+    }, []);
+    // Get marital status options from master data with fallback
+    const maritalStatusOptions = react_1.default.useMemo(() => {
+        try {
+            const src = (effectiveMasterData === null || effectiveMasterData === void 0 ? void 0 : effectiveMasterData.data) || effectiveMasterData || {};
+            const raw = (src === null || src === void 0 ? void 0 : src.maritalStatusOptions) ||
+                (src === null || src === void 0 ? void 0 : src.maritalStatusList) ||
+                (src === null || src === void 0 ? void 0 : src.maritalStatus) ||
+                (src === null || src === void 0 ? void 0 : src.maritalOptions);
+            if (Array.isArray(raw) && raw.length) {
+                return raw.map((v) => String(v)).filter(Boolean);
+            }
+            if (typeof raw === 'string' && raw.trim().length) {
+                return raw.split(',').map((v) => v.trim()).filter(Boolean);
+            }
+            // Fallback defaults
+            return ['Married', 'Unmarried', 'Other'];
+        }
+        catch (e) {
+            return ['Married', 'Unmarried', 'Other'];
+        }
+    }, [effectiveMasterData]);
+    const kycRelationOptions = react_1.default.useMemo(() => {
+        try {
+            const src = (effectiveMasterData === null || effectiveMasterData === void 0 ? void 0 : effectiveMasterData.data) || effectiveMasterData || {};
+            const raw = (src === null || src === void 0 ? void 0 : src.KYCRelation) ||
+                (src === null || src === void 0 ? void 0 : src.KYCRelation) ||
+                (src === null || src === void 0 ? void 0 : src.KYCRelation) ||
+                (src === null || src === void 0 ? void 0 : src.KYCRelation);
+            if (Array.isArray(raw) && raw.length) {
+                return raw.map((v) => String(v)).filter(Boolean);
+            }
+            if (typeof raw === 'string' && raw.trim().length) {
+                return raw.split(',').map((v) => v.trim()).filter(Boolean);
+            }
+            // Fallback defaults
+            return ['Father', 'Mother', 'Spouse'];
+        }
+        catch (e) {
+            return ['Father', 'Mother', 'Spouse'];
+        }
+    }, [effectiveMasterData]);
+    // Do not auto-select a default marital status; keep empty to show placeholder when not provided by main app or API
+    // Validate individual field and set error
+    const validateField = (field, value) => {
+        if (!value || value.trim().length === 0) {
+            // Use "District" for area field
+            if (field === 'area') {
+                return 'District is required';
+            }
+            if (field === 'kycRelation') {
+                return 'KYC relation is required';
+            }
+            if (field === 'kycRelationName') {
+                return 'KYC relation name is required';
+            }
+            return `${field.charAt(0).toUpperCase() + field.slice(1)} is required`;
+        }
+        // Minimum 2 characters validation for text fields (excluding PAN, pincode, dateOfBirth, maritalStatus)
+        const textFields = ['kycRelationName', 'area', 'city', 'addressLine1', 'addressLine2', 'state', 'country'];
+        if (textFields.includes(field)) {
+            if (value.trim().length < 2) {
+                // Use "Address" for addressLine1 and addressLine2
+                if (field === 'addressLine1' || field === 'addressLine2') {
+                    return 'Address must be at least 2 characters';
+                }
+                else if (field === 'area') {
+                    return 'District must be at least 2 characters';
+                }
+                return `${field.charAt(0).toUpperCase() + field.slice(1)} must be at least 2 characters`;
+            }
+        }
+        // Special validation for PAN Card
+        if (field === 'panCard') {
+            const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/;
+            const upperValue = value.toUpperCase();
+            if (!panRegex.test(upperValue)) {
+                return 'Please enter a valid PAN (e.g., ABCDE1234F)';
+            }
+        }
+        // Special validation for pincode
+        if (field === 'pincode') {
+            if (!validatePincode(value)) {
+                return 'Please enter a valid 6-digit pincode (should not start with 0)';
+            }
+        }
+        return '';
+    };
+    // Render error message for a field
+    const renderFieldError = (field) => {
+        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)));
+    };
+    // Enhanced field validation functions
+    const validateAndCleanText = (text, field) => {
+        let cleanedText = text;
+        // Apply field-specific validation
+        switch (field) {
+            case 'panCard':
+                // Only allow alphanumeric, limit to 10 characters
+                // Don't uppercase here to prevent cursor jumping - let autoCapitalize handle display
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9]/g, '').substring(0, 10);
+                break;
+            case 'area':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 50);
+                break;
+            case 'city':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 30);
+                break;
+            case 'addressLine1':
+            case 'addressLine2':
+                // Allow letters, numbers, spaces, and common address special characters (comma, period, hyphen, slash, hash, parentheses, apostrophe, quotes)
+                // Collapse multiple spaces to single space; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ,./()#'"-]/g, '').replace(/\s+/g, ' ').substring(0, 100);
+                break;
+            case 'pincode':
+                // Only allow digits and limit to 6 characters
+                cleanedText = cleanedText.replace(/[^0-9]/g, '').substring(0, 6);
+                break;
+            case 'kycRelationName':
+                cleanedText = cleanedText.replace(/[^a-zA-Z ]/g, '').replace(/\s+/g, ' ').substring(0, 50);
+                break;
+            case 'state':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 40);
+                break;
+            case 'country':
+                // Allow only letters, numbers, spaces; collapse spaces; limit length
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ').substring(0, 40);
+                break;
+            default:
+                // Default: allow only letters, numbers, spaces
+                cleanedText = cleanedText.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, ' ');
+                break;
+        }
+        return cleanedText;
+    };
+    const validatePincode = (pincode) => {
+        // Must be exactly 6 digits
+        if (pincode.length !== 6)
+            return false;
+        // Must be all digits
+        if (!/^\d{6}$/.test(pincode))
+            return false;
+        // Basic pincode validation (first digit should be 1-9, not 0)
+        if (pincode.startsWith('0'))
+            return false;
+        return true;
+    };
+    const updateField = (field, value) => {
+        // Apply validation and cleaning for text fields
+        let processedValue = value;
+        if (typeof value === 'string' && field !== 'useExistingAddress') {
+            processedValue = validateAndCleanText(value, field);
+        }
+        setKycData(prev => {
+            const newData = Object.assign(Object.assign({}, prev), { [field]: processedValue });
+            // Log checkbox state changes
+            if (field === 'useExistingAddress') {
+                // Checkbox state changed
+            }
+            return newData;
+        });
+        // Validate field and set error
+        if (typeof processedValue === 'string') {
+            const error = validateField(field, processedValue);
+            setFieldErrors(prev => (Object.assign(Object.assign({}, prev), { [field]: error })));
+        }
+    };
+    // Helper function to format date from DD/MM/YYYY back to YYYY-MM-DD
+    const formatDateForAPI = (dateString) => {
+        if (!dateString)
+            return '';
+        const [day, month, year] = dateString.split('/');
+        return `${year}-${month}-${day}`;
+    };
+    // Pass-through marital status: use the exact value from master data (no S/M/D mapping)
+    const getMaritalStatusCode = (display) => {
+        return display || '';
+    };
+    // Validation function to check if all required fields are filled and valid
+    const validateForm = () => {
+        const requiredFields = [
+            kycData.panCard,
+            kycData.dateOfBirth,
+            kycData.maritalStatus,
+            kycData.kycRelation,
+            kycData.kycRelationName,
+            kycData.area,
+            kycData.city,
+            kycData.addressLine1,
+            kycData.pincode,
+            kycData.state,
+            kycData.country,
+        ];
+        // Check if all required fields are filled
+        const allFieldsFilled = requiredFields.every(field => field && field.trim().length > 0);
+        // Check minimum 2 characters for text fields (only if field is filled)
+        const textFields = {
+            kycRelationName: kycData.kycRelationName,
+            area: kycData.area,
+            city: kycData.city,
+            addressLine1: kycData.addressLine1,
+            state: kycData.state,
+            country: kycData.country,
+        };
+        const allTextFieldsValid = Object.values(textFields).every(field => {
+            // If field is empty, it's already checked by allFieldsFilled
+            // If field has value, it must be at least 2 characters
+            return !field || field.trim().length === 0 || field.trim().length >= 2;
+        });
+        // Additional validation for pincode
+        const isPincodeValid = validatePincode(kycData.pincode);
+        return allFieldsFilled && allTextFieldsValid && isPincodeValid;
+    };
+    const handleContinue = async () => {
+        console.log('following is the provider ID', defaultProviderId);
+        // try {
+        //     // Validate all required fields
+        //     if (!validateForm()) {
+        //         // Check specifically for pincode validation
+        //         if (!validatePincode(kycData.pincode)) {
+        //             Alert.alert('Invalid Pincode', 'Please enter a valid 6-digit pincode (should not start with 0).');
+        //         } else {
+        //             Alert.alert('Required Fields', 'Please fill in all required fields before continuing.');
+        //         }
+        //         return;
+        //     }
+        //     // Convert the display format back to API format before sending
+        //     const apiFormattedData = {
+        //         ...kycData,
+        //         dateOfBirth: formatDateForAPI(kycData.dateOfBirth),
+        //         maritalStatus: getMaritalStatusCode(kycData.maritalStatus),
+        //         kycRelation: kycData.kycRelation,
+        //         kycRelationName: kycData.kycRelationName,
+        //     };
+        //     // Get user info from app data
+        //     const userInfo = getUserInfoForAPI();
+        //     // Call PAN rapid API (body fields from text fields/dropdowns)
+        //     const panRapidRequest = {
+        //         // headers via panApi: provider/workflowInstanceId/userreferenceid/applicationid
+        //         providerId: defaultProviderId,
+        //         workflowInstanceId, // from store
+        //         userreferenceid: userInfo.userReferenceId,
+        //         applicationid: applicationId,
+        //         // required body params
+        //         customerId: customerId,
+        //         applicationId: applicationId,
+        //         maritalStatus: getMaritalStatusCode(kycData.maritalStatus),
+        //         kycRelation: kycData.kycRelation,
+        //         kycRelationName: kycData.kycRelationName,
+        //         area: kycData.area,
+        //         addressLine1: kycData.addressLine1,
+        //         addressLine2: kycData.addressLine2, // Added missing addressLine2 field
+        //         city: kycData.city,
+        //         state: kycData.state,
+        //         country: kycData.country,
+        //         pincode: kycData.pincode,
+        //         panNo: kycData.panCard.toUpperCase(), // Uppercase PAN before sending to API
+        //         mobileNo: userInfo.mobileNumber,
+        //         addressConsentGiven: !!kycData.useExistingAddress,
+        //     };
+        //     const panResponse = await panRapidNo(panRapidRequest).unwrap();
+        //     // Normalize payload (API returns data as array of one element)
+        //     const payload: any = Array.isArray((panResponse as any)?.data)
+        //         ? (panResponse as any).data[0]
+        //         : (panResponse as any)?.data ?? (panResponse as any);
+        //     // Extract fields with tolerant casing/locations
+        //     const panRapidNumber = payload?.panRapidNumber ?? payload?.panrapidnumber ?? (panResponse as any)?.panRapidNumber ?? (panResponse as any)?.panrapidnumber ?? null;
+        //     // Check demographicInfoSaved gate
+        //     const demographicInfoSaved = payload?.demographicInfoSaved ?? (panResponse as any)?.demographicInfoSaved;
+        //     if (!demographicInfoSaved) {
+        //         Alert.alert('Action required', 'Your demographic information could not be saved. Please review the details and try again.');
+        //         return;
+        //     }
+        //     const data = getGlobalData();
+        //     // Decide next screen based on panrapidnumber existence
+        //     if (panRapidNumber && data.completeFDData) {
+        //         navigate('PayNow', { fdData: fdDataFromRoute });
+        //     } else if (panRapidNumber) {
+        //         navigate('Employee');
+        //     } else {
+        //         navigate('AadhaarVerification', { fdData: fdDataFromRoute });
+        //     }
+        //     // Do not trigger onContinue here; navigation is handled above
+        // } catch (error) {
+        //     // Show error message to user
+        //     Alert.alert(
+        //         'PAN Verification Failed',
+        //         'Unable to verify your PAN details. Please check your information and try again.',
+        //         [{ text: 'OK' }]
+        //     );
+        //     // Do not navigate on failure - stay on current screen
+        //     // User can retry or correct their information
+        // }
+    };
+    const renderInputField = (label, value, field, placeholder, editable = true, variant = 'text', maxLength, textInputRef) => (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), placeholder: placeholder, editable: editable, variant: variant, maxLength: maxLength, keyboardType: variant === 'numeric' ? 'numeric' : variant === 'email' ? 'email-address' : 'default', autoCapitalize: variant === 'email' ? 'none' : 'words', onFocus: () => textInputRef && handleFieldFocus(textInputRef), textInputRef: textInputRef, returnKeyType: "done", onSubmitEditing: () => {
+                if (textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) {
+                    textInputRef.current.blur();
+                }
+                react_native_1.Keyboard.dismiss();
+            } }),
+        renderFieldError(field)));
+    const renderMaritalStatusDropdown = () => {
+        return (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(TextFieldWithLabel_1.default, { label: "Marital Status", value: kycData.maritalStatus, onChangeText: (text) => updateField('maritalStatus', text), variant: "dropdown", options: maritalStatusOptions, isDropdownOpen: showMaritalStatusMenu, onDropdownToggle: () => {
+                    // Blur any focused text field when dropdown is opened
+                    blurFocusedTextInput();
+                    setShowKYCRelationMenu(false);
+                    setShowMaritalStatusMenu(prev => !prev);
+                }, onDropdownSelect: (option) => {
+                    setShowMaritalStatusMenu(false);
+                    updateField('maritalStatus', option);
+                }, placeholder: "Select Marital Status", editable: true }),
+            showMaritalStatusMenu && (react_1.default.createElement(react_native_1.View, { style: styles.inlineMenu }, maritalStatusOptions.map((option) => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: option, style: styles.modalOption, onPress: () => {
+                    setShowMaritalStatusMenu(false);
+                    updateField('maritalStatus', option);
+                } },
+                react_1.default.createElement(react_native_1.Text, { style: styles.modalOptionText }, option)))))),
+            renderFieldError('maritalStatus')));
+    };
+    const renderKycRelationDropDown = () => {
+        return (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(TextFieldWithLabel_1.default, { label: "KYC Relation", value: kycData.kycRelation, onChangeText: (text) => updateField('kycRelation', text), variant: "dropdown", options: kycRelationOptions, isDropdownOpen: showKYCRelationMenu, onDropdownToggle: () => {
+                    // Blur any focused text field when dropdown is opened
+                    blurFocusedTextInput();
+                    setShowMaritalStatusMenu(false);
+                    setShowKYCRelationMenu(prev => !prev);
+                }, onDropdownSelect: (option) => {
+                    setShowKYCRelationMenu(false);
+                    updateField('kycRelation', option);
+                }, placeholder: "Select KYC Relation", editable: true }),
+            showKYCRelationMenu && (react_1.default.createElement(react_native_1.View, { style: styles.inlineMenu }, kycRelationOptions.map((option) => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: option, style: styles.modalOption, onPress: () => {
+                    setShowKYCRelationMenu(false);
+                    updateField('kycRelation', option);
+                } },
+                react_1.default.createElement(react_native_1.Text, { style: styles.modalOptionText }, option)))))),
+            renderFieldError('kycRelation')));
+    };
+    const renderDateField = (label, value, field, editable = true, textInputRef) => (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: "date", placeholder: "DD/MM/YYYY", maxLength: 10, dateFormat: "DD/MM/YYYY", editable: editable, onFocus: () => textInputRef && handleFieldFocus(textInputRef), textInputRef: textInputRef, onDatePress: () => {
+                // TODO: Implement date picker if needed
+            }, returnKeyType: "done", onSubmitEditing: () => {
+                if (textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) {
+                    textInputRef.current.blur();
+                }
+                react_native_1.Keyboard.dismiss();
+            } }),
+        renderFieldError(field)));
+    // 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: entityId,
+            });
+        }
+        catch (e) {
+            // Handle error silently
+        }
+        finally {
+            setIsGoingBack(false);
+            //onGoBack?.();
+            (0, helpers_1.navigate)('FDCalculator');
+        }
+    };
+    // 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, entityId]);
+    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: "Review KYC", 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: !isLoadingPanRapid, keyboardShouldPersistTaps: "handled", contentContainerStyle: styles.scrollContent },
+                react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: isLoadingPanRapid ? undefined : closeDropdown },
+                    react_1.default.createElement(react_native_1.View, null,
+                        react_1.default.createElement(react_native_1.View, null,
+                            react_1.default.createElement(TextFieldWithLabel_1.default, { label: "PAN Card", value: kycData.panCard, onChangeText: (text) => updateField('panCard', text), placeholder: "Enter PAN Card", editable: false, variant: "text", maxLength: 10, keyboardType: "default", autoCapitalize: "characters", onFocus: () => handleFieldFocus(panCardRef), textInputRef: panCardRef, returnKeyType: "done", onSubmitEditing: () => {
+                                    if (panCardRef === null || panCardRef === void 0 ? void 0 : panCardRef.current) {
+                                        panCardRef.current.blur();
+                                    }
+                                    react_native_1.Keyboard.dismiss();
+                                } }),
+                            renderFieldError('panCard')),
+                        renderDateField('Date of Birth', kycData.dateOfBirth, 'dateOfBirth', false, dateOfBirthRef),
+                        renderMaritalStatusDropdown(),
+                        renderKycRelationDropDown(),
+                        renderInputField('KYC Relation Name', kycData.kycRelationName, 'kycRelationName', 'Enter KYC Relation Name', true, 'text', 50, kycRelationNameRef),
+                        renderInputField('District', kycData.area, 'area', 'Enter District', true, 'text', 50, areaRef),
+                        renderInputField('City', kycData.city, 'city', 'Enter City', true, 'text', 30, cityRef),
+                        renderInputField('Address line 1', kycData.addressLine1, 'addressLine1', 'Enter Address Line 1', true, 'text', 100, addressLine1Ref),
+                        renderInputField('Address line 2', kycData.addressLine2, 'addressLine2', 'Enter Address Line 2', true, 'text', 100, addressLine2Ref),
+                        renderInputField('Pincode', kycData.pincode, 'pincode', 'Enter Pincode', true, 'numeric', 6, pincodeRef),
+                        renderInputField('State', kycData.state, 'state', 'Enter State', true, 'text', undefined, stateRef),
+                        renderInputField('Country', kycData.country, 'country', 'Enter Country', true, 'text', undefined, countryRef),
+                        react_1.default.createElement(react_native_1.View, { style: styles.checkboxContainer },
+                            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.checkbox, onPress: () => updateField('useExistingAddress', !kycData.useExistingAddress) },
+                                react_1.default.createElement(react_native_1.View, { style: [
+                                        styles.checkboxBox,
+                                        kycData.useExistingAddress && styles.checkboxChecked
+                                    ] }, kycData.useExistingAddress ? (react_1.default.createElement(react_native_1.Image, { source: { uri: (themeName === 'dark') ? base64Images_1.base64Images.checkBoxDark : base64Images_1.base64Images.filledCheckBox }, resizeMode: "cover", width: 20, height: 20 })) : ((themeName === 'dark') ? (react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.unCheckBoxDark }, resizeMode: "cover", width: 20, height: 20 })) : null))),
+                            react_1.default.createElement(react_native_1.Text, { style: styles.checkboxText }, "For existing customers, we'll use the address from our records. For new customers, the address from your Aadhar card will be used. To update, please raise a service request with valid address proof.")))))),
+        react_1.default.createElement(ActionButton_1.default, { title: "Continue", onPress: handleContinue, disabled: !kycData.useExistingAddress || isLoadingPanRapid || !validateForm(), loading: isLoadingPanRapid }),
+        isLoadingPanRapid && (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,
+    },
+    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 }),
+    debugButtonsContainer: {
+        marginBottom: 16,
+    },
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginBottom: 8,
+        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 = ReviewKYC;