Merge pull request #80 from calblueprint/Charlotte/PickUp

feat: PickUp Page redesign
calblueprint · Apr 15, 2024 · 8ad3ecc · 8ad3ecc
2 parents 8031967 + 32ad91c
commit 8ad3ecc
Show file tree

Hide file tree

Showing 6 changed files with 269 additions and 73 deletions.
diff --git a/src/api/supabase/queries/button_queries.ts b/src/api/supabase/queries/button_queries.ts
@@ -12,6 +12,21 @@ export async function fetchButtonCategories(): Promise<StorefrontButtons[]> {
   return buttons;
 }
 
+export async function convertButtonNumberToCategory(
+  id: string,
+): Promise<string> {
+  const { data: buttonsCategory, error } = await supabase
+    .from('storefront_buttons')
+    .select('*')
+    .eq('id', id)
+    .single();
+  if (error) {
+    throw new Error(`Error fetching buttons: ${error.message}`);
+  }
+
+  return buttonsCategory.name;
+}
+
 export async function fetchButton() {
   return 0;
 }
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,12 @@ 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,24 +5,37 @@ 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';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 import {
+  TextDiv,
+  TextDiv1,
+  BackButtonDiv,
   FavoriteDiv,
-  ColDiv,
   OutterFavoriteDiv,
-  OutterBox,
-  Label,
   LabelBox,
+  LabelBox1,
   ScrollDiv,
-  DateText,
-  CenterBox,
-  AddressDiv,
+  ShippingDetailsDiv,
+  ImageDiv,
+  BottomColumnDiv,
+  Wrapper,
+  LeftColumnDiv,
+  RightColumnDiv,
+  DetailsHeader,
+  PageDiv,
+  CenterDiv,
 } from './styles';
 
 import { Product, User, Pickup } from '../../schema/schema';
@@ -57,58 +70,66 @@ 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 />
-      <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>
   );
 }