calblueprint · BuyankhuuTsCAl · Apr 15, 2024 · Apr 10, 2024 · Apr 10, 2024 · Apr 10, 2024
diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts
@@ -88,6 +88,7 @@ export async function filterProduct(productType: string): Promise<Product[]> {
 export async function convertCategoryToNumber(
   productType: string,
 ): Promise<StorefrontButtons> {
+  console.log(productType);
   const { data: buttonVal, error } = await supabase
     .from('storefront_buttons')
     .select('*')
@@ -103,6 +104,7 @@ export async function convertCategoryToNumber(
 export async function fetchUnprescribedCategory(
   productType: string,
 ): Promise<Product[]> {
+  console.log(productType);
   const productTypeConverted = await convertCategoryToNumber(productType);
 
   const { data: products, error } = await supabase

diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts
@@ -1,6 +1,8 @@
+import { Lekton } from 'next/font/google';
 import supabase from '../createClient';
 import { User, Product } from '../../../schema/schema';
 import { fetchProductByID } from './product_queries';
+import { convertButtonNumberToCategory } from './button_queries';
 
 /**
  * fetchUser is a function that fetches the user data from the database and returns the user object.

diff --git a/src/app/cart/Buttons.tsx b/src/app/cart/Buttons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ButtonsWrapper, QuantityButton, PlusMinusButton } from './styles';
+import { QuantityButton, PlusMinusButton } from './styles';
 
 import {
   decreaseFromCart,
@@ -53,24 +53,22 @@ export default function Buttons(props: {
   // used hyphen instead of dash for display
 
   return (
-    <ButtonsWrapper>
-      <QuantityButton>
-        <PlusMinusButton
-          type="button"
-          style={{ cursor: 'pointer' }}
-          onClick={decreaseQuantity}
-        >
-          –
-        </PlusMinusButton>
-        <span>{count}</span>
-        <PlusMinusButton
-          type="button"
-          style={{ cursor: 'pointer' }}
-          onClick={increaseQuantity}
-        >
-          +
-        </PlusMinusButton>
-      </QuantityButton>
-    </ButtonsWrapper>
+    <QuantityButton>
+      <PlusMinusButton
+        type="button"
+        style={{ cursor: 'pointer' }}
+        onClick={decreaseQuantity}
+      >
+        –
+      </PlusMinusButton>
+      <span>{count}</span>
+      <PlusMinusButton
+        type="button"
+        style={{ cursor: 'pointer' }}
+        onClick={increaseQuantity}
+      >
+        +
+      </PlusMinusButton>
+    </QuantityButton>
   );
 }
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
@@ -1,15 +1,14 @@
 'use client';
 
 import { useState } from 'react';
+import { Body2, Heading4Bold } from '@/styles/fonts';
 import { removeCartItem } from '../../api/supabase/queries/cart_queries';
-
 import {
   FavoriteDiv,
   TrashIcon,
   TransparentButton,
-  Label,
   LabelBox,
-  ImageDiv,
+  ImageBackground,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -37,33 +36,31 @@ export default function CartItem(props: {
   }
 
   return (
-    <div>
-      <FavoriteDiv key={cartItemProduct.id}>
-        <ImageDiv>
-          <img
-            src={cartItemProduct.photo}
-            alt={cartItemProduct.name}
-            style={{ width: '130px', height: '130px', padding: '20px' }}
-          />
-        </ImageDiv>
-        <LabelBox>
-          <Label>{cartItemProduct.name}</Label>
-          <p>Category: {cartItemProduct.category}</p>
-        </LabelBox>
-        <Buttons
-          productNumber={cartItemProduct.id}
-          quantity={cartItemProduct.quantity}
-          setNumberOfItems={setNumberOfItems}
-          numberOfItems={numberOfItems}
-          count={count}
-          setCount={setCount}
-          setCart={setCart}
-          cart={cart}
+    <FavoriteDiv key={cartItemProduct.id}>
+      <ImageBackground>
+        <img
+          src={cartItemProduct.photo}
+          alt={cartItemProduct.name}
+          style={{ width: '150px', height: '150px', objectFit: 'cover' }}
         />
-        <TransparentButton onClick={() => removeProduct()}>
-          <TrashIcon style={{ cursor: 'pointer' }} />
-        </TransparentButton>
-      </FavoriteDiv>
-    </div>
+      </ImageBackground>
+      <LabelBox>
+        <Heading4Bold>{cartItemProduct.name}</Heading4Bold>
+        <Body2>Category: {cartItemProduct.category}</Body2>
+      </LabelBox>
+      <Buttons
+        productNumber={cartItemProduct.id}
+        quantity={cartItemProduct.quantity}
+        setNumberOfItems={setNumberOfItems}
+        numberOfItems={numberOfItems}
+        count={count}
+        setCount={setCount}
+        setCart={setCart}
+        cart={cart}
+      />
+      <TransparentButton onClick={() => removeProduct()}>
+        <TrashIcon style={{ cursor: 'pointer' }} />
+      </TransparentButton>
+    </FavoriteDiv>
   );
 }
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
@@ -3,8 +3,8 @@
 import { useRouter } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
+import { Heading1 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
-import { Heading1 } from '../../styles/fonts';
 
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 
@@ -15,12 +15,12 @@ import {
 import CartItem from './cartItem';
 import NavBar from '../../components/NavBarFolder/NavBar';
 import {
-  OrderButton,
-  DeliveryContainer,
-  OrderContainer,
-  BackButtonDiv,
-  InformationContainer,
-  OutterDiv,
+  CartItemsDiv,
+  PageDiv,
+  CheckoutButton,
+  LeftColumnDiv,
+  RightColumnDiv,
+  ContentDiv,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -52,30 +52,37 @@ export default function OrderPage() {
   return (
     <div>
       <NavBar />
-      <OutterDiv>
-        <BackButtonDiv>
-          <BackButton destination="/storefront" />
-        </BackButtonDiv>
-        <DeliveryContainer>
-          <InformationContainer>
-            <Heading1 style={{ marginBottom: '38px' }}>Cart</Heading1>
-            {cart.map(cartItem => (
-              <CartItem
-                key={cartItem.id}
-                cartItemProduct={cartItem}
-                setCart={setCart}
-                cart={cart}
-                setNumberOfItems={setNumberOfItems}
-                numberOfItems={numberOfItems}
-              />
-            ))}
-          </InformationContainer>
-          <OrderContainer>
+
+      <PageDiv>
+        <BackButton destination="./storefront" />
+        <ContentDiv>
+          <LeftColumnDiv>
+            <Heading1>Cart</Heading1>
+            <CartItemsDiv>
+              {cart.map(cartItem => (
+                <CartItem
+                  key={cartItem.id}
+                  cartItemProduct={cartItem}
+                  setCart={setCart}
+                  cart={cart}
+                  setNumberOfItems={setNumberOfItems}
+                  numberOfItems={numberOfItems}
+                />
+              ))}
+            </CartItemsDiv>
+          </LeftColumnDiv>
+          <RightColumnDiv>
             <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-            <OrderButton onClick={() => checkDelivery()}>Check Out</OrderButton>
-          </OrderContainer>
-        </DeliveryContainer>
-      </OutterDiv>
+            <CheckoutButton
+              // change this function so that the flow makes sense and that there is items within the cart
+              onClick={() => checkDelivery()}
+              disabled={numberOfItems === 0}
+            >
+              Check Out
+            </CheckoutButton>
+          </RightColumnDiv>
+        </ContentDiv>
+      </PageDiv>
     </div>
   );
 }
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
@@ -10,15 +10,35 @@ import Footer from '../../components/FooterFolder/Footer';
 export const FavoriteDiv = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: start;
-  justify-content: space-around;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 750px;
   width: 100%;
-  margin-bottom: 50px;
-  margin-top: 30px;
+`;
+
+export const ImageBackground = styled.div`
+  width: 200px;
+  height: 200px;
+  background-color: ${COLORS.lightGrey};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const CartItemsDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  width: 750px;
+  overflow: auto;
+  gap: 32px;
 `;
 
 export const ImageDiv = styled.div`
-  width: 130px;
+  width: 30px;
+  height: 30px;
+  color: ${COLORS.black};
 `;
 
 export const BackDiv = styled.button`
@@ -49,12 +69,6 @@ export const TrashIcon = styled(Trash2)`
   margin-top: 28px;
 `;
 
-export const NavBarZeroIndex = styled(NavBar)`
-  z-index: 0;
-  position: fixed;
-  margin-bottom: 100px;
-`;
-
 export const FooterMoved = styled(Footer)`
   transform: translateY(300px);
 `;
@@ -63,6 +77,7 @@ export const TransparentButton = styled.button`
   background-color: transparent;
   border: transparent;
   padding-left: 40px;
+  margin-bottom: 25px;
 `;
 
 export const NavBarMovedUP = styled(NavBar)`
@@ -89,6 +104,7 @@ export const QuantityButton = styled.div`
   background-color: ${COLORS.white};
   border: 2px solid ${COLORS.navy};
   color: ${COLORS.navy};
+  cursor: pointer;
 `;
 
 export const PlusMinusButton = styled.button`
@@ -108,17 +124,13 @@ export const Label = styled.p`
 
 export const LabelBox = styled.div`
   width: 150px;
-  height: 100%;
-  padding-left: 40px;
-  padding-right: 40px;
 `;
 
-export const PageDiv1 = styled.div`
+export const ContentDiv = styled.div`
   display: flex;
   flex-direction: row;
-  min-height: 100%; /*or 100vh */
-  flex-wrap: wrap;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  gap: 32px;
 `;
 
 export const BackButtonDiv1 = styled.div`
@@ -145,7 +157,7 @@ export const Wrapper = styled.div`
 `;
 
 export const OrderSummaryDiv = styled.div`
-  overflow: scroll;
+  overflow: auto;
   width: 350px;
   height: 300px;
   padding: 20px;
@@ -172,7 +184,7 @@ export const OrderTotalDiv = styled.div`
 export const LeftColumnDiv1 = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 50px;
+  gap: 16px;
 `;
 
 export const CheckoutButton1 = styled.button`
@@ -201,8 +213,6 @@ export const Qty = styled.p`
 export const RightColumnDiv1 = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 200px;
-  margin-top: 100px;
 `;
 
 export const WhiteBackgroundDiv = styled.div`
@@ -232,11 +242,12 @@ export const PShiftLeft = styled.p`
 `;
 
 export const PageDiv = styled.div`
+  height: 100%;
   display: flex;
-  flex-direction: col;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  padding: 20px;
+  flex-direction: column;
+  padding: 32px;
+  gap: 32px;
+  background-color: ${COLORS.offWhite};
 `;
 
 export const LeftColumnDiv = styled.div`
@@ -343,6 +354,7 @@ export const BackButtonDiv = styled.div`
 `;
 
 export const CheckoutButton = styled.button`
+  width: 350px;
   background: #1b3679;
   color: white;
   border: none;