Cart Logic v2

app/_layout.tsx

@@ -4,11 +4,14 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import React from 'react';
 import { CartProvider } from '../context/cartContext'
+import { StatusBar } from 'expo-status-bar';
+
 
 export default function Layout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider>
+      <StatusBar style="inverted" animated />
         <CartProvider>
         <Stack screenOptions={{ headerShown: false}} />
         </CartProvider>

app/screens/auth/OpeningScreen.tsx

@@ -9,7 +9,7 @@ const OpeningScreen = () => {
 
   return (
     <View style={styles.container}>
-          <StatusBar style="inverted" />
+
       <Image source={require('@/assets/images/logo.png')} style={styles.logo} />
       <Text style={styles.welcomeText}>Bienvenue chez Brix Café</Text>
       <Image source={require('@/assets/images/coffee_cup.jpg')} style={styles.coffeeImage} />

app/screens/user/CartScreen.tsx

@@ -132,8 +132,21 @@ export default function CartScreen() {
           </Animated.Text>
         </View>
 
-        <TouchableOpacity style={styles.ConfirmButton} onPress={handleConfirmOrder} disabled={totalAmount <= 0}>
+        <TouchableOpacity style={styles.ConfirmButton} 
-          <Text style={styles.ConfirmButtonText}>Ajouter au panier</Text>
+          onPress={() => {
+            Alert.alert(
+              'Confirmer la commande',
+              'Êtes-vous sûr de vouloir confirmer la commande?',
+              [
+                {text : 'Annuler', style: 'cancel'},
+                {text: 'Confirmer', style: 'destructive', onPress: handleConfirmOrder }
+              ]
+            );
+          }
+
+          } 
+          disabled={totalAmount <= 0}>
+            <Text style={styles.ConfirmButtonText}>Ajouter au panier</Text>
         </TouchableOpacity>
 
         <TouchableOpacity style={styles.clearCartButton} 

app/screens/user/GrainsScreen.tsx

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { ArrowLeft } from 'lucide-react-native';
 import { router } from "expo-router";
@@ -10,11 +10,13 @@ import { db } from '@/firebase/config';
 import { Product } from '@/constants/types';  
 
 export default function GrainsScreen() {
-  const [products, setProducts] = useState<Product[]>([]); 
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchProducts = async () => {
       try {
+        setLoading(true);
         const querySnapshot = await getDocs(collection(db, 'products'));
         const items: Product[] = querySnapshot.docs.map(doc => ({
           id: doc.id,
@@ -23,6 +25,8 @@ export default function GrainsScreen() {
         setProducts(items);
       } catch (error) {
         console.error("Erreur lors de la récupération des produits :", error);
+      } finally {
+        setLoading(false);
       }
     };
     fetchProducts();
@@ -37,11 +41,18 @@ export default function GrainsScreen() {
         <Text style={styles.headerTitle}>Grains de café</Text>
       </View>
 
-      <ScrollView style={styles.content}>
+      {loading ? (
-        {products.map((product) => (
+        <View style={styles.loadingContainer}>
-          <ProductCard key={product.id} {...product} />
+          <ActivityIndicator size="large" color={COLORS.primary} />
-        ))}
+          <Text style={styles.loadingText}>Chargement...</Text>
-      </ScrollView>
+        </View>
+      ) : (
+        <ScrollView contentContainerStyle={styles.content}>
+          {products.map((product) => (
+            <ProductCard key={product.id} {...product} />
+          ))}
+        </ScrollView>
+      )}
     </SafeAreaView>
   );
 }
@@ -73,8 +84,18 @@ const styles = StyleSheet.create({
     color: '#333',
   },
   content: {
-    flex: 1,
+    padding: 15,
-    padding: 30,
     backgroundColor: COLORS.background_user,
+    paddingBottom: 10,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: '#666',
   },
 });

app/screens/user/ProductDetailsScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, Image, TouchableOpacity, ActivityIndicator,Alert } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { useFocusEffect } from '@react-navigation/native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { ChevronLeft, Minus, Plus } from 'lucide-react-native';
 import { doc, getDoc } from 'firebase/firestore';
@@ -51,6 +52,15 @@ export default function ProductScreen() {
     fetchProductDetails();
   }, [productId]);
 
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setQuantity(1); 
+      return () => {};
+    }, [])
+  );
+  
+
   // Add item to cart
 const { addItem } = useCart();
 

app/screens/user/UserHomeScreen.tsx

@@ -1,15 +1,50 @@
-import React, { useCallback } from 'react';
+import React, { useCallback,useEffect, useState } from 'react';
-import { View, Text, StyleSheet, Image,BackHandler } from 'react-native';
+import { View, Text, StyleSheet, Image,BackHandler,ActivityIndicator } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useRouter } from 'expo-router';
 import { BellRing } from 'lucide-react-native';
 import COLORS from '@/constants/colors';
 import { useFocusEffect } from '@react-navigation/native';
+import { db } from '@/firebase/config'; // Firebase configuration
+import { doc, getDoc } from 'firebase/firestore';
+import { getAuth } from 'firebase/auth'; // Import Firebase Authentication
 
 
 
 const UserHomeScreen = () => {
   const router = useRouter();
+  const [coffeeShopName, setCoffeeShopName] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch the current user's UID
+  const currentUser = getAuth().currentUser; // Get the current user from Firebase Authentication
+
+  // Fetch coffee shop name based on the current user's ownerId
+  useEffect(() => {
+    const fetchCoffeeShopName = async () => {
+      if (currentUser) {
+        try {
+          const docRef = doc(db, 'coffee_shops', currentUser.uid); // Use the user's UID to fetch data
+          const docSnap = await getDoc(docRef);
+          if (docSnap.exists()) {
+            const data = docSnap.data();
+            setCoffeeShopName(data?.cafeName || "Nom de Café");
+          } else {
+            console.log("No such coffee shop!");
+            setCoffeeShopName("Nom de Café");
+          }
+        } catch (error) {
+          console.error("Error fetching coffee shop data:", error);
+          setCoffeeShopName("Nom de Café");
+        } finally {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchCoffeeShopName();
+  }, [currentUser]);
+
 // Empêcher retour arrière
 useFocusEffect(
   useCallback(() => {
@@ -24,7 +59,11 @@ useFocusEffect(
         <View style={styles.header}>
           <View>
             <Text style={styles.welcome}>Bienvenue,</Text>
-            <Text style={styles.shopName}>Nom de Café</Text>
+            {loading ? (
+            <ActivityIndicator size="small" color={COLORS.primary} />
+          ) : (
+            <Text style={styles.shopName}>{coffeeShopName}</Text>
+          )}
           </View>
           <View style={styles.notification}>
             <TouchableOpacity>

app/screens/user/_layout.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from 'expo-router';
-import { Home, Coffee, User } from 'lucide-react-native';
+import { Home, Coffee, User,ShoppingCartIcon } from 'lucide-react-native';
 import { StyleSheet } from 'react-native';
 
 export default function UserLayout() {
@@ -30,7 +30,7 @@ export default function UserLayout() {
         name="CartScreen"
         options={{
           title: 'Cart',
-          tabBarIcon: ({ color, size }) => <Coffee size={size} color={color} />,
+          tabBarIcon: ({ color, size }) => <ShoppingCartIcon size={size} color={color} />,
         }}
       />
       <Tabs.Screen

components/ProductCard.tsx

@@ -22,6 +22,7 @@ export default function ProductCard({
   inStock = true,
 }: ProductCardProps) {
   const router = useRouter();
+  console.log(image); // Log the image URL to ensure it's correct
 
 
   return (
@@ -40,6 +41,7 @@ export default function ProductCard({
         resizeMode="cover"
         onError={(error) => console.log('Image loading error:', error.nativeEvent.error)}
       />
+      
       <View style={styles.content}>
         <View>