rendering all payment options inside a single container

src/screens/HomePageWithPaymentOptions.tsx

@@ -8,9 +8,12 @@ import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundG
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { useQuery } from "@tanstack/react-query";
+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({
@@ -19,9 +22,15 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 			enabled: true,
 		});
 
-		console.log("data", data);
-		console.log("isLoading", isLoading);
-		console.log("error", error);
+		// getting valid payments supported
+		const paymentTypesToRender = useMemo(() => {
+			console.log("Filtering payment types");
+			const paymentTypes = data?.results || [];
+			return paymentTypes.filter((paymentType) => PAYMENT_TYPES.has(paymentType.code));
+		}, [data]);
+
+		console.log("paymentTypesToRender", paymentTypesToRender);
+
 		return (
 			<BackgroundGreenWhiteContentArea>
 				<SafeAreaView>
@@ -44,7 +53,14 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 									Méthode de paiement
 								</Text>
 							</Box>
-							<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
+							{/* <Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}> */}
+							<Box
+								flex={1}
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								flexWrap={"wrap"}
+								rowGap={"m"}
+							>
 								<PaymentOptionContainer>
 									<PaymentOption
 										onPress={() =>
@@ -61,8 +77,6 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										paymentMethod={"MtnMoney"}
 									/>
 								</PaymentOptionContainer>
-							</Box>
-							<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
 								<PaymentOptionContainer>
 									<PaymentOption
 										onPress={() =>
@@ -71,6 +85,7 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										paymentMethod={"MoovMoney"}
 									/>
 								</PaymentOptionContainer>
+
 								<PaymentOptionContainer>
 									<PaymentOption
 										onPress={() =>
@@ -79,13 +94,16 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										paymentMethod={"WaveMoney"}
 									/>
 								</PaymentOptionContainer>
+
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"VisaCard"}
+									/>
+								</PaymentOptionContainer>
 							</Box>
-							<PaymentOptionContainer>
-								<PaymentOption
-									onPress={() => navigation.navigate("paymentAmountInputScreen")}
-									paymentMethod={"VisaCard"}
-								/>
-							</PaymentOptionContainer>
 						</Box>
 					</Box>
 				</SafeAreaView>