fixing cart and order summary

calblueprint · Apr 3, 2024 · 99772a2 · 99772a2
1 parent dc62a20
commit 99772a2
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 59 deletions.
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
+import { Heading1 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
 
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
@@ -14,11 +15,12 @@ import {
 import CartItem from './cartItem';
 import NavBar from '../../components/NavBarFolder/NavBar';
 import {
-  OutterFavoriteDiv,
+  CartItemsDiv,
   PageDiv,
   CheckoutButton,
   LeftColumnDiv,
   RightColumnDiv,
+  ContentDiv,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -52,31 +54,33 @@ export default function OrderPage() {
       <NavBar />
 
       <PageDiv>
-        <LeftColumnDiv>
-          <BackButton destination="./storefront" />
-          <h1>Cart</h1>
-          <OutterFavoriteDiv>
-            {cart.map(cartItem => (
-              <CartItem
-                key={cartItem.id}
-                cartItemProduct={cartItem}
-                setCart={setCart}
-                cart={cart}
-                setNumberOfItems={setNumberOfItems}
-                numberOfItems={numberOfItems}
-              />
-            ))}
-          </OutterFavoriteDiv>
-        </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()}
-          >
-            Check Out
-          </CheckoutButton>
-        </RightColumnDiv>
+        <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()}
+            >
+              Check Out
+            </CheckoutButton>
+          </RightColumnDiv>
+        </ContentDiv>
       </PageDiv>
     </div>
   );

diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
@@ -17,15 +17,13 @@ export const FavoriteDiv = styled.div`
   margin-top: 30px;
 `;
 
-export const OutterFavoriteDiv = styled.div`
+export const CartItemsDiv = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 10px;
-  width: 1000px;
-  height: 700px;
+  width: 750px;
   overflow: scroll;
-  margin-top: 10px;
 `;
 
 export const BackDiv = styled.button`
@@ -117,8 +115,18 @@ export const LabelBox = styled.div`
 `;
 
 export const PageDiv = styled.div`
+  height: 100%;
   display: flex;
-  flex-flow: row;
+  flex-direction: column;
+  padding: 32px;
+  gap: 32px;
+`;
+
+export const ContentDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 32px;
 `;
 
 export const OrderSummaryDiv = styled.div`
@@ -150,7 +158,7 @@ export const OrderTotalDiv = styled.div`
 export const LeftColumnDiv = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 50px;
+  gap: 16px;
 `;
 
 export const CheckoutButton = styled.button`
@@ -179,8 +187,6 @@ export const Qty = styled.p`
 export const RightColumnDiv = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 200px;
-  margin-top: 100px;
 `;
 
 export const WhiteBackgroundDiv = styled.div`

diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts
@@ -47,7 +47,6 @@ export const CategoryButtonLabel = styled.p<{ $selected?: boolean }>`
 `;
 
 export const IndividualContainer = styled.div`
-  width: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -62,9 +61,13 @@ export const ItemContainer = styled.div`
 export const ButtonsContainer = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
   position: flex;
   align-items: center;
+  padding-left: 32px;
+  padding-right: 32px;
+  max-width: 750px;
+  width: 100%;
 `;
 
 export const NavButton = styled.button`

diff --git a/src/components/OrderSummaryFolder/OrderSummary.tsx b/src/components/OrderSummaryFolder/OrderSummary.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Body1, Body1Bold, Body2Light, Heading3Bold } from '@/styles/fonts';
 import {
   HeaderShiftLeft,
   OrderSummaryDiv,
@@ -10,6 +11,11 @@ import {
   ItemSummaryDiv,
   Qty,
   PShiftRight,
+  ContainerDiv,
+  TotalDiv,
+  OrderRow,
+  OrderTable,
+  OrderTableBody,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -19,23 +25,96 @@ export default function OrderSummary(props: {
   numberOfItems: number;
 }) {
   const { cart, numberOfItems } = props;
+  const cartItems = [
+    {
+      id: 1,
+      name: 'Product 1',
+      quantity: 1,
+    },
+    {
+      id: 2,
+      name: 'Product 2',
+      quantity: 2,
+    },
+    {
+      id: 3,
+      name: 'Product 3',
+      quantity: 3,
+    },
+    {
+      id: 3,
+      name: 'Product 3',
+      quantity: 3,
+    },
+    {
+      id: 3,
+      name: 'Product 3',
+      quantity: 3,
+    },
+    {
+      id: 3,
+      name: 'Product 3',
+      quantity: 3,
+    },
+    {
+      id: 3,
+      name: 'Product 3',
+      quantity: 3,
+    },
+  ];
+
+  // return (
+  //   <WhiteBackgroundDiv>
+  //     <HeaderShiftLeft>Order Summary</HeaderShiftLeft>
+  //     <Qty>Qty.</Qty>
+  //     <OrderSummaryDiv>
+  //       {cart.map(cartItem => (
+  //         <ItemSummaryDiv key={cartItem.id}>
+  //           <PShiftLeft>{cartItem.name}</PShiftLeft>
+  //           <PShiftRight>{cartItem.quantity}</PShiftRight>
+  //         </ItemSummaryDiv>
+  //       ))}
+  //     </OrderSummaryDiv>
+  //     <OrderTotalDiv>
+  //       <HeaderShiftLeft>Order Total</HeaderShiftLeft>
+  //       <HeaderShiftRight>{numberOfItems}</HeaderShiftRight>
+  //     </OrderTotalDiv>
+  //   </WhiteBackgroundDiv>
+  // );
 
   return (
-    <WhiteBackgroundDiv>
-      <HeaderShiftLeft>Order Summary</HeaderShiftLeft>
-      <Qty>Qty.</Qty>
-      <OrderSummaryDiv>
-        {cart.map(cartItem => (
-          <ItemSummaryDiv key={cartItem.id}>
-            <PShiftLeft>{cartItem.name}</PShiftLeft>
-            <PShiftRight>{cartItem.quantity}</PShiftRight>
-          </ItemSummaryDiv>
-        ))}
-      </OrderSummaryDiv>
-      <OrderTotalDiv>
-        <HeaderShiftLeft>Order Total</HeaderShiftLeft>
-        <HeaderShiftRight>{numberOfItems}</HeaderShiftRight>
-      </OrderTotalDiv>
-    </WhiteBackgroundDiv>
+    <ContainerDiv>
+      <WhiteBackgroundDiv>
+        <Heading3Bold>Order Summary</Heading3Bold>
+        <OrderTable>
+          <thead>
+            <OrderRow>
+              <th>
+                <Body2Light>PRODUCT NAME</Body2Light>
+              </th>
+              <th>
+                <Body2Light>QTY</Body2Light>
+              </th>
+            </OrderRow>
+          </thead>
+          <OrderTableBody>
+            {cartItems.map(cartItem => (
+              <OrderRow key={cartItem.id}>
+                <td>
+                  <Body1>{cartItem.name}</Body1>
+                </td>
+                <td>
+                  <Body1>{cartItem.quantity}</Body1>
+                </td>
+              </OrderRow>
+            ))}
+          </OrderTableBody>
+        </OrderTable>
+      </WhiteBackgroundDiv>
+      <TotalDiv>
+        <Body1Bold>Order Total</Body1Bold>
+        <Body1Bold>{numberOfItems}</Body1Bold>
+      </TotalDiv>
+    </ContainerDiv>
   );
 }
diff --git a/src/components/OrderSummaryFolder/styles.ts b/src/components/OrderSummaryFolder/styles.ts
@@ -1,3 +1,4 @@
+import COLORS from '@/styles/colors';
 import styled from 'styled-components';
 
 export const OrderSummaryDiv = styled.div`
@@ -32,13 +33,12 @@ export const Qty = styled.p`
 `;
 
 export const WhiteBackgroundDiv = styled.div`
-  border-radius: 8px;
-  background: var(--White, #fff);
-  height: 430px;
-  width: 350px;
-  padding-top: 20px;
-
-  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
+  background: ${COLORS.white};
+  padding: 24px;
+  padding-bottom: 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 `;
 
 export const HeaderShiftRight = styled.h2`
@@ -56,3 +56,42 @@ export const HeaderShiftLeft = styled.h2`
 export const PShiftLeft = styled.p`
   margin-left: 15px;
 `;
+
+
+export const ContainerDiv = styled.div`
+  width: 350px;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 8px;
+  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+`;
+
+export const TotalDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px;
+  background-color: ${COLORS.lightGrey};
+`;
+
+export const OrderRow = styled.tr`
+  width: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const OrderTable = styled.table`
+  width: 100%;
+  max-height: 200px;
+`;
+
+export const OrderTableBody = styled.tbody`
+  overflow: scroll;
+`;