feat: add qr share link to share an item

package.json

@@ -55,6 +55,7 @@
     "react-ga4": "2.1.0",
     "react-i18next": "13.2.0",
     "react-image-crop": "9.1.1",
+    "react-qr-code": "2.0.12",
     "react-query": "3.39.3",
     "react-quill": "2.0.0",
     "react-router": "6.15.0",

src/components/common/QRCode.tsx

@@ -0,0 +1,35 @@
+import QR from 'react-qr-code';
+
+import { Box, Modal } from '@mui/material';
+
+type Props = {
+  value: string;
+  open: boolean;
+  handleClose: () => void;
+};
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '30%',
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+};
+
+const QRCode = ({ value, open, handleClose }: Props): JSX.Element => (
+  <Modal open={open} onClose={handleClose}>
+    <Box sx={style}>
+      <QR
+        size={256}
+        style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+        value={value}
+        viewBox="0 0 256 256"
+      />
+    </Box>
+  </Modal>
+);
+
+export default QRCode;

src/components/item/sharing/SharingLink.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 
+import { QrCode2 } from '@mui/icons-material';
 import FileCopyIcon from '@mui/icons-material/FileCopy';
 import { SelectChangeEvent, Stack, styled } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
@@ -11,6 +12,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { Context } from '@graasp/sdk';
 import { FAILURE_MESSAGES, SUCCESS_MESSAGES } from '@graasp/translations';
 
+import QRCode from '@/components/common/QRCode';
 import {
   SHARE_LINK_COLOR,
   SHARE_LINK_CONTAINER_BORDER_STYLE,
@@ -64,6 +66,7 @@ const SharingLink = ({ itemId }: Props): JSX.Element => {
 
   const [linkType, setLinkType] = useState<Context>(Context.Player);
   const [link, setLink] = useState<string>();
+  const [openQrModal, setOpenQrModal] = useState<boolean>(false);
 
   useEffect(() => {
     if (itemId) {
@@ -115,46 +118,63 @@ const SharingLink = ({ itemId }: Props): JSX.Element => {
   const handleLinkTypeChange = (event: SelectChangeEvent<Context>) => {
     setLinkType(event.target.value as Context);
   };
-
+  const closeQrModal = () => {
+    setOpenQrModal(false);
+  };
+  const generateQrCode = () => {
+    setOpenQrModal(true);
+  };
   return (
-    <StyledBox
-      direction="row"
-      justifyContent="space-between"
-      alignItems="center"
-    >
-      <StyledLink href={link} target="_blank" id={SHARE_ITEM_DIALOG_LINK_ID}>
-        {link}
-      </StyledLink>
-      <Stack direction="row" alignItems="center">
-        <Select
-          sx={{ ml: 1, textTransform: 'capitalize' }}
-          value={linkType}
-          onChange={handleLinkTypeChange}
-          renderValue={(value) => enumT(value)}
-          id={SHARE_ITEM_DIALOG_LINK_SELECT_ID}
-        >
-          <MenuItem
-            // sx={{ textTransform: 'capitalize' }}
-            value={Context.Builder}
+    <>
+      <StyledBox
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <StyledLink href={link} target="_blank" id={SHARE_ITEM_DIALOG_LINK_ID}>
+          {link}
+        </StyledLink>
+        <Stack direction="row" alignItems="center">
+          <Select
+            sx={{ ml: 1, textTransform: 'capitalize' }}
+            value={linkType}
+            onChange={handleLinkTypeChange}
+            renderValue={(value) => enumT(value)}
+            id={SHARE_ITEM_DIALOG_LINK_SELECT_ID}
           >
-            {enumT(Context.Builder)}
-          </MenuItem>
-          <MenuItem
-            // sx={{ textTransform: 'capitalize' }}
-            value={Context.Player}
+            <MenuItem
+              // sx={{ textTransform: 'capitalize' }}
+              value={Context.Builder}
+            >
+              {enumT(Context.Builder)}
+            </MenuItem>
+            <MenuItem
+              // sx={{ textTransform: 'capitalize' }}
+              value={Context.Player}
+            >
+              {enumT(Context.Player)}
+            </MenuItem>
+          </Select>
+          <Tooltip
+            title={translateBuilder(BUILDER.SHARE_ITEM_LINK_COPY_TOOLTIP)}
           >
-            {enumT(Context.Player)}
-          </MenuItem>
-        </Select>
-        <Tooltip title={translateBuilder(BUILDER.SHARE_ITEM_LINK_COPY_TOOLTIP)}>
-          <span>
-            <IconButton onClick={handleCopy}>
-              <FileCopyIcon />
+            <span>
+              <IconButton onClick={handleCopy}>
+                <FileCopyIcon />
+              </IconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title={translateBuilder(BUILDER.SHARE_ITEM_LINK_QR_CODE)}>
+            <IconButton onClick={generateQrCode}>
+              <QrCode2 />
             </IconButton>
-          </span>
-        </Tooltip>
-      </Stack>
-    </StyledBox>
+          </Tooltip>
+        </Stack>
+      </StyledBox>
+      {link && openQrModal && (
+        <QRCode open={openQrModal} handleClose={closeQrModal} value={link} />
+      )}
+    </>
   );
 };
 

src/langs/ar.json

@@ -199,6 +199,7 @@
   "SHARE_ITEM_FORM_INVITATION_INVALID_EMAIL_MESSAGE": "هذا البريد غير صالح",
   "SHARE_ITEM_FORM_INVITATION_TOOLTIP": "سيتلقى المستخدمون الغير مسجّلين رابطًا شخصيًا للتسجيل في المنصة.",
   "SHARE_ITEM_LINK_COPY_TOOLTIP": "النّسخ إلى الحافظة",
+  "SHARE_ITEM_LINK_QR_CODE": "أنشئ رمز الاستجابة",
   "SHARED_ITEMS_TITLE": "العناصر المنشورة",
   "SHARED_MEMBERS_LABEL": "الأعضاء المنشورين",
   "SHARED_MEMBERS_TOOLTIP_one": "تمّت مشاركة هذا العنصر مع مستخدم واحد",

src/langs/constants.ts

@@ -270,6 +270,7 @@ export const BUILDER = {
   SETTINGS_THUMBNAIL_TITLE: 'SETTINGS_THUMBNAIL_TITLE',
   SHARE_ITEM_CSV_IMPORT_BUTTON: 'SHARE_ITEM_CSV_IMPORT_BUTTON',
   SHARE_ITEM_LINK_COPY_TOOLTIP: 'SHARE_ITEM_LINK_COPY_TOOLTIP',
+  SHARE_ITEM_LINK_QR_CODE: 'SHARE_ITEM_LINK_QR_CODE',
   SHARED_ITEMS_TITLE: 'SHARED_ITEMS_TITLE',
   SHARED_MEMBERS_LABEL: 'SHARED_MEMBERS_LABEL',
   SHARED_MEMBERS_TOOLTIP: 'SHARED_MEMBERS_TOOLTIP',

src/langs/en.json

@@ -211,6 +211,7 @@
   "SHARE_ITEM_FORM_INVITATION_INVALID_EMAIL_MESSAGE": "This mail is not valid",
   "SHARE_ITEM_FORM_INVITATION_TOOLTIP": "Non-registered users will receive a personal link to register on the platform.",
   "SHARE_ITEM_LINK_COPY_TOOLTIP": "Copy to Clipboard",
+  "SHARE_ITEM_LINK_QR_CODE": "Generate QR Code",
   "SHARED_ITEMS_TITLE": "Shared Items",
   "SHARED_MEMBERS_LABEL": "Shared Members",
   "SHARED_MEMBERS_TOOLTIP_one": "This item is shared with one user",

yarn.lock

@@ -7483,6 +7483,7 @@ __metadata:
     react-ga4: 2.1.0
     react-i18next: 13.2.0
     react-image-crop: 9.1.1
+    react-qr-code: 2.0.12
     react-query: 3.39.3
     react-quill: 2.0.0
     react-router: 6.15.0
@@ -10747,6 +10748,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qr.js@npm:0.0.0":
+  version: 0.0.0
+  resolution: "qr.js@npm:0.0.0"
+  checksum: 5ac6c393967bdeaa660e7fd3a501a25eb538c1f6008a4d30ab2b97bbe520e5c236530090773f1578aa0a523cdaa6923c866615e21143f9e7cd22abd41c789b69
+  languageName: node
+  linkType: hard
+
 "qs@npm:6.11.2":
   version: 6.11.2
   resolution: "qs@npm:6.11.2"
@@ -11015,6 +11023,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-qr-code@npm:2.0.12":
+  version: 2.0.12
+  resolution: "react-qr-code@npm:2.0.12"
+  dependencies:
+    prop-types: ^15.8.1
+    qr.js: 0.0.0
+  peerDependencies:
+    react: ^16.x || ^17.x || ^18.x
+    react-native-svg: "*"
+  peerDependenciesMeta:
+    react-native-svg:
+      optional: true
+  checksum: b7bad40d7d5f04f7ff336ae499920dd5ea0e7616ed7fec5f849e54f8f26b5e4acd1ba8e69198be8617dc7fecdf36cf4302c99ff74885320b55bb95d19a09de7c
+  languageName: node
+  linkType: hard
+
 "react-query@npm:3.39.3":
   version: 3.39.3
   resolution: "react-query@npm:3.39.3"