[start 187584874] seller delete item

Author: solangeihirwe03

package-lock.json

@@ -33,3 +33,4 @@
 @import "./assets/styles/liveChat.scss";
 @import "./assets//styles/UserProfile.scss";
 @import "./assets/styles/SellerSideProduct.scss";
+@import "./assets/styles/SellerDeleteItem.scss"

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;
+        }
+    }
+    }
+}

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;

src/components/product/ConfirmModal.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
-            });
+            ;
     }
 })
 

src/pages/SellerDeleteItem.tsx

@@ -21,12 +21,21 @@ const initialState: ISellerCollectionProductInitialResponse = {
 export const fetchSellerCollectionProduct = createAsyncThunk<ISellerCollectionProductResponse>("products/fetchSellerCollectionProducts", async (_,thunkApi) => {
     try {
         const response = await productService.fetchSellerProducts();
+        console.log(response)
         return response;
     } catch (error) {
         return thunkApi.rejectWithValue(getErrorMessage(error));
     }
 });
 
+export const deleteItem = createAsyncThunk<ISellerCollectionProductResponse, string>("product/deleteProduct", async(id, thunkApi)=>{
+    try{
+      const response = await productService.SellerDeleteItem(id)
+     return response
+    } catch(error){
+     return thunkApi.rejectWithValue(error)
+    }
+ })
 
 const sellerCollectionProductsSlice = createSlice({
     name: "sellerCollectionProducts",
@@ -49,6 +58,23 @@ const sellerCollectionProductsSlice = createSlice({
                 state.isError = false;
                 state.isSuccess = false;
                 state.message = action.payload.message || null
+            })
+            .addCase(deleteItem.pending, (state)=>{
+                state.isLoading = true,
+                state.isError = false,
+                state.isSuccess = false
+            })
+            .addCase(deleteItem.fulfilled, (state, action: PayloadAction<ISellerCollectionProductResponse>)=>{
+                state.isLoading = false,
+                state.isError = false,
+                state.data= action.payload.data,
+                state.isSuccess = true
+            })
+            .addCase(deleteItem.rejected, (state, action: PayloadAction<any>)=>{
+                state.isLoading = false,
+                state.isError = true,
+                state.message = action.payload,
+                state.isSuccess = false
             });
     }
 })

src/store/features/product/productSlice.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import axios from "axios";
-export const URL = "https://e-commerce-ninjas-platform-backend.onrender.com";
+export const URL = "http://localhost:5001" //https://e-commerce-ninjas-platform-backend.onrender.com";
 const axiosInstance = axios.create({
   baseURL: `${URL}`,
   headers: {