77 lines
No EOL
3 KiB
TypeScript
77 lines
No EOL
3 KiB
TypeScript
import { View, Text, ScrollView, Image, Pressable} from 'react-native'
|
|
import React from 'react'
|
|
import { useStore } from '../store/store';
|
|
import PaymentFooter from '../components/PaymentFooter';
|
|
import CartItem from '../components/CartItem';
|
|
|
|
|
|
|
|
|
|
|
|
const Cart = ({navigation, route}: any) => {
|
|
const CartList = useStore((state: any) => state.CartList);
|
|
const CartPrice = useStore((state: any) => state.CartPrice);
|
|
const addCartItemQuantity = useStore((state: any) => state.addCartItemQuantity);
|
|
const removeCartItemQuantity = useStore((state: any) => state.removeCartItemQuantity);
|
|
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
|
|
//console.log("CartList =", CartList.length)
|
|
|
|
const buttonPressHandler = () => {
|
|
navigation.push('payment', {amount: CartPrice});
|
|
}
|
|
//add to cart functionality
|
|
const addCartItemQuantityHandler = (id: string, size: string) => {
|
|
addCartItemQuantity(id, size);
|
|
calculateCartPrice();
|
|
};
|
|
//remove from cart functionality
|
|
const removeCartItemQuantityHandler = (id: string, size: string) => {
|
|
removeCartItemQuantity(id, size);
|
|
calculateCartPrice();
|
|
};
|
|
|
|
|
|
return (
|
|
<View style={{flex: 1, backgroundColor: 'white'}}>
|
|
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
|
|
<View style={{flex: 1, justifyContent: 'space-between'}}>
|
|
<View style={{marginTop: 20, paddingVertical: 10, paddingHorizontal: 20}}>
|
|
<Text style={{fontSize: 30, fontWeight: 600}}>Cart</Text>
|
|
{CartList.length == 0 ? (
|
|
<View style={{marginVertical: 50, alignItems: 'center'}}>
|
|
<Image source={require('../../assets/images/misc/empty_bag.png')} style={{ width: 200, height: 200, resizeMode: "contain"}} />
|
|
<Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>Your cart is empty!</Text>
|
|
</View>
|
|
):(
|
|
<View style={{gap: 10, marginTop: 20}}>
|
|
{CartList.map((data: any)=> (
|
|
<Pressable key={data.id} onPress={() => {
|
|
navigation.push('detail', {index: data.index, id:data.id, type: data.type})
|
|
}}>
|
|
<CartItem
|
|
id = {data.id}
|
|
name = {data.name}
|
|
donutname= {data.donutname}
|
|
prices = {data.prices}
|
|
type = {data.type}
|
|
image_item = {data.image_item}
|
|
addCartItemQuantityHandler = {addCartItemQuantityHandler}
|
|
removeCartItemQuantityHandler = {removeCartItemQuantityHandler}
|
|
/>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
{CartList.length != 0 ? (
|
|
<PaymentFooter buttonTitle='Pay' price={{price:CartPrice, currency: '$'}} buttonPressHandler={buttonPressHandler}/>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default Cart |