copied

calblueprint · Apr 15, 2024 · 4cc9f11 · 4cc9f11
1 parent 60d4c50
commit 4cc9f11
Showing 1 changed file with 68 additions and 46 deletions.
diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -5,7 +5,13 @@ 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 { Body2Bold, Body2, Heading3Bold } from '@/styles/fonts';
+import {
+  Body1,
+  Body1Bold,
+  Body2Light,
+  Heading3Bold,
+  Heading4Bold,
+} from '@/styles/fonts';
 import { fetchCartItemsWithQuantity } from '../../api/supabase/queries/cart_queries';
 
 import BackButton from '../../components/BackButton/BackButton';
@@ -21,9 +27,15 @@ import {
   LabelBox,
   LabelBox1,
   ScrollDiv,
-  DateText,
-  CenterBox,
-  AddressDiv,
+  ShippingDetailsDiv,
+  ImageDiv,
+  BottomColumnDiv,
+  Wrapper,
+  LeftColumnDiv,
+  RightColumnDiv,
+  DetailsHeader,
+  PageDiv,
+  CenterDiv,
 } from './styles';
 
 import { Product, User, Pickup } from '../../schema/schema';
@@ -65,49 +77,59 @@ export default function OrderConfirmationPickUp() {
   return (
     <div>
       <NavBar />
-      <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 :) */}
+      <CenterDiv>
+        <PageDiv>
+          <BackButtonDiv>
+            <BackButton destination="./storefront" />
+          </BackButtonDiv>
+          <BottomColumnDiv>
+            <LeftColumnDiv>
+              <TextDiv>
+                <Heading3Bold>Your order has been submitted</Heading3Bold>
+              </TextDiv>
 
-            <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>
+              <OutterFavoriteDiv>
+                <TextDiv1>
+                  <Heading4Bold>Order No. {user?.cart_id}</Heading4Bold>
+                </TextDiv1>
+                <ScrollDiv>
+                  {Cart.map(cartItem => (
+                    <FavoriteDiv key={cartItem.id}>
+                      <ImageDiv>
+                        <img
+                          src={cartItem.photo}
+                          alt={cartItem.name}
+                          style={{
+                            width: '100px',
+                            height: '100px',
+                          }}
+                        />
+                      </ImageDiv>
+                      <LabelBox1>
+                        <Body1Bold>{cartItem.name}</Body1Bold>
+                        <br />
+                        <Body2Light>Category: {cartItem.category}</Body2Light>
+                      </LabelBox1>
+                      <LabelBox>
+                        <Body1Bold>Quantity: {cartItem.quantity}</Body1Bold>
+                      </LabelBox>
+                    </FavoriteDiv>
+                  ))}
+                </ScrollDiv>
+              </OutterFavoriteDiv>
+            </LeftColumnDiv>
+            <RightColumnDiv>
+              <ShippingDetailsDiv>
+                <Heading3Bold>Delivery 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>
+            </RightColumnDiv>
+          </BottomColumnDiv>
+        </PageDiv>
+      </CenterDiv>
     </div>
   );
 }