111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
import { getStyles } from './cartScreen.styles';
|
|
import { Header, QuantitySelector, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { useAppDispatch, useAppSelector } from '../../../hooks/useAppDispatch';
|
|
import { removeItem, applyCoupon, removeCoupon, selectCartTotal } from '../../../store/cartSlice';
|
|
|
|
export const CartScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const dispatch = useAppDispatch();
|
|
const { items, couponCode } = useAppSelector((state) => state.cart);
|
|
const totals = useAppSelector(selectCartTotal);
|
|
const [couponInput, setCouponInput] = useState('');
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Cart" onBack={() => {}} />
|
|
<FlatList
|
|
data={items}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.cartItem}>
|
|
<View style={styles.itemInfo}>
|
|
<Text style={styles.itemTitle}>{item.item.title}</Text>
|
|
<Text style={styles.itemPrice}>₹{item.item.price}</Text>
|
|
</View>
|
|
<QuantitySelector
|
|
value={item.quantity}
|
|
onIncrement={() => {}}
|
|
onDecrement={() => dispatch(removeItem(item.item.id))}
|
|
/>
|
|
</View>
|
|
)}
|
|
ListFooterComponent={
|
|
<View style={styles.footer}>
|
|
<View style={styles.couponRow}>
|
|
<TextInput
|
|
style={styles.couponInput}
|
|
placeholder="Enter coupon code"
|
|
placeholderTextColor={colors.placeholder}
|
|
value={couponInput}
|
|
onChangeText={setCouponInput}
|
|
/>
|
|
<TouchableOpacity
|
|
style={styles.applyButton}
|
|
onPress={() => {
|
|
if (couponCode) {
|
|
dispatch(removeCoupon());
|
|
setCouponInput('');
|
|
} else if (couponInput) {
|
|
dispatch(applyCoupon(couponInput));
|
|
}
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.applyButtonText}>
|
|
{couponCode ? 'Remove' : 'Apply'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.feeRow}>
|
|
<Text style={styles.feeLabel}>Subtotal</Text>
|
|
<Text style={styles.feeValue}>₹{totals.subtotal}</Text>
|
|
</View>
|
|
<View style={styles.feeRow}>
|
|
<Text style={styles.feeLabel}>Delivery Fee</Text>
|
|
<Text style={styles.feeValue}>₹{totals.deliveryFee}</Text>
|
|
</View>
|
|
<View style={styles.feeRow}>
|
|
<Text style={styles.feeLabel}>Platform Fee</Text>
|
|
<Text style={styles.feeValue}>₹{totals.platformFee}</Text>
|
|
</View>
|
|
{totals.discount > 0 && (
|
|
<View style={styles.feeRow}>
|
|
<Text style={[styles.feeLabel, { color: colors.primary }]}>
|
|
Discount
|
|
</Text>
|
|
<Text style={[styles.feeValue, { color: colors.primary }]}>
|
|
-₹{totals.discount}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
<View style={[styles.feeRow, styles.totalRow]}>
|
|
<Text style={styles.totalLabel}>Total</Text>
|
|
<Text style={styles.totalValue}>₹{totals.total}</Text>
|
|
</View>
|
|
</View>
|
|
}
|
|
contentContainerStyle={styles.list}
|
|
/>
|
|
<View style={styles.bottomPanel}>
|
|
<Text style={styles.bottomTotal}>Total: ₹{totals.total}</Text>
|
|
<PrimaryButton
|
|
title="View Bill"
|
|
onPress={() => {}}
|
|
style={{ flex: 1, marginLeft: 12 }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|