change PaymentOptions type to match the returned ones from api

src/components/PaymentOption.tsx

@@ -2,15 +2,7 @@ import { images } from "@styles/Commons";
 import { Image, TouchableOpacity } from "react-native";
 import Box from "./bases/Box";
 
-export enum PaymentMethods {
-	OrangeMoney = 1,
-	MtnMoney = 2,
-	MoobMoney = 3,
-	WaveMoney = 4,
-	VisaCard = 5,
-}
-
-type PaymentOptions = "OrangeMoney" | "MtnMoney" | "MoovMoney" | "WaveMoney" | "VisaCard";
+type PaymentOptions = "ORANGE" | "MTN" | "FLOOZ" | "WAVE" | "CB";
 
 type Props = {
 	onPress: () => void;
@@ -32,7 +24,7 @@ const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) =>
 	);
 };
 
-const OrangeMoney = () => {
+const Orange = () => {
 	return (
 		<PaymentOptionContainer>
 			<Image
@@ -43,7 +35,7 @@ const OrangeMoney = () => {
 	);
 };
 
-const MtnMoney = () => {
+const Mtn = () => {
 	return (
 		<PaymentOptionContainer>
 			<Image source={require("../../assets/operators/mtn_money.png")} style={images.cover} />
@@ -51,7 +43,7 @@ const MtnMoney = () => {
 	);
 };
 
-const MoovMoney = () => {
+const Flooz = () => {
 	return (
 		<PaymentOptionContainer>
 			<Image source={require("../../assets/operators/moov_money.png")} style={images.cover} />
@@ -59,7 +51,7 @@ const MoovMoney = () => {
 	);
 };
 
-const WaveMoney = () => {
+const Wave = () => {
 	return (
 		<PaymentOptionContainer>
 			<Image source={require("../../assets/operators/wave_money.png")} style={images.cover} />
@@ -67,7 +59,7 @@ const WaveMoney = () => {
 	);
 };
 
-const VisaCard = () => {
+const Cb = () => {
 	return (
 		<PaymentOptionContainer>
 			<Image source={require("../../assets/operators/visa_card.png")} style={images.cover} />
@@ -78,11 +70,11 @@ const VisaCard = () => {
 const PaymentOption = ({ onPress, paymentMethod }: Props) => {
 	return (
 		<TouchableOpacity style={{ width: "100%", height: "100%" }} onPress={onPress}>
-			{paymentMethod === "OrangeMoney" && <OrangeMoney />}
-			{paymentMethod === "MtnMoney" && <MtnMoney />}
-			{paymentMethod === "MoovMoney" && <MoovMoney />}
-			{paymentMethod === "WaveMoney" && <WaveMoney />}
-			{paymentMethod === "VisaCard" && <VisaCard />}
+			{paymentMethod === "ORANGE" && <Orange />}
+			{paymentMethod === "MTN" && <Mtn />}
+			{paymentMethod === "FLOOZ" && <Flooz />}
+			{paymentMethod === "WAVE" && <Wave />}
+			{paymentMethod === "CB" && <Cb />}
 		</TouchableOpacity>
 	);
 };

src/screens/HomePageWithPaymentOptions.tsx

@@ -66,7 +66,7 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										onPress={() =>
 											navigation.navigate("paymentAmountInputScreen")
 										}
-										paymentMethod={"OrangeMoney"}
+										paymentMethod={"ORANGE"}
 									/>
 								</PaymentOptionContainer>
 								<PaymentOptionContainer>
@@ -74,7 +74,7 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										onPress={() =>
 											navigation.navigate("paymentAmountInputScreen")
 										}
-										paymentMethod={"MtnMoney"}
+										paymentMethod={"MTN"}
 									/>
 								</PaymentOptionContainer>
 								<PaymentOptionContainer>
@@ -82,7 +82,7 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										onPress={() =>
 											navigation.navigate("paymentAmountInputScreen")
 										}
-										paymentMethod={"MoovMoney"}
+										paymentMethod={"FLOOZ"}
 									/>
 								</PaymentOptionContainer>
 
@@ -91,7 +91,7 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										onPress={() =>
 											navigation.navigate("paymentAmountInputScreen")
 										}
-										paymentMethod={"WaveMoney"}
+										paymentMethod={"WAVE"}
 									/>
 								</PaymentOptionContainer>
 
@@ -100,7 +100,7 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										onPress={() =>
 											navigation.navigate("paymentAmountInputScreen")
 										}
-										paymentMethod={"VisaCard"}
+										paymentMethod={"CB"}
 									/>
 								</PaymentOptionContainer>
 							</Box>