-
-
- Total:
- ${total} -
+
+ )}
+ {cartItems.length === 0 && (
+ Total:
+ ${total} +Cart Empty
+ )} + {cartItems.length > 0 && ( +
diff --git a/src/components/Checkout/Checkout.tsx b/src/components/Checkout/Checkout.tsx
index faa8d299..94d8ad82 100644
--- a/src/components/Checkout/Checkout.tsx
+++ b/src/components/Checkout/Checkout.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, SetStateAction } from 'react';
import { useNavigate } from 'react-router-dom';
import CardInput, { Card } from './CardInput';
import { RootState } from '@/app/store';
-import { fetchCartItems } from '@/features/Cart/cartSlice';
+import { fetchCartItems, selectCartItems } from '@/features/Cart/cartSlice';
import { Checkout as CheckoutType } from '@/interfaces/checkout';
import BeatLoader from 'react-spinners/BeatLoader';
@@ -11,6 +11,7 @@ import {
placeOrder,
makePayment,
updateStatus,
+ resetState,
} from '@/features/Checkout/checkoutSlice';
import { useAppDispatch, useAppSelector } from '@/app/hooks';
import {
@@ -48,7 +49,12 @@ function Checkout() {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const user = useAppSelector((state) => state.signIn.user);
-
+ const cartItems = useAppSelector((state: RootState) =>
+ selectCartItems(state)
+ );
+ const total = cartItems.reduce((acc, curr) => {
+ return acc + curr.product.salesPrice * curr.quantity;
+ }, 0);
function handleAdding() {
setAdding(!adding);
}
@@ -60,14 +66,17 @@ function Checkout() {
function handleSave(newCard: Card) {
setCards((prev) => [...prev, newCard]);
+ }
+ function applyCoupon(e: React.ChangeEvent) {
+ setCoupon(e.target.value);
const checkout: CheckoutType = {
deliveryInfo: {
address,
city,
zip: '12345',
},
- couponCode: coupon,
+ couponCode: e.target.value,
email: user?.email || '',
firstName: user?.firstName || '',
lastName: user?.lastName || '',
@@ -77,8 +86,22 @@ function Checkout() {
function handlePayment() {
- console.log(order.id)
- dispatch(makePayment(order.id));
+ if (order.id === -1) {
+ const checkout: CheckoutType = {
+ deliveryInfo: {
+ address,
+ city,
+ zip: '12345',
+ },
+ couponCode: '',
+ email: user?.email || '',
+ firstName: user?.firstName || '',
+ lastName: user?.lastName || '',
+ };
+ dispatch(placeOrder(checkout)).then((res) =>
+ dispatch(makePayment(res.payload.id))
+ );
+ } else dispatch(makePayment(order.id));
}
useEffect(() => {
@@ -88,6 +111,7 @@ function Checkout() {
showSuccessToast('Succesfully Paid');
dispatch(updateStatus(false));
dispatch(fetchCartItems());
+ dispatch(resetState());
navigate('/');
} else if (paying && error) {
showErrorToast('failed');
@@ -319,7 +343,7 @@ function Checkout() {
setCoupon(e.target.value)}
+ onChange={applyCoupon}
value={coupon}
/>
@@ -389,7 +413,7 @@ function Checkout() {
Total Cost
- ${checkoutState.checkout.totalAmount}
+ ${order.totalAmount || total}
+
Top Categories
Categories
diff --git a/src/components/dashBoard/BestSellingProducts.tsx b/src/components/dashBoard/BestSellingProducts.tsx index 2c50bbac..6c4d2158 100644 --- a/src/components/dashBoard/BestSellingProducts.tsx +++ b/src/components/dashBoard/BestSellingProducts.tsx @@ -19,13 +19,13 @@ function ProductTable() { }); }, [token]); return ( -
+
Best selling Products
-
+
-
| ID | +||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| No | IMAGE | PRODUCT NAME | CATEGORY | @@ -35,7 +35,7 @@ function ProductTable() {|||||||||||||||||||||||||
| {idx + 1} |
{item.icon}
- {item.name}
+
+ {item.name}
+
{item.subItems &&
(expanded ? (
@@ -120,20 +181,26 @@ function SideBarItem({ item, activeItem, setActiveItem }: SideBarItemProps) {
{expanded && item.subItems && (
-
-
-
-
- Total Sales Available- -Sales Summary -
-
-
diff --git a/src/features/Cart/cartSlice.tsx b/src/features/Cart/cartSlice.tsx
index a6837279..bdb3180b 100644
--- a/src/features/Cart/cartSlice.tsx
+++ b/src/features/Cart/cartSlice.tsx
@@ -40,7 +40,19 @@ export const fetchCartItems = createAsyncThunk(
Authorization: `Bearer ${tokenFromStorage}`,
},
});
- return response.data.cartItems;
+ const res = response.data.cartItems;
+ res.reduce((acc: Cart[], curr: Cart) => {
+ const existingItem = acc.find(
+ (item) => item.product.id === curr.product.id
+ );
+ if (existingItem) {
+ existingItem.quantity += curr.quantity;
+ } else {
+ acc.push(curr);
+ }
+ return acc;
+ }, []);
+ return res;
}
);
diff --git a/src/features/Checkout/checkoutSlice.ts b/src/features/Checkout/checkoutSlice.ts
index 2aecf29b..a44ffe7d 100644
--- a/src/features/Checkout/checkoutSlice.ts
+++ b/src/features/Checkout/checkoutSlice.ts
@@ -13,8 +13,8 @@ export interface CheckoutState {
}
const initialOrder: Order = {
- id: 31,
- totalAmount: 160,
+ id: -1,
+ totalAmount: 0,
status: 'Pending',
couponCode: '',
deliveryInfo: {
@@ -165,6 +165,9 @@ const checkoutSlice = createSlice({
updateLastName: (state, action: PayloadAction
-
-
-
- 
-
-
- {sum}$
-
- Total Sales
+ {Role === 'Admin' && (
+ <>
+
+
-
+
- Total Sales Available+All Products Sales -
-
- {Array.from({ length: Math.floor(4 - product.averageRating) }).map(
+ {Array.from({ length: Math.floor(5 - product.averageRating) }).map(
(_, index) => {
return (
-
);
diff --git a/src/components/dashBoard/UserRole.tsx b/src/components/dashBoard/UserRole.tsx
new file mode 100644
index 00000000..6ac15ba7
--- /dev/null
+++ b/src/components/dashBoard/UserRole.tsx
@@ -0,0 +1,357 @@
+/* eslint-disable react/button-has-type */
+import { useEffect, useState, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { MdOutlineEdit } from 'react-icons/md';
+import BeatLoader from 'react-spinners/BeatLoader';
+import { RootState, AppDispatch } from '@/app/store';
+import { showErrorToast, showSuccessToast } from '@/utils/ToastConfig';
+import {
+ fetchUserRoles,
+ deleteUserRole,
+ createUserRole,
+ updateUserRole,
+} from '@/features/userRole/userRoleSlice';
+import ConfirmationCard from './ConfirmationCard';
+import CircularPagination from './NavigateonPage';
+import TableLogo from '@/assets/TableLogo.png';
+
+function TableUserRole() {
+ const dispatch: AppDispatch = useDispatch();
+ const { roles, status } = useSelector((state: RootState) => state.userRoles);
+ const [editRole, setEditRole] = useState<{
+ id: number;
+ name: string;
+ permissions: string[];
+ } | null>(null);
+
+ const [isConfirmationModalVisible, setModalVisible] = useState(false);
+ const [itemSelected, setItemSelected] = useState
-
- 
+ Sales Summary +
+
-
+
-
+
+
+
+
+
+
+ {sum}$
+
+ Total Sales
+
+ + All Products Sales + {order.length}
-
- Total Order
-
- All Orders -
-
-
-
-
- 
+
+
-
+
+
+
+
+ {order.length}
+
+ Total Order
+
+ All Orders {tproduct}
-
- Product Sold
-
- All Products Sold -
-
-
-
-
-
- 
+
+
-
+
+
+
+
+ {tproduct}
+
+ Product Sold
+
+ + All Products Sold{' '} +
- {buyers &&
- buyers.filter(
- (user) => user.userType && user.userType.name === 'Buyer'
- ).length}
+
-
+
+
+
+
+
+
+ {buyers &&
+ buyers.filter(
+ (user) =>
+ user.userType && user.userType.name === 'Buyer'
+ ).length}
+
+
+ New Customers
+
+ All Buyers
- New Customers
-
- All Buyers
-
-
-
-
-
+
+
+
+
+
+ )}
+
+ );
+}
+
+export default TableUserRole;
diff --git a/src/components/dashBoard/addProducts.tsx b/src/components/dashBoard/addProducts.tsx
index b2a2206a..36fed32b 100644
--- a/src/components/dashBoard/addProducts.tsx
+++ b/src/components/dashBoard/addProducts.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useState, ChangeEvent, useEffect } from 'react';
import {
Formik,
diff --git a/src/components/home/ProductCard.tsx b/src/components/home/ProductCard.tsx
index 0e7755b9..5afa3a60 100644
--- a/src/components/home/ProductCard.tsx
+++ b/src/components/home/ProductCard.tsx
@@ -1,18 +1,22 @@
import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
import { FaRegHeart, FaHeart } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import Cart from '@/interfaces/cart';
import {
addToWishlist,
removeFromWishlist,
} from '@/features/Products/ProductSlice';
import { Product } from '@/types/Product';
-import { addCartItem } from '@/features/Cart/cartSlice';
+import { addCartItem, removeCartItem } from '@/features/Cart/cartSlice';
+import { showSuccessToast } from '@/utils/ToastConfig';
interface ProductCardProps {
product: Product;
}
function ProductCard({ product }: ProductCardProps) {
+ const [cartId, setCartId] = useStateManage User Role +
+
+
+
+
+
+
+
+
+ {mode === 'delete' && (
+
+
+ Register Role +
+
+ setRoleName(e.target.value)}
+ className="w-[100%] border relative bg-grayLight text-black duration-100 outline-none justify-between flex items-center gap-2 px-3 rounded-md font-light group-hover:border-grayDark p-3 mb-5 lg:w-[70%] md:w-[70%]"
+ />
+
+
+
+
+
+
+
+
+
+ {permissions.map((permission, index) => (
+
+ {permission}
+
+
+ ))}
+
+
+ setNewPermission(e.target.value)}
+ className="w-[100%] border relative bg-grayLight duration-100 outline-none justify-between flex items-center gap-2 px-3 rounded-md font-light group-hover:border-grayDark p-3 lg:w-[70%] md:w-[70%]"
+ />
+
+
+
+ {editRole ? (
+
+ ) : (
+
+ )}
+
+
+
+ )}
+
+ {isPopupVisible && (
+
+
+ )}
+
+
+
+
+
+
+
+ DELETE ROLE +{popupMessage} +
@@ -162,13 +194,25 @@ function ProductCard({ product }: ProductCardProps) {
${product.regularPrice}
-
+
+ );
+}
+
+export default CouponForm;
diff --git a/src/pages/Coupons.tsx b/src/pages/Coupons.tsx
new file mode 100644
index 00000000..2842afa1
--- /dev/null
+++ b/src/pages/Coupons.tsx
@@ -0,0 +1,353 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { MdOutlineEdit } from 'react-icons/md';
+import { IoIosArrowDown, IoIosSearch } from 'react-icons/io';
+import PuffLoader from 'react-spinners/PuffLoader';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/app/store';
+import {
+ fetchCoupons,
+ deleteCoupon,
+ selectCoupons,
+ fetchMyCoupons,
+} from '@/features/Coupons/CouponsFeature';
+
+import CircularPagination from '@/components/dashBoard/NavigateonPage';
+import { useAppSelector } from '@/app/hooks';
+import { showErrorToast } from '@/utils/ToastConfig';
+import Button from '@/components/form/Button';
+
+function Coupons() {
+ const [currentPage, setCurrentPage] = useState(1);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [expandedRows, setExpandedRows] = useState
+
+ Create New Coupon+
+
+ );
+}
+
+export default Coupons;
diff --git a/src/pages/EditCoupon.tsx b/src/pages/EditCoupon.tsx
new file mode 100644
index 00000000..a1fdd75f
--- /dev/null
+++ b/src/pages/EditCoupon.tsx
@@ -0,0 +1,320 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useParams, useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+import { Formik, Field, Form, FieldArray, ErrorMessage } from 'formik';
+import BeatLoader from 'react-spinners/BeatLoader';
+import { IoIosCloseCircle } from 'react-icons/io';
+import PuffLoader from 'react-spinners/PuffLoader';
+import { useAppSelector, useAppDispatch } from '@/app/hooks';
+import { updateCoupon } from '@/features/Coupons/CouponsFeature';
+import { RootState } from '@/app/store';
+import { showErrorToast } from '@/utils/ToastConfig';
+import Product from '@/interfaces/product';
+
+interface CouponFormData {
+ description: string;
+ percentage: number;
+ expirationDate: string;
+ applicableProducts: Product[];
+}
+
+function EditCoupon() {
+ const [products, setProducts] = useState
+
+ Coupons+
+
+ {/* Table */}
+ {deleteModal && (
+
+
+
+
+ )}
+ {loading ? (
+
+
+
+ Are you sure you want to Delete?
+
+
+
+ This coupons +
+
+
+
+
+
+ ) : error ? (
+ <>{showErrorToast(error)}
+ ) : (
+
+
+ )}
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+export default EditCoupon;
diff --git a/src/pages/ProductDetails.tsx b/src/pages/ProductDetails.tsx
index aed5e19a..37d2583e 100644
--- a/src/pages/ProductDetails.tsx
+++ b/src/pages/ProductDetails.tsx
@@ -6,6 +6,8 @@ import ClipLoader from 'react-spinners/ClipLoader';
import { IoClose } from 'react-icons/io5';
import { useAppDispatch, useAppSelector } from '@/app/hooks';
import Button from '@/components/form/Button';
+import { addCartItem, removeCartItem } from '@/features/Cart/cartSlice';
+import Cart from '@/interfaces/cart';
import {
addToWishlist,
fetchProductDetails,
@@ -161,6 +163,7 @@ function ProductDetails() {
const [toggleLoginOverlay, setToggleLoginOverlay] = useState(false);
const [isVisible, setIsVisible] = useState({ state: true, name: 'details' });
const [activeImg, setActiveImg] = useState('');
+ const [cartId, setCartId] = useState
+
+ Edit Coupon+
@@ -343,45 +365,47 @@ function ProductDetails() {
);
})}
{Array.from({
- length: Math.floor(4 - product.averageRating),
+ length: Math.floor(5 - product.averageRating),
}).map((_, index) => {
return (
-
+ {product.averageRating % 1 !== 0 && (
+
+ )}
@@ -436,6 +460,7 @@ function ProductDetails() {
|