Merge pull request #37 from bhagirathpaliyal/ConfirmationDialog

Added: ConfirmationDialog for AddToCart and Purchase

Author: bhagirathpaliyal

src/components/ConfirmationDialog.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle, Button } from "@mui/material";
+
+function ConfirmationDialog({ open, title, content, onConfirm, onCancel }) {
+  return (
+    <Dialog open={open} onClose={onCancel}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>{content}</DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel}>Cancel</Button>
+        <Button variant="contained" color="primary" onClick={onConfirm}>
+          Confirm
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default ConfirmationDialog;

src/components/Item.jsx

@@ -1,33 +1,57 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { addToCart } from "./../store/feature/cartSlice";
+import { createOrder } from "./../store/feature/orderSlice";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Button } from "@mui/material";
-import { createOrder } from "./../store/feature/orderSlice";
 import { getDoc } from "firebase/firestore";
+import ConfirmationDialog from "./ConfirmationDialog";
 
 function Item(prop) {
   const [status, setStatus] = useState("Ordered");
   const [merchant, setMerchant] = useState(null);
-  useEffect(() => {
-    load()
+  const [dialogType, setDialogType] = useState(null);
+  const dispatch = useDispatch();
 
-      async function load() {
-        if(prop.data.merchantId) {
-          const merchantData = await getDoc(prop.data.merchantId);
-          setMerchant(await merchantData.data());
-          } else {
-            setMerchant(null)
-          }
+  const user = useSelector((state) => state.auth.user);
+
+  useEffect(() => {
+    async function load() {
+      if (prop.data.merchantId) {
+        const merchantData = await getDoc(prop.data.merchantId);
+        setMerchant(merchantData.data());
+      } else {
+        setMerchant(null);
       }
+    }
 
-  }, [prop.data.merchantIdRef]);
+    load();
+  }, [prop.data?.merchantId]);
 
-  const user = useSelector((state) => {
-    return state.auth.user;
-  });
+  const handleAction = (action) => {
+    setDialogType(action); 
+  };
 
-  const dispatch = useDispatch();
+  const handleConfirmAction = () => {
+    if (dialogType === "addToCart") {
+      dispatch(
+        addToCart({
+          userId: user.uid,
+          productRef: prop.reference,
+        })
+      );
+    } else if (dialogType === "buyNow") {
+      dispatch(
+        createOrder({
+          userId: user.uid,
+          merchantId: prop.data.merchantId,
+          productRef: prop.data.productRef,
+          status,
+        })
+      );
+    }
+    setDialogType(null); 
+  };
 
   return (
     <div className="flex flex-col gap-[10px] border-[2px] border-solid border-brown-900  w-[200px] bg-secondary rounded-[6px] overflow-hidden p-[10px] relative">
@@ -39,55 +63,45 @@ function Item(prop) {
               : `https://picsum.photos/id/${prop.index}/200/300`
           }
           alt="Image"
-          className="bg-cover w-full  h-[200px] rounded-[6px]"
+          className="bg-cover w-full h-[200px] rounded-[6px]"
         />
       </div>
-      <div className=" flex flex-col h-[100%] justify-between">
+      <div className="flex flex-col h-[100%] justify-between">
         <h2 className="text-[12px] md:text-[15px] font-medium">
           {prop.data?.name}
         </h2>
         <p className="text-[12px] md:text-[15px] font-medium">{prop?.name}</p>
         <h2 className="text-[12px] md:text-[15px] ">
-          Price : <span className="font-medium ">{prop.data?.price}</span>{" "}
+          Price: <span className="font-medium">{prop.data?.price}</span>
+        </h2>
+        <h2 className="text-[12px] md:text-[15px] ">
+          Merchant: <span className="font-medium">{merchant ? merchant.name : "Loading"}</span>
         </h2>
 
-       {  (<h2 className="text-[12px] md:text-[15px] ">
-          Merchant : <span className="font-medium ">{merchant ? merchant.name : "Loading"}</span>{" "}
-        </h2>)}
-
-        {!user?.isMerchant && !prop.isCart ? (
-          <Button
-            variant="contained"
-            onClick={() => {
-              dispatch(
-                addToCart({ userId: user.uid, productRef: prop.reference })
-              );
-            }}
-          >
+        {!user?.isMerchant && !prop.isCart && (
+          <Button variant="contained" onClick={() => handleAction("addToCart")}>
             Add To Cart
           </Button>
-        ) : (
-          ""
         )}
 
         {prop.isCart && (
-          <Button
-            variant="contained"
-            onClick={() => {
-              console.log(prop.data.ref);
-              dispatch(
-                createOrder({
-                  userId: user.uid,
-                  merchantId: prop.data.merchantId,
-                  productRef: prop.data.productRef,
-                  status,
-                })
-              );
-            }}
-          >
+          <Button variant="contained" onClick={() => handleAction("buyNow")}>
             Buy Now
           </Button>
         )}
+
+        
+        <ConfirmationDialog
+          open={!!dialogType}
+          title={dialogType === "addToCart" ? "Confirm Add to Cart" : "Confirm Purchase"}
+          content={
+            dialogType === "addToCart"
+              ? "Are you sure you want to add this item to your cart?"
+              : "Are you sure you want to purchase this item?"
+          }
+          onConfirm={handleConfirmAction}
+          onCancel={() => setDialogType(null)}
+        />
       </div>
     </div>
   );