153 lines
3.5 KiB
TypeScript
153 lines
3.5 KiB
TypeScript
import { Text, View } from "react-native";
|
|
|
|
interface PaymentHistoryCardProps {
|
|
date: string;
|
|
amount: string;
|
|
time: string;
|
|
method: string;
|
|
status: string;
|
|
}
|
|
|
|
export default ({
|
|
date,
|
|
amount,
|
|
time,
|
|
method,
|
|
status,
|
|
}: PaymentHistoryCardProps) => {
|
|
const getStatusStyle = (status: string) => {
|
|
switch (status.toLowerCase()) {
|
|
case "failure":
|
|
case "failed":
|
|
return {
|
|
backgroundColor: "#FDE8E7",
|
|
color: "#D51C10",
|
|
};
|
|
case "pending":
|
|
return {
|
|
backgroundColor: "#FFF0E3",
|
|
color: "#8E4400",
|
|
};
|
|
case "confirmed":
|
|
case "completed":
|
|
case "success":
|
|
return {
|
|
backgroundColor: "#E8F5E8",
|
|
color: "#2D7D32",
|
|
};
|
|
default:
|
|
return {
|
|
backgroundColor: "#E8F5E8",
|
|
color: "#2D7D32",
|
|
};
|
|
}
|
|
};
|
|
|
|
const statusStyle = getStatusStyle(status);
|
|
|
|
return (
|
|
<View style={styles.paymentCard}>
|
|
<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 && (
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
{ backgroundColor: statusStyle.backgroundColor },
|
|
]}
|
|
>
|
|
<Text style={[styles.statusText, { color: statusStyle.color }]}>
|
|
{status.charAt(0).toUpperCase() + status.slice(1)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
import { StyleSheet } from "react-native";
|
|
|
|
const styles = StyleSheet.create({
|
|
paymentCard: {
|
|
width: 328,
|
|
height: 76,
|
|
backgroundColor: "rgba(252,252,252,1)", // #FCFCFC
|
|
borderRadius: 8,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 12,
|
|
justifyContent: "flex-start",
|
|
alignItems: "flex-start",
|
|
},
|
|
paymentCardTop: {
|
|
width: 304,
|
|
height: 20,
|
|
marginLeft: 12,
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 4, // gap isn't officially supported in RN, so use marginRight on children instead
|
|
},
|
|
paymentDate: {
|
|
width: 231,
|
|
height: 20,
|
|
fontFamily: "Inter-Regular",
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: "rgba(37,42,52,1)", // #252A34
|
|
textAlign: "left",
|
|
},
|
|
paymentAmount: {
|
|
width: 69,
|
|
height: 20,
|
|
fontFamily: "Inter-SemiBold",
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: "rgba(37,42,52,1)", // #252A34
|
|
textAlign: "left",
|
|
marginLeft: 4, // simulate gap
|
|
},
|
|
paymentCardBottom: {
|
|
width: 304,
|
|
height: 20,
|
|
marginLeft: 12,
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
gap: 4, // simulate gap with margin
|
|
},
|
|
paymentDetails: {
|
|
width: 237,
|
|
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: {
|
|
width: 63,
|
|
height: 20,
|
|
borderRadius: 4,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
marginLeft: 4, // simulate gap
|
|
},
|
|
statusText: {
|
|
fontFamily: "Inter-Medium",
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
color: "#8E4400", // default, overridden by inline style from getStatusStyle
|
|
textAlign: "center",
|
|
},
|
|
});
|