Merge pull request #27 from bhagirathpaliyal/Order

added order status change functionality

Author: bhagirathpaliyal

src/components/Item.jsx

@@ -6,6 +6,9 @@ import { Button } from "@mui/material";
 import { createOrder } from "./store/feature/orderSlice";
 
 function Item(prop) {
+
+  const [status, setStatus] = useState('Ordered')
+
   const user = useSelector((state) => {
     return state.auth.user;
   });
@@ -58,7 +61,7 @@ function Item(prop) {
             onClick={() => {
                console.log(prop.data.ref)
               dispatch(
-                createOrder({ userId: user.uid , merchantId: prop.data.merchantId , productRef:prop.data.productRef})
+                createOrder({ userId: user.uid , merchantId: prop.data.merchantId , productRef:prop.data.productRef,status})
               );
             }}
           >

src/components/Order/Order.jsx

@@ -7,14 +7,13 @@ import OrderCard from './OrderCard';
 
 const Order = () => {
   const [loading, setLoading] = useState(true); 
-  const [status, setStatus] = useState('Ordered')
   const user = useSelector((state) => state.auth.user);
   const dispatch = useDispatch();
   const orderItems = useSelector((state) => state.order.items);
 const skeleton=[1,2,3,4,5,6,7,8,9,10,11,12];
   useEffect(() => {
     if (user) {
-      dispatch(fetchOrder(status))
+      dispatch(fetchOrder())
         .finally(() => setLoading(false)); 
     }
   }, [user, dispatch]);
@@ -37,7 +36,7 @@ console.log(orderItems)
           <div className='flex flex-col gap-[20px] justify-center '>
             {orderItems.length > 0 ? (
               orderItems.map((item, index) => (
-                item.user.email === user.email && ( <OrderCard key={index}  data={item
+                item?.user.email === user?.email && ( <OrderCard key={index}  data={item
                 }  />)
               ))
             ) : (

src/components/Order/OrderCard.jsx

@@ -39,7 +39,7 @@ const OrderCard = ({ data }) => {
         open={isPopupOpen}
         onClose={() => setIsPopupOpen(false)}
         order={data.orderId}
-        orderStatus={data.orderStatus}
+        orderStatus={data.status}
       />
 
       </CardContent>

src/components/Order/OrderDetails.jsx

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Stepper, Step, StepLabel } from '@mui/material';
 import { CheckCircle, LocalShipping, Cancel } from '@mui/icons-material';
+import { useDispatch } from 'react-redux';
+import { ChangeOrderStatus } from '../store/feature/orderSlice';
 
 const OrderDetails = ({ open, onClose, order, orderStatus }) => {
   const steps = ['Ordered', 'Shipped', 'Delivered'];
 
+  const dispatch = useDispatch();
+  const [status, setStatus] = useState('delivered')
   const getActiveStep = (status) => {
     switch (status) {
       case 'Ordered':
@@ -27,7 +31,7 @@ const OrderDetails = ({ open, onClose, order, orderStatus }) => {
             Order ID: <span className="font-normal">{order}</span>
           </Typography>
           <Typography variant="body1">
-            Status: <span className="font-bold">{orderStatus}</span>
+            Status: <span className="font-bold">{status}</span>
           </Typography>
           <Stepper activeStep={getActiveStep(orderStatus)} alternativeLabel>
             {steps.map((label) => (
@@ -53,6 +57,14 @@ const OrderDetails = ({ open, onClose, order, orderStatus }) => {
         <Button onClick={onClose} color="primary">
           Close
         </Button>
+        <Button  color="primary"    onClick={() => {
+              dispatch(
+                ChangeOrderStatus({OrderId:order,status})
+              );
+            }}>
+        ChangeOrderStatus
+        </Button>
+        
       </DialogActions>
     </Dialog>
   );

src/components/Profile.jsx

@@ -39,6 +39,7 @@ const Profile = () => {
             Your Order
           </Button>
         </Link>
+        
 
         <Link to={"/Login"}>
           {" "}

src/components/store/feature/orderSlice.js

@@ -7,7 +7,7 @@ import { collection, setDoc, doc, getDoc, addDoc, updateDoc, arrayUnion, getDocs
 
 export const fetchOrder = createAsyncThunk(
   'order/fetchOrder',
-  async (status) => {
+  async () => {
     const orderRef = collection(db,'orders');
 
     const docs = await getDocs(orderRef);
@@ -17,32 +17,48 @@ export const fetchOrder = createAsyncThunk(
       const merchantData = await getDoc(mainData.merchantId)
       const userData = await getDoc(mainData.userId)
       const orderProduct = await getDoc(mainData.productRef)
+     
 
       orders.push({orderedProducts: await orderProduct.data(),
         merchant: await merchantData.data(),
         user: await userData.data(),
         orderId: item.ref.id,
-        orderStatus: status 
+         status:mainData.status
 
       })
     }  
     return orders;
   }
 );
 
+
 export const createOrder = createAsyncThunk(
   'order/createOrder',
-  async ({ userId,merchantId , productRef }, { getState }) => {
+  async ({ userId,merchantId , productRef ,status}, { getState }) => {
     const ordersCollection = collection(db, "orders");
       await addDoc(ordersCollection, {
         userId:doc(db, "users", userId) ,
         merchantId,
-        productRef
-        
+        productRef,
+        status
       });
   }
 );
 
+
+
+
+export const ChangeOrderStatus = createAsyncThunk(
+  'order/ChangeOrderStatus',
+  async ({  OrderId ,status}, { getState }) => {
+    const ordersCollection = doc(db,'orders',OrderId);
+ 
+    await updateDoc(ordersCollection, {
+      status: status,
+    });
+  }
+);
+
 const orderSlice = createSlice({
   name: 'order',
   initialState: {
@@ -56,20 +72,29 @@ const orderSlice = createSlice({
         state.items = action.payload;
       })
       .addCase(fetchOrder.pending, (state, action) => {
-       // state.items = action.payload;
+        console.log(action)
       })
       .addCase(fetchOrder.rejected, (state, action) => {
-        //state.items = action.payload;
+        
         console.log(action)
       })
       .addCase(createOrder.fulfilled, (state, action) => {
-        // state.items.push(action.payload);
+     
+      })
+      .addCase(createOrder.pending, (state, action) => {
+        console.log(action)
       })
-    //   .addCase(createOrder.pending, (state, action) => {
-    //     console.log(action)
-    //   })
       .addCase(createOrder.rejected, (state, action) => {
         console.log(action)
+      })
+      .addCase(ChangeOrderStatus.fulfilled, (state, action) => {
+        state.items.push(action.payload);
+      })
+      .addCase(ChangeOrderStatus.pending, (state, action) => {
+        console.log(action)
+      })
+      .addCase(ChangeOrderStatus.rejected, (state, action) => {
+        console.log(action)
       });
   },
 });

src/main.jsx

@@ -12,7 +12,7 @@ const theme = createTheme({
     MuiButton: {
       styleOverrides: {
         root: {
-          borderRadius: '8px', // Change border radius
+          borderRadius: '8px', // Change border radiu
           padding: '5px ', // Change padding
           fontSize: '13px', // Change font size
           textTransform: 'none', // Prevent uppercase text