Updated EmailScreen to pass QR-ID to ScannedDataBox

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,4 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.safeqr.safeqr">
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
@@ -14,9 +14,11 @@
     </intent>
   </queries>
   <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="true" android:theme="@style/AppTheme">
-    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
+    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="51.0.0"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@piggyinu/safeqr"/>
     <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>

android/app/src/main/res/values/styles.xml

@@ -5,6 +5,7 @@
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="android:statusBarColor">#ffffff</item>
+    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

android/gradle.properties

@@ -58,4 +58,5 @@ EX_DEV_CLIENT_NETWORK_INSPECTOR=true
 # Use legacy packaging to compress native libraries in the resulting APK.
 expo.useLegacyPackaging=false
 
+expo.jsEngine=jsc
 VisionCamera_enableCodeScanner=true

components/ScannedDataBox.tsx

@@ -332,9 +332,12 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
 
 
 
-{type === 'TEL' && (
+{type === 'PHONE' && (
   <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
+    <View style={styles.dividerHorizontal} />
     <Ionicons name="call-outline" size={screenWidth * 0.045} color="#2196F3" />
+    {/* Divider */}
+
     <Text style={styles.iconText}>Call Number</Text>
   </TouchableOpacity>
 )}
@@ -347,14 +350,20 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
       Linking.openURL(smsUrl).catch(err => console.error('Error sending SMS:', err));
     }}
   >
+        {/* Divider */}
+<View style={styles.dividerHorizontal} />
     <Ionicons name="chatbubble-outline" size={screenWidth * 0.045} color="#2196F3" />
+
     <Text style={styles.iconText}>Send SMS</Text>
   </TouchableOpacity>
 )}
 
 {type === 'EMAIL' && (
   <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
+    {/* Divider */}
+<View style={styles.dividerHorizontal} />
     <Ionicons name="mail-outline" size={screenWidth * 0.045} color="#2196F3" />
+    
     <Text style={styles.iconText}>Send Email</Text>
   </TouchableOpacity>
 )}

screens/EmailScreen.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, Alert, Animated, Dimensions } from 'react-native';
+import { View, Text, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, Alert, Animated, Dimensions, Modal } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import { getEmails, getScannedEmails, getUserInfo } from '../api/qrCodeAPI';
 import { fetchAuthSession } from 'aws-amplify/auth';
 import { Buffer } from 'buffer';
+import ScannedDataBox from '../components/ScannedDataBox';
 
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
@@ -16,6 +17,8 @@ const EmailScreen: React.FC = () => {
   const [error, setError] = useState(null);
   const [userEmail, setUserEmail] = useState('');
   const [bannerOpacity] = useState(new Animated.Value(0));
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [selectedQrCodeId, setSelectedQrCodeId] = useState(null);
 
   useEffect(() => {
     fetchUserEmail();
@@ -128,6 +131,12 @@ const EmailScreen: React.FC = () => {
     }, [startPollingForScannedEmails])
   );
 
+  const handleUrlClick = (id) => {
+    console.log('handleURLClik ID :',)
+    setSelectedQrCodeId(id);
+    setIsModalVisible(true);
+  };
+
   return (
     <View style={styles.container}>
       {loading && (
@@ -163,45 +172,48 @@ const EmailScreen: React.FC = () => {
                 <Text style={styles.date}>{item.date}</Text>
                 {selectedMessage === item && (
                   <View style={styles.emailListContainer}>
-                    {item.qrCodeByContentId && (
-                      <View>
-                        <Text style={styles.qrCodeHeader}>QR Codes by Content ID:</Text>
-                        {item.qrCodeByContentId.map((qrCode, index) => (
-                          <View key={index} style={styles.qrCodeContainer}>
-                            {qrCode.decodedContent.map((url, i) => (
-                              <TouchableOpacity key={i} onPress={() => Alert.alert("Testing")}>
-                                <Text style={styles.qrCodeLink}>{url}</Text>
-                              </TouchableOpacity>
-                            ))}
-                          </View>
-                        ))}
-                      </View>
-                    )}
-                    {item.qrCodeByURL && (
-                      <View>
                     <Text style={styles.qrCodeHeader}>Decoded QR Codes:</Text>
-                        {item.qrCodeByURL.map((qrCode, index) => (
+                    {item.decodedContentsDetails?.map((details, index) => (
                       <View key={index} style={styles.qrCodeContainer}>
-                            {qrCode.decodedContent.map((url, i) => (
-                              <TouchableOpacity key={i} onPress={() => Alert.alert("Testing")}>
-                                <Text style={styles.qrCodeLink}>{url}</Text>
+                        <TouchableOpacity onPress={() => handleUrlClick(details.data.id)}>
+                          <Text style={styles.qrCodeLink}>{details.data.contents}</Text>
                         </TouchableOpacity>
-                            ))}
                       </View>
                     ))}
                   </View>
                 )}
-                  </View>
-                )}
               </TouchableOpacity>
             )}
           />
+
         </>
       )}
       <Animated.View style={[styles.banner, { opacity: bannerOpacity }]}>
         <Text style={styles.bannerText}>Scanning emails in the background. This may take a while...</Text>
       </Animated.View>
+
+      {/* Modal for ScannedDataBox */}
+      <Modal
+        visible={isModalVisible}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setIsModalVisible(false)}
+      >
+        {/* The greyspace outside , made clickable to close the modl */}
+        <TouchableOpacity
+          style={styles.modalContainer}
+          activeOpacity={1}
+          onPressOut={() => setIsModalVisible(false)}
+        >
+          {/* Ensure ScannedDataBox does not render another modal */}
+          <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={() => setIsModalVisible(false)} />
+
+        </TouchableOpacity>
+      </Modal>
+
+
     </View>
+
   );
 };
 
@@ -312,6 +324,24 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontSize: screenWidth * 0.04,
   },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)', // dark overlay
+  },
+  innerModalContainer: {
+    backgroundColor: '#ffe6f0', // pink box color
+    padding: screenWidth * 0.05,
+    borderRadius: screenWidth * 0.03,
+    alignItems: 'center',
+  },
+  modalCloseButton: {
+    position: 'absolute',
+    top: screenWidth * 0.02,
+    right: screenWidth * 0.02,
+    zIndex: 1, // Ensure it is above other content
+  }
 });
 
 export default EmailScreen;