Add rider/driver role selection after sign-up

- users.role column (+ migration in seed script) - /(api)/user: GET role by clerkId, PATCH to set role - Role selection screen; drivers get placeholder driver-home - Root index routes by role; hardened location handling on home
2026-08-22 16:13:59 +03:00
parent fdc1664cce
commit fbe92c9d16
9 changed files with 243 additions and 19 deletions
@@ -0,0 +1,77 @@
+import { useUser } from "@clerk/clerk-expo";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Alert, Text, TouchableOpacity, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { fetchAPI } from "@/lib/fetch";
+
+const RoleSelection = () => {
+  const { user } = useUser();
+  const [saving, setSaving] = useState(false);
+
+  const chooseRole = async (role: "rider" | "driver") => {
+    if (!user?.id || saving) return;
+
+    setSaving(true);
+
+    try {
+      const { error } = await fetchAPI("/(api)/user", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ clerkId: user.id, role }),
+      });
+
+      if (error) throw new Error(error);
+
+      router.replace(
+        role === "driver" ? "/(root)/driver-home" : "/(root)/(tabs)/home",
+      );
+    } catch (err) {
+      console.log("[ROLE_SELECT]: ", err);
+      Alert.alert("Error", "Could not save your choice. Please try again.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-white justify-center px-7">
+      <Text className="text-3xl font-JakartaExtraBold text-center">
+        How will you use Waseel?
+      </Text>
+
+      <Text className="text-base text-general-200 font-Jakarta text-center mt-3 mb-10">
+        You can change this later by contacting support.
+      </Text>
+
+      <TouchableOpacity
+        onPress={() => chooseRole("rider")}
+        disabled={saving}
+        className="bg-primary-500 rounded-2xl p-7 mb-5 items-center"
+      >
+        <Text className="text-5xl mb-3">🧍</Text>
+        <Text className="text-2xl font-JakartaBold text-white">
+          I&apos;m a Rider
+        </Text>
+        <Text className="text-sm font-Jakarta text-white/80 text-center mt-2">
+          Book rides and get around Lebanon
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => chooseRole("driver")}
+        disabled={saving}
+        className="bg-general-600 rounded-2xl p-7 items-center"
+      >
+        <Text className="text-5xl mb-3">🚗</Text>
+        <Text className="text-2xl font-JakartaBold">I&apos;m a Driver</Text>
+        <Text className="text-sm font-Jakarta text-general-200 text-center mt-2">
+          Give rides and earn money
+        </Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+};
+
+export default RoleSelection;