124 lines
4.2 KiB
TypeScript
124 lines
4.2 KiB
TypeScript
import React from "react";
|
|
import { View, ScrollView } from "react-native";
|
|
import { useSirouRouter } from "@sirou/react-native";
|
|
import { useLocalSearchParams, Stack } from "expo-router";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { CheckCircle2, AlertCircle } from "@/lib/icons";
|
|
interface VerificationData {
|
|
payerName: string;
|
|
payerTelebirrNo: string;
|
|
creditedPartyName: string;
|
|
creditedPartyAccountNo: string;
|
|
receiptNo: string;
|
|
paymentDate: string;
|
|
transactionStatus: string;
|
|
totalPaidAmount: string;
|
|
settledAmount: string;
|
|
serviceFee: string;
|
|
serviceFeeVAT: string;
|
|
bankName: string;
|
|
customerNote: string;
|
|
}
|
|
|
|
export default function VerifyPaymentResultScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
const { data } = useLocalSearchParams<{ data: string }>();
|
|
|
|
let parsed: VerificationData | null = null;
|
|
try {
|
|
parsed = data ? JSON.parse(data) : null;
|
|
} catch {}
|
|
|
|
const d = parsed;
|
|
|
|
const isCompleted = d?.transactionStatus === "Completed";
|
|
|
|
const rows: { label: string; value: string }[] = [
|
|
{ label: "Payer", value: d?.payerName ?? "" },
|
|
{ label: "Payer Number", value: d?.payerTelebirrNo ?? "" },
|
|
{ label: "Credited Party", value: d?.creditedPartyName ?? "" },
|
|
{ label: "Credited Account", value: d?.creditedPartyAccountNo ?? "" },
|
|
{ label: "Receipt No", value: d?.receiptNo ?? "" },
|
|
{ label: "Payment Date", value: d?.paymentDate ?? "" },
|
|
{ label: "Status", value: d?.transactionStatus ?? "" },
|
|
{ label: "Total Paid", value: d?.totalPaidAmount ?? "" },
|
|
{ label: "Settled Amount", value: d?.settledAmount ?? "" },
|
|
{ label: "Service Fee", value: d?.serviceFee ?? "" },
|
|
{ label: "Service Fee VAT", value: d?.serviceFeeVAT ?? "" },
|
|
{ label: "Bank", value: d?.bankName ?? "" },
|
|
{ label: "Note", value: d?.customerNote ?? "" },
|
|
].filter((r) => r.value);
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background">
|
|
<Stack.Screen options={{ headerShown: false }} />
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={{ padding: 16, paddingBottom: 40 }}
|
|
>
|
|
<View className="items-center mb-8">
|
|
<View className="h-14 w-14 rounded-full bg-card items-center justify-center mb-4">
|
|
{isCompleted ? (
|
|
<CheckCircle2 size={50} color="#22c55e" />
|
|
) : (
|
|
<AlertCircle size={28} color="#ef4444" />
|
|
)}
|
|
</View>
|
|
<Text
|
|
variant="h3"
|
|
className="text-foreground font-sans-bold text-center"
|
|
>
|
|
Payment Verification
|
|
</Text>
|
|
<Text variant="muted" className="text-sm text-center">
|
|
{isCompleted
|
|
? "Transaction completed"
|
|
: (d?.transactionStatus ?? "Unknown status")}
|
|
</Text>
|
|
</View>
|
|
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
{rows.map((row, i) => (
|
|
<View
|
|
key={row.label}
|
|
className={`flex-row items-center px-4 py-3 ${
|
|
i < rows.length - 1 ? "border-b border-border/40" : ""
|
|
}`}
|
|
>
|
|
<Text className="text-sm text-muted-foreground flex-1 font-sans-medium">
|
|
{row.label}
|
|
</Text>
|
|
<Text
|
|
className={`text-sm font-sans-bold text-right max-w-[55%] ${
|
|
row.label === "Status"
|
|
? isCompleted
|
|
? "text-green-600"
|
|
: "text-red-500"
|
|
: "text-foreground"
|
|
}`}
|
|
>
|
|
{row.value}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Button
|
|
className="h-12 bg-primary rounded-[10px] mt-8"
|
|
onPress={() => nav.back()}
|
|
>
|
|
<Text className="text-white font-sans-bold text-base">
|
|
Verify Another
|
|
</Text>
|
|
</Button>
|
|
</ScrollView>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|