Week 7 and 8 Sprint

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';

src/app/orderConfirmationDelivery/page.tsx

@@ -6,7 +6,7 @@ import {
   fetchCurrentUserAddress,
 } from '@/api/supabase/queries/user_queries';
 
-import { Body1, Body2Light, Heading3Bold, Heading4Bold } from '@/styles/fonts';
+import { Body1, Heading3Bold, Heading4Bold } from '@/styles/fonts';
 import { useSearchParams } from 'next/navigation';
 import BackButton from '../../components/BackButton/BackButton';
 
@@ -29,7 +29,6 @@ import {
 } from './styles';
 
 import { Product, User, Address } from '../../schema/schema';
-import { Body1Bold } from '../orderPage/styles';
 import { BackButtonDiv } from '../orderConfirmationPickUp/styles';
 
 export default function OrderConfirmationDelivery() {
@@ -43,7 +42,6 @@ export default function OrderConfirmationDelivery() {
       const cartItems = (await fetchCartItemsWithQuantityByID(
         orderIDFromSearch,
       )) as Product[];
-      console.log(cartItems);
       setCart(cartItems);
     }
 
@@ -56,7 +54,7 @@ export default function OrderConfirmationDelivery() {
 
     fetchProducts();
     setUserDetails();
-  }, []);
+  }, );
 
   return (
     <main>

src/app/orderConfirmationPickUp/page.tsx

@@ -4,14 +4,8 @@ import { useState, useEffect } from 'react';
 
 import { fetchUser } from '@/api/supabase/queries/user_queries';
 import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries';
-import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries';
+import { getOrderById } from '@/api/supabase/queries/order_queries';
 import {
-  fetchCurrentOrdersByUser,
-  getOrderById,
-} from '@/api/supabase/queries/order_queries';
-import {
-  Body2Bold,
-  Body2,
   Heading3Bold,
   Body1,
   Body1Bold,
@@ -26,11 +20,8 @@ import NavBar from '../../components/NavBarFolder/NavBar';
 
 import {
   FavoriteDiv,
-  ColDiv,
   OutterFavoriteDiv,
   TextDiv1,
-  OutterBox,
-  Label,
   LabelBox,
   ScrollDiv,
   ShippingDetailsDiv,
@@ -73,7 +64,7 @@ export default function OrderConfirmationPickUp() {
 
     fetchProducts();
     setUserDetails();
-  }, []);
+  });
 
   function organizePickupTime() {
     const startTime = pickupTime?.start_time.toLocaleString();

src/app/orderConfirmationPickUp/styles.ts

@@ -23,10 +23,7 @@ export const OutterFavoriteDiv = styled.div`
   border-radius: 10px;
   background: var(--White, #fff);
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
-<<<<<<< HEAD
-=======
   width: 700px;
->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605
   max-height: 100%;
   max-width: 750px;
   margin-top: 20px;
@@ -99,7 +96,7 @@ export const Label = styled.p`
   margin-top: 20px;
 `;
 
-export const ImageDiv = styled.p`
+export const ImageDiv = styled.div`
   width: 150px;
   height: 150px;
   align-items: center;
@@ -255,12 +252,8 @@ export const BottomColumnDiv = styled.div`
   align-items: space-evenly;
   justify-content: space-around;
   width: 100%;
-<<<<<<< HEAD
   margin-left: 20px;
   margin-right: 20px;
-=======
-  margin-left: 10px;
->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605
   margin-bottom: 30px;
   gap: 10px;
 `;
@@ -290,7 +283,6 @@ export const PageDiv = styled.div`
 `;
 
 export const ShippingDetailsDiv = styled.div`
-  
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -303,11 +295,7 @@ export const ShippingDetailsDiv = styled.div`
   padding: 36px 34px;
   gap: 33px;
   max-height: 100%;
-<<<<<<< HEAD
   margin-top: 75px;
-=======
-  margin-top: 93px;
->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605
   margin-bottom: 30px;
   margin-right: 40px;
 `;

src/app/orderHistory/styles.ts

@@ -28,10 +28,10 @@ export const OutterBox = styled.div`
   width: 800px;
   margin-top: 40px;
   margin-bottom: 70px;
+  min-height: 50px;
 `;
 
 export const OrderHistoryContainer = styled.div`
-  
   display: flex;
   flex-direction: column;
   align-items: center;

src/app/orderPage/page.tsx

@@ -1,18 +1,16 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Check, X, Send } from 'react-feather';
 import {
   Body1,
   Body2Light,
   Heading3Bold,
-  Heading4Bold,
-  Body3,
-  Body2,
   Heading2,
   Body1Bold,
 } from '@/styles/fonts';
+import { fetchUser } from '@/api/supabase/queries/user_queries';
 import { useSearchParams } from 'next/navigation';
+import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries';
 import BackButton from '../../components/BackButton/BackButton';
 
 import {
@@ -29,22 +27,19 @@ import {
   DetailsHeader,
   RightColumnDiv,
   TextDiv,
-  TextDiv1,
-  OutterBox,
-  OutterDiv,
   ImageDiv,
   BottomColumnDiv,
   ShippingDetailsDiv,
   LabelBox,
+  TextDiv2,
   LeftColumnDiv,
   ScrollDiv,
-  ProductNameDiv,
   PageDiv,
   CenterDiv,
-  StatusButton,
+  TextDiv1,
 } from './styles';
 
-import { ProductWithQuantity, Order } from '../../schema/schema';
+import { ProductWithQuantity, Order, Pickup, User } from '../../schema/schema';
 
 function formatDate(date: string | undefined): string {
   if (!date) return '';
@@ -72,8 +67,18 @@ function formatDate(date: string | undefined): string {
   return `${month} ${day}, ${year}`;
 }
 
+function formatTime(date: string | undefined): string {
+  if (!date) return '';
+
+  const hour = date.substring(11, 13);
+  const minute = date.substring(14, 16);
+
+  return `${hour}:${minute}`;
+}
+
 export default function OrderPage() {
   const [orders, setOrders] = useState<ProductWithQuantity[]>([]);
+  const [pickupTime, setPickupTime] = useState<Pickup>();
   const searchParams = useSearchParams();
   const orderIDFromSearch = searchParams.get('orderID');
   let currOrderId = 0;
@@ -83,6 +88,13 @@ export default function OrderPage() {
     currOrderId = 32;
   }
 
+  async function setUserDetails() {
+    const fetchedUser = await fetchUser();
+    const currOrder = await getOrderById(Number(orderIDFromSearch));
+    const pickup = await fetchPickupTimesByID(currOrder.pickup_time_id);
+    setPickupTime(pickup);
+  }
+
   const [order, setOrder] = useState<Order>();
 
   useEffect(() => {
@@ -95,9 +107,19 @@ export default function OrderPage() {
       setOrder(currOrder);
     }
     fetchProducts();
-  }, []);
+    setUserDetails();
+  });
 
-  const status = order?.order_status?.toLowerCase() || 'default';
+  function organizePickupTime() {
+    const startTime = pickupTime?.start_time.toLocaleString();
+
+    const date =
+      startTime == null
+        ? ['0', '0', '0']
+        : startTime?.substring(0, 10).split('-');
+    const dateStr = `${date[1]}/${date[2]}/${date[0]}`;
+    return `${dateStr}`;
+  }
 
   return (
     <div>
@@ -113,9 +135,12 @@ export default function OrderPage() {
                 <Heading2>Order No. {order?.id}</Heading2>
               </TextDiv>
               <OutterFavoriteDiv>
-                <TextDiv>
-                  <Body1>Order Date: {order?.id}</Body1>
-                </TextDiv>
+                <TextDiv1>
+                  <Body1>Order Date: {formatDate(order?.created_at)}</Body1>
+                </TextDiv1>
+                <TextDiv2>
+                  <Body1>Order Time: {formatTime(order?.created_at)}</Body1>
+                </TextDiv2>
                 <ScrollDiv>
                   {orders.map(product => (
                     <FavoriteDiv key={product.id}>
@@ -137,25 +162,7 @@ export default function OrderPage() {
                         </Body2Light>
                       </LabelBox>
                       <LabelBox>
-                        <div>
-                          <span
-                            style={{
-                              display: 'inline-block',
-                              fontWeight: 'bold',
-                              marginRight: '4px',
-                            }}
-                          >
-                            Quantity:
-                          </span>
-                          <span
-                            style={{
-                              display: 'inline-block',
-                              fontSize: '16px',
-                            }}
-                          >
-                            {product.quantity}
-                          </span>
-                        </div>
+                        <Body1Bold>Quantity: {product.quantity}</Body1Bold>
                       </LabelBox>
                     </FavoriteDiv>
                   ))}
@@ -166,6 +173,7 @@ export default function OrderPage() {
               <ShippingDetailsDiv>
                 <Heading3Bold>Pickup Information</Heading3Bold>
                 <DetailsHeader>Time Slot</DetailsHeader>
+                <Body1>{organizePickupTime()} (10:00 am - 12:30 pm)</Body1>
                 <DetailsHeader>Location</DetailsHeader>
                 <Body1>3170 23rd Street, San Francisco, CA 94110</Body1>
               </ShippingDetailsDiv>

src/app/orderPage/styles.ts

@@ -104,6 +104,7 @@ export const BackButtonDiv = styled.div`
   gap: 200px;
   margin-bottom: 50px;
   margin-top: 50px;
+  margin-left: 60px;
   text-align: left;
   width: 800px;
 `;
@@ -231,7 +232,7 @@ export const ShippingDetailsDiv = styled.div`
   padding: 36px 34px;
   gap: 33px;
   max-height: 100%;
-  margin-top: 93px;
+  margin-top: 52px;
   margin-bottom: 30px;
   margin-right: 40px;
 `;
@@ -248,15 +249,21 @@ export const RightColumnDiv = styled.div`
 export const TextDiv1 = styled.div`
   display: flex;
   flex-direction: row;
+  margin-left: 40px;
   margin-top: 20px;
-  background-color: pink;
 `;
 
 export const TextDiv = styled.div`
   display: flex;
   flex-direction: row;
   margin-left: 60px;
-  margin-top: 20px;
+`;
+
+export const TextDiv2 = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: 40px;
+  margin-top: 5px;
   margin-bottom: 20px;
 `;
 

src/app/pickup/page.tsx

@@ -10,7 +10,7 @@ import {
   totalNumberOfItemsInCart,
 } from '@/api/supabase/queries/cart_queries';
 import { useState, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { Heading4Bold } from '@/styles/fonts';
 import { fetchNRecentPickupTimes } from '@/api/supabase/queries/pickup_queries';
 import {
@@ -157,7 +157,6 @@ export default function PickUp() {
                 await updateOrderStatus(orderID, OrderStatus.Submitted);
                 await createOrder();
                 const newestOrder = await fetchCartIdFromUser();
-                console.log(newestOrder);
                 await updateOrderStatus(newestOrder, OrderStatus.inProgress);
                 const queryString = querystring.stringify({ orderID });
                 router.push(`/orderConfirmationPickUp?${queryString}`);

src/app/profileScreen/page.tsx

@@ -5,7 +5,6 @@ import { toast, ToastContainer } from 'react-toastify';
 import { useEffect, useState } from 'react';
 import {
   Heading2,
-  Body3,
   Heading3,
   Heading1,
   Body1Bold,
@@ -32,7 +31,7 @@ import {
   fetchOrderProductById,
   fetchProductWithQuantityById,
 } from '@/api/supabase/queries/order_queries';
-import { Check, CheckCircle, X, Send } from 'react-feather';
+import { Check, X, Send } from 'react-feather';
 import BackButton from '../../components/BackButton/BackButton';
 import {
   LogOutButton,

src/app/profileScreen/styles.ts

@@ -130,16 +130,8 @@ export const HeartIcon = styled(Heart)`
 `;
 
 export const BackButtonDiv = styled.div`
-<<<<<<< HEAD
-<<<<<<< HEAD
-  margin-bottom: 30px;
   margin-top: 50px;
-=======
-=======
->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605
-  margin-top: 50px;  
   margin-bottom: 40px;
->>>>>>> b287da7 (temp)
 `;
 
 export const HeaderDiv = styled.div`

src/app/storefront/productButtons.tsx

@@ -68,7 +68,6 @@ export default function ProductButtons(props: {
     // Applying the filter to the categories of the product
 
     if (category !== 'All') {
-      console.log(category);
       const products = await filterUserProducts(category);
       if (products !== null) {
         setFiltredProducts(products);