fleetbase · roncodes · Nov 11, 2025
diff --git a/src/components/AdhocOrderCard.tsx b/src/components/AdhocOrderCard.tsx
@@ -18,6 +18,7 @@ import MultipleCustomerAvatars from './MultipleCustomerAvatars';
 import LoadingText from './LoadingText';
 import LoadingOverlay from './LoadingOverlay';
 import Badge from './Badge';
+import { useLanguage } from '../contexts/LanguageContext';
 
 const INFO_FIELD_VALUE_MIN_HEIGHT = 30;
 export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
@@ -27,6 +28,7 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
     const { location } = useLocation();
     const { isDarkMode } = useAppTheme();
     const [isAccepting, setIsAccepting] = useState(false);
+    const { t } = useLanguage();
 
     const destination = useMemo(() => {
         const pickup = order.getAttribute('payload.pickup');
@@ -44,13 +46,13 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
     }, [location, destination]);
 
     const handleAccept = useCallback(async () => {
-        Alert.alert('Accept Ad-Hoc order?', 'By accepting this ad-hoc order it will become assigned to you and the order will start immediatley.', [
+        Alert.alert(t('common.cancel'), t('AdhocOrderCard.byAcceptingThisAdHocOrderItWillBecomeAssignedToYouAndTheOrderWillStartImmediatley'), [
             {
-                text: 'Cancel',
+                text: t('common.cancel'),
                 style: 'cancel',
             },
             {
-                text: 'Accept',
+                text: t('AdhocOrderCard.acceptOrder'),
                 onPress: async () => {
                     setIsAccepting(true);
 
@@ -70,13 +72,13 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
     }, [order, setIsAccepting]);
 
     const handleDismiss = useCallback(() => {
-        Alert.alert('Dismiss Ad-Hoc order?', 'By dimissing this ad-hoc order it will no longer display as an available order.', [
+        Alert.alert(t('common.cancel'), t('AdhocOrderCard.byDimissingThisAdHocOrderItWillNoLongerDisplayAsAnAvailableOrder'), [
             {
-                text: 'Cancel',
+                text: t('common.cancel'),
                 style: 'cancel',
             },
             {
-                text: 'OK',
+                text: t('common.close'),
                 onPress: () => {
                     if (typeof onDismiss === 'function') {
                         onDismiss(order);
@@ -88,7 +90,7 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
 
     return (
         <Pressable onPress={onPress}>
-            <LoadingOverlay isVisible={isAccepting} text='Accepting and assigning order...' />
+            <LoadingOverlay isVisible={isAccepting} text={t('AdhocOrderCard.acceptingAndAssigningOrder')} />
             <YStack bg='$info' borderRadius='$4' borderWidth={1} borderColor='$infoBorder'>
                 <YStack height={150} borderBottomWidth={1} borderColor='$infoBorder'>
                     <LiveOrderRoute
@@ -110,7 +112,7 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
                 <YStack flex={1} borderRadius='$4'>
                     <XStack bg='$blue-800' alignItems='center' px='$3' py='$3' mb='$3' borderBottomWidth={1} borderColor='$infoBorder'>
                         <Text color='$infoText' fontSize='$6' fontWeight='bold'>
-                            Order Available Nearby: {formatMeters(distance)}
+                            {t('AdhocOrderCard.orderAvailableNearby')}: {formatMeters(distance)}
                         </Text>
                     </XStack>
                     <XStack alignItems='start' justifyContent='space-between' px='$3' mb='$3'>
@@ -126,7 +128,7 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
                                     {formatWhatsAppTimestamp(new Date(order.getAttribute('created_at')))}
                                 </Text>
                                 <Text color='$textPrimary' fontSize={13}>
-                                    {formatMeters(distance)} away
+                                    {formatMeters(distance)} {t('AdhocOrderCard.away')}
                                 </Text>
                             </YStack>
                         </XStack>
@@ -139,23 +141,23 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
                             icon={faLocationDot}
                             iconColor={theme['$textPrimary'].val}
                             waypoint={destination.serialize()}
-                            title='Pickup Destination'
+                            title={t('AdhocOrderCard.pickupDestination')}
                             titleStyle={{ fontWeight: 'bold', fontSize: 14, textTransform: 'uppercase' }}
                         />
                     </YStack>
                     <XStack px='$3' pb='$3' gap='$2'>
                         <YStack flex={1}>
                             <Button onPress={handleAccept} bg='$success' borderColor='$successBorder' borderWidth={1} disabled={isAccepting}>
                                 <Button.Icon>{isAccepting ? <Spinner color='$successText' /> : <FontAwesomeIcon icon={faCheck} color={theme['$successText'].val} />}</Button.Icon>
-                                <Button.Text color='$successText'>Accept Order</Button.Text>
+                                <Button.Text color='$successText'>{t('AdhocOrderCard.acceptOrder')}</Button.Text>
                             </Button>
                         </YStack>
                         <YStack flex={1}>
                             <Button onPress={handleDismiss} bg='$error' borderColor='$errorBorder' borderWidth={1} disabled={isAccepting}>
                                 <Button.Icon>
                                     <FontAwesomeIcon icon={faBan} color={theme['$errorText'].val} />
                                 </Button.Icon>
-                                <Button.Text color='$errorText'>Dismiss Order</Button.Text>
+                                <Button.Text color='$errorText'>{t('AdhocOrderCard.dismissOrder')}</Button.Text>
                             </Button>
                         </YStack>
                     </XStack>
@@ -165,4 +167,4 @@ export const AdhocOrderCard = ({ order, onPress, onAccept, onDismiss }) => {
     );
 };
 
-export default AdhocOrderCard;
+export default AdhocOrderCard;
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
@@ -5,22 +5,25 @@ import { faFacebook, faInstagram, faGoogle, faApple } from '@fortawesome/free-br
 import { faPhone } from '@fortawesome/free-solid-svg-icons';
 import LinearGradient from 'react-native-linear-gradient';
 import { useTheme } from 'tamagui';
+import { useLanguage } from '../contexts/LanguageContext';
 
 export const PhoneLoginButton = ({ onPress, ...props }) => {
     const theme = useTheme();
+    const { t } = useLanguage();
 
     return (
         <Button onPress={onPress} bg='$subsurface' borderWidth={1} borderColor='$borderColor' width='100%' {...props} rounded>
             <Button.Icon>
                 <FontAwesomeIcon icon={faPhone} color={theme['$textPrimary'].val} />
             </Button.Icon>
-            <Button.Text color='$textPrimary'>Continue with Phone</Button.Text>
+            <Button.Text color='$textPrimary'>{t('Buttons.continueWithPhone')}</Button.Text>
         </Button>
     );
 };
 
 export const AppleLoginButton = ({ onPress, ...props }) => {
     const theme = useTheme();
+    const { t } = useLanguage();
     return (
         <Button onPress={onPress} bg='$white' borderWidth={1} borderColor='$gray-200' {...props} rounded>
             <Button.Icon>
@@ -32,6 +35,7 @@ export const AppleLoginButton = ({ onPress, ...props }) => {
 
 export const FacebookLoginButton = ({ onPress, ...props }) => {
     const theme = useTheme();
+    const { t } = useLanguage();
     return (
         <Button onPress={onPress} bg='$blue-600' borderWidth={1} borderColor='$blue-800' {...props} rounded>
             <Button.Icon>
@@ -43,6 +47,7 @@ export const FacebookLoginButton = ({ onPress, ...props }) => {
 
 export const InstagramLoginButton = ({ onPress, style = {}, ...props }) => {
     const theme = useTheme();
+    const { t } = useLanguage();
     return (
         <LinearGradient
             colors={['#feda75', '#fa7e1e', '#d62976', '#962fbf', '#4f5bd5']}
@@ -60,10 +65,13 @@ export const InstagramLoginButton = ({ onPress, style = {}, ...props }) => {
     );
 };
 
-export const GoogleLoginButton = ({ onPress, ...props }) => (
-    <Button onPress={onPress} bg='#4285F4' {...props} rounded>
-        <Button.Icon>
-            <FontAwesomeIcon icon={faGoogle} color='white' />
-        </Button.Icon>
-    </Button>
-);
+export const GoogleLoginButton = ({ onPress, ...props }) => {
+    const { t } = useLanguage();
+    return (
+        <Button onPress={onPress} bg='#4285F4' {...props} rounded>
+            <Button.Icon>
+                <FontAwesomeIcon icon={faGoogle} color='white' />
+            </Button.Icon>
+        </Button>
+    );
+};
diff --git a/src/components/CameraCapture.tsx b/src/components/CameraCapture.tsx
@@ -1,12 +1,13 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions, Platform, Alert } from 'react-native';
 import { YStack, XStack, Button, Text, Image, Card, ScrollView } from 'tamagui';
 import { Camera, useCameraDevice, useFrameProcessor } from 'react-native-vision-camera';
 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';
+import { useLanguage } from '../contexts/LanguageContext';
 
 const MENU_BAR_HEIGHT = 160;
 
@@ -19,6 +20,7 @@ interface CameraCaptureScreenProps {
 }
 
 const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
+    const { t } = useLanguage();
     const cameraRef = useRef<CameraRef>(null);
     const device = useCameraDevice('back');
     const { screenHeight } = useDimensions();
@@ -46,7 +48,7 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
                 flash: 'off',
                 qualityPrioritization: 'balanced',
             });
-            toast.info('Photo captured.', { position: ToastPosition.TOP });
+            toast.info(t('CameraCapture.photoCaptured'), { position: ToastPosition.TOP });
 
             const filePath = (Platform.OS === 'ios' ? '' : 'file://') + photo.path;
             const base64Data = await RNFS.readFile(filePath, 'base64');
@@ -59,7 +61,7 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
         } catch (error) {
             console.warn('Error taking photo:', error);
         }
-    }, []);
+    }, [t]);
 
     // Let the user pick images from their camera roll
     const handleSelectFromCameraRoll = useCallback(async () => {
@@ -74,13 +76,13 @@ 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 });
+                toast.info(t('CameraCapture.photoAddedFromGallery'), { position: ToastPosition.TOP });
                 setPhotos((prev) => [...prev, { uri: node.image.uri }]);
             }
         } catch (error) {
             console.warn('Error selecting from camera roll:', error);
         }
-    }, []);
+    }, [t]);
 
     const openGalleryOverlay = () => setShowGalleryOverlay(true);
     const closeGalleryOverlay = () => setShowGalleryOverlay(false);
@@ -102,7 +104,7 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
     if (!device || !hasPermission) {
         return (
             <YStack flex={1} justifyContent='center' alignItems='center'>
-                <Text color='$textSecondary'>Loading camera or awaiting permission...</Text>
+                <Text color='$textSecondary'>{t('CameraCapture.loadingCameraOrAwaitingPermission')}</Text>
             </YStack>
         );
     }
@@ -115,21 +117,21 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
             <YStack width='100%' height={MENU_BAR_HEIGHT} bg='$background' py='$3' space='$4' borderTopWidth={1} borderColor='$borderColorWithShadow'>
                 <XStack ai='center' jc='space-between' px='$4'>
                     <Button onPress={handleSelectFromCameraRoll}>
-                        <Button.Text>Gallery</Button.Text>
+                        <Button.Text>{t('CameraCapture.gallery')}</Button.Text>
                     </Button>
                     <Button onPress={handleTakePhoto} size='$6' circular bg='$blue-500' borderWidth={5} borderColor='$blue-700'>
                         <Button.Text fontSize={14} color='$white'>
-                            Snap
+                            {t('CameraCapture.snap')}
                         </Button.Text>
                     </Button>
                     <Button onPress={openGalleryOverlay}>
-                        <Button.Text>{photos.length} Photos</Button.Text>
+                        <Button.Text>{photos.length} {t('CameraCapture.photos')}</Button.Text>
                     </Button>
                 </XStack>
                 <YStack px='$5'>
                     <Button width='100%' bg='$success' borderWidth={1} borderColor='$successBorder' onPress={handleDone}>
                         <Button.Text fontSize={15} color='$successText'>
-                            Done
+                            {t('common.done')}
                         </Button.Text>
                     </Button>
                 </YStack>
@@ -139,7 +141,7 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
                 <YStack pos='absolute' top={0} left={0} w='100%' h='100%' bg='$surface' opacity={0.95}>
                     <XStack jc='flex-end' p='$4'>
                         <Button size='$3' onPress={closeGalleryOverlay} bg='$default' borderWidth={1} borderColor='$defaultBorder'>
-                            <Button.Text color='$defaultText'>Close</Button.Text>
+                            <Button.Text color='$defaultText'>{t('common.close')}</Button.Text>
                         </Button>
                     </XStack>
 
@@ -175,4 +177,4 @@ const CameraCapture = ({ onDone }: CameraCaptureScreenProps) => {
     );
 };
 
-export default CameraCapture;
+export default CameraCapture;
diff --git a/src/components/ChatKeyboard.tsx b/src/components/ChatKeyboard.tsx
@@ -6,10 +6,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { faCamera, faPlus, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import useAppTheme from '../hooks/use-app-theme';
 import CameraCapture from './CameraCapture';
+import { useLanguage } from '../contexts/LanguageContext';
 
 const INPUT_MIN_HEIGHT = 40;
 const INPUT_MAX_HEIGHT = 120;
 const ChatKeyboard = ({ onSend, onAttach, onCamera, onFocus, onBlur }) => {
+    const { t } = useLanguage();
     const { isDarkMode } = useAppTheme();
     const theme = useTheme();
     const headerHeight = useHeaderHeight();
@@ -69,7 +71,7 @@ const ChatKeyboard = ({ onSend, onAttach, onCamera, onFocus, onBlur }) => {
                             maxHeight={INPUT_MAX_HEIGHT}
                             textAlignVertical='top'
                             lineHeight={20}
-                            placeholder='Type a message'
+                            placeholder={t('ChatKeyboard.typeAMessage')}
                             multiline
                             backgroundColor='$surface'
                             borderColor='$borderColor'
@@ -104,4 +106,4 @@ const ChatKeyboard = ({ onSend, onAttach, onCamera, onFocus, onBlur }) => {
     );
 };
 
-export default ChatKeyboard;
+export default ChatKeyboard;
diff --git a/src/components/ChatParticipants.tsx b/src/components/ChatParticipants.tsx
@@ -2,15 +2,17 @@ import React from 'react';
 import { Pressable } from 'react-native';
 import { Avatar, XStack, YStack, Text, useTheme } from 'tamagui';
 import useAppTheme from '../hooks/use-app-theme';
+import { useLanguage } from '../contexts/LanguageContext';
 
 export const ChatParticipants = ({ participants = [], size = 30, onPress }) => {
     const { isDarkMode } = useAppTheme();
+    const { t } = useLanguage();
 
     // Display a friendly message when no participants exist
     if (participants.length === 0) {
         return (
             <XStack alignItems='center'>
-                <Text color='$textPrimary'>No participants</Text>
+                <Text color='$textPrimary'>{t('ChatParticipants.noParticipants')}</Text>
             </XStack>
         );
     }
@@ -69,4 +71,4 @@ export const ChatParticipants = ({ participants = [], size = 30, onPress }) => {
     );
 };
 
-export default ChatParticipants;
+export default ChatParticipants;