@finspringinnovations/fdsdk 0.0.1

package/src/screens/AadhaarVerification.tsx

@@ -0,0 +1,809 @@
+// AadhaarVerification.tsx
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, Alert, KeyboardAvoidingView, Platform, ScrollView, Keyboard, ActivityIndicator, BackHandler } from 'react-native';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { Header } from '../components';
+import AadhaarInput from '../components/AadhaarInput';
+import OTPInput from '../components/OTPInput';
+import ValidationMessage from '../components/ValidationMessage';
+import ActionButton from '../components/ActionButton';
+import { useColors, useTypography } from '../theme/ThemeContext';
+import { useEkycSendOtpMutation, useAadhaarVerifyOtpMutation } from '../api/kycApi';
+import { WORKFLOW_TASKS } from '../config/workflowConstants';
+import { useUpdateTaskMutation, useUpdateStateMutation, usePreviousStateMutation } from '../api/workflowApi';
+import { useAppSelector } from '../store';
+import { getUserInfoForAPI } from '../config/appDataConfig';
+import { navigate } from '../navigation/helpers';
+import { useGetCustomerApplicationDetailsMutation } from '../api/customerApi';
+import { useRoute } from '@react-navigation/native';
+import { getGlobalData } from '../utils/globalData';
+import { KYC_STRINGS } from '../constants/strings/kyc';
+import { COMMON_STRINGS } from '../constants/strings/common';
+
+export interface AadhaarVerificationProps {
+    onGoBack?: () => void;
+    onVerificationComplete?: (aadhaarNumber: string) => void;
+
+}
+
+
+type VerificationState = 'initial' | 'otp' | 'verified';
+
+const AadhaarVerification: React.FC<AadhaarVerificationProps> = ({
+    onGoBack,
+    onVerificationComplete,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = React.useMemo(() => createStyles(colors, typography), [colors, typography]);
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const entityId = useAppSelector((state: any) => state?.onboarding?.entityid);
+    const customerId = useAppSelector((state: any) => state?.onboarding?.customerId);
+    const wfStatus = useAppSelector((state: any) => state?.onboarding?.wfStatus);
+
+    const route = useRoute<any>();
+
+    const fdDataFromRoute = route?.params?.fdData;
+
+    // Function to get providerId dynamically (can be extended to get from app data or API)
+    const defultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+
+    // API hooks
+    const [sendOtp, { isLoading: isSendingOtp }] = useEkycSendOtpMutation();
+    const [verifyOtp, { isLoading: isVerifyingOtp }] = useAadhaarVerifyOtpMutation();
+    const [updateTask, { isLoading: isUpdatingTask }] = useUpdateTaskMutation();
+    const [updateState, { isLoading: isUpdatingState }] = useUpdateStateMutation();
+    const [previousState] = usePreviousStateMutation();
+    const [getCustomerApplicationDetails] = useGetCustomerApplicationDetailsMutation();
+
+    // State management
+    const [verificationState, setVerificationState] = useState<VerificationState>('initial');
+    const [aadhaarNumber, setAadhaarNumber] = useState('');
+    const [isGoingBack, setIsGoingBack] = useState(false);
+    const [otp, setOtp] = useState(['', '', '', '', '', '']);
+    const [sessionTime, setSessionTime] = useState(120);
+    const [isResendEnabled, setIsResendEnabled] = useState(false);
+    const [aadhaarError, setAadhaarError] = useState<string>('');
+    const [aadhaarSuccess, setAadhaarSuccess] = useState<string>('');
+    const [transactionTime, setTransactionTime] = useState<string>('');
+    const [referenceNo, setReferenceNo] = useState<string>('');
+    const [isOtpVerified, setIsOtpVerified] = useState<boolean>(false);
+    const [isOtpLocked, setIsOtpLocked] = useState<boolean>(false);
+    const [otpVerificationError, setOtpVerificationError] = useState<string>('');
+    const [isValidateOtpTaskCalled, setIsValidateOtpTaskCalled] = useState<boolean>(false);
+    // If customer/application/details has Aadhaar already, show verified view
+    React.useEffect(() => {
+        const checkAadhaarStatus = async () => {
+            try {
+                if (!applicationId || !customerId) return;
+                const userInfo = getUserInfoForAPI();
+                const details = await getCustomerApplicationDetails({
+                    providerId: defultProviderId,
+                    applicationId: applicationId,
+                    customerId: customerId,
+                    workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: entityId,
+                }).unwrap();
+
+                // Check both root level and nested data structure
+                const rootAadhaar = details?.aadhaarNumber || details?.aadharNo || details?.aadhar || details?.aadhaar;
+                const payload: any = Array.isArray(details?.data) ? details.data[0] : (details?.data ?? details);
+                const nestedAadhaar = payload?.aadhaarNumber || payload?.aadharNo || payload?.aadhar || payload?.aadhaar;
+                const aadhaarFromApi: string | undefined = rootAadhaar || nestedAadhaar;
+
+                // API response processed
+
+                if (aadhaarFromApi) {
+                    // Use the exact Aadhaar number from API response
+                    const aadhaarStr = String(aadhaarFromApi);
+
+                    setAadhaarNumber(aadhaarStr);
+
+
+                    setVerificationState('verified');
+                    setAadhaarSuccess(KYC_STRINGS.AADHAAR_ALREADY_VERIFIED);
+                }
+            } catch (e) {
+                // Non-blocking
+            }
+        };
+        checkAadhaarStatus();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [applicationId, customerId]);
+
+    // Auto send OTP when 12 digits are entered
+    const autoSendOtp = async (aadhaarNum: string) => {
+        // Start session timer
+        const timer = setInterval(() => {
+            setSessionTime((prev) => {
+                if (prev <= 1) {
+                    clearInterval(timer);
+                    setIsResendEnabled(true);
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+
+        try {
+            const userInfo = getUserInfoForAPI();
+            const response = await sendOtp({
+                providerId: defultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+                // body params
+                aadharNo: aadhaarNum,
+                panNo: userInfo.panNumber,
+                mobileNo: userInfo.mobileNumber,
+                isRetry: false,
+            }).unwrap();
+
+            // Always transition to OTP state first for better UX
+            setVerificationState('otp');
+
+            // Store transactionTime and referenceNo from response for verify API
+            // The response structure is: { data: [{ transactionTime: '...', referenceNo: '...' }], message: '...', status: '...' }
+            if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
+                const responseData = response.data[0];
+                if (responseData?.transactionTime) {
+                    setTransactionTime(responseData.transactionTime);
+                }
+                if (responseData?.referenceNo) {
+                    setReferenceNo(responseData.referenceNo);
+                }
+            }
+
+        } catch (error) {
+
+            // Don't show alert immediately, let user try to enter OTP
+            // They can use resend if needed
+            setVerificationState('initial');
+
+            // If backend returns 400, show friendly error below the text field
+            const status = (error as any)?.status || (error as any)?.data?.statusCode;
+            // if (status === 400 || status === 500) {
+            setAadhaarError(KYC_STRINGS.AADHAAR_ERROR_GENERIC);
+            //  }
+
+            // Hide timer and show resend button when API fails
+            setIsResendEnabled(true);
+            setSessionTime(0); // Hide timer text
+        }
+    };
+
+    // Format Aadhaar number with spaces (XXXX XXXX XXXX)
+    const formatAadhaarNumber = (number: string) => {
+        const cleaned = number.replace(/\s/g, '');
+        if (cleaned.length <= 4) return cleaned;
+        if (cleaned.length <= 8) return `${cleaned.slice(0, 4)} ${cleaned.slice(4)}`;
+        return `${cleaned.slice(0, 4)} ${cleaned.slice(4, 8)} ${cleaned.slice(8, 12)}`;
+    };
+
+    // Format Aadhaar number for display (show only first 4 digits, rest as XXXX)
+    const formatAadhaarForDisplay = (number: string) => {
+        const cleaned = number.replace(/\s/g, '');
+
+        // Check if it's already a masked format from API
+        if (cleaned.includes('X')) {
+            // Format masked Aadhaar with spaces: XXXX XXXX XXXX
+            if (cleaned.length === 12) {
+                return `${cleaned.slice(0, 4)} ${cleaned.slice(4, 8)} ${cleaned.slice(8, 12)}`;
+            }
+            return cleaned; // Return as-is if not 12 characters
+        }
+
+        // Handle regular Aadhaar numbers
+        if (cleaned.length < 4) return cleaned;
+        if (cleaned.length === 12) {
+            return `XXXX XXXX ${cleaned.slice(-4)}`;
+        }
+        return formatAadhaarNumber(number); // Show normal format while typing
+    };
+
+    // Handle Aadhaar number input
+    const handleAadhaarChange = (text: string) => {
+        const cleaned = text.replace(/\D/g, ''); // Remove non-digits
+        if (cleaned.length <= 12) {
+            // If user changes Aadhaar while in OTP/verified state, reset OTP flow
+            if (verificationState !== 'initial') {
+                setVerificationState('initial');
+                setOtp(['', '', '', '', '', '']);
+                setIsResendEnabled(false);
+                setSessionTime(120);
+                // Reset verification state when Aadhaar changes
+                setIsOtpVerified(false);
+                setOtpVerificationError('');
+                setIsOtpLocked(false);
+                // Reset VALIDATE_OTP task flag when Aadhaar changes
+                //setIsValidateOtpTaskCalled(false);
+            }
+
+            setAadhaarNumber(cleaned);
+
+            // Validate Aadhaar number
+            if (!cleaned) {
+                setAadhaarError('');
+                //  setAadhaarSuccess('');
+            } else if (cleaned.length < 12) {
+                setAadhaarError(KYC_STRINGS.AADHAAR_MUST_BE_12_DIGITS);
+                // setAadhaarSuccess('');
+            } else if (cleaned.length === 12) {
+                setAadhaarError('');
+                //   setAadhaarSuccess('Valid Aadhaar number');
+
+                // Auto send OTP and transition to OTP view when 12 digits are entered
+                if (verificationState === 'initial') {
+                    // Small delay to show success message briefly before transitioning
+                    setTimeout(() => {
+                        autoSendOtp(cleaned);
+                    }, 500);
+                }
+            }
+        }
+    };
+
+    // Handle OTP input
+    const handleOtpChange = (value: string, index: number) => {
+        if (value.length <= 1) {
+            const newOtp = [...otp];
+            newOtp[index] = value;
+            setOtp(newOtp);
+
+            // Reset verification state when user changes OTP
+            setIsOtpVerified(false);
+            setOtpVerificationError('');
+            // Reset VALIDATE_OTP task flag when OTP changes
+            // setIsValidateOtpTaskCalled(false);
+
+            // Check if all 6 digits are entered
+            if (newOtp.every(digit => digit !== '')) {
+                // Dismiss keyboard when all digits are entered
+                Keyboard.dismiss();
+                // Lock OTP input to prevent editing until user resends or changes Aadhaar
+                setIsOtpLocked(true);
+                // All digits entered, automatically verify OTP with the new OTP
+                handleVerifyOtpWithOtp(newOtp.join(''));
+            }
+        }
+    };
+
+    // Handle OTP backspace
+    const handleOtpKeyPress = (key: string, index: number) => {
+        // Logic is now handled in OTPInput component
+    };
+
+    // Note: handleContinueFromAadhaar is no longer needed as transition happens automatically
+    // when 12 digits are typed via autoSendOtp function
+
+    // Verify OTP with provided OTP string
+    const handleVerifyOtpWithOtp = async (otpString: string) => {
+        if (otpString.length === 6) {
+            try {
+                const userInfo = getUserInfoForAPI();
+
+                // 1) Update Task before verifying OTP (only if not already called)
+                if (!isValidateOtpTaskCalled) {
+                    await updateTask({
+                        providerId: defultProviderId,
+                        workflowInstanceId,
+                        userreferenceid: userInfo.userReferenceId,
+                        applicationid: applicationId,
+                        entityid: entityId,
+                        // Request params/body
+                        targetTaskId: WORKFLOW_TASKS.VALIDATE_OTP,
+                    }).unwrap();
+                    setIsValidateOtpTaskCalled(true);
+                } else {
+                }
+
+                // 2) Verify OTP
+
+                const response = await verifyOtp({
+                    providerId: defultProviderId,
+                    workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: entityId,
+                    // body params
+                    customerId: customerId,
+                    transactionTime: transactionTime,
+                    referenceNo: referenceNo,
+                    applicationId: applicationId,
+                    aadharNo: aadhaarNumber,
+                    mobileNo: userInfo.mobileNumber,
+                    otp: otpString,
+                }).unwrap();
+
+                // OTP verification successful; do not call updateState or navigate here.
+                // Enable Continue button via flags; navigation/state update will happen on Continue.
+                setIsOtpVerified(true);
+                setOtpVerificationError('');
+                setVerificationState('verified');
+                return;
+
+            } catch (error) {
+                // OTP verification failed
+                setIsOtpVerified(false);
+                setOtpVerificationError(KYC_STRINGS.INVALID_OR_EXPIRED_OTP);
+                // Re-enable OTP input so user can correct the code
+                setIsOtpLocked(false);
+                // Clear entered OTP to allow fresh input
+                setOtp(['', '', '', '', '', '']);
+            }
+        } else {
+            setIsOtpVerified(false);
+            setOtpVerificationError(KYC_STRINGS.OTP_INCOMPLETE);
+        }
+    };
+
+
+    // Resend OTP
+    const handleResendOtp = async () => {
+        try {
+            const userInfo = getUserInfoForAPI();
+
+            setIsValidateOtpTaskCalled(false);
+
+            // 1) First call updateTask API
+            const updateTaskResponse = await updateTask({
+                providerId: defultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+                // Request params/body
+                targetTaskId: WORKFLOW_TASKS.RESEND_OTP,
+            }).unwrap();
+
+
+            // 2) Then call OTP API with the updateTask response
+            const response = await sendOtp({
+                providerId: defultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+                // body params
+                aadharNo: aadhaarNumber,
+                panNo: userInfo.panNumber,
+                mobileNo: userInfo.mobileNumber,
+                isRetry: true,
+            }).unwrap();
+
+
+            // Store transactionTime and referenceNo from response for verify API
+            // The response structure is: { data: [{ transactionTime: '...', referenceNo: '...' }], message: '...', status: '...' }
+            if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
+                const responseData = response.data[0];
+                if (responseData?.transactionTime) {
+                    setTransactionTime(responseData.transactionTime);
+                }
+                if (responseData?.referenceNo) {
+                    setReferenceNo(responseData.referenceNo);
+                }
+            }
+
+            // Reset OTP fields and timer
+            setOtp(['', '', '', '', '', '']);
+            setSessionTime(120);
+            setIsResendEnabled(false);
+            // Reset verification state when resending OTP
+            setIsOtpVerified(false);
+            setOtpVerificationError('');
+            setIsOtpLocked(false);
+            // Reset VALIDATE_OTP task flag so it can be called again
+
+            // Reset timer
+            const timer = setInterval(() => {
+                setSessionTime((prev) => {
+                    if (prev <= 1) {
+                        clearInterval(timer);
+                        setIsResendEnabled(true);
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+            }, 1000);
+
+        } catch (error) {
+
+            // Check if it's a 500 error specifically
+            const isServerError = (error as any)?.status === 500 || (error as any)?.data?.statusCode === 500;
+            const errorMessage = isServerError
+                ? COMMON_STRINGS.SERVER_ERROR
+                : KYC_STRINGS.RESEND_OTP_FAILED;
+
+            Alert.alert(COMMON_STRINGS.ERROR, errorMessage);
+
+            // Hide timer and show resend button when API fails
+            setIsResendEnabled(true);
+            setSessionTime(0); // Hide timer text
+        }
+    };
+
+    // Format session time
+    const formatSessionTime = (seconds: number) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins.toString().padStart(2, '0')} minutes`;
+    };
+
+    const isContinueEnabled = () => {
+        switch (verificationState) {
+            case 'initial':
+                return aadhaarNumber.length === 12 && !aadhaarError;
+            case 'otp':
+                return isOtpVerified && !otpVerificationError;
+            case 'verified':
+                return true;
+            default:
+                return false;
+        }
+    };
+
+    const isLoading = isSendingOtp || isVerifyingOtp || isUpdatingTask || isUpdatingState;
+
+    const renderInitialState = () => (
+        <ScrollView
+            style={{ flex: 1 }}
+            contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 24, paddingBottom: 100 }}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+            scrollEnabled={!isLoading}
+        >
+            <AadhaarInput
+                label={KYC_STRINGS.AADHAAR_CARD_LABEL}
+                value={formatAadhaarNumber(aadhaarNumber)}
+                onChangeText={handleAadhaarChange}
+                isSuccess={!!aadhaarSuccess}
+                isLoading={isSendingOtp}
+                editable={!isSendingOtp && verificationState === 'initial'}
+            />
+            <Text style={styles.infoText}>We do not save aadhar card info.</Text>
+
+            <ValidationMessage
+                type="error"
+                message={aadhaarError}
+                visible={!!aadhaarError}
+            />
+
+            <ValidationMessage
+                type="success"
+                message={aadhaarSuccess}
+                visible={!!aadhaarSuccess && !isSendingOtp}
+            />
+
+            {/* Show loader when sending OTP */}
+            {isSendingOtp && (
+                <View style={styles.loaderContainer}>
+                    <ActivityIndicator size="large" color={colors.primary} />
+                    <Text style={styles.loaderText}>{KYC_STRINGS.SENDING_OTP}</Text>
+                </View>
+            )}
+        </ScrollView>
+    );
+
+    const renderOtpState = () => (
+        <ScrollView
+            style={{ flex: 1 }}
+            contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 24, paddingBottom: 100 }}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+            scrollEnabled={!isLoading}
+        >
+            <AadhaarInput
+                label={KYC_STRINGS.AADHAAR_CARD_LABEL}
+                value={formatAadhaarForDisplay(aadhaarNumber)}
+                onChangeText={handleAadhaarChange}
+                isSuccess={!!aadhaarSuccess}
+                editable={false}
+                isLoading={isSendingOtp}
+            />
+            <Text style={styles.infoText}>We do not save aadhar card info.</Text>
+
+            <ValidationMessage
+                type="error"
+                message={aadhaarError}
+                visible={!!aadhaarError}
+            />
+
+            <ValidationMessage
+                type="success"
+                message={aadhaarSuccess}
+                visible={!!aadhaarSuccess}
+            />
+
+            <OTPInput
+                value={otp}
+                onChangeText={handleOtpChange}
+                onKeyPress={handleOtpKeyPress}
+                sessionTime={sessionTime}
+                onResend={handleResendOtp}
+                isResendEnabled={isResendEnabled}
+                error={!!otpVerificationError}
+                errorMessage={otpVerificationError}
+                disabled={isVerifyingOtp || isSendingOtp || isOtpLocked}
+            />
+
+            {/* Error message - positioned right after OTP input, fixed position */}
+            <View style={{ minHeight: 40, marginTop: -30 }}>
+                <ValidationMessage
+                    type="error"
+                    message={otpVerificationError}
+                    visible={!!otpVerificationError}
+                />
+            </View>
+
+            {/* Show loader when verifying OTP */}
+            {isVerifyingOtp && (
+                <View style={styles.loaderContainer}>
+                    <ActivityIndicator size="large" color={colors.primary} />
+                    <Text style={styles.loaderText}>{KYC_STRINGS.VERIFYING_OTP}</Text>
+                </View>
+            )}
+
+            {/* Show loader when resending OTP */}
+            {isSendingOtp && (
+                <View style={styles.loaderContainer}>
+                    <ActivityIndicator size="large" color={colors.primary} />
+                    <Text style={styles.loaderText}>{KYC_STRINGS.RESENDING_OTP}</Text>
+                </View>
+            )}
+
+        </ScrollView>
+    );
+
+    const renderVerifiedState = () => (
+        <ScrollView
+            style={{ flex: 1 }}
+            contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 24, paddingBottom: 100 }}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+            scrollEnabled={!isLoading}
+        >
+            <View style={styles.verifiedAadhaarContainer}>
+                <AadhaarInput
+                    label={KYC_STRINGS.AADHAAR_CARD_LABEL}
+                    value={formatAadhaarForDisplay(aadhaarNumber)}
+                    onChangeText={handleAadhaarChange}
+                    isSuccess={true}
+                    editable={false}
+                />
+
+            </View>
+            <Text style={styles.infoText}>We do not save aadhar card info.</Text>
+
+            <ValidationMessage
+                type="error"
+                message={aadhaarError}
+                visible={!!aadhaarError}
+            />
+
+            <ValidationMessage
+                type="success"
+                message={KYC_STRINGS.AADHAAR_NUMBER_VERIFIED}
+                visible={true}
+            />
+        </ScrollView>
+    );
+
+    const getButtonTitle = (): string => {
+        // switch (verificationState) {
+        //     case 'initial':
+        //         return 'Continue';
+        //     case 'otp':
+        //         if (isOtpVerified) {
+        //             return 'Continue';
+        //         } else if (otpVerificationError) {
+        //             return 'Continue';
+        //         } else {
+        //             return 'Continue';
+        //         }
+        //     case 'verified':
+        //         return 'Continue';
+        //     default:
+        //         return COMMON_STRINGS.CONTINUE;
+        // }
+        return COMMON_STRINGS.CONTINUE;
+    };
+
+    const handleButtonPress = async () => {
+
+
+        if (verificationState === 'initial') {
+            if (aadhaarNumber.length === 12) {
+                autoSendOtp(aadhaarNumber);
+            }
+        } else if (verificationState === 'otp') {
+            // Only call updateState API when continue button is pressed
+            try {
+                const userInfo = getUserInfoForAPI();
+                await updateState({
+                    providerId: defultProviderId,
+                    workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: entityId,
+                    nextState: 'AadhaarVerified',
+                }).unwrap();
+
+                const data = getGlobalData();
+                // Redirect immediately after successful updateState
+                if (data.completeFDData) {
+                    navigate('PayNow', { fdData: fdDataFromRoute });
+                } else {
+                    onVerificationComplete?.(aadhaarNumber);
+                }
+                // Alert.alert('Success', 'Aadhaar verification successful 2');
+
+            } catch (error) {
+                Alert.alert(COMMON_STRINGS.ERROR, KYC_STRINGS.FAILED_TO_PROCEED);
+            }
+        } else if (verificationState === 'verified') {
+
+            try {
+                const userInfo = getUserInfoForAPI();
+                await updateState({
+                    providerId: defultProviderId,
+                    workflowInstanceId,
+                    userreferenceid: userInfo.userReferenceId,
+                    applicationid: applicationId,
+                    entityid: entityId,
+                    nextState: 'AadhaarVerified',
+                }).unwrap();
+
+                const data = getGlobalData();
+                // Redirect only after successful updateState
+                if (data.completeFDData) {
+                    navigate('PayNow', { fdData: fdDataFromRoute });
+                } else {
+                    onVerificationComplete?.(aadhaarNumber);
+                }
+                // Alert.alert('Success', 'Aadhaar verification successful 3');
+            } catch (error) {
+                Alert.alert(COMMON_STRINGS.ERROR, KYC_STRINGS.FAILED_TO_PROCEED);
+            }
+        }
+    };
+
+    // Handler for back button (used by both header and hardware back button)
+    const handleBackPress = async () => {
+        setIsGoingBack(true);
+        try {
+            const userInfo = getUserInfoForAPI();
+            await previousState({
+                providerId: defultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                entityid: entityId,
+            });
+        } catch (e) {
+            // Handle error silently
+        } finally {
+            setIsGoingBack(false);
+            // onGoBack?.();
+            navigate('ReviewKYC');
+        }
+    };
+
+    // Handle Android hardware back button
+    useEffect(() => {
+        if (Platform.OS !== 'android') return;
+
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            'hardwareBackPress',
+            onHardwareBackPress
+        );
+
+        return () => backHandler.remove();
+    }, [defultProviderId, workflowInstanceId, applicationId, entityId]);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={false}
+            bottomPadding={25}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            <Header
+                title={KYC_STRINGS.AADHAAR_VERIFICATION_TITLE}
+                onBackPress={handleBackPress}
+            />
+
+            <KeyboardAvoidingView
+                style={{ flex: 1 }}
+                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
+            >
+                {verificationState === 'initial' && renderInitialState()}
+                {verificationState === 'otp' && renderOtpState()}
+                {verificationState === 'verified' && renderVerifiedState()}
+
+                <View style={{ paddingHorizontal: 16, paddingBottom: 6 }}>
+                    <ActionButton
+                        title={getButtonTitle()}
+                        onPress={handleButtonPress}
+                        disabled={!isContinueEnabled()}
+                        loading={isLoading}
+                    />
+                </View>
+            </KeyboardAvoidingView>
+            {/* Overlay to disable screen interactions during API call */}
+            {isLoading && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                </View>
+            )}
+            {/* Loading overlay for back navigation */}
+            {isGoingBack && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                    <ActivityIndicator size="large" color={colors.primary} />
+                </View>
+            )}
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any, typography: any) => StyleSheet.create({
+    infoText: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginTop: 8,
+        marginBottom: 16,
+    },
+    verifiedAadhaarContainer: {
+        position: 'relative',
+        marginBottom: 8,
+    },
+    verifiedBadge: {
+        position: 'absolute',
+        top: 8,
+        right: 12,
+        backgroundColor: '#4CAF50',
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+        zIndex: 1,
+    },
+    verifiedText: {
+        color: 'white',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    loaderContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 16,
+        marginBottom: 8,
+    },
+    loaderText: {
+        ...typography.styles.bodyMedium,
+        color: colors.text,
+        marginLeft: 12,
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1000,
+    },
+
+});
+
+export default AadhaarVerification;