reza added drawer

navigation/index.js

@@ -4,6 +4,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Entypo, FontAwesome, Ionicons } from "@expo/vector-icons";
 import OrderDetails from "../src/screens/OrderDetails";
+import OrdersFollowUp from "../src/screens/OrdersFollowUp";
 import { Dimensions } from "react-native";
 import Splash from "../src/screens/Splash";
 import Home from "../src/screens/Home";
@@ -47,11 +48,7 @@ const BottomTabNavigator = () => {
         component={AuthStackScreen}
         options={{
           tabBarIcon: ({ focused, color }) => (
-            <FontAwesome
-              name="user"
-              size={focused ? 27 : 23}
-              color={color}
-            />
+            <FontAwesome name="user" size={focused ? 27 : 23} color={color} />
           ),
         }}
       />
@@ -97,10 +94,14 @@ const BottomTabNavigator = () => {
 const HomeStack = createNativeStackNavigator();
 const HomeStackScreen = () => {
   return (
-    <HomeStack.Navigator screenOptions={{ headerShown: false }} initialRouteName="Home">
+    <HomeStack.Navigator
+      screenOptions={{ headerShown: false }}
+      initialRouteName="Home"
+    >
       <HomeStack.Screen name="Home" component={Home} />
       <HomeStack.Screen name="QR" component={QR} />
       <HomeStack.Screen name="Product" component={Product} />
+      <Stack.Screen name="Orders" component={OrderStackScreen} />
     </HomeStack.Navigator>
   );
 };
@@ -108,10 +109,14 @@ const HomeStackScreen = () => {
 const ProductsStack = createNativeStackNavigator();
 const ProductsStackScreen = () => {
   return (
-    <ProductsStack.Navigator screenOptions={{ headerShown: false }} initialRouteName="Products">
+    <ProductsStack.Navigator
+      screenOptions={{ headerShown: false }}
+      initialRouteName="Products"
+    >
       <ProductsStack.Screen name="Products" component={Products} />
       <ProductsStack.Screen name="QR" component={QR} />
       <ProductsStack.Screen name="Product" component={Product} />
+      <Stack.Screen name="Orders" component={OrderStackScreen} />
     </ProductsStack.Navigator>
   );
 };
@@ -119,7 +124,10 @@ const ProductsStackScreen = () => {
 const AuthStack = createNativeStackNavigator();
 const AuthStackScreen = () => {
   return (
-    <AuthStack.Navigator screenOptions={{ headerShown: false }} initialRouteName="Splash">
+    <AuthStack.Navigator
+      screenOptions={{ headerShown: false }}
+      initialRouteName="Splash"
+    >
       <AuthStack.Screen name="Splash" component={Splash} />
       <AuthStack.Screen name="Login" component={Login} />
       <AuthStack.Screen name="Otp" component={Otp} />
@@ -127,15 +135,30 @@ const AuthStackScreen = () => {
   );
 };
 
-const Stack = createNativeStackNavigator();
+const OrderStack = createNativeStackNavigator();
+const OrderStackScreen = () => {
+  return(
+    <OrderStack.Navigator
+      screenOptions={{ headerShown: false }}
+      initialRouteName="Orders"
+    >
+      <OrderStack.Screen name="Orders" component={OrdersFollowUp} />
+      <OrderStack.Screen name="Order" component={OrderDetails} />
+    </OrderStack.Navigator>
+  );
+}
 
-const Navigation = () => {
+const Stack = createNativeStackNavigator();
+const Navigation = ({ profile }) => {
   return (
     <NavigationContainer>
       <Stack.Navigator
-        initialRouteName="Root"
+        // initialRouteName="Root"
         screenOptions={{ headerShown: false }}
       >
+        <Stack.Screen name="Splash" component={Splash} />
+        <Stack.Screen name="Login" component={Login} />
+        <Stack.Screen name="Otp" component={Otp} />
         <Stack.Screen name="Root" component={BottomTabNavigator} />
       </Stack.Navigator>
     </NavigationContainer>

src/components/Drawer.js

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import {
+  View,
+  Platform,
+  UIManager,
+  Dimensions,
+  Pressable,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { Entypo, FontAwesome, Ionicons, AntDesign } from "@expo/vector-icons";
+import tw from "tailwind-rn";
+
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
+
+if (
+  Platform.OS === "android" &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const Drawer = ({ position, setBoxPosition }) => {
+  const [routes, setRoutes] = useState([
+    {
+      name: "صفحه اصلی",
+      route: "Home",
+      icon: <Ionicons name="home-outline" size={23} color={"#555555"} />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "فعال سازی",
+      route: "Activation",
+      icon: <AntDesign name="check" size={23} color={"#555555"} />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "پروفایل",
+      route: "Profile",
+      icon: <AntDesign name="profile" size={23} color={"#555555"} />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "واقعیت افزوده",
+      route: "AR",
+      icon: <Ionicons name="ios-glasses" size={23} color={"#555555"} />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "سفارشات",
+      route: "Orders",
+      icon: <Ionicons name="reorder-four" size={23} color={"#555555"} />,
+      toast: "",
+      message: "",
+    }
+  ]);
+  const navigation = useNavigation();
+  const Route = ({ route }) => {
+    return (
+      <TouchableOpacity
+        style={[
+          tw("w-full flex flex-row-reverse justify-start items-end items mt-6"),
+          {},
+        ]}
+        onPress={() => navigation.navigate(route.route)}
+      >
+        {route.icon}
+        <Text
+          style={[tw("mr-2"), { fontFamily: "regular", fontSize: width / 34 }]}
+        >
+          {route.name}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View
+      // onTouchStart={(e) => console.log(e.currentTarget._nativeTag)}
+      style={[
+        tw(`absolute z-50 top-0 flex flex-row justify-end `),
+        {
+          left: position,
+          width: width,
+          height: height,
+        },
+      ]}
+    >
+      <Pressable
+        onPress={() => setBoxPosition()}
+        style={[tw(`w-1/5 h-full ${position === "0%" ? "" : ""}`)]}
+      ></Pressable>
+      <View style={[tw("w-4/5 bg-white h-full flex flex-col px-4 pt-10")]}>
+        {routes.map((route, index) => (
+          <Route route={route} key={index} />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default Drawer;

src/components/Navbar.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import {
   Image,
   StyleSheet,
@@ -6,7 +6,9 @@ import {
   Pressable,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
+import { Ionicons } from "@expo/vector-icons";
 import tw from "tailwind-rn";
+import Drawer from "./Drawer";
 
 //colors
 import Color from "../constants/Colors";
@@ -17,8 +19,9 @@ import logoIcon from "../assets/icons/logo.png";
 import qrLightIcon from "../assets/icons/qr-light.png";
 import arLightIcon from "../assets/icons/ar-light.png";
 
-const Navbar = ({ notification }) => {
+const Navbar = ({ notification, back, setBoxPosition }) => {
   const navigation = useNavigation();
+
   const Button = useCallback(({ icon, route }) => {
     return (
       <Pressable
@@ -40,10 +43,10 @@ const Navbar = ({ notification }) => {
   return (
     <View
       style={tw(
-        "w-full flex flex-row-reverse justify-between h-16 bg-white items-center px-4 relative"
+        "w-full flex flex-row-reverse justify-between h-16 bg-white items-center px-0"
       )}
     >
-      <View style={tw("relative")}>
+      <Pressable style={tw("relative mr-4")} onPress={() => setBoxPosition()}>
         <Image
           source={hamburgerLightIcon}
           style={{ width: 29.5, height: 27 }}
@@ -55,9 +58,9 @@ const Navbar = ({ notification }) => {
             )}
           ></View>
         )}
-      </View>
+      </Pressable>
       <Pressable
-        onPress={() => navigation.navigate("خانه")}
+        onPress={() => navigation.navigate("Home")}
         style={tw("absolute right-1/2 top-1/2")}
       >
         <Image
@@ -71,7 +74,16 @@ const Navbar = ({ notification }) => {
           ]}
         />
       </Pressable>
-      <View style={tw("flex flex-row items-center")}>
+      <View style={tw("flex flex-row items-center ml-4")}>
+        {back && (
+          <Ionicons
+            name="arrow-back"
+            style={tw("mr-2")}
+            size={24}
+            color={"#196EC0"}
+            onPress={() => navigation.goBack()}
+          />
+        )}
         <Button icon={qrLightIcon} route={"QR"} />
         <Button icon={arLightIcon} route={"ar"} />
       </View>

src/screens/Home/components/Scroll.js

@@ -1,43 +1,60 @@
-import React from 'react';
+import React from "react";
 import {
   View,
   Image,
   Dimensions,
   TouchableOpacity,
   FlatList,
-} from 'react-native';
-import Header from '../components/Header';
-import tw from 'tailwind-rn';
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import Header from "../components/Header";
+import tw from "tailwind-rn";
 
-import {connect} from 'react-redux';
+import { connect } from "react-redux";
 
-import olum1Image from '../assets/olum1.png';
+import olum1Image from "../assets/olum1.png";
 
-const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
 
-function Scroll({products}) {
+function Scroll({ products }) {
   return (
-    <View style={[tw('flex flex-col px-3 mb-5')]}>
-      <Header title={'فروشگاه'} route={'Products'} />
+    <View style={[tw("flex flex-col px-3 mb-5")]}>
+      <Header title={"فروشگاه"} route={"Products"} />
       <FlatList
         horizontal={true}
         inverted={true}
-        style={[tw('flex flex-col-reverse mt-3'), {height: 245}]}
-        data={products}
-        renderItem={({product, index}) => (
-          <Product product={product} position={Number(index)} key={index} />
-        )}
+        style={[tw("mt-3 pb-2")]}
+        data={[{}]}
+        renderItem={({}) => <Box products={products} />}
+        keyExtractor={(item) => item.id}
       />
     </View>
   );
 }
 
-const Product = ({product, position}) => {
+const Box = ({ products }) => {
+  return (
+    <View
+      style={[
+        tw("flex flex-col flex-wrap-reverse justify-between"),
+        { height: 245, direction: "rtl" },
+      ]}
+    >
+      {products.map((item, index) => (
+        <Product product={item} position={Number(item.id)} key={index} />
+      ))}
+    </View>
+  );
+};
+
+const Product = ({ product, position }) => {
+  const navigation = useNavigation();
   return (
     <TouchableOpacity
+      onPress={() => navigation.navigate('Product')}
       style={[
-        tw('rounded-md mx-1 overflow-hidden rounded-md'),
+        tw("rounded-md mx-1 overflow-hidden rounded-md"),
         {
           width: position === 0 ? 163 : 79,
           height: position === 0 ? 245 : 118,
@@ -45,12 +62,12 @@ const Product = ({product, position}) => {
       ]}
       // onPress={() => navigation.navigate('Product')}
     >
-      <Image source={olum1Image} style={{width: '100%', height: '100%'}} />
+      <Image source={olum1Image} style={{ width: "100%", height: "100%" }} />
     </TouchableOpacity>
   );
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   // features: state.publicApi.home?.features,
 });
 export default connect(mapStateToProps, {})(Scroll);
@@ -59,27 +76,35 @@ Scroll.defaultProps = {
   products: [
     {
       imageUrl: olum1Image,
+      id: 0,
     },
     {
       imageUrl: olum1Image,
+      id: 1,
     },
     {
       imageUrl: olum1Image,
+      id: 2,
     },
     {
       imageUrl: olum1Image,
+      id: 3,
     },
     {
       imageUrl: olum1Image,
+      id: 4,
     },
     {
       imageUrl: olum1Image,
+      id: 5,
     },
     {
       imageUrl: olum1Image,
+      id: 6,
     },
     {
       imageUrl: olum1Image,
+      id: 7,
     },
   ],
 };

src/screens/Home/components/Videos.js

@@ -70,7 +70,7 @@ const Video = ({book, grades}) => {
           tw('mt-1 pr-1'),
           {color: Color.theme1.light.blue5, fontFamily : 'light', fontSize : width / 40},
         ]}>{`پایه ${'اول'}`}</Text>
-      <Progress percent={60} />
+      <Progress percent={60} alignItems={'items-end'} />
     </TouchableOpacity>
   );
 };

src/screens/Home/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   View,
@@ -8,6 +8,7 @@ import {
   SafeAreaView,
   Platform,
   StatusBar,
+  LayoutAnimation,
 } from "react-native";
 import Navbar from "../../components/Navbar";
 import tw from "tailwind-rn";
@@ -15,18 +16,28 @@ import Scroll from "./components/Scroll";
 import MyBooks from "./components/MyBooks";
 import Videos from "./components/Videos";
 import Blogs from "./components/Blogs";
+import Drawer from "../../components/Drawer";
 
 // import { SafeAreaView } from 'react-native-safe-area-context';
 
 // Within your render function
 function Home(props) {
+  const [position, setPosition] = useState("100%");
+
+  const setBoxPosition = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setPosition(position === "100%" ? "0%" : "100%");
+  };
+
   return (
     <SafeAreaView
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
       }}
     >
-      <Navbar />
+      <Navbar setBoxPosition={setBoxPosition} />
+      <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
         style={[styles.container, tw("w-full flex flex-col")]}

src/screens/Login/index.js

@@ -38,19 +38,19 @@ function Login(props) {
 
   const submit = async () => {
     setLoading(true);
-    // if (!checkPhoneNumber()) {
-    //   setLoading(false);
-    //   return asyncAwesomeAlert("خطا", "شماره وارد شده اشتباه است", {
-    //     showCancelButton: false,
-    //   });
-    // }
-    // let res = await services.getSmsCode({
-    //   cellphone: digitToEn(phone),
-    // });
-    // if (res.ok) {
-    //   setLoading(false);
+    if (!checkPhoneNumber()) {
+      setLoading(false);
+      return asyncAwesomeAlert("خطا", "شماره وارد شده اشتباه است", {
+        showCancelButton: false,
+      });
+    }
+    let res = await services.getSmsCode({
+      cellphone: digitToEn(phone),
+    });
+    if (res.ok) {
+      setLoading(false);
       props.navigation.navigate("Otp", { phone: digitToEn(phone) });
-    // }
+    }
     setLoading(false);
   };
 

src/screens/OrderDetails/components/Book.js

@@ -18,28 +18,27 @@ export default function Book({book}) {
           source={book}
           style={[
             tw.style('rounded-md'),
-            {width: width / 5.5, height: height / 8},
+            {width: 60, height: 90},
           ]}
         />
         <View style={tw.style('flex flex-col items-end mr-2')}>
           <Text
             style={[
-              tw.style('font-medium'),
-              {fontSize: width / 30, color: '#05335F'},
+              {fontSize: width / 36, color: '#05335F', fontFamily: 'regular'},
             ]}>
             علوم اجتماعی
           </Text>
           <Text
             style={[
-              tw.style('font-medium mt-2'),
-              {fontSize: width / 36, color: '#707070'},
+              tw.style(' mt-2'),
+              {fontSize: width / 40, color: '#707070', fontFamily: 'light'},
             ]}>
             پایه دوم
           </Text>
           <Text
             style={[
-              tw.style('font-medium mt-2'),
-              {fontSize: width / 36, color: '#707070'},
+              tw.style(' mt-1'),
+              {fontSize: width / 40, color: '#05335F', fontFamily: 'light'},
             ]}>
             نسخه دیجیتال
           </Text>
@@ -48,19 +47,20 @@ export default function Book({book}) {
       <View style={tw.style('flex flex-row-reverse items-center')}>
         <Text
           style={[
-            tw.style('font-medium py-1 px-2'),
+            tw.style(' py-1 px-2 rounded-sm'),
             {
               color: '#132F52',
-              fontSize: width / 34,
+              fontSize: width / 31,
               backgroundColor: '#F1F1F1',
+              fontFamily: 'bold'
             },
           ]}>
           1
         </Text>
         <Text
           style={[
-            tw.style('font-medium mr-3'),
-            {color: '#132F52', fontSize: width / 34},
+            tw.style(' mr-3'),
+            {color: '#132F52', fontSize: width / 36, fontFamily: 'light'},
           ]}>
           126.000 تومان
         </Text>

src/screens/OrderDetails/index.js

@@ -1,288 +1,383 @@
-import React from 'react';
-import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
-import Book from './components/Book';
-import {connect} from 'react-redux';
-import tw from 'tailwind-react-native-classnames';
-import b1Image from './assets/b1.png';
-import _ from 'lodash';
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+  ScrollView,
+  SafeAreaView,
+  Platform,
+  StatusBar,
+  LayoutAnimation,
+} from "react-native";
+import Navbar from "../../components/Navbar";
+import Drawer from "../../components/Drawer";
+import Book from "./components/Book";
+import { connect } from "react-redux";
+import tw from "tailwind-react-native-classnames";
+import b1Image from "./assets/b1.png";
+import _ from "lodash";
 
-const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
 
 const colors = {
-  1: '#FFF700',
-  4: '#FF0000',
-  3: '#4CFF00',
-  2: '#196EC0',
+  1: "#FFF700",
+  4: "#FF0000",
+  3: "#4CFF00",
+  2: "#196EC0",
 };
 
 const status = {
-  1: 'در حال پردازش',
-  4: 'درخواست رد شد',
-  3: 'تکمیل شد',
-  2: 'ارسال شده',
+  1: "در حال پردازش",
+  4: "درخواست رد شد",
+  3: "تکمیل شد",
+  2: "ارسال شده",
 };
 
-function OrderDetails({order}) {
+function OrderDetails({ order }) {
+  const [position, setPosition] = useState("100%");
+
+  const setBoxPosition = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setPosition(position === "100%" ? "0%" : "100%");
+  };
   return (
+    <SafeAreaView
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+      }}
+    >
+      <Navbar setBoxPosition={setBoxPosition} back={true} />
+      <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-      style={styles.container}>
+        style={styles.container}
+      >
         <View
           style={[
             tw.style(
-            'flex flex-row-reverse w-full justify-between items-center p-3',
+              "flex flex-row-reverse w-full justify-between items-center p-3"
             ),
-          {backgroundColor: '#EEF7FF'},
-        ]}>
+            { backgroundColor: "#EEF7FF" },
+          ]}
+        >
           <Text
             style={[
-            tw.style('font-medium'),
-            {fontSize: width / 32, color: '#20297B'},
-          ]}>
-          {_.join(['شماره سفارش:', order.number], ' ')}
+              { fontSize: width / 36, color: "#20297B", fontFamily: "regular" },
+            ]}
+          >
+            {_.join(["شماره سفارش:", order.number], " ")}
           </Text>
-        <View style={tw.style('flex flex-row-reverse items-center')}>
+          <View style={tw.style("flex flex-row-reverse items-center")}>
             <Text
               style={[
-              tw.style('font-light'),
-              {color: '#20297B', fontSize: width / 32},
-            ]}>
+                { color: "#20297B", fontSize: width / 36, fontFamily: "bold" },
+              ]}
+            >
               {status[order.status]}
             </Text>
             <View
               style={[
-              tw.style('h-4 w-4 rounded-full mr-2'),
-              {backgroundColor: colors[order.status]},
-            ]}></View>
+                tw.style("h-4 w-4 rounded-full mr-2"),
+                { backgroundColor: colors[order.status] },
+              ]}
+            ></View>
           </View>
         </View>
         <View
           style={[
-          tw.style('w-full flex flex-row-reverse py-4'),
-          {borderBottomWidth: 1, borderColor: '#86A0B933'},
-        ]}>
+            tw.style("w-full flex flex-row-reverse py-4"),
+            { borderBottomWidth: 1, borderColor: "#86A0B933" },
+          ]}
+        >
           <Text
             style={[
-            tw.style('font-medium'),
-            {fontSize: width / 32, color: '#05335F'},
-          ]}>
+              { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+            ]}
+          >
             آدرس تحویل:
           </Text>
           <Text
             style={[
-            tw.style('flex-1 font-light text-right mr-2'),
-            {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
-          ]}>
+              tw.style("flex-1 font-light text-right mr-2"),
+              {
+                fontSize: width / 40,
+                lineHeight: 17,
+                color: "#05335F",
+                fontFamily: "light",
+              },
+            ]}
+          >
             {order.address}
           </Text>
         </View>
         <View
           style={[
-          tw.style('w-full flex flex-row-reverse justify-between py-4'),
-          {borderBottomWidth: 1, borderColor: '#86A0B933'},
-        ]}>
-        <View style={tw.style('flex flex-row-reverse')}>
+            tw.style("w-full flex flex-row-reverse justify-between py-4"),
+            { borderBottomWidth: 1, borderColor: "#86A0B933" },
+          ]}
+        >
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               مشخصات تحویل گیرنده:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
-            ]}>
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 40,
+                  lineHeight: 17,
+                  color: "#05335F",
+                  fontFamily: "light",
+                },
+              ]}
+            >
               {order.name}
             </Text>
           </View>
-        <View style={tw.style('flex flex-row-reverse')}>
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               شماره موبایل:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
-            ]}>
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 40,
+                  lineHeight: 17,
+                  color: "#05335F",
+                  fontFamily: "light",
+                },
+              ]}
+            >
               {order.cellphone}
             </Text>
           </View>
         </View>
         <View
           style={[
-          tw.style('w-full rounded-md flex flex-col p-4 items-end mt-2'),
-          {backgroundColor: '#EEF6FF'},
-        ]}>
+            tw.style("w-full rounded-md flex flex-col p-4 items-end mt-2"),
+            { backgroundColor: "#EEF6FF" },
+          ]}
+        >
           <Text
             style={[
-            tw.style('font-medium'),
-            {fontSize: width / 32, color: '#05335F'},
-          ]}>
-          {_.join(['کد تحویل', order.receiveCode], ' ')}
+              { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+            ]}
+          >
+            {_.join(["کد تحویل", order.receiveCode], " ")}
           </Text>
           <Text
             style={[
-            tw.style('font-light text-right mt-2'),
-            {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
-          ]}>
+              tw.style("font-light text-right mt-1"),
+              { fontSize: width / 40, color: "#05335F", fontFamily: "regular" },
+            ]}
+          >
             این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
           </Text>
         </View>
-      <View style={tw.style('w-full flex flex-col items-end')}>
+        <View style={tw.style("w-full flex flex-col items-end")}>
           {order.items.map((item, index) => (
             <Book book={item} key={index} />
           ))}
         </View>
         <View
-        style={[tw.style('w-full flex flex-row-reverse justify-between py-4')]}>
-        <View style={tw.style('flex flex-row-reverse')}>
+          style={[
+            tw.style("w-full flex flex-row-reverse justify-between py-4"),
+          ]}
+        >
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               مبلغ سبد خرید:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
-            ]}>
-            {_.join([order.shoppingCardPrice, 'تومان'], ' ')}
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 39,
+                  color: "#05335F",
+                  fontFamily: "regular",
+                },
+              ]}
+            >
+              {_.join([order.shoppingCardPrice, "تومان"], " ")}
             </Text>
           </View>
-        <View style={tw.style('flex flex-row-reverse')}>
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               تخفیف:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
-            ]}>
-            {_.join([order.discountPrice, 'تومان'], ' ')}
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 39,
+                  color: "#05335F",
+                  fontFamily: "regular",
+                },
+              ]}
+            >
+              {_.join([order.discountPrice, "تومان"], " ")}
             </Text>
           </View>
         </View>
         <View
           style={[
-          tw.style('w-full flex flex-row-reverse justify-between py-4'),
-          {borderBottomWidth: 1, borderColor: '#86A0B933'},
-        ]}>
-        <View style={tw.style('flex flex-row-reverse')}>
+            tw.style("w-full flex flex-row-reverse justify-between py-4"),
+            { borderBottomWidth: 1, borderColor: "#86A0B933" },
+          ]}
+        >
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               هزینه ارسال کالا:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
-            ]}>
-            {_.join([order.sendPrice, 'تومان'], ' ')}
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 39,
+                  color: "#05335F",
+                  fontFamily: "regular",
+                },
+              ]}
+            >
+              {_.join([order.sendPrice, "تومان"], " ")}
             </Text>
           </View>
-        <View style={tw.style('flex flex-row-reverse')}>
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               جمع هزینه پرداختی:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
-            ]}>
-            {_.join([order.totalPrice, 'تومان'], ' ')}
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 39,
+                  color: "#05335F",
+                  fontFamily: "regular",
+                },
+              ]}
+            >
+              {_.join([order.totalPrice, "تومان"], " ")}
             </Text>
           </View>
         </View>
         <View
           style={[
-          tw.style('w-full flex flex-row-reverse justify-between py-4'),
-          {borderBottomWidth: 1, borderColor: '#86A0B933'},
-        ]}>
-        <View style={tw.style('flex flex-row-reverse')}>
+            tw.style("w-full flex flex-row-reverse justify-between py-4"),
+            { borderBottomWidth: 1, borderColor: "#86A0B933" },
+          ]}
+        >
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               نحوه پرداخت:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
-            ]}>
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 39,
+                  color: "#05335F",
+                  fontFamily: "regular",
+                },
+              ]}
+            >
               {order.payMethod}
             </Text>
           </View>
-        <View style={tw.style('flex flex-row-reverse')}>
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               شماره تراکنش:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
-            ]}>
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 39,
+                  color: "#05335F",
+                  fontFamily: "regular",
+                },
+              ]}
+            >
               {order.transactionNumber}
             </Text>
           </View>
         </View>
         <View
-        style={[tw.style('w-full flex flex-row-reverse justify-between py-4')]}>
-        <View style={tw.style('flex flex-row-reverse')}>
+          style={[
+            tw.style("w-full flex flex-row-reverse justify-between py-4"),
+          ]}
+        >
+          <View style={tw.style("flex flex-row-reverse")}>
             <Text
               style={[
-              tw.style('font-medium'),
-              {fontSize: width / 32, color: '#05335F'},
-            ]}>
+                { fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
+              ]}
+            >
               تاریخ تحویل:
             </Text>
             <Text
               style={[
-              tw.style('font-light text-right mr-1'),
-              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
-            ]}>
+                tw.style("font-light text-right mr-1"),
+                {
+                  fontSize: width / 39,
+                  color: "#05335F",
+                  fontFamily: "regular",
+                },
+              ]}
+            >
               {order.date}
             </Text>
           </View>
         </View>
       </ScrollView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   contentContainerStyle: {
-    paddingBottom: 50,
-    alignItems: 'flex-end',
+    paddingBottom: 100,
+    alignItems: "flex-end",
   },
   container: {
     width: width,
-    backgroundColor: 'white',
-    flexDirection: 'column',
+    backgroundColor: "white",
+    flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 10,
   },
@@ -292,21 +387,21 @@ export default OrderDetails;
 
 OrderDetails.defaultProps = {
   order: {
-    number: '535353523653',
-    receiveCode: '300031',
+    number: "535353523653",
+    receiveCode: "300031",
     status: 2,
     items: [b1Image, b1Image],
-    date: '1400/1/11',
-    cost: '1.240.000',
+    date: "1400/1/11",
+    cost: "1.240.000",
     address:
-      'تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی',
-    name: 'هومن عابدی',
-    cellphone: '09121234568',
-    shoppingCardPrice: '981.000',
-    discountPrice: '12.000',
-    sendPrice: '18.000',
-    totalPrice: '18.000',
-    payMethod: 'حضوری',
-    transactionNumber: ' BS3194DNB98312',
+      "تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی",
+    name: "هومن عابدی",
+    cellphone: "09121234568",
+    shoppingCardPrice: "981.000",
+    discountPrice: "12.000",
+    sendPrice: "18.000",
+    totalPrice: "18.000",
+    payMethod: "حضوری",
+    transactionNumber: " BS3194DNB98312",
   },
 };

src/screens/OrdersFollowUp/components/Order.js

@@ -6,10 +6,12 @@ import {
   StyleSheet,
   Image,
   Pressable,
+  TouchableOpacity
 } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import tw from 'tailwind-react-native-classnames';
 import leftArrowIcon from '../assets/leftArrow.png';
-import plusIcon from '../assets/plus.png';
+import { AntDesign } from '@expo/vector-icons';
 import _ from 'lodash';
 
 const width = Dimensions.get('window').width;
@@ -30,6 +32,7 @@ const status = {
 };
 
 function Order({order}) {
+  const navigation = useNavigation();
   return (
     <View
       style={[
@@ -46,7 +49,7 @@ function Order({order}) {
         <Text
           style={[
             tw.style('font-medium'),
-            {fontSize: width / 32, color: '#20297B'},
+            {fontSize: width / 36, color: '#20297B', fontFamily: 'regular'},
           ]}>
           {_.join(['شماره سفارش:', order.number], ' ')}
         </Text>
@@ -54,7 +57,7 @@ function Order({order}) {
           <Text
             style={[
               tw.style('font-light'),
-              {color: '#20297B', fontSize: width / 32},
+              {color: '#20297B', fontSize: width / 36, fontFamily: 'bold'},
             ]}>
             {status[order.status]}
           </Text>
@@ -75,7 +78,7 @@ function Order({order}) {
                     source={item}
                     style={[
                       tw.style('rounded-md ml-1.5'),
-                      {width: width / 5.8, height: height / 8},
+                      {width: 60, height: 90},
                     ]}
                   />
                 ))
@@ -86,7 +89,7 @@ function Order({order}) {
                       source={item}
                       style={[
                         tw.style('rounded-md ml-1.5'),
-                        {width: width / 5.8, height: height / 8},
+                        {width: 60, height: 90},
                       ]}
                     />
                   ))}
@@ -97,8 +100,8 @@ function Order({order}) {
                     'flex flex-row-reverse items-center justify-center relative rounded-md overflow-hidden',
                   ),
                   {
-                    width: width / 5.8,
-                    height: height / 8,
+                    width: 60,
+                    height: 90,
                     backgroundColor: '#EBEBEB',
                   },
                 ]}>
@@ -106,16 +109,17 @@ function Order({order}) {
                   source={order.items[2]}
                   style={[tw.style('absolute left-0 top-0 h-full w-full z-10')]}
                 /> */}
-                <Image source={plusIcon} style={[tw.style('w-4 h-6 z-30')]} />
+                <AntDesign name="pluscircleo" size={24} color="gray" />
               </View>
             )}
           </View>
-          <View style={[tw.style('bg-red-400')]}>
+          <View style={[tw.style('')]}>
             <Text
               style={[
                 tw.style('p-2 rounded-md text-center'),
                 {
-                  fontSize: width / 32,
+                  fontSize: width / 40,
+                  fontFamily: 'bold',
                   backgroundColor: '#F0FFF1',
                   color: '#05335F',
                 },
@@ -128,27 +132,28 @@ function Order({order}) {
           <Text
             style={[
               tw.style('my-3'),
-              {fontSize: width / 25, color: '#132F52'},
+              {fontSize: width / 31, color: '#132F52', fontFamily: 'bold'},
             ]}>
             {_.join(['جمع فاکتور:', order.cost], ' ')}
           </Text>
-          <Pressable
+          <TouchableOpacity
+            onPress={() => navigation.navigate('Order')}
             style={[
               tw.style('rounded-md flex flex-row-reverse justify-center px-5 py-3'),
               {borderWidth: 1, borderColor: '#1999C0'},
             ]}>
-            <Text style={{fontSize: width / 28, color: '#1999C0'}}>
+            <Text style={{fontSize: width / 36, color: '#1999C0', fontFamily: 'regular'}}>
               جزئیات سفارش
             </Text>
             <Image
               source={leftArrowIcon}
               style={{width: 18, height: 18, marginRight: 10}}
             />
-          </Pressable>
+          </TouchableOpacity>
           <Text
             style={[
               tw.style('my-5'),
-              {fontSize: width / 30, color: '#132F52'},
+              {fontSize: width / 36, color: '#132F52', fontFamily: 'light'},
             ]}>
             {_.join(['تاریخ سفارش:', order.date], ' ')}
           </Text>

src/screens/OrdersFollowUp/index.js

@@ -1,34 +1,62 @@
-import React from 'react';
-import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
-import Order from './components/Order';
-import {connect} from 'react-redux';
-import b1Image from './assets/b1.png';
-import b2Image from './assets/b2.png';
-import b3Image from './assets/b3.png';
+import React, {useState} from "react";
+import {
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+  ScrollView,
+  SafeAreaView,
+  StatusBar,
+  Platform,
+  LayoutAnimation,
+} from "react-native";
+import Order from "./components/Order";
+import Navbar from "../../components/Navbar";
+import Drawer from "../../components/Drawer";
+import { connect } from "react-redux";
+import b1Image from "./assets/b1.png";
+import b2Image from "./assets/b2.png";
+import b3Image from "./assets/b3.png";
 
-const width = Dimensions.get('window').width;
+const width = Dimensions.get("window").width;
 
-function OrdersFollowUp({orders}) {
+function OrdersFollowUp({ orders }) {
+  const [position, setPosition] = useState("100%");
+
+  const setBoxPosition = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setPosition(position === "100%" ? "0%" : "100%");
+  };
   return (
+    <SafeAreaView
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+      }}
+    >
+      <Navbar setBoxPosition={setBoxPosition} back={true} />
+      <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-      style={styles.container}>
-      {
-        orders.map((order, index) => <Order order={order} key={index} />)
-      }
+        style={styles.container}
+      >
+        {orders.map((order, index) => (
+          <Order order={order} key={index} />
+        ))}
       </ScrollView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   contentContainerStyle: {
-    paddingBottom: 50,
-    alignItems: 'flex-end',
+    paddingBottom: 100,
+    alignItems: "flex-end",
   },
   container: {
     width: width,
-    backgroundColor: 'white',
-    flexDirection: 'column',
+    backgroundColor: "white",
+    flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 10,
   },
@@ -39,28 +67,28 @@ export default OrdersFollowUp;
 OrdersFollowUp.defaultProps = {
   orders: [
     {
-      number: '535353523653',
-      receiveCode: '300031',
+      number: "535353523653",
+      receiveCode: "300031",
       status: 2,
       items: [b1Image, b2Image, b3Image, b3Image],
-      date: '1400/1/12',
-      cost: '1.240.000',
+      date: "1400/1/12",
+      cost: "1.240.000",
     },
     {
-      number: '535353523653',
-      receiveCode: '300031',
+      number: "535353523653",
+      receiveCode: "300031",
       status: 3,
       items: [b1Image, b2Image, b3Image],
-      date: '1400/1/12',
-      cost: '1.240.000',
+      date: "1400/1/12",
+      cost: "1.240.000",
     },
     {
-      number: '535353523653',
-      receiveCode: '300031',
+      number: "535353523653",
+      receiveCode: "300031",
       status: 4,
       items: [b1Image, b2Image, b3Image],
-      date: '1400/1/12',
-      cost: '1.240.000',
+      date: "1400/1/12",
+      cost: "1.240.000",
     },
   ],
 };

src/screens/Otp/index.js

@@ -15,7 +15,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { connect } from "react-redux";
 import Logo from "../Login/assets/logo.png";
 import IranFlag from "../Login/components/IranFlag";
-// import { digitToEn, digitToPersian } from "../../utils";
+import { digitToEn, digitToPersian } from "../../utils";
 import services from "./services";
 import { buildAction } from "../../reducers/DefaultReducer";
 import { PROFILE_RECORD } from "../../actions/actionTypes";
@@ -44,6 +44,12 @@ function Otp(props) {
   const [time, setTime] = useState(60);
   const [loading, setLoading] = useState(false);
 
+  // useEffect(() => {
+  //   if (fourthCode) {
+  //     submit();
+  //   }
+  // }, [fourthCode]);
+
   const checkValue = (value) => {
     return faNums.includes(digitToPersian(value));
   };
@@ -55,34 +61,34 @@ function Otp(props) {
     switch (key) {
       case "1":
         setFirstCode(value);
-        if(value !== ''){
+        if (value !== "") {
           ref2.focus();
         }
         break;
       case "2":
         setSecondCode(value);
-        if(value !== ''){
+        if (value !== "") {
           ref3.focus();
-        }else{
+        } else {
           ref1.focus();
         }
         break;
       case "3":
         setThirdCode(value);
-        if(value !== ''){
+        if (value !== "") {
           ref4.focus();
-        }else{
+        } else {
           ref2.focus();
         }
         break;
       case "4":
         setFourthCode(value);
-        if(value !== ''){
+        if (value !== "") {
           // ref3.focus();
-        }else{
+        } else {
           ref3.focus();
         }
-        // submit();
+
         break;
     }
   };
@@ -104,6 +110,12 @@ function Otp(props) {
       applicationToken: "1",
       userToken: "1",
     });
+    console.log(
+      digitToEn(firstCode) +
+        digitToEn(secondCode) +
+        digitToEn(thirdCode) +
+        digitToEn(fourthCode)
+    );
     if (res.ok) {
       setLoading(false);
       await AsyncStorage.setItem("accessToken", res.data.accessToken);
@@ -118,26 +130,26 @@ function Otp(props) {
       );
       props.navigation.reset({
         index: 0,
-        routes: [{ name: "Home" }],
+        routes: [{ name: "Root" }],
       });
     }
     setLoading(false);
   };
 
   useEffect(() => {
-    // let interval = setInterval(() => {
-    //   if (time > 0) {
-    //     setTime(timer - 1);
-    //     timer -= 1;
-    //   }
-    // }, 1000);
-    // let timeout = setTimeout(() => {
-    //   clearInterval(interval)
-    // }, 60000)
-    // return () => {
-    //   clearInterval(interval);
-    //   clearTimeout(timeout)
-    // }
+    let interval = setInterval(() => {
+      if (time > 0) {
+        setTime(timer - 1);
+        timer -= 1;
+      }
+    }, 1000);
+    let timeout = setTimeout(() => {
+      clearInterval(interval);
+    }, 60000);
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
   }, []);
 
   return (
@@ -261,7 +273,7 @@ function Otp(props) {
               textAlign: "center",
               fontFamily: "light",
               fontSize: width / 36,
-              color : '#196EC0'
+              color: "#196EC0",
             }}
           >
             {"بازگشت به مرحله قبل و اصلاح شماره"}

src/screens/Product/index.js

@@ -64,7 +64,7 @@ function Product({
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
       }}
     >
-      <Navbar />
+      <Navbar back={true} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
         style={styles.container}

src/screens/QR/index.js

@@ -30,7 +30,7 @@ function QR({ data }) {
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
       }}
     >
-      <Navbar />
+      <Navbar back={true} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
         style={styles.container}

src/screens/Splash/index.js

@@ -14,15 +14,14 @@ const mapStateToProps = (state) => {
 function Splash({ navigation, profile }) {
   useEffect(() => {
     setTimeout(() => {
-      // !profile.accessToken ? navigation.reset({
-      1
+      !profile.accessToken
         ? navigation.reset({
             index: 0,
             routes: [{ name: "Login" }],
           })
         : navigation.reset({
             index: 0,
-            routes: [{ name: "Home" }],
+            routes: [{ name: "Root" }],
           });
     }, 2000);
   }, [profile]);

src/services/api/oldindex.js

@@ -2,12 +2,12 @@
 
 import apiConfig from './config';
 import {
-  AsyncStorage,
   Alert,
   AlertIOS,
   Platform,
   ToastAndroid,
 } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import {toastMessage} from '../../utils/message';
 
 import RNRestart from 'react-native-restart';