- {/* Image */}
-
-
- {product.stock <= 10 && product.stock > 0 && (
-
- Only {product.stock} left
-
- )}
- {product.stock === 0 && (
-
- Out of Stock
-
- )}
- {/* Wishlist button */}
-
-
+ return (
+
+ {/* Image */}
+
+
+ {product.stock <= 10 && product.stock > 0 && (
+
+ Only {product.stock} left
+
+ )}
+ {product.stock === 0 && (
+
+ Out of Stock
+
+ )}
+ {/* Wishlist button */}
+
+ {/* compare button */}
+
+
- {/* Content */}
-
-
- {product.category}
-
-
- {product.title}
-
+ {/* Content */}
+
+
+ {product.category}
+
+
+ {product.title}
+
-
- {renderStars(product.rating)}
- ({product.rating})
-
+
+ {renderStars(product.rating)}
+ ({product.rating})
+
-
-
- ${product.price.toFixed(2)}
-
-
-
-
+
+
+ ${product.price.toFixed(2)}
+
+
- );
+
+
+ );
}
+
diff --git a/src/features/products/services/productService.js b/src/features/products/services/productService.js
index 68e1ec4..ab7ff8c 100644
--- a/src/features/products/services/productService.js
+++ b/src/features/products/services/productService.js
@@ -5,7 +5,7 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
export async function getProducts() {
await wait(500);
- return Promise.resolve(products);
+ return Promise.resolve( products );
}
export async function getProductById(id) {
@@ -38,13 +38,16 @@ export async function getReviewsByProductId(productId) {
export async function filterProducts({
search = "",
category = "",
- minPrice = 0,
- maxPrice = Infinity,
sortBy = "title",
sortOrder = "asc",
- page = 1,
- limit = 8,
+ pageNum = 1,
+ // Three properties need ui to completed his features
+ maxPrice = Infinity,
+ minPrice = 0,
+ pageLimit=8,
} = {}) {
+
+
await wait(500);
let filtered = [...products];
@@ -53,8 +56,7 @@ export async function filterProducts({
const searchLower = search.toLowerCase();
filtered = filtered.filter(
(p) =>
- p.title.toLowerCase().includes(searchLower) ||
- p.description.toLowerCase().includes(searchLower)
+ p.title.toLowerCase().includes(searchLower)
);
}
@@ -83,20 +85,21 @@ export async function filterProducts({
comparison = a.title.localeCompare(b.title);
break;
}
+
return sortOrder === "desc" ? -comparison : comparison;
});
// Calculate pagination AFTER filtering
const total = filtered.length;
- const totalPages = Math.ceil(total / limit);
- const startIndex = (page - 1) * limit;
- const data = filtered.slice(startIndex, startIndex + limit);
-
+ const totalPages = Math.ceil(total / pageLimit);
+ const startIndex = (pageNum - 1) * pageLimit;
+ const data = filtered.slice(startIndex, startIndex + pageLimit);
+
return Promise.resolve({
data,
total,
- page,
+ pageNum,
totalPages,
- limit,
+ pageLimit,
});
}
diff --git a/src/features/wishlist/hooks/useWishlistStore.js b/src/features/wishlist/hooks/useWishlistStore.js
index a7522d2..cac657a 100644
--- a/src/features/wishlist/hooks/useWishlistStore.js
+++ b/src/features/wishlist/hooks/useWishlistStore.js
@@ -1,23 +1,44 @@
+import toast from "react-hot-toast";
import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
-const useWishlistStore = create((set, get) => ({
- items: [],
+const useWishlistStore = create( persist( (set, get) => ({
+ items: [],
- addToWishlist: (product) => {
- const items = get().items;
- const exists = items.find((item) => item.id === product.id);
- if (exists) return;
- set({ items: [...items, product] });
- },
+ toggleWishlist: (product) => {
+ const items = get().items;
+ const exists = items.find((item) => item.id === product.id);
+ if (exists) {
+
+ get().removeFromWishlist(product.id )
+
+
+ } else {
+ set({ items: [...items, product] });
+ toast.success('Added item to wishlist page')
+ }
+ },
- // Partial implementation — students should complete this
+ // Partial implementation — students should complete this
removeFromWishlist: (productId) => { // eslint-disable-line no-unused-vars
// TODO: Implement removal logic
+ const newItems = get().items.filter((item) => item.id !== productId);
+ set({ items: newItems });
+ toast.success('Removed item from wishlist page')
},
- isInWishlist: (productId) => {
- return get().items.some((item) => item.id === productId);
- },
-}));
+ isInWishlist: (productId) => {
+ return get().items.some((item) => item.id === productId);
+ },
+}) ,
+{
+
+ name:"shopHup-wishList",
+ storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
+}
+
+) );
export default useWishlistStore;
+
+
diff --git a/src/hooks/useFilterActions.js b/src/hooks/useFilterActions.js
new file mode 100644
index 0000000..39733e5
--- /dev/null
+++ b/src/hooks/useFilterActions.js
@@ -0,0 +1,30 @@
+import { useSearchParams } from 'react-router-dom';
+
+export const useFilterActions = () => {
+ const [filterParams, setFilterParams] = useSearchParams();
+
+ const updateURL = (newValues) => {
+ const params = new URLSearchParams(filterParams);
+
+ Object.entries(newValues).forEach(([key, value]) => {
+ if (value) {
+ params.set(key, value);
+ } else {
+ params.delete(key);
+ }
+ });
+
+// this condition for user if change in pagination dont reset pageNum
+ if (!newValues.pageNum) {
+ params.set("pageNum", 1);
+ }
+
+ setFilterParams(params);
+ };
+
+ return {
+ updateURL,
+ filterParams,
+ currentPage: Number(filterParams.get("pageNum")) || 1
+ };
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 9bff3f1..fa9386e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -30,3 +30,25 @@
-moz-osx-font-smoothing: grayscale;
}
}
+
+
+/* index.css */
+@layer components {
+ .price-slider-input {
+ /* Base input styling */
+ @apply absolute w-full appearance-none bg-transparent pointer-events-none z-20 h-2 outline-none;
+ -webkit-appearance: none;
+ }
+
+ /* Styling the thumb for Chrome, Safari, Edge, and Opera */
+ .price-slider-input::-webkit-slider-thumb {
+ @apply w-[18px] h-[18px] bg-white border-[3px] border-[#23a9f7] rounded-full cursor-pointer pointer-events-auto relative z-30;
+ -webkit-appearance: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ }
+
+ /* Styling the thumb for Firefox */
+ .price-slider-input::-moz-range-thumb {
+ @apply w-[18px] h-[18px] bg-white border-[3px] border-[#23a9f7] rounded-full cursor-pointer pointer-events-auto relative z-30 border-none;
+ }
+}
diff --git a/src/pages/CartPage.jsx b/src/pages/CartPage.jsx
index 857046a..c6dc106 100644
--- a/src/pages/CartPage.jsx
+++ b/src/pages/CartPage.jsx
@@ -1,12 +1,15 @@
import { Link } from "react-router-dom";
import useCartStore from "../features/cart/hooks/useCartStore";
+
export default function CartPage() {
const items = useCartStore((s) => s.items);
const updateQuantity = useCartStore((s) => s.updateQuantity);
const removeFromCart = useCartStore((s) => s.removeFromCart);
const clearCart = useCartStore((s) => s.clearCart);
+ console.log('cart items => ' , items);
+
const totalPrice = items.reduce(
(sum, item) => sum + item.price * item.quantity,
0
@@ -121,7 +124,9 @@ export default function CartPage() {
onClick={() =>
updateQuantity(item.id, item.quantity - 1)
}
- className="w-8 h-8 flex items-center justify-center text-gray-500 hover:text-primary-600 transition-colors"
+ className={`w-8 h-8 flex items-center justify-center text-gray-500 hover:text-primary-600 transition-colors
+ ${item.quantity == 1 ?"cursor-not-allowed opacity-40 font-normal ":"cursor-pointer opacity-100 font-extrabold"}
+ `}
>
−
@@ -130,9 +135,12 @@ export default function CartPage() {
diff --git a/src/pages/CheckoutPage.jsx b/src/pages/CheckoutPage.jsx
index 1c04448..9ee80a7 100644
--- a/src/pages/CheckoutPage.jsx
+++ b/src/pages/CheckoutPage.jsx
@@ -1,283 +1,135 @@
-import { useState } from "react";
import { Link } from "react-router-dom";
-import useCartStore from "../features/cart/hooks/useCartStore";
-export default function CheckoutPage() {
- const items = useCartStore((s) => s.items);
- const clearCart = useCartStore((s) => s.clearCart);
- const [orderPlaced, setOrderPlaced] = useState(false);
- const [form, setForm] = useState({
- firstName: "",
- lastName: "",
- email: "",
- phone: "",
- address: "",
- city: "",
- zipCode: "",
- country: "",
- });
+import { shippingFields } from "../features/checkout/data/shippingFields";
+import OrderSummery from "../features/checkout/components/OrderSummery";
+import FieldForm from "../features/checkout/components/FieldForm";
+import useCheckoutForm from "../features/checkout/hooks/useCheckoutForm";
+import { FormProvider } from "react-hook-form";
- const totalPrice = items.reduce(
- (sum, item) => sum + item.price * item.quantity,
- 0
- );
+export default function CheckoutPage() {
- const handleChange = (e) => {
- setForm({ ...form, [e.target.name]: e.target.value });
- };
- // No validation implemented — student task
- const handleSubmit = (e) => {
- e.preventDefault();
- clearCart();
- setOrderPlaced(true);
- };
+ const methods=useCheckoutForm()
- if (orderPlaced) {
- return (
-
-
-
- Order Placed Successfully!
-
-
- Thank you for your purchase. Your order has been confirmed and will be
- shipped shortly.
-
-
- Continue Shopping
-
-
- );
- }
-
- if (items.length === 0) {
- return (
-
-
- Your cart is empty
-
-
- Add some items to your cart before checking out.
-
-
- Browse Products
-
-
- );
- }
+
+ if (methods.orderPlaced) {
return (
-
-
-
Checkout
-
- Complete your order by filling in the details below
-
-
+
+
+
+ Order Placed Successfully!
+
+
+ Thank you for your purchase. Your order has been confirmed and will be
+ shipped shortly.
+
+
+ Continue Shopping
+
+
+ );
+ }
-