hide fulfill button if pickup event hasnt started yet

acmucsd · Apr 29, 2024 · 85e3484 · 85e3484
1 parent 6fd90be
commit 85e3484
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx b/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx
@@ -14,6 +14,7 @@ import styles from './style.module.scss';
 
 interface PickupOrdersDisplayPrepareProps {
   token: string;
+  canFulfill: boolean;
   orders: PublicOrderWithItems[];
   onOrderUpdate: (orders: PublicOrderWithItems[]) => void;
 }
@@ -26,6 +27,7 @@ const itemToString = (item: PublicOrderItemWithQuantity): string => {
 
 const PickupOrdersPrepareDisplay = ({
   token,
+  canFulfill,
   orders,
   onOrderUpdate,
 }: PickupOrdersDisplayPrepareProps) => {
@@ -92,16 +94,17 @@ const PickupOrdersPrepareDisplay = ({
           </thead>
           <tbody>
             {orders.map(order => {
-              const canFulfill =
-                order.status === OrderStatus.PLACED ||
-                order.status === OrderStatus.PARTIALLY_FULFILLED;
+              const showFulfill =
+                canFulfill &&
+                (order.status === OrderStatus.PLACED ||
+                  order.status === OrderStatus.PARTIALLY_FULFILLED);
               const itemQuantities = getOrderItemQuantities(order.items);
               return (
                 <tr key={order.uuid}>
                   <td>
                     <Typography variant="h5/regular">{`${order.user.firstName} ${order.user.lastName}`}</Typography>
                     <OrderStatusIndicator orderStatus={order.status} />
-                    {canFulfill && itemQuantities.length > 1 ? (
+                    {showFulfill && itemQuantities.length > 1 ? (
                       <Button
                         size="small"
                         onClick={() =>
@@ -130,7 +133,7 @@ const PickupOrdersPrepareDisplay = ({
                             <Typography variant="h5/regular">{`${item.quantity} x ${itemToString(
                               item
                             )}`}</Typography>
-                            {canFulfill ? fulfillButton : null}
+                            {showFulfill ? fulfillButton : null}
                           </li>
                         );
                       })}

diff --git a/src/pages/admin/store/pickup/[uuid].tsx b/src/pages/admin/store/pickup/[uuid].tsx
@@ -15,7 +15,7 @@ import { formatEventDate } from '@/lib/utils';
 import styles from '@/styles/pages/StorePickupEventDetailsPage.module.scss';
 import Link from 'next/link';
 import router from 'next/router';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 interface PickupEventDetailsPageProps {
   pickupEvent: PublicOrderPickupEvent;
@@ -36,6 +36,8 @@ const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPagePr
   } = pickupEvent;
   const [orders, setOrders] = useState(initOrders);
 
+  const started = useMemo(() => Date.now() >= new Date(start).getTime(), [start]);
+
   return (
     <div className={styles.page}>
       <Link href={config.admin.store.pickup} className={styles.back}>
@@ -89,7 +91,12 @@ const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPagePr
         </div>
         <div className={styles.orders}>
           {orders && orders.length > 0 ? (
-            <PickupOrdersPrepareDisplay orders={orders} onOrderUpdate={setOrders} token={token} />
+            <PickupOrdersPrepareDisplay
+              orders={orders}
+              onOrderUpdate={setOrders}
+              token={token}
+              canFulfill={status === OrderPickupEventStatus.ACTIVE && started}
+            />
           ) : (
             'No orders placed.'
           )}