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.
 
 
 
 
 

229 lines
6.4 KiB

import React from "react";
import {
View,
Text,
Dimensions,
StyleSheet,
Image,
TouchableOpacity,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { connect } from "react-redux";
import Svg, { Path } from "react-native-svg";
import moment from "jalali-moment";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const width = Dimensions.get("window").width;
const colors = {
1: "#FFF700",
4: "#FF0000",
3: "#4CFF00",
2: "#196EC0",
};
const status = {
1: "در حال پردازش",
4: "درخواست رد شد",
3: "تکمیل شد",
2: "ارسال شده",
};
function Order({ order, mobile, theme }) {
const navigation = useNavigation();
return (
<View
style={[
tw("w-full flex rounded-md overflow-hidden my-3"),
{
borderWidth: 1,
borderColor: Colors.theme1.greenCF + "22",
},
]}
>
<View
style={[
tw(
`flex flex-row-reverse w-full justify-between items-center ${
mobile ? "p-3" : "p-4"
}`
),
{ backgroundColor: Colors.theme1.greenCF + "1a" },
]}
>
<Text
style={[
tw("font-medium"),
{
fontSize: mobile ? fontSize.base : fontSize.xl,
color:
theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
fontFamily: mobile ? "regular" : "demi",
},
]}
>
{"شماره سفارش:" + " " + order?.transactionId}
</Text>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
tw("font-light"),
{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: mobile ? fontSize.sm : fontSize.lg,
fontFamily: mobile ? "bold" : "demi",
},
]}
>
{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 justify-between p-3")}>
<View style={tw("flex ")}>
<View style={tw("flex flex-row-reverse mb-2")}>
{order?.userProducts?.map((product, index) => (
<Image
key={index}
source={{
uri: `https://dnvn.ir/api/v1/file/${product?.product?.book?.fileIds}`,
}}
style={[
tw("rounded-md ml-1.5"),
{
width: mobile ? width / 5 : width / 7,
height: (mobile ? width / 5 : width / 7) * (4 / 3),
},
]}
/>
))}
</View>
<View style={[tw("")]}>
<Text
style={[
tw("py-2 rounded-md"),
{
textAlign: theme === "light" ? "center" : "right",
fontSize: mobile ? fontSize.sm : fontSize.lg,
fontFamily: "bold",
backgroundColor: theme === "light" ? "#F0FFF1" : null,
color: theme === "light" ? Colors.theme1.green79 : "#F0FFF1",
paddingHorizontal: theme === "light" ? 8 : 0,
},
]}
>
{"کد تحویل:" + " " + order?.followCode}
</Text>
</View>
</View>
<View style={tw("flex items-center mr-4")}>
<Text
style={[
tw("my-3"),
{
fontSize: mobile ? fontSize.tiny : fontSize.xl,
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
fontFamily: "bold",
},
]}
>
{"جمع فاکتور:" + " " + order?.payPrice}
</Text>
<TouchableOpacity
onPress={() => navigation.navigate("Order", { order: order })}
style={[
tw(
"rounded-md flex flex-row-reverse justify-center items-center px-5 py-2"
),
{
borderWidth: 1,
borderColor: Colors.theme1.greenCF,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.base : fontSize.xl,
color: Colors.theme1.greenCF,
fontFamily: "regular",
}}
>
جزئیات سفارش
</Text>
<Svg
xmlns="http://www.w3.org/2000/svg"
width={14.381}
height={14.381}
style={{ marginTop: 3, marginRight: 5 }}
strokeWidth={mobile ? 1 : 2}
>
<Path
d="M8.988 11.936 5.081 8.03a1.19 1.19 0 0 1 0-1.678l3.907-3.907"
fill="none"
stroke={Colors.theme1.greenCF}
strokeLinecap="round"
strokeLinejoin="round"
data-name="vuesax/linear/arrow-left"
/>
</Svg>
</TouchableOpacity>
<Text
style={[
tw("my-5"),
{
fontSize: mobile ? fontSize.sm : fontSize.lg,
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
fontFamily: "light",
},
]}
>
{"تاریخ سفارش:" +
" " +
moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}
</Text>
</View>
</View>
</View>
);
}
const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
export default connect(mapStateToProps)(Order);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
alignItems: "flex-end",
},
container: {
width: width,
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 5,
paddingHorizontal: 10,
},
});