From 640fd3734b74850ebab9e72a7c050abada095176 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Wed, 20 Sep 2023 12:40:36 +0200 Subject: [PATCH 1/5] feat: add qr share link to share an item --- package.json | 1 + src/components/common/QRCode.tsx | 35 ++++++++ src/components/item/sharing/SharingLink.tsx | 92 +++++++++++++-------- src/langs/ar.json | 1 + src/langs/constants.ts | 1 + src/langs/en.json | 1 + yarn.lock | 24 ++++++ 7 files changed, 119 insertions(+), 36 deletions(-) create mode 100644 src/components/common/QRCode.tsx diff --git a/package.json b/package.json index b5e3d8540..6892fd118 100644 --- a/package.json +++ b/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", diff --git a/src/components/common/QRCode.tsx b/src/components/common/QRCode.tsx new file mode 100644 index 000000000..bed79aeee --- /dev/null +++ b/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 => ( + + + + + +); + +export default QRCode; diff --git a/src/components/item/sharing/SharingLink.tsx b/src/components/item/sharing/SharingLink.tsx index 82e303b1a..a38f5525b 100644 --- a/src/components/item/sharing/SharingLink.tsx +++ b/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.Player); const [link, setLink] = useState(); + const [openQrModal, setOpenQrModal] = useState(false); useEffect(() => { if (itemId) { @@ -115,46 +118,63 @@ const SharingLink = ({ itemId }: Props): JSX.Element => { const handleLinkTypeChange = (event: SelectChangeEvent) => { setLinkType(event.target.value as Context); }; - + const closeQrModal = () => { + setOpenQrModal(false); + }; + const generateQrCode = () => { + setOpenQrModal(true); + }; return ( - - - {link} - - - enumT(value)} + id={SHARE_ITEM_DIALOG_LINK_SELECT_ID} > - {enumT(Context.Builder)} - - + {enumT(Context.Builder)} + + + {enumT(Context.Player)} + + + - {enumT(Context.Player)} - - - - - - + + + + + + + + + - - - - + + + + {link && openQrModal && ( + + )} + ); }; diff --git a/src/langs/ar.json b/src/langs/ar.json index 6c0245533..55c07627d 100644 --- a/src/langs/ar.json +++ b/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": "تمّت مشاركة هذا العنصر مع مستخدم واحد", diff --git a/src/langs/constants.ts b/src/langs/constants.ts index 264e4d1d9..97ec09759 100644 --- a/src/langs/constants.ts +++ b/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', diff --git a/src/langs/en.json b/src/langs/en.json index 1725dbf91..d7730f77a 100644 --- a/src/langs/en.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index df9677f31..737f55cd7 100644 --- a/yarn.lock +++ b/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" From c9889369ce5448421161cac532bf6e91039a8edb Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Mon, 25 Sep 2023 15:04:21 +0200 Subject: [PATCH 2/5] feat: use dialog instead of modal for qr code --- src/components/common/QRCode.tsx | 61 ++++++++------ src/components/item/sharing/SharingLink.tsx | 92 +++++++++------------ 2 files changed, 73 insertions(+), 80 deletions(-) diff --git a/src/components/common/QRCode.tsx b/src/components/common/QRCode.tsx index bed79aeee..ef6672c87 100644 --- a/src/components/common/QRCode.tsx +++ b/src/components/common/QRCode.tsx @@ -1,35 +1,46 @@ +import { useState } from 'react'; import QR from 'react-qr-code'; -import { Box, Modal } from '@mui/material'; +import { QrCode2 } from '@mui/icons-material'; +import CloseIcon from '@mui/icons-material/Close'; +import { Dialog, DialogContent, IconButton, Tooltip } from '@mui/material'; + +import { useBuilderTranslation } from '@/config/i18n'; +import { BUILDER } from '@/langs/constants'; 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 }: Props): JSX.Element => { + const { t: translateBuilder } = useBuilderTranslation(); + const [openQrModal, setOpenQrModal] = useState(false); -const QRCode = ({ value, open, handleClose }: Props): JSX.Element => ( - - - - - -); + return ( + <> + + setOpenQrModal(true)}> + + + + setOpenQrModal(false)}> + setOpenQrModal(false)} + sx={{ + position: 'absolute', + right: 8, + top: 8, + }} + > + + + + + + + + ); +}; export default QRCode; diff --git a/src/components/item/sharing/SharingLink.tsx b/src/components/item/sharing/SharingLink.tsx index a38f5525b..a7d04b291 100644 --- a/src/components/item/sharing/SharingLink.tsx +++ b/src/components/item/sharing/SharingLink.tsx @@ -1,6 +1,5 @@ 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'; @@ -66,7 +65,6 @@ const SharingLink = ({ itemId }: Props): JSX.Element => { const [linkType, setLinkType] = useState(Context.Player); const [link, setLink] = useState(); - const [openQrModal, setOpenQrModal] = useState(false); useEffect(() => { if (itemId) { @@ -118,63 +116,47 @@ const SharingLink = ({ itemId }: Props): JSX.Element => { const handleLinkTypeChange = (event: SelectChangeEvent) => { setLinkType(event.target.value as Context); }; - const closeQrModal = () => { - setOpenQrModal(false); - }; - const generateQrCode = () => { - setOpenQrModal(true); - }; + return ( - <> - - - {link} - - - enumT(value)} + id={SHARE_ITEM_DIALOG_LINK_SELECT_ID} + > + - - {enumT(Context.Builder)} - - - {enumT(Context.Player)} - - - + - - - - - - - - - + {enumT(Context.Player)} + + + + + + - - - - {link && openQrModal && ( - - )} - + + + {link && } + + ); }; From 7e239dc7edbafe78398cae8173b7599ce1eeeece Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Tue, 26 Sep 2023 11:44:36 +0200 Subject: [PATCH 3/5] ci: cypress workflow --- .github/workflows/cypress.yml | 3 +-- package.json | 2 +- yarn.lock | 48 +++++++++++++++++------------------ 3 files changed, 26 insertions(+), 27 deletions(-) diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 6d142d7d5..2c15b2743 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -18,7 +18,7 @@ jobs: timeout-minutes: 50 steps: - name: Check out code - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@v3 @@ -56,7 +56,6 @@ jobs: install: false # we launch the app in preview mode to avoid issues with hmr websockets from vite polluting the mocks start: yarn preview:test - browser: chrome quiet: true config-file: cypress.config.ts cache-key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} diff --git a/package.json b/package.json index 6892fd118..083d024f7 100644 --- a/package.json +++ b/package.json @@ -125,7 +125,7 @@ "@typescript-eslint/parser": "6.5.0", "@vitejs/plugin-react": "4.0.4", "concurrently": "8.2.1", - "cypress": "12.17.4", + "cypress": "13.2.0", "cypress-localstorage-commands": "2.2.4", "env-cmd": "10.1.0", "eslint": "^8.47.0", diff --git a/yarn.lock b/yarn.lock index 737f55cd7..36630ba03 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1568,9 +1568,9 @@ __metadata: languageName: node linkType: hard -"@cypress/request@npm:2.88.12": - version: 2.88.12 - resolution: "@cypress/request@npm:2.88.12" +"@cypress/request@npm:^3.0.0": + version: 3.0.1 + resolution: "@cypress/request@npm:3.0.1" dependencies: aws-sign2: ~0.7.0 aws4: ^1.8.0 @@ -1585,12 +1585,12 @@ __metadata: json-stringify-safe: ~5.0.1 mime-types: ~2.1.19 performance-now: ^2.1.0 - qs: ~6.10.3 + qs: 6.10.4 safe-buffer: ^5.1.2 tough-cookie: ^4.1.3 tunnel-agent: ^0.6.0 uuid: ^8.3.2 - checksum: 2c6fbf7f3127d41bffca8374beaa8cf95450495a8a077b00309ea9d94dd2a4da450a77fe038e8ad26c97cdd7c39b65c53c850f8338ce9bc2dbe23ce2e2b48329 + checksum: 7175522ebdbe30e3c37973e204c437c23ce659e58d5939466615bddcd58d778f3a8ea40f087b965ae8b8138ea8d102b729c6eb18c6324f121f3778f4a2e8e727 languageName: node linkType: hard @@ -3468,10 +3468,10 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:^16.18.39": - version: 16.18.39 - resolution: "@types/node@npm:16.18.39" - checksum: eac9b202b76013256cb517ca8d3e3f61df206edb1615ca8d8df4c80616e92879fe4d3f8570a11d60f4216a82724a3265d5888b24c6994c80b057a0423c9ff1d2 +"@types/node@npm:^18.17.5": + version: 18.18.0 + resolution: "@types/node@npm:18.18.0" + checksum: 61bcffa28eb713e7a4c66fd369df603369c3f834a783faeced95fe3e78903faa25f1a704d49e054f41d71b7915eeb066d10a37cc699421fcf5dd267f96ad5808 languageName: node linkType: hard @@ -5477,13 +5477,13 @@ __metadata: languageName: node linkType: hard -"cypress@npm:12.17.4": - version: 12.17.4 - resolution: "cypress@npm:12.17.4" +"cypress@npm:13.2.0": + version: 13.2.0 + resolution: "cypress@npm:13.2.0" dependencies: - "@cypress/request": 2.88.12 + "@cypress/request": ^3.0.0 "@cypress/xvfb": ^1.2.4 - "@types/node": ^16.18.39 + "@types/node": ^18.17.5 "@types/sinonjs__fake-timers": 8.1.1 "@types/sizzle": ^2.3.2 arch: ^2.2.0 @@ -5526,7 +5526,7 @@ __metadata: yauzl: ^2.10.0 bin: cypress: bin/cypress - checksum: c9c79f5493b23e9c8cfb92d45d50ea9d0fae54210dde203bfa794a79436faf60108d826fe9007a7d67fddf7919802ad8f006b7ae56c5c198c75d5bc85bbc851b + checksum: 7647814f07626bd63e7b8dc4d066179fa40bf492c588bbc2626d983a2baab6cb77c29958dc92442f277e0a8e94866decc51c4de306021739c47e32baf5970219 languageName: node linkType: hard @@ -7452,7 +7452,7 @@ __metadata: ag-grid-react: 29.3.5 axios: 1.5.0 concurrently: 8.2.1 - cypress: 12.17.4 + cypress: 13.2.0 cypress-localstorage-commands: 2.2.4 date-fns: 2.30.0 env-cmd: 10.1.0 @@ -10755,21 +10755,21 @@ __metadata: languageName: node linkType: hard -"qs@npm:6.11.2": - version: 6.11.2 - resolution: "qs@npm:6.11.2" +"qs@npm:6.10.4": + version: 6.10.4 + resolution: "qs@npm:6.10.4" dependencies: side-channel: ^1.0.4 - checksum: e812f3c590b2262548647d62f1637b6989cc56656dc960b893fe2098d96e1bd633f36576f4cd7564dfbff9db42e17775884db96d846bebe4f37420d073ecdc0b + checksum: 31e4fedd759d01eae52dde6692abab175f9af3e639993c5caaa513a2a3607b34d8058d3ae52ceeccf37c3025f22ed5e90e9ddd6c2537e19c0562ddd10dc5b1eb languageName: node linkType: hard -"qs@npm:~6.10.3": - version: 6.10.4 - resolution: "qs@npm:6.10.4" +"qs@npm:6.11.2": + version: 6.11.2 + resolution: "qs@npm:6.11.2" dependencies: side-channel: ^1.0.4 - checksum: 31e4fedd759d01eae52dde6692abab175f9af3e639993c5caaa513a2a3607b34d8058d3ae52ceeccf37c3025f22ed5e90e9ddd6c2537e19c0562ddd10dc5b1eb + checksum: e812f3c590b2262548647d62f1637b6989cc56656dc960b893fe2098d96e1bd633f36576f4cd7564dfbff9db42e17775884db96d846bebe4f37420d073ecdc0b languageName: node linkType: hard From dcd81565cc2387e8b72219a8e71a8e6da5fb1cec Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Mon, 2 Oct 2023 12:15:37 +0200 Subject: [PATCH 4/5] test: add a test for sharing item with qr code --- cypress/e2e/item/share/shareItem.cy.ts | 13 +++++++++++++ src/components/common/QRCode.tsx | 20 +++++++++++++++++--- src/components/item/sharing/SharingLink.tsx | 7 ++++++- src/config/selectors.ts | 2 ++ 4 files changed, 38 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/item/share/shareItem.cy.ts b/cypress/e2e/item/share/shareItem.cy.ts index ba816beac..5ae26eaa6 100644 --- a/cypress/e2e/item/share/shareItem.cy.ts +++ b/cypress/e2e/item/share/shareItem.cy.ts @@ -7,6 +7,8 @@ import { SHARE_ITEM_DIALOG_LINK_ID, SHARE_ITEM_DIALOG_LINK_SELECT_ID, SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID, + SHARE_ITEM_QR_BTN_ID, + SHARE_ITEM_QR_DIALOG_ID, SHARE_ITEM_VISIBILITY_SELECT_ID, buildShareButtonId, } from '../../../../src/config/selectors'; @@ -126,4 +128,15 @@ describe('Share Item', () => { expect(url).to.include(item.id); }); }); + + it('Share Item with QR Code', () => { + cy.setUpApi({ ...SAMPLE_PUBLIC_ITEMS }); + const item = SAMPLE_PUBLIC_ITEMS.items[0] as any; + cy.visit(buildItemPath(item.id)); + openShareItemTab(item.id); + + cy.get(`#${SHARE_ITEM_QR_BTN_ID}`).click(); + + cy.get(`#${SHARE_ITEM_QR_DIALOG_ID}`).should('exist'); + }); }); diff --git a/src/components/common/QRCode.tsx b/src/components/common/QRCode.tsx index ef6672c87..1eac03ebd 100644 --- a/src/components/common/QRCode.tsx +++ b/src/components/common/QRCode.tsx @@ -3,9 +3,10 @@ import QR from 'react-qr-code'; import { QrCode2 } from '@mui/icons-material'; import CloseIcon from '@mui/icons-material/Close'; -import { Dialog, DialogContent, IconButton, Tooltip } from '@mui/material'; +import { Box, Dialog, DialogContent, IconButton, Tooltip } from '@mui/material'; import { useBuilderTranslation } from '@/config/i18n'; +import { SHARE_ITEM_QR_DIALOG_ID } from '@/config/selectors'; import { BUILDER } from '@/langs/constants'; type Props = { @@ -23,7 +24,11 @@ const QRCode = ({ value }: Props): JSX.Element => { - setOpenQrModal(false)}> + setOpenQrModal(false)} + id={SHARE_ITEM_QR_DIALOG_ID} + > setOpenQrModal(false)} @@ -36,7 +41,16 @@ const QRCode = ({ value }: Props): JSX.Element => { - + + + diff --git a/src/components/item/sharing/SharingLink.tsx b/src/components/item/sharing/SharingLink.tsx index a7d04b291..7c8d61c5a 100644 --- a/src/components/item/sharing/SharingLink.tsx +++ b/src/components/item/sharing/SharingLink.tsx @@ -30,6 +30,7 @@ import notifier from '@/config/notifier'; import { SHARE_ITEM_DIALOG_LINK_ID, SHARE_ITEM_DIALOG_LINK_SELECT_ID, + SHARE_ITEM_QR_BTN_ID, } from '@/config/selectors'; import { BUILDER } from '../../../langs/constants'; @@ -154,7 +155,11 @@ const SharingLink = ({ itemId }: Props): JSX.Element => { - {link && } + {link && ( + + + + )} ); diff --git a/src/config/selectors.ts b/src/config/selectors.ts index 5a3bce92a..ea9f5a675 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -168,6 +168,8 @@ export const INVITE_ITEM_BUTTON_ID = 'inviteItemButton'; export const SHARE_ITEM_DIALOG_ID = 'shareItemDialog'; export const SHARE_ITEM_DIALOG_LINK_ID = 'shareItemDialogLink'; export const SHARE_ITEM_DIALOG_LINK_SELECT_ID = 'shareItemDialogLinkSelect'; +export const SHARE_ITEM_QR_BTN_ID = 'shareItemQRBtn'; +export const SHARE_ITEM_QR_DIALOG_ID = 'shareItemQRDialog'; export const ACCESS_INDICATION_ID = 'accessIndication'; export const ITEM_CHATBOX_BUTTON_ID = 'itemChatboxButton'; export const CHATBOX_ID = 'chatbox'; From 8d59a43b9b83d05382582673c1f532e8bd229957 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Mon, 2 Oct 2023 14:31:00 +0200 Subject: [PATCH 5/5] fix: id btn for qr share --- cypress/e2e/item/share/shareItem.cy.ts | 2 +- src/components/common/QRCode.tsx | 16 +++++++++------- src/components/item/sharing/SharingLink.tsx | 7 +------ 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/cypress/e2e/item/share/shareItem.cy.ts b/cypress/e2e/item/share/shareItem.cy.ts index 5ae26eaa6..7535c4be0 100644 --- a/cypress/e2e/item/share/shareItem.cy.ts +++ b/cypress/e2e/item/share/shareItem.cy.ts @@ -131,7 +131,7 @@ describe('Share Item', () => { it('Share Item with QR Code', () => { cy.setUpApi({ ...SAMPLE_PUBLIC_ITEMS }); - const item = SAMPLE_PUBLIC_ITEMS.items[0] as any; + const item = SAMPLE_PUBLIC_ITEMS.items[0]; cy.visit(buildItemPath(item.id)); openShareItemTab(item.id); diff --git a/src/components/common/QRCode.tsx b/src/components/common/QRCode.tsx index 1eac03ebd..698fc3865 100644 --- a/src/components/common/QRCode.tsx +++ b/src/components/common/QRCode.tsx @@ -6,7 +6,10 @@ import CloseIcon from '@mui/icons-material/Close'; import { Box, Dialog, DialogContent, IconButton, Tooltip } from '@mui/material'; import { useBuilderTranslation } from '@/config/i18n'; -import { SHARE_ITEM_QR_DIALOG_ID } from '@/config/selectors'; +import { + SHARE_ITEM_QR_BTN_ID, + SHARE_ITEM_QR_DIALOG_ID, +} from '@/config/selectors'; import { BUILDER } from '@/langs/constants'; type Props = { @@ -20,7 +23,10 @@ const QRCode = ({ value }: Props): JSX.Element => { return ( <> - setOpenQrModal(true)}> + setOpenQrModal(true)} + id={SHARE_ITEM_QR_BTN_ID} + > @@ -41,11 +47,7 @@ const QRCode = ({ value }: Props): JSX.Element => { - + { - {link && ( - - - - )} + {link && } );