Rebrand to Waseel, swap Stripe for Areeba, add phone-ready auth and DB seed

- Rename app: Waseel (name, slug, scheme waseel://, com.waseel.app ids, splash)
- Payments: replace Stripe with Areeba hosted checkout (create/verify API routes,
  lib/areeba.ts, WebBrowser-based payment flow)
- Maps: migrate address autocomplete to Places API (New), drop legacy library
- Web support: map stub for web (native maps are iOS/Android only)
- Auth: keep email + Google OAuth; fix OAuth redirect for Expo Go
- Add scripts/seed-db.mjs (schema + Lebanese driver seed)
- Pin Expo SDK 51 compatible package versions

app/(api)/(areeba)/create+api.ts

@@ -0,0 +1,38 @@
+import { createCheckoutSession } from "@/lib/areeba";
+
+export async function POST(req: Request) {
+  const body = await req.json();
+  const { name, email, amount, returnUrl } = body;
+
+  if (!name || !email || !amount)
+    return new Response(
+      JSON.stringify({ error: "Missing required payment information." }),
+      { status: 400 },
+    );
+
+  try {
+    const orderId = `waseel-${Date.now()}`;
+
+    const session = await createCheckoutSession({
+      orderId,
+      amount: parseFloat(amount),
+      currency: "USD",
+      description: `Waseel ride payment for ${name}`,
+      returnUrl: returnUrl || "waseel://book-ride",
+    });
+
+    return new Response(
+      JSON.stringify({
+        orderId,
+        checkoutUrl: session.checkoutUrl,
+        successIndicator: session.successIndicator,
+      }),
+    );
+  } catch (err) {
+    console.log("[AREEBA_PAYMENT_CREATE]: ", err);
+
+    return new Response(JSON.stringify({ error: "Internal Server Error" }), {
+      status: 500,
+    });
+  }
+}

app/(api)/(areeba)/verify+api.ts

@@ -0,0 +1,35 @@
+import { retrieveOrder } from "@/lib/areeba";
+
+export async function POST(req: Request) {
+  const body = await req.json();
+  const { orderId, resultIndicator, successIndicator } = body;
+
+  if (!orderId)
+    return new Response(JSON.stringify({ error: "Missing order id." }), {
+      status: 400,
+    });
+
+  try {
+    const order = await retrieveOrder(orderId);
+
+    // The gateway appends resultIndicator to the return URL after payment;
+    // it must match the successIndicator issued when the session was created.
+    const indicatorMatches =
+      !successIndicator || resultIndicator === successIndicator;
+
+    return new Response(
+      JSON.stringify({
+        success: order.paid && indicatorMatches,
+        status: order.status,
+        amount: order.amount,
+        currency: order.currency,
+      }),
+    );
+  } catch (err) {
+    console.log("[AREEBA_PAYMENT_VERIFY]: ", err);
+
+    return new Response(JSON.stringify({ error: "Internal Server Error" }), {
+      status: 500,
+    });
+  }
+}

app/(api)/(stripe)/create+api.ts

@@ -1,60 +0,0 @@
-import { Stripe } from "stripe";
-
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
-
-export async function POST(req: Request) {
-  const body = await req.json();
-  const { name, email, amount } = body;
-
-  if (!name || !email || !amount)
-    return new Response(
-      JSON.stringify({ error: "Please enter a valid email address" }),
-      { status: 404 },
-    );
-
-  try {
-    let customer;
-
-    const existingCustomer = await stripe.customers.list({ email });
-
-    if (existingCustomer.data.length > 0) customer = existingCustomer.data[0];
-    else {
-      customer = await stripe.customers.create({
-        name,
-        email,
-      });
-    }
-
-    const ephemeralKey = await stripe.ephemeralKeys.create(
-      { customer: customer.id },
-      { apiVersion: "2024-06-20" },
-    );
-
-    const paymentIntent = await stripe.paymentIntents.create({
-      amount: parseInt(amount) * 100,
-      currency: "USD",
-      customer: customer.id,
-      automatic_payment_methods: {
-        enabled: true,
-        allow_redirects: "never",
-      },
-    });
-
-    return new Response(
-      JSON.stringify({
-        paymentIntent: paymentIntent,
-        ephemeralKey: ephemeralKey,
-        customer: customer.id,
-      }),
-    );
-  } catch (err) {
-    console.log("[PAYMENT_CREATE]: ", err);
-
-    return new Response(
-      JSON.stringify({
-        error: "Internal Server Error",
-      }),
-      { status: 500 },
-    );
-  }
-}

app/(api)/(stripe)/pay+api.ts

@@ -1,44 +0,0 @@
-import { Stripe } from "stripe";
-
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
-
-export async function POST(req: Request) {
-  const body = await req.json();
-  const { payment_method_id, payment_intent_id, customer_id } = body;
-
-  if (!payment_method_id || !payment_intent_id || !customer_id)
-    return new Response(
-      JSON.stringify({ error: "Missing required payment information." }),
-      { status: 404 },
-    );
-
-  try {
-    const paymentMethod = await stripe.paymentMethods.attach(
-      payment_method_id,
-      {
-        customer: customer_id,
-      },
-    );
-
-    const result = await stripe.paymentIntents.confirm(payment_intent_id, {
-      payment_method: paymentMethod.id,
-    });
-
-    return new Response(
-      JSON.stringify({
-        success: true,
-        message: "Payment completed successfully.",
-        result,
-      }),
-    );
-  } catch (err) {
-    console.log("[PAYMENT_PAY]: ", err);
-
-    return new Response(
-      JSON.stringify({
-        error: "Internal Server Error",
-      }),
-      { status: 500 },
-    );
-  }
-}

app/(auth)/sign-in.tsx

@@ -63,7 +63,7 @@ const SignIn = () => {
         <View className="p-5">
           <InputField
             label="Email"
-            placeholder="john.doe@email.com"
+            placeholder="karim@email.com"
             icon={icons.email}
             value={form.email}
             onChangeText={(value) =>

app/(auth)/sign-up.tsx

@@ -114,7 +114,7 @@ const SignUp = () => {
         <View className="p-5">
           <InputField
             label="Name"
-            placeholder="John Doe"
+            placeholder="Karim Haddad"
             icon={icons.person}
             value={form.name}
             onChangeText={(value) =>
@@ -128,7 +128,7 @@ const SignUp = () => {
 
           <InputField
             label="Email"
-            placeholder="john.doe@email.com"
+            placeholder="karim@email.com"
             icon={icons.email}
             value={form.email}
             onChangeText={(value) =>

app/(root)/book-ride.tsx

@@ -1,5 +1,4 @@
 import { useUser } from "@clerk/clerk-expo";
-import { StripeProvider } from "@stripe/stripe-react-native";
 import { Image, Text, View } from "react-native";
 
 import { Payment } from "@/components/payment";
@@ -18,98 +17,92 @@ const BookRide = () => {
   )[0];
 
   return (
-    <StripeProvider
-      publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
-      merchantIdentifier="merchant.ryde.com"
-      urlScheme="ryde" // match it with app.json scheme
-    >
-      <RideLayout title="Book Ride">
-        <>
-          <Text className="text-xl font-JakartaSemiBold mb-3">
-            Ride Information
-          </Text>
+    <RideLayout title="Book Ride">
+      <>
+        <Text className="text-xl font-JakartaSemiBold mb-3">
+          Ride Information
+        </Text>
 
-          <View className="flex flex-col w-full items-center justify-center mt-10">
-            <Image
-              source={{ uri: driverDetails?.profile_image_url }}
-              alt="Driver Avatar"
-              className="w-28 h-28 rounded-full"
-            />
-
-            <View className="flex flex-row items-center justify-center mt-5 space-x-2">
-              <Text className="text-lg font-JakartaSemiBold">
-                {driverDetails?.title}
-              </Text>
-
-              <View className="flex flex-row items-center space-x-0.5">
-                <Image
-                  source={icons.star}
-                  alt="Star"
-                  className="w-5 h-5"
-                  resizeMode="contain"
-                />
-
-                <Text className="text-lg font-JakartaRegular">
-                  {driverDetails?.rating}
-                </Text>
-              </View>
-            </View>
-          </View>
-
-          <View className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
-            <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
-              <Text className="text-lg font-JakartaRegular">Ride Price</Text>
-
-              <Text className="text-lg font-JakartaRegular text-[#0CC25F]">
-                ${driverDetails?.price}
-              </Text>
-            </View>
-
-            <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
-              <Text className="text-lg font-JakartaRegular">Pickup Time</Text>
-
-              <Text className="text-lg font-JakartaRegular">
-                {formatTime(driverDetails?.time!)}
-              </Text>
-            </View>
-
-            <View className="flex flex-row items-center justify-between w-full py-3">
-              <Text className="text-lg font-JakartaRegular">Car Seats</Text>
-
-              <Text className="text-lg font-JakartaRegular">
-                {driverDetails?.car_seats}
-              </Text>
-            </View>
-          </View>
-
-          <View className="flex flex-col w-full items-start justify-center mt-5">
-            <View className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
-              <Image source={icons.to} alt="To" className="w-6 h-6" />
-
-              <Text className="text-lg font-JakartaRegular ml-2">
-                {userAddress}
-              </Text>
-            </View>
-
-            <View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
-              <Image source={icons.point} alt="Point" className="w-6 h-6" />
-
-              <Text className="text-lg font-JakartaRegular ml-2">
-                {destinationAddress}
-              </Text>
-            </View>
-          </View>
-
-          <Payment
-            fullName={user?.fullName ?? ""}
-            email={user?.emailAddresses[0].emailAddress ?? ""}
-            amount={driverDetails?.price ?? "0"}
-            driverId={driverDetails?.id}
-            rideTime={driverDetails?.time ?? 0}
+        <View className="flex flex-col w-full items-center justify-center mt-10">
+          <Image
+            source={{ uri: driverDetails?.profile_image_url }}
+            alt="Driver Avatar"
+            className="w-28 h-28 rounded-full"
           />
-        </>
-      </RideLayout>
-    </StripeProvider>
+
+          <View className="flex flex-row items-center justify-center mt-5 space-x-2">
+            <Text className="text-lg font-JakartaSemiBold">
+              {driverDetails?.title}
+            </Text>
+
+            <View className="flex flex-row items-center space-x-0.5">
+              <Image
+                source={icons.star}
+                alt="Star"
+                className="w-5 h-5"
+                resizeMode="contain"
+              />
+
+              <Text className="text-lg font-JakartaRegular">
+                {driverDetails?.rating}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
+          <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+            <Text className="text-lg font-JakartaRegular">Ride Price</Text>
+
+            <Text className="text-lg font-JakartaRegular text-[#0CC25F]">
+              ${driverDetails?.price}
+            </Text>
+          </View>
+
+          <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+            <Text className="text-lg font-JakartaRegular">Pickup Time</Text>
+
+            <Text className="text-lg font-JakartaRegular">
+              {formatTime(driverDetails?.time!)}
+            </Text>
+          </View>
+
+          <View className="flex flex-row items-center justify-between w-full py-3">
+            <Text className="text-lg font-JakartaRegular">Car Seats</Text>
+
+            <Text className="text-lg font-JakartaRegular">
+              {driverDetails?.car_seats}
+            </Text>
+          </View>
+        </View>
+
+        <View className="flex flex-col w-full items-start justify-center mt-5">
+          <View className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
+            <Image source={icons.to} alt="To" className="w-6 h-6" />
+
+            <Text className="text-lg font-JakartaRegular ml-2">
+              {userAddress}
+            </Text>
+          </View>
+
+          <View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
+            <Image source={icons.point} alt="Point" className="w-6 h-6" />
+
+            <Text className="text-lg font-JakartaRegular ml-2">
+              {destinationAddress}
+            </Text>
+          </View>
+        </View>
+
+        <Payment
+          fullName={user?.fullName ?? ""}
+          email={user?.emailAddresses[0].emailAddress ?? ""}
+          amount={driverDetails?.price ?? "0"}
+          driverId={driverDetails?.id}
+          rideTime={driverDetails?.time ?? 0}
+        />
+      </>
+    </RideLayout>
   );
 };