Waseel: driver app, dispatch, POI suggestions, map fixes
This commit is contained in:
Krikorios
+61
-58
@@ -18,18 +18,21 @@ import { OAuth } from "@/components/oauth";
|
||||
import { OtpField } from "@/components/otp-field";
|
||||
import { icons, images } from "@/constants";
|
||||
import { ApiError, fetchAPI } from "@/lib/fetch";
|
||||
import { useT } from "@/lib/i18n";
|
||||
import { useSession } from "@/lib/session";
|
||||
|
||||
const ROLES = [
|
||||
{
|
||||
value: "rider",
|
||||
title: "I need a ride",
|
||||
description: "Book rides and get where you're going",
|
||||
titleKey: "auth.signUp.riderTitle",
|
||||
descKey: "auth.signUp.riderDesc",
|
||||
icon: "map" as const,
|
||||
},
|
||||
{
|
||||
value: "driver",
|
||||
title: "I want to drive",
|
||||
description: "Offer rides and earn money with your car",
|
||||
titleKey: "auth.signUp.driverTitle",
|
||||
descKey: "auth.signUp.driverDesc",
|
||||
icon: "dollar" as const,
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -37,6 +40,7 @@ type Role = (typeof ROLES)[number]["value"];
|
||||
|
||||
const SignUp = () => {
|
||||
const { setSession } = useSession();
|
||||
const t = useT();
|
||||
|
||||
const [role, setRole] = useState<Role>("rider");
|
||||
const [form, setForm] = useState({
|
||||
@@ -59,16 +63,16 @@ const SignUp = () => {
|
||||
const onSignUpPress = async () => {
|
||||
if (!form.name.trim() || !form.email.trim() || !form.password) {
|
||||
Alert.alert(
|
||||
"Missing information",
|
||||
"Please fill in your name, email and password.",
|
||||
t("auth.signUp.alertMissingTitle"),
|
||||
t("auth.signUp.alertMissingBody"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (form.phone.trim() && !/^[0-9\s\-()+.]+$/.test(form.phone)) {
|
||||
Alert.alert(
|
||||
"Invalid phone number",
|
||||
"Enter a valid Lebanese number, e.g. 70 123 456.",
|
||||
t("auth.signUp.alertPhoneTitle"),
|
||||
t("auth.signUp.alertPhoneBody"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -105,10 +109,10 @@ const SignUp = () => {
|
||||
password: "",
|
||||
}));
|
||||
Alert.alert(
|
||||
"Error",
|
||||
t("auth.signUp.alertErrorTitle"),
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Could not create your account.",
|
||||
: t("auth.signUp.alertErrorFallback"),
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -118,7 +122,7 @@ const SignUp = () => {
|
||||
if (!/^\d{6}$/.test(code)) {
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
error: "Enter the 6-digit code.",
|
||||
error: t("auth.signUp.errCode"),
|
||||
}));
|
||||
return;
|
||||
}
|
||||
@@ -153,42 +157,42 @@ const SignUp = () => {
|
||||
error:
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Verification failed. Please try again.",
|
||||
: t("auth.signUp.errVerify"),
|
||||
}));
|
||||
}
|
||||
},
|
||||
[form.email, setSession],
|
||||
[form.email, setSession, t],
|
||||
);
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
className="flex-1 bg-white dark:bg-neutral-950"
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 40 : 0}
|
||||
>
|
||||
<ScrollView
|
||||
className="flex-1 bg-white"
|
||||
className="flex-1 bg-white dark:bg-neutral-950"
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View className="flex-1 bg-white">
|
||||
<View className="flex-1 bg-white dark:bg-neutral-950">
|
||||
<View className="relative w-full h-[250px]">
|
||||
<Image
|
||||
source={images.signUpCar}
|
||||
alt="Car"
|
||||
alt={t("auth.signUp.carAlt")}
|
||||
className="z-0 w-full h-[250px]"
|
||||
resizeMode="contain"
|
||||
/>
|
||||
|
||||
<Text className="text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5">
|
||||
Create Your Account
|
||||
<Text className="text-2xl text-black dark:text-white font-JakartaSemiBold absolute bottom-5 left-5">
|
||||
{t("auth.signUp.createAccount")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="p-5">
|
||||
<Text className="text-lg font-JakartaSemiBold mb-3">
|
||||
How will you use Waseel?
|
||||
<Text className="text-lg font-JakartaSemiBold mb-3 text-black dark:text-white">
|
||||
{t("auth.signUp.howUse")}
|
||||
</Text>
|
||||
<View className="flex-row gap-3 mb-4">
|
||||
{ROLES.map((option) => {
|
||||
@@ -201,24 +205,24 @@ const SignUp = () => {
|
||||
className={`flex-1 justify-center rounded-2xl border p-4 ${
|
||||
selected
|
||||
? "border-primary-500 bg-primary-500/10"
|
||||
: "border-neutral-100 bg-neutral-100"
|
||||
: "border-neutral-100 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
source={option.value === "driver" ? icons.dollar : icons.map}
|
||||
alt={`${option.title} icon`}
|
||||
alt={t(`auth.signUp.${option.value === "driver" ? "driverTitle" : "riderTitle"}`)}
|
||||
className="h-7 w-7 mb-2"
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text
|
||||
className={`text-[15px] font-JakartaBold ${
|
||||
selected ? "text-primary-500" : "text-black"
|
||||
selected ? "text-primary-500" : "text-black dark:text-white"
|
||||
}`}
|
||||
>
|
||||
{option.title}
|
||||
{t(option.titleKey)}
|
||||
</Text>
|
||||
<Text className="text-xs text-neutral-400 font-Jakarta mt-1">
|
||||
{option.description}
|
||||
<Text className="text-xs text-neutral-400 dark:text-neutral-500 font-Jakarta mt-1">
|
||||
{t(option.descKey)}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@@ -226,8 +230,8 @@ const SignUp = () => {
|
||||
</View>
|
||||
|
||||
<InputField
|
||||
label="Name"
|
||||
placeholder="Karim Haddad"
|
||||
label={t("auth.signUp.name")}
|
||||
placeholder={t("auth.signUp.namePlaceholder")}
|
||||
icon={icons.person}
|
||||
value={form.name}
|
||||
onChangeText={(value) =>
|
||||
@@ -240,8 +244,8 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="Email"
|
||||
placeholder="karim@email.com"
|
||||
label={t("auth.signUp.email")}
|
||||
placeholder={t("auth.signUp.emailPlaceholder")}
|
||||
icon={icons.email}
|
||||
value={form.email}
|
||||
onChangeText={(value) =>
|
||||
@@ -254,8 +258,8 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="Phone (optional)"
|
||||
placeholder="70 123 456"
|
||||
label={t("auth.signUp.phoneOptional")}
|
||||
placeholder={t("auth.signUp.phonePlaceholder")}
|
||||
icon={icons.chat}
|
||||
value={form.phone}
|
||||
onChangeText={(value) =>
|
||||
@@ -268,8 +272,8 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="Password"
|
||||
placeholder="••••••••"
|
||||
label={t("auth.signUp.password")}
|
||||
placeholder={t("auth.signUp.passwordPlaceholder")}
|
||||
icon={icons.lock}
|
||||
secureTextEntry
|
||||
value={form.password}
|
||||
@@ -282,19 +286,19 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<CustomButton
|
||||
title="Sign Up"
|
||||
title={t("auth.signUp.signUpBtn")}
|
||||
onPress={onSignUpPress}
|
||||
className="mt-6"
|
||||
/>
|
||||
|
||||
<OAuth title="Sign up with Google" />
|
||||
<OAuth title={t("auth.signUp.signUpGoogle")} />
|
||||
|
||||
<Link
|
||||
href="/sign-in"
|
||||
className="text-base text-center text-general-200 mt-10"
|
||||
className="text-base text-center text-general-200 dark:text-neutral-400 mt-10"
|
||||
>
|
||||
<Text>Already have an account? </Text>
|
||||
<Text className="text-primary-500">Sign in</Text>
|
||||
<Text className="text-black dark:text-white">{t("auth.signUp.haveAccount")}</Text>
|
||||
<Text className="text-primary-500">{t("auth.signUp.signInLink")}</Text>
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
@@ -308,20 +312,19 @@ const SignUp = () => {
|
||||
}
|
||||
isVisible={verification.state === "pending"}
|
||||
>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2">
|
||||
Verification
|
||||
<View className="bg-white dark:bg-neutral-900 px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2 text-black dark:text-white">
|
||||
{t("auth.signUp.verify.title")}
|
||||
</Text>
|
||||
|
||||
<Text className="font-Jakarta mb-5">
|
||||
We've sent a verification code to {form.email}
|
||||
<Text className="font-Jakarta mb-5 text-black dark:text-white">
|
||||
{t("auth.signUp.verify.body", { email: form.email })}
|
||||
</Text>
|
||||
|
||||
{verification.devCode ? (
|
||||
<View className="bg-amber-50 border border-amber-300 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 font-Jakarta">
|
||||
Email delivery is not configured on this server. Your
|
||||
verification code is{" "}
|
||||
<View className="bg-amber-50 dark:bg-amber-950/40 border border-amber-300 dark:border-amber-800 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 dark:text-amber-400 font-Jakarta">
|
||||
{t("auth.signUp.verify.devBanner")}
|
||||
<Text className="font-JakartaBold">{verification.devCode}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
@@ -346,7 +349,7 @@ const SignUp = () => {
|
||||
) : null}
|
||||
|
||||
<CustomButton
|
||||
title={verification.busy ? "Verifying…" : "Verify Email"}
|
||||
title={verification.busy ? t("auth.signUp.verify.verifying") : t("auth.signUp.verify.verifyBtn")}
|
||||
onPress={() => onPressVerify(verification.code)}
|
||||
disabled={verification.busy}
|
||||
className="mt-5 bg-emerald-500"
|
||||
@@ -354,23 +357,23 @@ const SignUp = () => {
|
||||
</View>
|
||||
</ReactNativeModal>
|
||||
<ReactNativeModal isVisible={verification.state === "success"}>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<View className="bg-white dark:bg-neutral-900 px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Image
|
||||
source={images.check}
|
||||
alt="Check"
|
||||
alt={t("auth.signUp.verify.checkAlt")}
|
||||
className="w-[110px] h-[110px] mx-auto my-5"
|
||||
/>
|
||||
|
||||
<Text className="text-3xl font-JakartaBold text-center">
|
||||
Verified
|
||||
<Text className="text-3xl font-JakartaBold text-center text-black dark:text-white">
|
||||
{t("auth.signUp.verified.title")}
|
||||
</Text>
|
||||
|
||||
<Text className="text-base text-gray-400 font-Jakarta text-center mt-2">
|
||||
You've succesfully verified your account.
|
||||
<Text className="text-base text-gray-400 dark:text-neutral-500 font-Jakarta text-center mt-2">
|
||||
{t("auth.signUp.verified.body")}
|
||||
</Text>
|
||||
|
||||
<CustomButton
|
||||
title="Browse Home"
|
||||
title={t("common.browseHome")}
|
||||
onPress={() => router.push("/")}
|
||||
className="mt-5"
|
||||
/>
|
||||
@@ -382,4 +385,4 @@ const SignUp = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUp;
|
||||
export default SignUp;
|
||||
Reference in New Issue
Block a user