Finished order history section of profile page

calblueprint · Mar 19, 2024 · 9e8f121 · 9e8f121
1 parent f88b69f
commit 9e8f121
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 30 deletions.
diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -8,19 +8,15 @@ import {
   totalNumberOfItemsInCart,
 } from '../../api/supabase/queries/cart_queries';
 import { Normal700Text } from '../../styles/fonts';
-import { fetchRecentOrderProducts } from '../../api/supabase/queries/order_queries';
-import { OrderProduct, ProductWithQuantity } from '../../schema/schema';
+import { ProductWithQuantity } from '../../schema/schema';
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
-import ItemRows from './itemRows';
 import NavBar from '../../components/NavBarFolder/NavBar';
 import {
   DeliveryContainer,
   OrderContainer,
-  OrderSummaryText,
   OrderButton,
   InformationContainer,
   InformationText,
-  QtyText,
 } from './styles';
 
 export default function App() {

diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx
@@ -16,12 +16,10 @@ import NavBar from '../../components/NavBarFolder/NavBar';
 import {
   FavoriteDiv,
   OutterFavoriteDiv,
-  HeaderText,
   OutterBox,
   Label,
   LabelBox,
   ScrollDiv,
-  AddressText,
   DateText,
   CenterBox,
   AddressDiv,

diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -16,14 +16,11 @@ import {
   FavoriteDiv,
   ColDiv,
   OutterFavoriteDiv,
-  HeaderText,
   OutterBox,
   Label,
   LabelBox,
   ScrollDiv,
-  AddressText,
   DateText,
-  PickUpText,
   CenterBox,
   AddressDiv,
 } from './styles';

diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx
@@ -44,7 +44,6 @@ export default function Pickup() {
     async function fetchTimes() {
       const data = await fetchRecentPickupTimes(); // change the function to grab the cartItems as products
       setTimes(data);
-      console.log(Time);
     }
     fetchProducts();
     fetchTimes();

diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx
@@ -31,6 +31,7 @@ import {
   fetchOrderProductById,
   fetchProductWithQuantityById,
 } from '@/api/supabase/queries/order_queries';
+import { Check, CheckCircle, X } from 'react-feather';
 import BackButton from '../../components/BackButton/BackButton';
 import {
   LogOutButton,
@@ -104,7 +105,11 @@ function OrderHistorySection(props: {
   const [firstOrderProducts, setFirstOrderProducts] = useState<
     ProductWithQuantity[]
   >([]);
+  const [fD, setFormattedDate] = useState<string>('');
 
+
+
+
   useEffect(() => {
     async function fetchFirstOrderProducts() {
       if (Orders.length > 0) {
@@ -129,12 +134,36 @@ function OrderHistorySection(props: {
         );
 
         setFirstOrderProducts(productArray);
+
+        const timestamp = firstOrder.created_at;
+        const date = new Date(timestamp);
+        const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' };
+        const formattedDate = date.toLocaleDateString('en-US', options);
+        setFormattedDate(formattedDate);
       }
     }
     fetchFirstOrderProducts();
   }, [Orders]);
-
+  
   if (firstOrderProducts.length > 0) {
+    let backgroundColor = 'transparent';
+    if (Orders[0].status === 'Submitted') {
+      backgroundColor = '#CEE8BE';
+    } else if (Orders[0].status === 'Rejected') {
+      backgroundColor = '#FFDDDD';
+    } else if (Orders[0].status === 'Completed') {
+      backgroundColor = '#C7DDFF';
+    }
+    let icon;
+    if (Orders[0].status === 'Submitted') {
+      icon = <CheckCircle/>
+    } else if (Orders[0].status === 'Rejected') {
+      icon = <X/>
+    } else if (Orders[0].status === 'Completed'){
+      icon = <Check/>
+    } else {
+      icon = null;
+    }
     return (
       <main>
         <OrderHistory>
@@ -160,24 +189,33 @@ function OrderHistorySection(props: {
                 marginTop: '5px',
               }}
             >
-              {Orders[0].created_at}
+              {fD}
             </Body2>
-            <Body2Bold
+            <div
               style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 'fit-content',
+                padding: '5px 10px',
+                borderRadius: '20px', // adjust the border radius to make it more oval-shaped
+                background: backgroundColor,
                 marginTop: '20px',
-                marginBottom: '30px',
+                marginBottom: '15px',
               }}
-            >
-              {Orders[0].status}
-            </Body2Bold>
+        >
+          {icon}
+          <Body2Bold style = {{marginLeft: "13px"}}>
+            {Orders[0].status}
+          </Body2Bold>
+        </div>
             <MostRecentOrder>
               {firstOrderProducts.map(product => (
                 <div
                   key={product.id}
                   style={{
-                    width: '85px',
-                    height: '85px',
-                    backgroundColor: 'grey',
+                    width: '102px',
+                    height: '102px',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -187,8 +225,8 @@ function OrderHistorySection(props: {
                     src={product.photo}
                     alt={product.name}
                     style={{
-                      width: '75px',
-                      height: '75px',
+                      width: '102px',
+                      height: '102px',
                     }}
                   />
                 </div>
@@ -233,7 +271,7 @@ function AccountDetailSectionDelivery(props: { user: User }) {
           <Body2Bold>Email</Body2Bold>
         </HeadingSpacing>
         <TextSpacing>
-          <Body1>{user?.email}</Body1>
+          <Body3>{user?.email}</Body3>
         </TextSpacing>
         <HeadingSpacing>
           <Body2>Name</Body2>

diff --git a/src/schema/schema.ts b/src/schema/schema.ts
@@ -16,12 +16,9 @@ export type User = {
 };
 
 export enum OrderStatus {
-  ApprovalInProgress = 'Approval in Progress',
-  OrderApproved = 'Order Approved',
-  OrderProcessing = 'Order Processing',
-  ReadyForPickup = 'Ready for Pickup',
-  OutForDelivery = 'Out for Delivery',
-  Completed = 'Completed',
+  Submitted = "Submitted",
+  Completed = "Completed",
+  Rejected = "Rejected",
 }
 
 export type Order = {