diff --git a/src/components/admin/store/PickupOrdersFulfillDisplay/index.tsx b/src/components/admin/store/PickupOrdersFulfillDisplay/index.tsx
deleted file mode 100644
index 9a63a731..00000000
--- a/src/components/admin/store/PickupOrdersFulfillDisplay/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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 = ({
- token,
- orders,
- onOrderUpdate,
-}: PickupOrdersFulfillDisplayProps) => {
- return (
-
- {orders.map(order => (
-
- {`${order.user.firstName} ${order.user.lastName} (${order.status})`}
- {order.status === OrderStatus.PLACED ||
- order.status === OrderStatus.PARTIALLY_FULFILLED ? (
-
- ) : null}
-
- ))}
-
- );
-};
-
-export default PickupOrdersFulfillDisplay;
diff --git a/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss b/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss
deleted file mode 100644
index de18d2d3..00000000
--- a/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.container {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- gap: 4rem;
-
- .breakdown {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
-}
-
-.table {
- background-color: var(--theme-surface-1);
- border-radius: 1rem;
- box-shadow: 0 0 4px var(--theme-accent-line-1-transparent);
- padding: 1rem;
- width: fit-content;
-
- th {
- padding: 1rem 1.5rem;
- text-align: left;
- }
-
- td {
- padding: 1.5rem;
- }
-
- tr {
- border-top: 1px solid var(--theme-accent-line-2);
- }
-
- tr:last-child td:first-child {
- border-bottom-left-radius: 1rem;
- }
-}
diff --git a/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss.d.ts b/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss.d.ts
deleted file mode 100644
index e678aeb8..00000000
--- a/src/components/admin/store/PickupOrdersFulfillDisplay/style.module.scss.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Styles = {
- breakdown: string;
- container: string;
- table: string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
diff --git a/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx b/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx
index 7848cdf7..3c346c17 100644
--- 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 => {
+ 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 (
Item Breakdown
-
- Quantity
- |
-
- Item
- |
- {itemBreakdown.map(item => {
- return (
-
-
- {item.quantity}
- |
-
- {itemToString(item)}
- |
-
- );
- })}
+
+
+
+ Quantity
+ |
+
+ Item
+ |
+
+
+
+ {itemBreakdown.map(item => {
+ return (
+
+
+ {item.quantity}
+ |
+
+ {itemToString(item)}
+ |
+
+ );
+ })}
+
User Breakdown
-
- User
- |
-
- Items
- |
- {orders.map(order => {
- const itemQuantities = getOrderItemQuantities(order.items);
- return (
-
-
- {`${order.user.firstName} ${order.user.lastName}`}
- |
-
-
- {itemQuantities.map(item => (
- -
- {`${item.quantity} x ${itemToString(
- item
- )}`}
-
- ))}
-
- |
-
- );
- })}
+
+
+
+ User
+ |
+
+ Items
+ |
+
+
+
+ {orders.map(order => {
+ const itemQuantities = getOrderItemQuantities(order.items);
+ return (
+
+
+ {`${order.user.firstName} ${order.user.lastName}`}
+ {order.items.length > 1 ? (
+
+ ) : null}
+ |
+
+
+ {itemQuantities.map(item => (
+ -
+ {`${item.quantity} x ${itemToString(
+ item
+ )}`}
+
+
+ ))}
+
+ |
+
+ );
+ })}
+
diff --git a/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss b/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss
index 86399ed4..8cffc6aa 100644
--- 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
index d1cd434b..c40d9453 100644
--- 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
index 852fd693..5ea4b377 100644
--- 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' ? (
-
- ) : (
-
- );
return (
@@ -102,26 +88,11 @@ const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPagePr
-
-
Orders
-
-
-
-
-
- {ordersComponent || 'No orders placed.'}
+ {orders && orders.length > 0 ? (
+
+ ) : (
+ 'No orders placed.'
+ )}
diff --git a/src/styles/pages/StorePickupEventDetailsPage.module.scss b/src/styles/pages/StorePickupEventDetailsPage.module.scss
index 4b576698..6a8e2c47 100644
--- 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
index 807de6f0..cacb4d7d 100644
--- 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;