import React, {useState, useEffect} from 'react'; import { View, StyleSheet, Dimensions, ScrollView, StatusBar, LayoutAnimation, Image, Text, Appearance, } from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; import {useNavigation} from '@react-navigation/native'; import {connect} from 'react-redux'; import {publicApi, userProduct, config} 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, getAvailableForSell, availableForSell, }) { const insets = useSafeAreaInsets(); const [position, setPosition] = useState('100%'); const navigation = useNavigation(); const [addedFlag, setAddedFlag] = React.useState(false); useEffect(() => { getAvailableForSell(); getBook({bookId: route.params.id}, {id: route.params.id, vod: true}); }, []); const setBoxPosition = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setPosition(position === '100%' ? '0%' : '100%'); }; const videoProduct = React.useMemo(() => { return book?.product?.filter(product => product?.productType === 4)[0]; }, [book]); const videoAvailabileInCart = React.useMemo(() => { return userProducts?.filter( product => product?.productId === videoProduct?.id && product?.condition < 2, )?.length; }, [userProducts, book]); const videoBuyed = React.useMemo(() => { return userProducts?.filter( product => product?.productId === videoProduct?.id && product?.condition >= 2, )?.length; }, [userProducts, book]); const videoAvailableForSell = React.useMemo(() => { return availableForSell?.filter(product => product === 4)?.length; }, [availableForSell]); 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 ( {!mobile ? : null} {book?.name || ' '} {'پایه' + ' ' + (grades[book?.gradeId] || ' ')} videoAvailabileInCart ? asyncAwesomeAlert( '', 'این محصول قبلا به سبد خرید شما اضافه شده است.', { showCancelButton: true, onConfirm: () => navigation.navigate('Root', { screen: 'ShoppingCartTab', }), confirmText: 'مشاهده سبد خرید', cancelText: 'ادامه خرید', }, ) : videoAvailableForSell ? addToCart( pushToCart({ productId: videoProduct?.id, userId: userId, count: 1, }), ) : null } /> {seasons ?.sort((a, b) => a[0]?.categoryId - b[0]?.categoryId) ?.map((season, index) => ( ))} ); } 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, availableForSell: state.config.availableForSell, }); const mapDispatchToProps = { getBook: publicApi.bookInfo, pushToCart: userProduct.add, getAvailableForSell: config.getAvailableForSell, }; export default connect(mapStateToProps, mapDispatchToProps)(Product);