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.
 
 
 
 
 

244 lines
6.8 KiB

import React, { useState, useEffect } from "react";
import {
View,
StyleSheet,
Dimensions,
ScrollView,
SafeAreaView,
StatusBar,
LayoutAnimation,
Image,
Text,
Appearance,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { connect } from "react-redux";
import { publicApi, userProduct } from "../../redux/actions";
import separate from "../../utils/separate";
import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
//components
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import Divider from "../../components/Divider";
import Season from "./components/Season";
import CustomPressable from "../../components/Pressable";
//style
import tw from "tailwind-rn";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
const { height, width } = Dimensions.get("window");
function Product({
route,
getBook,
book,
seasons,
grades,
isLogin,
userId,
pushToCart,
loading,
mobile,
theme,
userProducts,
}) {
const [position, setPosition] = useState("100%");
const navigation = useNavigation();
const [addedFlag, setAddedFlag] = React.useState(false);
useEffect(() => {
getBook({ bookId: route.params.id }, { id: route.params.id, vod: true });
}, []);
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
const videoAvailabileInCart = React.useMemo(() => {
return userProducts?.filter(
(product) => product?.productId === book?.product[2]?.id
)[0];
}, [userProducts, book]);
const addToCart = React.useCallback(
async (action) => {
setAddedFlag(true);
await action();
},
[book, userId]
);
React.useEffect(() => {
if (videoAvailabileInCart && addedFlag) {
setAddedFlag(false);
asyncAwesomeAlert("", "به سبد خرید اضافه شد", {
showCancelButton: false,
onConfirm: () =>
navigation.navigate("Root", {
screen: "ShoppingCartTab",
}),
confirmText: "مشاهده سبد خرید",
});
}
}, [userProducts]);
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Navbar
setBoxPosition={setBoxPosition}
headerOptions={{
logo: true,
menu: false,
hamburgerMenu: false,
title: "",
bookmark: false,
qr: true,
back: true,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
{!mobile ? <View style={tw("mt-5")}></View> : null}
<View style={[tw(" w-full flex ")]}>
<View
style={[
tw(
"w-full flex flex-row-reverse flex-1 relative overflow-hidden"
),
]}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
resizeMode="contain"
style={[
tw("rounded-sm ml-2"),
{
height: mobile ? ((width / 3) * 4) / 2.6 : 300,
width: mobile ? width / 3 : 210,
},
]}
/>
<View style={tw("flex items-end flex-1")}>
<Text
style={{
marginTop: 5,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: mobile ? fontSize.base : fontSize.xl3,
marginBottom: 0,
fontFamily: "demi",
}}
>
{book?.name}
</Text>
<Text
style={{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: mobile ? fontSize.tiny : fontSize.xl,
marginTop: 10,
fontFamily: "regular",
}}
>
{"پایه" + " " + grades[book?.gradeId]}
</Text>
</View>
</View>
<View
style={[
tw("flex flex-1 justify-between"),
{
paddingRight: 10,
},
]}
>
<Divider type={"vertical"} />
</View>
<CustomPressable
title={`خرید با قیمت ${separate(
book?.product[2]?.price || " "
)} تومان`}
backgroundColor={Colors.theme1.greenCF}
color={"white"}
border={{ color: "#196EC0", width: 0 }}
width={"100%"}
loading={loading}
onPress={() =>
videoAvailabileInCart
? asyncAwesomeAlert(
"",
"این محصول قبلا به سبد خرید شما اضافه شده است.",
{
showCancelButton: true,
onConfirm: () =>
navigation.navigate("Root", {
screen: "ShoppingCartTab",
}),
confirmText: "مشاهده سبد خرید",
cancelText: "ادامه خرید",
}
)
: addToCart(
pushToCart({
productId: book?.product[2]?.id,
userId: userId,
count: 1,
})
)
}
/>
</View>
<View style={tw("flex")}>
{seasons
?.sort((a, b) => a[0]?.categoryId - b[0]?.categoryId)
?.map((season, index) => (
<Season season={season} key={index} id={book?.id} />
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
},
container: {
paddingVertical: 5,
paddingHorizontal: 16,
},
});
const mapStateToProps = (state) => ({
book: state.book.info,
userProducts: state.userProduct.list,
seasons: state.publicApi.categories,
grades: state.publicApi.grades,
isLogin: state.user.status,
userId: state.user.status?.id,
loading: state.userProduct.loading,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
getBook: publicApi.bookInfo,
pushToCart: userProduct.add,
};
export default connect(mapStateToProps, mapDispatchToProps)(Product);