@movalib/movalib-commons 1.36.0 → 1.37.0

package/devIndex.tsx

@@ -79,7 +79,7 @@ const App = () => {
   }
 
   const handleScheduleChange = (schedule: DaySchedule[]) => {
-    
+
     if(schedule){
           // On contrôle l'absence d'erreur dans le tableau de schedule
           const hasErrors = schedule.some(day => day.intervals.some(interval => interval.error !== null));
@@ -88,9 +88,9 @@ const App = () => {
               // On crée un objet Schedule sur la base du DaySchedule reçu de ScheduleFields
               let newSchedule = new Array<Schedule>();
 
-              schedule.forEach(s => {                    
+              schedule.forEach(s => {
                   newSchedule.push(new Schedule(
-                      s.day, 
+                      s.day,
                       s.intervals.map(({ startTime, endTime, countryCode }) => ({ startTime, endTime, countryCode })),
                       true
                   ));
@@ -117,17 +117,17 @@ const App = () => {
             } } form={{
               gender: undefined
             }} />
-          
+
           <Container style={flexCenter} sx={{ width: '400px', mt: 2}}>
             <VehiclePlateField onValidVehiclePlate={function (vehiclePlate: string): void {
                 alert('plaque valide');
               } } />
           </Container>
- 
 
-            <MovaLogin 
+
+            <MovaLogin
               darkMode={false}
-              movaAppType={MovaAppType.INDIVIDUAL} 
+              movaAppType={MovaAppType.INDIVIDUAL}
               version="0.1.3"
               onSubmit={function (form: MovaLoginForm): void {
                 alert('Form Submitted !');
@@ -135,7 +135,7 @@ const App = () => {
                 throw new Error('Function not implemented.');
               } } />
 
-            <MovaSignUp 
+            <MovaSignUp
               headerText={<><Alert severity='success' icon={<></>} style={flexCenter} sx={{width:'100%', textTransform: 'none', textAlign: 'center'}}>
                 <b>NOUVEAU COMPTE UTILISATEUR</b></Alert></>}
               darkMode={false}
@@ -145,17 +145,19 @@ const App = () => {
 
             <GaragePLV url={getQRCodeData()} />
 
-            <QRCode data={getQRCodeData()} showDownload={true} size={400} />
+            <div id='qr-code-container'>
+              <QRCode data={getQRCodeData()} size={400} showDownload showCTAWhenDownloaded />
+            </div>
 
             <div style={{ marginTop: '40px' }} />
 
             <div style={flexCenter}>
-                <ScheduleFields 
+                <ScheduleFields
                   //schedules={undefined}
                   schedules={garage?.schedules}
                   size="small"
-                  timePickerStep={15} 
-                  onChange={handleScheduleChange}          
+                  timePickerStep={15}
+                  onChange={handleScheduleChange}
                 />
             </div>
 

package/dist/devIndex.js

@@ -136,7 +136,7 @@ var App = function () {
                                     throw new Error('Function not implemented.');
                                 } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { headerText: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: 'success', icon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), style: Tools_1.flexCenter, sx: { width: '100%', textTransform: 'none', textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)("b", { children: "NOUVEAU COMPTE UTILISATEUR" }) })) }), darkMode: false, movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
                                     alert('Form Submitted !');
-                                } }), (0, jsx_runtime_1.jsx)(GaragePLV_1.default, { url: getQRCodeData() }), (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), showDownload: true, size: 400 }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default
+                                } }), (0, jsx_runtime_1.jsx)(GaragePLV_1.default, { url: getQRCodeData() }), (0, jsx_runtime_1.jsx)("div", __assign({ id: 'qr-code-container' }, { children: (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), size: 400, showDownload: true, showCTAWhenDownloaded: true }) })), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default
                                 //schedules={undefined}
                                 , { 
                                     //schedules={undefined}

package/dist/src/QRCode.d.ts

@@ -4,6 +4,7 @@ interface QRCodeProps {
     size?: number;
     data?: string;
     showDownload?: boolean;
+    showCTAWhenDownloaded?: boolean;
 }
 declare const QRCode: FC<QRCodeProps>;
 export default QRCode;

package/dist/src/QRCode.js

@@ -10,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -20,14 +56,15 @@ var leaf_yellow_small_png_1 = __importDefault(require("./assets/images/leaf_yell
 var material_1 = require("@mui/material");
 var qr_code_styling_1 = __importDefault(require("qr-code-styling"));
 require("./QRCode.css");
+var html2canvas_1 = __importDefault(require("html2canvas"));
 var QRCode = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 300 : _b, data = _a.data, _c = _a.showDownload, showDownload = _c === void 0 ? false : _c;
+    var _b = _a.size, size = _b === void 0 ? 300 : _b, data = _a.data, _c = _a.showDownload, showDownload = _c === void 0 ? false : _c, _d = _a.showCTAWhenDownloaded, showCTAWhenDownloaded = _d === void 0 ? false : _d;
     var theme = (0, material_1.useTheme)();
     // Le contenu du QR Code est transmis en props, sinon redirection vers le site vitrine
     var defaultData = 'https://movalib.com';
-    var _d = (0, react_1.useState)({
-        width: size * 2,
-        height: size * 2,
+    var options = (0, react_1.useMemo)(function () { return ({
+        width: size,
+        height: size,
         type: 'canvas',
         data: data !== null && data !== void 0 ? data : defaultData,
         image: leaf_yellow_small_png_1.default,
@@ -43,70 +80,92 @@ var QRCode = function (_a) {
             margin: 15
         },
         dotsOptions: {
-            //color: 'black',
             color: (0, material_1.darken)(theme.palette.primary.main, 0.4),
-            // gradient: {
-            //   type: 'linear', // 'radial'
-            //   rotation: 0,
-            //   colorStops: [{ offset: 0, color: theme.palette.primary.main }, { offset: 1, color: theme.palette.secondary.main }]
-            // },
-            type: 'square' // "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded";
+            type: 'square'
         },
         backgroundOptions: {
             color: 'white',
-            // gradient: {
-            //   type: 'linear', // 'radial'
-            //   rotation: 0,
-            //   colorStops: [{ offset: 0, color: '#ededff' }, { offset: 1, color: '#e6e7ff' }]
-            // },
         },
         cornersSquareOptions: {
-            //color: '#de007dff', 
             color: (0, material_1.darken)(theme.palette.secondary.main, 0.2),
             type: 'square',
-            // gradient: {
-            //   type: 'linear', // 'radial'
-            //   rotation: 180,
-            //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
-            // },
         },
         cornersDotOptions: {
-            //color: '#de007dff',
             color: (0, material_1.darken)(theme.palette.secondary.main, 0.2),
             type: 'square',
-            // gradient: {
-            //   type: 'linear', // 'radial'
-            //   rotation: 180,
-            //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
-            // },
         }
-    }), options = _d[0], setOptions = _d[1];
-    // Format de téléchargement par défaut
-    var _e = (0, react_1.useState)("png"), fileExt = _e[0], setFileExt = _e[1];
-    var qrCode = (0, react_1.useState)(new qr_code_styling_1.default(options))[0];
+    }); }, [size, data]);
+    var qrCode = (0, react_1.useMemo)(function () { return new qr_code_styling_1.default(options); }, [options]);
     var ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         if (ref.current) {
             qrCode.append(ref.current);
         }
     }, [qrCode, ref]);
-    (0, react_1.useEffect)(function () {
-        if (!qrCode)
-            return;
-        qrCode.update(options);
-    }, [qrCode, options]);
-    /*   const onExtensionChange = (event: ChangeEvent<HTMLSelectElement>) => {
-        setFileExt(event.target.value as Extension);
-      }; */
-    var onDownloadClick = function () {
-        if (!qrCode)
+    var onDownloadClick = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (!qrCode)
+                return [2 /*return*/];
+            if (!showCTAWhenDownloaded) {
+                qrCode.download({
+                    extension: "png",
+                    name: "movalib-qr-code"
+                });
+            }
+            else {
+                downloadQrCodeWithCTA();
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var downloadQrCodeWithCTA = function () {
+        // Check if we have everything we need
+        var qrCodeContainer = document.querySelector('#qr-code-container');
+        var qrCodeDiv = qrCodeContainer === null || qrCodeContainer === void 0 ? void 0 : qrCodeContainer.querySelector('.qr-code');
+        var qrCodeCanva = qrCodeDiv === null || qrCodeDiv === void 0 ? void 0 : qrCodeDiv.querySelector('canvas');
+        // If we don't have the QR Code, we can't download it
+        if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva) {
             return;
-        qrCode.download({
-            extension: fileExt,
-            name: "movalib-qr-code"
+        }
+        var tmpRendered = document.createElement('div');
+        tmpRendered.style.width = 'fit-content';
+        tmpRendered.style.display = 'flex';
+        tmpRendered.style.justifyContent = 'center';
+        tmpRendered.style.flexDirection = 'column';
+        tmpRendered.style.alignItems = 'center';
+        tmpRendered.style.gap = '8px';
+        tmpRendered.style.background = 'transparent';
+        var catchPhrase = document.createElement('span');
+        catchPhrase.innerText = 'PRENEZ RENDEZ-VOUS EN LIGNE !';
+        catchPhrase.style.color = (0, material_1.darken)(theme.palette.primary.main, 0.4);
+        catchPhrase.style.fontWeight = '900';
+        catchPhrase.style.padding = '8px';
+        catchPhrase.style.fontFamily = 'Caveat';
+        catchPhrase.style.fontSize = '2em';
+        var scanThis = document.createElement('span');
+        scanThis.innerText = 'SCANNEZ CE QR CODE';
+        scanThis.style.color = (0, material_1.darken)(theme.palette.primary.main, 0.4);
+        scanThis.style.fontWeight = '900';
+        scanThis.style.marginBottom = '8px';
+        scanThis.style.fontSize = '1.5em';
+        tmpRendered.append(catchPhrase);
+        tmpRendered.append(qrCodeCanva);
+        tmpRendered.append(scanThis);
+        // 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
+        (0, html2canvas_1.default)(tmpRendered).then(function (canvas) {
+            var 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(ref.current);
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,6 +28,7 @@
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
     "file-loader": "^6.2.0",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "qr-code-styling": "^1.4.4",
     "react": "^18.2.0",

package/src/QRCode.tsx

@@ -1,45 +1,40 @@
-import { useState, type FC, useRef, useEffect, ChangeEvent } from 'react';
+import { type FC, useRef, useEffect, useMemo } from 'react';
 import QRCodeImage from "./assets/images/leaf_yellow_small.png";
 import { Box, Button, darken, useTheme } from '@mui/material';
-import QRCodeStyling, {
-  DrawType,
-  TypeNumber,
-  Mode,
-  ErrorCorrectionLevel,
-  DotType,
-  CornerSquareType,
-  CornerDotType,
-  Extension,
-  Options
-} from "qr-code-styling";
+import QRCodeStyling, { Options } from "qr-code-styling";
 import './QRCode.css';
-import { Height } from '@mui/icons-material';
-
+import html2canvas from "html2canvas";
 
 interface QRCodeProps {
-  size?: number,
-  data?:string,
-  showDownload?:boolean
+  size?: number;
+  data?:string;
+  showDownload?: boolean;
+  showCTAWhenDownloaded?: boolean;
 }
-  
-const QRCode: FC<QRCodeProps> = ({ size = 300, data, showDownload=false }) => {
+
+const QRCode: FC<QRCodeProps> = ({
+  size = 300,
+  data,
+  showDownload= false,
+  showCTAWhenDownloaded= false,
+}) => {
 
   const theme = useTheme();
-  
+
   // Le contenu du QR Code est transmis en props, sinon redirection vers le site vitrine
-  const defaultData:string = 'https://movalib.com';
+  const defaultData = 'https://movalib.com';
 
-  const [options, setOptions] = useState<Options>({
-    width: size*2,
-    height: size*2,
-    type: 'canvas' as DrawType,
+  const options: Options =  useMemo(() => ({
+    width: size,
+    height: size,
+    type: 'canvas',
     data: data ?? defaultData,
     image: QRCodeImage,
     margin: 10,
     qrOptions: {
-      typeNumber: 0 as TypeNumber,
-      mode: 'Byte' as Mode,
-      errorCorrectionLevel: 'Q' as ErrorCorrectionLevel
+      typeNumber: 0,
+      mode: 'Byte',
+      errorCorrectionLevel: 'Q'
     },
     imageOptions: {
       hideBackgroundDots: true,
@@ -47,48 +42,23 @@ const QRCode: FC<QRCodeProps> = ({ size = 300, data, showDownload=false }) => {
       margin: 15
     },
     dotsOptions: {
-      //color: 'black',
       color: darken(theme.palette.primary.main, 0.4),
-      // gradient: {
-      //   type: 'linear', // 'radial'
-      //   rotation: 0,
-      //   colorStops: [{ offset: 0, color: theme.palette.primary.main }, { offset: 1, color: theme.palette.secondary.main }]
-      // },
-      type: 'square' as DotType  // "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded";
+      type: 'square'
     },
     backgroundOptions: {
       color: 'white',
-      // gradient: {
-      //   type: 'linear', // 'radial'
-      //   rotation: 0,
-      //   colorStops: [{ offset: 0, color: '#ededff' }, { offset: 1, color: '#e6e7ff' }]
-      // },
     },
     cornersSquareOptions: {
-      //color: '#de007dff', 
       color: darken(theme.palette.secondary.main, 0.2),
-      type: 'square' as CornerSquareType,
-      // gradient: {
-      //   type: 'linear', // 'radial'
-      //   rotation: 180,
-      //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
-      // },
+      type: 'square',
     },
     cornersDotOptions: {
-      //color: '#de007dff',
       color: darken(theme.palette.secondary.main, 0.2),
-      type: 'square' as CornerDotType,
-      // gradient: {
-      //   type: 'linear', // 'radial'
-      //   rotation: 180,
-      //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
-      // },
+      type: 'square',
     }
-  });
+  }), [size, data]);
 
-  // Format de téléchargement par défaut
-  const [fileExt, setFileExt] = useState<Extension>("png");
-  const [qrCode] = useState<QRCodeStyling>(new QRCodeStyling(options));
+  const qrCode = useMemo(() => new QRCodeStyling(options), [options]);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -97,45 +67,105 @@ const QRCode: FC<QRCodeProps> = ({ size = 300, data, showDownload=false }) => {
     }
   }, [qrCode, ref]);
 
-  useEffect(() => {
+  const onDownloadClick = async () => {
     if (!qrCode) return;
-    qrCode.update(options);
-  }, [qrCode, options]);
 
+    if(!showCTAWhenDownloaded) {
+      qrCode.download({
+        extension: "png",
+        name:"movalib-qr-code"
+      });
+    } else {
+      downloadQrCodeWithCTA();
+    }
+  };
 
-/*   const onExtensionChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setFileExt(event.target.value as Extension);
-  }; */
+  const downloadQrCodeWithCTA = () => {
+    // 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 onDownloadClick = () => {
-    if (!qrCode) return;
-    qrCode.download({
-      extension: fileExt,
-      name:"movalib-qr-code"
+    // If we don't have the QR Code, we can't download it
+    if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva) {
+      return;
+    }
+
+    const tmpRendered = document.createElement('div');
+
+    tmpRendered.style.width = 'fit-content';
+    tmpRendered.style.display = 'flex';
+    tmpRendered.style.justifyContent = 'center';
+    tmpRendered.style.flexDirection = 'column';
+    tmpRendered.style.alignItems = 'center';
+    tmpRendered.style.gap = '8px';
+    tmpRendered.style.background= 'transparent';
+
+    const catchPhrase = document.createElement('span');
+    catchPhrase.innerText = 'PRENEZ RENDEZ-VOUS EN LIGNE !';
+    catchPhrase.style.color = darken(theme.palette.primary.main, 0.4);
+    catchPhrase.style.fontWeight = '900';
+    catchPhrase.style.padding = '8px';
+    catchPhrase.style.fontFamily= 'Caveat';
+    catchPhrase.style.fontSize= '2em';
+
+    const scanThis = document.createElement('span');
+
+    scanThis.innerText = 'SCANNEZ CE QR CODE';
+    scanThis.style.color = darken(theme.palette.primary.main, 0.4);
+    scanThis.style.fontWeight = '900';
+    scanThis.style.marginBottom = '8px';
+    scanThis.style.fontSize= '1.5em';
+
+
+    tmpRendered.append(catchPhrase);
+    tmpRendered.append(qrCodeCanva);
+    tmpRendered.append(scanThis);
+
+
+    // 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 => {
+      let 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(ref.current!);
+  }
 
   return (
-    <Box sx={{
+    <div
+      style={{
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center' }} >
-      <div ref={ref} style={{height: `${size}px`, width: `${size}px`, maxWidth: `${size}px !important`}} 
+        alignItems: 'center'
+      }}
+    >
+      <div
+        ref={ref}
+        style={{height: `${size}px`, width: `${size}px`, maxWidth: `${size}px !important`}}
         className='qr-code'
       />
-{/*         <select onChange={onExtensionChange} value={fileExt}>
-          <option value="svg">SVG</option>
-          <option value="png">PNG</option>
-          <option value="jpeg">JPEG</option>
-          <option value="webp">WEBP</option>
-        </select> */}
-        {showDownload && 
-          <Box sx={{ display:'flex', justifyContent:'center'}}>
-            <Button variant='outlined' onClick={onDownloadClick} sx={{ color: darken(theme.palette.primary.main, 0.2)}}>
-              Télécharger</Button>
-          </Box>
-        }
-    </Box>
+      {showDownload &&
+        <Box sx={{ display:'flex', justifyContent:'center'}}>
+          <Button
+            variant='outlined'
+            onClick={onDownloadClick}
+            sx={{ color: darken(theme.palette.primary.main, 0.2)}}
+          >
+            Télécharger
+          </Button>
+        </Box>
+      }
+    </div>
   );
 }