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.
 
 
 
 
 

645 lines
21 KiB

import React, { useState, useEffect } from "react";
import {
View,
Text,
Image,
ScrollView,
TouchableHighlight,
Dimensions,
Appearance,
Pressable,
Platform,
ActivityIndicator,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { product, userProduct } from "../../../redux/actions";
import { connect } from "react-redux";
import { Entypo } from "@expo/vector-icons";
import separate from "../../../utils/separate";
//components
import CustomPressable from "../../../components/Pressable";
import Description from "./Description";
import LinkBox from "./LinkBox";
import Comments from "./Comments";
import ProductSpecifications from "../../../components/BottomSheetComponents/ProductSpecifications";
import ProductReview from "../../../components/BottomSheetComponents/ProductReview";
import ProductQuestion from "../../../components/BottomSheetComponents/ProductQuestion";
import Blur from "../../../components/Blur";
import ImageSlider from "../../../components/ImageSlider";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const { height, width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
function Book({
book,
grades,
pushToCart,
userId,
loading,
mobile,
userProducts,
}) {
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation();
const [type, setType] = useState(1);
const [pageLoading, setPageLoading] = useState(false);
const [imageSlider, setImageSlider] = useState(false);
useEffect(() => {
setPageLoading(true);
setTimeout(() => {
setPageLoading(false);
}, 500);
}, [type]);
const physicalAvailabileInCart = userProducts?.filter(
(product) => product?.productId === book?.product[1]?.id
)[0];
const digitalAvailabileInCart = userProducts?.filter(
(product) => product?.productId === book?.product[0]?.id
)[0];
return (
<ScrollView style={[tw("flex flex-1 relative")]}>
{!mobile && <View style={tw("mt-5")}></View>}
{pageLoading && (
<Pressable
style={[
tw("absolute left-0 top-0 rounded-md overflow-hidden"),
{
width: Dimensions.get("window").width,
height: height - 150,
zIndex: 1,
backgroundColor: Colors.theme1[colorScheme].white + "60",
},
]}
>
<Blur />
</Pressable>
)}
{imageSlider && <ImageSlider />}
<View style={[tw("flex flex-row-reverse")]}>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
resizeMode="contain"
style={[
tw("rounded-sm bg-red-400"),
{ height: ((width / 3) * 4) / 2.6, width: width / 3 },
]}
/>
<View
style={[
tw("flex flex-1 justify-between items-end"),
{
paddingRight: 10,
},
]}
>
<View style={tw("flex items-end")}>
<Text
style={{
color: Colors.theme1[colorScheme].green79,
fontSize: mobile ? fontSize.base : fontSize.xl3,
marginBottom: 5,
fontFamily: "bold",
textAlign: ios ? "right" : "auto",
}}
>
{book?.name}
</Text>
<Text
style={{
color: Colors.theme1[colorScheme].green79,
fontSize: mobile ? fontSize.tiny : fontSize.xl,
fontFamily: "regular",
}}
>
{"پایه" + " " + grades[book?.gradeId]}
</Text>
</View>
<Text
style={[
tw("text-right w-full"),
{ color: "#323232", fontSize: fontSize.sm, fontFamily: "light" },
]}
>
{book?.text}
</Text>
</View>
</View>
<View
style={tw("flex flex-row-reverse items-center justify-around py-8")}
>
<View>
<Text
style={{
color: Colors.theme1[colorScheme].green79,
textAlign: "center",
fontSize: mobile ? fontSize.tiny : fontSize.lg,
fontFamily: "regular",
}}
>
{" "}
{book?.pagesNum + "\n" + "صفحه"}
</Text>
</View>
<View
style={{
backgroundColor: Colors.theme1[colorScheme].green79 + "55",
height: 20,
width: 2,
}}
></View>
<View>
<Text
style={{
color: Colors.theme1[colorScheme].green79,
textAlign: "center",
fontSize: mobile ? fontSize.tiny : fontSize.lg,
fontFamily: "regular",
}}
>
{" "}
{"فیزیکی- دیجیتالی - ویدئو" + "\n" + "در دسترس"}
</Text>
</View>
<View
style={{
backgroundColor: Colors.theme1[colorScheme].green79 + "55",
height: 20,
width: 2,
}}
></View>
<View>
<Text
style={{
color: Colors.theme1[colorScheme].green79,
textAlign: "center",
fontSize: mobile ? fontSize.tiny : fontSize.lg,
fontFamily: "regular",
}}
>
{" "}
{4.8 + "\n" + "امتیاز"}
</Text>
</View>
</View>
<View style={"flex mt-8"}>
<Text
style={[
tw("w-full text-right"),
{
color: Colors.theme1[colorScheme].green79,
fontSize: mobile ? fontSize.tiny : fontSize.lg,
fontFamily: "demi",
},
]}
>
نسخه محصول را انتخاب کنید
</Text>
<View style={tw("flex justify-between")}></View>
</View>
<View style={tw("flex flex-row-reverse justify-between flex-wrap py-3")}>
<TouchableHighlight
underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
style={[
tw("flex flex-row-reverse w-full justify-between px-2 py-3 mb-4"),
{
borderWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
},
]}
onPress={() =>
pushToCart({
productId: book?.product[1]?.id,
userId: userId,
count: 1,
})
}
>
<>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.sm,
color: Colors.theme1[colorScheme].green79,
paddingVertical: 4,
}}
>
خرید نسخه فیزیکی کتاب
</Text>
<View style={tw("flex flex-row-reverse items-center")}>
<View style={tw("w-px h-full bg-green-300")}></View>
<View style={tw("flex")}>
<Text
style={[
tw("py-1 pr-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.sm,
},
]}
>
{separate(book?.product[1]?.price) + " " + "تومان"}
</Text>
{physicalAvailabileInCart && (
<View
style={tw(
`flex items-center pl-3 ${
ios ? "flex-row-reverse" : "flex-row-reverse"
}`
)}
>
<Pressable
onPress={() =>
pushToCart({
productId: physicalAvailabileInCart?.productId,
userId: physicalAvailabileInCart.userId,
count: 1,
})
}
style={[
tw(
`rounded-md py-0 flex flex-row justify-center items-center border ${
mobile ? "px-1.5" : "px-3"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
}}
>
+
</Text>
</Pressable>
{loading ? (
<ActivityIndicator
style={tw("mx-1.5 my-3")}
size="small"
color={Colors.theme1[colorScheme].greenBA}
/>
) : (
<Text
style={[
tw("mx-1.5"),
{
fontSize: fontSize.xl6,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
},
]}
>
{physicalAvailabileInCart?.count}
</Text>
)}
<Pressable
onPress={() =>
pushToCart({
productId: physicalAvailabileInCart?.productId,
userId: physicalAvailabileInCart?.userId,
count: -1,
})
}
style={[
tw(
`rounded-md flex flex-row justify-center items-center border ${
mobile ? "px-2" : "px-3.5"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "demi",
}}
>
-
</Text>
</Pressable>
</View>
)}
</View>
</View>
</>
</TouchableHighlight>
<TouchableHighlight
underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
style={[
tw("flex flex-row-reverse justify-between px-2 py-3 mb-4"),
{
borderWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
width: width - 32 - 8 - (fontSize.sm * 6 + 18),
},
]}
onPress={() =>
pushToCart({
productId: book?.product[0]?.id,
userId: userId,
count: 1,
})
}
>
<>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.sm,
color: Colors.theme1[colorScheme].green79,
paddingVertical: 4,
}}
>
خرید نسخه دیجیتال کتاب
</Text>
<View style={tw("flex")}>
<Text
style={[
tw("py-1 pr-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.sm,
},
]}
>
{separate(book?.product[0]?.price) + " " + "تومان"}
</Text>
{digitalAvailabileInCart && (
<View
style={tw(
`flex items-center pl-3 ${
ios ? "flex-row-reverse" : "flex-row-reverse"
}`
)}
>
<Pressable
onPress={() =>
pushToCart({
productId: digitalAvailabileInCart?.productId,
userId: digitalAvailabileInCart.userId,
count: 1,
})
}
style={[
tw(
`rounded-md py-0 flex flex-row justify-center items-center border ${
mobile ? "px-1.5" : "px-3"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
}}
>
+
</Text>
</Pressable>
{loading ? (
<ActivityIndicator
style={tw("mx-1.5 my-3")}
size="small"
color={Colors.theme1[colorScheme].greenBA}
/>
) : (
<Text
style={[
tw("mx-1.5"),
{
fontSize: fontSize.xl6,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
},
]}
>
{digitalAvailabileInCart?.count}
</Text>
)}
<Pressable
onPress={() =>
pushToCart({
productId: digitalAvailabileInCart?.productId,
userId: digitalAvailabileInCart?.userId,
count: -1,
})
}
style={[
tw(
`rounded-md flex flex-row justify-center items-center border ${
mobile ? "px-2" : "px-3.5"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "demi",
}}
>
-
</Text>
</Pressable>
</View>
)}
</View>
</>
</TouchableHighlight>
<TouchableHighlight
underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
style={[
tw("flex flex-row-reverse justify-center px-2 py-3 mb-4"),
{
borderWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
width: fontSize.sm * 6 + 18,
},
]}
onPress={() => navigation.push("Sample", { id: book?.sampleFileId })}
>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.sm,
color: Colors.theme1[colorScheme].green79,
paddingVertical: 4,
}}
>
مشاهده نمونه
</Text>
</TouchableHighlight>
<TouchableHighlight
underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
style={[
tw("flex flex-row-reverse justify-between px-2 py-3 mb-4"),
{
borderWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
width: width - 32 - 8 - (fontSize.sm * 6 + 18),
},
]}
onPress={() =>
pushToCart({
productId: book?.product[2]?.id,
userId: userId,
count: 1,
})
}
>
<>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.sm,
color: Colors.theme1[colorScheme].green79,
paddingVertical: 4,
}}
>
خرید دوره ویدئویی کتاب
</Text>
<View style={tw("flex flex-row-reverse")}>
<View style={tw("w-px h-full bg-green-500")}></View>
<Text
style={[
tw("py-1 pr-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.sm,
},
]}
>
{separate(book?.product[2]?.price) + " " + "تومان"}
</Text>
</View>
</>
</TouchableHighlight>
<TouchableHighlight
underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
style={[
tw("flex flex-row-reverse justify-center px-2 py-3 mb-4"),
{
borderWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
width: fontSize.sm * 6 + 18,
},
]}
onPress={() => navigation.navigate("Video", { id: book?.id })}
>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.sm,
color: Colors.theme1[colorScheme].green79,
paddingVertical: 4,
}}
>
پیش نمایش
</Text>
</TouchableHighlight>
</View>
{book?.product[type]?.description && (
<Description description={book?.description} />
)}
<LinkBox
title="مشخصات محصول"
key={"0"}
component={
<ProductSpecifications list={book?.product[type]?.properties} />
}
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("flex flex-row-reverse justify-between items-center my-6")}
>
<Text
style={[
{
fontSize: fontSize.sm,
color: "#275077",
fontFamily: "regular",
},
tw(""),
]}
>
امتیازات و نظرات
</Text>
<Entypo name="chevron-small-left" size={20} color="#196EC0" />
</View>
)}
{/* <Rates rates={book.rates} /> */}
<Comments comments={book?.comments} />
</ScrollView>
);
}
const mapStateToProps = (state) => ({
userProducts: state.userProduct.list,
userId: state.user.status?.id,
loading: state.userProduct.loading,
mobile: state.publicApi.mobile,
});
const mapDispatchToProps = {
pushToCart: userProduct.add,
};
export default connect(mapStateToProps, mapDispatchToProps)(Book);