From 1378854e83d9e9ffdc21a0c1c4d319d35d5cf816 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Wed, 8 May 2024 12:19:21 +0000
Subject: [PATCH] render only payment mode returned from the query which have an active state after filtering.

---
 src/screens/HomePageWithPaymentOptions.tsx | 60 +++++++++++++-----------------------------------------------
 1 file changed, 13 insertions(+), 47 deletions(-)

diff --git a/src/screens/HomePageWithPaymentOptions.tsx b/src/screens/HomePageWithPaymentOptions.tsx
index 92c9f27..6236b07 100644
--- a/src/screens/HomePageWithPaymentOptions.tsx
+++ b/src/screens/HomePageWithPaymentOptions.tsx
@@ -12,8 +12,6 @@ import { useMemo } from "react";
 import { Dimensions } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
-const PAYMENT_TYPES = new Set(["ORANGE", "FLOOZ", "MTN", "WAVE", "CB"]);
-
 const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
 	({ navigation }) => {
 		const { data, isLoading, error } = useQuery({
@@ -23,13 +21,13 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 		});
 
 		// getting valid payments supported
-		const paymentTypesToRender = useMemo(() => {
+		const paymentTypesWithActiveStatus = useMemo(() => {
 			console.log("Filtering payment types");
 			const paymentTypes = data?.results || [];
-			return paymentTypes.filter((paymentType) => PAYMENT_TYPES.has(paymentType.code));
+			return paymentTypes.filter((paymentType) => paymentType.etat === true);
 		}, [data]);
 
-		console.log("paymentTypesToRender", paymentTypesToRender);
+		console.log("paymentTypesToRender", paymentTypesWithActiveStatus);
 
 		return (
 			<BackgroundGreenWhiteContentArea>
@@ -61,48 +59,16 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 								flexWrap={"wrap"}
 								rowGap={"m"}
 							>
-								<PaymentOptionContainer>
-									<PaymentOption
-										onPress={() =>
-											navigation.navigate("paymentAmountInputScreen")
-										}
-										paymentMethod={"ORANGE"}
-									/>
-								</PaymentOptionContainer>
-								<PaymentOptionContainer>
-									<PaymentOption
-										onPress={() =>
-											navigation.navigate("paymentAmountInputScreen")
-										}
-										paymentMethod={"MTN"}
-									/>
-								</PaymentOptionContainer>
-								<PaymentOptionContainer>
-									<PaymentOption
-										onPress={() =>
-											navigation.navigate("paymentAmountInputScreen")
-										}
-										paymentMethod={"FLOOZ"}
-									/>
-								</PaymentOptionContainer>
-
-								<PaymentOptionContainer>
-									<PaymentOption
-										onPress={() =>
-											navigation.navigate("paymentAmountInputScreen")
-										}
-										paymentMethod={"WAVE"}
-									/>
-								</PaymentOptionContainer>
-
-								<PaymentOptionContainer>
-									<PaymentOption
-										onPress={() =>
-											navigation.navigate("paymentAmountInputScreen")
-										}
-										paymentMethod={"CB"}
-									/>
-								</PaymentOptionContainer>
+								{paymentTypesWithActiveStatus.map((paymentType) => (
+									<PaymentOptionContainer key={paymentType.id}>
+										<PaymentOption
+											onPress={() =>
+												navigation.navigate("paymentAmountInputScreen")
+											}
+											paymentMethod={paymentType.code}
+										/>
+									</PaymentOptionContainer>
+								))}
 							</Box>
 						</Box>
 					</Box>
--
libgit2 0.27.1