fulfill

src/components/admin/store/PickupOrder/index.tsx

@@ -0,0 +1,90 @@
+import { Button, Typography } from '@/components/common';
+import { OrderStatusIndicator } from '@/components/store';
+import { StoreAPI } from '@/lib/api';
+import { UUID } from '@/lib/types';
+import { PublicOrderWithItems } from '@/lib/types/apiResponses';
+import { OrderStatus } from '@/lib/types/enums';
+import { getOrderItemQuantities, itemToString, reportError } from '@/lib/utils';
+import { useState } from 'react';
+import styles from './style.module.scss';
+
+interface PickupOrderProps {
+  token: string;
+  canFulfill: boolean;
+  order: PublicOrderWithItems;
+  onOrderUpdate: (orders: PublicOrderWithItems) => void;
+}
+
+const PickupOrder = ({ token, canFulfill, order, onOrderUpdate }: PickupOrderProps) => {
+  const itemQuantities = getOrderItemQuantities(order.items);
+  const [unselected, setUnselected] = useState(new Set<UUID>());
+
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Typography variant="h5/regular">{`${order.user.firstName} ${order.user.lastName}`}</Typography>
+        <OrderStatusIndicator orderStatus={order.status} />
+        {canFulfill ? (
+          <Button
+            size="small"
+            onClick={async () => {
+              try {
+                const items = order.items.filter(item => !unselected.has(item.uuid));
+                const newOrder = await StoreAPI.fulfillOrderPickup(token, order.uuid, items);
+                const itemUuids = items.map(item => item.uuid);
+                onOrderUpdate({
+                  ...newOrder,
+                  items: order.items.map(item =>
+                    itemUuids.includes(item.uuid) ? { ...item, fulfilled: true } : item
+                  ),
+                });
+              } catch (error: unknown) {
+                reportError('Failed to fulfill order', error);
+              }
+            }}
+          >
+            Fulfill {unselected.size > 0 ? 'Selected' : 'All'}
+          </Button>
+        ) : null}
+      </td>
+      <td>
+        <ul className={styles.itemList}>
+          {itemQuantities.map(item => {
+            return (
+              <li key={item.uuids[0]}>
+                <Typography variant="h5/regular">
+                  {`${item.quantity} x ${itemToString(item)}`}{' '}
+                  {(order.status === OrderStatus.FULFILLED ||
+                    order.status === OrderStatus.PARTIALLY_FULFILLED) &&
+                  !item.fulfilled ? (
+                    <span className={styles.notFulfilled}>Not fulfilled</span>
+                  ) : null}
+                </Typography>
+                {canFulfill
+                  ? item.uuids.map(uuid => (
+                      <input
+                        key={uuid}
+                        type="checkbox"
+                        checked={!unselected.has(uuid)}
+                        onChange={e => {
+                          const copy = new Set(unselected);
+                          if (e.currentTarget.checked) {
+                            copy.delete(uuid);
+                          } else {
+                            copy.add(uuid);
+                          }
+                          setUnselected(copy);
+                        }}
+                      />
+                    ))
+                  : null}
+              </li>
+            );
+          })}
+        </ul>
+      </td>
+    </tr>
+  );
+};
+
+export default PickupOrder;

src/components/admin/store/PickupOrder/style.module.scss

@@ -0,0 +1,24 @@
+@use 'src/styles/vars.scss' as vars;
+
+.row {
+  border-top: 1px solid var(--theme-accent-line-2);
+
+  td {
+    padding: 1.5rem;
+  }
+
+  .itemList {
+    list-style-type: disc;
+
+    li {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .notFulfilled {
+        color: vars.$red;
+      }
+    }
+  }
+}

src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss.d.ts → src/components/admin/store/PickupOrder/style.module.scss.d.ts

@@ -1,7 +1,7 @@
 export type Styles = {
-  breakdown: string;
-  container: string;
-  table: string;
+  itemList: string;
+  notFulfilled: string;
+  row: string;
 };
 
 export type ClassNames = keyof Styles;

src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx

@@ -1,21 +1,25 @@
+import PickupOrder from '@/components/admin/store/PickupOrder';
 import { Typography } from '@/components/common';
-import { PublicOrderItemWithQuantity, PublicOrderWithItems } from '@/lib/types/apiResponses';
-import { getOrderItemQuantities } from '@/lib/utils';
+import { PublicOrderWithItems } from '@/lib/types/apiResponses';
+import { OrderStatus } from '@/lib/types/enums';
+import { OrderItemQuantity, getOrderItemQuantities, itemToString } from '@/lib/utils';
 import { useMemo } from 'react';
 import styles from './style.module.scss';
 
 interface PickupOrdersDisplayPrepareProps {
+  token: string;
+  canFulfill: boolean;
   orders: PublicOrderWithItems[];
+  onOrderUpdate: (orders: PublicOrderWithItems[]) => void;
 }
 
-const itemToString = (item: PublicOrderItemWithQuantity): string => {
-  if (item.option.metadata !== null)
-    return `${item.option.item.itemName} (${item.option.metadata.type}: ${item.option.metadata.value})`;
-  return item.option.item.itemName;
-};
-
-const PickupOrdersPrepareDisplay = ({ orders }: PickupOrdersDisplayPrepareProps) => {
-  const itemBreakdown: PublicOrderItemWithQuantity[] = useMemo(() => {
+const PickupOrdersPrepareDisplay = ({
+  token,
+  canFulfill,
+  orders,
+  onOrderUpdate,
+}: PickupOrdersDisplayPrepareProps) => {
+  const itemBreakdown: OrderItemQuantity[] = useMemo(() => {
     // Concatenate all items together into one large order to display the item breakdown.
     const allItems = orders.flatMap(a => a.items);
     return getOrderItemQuantities(allItems);
@@ -26,56 +30,63 @@ const PickupOrdersPrepareDisplay = ({ orders }: PickupOrdersDisplayPrepareProps)
       <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.uuids[0]}>
+                  <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 => (
+              <PickupOrder
+                canFulfill={canFulfill && order.status === OrderStatus.PLACED}
+                order={order}
+                onOrderUpdate={newOrder =>
+                  onOrderUpdate(
+                    orders.map(
+                      (order): PublicOrderWithItems =>
+                        order.uuid === newOrder.uuid ? newOrder : order
+                    )
+                  )
+                }
+                token={token}
+                key={order.uuid}
+              />
+            ))}
+          </tbody>
         </table>
       </div>
     </div>

src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss

@@ -27,15 +27,7 @@
     padding: 1.5rem;
   }
 
-  tr {
+  tbody tr {
     border-top: 1px solid var(--theme-accent-line-2);
   }
-
-  tr:last-child td:first-child {
-    border-bottom-left-radius: 1rem;
-  }
-}
-
-.itemList {
-  list-style-type: disc;
 }

src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss.d.ts

@@ -1,7 +1,6 @@
 export type Styles = {
   breakdown: string;
   container: string;
-  itemList: string;
   table: string;
 };
 

src/components/admin/store/index.tsx

@@ -3,6 +3,6 @@ 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 PickupOrder } from './PickupOrder';
 export { default as PickupOrdersPrepareDisplay } from './PickupOrdersPrepareDisplay';
 export { PickupEventStatus };