@movalib/movalib-commons 1.60.0 → 1.62.0

package/src/components/QrCodePLVContainer/QrCodePLVContainer.tsx

@@ -1,4 +1,4 @@
-import { DocumentScanner, QrCode2 } from '@mui/icons-material';
+import { DocumentScanner, QrCode2 } from "@mui/icons-material";
 import {
   Box,
   Button,
@@ -11,48 +11,48 @@ import {
   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 { PDFDocument } from 'pdf-lib';
-import { PLVComponentV2, PrintSize } from './PLVComponent';
-import * as pdfjsLib from 'pdfjs-dist';
-pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';
+} from "@mui/material";
+import "../../style/QRCode.css";
+
+import html2canvas from "html2canvas";
+import { PDFDocument } from "pdf-lib";
+import * as pdfjsLib from "pdfjs-dist";
+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 { PLVComponentV2, PrintSize } from "./PLVComponent";
+pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
 export const getPdfDocument = (url: string) => {
   return pdfjsLib.getDocument(url);
 };
-type SelectChoice = null | 'A3' | 'A4' | 'QR_Headless' | 'QR_Google';
+type SelectChoice = null | "A3" | "A4" | "QR_Headless" | "QR_Google";
 export const QrCodePLVContainer = ({ data }: { data: string }) => {
   const [selectedChoice, setSelectedChoice] = useState<SelectChoice>(null);
-  const [urlA4, setUrlA4] = useState<string>('');
-  const [urlA3, setUrlA3] = useState<string>('');
+  const [urlA4, setUrlA4] = useState<string>("");
+  const [urlA3, setUrlA3] = useState<string>("");
   const [isReady, setIsReady] = useState(false);
 
   const qrCodeRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
   const PLVrefA4 = useRef<PLVComponentV2>(null);
   const PLVrefA3 = useRef<PLVComponentV2>(null);
-  //si sur l'impression des PLV en A4 ou A3 le Qrcode est flou, 
+  //si sur l'impression des PLV en A4 ou A3 le Qrcode est flou,
   //il faut modifier la width et height, imageSize du qrCodeOptions et mettre les mêmes valeurs que dans le optionQrcode de la fonction printPLV
   const qrCodeOptions: Options = useMemo(
     () => ({
       width: 300,
       height: 300,
-      type: 'canvas',
+      type: "canvas",
       data: data,
       image: QRCodeImage,
       margin: 10,
       qrOptions: {
         typeNumber: 0,
-        mode: 'Byte',
-        errorCorrectionLevel: 'Q',
+        mode: "Byte",
+        errorCorrectionLevel: "Q",
       },
       imageOptions: {
         hideBackgroundDots: true,
@@ -61,24 +61,27 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
       },
       dotsOptions: {
         color: darken(theme.palette.primary.main, 0.4),
-        type: 'square',
+        type: "square",
       },
       backgroundOptions: {
-        color: 'white',
+        color: "white",
       },
       cornersSquareOptions: {
         color: darken(theme.palette.secondary.main, 0.2),
-        type: 'square',
+        type: "square",
       },
       cornersDotOptions: {
         color: darken(theme.palette.secondary.main, 0.2),
-        type: 'square',
+        type: "square",
       },
     }),
-    [data, theme.palette],
+    [data, theme.palette]
   );
 
-  const qrCode = useMemo(() => new QRCodeStyling(qrCodeOptions), [qrCodeOptions]);
+  const qrCode = useMemo(
+    () => new QRCodeStyling(qrCodeOptions),
+    [qrCodeOptions]
+  );
 
   useEffect(() => {
     if (qrCodeRef.current) {
@@ -87,18 +90,16 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
   }, [qrCode]);
 
   useEffect(() => {
-    const urlA4 = printPLV('A4').then((url) => {
+    const urlA4 = printPLV("A4").then((url) => {
       setUrlA4(url);
     });
   }, [data]);
 
-
-
   async function printPLV(format: string) {
     setIsReady(false);
 
     // Chemin du fichier PDF
-   const pdfUrl = `/Movalib_${format}.pdf`;
+    const pdfUrl = `/Movalib_${format}.pdf`;
     // Récupérer le fichier PDF depuis le serveur
     const response = await fetch(pdfUrl);
     const existingPdfBytes = await response.arrayBuffer();
@@ -118,20 +119,20 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     const { width, height } = firstPage.getSize();
 
     let optionQrcode = {};
-    if(format === 'A3'){
+    if (format === "A3") {
       optionQrcode = {
-        x: width - 427,  
+        x: width - 427,
         y: 88,
         width: 349,
-        height: 349
-      }
+        height: 349,
+      };
     } else {
       optionQrcode = {
         x: width - 303,
         y: 54,
         width: 245,
         height: 245,
-      }
+      };
     }
     // AJouter le QR code à la première page du PDF
     firstPage.drawImage(qrImage, optionQrcode);
@@ -140,7 +141,7 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     const modifiedPdfBytes = await pdfDoc.save();
 
     // Convertir les bytes en Blob puis en URL
-    const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+    const blob = new Blob([modifiedPdfBytes], { type: "application/pdf" });
     const url = URL.createObjectURL(blob);
 
     // étape nécesssaire pour utiliser reactToPrint pour pouvoir nommer le document
@@ -148,49 +149,51 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     // donc il faut convertir le PDF en image
     // puis convertir l'image en URL
     // et enfin integrer l'image dans le HTML via la balise <img>
-  
 
     // Convertir le PDF en image
     const loadingTask = getPdfDocument(url);
     const pdf = await loadingTask.promise;
-  
+
     // Récupérer la première page
     const page = await pdf.getPage(1);
-  
+
     // Créer un canvas pour afficher la page
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-  
-    const viewport = page.getViewport({ scale: 3});
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+
+    const viewport = page.getViewport({ scale: 3 });
     canvas.width = viewport.width;
     canvas.height = viewport.height;
-  
+
     // Rendu de la page dans le canvas
     const renderContext = {
       canvasContext: context!,
       viewport: viewport,
     };
     await page.render(renderContext).promise;
-  
+
     // Convertir le canvas en URL d'image (data URL)
-    const imageUrl = canvas.toDataURL('image/png');
+    const imageUrl = canvas.toDataURL("image/png");
     setIsReady(true);
     return imageUrl;
   }
 
   const downloadQRCodeHeadless = useCallback(() => {
     qrCode.download({
-      extension: 'png',
-      name: 'movalib-qr-code',
+      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');
+    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)) {
@@ -198,9 +201,11 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     }
 
     const tmpRendered = downloadedDiv.cloneNode(true) as HTMLElement;
-    tmpRendered.style.display = 'flex';
+    tmpRendered.style.display = "flex";
 
-    const downloadedQrCodeImgContainer = tmpRendered.querySelector<HTMLElement>('#qr-code-img-container')!;
+    const downloadedQrCodeImgContainer = tmpRendered.querySelector<HTMLElement>(
+      "#qr-code-img-container"
+    )!;
 
     downloadedQrCodeImgContainer.append(qrCodeCanva);
     // add it to the document to be able to download it
@@ -208,9 +213,9 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
 
     // 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');
+      const a = document.createElement("a");
+      a.download = "movalib-qr-code.png";
+      a.href = canvas.toDataURL("image/png");
       a.click();
     });
 
@@ -221,89 +226,116 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     qrCode.append(qrCodeRef.current!);
   }, [qrCode.append]);
 
-  const onChangeSelectedChoice: SelectProps<SelectChoice>['onChange'] = (e) => {
-    if(e.target.value === 'A3' && !urlA3){
-      printPLV('A3').then((url) => {
+  const onChangeSelectedChoice: SelectProps<SelectChoice>["onChange"] = (e) => {
+    if (e.target.value === "A3" && !urlA3) {
+      printPLV("A3").then((url) => {
         setUrlA3(url);
       });
     }
     setSelectedChoice(e.target.value as SelectChoice);
   };
-  
+
   const printA3PLV = useReactToPrint({
     content: () => PLVrefA3.current,
-    documentTitle: 'Movalib_PLV_A3',
+    documentTitle: "Movalib_PLV_A3",
   });
 
   const printA4PLV = useReactToPrint({
     content: () => PLVrefA4.current,
-    documentTitle: 'Movalib_PLV_A4',
+    documentTitle: "Movalib_PLV_A4",
   });
 
   const onClickDownload = useMemo(() => {
     switch (selectedChoice) {
-      case 'A3':
+      case "A3":
         return printA3PLV;
-      case 'A4':
+      case "A4":
         return printA4PLV;
-      case 'QR_Headless':
+      case "QR_Headless":
         return downloadQRCodeHeadless;
-      case 'QR_Google':
+      case "QR_Google":
         return downloadQrCodeWithCTA;
       default:
         return () => {};
     }
-  }, [selectedChoice, downloadQRCodeHeadless, downloadQrCodeWithCTA, printA3PLV, printA4PLV]);
+  }, [
+    selectedChoice,
+    downloadQRCodeHeadless,
+    downloadQrCodeWithCTA,
+    printA3PLV,
+    printA4PLV,
+  ]);
   return (
-    <Box display='flex' flexDirection='column' alignItems='center' gap='24px'>
-      {urlA4 && <PLVComponentV2 ref={PLVrefA4} url={urlA4} printSize={PrintSize.A4} />}
-      {urlA3 && <PLVComponentV2 ref={PLVrefA3} url={urlA3} printSize={PrintSize.A3} />}
-
-      <Grid container justifyContent='center' alignItems='center'>
+    <Box display="flex" flexDirection="column" alignItems="center" gap="24px">
+      {urlA4 && (
+        <PLVComponentV2 ref={PLVrefA4} url={urlA4} printSize={PrintSize.A4} />
+      )}
+      {urlA3 && (
+        <PLVComponentV2 ref={PLVrefA3} url={urlA3} printSize={PrintSize.A3} />
+      )}
+
+      <Grid container justifyContent="center" alignItems="center">
         <Grid item xs={7}>
-          <FormControl fullWidth size='small'>
-            <InputLabel id='qrcode-plv-select'>Choisissez votre support</InputLabel>
+          <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'
+              labelId="qrcode-plv-select"
+              label="Choisissez votre support"
+              id="qrcode-plv-select"
               onChange={onChangeSelectedChoice}
               value={selectedChoice}
             >
-              <MenuItem value={'A4'}>🧾&nbsp;&nbsp;PLV format A4</MenuItem>
-              <MenuItem value={'A3'}>🧾&nbsp;&nbsp;PLV format A3</MenuItem>
-              <MenuItem value={'QR_Google'}>QR Code format GoogleMyBusiness</MenuItem>
-              <MenuItem value={'QR_Headless'}>QR Code seul</MenuItem>
+              <MenuItem value={"A4"}>🧾&nbsp;&nbsp;PLV format A4</MenuItem>
+              <MenuItem value={"A3"}>🧾&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={4} marginLeft={3}>
-
-        {(selectedChoice === 'A3' || selectedChoice === 'A4') && !isReady ? (
-          <CircularProgress />
-        ) : (
-          <Button
-            startIcon={selectedChoice === 'A3' || selectedChoice === 'A4' ? <DocumentScanner /> : <QrCode2 />}
-            onClick={onClickDownload}
-            variant='outlined'
-            disabled={!selectedChoice || ((selectedChoice === 'A3' || selectedChoice === 'A4') && !isReady)}
-            sx={{ color: darken(theme.palette.primary.main, 0.2), borderRadius: '10rem' }}
-          >
-            {selectedChoice === 'A3' || selectedChoice === 'A4' ? 'Imprimer' : 'Télécharger'}
+          {(selectedChoice === "A3" || selectedChoice === "A4") && !isReady ? (
+            <CircularProgress />
+          ) : (
+            <Button
+              startIcon={
+                selectedChoice === "A3" || selectedChoice === "A4" ? (
+                  <DocumentScanner />
+                ) : (
+                  <QrCode2 />
+                )
+              }
+              onClick={onClickDownload}
+              variant="outlined"
+              disabled={
+                !selectedChoice ||
+                ((selectedChoice === "A3" || selectedChoice === "A4") &&
+                  !isReady)
+              }
+              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 id="qr-code-container" style={flexCenter}>
         <div
           ref={qrCodeRef}
           style={{
-            height: '300px',
-            width: '300px',
-            maxWidth: '300px !important',
+            height: "300px",
+            width: "300px",
+            maxWidth: "300px !important",
           }}
-          className='qr-code'
+          className="qr-code"
         />
       </div>
       <DownloadedQRCode />

package/src/helpers/Enums.ts

@@ -213,6 +213,7 @@ export enum EventType {
   NOTE = "NOTE",
   PENDING_APPOINTMENT = "PENDING_APPOINTMENT",
   WAITING_VEHICLE = "WAITING_VEHICLE",
+  QUOTE = "QUOTE",
 }
 
 export enum DayOfWeek {
@@ -231,6 +232,13 @@ export enum DocumentState {
   REJECTED = "REJECTED",
 }
 
+export enum QuoteState {
+  QUOTE_DRAFT = "QUOTE_DRAFT",
+  QUOTE_SENT = "QUOTE_SENT",
+  QUOTE_ACCEPTED = "QUOTE_ACCEPTED",
+  QUOTE_REJECTED = "QUOTE_REJECTED",
+}
+
 export enum DocumentType {
   USER_BANK_DETAILS = "USER_BANK_DETAILS",
   USER_APPOINTMENT_QUOTE = "USER_APPOINTMENT_QUOTE",