Waseel: driver app, dispatch, POI suggestions, map fixes

components/nearby-suggestions.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 
 import { POI_CATEGORIES, searchNearby } from "@/lib/places";
+import { useT } from "@/lib/i18n";
 import { useLocationStore } from "@/store";
 import type { NearbyPlace } from "@/types/type";
 
@@ -19,6 +20,7 @@ type ChipState =
 export const NearbySuggestions = () => {
   const { userLatitude, userLongitude, setDestinationLocation } =
     useLocationStore();
+  const t = useT();
   const [chips, setChips] = useState<Record<string, ChipState>>({});
 
   useEffect(() => {
@@ -57,8 +59,8 @@ export const NearbySuggestions = () => {
 
   return (
     <View>
-      <Text className="text-base font-JakartaSemiBold mb-3">
-        Nearby suggestions
+      <Text className="text-base font-JakartaSemiBold mb-3 text-black dark:text-white">
+        {t("pois.nearbyTitle")}
       </Text>
 
       <ScrollView
@@ -79,7 +81,7 @@ export const NearbySuggestions = () => {
               className={`flex-row items-center rounded-2xl border px-3 py-2.5 ${
                 ready
                   ? "border-primary-500 bg-primary-500/10"
-                  : "border-neutral-200 bg-neutral-100"
+                  : "border-neutral-200 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800"
               }`}
               style={{ minWidth: 150 }}
             >
@@ -96,19 +98,36 @@ export const NearbySuggestions = () => {
                   }`}
                   numberOfLines={1}
                 >
-                  {category.label}
+                  {t(category.labelKey)}
                 </Text>
                 <Text
-                  className="text-[11px] text-general-200"
+                  className="text-[11px] text-general-200 dark:text-neutral-400"
                   numberOfLines={1}
                 >
                   {!state || state.status === "loading"
-                    ? "searching…"
+                    ? t("pois.searching")
                     : state.status === "empty"
-                      ? "none nearby"
-                      : state.place.distanceMeters != null
-                        ? `${Math.round(state.place.distanceMeters / 100) / 10} km away`
-                        : state.place.name}
+                      ? t("pois.noneNearby")
+                      : state.place.routeDistanceMeters != null
+                        ? t("pois.routeAway", {
+                            km:
+                              Math.round(
+                                state.place.routeDistanceMeters / 100,
+                              ) / 10,
+                            min: Math.max(
+                              1,
+                              Math.round(
+                                (state.place.routeDurationSeconds ?? 0) / 60,
+                              ),
+                            ),
+                          })
+                        : state.place.distanceMeters != null
+                          ? t("pois.kmAway", {
+                              km:
+                                Math.round(state.place.distanceMeters / 100) /
+                                10,
+                            })
+                          : state.place.name}
                 </Text>
               </View>
             </TouchableOpacity>
@@ -117,4 +136,4 @@ export const NearbySuggestions = () => {
       </ScrollView>
     </View>
   );
-};
+};