kendu/project_it207_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cart

Browse Source
This commit is contained in:
kenduNMT
2025-11-14 14:44:46 +07:00
parent 0ca7536b70
commit f150a84cf0
10 changed files with 1581 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
components/ProductCard.tsx
View File

@@ -1,7 +1,9 @@
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ProductResponse } from '../services/product';
import { useRouter } from 'expo-router';
import { useCart } from '../hooks/useCart';
interface ProductCardProps {
product: ProductResponse;
@@ -9,11 +11,28 @@ interface ProductCardProps {
const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
const router = useRouter();
const { addToCart } = useCart();
const [isAdding, setIsAdding] = useState(false);
const handlePress = () => {
router.push(`/products/${product.productId}`);
};
const handleAddToCart = async (e: any) => {
e.stopPropagation(); // Ngăn chặn việc navigate khi click vào nút giỏ hàng
if (product.stockQuantity <= 0) {
return; // Không cho thêm vào giỏ nếu hết hàng
}
setIsAdding(true);
try {
await addToCart(product.productId, 1);
} finally {
setIsAdding(false);
}
};
const formatPrice = (price: number) => {
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
@@ -23,29 +42,59 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
return (
<TouchableOpacity style={styles.card} onPress={handlePress} activeOpacity={0.7}>
<Image
source={{ uri: product.imageUrl || 'https://via.placeholder.com/150' }}
style={styles.image}
resizeMode="cover"
/>
<View style={styles.imageContainer}>
<Image
source={{ uri: product.imageUrl || 'https://via.placeholder.com/150' }}
style={styles.image}
resizeMode="cover"
/>
{/* Category Badge */}
<View style={styles.categoryBadge}>
<Text style={styles.categoryText}>{product.categoryName}</Text>
</View>
{/* Out of Stock Overlay */}
{product.stockQuantity <= 0 && (
<View style={styles.outOfStockOverlay}>
<Text style={styles.outOfStockText}>HẾT HÀNG</Text>
</View>
)}
</View>
<View style={styles.content}>
<Text style={styles.productName} numberOfLines={2}>
{product.productName}
</Text>
<Text style={styles.categoryName} numberOfLines={1}>
{product.categoryName}
</Text>
<View style={styles.priceContainer}>
<Text style={styles.price}>{formatPrice(product.price)}</Text>
{product.stockQuantity > 0 ? (
<View style={styles.stockBadge}>
<View style={styles.footer}>
<View style={styles.priceSection}>
<Text style={styles.price}>{formatPrice(product.price)}</Text>
{product.stockQuantity > 0 && (
<Text style={styles.stockText}>Còn {product.stockQuantity}</Text>
</View>
) : (
<View style={[styles.stockBadge, styles.outOfStock]}>
<Text style={[styles.stockText, styles.outOfStockText]}>Hết hàng</Text>
</View>
)}
)}
</View>
{/* Add to Cart Button */}
<TouchableOpacity
style={[
styles.addButton,
product.stockQuantity <= 0 && styles.addButtonDisabled,
]}
onPress={handleAddToCart}
disabled={product.stockQuantity <= 0 || isAdding}
activeOpacity={0.7}
>
{isAdding ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Ionicons
name="cart-outline"
size={22}
color={product.stockQuantity <= 0 ? '#999' : '#fff'}
/>
)}
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
@@ -65,11 +114,46 @@ const styles = StyleSheet.create({
elevation: 3,
overflow: 'hidden',
},
image: {
imageContainer: {
position: 'relative',
width: '100%',
height: 200,
},
image: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0',
},
categoryBadge: {
position: 'absolute',
top: 12,
left: 12,
backgroundColor: 'rgba(255, 107, 107, 0.95)',
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 6,
},
categoryText: {
fontSize: 12,
color: '#fff',
fontWeight: '600',
},
outOfStockOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
outOfStockText: {
fontSize: 18,
fontWeight: '700',
color: '#fff',
letterSpacing: 2,
},
content: {
padding: 12,
},
@@ -77,39 +161,44 @@ const styles = StyleSheet.create({
fontSize: 16,
fontWeight: '600',
color: '#333',
marginBottom: 4,
},
categoryName: {
fontSize: 13,
color: '#666',
marginBottom: 8,
minHeight: 44,
},
priceContainer: {
footer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
priceSection: {
flex: 1,
},
price: {
fontSize: 18,
fontWeight: '700',
color: '#e91e63',
},
stockBadge: {
backgroundColor: '#4caf50',
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 4,
color: '#ff6b6b',
marginBottom: 2,
},
stockText: {
fontSize: 12,
color: '#fff',
color: '#4caf50',
fontWeight: '500',
},
outOfStock: {
backgroundColor: '#f44336',
addButton: {
width: 44,
height: 44,
backgroundColor: '#ff6b6b',
borderRadius: 22,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#ff6b6b',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
elevation: 4,
},
outOfStockText: {
color: '#fff',
addButtonDisabled: {
backgroundColor: '#ccc',
shadowOpacity: 0,
},
});