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

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