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
This commit is contained in:
Krikorios
@@ -1,9 +1,63 @@
|
||||
import { View, Image } from "react-native";
|
||||
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
FlatList,
|
||||
Image,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
import { icons } from "@/constants";
|
||||
import type { GoogleInputProps } from "@/types/type";
|
||||
|
||||
const googleApiKey = process.env.EXPO_PUBLIC_GOOGLE_API_KEY!;
|
||||
|
||||
interface Suggestion {
|
||||
placeId: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
// Places API (New) — the legacy Places web service is unavailable to
|
||||
// newer Google Cloud projects.
|
||||
const fetchSuggestions = async (input: string): Promise<Suggestion[]> => {
|
||||
const res = await fetch(
|
||||
"https://places.googleapis.com/v1/places:autocomplete",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Goog-Api-Key": googleApiKey,
|
||||
},
|
||||
body: JSON.stringify({ input, languageCode: "en" }),
|
||||
},
|
||||
);
|
||||
const data = await res.json();
|
||||
|
||||
return (data.suggestions ?? [])
|
||||
.map((s: any) => ({
|
||||
placeId: s.placePrediction?.placeId as string,
|
||||
text: s.placePrediction?.text?.text as string,
|
||||
}))
|
||||
.filter((s: Suggestion) => s.placeId && s.text);
|
||||
};
|
||||
|
||||
const fetchPlaceDetails = async (placeId: string) => {
|
||||
const res = await fetch(`https://places.googleapis.com/v1/places/${placeId}`, {
|
||||
headers: {
|
||||
"X-Goog-Api-Key": googleApiKey,
|
||||
"X-Goog-FieldMask": "location,formattedAddress",
|
||||
},
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
return {
|
||||
latitude: data.location?.latitude as number,
|
||||
longitude: data.location?.longitude as number,
|
||||
address: data.formattedAddress as string,
|
||||
};
|
||||
};
|
||||
|
||||
export const GoogleTextInput = ({
|
||||
icon,
|
||||
initialLocation,
|
||||
@@ -11,59 +65,59 @@ export const GoogleTextInput = ({
|
||||
textInputBackgroundColor,
|
||||
handlePress,
|
||||
}: GoogleInputProps) => {
|
||||
const googlePlacesApiKey = process.env.EXPO_PUBLIC_GOOGLE_API_KEY!;
|
||||
const [query, setQuery] = useState("");
|
||||
const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
|
||||
if (query.trim().length < 3) {
|
||||
setSuggestions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
debounceRef.current = setTimeout(async () => {
|
||||
try {
|
||||
setSuggestions(await fetchSuggestions(query));
|
||||
} catch (err) {
|
||||
console.log("[PLACES_AUTOCOMPLETE]: ", err);
|
||||
}
|
||||
}, 200);
|
||||
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
}, [query]);
|
||||
|
||||
const onSelect = async (suggestion: Suggestion) => {
|
||||
setQuery(suggestion.text);
|
||||
setSuggestions([]);
|
||||
|
||||
try {
|
||||
const details = await fetchPlaceDetails(suggestion.placeId);
|
||||
handlePress({
|
||||
latitude: details.latitude,
|
||||
longitude: details.longitude,
|
||||
address: suggestion.text,
|
||||
});
|
||||
} catch (err) {
|
||||
console.log("[PLACE_DETAILS]: ", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
className={`flex flex-row items-center justify-center relative z-50 rounded-xl ${containerStyles}`}
|
||||
>
|
||||
<GooglePlacesAutocomplete
|
||||
fetchDetails={true}
|
||||
placeholder="Search"
|
||||
debounce={200}
|
||||
styles={{
|
||||
textInputContainer: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 20,
|
||||
marginHorizontal: 20,
|
||||
position: "relative",
|
||||
<View className="flex-1 mx-5">
|
||||
<View
|
||||
className="flex flex-row items-center rounded-full px-4 mt-1"
|
||||
style={{
|
||||
backgroundColor: textInputBackgroundColor || "white",
|
||||
shadowColor: "#d4d4d4",
|
||||
},
|
||||
textInput: {
|
||||
backgroundColor: textInputBackgroundColor
|
||||
? textInputBackgroundColor
|
||||
: "white",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
marginTop: 5,
|
||||
width: "100%",
|
||||
borderRadius: 200,
|
||||
},
|
||||
listView: {
|
||||
backgroundColor: textInputBackgroundColor
|
||||
? textInputBackgroundColor
|
||||
: "white",
|
||||
position: "relative",
|
||||
top: 0,
|
||||
width: "100%",
|
||||
borderRadius: 10,
|
||||
shadowColor: "#d4d4d4",
|
||||
zIndex: 99,
|
||||
},
|
||||
}}
|
||||
onPress={(data, details = null) => {
|
||||
handlePress({
|
||||
latitude: details?.geometry.location.lat!,
|
||||
longitude: details?.geometry.location.lng!,
|
||||
address: data.description,
|
||||
});
|
||||
}}
|
||||
query={{
|
||||
key: googlePlacesApiKey,
|
||||
language: "en",
|
||||
}}
|
||||
renderLeftButton={() => (
|
||||
}}
|
||||
>
|
||||
<View className="justify-center items-center w-6 h-6">
|
||||
<Image
|
||||
source={icon ? icon : icons.search}
|
||||
@@ -72,12 +126,42 @@ export const GoogleTextInput = ({
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TextInput
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
placeholder={initialLocation ?? "Where do you want to go?"}
|
||||
placeholderTextColor="gray"
|
||||
className="flex-1 p-3 text-base font-JakartaSemiBold"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{suggestions.length > 0 && (
|
||||
<View
|
||||
className="rounded-xl mt-1"
|
||||
style={{
|
||||
backgroundColor: textInputBackgroundColor || "white",
|
||||
shadowColor: "#d4d4d4",
|
||||
}}
|
||||
>
|
||||
<FlatList
|
||||
data={suggestions}
|
||||
keyExtractor={(item) => item.placeId}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
onPress={() => onSelect(item)}
|
||||
className="p-3 border-b border-general-700"
|
||||
>
|
||||
<Text className="text-base font-JakartaRegular">
|
||||
{item.text}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
textInputProps={{
|
||||
placeholderTextColor: "gray",
|
||||
placeholder: initialLocation ?? "Where do you want to go?",
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Text, View } from "react-native";
|
||||
|
||||
// react-native-maps does not support web. This stub keeps the web bundle
|
||||
// working for local testing; use a native build for real map functionality.
|
||||
export const Map = () => {
|
||||
return (
|
||||
<View className="w-full h-full rounded-2xl bg-general-100 flex items-center justify-center">
|
||||
<Text className="text-general-200 text-center font-JakartaMedium">
|
||||
Map is not available on web.{"\n"}Run on Android/iOS for the full
|
||||
experience.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useOAuth } from "@clerk/clerk-expo";
|
||||
import { router } from "expo-router";
|
||||
import { useCallback } from "react";
|
||||
import { Image, Text, View } from "react-native";
|
||||
import { Image, Text, View, Alert } from "react-native";
|
||||
|
||||
import { icons } from "@/constants";
|
||||
import { googleOAuth } from "@/lib/auth";
|
||||
@@ -22,8 +22,12 @@ export const OAuth = ({ title }: OAuthProps) => {
|
||||
if (result?.code === "session_exists" || result?.code === "success") {
|
||||
router.replace("/(root)/(tabs)/home");
|
||||
}
|
||||
} catch (err) {
|
||||
} catch (err: any) {
|
||||
console.error("OAuth error", err);
|
||||
Alert.alert(
|
||||
"Google sign-in failed",
|
||||
err?.errors?.[0]?.longMessage || err?.message || "Please try again.",
|
||||
);
|
||||
}
|
||||
}, [startOAuthFlow]);
|
||||
|
||||
|
||||
+75
-86
@@ -1,8 +1,6 @@
|
||||
import { useAuth } from "@clerk/clerk-expo";
|
||||
import { PaymentSheetError, useStripe } from "@stripe/stripe-react-native";
|
||||
import type { Result } from "@stripe/stripe-react-native/lib/typescript/src/types/PaymentMethod";
|
||||
import type { IntentCreationCallbackParams } from "@stripe/stripe-react-native/lib/typescript/src/types/PaymentSheet";
|
||||
import { router } from "expo-router";
|
||||
import * as WebBrowser from "expo-web-browser";
|
||||
import { useState } from "react";
|
||||
import { Alert, Image, Text, View } from "react-native";
|
||||
import ReactNativeModal from "react-native-modal";
|
||||
@@ -30,112 +28,103 @@ export const Payment = ({
|
||||
destinationLongitude,
|
||||
} = useLocationStore();
|
||||
const { userId } = useAuth();
|
||||
const { initPaymentSheet, presentPaymentSheet } = useStripe();
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [processing, setProcessing] = useState(false);
|
||||
|
||||
const confirmHandler = async (
|
||||
paymentMethod: Result,
|
||||
_shouldSavePaymentMethod: boolean,
|
||||
intentCreationCallback: (result: IntentCreationCallbackParams) => void,
|
||||
) => {
|
||||
const { paymentIntent, customer } = await fetchAPI(
|
||||
"/(api)/(stripe)/create",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: fullName || email,
|
||||
email,
|
||||
amount,
|
||||
paymentMethodId: paymentMethod.id,
|
||||
}),
|
||||
const recordRide = async () => {
|
||||
await fetchAPI("/(api)/ride/create", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
},
|
||||
);
|
||||
body: JSON.stringify({
|
||||
origin_address: userAddress,
|
||||
destination_address: destinationAddress,
|
||||
origin_latitude: userLatitude,
|
||||
origin_longitude: userLongitude,
|
||||
destination_latitude: destinationLatitude,
|
||||
destination_longitude: destinationLongitude,
|
||||
ride_time: rideTime.toFixed(0),
|
||||
fare_price: parseInt(amount) * 100, // in cents
|
||||
payment_status: "paid",
|
||||
driver_id: driverId,
|
||||
user_id: userId,
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
if (paymentIntent.client_secret) {
|
||||
const { result } = await fetchAPI("/(api)/(stripe)/pay", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
payment_method_id: paymentMethod.id,
|
||||
payment_intent_id: paymentIntent.id,
|
||||
customer_id: customer,
|
||||
}),
|
||||
});
|
||||
const payWithAreeba = async () => {
|
||||
setProcessing(true);
|
||||
|
||||
if (result.client_secret) {
|
||||
await fetchAPI("/(api)/ride/create", {
|
||||
try {
|
||||
// 1. Create an Areeba checkout session on our server.
|
||||
const { orderId, checkoutUrl, successIndicator, error } = await fetchAPI(
|
||||
"/(api)/(areeba)/create",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
origin_address: userAddress,
|
||||
destination_address: destinationAddress,
|
||||
origin_latitude: userLatitude,
|
||||
origin_longitude: userLongitude,
|
||||
destination_latitude: destinationLatitude,
|
||||
destination_longitude: destinationLongitude,
|
||||
ride_time: rideTime.toFixed(0),
|
||||
fare_price: parseInt(amount) * 100, // in cents
|
||||
payment_status: "paid",
|
||||
driver_id: driverId,
|
||||
user_id: userId,
|
||||
name: fullName || email,
|
||||
email,
|
||||
amount,
|
||||
}),
|
||||
});
|
||||
|
||||
intentCreationCallback({
|
||||
clientSecret: result.client_secret,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initializePaymentSheet = async () => {
|
||||
const { error } = await initPaymentSheet({
|
||||
merchantDisplayName: "Ryde, Inc.",
|
||||
intentConfiguration: {
|
||||
mode: {
|
||||
amount: parseInt(amount) * 100,
|
||||
currencyCode: "USD",
|
||||
},
|
||||
confirmHandler,
|
||||
},
|
||||
style: "alwaysLight",
|
||||
returnURL: "ryde://book-ride", // make sure protocol matches scheme in app.json
|
||||
});
|
||||
);
|
||||
|
||||
if (error) {
|
||||
if (error || !checkoutUrl) throw new Error(error || "No checkout URL");
|
||||
|
||||
// 2. Open Areeba's hosted payment page. After payment the gateway
|
||||
// redirects back to the app (waseel://book-ride).
|
||||
const browserResult = await WebBrowser.openAuthSessionAsync(
|
||||
checkoutUrl,
|
||||
"waseel://book-ride",
|
||||
);
|
||||
|
||||
let resultIndicator: string | undefined;
|
||||
if (browserResult.type === "success" && browserResult.url) {
|
||||
resultIndicator = new URL(browserResult.url).searchParams.get(
|
||||
"resultIndicator",
|
||||
) as string;
|
||||
}
|
||||
|
||||
// 3. Verify the payment server-side before recording the ride.
|
||||
const verification = await fetchAPI("/(api)/(areeba)/verify", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ orderId, resultIndicator, successIndicator }),
|
||||
});
|
||||
|
||||
if (verification.success) {
|
||||
await recordRide();
|
||||
setSuccess(true);
|
||||
} else {
|
||||
Alert.alert(
|
||||
"Payment not completed",
|
||||
"Your payment was cancelled or could not be verified. Please try again.",
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("[PAYMENT]: ", err);
|
||||
Alert.alert(
|
||||
"Error",
|
||||
"Something went wrong while initializing your payment. Please try again.",
|
||||
"Something went wrong while processing your payment. Please try again.",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const openPaymentSheet = async () => {
|
||||
await initializePaymentSheet();
|
||||
|
||||
const { error } = await presentPaymentSheet();
|
||||
|
||||
if (error) {
|
||||
if (error.code !== PaymentSheetError.Canceled)
|
||||
Alert.alert(`Error code: ${error.code}`, error.message);
|
||||
} else {
|
||||
setSuccess(true);
|
||||
} finally {
|
||||
setProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<CustomButton
|
||||
title="Confirm ride"
|
||||
title={processing ? "Processing..." : "Confirm ride"}
|
||||
className="my-2"
|
||||
onPress={openPaymentSheet}
|
||||
onPress={payWithAreeba}
|
||||
disabled={processing}
|
||||
/>
|
||||
|
||||
<ReactNativeModal
|
||||
|
||||
Reference in New Issue
Block a user