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