reza added some page

navigation/index.js

@@ -12,7 +12,9 @@ import Products from "../src/screens/Products";
 import Login from "../src/screens/Login";
 import Otp from "../src/screens/Otp";
 import Product from "../src/screens/Product";
-import QR from "../src/screens/QR/index";
+import QR from "../src/screens/QR";
+import Faq from "../src/screens/Faq"
+import Activation from "../src/screens/Activation";
 import { connect } from "react-redux";
 import i18n from "../src/services/i18n";
 import { useTranslation } from "react-i18next";
@@ -102,6 +104,8 @@ const HomeStackScreen = () => {
       <HomeStack.Screen name="QR" component={QR} />
       <HomeStack.Screen name="Product" component={Product} />
       <Stack.Screen name="Orders" component={OrderStackScreen} />
+      <Stack.Screen name="Faq" component={Faq} />
+      <Stack.Screen name="Activation" component={Activation} />
     </HomeStack.Navigator>
   );
 };
@@ -117,6 +121,8 @@ const ProductsStackScreen = () => {
       <ProductsStack.Screen name="QR" component={QR} />
       <ProductsStack.Screen name="Product" component={Product} />
       <Stack.Screen name="Orders" component={OrderStackScreen} />
+      <Stack.Screen name="Faq" component={Faq} />
+      <Stack.Screen name="Activation" component={Activation} />
     </ProductsStack.Navigator>
   );
 };

src/components/Drawer.js

@@ -58,6 +58,13 @@ const Drawer = ({ position, setBoxPosition }) => {
       icon: <Ionicons name="reorder-four" size={23} color={"#555555"} />,
       toast: "",
       message: "",
+    },
+    {
+      name: "سوالات متداول",
+      route: "Faq",
+      icon: <Ionicons name="question" size={23} color={"#555555"} />,
+      toast: "",
+      message: "",
     }
   ]);
   const navigation = useNavigation();

src/components/Header.js

@@ -16,14 +16,14 @@ export default function Header({icon, title, description, background}) {
       <Image source={icon} style={[{width : width / 5, height : height / 10, marginBottom : 10}]} />
       <Text
         style={[
-          {fontSize: width / 18, color: '#196EC0'},
+          {fontSize: width / 25, color: '#196EC0', fontFamily: 'bold'},
           tw.style(' mb-1'),
         ]}>
         {title}
       </Text>
       <Text
         style={[
-          {color: '#86A0B9', fontSize: width / 30},
+          {color: '#86A0B9', fontSize: width / 36, fontFamily: 'light'},
           tw.style(' mb-2'),
         ]}>
         {description}

src/screens/Activation/index.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 import {
   View,
   StyleSheet,
@@ -8,17 +8,25 @@ import {
   Pressable,
   Image,
   TextInput,
-} from 'react-native';
+  SafeAreaView,
-import tw from 'tailwind-react-native-classnames';
+  StatusBar,
-import Header from '../../components/Header';
+  Platform,
-import CustomPressable from '../../components/Pressable';
+  LayoutAnimation
-import Or from '../../components/Or';
+} from "react-native";
-import bgQr from './assets/bgQr.png';
+import tw from "tailwind-react-native-classnames";
-import qrIcon from './assets/qr.png';
+import Header from "../../components/Header";
-import alertIcon from './assets/alert.png';
+import Navbar from "../../components/Navbar";
-import bookIcon from './assets/book.png';
+import Drawer from "../../components/Drawer";
+import CustomPressable from "../../components/Pressable";
+import Or from "../../components/Or";
 
-const width = Dimensions.get('window').width;
+//assets
+import bgQr from "./assets/bgQr.png";
+import qrIcon from "./assets/qr.png";
+import alertIcon from "./assets/alert.png";
+import bookIcon from "./assets/book.png";
+
+const width = Dimensions.get("window").width;
 
 function Activation(props) {
   const [formData, setFormData] = useState({
@@ -27,79 +35,98 @@ function Activation(props) {
     message: null,
     file: null,
   });
+  const [position, setPosition] = useState("100%");
+
+  const setBoxPosition = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setPosition(position === "100%" ? "0%" : "100%");
+  };
 
   const onChange = (name, value) => {
-    setFormData({...formData, [name]: value});
+    setFormData({ ...formData, [name]: value });
   };
 
   return (
-    <ScrollView
+    <SafeAreaView
-      contentContainerStyle={styles.contentContainerStyle}
+      style={{
-      style={[tw.style('bg-white flex flex-col'), {width: width}]}>
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+      }}
+    >
+      <Navbar setBoxPosition={setBoxPosition} />
+      <Drawer setBoxPosition={setBoxPosition} position={position} />
       <Header
-        background={bgQr}
+          background={bgQr}
-        title={'فعال‌سازی کتاب دیجیتال'}
+          title={"فعال‌سازی کتاب دیجیتال"}
-        description={''}
+          description={""}
-        icon={qrIcon}
+          icon={qrIcon}
-      />
-      <View style={tw.style('flex flex-row w-full flex-wrap p-2')}>
-        <View style={tw.style('w-full flex flex-row justify-center mb-7')}>
-          <Image source={bookIcon} style={[{width: 113, height: 113}]} />
-        </View>
-        <Pressable
-          style={[
-            tw.style(
-              'w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3',
-            ),
-            {backgroundColor: '#196EC01a'},
-          ]}>
-          <Text
-            style={[
-              tw.style('text-right flex-1'),
-              {color: '#275077', fontSize: width / 30},
-            ]}>
-            دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون
-            کتاب قرار داده شده که شما می‌توانید با وارد کردن کد در قسمت زیر و یا
-            اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه برای
-            کتاب خود نمائید
-          </Text>
-          <View style={tw.style('p-2')}>
-            <Image
-              source={alertIcon}
-              style={{width: 30, height: 30, marginLeft: 5}}
-            />
-          </View>
-        </Pressable>
-        <TextInput
-          placeholder="کد فعال‌سازی"
-          placeholderTextColor="#70707070"
-          style={[
-            tw.style('w-full mt-4 mb-3 rounded-md text-center py-4'),
-            {
-              backgroundColor: '#F9F9F9',
-              borderColor: '#DFDFDF',
-              borderWidth: 1,
-              fontSize: width / 27,
-            },
-          ]}
         />
-        <CustomPressable
+      <ScrollView
-          title={'تایید کد'}
+        contentContainerStyle={styles.contentContainerStyle}
-          backgroundColor="#196EC0"
+        style={[tw.style("bg-white flex flex-col"), { width: width }]}
-          color={'white'}
+      >
-          border={{color: '#196EC0', width: 0}}
+        <View style={tw.style("flex flex-col w-full flex-wrap p-2")}>
-          width={'100%'}
+          <View style={tw.style("w-full flex flex-row justify-center mb-7")}>
-        />
+            <Image source={bookIcon} style={[{ width: 90, height: 90 }]} />
-        <Or />
+          </View>
-        <CustomPressable
+          {/* <Pressable
-          title={'فعالسازی با کد QR'}
+            style={[
-          backgroundColor="#98B2CB"
+              tw.style(
-          color={'white'}
+                "w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3"
-          border={{color: '#196EC0', width: 0}}
+              ),
-          width={'100%'}
+              { backgroundColor: "#196EC01a" },
-        />
+            ]}
-      </View>
+          >
-    </ScrollView>
+            <Text
+              style={[
+                tw.style("text-right flex-1"),
+                { color: "#275077", fontSize: width / 30 },
+              ]}
+            >
+              دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون
+              کتاب قرار داده شده که شما می‌توانید با وارد کردن کد در قسمت زیر و
+              یا اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه
+              برای کتاب خود نمائید
+            </Text>
+            <View style={tw.style("p-2")}>
+              <Image
+                source={alertIcon}
+                style={{ width: 30, height: 30, marginLeft: 5 }}
+              />
+            </View>
+          </Pressable> */}
+          <TextInput
+            placeholder="کد فعال‌سازی"
+            placeholderTextColor="#70707070"
+            style={[
+              tw.style("w-full mt-4 mb-3 rounded-md text-center py-2"),
+              {
+                backgroundColor: "#F9F9F9",
+                borderColor: "#DFDFDF",
+                borderWidth: 1,
+                fontSize: width / 31,
+                fontFamily: "light",
+              },
+            ]}
+          />
+          <CustomPressable
+            title={"تایید کد"}
+            backgroundColor="#196EC0"
+            color={"white"}
+            border={{ color: "#196EC0", width: 0 }}
+            width={"100%"}
+          />
+          <Or />
+          <CustomPressable
+            title={"فعالسازی با کد QR"}
+            backgroundColor="#98B2CB"
+            color={"white"}
+            border={{ color: "#196EC0", width: 0 }}
+            width={"100%"}
+          />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
@@ -107,14 +134,14 @@ function Activation(props) {
 const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 50,
-    alignItems: 'flex-end',
+    alignItems: "flex-end",
   },
   container: {
-    width: Dimensions.get('window').width,
+    width: Dimensions.get("window").width,
-    backgroundColor: 'white',
+    backgroundColor: "white",
-    flexDirection: 'column',
+    flexDirection: "column",
     paddingVertical: 5,
-    paddingHorizontal: 10,
+    paddingHorizontal: 16,
   },
 });
 

src/screens/Faq/components/Instance.js

@@ -12,7 +12,7 @@ function Instance(props) {
     <Pressable
       onPress={() => setActive(!active)}
       style={[
-        tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-3'),
+        tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-2'),
         {
           backgroundColor: !active ? '#F9F9F9' : '#F6F9FD',
           borderColor: !active ? '#DBDBDB' : '#196EC0',
@@ -27,22 +27,22 @@ function Instance(props) {
               width: '90%',
               textAlign: 'right',
               color: '#196EC0',
-              fontSize: width / 27,
+              fontSize: width / 34,
+              fontFamily: 'bold'
             },
-            tw.style('font-medium'),
           ]}>
           نحوه خرید از سایت چگونه است ؟
         </Text>
         <Image
           source={!active ? plusIcon : minusIcon}
-          style={{width: 14, height: 30}}
+          style={{width: 10, height: 20}}
         />
       </View>
       {active && (
         <View style={tw.style('w-full flex flex-row-reverse pt-2')}>
           <Text
             style={[
-              {color: '#196EC0', fontSize: width / 30},
+              {color: '#196EC0', fontSize: width / 36, fontFamily: 'light'},
               tw.style('inline text-right flex-1'),
             ]}>
             هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دستاندازی می‌کند پس

src/screens/Faq/index.js

@@ -1,55 +1,83 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
-import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native';
+import {
-import tw from 'tailwind-react-native-classnames';
+  View,
-import Header from '../../components/Header';
+  StyleSheet,
-import Search from '../../components/Search';
+  Dimensions,
-import Instance from './components/Instance';
+  ScrollView,
-import bgFaq from './assets/bgFaq.png';
+  Text,
+  SafeAreaView,
+  Platform,
+  StatusBar,
+  LayoutAnimation,
+} from "react-native";
+import tw from "tailwind-react-native-classnames";
+import Header from "../../components/Header";
+import Navbar from "../../components/Navbar";
+import Drawer from "../../components/Drawer";
+import Search from "../../components/Search";
+import Instance from "./components/Instance";
+import bgFaq from "./assets/bgFaq.png";
 
-const width = Dimensions.get('window').width;
+const width = Dimensions.get("window").width;
 
 function Faq(props) {
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState("");
+  const [position, setPosition] = useState("100%");
+
+  const setBoxPosition = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setPosition(position === "100%" ? "0%" : "100%");
+  };
+
   const onChange = (name, value) => {};
 
   return (
-    <ScrollView
+    <SafeAreaView
-      contentContainerStyle={styles.contentContainerStyle}
+      style={{
-      style={[tw.style('bg-white flex flex-col'), {width: width}]}>
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
-      <Header
+        position: "relative",
-        background={bgFaq}
+      }}
-        title={'پرسش‌های متداول'}
+    >
-        description={'تیم پشتیبانی ما اینجاست تا شما رو کمک کنه'}
+      <Navbar setBoxPosition={setBoxPosition} />
-        // icon={}
+      <Drawer setBoxPosition={setBoxPosition} position={position} />
-      />
+      <ScrollView
-      <View style={styles.container}>
+        contentContainerStyle={styles.contentContainerStyle}
-        <Search
+        style={[tw.style("bg-white flex flex-col"), { width: width }]}
-          value={search}
+      >
-          onChange={setSearch}
+        <Header
-          placeholder={'بخشی از پرسش خود را اینجا بنویسید'}
+          background={bgFaq}
+          title={"پرسش‌های متداول"}
+          description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"}
+          // icon={}
         />
-        <View style={tw.style('mt-2 w-full')}>
+        <View style={styles.container}>
+          <Search
+            value={search}
+            onChange={setSearch}
+            placeholder={"بخشی از پرسش خود را اینجا بنویسید"}
+          />
+          <View style={tw.style("mt-2 w-full")}></View>
+          {[0, 1, 2, 3, 4].map((item, index) => (
+            <Instance key={index} />
+          ))}
         </View>
-        {[0,1,2,3,4].map((item, index) => (
+      </ScrollView>
-          <Instance key={index} />
+    </SafeAreaView>
-        ))}
-      </View>
-    </ScrollView>
   );
 }
 
 // Later on in your styles..
 const styles = StyleSheet.create({
   contentContainerStyle: {
-    paddingBottom: 50,
+    paddingBottom: 100,
-    alignItems: 'flex-end',
+    alignItems: "flex-end",
   },
   container: {
-    width: Dimensions.get('window').width,
+    width: Dimensions.get("window").width,
-    backgroundColor: 'white',
+    backgroundColor: "white",
-    flexDirection: 'column',
+    flexDirection: "column",
-    paddingVertical: 5,
+    paddingVertical: 0,
-    paddingHorizontal: 10,
+    paddingHorizontal: 16,
   },
 });
 

src/screens/Product/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import {
   View,
   StyleSheet,
@@ -6,6 +6,7 @@ import {
   ScrollView,
   SafeAreaView,
   StatusBar,
+  LayoutAnimation
 } from "react-native";
 import Book from "./components/Book";
 import Video from "./components/Video";
@@ -13,6 +14,7 @@ import { connect } from "react-redux";
 import userImage from "./assets/user.png";
 import poster from "./assets/poster.png";
 import Navbar from "../../components/Navbar";
+import Drawer from "../../components/Drawer";
 
 function Product({
   product = {
@@ -58,13 +60,21 @@ function Product({
     ],
   },
 }) {
+  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 back={true} />
+      <Navbar setBoxPosition={setBoxPosition} back={true} />
+      <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
         style={styles.container}
@@ -88,7 +98,7 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
-    paddingHorizontal: 10,
+    paddingHorizontal: 16,
   },
 });
 export default Product;

src/screens/Products/index.js

@@ -7,6 +7,7 @@ import {
   Dimensions,
   SafeAreaView,
   StatusBar,
+  LayoutAnimation
 } from "react-native";
 import tw from "tailwind-react-native-classnames";
 
@@ -16,8 +17,15 @@ import Video from "./components/Video";
 import Search from "../../components/Search";
 import Select from "../../components/Select";
 import Navbar from "../../components/Navbar";
+import Drawer from "../../components/Drawer";
 
 function Products({ grades, productTypes }) {
+  const [position, setPosition] = useState("100%");
+
+  const setBoxPosition = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setPosition(position === "100%" ? "0%" : "100%");
+  };
   const [productType, setProductType] = useState("");
   const [grade, setGrade] = useState("");
   const [search, setSearch] = useState("");
@@ -26,9 +34,11 @@ function Products({ grades, productTypes }) {
     <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}

src/screens/ShoppingCart/index.js

@@ -9,12 +9,14 @@ import {
   Image,
   SafeAreaView,
   StatusBar,
+  LayoutAnimation
 } from "react-native";
 import { Ionicons } from '@expo/vector-icons';
 import Product from "./components/Product";
 import Code from "./components/Code";
 import CustomPressable from "../../components/Pressable";
 import Navbar from "../../components/Navbar";
+import Drawer from "../../components/Drawer";
 import tw from "tailwind-react-native-classnames";
 
 import { connect } from "react-redux";
@@ -49,13 +51,22 @@ const PriceStatus = ({ name, value, type }) => {
 };
 
 function ShoppingCart({}) {
+  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}
@@ -136,6 +147,6 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
-    paddingHorizontal: 10,
+    paddingHorizontal: 16,
   },
 });