all are type checked as part of the stack navigation. screens beside the home of…

src/screens/HomePageWithPaymentOptions.tsx

+import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import BalanceContainer from "@components/BalanceContainer";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import NotificationIconButton from "@components/NotificationIconButton";
@@ -7,7 +8,8 @@ import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { SafeAreaView } from "react-native-safe-area-context";
 
-const HomePageWithPaymentOptions = () => {
+const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
+	({ navigation }) => {
 		return (
 			<BackgroundGreenWhiteContentArea>
 				<SafeAreaView>
@@ -38,7 +40,12 @@ const HomePageWithPaymentOptions = () => {
 							>
 								{/* Payment Modes */}
 								<Box style={{ width: "48%", height: "26%" }}>
-								<PaymentOption onPress={() => {}} paymentMethod={"OrangeMoney"} />
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"OrangeMoney"}
+									/>
 								</Box>
 								<Box style={{ width: "48%", height: "26%" }}>
 									<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
@@ -61,6 +68,6 @@ const HomePageWithPaymentOptions = () => {
 				</SafeAreaView>
 			</BackgroundGreenWhiteContentArea>
 		);
-};
+	};
 
 export default HomePageWithPaymentOptions;

src/screens/NumberAndOtpForPaymentScreen.tsx

+import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import Button from "@components/Button";
 import Input from "@components/Input";
@@ -7,7 +8,9 @@ import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { SafeAreaView } from "react-native-safe-area-context";
 
-const NumberAndOtpForPaymentScreen = () => {
+const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps<
+	"numberAndOtpForPaymentScreen"
+> = ({ navigation }) => {
 	return (
 		<BackgroundGreenWhiteContentArea>
 			<SafeAreaView>

src/screens/PaymentAmountInputScreen.tsx

+import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import BalanceContainer from "@components/BalanceContainer";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import Button from "@components/Button";
+import GoBackIconButton from "@components/GoBackIconButton";
 import Input from "@components/Input";
 import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
 import { SafeAreaView } from "react-native-safe-area-context";
 
-const PaymentAmountInputScreen = () => {
+const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
+	navigation,
+}) => {
 	return (
 		<BackgroundGreenWhiteContentArea>
 			<SafeAreaView>
@@ -19,6 +23,7 @@ const PaymentAmountInputScreen = () => {
 						mb={"l"}
 					>
 						<BeasyLogoIcon />
+						<GoBackIconButton onPress={() => navigation.goBack()} />
 					</Box>
 					<Box height={150} alignItems={"center"} justifyContent={"center"}>
 						<BalanceContainer balance={78000} label="Total des ventes" />