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.
		
		
		
		
		
			
		
			
				
					
					
						
							487 lines
						
					
					
						
							15 KiB
						
					
					
				
			
		
		
	
	
							487 lines
						
					
					
						
							15 KiB
						
					
					
				| import React, { useState, useEffect } from "react"; | |
| import { | |
|   View, | |
|   Text, | |
|   Image, | |
|   ScrollView, | |
|   TouchableHighlight, | |
|   Dimensions, | |
|   Appearance, | |
|   Platform, | |
| } from "react-native"; | |
| import { useNavigation } from "@react-navigation/native"; | |
| import { product, userProduct } from "../../../redux/actions"; | |
| import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers"; | |
| import { connect } from "react-redux"; | |
| import { Entypo } from "@expo/vector-icons"; | |
| import separate from "../../../utils/separate"; | |
| 
 | |
| //components | |
| 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"; | |
| import Rates from "./Rates"; | |
| 
 | |
| //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, | |
|   userProductsLoading, | |
|   userFavoriteLoading, | |
|   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 = React.useMemo(() => { | |
|     return userProducts?.filter( | |
|       (product) => product?.productId === book?.product[1]?.id | |
|     )[0]; | |
|   }, [userProducts, book]); | |
| 
 | |
|   const digitalAvailabileInCart = React.useMemo(() => { | |
|     return userProducts?.filter( | |
|       (product) => product?.productId === book?.product[0]?.id | |
|     )[0]; | |
|   }, [userProducts, book]); | |
| 
 | |
|   return ( | |
|     <ScrollView style={[tw("flex  flex-1 relative")]}> | |
|       {!mobile && <View style={tw("mt-5")}></View>} | |
|       {(!book || userFavoriteLoading) && ( | |
|         <View | |
|           style={[ | |
|             tw("absolute left-0 top-0 rounded-md overflow-hidden"), | |
|             { | |
|               width: Dimensions.get("window").width, | |
|               height: height - 200, | |
|               zIndex: 1, | |
|               backgroundColor: Colors.theme1[colorScheme].white + "60", | |
|             }, | |
|           ]} | |
|         > | |
|           <Blur /> | |
|         </View> | |
|       )} | |
|       {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"), | |
|             { 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={() => | |
|             physicalAvailabileInCart | |
|               ? asyncAwesomeAlert( | |
|                   "نتیجه", | |
|                   "این محصول قبلا به سبد خرید اضافه شده است.", | |
|                   { | |
|                     showCancelButton: false, | |
|                   } | |
|                 ) | |
|               : 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"), | |
|                     { | |
|                       fontFamily: "bold", | |
|                       color: Colors.theme1[colorScheme].green79, | |
|                       fontSize: fontSize.sm, | |
|                     }, | |
|                   ]} | |
|                 > | |
|                   {separate(book?.product[1]?.price) + " " + "تومان"} | |
|                 </Text> | |
|               </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={() => | |
|             digitalAvailabileInCart | |
|               ? asyncAwesomeAlert( | |
|                   "خطا", | |
|                   "این محصول قبلا به سبد خرید اضافه شده است.", | |
|                   { | |
|                     showCancelButton: false, | |
|                   } | |
|                 ) | |
|               : 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"), | |
|                   { | |
|                     borderRightWidth: 1, | |
|                     borderColor: Colors.theme1[colorScheme].greenCF, | |
|                     fontFamily: "bold", | |
|                     color: Colors.theme1[colorScheme].green79, | |
|                     fontSize: fontSize.sm, | |
|                   }, | |
|                 ]} | |
|               > | |
|                 {separate(book?.product[0]?.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.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"), | |
|                   { | |
|                     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 / 2} | |
|       /> | |
|       <LinkBox | |
|         title="نقد بررسی و توضیحات تکمیلی محصول" | |
|         key={"1"} | |
|         component={<ProductReview />} | |
|         height={height / 2} | |
|       /> | |
|       <LinkBox | |
|         title="پرسش و پاسخ" | |
|         key={"2"} | |
|         component={<ProductQuestion />} | |
|         height={height / 2} | |
|       /> | |
|       {(product.rate || 4) && ( | |
|         <> | |
|           <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 rate={book?.rate || 4} /> | |
|           <Comments comments={book?.comments} productId={book?.product[1]?.id} /> | |
|         </> | |
|       )} | |
|     </ScrollView> | |
|   ); | |
| } | |
| 
 | |
| const mapStateToProps = (state) => ({ | |
|   userProducts: state.userProduct.list, | |
|   userId: state.user.status?.id, | |
|   userProductsLoading: state.userProduct.loading, | |
|   userFavoriteLoading: state.userFavorite.loading, | |
|   mobile: state.publicApi.mobile, | |
| }); | |
| 
 | |
| const mapDispatchToProps = { | |
|   pushToCart: userProduct.add, | |
| }; | |
| 
 | |
| export default connect(mapStateToProps, mapDispatchToProps)(Book);
 | |
| 
 |