handle orange payment logic inside the hook for cleaner component

src/hooks/useOrangeMoney.tsx

+import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
 import {
 	type IorangePaymentStarter,
 	getTransactionStatus,
 	getTransactionsData,
 } from "@/utils/requests/orangePayment";
+import ErrorModal from "@components/modals/ErrorModal";
+import LoadingModal from "@components/modals/LoadingModal";
 import { LOG } from "@logger";
 
 import { useMutation } from "@tanstack/react-query";
@@ -22,6 +25,7 @@ const paymentObjectDefault: IorangePaymentStarter = {
 };
 const useOrangeMoney = () => {
 	const [isBrowserOpen, setIsBrowserOpen] = useState(false);
+	const { showModal, closeModal } = useModalsManagerContext();
 
 	const handlePaymentUsingBrowser = async (url: string) => {
 		setIsBrowserOpen(true);
@@ -70,6 +74,48 @@ const useOrangeMoney = () => {
 		},
 	});
 
+	const openBrowserThenCheckStatus = async (paymentUrl: string, orderId: string) => {
+		try {
+			await handlePaymentUsingBrowser(paymentUrl);
+			log.info("Verifying transaction status...");
+			showModal(<LoadingModal message="Vérification du statut de la transaction..." />);
+			await transactionsStatusMutation.mutateAsync(orderId);
+		} catch (error) {
+			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={async () =>
+								await openBrowserThenCheckStatus(paymentUrl, orderId)
+							}
+						/>,
+					);
+				} else if (error.name === "ORANGE_PAYMENT_FAILED") {
+					showModal(<ErrorModal message="Le paiment à échoué." onPress={closeModal} />);
+					log.error("handlePaymentButton | ORANGE_PAYMENT_FAILED");
+				}
+			} else {
+				log.error("handlePaymentButton |", error);
+				closeModal();
+				throw error;
+			}
+		}
+	};
+
+	const makePayment = async (amount: number) => {
+		try {
+			showModal(<LoadingModal message="Initialization de la transaction." />);
+			const { payment_url, order_id } =
+				await orangeTransactionInitializerMutation.mutateAsync(amount);
+			await openBrowserThenCheckStatus(payment_url, order_id);
+		} catch (error) {
+			log.error("makePayment |", error);
+		}
+	};
+
 	return {
 		orangeTransactionInitializerMutation: orangeTransactionInitializerMutation,
 
@@ -78,6 +124,7 @@ const useOrangeMoney = () => {
 		isWaitingForOmPaymentUrl: orangeTransactionInitializerMutation.isPending,
 		isCheckingForTransactionStatus: transactionsStatusMutation.isPending,
 		transactionsStatusMutation,
+		makePayment,
 	};
 };
 

src/screens/PaymentAmountInputScreen.tsx

@@ -8,8 +8,6 @@ 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";
@@ -33,6 +31,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 		isWaitingForOmPaymentUrl,
 		isCheckingForTransactionStatus,
 		transactionsStatusMutation,
+		makePayment,
 	} = useOrangeMoney();
 
 	const insets = useSafeAreaInsets();
@@ -52,55 +51,17 @@ 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 !!");
-				await orangePaymentSequence();
+				// await orangePaymentSequence();
+				try {
+					await makePayment(amountToPay);
+				} catch (error) {
+					log.error("handlePaymentButton |", error);
+				}
 
 				break;
 			}
@@ -109,7 +70,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 				navigation.navigate("numberAndOtpForPaymentScreen");
 				break;
 		}
-	}, [paymentType, navigation, orangePaymentSequence]);
+	}, [paymentType, navigation, amountToPay, makePayment]);
 
 	return (
 		<BackgroundDefault>