Skip to content
This repository has been archived by the owner on Dec 18, 2024. It is now read-only.

Commit

Permalink
fix(scanner): comments from #371
Browse files Browse the repository at this point in the history 
* refactor(ManualRegistrationModal): loading => waiting

* refactor: unify scanner feedback state

* style: add max width for scanner tutorial

* style: add padding top for tutorial

* style: change close tutorial button color

* fix: close tutorial modal when user clicks outside of it

* style: change close scanner button color

* chore: slightly change info text to cover more cases

* fix(p2p-instructions): update styling
  • Loading branch information
@AdrianAndersen
AdrianAndersen authored Sep 13, 2023
1 parent 137177b commit 1f7e84b
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 101 deletions.
8 changes: 4 additions & 4 deletions src/components/matches/Scanner/ManualRegistrationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ManualRegistrationModal = ({
handleSubmit: (scannedText: string) => Promise<boolean>;
}) => {
const [manualInput, setManualInput] = useState("");
const [loading, setLoading] = useState(false);
const [waiting, setWaiting] = useState(false);
return (
<Modal open={open}>
<Container
Expand Down Expand Up @@ -58,12 +58,12 @@ const ManualRegistrationModal = ({
Lukk
</Button>
<LoadingButton
loading={loading}
loading={waiting}
variant={"contained"}
onClick={async () => {
setLoading(true);
setWaiting(true);
const success = await handleSubmit(manualInput);
setLoading(false);
setWaiting(false);
if (success) {
setManualInput("");
}
Expand Down
33 changes: 20 additions & 13 deletions src/components/matches/Scanner/Scanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,28 @@ function determineScannedTextType(scannedText: string): ScannedTextType {
return TextType.UNKNOWN;
}

type Feedback = {
text: string;
severity: AlertColor;
visible: boolean;
};

const Scanner = ({ forceUpdate }: { forceUpdate: () => void }) => {
const [scanModalOpen, setScanModalOpen] = useState(false);
/*
const [manualRegistrationModalOpen, setManualRegistrationModalOpen] =
useState(false);
*/

const [feedback, setFeedback] = useState("");
const [feedbackSeverity, setFeedbackSeverity] =
useState<AlertColor>("success");
const [feedbackVisible, setFeedbackVisible] = useState(false);
const [feedback, setFeedback] = useState<Feedback>({
text: "",
severity: "success",
visible: false,
});
const scannerLocked = useRef(false);

const displayFeedback = (feedback: string, severity: AlertColor) => {
setFeedback(feedback);
setFeedbackSeverity(severity);
setFeedbackVisible(true);
const displayFeedback = (text: string, severity: AlertColor) => {
setFeedback({ text, severity, visible: true });
};

const handleRegistration = async (scannedText: string): Promise<boolean> => {
Expand Down Expand Up @@ -99,10 +104,12 @@ const Scanner = ({ forceUpdate }: { forceUpdate: () => void }) => {
>
<ScannerTutorial />
<ScannerFeedback
open={feedbackVisible}
severity={feedbackSeverity}
feedback={feedback}
handleClose={() => setFeedbackVisible(false)}
open={feedback.visible}
severity={feedback.severity}
feedback={feedback.text}
handleClose={() =>
setFeedback((previous) => ({ ...previous, visible: false }))
}
/>
<Button
sx={{ background: "green" }}
Expand Down Expand Up @@ -136,7 +143,7 @@ const Scanner = ({ forceUpdate }: { forceUpdate: () => void }) => {
open={scanModalOpen}
handleClose={() => {
setScanModalOpen(false);
setFeedbackVisible(false);
setFeedback((previous) => ({ ...previous, visible: false }));
}}
handleSubmit={handleRegistration}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/matches/Scanner/ScannerModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ScannerModal = ({
</Typography>
<CropFreeIcon sx={{ zIndex: 100, fontSize: "200px" }} />
<Button
color={"error"}
color={"info"}
sx={{ position: "absolute", top: 80, zIndex: 100 }}
variant={"contained"}
onClick={handleClose}
Expand Down
176 changes: 94 additions & 82 deletions src/components/matches/Scanner/ScannerTutorial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
} from "@mui/material";
import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
import Image from "next/image";
import { Box } from "@mui/system";

const ScannerTutorial = () => {
const [tutorialOpen, setTutorialOpen] = useState(false);
Expand All @@ -21,96 +22,107 @@ const ScannerTutorial = () => {
>
Vis instruksjoner
</Button>
<Modal open={tutorialOpen} sx={{ overflow: "scroll" }}>
<Container
component={Paper}
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
marginTop: "4rem",
}}
>
<Typography variant="h4">Hvordan scanne bøker</Typography>

<Card
<Modal
open={tutorialOpen}
sx={{ overflow: "scroll" }}
onClose={() => setTutorialOpen(false)}
>
<Box>
<Container
component={Paper}
sx={{
padding: "1rem",
bgcolor: "#fefefa",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "25rem",
flexDirection: "column",
marginY: "2rem",
width: "95%",
}}
>
<Typography sx={{ mb: ".4rem" }}>
1. Scan eller skriv inn en boks unike ID, som ser slik ut:
</Typography>
<Image
style={{ borderRadius: "2%" }}
src={"/ullernUID.png"}
alt={"Ullern VGS unik ID"}
width={300}
height={150}
/>
<Typography sx={{ mb: ".4rem", mt: "1rem" }}>Eller slik</Typography>
<Image
style={{ borderRadius: "2%" }}
src={"/blid.jpg"}
alt={"BLID"}
width={300}
height={150}
/>
<Typography sx={{ mb: ".4rem", mt: "1rem" }}>
Sliter du med å finne IDen? Sjekk innsiden av boka, eller be om
hjelp fra kontaktelev eller stand
<Typography variant="h4" sx={{ mt: "1rem" }}>
Hvordan scanne bøker
</Typography>
</Card>

<Card
sx={{
padding: "1rem",
bgcolor: "#fefefa",
mt: "1rem",
width: "25rem",
}}
>
<Typography>3. Gjenta til du har scannet alle bøkene </Typography>
</Card>
<Card
sx={{
padding: "1rem",
bgcolor: "#fefefa",
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "20rem",
}}
>
<Typography sx={{ mb: ".4rem" }}>
1. Scan eller skriv inn en boks unike ID, som ser slik ut:
</Typography>
<Image
style={{ borderRadius: "2%" }}
src={"/ullernUID.png"}
alt={"Ullern VGS unik ID"}
width={300}
height={150}
/>
<Typography sx={{ mb: ".4rem", mt: "1rem" }}>
Eller slik
</Typography>
<Image
style={{ borderRadius: "2%" }}
src={"/blid.jpg"}
alt={"BLID"}
width={300}
height={150}
/>
<Typography sx={{ mb: ".4rem", mt: "1rem" }}>
Sliter du med å finne IDen? Sjekk innsiden av boka, eller be om
hjelp fra kontaktelev eller stand
</Typography>
</Card>

<Card
sx={{
padding: "1rem",
bgcolor: "#fefefa",
mt: "1rem",
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "25rem",
}}
>
<Typography>
4. Sjekk at både du og den som ga deg bøkene har fått det grønne
merket{" "}
</Typography>
<Image
style={{ borderRadius: "2%" }}
src={"/ok_check.png"}
alt={"OK Checkmark"}
width={300}
height={150}
/>
</Card>
<Button
sx={{ marginY: "1rem" }}
color={"error"}
variant={"contained"}
onClick={() => setTutorialOpen(false)}
>
Lukk
</Button>
</Container>
<Card
sx={{
padding: "1rem",
bgcolor: "#fefefa",
mt: "1rem",
width: "20rem",
}}
>
<Typography>3. Gjenta til du har scannet alle bøkene </Typography>
</Card>

<Card
sx={{
padding: "1rem",
bgcolor: "#fefefa",
mt: "1rem",
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "20rem",
}}
>
<Typography>
4. Sjekk at både du og den som ga deg bøkene har fått det grønne
merket{" "}
</Typography>
<Image
style={{ borderRadius: "2%" }}
src={"/ok_check.png"}
alt={"OK Checkmark"}
width={300}
height={150}
/>
</Card>
<Button
sx={{ marginY: "1rem" }}
color={"success"}
variant={"contained"}
onClick={() => setTutorialOpen(false)}
>
Lukk
</Button>
</Container>
</Box>
</Modal>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/matches/UserMatchDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const UserMatchDetail = ({
{fulfilledItems.length !== otherPersonFulfilledItems.length &&
isSender && (
<Alert severity={"warning"} sx={{ marginBottom: "1rem" }}>
Noen av bøkene du har levert har vært på andres vegne. Ta kontakt
Noen av de overleverte bøkene har vært på andres vegne. Ta kontakt
med stand for mer informasjon.
</Alert>
)}
Expand Down

1 comment on commit 1f7e84b

@vercel
Copy link

@vercel vercel bot commented on 1f7e84b Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bl-next – ./

bl-next-git-production-boklisten.vercel.app
bl-next-boklisten.vercel.app
next.boklisten.no

Please sign in to comment.