166 lines
3.7 KiB
TypeScript
166 lines
3.7 KiB
TypeScript
import { useRouter } from "expo-router";
|
|
import { Text, TouchableOpacity, View } from "react-native";
|
|
|
|
interface PaymentHistoryCardProps {
|
|
date: string;
|
|
amount: string;
|
|
time: string;
|
|
method: string;
|
|
status: string;
|
|
id: number;
|
|
}
|
|
|
|
export default ({
|
|
id,
|
|
date,
|
|
amount,
|
|
time,
|
|
method,
|
|
status,
|
|
}: PaymentHistoryCardProps) => {
|
|
//failure, confirmed, pending
|
|
|
|
const router = useRouter();
|
|
|
|
const handlePress = () => {
|
|
router.push({
|
|
pathname: "/payments/TransactionDetails",
|
|
params: { paymentId: id },
|
|
});
|
|
};
|
|
|
|
console.log(status, "payment Status");
|
|
const getStatusStyle = (status: string) => {
|
|
switch (status.toLowerCase()) {
|
|
case "failure":
|
|
return {
|
|
backgroundColor: "#FDE8E7",
|
|
color: "#D51C10",
|
|
};
|
|
case "pending":
|
|
return {
|
|
backgroundColor: "#FFF0E3",
|
|
color: "#8E4400",
|
|
};
|
|
case "confirmed":
|
|
return {
|
|
backgroundColor: "#E8F5E8",
|
|
color: "#2D7D32",
|
|
};
|
|
default:
|
|
return {
|
|
backgroundColor: "#E8F5E8",
|
|
color: "#2D7D32",
|
|
};
|
|
}
|
|
};
|
|
|
|
const statusStyle = getStatusStyle(status);
|
|
|
|
return (
|
|
// <TouchableOpacity style={styles.paymentCard} onPress={handlePress}>
|
|
<TouchableOpacity style={styles.paymentCard} onPress={handlePress}>
|
|
<View style={styles.paymentCardTop}>
|
|
<Text style={styles.paymentDate}>{date}</Text>
|
|
<Text style={styles.paymentAmount}>{amount}</Text>
|
|
</View>
|
|
<View style={styles.paymentCardBottom}>
|
|
<Text style={styles.paymentDetails}>
|
|
{time} • {method}
|
|
</Text>
|
|
{status && status !== "confirmed" && (
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
{ backgroundColor: statusStyle.backgroundColor },
|
|
]}
|
|
>
|
|
<Text style={[styles.statusText, { color: statusStyle.color }]}>
|
|
{status.charAt(0).toUpperCase() + status.slice(1)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
// </TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
import { StyleSheet } from "react-native";
|
|
|
|
const styles = StyleSheet.create({
|
|
paymentCard: {
|
|
height: 76,
|
|
width: "100%",
|
|
backgroundColor: "rgba(252,252,252,1)",
|
|
borderRadius: 8,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 12,
|
|
flexDirection: "column",
|
|
gap: "12",
|
|
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 1,
|
|
},
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 2,
|
|
elevation: 1,
|
|
},
|
|
paymentCardTop: {
|
|
height: 20,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
},
|
|
paymentDate: {
|
|
width: 231,
|
|
height: 20,
|
|
fontFamily: "Inter-Regular",
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: "rgba(37,42,52,1)", // #252A34
|
|
textAlign: "left",
|
|
},
|
|
paymentAmount: {
|
|
height: 20,
|
|
fontFamily: "Inter-SemiBold",
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: "rgba(37,42,52,1)", // #252A34
|
|
textAlign: "right",
|
|
marginLeft: 4, // simulate gap
|
|
},
|
|
paymentCardBottom: {
|
|
height: 20,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
paymentDetails: {
|
|
height: 16,
|
|
fontFamily: "Inter-Regular",
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
color: "rgba(86,95,112,1)", // #565F70
|
|
textAlign: "left",
|
|
marginTop: 2, // slight vertical offset from Figma y=2
|
|
},
|
|
statusBadge: {
|
|
height: 20,
|
|
borderRadius: 4,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
},
|
|
statusText: {
|
|
fontFamily: "Inter-Medium",
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
color: "#8E4400",
|
|
textAlign: "center",
|
|
},
|
|
});
|