Merge pull request #269 from grablair/feat/qr-scan-response-improvements

HiEventsDev · Oct 28, 2024 · fd7d28f · fd7d28f
2 parents e05cd1d + 60eb4db
commit fd7d28f
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 280 deletions.
diff --git a/frontend/src/components/common/AttendeeCheckInTable/AttendeesCheckInTable.module.scss b/frontend/src/components/common/AttendeeCheckInTable/AttendeesCheckInTable.module.scss
diff --git a/frontend/src/components/common/AttendeeCheckInTable/QrScanner.module.scss b/frontend/src/components/common/AttendeeCheckInTable/QrScanner.module.scss
@@ -62,7 +62,8 @@
     position: absolute;
     animation: colorfulBorder 10s infinite;
     border-radius: 10px;
-    outline: solid 50vmax #472e7840;
+    outline: solid 50vmax rgb(71 46 120 / 50%);
+    transition: outline-color .2s ease-out;
     min-width: 200px;
     min-height: 200px;
 
@@ -72,6 +73,18 @@
     }
   }
 
+  .scannerOverlay.success {
+    outline: solid 50vmax rgb(80 148 80 / 75%);
+  }
+
+  .scannerOverlay.failure {
+    outline: solid 50vmax rgb(193 72 72 / 75%);
+  }
+
+  .scannerOverlay.checkingIn {
+    outline: solid 50vmax rgb(172 158 85 / 60%);
+  }
+
   video {
     width: 100vw !important;
     height: 100vh !important;

diff --git a/frontend/src/components/common/AttendeeCheckInTable/QrScanner.tsx b/frontend/src/components/common/AttendeeCheckInTable/QrScanner.tsx
@@ -8,7 +8,7 @@ import {showError} from "../../../utilites/notifications.tsx";
 import {t, Trans} from "@lingui/macro";
 
 interface QRScannerComponentProps {
-    onCheckIn: (attendeePublicId: string, onRequestComplete: () => void, onFailure: () => void) => void;
+    onCheckIn: (attendeePublicId: string, onRequestComplete: (didSucceed: boolean) => void, onFailure: () => void) => void;
     onClose: () => void;
 }
 
@@ -25,7 +25,9 @@ export const QRScannerComponent = (props: QRScannerComponentProps) => {
     const latestProcessedAttendeeIdsRef = useRef<string[]>([]);
 
     const [currentAttendeeId, setCurrentAttendeeId] = useState<string | null>(null);
-    const [debouncedAttendeeId] = useDebouncedValue(currentAttendeeId, 500);
+    const [debouncedAttendeeId] = useDebouncedValue(currentAttendeeId, 1000);
+    const [isScanFailed, setIsScanFailed] = useState(false);
+    const [isScanSucceeded, setIsScanSucceeded] = useState(false);
 
     useEffect(() => {
         latestProcessedAttendeeIdsRef.current = processedAttendeeIds;
@@ -54,17 +56,39 @@ export const QRScannerComponent = (props: QRScannerComponentProps) => {
             const latestProcessedAttendeeIds = latestProcessedAttendeeIdsRef.current;
             const alreadyScanned = latestProcessedAttendeeIds.includes(debouncedAttendeeId);
 
+            if (isScanSucceeded || isScanFailed) {
+                return;
+            }
+
             if (alreadyScanned) {
                 showError(t`You already scanned this ticket`);
+
+                setIsScanFailed(true);
+                setInterval(function() {
+                    setIsScanFailed(false);
+                }, 500);
+
                 return;
             }
 
             if (!isCheckingIn && !alreadyScanned) {
                 setIsCheckingIn(true);
-                props.onCheckIn(debouncedAttendeeId, () => {
+                props.onCheckIn(debouncedAttendeeId, (didSucceed) => {
                         setIsCheckingIn(false);
                         setProcessedAttendeeIds(prevIds => [...prevIds, debouncedAttendeeId]);
                         setCurrentAttendeeId(null);
+
+                        if (didSucceed) {
+                            setIsScanSucceeded(true);
+                            setInterval(function() {
+                                setIsScanSucceeded(false);
+                            }, 500);
+                        } else {
+                            setIsScanFailed(true);
+                            setInterval(function() {
+                                setIsScanFailed(false);
+                            }, 500);
+                        }
                     }, () => {
                         setIsCheckingIn(false);
                         setCurrentAttendeeId(null);
@@ -178,7 +202,7 @@ export const QRScannerComponent = (props: QRScannerComponentProps) => {
                     </Menu.Dropdown>
                 </Menu>
             </Button>
-            <div className={classes.scannerOverlay}/>
+            <div className={`${classes.scannerOverlay} ${isScanSucceeded ? classes.success : ""} ${isScanFailed ? classes.failure : ""} ${isCheckingIn ? classes.checkingIn : ""}`}/>
         </div>
     );
 };
diff --git a/frontend/src/components/common/AttendeeCheckInTable/index.tsx b/frontend/src/components/common/AttendeeCheckInTable/index.tsx
diff --git a/frontend/src/components/layouts/CheckIn/index.tsx b/frontend/src/components/layouts/CheckIn/index.tsx
@@ -100,14 +100,14 @@ const CheckIn = () => {
         )
     }
 
-    const handleQrCheckIn = (attendeePublicId: string, onRequestComplete: () => void, onFailure: () => void) => {
+    const handleQrCheckIn = (attendeePublicId: string, onRequestComplete: (didSucceed: boolean) => void, onFailure: () => void) => {
         checkInMutation.mutate({
             checkInListShortId: checkInListShortId,
             attendeePublicId: attendeePublicId,
         }, {
             onSuccess: ({errors}) => {
                 if (onRequestComplete) {
-                    onRequestComplete()
+                    onRequestComplete(!(errors && errors[attendeePublicId]))
                 }
                 // Show error if there is an error for this specific attendee
                 // It's a bulk endpoint, so even if there's an error it returns a 200
@@ -211,7 +211,6 @@ const CheckIn = () => {
             />)
     }
 
-
     if (checkInList?.is_expired) {
         return (
             <NoResultsSplash