From 23fe9c97b0547c9ef20836cacfabe2cc9b446a95 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Tue, 28 May 2024 17:03:47 +0000
Subject: [PATCH] take props now to render the provided data

---
 src/components/TransactionInformationsItem.tsx | 45 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/TransactionInformationsItem.tsx b/src/components/TransactionInformationsItem.tsx
index 8657439..4263605 100644
--- a/src/components/TransactionInformationsItem.tsx
+++ b/src/components/TransactionInformationsItem.tsx
@@ -1,6 +1,5 @@
 import type { PaymentCode } from "@/utils/requests/Types";
-import { images } from "@styles/Commons";
-import { Image } from "react-native";
+import PaymentOption from "./PaymentOption";
 import Box from "./bases/Box";
 import Text from "./bases/Text";
 
@@ -9,10 +8,10 @@ interface Props {
 	reference: string;
 	date: string;
 	amount: number;
-	status: "success" | "pending" | "failed" | "canceled";
+	status: "SUCCESS" | "INITIATED" | "FAILED";
 }
 
-const TransactionInformationsItem = () => {
+const TransactionInformationsItem = ({ paymentType, reference, date, amount, status }: Props) => {
 	return (
 		<Box
 			// height={60}
@@ -28,22 +27,46 @@ const TransactionInformationsItem = () => {
 			borderColor={"lightGray"}
 		>
 			<Box width={50} height={50} borderRadius={10} overflow={"hidden"}>
-				<Image
+				{/* <Image
 					source={require("../../assets/operators/orange_money.png")}
 					style={images.cover}
-				/>
+				/> */}
+				<PaymentOption paymentMethod={paymentType} onPress={() => {}} />
 			</Box>
 			<Box height={50} flex={1}>
-				<Text variant={"black"}>Reference</Text>
-				<Text>12 Janvier 2099</Text>
+				<Text variant={"black"}>{reference}</Text>
+				<Text>{date}</Text>
 			</Box>
 			<Box style={{ marginLeft: "auto" }} height={50}>
-				<Text variant={"black"} fontWeight={"bold"}>
-					7,000,000
-				</Text>
+				{/* <Text variant={"softYellow"} fontWeight={"bold"}>
+					{amount}
+				</Text> */}
+				<AmountColorRenderer status={status} amount={amount} />
 			</Box>
 		</Box>
 	);
 };
 
+const AmountColorRenderer = ({ status, amount }: { status: string; amount: number }) => {
+	if (status === "SUCCESS") {
+		return (
+			<Text variant={"secondary"} fontWeight={"bold"}>
+				{amount}
+			</Text>
+		);
+	}
+	if (status === "INITIATED") {
+		return (
+			<Text variant={"softYellow"} fontWeight={"bold"}>
+				{amount}
+			</Text>
+		);
+	}
+	return (
+		<Text variant={"softRed"} fontWeight={"bold"}>
+			{amount}
+		</Text>
+	);
+};
+
 export default TransactionInformationsItem;
--
libgit2 0.27.1