reza fixed ticket components

navigation/index.js

@@ -40,6 +40,8 @@ import Sample from "../src/screens/Product/components/Sample";
 import Info from "../src/screens/Product/components/Info";
 import Rules from "../src/screens/Rules/index";
 import MyCourses from "../src/screens/Profile/components/MyCourses";
+import Ticket from "../src/screens/Contact/layouts/Ticket";
+import Tickets from "../src/screens/Contact/layouts/Tickets";
 
 //style
 import Colors from "../src/constants/Colors";
@@ -488,6 +490,8 @@ const Navigation = ({ getStatus, isLogin, userProducts, ltr, setLTR }) => {
         <Stack.Screen name="CreateAddress" component={Address} />
         <Stack.Screen name="ProfileAddress" component={ProfileAddress} />
         <Stack.Screen name="Info" component={Info} />
+        <Stack.Screen name="Ticket" component={Ticket} />
+        <Stack.Screen name="Tickets" component={Tickets} />
       </Stack.Navigator>
     </NavigationContainer>
   );

package.json

@@ -40,6 +40,7 @@
     "react-i18next": "^11.15.1",
     "react-native": "0.64.3",
     "react-native-awesome-alerts": "^1.5.2",
+    "react-native-html-parser": "^0.1.0",
     "react-native-openanything": "^0.0.6",
     "react-native-qrcode-scanner": "^1.5.4",
     "react-native-ratings": "^8.1.0",

src/components/MapSelector.js

@@ -1,30 +1,40 @@
-import React, {Component} from 'react';
+import React, { Component } from "react";
-import { SafeAreaView, StyleSheet, View} from 'react-native';
+import { SafeAreaView, StyleSheet, View } from "react-native";
-// import Mapir from 'mapir-react-native-sdk'
+// import Mapir from "mapir-react-native-sdk";
 
-const X_API_KEY = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIn0.eyJhdWQiOiIxNjk2MSIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIiwiaWF0IjoxNjQ0MzE3MDA5LCJuYmYiOjE2NDQzMTcwMDksImV4cCI6MTY0NjgyMjYwOSwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Gckmd77Vw-wmsaztsmVmjYmfp4zXRSy2f0tXS-1p7IY8VJmvCCrk64y7WvCLbH0YfGZI9rG9ZUi5hRJDDGXu70l1ZafCYq2-EkMzcbx-PGTTq2bHGNZujF4ur1xtGoXd2kwGuldiR_6SJdqYLHcupbscFI7hHaQnkN1xWJ-L8476ZOKzUgiBvwH9uElGZXwD6SwfXoGW_R38_isrnfTXKfW9PPixyLaN3404tcjOU1r02HIurrplXlIKRKG9CVXxKsESfJJ8trwtZw6O4erxrnisxfL0VwAR7l69P6KcFb57vvM4j4hKFqxUDr4YvSq1qOTt3urYbAKehhvoiLhZxw";
+const X_API_KEY =
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIn0.eyJhdWQiOiIxNjk2MSIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIiwiaWF0IjoxNjQ0MzE3MDA5LCJuYmYiOjE2NDQzMTcwMDksImV4cCI6MTY0NjgyMjYwOSwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Gckmd77Vw-wmsaztsmVmjYmfp4zXRSy2f0tXS-1p7IY8VJmvCCrk64y7WvCLbH0YfGZI9rG9ZUi5hRJDDGXu70l1ZafCYq2-EkMzcbx-PGTTq2bHGNZujF4ur1xtGoXd2kwGuldiR_6SJdqYLHcupbscFI7hHaQnkN1xWJ-L8476ZOKzUgiBvwH9uElGZXwD6SwfXoGW_R38_isrnfTXKfW9PPixyLaN3404tcjOU1r02HIurrplXlIKRKG9CVXxKsESfJJ8trwtZw6O4erxrnisxfL0VwAR7l69P6KcFb57vvM4j4hKFqxUDr4YvSq1qOTt3urYbAKehhvoiLhZxw";
 
 export default function MapSelector() {
-  onRegionDidChange = (e) => {
+  onRegionDidChange = (e) => {};
-  };
   return (
-      <View style={styles.container}>
+    <View
-        {/* <Mapir
+      style={{
-          apiKey={X_API_KEY}
+        width: 300,
-          onRegionDidChange={(e) => onRegionDidChange(e)}
+        height: 300,
-          style={styles.container}
+      }}
-        /> */}
+    >
-          {/* <Mapir.Camera
+      {/* <Mapir
-            zoomLevel={13}
+        apiKey={X_API_KEY}
-            centerCoordinate={[51.422548, 35.732573]}
+        onRegionDidChange={(e) => onRegionDidChange(e)}
-          />
+        style={{
-        </Mapir> */}
+          flex: 1,
-      </View>
+        }}
+        styleURL={Mapir?.StyleURL?.Street}
+      >
+        <Mapir.Camera
+          zoomLevel={13}
+          followUserLocation
+          centerCoordinate={[51.422548, 35.732573]}
+        />
+      </Mapir> */}
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    width : '100%', height: 300
+    width: "100%",
+    height: 300,
   },
 });

src/components/Navbar.js

@@ -93,8 +93,8 @@ const Navbar = ({
       {headerOptions?.title ? (
         <Text
           style={{
-            fontFamily: "bold",
+            fontFamily: "demi",
-            fontSize: fontSize.lg,
+            fontSize: fontSize.xl,
             color: Color.theme1[theme].green79,
             paddingRight: 16,
           }}

src/screens/Address/index.js

@@ -52,11 +52,14 @@ const Address = ({
   cityLoading,
   mobile,
 }) => {
-  const profilePage = route.params?.type === "profile";
-  const colorScheme = Appearance.getColorScheme();
-  const navigation = useNavigation();
   const [addressFields, setAddressFields] = useState({});
   const [mapAddress, setMapAddress] = useState(null);
+  const colorScheme = Appearance.getColorScheme();
+  const navigation = useNavigation();
+
+  const profilePage = React.useMemo(() => {
+    return route.params?.type === "profile";
+  });
 
   useEffect(() => {
     getProvince();
@@ -270,6 +273,7 @@ const Address = ({
                 title="اطلاعات هویتی"
                 text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )"
               />
+              {!profilePage && <MapSelector />}
               <CustomTextInput
                 label="نام"
                 placeholder=""

src/screens/Blog/index.js

@@ -11,7 +11,6 @@ import {
   Dimensions,
   StatusBar,
 } from "react-native";
-import { WebView } from "react-native-webview";
 import { connect } from "react-redux";
 import { blog, publicApi } from "../../redux/actions";
 import { LinearGradient } from "expo-linear-gradient";
@@ -27,6 +26,9 @@ import tw from "tailwind-rn";
 import fontSize from "../../constants/fontSize";
 import Colors from "../../constants/Colors";
 
+//variables
+const DomParser = require("react-native-html-parser").DOMParser;
+
 const ios = Platform.OS === "ios";
 const { width } = Dimensions.get("window");
 
@@ -142,7 +144,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
               </View>
             </LinearGradient>
           </View>
-          {/* <View style={[tw("flex my-5"), { textAlign: "right" }]}>
+          <View style={[tw("flex my-5"), { textAlign: "right" }]}>
             <Text
               style={{
                 fontFamily: "bold",
@@ -152,26 +154,11 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
             >
               {blog?.title}
             </Text>
-              <WebView
+            {console.log(
-                style={[
+              new DomParser()?.parseFromString(blog?.text, "text/html")
-                  tw(
+                ?.childNodes
-                    "flex-1 w-full flex flex-row items-center justify-center text-left"
+            )}
-                  ),
+          </View>
-                  { fontSize: fontSize.base },
-                ]}
-                originWhitelist={["*"]}
-                source={{ html: blog.text, textAlign: "right" }}
-                containerStyle={{
-                  textAlign: "right",
-                  fontSize: fontSize.base,
-                  display: "flex",
-                  flex: 1,
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              />
-            
-          </View> */}
           <Header title={"پیشنهادی "} />
           {blogs.length && (
             <FlatList
@@ -181,7 +168,9 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
               style={[tw("flex flex-row mt-3 pb-3")]}
               data={blogs}
               renderItem={({ item }) => <New blog={item} />}
-              keyExtractor={(item, index) => { return item.id }}
+              keyExtractor={(item, index) => {
+                return item.id;
+              }}
             />
           )}
         </View>
@@ -193,7 +182,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
 const mapStateToProps = (state) => ({
   blog: state.blog.blog,
   blogs: state.blog.list,
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 const mapDispatchToProps = {
@@ -202,6 +191,11 @@ const mapDispatchToProps = {
   setHeaderOptions: publicApi.setHeaderOptions,
 };
 
+const Tag = ({ tag }) => {
+  console.log(tag);
+  return;
+};
+
 export default connect(mapStateToProps, mapDispatchToProps)(Blog);
 
 const styles = StyleSheet.create({

src/screens/Contact/Box.js

@@ -1,108 +0,0 @@
-import { View, Text, Image, TouchableOpacity, Platform, Dimensions } from "react-native";
-import RBSheet from "react-native-raw-bottom-sheet";
-import React from "react";
-import { connect } from "react-redux";
-
-//components
-import Ticket from '../../components/BottomSheetComponents/Ticket';
-
-//style
-import tw from "tailwind-rn";
-import fontSize from "../../constants/fontSize";
-
-const ios = Platform.OS === "ios";
-const {height, width} = Dimensions.get("window");
-
-const Box = ({ info, mobile }) => {
-  const refRBSheet = React.useRef();
-
-  return (
-    <>
-      <TouchableOpacity
-        style={[
-          tw(
-            `flex flex-row-reverse rounded-md mt-4 ${
-              mobile ? "py-3 px-3" : "py-5 px-5"
-            }`
-          ),
-          {
-            backgroundColor: info.bg,
-            borderColor: info.borderColor,
-            borderWidth: 1,
-          },
-        ]}
-        onPress={() => refRBSheet.current.open()}
-      >
-        <Image
-          source={info.icon}
-          style={{ width: mobile ? 40 : 55, height: mobile ? 40 : 55 }}
-        />
-        <View style={tw("flex  flex-1 mr-3")}>
-          <Text
-            style={{
-              fontFamily: "bold",
-              fontSize: mobile ? fontSize.lg : fontSize.xl3,
-              color: info.title.color,
-              textAlign: ios ? "right" : "auto",
-            }}
-          >
-            {info.title.text}
-          </Text>
-          <Text
-            style={[
-              tw("mt-1"),
-              {
-                fontFamily: "light",
-                fontSize: mobile ? fontSize.tiny : fontSize.lg,
-                color: info.description.color,
-                textAlign: ios ? "right" : "auto",
-              },
-            ]}
-          >
-            {info.description.text}
-          </Text>
-          <Text
-            style={[
-              tw("self-start mt-2.5"),
-              {
-                fontFamily: "demi",
-                fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: info?.link?.color,
-              },
-            ]}
-          >
-            {info?.link?.title}
-          </Text>
-        </View>
-      </TouchableOpacity>
-      <RBSheet
-        ref={refRBSheet}
-        closeOnDragDown={true}
-        dragFromTopOnly={true}
-        closeOnPressMask={true}
-        height={height / 4 * 3}
-        customStyles={{
-          wrapper: {
-            backgroundColor: "#00000077",
-          },
-          container: {
-            padding: 0,
-            borderTopLeftRadius: 30,
-            borderTopRightRadius: 30,
-          },
-          draggableIcon: {
-            backgroundColor: "#000",
-          },
-        }}
-      >
-        <Ticket />
-      </RBSheet>
-    </>
-  );
-};
-
-const mapStateToProps = (state) => ({
-  mobile: state.publicApi.mobile,
-});
-
-export default connect(mapStateToProps)(Box);

src/screens/Contact/index.js

@@ -17,7 +17,7 @@ import Colors from "../../constants/Colors";
 //components
 import Header from "../../components/Header";
 import Navbar from "../../components/Navbar";
-import Box from "./Box";
+import Box from "./layouts/Box";
 
 //assets
 import onlineSupportIcon from "./assets/online-support.png";

src/screens/Contact/layouts/Box.js

@@ -0,0 +1,89 @@
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  Platform,
+  Dimensions,
+} from "react-native";
+import React from "react";
+import { connect } from "react-redux";
+import { useNavigation } from "@react-navigation/native";
+
+//style
+import tw from "tailwind-rn";
+import fontSize from "../../../constants/fontSize";
+
+const ios = Platform.OS === "ios";
+const { height, width } = Dimensions.get("window");
+
+const Box = ({ info, mobile }) => {
+  const navigation = useNavigation();
+  const refRBSheet = React.useRef();
+
+  return (
+    <TouchableOpacity
+      style={[
+        tw(
+          `flex flex-row-reverse rounded-md mt-4 ${
+            mobile ? "py-3 px-3" : "py-5 px-5"
+          }`
+        ),
+        {
+          backgroundColor: info.bg,
+          borderColor: info.borderColor,
+          borderWidth: 1,
+        },
+      ]}
+      onPress={() => navigation.push("Tickets")}
+    >
+      <Image
+        source={info.icon}
+        style={{ width: mobile ? 40 : 55, height: mobile ? 40 : 55 }}
+      />
+      <View style={tw("flex  flex-1 mr-3")}>
+        <Text
+          style={{
+            fontFamily: "bold",
+            fontSize: mobile ? fontSize.lg : fontSize.xl3,
+            color: info.title.color,
+            textAlign: ios ? "right" : "auto",
+          }}
+        >
+          {info.title.text}
+        </Text>
+        <Text
+          style={[
+            tw("mt-1"),
+            {
+              fontFamily: "light",
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
+              color: info.description.color,
+              textAlign: ios ? "right" : "auto",
+            },
+          ]}
+        >
+          {info.description.text}
+        </Text>
+        <Text
+          style={[
+            tw("self-start mt-2.5"),
+            {
+              fontFamily: "demi",
+              fontSize: mobile ? fontSize.sm : fontSize.lg,
+              color: info?.link?.color,
+            },
+          ]}
+        >
+          {info?.link?.title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(Box);

src/screens/Contact/layouts/Ticket.js

@@ -1,18 +1,26 @@
 import React, { useMemo, useEffect, useCallback } from "react";
-import { ScrollView, Appearance, View } from "react-native";
+import {
+  ScrollView,
+  Appearance,
+  SafeAreaView,
+  View,
+  StatusBar,
+  Platform,
+} from "react-native";
 import { connect } from "react-redux";
-import { userProduct, comment, file, form } from "../../redux/actions";
+import { userProduct, comment, file, form } from "../../../redux/actions";
-import onInput from "../../utils/onInput";
+import onInput from "../../../utils/onInput";
 
 //components
-import CustomTextInput from "../CustomTextInput";
+import CustomTextInput from "../../../components/CustomTextInput";
-import CustomPressable from "../Pressable";
+import CustomPressable from "../../../components/Pressable";
-import Select from "../Select";
+import Select from "../../../components/Select";
+import Navbar from "../../../components/Navbar";
 
 //style
 import tw from "tailwind-rn";
-import Colors from "../../constants/Colors";
+import Colors from "../../../constants/Colors";
-import fontSize from "../../constants/fontSize";
+import fontSize from "../../../constants/fontSize";
 
 export const Ticket = ({
   myProductList,
@@ -23,12 +31,11 @@ export const Ticket = ({
   upload,
   setTicket,
   grades,
-  theme
+  theme,
 }) => {
-  let opt = useMemo(
+  let opt = useMemo(() => {
-    () => ["واحد مورد نظر", "واحد فروش", "واحد فنی", "واحد محتوایی"],
+    return ["واحد مورد نظر", "واحد فروش", "واحد فنی", "واحد محتوایی"];
-    [status]
+  }, [status]);
-  );
 
   useEffect(() => {
     if (myProductList.length === 0 && status) {
@@ -67,8 +74,26 @@ export const Ticket = ({
   }, [status]);
 
   return (
-    <View style={tw('flex-1 pb-4 px-4')}>
+    <SafeAreaView
-      <ScrollView style={tw("flex flex-1")}>
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+        backgroundColor: "white",
+        flex: 1,
+      }}
+    >
+      <Navbar
+        headerOptions={{
+          logo: false,
+          menu: false,
+          hamburgerMenu: false,
+          title: "ارسال تیکت",
+          bookmark: false,
+          qr: false,
+          back: true,
+        }}
+      />
+      <ScrollView style={tw("flex-1 px-4")}>
         {!status && (
           <>
             <CustomTextInput
@@ -88,13 +113,13 @@ export const Ticket = ({
             />
           </>
         )}
-        <Select
+        {/* <Select
           defaultValue={ticket?.unit || myProductList[0]}
           options={status && myProductList?.length ? opt : opt.slice(0, 3)}
           name="unit"
           onChange={(name, value) => setTicket({ name, value })}
           width={"100%"}
-        />
+        /> */}
         {ticket?.unit === "واحد محتوایی" && (
           <Select
             name="bookId"
@@ -130,15 +155,17 @@ export const Ticket = ({
         />
         <View style={tw("mt-4")}></View>
       </ScrollView>
-      <CustomPressable
+      <View style={tw('w-full px-4')}>
-        title={"ارسال پیام"}
+        <CustomPressable
-        backgroundColor={Colors.theme1[theme].greenCF}
+          title={"ارسال پیام"}
-        color={"white"}
+          backgroundColor={Colors.theme1[theme].greenCF}
-        border={{ color: "#196EC0", width: 0 }}
+          color={"white"}
-        width={"100%"}
+          border={{ color: "#196EC0", width: 0 }}
-        onPress={() => send()}
+          width={"100%"}
-      />
+          onPress={() => send()}
-    </View>
+        />
+      </View>
+    </SafeAreaView>
   );
 };
 
@@ -148,7 +175,7 @@ const mapStateToProps = (state) => ({
   status: state.user.status,
   ticket: state.form.ticket,
   grades: state.publicApi.grades,
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 const mapDispatchToProps = {

src/screens/Contact/layouts/Tickets.js

@@ -0,0 +1,76 @@
+import React, { useMemo, useEffect, useCallback } from "react";
+import {
+  SafeAreaView,
+  View,
+  StatusBar,
+  Platform,
+  FlatList,
+} from "react-native";
+import { connect } from "react-redux";
+import { userProduct, comment, file, form } from "../../../redux/actions";
+import { useNavigation } from "@react-navigation/native";
+//components
+import CustomPressable from "../../../components/Pressable";
+import Navbar from "../../../components/Navbar";
+import Empty from "../../../components/Empty";
+
+//style
+import tw from "tailwind-rn";
+import Colors from "../../../constants/Colors";
+import fontSize from "../../../constants/fontSize";
+
+export const Tickets = ({ tickets = [], theme }) => {
+  const navigation = useNavigation();
+  return (
+    <SafeAreaView
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+        backgroundColor: "white",
+        flex: 1,
+      }}
+    >
+      <Navbar
+        headerOptions={{
+          logo: false,
+          menu: false,
+          hamburgerMenu: false,
+          title: "تیکت‌ها",
+          bookmark: false,
+          qr: false,
+          back: true,
+        }}
+      />
+      {tickets.length ? (
+        <FlatList
+          data={tickets}
+          style={tw("px-4 flex-1")}
+          renderItems={({ item }) => <Ticket ticket={item} />}
+          keyExtractor={(item, index) => {
+            return index;
+          }}
+        />
+      ) : (
+        <Empty text="هیچ تیکتی وجود ندارد." />
+      )}
+      <View style={tw("w-full px-4")}>
+        <CustomPressable
+          title={"ارسال تیکت جدید"}
+          backgroundColor={Colors.theme1[theme].greenCF}
+          color={"white"}
+          border={{ color: "#196EC0", width: 0 }}
+          width={"100%"}
+          onPress={() => navigation.push("Ticket")}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tickets);

src/screens/QR/layouts/Scan/index.js

@@ -12,6 +12,7 @@ import { BarCodeScanner } from "expo-barcode-scanner";
 import { Entypo } from "@expo/vector-icons";
 import { connect } from "react-redux";
 
+//style
 import tw from "tailwind-rn";
 import Colors from "../../../../constants/Colors";
 

src/screens/ShoppingCart/index.js

@@ -267,7 +267,7 @@ function ShoppingCart({
                       showCancelButton: false,
                     })
                   : hasPhysical
-                  ? navigation.push("DeliveryForm")
+                  ? navigation.navigate("DeliveryForm")
                   : payFactor({ userId })
               }
             />

yarn.lock

@@ -5502,6 +5502,11 @@ react-native-codegen@^0.0.6:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
+react-native-html-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-html-parser/-/react-native-html-parser-0.1.0.tgz#c35de1dc325562da26e68befa423bac34505ba48"
+  integrity sha512-G5d0pk7TA9YgjVJhLRf2zMOOf1HXd8ItM9JYsTS2pXoEfSRfMfRU5iTj03LGwvHU2NT9kc18NDJeLgZY6+Bbvg==
+
 react-native-iphone-x-helper@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"