Updated TrackingDetection UI

components/ScannedDataBox.tsx

@@ -7,7 +7,6 @@ import SecureWebView from '../components/SecureWebView';
 import { startActivityAsync, ActivityAction } from 'expo-intent-launcher';
 import * as Linking from 'expo-linking';
 
-
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
 interface ScannedDataBoxProps {
@@ -19,15 +18,13 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isRedirectModalVisible, setIsRedirectModalVisible] = useState(false);
   const [isContentModalVisible, setIsContentModalVisible] = useState(false);
+  const [isTrackingModalVisible, setIsTrackingModalVisible] = useState(false);
   const [qrDetails, setQrDetails] = useState<any>(null);
   const [isWebViewVisible, setIsWebViewVisible] = useState(false);
   const [webViewUrl, setWebViewUrl] = useState('');
   const [error, setError] = useState<string | null>(null); // State to store error message
   const [bannerOpacity] = useState(new Animated.Value(0)); // State for banner opacity
 
-
-
-
   useEffect(() => {
     const fetchQRDetails = async () => {
       try {
@@ -70,8 +67,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     });
   };
 
-
-
   const data = qrDetails.data || {};
   const details = qrDetails.details || {};
   const type = data.info?.type || 'Undefined';
@@ -86,7 +81,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   const isShorteningService = details.shorteningService === 'Yes';
   const classification = details.classifications || 'Unknown';
 
-
   // Function to get security text and icon based on the URL description
   const getSecurityStatus = () => {
     if (data.info?.description === "Secure Uniform Resource Locator") {
@@ -103,9 +97,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   };
   const { text: securityText, icon: securityIcon } = getSecurityStatus();
 
-
-
-
   // Function to get result text and color based on the security status
   const getResultStatus = () => {
     if (result === 'UNSAFE') {
@@ -122,9 +113,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   };
   const { text: resultText, color: resultColor } = getResultStatus();
 
-
-
-
   // Function to determine security header status
   const getSecurityHeaderStatus = (headers) => {
     const filteredHeaders = headers.filter(
@@ -148,8 +136,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   };
   const redirectStatus = getRedirectStatus(details.redirect || 0);
 
-
-
   // Truncate content string to specified length
   const truncateContent = (content: string, length: number) => {
     if (content.length > length) {
@@ -158,7 +144,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     return content;
   };
 
-
   // Function to get encryption status and icon
   const getEncryptionStatus = (encryption) => {
     if (encryption === 'NO') {
@@ -186,7 +171,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
 
   const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encryption);
 
-
   // Function to open the Wi-Fi configuration in the OS
   const handleOpenUrl = (url: string) => {
     Linking.openURL(url).catch(err => console.error('Error opening URL:', err));
@@ -216,9 +200,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     }
   };
 
-
-
-
   const sslStrippingStatus = {
     hasSSLStripping: details.sslStripping?.some(status => status === true) ?? false,
     text: details.sslStripping?.some(status => status === true)
@@ -227,40 +208,23 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     color: details.sslStripping?.some(status => status === true) ? "#ff5942" : "#44c167", // Green for No SSL Stripping
   };
 
-  // Log to check what's happening
-  console.log('SSL Stripping Details:', details.sslStripping);
-  console.log('SSL Stripping Status:', sslStrippingStatus);
-
   const hasExecutableStatus = {
     hasExecutable: details.hasExecutable ?? false,
     text: details.hasExecutable ? "Executable Detected" : "No Executable",
-    color: details.hasExecutable ? "#FFA500" : "#44c167",
+    color: details.hasExecutable ? "#ffa500" : "#44c167", // Orange for Executable Detected
+    iconName: details.hasExecutable ? "alert-circle" : "shield-checkmark", // Orange shield icon for Executable Detected
   };
 
-
-  // Log to check what's happening
-  console.log('Executable Details:', details.hasExecutable);
-  console.log('Executable Status:', hasExecutableStatus);
-
   const trackingStatus = {
-    hasTracking: details.tracking ?? false,
-    text: details.tracking ? "Tracking Detected" : "No Tracking",
-    color: details.tracking ? "#ff5942" : "#44c167", // Green for No Tracking
+    hasTracking: details.trackingDescriptions?.length > 0 ?? false,
+    text: details.trackingDescriptions?.length > 0 ? "Tracking Detected" : "No Tracking",
+    color: details.trackingDescriptions?.length > 0 ? "#ff5942" : "#44c167", // Red for Tracking Detected
   };
 
-  // Log to check what's happening
-  console.log('Tracking Details:', details.tracking);
-  console.log('Tracking Status:', trackingStatus);
   const redirectCount = details.redirect ?? 0; // Default to 0 if undefined
 
-
-
-
   return (
-    
     <View style={styles.dataBox}>
-
-      
       <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
         <Ionicons name="close-circle-outline" size={screenWidth * 0.05} color="#ff69b4" />
       </TouchableOpacity>
@@ -274,7 +238,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
       </View>
 
       <View style={styles.mainContent}>
-        {/* Display QR Code , timestamp and Description */}
+        {/* Display QR Code, timestamp and Description */}
         <View style={styles.qrSection}>
           <QRCode value={contents || 'No Data'} size={screenWidth * 0.2} backgroundColor="transparent" />
         </View>
@@ -286,7 +250,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
           {isShorteningService && (
             <Text style={styles.shorteningServiceText}>This is a shortening service</Text>
           )}
-    
         </View>
       </View>
 
@@ -295,13 +258,12 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
         Result: {resultText}
       </Text>
 
-
       {/* URL Type */}
       {type === 'URL' && (
         <>
           <Text style={styles.classificationText}>
             Classification: {classification}
-</Text>
+          </Text>
           <View style={styles.mainContent}>
             {/* Left Container */}
             <View style={styles.leftContainer}>
@@ -347,26 +309,31 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
                 <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={sslStrippingStatus.color} />
                 <Text style={styles.DetailsInfo}>{sslStrippingStatus.text}</Text>
               </View>
-
-{/* Executtable checking */}
+            {/* Executtable checking */}
             {hasExecutableStatus.hasExecutable ? (
                 <TouchableOpacity style={styles.displayCheck}>
                   <Ionicons name="alert-circle" size={screenWidth * 0.045} color="#FFA500" />
                   <Text style={styles.DetailsInfo}>{hasExecutableStatus.text}</Text>
                 </TouchableOpacity>
-) : (
+              ) : (
                 <View style={styles.displayCheck}>
                   <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={hasExecutableStatus.color} />
                   <Text style={styles.DetailsInfo}>{hasExecutableStatus.text}</Text>
                 </View>
-)}
-
-
-
+              )}
+              {/* Tracking checking */}
+              {trackingStatus.hasTracking ? (
+                <TouchableOpacity style={[styles.DetailsInfoButton, { borderColor: '#ff5942' }]} onPress={() => setIsTrackingModalVisible(true)}>
+                  <Ionicons name="alert-circle" size={screenWidth * 0.045} color="#ff5942" />
+                  <Text style={styles.DetailsInfo}>{trackingStatus.text}</Text>
+                  <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff5942" style={styles.chevronIcon} />
+                </TouchableOpacity>
+              ) : (
                 <View style={styles.displayCheck}>
                   <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={trackingStatus.color} />
                   <Text style={styles.DetailsInfo}>{trackingStatus.text}</Text>
                 </View>
+              )}
             </View>
           </View>
 
@@ -395,12 +362,12 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
           </View>
 
           {/* Redirect Chain Pop UP */}
-<Modal
+          <Modal
             visible={isRedirectModalVisible}
             transparent={true}
             animationType="fade"
             onRequestClose={() => setIsRedirectModalVisible(false)}
->
+          >
             <View style={styles.modalContainer}>
               <View style={styles.modalContent}>
                 <Text style={styles.modalTitle}>Redirect Chain</Text>
@@ -420,18 +387,11 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
                 </TouchableOpacity>
               </View>
             </View>
-</Modal>
-
+          </Modal>
         </>
       )}
 
-
-
-
-
-
       {/* WIFI Type */}
-
       {type === 'WIFI' && (
         <>
           {/* SSID */}
@@ -467,10 +427,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
         </>
       )}
 
-
-
-
-
       {type === 'PHONE Nume' && (
         <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
           <View style={styles.dividerHorizontal} />
@@ -507,8 +463,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
         </TouchableOpacity>
       )}
 
-
-
       {/* Full Content Modal */}
       <Modal
         visible={isContentModalVisible}
@@ -529,10 +483,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
         </View>
       </Modal>
 
-
-
-
-      {/*POP UP Security Header and Redirect button*/}
+      {/* POP UP Security Header and Redirect button */}
       {/* Security Headers Modal */}
       <Modal
         visible={isModalVisible}
@@ -555,8 +506,6 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
         </View>
       </Modal>
 
-
-
       {/* WebView Modal */}
       <Modal
         visible={isWebViewVisible}
@@ -573,6 +522,34 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
           </View>
         </View>
       </Modal>
+
+      {/* Tracking Descriptions Modal */}
+      <Modal
+  visible={isTrackingModalVisible}
+  transparent={true}
+  animationType="fade"
+  onRequestClose={() => setIsTrackingModalVisible(false)}
+>
+  <View style={styles.modalContainer}>
+    <View style={styles.modalContent}>
+      <Text style={styles.modalTitle}>Tracking Descriptions</Text>
+      <ScrollView style={styles.modalScrollContent}>
+        {details.trackingDescriptions?.map((description: string, index: number) => (
+          <ScrollView 
+            key={index} 
+            horizontal={true}  // Enable horizontal scrolling
+            style={styles.horizontalScrollView}
+            contentContainerStyle={styles.horizontalContentContainer}>
+            <Text style={styles.modalText}>{description}</Text>
+          </ScrollView>
+        ))}
+      </ScrollView>
+      <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsTrackingModalVisible(false)}>
+        <Text style={styles.closeModalButtonText}>Close</Text>
+      </TouchableOpacity>
+    </View>
+  </View>
+</Modal>
     </View>
   );
 };
@@ -665,6 +642,7 @@ const styles = StyleSheet.create({
     borderColor: '#ff69b4',
     width: '100%', // Make it take full width
   },
+
   // Display check styles
   // Aligning the boxes
   displayCheck: {
@@ -678,6 +656,7 @@ const styles = StyleSheet.create({
     marginVertical: screenWidth * 0.01875,
     width: '100%', // Make it take full width
   },
+
   // Details info text styles
   DetailsInfo: {
     fontSize: screenWidth * 0.026,
@@ -740,7 +719,6 @@ const styles = StyleSheet.create({
     flexGrow: 1, // Ensure the content container expands to fit its children
   },
 
-
   // Close modal button styles
   closeModalButton: {
     marginTop: screenWidth * 0.0375,
@@ -874,6 +852,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginTop: screenWidth * 0.01875, // Add some spacing above
   },
-  
 });
+
 export default ScannedDataBox;