add mutation for checking transaction status after the browser is dismissed. the…

src/hooks/useOrangeMoney.tsx

-import { type IorangePaymentStarter, getTransactionsData } from "@/utils/requests/orangePayment";
+import {
+	type IorangePaymentStarter,
+	getTransactionStatus,
+	getTransactionsData,
+} from "@/utils/requests/orangePayment";
 
 import { useMutation } from "@tanstack/react-query";
 import * as WebBrowser from "expo-web-browser";
@@ -24,14 +28,17 @@ const useOrangeMoney = () => {
 		setIsBrowserOpen(false);
 	};
 
-	const { isPending, mutate } = useMutation({
+	const orangeTransactionInitializerMutation = useMutation({
 		mutationFn: (amount: number) =>
 			getTransactionsData({
 				...paymentObjectDefault,
 				montant: amount,
 			}),
 		onSuccess: async (data) => {
+			// return data.payment_url
+			console.log("om start success ", data);
 			await handlePaymentUsingBrowser(data.payment_url);
+			// await transactionsStatusMutation.mutate(data.order_id);
 			// setResult(result);
 		},
 		onError: (err) => {
@@ -39,7 +46,36 @@ const useOrangeMoney = () => {
 		},
 	});
 
-	return { getOmPaymentUrl: mutate, isBrowserOpen, isWaitingForOmPaymentUrl: isPending };
+	const maxRetry = 3;
+	const retryDelay = 5000;
+
+	const transactionsStatusMutation = useMutation({
+		mutationFn: (orderId: string) => getTransactionStatus(orderId),
+		onSuccess: (data) => {
+			console.log("useOrangeMoney Check status :: ", data);
+			return data.status;
+		},
+		onError: (err) => {
+			console.log("useOrangeMoney Error ::", err);
+		},
+		retry: (failureCount, error) => {
+			return failureCount < maxRetry;
+		},
+		retryDelay(failureCount, error) {
+			console.log("failureCount", failureCount, "error", error);
+			return retryDelay;
+		},
+	});
+
+	return {
+		orangeTransactionInitializerMutation: orangeTransactionInitializerMutation,
+
+		handlePaymentUsingBrowser,
+		isBrowserOpen,
+		isWaitingForOmPaymentUrl: orangeTransactionInitializerMutation.isPending,
+		isCheckingForTransactionStatus: transactionsStatusMutation.isPending,
+		transactionsStatusMutation,
+	};
 };
 
 export default useOrangeMoney;

src/screens/PaymentAmountInputScreen.tsx

@@ -9,6 +9,7 @@ import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import useOrangeMoney from "@hooks/useOrangeMoney";
 import { useCallback, useState } from "react";
+import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
@@ -18,7 +19,14 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 	const { paymentType } = route.params;
 	const [amountToPay, setAmountToPay] = useState(0);
 
-	const { getOmPaymentUrl, isBrowserOpen, isWaitingForOmPaymentUrl } = useOrangeMoney();
+	const {
+		orangeTransactionInitializerMutation,
+		handlePaymentUsingBrowser,
+		isBrowserOpen,
+		isWaitingForOmPaymentUrl,
+		isCheckingForTransactionStatus,
+		transactionsStatusMutation,
+	} = useOrangeMoney();
 
 	const insets = useSafeAreaInsets();
 
@@ -34,22 +42,45 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 		return setAmountToPay(0);
 	};
 
-	const handlePaymentButton = useCallback(() => {
+	const handlePaymentButton = useCallback(async () => {
 		switch (paymentType) {
-			case "OM":
+			case "OM": {
+				Keyboard.dismiss();
 				console.log("OM so we stays on screen !!");
 				console.log("Calling api with amount :: ", amountToPay);
-				getOmPaymentUrl(amountToPay);
+
+				await orangeTransactionInitializerMutation.mutateAsync(amountToPay);
+				console.log(
+					"Browser got closed !! ",
+					orangeTransactionInitializerMutation.isSuccess,
+				);
+				if (orangeTransactionInitializerMutation.isSuccess) {
+					console.log("initilization was a success");
+					transactionsStatusMutation.mutate(
+						orangeTransactionInitializerMutation.data.order_id,
+					);
+				}
+
+				// console.log("Response transaction", response);
 				break;
+			}
 			default:
 				navigation.navigate("numberAndOtpForPaymentScreen");
 				break;
 		}
-	}, [amountToPay, getOmPaymentUrl, paymentType, navigation]);
+	}, [
+		amountToPay,
+		orangeTransactionInitializerMutation,
+		paymentType,
+		navigation,
+		transactionsStatusMutation,
+	]);
 
 	return (
 		<BackgroundDefault>
 			{/* <SafeAreaView> */}
+
+			{transactionsStatusMutation.isPending && <LoadingScreen />}
 			<Box
 				style={{
 					height: "100%",
@@ -109,3 +140,24 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 };
 
 export default PaymentAmountInputScreen;
+
+const LoadingScreen = () => {
+	return (
+		<View
+			style={{
+				flex: 1,
+				width: "100%",
+				height: "100%",
+				justifyContent: "center",
+				alignItems: "center",
+				zIndex: 1000000000000,
+				backgroundColor: "black",
+				opacity: 0.5,
+				position: "absolute",
+			}}
+		>
+			<Text color={"primary"}>Verification du status de la transaction.</Text>
+			<Text>Veuillez patienter</Text>
+		</View>
+	);
+};