You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

525 lines
15 KiB

import React, { useState } from "react";
import {
View,
Text,
Dimensions,
StyleSheet,
ScrollView,
SafeAreaView,
Platform,
StatusBar,
LayoutAnimation,
} from "react-native";
import { connect } from "react-redux";
import moment from "jalali-moment";
//components
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import Book from "./components/Book";
//style
import tw from "tailwind-rn";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
//assets
import b1Image from "./assets/b1.png";
const width = Dimensions.get("window").width;
const colors = {
1: "#FFF700",
4: "#FF0000",
3: "#4CFF00",
2: "#196EC0",
};
const status = {
1: "در حال پردازش",
4: "درخواست رد شد",
3: "تکمیل شد",
2: "ارسال شده",
};
function OrderDetails({ mobile, route, theme }) {
const { order } = route?.params;
const [position, setPosition] = useState("100%");
React.useEffect(() => {
StatusBar.setBarStyle(
`${theme === "light" ? "dark" : "light"}-content`,
true
);
}, [theme]);
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
setBoxPosition={setBoxPosition}
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "",
bookmark: false,
qr: false,
back: true,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
<View
style={[
tw(
`flex flex-row-reverse w-full justify-between items-center ${
mobile ? "p-3" : "p-4"
}`
),
{ backgroundColor: Colors.theme1.greenCF + "1a" },
]}
>
<View
style={tw(
"w-full flex flex-row-reverse justify-between items-center"
)}
>
<Text
style={[
{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: mobile ? fontSize.sm : fontSize.tiny,
fontFamily: "bold",
},
]}
>
{status[order?.condition]}
</Text>
<View
style={[
tw("h-4 w-4 rounded-full mr-2"),
{ backgroundColor: colors[order?.condition] },
]}
></View>
</View>
</View>
<View
style={[
tw("w-full flex flex-row-reverse items-center py-4"),
{
borderBottomWidth: 1,
borderColor:
Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
},
]}
>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
آدرس تحویل:
</Text>
<Text
style={[
tw("flex-1 font-light text-right mr-2"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
// lineHeight: mobile ? 17 : "auto",
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{order.recieverAddress || " "}
</Text>
</View>
<View
style={[
tw("w-full flex flex-row-reverse justify-between py-4"),
{
borderBottomWidth: 1,
borderColor:
Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
},
]}
>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
مشخصات تحویل گیرنده:
</Text>
<Text
style={[
tw("font-light text-right mr-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
// lineHeight: mobile ? 17 : "auto",
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{order?.recieverName || " "}
</Text>
</View>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
شماره موبایل:
</Text>
<Text
style={[
tw("text-right mr-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
// lineHeight: mobile ? 17 : "auto",
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{order?.recieverPhone || " "}
</Text>
</View>
</View>
<View
style={[
tw("w-full rounded-md flex p-4 items-end mt-7 mb-4"),
{
backgroundColor:
theme === "light" ? Colors.theme1.greenFF1 + "aa" : null,
borderWidth: theme === "light" ? 0 : 1,
borderColor: Colors.theme1.greenFF1,
},
]}
>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
{"کد تحویل" + " " + order?.recieverPostalCode}
</Text>
<Text
style={[
tw("font-light text-right mt-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
</Text>
</View>
<View style={tw("w-full flex items-end")}>
{order?.userProducts?.map((item, index) => (
<Book book={item} key={index} />
))}
</View>
<View style={[tw("w-full flex flex-row-reverse justify-between py-4")]}>
<View style={tw("flex flex-row-reverse")}>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
مبلغ سبد خرید:
</Text>
<Text
style={[
tw("font-light text-right mr-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{order?.sumPrice + " " + "تومان"}
</Text>
</View>
</View>
<View
style={[
tw("w-full flex flex-row-reverse justify-between py-4"),
{
borderBottomWidth: 1,
borderColor:
Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
},
]}
>
<View style={tw("flex flex-row-reverse")}>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
هزینه ارسال کالا:
</Text>
<Text
style={[
tw("font-light text-right mr-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{order?.transportPrice + " " + "تومان"}
</Text>
</View>
<View style={tw("flex flex-row-reverse")}>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
جمع هزینه پرداختی:
</Text>
<Text
style={[
tw("font-light text-right mr-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{order?.payPrice + " " + "تومان"}
</Text>
</View>
</View>
<View
style={[
tw("w-full flex flex-row-reverse justify-between py-4"),
{
borderBottomWidth: 1,
borderColor:
Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
},
]}
>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
شماره تراکنش:
</Text>
<Text
style={[
tw("font-light text-right mr-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{order?.transactionId}
</Text>
</View>
</View>
<View style={[tw("w-full flex flex-row-reverse justify-between py-4")]}>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
تاریخ سفارش:
</Text>
<Text
style={[
tw("font-light text-right mr-1"),
{
fontSize: mobile ? fontSize.sm : fontSize.tiny,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "regular",
},
]}
>
{moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}
</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
alignItems: "flex-end",
},
container: {
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 16,
},
});
const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
export default connect(mapStateToProps)(OrderDetails);
OrderDetails.defaultProps = {
order: {
number: "535353523653",
receiveCode: "300031",
status: 2,
items: [b1Image, b1Image],
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",
},
};