using appstate to listen to browser closing. Current implementation is wack tho.…

src/hooks/useOrangeMoney.tsx

@@ -13,7 +13,9 @@ import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import * as WebBrowser from "expo-web-browser";
-import { useState } from "react";
+import { useRef, useState } from "react";
+
+import { AppState, Platform } from "react-native";
 
 const log = LOG.extend("useOrangeMoney");
 
@@ -37,6 +39,8 @@ const useOrangeMoney = (
 
 	const [isBrowserOpen, setIsBrowserOpen] = useState(false);
 	const { showModal, closeModal } = useModalsManagerContext();
+	const appState = useRef(AppState.currentState);
+	const [appStateVisible, setAppStateVisible] = useState(appState.current);
 
 	const handlePaymentUsingBrowser = async (url: string) => {
 		setIsBrowserOpen(true);
@@ -121,12 +125,44 @@ const useOrangeMoney = (
 	const openBrowserThenCheckStatus = async (paymentUrl: string, orderId: string) => {
 		try {
 			await handlePaymentUsingBrowser(paymentUrl);
-			log.info("openBrowserThenCheckStatus | Verifying transaction status...");
-			showModal(<LoadingModal message="Vérification du statut de la transaction..." />);
-			// await transactionsStatusMutation.mutateAsync(orderId);
-			const message = await checkStatus(orderId);
-			if (message) {
-				showModal(<ErrorModal message={message} />);
+			if (Platform.OS === "android") {
+				log.debug(
+					"useOrangeMoney | openBrowserThenCheckStatus | Android device. Setup listener for browser close event.",
+				);
+				const sub = AppState.addEventListener("change", async (nextAppState) => {
+					log.debug(
+						"useOrangeMoney | openBrowserThenCheckStatus | Android device. Browser state :",
+						nextAppState,
+					);
+
+					if (nextAppState === "active") {
+						log.debug(
+							"useOrangeMoney | openBrowserThenCheckStatus | Android device. Browser is closed. Removing listener. Checking for transaction State.",
+						);
+						sub.remove();
+						log.info("openBrowserThenCheckStatus | Verifying transaction status...");
+						showModal(
+							<LoadingModal message="Vérification du statut de la transaction..." />,
+						);
+						// await transactionsStatusMutation.mutateAsync(orderId);
+						const message = await checkStatus(orderId);
+						if (message) {
+							showModal(<ErrorModal message={message} />);
+						} else {
+							navigation?.getParent()?.navigate("paymentResultScreen");
+						}
+					}
+				});
+			} else {
+				log.info("openBrowserThenCheckStatus | Verifying transaction status...");
+				showModal(<LoadingModal message="Vérification du statut de la transaction..." />);
+				// await transactionsStatusMutation.mutateAsync(orderId);
+				const message = await checkStatus(orderId);
+				if (message) {
+					showModal(<ErrorModal message={message} />);
+				} else {
+					navigation?.getParent()?.navigate("paymentResultScreen");
+				}
 			}
 			// closeModal();
 		} catch (error: unknown) {