{firstName + ' ' + lastName}
+ {/* User Profile Section */}
+
+ );
+};
+
+export default Account;
diff --git a/src/containers/buyer/BuyerRestrictedRoutes.tsx b/src/containers/buyer/BuyerRestrictedRoutes.tsx
new file mode 100644
index 0000000..660b4e4
--- /dev/null
+++ b/src/containers/buyer/BuyerRestrictedRoutes.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
+import AdminLayout from '../../components/admin/AdminLayout';
+import BuyerProfile from '../../pages/BuyerProfile';
+
+interface RestrictedRouteProp {
+ role: 'admin' | 'buyer' | 'seller';
+}
+
+const BuyerRestrictedRoutes: React.FC
+ dispatch(setActiveMenu({ activeMenu: "profile" }))} />
+
+
+ {/* Cards Section */}
+
+ 
+
+
+
+ {lastName} {firstName}
+{Role? Role.name: 'buyer'}
+
+ {/* Pending Card */}
+
+ dispatch(setActiveMenu({ activeMenu: "pendingpayments" }))}>
+
+
+ {/* In Transit Card */}
+
+ {data.filter((order: { status: string; }) => order.status === 'pending').length}
+
+
+
+ Pending Payments
+ dispatch(setActiveMenu({ activeMenu: "intransit" }))}>
+
+
+ {/* Feedback Card */}
+
+ {data.filter((order: { status: string; }) => order.status === 'in-transit').length}
+
+
+
+ In Transit
+
+
+
+ {/* Refund & Return Card */}
+
+
+ Feedback
+
+
+
+
+ Return & Refund
+
+
+ );
+};
+
+export default ConfirmationModal;
diff --git a/src/containers/buyer/ErrorPage.tsx b/src/containers/buyer/ErrorPage.tsx
new file mode 100644
index 0000000..7b5aff0
--- /dev/null
+++ b/src/containers/buyer/ErrorPage.tsx
@@ -0,0 +1,11 @@
+// ErrorPage.js
+
+const ErrorPage = () => {
+ return (
+
+
+ Confirm Action
+{message}
+
+
+
+
+
+ 'An unexpected error occurred
+
+ );
+};
+
+export default ErrorPage;
diff --git a/src/containers/buyer/FeedBack.tsx b/src/containers/buyer/FeedBack.tsx
new file mode 100644
index 0000000..f751851
--- /dev/null
+++ b/src/containers/buyer/FeedBack.tsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import FeedbackModal from './FeedbackModal';
+import { FaStar, FaRegStar } from 'react-icons/fa';
+
+type Rating = number;
+
+interface Product {
+ id: string;
+ name: string;
+ price: string;
+ manufacturer: string;
+ ratings: Rating[];
+}
+
+const productsData: Product[] = [
+ {
+ id: '1',
+ name: 'Product 1',
+ price: '$100',
+ manufacturer: 'Manufacturer A',
+ ratings: [],
+ },
+ {
+ id: '2',
+ name: 'Product 2',
+ price: '$200',
+ manufacturer: 'Manufacturer B',
+ ratings: [4],
+ },
+ {
+ id: '3',
+ name: 'Product 3',
+ price: '$300',
+ manufacturer: 'Manufacturer C',
+ ratings: [3],
+ },
+];
+
+const FeedBack: React.FC = () => {
+ const [products, setProducts] = useState
+
+ );
+};
+
+export default FeedBack;
diff --git a/src/containers/buyer/FeedbackModal.tsx b/src/containers/buyer/FeedbackModal.tsx
new file mode 100644
index 0000000..2c5fcfb
--- /dev/null
+++ b/src/containers/buyer/FeedbackModal.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { useSubmitFeedbackMutation } from '../../services/feedbackApi';
+
+interface FeedbackModalProps {
+ productName: string;
+ productId: string;
+ isOpen: boolean;
+ onClose: () => void;
+ onSubmit: (feedback: { message: string; image: File | null; rating: number }) => void;
+}
+
+const FeedbackModal: React.FCPurchased Products
+ {currentProducts.map((product, index) => ( +
+
+ ))}
+
+
+
+
+ {product.name}
+
+ {product.ratings.length === 0 ? (
+
+ ) : (
+
+
+ {product.ratings.map((rating, index) => (
+
+ )}
+
+
+ ))}
+
+
+
+ {renderStars(rating)}
+
+ {Array.from({ length: totalPages }, (_, index) => (
+
+ ))}
+
+ {currentProduct && (
+
+
+ );
+};
+
+export default FeedbackModal;
diff --git a/src/containers/buyer/InTransit.tsx b/src/containers/buyer/InTransit.tsx
new file mode 100644
index 0000000..a036115
--- /dev/null
+++ b/src/containers/buyer/InTransit.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { setActiveMenu } from "../../redux/slices/buyerDashboard";
+
+function InTransitOrders({orderss}: any) {
+ const dispatch = useDispatch();
+
+ const {data} = orderss;
+ const inTransitOrders = data.filter((order:any) => order.status === "paid");
+
+ const [currentPage, setCurrentPage] = useState(1);
+ const ordersPerPage = 3;
+
+ const indexOfLastOrder = currentPage * ordersPerPage;
+ const indexOfFirstOrder = indexOfLastOrder - ordersPerPage;
+ const currentOrders = inTransitOrders.slice(indexOfFirstOrder, indexOfLastOrder);
+
+ const totalPages = Math.ceil(inTransitOrders.length / ordersPerPage);
+
+ const paginate = (pageNumber:any) => setCurrentPage(pageNumber);
+
+ return (
+
+
+ {productName}
+ +
+
+ );
+}
+
+export default InTransitOrders;
diff --git a/src/containers/buyer/OderDetails.tsx b/src/containers/buyer/OderDetails.tsx
new file mode 100644
index 0000000..9839fc1
--- /dev/null
+++ b/src/containers/buyer/OderDetails.tsx
@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useGetOrderItemsQuery } from '../../services/orderItemsApi';
+import { useCancelOrderMutation } from '../../services/ordersAPI';
+import { setIsOrderItemsFetching, setOrderItems } from '../../redux/slices/orderItemsSlice';
+import FeedbackModal from './FeedbackModal';
+import ConfirmationModal from './ConfirmationModal';
+import { setActiveMenu } from '../../redux/slices/buyerDashboard';
+
+
+function OrderDetails({ orderss }: any) {
+ const dispatch = useDispatch();
+ const { data } = orderss;
+ const [cancelOrderMutation] = useCancelOrderMutation();
+ const activeMenuId = useSelector((state: any) => state.activeMenu.id);
+ const { data: orderDetails, error, isLoading } = useGetOrderItemsQuery(activeMenuId);
+
+ // State for feedback modal
+ const [modalOpen, setModalOpen] = useState(false);
+ const [currentProduct, setCurrentProduct] = useStatePaid Orders
+
+ {currentOrders.length === 0 ? (
+
+
+ No orders found.
+
+ ):(
+ currentOrders.map((order:any) => (
+
+
+ ))
+ )}
+
+
+
+
+ Id:
+{order.id}
+
+
+ Status:
+{order.status}
+
+
+ {order.updatedAt}
+
+
+
+ Total Price:
+{order.totalPrice}
+
+ {Array.from({ length: totalPages }, (_, index) => (
+
+ ))}
+
+ Loading...
; + } + + if (orderItemsError) { + returnError loading order details: {orderItemsError}
; + } + + if (orderItems.length === 0) { + returnNo order details found
; + } + + const handleCancelOrder = async (orderId: string) => { + setOrderIdToCancel(orderId); + setConfirmModalOpen(true); + }; + + const confirmCancelOrder = async () => { + if (!orderIdToCancel) return; + + try { + await cancelOrderMutation(orderIdToCancel).unwrap(); + dispatch(setActiveMenu({ activeMenu: "orders" })) + setConfirmModalOpen(false); + } catch (error) { + console.error('Error cancelling order:', error); + } + }; + + const handleAddFeedback = (product: any) => { + setCurrentProduct(product); + setModalOpen(true); + }; + + const handleModalClose = () => { + setModalOpen(false); + setCurrentProduct(null); + }; + + const handleFeedbackSubmit = (feedback: { message: string; image: File | null; rating: number }) => { + console.log('Feedback submitted for product:', currentProduct?.id); + console.log('Feedback details:', feedback); + setModalOpen(false); + setCurrentProduct(null); + }; + + return ( +
+ setConfirmModalOpen(false)}
+ onConfirm={confirmCancelOrder}
+ message="Are you sure you want to cancel this order?"
+ />
+
+ );
+}
+
+export default OrderDetails;
+
diff --git a/src/containers/buyer/Orders.tsx b/src/containers/buyer/Orders.tsx
new file mode 100644
index 0000000..b49c0c3
--- /dev/null
+++ b/src/containers/buyer/Orders.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { setActiveMenu } from "../../redux/slices/buyerDashboard";
+import DateFormatter from "../../utils/DateFormater";
+
+function Orders({orderss}:any) {
+ const dispatch = useDispatch();
+ const {data} = orderss
+
+ const [currentPage, setCurrentPage] = useState(1);
+ const [filter, setFilter] = useState("All");
+
+ const ordersPerPage = 3;
+
+ const handleFilterChange = (e:any) => {
+ setFilter(e.target.value);
+ setCurrentPage(1);
+ };
+
+ const filteredOrders = data.filter((order:any) => {
+ if (filter === "All") return true;
+ if (filter === "Pending Payments") return order.status === "pending";
+ if (filter === "cancelled") return order.status === "cancelled";
+ if (filter === "delivered") return order.status === "delivered";
+ if (filter === "paid") return order.status === "paid";
+
+
+ if (filter === "In Transit") return order.status === "paid" || order.status === "processing";
+ return true;
+ });
+
+ const indexOfLastOrder = currentPage * ordersPerPage;
+ const indexOfFirstOrder = indexOfLastOrder - ordersPerPage;
+ const currentOrders = filteredOrders.slice(indexOfFirstOrder, indexOfLastOrder);
+
+ const totalPages = Math.ceil(filteredOrders.length / ordersPerPage);
+
+ const paginate = (pageNumber:any) => setCurrentPage(pageNumber);
+
+ return (
+ Order Details
+
+ {/* Order Items */}
+
+ {currentProduct && (
+
+
+
+ {/* Actions */}
+ Items
+
+ {orderItems.map((product: any) => (
+
+
+
+ ))}
+
+ 
+ {product.name}
+
+
+ Quantity:
+ {product.quantity}
+
+
+ Price:
+ ${product.sizes[0].price}
+
+ {/* Conditionally render the review button */}
+ {isDelivered && (
+
+
+
+ )}
+
+ {isPending && (
+ <>
+
+
+
+ )}
+
+
+
+ );
+}
+
+export default Orders;
diff --git a/src/containers/buyer/PendingPayments.tsx b/src/containers/buyer/PendingPayments.tsx
new file mode 100644
index 0000000..b3bd2ba
--- /dev/null
+++ b/src/containers/buyer/PendingPayments.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { setActiveMenu } from "../../redux/slices/buyerDashboard";
+import DateFormatter from "../../utils/DateFormater";
+
+function PendingPayments({orderss}:any) {
+ const dispatch = useDispatch();
+ const {data} = orderss
+ const orders = data.filter((order:any) => order.status === "pending");
+
+
+ const [currentPage, setCurrentPage] = useState(1);
+ const ordersPerPage = 4;
+
+ const indexOfLastOrder = currentPage * ordersPerPage;
+ const indexOfFirstOrder = indexOfLastOrder - ordersPerPage;
+ const currentOrders = orders.slice(indexOfFirstOrder, indexOfLastOrder);
+
+ const totalPages = Math.ceil(orders.length / ordersPerPage);
+
+ const paginate = (pageNumber:any) => setCurrentPage(pageNumber);
+
+ return (
+ My Orders
+
+
+
+
+ {currentOrders.map((order:any) => (
+
+
+
+ ))}
+
+
+
+
+ Id:
+{order.id}
+
+
+ Status:
+{order.status}
+
+
+
+
+
+ Total Price:
+${order.totalPrice}
+
+ {Array.from({ length: totalPages }, (_, index) => (
+
+ ))}
+
+
+
+ );
+}
+
+export default PendingPayments;
diff --git a/src/containers/buyer/Profile.tsx b/src/containers/buyer/Profile.tsx
new file mode 100644
index 0000000..4687cac
--- /dev/null
+++ b/src/containers/buyer/Profile.tsx
@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useUpdateUserMutation } from '../../services/userApi';
+import { updateUserInfo } from '../../redux/slices/userSlice';
+import { useDispatch } from 'react-redux';
+
+const Profile = () => {
+ const dispatch = useDispatch();
+ const userInfo = useSelector((state: any) => state.user.userInfo);
+ const [email, setEmail] = useStatePending Payments
+
+ {currentOrders.length === 0 ? (
+
+
+ No orders found.
+
+ ):(
+ currentOrders.map((order:any) => (
+
+
+ )))}
+
+
+
+
+ Id:
+{order.id}
+
+
+ Status:
+{order.status}
+
+
+
+
+
+ Total Price:
+{order.totalPrice}
+
+ {Array.from({ length: totalPages }, (_, index) => (
+
+ ))}
+
+ Loading...
;
+
+ return (
+
+
+ );
+};
+
+export default Profile;
diff --git a/src/containers/buyer/ResetPassword.tsx b/src/containers/buyer/ResetPassword.tsx
new file mode 100644
index 0000000..da8eafe
--- /dev/null
+++ b/src/containers/buyer/ResetPassword.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { useUpdatePasswordMutation } from '../../services/authAPI'; // Import the mutation hook
+
+function ResetPassword() {
+ const [oldPassword, setOldPassword] = useState('');
+ const [newPassword, setNewPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
+ const [updatePassword] = useUpdatePasswordMutation(); // Use the mutation hook
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (newPassword !== confirmPassword) {
+ alert('New password and confirmation do not match!');
+ return;
+ }
+
+ // Confirmation box
+ const isConfirmed = window.confirm('Are you sure you want to reset your password?');
+
+ if (!isConfirmed) {
+ return;
+ }
+
+ try {
+ const response = await updatePassword({ oldPassword, newPassword }).unwrap();
+ alert(response.message);
+ } catch (error) {
+ console.log('Failed to update password', error);
+ }
+ };
+
+ return (
+ Update Profile
+ +
+
+ );
+}
+
+export default ResetPassword;
diff --git a/src/containers/buyer/ReturnRefund.tsx b/src/containers/buyer/ReturnRefund.tsx
new file mode 100644
index 0000000..dfad87c
--- /dev/null
+++ b/src/containers/buyer/ReturnRefund.tsx
@@ -0,0 +1,7 @@
+function ReturnRefund() {
+ return (
+ Reset Password
+ +Return and Refund
+ )
+}
+
+export default ReturnRefund
\ No newline at end of file
diff --git a/src/containers/buyer/WishList.tsx b/src/containers/buyer/WishList.tsx
new file mode 100644
index 0000000..7b823b3
--- /dev/null
+++ b/src/containers/buyer/WishList.tsx
@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useGetUserWishlistQuery, useClearWishlistMutation } from '../../services/wishlistApi';
+import { clearWishLists, setWishLists } from '../../redux/slices/wishlistSlice';
+
+function WishList() {
+ const dispatch = useDispatch();
+ const { data, isLoading } = useGetUserWishlistQuery();
+ const [clearWishlist] = useClearWishlistMutation();
+ const wishlistItems = useSelector((state: any) => state.wishlist.items);
+
+ const handleClearWishlist = async () => {
+ try {
+ await clearWishlist().unwrap();
+ dispatch(clearWishLists());
+ } catch (error) {
+ }
+ };
+
+ useEffect(() => {
+ if (data) {
+ dispatch(setWishLists(data.data));
+ }
+ }, [data, dispatch]);
+
+ if (isLoading) return Loading...
;
+
+ return (
+
+
+ );
+}
+
+export default WishList;
diff --git a/src/pages/BuyerProfile.tsx b/src/pages/BuyerProfile.tsx
new file mode 100644
index 0000000..20d3bf5
--- /dev/null
+++ b/src/pages/BuyerProfile.tsx
@@ -0,0 +1,161 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useGetUserByIdQuery } from '../services/userApi';
+import { useGetOrdersQuery } from '../services/ordersAPI';
+import { setAllOrders, setIsOrdersFetched } from '../redux/slices/orderSlice';
+import { setFetchedUser } from '../redux/slices/userSlice';
+import Navbar from "../components/navbar/Navbar";
+import Footer from "../components/footer/Footer";
+import NotFoundPage from "./NotFoundPage";
+import ErrorPage from "../containers/buyer/ErrorPage";
+import Account from "../containers/buyer/Account";
+import ResetPassword from "../containers/buyer/ResetPassword";
+import Orders from "../containers/buyer/Orders";
+import PendingPayments from "../containers/buyer/PendingPayments";
+import FeedBack from "../containers/buyer/FeedBack";
+import InTransit from "../containers/buyer/InTransit";
+import ReturnRefund from "../containers/buyer/ReturnRefund";
+import Profile from "../containers/buyer/Profile";
+import OrderDetails from "../containers/buyer/OderDetails";
+import WishList from "../containers/buyer/WishList";
+import { setActiveMenu } from "../redux/slices/buyerDashboard";
+
+function BuyerProfile() {
+ const activeMenu = useSelector((state: any) => state.activeMenu.activeMenu);
+ const dispatch = useDispatch();
+
+ // Fetch user info from Redux store
+ const userInfo = useSelector((state: any) => state.user.userInfo) || {
+ firstName: 'Anonymous',
+ lastName: 'Anonymous',
+ photoUrl: '',
+ email: 'anonymous',
+ Role: 'Guest'
+ };
+
+ const user = useSelector((state: any) => state.user);
+ const userId = user.userId ? user.userId.replace(/"/g, '') : '';
+
+ // Fetch user data
+ const { isLoading: isFetchingUser, isSuccess: isUserFetched, isError: isUserError, error: userError, data: userData } = useGetUserByIdQuery(userId);
+
+ // Fetch orders data
+ const { allOrders }: any = useSelector((state: any) => state.orders);
+ const { isLoading: isFetchingOrders, isError: isOrdersError, error: ordersError, data: orders } = useGetOrdersQuery();
+
+ // Set user info when user data is fetched
+ useEffect(() => {
+ if (isUserFetched && userData?.message) {
+ const { id,firstName, lastName, photoUrl, email, Role } = userData.message;
+ dispatch(setFetchedUser({ id,firstName, lastName, photoUrl, email, Role, phoneNumber: '' }));
+ } else {
+ dispatch(setFetchedUser({
+ id: 'Anonymous',
+ firstName: 'Anonymous',
+ lastName: 'Anonymous',
+ phoneNumber: '',
+ email: 'anonymous',
+ Role: 'Guest'
+ }));
+ }
+ }, [isUserFetched, userData, dispatch]);
+
+ // Orders on page load
+ useEffect(() => {
+ if (!isFetchingOrders && orders) {
+ dispatch(setAllOrders(orders));
+ dispatch(setIsOrdersFetched(true));
+ }
+ }, [orders, dispatch, isFetchingOrders]);
+
+ // Early return for loading and not found states
+ if (isFetchingUser || isFetchingOrders) {
+ return Wish List
+ + {wishlistItems.length === 0 ? ( +No items in your wishlist
+ ) : (
+
+ {wishlistItems.map((item:any) => (
+
+ )}
+
+
+ ))}
+
+ 
+
+
+
+ {item.name}
+${item.price}
+Loading...
;
+ }
+
+ if (isUserError || userError) {
+ return Invalid Selection
;
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+export default BuyerProfile;
diff --git a/src/redux/slices/buyerDashboard.tsx b/src/redux/slices/buyerDashboard.tsx
new file mode 100644
index 0000000..c6035d8
--- /dev/null
+++ b/src/redux/slices/buyerDashboard.tsx
@@ -0,0 +1,30 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface ActiveMenuState {
+ activeMenu: string;
+ id?: string;
+ status?: string
+}
+
+const initialState: ActiveMenuState = {
+ activeMenu: "account",
+};
+
+const activeMenuSlice = createSlice({
+ name: "activeMenu",
+ initialState,
+ reducers: {
+ setActiveMenu: (state, action: PayloadAction<{ activeMenu: string; id?: string }>) => {
+ state.activeMenu = action.payload.activeMenu;
+ if (action.payload.id) {
+ state.id = action.payload.id;
+ } else {
+ delete state.id;
+ }
+ },
+ },
+});
+
+export const { setActiveMenu } = activeMenuSlice.actions;
+
+export default activeMenuSlice.reducer;
diff --git a/src/redux/slices/cartSlice.ts b/src/redux/slices/cartSlice.ts
new file mode 100644
index 0000000..fa3493d
--- /dev/null
+++ b/src/redux/slices/cartSlice.ts
@@ -0,0 +1,29 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Product } from '../../types/Types'
+
+interface CartState {
+ products: Product[];
+ isCartFetched: boolean;
+}
+
+const initialState: CartState = {
+ products: [],
+ isCartFetched: false,
+};
+
+const cartSlice = createSlice({
+ name: 'cart',
+ initialState,
+ reducers: {
+ setCartProducts: (state, action: PayloadAction
+
+
+
+
+
+ Buyer Dashboard
+
+ -
+
- dispatch(setActiveMenu({ activeMenu: "account" }))} + > + My Account + +
- dispatch(setActiveMenu({ activeMenu: "orders" }))} + > + My Orders + +
- dispatch(setActiveMenu({ activeMenu: "wish" }))} + > + Wish List + +
- dispatch(setActiveMenu({ activeMenu: "reset" }))} + > + Reset Password + +
+ {renderContent()}
+
+