fleetbase · roncodes · May 21, 2025 · May 21, 2025 · May 21, 2025
diff --git a/ios/NavigatorApp.xcodeproj/project.pbxproj b/ios/NavigatorApp.xcodeproj/project.pbxproj
@@ -278,7 +278,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = NavigatorApp/NavigatorApp.entitlements;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 11;
 				DEVELOPMENT_TEAM = W4M54N7H85;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = NavigatorApp/Info.plist;
@@ -289,7 +289,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.0.2;
+				MARKETING_VERSION = 2.0.5;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -311,7 +311,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = NavigatorApp/NavigatorApp.entitlements;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 11;
 				DEVELOPMENT_TEAM = W4M54N7H85;
 				INFOPLIST_FILE = NavigatorApp/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Navigator;
@@ -321,7 +321,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.0.2;
+				MARKETING_VERSION = 2.0.5;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -102,6 +102,7 @@ PODS:
     - React-RCTText (= 0.77.0-rc.6)
     - React-RCTVibration (= 0.77.0-rc.6)
   - React-callinvoker (0.77.0-rc.6)
+  - React-Codegen (0.1.0)
   - React-Core (0.77.0-rc.6):
     - glog
     - hermes-engine
@@ -1353,6 +1354,28 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-image-resizer (3.0.11):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-maps (1.20.1):
     - React-Core
   - react-native-mmkv-storage (0.11.2):
@@ -2205,6 +2228,7 @@ DEPENDENCIES:
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
   - react-native-google-maps (from `../node_modules/react-native-maps`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
+  - "react-native-image-resizer (from `../node_modules/@bam.tech/react-native-image-resizer`)"
   - react-native-maps (from `../node_modules/react-native-maps`)
   - react-native-mmkv-storage (from `../node_modules/react-native-mmkv-storage`)
   - react-native-notifications (from `../node_modules/react-native-notifications`)
@@ -2282,6 +2306,7 @@ SPEC REPOS:
     - libwebp
     - MMKV
     - MMKVCore
+    - React-Codegen
     - SDWebImage
     - SDWebImageWebPCoder
     - SocketRocket
@@ -2376,6 +2401,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-maps"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
+  react-native-image-resizer:
+    :path: "../node_modules/@bam.tech/react-native-image-resizer"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
   react-native-mmkv-storage:
@@ -2524,6 +2551,7 @@ SPEC CHECKSUMS:
   RCTTypeSafety: c00136d479c43702c0a58b6667ad2d7b8389deba
   React: 73c6c3d8d478df2505b82de03b3aa3085a12f099
   React-callinvoker: 7bccda05aeced2bf72cd47144195738a9aea5af2
+  React-Codegen: 4b8b4817cea7a54b83851d4c1f91f79aa73de30a
   React-Core: d225356818946f0531777ea3b9ed6f45d3192a54
   React-CoreModules: abae5f8445763c124510ff4adf63f3000a634b0f
   React-cxxreact: 6c87493d1b464271f65347bb31ca90377304e7ae
@@ -2554,6 +2582,7 @@ SPEC CHECKSUMS:
   react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
   react-native-google-maps: 7cc1184afe41fbd15a3dffd53c924819f6587b69
   react-native-image-picker: 0452fc9efc21101946746663bf34e0db5741f00c
+  react-native-image-resizer: 28f08fb5fb9b0b2d0bc24f57228ac2eb80b1d0ad
   react-native-maps: ee1e65647460c3d41e778071be5eda10e3da6225
   react-native-mmkv-storage: 337a2b668cefb1bc66442eee589e72f15b3cba5c
   react-native-notifications: 4601a5a8db4ced6ae7cfc43b44d35fe437ac50c4

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/navigator-app",
-    "version": "2.0.4",
+    "version": "2.0.5",
     "license": "AGPL-3.0-or-later",
     "author": "Fleetbase Pte Ltd <hello@fleetbase.io>",
     "description": "Order management, geolocation tracking and navigation for Fleetbase drivers.",
@@ -30,6 +30,7 @@
         "@babel/plugin-proposal-async-generator-functions": "^7.20.7",
         "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
         "@backpackapp-io/react-native-toast": "^0.12.1",
+        "@bam.tech/react-native-image-resizer": "^3.0.11",
         "@fleetbase/sdk": "^1.2.13",
         "@fleetbase/storefront": "^1.1.13",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",

diff --git a/src/components/CameraCapture.tsx b/src/components/CameraCapture.tsx
@@ -6,6 +6,7 @@ import type { Camera as CameraRef } from 'react-native-vision-camera';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFS from 'react-native-fs';
 import useDimensions from '../hooks/use-dimensions';
+import { toast, ToastPosition } from '../utils/toast';
 
 const MENU_BAR_HEIGHT = 160;
 
@@ -45,6 +46,7 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
                 flash: 'off',
                 qualityPrioritization: 'balanced',
             });
+            toast.info('Photo captured.', { position: ToastPosition.TOP });
 
             const filePath = (Platform.OS === 'ios' ? '' : 'file://') + photo.path;
             const base64Data = await RNFS.readFile(filePath, 'base64');
@@ -72,6 +74,7 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
             // For simplicity, let's just take the first photo (in a real scenario you'd present a UI).
             if (photosFromGallery.edges.length > 0) {
                 const { node } = photosFromGallery.edges[0];
+                toast.info('Photo added from gallery.', { position: ToastPosition.TOP });
                 setPhotos((prev) => [...prev, { uri: node.image.uri }]);
             }
         } catch (error) {

diff --git a/src/components/CurrentDestinationSelect.tsx b/src/components/CurrentDestinationSelect.tsx
@@ -105,13 +105,14 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
                                 showsVerticalScrollIndicator={false}
                                 showsHorizontalScrollIndicator={false}
                                 renderItem={({ item: waypoint }) => {
-                                    const isCompleted = waypoint.getAttribute('status_code') === 'COMPLETED';
+                                    const isCompleted = waypoint.getAttribute('complete');
                                     const isDestination = destination && destination.id === waypoint.id;
                                     return (
                                         <YStack px='$4'>
                                             <Button
                                                 onPress={() => handleDestinationSelect(waypoint)}
-                                                size={isDestination ? '$9' : '$8'}
+                                                minHeight='auto'
+                                                height='auto'
                                                 bg={isCompleted ? '$success' : isDestination ? '$info' : '$secondary'}
                                                 borderWidth={1}
                                                 borderColor={isCompleted ? '$successBorder' : isDestination ? '$infoBorder' : '$borderColorWithShadow'}
@@ -163,7 +164,7 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
                                                     )}
                                                     <XStack flex={1} alignItems='flex-start'>
                                                         <YStack flex={1}>
-                                                            <XStack alignItems='flex-start' justifyContent='space-between' mb='$1'>
+                                                            <XStack alignItems='flex-start' justifyContent='space-between' mb='$2'>
                                                                 <YStack flex={1} space='$1'>
                                                                     <Text color={isDestination ? '$white' : '$textPrimary'} fontWeight='bold' numberOfLines={1}>
                                                                         {waypoint.getAttribute('name') ?? waypoint.getAttribute('street1')}
@@ -174,10 +175,14 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
                                                                     <Badge status={waypoint.getAttribute('status')} fontSize='$1' px='$2' py='$1' />
                                                                 )}
                                                             </XStack>
-                                                            <Text color={isDestination ? '$gray-200' : '$textSecondary'} numberOfLines={1}>
-                                                                {formattedAddressFromPlace(waypoint)}
-                                                            </Text>
-                                                            <Text color={isDestination ? '$gray-200' : '$textSecondary'}>{formatAddressSecondaryIdentifier(waypoint)}</Text>
+                                                            <YStack flexWrap='wrap'>
+                                                                <Text color={isDestination ? '$gray-200' : '$textSecondary'} flexShrink={1} maxWidth='100%'>
+                                                                    {formattedAddressFromPlace(waypoint)}
+                                                                </Text>
+                                                                <Text color={isDestination ? '$gray-200' : '$textSecondary'} flexShrink={1} maxWidth='100%'>
+                                                                    {formatAddressSecondaryIdentifier(waypoint)}
+                                                                </Text>
+                                                            </YStack>
                                                         </YStack>
                                                     </XStack>
                                                 </XStack>

diff --git a/src/components/DestinationChangedAlert.tsx b/src/components/DestinationChangedAlert.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Linking } from 'react-native';
+import { Modal } from 'react-native';
+import { YStack, XStack, Text, Button, useTheme } from 'tamagui';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import WaypointList from './WaypointList';
+
+interface DestinationChangedAlertProps {
+    visible: boolean;
+    previousDestination: { getAttribute: (key: string) => string };
+    currentDestination: { getAttribute: (key: string) => string };
+    waypoints: any[];
+    onClose: () => void;
+}
+
+const DestinationChangedAlert: React.FC<DestinationChangedAlertProps> = ({ visible, previousDestination, currentDestination, onClose }) => {
+    const theme = useTheme();
+    const prevAddress = previousDestination?.getAttribute('address');
+    const currAddress = currentDestination?.getAttribute('address');
+
+    return (
+        <Modal transparent visible={visible} animationType='fade'>
+            <YStack fullscreen backgroundColor='rgba(0,0,0,0.5)' alignItems='center' justifyContent='center'>
+                <YStack width='90%' maxWidth={400} borderRadius='$4' borderWidth={1} borderColor='$infoBorder' backgroundColor='$background'>
+                    <YStack>
+                        <XStack space='$2' px='$4' py='$4' alignItems='center' borderBottomWidth={1} borderColor='$infoBorder'>
+                            <FontAwesomeIcon icon={faCheck} color={theme['$green-500'].val} />
+                            <Text fontSize='$6' fontWeight='bold' color='$textPrimary'>
+                                Waypoint Completed
+                            </Text>
+                        </XStack>
+                        <YStack py='$2'>
+                            <YStack mt='$3' space='$2' px='$4'>
+                                <Text fontSize='$4' color='$textSecondary'>
+                                    Activity for waypoint <Text color='$infoText'>{prevAddress}</Text> is complete.
+                                </Text>
+                                <Text fontSize='$4' color='$textSecondary'>
+                                    Your current destination has changed to <Text color='$infoText'>{currAddress}</Text>.
+                                </Text>
+                            </YStack>
+                            <YStack mt='$5' px='$4'>
+                                <WaypointList waypoints={[previousDestination, currentDestination].filter(Boolean)} highlight={2} onCall={(phone) => Linking.openURL(`tel:${phone}`)} />
+                            </YStack>
+                        </YStack>
+                    </YStack>
+
+                    <YStack mt='$4' borderTopWidth={1} borderColor='$infoBorder' alignItems='center' justifyContent='center'>
+                        <Button onPress={onClose} width='100%' height='$5'>
+                            <Button.Text fontSize='$5' fontWeight='bold'>
+                                Continue
+                            </Button.Text>
+                        </Button>
+                    </YStack>
+                </YStack>
+            </YStack>
+        </Modal>
+    );
+};
+
+export default DestinationChangedAlert;
diff --git a/src/components/LiveOrderRoute.tsx b/src/components/LiveOrderRoute.tsx
@@ -144,10 +144,6 @@ const LiveOrderRoute = ({
         );
     };
 
-    const handleDirectionsError = (errorMessage) => {
-        toast.error(errorMessage, { duration: 1000 });
-    };
-
     return (
         <YStack flex={1} position='relative' overflow='hidden' width={width} height={height} {...props}>
             <MapView
@@ -159,9 +155,9 @@ const LiveOrderRoute = ({
                 {...mapViewProps}
             >
                 {driverAssigned && <DriverMarker driver={driverAssigned} onMovement={focusDriver} />}
-                {start.id !== 'driver' && (
+                {start && start?.id !== 'driver' && (
                     <Marker coordinate={origin} centerOffset={markerOffset}>
-                        <MarkerLabel icon={start.id === 'driver' ? faTruck : null} label={formattedAddressFromPlace(start)} markerOffset={markerOffset} theme={theme} />
+                        <MarkerLabel icon={start?.id === 'driver' ? faTruck : null} label={formattedAddressFromPlace(start)} markerOffset={markerOffset} theme={theme} />
                         <LocationMarker size={markerSize} />
                     </Marker>
                 )}
@@ -176,16 +172,17 @@ const LiveOrderRoute = ({
                     <LocationMarker size={markerSize} />
                 </Marker>
 
-                <MapViewDirections
-                    origin={origin}
-                    destination={destination}
-                    waypoints={middleWaypoints.map(({ coordinate }) => coordinate)}
-                    apikey={config('GOOGLE_MAPS_API_KEY')}
-                    strokeWidth={4}
-                    strokeColor={theme['$blue-500'].val}
-                    onReady={fitToRoute}
-                    onError={handleDirectionsError}
-                />
+                {origin && destination && (
+                    <MapViewDirections
+                        origin={origin}
+                        destination={destination}
+                        waypoints={middleWaypoints.map(({ coordinate }) => coordinate)}
+                        apikey={config('GOOGLE_MAPS_API_KEY')}
+                        strokeWidth={4}
+                        strokeColor={theme['$blue-500'].val}
+                        onReady={fitToRoute}
+                    />
+                )}
             </MapView>
 
             <YStack position='absolute' style={{ ...StyleSheet.absoluteFillObject }}>

diff --git a/src/components/OrderCard.tsx b/src/components/OrderCard.tsx
@@ -19,7 +19,7 @@ const INFO_FIELD_VALUE_MIN_HEIGHT = 30;
 export const OrderCard = ({ order, onPress }) => {
     const theme = useTheme();
     const { isDarkMode } = useAppTheme();
-    const { trackerData } = useOrderResource(order);
+    const { trackerData } = useOrderResource(order, { loadEta: false });
     const waypointCustomers = useMemo(() => {
         const waypoints = order.getAttribute('payload.waypoints', []) ?? [];
         return waypoints

diff --git a/src/components/OrderProofOfDelivery.tsx b/src/components/OrderProofOfDelivery.tsx
@@ -91,7 +91,7 @@ const OrderProofOfDelivery = ({ order, subject }) => {
                         {proof.id}
                     </Text>
                     <Text color='$textSecondary' fontSize='$2' textAlign='center'>
-                        {format(proof.created_at, 'MMM d, Y HH:mm')}
+                        {format(proof.created_at, 'MMM d, y HH:mm')}
                     </Text>
                 </YStack>
             </YStack>