[start 187584874] seller delete item

Author: solangeihirwe03

Diff for: package-lock.json

@@ -27,4 +27,5 @@
 @import "./assets/styles/SellerProduct.scss";
 @import "./assets/styles/SellerCollection.scss";
 @import "./assets/styles/SellerLayout.scss";
-@import "./assets/styles/tables.scss";
+@import "./assets/styles/tables.scss";
+@import "./assets/styles/SellerDeleteItem.scss"

Diff for: src/App.scss

@@ -0,0 +1,67 @@
+@import "./Colors";
+
+.confirm-dialog {
+    margin-left: 27rem;
+    border-radius: 2.2rem;
+    margin-top: 9rem;
+    width: 80%;
+    height: 87vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    font-size: 1.6rem;
+
+    .confirm-dialog-content {
+        background-color: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+
+        .modal-header {
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin-bottom: 1.5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .icon__delete {
+                color: $red-color;
+                font-size: 3rem;
+            }
+        }
+        p{
+            padding: 1rem 0;
+            i{
+                text-transform: uppercase;
+                font-weight: bold;
+            }
+        }
+        .modal-footer{
+            float: right;
+            button {
+            margin: 0 10px;
+            padding: .7rem 3rem; 
+            border: none;
+            border-radius: 1rem;
+            font-family: $text-family;
+        }
+        .delete-btn{
+            background: $red-middle-color;
+            color: $red-color;
+        }
+        .cancel-btn{
+            background: lighten($fifth-color, 19%);
+            color: $fifth-color;
+        }
+    }
+    }
+}

Diff for: src/assets/styles/SellerDeleteItem.scss

@@ -0,0 +1,32 @@
+/* eslint-disable */
+import React from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+interface ConfirmModalProps {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="confirm-dialog">
+            <div className="confirm-dialog-content">
+                <div className="modal-header">
+                <DeleteIcon className='icon__delete' /> {title}
+                </div>
+                <p dangerouslySetInnerHTML={{ __html: message }} />
+                <div className="modal-footer">
+                    <button onClick={onCancel} className='cancel-btn'>Cancel</button>
+                    <button onClick={onConfirm} className='delete-btn'>Delete</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmModal;

Diff for: src/components/product/ConfirmModal.tsx

@@ -10,12 +10,16 @@ import { fetchSingleSellerProduct } from '../../store/features/product/sellerPro
 import { Link } from 'react-router-dom';
 import { PuffLoader } from 'react-spinners';
 import { Meta } from '../Meta';
+import { deleteItem } from '../../store/features/product/sellerCollectionProductsSlice';
+import ConfirmModal from './ConfirmModal';
 
 const SellerProduct = ({ productId }: { productId: string }) => {
     const dispatch = useAppDispatch();
     const { product, isError, isSuccess, isLoading, message }: ISingleProductInitialResponse = useAppSelector((state: any) => state.singleSellerProduct);
 
     const [updatedProduct, setUpdatedProduct] = useState<ISingleProduct | null>(null);
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<string | null>(null);
 
     useEffect(() => {
         dispatch(fetchSingleSellerProduct(productId));
@@ -40,6 +44,12 @@ const SellerProduct = ({ productId }: { productId: string }) => {
     const handleSave = () => {
         console.log('Updated product:', updatedProduct);
     };
+    const handleDelete = async () => {
+        if (updatedProduct) {
+            await dispatch(deleteItem(itemToDelete)); 
+            setShowConfirm(false); 
+        }
+    };
 
     return (
         <>
@@ -60,7 +70,7 @@ const SellerProduct = ({ productId }: { productId: string }) => {
                             <h1>Product View</h1>
                             <div className="header-btns">
                                 <button className='edit-btn' onClick={handleSave}><FaPen /> Save</button>
-                                <button className='delete-btn'><FaTrash /> Delete</button>
+                                <button className='delete-btn' onClick={() => { setShowConfirm(true); setItemToDelete(productId); }}><FaTrash /> Delete</button>
                             </div>
                         </div>
 
@@ -151,6 +161,13 @@ const SellerProduct = ({ productId }: { productId: string }) => {
                         <Link to="/seller/products" className="btn-link">View all my products</Link>
                     </div>
             )}
+            <ConfirmModal
+                isOpen={showConfirm}
+                title="Confirm Deletion"
+                message={`Are you sure you want to delete the product <i>${product?.name}</i>? This action cannot be undone.`}
+                onConfirm={handleDelete}
+                onCancel={() => setShowConfirm(false)}
+            />
         </>
     )
 }

Diff for: src/components/product/SellerProduct.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable */
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Table from '../../components/table/Table';
 import { useAppDispatch, useAppSelector } from '../../store/store';
-import { fetchSellerCollectionProduct } from '../../store/features/product/sellerCollectionProductsSlice';
+import { deleteItem, fetchSellerCollectionProduct } from '../../store/features/product/sellerCollectionProductsSlice';
 import Zoom from '@mui/material/Zoom';
 import Tooltip from '@mui/material/Tooltip';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -14,6 +14,8 @@ import LinearProgress from '@mui/material/LinearProgress';
 import { useNavigate } from 'react-router-dom';
 import { Meta } from '../../components/Meta';
 import { FaEye } from 'react-icons/fa';
+import ConfirmModal from '../../components/product/ConfirmModal';
+
 export default function SellerCollection() {
     const navigate = useNavigate()
     const dispatch = useAppDispatch();
@@ -23,7 +25,23 @@ export default function SellerCollection() {
         dispatch(fetchSellerCollectionProduct())
     }, [dispatch]);
 
-    const rows = data.products ? data.products
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<{ id: string; name: string } | null>(null);
+
+
+    const handleDelete = async () => {
+        try {
+            if (itemToDelete !== null) {
+                await dispatch(deleteItem(itemToDelete.id));
+                setShowConfirm(false);
+                setItemToDelete(null)
+            }
+        } catch (error) {
+            console.error('Error deleting item:', error);
+        }
+    };
+
+    const rows = data?.products ? data.products
         .map((product, index) => [
             index + 1,
             <img src={product.images[0]} alt="image" className='product-img' />,
@@ -40,7 +58,7 @@ export default function SellerCollection() {
                     </IconButton>
                 </Tooltip>
                 <Tooltip TransitionComponent={Zoom} title="Delete" arrow>
-                    <IconButton>
+                    <IconButton onClick={() => { setShowConfirm(true); setItemToDelete({ id: product.id, name: product.name }); }}>
                         <DeleteIcon className='icon__delete' />
                     </IconButton>
                 </Tooltip>
@@ -52,6 +70,7 @@ export default function SellerCollection() {
             </div>
         ]) : [];
 
+        const popupMessage= `Deleting this product <i>${itemToDelete?.name}</i> will be permanently removed from the system. This can’t be undone!`;
 
     return (
         <div className='seller__main__container'>
@@ -64,6 +83,16 @@ export default function SellerCollection() {
                 </div>
             )}
             <Table title={'Product List'} headers={headers} rows={rows} />
+
+            {showConfirm && (
+                <ConfirmModal
+                isOpen={showConfirm}
+                title="Are you sure?"
+                message={popupMessage}
+                onConfirm={handleDelete}
+                onCancel={() => setShowConfirm(false)}
+            />
+            )}
         </div>
     )
 }

Diff for: src/pages/SellerDeleteItem.tsx

@@ -22,7 +22,6 @@ import SellerViewProduct from "./pages/seller/SellerViewProduct";
 import SellerCollection from "./pages/seller/SellerCollection";
 import { SellerLayout } from "./components/layout/SellerLayout";
 import SellerDashboard from "./pages/seller/SellerDashboard";
-import  SellerDeleteItem  from "./pages/SellerDeleteItem";
 
 const AppRouter: React.FC = () => {
   return (
@@ -60,7 +59,6 @@ const AppRouter: React.FC = () => {
           <Route path="shopping-cart" element={<UserViewCart />} />
          <Route path="*" element={<NotFound />} />
             <Route path="seller/login" element={<SellerLogin />} />
-          <Route path="/deleteItem" element={<SellerDeleteItem/>}/>
         </Route>
         <Route path="/seller" element={<SellerLayout/>}>
             <Route index element={<Navigate to="dashboard" replace />} />

Diff for: src/pages/seller/SellerCollection.tsx

@@ -61,13 +61,23 @@ const fetchSellerSingleProduct = async (id: string) => {
   }
 };
 
+const SellerDeleteItem = async(id: string)=>{
+  try{
+    const response = await axiosInstance.delete(`api/shop/seller-delete-product/${id}`);
+    return response.data
+  }catch(error){
+    throw new Error("failed to delete product")
+  }
+}
+
 const productService = {
     fetchProducts,
     fetchSingleProduct,
     fetchProductReviews,
     fetchShopInfo,
     searchProduct,
     fetchSellerProducts,
-    fetchSellerSingleProduct
+    fetchSellerSingleProduct,
+    SellerDeleteItem
 }
 export default productService;

Diff for: src/router.tsx

@@ -31,15 +31,6 @@ export const searchProduct = createAsyncThunk<IProduct, SearchCriteria>("product
   }
 );
 
-export const deleteItem = createAsyncThunk<ISingleProduct, string>("product/deleteProduct", async(id, thunkApi)=>{
-   try{
-     const response = await productService.deleteItem(id)
-    return response
-   } catch(error){
-    return thunkApi.rejectWithValue(error)
-   }
-})
-
 const productSlice = createSlice({
     name: "products",
     initialState,
@@ -78,23 +69,7 @@ const productSlice = createSlice({
                 state.message = action.payload;
                 state.isSuccess = false;
             })
-            .addCase(deleteItem.pending, (state)=>{
-                state.isLoading = true,
-                state.isError = false,
-                state.isSuccess = false
-            })
-            .addCase(deleteItem.fulfilled, (state, action: PayloadAction<ISingleProduct>)=>{
-                state.isLoading = false,
-                state.isError = false,
-                state.products = state.products.filter(product => product.id !== action.payload.id),
-                state.isSuccess = true
-            })
-            .addCase(deleteItem.rejected, (state, action: PayloadAction<any>)=>{
-                state.isLoading = false,
-                state.isError = true,
-                state.products = action.payload,
-                state.isSuccess = false
-            });
+            ;
     }
 })