From acb7bd1dfb42f9ba11be916b63e8d34e6fe6a444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1rio=20Guimar=C3=A3es?=
 <49988070+Darguima@users.noreply.github.com>
Date: Tue, 27 Feb 2024 17:40:50 +0000
Subject: [PATCH] feat: permissions button on the QR Scanner (#729)

---
 components/Layout/Layout.tsx                  |   2 +-
 .../QRScanner/BarebonesQRScanner/index.jsx    | 136 ------------------
 .../QRScanner/BarebonesQRScanner/index.tsx    | 104 ++++++++++++++
 .../BarebonesQRScanner/useQRScanner.ts        |  97 +++++++++++++
 .../BarebonesQRScanner/useWebcam.tsx          | 110 ++++++++++++++
 components/QRScanner/index.jsx                |  65 ---------
 components/QRScanner/index.tsx                |  89 ++++++++++++
 layout/SignUp/components/SignUpForm/index.tsx |  22 +--
 layout/Sponsor/Scanner/Scanner.tsx            |  43 +++---
 layout/Staff/Badges/Badges.tsx                |  54 +++----
 layout/Staff/Identifier/Identifier.tsx        |  71 +++++----
 layout/Staff/Prizes/Prizes.tsx                |  25 ++--
 12 files changed, 497 insertions(+), 321 deletions(-)
 delete mode 100644 components/QRScanner/BarebonesQRScanner/index.jsx
 create mode 100644 components/QRScanner/BarebonesQRScanner/index.tsx
 create mode 100644 components/QRScanner/BarebonesQRScanner/useQRScanner.ts
 create mode 100644 components/QRScanner/BarebonesQRScanner/useWebcam.tsx
 delete mode 100644 components/QRScanner/index.jsx
 create mode 100644 components/QRScanner/index.tsx

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 0cc900ce..2003b3c9 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -130,7 +130,7 @@ export default function Layout({ title, description, children }: LayoutProps) {
         </button>
 
         {/* CONTENT */}
-        <main className="w-full px-4 pb-6 pt-20 lg:ml-72 lg:px-20">
+        <main className="flex min-h-screen w-full flex-col px-4 pb-6 pt-20 lg:ml-72 lg:px-20">
           <h2 className="select-none font-ibold text-4xl sm:text-5xl">
             {title}
           </h2>
diff --git a/components/QRScanner/BarebonesQRScanner/index.jsx b/components/QRScanner/BarebonesQRScanner/index.jsx
deleted file mode 100644
index d6b5682e..00000000
--- a/components/QRScanner/BarebonesQRScanner/index.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import jsQR from "jsqr";
-
-function BarebonesQRScanner({ handleCode, pauseRef }) {
-  const canvasRef = useRef(null);
-  const videoRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const animationFrameRef = useRef();
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    const video = videoRef.current;
-
-    navigator.mediaDevices
-      .getUserMedia({ video: { facingMode: "environment" } })
-      .then(function (stream) {
-        //to prevent AbortError on Firefox in strict mode
-        if (!video.srcObject) {
-          setError("");
-          video.srcObject = stream;
-          video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
-          video.play();
-          animationFrameRef.current = requestAnimationFrame(tick);
-        }
-      })
-      .catch((e) => {
-        setError(
-          "We couldn't access your camera. Check if your camera is being used by another app and if you gave us permission to use it."
-        );
-        video.srcObject = undefined;
-      });
-
-    return () => {
-      if (video.srcObject) {
-        video.srcObject.getTracks().forEach((track) => track.stop());
-        video.srcObject = undefined;
-      }
-    };
-  }, []);
-
-  function drawLine(canvas, begin, end, color) {
-    canvas.beginPath();
-    canvas.moveTo(begin.x, begin.y);
-    canvas.lineTo(end.x, end.y);
-    canvas.lineWidth = 4;
-    canvas.strokeStyle = color;
-    canvas.stroke();
-  }
-
-  function parseURL(url) {
-    try {
-      const url_obj = new URL(url);
-      if (url_obj.host !== process.env.NEXT_PUBLIC_QRCODE_HOST) return null;
-      return url_obj.pathname.split("/").at(-1);
-    } catch {
-      return null;
-    }
-  }
-
-  function tick() {
-    const video = videoRef.current;
-    const canvas = canvasRef.current;
-
-    if (!canvas) {
-      cancelAnimationFrame(animationFrameRef.current);
-      return null;
-    }
-
-    const canvas2D = canvas.getContext("2d");
-
-    if (video.readyState === video.HAVE_ENOUGH_DATA) {
-      canvas.hidden = false;
-
-      canvas.height = video.videoHeight;
-      canvas.width = video.videoWidth;
-      canvas2D.drawImage(video, 0, 0, canvas.width, canvas.height);
-      var imageData = canvas2D.getImageData(0, 0, canvas.width, canvas.height);
-      var code = jsQR(imageData.data, imageData.width, imageData.height, {
-        inversionAttempts: "dontInvert",
-      });
-
-      if (code) {
-        drawLine(
-          canvas2D,
-          code.location.topLeftCorner,
-          code.location.topRightCorner,
-          "#78f400"
-        );
-        drawLine(
-          canvas2D,
-          code.location.topRightCorner,
-          code.location.bottomRightCorner,
-          "#78f400"
-        );
-        drawLine(
-          canvas2D,
-          code.location.bottomRightCorner,
-          code.location.bottomLeftCorner,
-          "#78f400"
-        );
-        drawLine(
-          canvas2D,
-          code.location.bottomLeftCorner,
-          code.location.topLeftCorner,
-          "#78f400"
-        );
-
-        if (!pauseRef.current) {
-          const uuid = parseURL(code.data);
-
-          if (uuid) {
-            pauseRef.current = true;
-            handleCode(uuid);
-          }
-        }
-      }
-    }
-    animationFrameRef.current = requestAnimationFrame(tick);
-  }
-
-  return (
-    <>
-      <video ref={videoRef} className="hidden" />
-
-      <div
-        ref={wrapperRef}
-        className="relative flex aspect-square w-full max-w-full justify-center overflow-hidden rounded-2xl border-4 border-solid border-primary bg-primary align-middle"
-      >
-        <canvas ref={canvasRef} className="rounded-2xl" />
-        <p className="absolute m-3 text-white">{error}</p>
-      </div>
-    </>
-  );
-}
-
-export default BarebonesQRScanner;
diff --git a/components/QRScanner/BarebonesQRScanner/index.tsx b/components/QRScanner/BarebonesQRScanner/index.tsx
new file mode 100644
index 00000000..85779313
--- /dev/null
+++ b/components/QRScanner/BarebonesQRScanner/index.tsx
@@ -0,0 +1,104 @@
+import {
+  useRef,
+  useState,
+  useEffect,
+  MutableRefObject,
+  ReactNode,
+} from "react";
+import { FEEDBACK, FeedbackType } from "@components/QRScanner";
+import useWebcamPermissions from "./useWebcam";
+import useQRScanner from "./useQRScanner";
+
+interface Props extends React.HTMLProps<HTMLDivElement> {
+  handleQRCode: (uuid: string) => void;
+  isScanPaused: MutableRefObject<boolean>;
+  unpauseTimeout?: number;
+  setScanFeedback?: (feedback: FeedbackType) => void;
+}
+
+const BarebonesQRScanner: React.FC<Props> = ({
+  handleQRCode,
+  isScanPaused,
+  unpauseTimeout = 700,
+  setScanFeedback = (_) => {},
+  ...rest
+}) => {
+  const [successReadingCode, setSuccessReadingCode] = useState(false);
+  const [camMessage, setCamMessage] = useState<ReactNode>("");
+  const [isCamReady, setIsCamReady] = useState(false);
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationFrameRef = useRef<number>();
+
+  const parseURL = (url: string) => {
+    try {
+      const url_obj = new URL(url);
+
+      if (url_obj.host !== process.env.NEXT_PUBLIC_QRCODE_HOST) {
+        setScanFeedback(FEEDBACK.INVALID_QR);
+        return null;
+      }
+
+      return url_obj.pathname.split("/").at(-1);
+    } catch {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (!successReadingCode) {
+      const timeoutId = setTimeout(() => {
+        setScanFeedback(FEEDBACK.SCANNING);
+        isScanPaused.current = false;
+      }, unpauseTimeout);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [successReadingCode]);
+
+  useWebcamPermissions({
+    videoRef,
+    onPermissionGranted: () => {
+      setIsCamReady(true);
+    },
+    setCamMessage,
+  });
+
+  useQRScanner({
+    isCamReady,
+    videoRef,
+    canvasRef,
+    animationFrameRef,
+    isScanPaused,
+    parseURL,
+    handleQRCode,
+    setSuccessReadingCode,
+  });
+
+  return (
+    <div
+      {...rest}
+      className={
+        "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-2xl bg-primary " +
+        rest.className
+      }
+    >
+      <div className="absolute h-full w-full bg-white opacity-5" />
+
+      <video ref={videoRef} className="absolute h-full w-full object-cover" />
+      <canvas
+        ref={canvasRef}
+        className="absolute h-full w-full rounded-2xl object-cover"
+      />
+
+      <div className="absolute flex h-full w-full items-center justify-center">
+        <div className="p-16 text-center text-white">{camMessage}</div>
+      </div>
+    </div>
+  );
+};
+
+export default BarebonesQRScanner;
diff --git a/components/QRScanner/BarebonesQRScanner/useQRScanner.ts b/components/QRScanner/BarebonesQRScanner/useQRScanner.ts
new file mode 100644
index 00000000..2888876b
--- /dev/null
+++ b/components/QRScanner/BarebonesQRScanner/useQRScanner.ts
@@ -0,0 +1,97 @@
+import { MutableRefObject, useEffect } from "react";
+import jsQR from "jsqr";
+
+interface useQRScannerProps {
+  isCamReady: boolean;
+  videoRef: MutableRefObject<HTMLVideoElement>;
+  canvasRef: MutableRefObject<HTMLCanvasElement>;
+  animationFrameRef: MutableRefObject<number>;
+  isScanPaused: MutableRefObject<boolean>;
+  parseURL: (url: string) => string | null;
+  handleQRCode: (uuid: string) => void;
+  setSuccessReadingCode: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const useQRScanner = ({
+  isCamReady,
+  videoRef,
+  canvasRef,
+  animationFrameRef,
+  isScanPaused,
+  parseURL,
+  handleQRCode,
+  setSuccessReadingCode,
+}: useQRScannerProps) => {
+  useEffect(() => {
+    drawQRBoundingBox();
+  }, [isCamReady]);
+
+  const drawQRBoundingBox = () => {
+    const video = videoRef?.current;
+    const canvas = canvasRef?.current;
+
+    if (!video || !canvas) {
+      cancelAnimationFrame(animationFrameRef.current);
+      return null;
+    }
+
+    const canvas2D = canvas.getContext("2d");
+    let successReadingCode = false;
+
+    if (video.readyState === video.HAVE_ENOUGH_DATA) {
+      canvas.height = video.videoHeight;
+      canvas.width = video.videoWidth;
+
+      // Will use the canvas to get the video image data, and pass it to jsQR, but will then clear the canvas to just draw the bounding box
+      canvas2D.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const imageData = canvas2D.getImageData(
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+      const code = jsQR(imageData.data, imageData.width, imageData.height, {
+        inversionAttempts: "dontInvert",
+      });
+      canvas2D.clearRect(0, 0, canvas.width, canvas.height);
+
+      if (code) {
+        successReadingCode = true;
+
+        const {
+          topLeftCorner,
+          topRightCorner,
+          bottomLeftCorner,
+          bottomRightCorner,
+        } = code.location;
+
+        canvas2D.beginPath();
+
+        canvas2D.moveTo(topLeftCorner.x, topLeftCorner.y);
+        canvas2D.lineTo(topRightCorner.x, topRightCorner.y);
+        canvas2D.lineTo(bottomRightCorner.x, bottomRightCorner.y);
+        canvas2D.lineTo(bottomLeftCorner.x, bottomLeftCorner.y);
+        canvas2D.lineTo(topLeftCorner.x, topLeftCorner.y);
+
+        canvas2D.lineWidth = 4;
+        canvas2D.strokeStyle = "#78f400";
+        canvas2D.stroke();
+
+        if (!isScanPaused.current) {
+          const uuid = parseURL(code.data);
+
+          if (uuid) {
+            handleQRCode(uuid);
+            isScanPaused.current = true;
+          }
+        }
+      }
+    }
+
+    setSuccessReadingCode(successReadingCode);
+
+    animationFrameRef.current = requestAnimationFrame(drawQRBoundingBox);
+  };
+};
+
+export default useQRScanner;
diff --git a/components/QRScanner/BarebonesQRScanner/useWebcam.tsx b/components/QRScanner/BarebonesQRScanner/useWebcam.tsx
new file mode 100644
index 00000000..3853934a
--- /dev/null
+++ b/components/QRScanner/BarebonesQRScanner/useWebcam.tsx
@@ -0,0 +1,110 @@
+import { useEffect, ReactNode } from "react";
+import Button from "components/Button";
+
+const CAPTURE_OPTIONS = {
+  audio: false,
+  video: { facingMode: "environment" },
+};
+
+interface useWebcamPermissionsRequestProps {
+  videoRef: React.RefObject<HTMLVideoElement>;
+  setCamMessage: React.Dispatch<React.SetStateAction<ReactNode>>;
+  onPermissionGranted: () => void;
+}
+
+const checkWebcamPermissions = async () => {
+  try {
+    // @ts-ignore - camera is not yet recognized as a permission, but is already available in most browsers
+    const result = await navigator.permissions?.query({ name: "camera" });
+    return result.state === "granted";
+  } catch (e) {
+    // Firefox has not yet supported the permissions API for camera
+    const devices = await navigator.mediaDevices.enumerateDevices();
+
+    const permissions = devices
+      .filter(({ kind }) => kind === "videoinput")
+      .filter(({ label }) => label !== "");
+
+    // if the permission is temporary label will be "", but we will have the session storage
+    const isPermGrantedSessionStorage = sessionStorage.getItem(
+      "isWebcamPermissionGranted"
+    );
+
+    return permissions.length > 0 || isPermGrantedSessionStorage === "true";
+  }
+};
+
+export const requestWebcam = ({
+  videoRef,
+  setCamMessage,
+  onPermissionGranted,
+}: useWebcamPermissionsRequestProps) => {
+  const video = videoRef.current;
+
+  if (!video?.srcObject) {
+    navigator.mediaDevices
+      .getUserMedia(CAPTURE_OPTIONS)
+      .then((stream) => {
+        if (!video?.srcObject) {
+          video.srcObject = stream;
+          video.setAttribute("playsinline", "true"); // required to tell iOS safari we don't want fullscreen
+          video.play();
+
+          sessionStorage.setItem("isWebcamPermissionGranted", "true");
+
+          setCamMessage("");
+          onPermissionGranted();
+        }
+      })
+      .catch((err) => {
+        sessionStorage.setItem("isWebcamPermissionGranted", "false");
+        if (!video?.srcObject && err instanceof DOMException) {
+          setCamMessage(
+            "We couldn't access your camera. Check if your camera is being used by another app and if you gave us permission to use it."
+          );
+        }
+      });
+  }
+};
+
+const useWebcam = ({
+  videoRef,
+  setCamMessage,
+  onPermissionGranted,
+}: useWebcamPermissionsRequestProps) => {
+  useEffect(() => {
+    checkWebcamPermissions()
+      .then((arePermissionsGranted) => {
+        if (!arePermissionsGranted) {
+          setCamMessage(
+            <Button
+              title="Click me to open QRScanner!"
+              onClick={() => {
+                requestWebcam({ videoRef, setCamMessage, onPermissionGranted });
+                setCamMessage(
+                  "Grant camera permissions to be able to scan QR codes."
+                );
+              }}
+            />
+          );
+        } else {
+          requestWebcam({ videoRef, setCamMessage, onPermissionGranted });
+        }
+      })
+      .catch(() => {
+        requestWebcam({ videoRef, setCamMessage, onPermissionGranted });
+      });
+
+    const video = videoRef.current;
+
+    return () => {
+      if (video && video.srcObject) {
+        (video.srcObject as MediaStream).getTracks().forEach((track) => {
+          track.stop();
+        });
+      }
+    };
+  }, []);
+};
+
+export default useWebcam;
diff --git a/components/QRScanner/index.jsx b/components/QRScanner/index.jsx
deleted file mode 100644
index 5d05d4be..00000000
--- a/components/QRScanner/index.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import BarebonesQRScanner from "./BarebonesQRScanner";
-import Button from "@components/Button";
-
-export const FEEDBACK = {
-  SUCCESS: {
-    message: "Success",
-    color: "bg-success",
-  },
-  SCANNING: {
-    message: "Scanning...",
-    color: "bg-gray-500",
-  },
-  ALREADY_HAS: {
-    message: "User already has badge",
-    color: "bg-warning",
-  },
-  FAILURE: {
-    message: "Failure",
-    color: "bg-failure",
-  },
-  INVALID: {
-    message: "Invalid QR",
-    color: "bg-failure",
-  },
-};
-
-function QRScanner({
-  handleCode,
-  pauseRef,
-  text,
-  feedback,
-  showScanner,
-  setScanner,
-  removeClose,
-}) {
-  if (!showScanner) {
-    return null;
-  }
-
-  return (
-    <div className="grid grid-cols-1 gap-6">
-      <div className="m-auto flex h-16 w-full items-center justify-center rounded-2xl bg-quinary text-black">
-        <p className="font-ibold">{text}</p>
-      </div>
-      <BarebonesQRScanner handleCode={handleCode} pauseRef={pauseRef} />
-      <div className="w-auto">
-        <div
-          className={`${feedback.color} m-auto flex h-16 w-full items-center justify-center rounded-2xl`}
-        >
-          <p className="font-ibold font-bold">{feedback.message}</p>
-        </div>
-      </div>
-      {removeClose !== true && (
-        <Button
-          title="Close"
-          onClick={() => {
-            setScanner(false);
-          }}
-        ></Button>
-      )}
-    </div>
-  );
-}
-
-export default QRScanner;
diff --git a/components/QRScanner/index.tsx b/components/QRScanner/index.tsx
new file mode 100644
index 00000000..add79746
--- /dev/null
+++ b/components/QRScanner/index.tsx
@@ -0,0 +1,89 @@
+import { MutableRefObject, useEffect, useState } from "react";
+import BarebonesQRScanner from "./BarebonesQRScanner";
+import Button from "@components/Button";
+
+export interface FeedbackType {
+  message: string;
+  color: string;
+}
+
+export const FEEDBACK = {
+  SCANNING: {
+    message: "Scanning...",
+    color: "bg-gray-500",
+  },
+  SUCCESS: {
+    message: "Success",
+    color: "bg-success",
+  },
+  ALREADY_HAS_BADGE: {
+    message: "User already has badge",
+    color: "bg-warning",
+  },
+  FAILURE: {
+    message: "Failure",
+    color: "bg-failure",
+  },
+  INVALID_QR: {
+    message: "Invalid QR",
+    color: "bg-failure",
+  },
+  OUT_OF_PERIOD: {
+    message: "Out of badge-gifting period",
+    color: "bg-failure",
+  },
+};
+
+interface Props {
+  topText: string;
+  handleQRCode: (uuid: string) => void;
+  isScanPaused: MutableRefObject<boolean>;
+  scanFeedback: FeedbackType;
+  setScanFeedback: (feedback: FeedbackType) => void;
+  showScanner?: boolean;
+  setShowScanner?: (show: boolean) => void;
+  removeCloseButton?: boolean;
+}
+
+const QRScanner: React.FC<Props> = ({
+  topText,
+  handleQRCode,
+  isScanPaused,
+  scanFeedback,
+  setScanFeedback,
+  showScanner = true,
+  setShowScanner = (_) => {},
+  removeCloseButton = false,
+}) => {
+  if (!showScanner) {
+    return <></>;
+  }
+
+  return (
+    <div className="m-auto w-full max-w-lg">
+      <div className="flex h-16 w-full items-center justify-center rounded-2xl bg-quinary text-black">
+        <p className="font-ibold">{topText}</p>
+      </div>
+
+      <BarebonesQRScanner
+        className="my-6"
+        handleQRCode={handleQRCode}
+        isScanPaused={isScanPaused}
+        setScanFeedback={setScanFeedback}
+      />
+
+      <div className="w-full">
+        <div
+          className={`${scanFeedback.color} m-auto flex h-16 w-full items-center justify-center rounded-2xl`}
+        >
+          <p className="font-ibold font-bold">{scanFeedback.message}</p>
+        </div>
+      </div>
+      {removeCloseButton !== true && (
+        <Button title="Close" onClick={() => setShowScanner(false)} />
+      )}
+    </div>
+  );
+};
+
+export default QRScanner;
diff --git a/layout/SignUp/components/SignUpForm/index.tsx b/layout/SignUp/components/SignUpForm/index.tsx
index 270d42e7..7d8777fa 100644
--- a/layout/SignUp/components/SignUpForm/index.tsx
+++ b/layout/SignUp/components/SignUpForm/index.tsx
@@ -26,11 +26,13 @@ export default function SignUpForm({ courses }) {
   const [course, updateCourse] = useState("");
   const [password, updatePassword] = useState("");
   const [password_confirmation, updatePasswordConfirmation] = useState("");
-  const [uuid, setUUID] = useState();
+  const [uuid, setUUID] = useState<string | undefined>();
 
   const [local_error, updateError] = useState("");
   const [scanned, updateScanned] = useState(false);
-  const [scanning, updateScanning] = useState(false);
+  const [showQRScanner, setShowQRScanner] = useState(false);
+  const pauseScanRef = useRef(false);
+
   const [termsAccepted, setTermsAccepted] = useState(false);
 
   const pauseRef = useRef(false);
@@ -136,11 +138,11 @@ export default function SignUpForm({ courses }) {
           onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
         />
         <Button
-          title={scanning ? "STOP SCANNING" : "SCAN QR"}
+          title={showQRScanner ? "STOP SCANNING" : "SCAN QR"}
           className="h-12 w-full border-quinary bg-quinary text-secondary"
           onClick={(e) => {
             e.preventDefault();
-            updateScanning(!scanning);
+            setShowQRScanner(!showQRScanner);
           }}
         />
         <Checkbox
@@ -169,16 +171,16 @@ export default function SignUpForm({ courses }) {
             QR Code scanned successfully: {uuid}
           </p>
         )}
-        {scanning && (
-          <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        {showQRScanner && (
+          <div className="fixed top-1/2 left-1/2 h-full max-h-[512px] w-full max-w-[512px] -translate-x-1/2 -translate-y-1/2 p-2">
             <BarebonesQRScanner
-              pauseRef={pauseRef}
-              handleCode={(code) => {
-                pauseRef.current = false;
-                updateScanning(false);
+              handleQRCode={(code: string) => {
+                pauseScanRef.current = false;
+                setShowQRScanner(false);
                 updateScanned(true);
                 setUUID(code);
               }}
+              isScanPaused={pauseScanRef}
             />
           </div>
         )}
diff --git a/layout/Sponsor/Scanner/Scanner.tsx b/layout/Sponsor/Scanner/Scanner.tsx
index 84ea82f2..b1d90324 100644
--- a/layout/Sponsor/Scanner/Scanner.tsx
+++ b/layout/Sponsor/Scanner/Scanner.tsx
@@ -2,27 +2,19 @@ import { useState, useRef, useEffect } from "react";
 import { giveBadge } from "@lib/api";
 import { withAuth, useAuth, ISponsor } from "@context/Auth";
 
-import QRScanner, { FEEDBACK } from "@components/QRScanner";
+import QRScanner, { FEEDBACK, FeedbackType } from "@components/QRScanner";
 import Layout from "@components/Layout";
 
 const SponsorBadges: React.FC = () => {
   const { user } = useAuth() as { user: ISponsor };
-  const pauseRef = useRef(false);
-  const [feedback, setFeedback] = useState<typeof FEEDBACK.SCANNING>(
+  const pauseScanRef = useRef(false);
+  const [scanFeedback, setScanFeedback] = useState<FeedbackType>(
     FEEDBACK.SCANNING
   );
 
-  useEffect(() => {
-    if (feedback != FEEDBACK.SCANNING) {
-      setTimeout(() => {
-        pauseRef.current = false;
-        setFeedback(FEEDBACK.SCANNING);
-      }, 700);
-    }
-  }, [feedback]);
-
   const handleUUID = (uuid: string) => {
-    let feedback_var: typeof FEEDBACK.SCANNING;
+    let feedback_var = FEEDBACK.FAILURE;
+
     giveBadge(uuid, "69420")
       .then((response) => {
         if (response.redeem) {
@@ -32,15 +24,16 @@ const SponsorBadges: React.FC = () => {
         }
       })
       .catch((errors) => {
-        if (errors.response.data.errors?.unique_attendee_badge) {
-          feedback_var = FEEDBACK.ALREADY_HAS;
+        const error = errors.response.data.errors;
+        if (error?.unique_attendee_badge) {
+          feedback_var = FEEDBACK.ALREADY_HAS_BADGE;
+        } else if (error.end_badge) {
+          feedback_var = FEEDBACK.OUT_OF_PERIOD;
         } else {
           feedback_var = FEEDBACK.FAILURE;
         }
       })
-      .finally(() => {
-        setFeedback(feedback_var);
-      });
+      .finally(() => setScanFeedback(feedback_var));
   };
 
   return (
@@ -48,15 +41,15 @@ const SponsorBadges: React.FC = () => {
       title="Scanner"
       description="Recompensa os teus visitantes com o badge"
     >
-      <div className="mt-5 select-none">
+      <div className="mt-5 flex flex-grow select-none justify-center">
         <QRScanner
-          handleCode={handleUUID}
-          pauseRef={pauseRef}
-          text={user.name}
-          feedback={feedback}
+          handleQRCode={handleUUID}
+          isScanPaused={pauseScanRef}
+          topText={user.name}
+          scanFeedback={scanFeedback}
+          setScanFeedback={setScanFeedback}
           showScanner={true}
-          setScanner={true}
-          removeClose={true}
+          removeCloseButton={true}
         />
       </div>
     </Layout>
diff --git a/layout/Staff/Badges/Badges.tsx b/layout/Staff/Badges/Badges.tsx
index 417fbb25..10fd1dcb 100644
--- a/layout/Staff/Badges/Badges.tsx
+++ b/layout/Staff/Badges/Badges.tsx
@@ -11,13 +11,13 @@ import QRScanner, { FEEDBACK } from "@components/QRScanner";
 import Badge from "@components/Badge";
 import GoToTop from "@components/GoToTop";
 
-function Badges() {
+const Badges: React.FC = () => {
   const [allBadges, updateAllBadges] = useState([]);
   const [filter, updateFilter] = useState(null);
   const [searchInput, setSearchInput] = useState("");
   const pauseRef = useRef(false);
   const badgeRef = useRef(null);
-  const [feedback, setFeedback] = useState(FEEDBACK.SCANNING);
+  const [scanFeedback, setScanFeedback] = useState(FEEDBACK.SCANNING);
   const [showScanner, setScanner] = useState(false);
   const [error, updateError] = useState(false);
 
@@ -29,27 +29,14 @@ function Badges() {
       .catch((_) => updateError(true));
   }, []);
 
-  useEffect(() => {
-    if (feedback != FEEDBACK.SCANNING) {
-      const id = setTimeout(() => {
-        pauseRef.current = false;
-        setFeedback(FEEDBACK.SCANNING);
-      }, 700);
-
-      return () => {
-        clearTimeout(id);
-      };
-    }
-    return () => {};
-  }, [feedback]);
-
-  const handleBadgeSelected = (badge) => {
+  const handleBadgeSelected = (badge: string) => {
     badgeRef.current = badge;
     setScanner(true);
   };
 
-  const handleUUID = (uuid) => {
+  const handleUUID = (uuid: string) => {
     let feedback_var = FEEDBACK.FAILURE;
+
     giveBadge(uuid, badgeRef.current.id)
       .then((response) => {
         if (response.redeem) {
@@ -59,35 +46,36 @@ function Badges() {
         }
       })
       .catch((errors) => {
-        if (errors.response.data.errors?.unique_attendee_badge) {
-          feedback_var = FEEDBACK.ALREADY_HAS;
+        const error = errors.response.data.errors;
+        if (error?.unique_attendee_badge) {
+          feedback_var = FEEDBACK.ALREADY_HAS_BADGE;
+        } else if (error.end_badge) {
+          feedback_var = FEEDBACK.OUT_OF_PERIOD;
         } else {
           feedback_var = FEEDBACK.FAILURE;
         }
       })
-      .finally(() => {
-        setFeedback(feedback_var);
-      });
+      .finally(() => setScanFeedback(feedback_var));
   };
 
   return (
     <Layout title="Badges" description="Award a badge">
       {showScanner ? (
-        <div className="mt-5">
+        <div className="mt-5 flex flex-grow select-none justify-center">
           <QRScanner
-            handleCode={handleUUID}
-            pauseRef={pauseRef}
-            text={badgeRef?.current.name}
-            feedback={feedback}
+            handleQRCode={handleUUID}
+            isScanPaused={pauseRef}
+            topText={badgeRef?.current.name}
+            scanFeedback={scanFeedback}
+            setScanFeedback={setScanFeedback}
             showScanner={showScanner}
-            setScanner={setScanner}
-            removeClose={false}
+            setShowScanner={setScanner}
           />
         </div>
       ) : (
         <>
-          <div className="border-slate-400 pt-10 text-white xl:flex xl:flex-auto">
-            <div className="m-auto flex flex-auto select-none space-x-5">
+          <div className="border-slate-400 pt-10 text-white xl:flex xl:flex-auto xl:items-start">
+            <div className="flex flex-auto select-none space-x-5">
               <p className="mb-10 text-2xl font-bold xl:mb-0">Filter by</p>
               <Filter onChange={updateFilter} />
             </div>
@@ -137,6 +125,6 @@ function Badges() {
       <GoToTop />
     </Layout>
   );
-}
+};
 
 export default withAuth(Badges);
diff --git a/layout/Staff/Identifier/Identifier.tsx b/layout/Staff/Identifier/Identifier.tsx
index e9d15a8e..ed244bf9 100644
--- a/layout/Staff/Identifier/Identifier.tsx
+++ b/layout/Staff/Identifier/Identifier.tsx
@@ -7,58 +7,51 @@ import { withAuth } from "@context/Auth";
 import Layout from "@components/Layout";
 import QRScanner, { FEEDBACK } from "@components/QRScanner";
 
-function Identifier() {
-  const pauseRef = useRef(false);
-  const [text, setText] = useState("None");
-  const [feedback, setFeedback] = useState(FEEDBACK.SCANNING);
-  const [showScanner, setScanner] = useState(true);
-
-  const resetScannerState = () => {
-    new Promise((r) => setTimeout(r, 500)).then(() => {
-      pauseRef.current = false;
-      setFeedback(FEEDBACK.SCANNING);
-    });
-  };
-
-  useEffect(() => {
-    if (feedback != FEEDBACK.SCANNING) {
-      const id = setTimeout(() => {
-        pauseRef.current = false;
-        setFeedback(FEEDBACK.SCANNING);
-      }, 700);
+const defaultTopText = "No QR Code Found!";
 
-      return () => {
-        clearTimeout(id);
-      };
-    }
+function Identifier() {
+  const [topText, setTopText] = useState(defaultTopText);
+  const [showQRScanner, setShowQRScanner] = useState(true);
 
-    return () => {};
-  }, [feedback]);
+  const isScanPaused = useRef(false);
+  const [scanFeedback, setScanFeedback] = useState(FEEDBACK.SCANNING);
 
-  const handleUUID = (uuid) => {
+  const handleUUID = (uuid: string) => {
     getAttendeeByID(uuid)
       .then((response) => {
-        setText(`${response.data.name} | ${response.data.email}`);
-        setFeedback(FEEDBACK.SUCCESS);
+        setTopText(`${response.data.name} | ${response.data.email}`);
+        setScanFeedback(FEEDBACK.SUCCESS);
       })
       .catch((_) => {
-        setFeedback(FEEDBACK.FAILURE);
-        setText("None");
-        resetScannerState();
+        setScanFeedback(FEEDBACK.FAILURE);
+        setTopText(defaultTopText);
       });
   };
 
+  useEffect(() => {
+    if (scanFeedback == FEEDBACK.SCANNING) {
+      const timeoutID = setTimeout(() => {
+        setTopText(defaultTopText);
+      }, 3000);
+
+      return () => {
+        clearTimeout(timeoutID);
+      };
+    }
+  }, [scanFeedback]);
+
   return (
     <Layout title="Identifier" description="Identify an attendee">
-      <div className="mt-5 select-none">
+      <div className="mt-5 flex flex-grow select-none justify-center">
         <QRScanner
-          handleCode={handleUUID}
-          pauseRef={pauseRef}
-          text={text}
-          feedback={feedback}
-          showScanner={showScanner}
-          setScanner={setScanner}
-          removeClose={true}
+          topText={topText}
+          handleQRCode={handleUUID}
+          isScanPaused={isScanPaused}
+          scanFeedback={scanFeedback}
+          setScanFeedback={setScanFeedback}
+          showScanner={showQRScanner}
+          setShowScanner={setShowQRScanner}
+          removeCloseButton={true}
         />
       </div>
     </Layout>
diff --git a/layout/Staff/Prizes/Prizes.tsx b/layout/Staff/Prizes/Prizes.tsx
index 3a2a4e90..8be71935 100644
--- a/layout/Staff/Prizes/Prizes.tsx
+++ b/layout/Staff/Prizes/Prizes.tsx
@@ -9,25 +9,26 @@ import QRScanner, { FEEDBACK } from "@components/QRScanner";
 function Prizes() {
   const { user } = useAuth() as { user: IStaff };
   const router = useRouter();
-  const pauseRef = useRef(false);
-  const [feedback, setFeedback] = useState(FEEDBACK.SCANNING);
-  const [showScanner, setScanner] = useState(true);
+  const pauseScanRef = useRef(false);
+  const [scanFeedback, setScanFeedback] = useState(FEEDBACK.SCANNING);
+  const [showQRScanner, setShowQRScanner] = useState(true);
 
-  const handleUUID = (uuid) => {
+  const handleUUID = (uuid: String) => {
     router.push(`/staff/prizes/${uuid}`);
   };
 
   return (
     <Layout title="Prizes" description="Mark a prize as redeemed">
-      <div className="mt-5 select-none">
+      <div className="mt-5 flex flex-grow select-none justify-center">
         <QRScanner
-          handleCode={handleUUID}
-          pauseRef={pauseRef}
-          text={user.email}
-          feedback={feedback}
-          showScanner={showScanner}
-          setScanner={setScanner}
-          removeClose={true}
+          topText={user.email}
+          handleQRCode={handleUUID}
+          isScanPaused={pauseScanRef}
+          scanFeedback={scanFeedback}
+          setScanFeedback={setScanFeedback}
+          showScanner={showQRScanner}
+          setShowScanner={setShowQRScanner}
+          removeCloseButton={true}
         />
       </div>
     </Layout>