+
{diff < 2 && (
-
-
New
+
+
)}
-
+ New
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{isHovered && (
-
+
-
-
+ {!alreadyInCart ? (
+
+ ) : (
+
+ )}
+
)}
-
+
+
= ({ product }) => {
data-testid="dprod-detailbtn"
>
- {" "}
diff --git a/src/components/common/auth/Loader.tsx b/src/components/common/auth/Loader.tsx
new file mode 100644
index 0000000..360f8ba
--- /dev/null
+++ b/src/components/common/auth/Loader.tsx
@@ -0,0 +1,10 @@
+const Spinner = () => (
+ = ({ searchQuery, setSearchQuery }) => {
}
}
}, []);
+ const dispatches = useAppDispatch();
+ useEffect(() => {
+ dispatch(cartManage());
+ }, [dispatches]);
+ const userCart = useSelector((state: RootState) => state.cart.data);
return (
= ({ searchQuery, setSearchQuery }) => {
direction="row"
className="flex justify-between items-center gap-2 bg-white"
>
-
+
- Cart
- $150.00
+
+
+ Cart
+
+ {/* $150.00 */}
+
+ {!localStorage.getItem("accessToken") ? (
+ ""
+ ) : (
+
diff --git a/src/components/common/notify/DeleteNotify.tsx b/src/components/common/notify/DeleteNotify.tsx
new file mode 100644
index 0000000..b245a36
--- /dev/null
+++ b/src/components/common/notify/DeleteNotify.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { Button, Modal } from "flowbite-react";
+import { HiOutlineExclamationCircle } from "react-icons/hi";
+
+const DeleteNotify = ({ onConfirm, onCancel }) => {
+ const [openModal, setOpenModal] = useState(false);
+
+ const handleConfirm = () => {
+ onConfirm();
+ setOpenModal(false);
+ };
+
+ return (
+ <>
+
+ setOpenModal(false)}
+ popup
+ >
+
+
+
+
+ );
+};
+
+export default DeleteNotify;
diff --git a/src/components/common/notify/Warning.tsx b/src/components/common/notify/Warning.tsx
new file mode 100644
index 0000000..9134cc3
--- /dev/null
+++ b/src/components/common/notify/Warning.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Notification = () => (
+ = () => {
+ const dispatch = useAppDispatch();
+ const loading = useSelector((state: RootState) => state.cart.isLoading);
+ const userCart = useSelector((state: RootState) => state.cart.data);
+ const error = useSelector((state: RootState) => state.cart.error);
+ const updateLoader = useSelector(
+ (state: RootState) => state.cart.update.isLoading,
+ );
+ const [updatedQuantities, setUpdatedQuantities] = useState<{
+ [key: number]: number;
+ }>({});
+
+ useEffect(() => {
+ dispatch(cartManage());
+ }, [dispatch]);
+
+ if (loading) {
+ return ;
+ toast.error(`${error.message}`);
+ }
+ };
+
+ const handleUpdate = async () => {
+ try {
+ const updatePromises = Object.entries(updatedQuantities).map(
+ ([productId, quantity]) => dispatch(updateCarts({ productId: Number(productId), quantity })),
+ );
+
+ await Promise.all(updatePromises);
+
+ setUpdatedQuantities({});
+ dispatch(cartManage());
+ } catch (err) {
+ const error = err as AxiosError;
+ toast.error(`${error.message}`);
+ }
+ };
+
+ const handleChange = (e: React.ChangeEvent, item: any) => {
+ const value = parseInt(e.target.value, 10);
+ setUpdatedQuantities({
+ ...updatedQuantities,
+ [item.productId]: value,
+ });
+ };
+
+ const total = userCart.reduce(
+ (acc, item) => acc + item.product?.price * item.quantity,
+ 0,
+ );
+
+ const hasUpdates = Object.keys(updatedQuantities).length > 0;
+
+ return (
+ ) => {
+ const item = state.data.find((item) => item.id === action.payload);
+ if (item) {
+ item.quantity += 1;
+ }
+ },
+ decreaseQuantity: (state, action: PayloadAction) => {
+ const item = state.data.find((item) => item.id === action.payload);
+ if (item && item.quantity > 1) {
+ item.quantity -= 1;
+ }
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(cartManage.pending, (state) => {
+ state.isLoading = true;
+ })
+ .addCase(cartManage.fulfilled, (state, action) => {
+ state.isLoading = false;
+ state.data = action.payload;
+ })
+ .addCase(cartManage.rejected, (state) => {
+ state.isLoading = false;
+ state.error = true;
+ })
+ .addCase(cartDelete.pending, (state) => {
+ state.delete.isLoading = true;
+ })
+ .addCase(cartDelete.fulfilled, (state) => {
+ state.delete.isLoading = false;
+ })
+ .addCase(cartDelete.rejected, (state) => {
+ state.delete.error = true;
+ })
+ .addCase(removeFromCart.pending, (state) => {
+ state.remove.isLoading = true;
+ })
+ .addCase(removeFromCart.fulfilled, (state) => {
+ state.remove.isLoading = false;
+ })
+ .addCase(removeFromCart.rejected, (state) => {
+ state.remove.error = true;
+ })
+ .addCase(addToCart.pending, (state) => {
+ state.add.isLoading = true;
+ })
+ .addCase(addToCart.fulfilled, (state, action) => {
+ state.add.isLoading = false;
+ state.data.push(action.payload);
+ })
+ .addCase(addToCart.rejected, (state, action) => {
+ state.add.isLoading = false;
+ state.add.error = action.payload as string;
+ })
+ .addCase(updateCarts.pending, (state) => {
+ state.update.isLoading = true;
+ })
+ .addCase(updateCarts.fulfilled, (state, action) => {
+ state.update.isLoading = false;
+ const updatedItem = action.payload;
+ const index = state.data.findIndex(
+ (item) => item.id === updatedItem.id,
+ );
+ if (index !== -1) {
+ state.data[index] = updatedItem;
+ }
+ })
+ .addCase(updateCarts.rejected, (state, action) => {
+ state.update.isLoading = false;
+ state.update.error = action.payload as string;
+ });
+ },
+});
+
+export const { increaseQuantity, decreaseQuantity } = cartManageSlice.actions;
+export default cartManageSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index c0fb2cd..5c04a01 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -10,6 +10,7 @@ import updatePasswordApiSlice from "./api/updatePasswordApiSlice";
import profileSlice from "./reducers/profileSlice";
import updateProfileSlice from "./reducers/updateProfileSlice";
import productsReducer from "./reducers/productsSlice";
+import cartsReducer from "./reducers/cartSlice";
const store = configureStore({
reducer: {
@@ -23,6 +24,7 @@ const store = configureStore({
usersProfile: profileSlice,
updateUsersProfile: updateProfileSlice,
products: productsReducer,
+ cart: cartsReducer,
},
});
export type RootState = ReturnType;
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 6eae79e..b49c886 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -19,6 +19,7 @@ import UserManagement from "../dashboard/admin/UserManagement";
import Settings from "../dashboard/admin/Settings";
import Analytics from "../dashboard/admin/Analytics";
import Dashboard from "../dashboard/admin/Dashboard";
+import CartManagement from "../pages/CartManagement";
const AppRoutes = () => (
@@ -26,6 +27,7 @@ const AppRoutes = () => (
+
+
+);
+
+export default Spinner;
diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
index 0de5c4f..d5360ed 100644
--- a/src/components/common/header/Header.tsx
+++ b/src/components/common/header/Header.tsx
@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
import { getProfile } from "../../../redux/reducers/profileSlice";
import Logo from "../auth/Logo";
import { RootState } from "../../../redux/store";
+import { cartManage } from "../../../redux/reducers/cartSlice";
import { useAppDispatch } from "../../../redux/hooks";
interface ISerachProps {
@@ -40,6 +41,11 @@ const Header: React.FC
+ {userCart.length}
+
+ )}
+
+ + Are you sure you want to delete this product? +
+
+
+
+
+
+
+);
+
+export default Notification;
diff --git a/src/pages/CartManagement.tsx b/src/pages/CartManagement.tsx
new file mode 100644
index 0000000..29ba1f6
--- /dev/null
+++ b/src/pages/CartManagement.tsx
@@ -0,0 +1,249 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { IoChevronUpOutline, IoChevronDownSharp } from "react-icons/io5";
+import { MdOutlineClose } from "react-icons/md";
+import { ToastContainer, toast } from "react-toastify";
+import { AxiosError } from "axios";
+
+import { RootState } from "../redux/store";
+import {
+ cartManage,
+ increaseQuantity,
+ decreaseQuantity,
+ cartDelete,
+ removeFromCart,
+ updateCarts,
+} from "../redux/reducers/cartSlice";
+import Spinner from "../components/common/auth/Loader";
+import Warning from "../components/common/notify/Warning";
+import DeleteNotify from "../components/common/notify/DeleteNotify";
+import { useAppDispatch } from "../redux/hooks";
+import { RegisterError } from "../../type";
+
+const CartManagement: React.FC
+
+ + You're not logged in to access cart, Please login to access cart +
+
+
+
+ Back home
+
+
+ Log in
+
+
+
+ );
+ }
+
+ const handleDelete = async () => {
+ await dispatch(cartDelete());
+ dispatch(cartManage());
+ };
+
+ const handleRemove = async (productId: string) => {
+ try {
+ await dispatch(removeFromCart(productId));
+ dispatch(cartManage());
+ toast.success("Product removed successfully");
+ } catch (err) {
+ const error = err as AxiosErrorError occurred during fetching 😎
+
+
+ );
+};
+
+export default CartManagement;
diff --git a/src/redux/reducers/cartSlice.ts b/src/redux/reducers/cartSlice.ts
new file mode 100644
index 0000000..a06e266
--- /dev/null
+++ b/src/redux/reducers/cartSlice.ts
@@ -0,0 +1,215 @@
+// @ts-nocheck
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+import { AxiosError } from "axios";
+
+import axios from "../api/api";
+import { UserCart } from "../../../type";
+
+export const cartManage = createAsyncThunk(
+ "fetchCartItem",
+ async (_, { rejectWithValue }) => {
+ try {
+ const response = await axios.get("/carts", {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ });
+ return response.data.userCart.items as UserCart;
+ } catch (err) {
+ const error = err as AxiosError;
+ return rejectWithValue(error.response?.data);
+ }
+ },
+);
+
+export const cartDelete = createAsyncThunk(
+ "deleteCart",
+ async (_, { rejectWithValue }) => {
+ try {
+ const response = await axios.delete("/carts", {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ });
+ return response;
+ } catch (err) {
+ const error = err as AxiosError;
+ return rejectWithValue(error.response?.data || error.message);
+ }
+ },
+);
+
+export const addToCart = createAsyncThunk(
+ "addToCart",
+ async (
+ { productId, quantity }: { productId: number; quantity: number },
+ { rejectWithValue },
+ ) => {
+ try {
+ const response = await axios.post(
+ "/carts",
+ { productId, quantity },
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ },
+ );
+ return response.data;
+ } catch (err) {
+ const error = err as AxiosError;
+ return rejectWithValue(error.response?.data || error.message);
+ }
+ },
+);
+
+export const removeFromCart = createAsyncThunk(
+ "cart/removeItem",
+ async (productId, { rejectWithValue }) => {
+ try {
+ const response = await axios.put(
+ "/carts",
+ { productId },
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ },
+ );
+ return response.data;
+ } catch (err) {
+ const error = err as AxiosError;
+ return rejectWithValue(error.response?.data || error.message);
+ }
+ },
+);
+
+export const updateCarts = createAsyncThunk(
+ "update",
+ async (
+ { productId, quantity }: { productId: string; quantity: number },
+ { rejectWithValue },
+ ) => {
+ try {
+ const response = await axios.patch(
+ "/carts",
+ { productId, quantity },
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ },
+ );
+ console.log(response);
+
+ return response.data;
+ } catch (err) {
+ const error = err as AxiosError;
+ return rejectWithValue(error.response?.data || error.message);
+ }
+ },
+);
+
+const cartManageSlice = createSlice({
+ name: "carts",
+ initialState: {
+ isLoading: false,
+ data: [] as UserCart[],
+ error: false,
+ delete: {
+ isLoading: false,
+ error: false,
+ },
+ add: {
+ isLoading: false,
+ data: [],
+ error: null,
+ },
+ remove: {
+ isLoading: false,
+ error: false,
+ },
+ update: {
+ isLoading: false,
+ data: [],
+ error: false,
+ },
+ },
+ reducers: {
+ increaseQuantity: (state, action: PayloadAction
+
+ Home / Carts
+
+
+
+ {userCart.length === 0 ? (
+ ""
+ ) : (
+
+
+ {userCart.length === 0 ? (
+ ""
+ ) : (
+ | Product | +Price | +Quantity | +Subtotal | +
|---|---|---|---|
| + No items in the cart 😎 + | +|||
|
+
+
+ handleRemove(item.productId)}
+ >
+
+ |
+
+ + RWF + {item.product?.price} ++ |
+
+
+ handleChange(e, item)}
+ />
+
+ |
+
+ + RWF + {item.product?.price + * ((updatedQuantities[item.productId] ?? item.quantity) + || 0)} ++ |
+
+
+ )}
+
+
+
+
+ {}} />
+
+
+ {userCart.length === 0 ? (
+ ""
+ ) : (
+
+
+
+
+
+
+ )}
+ Cart Total
+
+
+ + Subtotal +
+ + RWF + {total} + ++
+
+ + Shipping +
+ Free ++
+
+ + Total +
+ + RWF + {total} + ++
+ Proceed to Checkout
+
+