- put the logic of orange payment inside its own function

src/screens/PaymentAmountInputScreen.tsx

+import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
 import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import Button from "@components/Button";
@@ -7,6 +8,8 @@ import PaymentOption from "@components/PaymentOption";
 import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import ErrorModal from "@components/modals/ErrorModal";
+import LoadingModal from "@components/modals/LoadingModal";
 import useOrangeMoney from "@hooks/useOrangeMoney";
 import { LOG } from "@logger";
 import { useCallback, useState } from "react";
@@ -21,6 +24,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 	log.debug("PaymentAmountInputScreen");
 	const { paymentType } = route.params;
 	const [amountToPay, setAmountToPay] = useState(0);
+	const { showModal, closeModal } = useModalsManagerContext();
 
 	const {
 		orangeTransactionInitializerMutation,
@@ -48,35 +52,55 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 		return setAmountToPay(0);
 	};
 
+	const orangePaymentSequence = useCallback(async () => {
+		log.info("Calling api with amount :: ", amountToPay);
+		try {
+			showModal(<LoadingModal message="Initialization de la transaction." />);
+			const { payment_url, order_id } =
+				await orangeTransactionInitializerMutation.mutateAsync(amountToPay);
+			// closeModal();
+			showModal(<LoadingModal message="Ouverture de l'interface de paiement..." />);
+			log.info("Url de paiement orange", payment_url);
+			log.info("Ouverture du navigateur sur la page de paiement...");
+			await handlePaymentUsingBrowser(payment_url);
+			log.info("Verifying transaction status...");
+			showModal(<LoadingModal message="Vérification du statut de la transaction..." />);
+			const { status } = await transactionsStatusMutation.mutateAsync(order_id);
+			navigation.getParent()?.navigate("paymentResultScreen");
+		} catch (error: unknown) {
+			log.error("handlePaymentButton |", error);
+			if (error instanceof Error) {
+				if (error.name === "ORANGE_PAYMENT_IN_PROGRESS") {
+					log.warn("handlePaymentButton | ORANGE_PAYMENT_IN_PROGRESS");
+					showModal(
+						<ErrorModal
+							message="Le payment est toujours en cours."
+							onPress={closeModal}
+						/>,
+					);
+				} else if (error.name === "ORANGE_PAYMENT_FAILED") {
+					showModal(<ErrorModal message="Le paiment à échoué." onPress={closeModal} />);
+					log.error("handlePaymentButton | ORANGE_PAYMENT_FAILED");
+				}
+			}
+			//TODO : handle error
+		}
+	}, [
+		amountToPay,
+		orangeTransactionInitializerMutation,
+		navigation,
+		transactionsStatusMutation,
+		handlePaymentUsingBrowser,
+		closeModal,
+		showModal,
+	]);
+
 	const handlePaymentButton = useCallback(async () => {
 		switch (paymentType) {
 			case "OM": {
 				Keyboard.dismiss();
 				log.info("OM so we stays on screen !!");
-				log.info("Calling api with amount :: ", amountToPay);
-				try {
-					const { payment_url, order_id } =
-						await orangeTransactionInitializerMutation.mutateAsync(amountToPay);
-					log.info("Url de paiement orange", payment_url);
-					log.info("Ouverture du navigateur sur la page de paiement...");
-					await handlePaymentUsingBrowser(payment_url);
-					log.info("Verifying transaction status...");
-					const { status } = await transactionsStatusMutation.mutateAsync(order_id);
-					log.info("result of transactions", JSON.stringify(status, null, 2));
-					if (status === "SUCCESS") {
-						log.info("Transaction was a success, navigating to success page");
-						navigation.getParent()?.navigate("paymentResultScreen");
-					} else if (status === "FAILED") {
-						log.warn("Transaction was a failed, navigating to error page");
-					} else if (status === "INITIATED") {
-						log.warn(
-							"Transaction status was still 'INITIATED' after timeout, throwing an error",
-						);
-					}
-				} catch (error) {
-					log.error("handlePaymentButton |", error);
-					//TODO : handle error
-				}
+				await orangePaymentSequence();
 
 				break;
 			}
@@ -85,14 +109,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 				navigation.navigate("numberAndOtpForPaymentScreen");
 				break;
 		}
-	}, [
-		amountToPay,
-		orangeTransactionInitializerMutation,
-		paymentType,
-		navigation,
-		transactionsStatusMutation,
-		handlePaymentUsingBrowser,
-	]);
+	}, [paymentType, navigation, orangePaymentSequence]);
 
 	return (
 		<BackgroundDefault>