Merge branch 'dev' into 'main'

App.tsx

-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 (
-		<View style={styles.container}>
-			<Text>Open up App.tsx to start working on your app!</Text>
+		<ThemeProvider theme={theme}>
+			<UserAuthenticationContextProvider>
+				<NavigationContainer>
+					{/* <View style={styles.container}> */}
+					{/* <SafeAreaProvider>
 					<StatusBar style="auto" />
-		</View>
+					<UserLoginScreen />
+				</SafeAreaProvider> */}
+					<UnloggedUserStackNavigation />
+					{/* </View> */}
+				</NavigationContainer>
+			</UserAuthenticationContextProvider>
+		</ThemeProvider>
 	);
 }
 
@@ -18,3 +31,5 @@ const styles = StyleSheet.create({
 		justifyContent: "center",
 	},
 });
+
+const NavigatonRenderer = () => {};

README.md

 
 
-<p align="center">
+<!-- <div align="center">
   <img src="https://via.placeholder.com/500x200" alt="B-EASY Banner">
-</p>
+</div> -->
+![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.

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": {

biome.json

@@ -17,6 +17,10 @@
 		"enabled": true,
 		"rules": {
 			"recommended": true,
+			"correctness": {
+				"noUnusedImports": "warn",
+				"noUnusedVariables": "warn"
+			},
 			"complexity": {
 				"noExcessiveCognitiveComplexity": "error"
 			},

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",

src/components/BalanceContainer.tsx

+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 (
+		<Box
+			position={"relative"}
+			width={300}
+			height={130}
+			alignItems={"center"}
+			justifyContent={"center"}
+		>
+			<Box
+				width={300}
+				height={130}
+				borderRadius={10}
+				overflow={"hidden"}
+				position={"absolute"}
+			>
+				<Image
+					source={require("../../assets/balance_container.png")}
+					style={images.cover}
+				/>
+			</Box>
+
+			<Box alignItems={"center"} gap={"s"}>
+				<Text fontSize={30} variant={"black"}>
+					{balance}
+				</Text>
+				<Text color={"gray"}>{label}</Text>
+			</Box>
+		</Box>
+	);
+};
+
+export default BalanceContainer;

src/components/BeasyLogoIcon.tsx

+import Box from "@components/bases/Box";
+import { images } from "@styles/Commons";
+import { Image } from "react-native";
+const BeasyLogoIcon = () => {
+	return (
+		<Box width={100} height={30}>
+			<Image source={require("../../assets/logo_beasy.png")} style={images.cover} />
+		</Box>
+	);
+};
+
+export default BeasyLogoIcon;

src/components/Button.tsx

+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<Theme> &
+	VariantProps<Theme, "buttonVariants"> &
+	VariantProps<Theme, "textVariants", "textVariants"> & {
+		label: string;
+		onPress: () => void;
+	};
+
+const Button = ({ onPress, label, textVariants, variant, ...rest }: Props) => {
+	return (
+		<TouchableOpacity onPress={onPress}>
+			<ButtonBase variant={variant} justifyContent="center" alignItems="center" {...rest}>
+				<Text variant={textVariants}>{label}</Text>
+			</ButtonBase>
+		</TouchableOpacity>
+	);
+};
+
+export default Button;

src/components/Card.tsx

+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<Theme, "cardVariants"> &
+		BoxProps<Theme> & {
+			children: React.ReactNode;
+		},
+	Theme
+>([cardVariants], Box);
+
+export default Card;

src/components/ContainerBorderTopCurved.tsx

+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 (
+		<Animated.View
+			style={[
+				containers.containerFull,
+				{
+					transform: [
+						{
+							translateY: animated.interpolate({
+								inputRange: [0, 1],
+								outputRange: [Dimensions.get("window").height, 0],
+							}),
+						},
+					],
+				},
+			]}
+		>
+			<Box
+				backgroundColor={"white"}
+				borderTopLeftRadius={30}
+				borderTopRightRadius={30}
+				style={containers.containerFull}
+			>
+				{children}
+			</Box>
+		</Animated.View>
+	);
+};
+
+export default ContainerBorderTopCurved;

src/components/GoBackIconButton.tsx

+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 (
+		<TouchableOpacity onPress={onPress}>
+			<Box width={40} height={40} alignItems={"center"} justifyContent={"center"}>
+				<Ionicons name="arrow-back" size={24} color="black" />
+			</Box>
+		</TouchableOpacity>
+	);
+};
+
+export default GoBackIconButton;

src/components/Input.tsx

+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<Theme, "textVariants", "textVariants"> & {
+		label: string;
+	};
+
+const Input = ({ label, textVariants, ...rest }: Props) => {
+	return (
+		<Box>
+			<Text variant={textVariants}>{label}</Text>
+			<Box backgroundColor={"lightGray"} height={50} borderRadius={10} my={"m"} p={"s"}>
+				<TextInput style={{ height: "100%" }} {...rest} />
+			</Box>
+		</Box>
+	);
+};
+
+export default Input;

src/components/NotificationIconButton.tsx

+import Box from "@components/bases/Box";
+import { Ionicons } from "@expo/vector-icons";
+const NotificationIconButton = () => {
+	return (
+		<Box width={40} height={40} position={"relative"}>
+			<Box
+				backgroundColor={"white"}
+				opacity={0.5}
+				p={"s"}
+				borderRadius={50}
+				style={{ height: "100%", width: "100%", position: "absolute" }}
+			/>
+			<Box
+				style={{
+					height: "100%",
+					width: "100%",
+					borderRadius: 50,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+				}}
+			>
+				<Ionicons
+					name="notifications-outline"
+					size={24}
+					color="white"
+					style={{ opacity: 1 }}
+				/>
+			</Box>
+		</Box>
+	);
+};
+
+export default NotificationIconButton;

src/components/PaymentOption.tsx

+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 (
+		<Box
+			height={50}
+			// p={"s"}
+			style={{ width: "100%", height: "100%" }}
+			overflow={"hidden"}
+			backgroundColor={"yellow"}
+			borderRadius={30}
+		>
+			{children}
+		</Box>
+	);
+};
+
+const OrangeMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image
+				source={require("../../assets/operators/orange_money.png")}
+				style={images.cover}
+			/>
+		</PaymentOptionContainer>
+	);
+};
+
+const MtnMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/mtn_money.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const MoovMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/moov_money.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const WaveMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/wave_money.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const VisaCard = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/visa_card.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const PaymentOption = ({ onPress, paymentMethod }: Props) => {
+	return (
+		<TouchableOpacity style={{ width: "100%", height: "100%" }} onPress={onPress}>
+			{paymentMethod === "OrangeMoney" && <OrangeMoney />}
+			{paymentMethod === "MtnMoney" && <MtnMoney />}
+			{paymentMethod === "MoovMoney" && <MoovMoney />}
+			{paymentMethod === "WaveMoney" && <WaveMoney />}
+			{paymentMethod === "VisaCard" && <VisaCard />}
+		</TouchableOpacity>
+	);
+};
+
+export default PaymentOption;

src/components/backgrounds/BackgroundDefault.tsx

+import { containers, images } from "@styles/Commons";
+import { ImageBackground, View } from "react-native";
+
+type Props = { children: React.ReactNode };
+
+const BackgroundDefault = ({ children }: Props) => {
+	return (
+		<View style={containers.containerFull}>
+			<ImageBackground
+				source={require("../../../assets/beasy_default.png")}
+				resizeMode="cover"
+				style={images.cover}
+			>
+				{children}
+			</ImageBackground>
+		</View>
+	);
+};
+
+export default BackgroundDefault;

src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx

+import { containers, images } from "@styles/Commons";
+import { ImageBackground, View } from "react-native";
+
+type Props = { children: React.ReactNode };
+
+const BackgroundGreenWhiteContentArea = ({ children }: Props) => {
+	return (
+		<View style={containers.containerFull}>
+			<ImageBackground
+				source={require("../../../assets/background_content_white2.png")}
+				resizeMode="cover"
+				style={images.cover}
+			>
+				{children}
+			</ImageBackground>
+		</View>
+	);
+};
+
+export default BackgroundGreenWhiteContentArea;

src/components/bases/Box.tsx

+import type { Theme } from "@/themes/Theme";
+import { createBox } from "@shopify/restyle";
+
+const Box = createBox<Theme>();
+
+export default Box;

src/components/bases/ButtonBase.tsx

+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<Theme, "buttonVariants"> &
+		BoxProps<Theme> & {
+			children: React.ReactNode;
+		},
+	Theme
+>([buttonVariants], Box);
+
+export default ButtonBase;

src/components/bases/Text.tsx

+import type { Theme } from "@/themes/Theme";
+import { createText } from "@shopify/restyle";
+
+const Text = createText<Theme>();
+
+export default Text;

src/contexts/UserAuthenticationContext.tsx

+import { createContext, useContext, useState } from "react";
+
+export interface UserAuthenticationContextProps {
+	isAuthenticated: boolean;
+	setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const UserAuthenticationContext = createContext<UserAuthenticationContextProps>({
+	isAuthenticated: false,
+	setIsAuthenticated: () => {},
+});
+
+export const UserAuthenticationContextProvider = ({ children }: { children: React.ReactNode }) => {
+	const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+	return (
+		<UserAuthenticationContext.Provider
+			value={{ isAuthenticated: isAuthenticated, setIsAuthenticated }}
+		>
+			{children}
+		</UserAuthenticationContext.Provider>
+	);
+};
+
+export const useUserAuthenticationContext = () => {
+	return useContext(UserAuthenticationContext);
+};

src/navigations/BottomTabs.tsx

+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<Theme>();
+
+	return (
+		<Tab.Navigator
+			initialRouteName="Acceuil"
+			screenOptions={{ headerShown: false, animation: "shift", tabBarHideOnKeyboard: true }}
+		>
+			<Tab.Screen
+				name="Acceuil"
+				component={PaymentStackNavigator}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<Entypo name="home" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+			<Tab.Screen
+				name="Transactions"
+				component={Transactions}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<FontAwesome name="exchange" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+			<Tab.Screen
+				name="Paramètres"
+				component={SettingsScreen}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<Ionicons name="settings-outline" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+			<Tab.Screen
+				name="Profile"
+				component={ProfileScreen}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<Ionicons name="person" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+		</Tab.Navigator>
+	);
+};
+
+const HomeScreen = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Home!</Text>
+		</View>
+	);
+};
+
+const Transactions = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Transactions!</Text>
+		</View>
+	);
+};
+
+const SettingsScreen = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Settings!</Text>
+		</View>
+	);
+};
+
+const ProfileScreen = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Profile!</Text>
+		</View>
+	);
+};

src/navigations/InitialNavigationHandler.tsx

+import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
+import UnloggedUserStackNavigation from "./UnloggedUserStackNavigation";
+
+const InitialNavigationHandler = () => {
+	const { isAuthenticated } = useUserAuthenticationContext();
+	console.log("isAuthenticated", isAuthenticated);
+
+	return <UnloggedUserStackNavigation />;
+};
+
+export default InitialNavigationHandler;

src/navigations/PaymentStackNavigation.tsx

+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<PaymentStackParamList>();
+
+const PaymentStackNavigator = () => {
+	return (
+		<Stack.Navigator
+			initialRouteName="homePageWithPaymentOptions"
+			screenOptions={{ headerShown: false }}
+		>
+			<Stack.Screen
+				name="homePageWithPaymentOptions"
+				component={HomePageWithPaymentOptions}
+			/>
+			<Stack.Screen
+				name="numberAndOtpForPaymentScreen"
+				component={NumberAndOtpForPaymentScreen}
+			/>
+			<Stack.Screen name="paymentAmountInputScreen" component={PaymentAmountInputScreen} />
+		</Stack.Navigator>
+	);
+};
+
+export default PaymentStackNavigator;

src/navigations/Types.ts

+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+export type PaymentStackParamList = {
+	homePageWithPaymentOptions: undefined;
+	numberAndOtpForPaymentScreen: undefined;
+	paymentAmountInputScreen: undefined;
+	homeUserNotLoggedIn: undefined;
+	userLoginScreen: undefined;
+};
+
+export type PaymentStackScreenProps<T extends keyof PaymentStackParamList> = NativeStackScreenProps<
+	PaymentStackParamList,
+	T,
+	"PaymentStackParamList"
+>;
+
+export type PaymentStackScreenComponentProps<T extends keyof PaymentStackParamList> = React.FC<
+	PaymentStackScreenProps<T>
+>;
+
+export type UnloggedUserStackParamList = {
+	homeUserNotLoggedIn: undefined;
+	userLoginScreen: undefined;
+	bottomTabs: undefined;
+};
+
+export type UnloggedUserStackScreenProps<T extends keyof UnloggedUserStackParamList> =
+	NativeStackScreenProps<UnloggedUserStackParamList, T, "UnloggedUserStackParamList">;
+
+export type UnloggedUserStackScreenComponentProps<T extends keyof UnloggedUserStackParamList> =
+	React.FC<UnloggedUserStackScreenProps<T>>;

src/navigations/UnloggedUserStackNavigation.tsx

+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<UnloggedUserStackParamList>();
+
+const UnloggedUserStackNavigation = () => {
+	return (
+		<Stack.Navigator
+			initialRouteName="homeUserNotLoggedIn"
+			screenOptions={{ headerShown: false }}
+		>
+			<Stack.Screen name="homeUserNotLoggedIn" component={HomeUserNotLoggedIn} />
+			<Stack.Screen name="userLoginScreen" component={UserLoginScreen} />
+			<Stack.Screen name="bottomTabs" component={BottomTabs} />
+		</Stack.Navigator>
+	);
+};
+
+export default UnloggedUserStackNavigation;

src/screens/HomePageWithPaymentOptions.tsx

+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 (
+			<BackgroundGreenWhiteContentArea>
+				<SafeAreaView>
+					<Box style={{ height: "100%" }}>
+						<Box
+							px={"l"}
+							flexDirection={"row"}
+							justifyContent={"space-between"}
+							alignItems={"center"}
+						>
+							<BeasyLogoIcon />
+							<NotificationIconButton />
+						</Box>
+						<Box height={150} alignItems={"center"} justifyContent={"center"}>
+							<BalanceContainer balance={78000} label="Total des ventes" />
+						</Box>
+						<Box flex={1} p={"l"}>
+							<Box height={100}>
+								<Text fontSize={20} fontWeight={"bold"}>
+									Méthode de paiement
+								</Text>
+							</Box>
+							<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"OrangeMoney"}
+									/>
+								</PaymentOptionContainer>
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"MtnMoney"}
+									/>
+								</PaymentOptionContainer>
+							</Box>
+							<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"MoovMoney"}
+									/>
+								</PaymentOptionContainer>
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"WaveMoney"}
+									/>
+								</PaymentOptionContainer>
+							</Box>
+							<PaymentOptionContainer>
+								<PaymentOption
+									onPress={() => navigation.navigate("paymentAmountInputScreen")}
+									paymentMethod={"VisaCard"}
+								/>
+							</PaymentOptionContainer>
+						</Box>
+					</Box>
+				</SafeAreaView>
+			</BackgroundGreenWhiteContentArea>
+		);
+	};
+
+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 (
+		<Box width={paymentOptionCardWidth} height={paymentOptionCardHeight}>
+			{children}
+		</Box>
+	);
+};

src/screens/HomeUserNotLoggedIn.tsx

+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 (
+		<Box style={style.container} p={"xl"} backgroundColor={"white"}>
+			<Box mt={"s"}>
+				<Box
+					height={300}
+					width={300}
+					backgroundColor={"primary"}
+					mb={"l"}
+					alignItems={"center"}
+					justifyContent={"center"}
+				>
+					<Image
+						source={require("../../assets/payment_processing.png")}
+						style={style.image}
+					/>
+				</Box>
+				<Text color={"gray"} fontSize={16} textAlign={"center"}>
+					Acceptez des paiements en magasin et en ligne et recevez votre argent en
+					quelques secondes
+				</Text>
+				<Box mt={"xl"}>
+					<Button
+						variant={"full"}
+						textVariants={"primary"}
+						label="Se connecter"
+						onPress={() => navigation.navigate("userLoginScreen")}
+					/>
+					<Button
+						variant={"clean"}
+						textVariants={"secondary"}
+						label="Creer un compte"
+						onPress={() => {}}
+					/>
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+const style = StyleSheet.create({
+	container: {
+		width: "100%",
+		height: "100%",
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	image: {
+		width: "100%",
+		height: "100%",
+	},
+});
+
+export default HomeUserNotLoggedIn;

src/screens/NumberAndOtpForPaymentScreen.tsx

+import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
+import BeasyLogoIcon from "@components/BeasyLogoIcon";
+import Button from "@components/Button";
+import GoBackIconButton from "@components/GoBackIconButton";
+import Input from "@components/Input";
+import PaymentOption from "@components/PaymentOption";
+import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
+import Box from "@components/bases/Box";
+import Text from "@components/bases/Text";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps<
+	"numberAndOtpForPaymentScreen"
+> = ({ navigation }) => {
+	return (
+		<BackgroundGreenWhiteContentArea>
+			<SafeAreaView>
+				<Box style={{ height: "100%", width: "100%" }}>
+					<Box
+						px={"l"}
+						flexDirection={"row"}
+						justifyContent={"space-between"}
+						alignItems={"center"}
+					>
+						<BeasyLogoIcon />
+						<GoBackIconButton onPress={() => navigation.goBack()} />
+					</Box>
+					<Box height={122} alignItems={"center"} justifyContent={"center"}>
+						<Text color={"white"}>Montant à payer</Text>
+						<Text color={"white"} fontSize={30}>
+							78000
+						</Text>
+					</Box>
+					<Box p={"l"}>
+						<Box width={100} height={70} mb={"l"}>
+							<PaymentOption onPress={() => {}} paymentMethod={"OrangeMoney"} />
+						</Box>
+						<Box mb={"l"}>
+							<Input
+								label="Entrez le numero"
+								keyboardType="numeric"
+								textVariants={"black"}
+							/>
+							<Input label="Code OTP" keyboardType="numeric" textVariants={"black"} />
+						</Box>
+						<Button
+							onPress={() => {}}
+							variant={"full"}
+							textVariants={"primary"}
+							label="Paiement"
+						/>
+					</Box>
+				</Box>
+			</SafeAreaView>
+		</BackgroundGreenWhiteContentArea>
+	);
+};
+
+export default NumberAndOtpForPaymentScreen;

src/screens/PaymentAmountInputScreen.tsx

+import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
+import BalanceContainer from "@components/BalanceContainer";
+import BeasyLogoIcon from "@components/BeasyLogoIcon";
+import Button from "@components/Button";
+import GoBackIconButton from "@components/GoBackIconButton";
+import Input from "@components/Input";
+import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
+import Box from "@components/bases/Box";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
+	navigation,
+}) => {
+	return (
+		<BackgroundGreenWhiteContentArea>
+			<SafeAreaView>
+				<Box style={{ height: "100%", width: "100%" }}>
+					<Box
+						px={"l"}
+						flexDirection={"row"}
+						justifyContent={"space-between"}
+						alignItems={"center"}
+						mb={"l"}
+					>
+						<BeasyLogoIcon />
+						<GoBackIconButton onPress={() => navigation.goBack()} />
+					</Box>
+					<Box height={150} alignItems={"center"} justifyContent={"center"}>
+						<BalanceContainer balance={78000} label="Total des ventes" />
+					</Box>
+					<Box p={"l"} paddingTop={"x64"}>
+						<Box mb={"xl"}>
+							<Input
+								label="Entrez le montant"
+								autoFocus={true}
+								keyboardType="numeric"
+							/>
+						</Box>
+						<Button
+							onPress={() => navigation.navigate("numberAndOtpForPaymentScreen")}
+							variant={"full"}
+							textVariants={"primary"}
+							label="Confirmer"
+						/>
+					</Box>
+				</Box>
+			</SafeAreaView>
+		</BackgroundGreenWhiteContentArea>
+	);
+};
+
+export default PaymentAmountInputScreen;

src/screens/UserLoginScreen.tsx

+import type { UnloggedUserStackScreenComponentProps } from "@/navigations/Types";
+import Button from "@components/Button";
+import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
+import Input from "@components/Input";
+import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
+import Box from "@components/bases/Box";
+import Text from "@components/bases/Text";
+import { Fontisto } from "@expo/vector-icons";
+import { containers } from "@styles/Commons";
+import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen"> = ({
+	navigation,
+}) => {
+	const insets = useSafeAreaInsets();
+
+	return (
+		<BackgroundDefault>
+			<View style={[containers.containerFull, { paddingTop: insets.top }]}>
+				<KeyboardAvoidingView
+					behavior={Platform.OS === "ios" ? "height" : "height"}
+					style={{ flex: 1 }}
+				>
+					<Box style={{ height: "20%" }} px={"l"}>
+						<Box
+							px={"m"}
+							justifyContent={"space-between"}
+							flexDirection={"row"}
+							alignItems={"center"}
+						>
+							<TouchableOpacity onPress={() => navigation.goBack()}>
+								<Fontisto name="close-a" size={12} color="black" />
+							</TouchableOpacity>
+
+							<TouchableOpacity>
+								<Text>Mot de passe oublie ?</Text>
+							</TouchableOpacity>
+						</Box>
+					</Box>
+					<ContainerBorderTopCurved>
+						<Box p={"l"} paddingTop={"x100"} mb={"s"}>
+							<Box mb={"l"}>
+								<Text fontSize={40} fontWeight={"bold"} variant={"black"}>
+									Connexion
+								</Text>
+								<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
+							</Box>
+
+							<Box gap={"m"}>
+								<Input label="Email" />
+								<Input label="Mot de passe" secureTextEntry={true} />
+							</Box>
+						</Box>
+						<Box p={"s"}>
+							<Button
+								variant={"full"}
+								textVariants={"primary"}
+								label="Se connecter"
+								onPress={() => navigation.navigate("bottomTabs")}
+							/>
+							<Button
+								variant={"lightGray"}
+								textVariants={"black"}
+								label="Creer un compte"
+								onPress={() => {}}
+							/>
+						</Box>
+					</ContainerBorderTopCurved>
+				</KeyboardAvoidingView>
+			</View>
+		</BackgroundDefault>
+	);
+};
+
+export default UserLoginScreen;

src/styles/Commons.tsx

+import { StyleSheet } from "react-native";
+
+export const containers = StyleSheet.create({
+	fullScreenContentCentered: {
+		width: "100%",
+		height: "100%",
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	containerFull: {
+		width: "100%",
+		height: "100%",
+		flex: 1,
+	},
+	containerFlexUno: {
+		flex: 1,
+	},
+});
+
+export const images = StyleSheet.create({
+	cover: {
+		width: "100%",
+		height: "100%",
+	},
+});

src/themes/Theme.tsx

+import { createTheme } from "@shopify/restyle";
+
+const palette = {
+	purpleLight: "#8C6FF7",
+	purplePrimary: "#5A31F4",
+	purpleDark: "#3F22AB",
+
+	greenLight: "#56DCBA",
+	greenPrimary: "#0ECD9D",
+	greenDark: "#0A906E",
+
+	black: "#0B0B0B",
+	white: "#FFFFFF",
+	green: "#00875A",
+	lightGray: "#F4F5F7",
+	gray: "#747E98",
+	yellow: "#F4C44A",
+};
+
+const theme = createTheme({
+	colors: {
+		primary: palette.white,
+		secondary: palette.green,
+		tertiary: palette.yellow,
+		black: palette.black,
+		white: palette.white,
+		lightGray: palette.lightGray,
+		gray: palette.gray,
+		yellow: palette.yellow,
+	},
+	spacing: {
+		s: 8,
+		m: 16,
+		l: 24,
+		xl: 40,
+		x64: 64,
+		x72: 72,
+		x80: 80,
+		x100: 100,
+		x120: 120,
+		x140: 140,
+		x160: 160,
+		x180: 180,
+		x200: 200,
+		x220: 220,
+		x240: 240,
+		// full: "100%",
+	},
+	breakpoints: {
+		phone: 0,
+		tablet: 768,
+	},
+	textVariants: {
+		defaults: {
+			// We can define a default text variant here.
+			color: "gray",
+		},
+
+		header: {
+			fontWeight: "bold",
+			fontSize: 34,
+		},
+		body: {
+			fontSize: 16,
+			lineHeight: 24,
+		},
+		primary: {
+			color: "primary",
+		},
+		secondary: {
+			color: "secondary",
+		},
+		black: {
+			color: "black",
+		},
+		white: {
+			color: "white",
+		},
+		gray: {
+			color: "gray",
+		},
+		lightGray: {
+			color: "lightGray",
+		},
+	},
+	cardVariants: {
+		defaults: {
+			// We can define defaults for the variant here.
+			// This will be applied after the defaults passed to createVariant and before the variant defined below.
+		},
+		regular: {
+			// We can refer to other values in the theme here, and use responsive props
+			padding: {
+				phone: "s",
+				tablet: "m",
+			},
+		},
+		elevated: {
+			padding: {
+				phone: "s",
+				tablet: "m",
+			},
+			shadowColor: "black",
+			shadowOpacity: 0.5,
+			shadowOffset: { width: 10, height: 10 },
+			shadowRadius: 10,
+			elevation: 5,
+		},
+	},
+	buttonVariants: {
+		defaults: {
+			// We can define defaults for the variant here.
+		},
+		full: {
+			backgroundColor: "secondary",
+			color: "white",
+		},
+		clean: {
+			backgroundColor: "primary",
+			color: "secondary",
+		},
+		lightGray: {
+			backgroundColor: "lightGray",
+			color: "black",
+		},
+	},
+});
+
+export type Theme = typeof theme;
+export default theme;

src/themes/Variants.tsx

+import { createVariant } from "@shopify/restyle";
+import type { Theme } from "@themes/Theme";
+
+export const cardVariants = createVariant<Theme, "cardVariants">({
+	themeKey: "cardVariants",
+	defaults: {
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+		backgroundColor: "white",
+	},
+});
+
+export const buttonVariants = createVariant<Theme, "buttonVariants">({
+	themeKey: "buttonVariants",
+	defaults: {
+		backgroundColor: "primary",
+		color: "secondary",
+		height: 50,
+		borderRadius: 10,
+		margin: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+});
+
+export const textVariants = createVariant<Theme, "textVariants">({
+	themeKey: "textVariants",
+	defaults: {
+		fontSize: 16,
+		fontWeight: "normal",
+		color: "gray",
+	},
+});

tsconfig.json

 {
 	"extends": "expo/tsconfig.base",
 	"compilerOptions": {
-		"strict": true
+		"strict": true,
+		"baseUrl": ".",
+		"paths": {
+			"@screens/*": ["./src/screens/*"],
+			"@components/*": ["./src/components/*"],
+			"@themes/*": ["./src/themes/*"],
+			"@styles/*": ["./src/styles/*"],
+			"@hooks/*": ["./src/hooks/*"],
+			"@/*": ["./src/*"]
+		}
 	}
 }