Merge branch 'main' into chaitya/admin-dropdown

src/components/admin/event/EventDetailsForm/index.tsx

@@ -38,6 +38,7 @@ const EventDetailsForm = (props: IProps) => {
     cover: defaultData?.cover,
     uuid: defaultData?.uuid,
     eventLink: defaultData?.eventLink,
+    foodItems: defaultData?.foodItems,
   };
 
   const {
@@ -271,7 +272,12 @@ const EventDetailsForm = (props: IProps) => {
           />
         </DetailsFormItem>
 
-        <label htmlFor="description">Event Link</label>
+        <label htmlFor="foodItems">Food (if A.S. Funded)</label>
+        <DetailsFormItem error={errors.foodItems?.message}>
+          <input type="text" id="foodItems" {...register('foodItems')} />
+        </DetailsFormItem>
+
+        <label htmlFor="eventLink">Event Link</label>
         <DetailsFormItem error={errors.eventLink?.message}>
           <input type="text" id="eventLink" {...register('eventLink')} />
         </DetailsFormItem>

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

@@ -0,0 +1,102 @@
+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 [selected, setSelected] = useState(new Set<UUID>());
+
+  const handleFulfillOrder = async () => {
+    try {
+      const items = order.items.filter(item => selected.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);
+    }
+  };
+
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Typography variant="h5/regular">
+          {order.user.firstName} {order.user.lastName}
+        </Typography>
+        <OrderStatusIndicator orderStatus={order.status} />
+      </td>
+      <td>
+        <ul className={styles.itemList}>
+          {itemQuantities.map(item => {
+            let badge = null;
+            if (item.fulfilled) {
+              badge = (
+                <span className={styles.fulfilled} title="Fulfilled">
+                  ✅
+                </span>
+              );
+            } else if (
+              order.status === OrderStatus.FULFILLED ||
+              order.status === OrderStatus.PARTIALLY_FULFILLED
+            ) {
+              badge = (
+                <span className={styles.notFulfilled} title="Not fulfilled">
+                  ❌
+                </span>
+              );
+            }
+            return (
+              <li key={item.uuids[0]}>
+                <label>
+                  {canFulfill && !item.fulfilled ? (
+                    <input
+                      type="checkbox"
+                      defaultChecked={false}
+                      onChange={e => {
+                        setSelected(
+                          new Set(
+                            e.currentTarget.checked
+                              ? [...Array.from(selected), ...item.uuids]
+                              : Array.from(selected).filter(uuid => !item.uuids.includes(uuid))
+                          )
+                        );
+                      }}
+                    />
+                  ) : null}
+                  <Typography variant="h5/regular" component="span">
+                    {item.quantity} x {itemToString(item)} {badge}
+                  </Typography>
+                </label>
+              </li>
+            );
+          })}
+        </ul>
+        {canFulfill ? (
+          <Button size="small" onClick={handleFulfillOrder}>
+            Fulfill {selected.size} item{selected.size === 1 ? '' : 's'}
+          </Button>
+        ) : null}
+      </td>
+    </tr>
+  );
+};
+
+export default PickupOrder;

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

@@ -0,0 +1,37 @@
+@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;
+    margin-bottom: 1rem;
+
+    li {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      word-break: break-word;
+
+      .notFulfilled {
+        color: vars.$red;
+      }
+
+      .fulfilled {
+        color: vars.$green-300;
+      }
+
+      [type='checkbox'] {
+        cursor: pointer;
+        height: 1rem;
+        margin-right: 5px;
+        width: 1rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+export type Styles = {
+  fulfilled: string;
+  itemList: string;
+  notFulfilled: string;
+  row: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;