@movalib/movalib-commons 1.47.0 → 1.49.0

package/dist/src/DownloadedQRCode.d.ts

@@ -0,0 +1 @@
+export declare const DownloadedQRCode: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DownloadedQRCode.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownloadedQRCode = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var qr_code_bg_jpg_1 = __importDefault(require("./assets/images/qr_code_bg.jpg"));
+var arrow_qr_code_png_1 = __importDefault(require("./assets/images/arrow_qr_code.png"));
+var logo_large_png_1 = __importDefault(require("./assets/images/logo/logo_large.png"));
+var material_1 = require("@mui/material");
+var DownloadedQRCode = function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+        width: '1200px',
+        height: '900px',
+        padding: '80px',
+        display: 'none',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundImage: "url(".concat(qr_code_bg_jpg_1.default, ")"),
+        backgroundSize: 'contain no-repeat',
+    }, id: 'qr-code-downloaded-container' }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+            background: '#FFFFFF80',
+            height: '100%',
+            width: '100%',
+            padding: '25px 50px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: 'h2', style: { textAlign: 'center', textTransform: 'uppercase', fontWeight: 'bold', fontSize: '5rem' } }, { children: "Prenez rendez-vous en ligne" })), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                    position: 'relative',
+                }, id: 'qr-code-img-container' }, { children: (0, jsx_runtime_1.jsx)("img", { src: arrow_qr_code_png_1.default, alt: 'QR Code', style: { position: 'absolute', top: '-20%', left: '-70%' } }) })), (0, jsx_runtime_1.jsx)("img", { src: logo_large_png_1.default, alt: 'Movalib Logo', style: { width: '200px' } })] })) }))); };
+exports.DownloadedQRCode = DownloadedQRCode;

package/dist/src/QRCode.js

@@ -57,6 +57,7 @@ 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 DownloadedQRCode_1 = require("./DownloadedQRCode");
 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, _d = _a.showCTAWhenDownloaded, showCTAWhenDownloaded = _d === void 0 ? false : _d;
     var theme = (0, material_1.useTheme)();
@@ -123,34 +124,15 @@ var QRCode = function (_a) {
         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');
+        var downloadedDiv = document.getElementById('qr-code-downloaded-container');
         // If we don't have the QR Code, we can't download it
-        if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva) {
+        if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva || !downloadedDiv) {
             return;
         }
-        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);
+        var tmpRendered = downloadedDiv.cloneNode(true);
+        tmpRendered.style['display'] = 'flex';
+        var downloadedQrCodeImgContainer = tmpRendered.querySelector('#qr-code-img-container');
+        downloadedQrCodeImgContainer.append(qrCodeCanva);
         // 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
@@ -170,6 +152,6 @@ var QRCode = function (_a) {
             flexDirection: 'column',
             alignItems: 'center'
         } }, { 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" })) }))] })));
+                (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" })) })), (0, jsx_runtime_1.jsx)(DownloadedQRCode_1.DownloadedQRCode, {})] })));
 };
 exports.default = QRCode;

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

@@ -48,6 +48,8 @@ export default class Event {
     editable?: boolean;
     vehicleDepositDate?: Date;
     vehicleDepositDateRequest?: Date;
+    /** Propriété calculée pas toujours présent, pour savoir si les produits de cet event on été commandé au grossistes */
+    hasProductOrdered?: boolean;
     constructor(id: string, ownerId: number, type: EventType, title: string, garageName: string, garageId: number, state: EventState, garageAddress?: Address, start?: Date, end?: Date, prestations?: Prestation[], operations?: Operation[], products?: Product[], guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string, vehicleAvailableNotified?: boolean, editable?: boolean);
     static getPrestationsList(event: Event): string[];
 }

package/package.json

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

package/src/DownloadedQRCode.tsx

@@ -0,0 +1,41 @@
+import QRCodeBg from './assets/images/qr_code_bg.jpg';
+import QRCodeArrow from './assets/images/arrow_qr_code.png';
+import MovalibLogo from './assets/images/logo/logo_large.png';
+
+import {Typography} from "@mui/material";
+
+
+export const DownloadedQRCode = () => (
+	<div style={{
+		width: '1200px',
+		height: '900px',
+		padding: '80px',
+		display: 'none',
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundImage: `url(${QRCodeBg})`,
+		backgroundSize: 'contain no-repeat',
+	}} id='qr-code-downloaded-container'>
+		<div style={{
+			background: '#FFFFFF80',
+			height: '100%',
+			width: '100%',
+			padding: '25px 50px',
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'center',
+			justifyContent: 'space-between'
+		}}>
+			<Typography variant='h2'
+									style={{textAlign: 'center', textTransform: 'uppercase', fontWeight: 'bold', fontSize: '5rem'}}>
+				Prenez rendez-vous en ligne
+			</Typography>
+			<div style={{
+				position: 'relative',
+			}} id='qr-code-img-container'>
+				<img src={QRCodeArrow} alt='QR Code' style={{position: 'absolute', top: '-20%', left: '-70%'}}/>
+			</div>
+			<img src={MovalibLogo} alt='Movalib Logo' style={{width: '200px'}}/>
+		</div>
+	</div>
+)

package/src/QRCode.tsx

@@ -4,6 +4,7 @@ import { Box, Button, darken, useTheme } from '@mui/material';
 import QRCodeStyling, { Options } from "qr-code-styling";
 import './QRCode.css';
 import html2canvas from "html2canvas";
+import {DownloadedQRCode} from "./DownloadedQRCode";
 
 interface QRCodeProps {
   size?: number;
@@ -85,44 +86,19 @@ const QRCode: FC<QRCodeProps> = ({
     const qrCodeContainer = document.querySelector<HTMLElement>('#qr-code-container');
     const qrCodeDiv = qrCodeContainer?.querySelector<HTMLElement>('.qr-code');
     const qrCodeCanva = qrCodeDiv?.querySelector('canvas');
+    const downloadedDiv = document.getElementById('qr-code-downloaded-container');
 
     // If we don't have the QR Code, we can't download it
-    if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva) {
+    if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva || !downloadedDiv) {
       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);
+    const tmpRendered = downloadedDiv.cloneNode(true) as HTMLElement;
+    tmpRendered.style['display']= 'flex';
 
+    const downloadedQrCodeImgContainer = tmpRendered.querySelector<HTMLElement>('#qr-code-img-container')!;
 
+    downloadedQrCodeImgContainer.append(qrCodeCanva);
     // add it to the document to be able to download it
     document.body.append(tmpRendered);
 
@@ -165,6 +141,7 @@ const QRCode: FC<QRCodeProps> = ({
           </Button>
         </Box>
       }
+      <DownloadedQRCode />
     </div>
   );
 }

package/src/models/Event.ts

@@ -52,9 +52,12 @@ export default class Event {
     vehicleDepositDate?: Date;
     vehicleDepositDateRequest?: Date;
 
+    /** Propriété calculée pas toujours présent, pour savoir si les produits de cet event on été commandé au grossistes */
+    hasProductOrdered?: boolean;
+
     constructor(id: string, ownerId: number, type : EventType, title: string, garageName: string,  garageId: number,
             state: EventState, garageAddress?: Address, start?: Date, end?: Date, prestations?: Prestation[], operations?: Operation[], products?: Product[],
-            guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string, vehicleAvailableNotified?: boolean, editable?: boolean) 
+            guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string, vehicleAvailableNotified?: boolean, editable?: boolean)
     {
         this.id = id;
         this.notes = notes;
@@ -85,4 +88,4 @@ export default class Event {
 
         return [];
     }
-}
+}