update 23 files

src/components/Navbar.js

@@ -35,6 +35,7 @@ import tw from "tailwind-rn";
 import fontSize from "../constants/fontSize";
 
 const CopilotView = walkthroughable(View);
+const CopilotPressable = walkthroughable(Pressable);
 
 const Navbar = ({
   notification,
@@ -49,11 +50,7 @@ const Navbar = ({
 }) => {
   const navigation = useNavigation();
 
-  React.useEffect(() => {
+  React.useEffect(() => {}, []);
-    setTimeout(() => {
-      props.start();
-    }, 800);
-  }, []);
 
   const isActiveBookmark = React.useMemo(() => {
     return userFavoriteList.filter((object) =>
@@ -126,7 +123,15 @@ const Navbar = ({
         </Text>
       ) : null}
       {headerOptions?.hamburgerMenu ? (
-        <Pressable style={tw("relative mr-4")} onPress={() => setBoxPosition()}>
+        <CopilotStep
+          order={3}
+          name="منو"
+          text="با زدن بر روی این بخش لیستی از خدمات ما را مشاهده خواهید کرد."
+        >
+          <CopilotPressable
+            style={tw("relative mr-4")}
+            onPress={() => setBoxPosition()}
+          >
             <Svg
               xmlns="http://www.w3.org/2000/svg"
               width={31.567}
@@ -135,7 +140,9 @@ const Navbar = ({
               <G
                 fill="none"
                 stroke={
-                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white
                 }
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -153,7 +160,8 @@ const Navbar = ({
                 style={tw("h-2.5 w-2.5 absolute -left-1 -top-1 rounded-full")}
               ></View>
             ) : null}
-        </Pressable>
+          </CopilotPressable>
+        </CopilotStep>
       ) : null}
 
       {headerOptions?.logo ? (
@@ -754,22 +762,4 @@ const mapDispatchToProps = {
   deleteBookmark: userFavorite.del,
 };
 
-const component = copilot({
+export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
-  labels: {
-    previous: "قبلی",
-    next: "بعدی",
-    skip: "رد کردن",
-    finish: "پایان",
-  },
-  tooltipStyle : {
-    fontFamily : 'regular',
-    fontSize : 40,
-  },
-  textStyle : {
-    fontFamily : 'regular',
-    fontSize : 40
-  }
-  
-})(Navbar);
-
-export default connect(mapStateToProps, mapDispatchToProps)(component);

src/redux/actions/public.js

@@ -1,6 +1,8 @@
 import proxy from "../proxy";
 const publicApi = {
-  setOffline : (data) => async (dispatch) =>
+  setFirstLogin: (data) => async (dispatch) =>
+    await dispatch({ type: "public/setFirstLogin", data }),
+  setOffline: (data) => async (dispatch) =>
     await dispatch({ type: "public/setOffline", data }),
   setOrientation: (data) => async (dispatch) =>
     await dispatch({ type: "public/setOrientation", data }),

src/redux/reducers/public.js

@@ -6,6 +6,7 @@ const { width, height } = Dimensions.get("window");
 const initialState = {
   ltr: false,
   theme: null,
+  firstLogin: false,
   mobile: width < 720,
   orientation: height > width ? "portrait" : "landscape",
   homeData: [],
@@ -80,6 +81,8 @@ const grades = [
 const publicApi = (state = initialState, action) => {
   let { type, data } = action;
   switch (type) {
+    case "public/setFirstLogin":
+      return { ...state, firstLogin: data, error: null, loading: false };
     case "public/setOffline":
       return { ...state, offline: data, error: null, loading: false };
     case "public/setOrientation":

src/screens/AR/index.js

@@ -72,7 +72,6 @@ function AR({ getUserProducts, userProducts, mobile, theme }) {
           style={{
             paddingHorizontal: 16,
             height: height,
-            paddingTop: 64
           }}
           contentContainerStyle={{ paddingBottom: 100 }}
         >

src/screens/Activation/index.js

@@ -73,7 +73,7 @@ function Activation({ add, mobile, theme, route, orientation }) {
                     backgroundColor: Colors.theme1.greenCF + "0F",
                   }}
                 />
-                <View style={[tw("flex  w-full"), { paddingTop: 64 }]}>
+                <View style={[tw("flex  w-full")]}>
                   <TopHeader
                     background={bgQr}
                     title={"فعال‌سازی کتاب دیجیتال"}

src/screens/Address/index.js

@@ -392,7 +392,7 @@ const Address = ({
           back: true,
         }}
       />
-      <ScrollView style={[tw("flex-1 px-4"), { paddingTop: 64 }]}>
+      <ScrollView style={[tw("flex-1 px-4")]}>
         <KeyboardAvoidingView>
           <TouchableWithoutFeedback>
             <View style={tw("flex-1")}>

src/screens/Blog/index.js

@@ -305,8 +305,7 @@ const styles = StyleSheet.create({
     paddingBottom: 40,
   },
   container: {
-    paddingTop: 64,
+    paddingVertical: 0,
-    paddingBottom: 0,
     paddingHorizontal: 0,
   },
   font: {

src/screens/Blogs/index.js

@@ -169,8 +169,7 @@ const styles = StyleSheet.create({
     paddingTop: 0,
   },
   container: {
-    paddingBottom: 0,
+    paddingVertical: 0,
-    paddingTop: 64,
     paddingHorizontal: 0,
   },
 });

src/screens/Contact/index.js

@@ -107,7 +107,7 @@ function Contact({ theme }) {
         }}
       />
 
-      <ScrollView style={[tw("flex pb-20 px-4 mb-4"), { paddingTop: 64 }]}>
+      <ScrollView style={[tw("flex pb-20 px-4 mb-4")]}>
         <Header
           background={bgContact}
           title={"ارتباط با ما"}

src/screens/DeliveryForm/index.js

@@ -113,8 +113,7 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    paddingBottom: 5,
+    paddingVertical: 5,
-    paddingTop: 64
 
   },
 });

src/screens/Faq/index.js

@@ -67,7 +67,7 @@ function Faq({
           backgroundColor: Colors.theme1.greenCF + "0F",
         }}
       />
-      <View style={{ paddingTop: 64 }}>
+      <View>
         <Header
           background={bgFaq}
           title={"پرسش‌های متداول"}

src/screens/Home/index.js

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import { blog, book, user, userProduct } from "../../redux/actions";
+import { blog, book, user, userProduct, publicApi } from "../../redux/actions";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useNavigation } from "@react-navigation/native";
+import { copilot, walkthroughable, CopilotStep } from "react-native-copilot";
 
 import {
   View,
@@ -38,6 +40,9 @@ const Home = ({
   getBooks,
   getUserProducts,
   bottomNavigation,
+  setFirstLogin,
+  firstLogin,
+  ...props
 }) => {
   const navigation = useNavigation();
   const [position, setPosition] = useState("100%");
@@ -47,6 +52,16 @@ const Home = ({
     setPosition(position === "100%" ? "0%" : "100%");
   };
 
+  const getFirstLogin = React.useCallback(async () => {
+    const firstLoginFlag = await AsyncStorage.getItem("firstLogin");
+    if (!firstLoginFlag) {
+      AsyncStorage.setItem('firstLogin', JSON.stringify(true));
+      setTimeout(() => {
+        props.start();
+      }, 800);
+    }
+  }, [firstLogin]);
+
   React.useEffect(() => {
     if (!blogs) {
       getBlogs();
@@ -57,6 +72,8 @@ const Home = ({
     if (!userProducts) {
       getUserProducts();
     }
+
+    getFirstLogin();
   }, []);
 
   return (
@@ -107,8 +124,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: "column",
-    paddingBottom: 0,
+    paddingVertical: 0,
-    paddingTop: 64, 
     paddingHorizontal: 0,
   },
 });
@@ -119,12 +135,23 @@ const mapStateToProps = (state) => ({
   userProducts: state.userProduct.list,
   mobile: state.publicApi.isMobile,
   bottomNavigation: state.config.bottomNavigation,
+  firstLogin: state.publicApi.firstLogin,
 });
 
 const mapDispatchToProps = {
   getBlogs: blog.list,
   getBooks: book.list,
   getUserProducts: userProduct.list,
+  setFirstLogin: publicApi.setFirstLogin,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Home);
+const component = copilot({
+  labels: {
+    previous: "قبلی",
+    next: "بعدی",
+    skip: "رد کردن",
+    finish: "پایان",
+  },
+})(Home);
+
+export default connect(mapStateToProps, mapDispatchToProps)(component);

src/screens/OrderDetails/index.js

@@ -491,9 +491,8 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: "column",
-    paddingBottom: 0,
+    paddingVertical: 0,
     paddingHorizontal: 16,
-    paddingTop: 64,
   },
 });
 

src/screens/OrdersFollowUp/index.js

@@ -89,8 +89,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: "column",
-    paddingBottom: 0,
+    paddingVertical: 0,
-    paddingTop: 64,
     paddingHorizontal: 16,
   },
 });

src/screens/Product/index.js

@@ -57,8 +57,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: "column",
-    paddingBottom: 5,
+    paddingVertical: 5,
-    paddingTop: 64,
     paddingHorizontal: 16,
   },
 });

src/screens/Products/components/Header.js

@@ -12,7 +12,7 @@ import Select from "../../../components/Select";
 
 const Header = ({ setFilterOptions, filterOptions, levels, productTypes }) => {
   return (
-    <View style={tw("flex mt-14  px-4 h-32")}>
+    <View style={tw("flex px-4 h-32")}>
       <Search
         onChange={(val) => setFilterOptions({ ...filterOptions, search: val })}
         placeholder={"نام کتاب یا دوره را جستجو کنید"}

src/screens/Profile/index.js

@@ -149,8 +149,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: "column",
-    paddingBottom: 5,
+    paddingVertical: 5,
-    paddingTop: 64,
     paddingHorizontal: 16,
   },
 });

src/screens/QRContent/index.js

@@ -12,9 +12,9 @@ import Content from "./Content";
 import Navbar from "../../components/Navbar";
 
 //style
-import tw from 'tailwind-rn';
+import tw from "tailwind-rn";
 
-const {height} = Dimensions.get("window");
+const { height } = Dimensions.get("window");
 
 function QRContent({ route, getQrData, data, grades, theme }) {
   useEffect(() => {
@@ -39,10 +39,7 @@ function QRContent({ route, getQrData, data, grades, theme }) {
           back: true,
         }}
       />
-      <ScrollView
+      <ScrollView>
-
-        style={tw('pt-14')}
-      >
         {data ? <Content data={data} grades={grades} theme={theme} /> : null}
       </ScrollView>
     </SafeAreaView>
@@ -51,7 +48,7 @@ function QRContent({ route, getQrData, data, grades, theme }) {
 
 const mapStateToProps = (state) => ({
   data: state.qr.list,
-  grades : state.publicApi.grades,
+  grades: state.publicApi.grades,
   theme: state.publicApi.theme,
 });
 

src/screens/ShoppingCart/index.js

@@ -340,8 +340,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: "column",
-    paddingBottom: 5,
+    paddingVertical: 5,
-    paddingTop: 64,
     paddingHorizontal: 16,
   },
 });

src/screens/Video/index.js

@@ -220,8 +220,7 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    paddingBottom: 5,
+    paddingVertical: 5,
-    paddingTop: 64,
     paddingHorizontal: 16,
   },
 });

src/screens/VideoDisplay/index.js

@@ -129,8 +129,7 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    paddingBottom: 5,
+    paddingVertical: 5,
-    paddingTop: 64,
     paddingHorizontal: 16,
   },
 });

src/screens/Videos/index.js

@@ -92,8 +92,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: "column",
-    paddingBottom: 0,
+    paddingVertical: 0,
-    paddingTop: 64,
     paddingHorizontal: 16,
   },
 });