developed qrCode for tokens

kar-thee · Mar 15, 2022 · 8dfe975 · 8dfe975
1 parent 4c1fbd2
commit 8dfe975
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,10 +8,12 @@
     "@mui/icons-material": "^5.5.0",
     "@mui/material": "^5.5.0",
     "axios": "^0.26.1",
+    "qr-scanner": "^1.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",
     "react-loading": "^2.0.3",
+    "react-qr-code": "^2.0.3",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0"
   },

diff --git a/src/components/private/canteen/VerifyToken.js b/src/components/private/canteen/VerifyToken.js
@@ -1,4 +1,4 @@
-import { Box, Button, TextField } from "@mui/material";
+import { Box, Button, Stack, TextField } from "@mui/material";
 import React from "react";
 import ComponentWrapper from "../ComponentWrapper";
 
@@ -18,11 +18,15 @@ const VerifyToken = ({ state, handleChange, VerifyTokenFunc }) => {
             overflow: "hidden",
           }}
         />
-        <Box sx={{ py: 2, my: 2 }}>
-          <Button variant="contained" onClick={() => VerifyTokenFunc()}>
+        <Stack sx={{ py: 2, my: 2 }}>
+          <Button
+            variant="contained"
+            onClick={() => VerifyTokenFunc()}
+            sx={{ my: 1 }}
+          >
             Verify
           </Button>
-        </Box>
+        </Stack>
       </Box>
     </ComponentWrapper>
   );

diff --git a/src/components/private/employee/GenerateTokenResponse.js b/src/components/private/employee/GenerateTokenResponse.js
@@ -1,5 +1,6 @@
 import { Box, Button, Stack, Typography } from "@mui/material";
 import React from "react";
+import GenerateQrCode from "../../../helpers/qrcode-generate/GenerateQrCode";
 import ComponentWrapper from "../ComponentWrapper";
 
 const GenerateTokenResponse = ({ msgState, goBackFunc }) => {
@@ -23,6 +24,7 @@ const GenerateTokenResponse = ({ msgState, goBackFunc }) => {
           >
             {msgState.msg}
           </Typography>
+
           {/* only success, show below */}
           {msgState.type === "success" && (
             <>
@@ -52,6 +54,25 @@ const GenerateTokenResponse = ({ msgState, goBackFunc }) => {
                   {msgState.tokenString}
                 </Typography>
               </Box>
+
+              <Box
+                sx={{
+                  pt: 5,
+                  pb: 3,
+                  px: 4,
+                  my: 4,
+                  border: "1px solid brown",
+                  textAlign: { xs: "unset", sm: "center" },
+                  mx: { xs: 1, md: 0 },
+                }}
+              >
+                <Typography variant="h5" sx={{ py: 2 }}>
+                  {" "}
+                  Scan Qr-code here :
+                </Typography>
+                {/* react-qr-code component here */}
+                <GenerateQrCode tokenCode={msgState.tokenString} />
+              </Box>
             </>
           )}
         </Box>

diff --git a/src/helpers/qrcode-generate/GenerateQrCode.js b/src/helpers/qrcode-generate/GenerateQrCode.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+import QRCode from "react-qr-code";
+
+const GenerateQrCode = ({ tokenCode }) => {
+  return (
+    <>
+      <QRCode value={tokenCode} />
+    </>
+  );
+};
+
+export default GenerateQrCode;