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