Qr scanning feature

android/app/build.gradle

@@ -1,4 +1,6 @@
 apply plugin: "com.android.application"
+apply plugin: "kotlin-android"
+apply plugin: "kotlin-android-extensions"
 
 import com.android.build.OutputFile
 

android/build.gradle

@@ -3,17 +3,19 @@
 buildscript {
     ext {
         buildToolsVersion = "30.0.2"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 31
         targetSdkVersion = 31
         ndkVersion = "21.4.7075529"
+        kotlin_version = '1.7.20'
     }
     repositories {
         google()
         mavenCentral()
     }
     dependencies {
         classpath("com.android.tools.build:gradle:4.2.2")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

babel.config.js

@@ -6,6 +6,7 @@ module.exports = {
       'react-native-reanimated/plugin',
       {
         relativeSourceLocation: true,
+        globals: ['__scanQRCodes'],
       },
     ],
   ],

package.json

@@ -25,6 +25,7 @@
     "react": "17.0.2",
     "react-native": "0.67.0",
     "react-native-app-auth": "^6.4.2",
+    "react-native-camera-kit": "^13.0.0",
     "react-native-date-picker": "^4.2.13",
     "react-native-datepicker": "^1.7.2",
     "react-native-device-info": "^10.8.0",
@@ -38,7 +39,6 @@
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.9.0",
     "react-native-toast-message": "^2.1.5",
-    "react-native-vision-camera": "^2.15.4",
     "react-native-webview": "^11.13.0"
   },
   "devDependencies": {

src/components/Modal/CustomModal.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Alert, Modal, StyleSheet, Text, Pressable, View } from 'react-native';
+const message = 'Press Done button once you verify yourself from My-site';
+
+const CustomModal = ({ modalVisible, setModalVisible }) => {
+  console.log('mess', message);
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        Alert.alert('Modal has been closed.');
+        setModalVisible(!modalVisible);
+      }}
+    >
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalText}>{message}</Text>
+          <Pressable
+            style={[styles.button, styles.buttonClose]}
+            onPress={() => setModalVisible(!modalVisible)}
+          >
+            <Text style={styles.textStyle}>Done</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#fff',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {}, // backgroundColor: '#F194FF',
+
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+    color: 'black',
+  },
+});
+
+export default CustomModal;

src/screens/AuthScreen/AuthScreen.tsx

@@ -1,10 +1,17 @@
-import React, { useContext, useState } from 'react';
-import { Text, View, TouchableOpacity, Image, ScrollView } from 'react-native';
+import React, { useContext, useEffect, useState } from 'react';
 import DeviceInfo from 'react-native-device-info';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Alert,
+} from 'react-native';
 import Strings from '../../i18n/en';
 import { AuthViewStyle } from './styles';
 import { AuthScreenButton } from './Button';
-import { OtpModal } from './OtpModal';
 import { Toast } from 'react-native-toast-message/lib/src/Toast';
 import { AuthContext } from '../../context/AuthContext';
 import { getUserData } from './Util';
@@ -15,26 +22,32 @@ import Images from '../../constants/images/Image';
 import WebView from 'react-native-webview';
 import { urls } from '../../constants/appConstant/url';
 import AuthApis from '../../constants/apiConstant/AuthApi';
+import { CameraScreen } from 'react-native-camera-kit';
+import CustomModal from '../../components/Modal/CustomModal';
 
 const AuthScreen = () => {
   // TODO: will revamp github signIn feature
   const { setLoggedInUserData } = useContext(AuthContext);
   const [githubView, setGithubView] = useState<boolean>(false);
-  const [otpCode, setOtpCode] = useState<string>('');
-  const [otpModalVisible, setOtpModalVisible] = useState<boolean>(false);
-  const [addressbarURL, setAdressbarURL] = useState<String>('');
   const [loading, setLoading] = useState(false);
-  const [key, setKey] = useState(1);
+  const [cameraActive, setCameraActive] = useState(false);
+  const [scannedUserId, setScannedUserID] = useState('');
+  const [modalVisible, setModalVisible] = useState(false);
 
-  const closeModal = () => {
-    setOtpModalVisible(false);
-    setOtpCode('');
+  const activateCamera = async () => {
+    try {
+      // await Camera.requestCameraPermission(); // Request camera permission
+      setCameraActive(true); // Set cameraActive state to true
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+    }
+  };
+
+  const handleQRCodeScanned = ({ nativeEvent }: any) => {
+    setScannedUserID(nativeEvent.codeStringValue);
   };
 
-  const openModal = () => setOtpModalVisible(true);
-  const setCode = (code: string) => setOtpCode(code);
   //TODO: add to constants
-  const maxLength = 4;
   const handleSignIn = () => {
     // NOTE: toast until sign in with Github is implemented
     Toast.show({
@@ -62,10 +75,12 @@ const AuthScreen = () => {
   };
 
   const getAuthStatus = async () => {
-    setLoading(true);
     const deviceInfo = await DeviceInfo.getDeviceName();
     const deviceId = await DeviceInfo.getUniqueId();
-
+    console.log('device info', deviceInfo);
+    console.log('device id', deviceId);
+    console.log('userID', scannedUserId);
+    setLoading(true);
     try {
       const data = await fetch(AuthApis.QR_AUTH_API, {
         method: 'POST',
@@ -74,17 +89,35 @@ const AuthScreen = () => {
         },
         body: JSON.stringify({
           device_info: deviceInfo,
-          user_id: 'BE9a4sGXFLDwxZU3DSiq', //TODO: replace with scanner results
+          user_id: scannedUserId,
           device_id: deviceId,
         }),
       });
 
+      // {"message": "User Device Info added successfully!", "userDeviceInfoData": {"authorization_status": "NOT_INIT", "device_id": "389e089e7e6feb38", "device_info": "Shreya", "user_id": "T7IL7MB8YriniTw4bt39"}}
+
       if (data.ok) {
-        console.log('patch call successfull');
+        const dataJson = await data.json();
+        console.log('Post call successful', dataJson);
+        Alert.alert('Please Confirm', dataJson.message, [
+          {
+            text: 'Cancel',
+            onPress: () => setCameraActive(false),
+          },
+          {
+            text: 'OK',
+            onPress: () => {
+              setCameraActive(false);
+              setModalVisible(true);
+            },
+          }, // ok -> Modal (press done button once you verify yourself from mysite) -> Done > loader? -> get call implementation =?> userdata => autorize -> if fail ? toast msgs  ? homscreen
+        ]);
       } else {
+        const dataJson = await data.json();
+        console.log('data in else', dataJson.message);
         Toast.show({
           type: 'error',
-          text1: 'Somethin went wrong, please try again',
+          text1: 'Something went wrong, please try again',
           position: 'bottom',
           bottomOffset: 80,
         });
@@ -93,18 +126,18 @@ const AuthScreen = () => {
       console.error(err);
       Toast.show({
         type: 'error',
-        text1: 'Somethin went wrong, please try again later',
+        text1: 'Something went wrong, please try again later',
         position: 'bottom',
         bottomOffset: 80,
       });
     }
     setLoading(false);
   };
 
-  // TODO: trigger on qr code scan
-  React.useEffect(() => {
+  useEffect(() => {
     getAuthStatus();
-  }, []);
+    /* eslint-disable */
+  }, [scannedUserId]);
 
   if (githubView) {
     return (
@@ -191,17 +224,27 @@ const AuthScreen = () => {
             </View>
           </TouchableOpacity>
         </View>
-        <AuthScreenButton text={Strings.SIGN_IN_WITH_WEB} onPress={openModal} />
+        <AuthScreenButton
+          text={Strings.SIGN_IN_WITH_WEB}
+          onPress={activateCamera}
+        />
       </View>
-      {otpModalVisible && (
-        <OtpModal
-          title={Strings.ENTER_4_DIGIT_OTP}
-          testId="otpModal"
-          visible={otpModalVisible}
-          code={otpCode}
-          maxLength={maxLength}
-          setCode={setCode}
-          closeModal={closeModal}
+
+      {cameraActive && (
+        <CameraScreen
+          style={StyleSheet.absoluteFill}
+          showFrame
+          scanBarcode={true}
+          onReadCode={handleQRCodeScanned}
+          frameColor={'white'}
+          laserColor={'white'}
+        />
+      )}
+
+      {modalVisible && (
+        <CustomModal
+          modalVisible={modalVisible}
+          setModalVisible={setModalVisible}
         />
       )}
     </ScrollView>