Labels back to emoji, have checkbox select all of an entire variant a…

…t a time

If we want granularity in the future then that can be added later

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

@@ -34,34 +34,41 @@ const PickupOrder = ({ token, canFulfill, order, onOrderUpdate }: PickupOrderPro
               order.status === OrderStatus.PARTIALLY_FULFILLED
             ) {
               if (!item.fulfilled) {
-                badge = <span className={styles.notFulfilled}>Not fulfilled</span>;
+                badge = (
+                  <span className={styles.notFulfilled} title="Not fulfilled">
+                    ❌
+                  </span>
+                );
               }
             } else if (item.fulfilled) {
-              badge = <span className={styles.fulfilled}>Fulfilled</span>;
+              badge = (
+                <span className={styles.fulfilled} title="Fulfilled">
+                  ✅
+                </span>
+              );
             }
             return (
               <li key={item.uuids[0]}>
-                <Typography variant="h5/regular">
-                  {`${item.quantity} x ${itemToString(item)}`} {badge}
-                </Typography>
-                {canFulfill && !item.fulfilled
-                  ? item.uuids.map(uuid => (
-                      <input
-                        key={uuid}
-                        type="checkbox"
-                        checked={selected.has(uuid)}
-                        onChange={e => {
-                          const copy = new Set(selected);
-                          if (e.currentTarget.checked) {
-                            copy.add(uuid);
-                          } else {
-                            copy.delete(uuid);
-                          }
-                          setSelected(copy);
-                        }}
-                      />
-                    ))
-                  : null}
+                <label>
+                  {canFulfill && !item.fulfilled ? (
+                    <input
+                      type="checkbox"
+                      defaultChecked={false}
+                      onChange={e => {
+                        setSelected(
+                          new Set(
+                            e.currentTarget.checked
+                              ? [...Array.from(selected), ...item.uuids]
+                              : Array.from(selected).filter(uuid => !item.uuids.includes(uuid))
+                          )
+                        );
+                      }}
+                    />
+                  ) : null}
+                  <Typography variant="h5/regular" component="span">
+                    {`${item.quantity} x ${itemToString(item)}`} {badge}
+                  </Typography>
+                </label>
               </li>
             );
           })}
@@ -85,7 +92,7 @@ const PickupOrder = ({ token, canFulfill, order, onOrderUpdate }: PickupOrderPro
               }
             }}
           >
-            Fulfill Selected
+            Fulfill {selected.size} item{selected.size === 1 ? '' : 's'}
           </Button>
         ) : null}
       </td>

src/components/admin/store/PickupOrder/style.module.scss

@@ -27,6 +27,7 @@
       [type='checkbox'] {
         cursor: pointer;
         height: 1rem;
+        margin-right: 5px;
         width: 1rem;
       }
     }

src/components/store/OrderSummary/index.tsx

@@ -50,10 +50,16 @@ const OrderItemPreview = ({ item, showFulfilled, showNotFulfilled }: OrderItemPr
           fill
         />
         {showFulfilled && item.fulfilled ? (
+          // "Already picked up" means that the item could only have been picked
+          // up from a previous partially fulfilled order that was rescheduled.
+          // For example, if an item is fulfilled but the order is missed or
+          // cancelled
           <div className={styles.badge}>{showNotFulfilled ? 'Picked up' : 'Already picked up'}</div>
         ) : null}
         {showNotFulfilled && !item.fulfilled ? (
-          <div className={`${styles.badge} ${styles.notAvailable}`}>Not available</div>
+          // Only shows for partially fulfilled orders when the item wasn't
+          // available at the pickup event (e.g. hoodies haven't arrived yet)
+          <div className={`${styles.badge} ${styles.notAvailable}`}>Not picked up</div>
         ) : null}
       </div>
       <div className={styles.itemSummary}>

src/lib/utils.ts

@@ -407,7 +407,7 @@ export const getOrderItemQuantities = (items: PublicOrderItem[]): OrderItemQuant
   return Array.from(itemMap.values()).sort(
     (a, b) =>
       // Group unfulfilled items first
-      +b.fulfilled - +a.fulfilled ||
+      +a.fulfilled - +b.fulfilled ||
       // Alphabetize by item name
       a.option.item.itemName.localeCompare(b.option.item.itemName) ||
       // then by option name