From 187c9eb15c655e712f7cacce26c7c41fba88f7d6 Mon Sep 17 00:00:00 2001
From: Alex Zhang <alexzhang1618@gmail.com>
Date: Fri, 10 May 2024 15:23:41 -0700
Subject: [PATCH] Update user-facing style to be aligned with Amy's design

---
 src/components/store/OrderSummary/index.tsx   | 168 +++++++++++-------
 .../store/OrderSummary/style.module.scss      |   7 +-
 .../store/OrderSummary/style.module.scss.d.ts |   1 +
 3 files changed, 109 insertions(+), 67 deletions(-)

diff --git a/src/components/store/OrderSummary/index.tsx b/src/components/store/OrderSummary/index.tsx
index d86e2805..1af3d397 100644
--- a/src/components/store/OrderSummary/index.tsx
+++ b/src/components/store/OrderSummary/index.tsx
@@ -5,21 +5,17 @@ import PickupEventPreviewModal from '@/components/store/PickupEventPreviewModal'
 import { config } from '@/lib';
 import { PublicOrderPickupEvent, PublicOrderWithItems } from '@/lib/types/apiResponses';
 import { OrderStatus } from '@/lib/types/enums';
-import { capitalize, getDefaultOrderItemPhoto, getOrderItemQuantities } from '@/lib/utils';
+import {
+  OrderItemQuantity,
+  capitalize,
+  getDefaultOrderItemPhoto,
+  getOrderItemQuantities,
+} from '@/lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import styles from './style.module.scss';
 
-interface OrderSummaryProps {
-  order: PublicOrderWithItems;
-  orderStatus: OrderStatus;
-  futurePickupEvents: PublicOrderPickupEvent[];
-  pickupEvent: PublicOrderPickupEvent;
-  reschedulePickupEvent: (pickup: PublicOrderPickupEvent) => Promise<void>;
-  cancelOrder: () => Promise<void>;
-}
-
 const isOrderActionable = (status: OrderStatus, pickupEvent: PublicOrderPickupEvent): boolean => {
   if (status === OrderStatus.CANCELLED || status === OrderStatus.FULFILLED) {
     // If the order is cancelled by the user or fulfilled, no further action can be taken.
@@ -36,6 +32,102 @@ const isOrderActionable = (status: OrderStatus, pickupEvent: PublicOrderPickupEv
   return true;
 };
 
+interface OrderItemPreviewProps {
+  item: OrderItemQuantity;
+  orderStatus: OrderStatus;
+}
+
+const OrderItemPreview = ({ item, orderStatus }: OrderItemPreviewProps) => {
+  if (item.fulfilled && orderStatus === OrderStatus.PLACED) {
+    /*
+     * When a partially fulfilled order is rescheduled,
+     * the status is changed to PLACED, but all items remain (some as fulfilled).
+     * These items should be hidden.
+     */
+    return null;
+  }
+
+  return (
+    <Link href={`${config.store.itemRoute}${item.option.item.uuid}`} className={styles.itemInfo}>
+      <div className={styles.image}>
+        <Image
+          src={getDefaultOrderItemPhoto(item)}
+          style={{ objectFit: 'cover' }}
+          sizes="9.375rem"
+          alt="Store item picture"
+          fill
+        />
+      </div>
+      <div className={styles.itemSummary}>
+        <Typography variant="h4/bold">{item.option.item.itemName}</Typography>
+        <div className={styles.label}>
+          <Typography variant="h5/bold">Price: </Typography>
+          <Diamonds count={item.option.price * item.quantity} discount={item.salePriceAtPurchase} />
+        </div>
+        <div className={styles.label}>
+          <Typography variant="h5/bold">Quantity: </Typography>
+          <Typography variant="h5/regular">{item.quantity}</Typography>
+        </div>
+        {item.option.metadata ? (
+          <div className={styles.label}>
+            <Typography variant="h5/bold">{`${capitalize(
+              item.option.metadata.type
+            )}: `}</Typography>
+            <Typography variant="h5/regular">{item.option.metadata.value}</Typography>
+          </div>
+        ) : null}
+      </div>
+    </Link>
+  );
+};
+
+interface OrderItemsSummaryProps {
+  items: OrderItemQuantity[];
+  orderStatus: OrderStatus;
+}
+
+const OrderItemsSummary = ({ items, orderStatus }: OrderItemsSummaryProps) => {
+  if (orderStatus !== OrderStatus.PARTIALLY_FULFILLED) {
+    return (
+      <>
+        {items.map(item => (
+          <OrderItemPreview item={item} orderStatus={orderStatus} key={item.uuids[0]} />
+        ))}
+      </>
+    );
+  }
+  const pickedUpItems = items.filter(item => item.fulfilled);
+  const notPickedUpItems = items.filter(item => !item.fulfilled);
+
+  return (
+    <div>
+      <Typography variant="h3/bold" className={styles.partiallyFulfilledText}>
+        Items Picked Up:
+      </Typography>
+      {pickedUpItems.map(item => (
+        <OrderItemPreview item={item} orderStatus={orderStatus} key={item.uuids[0]} />
+      ))}
+
+      <hr className={styles.divider} />
+      <Typography variant="h3/bold" className={styles.partiallyFulfilledText}>
+        Awaiting Pickup:
+      </Typography>
+      {notPickedUpItems.map(item => (
+        <OrderItemPreview item={item} orderStatus={orderStatus} key={item.uuids[0]} />
+      ))}
+    </div>
+  );
+};
+
+interface OrderSummaryProps {
+  order: PublicOrderWithItems;
+  orderStatus: OrderStatus;
+  futurePickupEvents: PublicOrderPickupEvent[];
+  pickupEvent: PublicOrderPickupEvent;
+  reschedulePickupEvent: (pickup: PublicOrderPickupEvent) => Promise<void>;
+  cancelOrder: () => Promise<void>;
+}
+
 const OrderSummary = ({
   order,
   orderStatus,
@@ -69,61 +161,7 @@ const OrderSummary = ({
         onClose={() => setCancelModalOpen(false)}
         cancelOrder={cancelOrder}
       />
-      {items.map(item => {
-        if (item.fulfilled && orderStatus === OrderStatus.PLACED) {
-          /*
-           * When a partially fulfilled order is rescheduled,
-           * the status is changed to PLACED, but all items remain (some as fulfilled).
-           * These items should be hidden.
-           */
-          return undefined;
-        }
-
-        const itemName =
-          orderStatus === OrderStatus.PARTIALLY_FULFILLED
-            ? `${item.option.item.itemName} ${item.fulfilled ? '✅' : '❌'}`
-            : item.option.item.itemName;
-
-        return (
-          <Link
-            href={`${config.store.itemRoute}${item.option.item.uuid}`}
-            key={item.uuids[0]}
-            className={styles.itemInfo}
-          >
-            <div className={styles.image}>
-              <Image
-                src={getDefaultOrderItemPhoto(item)}
-                style={{ objectFit: 'cover' }}
-                sizes="9.375rem"
-                alt="Store item picture"
-                fill
-              />
-            </div>
-            <div className={styles.itemSummary}>
-              <Typography variant="h4/bold">{itemName}</Typography>
-              <div className={styles.label}>
-                <Typography variant="h5/bold">Price: </Typography>
-                <Diamonds
-                  count={item.option.price * item.quantity}
-                  discount={item.salePriceAtPurchase}
-                />
-              </div>
-              <div className={styles.label}>
-                <Typography variant="h5/bold">Quantity: </Typography>
-                <Typography variant="h5/regular">{item.quantity}</Typography>
-              </div>
-              {item.option.metadata ? (
-                <div className={styles.label}>
-                  <Typography variant="h5/bold">{`${capitalize(
-                    item.option.metadata.type
-                  )}: `}</Typography>
-                  <Typography variant="h5/regular">{item.option.metadata.value}</Typography>
-                </div>
-              ) : null}
-            </div>
-          </Link>
-        );
-      })}
+      <OrderItemsSummary items={items} orderStatus={orderStatus} />
       <hr className={styles.divider} />
       <div className={styles.footer}>
         <div className={styles.buttons}>
diff --git a/src/components/store/OrderSummary/style.module.scss b/src/components/store/OrderSummary/style.module.scss
index abf27420..700ca3bb 100644
--- a/src/components/store/OrderSummary/style.module.scss
+++ b/src/components/store/OrderSummary/style.module.scss
@@ -3,6 +3,10 @@
 .container {
   margin-top: 0.75rem;
 
+  .partiallyFulfilledText {
+    padding: 0.75rem 1.5rem;
+  }
+
   .itemInfo {
     display: flex;
     flex-direction: row;
@@ -36,8 +40,7 @@
   .divider {
     border-top: 1px solid var(--theme-elevated-stroke);
     height: 0.1rem;
-    margin: 0 1rem;
-    margin-top: 0.75rem;
+    margin: 0.75rem 1rem;
     width: auto;
   }
 
diff --git a/src/components/store/OrderSummary/style.module.scss.d.ts b/src/components/store/OrderSummary/style.module.scss.d.ts
index 49ffe448..4f312057 100644
--- a/src/components/store/OrderSummary/style.module.scss.d.ts
+++ b/src/components/store/OrderSummary/style.module.scss.d.ts
@@ -7,6 +7,7 @@ export type Styles = {
   itemInfo: string;
   itemSummary: string;
   label: string;
+  partiallyFulfilledText: string;
   totalDiamonds: string;
   totalPrice: string;
 };