From 7629d92dde1281759297cf7cf471cbda16cc85a3 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Mon, 29 Apr 2024 22:24:53 -0700
Subject: [PATCH] move order row to separate component

---
 .../admin/store/PickupOrder/index.tsx         | 69 +++++++++++++++
 .../admin/store/PickupOrder/style.module.scss | 18 ++++
 .../store/PickupOrder/style.module.scss.d.ts  | 10 +++
 .../PickupOrdersPrepareDisplay/index.tsx      | 83 +++++--------------
 .../style.module.scss                         | 23 -----
 .../style.module.scss.d.ts                    |  1 -
 src/components/admin/store/index.tsx          |  1 +
 7 files changed, 117 insertions(+), 88 deletions(-)
 create mode 100644 src/components/admin/store/PickupOrder/index.tsx
 create mode 100644 src/components/admin/store/PickupOrder/style.module.scss
 create mode 100644 src/components/admin/store/PickupOrder/style.module.scss.d.ts

diff --git a/src/components/admin/store/PickupOrder/index.tsx b/src/components/admin/store/PickupOrder/index.tsx
new file mode 100644
index 00000000..81bd1e63
--- /dev/null
+++ b/src/components/admin/store/PickupOrder/index.tsx
@@ -0,0 +1,69 @@
+import { Button, Typography } from '@/components/common';
+import { OrderStatusIndicator } from '@/components/store';
+import { StoreAPI } from '@/lib/api';
+import { PublicOrderItemWithQuantity, PublicOrderWithItems } from '@/lib/types/apiResponses';
+import { OrderStatus } from '@/lib/types/enums';
+import { getOrderItemQuantities, reportError } from '@/lib/utils';
+import styles from './style.module.scss';
+
+interface PickupOrderProps {
+  token: string;
+  canFulfill: boolean;
+  order: PublicOrderWithItems;
+  onOrderUpdate: (orders: PublicOrderWithItems) => void;
+}
+
+const itemToString = (item: PublicOrderItemWithQuantity): string => {
+  if (item.option.metadata !== null)
+    return `${item.option.item.itemName} (${item.option.metadata.type}: ${item.option.metadata.value})`;
+  return item.option.item.itemName;
+};
+
+const PickupOrder = ({ token, canFulfill, order, onOrderUpdate }: PickupOrderProps) => {
+  const showFulfill = canFulfill && order.status === OrderStatus.PLACED;
+  const itemQuantities = getOrderItemQuantities(order.items);
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Typography variant="h5/regular">{`${order.user.firstName} ${order.user.lastName}`}</Typography>
+        <OrderStatusIndicator orderStatus={order.status} />
+        {showFulfill && itemQuantities.length > 1 ? (
+          <Button
+            size="small"
+            onClick={async () => {
+              try {
+                const newOrder = await StoreAPI.fulfillOrderPickup(token, order.uuid, order.items);
+                const itemUuids = order.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);
+              }
+            }}
+          >
+            Fulfill
+          </Button>
+        ) : null}
+      </td>
+      <td>
+        <ul className={styles.itemList}>
+          {itemQuantities.map(item => {
+            return (
+              <li key={item.uuid}>
+                <Typography variant="h5/regular">{`${item.quantity} x ${itemToString(
+                  item
+                )}`}</Typography>
+              </li>
+            );
+          })}
+        </ul>
+      </td>
+    </tr>
+  );
+};
+
+export default PickupOrder;
diff --git a/src/components/admin/store/PickupOrder/style.module.scss b/src/components/admin/store/PickupOrder/style.module.scss
new file mode 100644
index 00000000..20869336
--- /dev/null
+++ b/src/components/admin/store/PickupOrder/style.module.scss
@@ -0,0 +1,18 @@
+.row {
+  border-top: 1px solid var(--theme-accent-line-2);
+
+  td {
+    padding: 1.5rem;
+  }
+
+  .itemList {
+    list-style-type: disc;
+
+    li {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+  }
+}
diff --git a/src/components/admin/store/PickupOrder/style.module.scss.d.ts b/src/components/admin/store/PickupOrder/style.module.scss.d.ts
new file mode 100644
index 00000000..7e31b756
--- /dev/null
+++ b/src/components/admin/store/PickupOrder/style.module.scss.d.ts
@@ -0,0 +1,10 @@
+export type Styles = {
+  itemList: string;
+  row: 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 ccc52753..b1352574 100644
--- a/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx
+++ b/src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx
@@ -1,9 +1,7 @@
-import { Button, Typography } from '@/components/common';
-import { OrderStatusIndicator } from '@/components/store';
-import { StoreAPI } from '@/lib/api';
+import PickupOrder from '@/components/admin/store/PickupOrder';
+import { Typography } from '@/components/common';
 import { PublicOrderItemWithQuantity, PublicOrderWithItems } from '@/lib/types/apiResponses';
-import { OrderStatus } from '@/lib/types/enums';
-import { getOrderItemQuantities, reportError } from '@/lib/utils';
+import { getOrderItemQuantities } from '@/lib/utils';
 import { useMemo } from 'react';
 import styles from './style.module.scss';
 
@@ -77,65 +75,22 @@ const PickupOrdersPrepareDisplay = ({
             </tr>
           </thead>
           <tbody>
-            {orders.map(order => {
-              const showFulfill = canFulfill && order.status === OrderStatus.PLACED;
-              const itemQuantities = getOrderItemQuantities(order.items);
-              return (
-                <tr key={order.uuid}>
-                  <td>
-                    <Typography variant="h5/regular">{`${order.user.firstName} ${order.user.lastName}`}</Typography>
-                    <OrderStatusIndicator orderStatus={order.status} />
-                    {showFulfill && itemQuantities.length > 1 ? (
-                      <Button
-                        size="small"
-                        onClick={async () => {
-                          try {
-                            const newOrder = await StoreAPI.fulfillOrderPickup(
-                              token,
-                              order.uuid,
-                              order.items
-                            );
-                            const itemUuids = order.items.map(item => item.uuid);
-                            onOrderUpdate(
-                              orders.map(
-                                (order): PublicOrderWithItems =>
-                                  order.uuid === newOrder.uuid
-                                    ? {
-                                        ...newOrder,
-                                        items: order.items.map(item =>
-                                          itemUuids.includes(item.uuid)
-                                            ? { ...item, fulfilled: true }
-                                            : item
-                                        ),
-                                      }
-                                    : order
-                              )
-                            );
-                          } catch (error: unknown) {
-                            reportError('Failed to fulfill order', error);
-                          }
-                        }}
-                      >
-                        Fulfill
-                      </Button>
-                    ) : null}
-                  </td>
-                  <td>
-                    <ul className={styles.itemList}>
-                      {itemQuantities.map(item => {
-                        return (
-                          <li key={item.uuid}>
-                            <Typography variant="h5/regular">{`${item.quantity} x ${itemToString(
-                              item
-                            )}`}</Typography>
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  </td>
-                </tr>
-              );
-            })}
+            {orders.map(order => (
+              <PickupOrder
+                canFulfill={canFulfill}
+                order={order}
+                onOrderUpdate={newOrder =>
+                  onOrderUpdate(
+                    orders.map(
+                      (order): PublicOrderWithItems =>
+                        order.uuid === newOrder.uuid ? newOrder : order
+                    )
+                  )
+                }
+                token={token}
+                key={order.uuid}
+              />
+            ))}
           </tbody>
         </table>
       </div>
diff --git a/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss b/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss
index 8cffc6aa..e57b1d91 100644
--- a/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss
+++ b/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss
@@ -22,27 +22,4 @@
     padding: 1rem 1.5rem;
     text-align: left;
   }
-
-  td {
-    padding: 1.5rem;
-  }
-
-  tbody tr {
-    border-top: 1px solid var(--theme-accent-line-2);
-  }
-
-  tr:last-child td:first-child {
-    border-bottom-left-radius: 1rem;
-  }
-}
-
-.itemList {
-  list-style-type: disc;
-
-  li {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
 }
diff --git a/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss.d.ts b/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss.d.ts
index 66baf782..e678aeb8 100644
--- a/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss.d.ts
+++ b/src/components/admin/store/PickupOrdersPrepareDisplay/style.module.scss.d.ts
@@ -1,7 +1,6 @@
 export type Styles = {
   breakdown: string;
   container: string;
-  itemList: string;
   table: string;
 };
 
diff --git a/src/components/admin/store/index.tsx b/src/components/admin/store/index.tsx
index c40d9453..529e086b 100644
--- a/src/components/admin/store/index.tsx
+++ b/src/components/admin/store/index.tsx
@@ -3,5 +3,6 @@ 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 PickupOrder } from './PickupOrder';
 export { default as PickupOrdersPrepareDisplay } from './PickupOrdersPrepareDisplay';
 export { PickupEventStatus };