Merge pull request #35 from bhagirathpaliyal/OrderStatus

fix: changeOrderStatus  issue

Author: bhagirathpaliyal

src/components/Item.jsx

@@ -13,8 +13,8 @@ function Item(prop) {
     load()
 
       async function load() {
-        if(prop.data.merchantIdRef) {
-          const merchantData = await getDoc(prop.data.merchantIdRef);
+        if(prop.data.merchantId) {
+          const merchantData = await getDoc(prop.data.merchantId);
           setMerchant(await merchantData.data());
           } else {
             setMerchant(null)

src/components/Order/OrderDetails.jsx

@@ -1,14 +1,28 @@
-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';
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Stepper,
+  Step,
+  StepLabel,
+} from "@mui/material";
 
-const OrderDetails = ({ open, onClose, order, orderStatus }) => {
-  const steps = ['Ordered', 'Shipped', 'Delivered'];
+import { useDispatch, useSelector } 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 [status, setStatus] = useState(orderStatus);
+
+  const user = useSelector((state) => {
+    return state.auth.user;
+  });
+
   const getActiveStep = (status) => {
     switch (status) {
       case 'Ordered':
@@ -18,36 +32,46 @@ const OrderDetails = ({ open, onClose, order, orderStatus }) => {
       case 'Delivered':
         return 2;
       default:
-        return -1; 
+        return -1;
+    }
+  };
+
+  const handleChangeStatus = () => {
+    if (status !== orderStatus) {
+      dispatch(ChangeOrderStatus({ OrderId: order, status }));
     }
   };
 
   return (
     <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogTitle className="bg-blue-500 text-white">Order Details</DialogTitle>
+      <DialogTitle className="bg-blue-500 text-white">
+        Order Details
+      </DialogTitle>
       <DialogContent>
         <div className="space-y-4">
           <Typography variant="h6" className="font-bold">
             Order ID: <span className="font-normal">{order}</span>
           </Typography>
           <Typography variant="body1">
-            Status: <span className="font-bold">{status}</span>
+            Status:
+            {user?.isMerchant ? (
+              <select
+                value={status}
+                onChange={(e) => setStatus(e.target.value)}
+                className="border p-2 rounded"
+              >
+                <option value="Ordered">Ordered</option>
+                <option value="Shipped">Shipped</option>
+                <option value="Delivered">Delivered</option>
+              </select>
+            ) : (
+              <span className="font-bold">{orderStatus}</span>
+            )}
           </Typography>
           <Stepper activeStep={getActiveStep(orderStatus)} alternativeLabel>
             {steps.map((label) => (
               <Step key={label}>
-                <StepLabel>
-                  <div className="flex items-center space-x-4">
-                    {label === 'Delivered' ? (
-                      <CheckCircle color="success" />
-                    ) : label === 'Shipped' ? (
-                      <LocalShipping color="action" />
-                    ) : (
-                      <CheckCircle color="primary" />
-                    )}
-                    <Typography variant="body2">{label}</Typography>
-                  </div>
-                </StepLabel>
+                <StepLabel>{label}</StepLabel>
               </Step>
             ))}
           </Stepper>
@@ -57,14 +81,11 @@ const OrderDetails = ({ open, onClose, order, orderStatus }) => {
         <Button onClick={onClose} color="primary">
           Close
         </Button>
-        <Button  color="primary"    onClick={() => {
-              dispatch(
-                ChangeOrderStatus({OrderId:order,status})
-              );
-            }}>
-        ChangeOrderStatus
-        </Button>
-        
+        {user?.isMerchant && (
+          <Button color="primary" onClick={handleChangeStatus}>
+            Change Order Status
+          </Button>
+        )}
       </DialogActions>
     </Dialog>
   );