@movalib/movalib-commons 1.55.4 → 1.55.6

package/src/components/QrCodePLVContainer/PLVComponent.tsx

@@ -179,8 +179,35 @@ export class PLVComponent extends React.Component<PLVComponentProps> {
   }
 }
 
+
+
+export class PLVComponentV2 extends React.Component<PLVComponentProps> {
+  render() {
+    return (
+      <div
+        className='printable-content'
+        style={{
+          width:
+            this.props.printSize === PrintSize.A4 ? '210mm' : this.props.printSize === PrintSize.A3 ? '297mm' : '0mm',
+          height:
+            this.props.printSize === PrintSize.A4 ? '297mm' : this.props.printSize === PrintSize.A3 ? '420mm' : '0mm',
+        }}
+      >
+       <Grid container>
+          <Grid item xs={12}>
+            <img src={this.props.url} style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }}  />
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
 // CSS pour cacher le contenu à l'écran mais le rendre imprimable
 const css = `
+body {
+      margin: 0;
+    }
     .highlight {
         background-color: #BCD46C; /* Couleur de surlignage */
         margin: 4px 4px; /* Espacement autour du texte surligné */
@@ -197,13 +224,21 @@ const css = `
     }
 
   .printable-content {
+    margin: 0;
+    padding: 0;
     visibility: hidden;
     position: absolute;
     left: -10000px;
     top: -10000px;
+
   }
   @media print {
+    body {
+      margin: 0;
+    }
     .printable-content {
+      margin: 0;
+      padding: 0;
       visibility: visible;
       position: static;
     }

package/src/components/QrCodePLVContainer/QrCodePLVContainer.tsx

@@ -20,19 +20,23 @@ 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';
+import { PDFDocument } from 'pdf-lib';
+import { PLVComponentV2, PrintSize } from './PLVComponent';
+import * as pdfjsLib from 'pdfjs-dist';
+pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs';
 
 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 qrCodeRef = useRef<HTMLDivElement>(null);
-  const PLVrefA4 = useRef<PLVComponent>(null);
-  const PLVrefA3 = useRef<PLVComponent>(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, 
+  //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,
@@ -78,15 +82,95 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     }
   }, [qrCode]);
 
-  const printA4PLV = useReactToPrint({
-    content: () => PLVrefA4.current,
-    documentTitle: 'Movalib_PLV_A4',
-  });
+  useEffect(() => {
+    const urlA4 = printPLV('A4').then((url) => {
+      setUrlA4(url);
+    });
+    const urlA3 = printPLV('A3').then((url) => {
+      setUrlA3(url);
+    });
+  }, [data]);
 
-  const printA3PLV = useReactToPrint({
-    content: () => PLVrefA3.current,
-    documentTitle: 'Movalib_PLV_A3',
-  });
+  async function printPLV(format: string) {
+    // Chemin du fichier 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();
+
+    // Charger le document PDF
+    const pdfDoc = await PDFDocument.load(existingPdfBytes);
+    // Convertir le Qrcode en Blob
+    const qrCodeBlob = await qrCode.getRawData("png");
+
+    // Convertir l'image QR code en un tableau de bytes
+    const qrImageBytes = await qrCodeBlob?.arrayBuffer();
+    // Intégrer l'image du QR code dans le PDF
+    const qrImage = await pdfDoc.embedPng(qrImageBytes!);
+
+    const pages = pdfDoc.getPages();
+    const firstPage = pages[0];
+    const { width, height } = firstPage.getSize();
+
+    let optionQrcode = {};
+    if(format === 'A3'){
+      optionQrcode = {
+        x: width - 427,  
+        y: 88,
+        width: 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);
+
+    // Enregistrer le PDF modifié en bytes
+    const modifiedPdfBytes = await pdfDoc.save();
+
+    // Convertir les bytes en Blob puis en URL
+    const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+    const url = URL.createObjectURL(blob);
+
+    // étape nécesssaire pour utiliser reactToPrint pour pouvoir nommer le document
+    // reactToPrint fonctionne uniquement avec le HTML
+    // 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 = pdfjsLib.getDocument(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: 1.5 });
+    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');
+    return imageUrl;
+  }
 
   const downloadQRCodeHeadless = useCallback(() => {
     qrCode.download({
@@ -134,6 +218,16 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
   const onChangeSelectedChoice: SelectProps<SelectChoice>['onChange'] = (e) => {
     setSelectedChoice(e.target.value as SelectChoice);
   };
+  
+  const printA3PLV = useReactToPrint({
+    content: () => PLVrefA3.current,
+    documentTitle: 'Movalib_PLV_A3',
+  });
+
+  const printA4PLV = useReactToPrint({
+    content: () => PLVrefA4.current,
+    documentTitle: 'Movalib_PLV_A4',
+  });
 
   const onClickDownload = useMemo(() => {
     switch (selectedChoice) {
@@ -148,11 +242,11 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
       default:
         return () => {};
     }
-  }, [selectedChoice, printA3PLV, printA4PLV, downloadQRCodeHeadless, downloadQrCodeWithCTA]);
+  }, [selectedChoice, downloadQRCodeHeadless, downloadQrCodeWithCTA, printA3PLV, printA4PLV]);
   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} />
+      {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}>
@@ -165,8 +259,8 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
               onChange={onChangeSelectedChoice}
               value={selectedChoice}
             >
-              <MenuItem value={'A3'}>🧾&nbsp;&nbsp;PLV format A4</MenuItem>
-              <MenuItem value={'A4'}>🧾&nbsp;&nbsp;PLV format A3</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>

package/src/helpers/ApiHelper.ts

@@ -7,7 +7,6 @@ export const API_BASE_URL = process.env.REACT_APP_API_URL || 'https://localhost:
 type APISuccess<T> = {
     success: true;
     data: T;
-    location: string
 };
 
 type APIError = {
@@ -45,7 +44,6 @@ function handleResponse(response: Response): Promise<APIResponse<any>> {
     const contentType = response.headers.get("content-type");
     const isJson = contentType && contentType.includes("application/json");
     const dataPromise = isJson ? response.json() : response.text();
-    const location = response.headers.get('location');
 
     return dataPromise.then(data => {
 
@@ -69,7 +67,7 @@ function handleResponse(response: Response): Promise<APIResponse<any>> {
             return { success: false, error: errorMsg };
         }
 
-        return { success: true, data, location };
+        return { success: true, data };
     });
 }
 

package/src/utils/DialogPrint.tsx

@@ -0,0 +1,19 @@
+export function openDialogPrint(url: string) {
+    // Créer un iframe pour charger le document Blob => url
+    const iframe = document.createElement('iframe');
+        iframe.style.position = 'absolute';
+        iframe.style.width = '0px';
+        iframe.style.height = '0px';
+        iframe.src = url;
+        document.body.appendChild(iframe);
+
+      // Ouvrir la boîte de dialogue d'impression lorsque l'iframe est chargée
+    iframe.onload = () => {
+      iframe?.contentWindow?.print();
+    };
+    // Supprimer l'iframe une fois lque la dialog est fermer
+    iframe.onclose = () => {
+      document.body.removeChild(iframe);
+      URL.revokeObjectURL(url);
+    }
+}