@movalib/movalib-commons 1.54.0 → 1.55.1

package/src/components/QrCodePLVContainer/QrCodePLVContainer.tsx

@@ -0,0 +1,202 @@
+import { DocumentScanner, QrCode2 } from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+  type SelectProps,
+  darken,
+  useTheme,
+} from '@mui/material';
+import '../../style/QRCode.css';
+
+import html2canvas from 'html2canvas';
+import QRCodeStyling, { type Options } from 'qr-code-styling';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useReactToPrint } from 'react-to-print';
+import { DownloadedQRCode } from '../../DownloadedQRCode';
+import QRCodeImage from '../../assets/images/leaf_yellow_small.png';
+import { flexCenter } from '../../helpers/Tools';
+import { PLVComponent, PrintSize } from './PLVComponent';
+
+type SelectChoice = null | 'A3' | 'A4' | 'QR_Headless' | 'QR_Google';
+
+export const QrCodePLVContainer = ({ data }: { data: string }) => {
+  const [selectedChoice, setSelectedChoice] = useState<SelectChoice>(null);
+
+  const qrCodeRef = useRef<HTMLDivElement>(null);
+  const PLVrefA4 = useRef<PLVComponent>(null);
+  const PLVrefA3 = useRef<PLVComponent>(null);
+
+  const theme = useTheme();
+
+  const qrCodeOptions: Options = useMemo(
+    () => ({
+      width: 300,
+      height: 300,
+      type: 'canvas',
+      data: data,
+      image: QRCodeImage,
+      margin: 10,
+      qrOptions: {
+        typeNumber: 0,
+        mode: 'Byte',
+        errorCorrectionLevel: 'Q',
+      },
+      imageOptions: {
+        hideBackgroundDots: true,
+        imageSize: 0.4,
+        margin: 15,
+      },
+      dotsOptions: {
+        color: darken(theme.palette.primary.main, 0.4),
+        type: 'square',
+      },
+      backgroundOptions: {
+        color: 'white',
+      },
+      cornersSquareOptions: {
+        color: darken(theme.palette.secondary.main, 0.2),
+        type: 'square',
+      },
+      cornersDotOptions: {
+        color: darken(theme.palette.secondary.main, 0.2),
+        type: 'square',
+      },
+    }),
+    [data, theme.palette],
+  );
+
+  const qrCode = useMemo(() => new QRCodeStyling(qrCodeOptions), [qrCodeOptions]);
+
+  useEffect(() => {
+    if (qrCodeRef.current) {
+      qrCode.append(qrCodeRef.current);
+    }
+  }, [qrCode]);
+
+  const printA4PLV = useReactToPrint({
+    content: () => PLVrefA4.current,
+    documentTitle: 'Movalib_PLV_A4',
+  });
+
+  const printA3PLV = useReactToPrint({
+    content: () => PLVrefA3.current,
+    documentTitle: 'Movalib_PLV_A3',
+  });
+
+  const downloadQRCodeHeadless = useCallback(() => {
+    qrCode.download({
+      extension: 'png',
+      name: 'movalib-qr-code',
+    });
+  }, [qrCode.download]);
+
+  const downloadQrCodeWithCTA = useCallback(() => {
+    // Check if we have everything we need
+    const qrCodeContainer = document.querySelector<HTMLElement>('#qr-code-container');
+    const qrCodeDiv = qrCodeContainer?.querySelector<HTMLElement>('.qr-code');
+    const qrCodeCanva = qrCodeDiv?.querySelector('canvas');
+    const downloadedDiv = document.getElementById('qr-code-downloaded-container');
+
+    // If we don't have the QR Code, we can't download it
+    if (!(qrCodeContainer && qrCodeDiv && qrCodeCanva && downloadedDiv)) {
+      return;
+    }
+
+    const tmpRendered = downloadedDiv.cloneNode(true) as HTMLElement;
+    tmpRendered.style.display = 'flex';
+
+    const downloadedQrCodeImgContainer = tmpRendered.querySelector<HTMLElement>('#qr-code-img-container')!;
+
+    downloadedQrCodeImgContainer.append(qrCodeCanva);
+    // add it to the document to be able to download it
+    document.body.append(tmpRendered);
+
+    // create the canva of the tmpRendered div and download it
+    html2canvas(tmpRendered).then((canvas) => {
+      const a = document.createElement('a');
+      a.download = 'movalib-qr-code.png';
+      a.href = canvas.toDataURL('image/png');
+      a.click();
+    });
+
+    // remove the tmpRendered div
+    tmpRendered.remove();
+
+    // re-append the QR Code to the initial container
+    qrCode.append(qrCodeRef.current!);
+  }, [qrCode.append]);
+
+  const onChangeSelectedChoice: SelectProps<SelectChoice>['onChange'] = (e) => {
+    setSelectedChoice(e.target.value as SelectChoice);
+  };
+
+  const onClickDownload = useMemo(() => {
+    switch (selectedChoice) {
+      case 'A3':
+        return printA3PLV;
+      case 'A4':
+        return printA4PLV;
+      case 'QR_Headless':
+        return downloadQRCodeHeadless;
+      case 'QR_Google':
+        return downloadQrCodeWithCTA;
+      default:
+        return () => {};
+    }
+  }, [selectedChoice, printA3PLV, printA4PLV, downloadQRCodeHeadless, downloadQrCodeWithCTA]);
+  return (
+    <Box display='flex' flexDirection='column' alignItems='center' gap='24px'>
+      <PLVComponent ref={PLVrefA4} url={data} printSize={PrintSize.A4} />
+      <PLVComponent ref={PLVrefA3} url={data} printSize={PrintSize.A3} />
+
+      <Grid container alignItems='center'>
+        <Grid item xs={7}>
+          <FormControl fullWidth size='small'>
+            <InputLabel id='qrcode-plv-select'>Choisissez votre support</InputLabel>
+            <Select
+              labelId='qrcode-plv-select'
+              label='Choisissez votre support'
+              id='qrcode-plv-select'
+              onChange={onChangeSelectedChoice}
+              value={selectedChoice}
+            >
+              <MenuItem value={'A3'}>🧾&nbsp;&nbsp;PLV format A4</MenuItem>
+              <MenuItem value={'A4'}>🧾&nbsp;&nbsp;PLV format A3</MenuItem>
+              <MenuItem value={'QR_Google'}>QR Code format GoogleMyBusiness</MenuItem>
+              <MenuItem value={'QR_Headless'}>QR Code seul</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={1} />
+        <Grid item xs={4}>
+          <Button
+            startIcon={selectedChoice === 'A3' || selectedChoice === 'A4' ? <DocumentScanner /> : <QrCode2 />}
+            onClick={onClickDownload}
+            variant='outlined'
+            disabled={!selectedChoice}
+            sx={{ color: darken(theme.palette.primary.main, 0.2), borderRadius: '10rem' }}
+          >
+            {selectedChoice === 'A3' || selectedChoice === 'A4' ? 'Imprimer' : 'Télécharger'}
+          </Button>
+        </Grid>
+      </Grid>
+      <div id='qr-code-container' style={flexCenter}>
+        <div
+          ref={qrCodeRef}
+          style={{
+            height: '300px',
+            width: '300px',
+            maxWidth: '300px !important',
+          }}
+          className='qr-code'
+        />
+      </div>
+      <DownloadedQRCode />
+    </Box>
+  );
+};