P2P Improvements (#432)

* feat(Match): update user match DTO

* feat(Scanner): complete redesign

* fix(Scanner): dynamic view height for stupid mobile browsers

* fix(Scanner): only display itemStatuses once

package.json

@@ -49,7 +49,7 @@
     "validator": "^13.11.0"
   },
   "devDependencies": {
-    "@boklisten/bl-model": "^0.25.37",
+    "@boklisten/bl-model": "^0.25.41",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@testing-library/react": "^15.0.5",

src/components/CountdownToRedirect.tsx

@@ -0,0 +1,48 @@
+import { LinearProgress, Box, Typography } from "@mui/material";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+const CountdownToRedirect = ({
+  path,
+  seconds,
+}: {
+  path: string;
+  seconds: number;
+}) => {
+  const [progress, setProgress] = useState(100);
+  const router = useRouter();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((previousProgress) => {
+        if (previousProgress <= 0) {
+          clearInterval(interval);
+          router.push(path);
+          return 0;
+        }
+        return previousProgress - 10 / seconds;
+      });
+    }, 100);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [path, router, seconds]);
+
+  return (
+    <Box sx={{ width: "100%", mt: 1 }}>
+      <Typography variant="h6" sx={{ mb: 2, textAlign: "center" }}>
+        Du blir videresendt om {Math.ceil((progress / 100) * seconds)}{" "}
+        sekunder...
+      </Typography>
+      <LinearProgress
+        color={"success"}
+        variant="determinate"
+        value={progress}
+        sx={{ height: 10, borderRadius: 5 }}
+      />
+    </Box>
+  );
+};
+
+export default CountdownToRedirect;

src/components/matches/MatchDetail.tsx

@@ -61,7 +61,7 @@ const MatchDetail = ({ matchId }: { matchId: string }) => {
         </DynamicLink>
 
         {match._variant === MatchVariant.StandMatch && (
-          <StandMatchDetail match={match} currentUserId={userId} />
+          <StandMatchDetail match={match} />
         )}
         {match._variant === MatchVariant.UserMatch && (
           <UserMatchDetail match={match} currentUserId={userId} />

src/components/matches/MatchItemTable.tsx

@@ -31,27 +31,29 @@ const MatchItemTable = ({
           </TableRow>
         </TableHead>
         <TableBody>
-          {itemStatuses.map((item) => (
-            <TableRow key={item.id}>
-              <TableCell>{item.title}</TableCell>
-              <Tooltip
-                title={
-                  (item.fulfilled
-                    ? "Denne boken er registrert som "
-                    : "Denne boken har ikke blitt registrert som ") +
-                  (isSender ? "levert" : "mottatt")
-                }
-              >
-                <TableCell sx={{ textAlign: "center" }}>
-                  {item.fulfilled ? (
-                    <CheckBoxIcon sx={{ color: "green" }} />
-                  ) : (
-                    <ErrorIcon sx={{ color: "orange" }} />
-                  )}
-                </TableCell>
-              </Tooltip>
-            </TableRow>
-          ))}
+          {itemStatuses
+            .sort((a, b) => Number(a.fulfilled) - Number(b.fulfilled))
+            .map((item) => (
+              <TableRow key={item.id}>
+                <TableCell>{item.title}</TableCell>
+                <Tooltip
+                  title={
+                    (item.fulfilled
+                      ? "Denne boken er registrert som "
+                      : "Denne boken har ikke blitt registrert som ") +
+                    (isSender ? "levert" : "mottatt")
+                  }
+                >
+                  <TableCell sx={{ textAlign: "center" }}>
+                    {item.fulfilled ? (
+                      <CheckBoxIcon sx={{ color: "green" }} />
+                    ) : (
+                      <ErrorIcon sx={{ color: "orange" }} />
+                    )}
+                  </TableCell>
+                </Tooltip>
+              </TableRow>
+            ))}
         </TableBody>
       </Table>
     </TableContainer>

src/components/matches/OtherPersonContact.tsx

@@ -1,21 +1,17 @@
-import { MatchVariant, MatchWithDetails } from "@boklisten/bl-model";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import { Box, Typography } from "@mui/material";
 import React from "react";
 
 import DynamicLink from "@/components/DynamicLink";
-import ContactInfo from "@/components/info/ContactInfo";
+import { UserMatchWithDetails } from "@/utils/types";
 
 const OtherPersonContact = ({
   match,
   currentUserId,
 }: {
-  match: MatchWithDetails;
+  match: UserMatchWithDetails;
   currentUserId: string;
 }) => {
-  if (match._variant === MatchVariant.StandMatch) {
-    return <ContactInfo />;
-  }
   const otherPerson =
     match.receiver === currentUserId
       ? match.senderDetails

src/components/matches/Scanner/ManualRegistrationModal.tsx

@@ -1,11 +1,12 @@
-import { LoadingButton } from "@mui/lab";
+import { Close, InputRounded } from "@mui/icons-material";
 import {
-  Box,
+  Alert,
   Button,
-  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
   InputLabel,
-  Modal,
-  Paper,
+  Stack,
   TextField,
   Typography,
 } from "@mui/material";
@@ -19,61 +20,52 @@ const ManualRegistrationModal = ({
   open: boolean;
   handleClose: () => void;
   // eslint-disable-next-line no-unused-vars
-  handleSubmit: (scannedText: string) => Promise<boolean>;
+  handleSubmit: (scannedText: string) => void;
 }) => {
   const [manualInput, setManualInput] = useState("");
-  const [waiting, setWaiting] = useState(false);
   return (
-    <Modal open={open}>
-      <Container
-        component={Paper}
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          flexDirection: "column",
-          marginTop: "4rem",
-        }}
-      >
-        <Typography variant="h4">Manuell registrering</Typography>
-        <InputLabel sx={{ mt: "1rem", mb: ".4rem" }}>
-          Skriv inn bokas unike ID
-        </InputLabel>
-        <TextField
-          value={manualInput}
-          label="12345678 / a1b2c3d4e5f6"
-          sx={{ marginBottom: "1rem" }}
-          onChange={(event) => setManualInput(event.target.value)}
-        />
-        <Box sx={{ marginBottom: "1rem" }}>
-          <Button
-            sx={{ marginRight: "1rem" }}
-            color={"error"}
-            variant={"contained"}
-            onClick={() => {
-              setManualInput("");
-              handleClose();
-            }}
-          >
-            Lukk
-          </Button>
-          <LoadingButton
-            loading={waiting}
-            variant={"contained"}
-            onClick={async () => {
-              setWaiting(true);
-              const success = await handleSubmit(manualInput);
-              setWaiting(false);
-              if (success) {
-                setManualInput("");
-              }
-            }}
-          >
-            Bekreft
-          </LoadingButton>
-        </Box>
-      </Container>
-    </Modal>
+    <Dialog open={open}>
+      <DialogContent>
+        <Stack>
+          <Typography variant="h4">Manuell registrering</Typography>
+          <Alert severity="info" sx={{ mt: 1 }}>
+            Skal kun brukes dersom bokas unike ID ikke lar seg skanne
+          </Alert>
+          <InputLabel sx={{ mt: "1rem", mb: ".4rem" }}>
+            Skriv inn bokas unike ID
+          </InputLabel>
+          <TextField
+            value={manualInput}
+            label="8 siffer eller 12 bokstaver"
+            sx={{ marginBottom: "1rem" }}
+            onChange={(event) => setManualInput(event.target.value)}
+          />
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<InputRounded />}
+          color={"success"}
+          variant={"outlined"}
+          onClick={() => {
+            handleSubmit(manualInput);
+          }}
+        >
+          Bekreft
+        </Button>
+        <Button
+          color={"info"}
+          variant="contained"
+          startIcon={<Close />}
+          onClick={() => {
+            setManualInput("");
+            handleClose();
+          }}
+        >
+          Lukk
+        </Button>
+      </DialogActions>
+    </Dialog>
   );
 };