Waseel: driver capture, chat/calls, dispatch, and session fixes
Driver onboarding now photographs the licence, ID card and vehicle
registration and reads the credential fields off them, plus a camera-only
profile selfie riders check the arriving driver against. Adds in-app chat
and WebRTC calls, push-backed ride offers, ratings, cancellation and
payment sheets, settlement, and the owner dashboard endpoints behind them.
Camera permission on Android:
- Declare CAMERA and READ_MEDIA_IMAGES in the manifest. expo-image-picker's
own plugin never declares CAMERA, and Android denies a request for an
undeclared permission instantly and silently — no dialog is ever shown,
which is indistinguishable from the app not asking at all.
- Handle canAskAgain: once Android stops showing the dialog, repeating why
we need it is a dead end, so offer Open Settings instead (lib/capture-
permission.ts), matching what the location flow already did.
Session: a 401 on a request that carried a token now ends the session
instead of being reinterpreted per-screen — driver-home had been reading it
as "this user has no driver profile" and showing an onboarding form to an
already-onboarded driver. Requests without a token are exempt so a failed
sign-in doesn't sign you out, and the notification is latched per token so
concurrent polls tear the session down once. (root) gains the auth guard
that turns that into the sign-in screen; app/index.tsx only guarded the way
in, leaving a session that ended mid-screen with nowhere to go.
Also ignore .uploads/ — it holds driver licence, ID and vehicle scans plus
profile photos, which are personal data and must not be committed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Krikorios
co-authored by
Claude Opus 5
Claude Opus 5
parent
1d84003e0a
commit
8807ff41c5
@@ -0,0 +1,177 @@
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
import { SERVICES } from "@/constants/services";
|
||||
import { driverPhotoUri } from "@/lib/driver-photo";
|
||||
import { useT } from "@/lib/i18n";
|
||||
import type { RideOffer } from "@/types/type";
|
||||
|
||||
// The drivers who have volunteered for a request, and the rider's choice
|
||||
// between them.
|
||||
//
|
||||
// Dispatch broadcasts the job and this is what comes back: several drivers,
|
||||
// none of them assigned, each waiting to be picked. So every row has to carry
|
||||
// what a person actually decides on — how far away they are, how they're
|
||||
// rated, what they drive — and picking one has to be a single deliberate tap,
|
||||
// because that tap is what commits the rider and releases everyone else.
|
||||
|
||||
// Rough road-speed assumption for turning a straight-line distance into
|
||||
// minutes. A per-offer Directions call would be more accurate and would also
|
||||
// mean one billed request per driver per poll; this is honest to within a
|
||||
// couple of minutes in city traffic, which is the precision a rider comparing
|
||||
// three drivers is actually using.
|
||||
const URBAN_KMH = 22;
|
||||
// Streets aren't straight. Multiplying the great-circle distance gets closer
|
||||
// to the distance a car really drives.
|
||||
const ROAD_FACTOR = 1.3;
|
||||
|
||||
const etaMinutes = (meters: number | null): number | null => {
|
||||
if (meters === null || !Number.isFinite(meters)) return null;
|
||||
return Math.max(
|
||||
1,
|
||||
Math.round(((meters * ROAD_FACTOR) / 1000 / URBAN_KMH) * 60),
|
||||
);
|
||||
};
|
||||
|
||||
const distanceLabel = (meters: number | null): string | null => {
|
||||
if (meters === null || !Number.isFinite(meters)) return null;
|
||||
return meters < 1000
|
||||
? `${Math.round(meters / 50) * 50} m`
|
||||
: `${(meters / 1000).toFixed(1)} km`;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
offers: RideOffer[];
|
||||
/** Offer currently being taken, so only that row shows a spinner. */
|
||||
pendingOfferId: number | null;
|
||||
busy: boolean;
|
||||
onPick: (offer: RideOffer) => void;
|
||||
};
|
||||
|
||||
export const OfferList = ({ offers, pendingOfferId, busy, onPick }: Props) => {
|
||||
const t = useT();
|
||||
|
||||
// What the rider is getting into. A driver who never filled in their car
|
||||
// model would otherwise leave the vehicle line blank on the one screen where
|
||||
// the rider is choosing between cars, so the service they drive for stands
|
||||
// in — "Car · 4 seats" is thin, but it isn't nothing.
|
||||
const vehicle = (offer: RideOffer): string => {
|
||||
const service = SERVICES.find((s) => s.id === offer.service);
|
||||
const label = offer.car_model ?? (service ? t(service.labelKey) : null);
|
||||
const seats = offer.car_seats
|
||||
? t("bookRide.offers.seats", undefined, offer.car_seats)
|
||||
: null;
|
||||
|
||||
return [label, seats].filter(Boolean).join(" · ");
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="mt-2">
|
||||
<View className="flex-row items-center justify-between mb-2">
|
||||
<Text className="text-base font-JakartaBold text-black dark:text-white">
|
||||
{t("bookRide.offers.title")}
|
||||
</Text>
|
||||
<Text className="text-xs text-general-200 dark:text-neutral-400">
|
||||
{t("bookRide.offers.count", undefined, offers.length)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{offers.map((offer) => {
|
||||
const name = [offer.first_name, offer.last_name]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
const distance = offer.pickup_distance_m ?? null;
|
||||
const eta = etaMinutes(distance);
|
||||
const taking = pendingOfferId === offer.offer_id;
|
||||
// The face the rider is choosing between. This is the screen the
|
||||
// driver's photo exists for, so it leads the row.
|
||||
const photo = driverPhotoUri(offer.profile_image_url);
|
||||
|
||||
return (
|
||||
<View
|
||||
key={offer.offer_id}
|
||||
className="bg-white dark:bg-neutral-900 rounded-2xl p-3 mb-2 flex-row items-center"
|
||||
>
|
||||
{photo ? (
|
||||
<Image
|
||||
source={{ uri: photo }}
|
||||
className="w-12 h-12 rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<View className="w-12 h-12 rounded-full bg-neutral-200 dark:bg-neutral-800 items-center justify-center">
|
||||
<MaterialCommunityIcons
|
||||
name="account"
|
||||
size={22}
|
||||
color="#9ca3af"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="ml-3 flex-1">
|
||||
<Text
|
||||
className="font-JakartaSemiBold text-black dark:text-white"
|
||||
numberOfLines={1}
|
||||
>
|
||||
{name || t("bookRide.match.driverFallback")}
|
||||
</Text>
|
||||
|
||||
<View className="flex-row items-center gap-x-2 mt-0.5">
|
||||
<View className="flex-row items-center gap-x-1">
|
||||
<MaterialCommunityIcons
|
||||
name="star"
|
||||
size={13}
|
||||
color="#f59e0b"
|
||||
/>
|
||||
<Text className="text-xs text-general-200 dark:text-neutral-400">
|
||||
{offer.rating != null
|
||||
? Number(offer.rating).toFixed(1)
|
||||
: t("bookRide.ratingFallback")}
|
||||
</Text>
|
||||
</View>
|
||||
{vehicle(offer) ? (
|
||||
<Text
|
||||
className="text-xs text-general-200 dark:text-neutral-400 flex-1"
|
||||
numberOfLines={1}
|
||||
>
|
||||
{vehicle(offer)}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{eta !== null ? (
|
||||
<Text className="text-xs font-JakartaMedium text-primary-500 mt-0.5">
|
||||
{t("bookRide.offers.away", {
|
||||
eta,
|
||||
distance: distanceLabel(distance) ?? "",
|
||||
})}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => onPick(offer)}
|
||||
disabled={busy}
|
||||
className={`rounded-full px-5 py-2.5 ml-2 ${
|
||||
busy && !taking ? "bg-emerald-500/40" : "bg-emerald-500"
|
||||
}`}
|
||||
>
|
||||
{taking ? (
|
||||
<ActivityIndicator size="small" color="#ffffff" />
|
||||
) : (
|
||||
<Text className="text-white font-JakartaBold text-xs">
|
||||
{t("bookRide.offers.pick")}
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user