reza designed rules

navigation/index.js

@@ -38,6 +38,7 @@ import Blogs from "../src/screens/Blogs";
 import Blog from "../src/screens/Blog";
 import Sample from "../src/screens/Product/components/Sample";
 import Info from "../src/screens/Product/components/Info";
+import Rules from "../src/screens/Rules/index";
 
 //style
 import Colors from "../src/constants/Colors";
@@ -61,7 +62,6 @@ const BottomTabNavigator = ({}) => {
         },
         tabBarIconStyle: {
           transform: [{ scaleX: -1 }],
-
         },
         tabBarLabelPosition: "below-icon",
         tabBarActiveTintColor: Colors.theme1["light"].green79,
@@ -71,7 +71,6 @@ const BottomTabNavigator = ({}) => {
           transform: [{ scaleX: -1 }],
         },
 
-
         tabBarLabelStyle: {
           // fontSize: fontSize.sm,
           // fontFamily: "bold",
@@ -472,8 +471,8 @@ const Navigation = ({ getStatus, isLogin, userProducts, ltr, setLTR }) => {
       >
         <Stack.Screen name="Splash" component={Splash} />
         <Stack.Screen name="Login" component={Login} />
+        <Stack.Screen name="Rules" component={Rules} />
         <Stack.Screen name="Otp" component={Otp} />
-        <Stack.Screen name="QR" component={QR} />
         <Stack.Screen
           name="Root"
           component={
@@ -484,6 +483,7 @@ const Navigation = ({ getStatus, isLogin, userProducts, ltr, setLTR }) => {
             // }
           }
         />
+        <Stack.Screen name="QR" component={QR} />
         <Stack.Screen name="Orders" component={OrdersFollowUp} />
         <Stack.Screen name="Order" component={OrderDetails} />
         <Stack.Screen name="Faq" component={Faq} />

src/screens/Login/index.js

@@ -15,6 +15,7 @@ import Svg, { Defs, Pattern, Image, Path } from "react-native-svg";
 import onInput from "../../utils/onInput";
 import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
 import { user } from "../../redux/actions";
+import { useNavigation } from "@react-navigation/native";
 
 //components
 import CustomTextInput from "../../components/CustomTextInput";
@@ -29,6 +30,7 @@ const ios = Platform.OS === "ios";
 const { height } = Dimensions.get("window");
 
 function Login(props) {
+  const navigation = useNavigation();
   const [phone, setPhone] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -173,12 +175,15 @@ function Login(props) {
         </TouchableHighlight>
         <Text
           style={[
-            tw("flex absolute bottom-12 text-center w-7/12"),
+            tw("flex absolute bottom-6 text-center w-7/12"),
             { fontFamily: "regular", fontSize: fontSize.sm },
           ]}
         >
           ورود شما در سامانه به منزله قبول و{" "}
-          <Text style={{ fontFamily: "demi", fontSize: fontSize.tiny }}>
+          <Text
+            style={{ fontFamily: "demi", fontSize: fontSize.tiny }}
+            onPress={() => navigation.push("Rules")}
+          >
             شرایط , قوانین استفاده
           </Text>{" "}
           می‌باشد

src/screens/Rules/index.js

@@ -0,0 +1,206 @@
+import {
+  View,
+  Text,
+  ScrollView,
+  Platform,
+  StyleSheet,
+  SafeAreaView,
+  StatusBar,
+  Dimensions,
+  Pressable,
+} from "react-native";
+import { connect } from "react-redux";
+import React from "react";
+
+//components
+import Navbar from "../../components/Navbar";
+
+//style
+import fontSize from "../../constants/fontSize";
+import tw from "tailwind-rn";
+import Colors from "../../constants/Colors";
+
+//variables
+const ios = Platform.OS === "ios";
+const { width } = Dimensions.get("window");
+
+const Rules = ({ route, mobile, theme }) => {
+  const [active, setActive] = React.useState(0);
+  const styles = React.useMemo(() => {
+    return StyleSheet.create({
+      contentContainerStyle: {
+        paddingBottom: 100,
+      },
+      container: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        paddingVertical: 5,
+        paddingHorizontal: 16,
+      },
+    });
+  }, [route]);
+
+  const items = React.useMemo(() => {
+    return [
+      {
+        title: "آیا استفاده از سامانه دانوین هزینه دارد؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد  ",
+      },
+      {
+        title: "چگونه می توان در سامانه عضو شد؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد  ",
+      },
+      {
+        title: "چگونه می توان در سامانه عضو شد؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد  ",
+      },
+      {
+        title: "چگونه می توان در سامانه عضو شد؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد  ",
+      },
+    ];
+  }, [route]);
+
+  return (
+    <SafeAreaView
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+      }}
+    >
+      <Navbar
+        headerOptions={{
+          logo: false,
+          menu: false,
+          hamburgerMenu: false,
+          title: "شرایط، قوانین استفاده و راهنما",
+          bookmark: false,
+          qr: false,
+          back: true,
+        }}
+      />
+      <ScrollView
+        contentContainerStyle={styles.contentContainerStyle}
+        style={styles.container}
+      >
+        <Switch theme={theme} active={active} setActive={setActive} />
+        <Text
+          numberOfLines={1}
+          adjustsFontSizeToFit
+          style={[
+            tw("text-center my-3 p-2 rounded-sm"),
+            {
+              fontFamily: "bold",
+              fontSize: fontSize.sm,
+              color: Colors.theme1[theme].redC0,
+              backgroundColor: Colors.theme1[theme].redFF,
+            },
+          ]}
+        >
+          شما در حال مشاهده شرایط و قوانین استفاده از سامانه هستید
+        </Text>
+        {items.map((rule, index) => (
+          <Rule rule={rule} key={index} theme={theme} />
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const Switch = ({ theme, active, setActive }) => {
+  return (
+    <View
+      style={[
+        tw("w-full flex flex-row"),
+        { borderWidth: 1, borderColor: Colors.theme1[theme].green79 },
+      ]}
+    >
+      <Pressable
+        style={[
+          tw("flex-1 py-3 flex flex-row justify-center"),
+          {
+            backgroundColor: active
+              ? Colors.theme1[theme].blueFF1
+              : "transparent",
+          },
+        ]}
+        onPress={() => setActive(1)}
+      >
+        <Text
+          style={{
+            fontFamily: "regular",
+            fontSize: fontSize.tiny,
+            color: Colors.theme1[theme].green79,
+          }}
+        >
+          راهنمای استفاده
+        </Text>
+      </Pressable>
+      <View style={[tw("w-px h-full")]}></View>
+      <Pressable
+        style={[
+          tw("flex-1 py-3 flex flex-row justify-center"),
+          {
+            backgroundColor: !active
+              ? Colors.theme1[theme].green79 + '11'
+              : "transparent",
+          },
+        ]}
+        onPress={() => setActive(0)}
+      >
+        <Text
+          style={{
+            fontFamily: "regular",
+            fontSize: fontSize.tiny,
+            color: Colors.theme1[theme].green79,
+          }}
+        >
+          شرایط و قوانین
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const Rule = ({ rule, theme }) => {
+  return (
+    <View style={tw("flex mb-3")}>
+      <Text
+        style={[
+          tw("mb-1 p-2 rounded-sm"),
+          {
+            fontFamily: "bold",
+            fontSize: fontSize.sm,
+            color: Colors.theme1[theme].green79,
+            backgroundColor: Colors.theme1[theme].green79 + '11',
+          },
+        ]}
+      >
+        {rule.title}
+      </Text>
+      <Text
+        style={[
+          tw("p-2 rounded-sm leading-6"),
+          {
+            fontFamily: "regular",
+            fontSize: fontSize.sm,
+            color: Colors.theme1[theme].gray20,
+          },
+        ]}
+      >
+        {rule.description}
+      </Text>
+    </View>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme,
+});
+
+export default connect(mapStateToProps)(Rules);