Merge pull request #92 from calblueprint/Charlotte/newPickUp

Charlotte/new pick up
calblueprint · Apr 22, 2024 · e53f38b · e53f38b
2 parents 5ebb174 + f53a189
commit e53f38b
Show file tree

Hide file tree

Showing 24 changed files with 526 additions and 280 deletions.
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
@@ -339,7 +339,7 @@ export const OrderContainer = styled.div`
 export const RightColumnDiv = styled.div`
   flex: 1;
   margin-top: 30px;
-  padding-left: 20px;
+  margin-bottom: 30px;
 `;
 
 export const Heading = styled.h1`
@@ -379,5 +379,5 @@ export const CategorySpacing = styled.div`
 `;
 
 export const OrderSumSectionSpacing = styled.div`
-  margin-left: 135px;
+  margin-left: 65px;
 `;
diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -9,7 +9,6 @@ import {
 import querystring from 'querystring';
 import {
   createOrder,
-  fetchCurrentOrdersByUser,
   updateOrderStatus,
 } from '@/api/supabase/queries/order_queries';
 import BackButton from '../../components/BackButton/BackButton';

diff --git a/src/app/favorites/individualItem.tsx b/src/app/favorites/individualItem.tsx
@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
 import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
 
-import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries';
 import {
   HeartIcon,
   Hover,
@@ -27,20 +26,6 @@ export default function IndividualItem(props: {
   const router = useRouter();
   const [hovering, setHovering] = useState(false);
 
-  useEffect(() => {
-    async function changeCategory() {
-      try {
-        favorite.category = await convertButtonNumberToCategory(
-          favorite.category,
-        );
-      } catch (error) {
-        // console.error(error);
-      }
-    }
-
-    changeCategory();
-  }, [favorite]);
-
   async function clickFunctions(props2: { fav: Product }) {
     const { fav } = props2;
     addOrRemoveProductFromFavorite(fav, false);

diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { Heading1 } from '@/styles/fonts';
+import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries';
 import BackButton from '../../components/BackButton/BackButton';
 
 import { arrayOfFavorites } from '../../api/supabase/queries/user_queries';
@@ -18,7 +19,16 @@ export default function FavoritesPage() {
 
   async function fetchProducts() {
     const data = (await arrayOfFavorites()) as Product[];
-    setFavorites(data);
+    const mapCategories = await Promise.all(
+      data.map(async product => {
+        const updateCategory = await convertButtonNumberToCategory(
+          product.category,
+        );
+        return { ...product, category: updateCategory };
+      }),
+    );
+
+    setFavorites(mapCategories);
   }
   useEffect(() => {
     fetchProducts();

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -41,13 +41,6 @@ export default function App() {
     }
   };
 
-  async function applyFilter(e: React.KeyboardEvent<HTMLButtonElement>) {
-    const keypressed = e.code;
-    if (keypressed === 'Enter') {
-      handleLogin();
-    }
-  }
-
   return (
     <Fullscreen>
       <Image

diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx
@@ -41,6 +41,7 @@ import {
 
 import { Product, User, Address } from '../../schema/schema';
 import { Body1Bold } from '../orderPage/styles';
+import { BackButtonDiv } from '../orderConfirmationPickUp/styles';
 
 export default function OrderConfirmationDelivery() {
   const [Cart, setCart] = useState<Product[]>([]);

diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -6,40 +6,38 @@ import { fetchUser } from '@/api/supabase/queries/user_queries';
 import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries';
 import { getOrderById } from '@/api/supabase/queries/order_queries';
 import {
+  Heading3Bold,
   Body1,
   Body1Bold,
-  Body2Light,
-  Heading3Bold,
   Heading4Bold,
+  Body2Light,
 } from '@/styles/fonts';
 import { useSearchParams } from 'next/navigation';
-import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries';
 
 import BackButton from '../../components/BackButton/BackButton';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 import {
-  TextDiv,
-  TextDiv1,
-  BackButtonDiv,
   FavoriteDiv,
   OutterFavoriteDiv,
+  TextDiv1,
   LabelBox,
-  LabelBox1,
   ScrollDiv,
   ShippingDetailsDiv,
-  ImageDiv,
   BottomColumnDiv,
-  Wrapper,
   LeftColumnDiv,
   RightColumnDiv,
   DetailsHeader,
+  ImageDiv,
   PageDiv,
   CenterDiv,
+  BackButtonDiv,
+  TextDiv,
 } from './styles';
 
 import { Product, User, Pickup } from '../../schema/schema';
+import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries';
 
 export default function OrderConfirmationPickUp() {
   const [Cart, setCart] = useState<Product[]>([]);
@@ -66,7 +64,7 @@ export default function OrderConfirmationPickUp() {
 
     fetchProducts();
     setUserDetails();
-  }, []);
+  });
 
   function organizePickupTime() {
     const startTime = pickupTime?.start_time.toLocaleString();
@@ -93,7 +91,7 @@ export default function OrderConfirmationPickUp() {
               </TextDiv>
               <OutterFavoriteDiv>
                 <TextDiv1>
-                  <Heading4Bold>Order No. {orderIDFromSearch}</Heading4Bold>
+                  <Heading4Bold>Order No. {user?.cart_id}</Heading4Bold>
                 </TextDiv1>
                 <ScrollDiv>
                   {Cart.map(cartItem => (
@@ -108,13 +106,13 @@ export default function OrderConfirmationPickUp() {
                           }}
                         />
                       </ImageDiv>
-                      <LabelBox1>
+                      <LabelBox>
                         <Body1Bold>{cartItem.name}</Body1Bold>
                         <br />
                         <Body2Light style={{ marginTop: '-10px' }}>
                           Category: {cartItem.category}
                         </Body2Light>
-                      </LabelBox1>
+                      </LabelBox>
                       <LabelBox>
                         <div>
                           <span

diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts
@@ -9,10 +9,11 @@ export const FavoriteDiv = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
+  width: 750px;
   margin-bottom: 50px;
   margin-top: 30px;
   margin-right: 20px;
+  gap: 40px;
 `;
 
 export const OutterFavoriteDiv = styled.div`
@@ -22,19 +23,21 @@ export const OutterFavoriteDiv = styled.div`
   border-radius: 10px;
   background: var(--White, #fff);
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
-  width: 800px;
+  width: 700px;
   max-height: 100%;
+  max-width: 750px;
   margin-top: 20px;
   margin-right: 60px;
   margin-left: 60px;
   padding-right: 20px;
-  padding-left: 10px;
+  padding-left: 40px;
   padding-top: 10px;
 `;
 
 export const ScrollDiv = styled.div`
   overflow: scroll;
-  width: 100%;
+  overflow-x: hidden;
+  max-width: 100%;
 `;
 
 export const ImageDiv = styled.div`
@@ -110,18 +113,9 @@ export const Label = styled.p`
   margin-top: 20px;
 `;
 
-export const LabelBox1 = styled.div`
-  width: 250px;
-  height: 100%;
-  padding: 20px;
-`;
-
 export const LabelBox = styled.div`
   width: 150px;
   height: 100%;
-  padding: 20px;
-  gap: 50px;
-  margin-right: 30px;
 `;
 
 export const HeaderText = styled.h3`
@@ -226,23 +220,33 @@ export const LeftColumnDiv = styled.div`
   flex-flow: column;
   justify-content: space-evenly;
   align-items: space-evenly;
-  width: 100%;
+  width: 800px;
 `;
 export const RightColumnDiv = styled.div`
   display: flex;
   flex-flow: column;
-  align-items: start;
-  margin-left: 10px;
-  width: 100%;
+<<<<<<< HEAD
+
+=======
+>>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5
+  align-items: left;
+  width: 475px;
 `;
 
 export const BackButtonDiv = styled.div`
   display: flex;
   flex-direction: row;
   text-align: left;
   width: 800px;
-  margin-left: 80px;
-  margin-top: 40px;
+<<<<<<< HEAD
+
+  margin-left: 40px;
+
+=======
+  margin-left: 40px;
+>>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5
+  margin-bottom: 40px;
+  margin-top: 20px;
 `;
 
 export const WhiteBackgroundDiv = styled.div`
@@ -254,31 +258,37 @@ export const WhiteBackgroundDiv = styled.div`
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
 `;
 
+export const Wrapper2 = styled.div`
+  display: flex;
+  flex-direction: col;
+  align-items: space-evenly;
+  justify-content: space-around;
+`;
+
 export const BottomColumnDiv = styled.div`
   display: flex;
   flex-direction: row;
   align-items: space-evenly;
   justify-content: space-around;
   width: 100%;
   margin-left: 20px;
+  margin-right: 20px;
   margin-bottom: 30px;
-  gap: 30px;
+  gap: 10px;
 `;
 
 export const TextDiv = styled.div`
   display: flex;
   flex-direction: row;
-  margin-left: 60px;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 `;
 
 export const TextDiv1 = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 10px;
-  margin-left: 20px;
-  margin-top: 15px;
+  margin-top: 20px;
 `;
 
 export const PageDiv = styled.div`
@@ -287,6 +297,10 @@ export const PageDiv = styled.div`
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
+
+  position: relative;
+
+  margin-bottom: 40px;
 `;
 
 export const ShippingDetailsDiv = styled.div`
@@ -296,13 +310,13 @@ export const ShippingDetailsDiv = styled.div`
   border-radius: 10px;
   background: var(--White, #fff);
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
-  width: 467px;
+  width: 475px;
   height: auto;
   max-height: 100%;
   padding: 36px 34px;
   gap: 33px;
   max-height: 100%;
-  margin-top: 205px;
+  margin-top: 75px;
   margin-bottom: 30px;
   margin-right: 40px;
 `;
@@ -320,6 +334,7 @@ export const CenterDiv = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   width: 100%;
   padding: 20px;
 `;
diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { Heading1, Body1 } from '@/styles/fonts';
+import { Heading2, Body1 } from '@/styles/fonts';
 import OrderDetailsWithProducts from '../../components/OrderHistory/OrderHistoryBox';
 import { fetchOrderIdsByUserIdSorted } from '../../api/supabase/queries/order_queries';
 import Footer from '../../components/FooterFolder/Footer';
@@ -10,6 +10,7 @@ import {
   OutterBox,
   NavBarMovedUP,
   Fullscreen,
+  BackButtonDiv,
 } from './styles';
 import BackButton from '../../components/BackButton/BackButton';
 
@@ -29,10 +30,10 @@ function OrderHistory() {
     <Fullscreen>
       <NavBarMovedUP />
       <OutterBox>
-        <BackButton destination="./profileScreen" />
-        <div style={{ marginTop: '40px', marginBottom: '20px' }}>
-          <Heading1>Order History</Heading1>
-        </div>
+        <BackButtonDiv>
+          <BackButton destination="./profileScreen" />
+        </BackButtonDiv>
+        <Heading2>Order History</Heading2>
         <OrderHistoryContainer>
           {orderIds.length > 0 ? (
             orderIds.map((orderId: number) => (