From 972b2c2d0d3d5420e9b147541ac7f0e0e4f3a75f Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Tue, 21 May 2024 15:55:14 +0000
Subject: [PATCH] add mutation for checking transaction status after the browser is dismissed. the check is done 3 times unless success or failed is returned from the response. Change the flow logic of mutations to make it more predictable.

---
 src/hooks/useOrangeMoney.tsx             | 42 +++++++++++++++++++++++++++++++++++++++---
 src/screens/PaymentAmountInputScreen.tsx | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 96 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useOrangeMoney.tsx b/src/hooks/useOrangeMoney.tsx
index 6aaead9..93bb579 100644
--- a/src/hooks/useOrangeMoney.tsx
+++ b/src/hooks/useOrangeMoney.tsx
@@ -1,4 +1,8 @@
-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;
diff --git a/src/screens/PaymentAmountInputScreen.tsx b/src/screens/PaymentAmountInputScreen.tsx
index 4908079..9be0c04 100644
--- a/src/screens/PaymentAmountInputScreen.tsx
+++ b/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>
+	);
+};
--
libgit2 0.27.1