Merge branch 'Dev' into checkoutPage

SpaceyaTech · Aug 8, 2024 · c63d656 · c63d656
2 parents dfc6534 + 7f223e6
commit c63d656
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 127 deletions.
diff --git a/src/components/shop/ProductCard.jsx b/src/components/shop/ProductCard.jsx
@@ -8,33 +8,43 @@ import { addCommaSeparator, categoryColors } from "../../utilities/utils";
 function ProductCard({ product }) {
   const { backgroundColor, color } = categoryColors(product.category);
 
+  const attributeWithImages = product.attributes.find(
+    (attribute) => attribute.images.length > 0
+  );
+  const image = attributeWithImages
+    ? attributeWithImages.images.map((img) => img.image)[0]
+    : "";
+  const totalStock = product.attributes.reduce(
+    (acc, attribute) => acc + attribute.stock,
+    0
+  );
   return (
     <div className="border rounded-lg p-2.5 pr-1.5 shadow-sm group hover:bg-green-dark/10 bg-white flex flex-col gap-4 ">
       <Link
         to={`/shop/item/${product.slug}`}
         className="aspect-h-1 aspect-w-1 w-full bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-96"
       >
         <LazyLoadImage
-          src={product.image}
-          alt="Product image"
+          src={image}
+          alt={product.name}
           className="w-full h-80 object-cover object-center lg:h-full lg:w-full"
         />
       </Link>
       <Link
         to={`/shop/item/${product.id}`}
         className="flex justify-between pr-1"
       >
-        <h3 className="text-md uppercase font-bold text-gray-600">
+        <h3 className="text-md uppercase font-medium text-gray-600">
           {product.name}
         </h3>
         <div className="p-1 rounded-xl bg-green-dark/10">
-          {product.stock > 0 ? (
+          {totalStock > 0 ? (
             <p className="text-green-dark font-medium text-sm px-1">
-              <span> {product.stock}</span>
+              <span> {totalStock}</span>
               <span className="ml-2">items left</span>
             </p>
           ) : (
-            <div className=" text-red-800 p-1 rounded-lg bg-red-800/20 font-bold text-base">
+            <div className=" text-red-800 p-1 rounded-lg bg-red-800/20 font-bold text-sm">
               <p>Out of stock</p>
             </div>
           )}
@@ -63,15 +73,37 @@ function ProductCard({ product }) {
 }
 export default ProductCard;
 
+const imagePropTypes = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  product_attribute: PropTypes.number.isRequired,
+  image: PropTypes.string.isRequired,
+  is_primary: PropTypes.bool.isRequired,
+  angle: PropTypes.string.isRequired,
+});
+
+const sizePropTypes = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+});
+
+const attributePropTypes = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  size: PropTypes.arrayOf(sizePropTypes).isRequired,
+  color: PropTypes.string.isRequired,
+  stock: PropTypes.number.isRequired,
+  images: PropTypes.arrayOf(imagePropTypes).isRequired,
+});
+
+const ProductCardPropTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  price: PropTypes.string.isRequired,
+  category: PropTypes.string.isRequired,
+  is_featured: PropTypes.bool.isRequired,
+  attributes: PropTypes.arrayOf(attributePropTypes).isRequired,
+};
 ProductCard.propTypes = {
-  product: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    price: PropTypes.number.isRequired,
-    image: PropTypes.string,
-    stock: PropTypes.number.isRequired,
-    category: PropTypes.string.isRequired,
-    slug: PropTypes.string.isRequired,
-  }).isRequired,
+  product: PropTypes.shape(ProductCardPropTypes).isRequired,
 };
diff --git a/src/hooks/Queries/shop/useSwagList.jsx b/src/hooks/Queries/shop/useSwagList.jsx
@@ -1,12 +1,10 @@
-// https://apis.spaceyatech.com/api/swaggs/
 import { useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import publicAxios from "../../../api/publicAxios";
 
 const fetchSwag = async () => {
   try {
-    const response = await publicAxios.get("/swaggsnew/");
-
+    const response = await publicAxios.get("/swaggsnew");
     return response.data;
   } catch (error) {
     toast.error("Error fetching swag list");
@@ -38,4 +36,21 @@ const useSingleSwag = (id) =>
     refetchOnWindowFocus: false,
   });
 
-export { useSingleSwag, useSwagList };
+const fetchSwagCategories = async () => {
+  try {
+    const response = await publicAxios.get("/product-categories");
+    return response.data;
+  } catch (error) {
+    toast.error("Error fetching swag list");
+    throw error;
+  }
+};
+
+const useSwagCategory = () =>
+  useQuery({
+    queryKey: ["swagCategory"],
+    queryFn: () => fetchSwagCategories(),
+    refetchOnWindowFocus: false,
+  });
+
+export { useSingleSwag, useSwagList, useSwagCategory };
diff --git a/src/pages/shop/Homepage.jsx b/src/pages/shop/Homepage.jsx
@@ -1,10 +1,10 @@
 import SeoMetadata from "../../components/SeoMetadata";
 import CartIcon from "../../components/shop/CartIcon";
 import Banner from "./sections/Banner/index";
+import BrowseProducts from "./sections/BrowseProducts";
 import FaqSection from "./sections/FaqSection";
-import FeaturedProducts from "./sections/FeaturedProducts";
 import FilterSection from "./sections/FilterSection";
-import NewProducts from "./sections/NewProducts";
+import NewProducts from "./sections/NewArrivals";
 
 function Homepage() {
   return (
@@ -24,8 +24,8 @@ function Homepage() {
         </div>
         <Banner />
         <FilterSection />
-        <FeaturedProducts />
         <NewProducts />
+        <BrowseProducts />
         <FaqSection />
       </div>
     </>

diff --git a/src/pages/shop/OrderSummaryPage.jsx b/src/pages/shop/OrderSummaryPage.jsx
@@ -2,10 +2,10 @@ import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import { CiShoppingTag } from "react-icons/ci";
 import { FaTrash } from "react-icons/fa";
-
 import { LazyLoadImage } from "react-lazy-load-image-component";
 
 import { Link } from "react-router-dom";
+import { useDeleteSwag } from "../../hooks/Mutations/shop/useCartSwagg";
 import useMakeOrder from "../../hooks/Mutations/shop/useMakeOrder";
 import useProductsInCart from "../../hooks/Queries/shop/useCartProducts";
 import PaymentMethd from "./PaymentMethd";
@@ -18,21 +18,15 @@ function Checkout() {
     isPending,
     isSuccess: successfulOrder,
   } = useMakeOrder();
-
-  const [, setOpen] = useState(false);
-
-  const [, setFormData] = useState(null);
-  const [address] = useState("");
+  const { mutate: deleteSwag } = useDeleteSwag(); // Use deleteSwag
 
   const [isOpen, setIsOpen] = useState(false);
 
-  // eslint-disable-next-line no-unused-vars
-  const handleSubmit = (e) => {
-    e.preventDefault();
+  const handleSubmit = (data) => {
     const payload = {
-      address,
-      // eslint-disable-next-line no-undef
-      phonenumber: phoneNumber,
+      country: data.address.country,
+      phone: data.phoneNumber,
+      address: `${data.address.postalAddress}, ${data.address.city}`,
     };
     makeOrder(payload);
   };
@@ -41,35 +35,31 @@ function Checkout() {
     setIsOpen(false);
   };
 
-  const handleFormData = (data) => {
-    setFormData(data);
-  };
-
   const handleDeleteItem = (productId) => {
-    products.cart_items?.filter((item) => item.product.id !== productId);
+    deleteSwag(productId);
   };
 
   return (
     <>
-      <ItemHeader show={() => setOpen((prev) => !prev)} />
+      <ItemHeader show={() => setIsOpen(true)} />
       <div className="px-8 sm:px-10 m-auto mb-10 max-w-screen-2xl justify-between w-full space-y-10 md:space-y-10 text-[#323433]">
-        <div className="flex flex-col md:flex-row justify-between space-y-8 sm:space-y-0">
-          <PaymentMethd isPending={isPending} handleSubmit={handleFormData} />
+        <div className="flex flex-col-reverse md:flex-row justify-between space-y-8 sm:space-y-0 gap-4 md:gap-0">
+          <PaymentMethd isPending={isPending} handleSubmit={handleSubmit} />
 
           {/* order summary */}
           <div className="bg-white min-w-40 md:w-3/5 w-full p-4 md:p-5 border rounded-md md:mx-6 my-2 md:my-0 h-full">
             <h2 className="text-xl font-medium sm:font-semibold">Your Cart</h2>
             <div className="mt-8 w-full">
-              <div className="flow-root ">
-                <ul className="-my-6 divide-y divide-gray-200  w-full">
+              <div className="flow-root">
+                <ul className="-my-6 divide-y divide-gray-200 w-full">
                   {isSuccess &&
                     products.cart_items?.map(
                       ({
                         id,
                         product: { id: productId, image, name, price },
                         quantity,
                       }) => (
-                        <li key={id} className=" flex py-6 space-x-4">
+                        <li key={id} className="flex py-6 space-x-4">
                           <div className="h-32 w-32 flex-shrink-0 overflow-hidden rounded-lg">
                             <LazyLoadImage
                               src={`https://apis.spaceyatech.com${image}`}
@@ -84,16 +74,12 @@ function Checkout() {
                               {id}
                             </span>
                             <p className="">
-                              {" "}
                               <Link to={`/shop/item/${productId}`}>{name}</Link>
                             </p>
 
                             <div className="flex justify-between w-full mt-4">
                               <p>Qty: {quantity}</p>
-                              <p className="">
-                                Ksh
-                                {price}
-                              </p>
+                              <p className="">Ksh {price}</p>
                             </div>
                           </div>
                           <button
@@ -110,14 +96,11 @@ function Checkout() {
                 </ul>
               </div>
               <div className="flex space-x-4 justify-between mt-10 pb-6 font-semibold sm:font-medium text-base">
-                <div className=" space-y-4 text-xl ">
+                <div className="space-y-4 text-xl">
                   <p>Cart Subtotal</p>
                 </div>
                 <div className="space-y-4 font-bold text-xl">
-                  <p>
-                    Ksh
-                    {isSuccess && products.total_price}
-                  </p>
+                  <p>Ksh {isSuccess && products.total_price}</p>
                 </div>
               </div>
               <div className="my-2 space-y-4 text-md">
@@ -131,7 +114,7 @@ function Checkout() {
                   />
                 </label>
                 <button
-                  type="submit"
+                  type="button"
                   className="bg-primary/15 p-2 px-4 my-3 rounded-lg text-md"
                 >
                   Apply code
@@ -145,7 +128,7 @@ function Checkout() {
                   className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border text-md"
                 />
                 <button
-                  type="submit"
+                  type="button"
                   className="bg-primary/15 p-2 px-4 my-3 rounded-lg"
                 >
                   Apply code
@@ -214,7 +197,7 @@ function Checkout() {
                     <div className="mt-4">
                       <button
                         type="button"
-                        className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                        className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm ring-offset-2 hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm"
                         onClick={closeModal}
                       >
                         Close