reza added drawer

master
Reza_ashrafi 3 years ago
parent a1f24d107b
commit bdde89c032
  1. 45
      navigation/index.js
  2. 107
      src/components/Drawer.js
  3. 26
      src/components/Navbar.js
  4. 65
      src/screens/Home/components/Scroll.js
  5. 2
      src/screens/Home/components/Videos.js
  6. 15
      src/screens/Home/index.js
  7. 24
      src/screens/Login/index.js
  8. 22
      src/screens/OrderDetails/components/Book.js
  9. 603
      src/screens/OrderDetails/index.js
  10. 35
      src/screens/OrdersFollowUp/components/Order.js
  11. 92
      src/screens/OrdersFollowUp/index.js
  12. 60
      src/screens/Otp/index.js
  13. 2
      src/screens/Product/index.js
  14. 2
      src/screens/QR/index.js
  15. 5
      src/screens/Splash/index.js
  16. 2
      src/services/api/oldindex.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>

@ -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;

@ -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>

@ -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,
},
],
};

@ -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>
);
};

@ -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")]}

@ -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);
};

@ -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>

@ -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 (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}>
<View
style={[
tw.style(
'flex flex-row-reverse w-full justify-between items-center p-3',
),
{backgroundColor: '#EEF7FF'},
]}>
<Text
<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}
>
<View
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#20297B'},
]}>
{_.join(['شماره سفارش:', order.number], ' ')}
</Text>
<View style={tw.style('flex flex-row-reverse items-center')}>
tw.style(
"flex flex-row-reverse w-full justify-between items-center p-3"
),
{ backgroundColor: "#EEF7FF" },
]}
>
<Text
style={[
tw.style('font-light'),
{color: '#20297B', fontSize: width / 32},
]}>
{status[order.status]}
{ fontSize: width / 36, color: "#20297B", fontFamily: "regular" },
]}
>
{_.join(["شماره سفارش:", order.number], " ")}
</Text>
<View
style={[
tw.style('h-4 w-4 rounded-full mr-2'),
{backgroundColor: colors[order.status]},
]}></View>
<View style={tw.style("flex flex-row-reverse items-center")}>
<Text
style={[
{ 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>
</View>
</View>
</View>
<View
style={[
tw.style('w-full flex flex-row-reverse py-4'),
{borderBottomWidth: 1, borderColor: '#86A0B933'},
]}>
<Text
<View
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
آدرس تحویل:
</Text>
<Text
style={[
tw.style('flex-1 font-light text-right mr-2'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{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 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('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{order.name}
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('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
شماره موبایل:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{order.cellphone}
</Text>
</View>
</View>
<View
style={[
tw.style('w-full rounded-md flex flex-col p-4 items-end mt-2'),
{backgroundColor: '#EEF6FF'},
]}>
<Text
<View
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
{_.join(['کد تحویل', order.receiveCode], ' ')}
</Text>
<Text
style={[
tw.style('font-light text-right mt-2'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
</Text>
</View>
<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')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
مبلغ سبد خرید:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{_.join([order.shoppingCardPrice, 'تومان'], ' ')}
</Text>
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={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
مشخصات تحویل گیرنده:
</Text>
<Text
style={[
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")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
شماره موبایل:
</Text>
<Text
style={[
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('flex flex-row-reverse')}>
<View
style={[
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'},
]}>
تخفیف:
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
{_.join(["کد تحویل", order.receiveCode], " ")}
</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 mt-1"),
{ fontSize: width / 40, color: "#05335F", fontFamily: "regular" },
]}
>
این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
</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')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
هزینه ارسال کالا:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{_.join([order.sendPrice, 'تومان'], ' ')}
</Text>
<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('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
جمع هزینه پرداختی:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{_.join([order.totalPrice, 'تومان'], ' ')}
</Text>
<View
style={[
tw.style("w-full flex flex-row-reverse justify-between py-4"),
]}
>
<View style={tw.style("flex flex-row-reverse")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
مبلغ سبد خرید:
</Text>
<Text
style={[
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")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
تخفیف:
</Text>
<Text
style={[
tw.style("font-light text-right mr-1"),
{
fontSize: width / 39,
color: "#05335F",
fontFamily: "regular",
},
]}
>
{_.join([order.discountPrice, "تومان"], " ")}
</Text>
</View>
</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')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
نحوه پرداخت:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{order.payMethod}
</Text>
<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")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
هزینه ارسال کالا:
</Text>
<Text
style={[
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")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
جمع هزینه پرداختی:
</Text>
<Text
style={[
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('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
شماره تراکنش:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{order.transactionNumber}
</Text>
<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")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
نحوه پرداخت:
</Text>
<Text
style={[
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")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
شماره تراکنش:
</Text>
<Text
style={[
tw.style("font-light text-right mr-1"),
{
fontSize: width / 39,
color: "#05335F",
fontFamily: "regular",
},
]}
>
{order.transactionNumber}
</Text>
</View>
</View>
</View>
<View
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'},
]}>
تاریخ تحویل:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{order.date}
</Text>
<View
style={[
tw.style("w-full flex flex-row-reverse justify-between py-4"),
]}
>
<View style={tw.style("flex flex-row-reverse")}>
<Text
style={[
{ fontSize: width / 36, color: "#05335F", fontFamily: "bold" },
]}
>
تاریخ تحویل:
</Text>
<Text
style={[
tw.style("font-light text-right mr-1"),
{
fontSize: width / 39,
color: "#05335F",
fontFamily: "regular",
},
]}
>
{order.date}
</Text>
</View>
</View>
</View>
</ScrollView>
</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",
},
};

@ -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>

@ -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 (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}>
{
orders.map((order, index) => <Order order={order} key={index} />)
}
</ScrollView>
<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} />
))}
</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",
},
],
};

@ -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",
}}
>
{"بازگشت به مرحله قبل و اصلاح شماره"}

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

@ -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}

@ -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]);

@ -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';

Loading…
Cancel
Save