cart

2025-11-14 14:44:46 +07:00
parent 0ca7536b70
commit f150a84cf0
10 changed files with 1581 additions and 184 deletions
--- a/components/CartItemCard.tsx
+++ b/components/CartItemCard.tsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { CartItem } from '../services/cart';
+
+interface CartItemCardProps {
+  item: CartItem;
+  onUpdateQuantity: (cartItemId: number, quantity: number) => Promise<boolean>;
+  onRemove: (cartItemId: number) => Promise<boolean>;
+}
+
+export default function CartItemCard({
+  item,
+  onUpdateQuantity,
+  onRemove,
+}: CartItemCardProps) {
+  const handleDecrease = async () => {
+    if (item.quantity > 1) {
+      const success = await onUpdateQuantity(item.cartItemId, item.quantity - 1);
+      if (!success) {
+        Alert.alert('Lỗi', 'Không thể cập nhật số lượng');
+      }
+    } else {
+      Alert.alert(
+        'Xác nhận',
+        'Bạn có muốn xóa sản phẩm này khỏi giỏ hàng?',
+        [
+          { text: 'Hủy', style: 'cancel' },
+          { 
+            text: 'Xóa', 
+            onPress: async () => {
+              const success = await onRemove(item.cartItemId);
+              if (!success) {
+                Alert.alert('Lỗi', 'Không thể xóa sản phẩm');
+              }
+            },
+            style: 'destructive' 
+          },
+        ]
+      );
+    }
+  };
+
+  const handleIncrease = async () => {
+    const success = await onUpdateQuantity(item.cartItemId, item.quantity + 1);
+    if (!success) {
+      Alert.alert('Lỗi', 'Không thể cập nhật số lượng');
+    }
+  };
+
+  const handleRemove = () => {
+    Alert.alert(
+      'Xác nhận',
+      'Bạn có chắc muốn xóa sản phẩm này?',
+      [
+        { text: 'Hủy', style: 'cancel' },
+        { 
+          text: 'Xóa', 
+          onPress: async () => {
+            const success = await onRemove(item.cartItemId);
+            if (!success) {
+              Alert.alert('Lỗi', 'Không thể xóa sản phẩm');
+            }
+          },
+          style: 'destructive' 
+        },
+      ]
+    );
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('vi-VN', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(price);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: item.productImage }}
+        style={styles.image}
+        resizeMode="cover"
+      />
+      
+      <View style={styles.info}>
+        <Text style={styles.name} numberOfLines={2}>
+          {item.productName}
+        </Text>
+        
+        <Text style={styles.price}>{formatPrice(item.price)}</Text>
+        
+        <View style={styles.footer}>
+          <View style={styles.quantityContainer}>
+            <TouchableOpacity
+              style={styles.quantityButton}
+              onPress={handleDecrease}
+            >
+              <Ionicons name="remove" size={18} color="#333" />
+            </TouchableOpacity>
+            
+            <Text style={styles.quantity}>{item.quantity}</Text>
+            
+            <TouchableOpacity
+              style={styles.quantityButton}
+              onPress={handleIncrease}
+            >
+              <Ionicons name="add" size={18} color="#333" />
+            </TouchableOpacity>
+          </View>
+          
+          <Text style={styles.subtotal}>{formatPrice(item.subtotal)}</Text>
+        </View>
+      </View>
+      
+      <TouchableOpacity style={styles.deleteButton} onPress={handleRemove}>
+        <Ionicons name="trash-outline" size={20} color="#ff4444" />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: '#fff',
+    padding: 12,
+    marginBottom: 12,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  image: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+    backgroundColor: '#f0f0f0',
+  },
+  info: {
+    flex: 1,
+    marginLeft: 12,
+    justifyContent: 'space-between',
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4,
+  },
+  price: {
+    fontSize: 14,
+    color: '#ff6b6b',
+    fontWeight: '500',
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  quantityContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    borderRadius: 6,
+    paddingHorizontal: 4,
+  },
+  quantityButton: {
+    width: 28,
+    height: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  quantity: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#333',
+    minWidth: 30,
+    textAlign: 'center',
+  },
+  subtotal: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#ff6b6b',
+  },
+  deleteButton: {
+    padding: 8,
+    justifyContent: 'flex-start',
+  },
+});
--- a/components/ProductCard.tsx
+++ b/components/ProductCard.tsx
@@ -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,
  },
 });