@movalib/movalib-commons 1.55.4 → 1.55.5

package/dist/index.d.ts

@@ -51,3 +51,4 @@ export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/
 export { formatDateByCountryCode, getLongFormattedDateTime } from './src/helpers/DateUtils';
 export { request, API_BASE_URL } from './src/helpers/ApiHelper';
 export { RoleType, MovaAppType, DayOfWeek, EventState, EventType, DocumentType, DigitalPassportIndex, DocumentState, Gender, DateFormatTypes, PartsApplicationType, ProductType, OrderPreference, OrderState, SlotAlgorithm, VehiclePlateFormat as VehiclePlateType, SubscriptionPaymentInterval, RegistrationState, PrestationType, PrestationState, CountryCode, SubscriptionState, SubscriptionType, APIMethod, } from './src/helpers/Enums';
+export { openDialogPrint } from './src/utils/DialogPrint';

package/dist/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatFrenchVehiclePlate = exports.formatVehicleTire = exports.validateField = exports.deleteCookie = exports.readCookie = exports.VehicleTire = exports.Event = exports.Schedule = exports.Garage = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.Customer = exports.Logger = exports.Operation = exports.Prestation = exports.Product = exports.Supplier = exports.Employee = exports.Absence = exports.Subscription = exports.PrintSize = exports.PLVComponent = exports.QrCodePLVContainer = exports.GenderSelector = exports.ConfirmationDialog = exports.MovaVehicleTireField = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = exports.VehiclePlateField = exports.QRCode = exports.MovaDialog = exports.Loader = exports.MovaDigitalPassport = exports.VehicleFullCard = exports.ScheduleFields = exports.AddressFields = exports.AccountValidation = exports.GaragePLV = exports.IbanInput = exports.DialogForgotPassword = exports.UserService = exports.GarageService = exports.AuthenticationService = exports.VehicleService = void 0;
-exports.APIMethod = exports.SubscriptionType = exports.SubscriptionState = exports.CountryCode = exports.PrestationState = exports.PrestationType = exports.RegistrationState = exports.SubscriptionPaymentInterval = exports.VehiclePlateType = exports.SlotAlgorithm = exports.OrderState = exports.OrderPreference = exports.ProductType = exports.PartsApplicationType = exports.DateFormatTypes = exports.Gender = exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = exports.MovaAppType = exports.RoleType = exports.API_BASE_URL = exports.request = exports.getLongFormattedDateTime = exports.formatDateByCountryCode = exports.validateEmail = exports.validateText = exports.validatePhoneNumber = exports.getApplicationsShortLabels = exports.isSafariOniOS = exports.getDayOfWeekLabel = exports.findScheduleByDayOfWeek = exports.getFormattedIntervals = exports.getFormattedSchedule = exports.formatPhoneNumber = exports.flexLeftRow = exports.capitalizeFirstLetter = exports.getApplicationShortLabel = exports.isEmpty = void 0;
+exports.openDialogPrint = exports.APIMethod = exports.SubscriptionType = exports.SubscriptionState = exports.CountryCode = exports.PrestationState = exports.PrestationType = exports.RegistrationState = exports.SubscriptionPaymentInterval = exports.VehiclePlateType = exports.SlotAlgorithm = exports.OrderState = exports.OrderPreference = exports.ProductType = exports.PartsApplicationType = exports.DateFormatTypes = exports.Gender = exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = exports.MovaAppType = exports.RoleType = exports.API_BASE_URL = exports.request = exports.getLongFormattedDateTime = exports.formatDateByCountryCode = exports.validateEmail = exports.validateText = exports.validatePhoneNumber = exports.getApplicationsShortLabels = exports.isSafariOniOS = exports.getDayOfWeekLabel = exports.findScheduleByDayOfWeek = exports.getFormattedIntervals = exports.getFormattedSchedule = exports.formatPhoneNumber = exports.flexLeftRow = exports.capitalizeFirstLetter = exports.getApplicationShortLabel = exports.isEmpty = void 0;
 // Export des services
 var VehicleService_1 = require("./src/services/VehicleService");
 Object.defineProperty(exports, "VehicleService", { enumerable: true, get: function () { return __importDefault(VehicleService_1).default; } });
@@ -153,3 +153,6 @@ Object.defineProperty(exports, "CountryCode", { enumerable: true, get: function
 Object.defineProperty(exports, "SubscriptionState", { enumerable: true, get: function () { return Enums_1.SubscriptionState; } });
 Object.defineProperty(exports, "SubscriptionType", { enumerable: true, get: function () { return Enums_1.SubscriptionType; } });
 Object.defineProperty(exports, "APIMethod", { enumerable: true, get: function () { return Enums_1.APIMethod; } });
+// Export des utils
+var DialogPrint_1 = require("./src/utils/DialogPrint");
+Object.defineProperty(exports, "openDialogPrint", { enumerable: true, get: function () { return DialogPrint_1.openDialogPrint; } });

package/dist/src/components/QrCodePLVContainer/QrCodePLVContainer.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 };
 };
@@ -22,18 +58,19 @@ require("../../style/QRCode.css");
 var html2canvas_1 = __importDefault(require("html2canvas"));
 var qr_code_styling_1 = __importDefault(require("qr-code-styling"));
 var react_1 = require("react");
-var react_to_print_1 = require("react-to-print");
 var DownloadedQRCode_1 = require("../../DownloadedQRCode");
 var leaf_yellow_small_png_1 = __importDefault(require("../../assets/images/leaf_yellow_small.png"));
 var Tools_1 = require("../../helpers/Tools");
-var PLVComponent_1 = require("./PLVComponent");
+var pdf_lib_1 = require("pdf-lib");
+var DialogPrint_1 = require("../../utils/DialogPrint");
 var QrCodePLVContainer = function (_a) {
     var data = _a.data;
     var _b = (0, react_1.useState)(null), selectedChoice = _b[0], setSelectedChoice = _b[1];
     var qrCodeRef = (0, react_1.useRef)(null);
-    var PLVrefA4 = (0, react_1.useRef)(null);
-    var PLVrefA3 = (0, react_1.useRef)(null);
     var theme = (0, material_1.useTheme)();
+    //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
+    //
     var qrCodeOptions = (0, react_1.useMemo)(function () { return ({
         width: 300,
         height: 300,
@@ -73,14 +110,65 @@ var QrCodePLVContainer = function (_a) {
             qrCode.append(qrCodeRef.current);
         }
     }, [qrCode]);
-    var printA4PLV = (0, react_to_print_1.useReactToPrint)({
-        content: function () { return PLVrefA4.current; },
-        documentTitle: 'Movalib_PLV_A4',
-    });
-    var printA3PLV = (0, react_to_print_1.useReactToPrint)({
-        content: function () { return PLVrefA3.current; },
-        documentTitle: 'Movalib_PLV_A3',
-    });
+    function printPLV(format) {
+        return __awaiter(this, void 0, void 0, function () {
+            var pdfUrl, response, existingPdfBytes, pdfDoc, qrCodeBlob, qrImageBytes, qrImage, pages, firstPage, _a, width, height, optionQrcode, modifiedPdfBytes, blob, url;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        pdfUrl = "/Movalib_".concat(format, ".pdf");
+                        return [4 /*yield*/, fetch(pdfUrl)];
+                    case 1:
+                        response = _b.sent();
+                        return [4 /*yield*/, response.arrayBuffer()];
+                    case 2:
+                        existingPdfBytes = _b.sent();
+                        return [4 /*yield*/, pdf_lib_1.PDFDocument.load(existingPdfBytes)];
+                    case 3:
+                        pdfDoc = _b.sent();
+                        return [4 /*yield*/, qrCode.getRawData("png")];
+                    case 4:
+                        qrCodeBlob = _b.sent();
+                        return [4 /*yield*/, (qrCodeBlob === null || qrCodeBlob === void 0 ? void 0 : qrCodeBlob.arrayBuffer())];
+                    case 5:
+                        qrImageBytes = _b.sent();
+                        return [4 /*yield*/, pdfDoc.embedPng(qrImageBytes)];
+                    case 6:
+                        qrImage = _b.sent();
+                        pages = pdfDoc.getPages();
+                        firstPage = pages[0];
+                        _a = firstPage.getSize(), width = _a.width, height = _a.height;
+                        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);
+                        return [4 /*yield*/, pdfDoc.save()];
+                    case 7:
+                        modifiedPdfBytes = _b.sent();
+                        blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+                        url = URL.createObjectURL(blob);
+                        // Ouvrir la page d'impression
+                        (0, DialogPrint_1.openDialogPrint)(url);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
     var downloadQRCodeHeadless = (0, react_1.useCallback)(function () {
         qrCode.download({
             extension: 'png',
@@ -121,9 +209,9 @@ var QrCodePLVContainer = function (_a) {
     var onClickDownload = (0, react_1.useMemo)(function () {
         switch (selectedChoice) {
             case 'A3':
-                return printA3PLV;
+                return function () { printPLV('A3'); };
             case 'A4':
-                return printA4PLV;
+                return function () { printPLV('A4'); };
             case 'QR_Headless':
                 return downloadQRCodeHeadless;
             case 'QR_Google':
@@ -131,8 +219,8 @@ var QrCodePLVContainer = function (_a) {
             default:
                 return function () { };
         }
-    }, [selectedChoice, printA3PLV, printA4PLV, downloadQRCodeHeadless, downloadQrCodeWithCTA]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' }, { children: [(0, jsx_runtime_1.jsx)(PLVComponent_1.PLVComponent, { ref: PLVrefA4, url: data, printSize: PLVComponent_1.PrintSize.A4 }), (0, jsx_runtime_1.jsx)(PLVComponent_1.PLVComponent, { ref: PLVrefA3, url: data, printSize: PLVComponent_1.PrintSize.A3 }), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, justifyContent: 'center', alignItems: 'center' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: 'qrcode-plv-select' }, { children: "Choisissez votre support" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: 'qrcode-plv-select', label: 'Choisissez votre support', id: 'qrcode-plv-select', onChange: onChangeSelectedChoice, value: selectedChoice }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A3' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A4" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A4' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A3" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Google' }, { children: "QR Code format GoogleMyBusiness" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Headless' }, { children: "QR Code seul" }))] }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4, marginLeft: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ startIcon: selectedChoice === 'A3' || selectedChoice === 'A4' ? (0, jsx_runtime_1.jsx)(icons_material_1.DocumentScanner, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.QrCode2, {}), onClick: onClickDownload, variant: 'outlined', disabled: !selectedChoice, sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2), borderRadius: '10rem' } }, { children: selectedChoice === 'A3' || selectedChoice === 'A4' ? 'Imprimer' : 'Télécharger' })) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ id: 'qr-code-container', style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)("div", { ref: qrCodeRef, style: {
+    }, [selectedChoice, downloadQRCodeHeadless, downloadQrCodeWithCTA]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, justifyContent: 'center', alignItems: 'center' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: 'qrcode-plv-select' }, { children: "Choisissez votre support" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: 'qrcode-plv-select', label: 'Choisissez votre support', id: 'qrcode-plv-select', onChange: onChangeSelectedChoice, value: selectedChoice }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A4' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A4" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A3' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A3" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Google' }, { children: "QR Code format GoogleMyBusiness" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Headless' }, { children: "QR Code seul" }))] }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4, marginLeft: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ startIcon: selectedChoice === 'A3' || selectedChoice === 'A4' ? (0, jsx_runtime_1.jsx)(icons_material_1.DocumentScanner, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.QrCode2, {}), onClick: onClickDownload, variant: 'outlined', disabled: !selectedChoice, sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2), borderRadius: '10rem' } }, { children: selectedChoice === 'A3' || selectedChoice === 'A4' ? 'Imprimer' : 'Télécharger' })) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ id: 'qr-code-container', style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)("div", { ref: qrCodeRef, style: {
                         height: '300px',
                         width: '300px',
                         maxWidth: '300px !important',

package/dist/src/helpers/ApiHelper.d.ts

@@ -4,6 +4,7 @@ export type APIResponse<T> = {
     success: boolean;
     data?: T;
     error?: string;
+    location?: string | null;
 };
 export type APIRequest = {
     url: string;

package/dist/src/helpers/ApiHelper.js

@@ -12,14 +12,14 @@ function handleError(error) {
     var msg = error.message.includes('fetch') ? "Connexion impossible" : error.message;
     return {
         success: false,
-        error: msg
+        error: msg,
     };
 }
 function handleResponse(response) {
     var contentType = response.headers.get("content-type");
     var isJson = contentType && contentType.includes("application/json");
     var dataPromise = isJson ? response.json() : response.text();
-    var location = response.headers.get('location');
+    var location = response.headers.get('Location');
     return dataPromise.then(function (data) {
         if (!response.ok) {
             Logger_1.default.error(data);

package/dist/src/helpers/DateUtils.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="date-fns" />
 import { DateFormatTypes } from './Enums';
 export declare const countryTimeZones: {
     [key: string]: string;

package/dist/src/utils/DialogPrint.d.ts

@@ -0,0 +1 @@
+export declare function openDialogPrint(url: string): void;

package/dist/src/utils/DialogPrint.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openDialogPrint = void 0;
+function openDialogPrint(url) {
+    var 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 = function () {
+        var _a;
+        (_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.print();
+    };
+    // Supprimer l'iframe une fois l'impression terminée
+    iframe.onclose = function () {
+        document.body.removeChild(iframe);
+        URL.revokeObjectURL(url);
+    };
+}
+exports.openDialogPrint = openDialogPrint;

package/index.ts

@@ -111,3 +111,6 @@ export {
   SubscriptionType,
   APIMethod,
 } from './src/helpers/Enums';
+
+// Export des utils
+export { openDialogPrint } from './src/utils/DialogPrint';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.55.4",
+  "version": "1.55.5",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,6 +30,7 @@
     "file-loader": "^6.2.0",
     "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
+    "pdf-lib": "^1.17.1",
     "qr-code-styling": "^1.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,7 +41,9 @@
     "typescript": "^4.9.5"
   },
   "eslintConfig": {
-    "extends": ["react-app"]
+    "extends": [
+      "react-app"
+    ]
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.4",

package/src/components/QrCodePLVContainer/QrCodePLVContainer.tsx

@@ -21,6 +21,8 @@ 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 { openDialogPrint } from '../../utils/DialogPrint';
 
 type SelectChoice = null | 'A3' | 'A4' | 'QR_Headless' | 'QR_Google';
 
@@ -28,11 +30,11 @@ 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();
 
+  //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,
@@ -77,16 +79,56 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
       qrCode.append(qrCodeRef.current);
     }
   }, [qrCode]);
+  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]; // Ajouter le QR code à la première page
+    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);
 
-  const printA4PLV = useReactToPrint({
-    content: () => PLVrefA4.current,
-    documentTitle: 'Movalib_PLV_A4',
-  });
+    // Enregistrer le PDF modifié en bytes
+    const modifiedPdfBytes = await pdfDoc.save();
 
-  const printA3PLV = useReactToPrint({
-    content: () => PLVrefA3.current,
-    documentTitle: 'Movalib_PLV_A3',
-  });
+    // Convertir les bytes en Blob puis en URL
+    const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+    const url = URL.createObjectURL(blob);
+
+    // Ouvrir la page d'impression
+    openDialogPrint(url);
+  }
 
   const downloadQRCodeHeadless = useCallback(() => {
     qrCode.download({
@@ -138,9 +180,9 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
   const onClickDownload = useMemo(() => {
     switch (selectedChoice) {
       case 'A3':
-        return printA3PLV;
+        return () => {printPLV('A3')};
       case 'A4':
-        return printA4PLV;
+        return () => {printPLV('A4')};
       case 'QR_Headless':
         return downloadQRCodeHeadless;
       case 'QR_Google':
@@ -148,12 +190,9 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
       default:
         return () => {};
     }
-  }, [selectedChoice, printA3PLV, printA4PLV, downloadQRCodeHeadless, downloadQrCodeWithCTA]);
+  }, [selectedChoice, 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 justifyContent='center' alignItems='center'>
         <Grid item xs={7}>
           <FormControl fullWidth size='small'>
@@ -165,8 +204,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

@@ -21,8 +21,8 @@ type APIError = {
 export type APIResponse<T> = {
     success: boolean,
     data?: T,
-    error?: string
-
+    error?: string,
+    location?: string | null
 }
 
 export type APIRequest = {
@@ -36,7 +36,7 @@ function handleError(error: Error): APIResponse<null>  {
     let msg = error.message.includes('fetch') ? "Connexion impossible" : error.message;
     return {
         success: false,
-        error: msg
+        error: msg,
     };
 }
 
@@ -45,7 +45,8 @@ 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');
+    const location = response.headers.get('Location');
+
 
     return dataPromise.then(data => {
 
@@ -69,7 +70,7 @@ function handleResponse(response: Response): Promise<APIResponse<any>> {
             return { success: false, error: errorMsg };
         }
 
-        return { success: true, data, location };
+        return { success: true, data, location: location };
     });
 }
 

package/src/utils/DialogPrint.tsx

@@ -0,0 +1,18 @@
+export function openDialogPrint(url: string) {
+    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 l'impression terminée
+    iframe.onclose = () => {
+      document.body.removeChild(iframe);
+      URL.revokeObjectURL(url);
+    }
+}