95 lines
4.1 KiB
TypeScript
95 lines
4.1 KiB
TypeScript
import {useUser} from "@clerk/clerk-expo";
|
|
import {Image, Text, View} from "react-native";
|
|
import tw from "twrnc";
|
|
import RideLayout from "@/components/RideLayout";
|
|
import {icons} from "@/constants";
|
|
import {formatTime} from "@/lib/utils";
|
|
import {useDriverStore, useLocationStore} from "@/store";
|
|
|
|
const BookRide = () => {
|
|
const {user} = useUser();
|
|
const {userAddress, destinationAddress} = useLocationStore();
|
|
const {drivers, selectedDriver} = useDriverStore();
|
|
console.log(drivers);
|
|
console.log(selectedDriver);
|
|
const driverDetails = drivers?.filter(
|
|
(driver) => +driver.id === selectedDriver,
|
|
)[0];
|
|
|
|
return (
|
|
<RideLayout title="Book Ride">
|
|
<>
|
|
<Text style={tw`text-xl font-JakartaSemiBold mb-3`}>
|
|
Ride Information
|
|
</Text>
|
|
|
|
<View style={tw`flex flex-col w-full items-center justify-center mt-10`}>
|
|
<Image
|
|
source={{uri: driverDetails?.profile_image_url}}
|
|
style={tw`w-28 h-28 rounded-full`}
|
|
/>
|
|
|
|
<View style={tw`flex flex-row items-center justify-center mt-5 space-x-2`}>
|
|
<Text style={tw`text-lg font-JakartaSemiBold`}>
|
|
{driverDetails?.title}
|
|
</Text>
|
|
|
|
<View style={tw`flex flex-row items-center space-x-0.5`}>
|
|
<Image
|
|
source={icons.star}
|
|
style={tw`w-5 h-5`}
|
|
resizeMode="contain"
|
|
/>
|
|
<Text style={tw`text-lg font-JakartaRegular`}>
|
|
{driverDetails?.rating}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View
|
|
style={tw`flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5`}>
|
|
<View style={tw`flex flex-row items-center justify-between w-full border-b border-white py-3`}>
|
|
<Text style={tw`text-lg font-JakartaRegular`}>Ride Price</Text>
|
|
<Text style={tw`text-lg font-JakartaRegular text-[#0CC25F]`}>
|
|
${driverDetails?.price}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={tw`flex flex-row items-center justify-between w-full border-b border-white py-3`}>
|
|
<Text style={tw`text-lg font-JakartaRegular`}>Pickup Time</Text>
|
|
<Text style={tw`text-lg font-JakartaRegular`}>
|
|
{formatTime(driverDetails?.time || 5 ! )}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={tw`flex flex-row items-center justify-between w-full py-3`}>
|
|
<Text style={tw`text-lg font-JakartaRegular`}>Car Seats</Text>
|
|
<Text style={tw`text-lg font-JakartaRegular`}>
|
|
{driverDetails?.car_seats}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={tw`flex flex-col w-full items-start justify-center mt-5`}>
|
|
<View
|
|
style={tw`flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3`}>
|
|
<Image source={icons.to} style={tw`w-6 h-6`}/>
|
|
<Text style={tw`text-lg font-JakartaRegular ml-2`}>
|
|
{userAddress}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={tw`flex flex-row items-center justify-start border-b border-general-700 w-full py-3`}>
|
|
<Image source={icons.point} style={tw`w-6 h-6`}/>
|
|
<Text style={tw`text-lg font-JakartaRegular ml-2`}>
|
|
{destinationAddress}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</>
|
|
</RideLayout>
|
|
);
|
|
};
|
|
|
|
export default BookRide; |