132 lines
3.4 KiB
TypeScript
132 lines
3.4 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useRouter } from 'expo-router';
|
|
import { View, Text, Button, Alert, StyleSheet } from 'react-native';
|
|
import { getAuth } from 'firebase/auth';
|
|
import { collection, addDoc } from 'firebase/firestore'; // Make sure these are imported
|
|
import { db } from '@/firebase/config'; // Ensure this path is correct
|
|
import { useCart } from '@/app/context/cartContext';
|
|
|
|
const CartScreen = () => {
|
|
const { cart, clearCart } = useCart();
|
|
const auth = getAuth();
|
|
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
|
|
const router = useRouter();
|
|
|
|
// Check if the user is logged in when the component mounts
|
|
useEffect(() => {
|
|
const user = auth.currentUser;
|
|
if (user) {
|
|
setIsAuthenticated(true);
|
|
} else {
|
|
setIsAuthenticated(false);
|
|
router.push('../screens/auth/SignInScreen'); // Redirect to sign-in screen if not logged in
|
|
}
|
|
}, [auth, router]);
|
|
|
|
const handleConfirmOrder = async () => {
|
|
if (!isAuthenticated) {
|
|
Alert.alert('Erreur', 'Utilisateur non connecté.');
|
|
return;
|
|
}
|
|
|
|
if (cart.total <= 0) {
|
|
Alert.alert('Panier vide', 'Veuillez ajouter des produits à votre panier');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const userId = auth.currentUser?.uid;
|
|
if (!userId) {
|
|
Alert.alert('Erreur', 'Utilisateur non connecté.');
|
|
return;
|
|
}
|
|
|
|
const orderData: any = {
|
|
userId,
|
|
status: 'En attente',
|
|
};
|
|
|
|
cart.items.forEach((item, index) => {
|
|
orderData[`item${index + 1}`] = [item.quantity, item.productName];
|
|
});
|
|
|
|
await addDoc(collection(db, 'orders'), orderData);
|
|
|
|
Alert.alert('Commande confirmée', 'Votre commande a été enregistrée.');
|
|
clearCart();
|
|
} catch (error) {
|
|
console.error('Erreur de commande', error);
|
|
Alert.alert('Erreur', "Impossible d'enregistrer la commande.");
|
|
}
|
|
};
|
|
|
|
if (!isAuthenticated) {
|
|
return <Text>Chargement...</Text>; // Loading state while checking authentication
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>Votre Panier</Text>
|
|
|
|
{cart.items.length === 0 ? (
|
|
<Text style={styles.empty}>Votre panier est vide.</Text>
|
|
) : (
|
|
cart.items.map((item, index) => (
|
|
<View key={index} style={styles.itemContainer}>
|
|
<Text style={styles.itemText}>
|
|
{item.productName} - Quantité : {item.quantity}
|
|
</Text>
|
|
</View>
|
|
))
|
|
)}
|
|
|
|
{cart.items.length > 0 && (
|
|
<View style={styles.buttonContainer}>
|
|
<Button title="Confirmer la commande" onPress={handleConfirmOrder} color="#8B4513" />
|
|
<View style={{ marginTop: 10 }}>
|
|
<Button title="Vider le panier" onPress={clearCart} color="#A52A2A" />
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 20,
|
|
backgroundColor: '#FFF',
|
|
flexGrow: 1,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
marginBottom: 15,
|
|
textAlign: 'center',
|
|
color: '#5A3E36',
|
|
},
|
|
empty: {
|
|
fontSize: 16,
|
|
color: '#777',
|
|
textAlign: 'center',
|
|
marginTop: 50,
|
|
},
|
|
itemContainer: {
|
|
backgroundColor: '#F5F5DC',
|
|
padding: 15,
|
|
marginBottom: 10,
|
|
borderRadius: 10,
|
|
borderColor: '#DDD',
|
|
borderWidth: 1,
|
|
},
|
|
itemText: {
|
|
fontSize: 16,
|
|
color: '#333',
|
|
},
|
|
buttonContainer: {
|
|
marginTop: 30,
|
|
},
|
|
});
|
|
|
|
export default CartScreen;
|