Merge remote-tracking branch 'origin/main' into sean/fulfill

acmucsd · May 14, 2024 · 4550fa0 · 4550fa0
2 parents 070291d + 1547272
commit 4550fa0
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 18 deletions.
diff --git 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.
@@ -30,16 +26,108 @@ const isOrderActionable = (status: OrderStatus, pickupEvent: PublicOrderPickupEv
   const now = new Date();
   const eventStart = new Date(pickupEvent.start);
   eventStart.setDate(eventStart.getDate() - 2);
-  if (
-    now > eventStart &&
-    status !== OrderStatus.PICKUP_MISSED &&
-    status !== OrderStatus.PICKUP_CANCELLED
-  ) {
+  if (status === OrderStatus.PLACED && now > eventStart) {
     return false;
   }
   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,

diff --git 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
@@ -7,6 +7,7 @@ export type Styles = {
   itemInfo: string;
   itemSummary: string;
   label: string;
+  partiallyFulfilledText: string;
   totalDiamonds: string;
   totalPrice: string;
 };

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -132,6 +132,9 @@ const PortalHomePage = ({
         <div className={styles.checkinButtons}>
           <input
             type="text"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
             placeholder="Enter event check-in code"
             className={styles.checkinInput}
             value={checkinCode}

diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
@@ -221,7 +221,8 @@
         width: 0;
 
         @media screen and (width <= vars.$breakpoint-md) {
-          font-size: 0.75rem;
+          // 1rem prevents auto zoom on iOS
+          font-size: 1rem;
           line-height: 1.5rem;
           padding: 0.625rem 1.25rem;
         }