Remove Fulfill view and move fulfill buttons to prepare view

acmucsd · Apr 29, 2024 · f21f8f1 · f21f8f1
1 parent 3c4be9a
commit f21f8f1
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 193 deletions.
diff --git a/src/components/admin/store/PickupOrdersFulfillDisplay/index.tsx b/src/components/admin/store/PickupOrdersFulfillDisplay/index.tsx
diff --git a/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss b/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss
diff --git a/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss.d.ts b/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss.d.ts
diff --git a/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx b/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx
@@ -1,11 +1,19 @@
-import { Typography } from '@/components/common';
-import { PublicOrderItemWithQuantity, PublicOrderWithItems } from '@/lib/types/apiResponses';
-import { getOrderItemQuantities } from '@/lib/utils';
+import { Button, Typography } from '@/components/common';
+import { StoreAPI } from '@/lib/api';
+import {
+  PublicOrder,
+  PublicOrderItem,
+  PublicOrderItemWithQuantity,
+  PublicOrderWithItems,
+} from '@/lib/types/apiResponses';
+import { getOrderItemQuantities, reportError } from '@/lib/utils';
 import { useMemo } from 'react';
 import styles from './style.module.scss';
 
 interface PickupOrdersDisplayPrepareProps {
+  token: string;
   orders: PublicOrderWithItems[];
+  onOrderUpdate: (orders: PublicOrderWithItems[]) => void;
 }
 
 const itemToString = (item: PublicOrderItemWithQuantity): string => {
@@ -14,68 +22,103 @@ const itemToString = (item: PublicOrderItemWithQuantity): string => {
   return item.option.item.itemName;
 };
 
-const PickupOrdersPrepareDisplay = ({ orders }: PickupOrdersDisplayPrepareProps) => {
+const PickupOrdersPrepareDisplay = ({
+  token,
+  orders,
+  onOrderUpdate,
+}: PickupOrdersDisplayPrepareProps) => {
   const itemBreakdown: PublicOrderItemWithQuantity[] = useMemo(() => {
     // Concatenate all items together into one large order to display the item breakdown.
     const allItems = orders.flatMap(a => a.items);
     return getOrderItemQuantities(allItems);
   }, [orders]);
 
+  const fulfillItems = async (order: PublicOrder, items: PublicOrderItem[]): Promise<void> => {
+    try {
+      const newOrder = await StoreAPI.fulfillOrderPickup(token, order.uuid, items);
+      onOrderUpdate(
+        orders.map(order => (order.uuid === newOrder.uuid ? { ...order, ...newOrder } : order))
+      );
+    } catch (error: unknown) {
+      reportError('Failed to fulfill order', error);
+    }
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.breakdown}>
         <Typography variant="h3/bold">Item Breakdown</Typography>
         <table className={styles.table}>
-          <th>
-            <Typography variant="h4/bold">Quantity</Typography>
-          </th>
-          <th>
-            <Typography variant="h4/bold">Item</Typography>
-          </th>
-          {itemBreakdown.map(item => {
-            return (
-              <tr key={item.uuid}>
-                <td>
-                  <Typography variant="h5/regular">{item.quantity}</Typography>
-                </td>
-                <td>
-                  <Typography variant="h5/regular">{itemToString(item)}</Typography>
-                </td>
-              </tr>
-            );
-          })}
+          <thead>
+            <tr>
+              <th>
+                <Typography variant="h4/bold">Quantity</Typography>
+              </th>
+              <th>
+                <Typography variant="h4/bold">Item</Typography>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {itemBreakdown.map(item => {
+              return (
+                <tr key={item.uuid}>
+                  <td>
+                    <Typography variant="h5/regular">{item.quantity}</Typography>
+                  </td>
+                  <td>
+                    <Typography variant="h5/regular">{itemToString(item)}</Typography>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
         </table>
       </div>
       <div className={styles.breakdown}>
         <Typography variant="h3/bold">User Breakdown</Typography>
         <table className={styles.table}>
-          <th>
-            <Typography variant="h4/bold">User</Typography>
-          </th>
-          <th>
-            <Typography variant="h4/bold">Items</Typography>
-          </th>
-          {orders.map(order => {
-            const itemQuantities = getOrderItemQuantities(order.items);
-            return (
-              <tr key={order.uuid}>
-                <td>
-                  <Typography variant="h5/regular">{`${order.user.firstName} ${order.user.lastName}`}</Typography>
-                </td>
-                <td>
-                  <ul className={styles.itemList}>
-                    {itemQuantities.map(item => (
-                      <li key={item.uuid}>
-                        <Typography variant="h5/regular">{`${item.quantity} x ${itemToString(
-                          item
-                        )}`}</Typography>
-                      </li>
-                    ))}
-                  </ul>
-                </td>
-              </tr>
-            );
-          })}
+          <thead>
+            <tr>
+              <th>
+                <Typography variant="h4/bold">User</Typography>
+              </th>
+              <th>
+                <Typography variant="h4/bold">Items</Typography>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {orders.map(order => {
+              const itemQuantities = getOrderItemQuantities(order.items);
+              return (
+                <tr key={order.uuid}>
+                  <td>
+                    <Typography variant="h5/regular">{`${order.user.firstName} ${order.user.lastName}`}</Typography>
+                    {order.items.length > 1 ? (
+                      <Button size="small" onClick={() => fulfillItems(order, order.items)}>
+                        Fulfill All
+                      </Button>
+                    ) : null}
+                  </td>
+                  <td>
+                    <ul className={styles.itemList}>
+                      {itemQuantities.map(item => (
+                        <li key={item.uuid}>
+                          <Typography variant="h5/regular">{`${item.quantity} x ${itemToString(
+                            item
+                          )}`}</Typography>
+                          <Button size="small" onClick={() => fulfillItems(order, [item])}>
+                            Fulfill
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
         </table>
       </div>
     </div>

diff --git a/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss b/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss
@@ -27,7 +27,7 @@
     padding: 1.5rem;
   }
 
-  tr {
+  tbody tr {
     border-top: 1px solid var(--theme-accent-line-2);
   }
 
@@ -38,4 +38,11 @@
 
 .itemList {
   list-style-type: disc;
+
+  li {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
 }
diff --git a/src/components/admin/store/index.tsx b/src/components/admin/store/index.tsx
@@ -3,6 +3,5 @@ import { PickupEventStatus } from '@/components/admin/store/PickupEventCard';
 export { default as CollectionDetailsForm } from './DetailsForm/CollectionDetailsForm';
 export { default as ItemDetailsForm } from './DetailsForm/ItemDetailsForm';
 export { default as PickupEventCard } from './PickupEventCard';
-export { default as PickupOrdersFulfillDisplay } from './PickupOrdersFulfillDisplay';
 export { default as PickupOrdersPrepareDisplay } from './PickupOrdersPrepareDisplay';
 export { PickupEventStatus };
diff --git a/src/pages/admin/store/pickup/[uuid].tsx b/src/pages/admin/store/pickup/[uuid].tsx
@@ -2,11 +2,7 @@ import {
   cancelPickupEvent,
   completePickupEvent,
 } from '@/components/admin/event/AdminPickupEvent/AdminPickupEventForm';
-import {
-  PickupEventStatus,
-  PickupOrdersFulfillDisplay,
-  PickupOrdersPrepareDisplay,
-} from '@/components/admin/store';
+import { PickupEventStatus, PickupOrdersPrepareDisplay } from '@/components/admin/store';
 import { Button, Typography } from '@/components/common';
 import { EventCard } from '@/components/events';
 import { StoreAPI } from '@/lib/api';
@@ -39,16 +35,6 @@ const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPagePr
     orders: initOrders,
   } = pickupEvent;
   const [orders, setOrders] = useState(initOrders);
-  const [ordersView, setOrdersView] = useState<'fulfill' | 'prepare'>('fulfill');
-
-  let ordersComponent;
-  if (orders && orders.length > 0)
-    ordersComponent =
-      ordersView === 'fulfill' ? (
-        <PickupOrdersFulfillDisplay orders={orders} onOrderUpdate={setOrders} token={token} />
-      ) : (
-        <PickupOrdersPrepareDisplay orders={orders} />
-      );
 
   return (
     <div className={styles.page}>
@@ -102,26 +88,11 @@ const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPagePr
           </div>
         </div>
         <div className={styles.orders}>
-          <div className={styles.header}>
-            <Typography variant="h1/bold">Orders</Typography>
-            <div className={styles.displayButtons}>
-              <button
-                type="button"
-                className={`${styles.displayButton} ${ordersView === 'fulfill' && styles.active}`}
-                onClick={() => setOrdersView('fulfill')}
-              >
-                <Typography variant="h5/bold">Fulfill</Typography>
-              </button>
-              <button
-                type="button"
-                className={`${styles.displayButton} ${ordersView === 'prepare' && styles.active}`}
-                onClick={() => setOrdersView('prepare')}
-              >
-                <Typography variant="h5/bold">Prepare</Typography>
-              </button>
-            </div>
-          </div>
-          {ordersComponent || 'No orders placed.'}
+          {orders && orders.length > 0 ? (
+            <PickupOrdersPrepareDisplay orders={orders} onOrderUpdate={setOrders} token={token} />
+          ) : (
+            'No orders placed.'
+          )}
         </div>
       </div>
     </div>

diff --git a/src/styles/pages/StorePickupEventDetailsPage.module.scss b/src/styles/pages/StorePickupEventDetailsPage.module.scss
@@ -51,12 +51,6 @@
       flex-direction: column;
       gap: 0.5rem;
 
-      .header {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
       .displayButtons {
         border-radius: 1rem;
         box-shadow: 0 0 4px var(--theme-accent-line-1-transparent);

diff --git a/src/styles/pages/StorePickupEventDetailsPage.module.scss.d.ts b/src/styles/pages/StorePickupEventDetailsPage.module.scss.d.ts
@@ -5,7 +5,6 @@ export type Styles = {
   description: string;
   displayButton: string;
   displayButtons: string;
-  header: string;
   noEvent: string;
   orders: string;
   page: string;