Files
waseel/components/settings-row.tsx
T
KrikoriosandClaude Opus 5 8807ff41c5 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>
2026-08-26 02:17:55 +03:00

116 lines
3.0 KiB
TypeScript

import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Switch, Text, TouchableOpacity, View } from "react-native";
import { useTheme } from "@/lib/theme";
type IconName = React.ComponentProps<typeof MaterialCommunityIcons>["name"];
type RightKind = "chevron" | "switch" | "value" | "check" | "none";
type SettingsRowProps = {
icon: IconName;
title: string;
subtitle?: string;
right?: RightKind;
/** For `right: "value"` — the string shown on the trailing side. */
value?: string;
/** For `right: "check"` — shows a blue check when true, nothing when false. */
selected?: boolean;
/** For `right: "switch"`. */
switchValue?: boolean;
onSwitchChange?: (value: boolean) => void;
onPress?: () => void;
/** Red accent — used for the emergency-call row. */
danger?: boolean;
};
/** A single row in the Settings screen. Born dark-aware. */
export const SettingsRow = ({
icon,
title,
subtitle,
right = "none",
value,
selected,
switchValue,
onSwitchChange,
onPress,
danger = false,
}: SettingsRowProps) => {
const { isDark } = useTheme();
const interactive = right === "chevron" || right === "value" || right === "check";
const content = (
<View className="flex-row items-center py-3.5">
<View
className={`w-10 h-10 rounded-full items-center justify-center mr-3.5 ${
danger
? "bg-rose-500/15"
: "bg-neutral-100 dark:bg-neutral-800"
}`}
>
<MaterialCommunityIcons
name={icon}
size={20}
color={danger ? "#e11d48" : isDark ? "#e5e5e5" : "#404040"}
/>
</View>
<View className="flex-1">
<Text
className={`text-[15px] font-JakartaSemiBold ${
danger ? "text-rose-600 dark:text-rose-400" : "text-black dark:text-white"
}`}
>
{title}
</Text>
{subtitle ? (
<Text className="text-xs font-Jakarta text-general-200 dark:text-neutral-400 mt-0.5">
{subtitle}
</Text>
) : null}
</View>
{right === "switch" ? (
<Switch
value={switchValue}
onValueChange={onSwitchChange}
trackColor={{ false: "#d4d4d4", true: "#0286ff" }}
/>
) : null}
{right === "value" ? (
<Text className="text-sm font-JakartaMedium text-general-200 dark:text-neutral-400 mr-1">
{value}
</Text>
) : null}
{right === "check" && selected ? (
<MaterialCommunityIcons name="check" size={22} color="#0286ff" />
) : null}
{right === "chevron" ? (
<MaterialCommunityIcons
name="chevron-right"
size={22}
color={isDark ? "#737373" : "#a3a3a3"}
/>
) : null}
</View>
);
if (right === "switch" || !interactive || !onPress) {
return <View className="px-4">{content}</View>;
}
return (
<TouchableOpacity
onPress={onPress}
activeOpacity={0.6}
className="px-4"
>
{content}
</TouchableOpacity>
);
};