Merge branch 'order_hist_final' of github.com:calblueprint/shanti-pro…

…ject into order_hist_final
calblueprint · Mar 19, 2024 · 8aba211 · 8aba211
2 parents 0186b09 + 39c89c5
commit 8aba211
Show file tree

Hide file tree

Showing 19 changed files with 343 additions and 221 deletions.
diff --git a/src/api/supabase/queries/order_queries.ts b/src/api/supabase/queries/order_queries.ts
@@ -5,10 +5,8 @@ import {
   Order,
   OrderProduct,
   Product,
-  ProductWithQuantity,
 } from '../../../schema/schema';
 import { fetchUser } from './user_queries';
-import { fetchProductByID } from './product_queries';
 import supabase from '../createClient';
 
 /**
@@ -38,7 +36,6 @@ export async function createOrder() {
     .insert({ user_id: user.id })
     .select('*')
     .single();
-
   if (error) {
     throw new Error(`Error creating order: ${error.message}`);
   }
@@ -61,11 +58,6 @@ function sortOrdersByCreated(orders: Order[]): Order[] {
   );
 }
 
-/**
- * user = fetch_use()
- * cart_id = user.cart_id
- *
- */
 /**
  * gets all orders by user id and sorted it by creation data
  * @param Order[] - An array of Order objects.
@@ -86,6 +78,7 @@ export async function fetchOrdersByUser(): Promise<Order[]> {
   return data;
 }
 
+
 /**
  * gets all orders by user id and sorted it by creation data
  * @param Order[] - An array of Order objects.
@@ -126,27 +119,19 @@ export async function fetchOrderProductById(
   return orderProduct;
 }
 
-export async function fetchProductFromOrderProduct(
-  orderProductId: number,
-): Promise<Product> {
-  const orderProduct = await fetchOrderProductById(orderProductId);
-  const product = await fetchProductByID(orderProduct.product_id);
-  return product;
-}
-
-export async function fetchProductsFromOrder(
-  orderId: number,
-): Promise<Product[]> {
-  const order = await getOrderById(orderId);
-  const products = order.order_product_id_array;
-
-  const productPromises = products.map(async (productID: number) => {
-    const product = await fetchProductFromOrderProduct(productID);
-    return product;
-  });
-  const fetchedProducts = await Promise.all(productPromises);
 
-  return fetchedProducts;
+export async function fetchProductWithQuantityById(
+  productId: number,
+): Promise<Product> {
+  const { data: orderProduct, error } = await supabase
+    .from('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[]> {
@@ -167,6 +152,27 @@ export async function fetchRecentOrderProducts(): Promise<OrderProduct[]> {
   return orderProducts;
 }
 
+export async function fetchOrderProductsbyOrderId(
+  orderId: number,
+): Promise<Product[]> {
+  const order = await getOrderById(orderId);
+  const orderProductIds = order.order_product_id_array;
+
+  const newOrderProducts = await Promise.all(
+    orderProductIds.map(orderProductId =>
+      fetchOrderProductById(orderProductId),
+    ),
+  );
+  console.log(newOrderProducts);
+  const orderProducts = await Promise.all(
+    newOrderProducts.map(async orderProduct =>
+      fetchProductWithQuantityById(orderProduct.product_id),
+    ),
+  );
+
+  return orderProducts;
+}
+
 /**
  * gets all orders by user id and sorted it by creation data
  * @param Order[] - An array of Order objects.
@@ -187,12 +193,6 @@ export async function fetchCurrentOrdersByUser(): Promise<Order[]> {
   return data;
 }
 
-export async function updateOrderPickupId(orderId: number, pickupId: number) {
-  await supabase
-    .from('order')
-    .update({ pickup_time_id: pickupId })
-    .eq('id', orderId);
-}
 
 export async function updateCartPickupId(pickupId: number) {
   const user = await fetchUser();
@@ -201,39 +201,4 @@ export async function updateCartPickupId(pickupId: number) {
     .from('order')
     .update({ pickup_time_id: pickupId })
     .eq('id', cartId);
-}
-
-export async function fetchProductWithQuantityById(
-  productId: number,
-): Promise<ProductWithQuantity> {
-  const { data: orderProduct, error } = await supabase
-    .from('product')
-    .select('*')
-    .eq('id', productId)
-    .single();
-  if (error) {
-    throw new Error(`Error fetching order product: ${error.message}`);
-  }
-  return orderProduct;
-}
-
-export async function fetchOrderProductsbyOrderId(
-  orderId: number,
-): Promise<ProductWithQuantity[]> {
-  const order = await getOrderById(orderId);
-  const orderProductIds = order.order_product_id_array;
-
-  const newOrderProducts = await Promise.all(
-    orderProductIds.map(orderProductId =>
-      fetchOrderProductById(orderProductId),
-    ),
-  );
-  console.log(newOrderProducts);
-  const orderProducts = await Promise.all(
-    newOrderProducts.map(async orderProduct =>
-      fetchProductWithQuantityById(orderProduct.product_id),
-    ),
-  );
-
-  return orderProducts;
-}   
+}
diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -19,8 +19,6 @@ import {
   InformationText,
 } from './styles';
 
-
-
 export default function App() {
   const [numberOfItems, setNumberOfItems] = useState(0);
   const [cart, setCart] = useState<ProductWithQuantity[]>([]);

diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx
@@ -1,10 +1,16 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { Heading1 } from '@/styles/fonts';
 import OrderDetailsWithProducts from '../../components/OrderHistory/OrderHistoryBox';
 import { fetchOrderIdsByUserIdSorted } from '../../api/supabase/queries/order_queries';
-import Footer from '../../components/FooterFolder/Footer';
-import { OrderHistoryContainer, OutterBox, NavBarMovedUP } from './styles';
+
+import {
+  OrderHistoryContainer,
+  OutterBox,
+  NavBarMovedUP,
+  Fullscreen,
+} from './styles';
 import BackButton from '../../components/BackButton/BackButton';
 
 function OrderHistory() {
@@ -20,11 +26,11 @@ function OrderHistory() {
   }, []);
 
   return (
-    <div>
+    <Fullscreen>
       <NavBarMovedUP />
       <OutterBox>
         <BackButton destination="./profileScreen" />
-        <h1>Order History</h1>
+        <Heading1>Order History</Heading1>
         <OrderHistoryContainer>
           {orderIds.length > 0 ? (
             orderIds.map((orderId: number) => (
@@ -35,8 +41,7 @@ function OrderHistory() {
           )}
         </OrderHistoryContainer>
       </OutterBox>
-      <Footer />
-    </div>
+    </Fullscreen>
   );
 }
 

diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts
@@ -43,3 +43,7 @@ export const OrderHistoryBox = styled.div`
   gap: 20px;
   overflow-y: auto;
 `;
+export const Fullscreen = styled.div`
+  width: 100%;
+  height: 100%;
+`;
diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx
@@ -56,7 +56,6 @@ export default function OrderPage() {
   const [orders, setOrders] = useState<ProductWithQuantity[]>([]);
   const searchParams = useSearchParams();
   const orderIDFromSearch = searchParams.get('orderID');
-  console.log(orderIDFromSearch);
   let currOrderId = 0;
   if (orderIDFromSearch !== null) {
     currOrderId = parseInt(orderIDFromSearch, 10);
@@ -66,16 +65,15 @@ export default function OrderPage() {
 
   const [order, setOrder] = useState<Order>();
 
-  async function fetchProducts() {
-    const data = (await fetchOrderProductsbyOrderId(
-      currOrderId,
-    )) as ProductWithQuantity[];
-    const currOrder = await getOrderById(currOrderId);
-    setOrders(data);
-    setOrder(currOrder);
-  }
-
   useEffect(() => {
+    async function fetchProducts() {
+      const data = (await fetchOrderProductsbyOrderId(
+        currOrderId,
+      )) as ProductWithQuantity[];
+      const currOrder = await getOrderById(currOrderId);
+      setOrders(data);
+      setOrder(currOrder);
+    }
     fetchProducts();
   }, []);
 

diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx
@@ -4,13 +4,13 @@
 import { ArrowLeft } from 'react-feather';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
 import { fetchCartItemsWithQuantity } from '@/api/supabase/queries/cart_queries';
-import { useState, useEffect, SetStateAction } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Normal700Text } from '@/styles/fonts';
+import { Normal700Text, Heading4Bold } from '@/styles/fonts';
 import { fetchNRecentPickupTimes } from '@/api/supabase/queries/pickup_queries';
 import { updateCartPickupId } from '@/api/supabase/queries/order_queries';
 import { Pickup, User, ProductWithQuantity } from '@/schema/schema';
-
+import NavBar from '../../components/NavBarFolder/NavBar';
 import {
   HeaderShiftLeft,
   OrderSummaryDiv,
@@ -20,7 +20,6 @@ import {
   WhiteBackgroundDiv,
   BackDiv,
   Backtext,
-  NavBarMovedUP,
   PageDiv,
   CheckoutButton,
   ItemSummaryDiv,
@@ -64,9 +63,8 @@ export default function Pickup() {
   const [Cart, setCart] = useState<ProductWithQuantity[]>([]);
   const router = useRouter();
   const [Time, setTimes] = useState<Pickup[]>([]);
-
   const [Profile, setProfile] = useState<User>();
-
+  const [selectedPickupIndex, setSelectedPickupIndex] = useState<number>(0);
   useEffect(() => {
     async function fetchProducts() {
       const data = await fetchCartItemsWithQuantity(); // change the function to grab the cartItems as products
@@ -88,43 +86,40 @@ export default function Pickup() {
     fetchUserData();
   }, []);
 
-  const [selectedPickupIndex, setSelectedPickupIndex] = useState(null);
-
-  const handleButtonClick = (index: SetStateAction<null>) => {
+  const handleButtonClick = (index: number) => {
     setSelectedPickupIndex(index);
   };
 
   return (
     <div>
-      <NavBarMovedUP />
-
+      <NavBar />
       <PageDiv>
         <ForceColumnDiv>
           <BackDiv onClick={() => router.push('/cart')}>
             <ArrowLeft />
             <Backtext>Back</Backtext>
           </BackDiv>
           <PickupContainer>
-            <Normal700Text style={{ marginBottom: '38px', fontSize: '40px' }}>
+            <Heading4Bold style={{ marginBottom: '38px', fontSize: '40px' }}>
               Pick Up
-            </Normal700Text>
-            <Normal700Text>Name</Normal700Text>
+            </Heading4Bold>
+            <Heading4Bold>Name</Heading4Bold>
             <PickupContent>
               {Profile?.first_name} {Profile?.last_name}
             </PickupContent>
-            <Normal700Text>Phone Number</Normal700Text>
+            <Heading4Bold>Phone Number</Heading4Bold>
             <PickupContent>{Profile?.phone_numbers}</PickupContent>
-            <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-              <Normal700Text>Pick Up Time</Normal700Text>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Heading4Bold>Time Slot</Heading4Bold>
               <Normal700Text>Pick Up times: 10:00 AM - 12:00 PM </Normal700Text>
             </div>
 
-            <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-              {Time.map((time, index) => (
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              {Time.map(time => (
                 <PickupTimeButton
-                  key={time.id} // Replace 'index' with a unique identifier from the 'time' object
-                  isSelected={selectedPickupIndex === index}
-                  onClick={() => handleButtonClick(index)}
+                  key={time.id}
+                  $isSelected={selectedPickupIndex === time.id}
+                  onClick={() => handleButtonClick(time.id)}
                 >
                   <div>
                     {String(
@@ -168,25 +163,13 @@ export default function Pickup() {
           </WhiteBackgroundDiv>
 
           <CheckoutButton
-            // TODO add the pick up ID to the order add the checkout feature that will clear the current users art and replace
-            // it with an empty cart convettying it to an order and then redirecting to the order
-            // confirmation page
-
             onClick={async () => {
-              // Add the pickup ID to the order
-              const pickupId =
-                selectedPickupIndex !== null
-                  ? Time[selectedPickupIndex]?.id
-                  : null;
-              if (pickupId) {
-                await updateCartPickupId(pickupId);
-
-                // Add your code here to update the order with the pickup ID
-                // For example:
-                // const updatedOrder = await updateOrderWithPickupId(orderId, pickupId);
-                // console.log(updatedOrder);
+              if (selectedPickupIndex !== 0) {
+                await updateCartPickupId(selectedPickupIndex);
+                router.push('/orderConfirmationPickUp');
+              } else {
+                // handle the case where they didn't select a time!
               }
-              router.push('/orderConfirmationPickUp');
             }}
           >
             Checkout

diff --git a/src/app/pickup/styles.ts b/src/app/pickup/styles.ts
@@ -29,8 +29,9 @@ export const PickupContent = styled.div`
   padding-left: 20px;
 `;
 
-export const PickupTimeButton = styled.button`
-  background: {COLORS.periwinkle};
+export const PickupTimeButton = styled.button<{ $isSelected?: boolean }>`
+  background: ${props =>
+    props.$isSelected ? COLORS.periwinkle : COLORS.lightGrey};
   height: 124px;
   width: 242px;
   margin-top: 20px;
@@ -156,6 +157,8 @@ export const LabelBox = styled.div`
 export const PageDiv = styled.div`
   display: flex;
   flex-flow: row;
+  width: 100%;
+  justify-content: space-around;
 `;
 
 export const OrderSummaryDiv = styled.div`