diff --git a/src/assets/images/icons/cart-icon.svg b/src/assets/images/icons/cart-icon.svg deleted file mode 100644 index 79745b6d..00000000 --- a/src/assets/images/icons/cart-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/shop/CartDrawer.jsx b/src/components/shop/CartDrawer.jsx index 20816b19..7cc492f7 100644 --- a/src/components/shop/CartDrawer.jsx +++ b/src/components/shop/CartDrawer.jsx @@ -1,15 +1,13 @@ import { Dialog, Transition } from "@headlessui/react"; -import { Fragment, useState, useEffect } from "react"; -import { AiOutlineClose, AiOutlineDelete } from "react-icons/ai"; // Import react-icons +import { Fragment, useEffect, useState } from "react"; +import { CiShoppingTag } from "react-icons/ci"; +import { IoIosCloseCircleOutline } from "react-icons/io"; +import { RiDeleteBin6Line } from "react-icons/ri"; import { LazyLoadImage } from "react-lazy-load-image-component"; -import { useNavigate, Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; +import formatPrice from "../../utilities/formatPrice"; -import SampleImg from "../../assets/images/shop-page/main-sample.png"; -import Sample3 from "../../assets/images/shop-page/sample3.png"; -import { useDeleteSwag } from "../../hooks/Mutations/shop/useCartSwagg"; -import useProductsInCart from "../../hooks/Queries/shop/useCartProducts"; import useAuth from "../../hooks/useAuth"; -import Counter from "./Counter"; function CartDrawer({ open, setOpen }) { const { auth } = useAuth(); @@ -19,6 +17,45 @@ function CartDrawer({ open, setOpen }) { // Get the JSON string from localStorage const [cartProducts, setCartProducts] = useState([]); + const dummyCartData = [ + { + id: "271fcc1c-0337-44f4-9449-2bc35b6ffd01", + name: "Cityscape Jacket", + description: + "Introducing our Cityscape Jacket: a blend of urban flair and unbeatable comfort. Crafted with premium materials, it offers sleek design and weather resistance for city adventures. Stay stylish and protected with adjustable features and convenient pockets. Upgrade your urban wardrobe today!", + category: "Jackets", + image: + "https://apis.spaceyatech.com/media/product_images/main-sample_copy_Fud5OzF.png", + price: "3000.00", + stock: 10, + color: "brown", + }, + { + id: "232437b9-3e64-4cad-a6c3-08158e118207", + name: "Cityscape Jacket - Mid", + description: + "Introducing our Cityscape Jacket: a blend of urban flair and unbeatable comfort. Crafted with premium materials, it offers sleek design and weather resistance for city adventures. Stay stylish and protected with adjustable features and convenient pockets. Upgrade your urban wardrobe today!", + category: "Jackets", + image: + "https://apis.spaceyatech.com/media/product_images/main-sample_copy_BRv17MK.png", + price: "1800.00", + stock: 11, + color: "brown", + }, + { + id: "9cd9a601-0ed9-4685-8633-4b04e0811fc7", + name: "SYT Hoodie", + description: + "Unleash your tech-savvy style with our Tech-Fit Hoodie. Designed for the modern individual, it seamlessly integrates functionality and fashion. Crafted with cutting-edge materials, it offers unrivaled comfort and durability. Elevate your wardrobe with this essential piece that effortlessly combines innovation and style.", + category: "Hoodies", + image: + "https://apis.spaceyatech.com/media/product_images/sample1_copy_PXgn3MX.png", + price: "2000.00", + stock: 10, + color: "white", + }, + ]; + useEffect(() => { const storage = localStorage.getItem("swagList") ? JSON.parse(localStorage.getItem("swagList")) @@ -112,15 +149,8 @@ function CartDrawer({ open, setOpen }) {
- - Your cart{" "} - - {/* ({isSuccess */}( - {(cartProducts?.cart_items - ? cartProducts.cart_items?.length - : cartProducts?.length) || 0} - ) - + + Your cart
-
+
{/* Items in Cart */}
    {/* {isSuccess && */} - {cartProducts?.length > 0 && - (cartProducts?.cart_items - ? cartProducts.cart_items - : cartProducts + {dummyCartData?.length > 0 && + (dummyCartData?.cart_items + ? dummyCartData.cart_items + : dummyCartData )?.map((cartProduct) => (
  • -
    -

    -

    - {" "} - - {cartProduct.name || - cartProduct.product?.name} - +

    +
    +
    +
    +

    + + Hoodies +

    +
    +

    +

    + {" "} + + {cartProduct.name || + cartProduct.product?.name} + +

    +

    +
    + +
    +
    +

    Qty: 1

    +

    + KES {formatPrice(cartProduct.price)}

    -

    - -
    -
    -

    - Ksh{" "} - {cartProduct.price || - cartProduct.product?.price} -

    - - {/* Count thing reason out */} - +
    • @@ -220,75 +246,33 @@ function CartDrawer({ open, setOpen }) {
- - {/* Recommendation items */} -
-

- {" < "} - You might love {" > "} -

-
-
- -
-
-

- Mentorlst Hoodie -

-
-

- Ksh 1500 -

- -
-
-
-
{/* Sub Total */} -
+
-

Sub Total

+ {/*

Sub Total

- Ksh {/* {isSuccess */} + Ksh {cartProducts?.total_price || "00"} -

+ */}
-
+
-

- By selecting ‘Check Out’ you are agreeing to our{" "} - - Terms & Conditions - -

diff --git a/src/components/shop/Counter.jsx b/src/components/shop/Counter.jsx index e4252a23..21176814 100644 --- a/src/components/shop/Counter.jsx +++ b/src/components/shop/Counter.jsx @@ -6,13 +6,13 @@ function Counter({ className, setCount, count }) {

{count} @@ -20,7 +20,7 @@ function Counter({ className, setCount, count }) { ))}

- -

Choose size

-
+

+ Choose a size +

+
{sizes.map((size) => ( ))}
- - - - - +
+ +
+ + + +
+
+

+ Product description +

+

+ {singleSwag.description} +

) : ( diff --git a/src/pages/shop/sections/ItemHeader.jsx b/src/pages/shop/sections/ItemHeader.jsx index 6b0101cd..9003cf82 100644 --- a/src/pages/shop/sections/ItemHeader.jsx +++ b/src/pages/shop/sections/ItemHeader.jsx @@ -1,10 +1,11 @@ -import { FaCheck } from "react-icons/fa"; -import { FaMagnifyingGlass } from "react-icons/fa6"; -import { PiShoppingCartLight } from "react-icons/pi"; import { Combobox, Transition } from "@headlessui/react"; import { Fragment, useState } from "react"; -import { useLocation, useParams, Link } from "react-router-dom"; +import { FaCheck } from "react-icons/fa"; +import { FaMagnifyingGlass } from "react-icons/fa6"; +import { MdOutlineAddShoppingCart } from "react-icons/md"; +import { Link, useLocation, useParams } from "react-router-dom"; import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; +import GoBackBtn from "../../../components/GoBackBtn"; function ItemHeader({ show }) { const { pathname } = useLocation(); @@ -30,37 +31,13 @@ function ItemHeader({ show }) { ); return ( -
+
{/* Breadcrumb */} {/* Search box */} @@ -144,8 +121,13 @@ function ItemHeader({ show }) {
)} -
diff --git a/src/pages/shop/sections/PopularItemsSection.jsx b/src/pages/shop/sections/PopularItemsSection.jsx index 13704327..82690122 100644 --- a/src/pages/shop/sections/PopularItemsSection.jsx +++ b/src/pages/shop/sections/PopularItemsSection.jsx @@ -1,6 +1,8 @@ +import { CiShoppingTag } from "react-icons/ci"; +import { LazyLoadImage } from "react-lazy-load-image-component"; import { useNavigate } from "react-router-dom"; import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; -import { LazyLoadImage } from "react-lazy-load-image-component"; +import formatPrice from "../../../utilities/formatPrice"; function PopularItemsSection() { const navigate = useNavigate(); @@ -8,46 +10,64 @@ function PopularItemsSection() { const { data: products, isPending, isError, isSuccess } = useSwagList(); return ( -
-

- Popular items from SpaceYaTech -

-
+
+
+
+

+ Similar Products +

+
+
+

+ Products similar to the one above +

+
{products ?.slice(0, 8) - .map( - ({ available, category, description, id, name, image, price }) => { - return ( -
navigate(`/shop/item/${id}`)} - > -
- -
-
-
-

- - {name} -

-

- {price} -

+ .map(({ stock, category, description, id, name, image, price }) => ( +
navigate(`/shop/item/${id}`)} + > +
+ +
+
+
+
+

+ {name} +

+
+ {stock ? ( +

+ {stock} {stock === 1 ? "item" : "items"} left +

+ ) : ( +

+ Out of stock +

+ )}
+
+

+ + {category} +

+
+

+ KES {formatPrice(price)} +

- ); - } - )} +
+
+ ))}
); diff --git a/src/utilities/formatPrice.jsx b/src/utilities/formatPrice.jsx new file mode 100644 index 00000000..924da6b6 --- /dev/null +++ b/src/utilities/formatPrice.jsx @@ -0,0 +1,6 @@ +const formatPrice = (price) => + new Intl.NumberFormat("en-US", { + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(price); +export default formatPrice;