dev v1.1.18 (#47)

* created sign up screen

.github/workflows/react-native-ci.yml

@@ -77,6 +77,9 @@ jobs:
     - name: Make Gradlew Executable
       run: cd android && chmod +x ./gradlew
 
+    - name: Clean android
+      run: cd android && ./gradlew clean
+
     - name: Build Android
       run: cd android && ./gradlew assembleDebug
 

android/app/src/main/AndroidManifest.xml

@@ -7,6 +7,7 @@
   <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
   <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 
   <application android:name=".MainApplication" android:label="@string/app_name"
     android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round"

babel.config.js

@@ -2,6 +2,7 @@ module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
     plugins: [
         '@babel/plugin-transform-async-generator-functions',
+        '@babel/plugin-transform-async-to-generator',
         'react-native-reanimated/plugin',
         'preval',
         [

ios/Podfile.lock

@@ -580,8 +580,6 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.11):
     - React
-  - RNCPicker (2.6.1):
-    - React-Core
   - RNCPushNotificationIOS (1.11.0):
     - React-Core
   - RNDateTimePicker (6.7.5):
@@ -739,7 +737,6 @@ DEPENDENCIES:
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
-  - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
@@ -903,8 +900,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
-  RNCPicker:
-    :path: "../node_modules/@react-native-picker/picker"
   RNCPushNotificationIOS:
     :path: "../node_modules/@react-native-community/push-notification-ios"
   RNDateTimePicker:
@@ -1014,7 +1009,6 @@ SPEC CHECKSUMS:
   RNBootSplash: 85f6b879c080e958afdb4c62ee04497b05fd7552
   RNCAsyncStorage: 687bb9e85dd3d45b966662440dcfc0cd962347e6
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNCPicker: b18aaf30df596e9b1738e7c1f9ee55402a229dca
   RNCPushNotificationIOS: 64218f3c776c03d7408284a819b2abfda1834bc8
   RNDateTimePicker: 65e1d202799460b286ff5e741d8baf54695e8abd
   RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/navigator-app",
-    "version": "1.1.16",
+    "version": "1.1.18",
     "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "keywords": [
         "fleetbase-navigator",
@@ -65,6 +65,7 @@
         "react-native-calendar-strip": "^2.2.6",
         "react-native-calendars": "^1.1278.0",
         "react-native-camera": "^4.2.1",
+        "react-native-check-box": "^2.1.7",
         "react-native-collapsible": "^1.6.0",
         "react-native-config": "^1.5.1",
         "react-native-country-codes-picker": "^2.3.3",
@@ -77,22 +78,23 @@
         "react-native-geolocation-service": "^5.3.0-beta.1",
         "react-native-gesture-handler": "^1.10.3",
         "react-native-get-random-values": "^1.9.0",
+        "react-native-gifted-chat": "^2.4.0",
         "react-native-google-places-autocomplete": "^2.2.0",
-        "react-native-image-picker": "^4.4.0",
+        "react-native-image-picker": "^7.1.2",
         "react-native-image-resizer": "^1.4.5",
         "react-native-launch-navigator": "^1.0.9",
         "react-native-localize": "^2.1.5",
         "react-native-location": "^2.5.0",
         "react-native-maps": "^2.0.0-beta.14",
         "react-native-maps-directions": "^1.8.0",
         "react-native-mmkv-storage": "^0.9.0",
-        "react-native-modal": "^12.0.2",
+        "react-native-modal": "^13.0.1",
         "react-native-navigation-apps": "^1.0.27",
         "react-native-open-maps": "^0.4.0",
         "react-native-permissions": "^3.0.5",
         "react-native-picker-module": "^2.0.4",
         "react-native-push-notification": "^7.4.0",
-        "react-native-reanimated": "^3.5.4",
+        "react-native-reanimated": "3.5.4",
         "react-native-render-html": "^6.0.5",
         "react-native-safe-area-context": "^3.2.0",
         "react-native-screens": "^3.4.0",
@@ -104,14 +106,15 @@
         "react-native-webview": "^13.6.0",
         "react-native-youtube": "^2.0.2",
         "react-redux": "^7.2.5",
-        "socketcluster-client": "^16.0.4",
+        "socketcluster-client": "^17.1.1",
         "tailwind-rn": "^3.0.1",
         "tailwindcss": "^2.2.4",
         "uuid": "^9.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.20.0",
         "@babel/plugin-transform-async-generator-functions": "^7.22.15",
+        "@babel/plugin-transform-async-to-generator": "^7.24.1",
         "@babel/preset-env": "^7.20.0",
         "@babel/runtime": "^7.20.0",
         "@react-native/eslint-config": "^0.72.2",

src/constant/Enum.js

@@ -18,11 +18,26 @@ const IssueCategory = {
 };
 
 const IssuePriority = {
-    LOW: 'Low',
-    MEDIUM: 'Medium',
-    HIGH: 'High',
-    CRITICAL: 'Critical',
-    SCHEDULED_MAINTENANCE: 'Scheduled Maintenance',
-    OPERATIONAL_SUGGESTION: 'Operational Suggestion',
+    low: 'Low',
+    medium: 'Medium',
+    high: 'High',
+    critical: 'Critical',
+    'scheduled-maintenance': 'Scheduled Maintenance',
+    'operational-suggestion': 'Operational Suggestion',
 };
-export { IssuePriority, IssueType, IssueCategory };
+
+const Status = {
+    pending: 'Pending',
+    'in-progress': 'In Progress',
+    backlogged: 'Backlogged',
+    'requires-update': 'Requires Update',
+    'in-review': 'In Review',
+    're-opened': 'Re Opened',
+    duplicate: 'Duplicate',
+    'pending-review': 'Pending Review',
+    escalated: 'Escalated',
+    completed: 'Completed',
+    canceled: 'Canceled',
+};
+
+export { IssuePriority, IssueType, IssueCategory, Status };

src/features/Account/screens/AccountScreen.js

@@ -27,10 +27,9 @@ const AccountScreen = ({ navigation }) => {
     };
 
     useEffect(() => {
-        const res = driver.currentOrganization().then(setCurrentOrganization);
-        console.log('current::::', JSON.stringify(currentOrganization));
+        driver.currentOrganization().then(setCurrentOrganization);
     }, []);
-
+    
     const RenderBackground = props => {
         if (driver) {
             return (

src/features/Auth/AuthStack.js

@@ -4,6 +4,8 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import LoginScreen from 'auth/screens/LoginScreen';
 import CreateAccountScreen from 'auth/screens/CreateAccountScreen';
 import ConfigScreen from '../Shared/ConfigScreen';
+import SignUpScreen from './screens/SignUpScreen';
+import OrganizationSearchScreen from './screens/OrganizationSearchScreen';
 
 const RootStack = createStackNavigator();
 
@@ -13,6 +15,8 @@ const AuthStack = ({ route }) => {
             <RootStack.Navigator screenOptions={{ presentation: 'modal' }}>
                 <RootStack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
                 <RootStack.Screen name="CreateAccount" component={CreateAccountScreen} options={{ headerShown: false }} />
+                <RootStack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }} />
+                <RootStack.Screen name="OrganizationSearchScreen" component={OrganizationSearchScreen} options={{ headerShown: false }} />
                 <RootStack.Screen name="ConfigScreen" component={ConfigScreen} options={{ headerShown: false }} />
             </RootStack.Navigator>
         </SafeAreaProvider>

src/features/Auth/screens/LoginScreen.js

@@ -140,6 +140,18 @@ const LoginScreen = ({ navigation, route }) => {
                                 </View>
                             )}
 
+                            {isNotAwaitingVerification && (
+                                <View style={[tailwind('p-4'), config('ui.loginScreen.loginFormContainerStyle')]}>
+                                    <TouchableOpacity style={tailwind('mb-2')} onPress={() => navigation.navigate('OrganizationSearchScreen')}>
+                                        <View style={[tailwind('btn bg-gray-900 border border-gray-700'), config('ui.loginScreen.sendVerificationCodeButtonStyle')]}>
+                                            <Text style={[tailwind('font-semibold text-gray-50 text-lg text-center'), config('ui.loginScreen.sendVerificationCodeButtonTextStyle')]}>
+                                                {translate('Auth.SignUpScreen.driver')}
+                                            </Text>
+                                        </View>
+                                    </TouchableOpacity>
+                                </View>
+                            )}
+
                             {isNotAwaitingVerification && (
                                 <View style={tailwind('flex items-end mr-4  rounded-full')}>
                                     <TouchableOpacity

src/features/Auth/screens/OrganizationSearchScreen.js

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Alert, FlatList, Platform, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import tailwind from 'tailwind';
+import { getColorCode, isEmpty, translate } from 'utils';
+import { useFleetbase } from 'hooks';
+import { searchButtonStyle } from 'components/SearchButton';
+
+const isAndroid = Platform.OS === 'android';
+
+const OrganizationSearchScreen = ({ navigation }) => {
+    const fleetbase = useFleetbase();
+    const searchInput = useRef();
+    const [isLoading, setIsLoading] = useState(false);
+    const [results, setResults] = useState([]);
+    const [organizations, setOrganizations] = useState([]);
+    const [search, setSearch] = useState('');
+
+    const fetchOrganizations = async () => {
+        try {
+            const adapter = fleetbase.getAdapter();
+            const response = await adapter.get('organizations');
+            setOrganizations(response);
+            return response;
+        } catch (error) {
+            console.error('Error fetching organizations:', error);
+            return [];
+        }
+    };
+
+    useEffect(() => {
+        fetchOrganizations();
+    }, []);
+
+    const handleSearch = text => {
+        setSearch(text);
+        if (text === '') {
+            setResults([]);
+        } else {
+            const filteredOrganizations = organizations.filter(org => org.name.toLowerCase().includes(text.toLowerCase()));
+            setResults(filteredOrganizations);
+        }
+    };
+
+    const fetchSettings = async organizationId => {
+        try {
+            const adapter = fleetbase.getAdapter();
+            const response = await adapter.get(`onboard/driver-onboard-settings/${organizationId}`);
+            return response.driverOnboardSettings;
+        } catch (error) {
+            console.error('Error fetching settings:', error);
+            return null;
+        }
+    };
+
+    const handleOrganizationSelection = async item => {
+        setIsLoading(true);
+        const settings = await fetchSettings(item.id);
+
+        setIsLoading(false);
+
+        if (settings.enableDriverOnboardFromApp === false) {
+            Alert.alert('Error', 'Driver onboarding is not enabled for this organization.');
+        } else {
+            navigation.navigate('SignUp', { item });
+        }
+    };
+
+    const renderItem = ({ item }) => (
+        <View style={tailwind('p-2')}>
+            <TouchableOpacity style={tailwind('p-2 border border-gray-800 rounded-lg shadow-sm ')} onPress={() => handleOrganizationSelection(item)}>
+                <View style={tailwind('flex-1 flex-col items-start')}>
+                    <Text style={tailwind('text-gray-100')}>{item.name}</Text>
+                </View>
+            </TouchableOpacity>
+        </View>
+    );
+
+    return (
+        <View style={[tailwind('bg-gray-800 flex-1 relative pt-4')]}>
+            <View style={tailwind('px-4')}>
+                <View style={[searchButtonStyle, tailwind('relative flex-row')]}>
+                    <View style={tailwind('')}>
+                        <FontAwesomeIcon icon={faSearch} size={18} style={[tailwind('text-gray-700 mr-3')]} />
+                    </View>
+                    <TextInput
+                        ref={searchInput}
+                        value={search}
+                        onChangeText={handleSearch}
+                        autoComplete={'off'}
+                        autoCorrect={false}
+                        autoCapitalize={'none'}
+                        autoFocus={isAndroid ? false : true}
+                        clearButtonMode={'while-editing'}
+                        textAlign={'left'}
+                        style={tailwind('flex-1 h-full text-white')}
+                        placeholder={'Search Organizations..'}
+                        placeholderTextColor={getColorCode('text-gray-600')}
+                    />
+                    {isLoading && (
+                        <View style={tailwind('absolute inset-y-0 right-0 h-full items-center')}>
+                            <View style={[tailwind('items-center justify-center flex-1 opacity-75 mr-10'), isEmpty(search) ? tailwind('mr-3.5') : null]}>
+                                <ActivityIndicator color={getColorCode('text-gray-400')} />
+                            </View>
+                        </View>
+                    )}
+                </View>
+            </View>
+            {results.length > 0 ? (
+                <FlatList data={results} renderItem={renderItem} keyExtractor={(item, index) => index.toString()} contentContainerStyle={{ flexGrow: 1 }} />
+            ) : (
+                <View style={tailwind('flex-1 justify-center items-center')}>
+                    <Text style={tailwind('text-gray-400')}>{translate('Auth.SignUpScreen.empty')}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default OrganizationSearchScreen;