diff --git a/src/hooks/useOrangeMoney.tsx b/src/hooks/useOrangeMoney.tsx index 7810905..7956dda 100644 --- a/src/hooks/useOrangeMoney.tsx +++ b/src/hooks/useOrangeMoney.tsx @@ -1,21 +1,19 @@ -import { useModalsManagerContext } from "@/contexts/ModalsManagerContext"; -import type { IpaymentStackNavigator } from "@/navigations/Types"; -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 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 { useRef, useState } from "react"; - import { AppState, Platform } from "react-native"; +import { useModalsManagerContext } from "@/contexts/ModalsManagerContext"; +import type { IpaymentStackNavigator } from "@/navigations/types"; +import { + getTransactionStatus, + getTransactionsData, + type IorangePaymentStarter, +} from "@/utils/requests/orangePayment"; const log = LOG.extend("useOrangeMoney"); @@ -40,7 +38,7 @@ const useOrangeMoney = ( const [isBrowserOpen, setIsBrowserOpen] = useState(false); const { showModal, closeModal } = useModalsManagerContext(); const appState = useRef(AppState.currentState); - const [appStateVisible, setAppStateVisible] = useState(appState.current); + const [_appStateVisible, _setAppStateVisiblee] = useState(appState.current); const handlePaymentUsingBrowser = async (url: string) => { setIsBrowserOpen(true); @@ -56,7 +54,7 @@ const useOrangeMoney = ( ...paymentObjectDefault, montant: amount, }), - onSuccess: (data) => { + onSuccess: (_data) => { // return data.payment_url log.debug("orangeTransactionInitializerMutation request success, opening browser..."); queryClient.invalidateQueries({ queryKey: ["transactionsHistory"] }); @@ -69,8 +67,8 @@ const useOrangeMoney = ( }, }); - const maxRetry = 3; - const retryDelay = 5000; + const _maxRetry = 3; + const _retryDelay = 5000; const transactionsStatusMutation = useMutation({ mutationFn: (orderId: string) => getTransactionStatus(orderId), diff --git a/src/hooks/useWave.tsx b/src/hooks/useWave.tsx index 277b1b6..d68d192 100644 --- a/src/hooks/useWave.tsx +++ b/src/hooks/useWave.tsx @@ -1,10 +1,3 @@ -import { useModalsManagerContext } from "@/contexts/ModalsManagerContext"; -import type { IpaymentStackNavigator } from "@/navigations/Types"; -import { - type IwavePaymentStarter, - getTransactionStatus, - initTransaction, -} from "@/utils/requests/wavePayment"; import ErrorModal from "@components/modals/ErrorModal"; import LoadingModal from "@components/modals/LoadingModal"; import { LOG } from "@logger"; @@ -12,6 +5,13 @@ import type { NativeStackNavigationProp } from "@react-navigation/native-stack"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import * as WebBrowser from "expo-web-browser"; import { useState } from "react"; +import { useModalsManagerContext } from "@/contexts/ModalsManagerContext"; +import type { IpaymentStackNavigator } from "@/navigations/types"; +import { + getTransactionStatus, + type IwavePaymentStarter, + initTransaction, +} from "@/utils/requests/wavePayment"; const log = LOG.extend("useWave"); @@ -31,9 +31,9 @@ const useWave = ( >, ) => { const { showModal, closeModal } = useModalsManagerContext(); - const [isBrowserOpen, setIsBrowserOpen] = useState(false); + const [_isBrowserOpen, setIsBrowserOpen] = useState(false); - const queryClient = useQueryClient(); + const _queryClient = useQueryClient(); // Mutations @@ -43,7 +43,7 @@ const useWave = ( ...paymentObjectDefault, montant: amount, }), - onSuccess: (data) => {}, + onSuccess: (_data) => {}, onError: (err) => { log.error("waveTransactionInitializerMutation |", err); }, @@ -51,7 +51,7 @@ const useWave = ( const waveTransactionStatusMutation = useMutation({ mutationFn: (orderId: string) => getTransactionStatus(orderId), - onSuccess: (data) => { + onSuccess: (_data) => { log.debug("waveTransactionStatusMutation request success"); }, onError: (err) => { @@ -71,7 +71,7 @@ const useWave = ( setIsBrowserOpen(false); }; - const openBrowserThenCheckStatus = async (paymentUrl: string, orderId: string) => { + const _openBrowserThenCheckStatus = async (paymentUrl: string, orderId: string) => { try { await handlePaymentUsingBrowser(paymentUrl); log.info("openBrowserThenCheckStatus | Verifying transaction status..."); @@ -128,7 +128,7 @@ const useWave = ( log.info("handlePaymentVerification |", id); try { showModal(); - const response = await waveTransactionStatusMutation.mutateAsync(id); + const _response = await waveTransactionStatusMutation.mutateAsync(id); closeModal(); } catch (error) { log.error("handlePaymentVerification |", error); diff --git a/src/navigations/AppMainStackNavigator.tsx b/src/navigations/AppMainStackNavigator.tsx index 6b4c0ad..91859a4 100644 --- a/src/navigations/AppMainStackNavigator.tsx +++ b/src/navigations/AppMainStackNavigator.tsx @@ -8,7 +8,7 @@ import { memo } from "react"; import { useSelector } from "react-redux"; import type { RootState } from "@/redux"; import { AppBottomTabsNavigator } from "./AppBottomTabsNavigator"; -import type { ImainStackNavigator } from "./Types"; +import type { ImainStackNavigator } from "./types"; const Stack = createNativeStackNavigator(); diff --git a/src/navigations/PaymentStackNavigation.tsx b/src/navigations/PaymentStackNavigation.tsx index 356a698..645b8c3 100644 --- a/src/navigations/PaymentStackNavigation.tsx +++ b/src/navigations/PaymentStackNavigation.tsx @@ -2,7 +2,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack"; import HomePageWithPaymentOptions from "@screens/HomePageWithPaymentOptions"; import NumberAndOtpForPaymentScreen from "@screens/NumberAndOtpForPaymentScreen"; import PaymentAmountInputScreen from "@screens/PaymentAmountInputScreen"; -import type { IpaymentStackNavigator } from "./Types"; +import type { IpaymentStackNavigator } from "./types"; const Stack = createNativeStackNavigator(); diff --git a/src/navigations/Types.ts b/src/navigations/types.ts similarity index 87% rename from src/navigations/Types.ts rename to src/navigations/types.ts index f331d6b..8d275b1 100644 --- a/src/navigations/Types.ts +++ b/src/navigations/types.ts @@ -1,12 +1,15 @@ -import type { PaymentCode } from "@/utils/requests/types"; -import type { IwaveStarterRespone } from "@/utils/requests/wavePayment"; import type { NativeStackScreenProps } from "@react-navigation/native-stack"; +import type { PaymentType } from "@/features/pay/types"; +import type { IwaveStarterRespone } from "@/utils/requests/wavePayment"; export type IpaymentStackNavigator = { homePageWithPaymentOptions: undefined; - numberAndOtpForPaymentScreen: undefined; + numberAndOtpForPaymentScreen: { + paymentType: PaymentType; + amount: number; + }; paymentAmountInputScreen: { - paymentType: PaymentCode; + paymentType: PaymentType; }; }; diff --git a/src/screens/HomePageWithPaymentOptions.tsx b/src/screens/HomePageWithPaymentOptions.tsx index cf5fcec..04cbb23 100644 --- a/src/screens/HomePageWithPaymentOptions.tsx +++ b/src/screens/HomePageWithPaymentOptions.tsx @@ -1,115 +1,85 @@ -import type { PaymentStackScreenComponentProps } from "@/navigations/Types"; -import getPaymentTypes from "@/utils/requests/getPaymentTypes"; -import BalanceContainer from "@components/BalanceContainer"; -import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon"; -import PaymentOption from "@components/PaymentOption"; -import Box from "@components/bases/Box"; -import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight"; +import { asp as g } from "@asp/asp"; +import { Balance } from "@components/Balance"; +import { BarnoinPayBackground } from "@components/BarnoinPayBackground"; +import BeasyLogoIcon from "@components/BeasyLogoIcon"; import { LOG } from "@logger"; -import Card from "@re-card"; -import Text from "@re-text"; import { useQuery } from "@tanstack/react-query"; -import { useMemo } from "react"; -import { Dimensions } from "react-native"; +import { Text, View } from "react-native"; +import { getPaymentTypes } from "@/features/pay/api"; +import PaymentType from "@/features/pay/components/PaymentType"; +import type { PaymentStackScreenComponentProps } from "@/navigations/types"; const log = LOG.extend("HomePageWithPaymentOptions"); -const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> = - ({ navigation }) => { - log.debug("HomePageWithPaymentOptions"); - const { data, isLoading, error } = useQuery({ - queryKey: ["paymentTypes"], - queryFn: getPaymentTypes, - enabled: true, - }); +const HomePageWithPaymentOptions: PaymentStackScreenComponentProps< + "homePageWithPaymentOptions" +> = ({ navigation }) => { + log.debug("HomePageWithPaymentOptions"); + const paymentTypesQuery = useQuery({ + queryKey: ["paymentTypes"], + queryFn: getPaymentTypes, + }); - // getting valid payments supported - const paymentTypesWithActiveStatus = useMemo(() => { - log.info("Filtering payment types"); - const paymentTypes = data?.results || []; - return paymentTypes.filter((paymentType) => paymentType.etat === true); - }, [data]); + const paymentTypes = paymentTypesQuery.isSuccess + ? Object.keys(paymentTypesQuery.data.data.results) + .map((key) => paymentTypesQuery.data.data.results[key]) + .filter((item) => item.etat === true) + : []; - log.info( - "payment types to render", - paymentTypesWithActiveStatus.map((paymentType) => paymentType.code), - ); - - return ( - - - - - - - - - - - - Types de paiement - - - - - {isLoading && ( - - - Chargement des méthodes de paiement... - - - )} - {!isLoading && - !error && - paymentTypesWithActiveStatus.map((paymentType) => ( - - - navigation.navigate( - "paymentAmountInputScreen", - { - paymentType: paymentType.code, - }, - ) - } - paymentMethod={paymentType.code} - /> - - ))} - - - - - - ); - }; + return ( + + + + -export default HomePageWithPaymentOptions; + + + -const screenWidth = Dimensions.get("window").width; -const paymentOptionCardWidth = screenWidth / 2 - 30; -const paymentOptionCardHeight = paymentOptionCardWidth * 0.65; -const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - + + Types de paiement + + {paymentTypes.map((paymentType) => { + return ( + { + navigation.navigate("paymentAmountInputScreen", { + paymentType, + }); + }} + key={paymentType.reference} + style={[{ width: "47%" }]} + type={paymentType.code} + /> + ); + })} + + + ); }; + +export default HomePageWithPaymentOptions; diff --git a/src/screens/HomeUserNotLoggedIn.tsx b/src/screens/HomeUserNotLoggedIn.tsx index e214a2d..74af9a7 100644 --- a/src/screens/HomeUserNotLoggedIn.tsx +++ b/src/screens/HomeUserNotLoggedIn.tsx @@ -2,7 +2,7 @@ import { asp as g } from "@asp/asp"; import * as Button from "@components/ButtonNew"; import { Image } from "expo-image"; import { Text, View } from "react-native"; -import type { MainStackScreenComponentProps } from "@/navigations/Types"; +import type { MainStackScreenComponentProps } from "@/navigations/types"; const HomeUserNotLoggedIn: MainStackScreenComponentProps<"homeUserNotLoggedIn"> = ({ navigation, diff --git a/src/screens/NumberAndOtpForPaymentScreen.tsx b/src/screens/NumberAndOtpForPaymentScreen.tsx index 69a2121..4a3ad99 100644 --- a/src/screens/NumberAndOtpForPaymentScreen.tsx +++ b/src/screens/NumberAndOtpForPaymentScreen.tsx @@ -1,66 +1,66 @@ -import type { PaymentStackScreenComponentProps } from "@/navigations/Types"; +import { asp as g } from "@asp/asp"; +import { BarnoinPayBackground } from "@components/BarnoinPayBackground"; import BeasyLogoIcon from "@components/BeasyLogoIcon"; -import Button from "@components/Button"; -import GoBackIconButton from "@components/GoBackIconButton"; -import InputWithTopLabel from "@components/InputWithTopLabel"; -import PaymentOption from "@components/PaymentOption"; -import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea"; -import Box from "@components/bases/Box"; -import Text from "@components/bases/Text"; +import * as Button from "@components/ButtonNew"; +import * as Input from "@components/InputNew"; +import AntDesign from "@expo/vector-icons/AntDesign"; import { LOG } from "@logger"; -import { SafeAreaView } from "react-native-safe-area-context"; +import { Text, View } from "react-native"; +import PaymentType from "@/features/pay/components/PaymentType"; +import type { PaymentStackScreenComponentProps } from "@/navigations/types"; -const log = LOG.extend("NumberAndOtpForPaymentScreen"); +const _log = LOG.extend("NumberAndOtpForPaymentScreen"); const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps< "numberAndOtpForPaymentScreen" -> = ({ navigation }) => { - console.debug("NumberAndOtpForPaymentScreen"); +> = ({ navigation, route }) => { return ( - - - - - - navigation.goBack()} /> - - - Montant à payer - - 78000 - - - - - {}} paymentMethod={"OM"} /> - - - - - -