From 7b82a23c6060c5f02c805bdcce19d4bda3050ffb Mon Sep 17 00:00:00 2001 From: G Date: Tue, 28 May 2024 14:49:33 +0000 Subject: [PATCH] handle orange payment logic inside the hook for cleaner component --- src/hooks/useOrangeMoney.tsx | 47 +++++++++++++++++++++++++++++++++++++++++++++++ src/screens/PaymentAmountInputScreen.tsx | 55 ++++++++----------------------------------------------- 2 files changed, 55 insertions(+), 47 deletions(-) diff --git a/src/hooks/useOrangeMoney.tsx b/src/hooks/useOrangeMoney.tsx index a392fa5..4a8a2d0 100644 --- a/src/hooks/useOrangeMoney.tsx +++ b/src/hooks/useOrangeMoney.tsx @@ -1,8 +1,11 @@ +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(); + 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( + + await openBrowserThenCheckStatus(paymentUrl, orderId) + } + />, + ); + } else if (error.name === "ORANGE_PAYMENT_FAILED") { + showModal(); + log.error("handlePaymentButton | ORANGE_PAYMENT_FAILED"); + } + } else { + log.error("handlePaymentButton |", error); + closeModal(); + throw error; + } + } + }; + + const makePayment = async (amount: number) => { + try { + showModal(); + 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, }; }; diff --git a/src/screens/PaymentAmountInputScreen.tsx b/src/screens/PaymentAmountInputScreen.tsx index 9622482..b144880 100644 --- a/src/screens/PaymentAmountInputScreen.tsx +++ b/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(); - const { payment_url, order_id } = - await orangeTransactionInitializerMutation.mutateAsync(amountToPay); - // closeModal(); - showModal(); - 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(); - 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( - , - ); - } else if (error.name === "ORANGE_PAYMENT_FAILED") { - showModal(); - 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 ( -- libgit2 0.27.1