Merge pull request #25 from bhagirathpaliyal/Order

added order detail popup

Author: bhagirathpaliyal

package-lock.json

@@ -10,11 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-free": "^6.5.1",
+    "@mui/icons-material": "^6.0.1",
     "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.6",
+    "@mui/material": "^6.0.1",
     "@reduxjs/toolkit": "^2.2.7",
     "firebase": "^10.10.0",
     "react": "^18.2.0",

package.json

@@ -18,6 +18,7 @@ import { UserTypeSelector } from './components/UserTypeSelecctor';
 import { UserTypeSelectorLogin } from './components/UserTypeSelecctorLogin';
 import AddProducts from './components/AddProducts';
 import Order from './components/Order/Order';
+import OrderDetails from './components/Order/OrderDetails';
 
 
 function App() {
@@ -50,6 +51,7 @@ useEffect(()=>{
 
             <Route path="/AddProducts" element={<AddProducts />} />
             <Route path="/Order" element={<Order />} />
+            <Route path="/OrderDetails" element={<OrderDetails />} />
           </Routes>
         </div>
       </BrowserRouter>

src/App.jsx

@@ -134,7 +134,7 @@ const AddProducts = () => {
         <div className='text-lg font-bold'>Your Products</div>
         <ul className='flex flex-wrap gap-[20px] justify-center'>
           {products.map((item, index) =>
-            item.merchant.email === user.email ? (
+            item.merchant?.email === user.email ? (
               <Item key={index} index={index + 20} data={item} name={item.merchant.name} />
             ) : null
           )}

src/components/AddProducts.jsx

@@ -19,6 +19,8 @@ const skeleton=[1,2,3,4,5,6,7,8,9,10,11,12];
         .finally(() => setLoading(false)); 
     }
   }, [user, dispatch]);
+
+  
 console.log(orderItems)
   return (
     <div className='mt-[66px] flex flex-col gap-4 items-center'>

src/components/Order/Order.jsx

@@ -1,22 +1,26 @@
-import React from 'react';
-import { Card, CardContent, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import React, { useState } from 'react';
+import { Card, CardContent, Typography, Button } from '@mui/material';
+import { Link } from 'react-router-dom';
+import OrderDetails from './OrderDetails';
 
-const StyledCard = styled(Card)(({ theme }) => ({
-  borderRadius: '10px',
-  padding: theme.spacing(2),
-  boxShadow: theme.shadows[3],
-}));
 
 const OrderCard = ({ data }) => {
+  const handleDetailsClick = () => {
+    // Handle button click here
+    console.log('Order Details clicked');
+  };
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+ 
+
   return (
-    <StyledCard className="border p-5 rounded-[10px] flex  items-center">
+    <Card className="flex flex-col sm:flex-row items-center p-5 rounded-lg shadow-lg">
       <img
         src={data.orderedProducts.image}
         alt="Product"
-        className="h-[300px] w-auto mb-4"
+        className="h-auto w-[250px] sm:w-[200px] mb-4 sm:mb-0 sm:mr-4 rounded-lg object-cover"
       />
-      <CardContent>
+      <CardContent className="flex flex-col">
         <Typography variant="h6" gutterBottom>
           OrderId: <span className="font-bold">{data.orderId}</span>
         </Typography>
@@ -29,8 +33,20 @@ const OrderCard = ({ data }) => {
         <Typography variant="body1">
           Merchant Name: <span className="font-bold">{data.merchant?.name}</span>
         </Typography>
+      
+       
+      <Button variant="contained" color="primary" className="p-4" onClick={() => setIsPopupOpen(true)}>
+        Show Order Details
+      </Button>
+      <OrderDetails
+        open={isPopupOpen}
+        onClose={() => setIsPopupOpen(false)}
+        order={data.orderId}
+        orderStatus={data.orderStatus}
+      />
+  
       </CardContent>
-    </StyledCard>
+    </Card>
   );
 };
 

src/components/Order/OrderCard.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography } from '@mui/material';
+import { CheckCircle, LocalShipping, Cancel } from '@mui/icons-material';
+
+const OrderDetails = ({ open, onClose, order,orderStatus }) => {
+  // Status icons
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case 'Ordered':
+        return <CheckCircle color="primary" />;
+      case 'Shipped':
+        return <LocalShipping color="action" />;
+      case 'Delivered':
+        return <CheckCircle color="success" />;
+      default:
+        return <Cancel color="error" />;
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <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">{orderStatus}</span>
+          </Typography>
+          <div className="flex items-center space-x-2">
+            {['Ordered', 'Shipped', 'Delivered'].map((stage) => (
+              <div key={stage} className="flex items-center space-x-1">
+                {getStatusIcon(stage)}
+                <Typography variant="body2">{stage}</Typography>
+              </div>
+            ))}
+          </div>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default OrderDetails;

src/components/Order/OrderDetails.jsx

@@ -21,7 +21,8 @@ export const fetchOrder = createAsyncThunk(
       orders.push({orderedProducts: await orderProduct.data(),
         merchant: await merchantData.data(),
         user: await userData.data(),
-        orderId: item.ref.id
+        orderId: item.ref.id,
+        orderStatus:'Ordered'
 
       })
     }