feat(match): ux overhaul (#439)

* fix(match): permanent scroll bar in FF

* fix(scanner): ignore ISBNs when blids found

* fix(scanner): wait for alert-close before countdown

* feat(scanner): don't say 'error'

* feat(scanner): tell users not to accept ugly books

* feat(scanner): tell users not to accept ugly books

* feat(scanner): scroll countdown into view

* feat(usermatchdetail): scan-button blue on click

* feat(manualreg): improve buttons

src/components/CountdownToRedirect.tsx

@@ -1,6 +1,6 @@
 import { LinearProgress, Box, Typography } from "@mui/material";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const CountdownToRedirect = ({
   path,
@@ -11,6 +11,14 @@ const CountdownToRedirect = ({
 }) => {
   const [progress, setProgress] = useState(100);
   const router = useRouter();
+  const elementRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    elementRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
+  }, []);
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -30,7 +38,7 @@ const CountdownToRedirect = ({
   }, [path, router, seconds]);
 
   return (
-    <Box sx={{ width: "100%", mt: 1 }}>
+    <Box sx={{ width: "100%", mt: 1 }} ref={elementRef}>
       <Typography variant="h6" sx={{ mb: 2, textAlign: "center" }}>
         Du blir videresendt om {Math.ceil((progress / 100) * seconds)}{" "}
         sekunder...

src/components/OrderHistory.tsx

@@ -118,7 +118,7 @@ const OrderHistory = ({ orders }: { orders: Order[] }) => {
                         width: "80%",
                         display: "flex",
                         flexDirection: "column",
-                        overflowY: "scroll",
+                        overflowY: "auto",
                       }}
                     >
                       <Typography

src/components/matches/Scanner/ManualRegistrationModal.tsx

@@ -24,7 +24,7 @@ const ManualRegistrationModal = ({
 }) => {
   const [manualInput, setManualInput] = useState("");
   return (
-    <Dialog open={open}>
+    <Dialog open={open} onClose={handleClose}>
       <DialogContent>
         <Stack>
           <Typography variant="h4">Manuell registrering</Typography>
@@ -43,19 +43,9 @@ const ManualRegistrationModal = ({
         </Stack>
       </DialogContent>
       <DialogActions>
-        <Button
-          startIcon={<InputRounded />}
-          color={"success"}
-          variant={"outlined"}
-          onClick={() => {
-            handleSubmit(manualInput);
-          }}
-        >
-          Bekreft
-        </Button>
         <Button
           color={"info"}
-          variant="contained"
+          variant="outlined"
           startIcon={<Close />}
           onClick={() => {
             setManualInput("");
@@ -64,6 +54,16 @@ const ManualRegistrationModal = ({
         >
           Lukk
         </Button>
+        <Button
+          startIcon={<InputRounded />}
+          color={"success"}
+          variant={"outlined"}
+          onClick={() => {
+            handleSubmit(manualInput);
+          }}
+        >
+          Bekreft
+        </Button>
       </DialogActions>
     </Dialog>
   );

src/components/matches/Scanner/ScannerModal.tsx

@@ -1,7 +1,7 @@
 import { Close, InputRounded } from "@mui/icons-material";
 import { AlertColor, Box, Button, Card, Modal, Stack } from "@mui/material";
 import Typography from "@mui/material/Typography";
-import { Scanner } from "@yudiel/react-qr-scanner";
+import { Scanner, IDetectedBarcode } from "@yudiel/react-qr-scanner";
 import { AxiosResponse } from "axios";
 import React, { useEffect, useState } from "react";
 
@@ -99,18 +99,52 @@ const ScannerModal = ({
       }
     } catch (error) {
       setFeedback({
-        text: String(error),
+        text: error instanceof Error ? error.message : String(error),
         severity: "error",
         visible: true,
       });
     }
   };
 
   useEffect(() => {
-    if (open && expectedItems.length === fulfilledItems.length) {
+    if (
+      open &&
+      expectedItems.length === fulfilledItems.length &&
+      !(feedback.visible && feedback.severity === "info")
+    ) {
       handleClose();
     }
-  }, [expectedItems.length, fulfilledItems.length, handleClose, open]);
+  }, [
+    expectedItems.length,
+    fulfilledItems.length,
+    handleClose,
+    open,
+    feedback.visible,
+    feedback.severity,
+  ]);
+
+  const handleCodeDetection = async (
+    detectedCodes: IDetectedBarcode[],
+  ): Promise<void> => {
+    const didFindBlid = detectedCodes.some(
+      (code) => determineScannedTextType(code.rawValue) === TextType.BLID,
+    );
+    const codesToProcess = didFindBlid
+      ? detectedCodes.filter(
+          (code) => determineScannedTextType(code.rawValue) === TextType.BLID,
+        )
+      : detectedCodes;
+
+    for (const code of codesToProcess) {
+      await handleRegistration(code.rawValue).catch((error) =>
+        console.error("Failed to handle scan", error),
+      );
+      // Arbitrary delay to somewhat avoid races the backend isn't smart enough to handle
+      await new Promise((resolve) => {
+        window.setTimeout(resolve, 250);
+      });
+    }
+  };
 
   return (
     <Modal
@@ -142,17 +176,7 @@ const ScannerModal = ({
             constraints={{ facingMode: "environment" }}
             formats={["qr_code", "code_128", "ean_8", "ean_13"]}
             components={{ torch: true }}
-            onScan={async (detectedCodes) => {
-              for (const code of detectedCodes) {
-                await handleRegistration(code.rawValue).catch((error) =>
-                  console.error("Failed to handle scan", error),
-                );
-                // Arbitrary delay to somewhat avoid races the backend isn't smart enough to handle
-                await new Promise((resolve) => {
-                  window.setTimeout(resolve, 250);
-                });
-              }
-            }}
+            onScan={handleCodeDetection}
           />
         </Box>
         <Box width={"90%"}>
@@ -169,7 +193,7 @@ const ScannerModal = ({
         </Box>
         <Box
           sx={{
-            overflowY: "scroll",
+            overflowY: "auto",
             maxHeight: "30rem",
             mt: "1rem",
           }}

src/components/matches/UserMatchDetail.tsx

@@ -107,6 +107,7 @@ const UserMatchDetail = ({
               Du skal møte en annen elev og utveksle bøker. Det er viktig at den
               som mottar bøker scanner hver bok, hvis ikke blir ikke bøkene
               registrert som levert, og avsender kan få faktura.
+              {!isSender && " Hvis en bok er ødelagt, ikke ta den imot."}
             </Typography>
           </Box>
           <MatchHeader>Du skal møte</MatchHeader>
@@ -127,7 +128,7 @@ const UserMatchDetail = ({
           >
             <ScannerTutorial />
             <Button
-              sx={{ background: "green" }}
+              color="success"
               startIcon={<QrCodeScannerIcon />}
               variant={"contained"}
               onClick={() => setScanModalOpen(true)}