From b745724997af403c0cb29d0d6841f381a65dc898 Mon Sep 17 00:00:00 2001 From: G Date: Fri, 5 Sep 2025 16:39:24 +0000 Subject: [PATCH] refactor: navigations flow. planning for screens to take the full object instead of selective properties. This is to avoid basic crashes that may happen when one piece of data is missing through the navigation. and some biome formatting. refactor: navigations flow. planning for screens to take the full object instead of selective properties. This is to avoid basic crashes that may happen when one piece of data is missing through the navigation. Some files where impacted so changes where applied there too. --- src/hooks/useOrangeMoney.tsx | 24 +++++++++++------------- src/hooks/useWave.tsx | 26 +++++++++++++------------- src/navigations/AppMainStackNavigator.tsx | 2 +- src/navigations/PaymentStackNavigation.tsx | 2 +- src/navigations/Types.ts | 38 -------------------------------------- src/navigations/types.ts | 41 +++++++++++++++++++++++++++++++++++++++++ src/screens/HomePageWithPaymentOptions.tsx | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------- src/screens/HomeUserNotLoggedIn.tsx | 2 +- src/screens/NumberAndOtpForPaymentScreen.tsx | 112 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------- src/screens/PaymentResultScreen.tsx | 4 ++-- src/screens/UserLoginScreen.tsx | 2 +- src/screens/WaveQrCodePaymentScreen.tsx | 2 +- 12 files changed, 202 insertions(+), 231 deletions(-) delete mode 100644 src/navigations/Types.ts create mode 100644 src/navigations/types.ts 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 deleted file mode 100644 index f331d6b..0000000 --- a/src/navigations/Types.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { PaymentCode } from "@/utils/requests/types"; -import type { IwaveStarterRespone } from "@/utils/requests/wavePayment"; -import type { NativeStackScreenProps } from "@react-navigation/native-stack"; - -export type IpaymentStackNavigator = { - homePageWithPaymentOptions: undefined; - numberAndOtpForPaymentScreen: undefined; - paymentAmountInputScreen: { - paymentType: PaymentCode; - }; -}; - -export type PaymentStackScreenProps = - NativeStackScreenProps; - -export type PaymentStackScreenComponentProps = React.FC< - PaymentStackScreenProps ->; - -export type ImainStackNavigator = { - homeUserNotLoggedIn: undefined; - userLoginScreen: undefined; - appBottomTabsNavigator: undefined; - paymentResultScreen: undefined; - waveQrCodePaymentScreen: { - data: IwaveStarterRespone; - }; -}; - -export type MainStackScreenProps = NativeStackScreenProps< - ImainStackNavigator, - T, - "ImainStackNavigator" ->; - -export type MainStackScreenComponentProps = React.FC< - MainStackScreenProps ->; diff --git a/src/navigations/types.ts b/src/navigations/types.ts new file mode 100644 index 0000000..8d275b1 --- /dev/null +++ b/src/navigations/types.ts @@ -0,0 +1,41 @@ +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: { + paymentType: PaymentType; + amount: number; + }; + paymentAmountInputScreen: { + paymentType: PaymentType; + }; +}; + +export type PaymentStackScreenProps = + NativeStackScreenProps; + +export type PaymentStackScreenComponentProps = React.FC< + PaymentStackScreenProps +>; + +export type ImainStackNavigator = { + homeUserNotLoggedIn: undefined; + userLoginScreen: undefined; + appBottomTabsNavigator: undefined; + paymentResultScreen: undefined; + waveQrCodePaymentScreen: { + data: IwaveStarterRespone; + }; +}; + +export type MainStackScreenProps = NativeStackScreenProps< + ImainStackNavigator, + T, + "ImainStackNavigator" +>; + +export type MainStackScreenComponentProps = React.FC< + MainStackScreenProps +>; 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"} /> - - - - - -