132 lines
4.9 KiB
TypeScript
132 lines
4.9 KiB
TypeScript
import { View, ScrollView, Pressable } from "react-native";
|
|
import { useSirouRouter, useSirouParams } from "@sirou/react-native";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
import { Stack } from "expo-router";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { ArrowLeft, Wallet, Link2, Clock } from "@/lib/icons";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
|
|
export default function PaymentDetailScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
const { id } = useSirouParams<AppRoutes, "payments/[id]">();
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background">
|
|
<Stack.Screen options={{ headerShown: false }} />
|
|
|
|
<View className="px-6 pt-4 flex-row justify-between items-center">
|
|
<Pressable
|
|
onPress={() => nav.back()}
|
|
className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
|
|
>
|
|
<ArrowLeft color="#0f172a" size={20} />
|
|
</Pressable>
|
|
<Text variant="h4" className="text-foreground font-semibold">
|
|
Payment Match
|
|
</Text>
|
|
<View className="w-9" />
|
|
</View>
|
|
|
|
<ScrollView
|
|
className="flex-1"
|
|
contentContainerStyle={{ padding: 16, paddingBottom: 120 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Card className=" overflow-hidden rounded-[6px] border-0 bg-primary">
|
|
<View className="p-5">
|
|
<View className="flex-row items-center justify-between mb-3">
|
|
<View className="bg-white/20 p-1.5 rounded-[6px]">
|
|
<Wallet color="white" size={18} strokeWidth={2.5} />
|
|
</View>
|
|
<View className="bg-amber-500/20 px-3 py-1 rounded-[6px] border border-white/10">
|
|
<Text className={`text-[10px] font-bold text-white`}>
|
|
Pending Match
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text variant="small" className="text-white/70 mb-0.5">
|
|
Received Amount
|
|
</Text>
|
|
<Text variant="h3" className="text-white font-bold mb-3">
|
|
$2,000.00
|
|
</Text>
|
|
|
|
<View className="flex-row items-center gap-3 border-t border-white/40 pt-3">
|
|
<View className="flex-row items-center gap-1.5">
|
|
<Text className="text-white/90 text-xs font-semibold">
|
|
TXN-9982734
|
|
</Text>
|
|
</View>
|
|
<View className="h-3 w-[1px] bg-white/60" />
|
|
<Text className="text-white/90 text-xs font-semibold">
|
|
Telebirr SMS
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
|
|
{/* Transaction Details */}
|
|
|
|
<Text variant="h4" className="text-foreground mt-4 mb-2">
|
|
Transaction Details
|
|
</Text>
|
|
|
|
<Card className="bg-card rounded-[6px] mb-3">
|
|
<View className="p-4">
|
|
<View className="flex-row items-center justify-between">
|
|
<View className="flex-row items-center gap-2">
|
|
<Clock color="#000" size={13} />
|
|
<Text variant="muted" className="text-sm">
|
|
Received On
|
|
</Text>
|
|
</View>
|
|
<Text variant="p" className="text-foreground text-sm">
|
|
Sep 11, 2022 · 14:30
|
|
</Text>
|
|
</View>
|
|
<View className="h-[1px] bg-border/70 my-3" />
|
|
<View className="flex-row items-center justify-between py-1">
|
|
<View className="flex-row items-center gap-2">
|
|
<Link2 color="#000" size={13} />
|
|
<Text variant="muted" className="text-sm">
|
|
Status
|
|
</Text>
|
|
</View>
|
|
<View className="bg-amber-500/10 px-2.5 py-1 rounded-[4px]">
|
|
<Text className="text-amber-600 text-xs font-semibold">
|
|
Awaiting Link
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
|
|
{/* SMS Message */}
|
|
<Card className="bg-card rounded-[6px] mb-6">
|
|
<View className="p-4">
|
|
<Text variant="muted" className="mb-3 font-semibold">
|
|
Original SMS
|
|
</Text>
|
|
<Text className="text-foreground/70 font-medium leading-6 text-sm">
|
|
"Payment received from Elnatan Jansen for order #2322 via
|
|
Telebirr. Amount: $2,000. Ref: B88-22X7."
|
|
</Text>
|
|
</View>
|
|
</Card>
|
|
|
|
{/* Action */}
|
|
|
|
<Button className="mb-4 h-10 rounded-[10px] bg-primary shadow-lg shadow-primary/30">
|
|
<Link2 color="white" size={18} strokeWidth={2.5} />
|
|
<Text className=" text-white text-xs font-semibold uppercase tracking-widest">
|
|
Associate to Invoice
|
|
</Text>
|
|
</Button>
|
|
</ScrollView>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|