Merge pull request #32 from calblueprint/celine/delivery-page

Celine - Delivery Page

package.json

@@ -22,6 +22,7 @@
     "dotenv": "^16.3.1",
     "eslint-config-next": "13.5.2",
     "next": "^13.5.4",
+    "next-google-fonts": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-feather": "^2.0.10",

src/api/supabase/queries/cart_queries.ts

@@ -32,22 +32,35 @@ export async function fetchCartItem(cartItemID: number): Promise<CartItem> {
  */
 export async function fetchCart(): Promise<CartItem[]> {
   const user = await fetchUser();
+
+  // Check if the user has a cart_id
+  if (!user.cart_id) {
+    throw new Error('User does not have a cart.');
+  }
+
   const cartID = user.cart_id;
   const { data, error } = await supabase
     .from('order')
     .select('*')
     .match({ id: cartID })
     .single();
+
   if (error) {
     throw new Error(`Error fetching cart: ${error.message}`);
   }
+
+  // Check if data is null (cart not found)
+  if (!data) {
+    throw new Error('Cart not found.');
+  }
+
   const products = data.product_id_array;
   const productPromises = products.map(async (productID: number) => {
     const product = await fetchCartItem(productID);
     return product;
   });
-  const fetchedProducts = await Promise.all(productPromises);
 
+  const fetchedProducts = await Promise.all(productPromises);
   return fetchedProducts;
 }
 

src/api/supabase/queries/order_queries.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 //
 
-import { Order } from '../../../schema/schema';
+import { Order, OrderProduct } from '../../../schema/schema';
 import { fetchUser } from './user_queries';
 import supabase from '../createClient';
 
@@ -93,3 +93,35 @@ export async function fetchNOrdersByUserIdSorted(n: number): Promise<Order[]> {
   const orders = await fetchOrdersByUser();
   return sortOrdersByCreated(orders).slice(0, n);
 }
+
+export async function fetchOrderProductById(
+  productId: number,
+): Promise<OrderProduct> {
+  const { data: orderProduct, error } = await supabase
+    .from('order_product')
+    .select('*')
+    .eq('id', productId)
+    .single();
+  if (error) {
+    throw new Error(`Error fetching order product: ${error.message}`);
+  }
+  return orderProduct;
+}
+
+export async function fetchRecentOrderProducts(): Promise<OrderProduct[]> {
+  const order = await fetchNOrdersByUserIdSorted(1);
+  const orderProductIds = order[0].order_product_id_array;
+
+  const orderProducts = await Promise.all(
+    orderProductIds.map(async orderProductId => {
+      try {
+        const orderProduct = await fetchOrderProductById(orderProductId);
+        return orderProduct;
+      } catch (error) {
+        throw new Error(`Error fetching order product array.`);
+      }
+    }),
+  );
+
+  return orderProducts;
+}

src/app/checkout/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const CheckoutButton = styled.button`
+  width: 100px;
+  height: 50px;
+`;
+
+export default CheckoutButton;

src/app/delivery/itemRows.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { OrderProduct } from '../../schema/schema';
+import { fetchProductByID } from '../../api/supabase/queries/product_queries';
+import {
+  ItemQuantityContainer,
+  ItemQuantityRow,
+  ItemText,
+  QuantityText,
+  TotalContainer,
+} from './styles';
+
+function ItemRows({ products }: { products: OrderProduct[] }) {
+  const [productDetails, setProductDetails] = useState<{
+    [key: number]: string;
+  }>({});
+
+  useEffect(() => {
+    // Fetch product details for each product ID
+    const fetchProductDetails = async () => {
+      const details: { [key: number]: string } = {};
+
+      // Create an array of promises
+      const productPromises = products.map(async product => {
+        const productData = await fetchProductByID(product.product_id);
+        details[product.product_id] = productData.name;
+      });
+
+      // Wait for all promises to resolve
+      await Promise.all(productPromises);
+
+      setProductDetails(details);
+    };
+
+    fetchProductDetails();
+  }, [products]);
+
+  const totalQuantity = products.reduce(
+    (total, productVal) => total + productVal.quantity,
+    0,
+  );
+
+  return (
+    <div>
+      <ItemQuantityContainer>
+        {products.map(productVal => (
+          <ItemQuantityRow key={productVal.product_id}>
+            <ItemText>{productDetails[productVal.product_id]}</ItemText>
+            <QuantityText>{productVal.quantity}</QuantityText>
+          </ItemQuantityRow>
+        ))}
+      </ItemQuantityContainer>
+      <TotalContainer>
+        <ItemQuantityRow style={{ marginTop: '23px' }}>
+          <ItemText>Order Total</ItemText>
+          <QuantityText>{totalQuantity}</QuantityText>
+        </ItemQuantityRow>
+      </TotalContainer>
+    </div>
+  );
+}
+
+export default ItemRows;

src/app/delivery/page.tsx

@@ -1,7 +1,66 @@
+'use client';
+
+import React, { useState } from 'react';
+import BackButton from '../../components/BackButton';
+import { GlobalStyle } from '../../styles/components';
+import { Normal700Text } from '../../styles/fonts';
+import { fetchRecentOrderProducts } from '../../api/supabase/queries/order_queries';
+import { OrderProduct } from '../../schema/schema';
+import ItemRows from './itemRows';
+import {
+  DeliveryContainer,
+  OrderContainer,
+  OrderSummary,
+  OrderSummaryText,
+  OrderButton,
+  InformationContainer,
+  InformationText,
+  ItemText,
+  QtyText,
+  QuantityText,
+  ItemQuantityRow,
+  TotalContainer,
+  NavBarMovedUP,
+} from './styles';
+
 export default function App() {
+  const [OrderProducts, setOrderProducts] = useState<OrderProduct[]>([]);
+  async function fetchOrderProducts() {
+    try {
+      const data = (await fetchRecentOrderProducts()) as OrderProduct[];
+      setOrderProducts(data);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  fetchOrderProducts();
+
   return (
     <main>
-      <div> Delivery </div>
+      <GlobalStyle />
+
+      <NavBarMovedUP />
+      <BackButton />
+      <DeliveryContainer>
+        <InformationContainer>
+          <Normal700Text style={{ marginBottom: '38px', fontSize: '40px' }}>
+            Shipping
+          </Normal700Text>
+          <Normal700Text>Name</Normal700Text>
+          <InformationText>Ethan Auyeung</InformationText>
+          <Normal700Text>Address</Normal700Text>
+          <InformationText>123 Telegraph Ave</InformationText>
+        </InformationContainer>
+        <OrderContainer>
+          <OrderSummary>
+            <OrderSummaryText>Order Summary</OrderSummaryText>
+            <QtyText>Qty.</QtyText>
+            <ItemRows products={OrderProducts} />
+          </OrderSummary>
+          <OrderButton>Place Order</OrderButton>
+        </OrderContainer>
+      </DeliveryContainer>
     </main>
   );
 }

src/app/delivery/styles.ts

@@ -0,0 +1,135 @@
+import styled from 'styled-components';
+import NavBar from '../../components/NavBar';
+import COLORS from '../../styles/colors';
+
+export const DeliveryContainer = styled.div`
+  margin-left: 80px;
+  margin-right: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const OrderSummaryText = styled.div`
+  margin-top: 27px;
+  margin-left: 30px;
+  text-align: left;
+  width: 285px;
+  height: 35px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  font-size: 30px;
+`;
+
+export const QtyText = styled.div`
+  margin-top: 30px;
+  margin-right: 20px;
+  margin-bottom: 5px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: right;
+`;
+
+export const ItemText = styled.div`
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const QuantityText = styled.div`
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: right;
+`;
+
+export const InformationContainer = styled.div`
+  width: 730px;
+  height: 400px;
+`;
+
+export const InformationText = styled.div`
+  width: 730px;
+  height: 50px;
+  border-radius: 4px;
+  margin-top: 14px;
+  margin-bottom: 14px;
+  border: 1px solid ${COLORS.neutralGrey};
+  background: ${COLORS.lightGrey};
+  display: flex; /* Use flexbox */
+  align-items: center; /* Center vertically */
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding-left: 20px;
+`;
+
+export const OrderContainer = styled.div`
+  margin-top: 50px;
+  width: 350px;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const OrderSummary = styled.div`
+  width: 350px;
+  height: 360px;
+  border-radius: 8px;
+  background: ${COLORS.white};
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.15);
+  align-items: center;
+`;
+
+export const ItemQuantityContainer = styled.div`
+  padding-top: 200px
+  width: 300px;
+  height: 170px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ItemQuantityRow = styled.div`
+  width: 285px;
+  height: 25px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
+`;
+
+export const TotalContainer = styled.div`
+  width: 350px;
+  height: 75px;
+  border-top: 1px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const OrderButton = styled.button`
+  margin-top: 26px;
+  width: 350px;
+  height: 50px;
+  flex-shrink: 0;
+  align-items: center;
+  background: ${COLORS.navy};
+  border-radius: 8px;
+  color: ${COLORS.white};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+  position: static;
+`;

src/app/storefront/styles.ts

@@ -61,7 +61,7 @@ export const ButtonsContainer = styled.div`
   margin-left: 400px;
   margin-right: 400px;
   width: 600px;
-  height: 230px;
+  height: 200px;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -70,6 +70,7 @@ export const ButtonsContainer = styled.div`
   z-index: 1100;
   transform: translate(0px, -30px);
 `;
+
 export const NavButton = styled.button`
   margin-top: 30px;
   margin-right: 25px;