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.
268 lines
7.8 KiB
268 lines
7.8 KiB
import React, { useState, useRef } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
ScrollView, |
|
TouchableOpacity, |
|
Dimensions, |
|
StatusBar, |
|
} from "react-native"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { Entypo } from "@expo/vector-icons"; |
|
import CustomPressable from "../../../components/Pressable"; |
|
import Description from "./Description"; |
|
import LinkBox from "./LinkBox"; |
|
import Comments from "./Comments"; |
|
import Rates from "./Rates"; |
|
import ProductSpecifications from "../../../components/BottomSheetComponents/ProductSpecifications"; |
|
import ProductReview from "../../../components/BottomSheetComponents/ProductReview"; |
|
import ProductQuestion from "../../../components/BottomSheetComponents/ProductQuestion"; |
|
import tw from "tailwind-react-native-classnames"; |
|
import fontSize from "../../../constants/fontSize"; |
|
import { product, userProduct } from "../../../redux/actions"; |
|
import { connect } from "react-redux"; |
|
|
|
const { height } = Dimensions.get("window"); |
|
|
|
function Book({ book, grades, pushToCart, userId }) { |
|
const navigation = useNavigation(); |
|
const [type, setType] = useState(1); |
|
return ( |
|
<ScrollView style={[tw.style("flex flex-col flex-1")]}> |
|
<View style={tw.style("flex flex-row-reverse")}> |
|
<View style={[tw.style("rounded-md"), { height: 160, width: 110 }]}> |
|
<Image |
|
source={{ uri: `https://dnvn.ir/api/v1/file/${book.fileIds}` }} |
|
style={[tw.style("rounded-md h-full w-full")]} |
|
/> |
|
</View> |
|
|
|
<View |
|
style={[ |
|
tw.style("flex flex-col flex-1 justify-between items-end"), |
|
{ |
|
paddingRight: 10, |
|
}, |
|
]} |
|
> |
|
<View style={tw.style("flex flex-col items-end")}> |
|
<Text |
|
style={{ |
|
color: "#05335F", |
|
fontSize: fontSize.xl2, |
|
marginBottom: 5, |
|
fontFamily: "bold", |
|
}} |
|
> |
|
{book.product[type].name} |
|
</Text> |
|
<Text |
|
style={{ |
|
color: "#196EC0", |
|
fontSize: fontSize.base, |
|
fontFamily: "light", |
|
}} |
|
> |
|
{"پایه" + " " + grades[book.gradeId]} |
|
</Text> |
|
</View> |
|
<Text |
|
style={[ |
|
tw.style("text-right w-full"), |
|
{ color: "#323232", fontSize: fontSize.sm, fontFamily: "light" }, |
|
]} |
|
> |
|
{book.text} |
|
</Text> |
|
</View> |
|
</View> |
|
<View |
|
style={tw.style( |
|
"flex flex-row-reverse items-center justify-around py-6" |
|
)} |
|
> |
|
<View> |
|
<Text |
|
style={{ |
|
color: "#196EC0", |
|
textAlign: "center", |
|
fontSize: fontSize.sm, |
|
fontFamily: "regular", |
|
}} |
|
> |
|
{" "} |
|
{book.pagesNum + "\n" + "صفحه"} |
|
</Text> |
|
</View> |
|
<View |
|
style={{ backgroundColor: "#196EC055", height: 20, width: 2 }} |
|
></View> |
|
<View> |
|
<Text |
|
style={{ |
|
color: "#196EC0", |
|
textAlign: "center", |
|
fontSize: fontSize.sm, |
|
fontFamily: "regular", |
|
}} |
|
> |
|
{" "} |
|
{"فیزیکی- دیجیتالی - ویدئو" + "\n" + "در دسترس"} |
|
</Text> |
|
</View> |
|
<View |
|
style={{ backgroundColor: "#196EC055", height: 20, width: 2 }} |
|
></View> |
|
<View> |
|
<Text |
|
style={{ |
|
color: "#196EC0", |
|
textAlign: "center", |
|
fontSize: fontSize.sm, |
|
fontFamily: "regular", |
|
}} |
|
> |
|
{" "} |
|
{4.8 + "\n" + "امتیاز"} |
|
</Text> |
|
</View> |
|
</View> |
|
<View style={"flex flex-col mt-6"}> |
|
<Text |
|
style={[ |
|
tw.style("w-full text-right"), |
|
{ |
|
color: "#196EC0", |
|
fontSize: fontSize.base, |
|
fontFamily: "regular", |
|
}, |
|
]} |
|
> |
|
نسخه محصول را انتخاب کنید |
|
</Text> |
|
<View style={tw.style("flex justify-between")}></View> |
|
</View> |
|
<View |
|
style={tw.style("flex flex-row-reverse justify-between flex-wrap py-3")} |
|
> |
|
<CustomPressable |
|
title={"نسخه فیزیکی"} |
|
onPress={() => setType(1)} |
|
backgroundColor={type === 0 ? "transparent" : "#196EC0"} |
|
color={type === 0 ? "#196EC0" : "white"} |
|
border={{ color: "#196EC0", width: 1 }} |
|
width={"49%"} |
|
/> |
|
<CustomPressable |
|
onPress={() => setType(0)} |
|
title={"نسخه دیجیتال"} |
|
backgroundColor={type === 1 ? "transparent" : "#196EC0"} |
|
color={type === 1 ? "#196EC0" : "white"} |
|
border={{ color: "#196EC0", width: 1 }} |
|
width={"49%"} |
|
/> |
|
<CustomPressable |
|
title={`خرید با قیمت ${book.product[type].price} تومان`} |
|
backgroundColor="#196EC0" |
|
color={"white"} |
|
border={{ color: "#196EC0", width: 0 }} |
|
width={"65%"} |
|
onPress={() => |
|
pushToCart({ |
|
productId: book?.product[type]?.id, |
|
userId: userId, |
|
count: 1, |
|
}) |
|
} |
|
/> |
|
<CustomPressable |
|
title={"مشاهده نمونه"} |
|
backgroundColor="transparent" |
|
color={"#196EC0"} |
|
border={{ color: "#196EC0", width: 1 }} |
|
width={"33%"} |
|
onPress={() => {}} |
|
/> |
|
<TouchableOpacity |
|
style={[ |
|
tw.style( |
|
"w-full rounded-md flex flex-row justify-center items-center py-3 mt-4" |
|
), |
|
{ backgroundColor: "#196EC01a" }, |
|
]} |
|
onPress={() => navigation.navigate("Video", { id: book.id })} |
|
> |
|
<Entypo name="chevron-small-left" size={20} color="#196EC0" /> |
|
<Text |
|
style={[ |
|
tw.style(""), |
|
{ |
|
color: "#275077", |
|
fontSize: fontSize.base, |
|
fontFamily: "light", |
|
}, |
|
]} |
|
> |
|
مشاهده دوره ویدئویی این محصول |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
{book.product[type].description && ( |
|
<Description description={book.description} /> |
|
)} |
|
<LinkBox |
|
title="مشخصات محصول" |
|
key={"0"} |
|
component={<ProductSpecifications />} |
|
height={height - height / 4} |
|
/> |
|
<LinkBox |
|
title="نقد بررسی و توضیحات تکمیلی محصول" |
|
key={"1"} |
|
component={<ProductReview />} |
|
height={height - height / 4} |
|
/> |
|
<LinkBox |
|
title="پرسش و پاسخ" |
|
key={"2"} |
|
component={<ProductQuestion />} |
|
height={height - height / 4} |
|
/> |
|
{product.rates && ( |
|
<View |
|
style={tw.style( |
|
"flex flex-row-reverse justify-between items-center my-6" |
|
)} |
|
> |
|
<Text |
|
style={[ |
|
{ |
|
fontSize: fontSize.sm, |
|
color: "#275077", |
|
fontFamily: "regular", |
|
}, |
|
tw.style(""), |
|
]} |
|
> |
|
امتیازات و نظرات |
|
</Text> |
|
<Entypo name="chevron-small-left" size={20} color="#196EC0" /> |
|
</View> |
|
)} |
|
|
|
{/* <Rates rates={book.rates} /> */} |
|
<Comments comments={book.comments} /> |
|
</ScrollView> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
userId: state.user.status.id, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
pushToCart: userProduct.add, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Book);
|
|
|