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 - - - {itemBreakdown.map(item => { - return ( - - - - - ); - })} + + + + + + + + {itemBreakdown.map(item => { + return ( + + + + + ); + })} +
- Quantity - - Item -
- {item.quantity} - - {itemToString(item)} -
+ Quantity + + Item +
+ {item.quantity} + + {itemToString(item)} +
User Breakdown - - - {orders.map(order => { - const itemQuantities = getOrderItemQuantities(order.items); - return ( - - - - - ); - })} + + + + + + + + {orders.map(order => { + const itemQuantities = getOrderItemQuantities(order.items); + return ( + + + + + ); + })} +
- User - - Items -
- {`${order.user.firstName} ${order.user.lastName}`} - -
    - {itemQuantities.map(item => ( -
  • - {`${item.quantity} x ${itemToString( - item - )}`} -
  • - ))} -
-
+ User + + Items +
+ {`${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;