Merge pull request #1250 from jboolean/order-review-page

Merch order review page

Author: jboolean

frontend/src/screens/App/screens/Admin/AdminRoutes.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import LoginPage from './screens/LoginPage';
+import ReviewMerch from './screens/ReviewMerch';
 import ReviewStories from './screens/ReviewStories';
 import PrivateRoute from './shared/components/PrivateRoute';
 
@@ -12,6 +13,7 @@ export default function AdminRoutes(): JSX.Element {
     <Switch>
       <Route path={`${path}/login`} component={LoginPage} />
       <PrivateRoute path={`${path}/review-stories`} component={ReviewStories} />
+      <PrivateRoute path={`${path}/review-merch`} component={ReviewMerch} />
     </Switch>
   );
 }

frontend/src/screens/App/screens/Admin/screens/ReviewMerch/ReviewMerch.less

@@ -0,0 +1,68 @@
+@import '../../../../../../shared/styles/colors.less';
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.orders {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.order {
+  border: 1px solid @creme;
+  padding: 20px;
+}
+
+.orderHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  gap: 20px;
+}
+
+.metadata {
+  flex: 1;
+}
+
+.buttons {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.items {
+  border-top: 1px solid @creme;
+  padding-top: 20px;
+}
+
+.item {
+  border: 1px solid @creme;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+
+.customization {
+  margin-top: 10px;
+  padding: 10px;
+  background: @creme;
+}
+
+.attentionSection {
+  margin-top: 40px;
+}
+
+@media (max-width: 768px) {
+  .orderHeader {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .buttons {
+    justify-content: center;
+  }
+}

frontend/src/screens/App/screens/Admin/screens/ReviewMerch/index.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import Button from 'shared/components/Button';
+import { Order, OrderItem } from 'shared/utils/merch/Order';
+import stylesheet from './ReviewMerch.less';
+import useReviewMerchStore from './stores/ReviewMerchStore';
+
+const DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
+  dateStyle: 'full',
+  timeStyle: 'short',
+});
+
+function OrderMetadataView({ order }: { order: Order }): JSX.Element {
+  return (
+    <div className={stylesheet.metadata}>
+      <div>
+        <strong>Order #{order.id}</strong>
+      </div>
+      <div>
+        <time dateTime={order.createdAt}>
+          {DATE_FORMATTER.format(Date.parse(order.createdAt))}
+        </time>
+      </div>
+      {order.email && <div>Email: {order.email}</div>}
+      <div>State: {order.state}</div>
+      {order.fulfillmentState && (
+        <div>Fulfillment: {order.fulfillmentState}</div>
+      )}
+    </div>
+  );
+}
+
+function OrderItemView({ item }: { item: OrderItem }): JSX.Element {
+  return (
+    <div className={stylesheet.item}>
+      <div>Item #{item.id}</div>
+      <div>Variant: {item.internalVariant}</div>
+      <div>State: {item.state}</div>
+      {item.printfileUrl && (
+        <div>
+          <a
+            href={item.printfileUrl}
+            target="_blank"
+            rel="noreferrer"
+            className={stylesheet.printfileLink}
+          >
+            View Printfile
+          </a>
+        </div>
+      )}
+      {item.customizationOptions && (
+        <div className={stylesheet.customization}>
+          <strong>Customization:</strong>
+          <div>Style: {item.customizationOptions.style}</div>
+          <div>Foreground: {item.customizationOptions.foregroundColor}</div>
+          <div>Background: {item.customizationOptions.backgroundColor}</div>
+          <div>
+            Location: {item.customizationOptions.lat},{' '}
+            {item.customizationOptions.lng}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ReviewMerch(): JSX.Element {
+  const reviewMerchStore = useReviewMerchStore();
+
+  React.useEffect(() => {
+    reviewMerchStore.loadOrders();
+    reviewMerchStore.loadOrdersNeedingAttention();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={stylesheet.container}>
+      <h1>Review Merch Orders</h1>
+
+      <div className={stylesheet.orders}>
+        {reviewMerchStore.orders.map((order) => (
+          <div key={order.id} className={stylesheet.order}>
+            <div className={stylesheet.orderHeader}>
+              <OrderMetadataView order={order} />
+
+              <div className={stylesheet.buttons}>
+                <Button
+                  onClick={() => reviewMerchStore.fulfillOrder(order.id)}
+                  buttonStyle={'primary'}
+                >
+                  Fulfill
+                </Button>
+                <Button
+                  onClick={() => reviewMerchStore.cancelOrder(order.id)}
+                  buttonStyle={'secondary'}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+
+            <div className={stylesheet.items}>
+              <h3>Items ({order.items.length})</h3>
+              {order.items.map((item) => (
+                <OrderItemView key={item.id} item={item} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {reviewMerchStore.ordersNeedingAttention.length > 0 && (
+        <div className={stylesheet.attentionSection}>
+          <h2>Orders Needing Attention</h2>
+          <div className={stylesheet.orders}>
+            {reviewMerchStore.ordersNeedingAttention.map((order) => (
+              <div key={order.id} className={stylesheet.order}>
+                <OrderMetadataView order={order} />
+                <div className={stylesheet.items}>
+                  <h3>Items ({order.items.length})</h3>
+                  {order.items.map((item) => (
+                    <OrderItemView key={item.id} item={item} />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/screens/App/screens/Admin/screens/ReviewMerch/stores/ReviewMerchStore.ts

@@ -0,0 +1,56 @@
+import { MerchOrderState, Order } from 'shared/utils/merch/Order';
+import {
+  getOrdersForReview,
+  getOrdersNeedingAttention,
+  updateOrderState,
+} from 'shared/utils/merch/merchApi';
+import create from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+interface State {
+  orders: Order[];
+  ordersNeedingAttention: Order[];
+}
+
+interface Actions {
+  fulfillOrder(orderId: number): void;
+  cancelOrder(orderId: number): void;
+  loadOrders(): void;
+  loadOrdersNeedingAttention(): void;
+}
+
+const useReviewMerchStore = create(
+  immer<State & Actions>((set) => ({
+    orders: [],
+    ordersNeedingAttention: [],
+    loadOrders: async () => {
+      const orders = await getOrdersForReview();
+      set((state) => {
+        state.orders = orders;
+      });
+    },
+    loadOrdersNeedingAttention: async () => {
+      const orders = await getOrdersNeedingAttention();
+      set((state) => {
+        state.ordersNeedingAttention = orders;
+      });
+    },
+    fulfillOrder: async (orderId: number) => {
+      await updateOrderState(
+        orderId,
+        MerchOrderState.SUBMITTED_FOR_FULFILLMENT
+      );
+      set((state) => {
+        state.orders = state.orders.filter((order) => order.id !== orderId);
+      });
+    },
+    cancelOrder: async (orderId: number) => {
+      await updateOrderState(orderId, MerchOrderState.CANCELED);
+      set((state) => {
+        state.orders = state.orders.filter((order) => order.id !== orderId);
+      });
+    },
+  }))
+);
+
+export default useReviewMerchStore;

frontend/src/screens/App/screens/Merch/screens/Orders/components/CustomizeModal.tsx

@@ -10,8 +10,8 @@ import {
   setOverlay,
 } from 'screens/App/screens/MapPane/components/MainMap/overlays';
 import Button from 'shared/components/Button';
+import { MerchCustomizationOptions } from 'shared/utils/merch/Order';
 import useElementId from 'shared/utils/useElementId';
-import { MerchCustomizationOptions } from '../shared/utils/Order';
 import stylesheet from './CustomizeModal.less';
 
 const DEFAULT_LNG_LAT = {

frontend/src/screens/App/screens/Merch/screens/Orders/index.tsx

@@ -2,16 +2,16 @@ import React, { useEffect } from 'react';
 
 import { Link } from 'react-router-dom';
 import absurd from 'shared/utils/absurd';
-import CustomizeModal from './components/CustomizeModal';
-import LoginModal from './components/LoginModal';
-import useOrdersStore from './shared/stores/OrdersStore';
 import {
   MerchInternalVariant,
   MerchItemState,
   MerchOrderFulfillmentState,
   MerchOrderState,
   Order,
-} from './shared/utils/Order';
+} from 'shared/utils/merch/Order';
+import CustomizeModal from './components/CustomizeModal';
+import LoginModal from './components/LoginModal';
+import useOrdersStore from './shared/stores/OrdersStore';
 
 import Button from 'shared/components/Button';
 import { ColorThemeContext } from 'shared/components/ColorThemeContext';

frontend/src/screens/App/screens/Merch/screens/Orders/shared/stores/OrdersStore.ts

@@ -1,8 +1,12 @@
 import useLoginStore from 'shared/stores/LoginStore';
+import {
+  MerchCustomizationOptions,
+  Order,
+  OrderItem,
+} from 'shared/utils/merch/Order';
+import * as merchApi from 'shared/utils/merch/merchApi';
 import create from 'zustand';
 import { immer } from 'zustand/middleware/immer';
-import { MerchCustomizationOptions, Order, OrderItem } from '../utils/Order';
-import * as merchApi from '../utils/merchApi';
 
 interface State {
   orders: Order[] | null;

frontend/src/screens/App/screens/Merch/screens/Orders/shared/utils/merchApi.ts

@@ -45,11 +45,14 @@ export interface OrderItem {
   internalVariant: MerchInternalVariant;
   customizationOptions?: MerchCustomizationOptions;
   state: MerchItemState;
+  printfileUrl?: string;
 }
 
 export interface Order {
   id: number;
   createdAt: string;
+  userId: number;
+  email?: string;
   state: MerchOrderState;
   fulfillmentState?: MerchOrderFulfillmentState;
   items: OrderItem[];

frontend/src/screens/App/screens/Merch/screens/Orders/shared/utils/Order.ts renamed to frontend/src/shared/utils/merch/Order.ts

@@ -0,0 +1,38 @@
+import api from 'shared/utils/api';
+import { MerchCustomizationOptions, MerchOrderState, Order } from './Order';
+
+export async function getMyOrders(): Promise<Order[]> {
+  const response = await api.get<Order[]>('/merch/orders');
+  return response.data;
+}
+
+export async function updateCustomizationOptions(
+  itemId: number,
+  customizationOptions: MerchCustomizationOptions
+): Promise<void> {
+  await api.put(
+    `/merch/items/${itemId}/customization-options`,
+    customizationOptions
+  );
+}
+
+export async function finalizeCustomization(itemId: number): Promise<void> {
+  await api.post(`/merch/items/${itemId}/finalize-customizations`);
+}
+
+export async function getOrdersForReview(): Promise<Order[]> {
+  const response = await api.get<Order[]>('/merch/orders/for-review');
+  return response.data;
+}
+
+export async function updateOrderState(
+  orderId: number,
+  state: MerchOrderState
+): Promise<void> {
+  await api.patch(`/merch/orders/${orderId}/state`, { state });
+}
+
+export async function getOrdersNeedingAttention(): Promise<Order[]> {
+  const response = await api.get<Order[]>('/merch/orders/needs-attention');
+  return response.data;
+}