feat(match): stricter sender-fulfilled-calculation (#435)

Make the item/match fulfilled calculcation stricter for the sender by
requiring them to both have their book delivered to someone, but also
that their match receives a copy of the book. This prevents people from
thinking they're finished if they've swapped books with someone else,
and that person has delivered their books. Now, they will still see that
they need to give away those books to the intended recipient.

src/components/NavBar.tsx

@@ -97,7 +97,7 @@ export default function NavBar() {
           <DropDownMenu />
         </Toolbar>
       </AppBar>
-      <Toolbar sx={{ marginBottom: "10px" }} />
+      <Toolbar sx={{ display: "inline-block" }} />
     </Box>
   );
 }

src/components/matches/MatchDetail.tsx

@@ -50,13 +50,8 @@ const MatchDetail = ({ matchId }: { matchId: string }) => {
   }
 
   return (
-    <Card sx={{ paddingBottom: "2rem" }}>
-      <Container
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
+    <Card sx={{ padding: "1rem 0 2rem 0" }}>
+      <Container>
         <DynamicLink
           href={`/${BL_CONFIG.collection.match}`}
           sx={{ marginTop: "1rem", marginBottom: "0.5rem" }}

src/components/matches/UserMatchDetail.tsx

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 
 import CountdownToRedirect from "@/components/CountdownToRedirect";
 import {
-  calculateFulfilledUserMatchCustomerItems,
+  calculateFulfilledUserMatchItems,
   calculateItemStatuses,
   ItemStatus,
   MatchHeader,
@@ -31,11 +31,8 @@ const UserMatchDetail = ({
   const [redirectCountdownStarted, setRedirectCountdownStarted] =
     useState(false);
   const isSender = match.sender === currentUserId;
-  const fulfilledItems = calculateFulfilledUserMatchCustomerItems(
-    match,
-    isSender,
-  );
-  const otherPersonFulfilledItems = calculateFulfilledUserMatchCustomerItems(
+  const fulfilledItems = calculateFulfilledUserMatchItems(match, isSender);
+  const otherPersonFulfilledItems = calculateFulfilledUserMatchItems(
     match,
     !isSender,
   );
@@ -70,13 +67,6 @@ const UserMatchDetail = ({
           )}
         </Box>
       )}
-      {fulfilledItems.length !== otherPersonFulfilledItems.length &&
-        isSender && (
-          <Alert severity={"warning"} sx={{ marginBottom: "1rem" }}>
-            Noen av de overleverte bøkene har vært på andres vegne. Ta kontakt
-            med stand for mer informasjon.
-          </Alert>
-        )}
 
       <ProgressBar
         percentComplete={
@@ -90,9 +80,21 @@ const UserMatchDetail = ({
         }
       />
 
+      {isSender &&
+        otherPersonFulfilledItems.some(
+          (item) => !fulfilledItems.includes(item),
+        ) && (
+          <Alert severity={"warning"} sx={{ my: "1rem" }}>
+            Noen av bøkene du har levert tilhørte en annen elev. Du er selv
+            ansvarlig for at bøkene du opprinnelig fikk utdelt blir levert. Hvis
+            noen andre leverer bøkene dine, eller vi finner dem når skapene
+            tømmes, vil de bli markert som levert.
+          </Alert>
+        )}
+
       {!isFulfilled && (
         <>
-          <Box>
+          <Box sx={{ my: "1rem" }}>
             <Typography variant="h2">Hvordan fungerer det?</Typography>
             <Typography>
               Du skal møte en annen elev og utveksle bøker. Det er viktig at den

src/components/matches/matches-helper.tsx

@@ -12,7 +12,7 @@ export interface ItemStatus {
 
 export const MatchHeader = ({ children }: { children: ReactNode }) => {
   return (
-    <Typography variant="h2" sx={{ marginTop: 4, marginBottom: 2 }}>
+    <Typography variant="h2" sx={{ marginTop: "2rem", marginBottom: "1rem" }}>
       {children}
     </Typography>
   );
@@ -33,21 +33,26 @@ export function calculateFulfilledStandMatchItems(
   return { fulfilledHandoffItems, fulfilledPickupItems };
 }
 
-export function calculateFulfilledUserMatchCustomerItems(
+export function calculateFulfilledUserMatchItems(
   match: UserMatchWithDetails,
   isSender: boolean,
 ): string[] {
   return match.expectedItems.filter((item) =>
-    (isSender ? match.deliveredBlIds : match.receivedBlIds).some(
-      (blId) => match.blIdToItemMap[blId] === item,
+    // For a sender, an item must have been both delivered and received to be fulfilled, though
+    // it does not need to be the same blId; someone else can deliver your book, and you can
+    // deliver someone else's, and that's fine.
+    // For the receiver, we only care that the book is received.
+    (isSender
+      ? [match.deliveredBlIds, match.receivedBlIds]
+      : [match.receivedBlIds]
+    ).every((registeredBlIds) =>
+      registeredBlIds.some((blId) => match.blIdToItemMap[blId] === item),
     ),
   );
 }
 
 export function calculateItemStatuses<T extends MatchWithDetails>(
   match: T,
-  // surpressing because it thinks "match" is an actual variable
-  // eslint-disable-next-line no-unused-vars
   expectedItemsSelector: (match: T) => string[],
   fulfilledItems: string[],
 ): ItemStatus[] {
@@ -86,7 +91,7 @@ export function isMatchFulfilled(
     );
   } else {
     return (
-      calculateFulfilledUserMatchCustomerItems(match, isSender).length >=
+      calculateFulfilledUserMatchItems(match, isSender).length >=
       match.expectedItems.length
     );
   }
@@ -108,7 +113,7 @@ export function isMatchBegun(
       calculateFulfilledStandMatchItems(match);
     return fulfilledHandoffItems.length > 0 || fulfilledPickupItems.length > 0;
   } else {
-    return calculateFulfilledUserMatchCustomerItems(match, isSender).length > 0;
+    return calculateFulfilledUserMatchItems(match, isSender).length > 0;
   }
 }
 

src/components/matches/matchesList/ProgressBar.tsx

@@ -18,8 +18,11 @@ const ProgressBar: React.FC<{
               flexDirection: "row",
               placeItems: "center",
               gap: "0.2rem",
+              marginBottom: "0.5rem",
+            }
+          : {
+              marginBottom: "0.5rem",
             }
-          : {}
       }
     >
       {finished && <CheckCircle color="success" sx={{ height: "1.3rem" }} />}

src/components/matches/matchesList/UserMatchListItem.tsx

@@ -2,7 +2,7 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 
 import {
-  calculateFulfilledUserMatchCustomerItems,
+  calculateFulfilledUserMatchItems,
   isMatchBegun,
   isMatchFulfilled,
   isUserSenderInMatch,
@@ -24,10 +24,7 @@ const UserMatchListItem: React.FC<{
   const isSender = isUserSenderInMatch(match, currentUserId);
   const isBegun = isMatchBegun(match, isSender);
   const isFulfilled = isMatchFulfilled(match, isSender);
-  const fulfilledItems = calculateFulfilledUserMatchCustomerItems(
-    match,
-    isSender,
-  );
+  const fulfilledItems = calculateFulfilledUserMatchItems(match, isSender);
   return (
     <MatchListItemBox finished={isFulfilled} matchId={match.id}>
       <Typography variant="cardHeader" component="h3">