make order status component

src/components/admin/store/PickupOrdersPrepareDisplay/index.tsx

@@ -1,4 +1,5 @@
 import { Button, Typography } from '@/components/common';
+import { OrderStatusIndicator } from '@/components/store';
 import { StoreAPI } from '@/lib/api';
 import {
   PublicOrder,
@@ -99,7 +100,7 @@ const PickupOrdersPrepareDisplay = ({
                 <tr key={order.uuid}>
                   <td>
                     <Typography variant="h5/regular">{`${order.user.firstName} ${order.user.lastName}`}</Typography>
-                    <strong>{order.status.replaceAll('_', ' ')}</strong>
+                    <OrderStatusIndicator orderStatus={order.status} />
                     {canFulfill && itemQuantities.length > 1 ? (
                       <Button
                         size="small"

src/components/store/OrderCard/index.tsx

@@ -1,4 +1,5 @@
 import { Typography } from '@/components/common';
+import OrderStatusIndicator from '@/components/store/OrderStatusIndicator';
 import { getOrder } from '@/lib/api/StoreAPI';
 import { StoreManager } from '@/lib/managers';
 import { getClientCookie } from '@/lib/services/CookieService';
@@ -13,28 +14,6 @@ import { useEffect, useState } from 'react';
 import OrderSummary from '../OrderSummary';
 import styles from './style.module.scss';
 
-export const orderStatusName: { [_ in OrderStatus]: string } = {
-  [OrderStatus.FULFILLED]: 'Fulfilled',
-  [OrderStatus.CANCELLED]: 'Cancelled',
-  [OrderStatus.PLACED]: 'Placed',
-  [OrderStatus.PARTIALLY_FULFILLED]: 'Partially Fulfilled',
-  [OrderStatus.PICKUP_MISSED]: 'Pickup Missed',
-  [OrderStatus.PICKUP_CANCELLED]: 'Pickup Cancelled',
-};
-
-export const orderStatusColor: { [_ in OrderStatus]: string } = {
-  // Green: Order completed and picked up.
-  [OrderStatus.FULFILLED]: styles.green,
-  // Gray: Order completed, no further action needed.
-  [OrderStatus.CANCELLED]: styles.gray,
-  // Blue: Order pending.
-  [OrderStatus.PLACED]: styles.blue,
-  [OrderStatus.PARTIALLY_FULFILLED]: styles.blue,
-  // Red: Order pending, requires user action.
-  [OrderStatus.PICKUP_MISSED]: styles.red,
-  [OrderStatus.PICKUP_CANCELLED]: styles.red,
-};
-
 interface OrderCardProps {
   order: PublicOrder;
   futurePickupEvents: PublicOrderPickupEvent[];
@@ -44,9 +23,8 @@ const OrderCard = ({ order, futurePickupEvents }: OrderCardProps) => {
   const [open, setOpen] = useState(false);
   const [orderData, setOrderData] = useState<PublicOrderWithItems | null>(null);
   const [pickupEvent, setPickupEvent] = useState<PublicOrderPickupEvent>(order.pickupEvent);
-  const [orderStatus, setOrderStatus] = useState<OrderStatus>(order.status);
+  const [orderStatus, setOrderStatus] = useState(order.status);
   const orderOpen = open && orderData !== null;
-  const [statusName, setStatusName] = useState<string>(orderStatusName[orderStatus]);
 
   useEffect(() => {
     if (open && orderData === null) {
@@ -58,8 +36,6 @@ const OrderCard = ({ order, futurePickupEvents }: OrderCardProps) => {
           reportError('Error loading order!', e);
           setOrderData(null);
         });
-    } else if (open) {
-      setStatusName(orderStatusName[orderStatus]);
     }
   }, [open, order.uuid, orderData, pickupEvent, orderStatus]);
 
@@ -74,8 +50,6 @@ const OrderCard = ({ order, futurePickupEvents }: OrderCardProps) => {
     setOrderStatus(OrderStatus.PLACED);
   };
 
-  const statusColor = orderStatusColor[orderStatus];
-
   return (
     <div className={styles.card}>
       <button
@@ -92,9 +66,7 @@ const OrderCard = ({ order, futurePickupEvents }: OrderCardProps) => {
                 {formatDate(order.orderedAt, true)}
               </Typography>
             </div>
-            <div className={`${styles.orderStatus} ${statusColor} ${styles.mobile}`}>
-              <Typography variant="body/medium">{statusName}</Typography>
-            </div>
+            <OrderStatusIndicator orderStatus={orderStatus} className={styles.mobile} />
           </div>
           <div className={styles.label}>
             <Typography variant="label/small">PICK UP</Typography>
@@ -104,9 +76,7 @@ const OrderCard = ({ order, futurePickupEvents }: OrderCardProps) => {
           </div>
         </div>
         {/* For desktop, status is located at the end of the row. */}
-        <div className={`${styles.orderStatus} ${statusColor} ${styles.desktop}`}>
-          <Typography variant="body/medium">{statusName}</Typography>
-        </div>
+        <OrderStatusIndicator orderStatus={orderStatus} className={styles.desktop} />
       </button>
       {orderOpen ? (
         <OrderSummary

src/components/store/OrderCard/style.module.scss

@@ -35,43 +35,8 @@
   }
 }
 
-.orderStatus {
-  background: vars.$gray-2;
-  border: 1px solid vars.$gray-7;
-  border-radius: 0.875rem;
-  color: vars.$gray-7;
-  margin-right: 1rem;
-  padding: 0.25rem 0.5rem;
-
-  text-align: center;
-
-  &.mobile {
-    display: none;
-  }
-
-  &.green {
-    background: vars.$green-100;
-    border: 1px solid vars.$success-1;
-    color: vars.$success-1;
-  }
-
-  &.gray {
-    background: vars.$gray-2;
-    border: 1px solid vars.$gray-7;
-    color: vars.$gray-7;
-  }
-
-  &.blue {
-    background: vars.$blue-100;
-    border: 1px solid vars.$dark-primary-5;
-    color: vars.$dark-primary-5;
-  }
-
-  &.red {
-    background: vars.$scarlet-2;
-    border: 1px solid vars.$danger-1;
-    color: vars.$danger-1;
-  }
+.mobile {
+  display: none;
 }
 
 .orderSummary {
@@ -100,15 +65,13 @@
     }
   }
 
-  .orderStatus {
-    &.mobile {
-      display: flex;
-      flex: 0;
-      margin-right: 0;
-    }
+  .mobile {
+    display: flex;
+    flex: 0;
+    margin-right: 0;
+  }
 
-    &.desktop {
-      display: none;
-    }
+  .desktop {
+    display: none;
   }
 }

src/components/store/OrderCard/style.module.scss.d.ts

@@ -1,18 +1,13 @@
 export type Styles = {
-  blue: string;
   card: string;
   container: string;
   desktop: string;
   focused: string;
-  gray: string;
-  green: string;
   label: string;
   mobile: string;
   mobileHeader: string;
   orderInfo: string;
-  orderStatus: string;
   orderSummary: string;
-  red: string;
 };
 
 export type ClassNames = keyof Styles;

src/components/store/OrderStatusIndicator/index.tsx

@@ -0,0 +1,40 @@
+import { Typography } from '@/components/common';
+import { OrderStatus } from '@/lib/types/enums';
+import styles from './style.module.scss';
+
+export const orderStatusName: { [_ in OrderStatus]: string } = {
+  [OrderStatus.FULFILLED]: 'Fulfilled',
+  [OrderStatus.CANCELLED]: 'Cancelled',
+  [OrderStatus.PLACED]: 'Placed',
+  [OrderStatus.PARTIALLY_FULFILLED]: 'Partially Fulfilled',
+  [OrderStatus.PICKUP_MISSED]: 'Pickup Missed',
+  [OrderStatus.PICKUP_CANCELLED]: 'Pickup Cancelled',
+};
+
+export const orderStatusColor: { [_ in OrderStatus]: string } = {
+  // Green: Order completed and picked up.
+  [OrderStatus.FULFILLED]: styles.green,
+  // Gray: Order completed, no further action needed.
+  [OrderStatus.CANCELLED]: styles.gray,
+  // Blue: Order pending.
+  [OrderStatus.PLACED]: styles.blue,
+  [OrderStatus.PARTIALLY_FULFILLED]: styles.blue,
+  // Red: Order pending, requires user action.
+  [OrderStatus.PICKUP_MISSED]: styles.red,
+  [OrderStatus.PICKUP_CANCELLED]: styles.red,
+};
+
+interface OrderStatusIndicatorProps {
+  orderStatus: OrderStatus;
+  className?: string;
+}
+
+const OrderStatusIndicator = ({ orderStatus, className = '' }: OrderStatusIndicatorProps) => {
+  return (
+    <div className={`${styles.orderStatus} ${orderStatusColor[orderStatus]} ${className}`}>
+      <Typography variant="body/medium">{orderStatusName[orderStatus]}</Typography>
+    </div>
+  );
+};
+
+export default OrderStatusIndicator;

src/components/store/OrderStatusIndicator/style.module.scss

@@ -0,0 +1,36 @@
+@use 'src/styles/vars.scss' as vars;
+
+.orderStatus {
+  background: vars.$gray-2;
+  border: 1px solid vars.$gray-7;
+  border-radius: 0.875rem;
+  color: vars.$gray-7;
+  margin-right: 1rem;
+  padding: 0.25rem 0.5rem;
+
+  text-align: center;
+
+  &.green {
+    background: vars.$green-100;
+    border: 1px solid vars.$success-1;
+    color: vars.$success-1;
+  }
+
+  &.gray {
+    background: vars.$gray-2;
+    border: 1px solid vars.$gray-7;
+    color: vars.$gray-7;
+  }
+
+  &.blue {
+    background: vars.$blue-100;
+    border: 1px solid vars.$dark-primary-5;
+    color: vars.$dark-primary-5;
+  }
+
+  &.red {
+    background: vars.$scarlet-2;
+    border: 1px solid vars.$danger-1;
+    color: vars.$danger-1;
+  }
+}

src/components/store/OrderStatusIndicator/style.module.scss.d.ts

@@ -0,0 +1,13 @@
+export type Styles = {
+  blue: string;
+  gray: string;
+  green: string;
+  orderStatus: string;
+  red: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/store/index.ts

@@ -10,6 +10,7 @@ export { default as Hero } from './Hero';
 export { default as HiddenIcon } from './HiddenIcon';
 export { default as ItemCard } from './ItemCard';
 export { default as OrderCard } from './OrderCard';
+export { default as OrderStatusIndicator } from './OrderStatusIndicator';
 export { default as OrdersDisplay } from './OrdersDisplay';
 export { default as PickupEventDetail } from './PickupEventDetail';
 export { default as PickupEventPicker } from './PickupEventPicker';