huh

calblueprint · Apr 15, 2024 · 60d4c50 · 60d4c50
2 parents 486b284 + 7561742
commit 60d4c50
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 76 deletions.
diff --git a/src/api/supabase/queries/cart_queries.ts b/src/api/supabase/queries/cart_queries.ts
@@ -3,7 +3,7 @@ import supabase from '../createClient';
 import { fetchUser } from './user_queries';
 import { Product, ProductWithQuantity } from '../../../schema/schema';
 import { fetchProductByID } from './product_queries';
-
+import {convertButtonNumbertoCategory} from "./button_queries";
 // define cart item type
 export type CartItem = {
   id: number;
@@ -200,11 +200,13 @@ export async function fetchCartItemsWithQuantity(): Promise<
       quantity: item.quantity,
       photo: product.photo,
       id: product.id,
-      category: product.category,
+      category: await convertButtonNumbertoCategory(product.category),
     };
   });
+
 
   const fetchedProducts = await Promise.all(productPromises);
+  console.log(fetchedProducts);
 
   return fetchedProducts;
 }
diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -5,13 +5,7 @@ import { useState, useEffect } from 'react';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
 import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries';
 import { fetchCurrentOrdersByUser } from '@/api/supabase/queries/order_queries';
-import {
-  Body1,
-  Body1Bold,
-  Body2Light,
-  Heading3Bold,
-  Heading4Bold,
-} from '@/styles/fonts';
+import { Body2Bold, Body2, Heading3Bold } from '@/styles/fonts';
 import { fetchCartItemsWithQuantity } from '../../api/supabase/queries/cart_queries';
 
 import BackButton from '../../components/BackButton/BackButton';
@@ -25,14 +19,11 @@ import {
   FavoriteDiv,
   OutterFavoriteDiv,
   LabelBox,
+  LabelBox1,
   ScrollDiv,
-  ShippingDetailsDiv,
-  BottomColumnDiv,
-  LeftColumnDiv,
-  RightColumnDiv,
-  DetailsHeader,
-  PageDiv,
-  CenterDiv,
+  DateText,
+  CenterBox,
+  AddressDiv,
 } from './styles';
 
 import { Product, User, Pickup } from '../../schema/schema';
@@ -67,64 +58,56 @@ export default function OrderConfirmationPickUp() {
       startTime == null
         ? ['0', '0', '0']
         : startTime?.substring(0, 10).split('-');
-    const dateStr = `${date[2]}/${date[1]}/${date[0]}`;
-    const start = startTime?.substring(11, 16);
-    const end = endTime?.substring(11, 16);
-    return `${dateStr} (${start} - ${end})`;
+    const dateStr = `${date[1]}/${date[2]}/${date[0]}`;
+    return `${dateStr}`;
   }
 
   return (
     <div>
       <NavBar />
-      <CenterDiv>
-        <PageDiv>
-          <BackButtonDiv>
-            <BackButton destination="./storefront" />
-          </BackButtonDiv>
-          <BottomColumnDiv>
-            <LeftColumnDiv>
-              <TextDiv>
-                <Heading3Bold>Your order has been submitted</Heading3Bold>
-              </TextDiv>
-              <OutterFavoriteDiv>
-                <TextDiv1>
-                  <Heading4Bold>Order No. {user?.cart_id}</Heading4Bold>
-                </TextDiv1>
-                <ScrollDiv>
-                  {Cart.map(cartItem => (
-                    <FavoriteDiv key={cartItem.id}>
-                      <img
-                        src={cartItem.photo}
-                        alt={cartItem.name}
-                        style={{
-                          width: '150px',
-                          height: '150px',
-                          marginLeft: '30px',
-                        }}
-                      />
-                      <LabelBox>
-                        <Body1Bold>{cartItem.name}</Body1Bold>
-                        <Body2Light>Category: {cartItem.category}</Body2Light>
-                      </LabelBox>
-                    </FavoriteDiv>
-                  ))}
-                </ScrollDiv>
-              </OutterFavoriteDiv>
-            </LeftColumnDiv>
-            <RightColumnDiv>
-              <ShippingDetailsDiv>
-                <Heading3Bold>Delivery Information</Heading3Bold>
-                <DetailsHeader>Pick Up Date</DetailsHeader>
-                <Body1>{organizePickupTime()}</Body1>
-                <DetailsHeader>Location</DetailsHeader>
-                <Body1>
-                  Location: 3170 23rd Street, San Francisco, CA 94110
-                </Body1>
-              </ShippingDetailsDiv>
-            </RightColumnDiv>
-          </BottomColumnDiv>
-        </PageDiv>
-      </CenterDiv>
+      <BackButton destination="./storefront" />
+      <CenterBox>
+        <OutterBox>
+          <Heading3Bold>
+            Thank you, {user?.first_name}. Your order has been submitted.
+          </Heading3Bold>
+
+          <OutterFavoriteDiv>
+            <ColDiv>
+              {/** change this to order number! */}
+              <DateText>Order No. {user?.cart_id}</DateText>
+              {/** got the date but please clean up the date format :) */}
+
+              <Body2Bold>Pick Up: {organizePickupTime()}</Body2Bold>
+            </ColDiv>
+            {/** mess w/ the height of the scrollDiv so that the locationn stays constant :) */}
+
+            <ScrollDiv>
+              {Cart.map(cartItem => (
+                <FavoriteDiv key={cartItem.id}>
+                  <img
+                    src={cartItem.photo}
+                    alt={cartItem.name}
+                    style={{
+                      width: '150px',
+                      height: '150px',
+                      marginLeft: '80px',
+                      marginRight: '100px',
+                    }}
+                  />
+                  <LabelBox>
+                    <Label>{cartItem.name}</Label>
+                    <p>Category: {cartItem.category}</p>
+                  </LabelBox>
+                </FavoriteDiv>
+              ))}
+            </ScrollDiv>
+            <AddressDiv>
+              <Body2>Location: 3170 23rd Street, San Francisco, CA 94110</Body2>
+            </AddressDiv>
+          </OutterFavoriteDiv>
+        </OutterBox>
+      </CenterBox>
     </div>
   );
 }
diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts
@@ -8,10 +8,12 @@ export const FavoriteDiv = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-start;
+  justify-content: space-between;
   width: 100%;
   margin-bottom: 50px;
   margin-top: 30px;
+  margin-right: 20px;
+
 `;
 
 export const OutterFavoriteDiv = styled.div`
@@ -24,16 +26,35 @@ export const OutterFavoriteDiv = styled.div`
   width: 800px;
   max-height: 100%;
   margin-top: 20px;
-  margin-bottom: 30px;
-  margin-right: 40px;
+  margin-right: 60px;
   margin-left: 60px;
+  padding-right: 20px;
+  padding-left: 10px;
+  padding-top: 10px;
 `;
 
 export const ScrollDiv = styled.div`
   overflow: scroll;
   width: 100%;
 `;
 
+export const ImageDiv = styled.div`
+  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.08);
+  width: 150px;
+  height: 150px;
+  margin-left: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Wrapper = styled.div`
+  padding: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const BackDiv = styled.button`
   display: flex;
   flex-direction: row;
@@ -88,14 +109,22 @@ export const NavBarMovedUP = styled(NavBar)`
 
 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;
-  margin-left: 30px;
-  gap: 35px;
+  gap: 50px;
+  margin-right: 30px;
+
 `;
 
 export const HeaderText = styled.h3`
@@ -225,10 +254,10 @@ export const WhiteBackgroundDiv = styled.div`
   height: 430px;
   width: 350px;
   padding-top: 20px;
-
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
 `;
 
+
 export const BottomColumnDiv = styled.div`
   display: flex;
   flex-direction: row;

diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx
@@ -72,7 +72,6 @@ export default function PickUp() {
     }
     fetchProducts();
     fetchTimes();
-    console.log(Time);
   }, []);
 
   useEffect(() => {