Buyankhuu/quick fix

next.config.js

@@ -2,3 +2,10 @@
 const nextConfig = {}
 
 module.exports = nextConfig
+
+module.exports = {
+    compiler: {
+      // Enables the styled-components SWC transform
+      styledComponents: true
+    }
+  }

src/app/[productId]/page.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries';
+import { Body1, Heading1, Body2Light } from '@/styles/fonts';
 import { fetchProductByID } from '../../api/supabase/queries/product_queries';
 import BackButton from '../../components/BackButton/BackButton';
 import 'react-toastify/dist/ReactToastify.css';
@@ -28,6 +30,9 @@ export default function ItemDisplay({
     async function fetchProducts() {
       try {
         const response = await fetchProductByID(params.productId);
+        response.category = await convertButtonNumberToCategory(
+          response.category,
+        );
         if (response) {
           setItem(response);
         }
@@ -48,24 +53,31 @@ export default function ItemDisplay({
         limit={1}
         hideProgressBar
       />
-      <BackButton destination="./storefront" />
+      <div style={{ marginLeft: '250px', marginTop: '50px' }}>
+        <BackButton destination="./storefront" />
+      </div>
+
       <DescriptionContainer>
         <ImageContainer>
           <img
             src={Item?.photo}
             alt={Item?.name}
-            style={{ width: '350px', height: '350px' }}
+            style={{ width: '400px', height: '400px' }}
           />
         </ImageContainer>
         <TextContainer>
-          <h1>{Item?.name}</h1>
-          <h4 style={{ fontWeight: 'normal', paddingTop: '5px' }}>
+          <Heading1>{Item?.name}</Heading1>
+          <Body1 style={{ fontWeight: 'normal', paddingTop: '5px' }}>
             {Item?.category}
-          </h4>
+          </Body1>
           <Buttons productNumber={params.productId} />
-          <p style={{ paddingTop: '50px' }}>Product ID: {Item?.id}</p>
-          <p style={{ paddingTop: '20px' }}>Product Details:</p>
-          <p>{Item?.description}</p>
+          <Body2Light style={{ paddingTop: '50px' }}>
+            Product ID: {Item?.id}
+          </Body2Light>
+          <Body2Light style={{ paddingTop: '20px' }}>
+            Product Details:
+          </Body2Light>
+          <Body2Light>{Item?.description}</Body2Light>
         </TextContainer>
       </DescriptionContainer>
     </Fullscreen>

src/app/[productId]/styles.ts

@@ -15,24 +15,29 @@ export const BackButton = styled.button`
 
 export const DescriptionContainer = styled.div`
   display: flex;
-  margin: 50px;
+  margin-left: 50px;
+  margin-right: 50px;
   width: 1440px;
   height: 400px;
 `;
 
 export const ImageContainer = styled.div`
   margin: 50px;
-  width: 350px;
-  height: 350 px;
+  width: 500px;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   margin-left: 200px;
-  margin-right: 200px;
+  background-color: ${COLORS.lightGrey};
 `;
 
 export const TextContainer = styled.div`
   margin-left: 70px;
   width: 440px;
   height: 350px;
+  margin-top: 50px;
 `;
 
 export const ButtonsWrapper = styled.div`
@@ -83,7 +88,7 @@ export const AddToCartButton = styled.button`
 export const ToastPopUP = styled(ToastContainer)`
   position: fixed;
   z-index: 100;
-  transform: translatey(130px);
+  transform: translatey(90px);
 `;
 
 export const Fullscreen = styled.div`

src/app/cart/page.tsx

@@ -50,39 +50,39 @@ export default function OrderPage() {
   };
 
   return (
-    <div>
+    <PageDiv>
       <NavBar />
-
-      <PageDiv>
+      <div style={{ marginTop: '30px', marginLeft: '50px' }}>
         <BackButton destination="./storefront" />
-        <ContentDiv>
-          <LeftColumnDiv>
-            <Heading1>Cart</Heading1>
-            <CartItemsDiv>
-              {cart.map(cartItem => (
-                <CartItem
-                  key={cartItem.id}
-                  cartItemProduct={cartItem}
-                  setCart={setCart}
-                  cart={cart}
-                  setNumberOfItems={setNumberOfItems}
-                  numberOfItems={numberOfItems}
-                />
-              ))}
-            </CartItemsDiv>
-          </LeftColumnDiv>
-          <RightColumnDiv>
-            <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-            <CheckoutButton
-              // change this function so that the flow makes sense and that there is items within the cart
-              onClick={() => checkDelivery()}
-              disabled={numberOfItems === 0}
-            >
-              Check Out
-            </CheckoutButton>
-          </RightColumnDiv>
-        </ContentDiv>
-      </PageDiv>
-    </div>
+      </div>
+
+      <ContentDiv>
+        <LeftColumnDiv>
+          <Heading1>Cart</Heading1>
+          <CartItemsDiv>
+            {cart.map(cartItem => (
+              <CartItem
+                key={cartItem.id}
+                cartItemProduct={cartItem}
+                setCart={setCart}
+                cart={cart}
+                setNumberOfItems={setNumberOfItems}
+                numberOfItems={numberOfItems}
+              />
+            ))}
+          </CartItemsDiv>
+        </LeftColumnDiv>
+        <RightColumnDiv>
+          <OrderSummary cart={cart} numberOfItems={numberOfItems} />
+          <CheckoutButton
+            // change this function so that the flow makes sense and that there is items within the cart
+            onClick={() => checkDelivery()}
+            disabled={numberOfItems === 0}
+          >
+            Check Out
+          </CheckoutButton>
+        </RightColumnDiv>
+      </ContentDiv>
+    </PageDiv>
   );
 }

src/app/cart/styles.tsx

@@ -33,6 +33,7 @@ export const CartItemsDiv = styled.div`
   width: 750px;
   overflow: auto;
   gap: 32px;
+  margin-top: 20px;
 `;
 
 export const ImageDiv = styled.div`
@@ -130,7 +131,9 @@ export const ContentDiv = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  gap: 32px;
+  gap: 100px;
+  padding-left: 50px;
+  background-color: ${COLORS.offWhite};
 `;
 
 export const BackButtonDiv1 = styled.div`
@@ -242,17 +245,18 @@ export const PShiftLeft = styled.p`
 `;
 
 export const PageDiv = styled.div`
-  height: 100%;
+  height: auto;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 32px;
-  gap: 32px;
+
   background-color: ${COLORS.offWhite};
 `;
 
 export const LeftColumnDiv = styled.div`
   flex: 1;
   padding-right: 20px;
+  margin-top: 20px;
 `;
 
 export const InformationText = styled.div`
@@ -334,6 +338,7 @@ export const OrderContainer = styled.div`
 
 export const RightColumnDiv = styled.div`
   flex: 1;
+  margin-top: 30px;
   padding-left: 20px;
 `;
 

src/app/orderConfirmationDelivery/page.tsx

@@ -93,7 +93,7 @@ export default function OrderConfirmationDelivery() {
               <ShippingDetailsDiv>
                 <Heading3Bold>Delivery Information</Heading3Bold>
                 <DetailsHeader>Estimated Date</DetailsHeader>
-                <Body1>date</Body1>
+                <Body1>{user?.delivery_group}</Body1>
                 <DetailsHeader>Location</DetailsHeader>
                 <Body1>
                   {userAddress?.street}, {userAddress?.city},{' '}