Merge pull request #29 from fleetbase/navigator-method

vision camera integration
fleetbase · Jan 24, 2024 · 41e301c · 41e301c
2 parents 1f0fa60 + ae0f953
commit 41e301c
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/navigator-app",
-    "version": "1.1.9",
+    "version": "1.1.11",
     "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "keywords": [
         "fleetbase-navigator",
@@ -92,7 +92,6 @@
         "react-native-permissions": "^3.0.5",
         "react-native-picker-module": "^2.0.4",
         "react-native-push-notification": "^7.4.0",
-        "react-native-qrcode-scanner": "^1.5.5",
         "react-native-reanimated": "^3.5.4",
         "react-native-render-html": "^6.0.5",
         "react-native-safe-area-context": "^3.2.0",
@@ -101,6 +100,7 @@
         "react-native-svg": "^12.1.1",
         "react-native-swipe-list-view": "^3.2.9",
         "react-native-toast-message": "^2.1.5",
+        "react-native-vision-camera": "^3.8.2",
         "react-native-webview": "^13.6.0",
         "react-native-youtube": "^2.0.2",
         "react-redux": "^7.2.5",

diff --git a/src/components/headers/DefaultHeader.js b/src/components/headers/DefaultHeader.js
@@ -1,15 +1,15 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, ImageBackground, TextInput, TouchableOpacity, Modal, Image, Switch } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Collection } from '@fleetbase/sdk';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { faMapMarkerAlt, faTimes, faInfoCircle, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { useNavigation } from '@react-navigation/native';
-import { Collection } from '@fleetbase/sdk';
-import { useResourceCollection } from 'utils/Storage';
-import { useLocale, useDriver, useFleetbase } from 'hooks';
-import { config, translate, logError, toBoolean } from 'utils';
 import { LangPicker, SearchButton } from 'components';
+import { useDriver, useFleetbase, useLocale } from 'hooks';
+import React, { useCallback, useState } from 'react';
+import { ImageBackground, Switch, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import packageJson from '../../../package.json';
 import tailwind from 'tailwind';
+import { config, logError, toBoolean, translate } from 'utils';
 
 const DefaultHeader = props => {
     let {
@@ -43,6 +43,8 @@ const DefaultHeader = props => {
 
     const shouldDisplayLogoText = (displayLogoText ?? config('ui.headerComponent.displayLogoText')) === true;
 
+    const appVersion = packageJson.version;
+
     const toggleOnline = useCallback(() => {
         setIsLoading(true);
         setIsOnline(!isOnline);
@@ -72,7 +74,7 @@ const DefaultHeader = props => {
                         {shouldDisplayLogoText && (
                             <View>
                                 <Text style={[tailwind('font-bold text-lg text-gray-50'), props.logoStyle ?? {}]}>Navigator</Text>
-                                <Text style={[tailwind('text-xs text-white')]}>v1.1.10</Text>
+                                <Text style={[tailwind('text-xs text-white')]}>{appVersion}</Text>
                             </View>
                         )}
                     </View>

diff --git a/src/features/Account/AccountStack.js b/src/features/Account/AccountStack.js
@@ -8,6 +8,7 @@ import EditProfileScreen from './screens/EditProfileScreen';
 import ChangePasswordScreen from './screens/ChangePasswordScreen';
 import OrderScreen from 'shared/OrderScreen';
 import SearchScreen from 'core/screens/SearchScreen';
+import ConfigScreen from '../Shared/ConfigScreen';
 
 const MainStack = createStackNavigator();
 const RootStack = createStackNavigator();
@@ -31,6 +32,7 @@ const AccountStack = ({ route }) => {
                 <RootStack.Screen name="ChangePassword" component={ChangePasswordScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
                 <RootStack.Screen name="Order" component={OrderScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
                 <RootStack.Screen name="SearchScreen" component={SearchScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
+                <RootStack.Screen name="ConfigScreen" component={ConfigScreen} options={{ headerShown: false }} />
             </RootStack.Navigator>
         </SafeAreaProvider>
     );

diff --git a/src/features/Account/screens/AccountScreen.js b/src/features/Account/screens/AccountScreen.js
@@ -1,4 +1,4 @@
-import { faChevronRight, faIdBadge, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight, faIdBadge, faUser, faLink } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import DefaultHeader from 'components/headers/DefaultHeader';
 import { useLocale } from 'hooks';
@@ -136,6 +136,19 @@ const AccountScreen = ({ navigation, route }) => {
                                     </View>
                                 </TouchableOpacity>
                             </View>
+                            <View>
+                                <TouchableOpacity onPress={() => navigation.navigate('ConfigScreen', { attributes: driver.serialize() })}>
+                                    <View style={tailwind('flex flex-row items-center justify-between p-4 border-b border-gray-700')}>
+                                        <View style={tailwind('flex flex-row items-center')}>
+                                            <FontAwesomeIcon icon={faLink} size={18} style={tailwind('mr-3 text-gray-50')} />
+                                            <Text style={tailwind('text-gray-50 text-base')}>{translate('Account.AccountScreen.config')}</Text>
+                                        </View>
+                                        <View>
+                                            <FontAwesomeIcon icon={faChevronRight} size={18} style={tailwind('text-gray-600')} />
+                                        </View>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
                         </View>
                         <View style={tailwind('p-4')}>
                             <View style={tailwind('flex flex-row items-center justify-center')}>

diff --git a/src/features/Auth/AuthStack.js b/src/features/Auth/AuthStack.js
@@ -1,21 +1,19 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-// import AccountScreen from './screens/AccountScreen';
 import LoginScreen from 'auth/screens/LoginScreen';
 import CreateAccountScreen from 'auth/screens/CreateAccountScreen';
-import ConfigScreen from 'auth/screens/ConfigScreen';
+import ConfigScreen from '../Shared/ConfigScreen';
 
 const RootStack = createStackNavigator();
 
 const AuthStack = ({ route }) => {
     return (
         <SafeAreaProvider>
             <RootStack.Navigator screenOptions={{ presentation: 'modal' }}>
-                {/* <RootStack.Screen name="AccountScreen" component={AccountScreen} options={{ headerShown: false }} initialParams={{ info }} /> */}
                 <RootStack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
                 <RootStack.Screen name="CreateAccount" component={CreateAccountScreen} options={{ headerShown: false }} />
-                <RootStack.Screen name="ConfigScreen" component={ConfigScreen} options={{ headerShown: false}} />
+                <RootStack.Screen name="ConfigScreen" component={ConfigScreen} options={{ headerShown: false }} />
             </RootStack.Navigator>
         </SafeAreaProvider>
     );

diff --git a/src/features/Auth/screens/ConfigScreen.js → src/features/Shared/ConfigScreen.js b/src/features/Auth/screens/ConfigScreen.js → src/features/Shared/ConfigScreen.js
diff --git a/src/features/Shared/ProofScreen.js b/src/features/Shared/ProofScreen.js
@@ -4,10 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import OrderStatusBadge from 'components/OrderStatusBadge';
 import { useFleetbase, useLocale, useMountedState } from 'hooks';
 import React, { useRef, useState } from 'react';
-import { ActivityIndicator, Alert, Dimensions, Text, TouchableOpacity, View } from 'react-native';
-import { RNCamera } from 'react-native-camera';
+import { ActivityIndicator, Alert, Dimensions, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
 import FastImage from 'react-native-fast-image';
-import QRCodeScanner from 'react-native-qrcode-scanner';
+import { Camera, useCodeScanner, useCameraDevice } from 'react-native-vision-camera';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import SignatureScreen from 'react-native-signature-canvas';
 import tailwind from 'tailwind';
@@ -29,6 +28,7 @@ const ProofScreen = ({ navigation, route }) => {
     const [waypoint, setWaypoint] = useState(new Place(_waypoint, fleetbase.getAdapter()));
     const [entity, setEntity] = useState(new Entity(_entity, fleetbase.getAdapter()));
     const [isLoading, setIsLoading] = useState(false);
+    const [isCapturingCode, setIsCapturingCode] = useState(false);
 
     const isMultiDropOrder = !isEmpty(order.getAttribute('payload.waypoints', []));
     const isScanningProof = activity?.pod_method === 'scan';
@@ -37,6 +37,11 @@ const ProofScreen = ({ navigation, route }) => {
     const isEntity = !isEmpty(_entity);
     const isOrder = !isWaypoint && !isEntity;
 
+    const cameraRef = useRef(Camera);
+    const device = useCameraDevice('back');
+    const cameraPermission = Camera.getCameraPermissionStatus();
+    const newCameraPermission = Camera.requestCameraPermission();
+
     const catchError = (error, alertOptions = []) => {
         if (!error) {
             return;
@@ -76,7 +81,20 @@ const ProofScreen = ({ navigation, route }) => {
             });
     };
 
-    const captureScan = event => {
+    const codeScanner = useCodeScanner({
+        codeTypes: ['qr', 'ean-13'],
+        onCodeScanned: event => {
+            if (isCapturingCode) {
+                return;
+            }
+            console.log(`Scanned ${JSON.stringify(event)} codes!`);
+            const [code] = event;
+
+            captureScan(code);
+        },
+    });
+
+    const captureScan = data => {
         let subject = null;
 
         if (isEntity) {
@@ -88,12 +106,12 @@ const ProofScreen = ({ navigation, route }) => {
         }
 
         setIsLoading(true);
+        setIsCapturingCode(true);
 
         return order
             .captureQrCode(subject, {
-                code: event.data,
-                data: event,
-                raw_data: event.rawData,
+                code: data.value,
+                data,
             })
             .then(proof => {
                 if (activity) {
@@ -160,7 +178,7 @@ const ProofScreen = ({ navigation, route }) => {
                                             <TouchableOpacity
                                                 style={tailwind('pr-1')}
                                                 onPress={() => {
-                                                    signatureScreenRef.current?.resetImage();
+                                                    signatureScreenRef.current?.undo();
                                                 }}>
                                                 <View style={tailwind('btn bg-gray-800 border border-gray-700 bg-opacity-75')}>
                                                     <Text style={tailwind('font-semibold text-gray-50 text-base')}>Reset</Text>
@@ -171,7 +189,7 @@ const ProofScreen = ({ navigation, route }) => {
                                             <TouchableOpacity
                                                 style={tailwind('pl-1')}
                                                 onPress={() => {
-                                                    signatureScreenRef.current?.saveImage();
+                                                    signatureScreenRef.current.readSignature(captureSignature);
                                                 }}>
                                                 <View style={tailwind('btn bg-green-900 border border-green-700')}>
                                                     {isLoading && <ActivityIndicator color={getColorCode('text-green-50')} style={tailwind('mr-2')} />}
@@ -187,15 +205,8 @@ const ProofScreen = ({ navigation, route }) => {
                 )}
                 {isScanningProof && (
                     <View style={tailwind('relative h-full')}>
-                        <QRCodeScanner
-                            ref={qrCodeScannerRef}
-                            onRead={captureScan}
-                            flashMode={RNCamera.Constants.FlashMode.auto}
-                            topViewStyle={tailwind('flex-none')}
-                            markerStyle={tailwind('-mt-10')}
-                            showMarker={true}
-                            cameraStyle={[{ height: height - 180 }, tailwind('z-10')]}
-                        />
+                        <Camera showref={cameraRef} style={[{ height: height - 180 }]} device={device} isActive={true} codeScanner={codeScanner} />
+
                         <View style={tailwind('absolute bottom-0 z-20 w-full')}>
                             <View style={tailwind('px-4')}>
                                 <View style={tailwind('border bg-blue-900 border border-blue-700 rounded-md shadow-lg mb-32')}>
@@ -260,5 +271,4 @@ const ProofScreen = ({ navigation, route }) => {
         </View>
     );
 };
-
 export default ProofScreen;
diff --git a/src/hooks/use-fleetbase.js b/src/hooks/use-fleetbase.js
@@ -20,9 +20,6 @@ const useFleetbase = () => {
         FLEETBASE_KEY = _DRIVER.token;
     }
 
-    console.log('_FLEETBASE_HOST', FLEETBASE_HOST);
-    console.log('_FLEETBASE_KEY', FLEETBASE_KEY);
-
     const fleetbase = new Fleetbase(FLEETBASE_KEY, {
         host: FLEETBASE_HOST,
         namespace: FLEETBASE_NAMESPACE,

diff --git a/translations/en.json b/translations/en.json
@@ -6,6 +6,7 @@
             "createAccountButtonText": "Create Account",
             "userGreetingTitle": "Hello, {{driverName}}",
             "accountMenuTitle": "My Account",
+            "config": "Instance Config",
             "profileLinkText": "Profile",
             "ordersLinkText": "Orders",
             "placesLinkText": "Places",