Merge pull request #38 from calblueprint/buyankhuu/OrderConfirmationP…

…ages

Buyankhuu/order confirmation pages

src/app/cart/page.tsx

@@ -64,7 +64,7 @@ export default function OrderPage() {
           <OrderSummary cart={cart} numberOfItems={numberOfItems} />
           <CheckoutButton
             // change this function so that the flow makes sense and that there is items within the cart
-            onClick={() => router.push('/orderConfirmationPickUp')}
+            onClick={() => router.push('/delivery')}
           >
             Check Out
           </CheckoutButton>

src/app/delivery/page.tsx

@@ -31,7 +31,6 @@ export default function App() {
   return (
     <main>
       <GlobalStyle />
-
       <NavBarMovedUP />
       <BackButton destination="/storefront" />
       <DeliveryContainer>

src/app/storefront/StoreFrontNavBar.tsx

@@ -0,0 +1,92 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useEffect, useState } from 'react';
+
+import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries';
+
+import {
+  NavBarComp,
+  ButtonsDiv,
+  CartTotalCircle,
+  UserProfileIcon,
+  ShoppingCartIcon,
+} from '../../components/NavBarFolder/styles';
+
+import { Product } from '../../schema/schema';
+
+import { ButtonsContainer } from './styles';
+
+import { buttons } from './buttonValues';
+
+import ProductButtons from './productButtons';
+
+export default function StoreFrontNavBar(props: {
+  setFilteredProducts: (category: Product[]) => void;
+  setIsClickedButton: (clicked: boolean[]) => void;
+  IsClickedButton: boolean[];
+  setCategoryWord: (word: string) => void;
+}) {
+  const [data, setData] = useState(0);
+  const [isZero, setIsZero] = useState(true);
+  const {
+    setFilteredProducts,
+    setIsClickedButton,
+    IsClickedButton,
+    setCategoryWord,
+  } = props;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setData(await totalNumberOfItemsInCart());
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    const changeData = async () => {
+      if (data > 0) {
+        setIsZero(false);
+      }
+    };
+    changeData();
+  }, [data]);
+
+  return (
+    <NavBarComp>
+      <Link href="../storefront">
+        <Image
+          src="/images/ShantiLogo.png"
+          alt="Shanti Logo"
+          width={125}
+          height={70}
+        />
+      </Link>
+      <ButtonsContainer>
+        {buttons.map((type, index) => (
+          <ProductButtons
+            key={type.count}
+            value={type.value}
+            setFiltredProducts={setFilteredProducts}
+            content={type.name}
+            setIsClickedButton={setIsClickedButton}
+            IsClickedButton={IsClickedButton}
+            setCategoryWord={setCategoryWord}
+            index={index}
+          />
+        ))}
+      </ButtonsContainer>
+
+      <ButtonsDiv>
+        <Link href="../profileScreen">
+          <UserProfileIcon />
+          <p>User</p>
+        </Link>
+        <Link href="../cart">
+          <ShoppingCartIcon />
+          <p>Cart</p>
+          <CartTotalCircle $isZero={isZero}>{data}</CartTotalCircle>
+        </Link>
+      </ButtonsDiv>
+    </NavBarComp>
+  );
+}

src/app/storefront/page.tsx

@@ -2,19 +2,13 @@
 
 import React, { useEffect, useState } from 'react';
 import Storefront from './storefrontItems';
-import ProductButtons from './productButtons';
 
 import Footer from '../../components/FooterFolder/Footer';
-import {
-  GlobalStyle,
-  ButtonsContainer,
-  NavBarZeroIndex,
-  ShopAllText,
-} from './styles';
+import { GlobalStyle, ShopAllText } from './styles';
 import { fetchProducts } from '../../api/supabase/queries/product_queries';
 import { Product } from '../../schema/schema';
 
-import { buttons } from './buttonValues';
+import StoreFrontNavBar from './StoreFrontNavBar';
 
 export default function App() {
   const [FilteredProducts, setFilteredProducts] = useState<Product[]>([]);
@@ -44,21 +38,12 @@ export default function App() {
   return (
     <main>
       <GlobalStyle />
-      <NavBarZeroIndex />
-      <ButtonsContainer>
-        {buttons.map((type, index) => (
-          <ProductButtons
-            key={type.count}
-            value={type.value}
-            setFiltredProducts={setFilteredProducts}
-            content={type.name}
-            setIsClickedButton={setIsClickedButton}
-            IsClickedButton={IsClickedButton}
-            setCategoryWord={setCategoryWord}
-            index={index}
-          />
-        ))}
-      </ButtonsContainer>
+      <StoreFrontNavBar
+        setFilteredProducts={setFilteredProducts}
+        setIsClickedButton={setIsClickedButton}
+        IsClickedButton={IsClickedButton}
+        setCategoryWord={setCategoryWord}
+      />
       <ShopAllText>Shop {CategoryWord}</ShopAllText>
       <Storefront products={FilteredProducts} />
       <Footer />

src/app/storefront/styles.ts

@@ -58,17 +58,13 @@ export const ItemContainer = styled.div`
 `;
 
 export const ButtonsContainer = styled.div`
-  margin-left: 400px;
-  margin-right: 400px;
-  width: 600px;
-  height: 200px;
+  margin-left: 100px;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  position: fixed;
+  position: flex;
   align-items: center;
   z-index: 1100;
-  transform: translate(180px, -30px);
 `;
 
 export const NavButton = styled.button`
@@ -109,8 +105,8 @@ export const StorefrontItem = styled.div`
 `;
 
 export const ShopAllText = styled.h1`
-  padding-top: 230px;
-  padding-left: 50px;
+  margin-top: 50px;
+  margin-left: 60px;
   font-family: 'Public Sans', sans-serif;
   color: black;
 `;