georges/waseel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build driver app, Uber-style dispatch, POI suggestions; fix map tiles

Browse Source 
Driver side (was a stub):
- In-app driver onboarding: a driver-role user creates their own linked
  drivers profile (driver/profile+api GET/POST/PATCH).
- Driver dashboard: online/offline toggle, today's earnings, incoming
  request cards (accept/decline), active ride panel (start/complete trip).
  Polls /driver/rides every 4s while online.
- Location heartbeat (use-driver-location): watchPositionAsync pings
  /driver/location every ~5s; restarts the watch on app foreground so a
  backgrounded driver doesn't go permanently stale and miss requests.

Dispatch (auto-match nearest, Uber-style):
- Ride state machine: requested -> accepted -> en_route -> completed/cancelled
  with a nullable driver_id until matched (lib/dispatch.matchNextDriver).
- matchNextDriver locks the ride (SELECT FOR UPDATE), expires 15s-stale
  offers, picks the nearest eligible driver of the matching service by
  haversine, offers one at a time. Called from ride/create, ride/[id] GET
  (lazy match on the rider's poll), and ride/[id]/respond (on decline).
- ride/create is now a request endpoint (driver_id NULL, status=requested,
  service); drops the pre-match driver_id payment reconciliation.
- ride/[id] GET returns status/service/nullable driver; PATCH handles rider
  cancel + driver en_route/completed. ride/list backs the history tabs.

Rider flow (best experience):
- confirm-ride is now a request screen: single trip fare + nearest-driver
  ETA + cash/card + Request Ride -> live status. Periodically polls online
  drivers of the selected service and disables Request when none are
  online (prevents the "stuck searching forever" state).
- book-ride is the live ride-status screen (searching -> accepted ->
  en_route -> completed/cancelled + Cancel), polling every 3s.
- lib/request-ride unifies the Areeba card flow + cash path.
- Map reads /driver/nearby (real positions, service-filtered); lib/map
  adds calculateTripFare + service-aware fares.

POI suggestions:
- lib/places (Google Nearby Search) + nearby-suggestions chips for
  mall/hospital/pharmacy/restaurant on the home screen.

Service categories now drive both matching and a per-service fare
multiplier (car 1.0 / moto 0.7 / courier 0.85 / chauffeur 1.5).

Map tiles: react-native-maps rendered blank on Android because no Google
Maps key was set. Switched app.json -> app.config.js so
android.config.googleMaps.apiKey is injected from
EXPO_PUBLIC_GOOGLE_API_KEY at build time (keeps the key out of git).
Requires a native rebuild (expo run:android) to take effect.

Also includes the prior payment/auth hardening (server-authoritative
payment_orders ledger with double-spend guards, peppered OTP, register
TOCTOU fix, stats cents fix) that was left uncommitted.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Krikorios
2026-08-24 13:57:21 +03:00
co-authored by Claude
parent 4e0a7cca51
commit f50ff27e11
48 changed files with 3342 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/map.tsx
+16 -5
View File
@@ -10,7 +10,7 @@ import {
calculateRegion,
generateMarkersFromData,
} from "@/lib/map";
import { useDriverStore, useLocationStore } from "@/store";
import { useDriverStore, useLocationStore, useServiceStore } from "@/store";
import type { Driver, MarkerData } from "@/types/type";
// react-native-maps sizes itself from a real style object, so give it explicit
@@ -40,15 +40,24 @@ const MUTED_POI_STYLE = [
];
export const Map = () => {
const { data: drivers, error } = useFetch<Driver[]>("/(api)/driver");
const {
userLatitude,
userLongitude,
destinationLatitude,
destinationLongitude,
} = useLocationStore();
const { service } = useServiceStore();
const { selectedDriver, setDrivers } = useDriverStore();
// Online drivers of the selected service near the rider. Falls back to a
// Beirut center when the rider's position isn't resolved yet so the map
// still populates instead of sitting empty.
const lat = userLatitude ?? 33.8938;
const lng = userLongitude ?? 35.5018;
const { data: drivers, error } = useFetch<Driver[]>(
`/(api)/driver/nearby?service=${service}&lat=${lat}&lng=${lng}`,
);
const [markers, setMarkers] = useState<MarkerData[]>([]);
const region = calculateRegion({
@@ -81,8 +90,9 @@ export const Map = () => {
userLongitude,
destinationLatitude,
destinationLongitude,
}).then((drivers) => {
setDrivers(drivers as MarkerData[]);
service,
}).then((driversWithTimes) => {
setDrivers((driversWithTimes as MarkerData[]) ?? []);
});
}
}, [
@@ -92,6 +102,7 @@ export const Map = () => {
userLatitude,
userLongitude,
setDrivers,
service,
]);
// The map itself never waits on the driver list or the location fix: drivers
components/nearby-suggestions.tsx
+120
View File
@@ -0,0 +1,120 @@
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useEffect, useState } from "react";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import { POI_CATEGORIES, searchNearby } from "@/lib/places";
import { useLocationStore } from "@/store";
import type { NearbyPlace } from "@/types/type";
// Four quick destination chips: nearest mall / hospital / pharmacy / restaurant
// around the rider. Tapping one sets it as the destination and opens find-ride.
// Each chip resolves independently, so a category with no result nearby just
// shows "none nearby" instead of breaking the whole row.
type ChipState =
| { status: "loading" }
| { status: "empty" }
| { status: "ready"; place: NearbyPlace };
export const NearbySuggestions = () => {
const { userLatitude, userLongitude, setDestinationLocation } =
useLocationStore();
const [chips, setChips] = useState<Record<string, ChipState>>({});
useEffect(() => {
if (userLatitude == null || userLongitude == null) return;
let cancelled = false;
setChips({});
// Resolve all four categories in parallel.
POI_CATEGORIES.forEach(async (category) => {
setChips((prev) => ({ ...prev, [category.id]: { status: "loading" } }));
const place = await searchNearby(category.googleType, {
latitude: userLatitude,
longitude: userLongitude,
});
if (cancelled) return;
setChips((prev) => ({
...prev,
[category.id]: place ? { status: "ready", place } : { status: "empty" },
}));
});
return () => {
cancelled = true;
};
}, [userLatitude, userLongitude]);
const select = (place: NearbyPlace) => {
setDestinationLocation({
latitude: place.latitude,
longitude: place.longitude,
address: place.name,
});
router.push("/(root)/find-ride");
};
return (
<View>
<Text className="text-base font-JakartaSemiBold mb-3">
Nearby suggestions
</Text>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ gap: 10, paddingBottom: 4 }}
>
{POI_CATEGORIES.map((category) => {
const state = chips[category.id];
const ready = state?.status === "ready" ? state.place : null;
return (
<TouchableOpacity
key={category.id}
disabled={!ready}
onPress={() => ready && select(ready)}
activeOpacity={0.8}
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"
}`}
style={{ minWidth: 150 }}
>
<MaterialCommunityIcons
name={category.icon as never}
size={20}
color={ready ? "#0286ff" : "#a3a3a3"}
/>
<View className="ml-2 flex-1">
<Text
className={`text-xs font-JakartaBold ${
ready ? "text-primary-500" : "text-neutral-400"
}`}
numberOfLines={1}
>
{category.label}
</Text>
<Text
className="text-[11px] text-general-200"
numberOfLines={1}
>
{!state || state.status === "loading"
? "searching…"
: state.status === "empty"
? "none nearby"
: state.place.distanceMeters != null
? `${Math.round(state.place.distanceMeters / 100) / 10} km away`
: state.place.name}
</Text>
</View>
</TouchableOpacity>
);
})}
</ScrollView>
</View>
);
};
components/payment.tsx
+42 -15
View File
@@ -5,7 +5,7 @@ import { Alert, Image, Text, TouchableOpacity, View } from "react-native";
import ReactNativeModal from "react-native-modal";
import { images } from "@/constants";
import { fetchAPI } from "@/lib/fetch";
import { ApiError, fetchAPI } from "@/lib/fetch";
import { formatLBP } from "@/lib/pricing";
import { useLocationStore } from "@/store";
import type { PaymentProps } from "@/types/type";
@@ -33,7 +33,9 @@ export const Payment = ({
const [success, setSuccess] = useState(false);
const [processing, setProcessing] = useState(false);
const recordRide = async (paymentStatus: string) => {
const fareCents = Math.round(parseFloat(amount) * 100); // in cents
const recordRide = async (paymentMethod: PaymentMethod, orderId?: string) => {
await fetchAPI("/(api)/ride/create", {
method: "POST",
headers: {
@@ -47,8 +49,9 @@ export const Payment = ({
destination_latitude: destinationLatitude,
destination_longitude: destinationLongitude,
ride_time: rideTime.toFixed(0),
fare_price: Math.round(parseFloat(amount) * 100), // in cents
payment_status: paymentStatus,
fare_price: fareCents,
payment_method: paymentMethod,
...(orderId ? { payment_order_id: orderId } : {}),
driver_id: driverId,
}),
});
@@ -75,8 +78,10 @@ export const Payment = ({
setProcessing(true);
try {
// 1. Create an Areeba checkout session on our server.
const { orderId, checkoutUrl, successIndicator, error } = await fetchAPI(
// 1. Create an Areeba checkout session on our server. The server stores
// the ride intent and the successIndicator; the client only gets an
// orderId + checkoutUrl.
const { orderId, checkoutUrl, error } = await fetchAPI(
"/(api)/(areeba)/create",
{
method: "POST",
@@ -86,7 +91,15 @@ export const Payment = ({
body: JSON.stringify({
name: fullName || email,
email,
amount,
fare_cents: fareCents,
driver_id: driverId,
origin_address: userAddress,
destination_address: destinationAddress,
origin_latitude: userLatitude,
origin_longitude: userLongitude,
destination_latitude: destinationLatitude,
destination_longitude: destinationLongitude,
ride_time: rideTime.toFixed(0),
}),
},
);
@@ -107,17 +120,21 @@ export const Payment = ({
) as string;
}
// 3. Verify the payment server-side before recording the ride.
// 3. Verify the payment server-side. The server compares
// resultIndicator against the stored successIndicator, reconciles
// the captured amount, and marks the order paid.
const verification = await fetchAPI("/(api)/(areeba)/verify", {
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({ orderId, resultIndicator, successIndicator }),
body: JSON.stringify({ orderId, resultIndicator }),
});
if (verification.success) {
await recordRide("paid");
// 4. Record the ride, consuming the paid order atomically. The client
// never sets payment_status itself.
await recordRide("card", orderId);
setSuccess(true);
} else {
Alert.alert(
@@ -127,10 +144,20 @@ export const Payment = ({
}
} catch (err) {
console.log("[PAYMENT]: ", err);
Alert.alert(
"Error",
"Something went wrong while processing your payment. Please try again.",
);
// Verification failures (cancelled, not captured, amount/intent mismatch)
// come back as 400s. fetchAPI throws ApiError on non-2xx, so without this
// branch every cancellation lands in the generic "something went wrong".
if (err instanceof ApiError && err.status === 400) {
Alert.alert(
"Payment not completed",
"Your payment was cancelled or could not be verified. Please try again.",
);
} else {
Alert.alert(
"Error",
"Something went wrong while processing your payment. Please try again.",
);
}
} finally {
setProcessing(false);
}
@@ -230,4 +257,4 @@ export const Payment = ({
</ReactNativeModal>
</>
);
};
};