diff --git a/App.tsx b/App.tsx index f44b31b..90395cb 100644 --- a/App.tsx +++ b/App.tsx @@ -1,12 +1,25 @@ -import { StatusBar } from "expo-status-bar"; -import { StyleSheet, Text, View } from "react-native"; +import { UserAuthenticationContextProvider } from "@/contexts/UserAuthenticationContext"; +import UnloggedUserStackNavigation from "@/navigations/UnloggedUserStackNavigation"; +import theme from "@/themes/Theme"; +import { NavigationContainer } from "@react-navigation/native"; +import { ThemeProvider } from "@shopify/restyle"; +import { StyleSheet } from "react-native"; export default function App() { return ( - - Open up App.tsx to start working on your app! - - + + + + {/* */} + {/* + + + */} + + {/* */} + + + ); } @@ -18,3 +31,5 @@ const styles = StyleSheet.create({ justifyContent: "center", }, }); + +const NavigatonRenderer = () => {}; diff --git a/README.md b/README.md index df89b73..f2271a0 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,12 @@ -

+ +![TanStack Query Header](./media/beasy_banner.png) -![Node.js Version](https://img.shields.io/badge/Node.js-v18.18.2-green) ![Expo Version](https://img.shields.io/badge/Expo-v50.0.14-blue) +![Node.js Version](https://img.shields.io/badge/Node.js-v18.18.2-green) ![Expo Version](https://img.shields.io/badge/Expo-v50.0.14-blue) ![React Native](https://img.shields.io/badge/React_Native-v0.73.6-blue) ![ReactJS](https://img.shields.io/badge/React-v18.2.0-blue) ## B-EASY @@ -17,37 +18,25 @@ Que vous disposiez d'un site Internet ou non, vous pouvez accepter les paiements ## Mobile Application Project -The integrated payment platform is a space for the sale of goods and services to the general public. To simplify the process of accepting payments, we decided to develop a mobile app using [Expo](https://docs.expo.dev/). +Le système de paiement intégré est un espace pour la vente de biens et de services au public général. Pour simplifier le processus d'acceptation des paiements, nous avons décidé de développer une application mobile en utilisant [Expo](https://docs.expo.dev/). -Expo is a framework that allows us to build native mobile apps using [React Native](https://reactnative.dev/). It provides a fast and efficient development environment, with access to a wide range of native APIs. +Expo est un framework qui nous permet de développer des applications mobiles natives en utilisant [React Native](https://reactnative.dev/). Il nous offre un environnement de développement rapide et efficace, avec accès à une grande variété d'APIs natives. -By using Expo, we can avoid the need for a native build process and the associated complexity that comes with it. This allows us to focus more on developing the app's features and user experience, rather than dealing with platform-specific issues. +En utilisant Expo, nous évitons la nécessité d'un processus de build natif et de la complexité associée à celui-ci. Cela nous permet de nous concentrer davantage sur le développement des fonctionnalités et de l'expérience utilisateur de l'application, plutôt que de nous occuper des problèmes spécifiques à la plateforme. ## Installation To install and run this application locally, follow these steps: -1. Clone the repository. -2. Install Node.js version 18 or higher. You can download it from the official website: [Node.js](https://nodejs.org/). -3. Install [Yarn package manager](https://yarnpkg.com/). You can install it by running the following command: `npm install -g yarn` -4. Install the project dependencies by running the following command: `yarn install` -5. Start the Expo development server by running the following command: `yarn start` -6. Open the Expo development app on your mobile device or emulator and scan the QR code displayed in the terminal. +1. Cloner le dépot. +2. Installer Node.js version 18 ou plus. Site officiel : [Node.js](https://nodejs.org/). +3. Installer [Yarn package manager](https://yarnpkg.com/). Utiliser la commande : `npm install -g yarn` +4. Installer les dependences du projet avec la commande : `yarn install` +5. Demarrer le serveur de developpement Expo avec la commande : `yarn start` +6. Ouvrir l'application Expo sur votre emulateur ou appareil et scanner le code QR afficher dans votre terminal. -## Contributing - -If you'd like to contribute to this project, please follow these guidelines: - -1. ... -2. ... - ## License -This project is a private and proprietary project of [Barnoin Informatique](http://barnoininformatique.ci/). Any use or distribution of this project outside of the company is strictly prohibited and considered fraud. - - -## Contact - -For any questions or inquiries, please contact ... \ No newline at end of file +Projet privé et proprietaire de l'entreprise [Barnoin Informatique](http://barnoininformatique.ci/). Toutes utulisation ou distribution sans permission explicite est strictement interdit et considéré comme fraude. diff --git a/app.json b/app.json index 838969d..35ad2a2 100644 --- a/app.json +++ b/app.json @@ -4,12 +4,12 @@ "slug": "beasy-mobile", "version": "1.0.0", "orientation": "portrait", - "icon": "./assets/icon.png", + "icon": "./assets/beasy_icon.png", "userInterfaceStyle": "light", "splash": { - "image": "./assets/splash.png", - "resizeMode": "contain", - "backgroundColor": "#ffffff" + "image": "./assets/beasy_splash.png", + "resizeMode": "cover", + "backgroundColor": "#00875A" }, "assetBundlePatterns": ["**/*"], "ios": { diff --git a/assets/background_content_white.png b/assets/background_content_white.png new file mode 100644 index 0000000..4c396b4 Binary files /dev/null and b/assets/background_content_white.png differ diff --git a/assets/background_content_white2.png b/assets/background_content_white2.png new file mode 100644 index 0000000..bc6b1cf Binary files /dev/null and b/assets/background_content_white2.png differ diff --git a/assets/balance_container.png b/assets/balance_container.png new file mode 100644 index 0000000..f39cc7c Binary files /dev/null and b/assets/balance_container.png differ diff --git a/assets/beasy_background.png b/assets/beasy_background.png new file mode 100644 index 0000000..9c750af Binary files /dev/null and b/assets/beasy_background.png differ diff --git a/assets/beasy_default.png b/assets/beasy_default.png new file mode 100644 index 0000000..78eee56 Binary files /dev/null and b/assets/beasy_default.png differ diff --git a/assets/beasy_icon.png b/assets/beasy_icon.png new file mode 100644 index 0000000..7458734 Binary files /dev/null and b/assets/beasy_icon.png differ diff --git a/assets/beasy_splash.png b/assets/beasy_splash.png new file mode 100644 index 0000000..ec2d743 Binary files /dev/null and b/assets/beasy_splash.png differ diff --git a/assets/logo_beasy.png b/assets/logo_beasy.png new file mode 100644 index 0000000..c3b837a Binary files /dev/null and b/assets/logo_beasy.png differ diff --git a/assets/operators/moov_money.png b/assets/operators/moov_money.png new file mode 100644 index 0000000..6b11bb9 Binary files /dev/null and b/assets/operators/moov_money.png differ diff --git a/assets/operators/mtn_money.png b/assets/operators/mtn_money.png new file mode 100644 index 0000000..e1f1d5e Binary files /dev/null and b/assets/operators/mtn_money.png differ diff --git a/assets/operators/orange_money.png b/assets/operators/orange_money.png new file mode 100644 index 0000000..2054852 Binary files /dev/null and b/assets/operators/orange_money.png differ diff --git a/assets/operators/visa_card.png b/assets/operators/visa_card.png new file mode 100644 index 0000000..e5fa54a Binary files /dev/null and b/assets/operators/visa_card.png differ diff --git a/assets/operators/wave_money.png b/assets/operators/wave_money.png new file mode 100644 index 0000000..4f2fc73 Binary files /dev/null and b/assets/operators/wave_money.png differ diff --git a/assets/payment_processing.png b/assets/payment_processing.png new file mode 100644 index 0000000..e051963 Binary files /dev/null and b/assets/payment_processing.png differ diff --git a/biome.json b/biome.json index 86b2b92..f8103ba 100644 --- a/biome.json +++ b/biome.json @@ -17,6 +17,10 @@ "enabled": true, "rules": { "recommended": true, + "correctness": { + "noUnusedImports": "warn", + "noUnusedVariables": "warn" + }, "complexity": { "noExcessiveCognitiveComplexity": "error" }, diff --git a/media/beasy_banner.png b/media/beasy_banner.png new file mode 100644 index 0000000..4964612 Binary files /dev/null and b/media/beasy_banner.png differ diff --git a/package.json b/package.json index 808118e..145275c 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,16 @@ "prepare": "husky" }, "dependencies": { + "@react-navigation/bottom-tabs": "^7.0.0-alpha.22", + "@react-navigation/native": "^7.0.0-alpha.18", + "@react-navigation/native-stack": "^7.0.0-alpha.20", + "@shopify/restyle": "^2.4.4", "expo": "~50.0.14", "expo-status-bar": "~1.11.1", "react": "18.2.0", - "react-native": "0.73.6" + "react-native": "0.73.6", + "react-native-safe-area-context": "4.8.2", + "react-native-screens": "~3.29.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/components/BalanceContainer.tsx b/src/components/BalanceContainer.tsx new file mode 100644 index 0000000..69c23b9 --- /dev/null +++ b/src/components/BalanceContainer.tsx @@ -0,0 +1,40 @@ +import Box from "@components/bases/Box"; +import Text from "@components/bases/Text"; +import { images } from "@styles/Commons"; +import { Image } from "react-native"; + +type Props = { balance: number; label: string }; + +const BalanceContainer = ({ label, balance }: Props) => { + return ( + + + + + + + + {balance} + + {label} + + + ); +}; + +export default BalanceContainer; diff --git a/src/components/BeasyLogoIcon.tsx b/src/components/BeasyLogoIcon.tsx new file mode 100644 index 0000000..63edfd3 --- /dev/null +++ b/src/components/BeasyLogoIcon.tsx @@ -0,0 +1,12 @@ +import Box from "@components/bases/Box"; +import { images } from "@styles/Commons"; +import { Image } from "react-native"; +const BeasyLogoIcon = () => { + return ( + + + + ); +}; + +export default BeasyLogoIcon; diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..47faf3e --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,24 @@ +import type { BoxProps, VariantProps } from "@shopify/restyle"; +import type { Theme } from "@themes/Theme"; +import { TouchableOpacity } from "react-native"; +import ButtonBase from "./bases/ButtonBase"; +import Text from "./bases/Text"; + +type Props = BoxProps & + VariantProps & + VariantProps & { + label: string; + onPress: () => void; + }; + +const Button = ({ onPress, label, textVariants, variant, ...rest }: Props) => { + return ( + + + {label} + + + ); +}; + +export default Button; diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 0000000..053cbae --- /dev/null +++ b/src/components/Card.tsx @@ -0,0 +1,14 @@ +import { type BoxProps, type VariantProps, createRestyleComponent } from "@shopify/restyle"; +import type { Theme } from "@themes/Theme"; +import { cardVariants } from "@themes/Variants"; +import Box from "./bases/Box"; + +const Card = createRestyleComponent< + VariantProps & + BoxProps & { + children: React.ReactNode; + }, + Theme +>([cardVariants], Box); + +export default Card; diff --git a/src/components/ContainerBorderTopCurved.tsx b/src/components/ContainerBorderTopCurved.tsx new file mode 100644 index 0000000..faa1c2b --- /dev/null +++ b/src/components/ContainerBorderTopCurved.tsx @@ -0,0 +1,45 @@ +import { containers } from "@styles/Commons"; +import { useEffect } from "react"; +import { Animated, Dimensions } from "react-native"; +import Box from "./bases/Box"; + +type Props = { children: React.ReactNode }; +const ContainerBorderTopCurved = ({ children }: Props) => { + const animated = new Animated.Value(0); + + useEffect(() => { + Animated.spring(animated, { + toValue: 1, + useNativeDriver: true, + }).start(); + }, [animated]); + + return ( + + + {children} + + + ); +}; + +export default ContainerBorderTopCurved; diff --git a/src/components/GoBackIconButton.tsx b/src/components/GoBackIconButton.tsx new file mode 100644 index 0000000..05033b5 --- /dev/null +++ b/src/components/GoBackIconButton.tsx @@ -0,0 +1,18 @@ +import Box from "@components/bases/Box"; +import { Ionicons } from "@expo/vector-icons"; +import { TouchableOpacity } from "react-native"; + +type Props = { + onPress: () => void; +}; +const GoBackIconButton = ({ onPress }: Props) => { + return ( + + + + + + ); +}; + +export default GoBackIconButton; diff --git a/src/components/Input.tsx b/src/components/Input.tsx new file mode 100644 index 0000000..1750831 --- /dev/null +++ b/src/components/Input.tsx @@ -0,0 +1,24 @@ +import type { VariantProps } from "@shopify/restyle"; +import type { Theme } from "@themes/Theme"; +import { TextInput } from "react-native"; +import type { TextInputProps } from "react-native"; +import Box from "./bases/Box"; +import Text from "./bases/Text"; + +type Props = TextInputProps & + VariantProps & { + label: string; + }; + +const Input = ({ label, textVariants, ...rest }: Props) => { + return ( + + {label} + + + + + ); +}; + +export default Input; diff --git a/src/components/NotificationIconButton.tsx b/src/components/NotificationIconButton.tsx new file mode 100644 index 0000000..7a49a63 --- /dev/null +++ b/src/components/NotificationIconButton.tsx @@ -0,0 +1,34 @@ +import Box from "@components/bases/Box"; +import { Ionicons } from "@expo/vector-icons"; +const NotificationIconButton = () => { + return ( + + + + + + + ); +}; + +export default NotificationIconButton; diff --git a/src/components/PaymentOption.tsx b/src/components/PaymentOption.tsx new file mode 100644 index 0000000..f13016c --- /dev/null +++ b/src/components/PaymentOption.tsx @@ -0,0 +1,90 @@ +import { images } from "@styles/Commons"; +import { Image, TouchableOpacity } from "react-native"; +import Box from "./bases/Box"; + +export enum PaymentMethods { + OrangeMoney = 1, + MtnMoney = 2, + MoobMoney = 3, + WaveMoney = 4, + VisaCard = 5, +} + +type PaymentOptions = "OrangeMoney" | "MtnMoney" | "MoovMoney" | "WaveMoney" | "VisaCard"; + +type Props = { + onPress: () => void; + paymentMethod: PaymentOptions; +}; + +const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ); +}; + +const OrangeMoney = () => { + return ( + + + + ); +}; + +const MtnMoney = () => { + return ( + + + + ); +}; + +const MoovMoney = () => { + return ( + + + + ); +}; + +const WaveMoney = () => { + return ( + + + + ); +}; + +const VisaCard = () => { + return ( + + + + ); +}; + +const PaymentOption = ({ onPress, paymentMethod }: Props) => { + return ( + + {paymentMethod === "OrangeMoney" && } + {paymentMethod === "MtnMoney" && } + {paymentMethod === "MoovMoney" && } + {paymentMethod === "WaveMoney" && } + {paymentMethod === "VisaCard" && } + + ); +}; + +export default PaymentOption; diff --git a/src/components/backgrounds/BackgroundDefault.tsx b/src/components/backgrounds/BackgroundDefault.tsx new file mode 100644 index 0000000..93c36e5 --- /dev/null +++ b/src/components/backgrounds/BackgroundDefault.tsx @@ -0,0 +1,20 @@ +import { containers, images } from "@styles/Commons"; +import { ImageBackground, View } from "react-native"; + +type Props = { children: React.ReactNode }; + +const BackgroundDefault = ({ children }: Props) => { + return ( + + + {children} + + + ); +}; + +export default BackgroundDefault; diff --git a/src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx b/src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx new file mode 100644 index 0000000..12a8070 --- /dev/null +++ b/src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx @@ -0,0 +1,20 @@ +import { containers, images } from "@styles/Commons"; +import { ImageBackground, View } from "react-native"; + +type Props = { children: React.ReactNode }; + +const BackgroundGreenWhiteContentArea = ({ children }: Props) => { + return ( + + + {children} + + + ); +}; + +export default BackgroundGreenWhiteContentArea; diff --git a/src/components/bases/Box.tsx b/src/components/bases/Box.tsx new file mode 100644 index 0000000..08db90c --- /dev/null +++ b/src/components/bases/Box.tsx @@ -0,0 +1,6 @@ +import type { Theme } from "@/themes/Theme"; +import { createBox } from "@shopify/restyle"; + +const Box = createBox(); + +export default Box; diff --git a/src/components/bases/ButtonBase.tsx b/src/components/bases/ButtonBase.tsx new file mode 100644 index 0000000..87885db --- /dev/null +++ b/src/components/bases/ButtonBase.tsx @@ -0,0 +1,14 @@ +import { type BoxProps, type VariantProps, createRestyleComponent } from "@shopify/restyle"; +import type { Theme } from "@themes/Theme"; +import { buttonVariants } from "@themes/Variants"; +import Box from "./Box"; + +const ButtonBase = createRestyleComponent< + VariantProps & + BoxProps & { + children: React.ReactNode; + }, + Theme +>([buttonVariants], Box); + +export default ButtonBase; diff --git a/src/components/bases/Text.tsx b/src/components/bases/Text.tsx new file mode 100644 index 0000000..ad64fae --- /dev/null +++ b/src/components/bases/Text.tsx @@ -0,0 +1,6 @@ +import type { Theme } from "@/themes/Theme"; +import { createText } from "@shopify/restyle"; + +const Text = createText(); + +export default Text; diff --git a/src/contexts/UserAuthenticationContext.tsx b/src/contexts/UserAuthenticationContext.tsx new file mode 100644 index 0000000..8387feb --- /dev/null +++ b/src/contexts/UserAuthenticationContext.tsx @@ -0,0 +1,27 @@ +import { createContext, useContext, useState } from "react"; + +export interface UserAuthenticationContextProps { + isAuthenticated: boolean; + setIsAuthenticated: React.Dispatch>; +} + +export const UserAuthenticationContext = createContext({ + isAuthenticated: false, + setIsAuthenticated: () => {}, +}); + +export const UserAuthenticationContextProvider = ({ children }: { children: React.ReactNode }) => { + const [isAuthenticated, setIsAuthenticated] = useState(false); + + return ( + + {children} + + ); +}; + +export const useUserAuthenticationContext = () => { + return useContext(UserAuthenticationContext); +}; diff --git a/src/navigations/BottomTabs.tsx b/src/navigations/BottomTabs.tsx new file mode 100644 index 0000000..b651222 --- /dev/null +++ b/src/navigations/BottomTabs.tsx @@ -0,0 +1,95 @@ +import { Entypo } from "@expo/vector-icons"; +import { FontAwesome } from "@expo/vector-icons"; +import { Ionicons } from "@expo/vector-icons"; +import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; +import { useTheme } from "@shopify/restyle"; +// import palette +import type { Theme } from "@themes/Theme"; +import { View } from "react-native"; +import Text from "../components/bases/Text"; +import PaymentStackNavigator from "./PaymentStackNavigation"; +const Tab = createBottomTabNavigator(); + +export const BottomTabs = () => { + const theme = useTheme(); + + return ( + + ( + + ), + tabBarActiveTintColor: theme.colors.secondary, + }} + /> + ( + + ), + tabBarActiveTintColor: theme.colors.secondary, + }} + /> + ( + + ), + tabBarActiveTintColor: theme.colors.secondary, + }} + /> + ( + + ), + tabBarActiveTintColor: theme.colors.secondary, + }} + /> + + ); +}; + +const HomeScreen = () => { + return ( + + Home! + + ); +}; + +const Transactions = () => { + return ( + + Transactions! + + ); +}; + +const SettingsScreen = () => { + return ( + + Settings! + + ); +}; + +const ProfileScreen = () => { + return ( + + Profile! + + ); +}; diff --git a/src/navigations/InitialNavigationHandler.tsx b/src/navigations/InitialNavigationHandler.tsx new file mode 100644 index 0000000..5562e4d --- /dev/null +++ b/src/navigations/InitialNavigationHandler.tsx @@ -0,0 +1,11 @@ +import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext"; +import UnloggedUserStackNavigation from "./UnloggedUserStackNavigation"; + +const InitialNavigationHandler = () => { + const { isAuthenticated } = useUserAuthenticationContext(); + console.log("isAuthenticated", isAuthenticated); + + return ; +}; + +export default InitialNavigationHandler; diff --git a/src/navigations/PaymentStackNavigation.tsx b/src/navigations/PaymentStackNavigation.tsx new file mode 100644 index 0000000..5bc4ba4 --- /dev/null +++ b/src/navigations/PaymentStackNavigation.tsx @@ -0,0 +1,28 @@ +import { createNativeStackNavigator } from "@react-navigation/native-stack"; +import HomePageWithPaymentOptions from "@screens/HomePageWithPaymentOptions"; +import NumberAndOtpForPaymentScreen from "@screens/NumberAndOtpForPaymentScreen"; +import PaymentAmountInputScreen from "@screens/PaymentAmountInputScreen"; +import type { PaymentStackParamList } from "./Types"; + +const Stack = createNativeStackNavigator(); + +const PaymentStackNavigator = () => { + return ( + + + + + + ); +}; + +export default PaymentStackNavigator; diff --git a/src/navigations/Types.ts b/src/navigations/Types.ts new file mode 100644 index 0000000..ee2a930 --- /dev/null +++ b/src/navigations/Types.ts @@ -0,0 +1,31 @@ +import type { NativeStackScreenProps } from "@react-navigation/native-stack"; + +export type PaymentStackParamList = { + homePageWithPaymentOptions: undefined; + numberAndOtpForPaymentScreen: undefined; + paymentAmountInputScreen: undefined; + homeUserNotLoggedIn: undefined; + userLoginScreen: undefined; +}; + +export type PaymentStackScreenProps = NativeStackScreenProps< + PaymentStackParamList, + T, + "PaymentStackParamList" +>; + +export type PaymentStackScreenComponentProps = React.FC< + PaymentStackScreenProps +>; + +export type UnloggedUserStackParamList = { + homeUserNotLoggedIn: undefined; + userLoginScreen: undefined; + bottomTabs: undefined; +}; + +export type UnloggedUserStackScreenProps = + NativeStackScreenProps; + +export type UnloggedUserStackScreenComponentProps = + React.FC>; diff --git a/src/navigations/UnloggedUserStackNavigation.tsx b/src/navigations/UnloggedUserStackNavigation.tsx new file mode 100644 index 0000000..88fdb5a --- /dev/null +++ b/src/navigations/UnloggedUserStackNavigation.tsx @@ -0,0 +1,22 @@ +import { createNativeStackNavigator } from "@react-navigation/native-stack"; +import HomeUserNotLoggedIn from "@screens/HomeUserNotLoggedIn"; +import UserLoginScreen from "@screens/UserLoginScreen"; +import { BottomTabs } from "./BottomTabs"; +import type { UnloggedUserStackParamList } from "./Types"; + +const Stack = createNativeStackNavigator(); + +const UnloggedUserStackNavigation = () => { + return ( + + + + + + ); +}; + +export default UnloggedUserStackNavigation; diff --git a/src/screens/HomePageWithPaymentOptions.tsx b/src/screens/HomePageWithPaymentOptions.tsx new file mode 100644 index 0000000..1e74825 --- /dev/null +++ b/src/screens/HomePageWithPaymentOptions.tsx @@ -0,0 +1,96 @@ +import type { PaymentStackScreenComponentProps } from "@/navigations/Types"; +import BalanceContainer from "@components/BalanceContainer"; +import BeasyLogoIcon from "@components/BeasyLogoIcon"; +import NotificationIconButton from "@components/NotificationIconButton"; +import PaymentOption from "@components/PaymentOption"; +import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea"; +import Box from "@components/bases/Box"; +import Text from "@components/bases/Text"; +import { Dimensions } from "react-native"; +import { SafeAreaView } from "react-native-safe-area-context"; + +const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> = + ({ navigation }) => { + return ( + + + + + + + + + + + + + + Méthode de paiement + + + + + + navigation.navigate("paymentAmountInputScreen") + } + paymentMethod={"OrangeMoney"} + /> + + + + navigation.navigate("paymentAmountInputScreen") + } + paymentMethod={"MtnMoney"} + /> + + + + + + navigation.navigate("paymentAmountInputScreen") + } + paymentMethod={"MoovMoney"} + /> + + + + navigation.navigate("paymentAmountInputScreen") + } + paymentMethod={"WaveMoney"} + /> + + + + navigation.navigate("paymentAmountInputScreen")} + paymentMethod={"VisaCard"} + /> + + + + + + ); + }; + +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} + + ); +}; diff --git a/src/screens/HomeUserNotLoggedIn.tsx b/src/screens/HomeUserNotLoggedIn.tsx new file mode 100644 index 0000000..cb67422 --- /dev/null +++ b/src/screens/HomeUserNotLoggedIn.tsx @@ -0,0 +1,69 @@ +import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext"; +import type { UnloggedUserStackScreenComponentProps } from "@/navigations/Types"; +import Button from "@components/Button"; +import Box from "@components/bases/Box"; +import Text from "@components/bases/Text"; +import { Image, StyleSheet } from "react-native"; +const HomeUserNotLoggedIn: UnloggedUserStackScreenComponentProps<"homeUserNotLoggedIn"> = ({ + navigation, +}) => { + const { isAuthenticated } = useUserAuthenticationContext(); + + if (isAuthenticated) { + navigation.replace("bottomTabs"); + } + + return ( + + + + + + + Acceptez des paiements en magasin et en ligne et recevez votre argent en + quelques secondes + + +