resolved dependency issues with react-qr-reader

apps/web-admin/package.json

@@ -53,7 +53,6 @@
     "react-icons": "^5.0.1",
     "react-konva": "^18.2.10",
     "react-markdown": "^9.0.1",
-    "react-qr-reader": "3.0.0-beta-1",
     "react-query": "^3.39.3",
     "react-remove-scroll": "^2.6.0",
     "react-simplemde-editor": "^5.2.0",

apps/web-admin/src/components/Scanner.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { QrReader } from 'react-qr-reader';
 import { Box } from '@chakra-ui/react';
+import { useZxing } from 'react-zxing';
 
 const Scanner = ({ result, setResult }) => {
   const handleScan = (result) => {
@@ -12,15 +12,20 @@ const Scanner = ({ result, setResult }) => {
   const handleError = (err) => {
     console.error(err);
   };
-
+  const { ref } = useZxing({
+    onDecodeResult(result) {
+      setResult(result.getText());
+    },
+  });
   return (
-    <QrReader
-      height="100%"
-      width="100%"
-      constraints={{ facingMode: 'environment' }}
-      onResult={handleScan}
-      onError={handleError}
-    />
+    // <QrReader
+    //   height="100%"
+    //   width="100%"
+    //   constraints={{ facingMode: 'environment' }}
+    //   onResult={handleScan}
+    //   onError={handleError}
+    // />
+    <video ref={ref} style={{ height: '100%', width: '100%' }} onError={handleError} />
   );
 };
 

apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/index.jsx

@@ -168,7 +168,7 @@ export default function CheckOutParticipant() {
         </FormControl>
 
         <Button type="submit" width="100%" my="4" isLoading={loading} loadingText="Please Wait">
-          Check In
+          Check Out
         </Button>
       </form>
     </DashboardLayout>