temp

calblueprint · Apr 21, 2024 · b287da7 · b287da7
1 parent 5dc651f
commit b287da7
Show file tree

Hide file tree

Showing 14 changed files with 363 additions and 116 deletions.
diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -4,6 +4,7 @@ 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 {
   fetchCurrentOrdersByUser,
   getOrderById,
@@ -34,13 +35,11 @@ import {
   LabelBox,
   ScrollDiv,
   ShippingDetailsDiv,
-  ImageDiv,
   BottomColumnDiv,
-  LabelBox1,
   LeftColumnDiv,
   RightColumnDiv,
   DetailsHeader,
-  Wrapper2,
+  ImageDiv,
   PageDiv,
   CenterDiv,
   BackButtonDiv,
@@ -57,10 +56,13 @@ export default function OrderConfirmationPickUp() {
   const searchParams = useSearchParams();
   const orderIDFromSearch = searchParams.get('orderID');
 
+
   useEffect(() => {
     async function fetchProducts() {
+
       const cartItems = (await fetchCartItemsWithQuantityByID(
         orderIDFromSearch,
+
       )) as Product[];
       setCart(cartItems);
     }
@@ -117,13 +119,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
@@ -13,6 +13,7 @@ export const FavoriteDiv = styled.div`
   margin-bottom: 50px;
   margin-top: 30px;
   margin-right: 20px;
+  gap: 40px;
 `;
 
 export const OutterFavoriteDiv = styled.div`
@@ -22,13 +23,13 @@ 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%;
   margin-top: 20px;
   margin-right: 60px;
   margin-left: 60px;
   padding-right: 20px;
-  padding-left: 10px;
+  padding-left: 40px;
   padding-top: 10px;
 `;
 
@@ -94,6 +95,16 @@ export const Label = styled.p`
   margin-top: 20px;
 `;
 
+
+export const ImageDiv = styled.p`
+  width: 150px;
+  height: 150px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+
+`;
+
 export const LabelBox = styled.div`
   width: 150px;
   height: 100%;
@@ -235,9 +246,9 @@ export const BottomColumnDiv = styled.div`
   align-items: space-evenly;
   justify-content: space-around;
   width: 100%;
-  margin-left: 20px;
+  margin-left: 10px;
   margin-bottom: 30px;
-  gap: 30px;
+  gap: 10px;
 `;
 
 export const TextDiv = styled.div`
@@ -251,9 +262,7 @@ export const TextDiv = styled.div`
 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`

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,8 +30,10 @@ function OrderHistory() {
     <Fullscreen>
       <NavBarMovedUP />
       <OutterBox>
+        <BackButtonDiv>
         <BackButton destination="./profileScreen" />
-        <Heading1>Order History</Heading1>
+        </BackButtonDiv>
+        <Heading2>Order History</Heading2>
         <OrderHistoryContainer>
           {orderIds.length > 0 ? (
             orderIds.map((orderId: number) => (

diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts
@@ -12,22 +12,36 @@ export const NavBarMovedUP = styled(NavBar)`
   position: relative;
 `;
 
+export const BackButtonDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 200px;
+  margin-bottom: 30px;
+  margin-top: 50px;
+  text-align: left;
+  width: 800px;
+  padding-right: 40px;
+`;
+
 export const OutterBox = styled.div`
   width: 900px;
   margin: 0 auto; // This will center the OutterBox
 `;
 
 export const OrderHistoryContainer = styled.div`
+  
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 10px;
   background: var(--White, #fff);
+  background-color: pink;
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   width: 800px; // Width of the outer box
   height: 700px;
   overflow: scroll;
-  margin-top: 10px;
+  margin-top: 20px;
+  margin-bottom: 50px;
   padding: 0; // Ensure there's no padding pushing the internal boxes inward
 `;
 

diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Body1, Body2 } from '@/styles/fonts';
+import { Check, X, Send } from 'react-feather';
+import { Body1, Body2Light, Heading3Bold, Heading4Bold, Body2, Heading2, Body1Bold } from '@/styles/fonts';
 import { useSearchParams } from 'next/navigation';
 import BackButton from '../../components/BackButton/BackButton';
 
@@ -14,13 +15,23 @@ import NavBar from '../../components/NavBarFolder/NavBar';
 
 import {
   FavoriteDiv,
-  Body1Bold,
   OutterFavoriteDiv,
   BackButtonDiv,
+  DetailsHeader,
+  RightColumnDiv,
+  TextDiv,
+  TextDiv1,
   OutterBox,
   OutterDiv,
-  Heading,
+  ImageDiv,
+  BottomColumnDiv,
+  ShippingDetailsDiv,
+  LabelBox,
+  LeftColumnDiv,
+  ScrollDiv,
   ProductNameDiv,
+  PageDiv,
+  CenterDiv,
   StatusButton,
 } from './styles';
 
@@ -76,40 +87,87 @@ export default function OrderPage() {
     }
     fetchProducts();
   }, []);
+
+  const status = order?.order_status?.toLowerCase() || 'default';
 
   return (
     <div>
       <NavBar />
+      <CenterDiv>
+        <PageDiv>
+          <BackButtonDiv>
+            <BackButton destination="./storefront" />
+          </BackButtonDiv>
+          <BottomColumnDiv>
+            <LeftColumnDiv>
+              <TextDiv>
+              <Heading2>{formatDate(order?.created_at)}</Heading2>
+              </TextDiv>
+              <OutterFavoriteDiv>
+                <TextDiv1>
+                  <Heading4Bold>Order No. {order?.cart_id}</Heading4Bold>
+                </TextDiv1>
+                <ScrollDiv>
+                {orders.map(product => (
+                  <FavoriteDiv key={product.id}>
+                    <ImageDiv>
+                    <img
+                      src={product.photo}
+                      alt={product.name}
+                      width={150}
+                      height={150}
+                      style={{ marginTop: '0' }}
+                    />
+                    </ImageDiv>
 
-      <OutterBox>
-        <BackButtonDiv>
-          <BackButton destination="./orderHistory" />
-        </BackButtonDiv>
-        <OutterDiv>
-          <Heading>{formatDate(order?.created_at)}</Heading>
-          <StatusButton>
-            {' '}
-            <Body1Bold>{order?.order_status}</Body1Bold>{' '}
-          </StatusButton>
-        </OutterDiv>
-        <OutterFavoriteDiv>
-          {orders.map(product => (
-            <FavoriteDiv key={product.id}>
-              <img
-                src={product.photo}
-                alt={product.name}
-                width={150}
-                height={150}
-                style={{ marginTop: '0' }}
-              />
-              <ProductNameDiv>
-                <Body1>{product.name}</Body1>
-                <Body2>Category: {product.category}</Body2>
-              </ProductNameDiv>
-            </FavoriteDiv>
-          ))}
-        </OutterFavoriteDiv>
-      </OutterBox>
+                      <LabelBox>
+                        <Body1Bold>{product.name}</Body1Bold>
+                        <br />
+                        <Body2Light style={{ marginTop: '-10px' }}>
+                          Category: {product.category}
+                        </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>
+                      </LabelBox>
+                    </FavoriteDiv>
+                  ))}
+                </ScrollDiv>
+              </OutterFavoriteDiv>
+            </LeftColumnDiv>
+            <RightColumnDiv>
+              <ShippingDetailsDiv>
+                <Heading3Bold>Pickup Information</Heading3Bold>
+                <DetailsHeader>Time Slot</DetailsHeader>
+                <DetailsHeader>Location</DetailsHeader>
+                <Body1>3170 23rd Street, San Francisco, CA 94110</Body1>
+              </ShippingDetailsDiv>
+            </RightColumnDiv>
+          </BottomColumnDiv>
+
+        </PageDiv>
+      </CenterDiv>
     </div>
   );
 }
+
+
+