render only payment mode returned from the query which have an active state after filtering.

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>
+								{paymentTypesWithActiveStatus.map((paymentType) => (
+									<PaymentOptionContainer key={paymentType.id}>
 										<PaymentOption
 											onPress={() =>
 												navigation.navigate("paymentAmountInputScreen")
 											}
-										paymentMethod={"CB"}
+											paymentMethod={paymentType.code}
 										/>
 									</PaymentOptionContainer>
+								))}
 							</Box>
 						</Box>
 					</Box>