132 lines
No EOL
4.7 KiB
TypeScript
132 lines
No EOL
4.7 KiB
TypeScript
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
|
import React, { useState } from 'react'
|
|
import { useStore } from '../store/store'
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { ScrollView, TouchableWithoutFeedback } from 'react-native-gesture-handler';
|
|
import BackgroundDrinkInfo from "../components/BackgroundDrinkInfo";
|
|
import PaymentFooter from "../components/PaymentFooter";
|
|
|
|
|
|
const DetailDrink = ({navigation, route}: any) => {
|
|
const ItemOfIndex = useStore((state: any) =>
|
|
route.params.type == 'Donut' ? state.AllDonutMenu : state.AllDrinkMenu,
|
|
)[route.params.index];
|
|
|
|
const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
|
|
const deleteFromFavoriteList = useStore((state: any) => state.deleteFromFavoriteList);
|
|
|
|
//favorite functionality
|
|
const ToggleFavorite = (favourite: boolean, type: string, id: string) => {
|
|
favourite ? deleteFromFavoriteList(type, id) : addToFavoriteList(type, id)
|
|
}
|
|
|
|
//add to cart
|
|
const addToCart = useStore((state: any) => state.addToCart);
|
|
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
|
|
|
|
const addtoCartHandler = ({
|
|
id,
|
|
index,
|
|
name,
|
|
image_item,
|
|
type,
|
|
price
|
|
}: any) => {
|
|
addToCart({
|
|
id,
|
|
index,
|
|
name,
|
|
image_item,
|
|
type,
|
|
prices:[{...price, quantity:1}],
|
|
});
|
|
calculateCartPrice();
|
|
navigation.navigate('cart')
|
|
}
|
|
|
|
//backhandler functionality
|
|
const BackHandler = () => {
|
|
navigation.pop();
|
|
}
|
|
|
|
//desc
|
|
const [descriptionDrink, setDescriptionDrink] = useState(false);
|
|
|
|
//set prices
|
|
const [price, setPrice] = useState(ItemOfIndex.prices[0]);
|
|
|
|
|
|
|
|
return (
|
|
<View style={{flex: 1, backgroundColor: 'white'}}>
|
|
<StatusBar backgroundColor='dark'/>
|
|
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}>
|
|
<BackgroundDrinkInfo
|
|
EnableBackHandler={true}
|
|
type={ItemOfIndex.type}
|
|
id={ItemOfIndex.id}
|
|
image_item={ItemOfIndex.image_item}
|
|
favourite={ItemOfIndex.favourite}
|
|
name={ItemOfIndex.name}
|
|
calories={ItemOfIndex.calories}
|
|
average_rating={ItemOfIndex.average_rating}
|
|
ratings_count={ItemOfIndex.ratings_count}
|
|
BackHandler={BackHandler}
|
|
ToggleFavorite={ToggleFavorite}
|
|
/>
|
|
<View style={{padding: 10, marginHorizontal: 10, marginVertical: 10}}>
|
|
|
|
{descriptionDrink? (
|
|
<TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
|
|
<Text style={{color: 'gray', fontSize: 16}}>{ItemOfIndex.description}</Text>
|
|
</TouchableWithoutFeedback>
|
|
) : (
|
|
<TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
|
|
<Text style={{color: 'gray', fontSize: 16}} numberOfLines={3}>{ItemOfIndex.description}</Text>
|
|
</TouchableWithoutFeedback>
|
|
)}
|
|
|
|
<View style={{marginVertical: 20}}>
|
|
<Text style={{fontSize: 18, fontWeight: 500, color: '#EF5A6F'}}>Size</Text>
|
|
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', gap: 10}}>
|
|
{ItemOfIndex.prices.map((data: any) => (
|
|
<Pressable onPress={() => {setPrice(data)}} key={data.size} style={[styles.sizeBox, {borderColor: data.size == price.size ? '#DA7297' : 'gray', backgroundColor: data.size == price.size ? '#DA7297' : 'white'}]}>
|
|
<Text style={{fontSize: ItemOfIndex.type == 'Drink'? 14: 16, color: data.size == price.size ? 'white' : 'gray'}}>{data.size}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<PaymentFooter
|
|
price={price}
|
|
buttonTitle = 'Add to cart'
|
|
buttonPressHandler={() => {
|
|
addtoCartHandler({
|
|
id: ItemOfIndex.id,
|
|
index: ItemOfIndex.index,
|
|
name: ItemOfIndex.name,
|
|
image_item: ItemOfIndex.image_item,
|
|
type: ItemOfIndex.type,
|
|
price: price,
|
|
})
|
|
}}
|
|
/>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default DetailDrink
|
|
|
|
const styles = StyleSheet.create({
|
|
sizeBox:{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 10,
|
|
marginTop: 10,
|
|
borderRadius: 5,
|
|
borderWidth: 1
|
|
}
|
|
}) |