Merge pull request #284 from HiEventsDev/develop

Author: daveearley

frontend/public/sounds/scan-error.wav

@@ -40,6 +40,13 @@
     z-index: 2;
   }
 
+  .soundToggle {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    z-index: 2;
+  }
+
   .closeButton {
     position: absolute;
     top: 20px;

frontend/public/sounds/scan-in-progress.wav

@@ -2,7 +2,7 @@ import {useEffect, useRef, useState} from 'react';
 import QrScanner from 'qr-scanner';
 import {useDebouncedValue} from '@mantine/hooks';
 import classes from './QrScanner.module.scss';
-import {IconBulb, IconBulbOff, IconCameraRotate, IconX} from "@tabler/icons-react";
+import {IconBulb, IconBulbOff, IconCameraRotate, IconVolume, IconVolumeOff, IconX} from "@tabler/icons-react";
 import {Anchor, Button, Menu} from "@mantine/core";
 import {showError} from "../../../utilites/notifications.tsx";
 import {t, Trans} from "@lingui/macro";
@@ -29,6 +29,20 @@ export const QRScannerComponent = (props: QRScannerComponentProps) => {
     const [isScanFailed, setIsScanFailed] = useState(false);
     const [isScanSucceeded, setIsScanSucceeded] = useState(false);
 
+    const scanSuccessAudioRef = useRef<HTMLAudioElement | null>(null);
+    const scanErrorAudioRef = useRef<HTMLAudioElement | null>(null);
+    const scanInProgressAudioRef = useRef<HTMLAudioElement | null>(null);
+
+    const [isSoundOn, setIsSoundOn] = useState(() => {
+        const storedIsSoundOn = localStorage.getItem("qrScannerSoundOn");
+        return storedIsSoundOn === null ? true : JSON.parse(storedIsSoundOn);
+    });
+
+    useEffect(() => {
+        localStorage.setItem("qrScannerSoundOn", JSON.stringify(isSoundOn));
+    }, [isSoundOn]);
+
+
     useEffect(() => {
         latestProcessedAttendeeIdsRef.current = processedAttendeeIds;
     }, [processedAttendeeIds]);
@@ -64,30 +78,44 @@ export const QRScannerComponent = (props: QRScannerComponentProps) => {
                 showError(t`You already scanned this ticket`);
 
                 setIsScanFailed(true);
-                setInterval(function() {
+                setInterval(function () {
                     setIsScanFailed(false);
                 }, 500);
+                if (isSoundOn && scanErrorAudioRef.current) {
+                    scanErrorAudioRef.current.play();
+                }
 
                 return;
             }
 
             if (!isCheckingIn && !alreadyScanned) {
                 setIsCheckingIn(true);
+
+                if (isSoundOn && scanInProgressAudioRef.current) {
+                    scanInProgressAudioRef.current.play();
+                }
+
                 props.onCheckIn(debouncedAttendeeId, (didSucceed) => {
                         setIsCheckingIn(false);
                         setProcessedAttendeeIds(prevIds => [...prevIds, debouncedAttendeeId]);
                         setCurrentAttendeeId(null);
 
                         if (didSucceed) {
                             setIsScanSucceeded(true);
-                            setInterval(function() {
+                            setInterval(function () {
                                 setIsScanSucceeded(false);
                             }, 500);
+                            if (isSoundOn && scanSuccessAudioRef.current) {
+                                scanSuccessAudioRef.current.play();
+                            }
                         } else {
                             setIsScanFailed(true);
-                            setInterval(function() {
+                            setInterval(function () {
                                 setIsScanFailed(false);
                             }, 500);
+                            if (isSoundOn && scanErrorAudioRef.current) {
+                                scanErrorAudioRef.current.play();
+                            }
                         }
                     }, () => {
                         setIsCheckingIn(false);
@@ -126,6 +154,10 @@ export const QRScannerComponent = (props: QRScannerComponentProps) => {
         }
     };
 
+    const handleSoundToggle = () => {
+        setIsSoundOn(!isSoundOn);
+    };
+
     const requestPermission = async () => {
         setPermissionDenied(false);
         await startScanner();
@@ -184,6 +216,13 @@ export const QRScannerComponent = (props: QRScannerComponentProps) => {
                 {!isFlashAvailable && <IconBulbOff color={'#ffffff95'} size={30}/>}
                 {isFlashAvailable && <IconBulb color={isFlashOn ? 'yellow' : '#ffffff95'} size={30}/>}
             </Button>
+            <Button onClick={handleSoundToggle} variant={'transparent'} className={classes.soundToggle}>
+                {isSoundOn && <IconVolume color={'#ffffff95'} size={30}/>}
+                {!isSoundOn && <IconVolumeOff color={'#ffffff95'} size={30}/>}
+            </Button>
+            <audio ref={scanSuccessAudioRef} src="/sounds/scan-success.wav"/>
+            <audio ref={scanErrorAudioRef} src="/sounds/scan-error.wav"/>
+            <audio ref={scanInProgressAudioRef} src="/sounds/scan-in-progress.wav"/>
             <Button onClick={handleClose} variant={'transparent'} className={classes.closeButton}>
                 <IconX color={'#ffffff95'} size={30}/>
             </Button>

frontend/public/sounds/scan-success.wav

@@ -21,7 +21,7 @@ export const TieredPricing = ({ticket, event, form, ticketIndex}: TieredPricingP
             {ticket?.prices?.map((price, index) => {
                 return (
                     <div key={index} className={'hi-price-tier-row'}>
-                        <Group justify={'space-between'}>
+                        <Group justify={'space-between'} wrap={'nowrap'}>
                             <div className={'hi-price-tier'}>
                                 <div className={'hi-price-tier-label'}>{price.label}</div>
                                 <div className={'hi-price-tier-price'}>

frontend/src/components/common/AttendeeCheckInTable/QrScanner.module.scss

@@ -33,7 +33,7 @@ import {PoweredByFooter} from "../../../common/PoweredByFooter";
 import {Event} from "../../../../types.ts";
 import {eventsClientPublic} from "../../../../api/event.client.ts";
 import {promoCodeClientPublic} from "../../../../api/promo-code.client.ts";
-import {IconX} from "@tabler/icons-react"
+import {IconX, IconChevronRight} from "@tabler/icons-react"
 import {getSessionIdentifier} from "../../../../utilites/sessionIdentifier.ts";
 import {Constants} from "../../../../constants.ts";
 
@@ -297,7 +297,7 @@ const SelectTickets = (props: SelectTicketsProps) => {
                                 .map((n) => n.toString());
                             quantityRange.unshift("0");
 
-                            const [ticketIsCollapsed, {toggle: collapseTicket}] = useDisclosure(!ticket.start_collapsed);
+                            const [ticketIsCollapsed, {toggle: collapseTicket}] = useDisclosure(ticket.start_collapsed);
 
                             return (
                                 <div key={ticket.id} className={'hi-ticket-row'}>
@@ -328,15 +328,14 @@ const SelectTickets = (props: SelectTicketsProps) => {
                                                 {(!ticket.is_available && ticket.type === 'TIERED') && (
                                                     <TicketAvailabilityMessage ticket={ticket} event={event}/>
                                                 )}
-
-                                                <span className={'hi-ticket-collapse-arrow'}>
-                                                    {ticketIsCollapsed ? '\u25BC' : '\u25B6'}
-                                                </span>
                                             </div>
+                                            <span className={`hi-ticket-collapse-arrow`}>
+                                                <IconChevronRight className={ticketIsCollapsed ? "" : "open"} />
+                                            </span>
                                         </UnstyledButton>
                                     </div>
 
-                                    <Collapse in={ticketIsCollapsed} className={'hi-ticket-content'}>
+                                    <Collapse in={!ticketIsCollapsed} className={'hi-ticket-content'}>
                                         <div className={'hi-price-tiers-rows'}>
                                             <TieredPricing
                                                 ticketIndex={ticketIndex}

frontend/src/components/common/AttendeeCheckInTable/QrScanner.tsx

@@ -40,6 +40,7 @@
           align-items: center;
 
           h3 {
+            flex: 1;
             margin: 10px 0;
 
             a {
@@ -48,14 +49,23 @@
           }
 
           .hi-ticket-title-metadata {
-            .hi-ticket-collapse-arrow {
-              color: var(--widget-secondary-color, var(--tk-primary));
-              margin-left: 10px;
-            }
-
             margin-left: 5px;
             font-weight: normal;
           }
+
+          .hi-ticket-collapse-arrow {
+            display: flex;
+            color: var(--widget-secondary-color, var(--tk-primary));
+            margin-left: 10px;
+
+            svg {
+              transition: all 0.1s linear;
+            }
+
+            svg.open {
+              transform: rotate(90deg);
+            }
+          }
         }
       }