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.
 
 
 
 
 
 

268 lines
7.8 KiB

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 (
<SafeAreaView
style={{flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom}}>
<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.xl,
marginBottom: 0,
fontFamily: 'DemiBold',
}}>
{book?.name || ' '}
</Text>
<Text
style={{
color:
theme === 'light'
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: mobile ? fontSize.tiny : fontSize.lg,
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={
videoAvailableForSell
? `خرید با قیمت ${separate(videoProduct?.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: 'ادامه خرید',
},
)
: videoAvailableForSell
? addToCart(
pushToCart({
productId: videoProduct?.id,
userId: userId,
count: 1,
}),
)
: null
}
/>
</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}
index={index}
videoBuyed={videoBuyed}
/>
))}
</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,
availableForSell: state.config.availableForSell,
});
const mapDispatchToProps = {
getBook: publicApi.bookInfo,
pushToCart: userProduct.add,
getAvailableForSell: config.getAvailableForSell,
};
export default connect(mapStateToProps, mapDispatchToProps)(Product);