KrikoriosandClaude Opus 5
8807ff41c5
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>
98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import { Text, TouchableOpacity, View } from "react-native";
|
|
|
|
import { SERVICES } from "@/constants/services";
|
|
import { useT } from "@/lib/i18n";
|
|
import { useServiceAvailability } from "@/lib/use-service-availability";
|
|
import { useLocationStore, useServiceStore } from "@/store";
|
|
|
|
/**
|
|
* Service picker: Car / Moto / Courier / My Car.
|
|
*
|
|
* Four equal tiles across the row rather than a scroller — with only four
|
|
* services, anything off-screen is a service riders won't discover. Selection
|
|
* styling matches the role picker on sign-up so the two read as the same
|
|
* control.
|
|
*
|
|
* Each tile also carries live availability. The map only ever draws the
|
|
* selected service, so picking one with nobody on it produced an empty map and
|
|
* no explanation — the rider couldn't tell "no drivers tonight" from "no motos,
|
|
* but four cars are around the corner". Showing the count on the tile makes
|
|
* that visible before they choose, instead of after they've given up.
|
|
*/
|
|
export const ServiceSelector = () => {
|
|
const { service, setService } = useServiceStore();
|
|
const { userLatitude, userLongitude } = useLocationStore();
|
|
const t = useT();
|
|
|
|
const { counts, loading } = useServiceAvailability(
|
|
userLatitude,
|
|
userLongitude,
|
|
);
|
|
|
|
const selected = SERVICES.find((item) => item.id === service);
|
|
|
|
return (
|
|
<View>
|
|
<View className="flex-row gap-2">
|
|
{SERVICES.map((item) => {
|
|
const active = item.id === service;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
onPress={() => setService(item.id)}
|
|
activeOpacity={0.8}
|
|
accessibilityRole="button"
|
|
accessibilityState={{ selected: active }}
|
|
className={`flex-1 items-center rounded-2xl border py-3 ${
|
|
active
|
|
? "border-primary-500 bg-primary-500/10"
|
|
: "border-neutral-100 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800"
|
|
}`}
|
|
>
|
|
<MaterialCommunityIcons
|
|
name={item.icon}
|
|
size={24}
|
|
color={active ? "#0286ff" : "#858585"}
|
|
/>
|
|
|
|
<Text
|
|
numberOfLines={1}
|
|
className={`mt-1.5 text-xs font-JakartaBold ${
|
|
active ? "text-primary-500" : "text-black dark:text-white"
|
|
}`}
|
|
>
|
|
{t(item.labelKey)}
|
|
</Text>
|
|
|
|
{/* Availability. Hidden until the first count lands so the tiles
|
|
don't flash "none nearby" while the request is still out. */}
|
|
<Text
|
|
numberOfLines={1}
|
|
className={`mt-0.5 text-[10px] font-JakartaMedium ${
|
|
loading
|
|
? "text-transparent"
|
|
: counts[item.id] > 0
|
|
? "text-emerald-600 dark:text-emerald-400"
|
|
: "text-general-200 dark:text-neutral-500"
|
|
}`}
|
|
>
|
|
{counts[item.id] > 0
|
|
? t("services.nearbyCount", { n: counts[item.id] })
|
|
: t("services.noneNearby")}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
{selected ? (
|
|
<Text className="mt-3 text-sm font-Jakarta text-general-200 dark:text-neutral-400">
|
|
{t(selected.taglineKey)}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
};
|