Merge branch 'main' of https://github.com/calblueprint/shanti-project …

…into Charlotte/PickUp
calblueprint · Apr 17, 2024 · 58fcca7 · 58fcca7
2 parents db1f231 + bafd81c
commit 58fcca7
Show file tree

Hide file tree

Showing 38 changed files with 501 additions and 383 deletions.
diff --git a/next.config.js b/next.config.js
@@ -2,3 +2,10 @@
 const nextConfig = {}
 
 module.exports = nextConfig
+
+module.exports = {
+    compiler: {
+      // Enables the styled-components SWC transform
+      styledComponents: true
+    }
+  }
diff --git a/src/api/supabase/queries/cart_queries.ts b/src/api/supabase/queries/cart_queries.ts
@@ -200,12 +200,11 @@ export async function fetchCartItemsWithQuantity(): Promise<
       quantity: item.quantity,
       photo: product.photo,
       id: product.id,
-      category: await convertButtonNumbertoCategory(product.category),
+      category: product.category,
     };
   });
 
   const fetchedProducts = await Promise.all(productPromises);
-  console.log(fetchedProducts);
 
   return fetchedProducts;
 }
diff --git a/src/api/supabase/queries/order_queries.ts b/src/api/supabase/queries/order_queries.ts
@@ -1,7 +1,12 @@
 /* eslint-disable no-console */
 //
 
-import { Order, OrderProduct, Product } from '../../../schema/schema';
+import {
+  Order,
+  OrderProduct,
+  OrderStatus,
+  Product,
+} from '../../../schema/schema';
 import { fetchUser } from './user_queries';
 import { fetchProductByID } from './product_queries';
 import supabase from '../createClient';
@@ -33,13 +38,14 @@ export async function createOrder() {
     .insert({ user_id: user.id })
     .select('*')
     .single();
-
+  console.log(order);
   if (error) {
     throw new Error(`Error creating order: ${error.message}`);
   }
 
+  console.log(order.id);
   await supabase
-    .from('users')
+    .from('profiles')
     .update({ cart_id: order.id })
     .match({ id: user.id });
 }
@@ -68,7 +74,7 @@ export async function fetchOrdersByUser(): Promise<Order[]> {
     .from('order')
     .select('*')
     .eq('user_id', userId)
-    .neq('status', 'In Progress');
+    .neq('order_status', 'In Progress');
 
   if (error) {
     throw new Error(`Error fetching orders for user: ${error.message}`);
@@ -228,3 +234,41 @@ export async function updateCartPickupId(pickupId: number) {
     .update({ pickup_time_id: pickupId })
     .eq('id', cartId);
 }
+
+/* Update the status of an order */
+export async function updateOrderStatus(
+  orderId: number,
+  orderStatus: OrderStatus,
+) {
+  await supabase
+    .from('order')
+    .update({ order_status: orderStatus })
+    .eq('id', orderId);
+}
+/**
+ * Gets user's most recent order
+ * @returns Promise<Order> - The most recent Order object, or throws an error if no order is found.
+ */
+export async function fetchCartIdFromUserfetchMostRecentOrderByUser(): Promise<Order> {
+  const user = await fetchUser();
+  const userId = user.id;
+  const { data, error } = await supabase
+    .from('order')
+    .select('*')
+    .eq('user_id', userId)
+    .order('created_at', { ascending: false }) // Order by creation date in descending order
+    .limit(1); // Limit to only one order
+
+  if (error) {
+    throw new Error(
+      `Error fetching most recent order for user: ${error.message}`,
+    );
+  }
+
+  if (data.length === 0) {
+    throw new Error('No orders found for the user.');
+  }
+
+  // Return the first order in the data array
+  return data[0];
+}
diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts
@@ -88,6 +88,7 @@ export async function filterProduct(productType: string): Promise<Product[]> {
 export async function convertCategoryToNumber(
   productType: string,
 ): Promise<StorefrontButtons> {
+  console.log(productType);
   const { data: buttonVal, error } = await supabase
     .from('storefront_buttons')
     .select('*')
@@ -103,6 +104,7 @@ export async function convertCategoryToNumber(
 export async function fetchUnprescribedCategory(
   productType: string,
 ): Promise<Product[]> {
+  console.log(productType);
   const productTypeConverted = await convertCategoryToNumber(productType);
 
   const { data: products, error } = await supabase

diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts
@@ -1,6 +1,8 @@
+import { Lekton } from 'next/font/google';
 import supabase from '../createClient';
 import { User, Product } from '../../../schema/schema';
 import { fetchProductByID } from './product_queries';
+import { convertButtonNumberToCategory } from './button_queries';
 
 /**
  * fetchUser is a function that fetches the user data from the database and returns the user object.

diff --git a/src/app/[productId]/page.tsx b/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>

diff --git a/src/app/[productId]/styles.ts b/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`

diff --git a/src/app/cart/Buttons.tsx b/src/app/cart/Buttons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ButtonsWrapper, QuantityButton, PlusMinusButton } from './styles';
+import { QuantityButton, PlusMinusButton } from './styles';
 
 import {
   decreaseFromCart,
@@ -53,24 +53,22 @@ export default function Buttons(props: {
   // used hyphen instead of dash for display
 
   return (
-    <ButtonsWrapper>
-      <QuantityButton>
-        <PlusMinusButton
-          type="button"
-          style={{ cursor: 'pointer' }}
-          onClick={decreaseQuantity}
-        >
-          –
-        </PlusMinusButton>
-        <span>{count}</span>
-        <PlusMinusButton
-          type="button"
-          style={{ cursor: 'pointer' }}
-          onClick={increaseQuantity}
-        >
-          +
-        </PlusMinusButton>
-      </QuantityButton>
-    </ButtonsWrapper>
+    <QuantityButton>
+      <PlusMinusButton
+        type="button"
+        style={{ cursor: 'pointer' }}
+        onClick={decreaseQuantity}
+      >
+        –
+      </PlusMinusButton>
+      <span>{count}</span>
+      <PlusMinusButton
+        type="button"
+        style={{ cursor: 'pointer' }}
+        onClick={increaseQuantity}
+      >
+        +
+      </PlusMinusButton>
+    </QuantityButton>
   );
 }
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
@@ -1,15 +1,14 @@
 'use client';
 
 import { useState } from 'react';
+import { Body2, Heading4Bold } from '@/styles/fonts';
 import { removeCartItem } from '../../api/supabase/queries/cart_queries';
-
 import {
   FavoriteDiv,
   TrashIcon,
   TransparentButton,
-  Label,
   LabelBox,
-  ImageDiv,
+  ImageBackground,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -37,33 +36,31 @@ export default function CartItem(props: {
   }
 
   return (
-    <div>
-      <FavoriteDiv key={cartItemProduct.id}>
-        <ImageDiv>
-          <img
-            src={cartItemProduct.photo}
-            alt={cartItemProduct.name}
-            style={{ width: '130px', height: '130px', padding: '20px' }}
-          />
-        </ImageDiv>
-        <LabelBox>
-          <Label>{cartItemProduct.name}</Label>
-          <p>Category: {cartItemProduct.category}</p>
-        </LabelBox>
-        <Buttons
-          productNumber={cartItemProduct.id}
-          quantity={cartItemProduct.quantity}
-          setNumberOfItems={setNumberOfItems}
-          numberOfItems={numberOfItems}
-          count={count}
-          setCount={setCount}
-          setCart={setCart}
-          cart={cart}
+    <FavoriteDiv key={cartItemProduct.id}>
+      <ImageBackground>
+        <img
+          src={cartItemProduct.photo}
+          alt={cartItemProduct.name}
+          style={{ width: '150px', height: '150px', objectFit: 'cover' }}
         />
-        <TransparentButton onClick={() => removeProduct()}>
-          <TrashIcon style={{ cursor: 'pointer' }} />
-        </TransparentButton>
-      </FavoriteDiv>
-    </div>
+      </ImageBackground>
+      <LabelBox>
+        <Heading4Bold>{cartItemProduct.name}</Heading4Bold>
+        <Body2>Category: {cartItemProduct.category}</Body2>
+      </LabelBox>
+      <Buttons
+        productNumber={cartItemProduct.id}
+        quantity={cartItemProduct.quantity}
+        setNumberOfItems={setNumberOfItems}
+        numberOfItems={numberOfItems}
+        count={count}
+        setCount={setCount}
+        setCart={setCart}
+        cart={cart}
+      />
+      <TransparentButton onClick={() => removeProduct()}>
+        <TrashIcon style={{ cursor: 'pointer' }} />
+      </TransparentButton>
+    </FavoriteDiv>
   );
 }