@movalib/movalib-commons 1.1.20 → 1.1.22

package/PV_README.md

@@ -1,6 +1,6 @@
 # 1. build this movalib commons lib
 
-### `npm build`
+### `npm run build`
 
 # 2. publish this movalib commons lib (public)
 

package/devIndex.tsx

@@ -71,7 +71,7 @@ const App = () => {
 
   const getQRCodeData = ():string => {
     // On renvoie les données pour le QR Code, l'url change selon l'environnement (variables d'environnement)
-    return `https://localhost:3001/#/garage/1?redirect=garage`;
+    return `https://app.movalib.com/#/garage/2?redirect=garage`;
   }
 
   const handleScheduleChange = (schedule: DaySchedule[]) => {
@@ -133,7 +133,7 @@ const App = () => {
 
             <GaragePLV url={getQRCodeData()} />
 
-            <QRCode data={getQRCodeData()} showDownload={true} />
+            <QRCode data={getQRCodeData()} showDownload={true} size={400} />
 
             <div style={{ marginTop: '40px' }} />
 

package/dist/devIndex.js

@@ -97,7 +97,7 @@ var App = function () {
     };
     var getQRCodeData = function () {
         // On renvoie les données pour le QR Code, l'url change selon l'environnement (variables d'environnement)
-        return "https://localhost:3001/#/garage/1?redirect=garage";
+        return "https://app.movalib.com/#/garage/2?redirect=garage";
     };
     var handleScheduleChange = function (schedule) {
         if (schedule) {
@@ -128,7 +128,7 @@ var App = function () {
                                     throw new Error('Function not implemented.');
                                 } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { 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 }), (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: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 30, onChange: handleScheduleChange }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function () { return setOpenAccountValidation(!openAccountValidation); } }, { children: "Validation de compte" })) })), openAccountValidation && (0, jsx_runtime_1.jsx)(AccountValidation_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, onSubmit: function (success, message) {
+                                } }), (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, { schedules: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 30, onChange: handleScheduleChange }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function () { return setOpenAccountValidation(!openAccountValidation); } }, { children: "Validation de compte" })) })), openAccountValidation && (0, jsx_runtime_1.jsx)(AccountValidation_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, onSubmit: function (success, message) {
                             throw new Error('Function not implemented.');
                         } })] })) })) }));
 };

package/dist/src/GaragePLV.d.ts

@@ -1,6 +1,11 @@
 import { FC } from 'react';
+export declare enum PrintSize {
+    A3 = 0,
+    A4 = 1
+}
 interface GaragePLVProps {
     url: string;
+    printSize?: PrintSize;
 }
 declare const GaragePLV: FC<GaragePLVProps>;
 export default GaragePLV;

package/dist/src/GaragePLV.js

@@ -52,6 +52,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrintSize = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importStar(require("react"));
 var QRCode_1 = __importDefault(require("./QRCode"));
@@ -60,6 +61,11 @@ var material_1 = require("@mui/material");
 var Tools_1 = require("./helpers/Tools");
 var logo_large_png_1 = __importDefault(require("./assets/images/logo/logo_large.png"));
 var leafs_large_png_1 = __importDefault(require("./assets/images/leafs_large.png"));
+var PrintSize;
+(function (PrintSize) {
+    PrintSize[PrintSize["A3"] = 0] = "A3";
+    PrintSize[PrintSize["A4"] = 1] = "A4";
+})(PrintSize = exports.PrintSize || (exports.PrintSize = {}));
 var PLVTitle = {
     display: 'flex',
     justifyContent: 'left',
@@ -67,7 +73,16 @@ var PLVTitle = {
     textTransform: 'uppercase',
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '50px',
-    lineHeight: 1,
+    lineHeight: 1.2,
+};
+var PLVTitleA3 = {
+    display: 'flex',
+    justifyContent: 'left',
+    alignItems: 'center',
+    textTransform: 'uppercase',
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '75px',
+    lineHeight: 1.2,
 };
 var PLVHeaderLogo = {
     display: 'flex',
@@ -93,10 +108,20 @@ var PLVBaseLine = {
     display: 'flex',
     justifyContent: 'left',
     alignItems: 'center',
-    fontFamily: 'Dancing Script',
+    fontFamily: 'Caveat',
+    fontWeight: 700,
     transform: 'rotate(-10deg)',
     fontSize: '30px',
 };
+var PLVBaseLineA3 = {
+    display: 'flex',
+    justifyContent: 'left',
+    alignItems: 'center',
+    fontFamily: 'Caveat',
+    fontWeight: 700,
+    transform: 'rotate(-10deg)',
+    fontSize: '40px',
+};
 var PVLFooterText = {
     fontFamily: 'Montserrat, sans-serif',
     textTransform: 'uppercase',
@@ -104,6 +129,13 @@ var PVLFooterText = {
     letterSpacing: 4,
     position: 'absolute'
 };
+var PVLFooterTextA3 = {
+    fontFamily: 'Montserrat, sans-serif',
+    textTransform: 'uppercase',
+    fontSize: '20px',
+    letterSpacing: 4,
+    position: 'absolute'
+};
 /**
  * PLV Garage au format A4
  */
@@ -113,19 +145,29 @@ var PLVComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     PLVComponent.prototype.render = function () {
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "printable-content", style: { width: '210mm', height: '297mm' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12, style: PLVHeaderLogo, sx: { m: 2, mt: 4 } }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_large_png_1.default, style: PLVHeaderLogo }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 12, sx: { ml: 6, mt: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'highlight' }, { children: "Dans ce garage" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'highlight' }, { children: " prenez rendez-vous " })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'highlight' }, { children: " en un clic. " })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 12, sx: { ml: 6, mt: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'not-highlight' }, { children: " Votre entretien " })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'not-highlight' }, { children: " auto ne sera plus " })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'not-highlight' }, { children: " un casse-t\u00EAte ! " })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7, sx: { pl: 8, mt: 8 }, style: PLVQRCode }, { children: (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: this.props.url }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 5, style: PLVBaseLine }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: PLVBaseLine }, { children: "En plus l'appli est gratuite !" })) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 12, sx: { mt: 13 }, style: PLVFooterLogo }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ style: PVLFooterText }, { children: "WWW.MOVALIB.COM" })), (0, jsx_runtime_1.jsx)("img", { src: leafs_large_png_1.default, style: PLVFooterLogo })] }))] })) })));
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ 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',
+            } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12, style: PLVHeaderLogo, sx: { m: 2, mt: 6 } }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_large_png_1.default, style: PLVHeaderLogo }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 12, sx: { ml: 6, mt: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'highlight' }, { children: "Dans ce garage" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'highlight' }, { children: " prenez rendez-vous " })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'highlight' }, { children: " en un clic. " })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 12, sx: { ml: 6, mt: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'not-highlight' }, { children: " Votre entretien " })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'not-highlight' }, { children: " auto ne sera plus " })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'not-highlight' }, { children: " un casse-t\u00EAte ! " })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7, sx: { pl: 8, mt: this.props.printSize === PrintSize.A3 ? 11 : 7 }, style: PLVQRCode }, { children: (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: this.props.url, size: this.props.printSize === PrintSize.A4 ? 350 : 500 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 5, style: PLVBaseLine }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: this.props.printSize === PrintSize.A3 ? PLVBaseLineA3 : PLVBaseLine }, { children: "En plus l'appli est gratuite !" })) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 12, sx: { mt: 3 }, style: PLVFooterLogo }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ style: this.props.printSize === PrintSize.A3 ? PVLFooterTextA3 : PVLFooterText }, { children: "WWW.MOVALIB.COM" })), (0, jsx_runtime_1.jsx)("img", { src: leafs_large_png_1.default, style: PLVFooterLogo })] }))] })) })));
     };
     return PLVComponent;
 }(react_1.default.Component));
 var GaragePLV = function (_a) {
     var url = _a.url;
-    var componentRef = (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)();
-    var handlePrint = (0, react_to_print_1.useReactToPrint)({
-        content: function () { return componentRef.current; },
+    var handleA4Print = (0, react_to_print_1.useReactToPrint)({
+        content: function () { return PLVrefA4.current; },
         documentTitle: 'Movalib_PLV_A4',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: Tools_1.flexCenter }, { children: [(0, jsx_runtime_1.jsx)(PLVComponent, { ref: componentRef, url: url }), (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: handlePrint, variant: 'outlined', sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2) } }, { children: "Imprimer la PLV (A4)" }))] })));
+    var handleA3Print = (0, react_to_print_1.useReactToPrint)({
+        content: function () { return PLVrefA3.current; },
+        documentTitle: 'Movalib_PLV_A3',
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: Tools_1.flexCenter }, { children: [(0, jsx_runtime_1.jsx)(PLVComponent, { ref: PLVrefA4, url: url, printSize: PrintSize.A4 }), (0, jsx_runtime_1.jsx)(PLVComponent, { ref: PLVrefA3, url: url, printSize: PrintSize.A3 }), (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: handleA4Print, variant: 'outlined', sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2), mr: 2 } }, { children: "\uD83E\uDDFE\u00A0\u00A0Imprimer la PLV (A4)" })), (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: handleA3Print, variant: 'outlined', sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2) } }, { children: "\uD83E\uDDFE\u00A0\u00A0Imprimer la PLV (A3)" }))] })));
 };
 exports.default = GaragePLV;
 // CSS pour cacher le contenu à l'écran mais le rendre imprimable

package/dist/src/QRCode.css

@@ -1,4 +1,8 @@
 .qr-code canvas {
-    max-width: 300px !important;
+    /*max-width: 300px !important;*/
+    /* margin: 20px 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
 }

package/dist/src/QRCode.d.ts

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
 import './QRCode.css';
 interface QRCodeProps {
+    size?: number;
     data?: string;
     showDownload?: boolean;
 }

package/dist/src/QRCode.js

@@ -20,24 +20,14 @@ 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 styles = {
-    inputWrapper: {
-        margin: "20px 0",
-        display: "flex",
-        alignItems: 'center',
-        justifyContent: "center",
-        width: '300px',
-        height: '300px'
-    }
-};
 var QRCode = function (_a) {
-    var data = _a.data, _b = _a.showDownload, showDownload = _b === void 0 ? false : _b;
+    var _b = _a.size, size = _b === void 0 ? 300 : _b, data = _a.data, _c = _a.showDownload, showDownload = _c === void 0 ? false : _c;
     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 _c = (0, react_1.useState)({
-        width: 600,
-        height: 600,
+    var _d = (0, react_1.useState)({
+        width: size * 2,
+        height: size * 2,
         type: 'canvas',
         data: data !== null && data !== void 0 ? data : defaultData,
         image: leaf_yellow_small_png_1.default,
@@ -90,9 +80,9 @@ var QRCode = function (_a) {
             //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
             // },
         }
-    }), options = _c[0], setOptions = _c[1];
+    }), options = _d[0], setOptions = _d[1];
     // Format de téléchargement par défaut
-    var _d = (0, react_1.useState)("png"), fileExt = _d[0], setFileExt = _d[1];
+    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];
     var ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
@@ -120,7 +110,7 @@ var QRCode = function (_a) {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center'
-        } }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, style: styles.inputWrapper, className: 'qr-code' }), showDownload &&
+        } }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, style: { height: "".concat(size, "px"), width: "".concat(size, "px"), maxWidth: "".concat(size, "px !important") }, className: 'qr-code' }), showDownload &&
                 (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ variant: 'outlined', onClick: onDownloadClick, sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2) } }, { children: "T\u00E9l\u00E9charger" })) }))] })));
 };
 exports.default = QRCode;

package/dist/src/models/Event.d.ts

@@ -7,12 +7,14 @@ import Operation from "./Operation";
 import Product from "./Product";
 import Supplier from "./Supplier";
 import Document from "./Document";
+import Address from "./Address";
 export default class Event {
     id: string;
     ownerId: number;
     type: EventType;
     title: string;
     garageName: string;
+    garageAddress: Address;
     garageId: number;
     start?: Date;
     end?: Date;
@@ -41,6 +43,6 @@ export default class Event {
     supplier?: Supplier;
     quoteAmount?: number;
     documents?: Document[];
-    constructor(id: string, ownerId: number, type: EventType, title: string, garageName: string, garageId: number, state: EventState, start?: Date, end?: Date, prestations?: Prestation[], operations?: Operation[], products?: Product[], guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string);
+    constructor(id: string, ownerId: number, type: EventType, title: string, garageName: string, garageAddress: Address, garageId: number, state: EventState, start?: Date, end?: Date, prestations?: Prestation[], operations?: Operation[], products?: Product[], guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string);
     static getPrestationsList(event: Event): string[];
 }

package/dist/src/models/Event.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var Event = /** @class */ (function () {
-    function Event(id, ownerId, type, title, garageName, garageId, state, start, end, prestations, operations, products, guestsId, vehicleId, quoteId, notes) {
+    function Event(id, ownerId, type, title, garageName, garageAddress, garageId, state, start, end, prestations, operations, products, guestsId, vehicleId, quoteId, notes) {
         this.id = id;
         this.notes = notes;
         this.ownerId = ownerId;
         this.type = type;
         this.title = title;
         this.garageName = garageName;
+        this.garageAddress = garageAddress;
         this.garageId = garageId;
         this.state = state;
         this.start = start ? new Date(start) : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/public/index.html

@@ -4,6 +4,7 @@
   <title>Movalib Commons</title>
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap" rel="stylesheet">
 
 </head>
 <body>

package/src/GaragePLV.tsx

@@ -7,8 +7,14 @@ import LogoLarge from './assets/images/logo/logo_large.png';
 import LeafsLarge from './assets/images/leafs_large.png';
 import theme from '../theme';
 
+export enum PrintSize {
+  A3,
+  A4
+}
+
 interface GaragePLVProps {
   url: string;
+  printSize?: PrintSize
 }
 
 const PLVTitle:CSSProperties = {
@@ -18,7 +24,17 @@ const PLVTitle:CSSProperties = {
     textTransform: 'uppercase',
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '50px',
-    lineHeight: 1,
+    lineHeight: 1.2,
+}
+
+const PLVTitleA3:CSSProperties = {
+  display: 'flex',
+  justifyContent: 'left',
+  alignItems: 'center',
+  textTransform: 'uppercase',
+  fontFamily: 'Montserrat, sans-serif',
+  fontSize: '75px',
+  lineHeight: 1.2,
 }
 
 const PLVHeaderLogo:CSSProperties = {
@@ -48,11 +64,22 @@ const PLVBaseLine:CSSProperties = {
     display: 'flex',
     justifyContent: 'left',
     alignItems: 'center',
-    fontFamily: 'Dancing Script',
+    fontFamily: 'Caveat',
+    fontWeight: 700,
     transform: 'rotate(-10deg)',
     fontSize: '30px',
 }
 
+const PLVBaseLineA3:CSSProperties = {
+  display: 'flex',
+  justifyContent: 'left',
+  alignItems: 'center',
+  fontFamily: 'Caveat',
+  fontWeight: 700,
+  transform: 'rotate(-10deg)',
+  fontSize: '40px',
+}
+
 const PVLFooterText:CSSProperties = {
     fontFamily: 'Montserrat, sans-serif',
     textTransform: 'uppercase',
@@ -61,6 +88,14 @@ const PVLFooterText:CSSProperties = {
     position: 'absolute'
 }
 
+const PVLFooterTextA3:CSSProperties = {
+  fontFamily: 'Montserrat, sans-serif',
+  textTransform: 'uppercase',
+  fontSize: '20px',
+  letterSpacing: 4,
+  position: 'absolute'
+}
+
 /**
  * PLV Garage au format A4
  */
@@ -68,52 +103,56 @@ class PLVComponent extends React.Component<GaragePLVProps> {
 
   render() {
     return (
-        
-      <div className="printable-content" style={{ width: '210mm', height: '297mm' }}>
+
+      <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} style={PLVHeaderLogo} sx={{ m: 2, mt: 4}}>
+            <Grid item xs={12} style={PLVHeaderLogo} sx={{ m: 2, mt: 6}}>
                 <img src={LogoLarge} style={PLVHeaderLogo}/>
             </Grid>
 
             <Grid item xs={12} sx={{ ml: 6, mt: 4 }}>
-                <Typography style={PLVTitle} >
+                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle} >
                     <span className='highlight'>Dans ce garage</span>
                 </Typography>
-                <Typography style={PLVTitle}>
+                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
                     <span className='highlight'> prenez rendez-vous </span>
                 </Typography>
-                <Typography style={PLVTitle}>
+                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
                     <span className='highlight'> en un clic. </span>
                 </Typography>
             </Grid>
 
             <Grid item xs={12} sx={{ ml: 6, mt: 4 }}>
-                <Typography style={PLVTitle}>
+                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
                     <span className='not-highlight'> Votre entretien </span>
                 </Typography>
-                <Typography style={PLVTitle}>
+                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
                     <span className='not-highlight'> auto ne sera plus </span>
                 </Typography>
-                <Typography style={PLVTitle}>
+                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
                     <span className='not-highlight'> un casse-tête ! </span>
                 </Typography>
             </Grid>
 
-            <Grid item xs={7} sx={{ pl: 8, mt: 8 }} style={PLVQRCode}>
-                <QRCode data={this.props.url} />
+            <Grid item xs={7} sx={{ pl: 8, mt: this.props.printSize === PrintSize.A3 ? 11 : 7 }} style={PLVQRCode}>
+                <QRCode data={this.props.url} size={this.props.printSize === PrintSize.A4 ? 350 : 500} />
             </Grid>
 
             <Grid item xs={5} style={PLVBaseLine}>
-                <Typography style={PLVBaseLine}>
+                <Typography style={this.props.printSize === PrintSize.A3 ? PLVBaseLineA3 : PLVBaseLine }>
                     En plus l'appli est gratuite !
                 </Typography>
             </Grid>
 
-            <Grid item xs={12} sx={{ mt: 13 }} style={PLVFooterLogo}>
-                <span style={PVLFooterText}>WWW.MOVALIB.COM</span>
+            <Grid item xs={12} sx={{ mt: 3 }} style={PLVFooterLogo}>
+                <span style={this.props.printSize === PrintSize.A3 ? PVLFooterTextA3 : PVLFooterText}>WWW.MOVALIB.COM</span>
                 <img src={LeafsLarge} style={PLVFooterLogo}/>
-            
             </Grid>
 
         </Grid>
@@ -125,19 +164,30 @@ class PLVComponent extends React.Component<GaragePLVProps> {
 
 const GaragePLV: FC<GaragePLVProps> = ({ url }) => {
 
-  const componentRef = useRef<PLVComponent>(null);
+  const PLVrefA4 = useRef<PLVComponent>(null);
+  const PLVrefA3 = useRef<PLVComponent>(null);
   const theme = useTheme();
 
-  const handlePrint = useReactToPrint({
-    content: () => componentRef.current,
-    documentTitle: 'Movalib_PLV_A4', 
+  const handleA4Print = useReactToPrint({
+          content: () => PLVrefA4.current,
+          documentTitle: 'Movalib_PLV_A4', 
+  });
+
+  const handleA3Print = useReactToPrint({
+    content: () => PLVrefA3.current,
+    documentTitle: 'Movalib_PLV_A3', 
   });
 
   return (
     <div style={flexCenter}>
-      <PLVComponent ref={componentRef} url={url} />
-      <Button onClick={handlePrint} variant='outlined'
-        sx={{ color: darken(theme.palette.primary.main, 0.2)}}>Imprimer la PLV (A4)</Button>
+
+      <PLVComponent ref={PLVrefA4} url={url} printSize={PrintSize.A4} />
+      <PLVComponent ref={PLVrefA3} url={url} printSize={PrintSize.A3} />
+
+      <Button onClick={handleA4Print} variant='outlined'
+        sx={{ color: darken(theme.palette.primary.main, 0.2), mr: 2 }}>🧾&nbsp;&nbsp;Imprimer la PLV (A4)</Button>
+      <Button onClick={handleA3Print} variant='outlined'
+        sx={{ color: darken(theme.palette.primary.main, 0.2)}}>🧾&nbsp;&nbsp;Imprimer la PLV (A3)</Button>
     </div>
   );
 };

package/src/QRCode.css

@@ -1,4 +1,8 @@
 .qr-code canvas {
-    max-width: 300px !important;
+    /*max-width: 300px !important;*/
+    /* margin: 20px 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
 }

package/src/QRCode.tsx

@@ -13,25 +13,16 @@ import QRCodeStyling, {
   Options
 } from "qr-code-styling";
 import './QRCode.css';
+import { Height } from '@mui/icons-material';
 
 
 interface QRCodeProps {
+  size?: number,
   data?:string,
   showDownload?:boolean
 }
-
-const styles = {
-    inputWrapper: {
-      margin: "20px 0",
-      display: "flex",
-      alignItems: 'center',
-      justifyContent: "center",
-      width: '300px',
-      height: '300px'
-    }
-  };
   
-const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
+const QRCode: FC<QRCodeProps> = ({ size = 300, data, showDownload=false }) => {
 
   const theme = useTheme();
   
@@ -39,8 +30,8 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
   const defaultData:string = 'https://movalib.com';
 
   const [options, setOptions] = useState<Options>({
-    width: 600,
-    height: 600,
+    width: size*2,
+    height: size*2,
     type: 'canvas' as DrawType,
     data: data ?? defaultData,
     image: QRCodeImage,
@@ -129,7 +120,9 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center' }} >
-      <div ref={ref} style={styles.inputWrapper} className='qr-code' />
+      <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>
@@ -138,7 +131,8 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
         </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>
+            <Button variant='outlined' onClick={onDownloadClick} sx={{ color: darken(theme.palette.primary.main, 0.2)}}>
+              Télécharger</Button>
           </Box>
         }
     </Box>

package/src/models/Event.ts

@@ -7,6 +7,7 @@ import Operation from "./Operation";
 import Product from "./Product";
 import Supplier from "./Supplier";
 import Document from "./Document";
+import Address from "./Address";
 
 export default class Event {
 
@@ -16,6 +17,7 @@ export default class Event {
     type: EventType;
     title: string;
     garageName: string;
+    garageAddress: Address;
     garageId: number;
     start?: Date;
     end?: Date;
@@ -45,7 +47,7 @@ export default class Event {
     quoteAmount?: number;
     documents?: Document[];
 
-    constructor(id: string, ownerId: number, type : EventType, title: string, garageName: string, garageId: number,
+    constructor(id: string, ownerId: number, type : EventType, title: string, garageName: string, garageAddress: Address, garageId: number,
             state: EventState, start?: Date, end?: Date, prestations?: Prestation[], operations?: Operation[], products?: Product[],
             guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string) 
     {
@@ -55,6 +57,7 @@ export default class Event {
         this.type = type;
         this.title = title;
         this.garageName = garageName;
+        this.garageAddress = garageAddress;
         this.garageId = garageId;
         this.state = state;
         this.start = start ? new Date(start) : undefined;