wishlist

components/ProductCard.tsx

@@ -1,28 +1,32 @@
 import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator, Alert } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { ProductResponse } from '../services/product';
 import { useRouter } from 'expo-router';
 import { useCart } from '../hooks/useCart';
+import { wishlistApi } from '../services/wishlistApi ';
 
 interface ProductCardProps {
   product: ProductResponse;
+  onWishlistToggle?: (isAdded: boolean) => void;
 }
 
-const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
+const ProductCard: React.FC<ProductCardProps> = ({ product, onWishlistToggle }) => {
   const router = useRouter();
   const { addToCart } = useCart();
   const [isAdding, setIsAdding] = useState(false);
+  const [isInWishlist, setIsInWishlist] = useState(false);
+  const [isLoadingWishlist, setIsLoadingWishlist] = 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
+    e.stopPropagation();
     
     if (product.stockQuantity <= 0) {
-      return; // Không cho thêm vào giỏ nếu hết hàng
+      return;
     }
 
     setIsAdding(true);
@@ -33,6 +37,37 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
     }
   };
 
+  const handleToggleWishlist = async (e: any) => {
+    e.stopPropagation();
+    setIsLoadingWishlist(true);
+    
+    try {
+      if (isInWishlist) {
+        const response = await wishlistApi.removeFromWishlist(product.productId);
+        if (response.success) {
+          setIsInWishlist(false);
+          onWishlistToggle?.(false);
+          Alert.alert('Thành công', response.message);
+        } else {
+          Alert.alert('Lỗi', response.message);
+        }
+      } else {
+        const response = await wishlistApi.addToWishlist(product.productId);
+        if (response.success) {
+          setIsInWishlist(true);
+          onWishlistToggle?.(true);
+          Alert.alert('Thành công', response.message);
+        } else {
+          Alert.alert('Lỗi', response.message);
+        }
+      }
+    } catch (error) {
+      Alert.alert('Lỗi', error instanceof Error ? error.message : 'Lỗi không xác định');
+    } finally {
+      setIsLoadingWishlist(false);
+    }
+  };
+
   const formatPrice = (price: number) => {
     return new Intl.NumberFormat('vi-VN', {
       style: 'currency',
@@ -54,6 +89,26 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
           <Text style={styles.categoryText}>{product.categoryName}</Text>
         </View>
 
+        {/* Wishlist Button */}
+        <TouchableOpacity
+          style={[
+            styles.wishlistButton,
+            isInWishlist && styles.wishlistButtonActive,
+          ]}
+          onPress={handleToggleWishlist}
+          disabled={isLoadingWishlist}
+        >
+          {isLoadingWishlist ? (
+            <ActivityIndicator size="small" color={isInWishlist ? '#ff6b6b' : '#fff'} />
+          ) : (
+            <Ionicons
+              name={isInWishlist ? 'heart' : 'heart-outline'}
+              size={20}
+              color={isInWishlist ? '#ff6b6b' : '#fff'}
+            />
+          )}
+        </TouchableOpacity>
+
         {/* Out of Stock Overlay */}
         {product.stockQuantity <= 0 && (
           <View style={styles.outOfStockOverlay}>
@@ -138,6 +193,20 @@ const styles = StyleSheet.create({
     color: '#fff',
     fontWeight: '600',
   },
+  wishlistButton: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wishlistButtonActive: {
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
   outOfStockOverlay: {
     position: 'absolute',
     top: 0,

components/WishlistButton.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import {
+    TouchableOpacity,
+    StyleSheet,
+    Text,
+    View,
+    Alert,
+    ActivityIndicator,
+} from 'react-native';
+import { AntDesign } from '@expo/vector-icons';
+import { wishlistApi } from '../services/wishlistApi ';
+
+interface WishlistButtonProps {
+    productId: number;
+    onToggle?: (isAdded: boolean) => void;
+    style?: any;
+    size?: 'small' | 'medium' | 'large';
+    showLabel?: boolean;
+    isInWishlist?: boolean;
+}
+
+const COLORS = {
+    primary: '#FF6B6B',
+    secondary: '#4ECDC4',
+    white: '#FFFFFF',
+    text: '#2C3E50',
+    lightText: '#95A5A6',
+    border: '#E0E0E0',
+};
+
+const WishlistButton: React.FC<WishlistButtonProps> = ({
+    productId,
+    onToggle,
+    style,
+    size = 'medium',
+    showLabel = false,
+    isInWishlist: initialIsInWishlist = false,
+}) => {
+    const [isInWishlist, setIsInWishlist] = useState(initialIsInWishlist);
+    const [loading, setLoading] = useState(false);
+
+    const getSizeStyles = () => {
+        switch (size) {
+            case 'small':
+                return {
+                    buttonSize: 32,
+                    iconSize: 16,
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    fontSize: 12,
+                };
+            case 'large':
+                return {
+                    buttonSize: 56,
+                    iconSize: 28,
+                    paddingHorizontal: 16,
+                    paddingVertical: 12,
+                    fontSize: 16,
+                };
+            default: // medium
+                return {
+                    buttonSize: 44,
+                    iconSize: 20,
+                    paddingHorizontal: 12,
+                    paddingVertical: 8,
+                    fontSize: 14,
+                };
+        }
+    };
+
+    const sizeStyles = getSizeStyles();
+
+    const handleToggleWishlist = async () => {
+        setLoading(true);
+        try {
+            if (isInWishlist) {
+                // Remove from wishlist
+                const response = await wishlistApi.removeFromWishlist(productId);
+                if (response.success) {
+                    setIsInWishlist(false);
+                    Alert.alert('Thành công', response.message);
+                    onToggle?.(false);
+                } else {
+                    Alert.alert('Lỗi', response.message);
+                }
+            } else {
+                // Add to wishlist
+                const response = await wishlistApi.addToWishlist(productId);
+                if (response.success) {
+                    setIsInWishlist(true);
+                    Alert.alert('Thành công', response.message);
+                    onToggle?.(true);
+                } else {
+                    Alert.alert('Lỗi', response.message);
+                }
+            }
+        } catch (error) {
+            Alert.alert(
+                'Lỗi',
+                error instanceof Error ? error.message : 'Lỗi không xác định'
+            );
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (size === 'large' && showLabel) {
+        return (
+            <TouchableOpacity
+                style={[styles.largeButtonContainer, style]}
+                onPress={handleToggleWishlist}
+                disabled={loading}
+                activeOpacity={0.7}
+            >
+                <View
+                    style={[
+                        styles.largeButton,
+                        isInWishlist && styles.largeButtonActive,
+                    ]}
+                >
+                    {loading ? (
+                        <ActivityIndicator color={isInWishlist ? COLORS.white : COLORS.primary} />
+                    ) : (
+                        <AntDesign
+                            name={isInWishlist ? ('heart' as any) : ('hearto' as any)}
+                            size={sizeStyles.iconSize}
+                            color={isInWishlist ? COLORS.white : COLORS.primary}
+                        />
+                    )}
+                    <Text
+                        style={[
+                            styles.largeButtonLabel,
+                            isInWishlist && styles.largeButtonLabelActive,
+                        ]}
+                    >
+                        {isInWishlist ? 'Đã yêu thích' : 'Yêu thích'}
+                    </Text>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+
+    return (
+        <TouchableOpacity
+            style={[
+                styles.button,
+                {
+                    width: sizeStyles.buttonSize,
+                    height: sizeStyles.buttonSize,
+                    borderRadius: sizeStyles.buttonSize / 2,
+                    paddingHorizontal: sizeStyles.paddingHorizontal,
+                    paddingVertical: sizeStyles.paddingVertical,
+                },
+                isInWishlist && styles.buttonActive,
+                style,
+            ]}
+            onPress={handleToggleWishlist}
+            disabled={loading}
+            activeOpacity={0.7}
+        >
+            {loading ? (
+                <ActivityIndicator
+                    color={isInWishlist ? COLORS.white : COLORS.primary}
+                />
+            ) : (
+                <>
+                    <AntDesign
+                        name={isInWishlist ? ('heart' as any) : ('hearto' as any)}
+                        size={sizeStyles.iconSize}
+                        color={isInWishlist ? COLORS.white : COLORS.primary}
+                    />
+                    {showLabel && (
+                        <Text
+                            style={[
+                                { fontSize: sizeStyles.fontSize },
+                                isInWishlist ? styles.labelActive : styles.label,
+                            ]}
+                        >
+                            {isInWishlist ? 'Đã thích' : 'Thích'}
+                        </Text>
+                    )}
+                </>
+            )}
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: COLORS.white,
+        borderWidth: 2,
+        borderColor: COLORS.primary,
+    },
+    buttonActive: {
+        backgroundColor: COLORS.primary,
+        borderColor: COLORS.primary,
+    },
+    label: {
+        color: COLORS.primary,
+        fontWeight: '600',
+        marginTop: 4,
+    },
+    labelActive: {
+        color: COLORS.white,
+        fontWeight: '600',
+        marginTop: 4,
+    },
+    largeButtonContainer: {
+        width: '100%',
+    },
+    largeButton: {
+        flexDirection: 'row',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        backgroundColor: COLORS.white,
+        borderWidth: 2,
+        borderColor: COLORS.primary,
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 8,
+    },
+    largeButtonActive: {
+        backgroundColor: COLORS.primary,
+        borderColor: COLORS.primary,
+    },
+    largeButtonLabel: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: COLORS.primary,
+    },
+    largeButtonLabelActive: {
+        color: COLORS.white,
+    },
+});
+
+export default WishlistButton;