Merge pull request #111 from SpaceyaTech/feat/shop-pages

fixed inconsistent styles on shop pages

src/APP/index.js

@@ -1,10 +1,10 @@
 import LandingPage from "./pages/landingPage/LandingPage";
-import Homepage from "./pages/shop/pages/Homepage";
+import Homepage from "./pages/shop/Homepage";
 import SingleItemPage from "./pages/shop/pages/SingleItemPage";
 import Layout from "./pages/Layout";
 import Products from "./pages/products2/Products";
 import Resources from "./pages/resources/Resources";
-import Checkout from "./pages/shop/pages/Checkout";
+import Checkout from "./pages/shop/pages/OrderSummary";
 import AboutUs from "./pages/aboutUs/AboutUs";
 import CommunityPage from "./pages/community/CommunityPage";
 import DonatePage from "./pages/donate/DonatePage";
@@ -20,6 +20,7 @@ import Error400 from "./pages/errorPages/Error400";
 import Error403 from "./pages/errorPages/Error403";
 import Error404 from "./pages/errorPages/Error404";
 import Error500 from "./pages/errorPages/Error500";
+import ProductDisplay from "./pages/shop/pages/ProductDisplay";
 
 export {
   LandingPage,
@@ -44,4 +45,5 @@ export {
   Error403,
   Error404,
   Error500,
+  ProductDisplay,
 };

src/APP/pages/shop/Homepage.jsx

@@ -0,0 +1,15 @@
+import Banner from "./sections/Banner";
+import CategoriesSection from "./sections/CategoriesSection";
+import PopularItemsSection from "./sections/PopularItemsSection";
+
+function Homepage() {
+  return (
+    <div>
+      <Banner />
+      <CategoriesSection />
+      <PopularItemsSection />
+    </div>
+  );
+}
+
+export default Homepage;

src/APP/pages/shop/pages/Checkout.jsx → src/APP/pages/shop/pages/OrderSummary.jsx

@@ -4,6 +4,7 @@ import ItemHeader from "../sections/ItemHeader";
 import Sample1 from "../../../../assets/images/shop-page/sample1.png";
 import Sample2 from "../../../../assets/images/shop-page/sample2.png";
 import Counter from "../../../components/Counter";
+import { useOrderSummary } from "../../../../hooks/Queries/shop/useOrdersList";
 
 const products = [
   {
@@ -27,26 +28,28 @@ const products = [
   // More products...
 ];
 
+const steps = [
+  { description: "Provide your MPESA mobile number", key: 1 },
+  {
+    description:
+      "Click submit and a prompt will appear on your phone with a request to confirm transaction by providing your MPESA PIN",
+    key: 2,
+  },
+  {
+    description:
+      "Once completed, you will receive the confirmation SMS for this transaction",
+    key: 3,
+  },
+];
+
 function Checkout() {
-  //   const [open, setOpen] = useState(true);
-
-  const steps = [
-    { description: "Provide your MPESA mobile number", key: 1 },
-    {
-      description:
-        "Click submit and a prompt will appear on your phone with a request to confirm transaction by providing your MPESA PIN",
-      key: 2,
-    },
-    {
-      description:
-        "Once completed, you will receive the confirmation SMS for this transaction",
-      key: 3,
-    },
-  ];
+  const [open, setOpen] = useState(false);
+
+  const { data: orderSummary, status } = useOrderSummary();
 
   return (
     <>
-      {/* <ItemHeader show={() => setOpen((prev) => !prev)} /> */}
+      <ItemHeader show={() => setOpen((prev) => !prev)} />
 
       <div className="px-8 sm:px-0 m-auto mb-10 max-w-screen-2xl justify-between w-full space-y-10 md:space-y-20 text-[#323433]">
         <div className="flex flex-col md:flex-row justify-between space-y-8 sm:space-y-0">

src/APP/pages/shop/pages/ProductDisplay.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import SingleItemPage from "./SingleItemPage";
+import PopularItemsSection from "../sections/PopularItemsSection";
+
+function ProductDisplay() {
+  return (
+    <div>
+      <SingleItemPage />
+      <PopularItemsSection />
+    </div>
+  );
+}
+
+export default ProductDisplay;

src/APP/pages/shop/pages/SingleItemPage.jsx

@@ -12,6 +12,8 @@ import CloseIcon from "../../../../assets/images/icons/close-icon.svg";
 import DeleteIcon from "../../../../assets/images/icons/delete-icon.svg";
 import Counter from "../../../components/Counter";
 import ItemHeader from "../sections/ItemHeader";
+import useProductsInCart from "../../../../hooks/Queries/shop/useCartProducts";
+import { useSingleOrder } from "../../../../hooks/Queries/shop/useOrdersList";
 
 const products = [
   {
@@ -37,10 +39,15 @@ const products = [
 
 const VariationData = [SmallSample1, SmallSample2, SmallSample1, SmallSample2];
 
-export default function Example() {
+export default function SingleItemPage() {
   const [open, setOpen] = useState(true);
+  const [ProductsInCart, setProductsInCart] = useState(null);
+
   const navigate = useNavigate();
+  const { data: cartProducts, status } = useProductsInCart();
+  const { data: singleOrder } = useSingleOrder();
 
+  // console.log("cart Products", cartProducts);
   return (
     <>
       <ItemHeader show={() => setOpen((prev) => !prev)} />
@@ -122,6 +129,7 @@ export default function Example() {
           <button
             type="button"
             className="w-full h-[62px] bg-primary text-[#F7F7F7] text-sm font-medium rounded-lg"
+            onClick={() => setOpen(true)}
           >
             Buy Now
           </button>
@@ -163,80 +171,80 @@ export default function Example() {
                 >
                   <Dialog.Panel className="pointer-events-auto w-screen max-w-2xl">
                     <div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl py-6 sm:py-12 px-2 sm:px-10">
-                      <div className="flex-1 overflow-y-auto px-4 py-6 sm:px-6">
-                        <div className="flex items-start justify-between">
-                          <Dialog.Title className="text-3xl font-semibold">
-                            Your cart{" "}
-                            <span className="text-[#00CC9C]">(4)</span>
-                          </Dialog.Title>
-                          <div className="ml-3 flex h-7 items-center">
-                            <button
-                              type="button"
-                              className="-m-2 p-2 text-gray-400 hover:text-gray-500"
-                              onClick={() => setOpen(false)}
-                            >
-                              <span className="sr-only">Close panel</span>
-                              <img src={CloseIcon} alt="close" />
-                            </button>
-                          </div>
+                      <div className="flex items-start justify-between">
+                        <Dialog.Title className="text-3xl font-semibold">
+                          Your cart <span className="text-[#00CC9C]">(4)</span>
+                        </Dialog.Title>
+                        <div className="ml-3 flex h-7 items-center">
+                          <button
+                            type="button"
+                            className="-m-2 p-2 text-gray-400 hover:text-gray-500"
+                            onClick={() => setOpen(false)}
+                          >
+                            <span className="sr-only">Close panel</span>
+                            <img src={CloseIcon} alt="close" />
+                          </button>
                         </div>
+                      </div>
 
+                      <div className="flex-1 overflow-y-auto px-4 py-6 sm:px-6">
                         {/* Items in Cart */}
                         <div className="mt-8">
                           <div className="flow-root">
                             <ul className="-my-6 divide-y divide-gray-200 border-b">
-                              {products.map(
-                                ({
-                                  id,
-                                  imageSrc,
-                                  name,
-                                  href,
-                                  price,
-                                  color,
-                                  quantity,
-                                }) => (
-                                  <li
-                                    key={id}
-                                    className="flex py-6 space-x-4 sm:space-x-16"
-                                  >
-                                    <div className="h-32 w-28 flex-shrink-0 overflow-hidden rounded-2xl">
-                                      <img
-                                        src={imageSrc}
-                                        alt={name}
-                                        className="h-full w-full object-cover object-center"
-                                      />
-                                    </div>
+                              {status === "success" &&
+                                products.map(
+                                  ({
+                                    id,
+                                    imageSrc,
+                                    name,
+                                    href,
+                                    price,
+                                    color,
+                                    quantity,
+                                  }) => (
+                                    <li
+                                      key={id}
+                                      className="flex py-6 space-x-4 sm:space-x-16"
+                                    >
+                                      <div className="h-32 w-28 flex-shrink-0 overflow-hidden rounded-2xl">
+                                        <img
+                                          src={imageSrc}
+                                          alt={name}
+                                          className="h-full w-full object-cover object-center"
+                                        />
+                                      </div>
 
-                                    <div className="ml-4 flex flex-1 flex-col space-y-14">
-                                      <div className="flex justify-between text-base font-medium text-gray-900">
-                                        <h3>
-                                          <p className="text-base md:text-xl">
-                                            {" "}
-                                            <a href={href}>{name}</a>
+                                      <div className="ml-4 flex flex-1 flex-col space-y-14">
+                                        <div className="flex justify-between text-base font-medium text-gray-900">
+                                          <h3>
+                                            <p className="text-base md:text-xl">
+                                              {" "}
+                                              <a href={href}>{name}</a>
+                                            </p>
+                                          </h3>
+                                          <button
+                                            type="button"
+                                            className="flex justify-end"
+                                          >
+                                            <img
+                                              src={DeleteIcon}
+                                              alt="delete button"
+                                            />
+                                          </button>
+                                        </div>
+                                        <div className="flex flex-1 items-end justify-between text-sm">
+                                          <p className="text-xl md:text-2xl font-bold">
+                                            Ksh
+                                            {price}
                                           </p>
-                                        </h3>
-                                        <button
-                                          type="button"
-                                          className="flex justify-end"
-                                        >
-                                          <img
-                                            src={DeleteIcon}
-                                            alt="delete button"
-                                          />
-                                        </button>
-                                      </div>
-                                      <div className="flex flex-1 items-end justify-between text-sm">
-                                        <p className="text-xl md:text-2xl font-bold">
-                                          Ksh
-                                          {price}
-                                        </p>
 
-                                        <Counter className="h-8 sm:h-12 w-24 sm:w-32" />
+                                          <Counter className="h-8 sm:h-12 w-24 sm:w-32" />
+                                        </div>
                                       </div>
-                                    </div>
-                                  </li>
-                                )
-                              )}
+                                    </li>
+                                  )
+                                )}
                             </ul>
                           </div>
                         </div>
@@ -281,17 +289,17 @@ export default function Example() {
                           <h2>Sub Total</h2>
                           <h2>Ksh 3600</h2>
                         </div>
-                        <div className="flex flex-col md:flex-row space-y-6 md:space-x-10">
+                        <div className="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-10">
                           <button
                             type="button"
-                            className=" md:w-1/2 w-full h-[62px] bg-[#F5FFFD] text-primary text-sm font-medium rounded-lg outline outline-2 outline-[#009975]"
+                            className="md:w-1/2 w-full h-[62px] bg-[#F5FFFD] text-primary text-sm font-medium rounded-lg outline outline-2 outline-[#009975]"
                             onClick={() => navigate("/shop")}
                           >
                             Continue shopping
                           </button>
                           <button
                             type="button"
-                            className=" md:w-1/2 w-full h-[62px] bg-primary hover:bg-[#00664E] text-[#F7F7F7] text-sm font-medium rounded-lg"
+                            className="md:w-1/2 w-full h-[62px] bg-primary hover:bg-[#00664E] text-[#F7F7F7] text-sm font-medium rounded-lg"
                             onClick={() => navigate("/shop/checkout")}
                           >
                             Checkout

src/APP/pages/shop/sections/Banner.jsx

@@ -1,13 +1,20 @@
+import banner from "../../../../assets/images/shop-page/shop-banner.jpg";
+
 function Banner() {
   return (
-    <section className="relative bg-[url(https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80)] bg-cover bg-center bg-no-repeat h-80">
-      <div className="absolute inset-0 sm:bg-transparent sm:from-white/95 sm:to-white/25 ltr:sm:bg-gradient-to-r rtl:sm:bg-gradient-to-l"></div>
+    <section
+      className={`flex items-center bg-cover bg-fixed bg-center bg-no-repeat h-[485px]`}
+      style={{ backgroundImage: `url(${banner})` }}
+    >
+      <div className="mx-auto text-center p-4">
+        <h1 className=" text-xl sm:text-5xl text-center text-white font-medium">
+          Elevate your style with our exclusive collection of
+          <br className="hidden sm:contents" /> merchandise.
+        </h1>
 
-      <div className="mx-auto max-w-xl absolute top-1/4 sm:left-[30%]">
-        <h1 className="text-2xl text-center text-white font-extrabold">Elevate your style with our exclusive collection of merchandise</h1>
-        <div className="mx-auto w-1/4 my-4">
-        <button className="bg-white w-full rounded p-2">Shop now</button>
-        </div>
+        <button className="text-xl font-semibold bg-white rounded py-3 px-8 w-full sm:w-64 mt-10 hover:bg-transparent hover:border hover:border-white hover:text-white">
+          Shop now
+        </button>
       </div>
     </section>
   );