Add fulfill button

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

@@ -1,16 +1,48 @@
-import { Typography } from '@/components/common';
+import { Button, Typography } from '@/components/common';
+import { StoreAPI } from '@/lib/api';
 import { PublicOrderWithItems } from '@/lib/types/apiResponses';
+import { OrderStatus } from '@/lib/types/enums';
+import { reportError } from '@/lib/utils';
 
 interface PickupOrdersFulfillDisplayProps {
+  token: string;
   orders: PublicOrderWithItems[];
+  onOrderUpdate: (orders: PublicOrderWithItems[]) => void;
 }
 
-const PickupOrdersFulfillDisplay = ({ orders }: PickupOrdersFulfillDisplayProps) => {
+const PickupOrdersFulfillDisplay = ({
+  token,
+  orders,
+  onOrderUpdate,
+}: PickupOrdersFulfillDisplayProps) => {
   return (
     <div>
       {orders.map(order => (
         <div key={order.uuid}>
           <Typography variant="h3/regular">{`${order.user.firstName} ${order.user.lastName} (${order.status})`}</Typography>
+          {order.status === OrderStatus.PLACED ||
+          order.status === OrderStatus.PARTIALLY_FULFILLED ? (
+            <Button
+              onClick={async () => {
+                try {
+                  const newOrder = await StoreAPI.fulfillOrderPickup(
+                    token,
+                    order.uuid,
+                    order.items
+                  );
+                  onOrderUpdate(
+                    orders.map(order =>
+                      order.uuid === newOrder.uuid ? { ...order, ...newOrder } : order
+                    )
+                  );
+                } catch (error: unknown) {
+                  reportError('Failed to fulfill order', error);
+                }
+              }}
+            >
+              Fulfill
+            </Button>
+          ) : null}
         </div>
       ))}
     </div>

src/lib/api/StoreAPI.ts

@@ -6,11 +6,13 @@ import {
   CreateMerchItemRequest,
   EditMerchCollectionRequest,
   EditMerchItemRequest,
+  FulfillMerchOrderRequest,
   MerchCollection,
   MerchCollectionEdit,
   MerchItem,
   MerchItemEdit,
   MerchItemOption,
+  OrderItemFulfillmentUpdate,
   PlaceMerchOrderRequest,
   RescheduleOrderPickupRequest,
 } from '@/lib/types/apiRequests';
@@ -25,6 +27,7 @@ import type {
   DeleteMerchItemResponse,
   EditMerchCollectionResponse,
   EditMerchItemResponse,
+  FulfillMerchOrderResponse,
   GetAllMerchCollectionsResponse,
   GetMerchOrdersResponse,
   GetOneMerchCollectionResponse,
@@ -429,6 +432,24 @@ export const getPastOrderPickupEvents = async (
   return response.data.pickupEvents;
 };
 
+export const fulfillOrderPickup = async (
+  token: string,
+  order: UUID,
+  items: OrderItemFulfillmentUpdate[]
+): Promise<PublicOrder> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.store.order}/${order}/fulfill`;
+
+  const requestBody: FulfillMerchOrderRequest = { items };
+
+  const response = await axios.post<FulfillMerchOrderResponse>(requestUrl, requestBody, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return response.data.order;
+};
+
 export const rescheduleOrderPickup = async (
   token: string,
   order: string,

src/pages/admin/store/pickup/[uuid].tsx

@@ -27,15 +27,25 @@ interface PickupEventDetailsPageProps {
 }
 
 const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPageProps) => {
-  const { uuid, status, title, start, end, orderLimit, description, linkedEvent, orders } =
-    pickupEvent;
+  const {
+    uuid,
+    status,
+    title,
+    start,
+    end,
+    orderLimit,
+    description,
+    linkedEvent,
+    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} />
+        <PickupOrdersFulfillDisplay orders={orders} onOrderUpdate={setOrders} token={token} />
       ) : (
         <PickupOrdersPrepareDisplay orders={orders} />
       );