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
+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