commit

src/Screens/Profile/ProfileTab.tsx

@@ -52,9 +52,14 @@ import {
   X,
   Save,
 } from 'lucide-react-native';
+import { useNavigation } from '@react-navigation/native';
 
-import { useContractorProfile, useUpdateUserProfile } from '../../Services/BBPS/Hooks';
+import { useContractorProfile, useUpdateUserProfile, useESetuAdharVarification } from '../../Services/BBPS/Hooks';
 import colors from '../../Constant/Color';
+import { useSelector } from 'react-redux';
+import ConfirmDialog from '../../Constant/Dialog/ConfirmDialog';
+import { generateTransactionId } from '../../Helper/uniqueId';
+import NavigationString from '../../Constant/NavigationString';
 
 const { width } = Dimensions.get('window');
 
@@ -102,10 +107,12 @@ interface ContractorData {
 
 interface ProfileHeaderProps {
   data: ContractorData;
+  displayName: string;
 }
 
 interface QuickStatsProps {
   data: ContractorData;
+  onAadhaarPress: () => void;
 }
 
 interface InfoSectionProps {
@@ -129,6 +136,7 @@ interface StatItem {
   label: string;
   value: string;
   color: string;
+  onPress?: () => void;
 }
 
 interface UpdateProfilePayload {
@@ -150,11 +158,61 @@ const isValidValue = (value: any): boolean => {
   return true;
 };
 
+// Helper function to check if section has any valid data
+const hasSectionData = (values: any[]): boolean => {
+  return values.some(value => isValidValue(value));
+};
+
 // Main Component
 const ProfileTab: React.FC = () => {
   const { data, refetch, isLoading, error } = useContractorProfile();
-  console.log("ioioi",data)
+  const user = useSelector((state: any) => state.token?.token);
+  const Navigation: any = useNavigation();
+  const { mutateAsync: eSetuAdharVarification, isPending } = useESetuAdharVarification();
+  
   const [editModalVisible, setEditModalVisible] = useState(false);
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+  const [isNavigating, setIsNavigating] = useState<boolean>(false);
+
+  // Check if user is auction type
+  const isAuctionUser = user?.userType?.toLowerCase() === 'auction';
+
+  // Get display data based on user type
+  const displayName = isAuctionUser ? user?.fullName : data?.fullName;
+  const displayMobile = isAuctionUser ? user?.mobileNo : data?.mobileNo;
+
+  const handleAadhaarPress = () => {
+    if (user?.esetuVerified === 'Not Verified') {
+      setShowDialog(true);
+    }
+  };
+
+  const handleProceedVerification = async () => {
+    try {
+      setIsNavigating(true);
+      
+      const payload = {
+        contId: user.id,
+        transactionId: generateTransactionId(),
+        udf1: "23.77",
+        udf2: "77.34",
+        udf3: "string",
+        udf4: "string",
+        responseUrl: "https://dev.procurelinc.in/"
+      };
+
+      const res = await eSetuAdharVarification(payload);
+      
+      setShowDialog(false);
+      
+      Navigation.navigate(NavigationString.KycWebViewScreen, { res });
+      
+    } catch (err) {
+      console.log("Verification error:", err);
+      Alert.alert('Error', 'Failed to initiate verification. Please try again.');
+      setIsNavigating(false);
+    }
+  };
 
   if (isLoading) {
     return (
@@ -200,78 +258,134 @@ const ProfileTab: React.FC = () => {
         windowSize={10}
       >
         {/* Header with Gradient */}
-        <ProfileHeader data={data} />
+        <ProfileHeader data={data} displayName={displayName || data.fullName} />
 
         {/* Quick Stats */}
-        <QuickStats data={data} />
+        <QuickStats data={data} onAadhaarPress={handleAadhaarPress} />
 
-        {/* Personal Information */}
+        {/* Personal Information - Always show */}
         <InfoSection
           title="Personal Information"
           IconComponent={UserCircle}
           delay={0}
-          showEdit={true}
+          showEdit={!isAuctionUser}
           onEdit={() => setEditModalVisible(true)}
         >
-          <InfoRow label="Full Name" value={data.firstName+" "+data.middleName+" "+data.lastName} IconComponent={User} />
+          <InfoRow 
+            label="Full Name" 
+            value={isAuctionUser ? displayName : `${data.firstName} ${data.middleName} ${data.lastName}`.trim()} 
+            IconComponent={User} 
+          />
           <InfoRow label="Email" value={data.emailId} IconComponent={Mail} />
           <InfoRow
             label="Mobile"
-            value={`${data.dialCode} ${data.mobileNo}`}
+            value={isAuctionUser ? displayMobile : `${data.dialCode} ${data.mobileNo}`}
             IconComponent={Phone}
           />
           <InfoRow label="Designation" value={data.designation} IconComponent={Briefcase} />
         </InfoSection>
 
-        {/* Company Details */}
-        <InfoSection title="Company Details" IconComponent={Building2} delay={0}>
-          <InfoRow label="Company" value={data.company} IconComponent={Building} />
-          <InfoRow label="Type" value={data.contractorType} IconComponent={Tag} />
-          <InfoRow label="Organization" value={data.contOrganization} IconComponent={Network} />
-          <InfoRow label="Website" value={data.agentWebsite} IconComponent={Globe} />
-          <InfoRow label="Registration No" value={data.agentRegno} IconComponent={Award} />
-        </InfoSection>
+        {/* Company Details - Only show if has data */}
+        {hasSectionData([
+          data.company,
+          data.contractorType,
+          data.contOrganization,
+          data.agentWebsite,
+          data.agentRegno
+        ]) && (
+          <InfoSection title="Company Details" IconComponent={Building2} delay={0}>
+            <InfoRow label="Company" value={data.company} IconComponent={Building} />
+            <InfoRow label="Type" value={data.contractorType} IconComponent={Tag} />
+            <InfoRow label="Organization" value={data.contOrganization} IconComponent={Network} />
+            <InfoRow label="Website" value={data.agentWebsite} IconComponent={Globe} />
+            <InfoRow label="Registration No" value={data.agentRegno} IconComponent={Award} />
+          </InfoSection>
+        )}
 
-        {/* Address Information */}
-        <InfoSection title="Address Information" IconComponent={MapPin} delay={0}>
-          <InfoRow label="Address" value={data.agentAddress} IconComponent={Home} />
-          <InfoRow label="City" value={data.agentCity} IconComponent={Building2} />
-          <InfoRow label="State" value={data.agentState} IconComponent={Map} />
-          <InfoRow label="Pincode" value={data.agentPincode} IconComponent={Mailbox} />
-        </InfoSection>
+        {/* Address Information - Only show if has data */}
+        {hasSectionData([
+          data.agentAddress,
+          data.agentCity,
+          data.agentState,
+          data.agentPincode
+        ]) && (
+          <InfoSection title="Address Information" IconComponent={MapPin} delay={0}>
+            <InfoRow label="Address" value={data.agentAddress} IconComponent={Home} />
+            <InfoRow label="City" value={data.agentCity} IconComponent={Building2} />
+            <InfoRow label="State" value={data.agentState} IconComponent={Map} />
+            <InfoRow label="Pincode" value={data.agentPincode} IconComponent={Mailbox} />
+          </InfoSection>
+        )}
 
-        {/* Tax & Legal */}
-        <InfoSection title="Tax & Legal Information" IconComponent={FileText} delay={0}>
-          <InfoRow label="PAN Number" value={data.orgPAN} IconComponent={CreditCard} />
-          <InfoRow label="PAN Name" value={data.orgPANname} IconComponent={Type} />
-          <InfoRow label="PAN DOB" value={data.orgPANdob} IconComponent={Calendar} />
-          <InfoRow label="GSTIN" value={data.gistnNo} IconComponent={Receipt} />
-          <InfoRow label="Aadhar" value={data.comAadharNo} IconComponent={FileText} />
-        </InfoSection>
+        {/* Tax & Legal - Only show if has data */}
+        {hasSectionData([
+          data.orgPAN,
+          data.orgPANname,
+          data.orgPANdob,
+          data.gistnNo,
+          data.comAadharNo
+        ]) && (
+          <InfoSection title="Tax & Legal Information" IconComponent={FileText} delay={0}>
+            <InfoRow label="PAN Number" value={data.orgPAN} IconComponent={CreditCard} />
+            <InfoRow label="PAN Name" value={data.orgPANname} IconComponent={Type} />
+            <InfoRow label="PAN DOB" value={data.orgPANdob} IconComponent={Calendar} />
+            <InfoRow label="GSTIN" value={data.gistnNo} IconComponent={Receipt} />
+            <InfoRow label="Aadhar" value={data.comAadharNo} IconComponent={FileText} />
+          </InfoSection>
+        )}
 
-        {/* Registration Status */}
-        <InfoSection title="Registration Details" IconComponent={ClipboardCheck} delay={0}>
-          <InfoRow label="Class" value={data.contractorClass} IconComponent={Star} />
-          <InfoRow label="Category" value={data.socialCategory} IconComponent={List} />
-          <InfoRow label="MSME Status" value={data.msmeStatus} IconComponent={Factory} />
-          <InfoRow
-            label="Expiry Date"
-            value={data.expiryDate}
-            IconComponent={CalendarClock}
-            valueColor={colors.warning}
-          />
-        </InfoSection>
+        {/* Registration Status - Only show if has data */}
+        {hasSectionData([
+          data.contractorClass,
+          data.socialCategory,
+          data.msmeStatus,
+          data.expiryDate
+        ]) && (
+          <InfoSection title="Registration Details" IconComponent={ClipboardCheck} delay={0}>
+            <InfoRow label="Class" value={data.contractorClass} IconComponent={Star} />
+            <InfoRow label="Category" value={data.socialCategory} IconComponent={List} />
+            <InfoRow label="MSME Status" value={data.msmeStatus} IconComponent={Factory} />
+            <InfoRow
+              label="Expiry Date"
+              value={data.expiryDate}
+              IconComponent={CalendarClock}
+              valueColor={colors.warning}
+            />
+          </InfoSection>
+        )}
 
         <View style={{ height: 40 }} />
       </ScrollView>
 
-      {/* Edit Modal */}
-      <EditProfileModal
-        visible={editModalVisible}
-        onClose={() => setEditModalVisible(false)}
-        data={data}
-        onSuccess={refetch}
+      {/* Edit Modal - Only for tender users */}
+      {!isAuctionUser && (
+        <EditProfileModal
+          visible={editModalVisible}
+          onClose={() => setEditModalVisible(false)}
+          data={data}
+          onSuccess={refetch}
+        />
+      )}
+
+      {/* Aadhaar Verification Dialog */}
+      <ConfirmDialog
+        visible={showDialog}
+        title="Aadhaar Verification Required"
+        message="To access all features, please complete your Aadhaar verification."
+        confirmText={isPending || isNavigating ? "Processing..." : "Proceed"}
+        cancelText="Cancel"
+        onConfirm={handleProceedVerification}
+        onClose={() => !isPending && !isNavigating && setShowDialog(false)}
+        loading={isPending || isNavigating}
       />
+
+      {/* Navigation Overlay */}
+      {isNavigating && (
+        <View style={styles.navigationOverlay}>
+          <ActivityIndicator size="large" color={colors.primary || '#2563EB'} />
+          <Text style={styles.loadingText}>Loading verification...</Text>
+        </View>
+      )}
     </>
   );
 };
@@ -303,7 +417,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
 
   const updateProfileMutation = useUpdateUserProfile();
 
-  // Reset form when modal opens
   useEffect(() => {
     if (visible) {
       setFormData({
@@ -341,7 +454,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
       newErrors.mobileNo = 'Invalid mobile number';
     }
 
-    // Auto-generate fullname
     const generatedFullName = `${formData.firstName} ${formData.middleName} ${formData.lastName}`.trim();
     setFormData(prev => ({ ...prev, fullname: generatedFullName }));
 
@@ -376,7 +488,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       >
         <View style={styles.modalContent}>
-          {/* Header */}
           <View style={styles.modalHeader}>
             <Text style={styles.modalTitle}>Edit Personal Information</Text>
             <TouchableOpacity onPress={onClose} style={styles.closeButton}>
@@ -384,9 +495,7 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
             </TouchableOpacity>
           </View>
 
-          {/* Form */}
           <ScrollView style={styles.formContainer} showsVerticalScrollIndicator={false}>
-            {/* First Name */}
             <View style={styles.inputGroup}>
               <Text style={styles.inputLabel}>First Name *</Text>
               <TextInput
@@ -401,7 +510,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
               )}
             </View>
 
-            {/* Middle Name */}
             <View style={styles.inputGroup}>
               <Text style={styles.inputLabel}>Middle Name</Text>
               <TextInput
@@ -413,7 +521,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
               />
             </View>
 
-            {/* Last Name */}
             <View style={styles.inputGroup}>
               <Text style={styles.inputLabel}>Last Name *</Text>
               <TextInput
@@ -428,7 +535,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
               )}
             </View>
 
-            {/* Email */}
             <View style={styles.inputGroup}>
               <Text style={styles.inputLabel}>Email *</Text>
               <TextInput
@@ -445,7 +551,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
               )}
             </View>
 
-            {/* Mobile Number */}
             <View style={styles.inputGroup}>
               <Text style={styles.inputLabel}>Mobile Number *</Text>
               <TextInput
@@ -463,7 +568,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
             </View>
           </ScrollView>
 
-          {/* Footer Buttons */}
           <View style={styles.modalFooter}>
             <TouchableOpacity
               style={[styles.button, styles.cancelButton]}
@@ -495,7 +599,7 @@ const EditProfileModal: React.FC<EditProfileModalProps> = ({
 };
 
 // Profile Header Component - OPTIMIZED
-const ProfileHeader: React.FC<ProfileHeaderProps> = React.memo(({ data }) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = React.memo(({ data, displayName }) => {
   const getInitials = (name: string): string => {
     if (!name || typeof name !== 'string' || name.trim().length === 0) {
       const fallbackName = `${data.firstName || ''} ${data.lastName || ''}`.trim();
@@ -537,7 +641,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = React.memo(({ data }) => {
       >
         <View style={styles.avatarContainer}>
           <View style={styles.avatar}>
-            <Text style={styles.avatarText}>{getInitials(data.fullName)}</Text>
+            <Text style={styles.avatarText}>{getInitials(displayName)}</Text>
           </View>
           <View style={[styles.statusBadge, { backgroundColor: getStatusColor() }]}>
             <View style={styles.statusDot} />
@@ -545,9 +649,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = React.memo(({ data }) => {
         </View>
 
         <Text style={styles.headerName}>
-          {data.fullName ||
-            `${data.firstName} ${data.lastName}`.trim() ||
-            'Unknown User'}
+          {displayName || 'Unknown User'}
         </Text>
 
         <View style={styles.roleBadge}>
@@ -561,15 +663,18 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = React.memo(({ data }) => {
 
 ProfileHeader.displayName = 'ProfileHeader';
 
-// Quick Stats Component - OPTIMIZED
-const QuickStats: React.FC<QuickStatsProps> = React.memo(({ data }) => {
+// Quick Stats Component - OPTIMIZED WITH TOUCHABLE AADHAAR
+const QuickStats: React.FC<QuickStatsProps> = React.memo(({ data, onAadhaarPress }) => {
+  const user = useSelector((state: any) => state.token?.token);
+  
   const stats: StatItem[] = useMemo(
     () => [
       {
         Icon: CheckCircle,
-        label: 'Status',
-        value: data.isActive,
-        color: colors.success,
+        label: 'Aadhaar',
+        value: user?.esetuVerified,
+        color: user?.esetuVerified === 'Not Verified' ? colors.error : colors.success,
+        onPress: onAadhaarPress,
       },
       {
         Icon: ShieldCheck,
@@ -584,20 +689,37 @@ const QuickStats: React.FC<QuickStatsProps> = React.memo(({ data }) => {
         color: colors.info,
       },
     ],
-    [data.isActive, data.twoFactorAuthEnabled, data.registrationStatus]
+    [data.twoFactorAuthEnabled, data.registrationStatus, user?.esetuVerified, onAadhaarPress]
   );
 
   return (
     <View style={styles.statsContainer}>
-      {stats.map((stat) => (
-        <View key={stat.label} style={styles.statCard}>
-          <stat.Icon size={28} color={stat.color} />
-          <Text style={styles.statValue} numberOfLines={2}>
-            {stat.value}
-          </Text>
-          <Text style={styles.statLabel}>{stat.label}</Text>
-        </View>
-      ))}
+      {stats.map((stat) => {
+        const CardContent = (
+          <View style={styles.statCard}>
+            <stat.Icon size={28} color={stat.color} />
+            <Text style={styles.statValue} numberOfLines={2}>
+              {stat.value}
+            </Text>
+            <Text style={styles.statLabel}>{stat.label}</Text>
+          </View>
+        );
+
+        if (stat.onPress) {
+          return (
+            <TouchableOpacity
+              key={stat.label}
+              activeOpacity={0.7}
+              onPress={stat.onPress}
+              style={{ flex: 1 }}
+            >
+              {CardContent}
+            </TouchableOpacity>
+          );
+        }
+
+        return <View key={stat.label} style={{ flex: 1 }}>{CardContent}</View>;
+      })}
     </View>
   );
 });
@@ -633,7 +755,6 @@ InfoSection.displayName = 'InfoSection';
 // Info Row Component - OPTIMIZED
 const InfoRow: React.FC<InfoRowProps> = React.memo(
   ({ label, value, IconComponent, valueColor }) => {
-    // Return null if value is not valid
     if (!isValidValue(value)) {
       return null;
     }
@@ -715,6 +836,7 @@ interface Styles {
   saveButton: ViewStyle;
   cancelButtonText: TextStyle;
   saveButtonText: TextStyle;
+  navigationOverlay: ViewStyle;
 }
 
 const styles = StyleSheet.create<Styles>({
@@ -763,7 +885,6 @@ const styles = StyleSheet.create<Styles>({
     fontWeight: '600',
   },
 
-  // Header Styles
   headerGradient: {
     paddingTop: Platform.OS === 'ios' ? 60 : 40,
     paddingBottom: 30,
@@ -841,7 +962,6 @@ const styles = StyleSheet.create<Styles>({
     fontWeight: '600',
   },
 
-  // Stats Styles
   statsContainer: {
     flexDirection: 'row',
     marginHorizontal: 16,
@@ -874,7 +994,6 @@ const styles = StyleSheet.create<Styles>({
     marginTop: 4,
   },
 
-  // Section Styles
   section: {
     marginHorizontal: 16,
     marginTop: 24,
@@ -925,7 +1044,6 @@ const styles = StyleSheet.create<Styles>({
     backgroundColor: colors.primaryHighlight,
   },
 
-  // Info Row Styles
   infoRow: {
     borderRadius: 12,
     overflow: 'hidden',
@@ -966,7 +1084,6 @@ const styles = StyleSheet.create<Styles>({
     lineHeight: 21,
   },
 
-  // Modal Styles
   modalOverlay: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -1058,6 +1175,17 @@ const styles = StyleSheet.create<Styles>({
     fontWeight: '600',
     color: colors.white,
   },
+  navigationOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
 });
 
 export default ProfileTab;