@movalib/movalib-commons 1.46.0 → 1.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/DownloadedQRCode.d.ts +1 -0
- package/dist/src/DownloadedQRCode.js +44 -0
- package/dist/src/QRCode.js +8 -26
- package/dist/src/assets/images/arrow_qr_code.png +0 -0
- package/dist/src/assets/images/qr_code_bg.jpg +0 -0
- package/dist/src/helpers/Enums.d.ts +2 -1
- package/dist/src/helpers/Enums.js +1 -0
- package/dist/src/models/Event.d.ts +2 -0
- package/package.json +1 -1
- package/src/DownloadedQRCode.tsx +41 -0
- package/src/QRCode.tsx +8 -31
- package/src/assets/images/arrow_qr_code.png +0 -0
- package/src/assets/images/qr_code_bg.jpg +0 -0
- package/src/helpers/Enums.ts +5 -4
- package/src/models/Event.ts +5 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const DownloadedQRCode: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.DownloadedQRCode = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var qr_code_bg_jpg_1 = __importDefault(require("./assets/images/qr_code_bg.jpg"));
|
|
20
|
+
var arrow_qr_code_png_1 = __importDefault(require("./assets/images/arrow_qr_code.png"));
|
|
21
|
+
var logo_large_png_1 = __importDefault(require("./assets/images/logo/logo_large.png"));
|
|
22
|
+
var material_1 = require("@mui/material");
|
|
23
|
+
var DownloadedQRCode = function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
|
24
|
+
width: '1200px',
|
|
25
|
+
height: '900px',
|
|
26
|
+
padding: '80px',
|
|
27
|
+
display: 'none',
|
|
28
|
+
justifyContent: 'center',
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
backgroundImage: "url(".concat(qr_code_bg_jpg_1.default, ")"),
|
|
31
|
+
backgroundSize: 'contain no-repeat',
|
|
32
|
+
}, id: 'qr-code-downloaded-container' }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
|
33
|
+
background: '#FFFFFF80',
|
|
34
|
+
height: '100%',
|
|
35
|
+
width: '100%',
|
|
36
|
+
padding: '25px 50px',
|
|
37
|
+
display: 'flex',
|
|
38
|
+
flexDirection: 'column',
|
|
39
|
+
alignItems: 'center',
|
|
40
|
+
justifyContent: 'space-between'
|
|
41
|
+
} }, { 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: {
|
|
42
|
+
position: 'relative',
|
|
43
|
+
}, 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' } })] })) }))); };
|
|
44
|
+
exports.DownloadedQRCode = DownloadedQRCode;
|
package/dist/src/QRCode.js
CHANGED
|
@@ -57,6 +57,7 @@ var material_1 = require("@mui/material");
|
|
|
57
57
|
var qr_code_styling_1 = __importDefault(require("qr-code-styling"));
|
|
58
58
|
require("./QRCode.css");
|
|
59
59
|
var html2canvas_1 = __importDefault(require("html2canvas"));
|
|
60
|
+
var DownloadedQRCode_1 = require("./DownloadedQRCode");
|
|
60
61
|
var QRCode = function (_a) {
|
|
61
62
|
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;
|
|
62
63
|
var theme = (0, material_1.useTheme)();
|
|
@@ -123,34 +124,15 @@ var QRCode = function (_a) {
|
|
|
123
124
|
var qrCodeContainer = document.querySelector('#qr-code-container');
|
|
124
125
|
var qrCodeDiv = qrCodeContainer === null || qrCodeContainer === void 0 ? void 0 : qrCodeContainer.querySelector('.qr-code');
|
|
125
126
|
var qrCodeCanva = qrCodeDiv === null || qrCodeDiv === void 0 ? void 0 : qrCodeDiv.querySelector('canvas');
|
|
127
|
+
var downloadedDiv = document.getElementById('qr-code-downloaded-container');
|
|
126
128
|
// If we don't have the QR Code, we can't download it
|
|
127
|
-
if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva) {
|
|
129
|
+
if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva || !downloadedDiv) {
|
|
128
130
|
return;
|
|
129
131
|
}
|
|
130
|
-
var tmpRendered =
|
|
131
|
-
tmpRendered.style
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
tmpRendered.style.flexDirection = 'column';
|
|
135
|
-
tmpRendered.style.alignItems = 'center';
|
|
136
|
-
tmpRendered.style.gap = '8px';
|
|
137
|
-
tmpRendered.style.background = 'transparent';
|
|
138
|
-
var catchPhrase = document.createElement('span');
|
|
139
|
-
catchPhrase.innerText = 'PRENEZ RENDEZ-VOUS EN LIGNE !';
|
|
140
|
-
catchPhrase.style.color = (0, material_1.darken)(theme.palette.primary.main, 0.4);
|
|
141
|
-
catchPhrase.style.fontWeight = '900';
|
|
142
|
-
catchPhrase.style.padding = '8px';
|
|
143
|
-
catchPhrase.style.fontFamily = 'Caveat';
|
|
144
|
-
catchPhrase.style.fontSize = '2em';
|
|
145
|
-
var scanThis = document.createElement('span');
|
|
146
|
-
scanThis.innerText = 'SCANNEZ CE QR CODE';
|
|
147
|
-
scanThis.style.color = (0, material_1.darken)(theme.palette.primary.main, 0.4);
|
|
148
|
-
scanThis.style.fontWeight = '900';
|
|
149
|
-
scanThis.style.marginBottom = '8px';
|
|
150
|
-
scanThis.style.fontSize = '1.5em';
|
|
151
|
-
tmpRendered.append(catchPhrase);
|
|
152
|
-
tmpRendered.append(qrCodeCanva);
|
|
153
|
-
tmpRendered.append(scanThis);
|
|
132
|
+
var tmpRendered = downloadedDiv.cloneNode(true);
|
|
133
|
+
tmpRendered.style['display'] = 'flex';
|
|
134
|
+
var downloadedQrCodeImgContainer = tmpRendered.querySelector('#qr-code-img-container');
|
|
135
|
+
downloadedQrCodeImgContainer.append(qrCodeCanva);
|
|
154
136
|
// add it to the document to be able to download it
|
|
155
137
|
document.body.append(tmpRendered);
|
|
156
138
|
// create the canva of the tmpRendered div and download it
|
|
@@ -170,6 +152,6 @@ var QRCode = function (_a) {
|
|
|
170
152
|
flexDirection: 'column',
|
|
171
153
|
alignItems: 'center'
|
|
172
154
|
} }, { 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 &&
|
|
173
|
-
(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" })) }))] })));
|
|
155
|
+
(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, {})] })));
|
|
174
156
|
};
|
|
175
157
|
exports.default = QRCode;
|
|
Binary file
|
|
Binary file
|
|
@@ -182,7 +182,8 @@ export declare enum EventState {
|
|
|
182
182
|
}
|
|
183
183
|
export declare enum EventType {
|
|
184
184
|
APPOINTMENT = "APPOINTMENT",
|
|
185
|
-
UNAVAILABILITY = "UNAVAILABILITY"
|
|
185
|
+
UNAVAILABILITY = "UNAVAILABILITY",
|
|
186
|
+
NOTE = "NOTE"
|
|
186
187
|
}
|
|
187
188
|
export declare enum DayOfWeek {
|
|
188
189
|
MONDAY = "MONDAY",
|
|
@@ -205,6 +205,7 @@ var EventType;
|
|
|
205
205
|
(function (EventType) {
|
|
206
206
|
EventType["APPOINTMENT"] = "APPOINTMENT";
|
|
207
207
|
EventType["UNAVAILABILITY"] = "UNAVAILABILITY";
|
|
208
|
+
EventType["NOTE"] = "NOTE";
|
|
208
209
|
})(EventType = exports.EventType || (exports.EventType = {}));
|
|
209
210
|
var DayOfWeek;
|
|
210
211
|
(function (DayOfWeek) {
|
|
@@ -48,6 +48,8 @@ export default class Event {
|
|
|
48
48
|
editable?: boolean;
|
|
49
49
|
vehicleDepositDate?: Date;
|
|
50
50
|
vehicleDepositDateRequest?: Date;
|
|
51
|
+
/** Propriété calculée pas toujours présent, pour savoir si les produits de cet event on été commandé au grossistes */
|
|
52
|
+
hasProductOrdered?: boolean;
|
|
51
53
|
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);
|
|
52
54
|
static getPrestationsList(event: Event): string[];
|
|
53
55
|
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import QRCodeBg from './assets/images/qr_code_bg.jpg';
|
|
2
|
+
import QRCodeArrow from './assets/images/arrow_qr_code.png';
|
|
3
|
+
import MovalibLogo from './assets/images/logo/logo_large.png';
|
|
4
|
+
|
|
5
|
+
import {Typography} from "@mui/material";
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
export const DownloadedQRCode = () => (
|
|
9
|
+
<div style={{
|
|
10
|
+
width: '1200px',
|
|
11
|
+
height: '900px',
|
|
12
|
+
padding: '80px',
|
|
13
|
+
display: 'none',
|
|
14
|
+
justifyContent: 'center',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
backgroundImage: `url(${QRCodeBg})`,
|
|
17
|
+
backgroundSize: 'contain no-repeat',
|
|
18
|
+
}} id='qr-code-downloaded-container'>
|
|
19
|
+
<div style={{
|
|
20
|
+
background: '#FFFFFF80',
|
|
21
|
+
height: '100%',
|
|
22
|
+
width: '100%',
|
|
23
|
+
padding: '25px 50px',
|
|
24
|
+
display: 'flex',
|
|
25
|
+
flexDirection: 'column',
|
|
26
|
+
alignItems: 'center',
|
|
27
|
+
justifyContent: 'space-between'
|
|
28
|
+
}}>
|
|
29
|
+
<Typography variant='h2'
|
|
30
|
+
style={{textAlign: 'center', textTransform: 'uppercase', fontWeight: 'bold', fontSize: '5rem'}}>
|
|
31
|
+
Prenez rendez-vous en ligne
|
|
32
|
+
</Typography>
|
|
33
|
+
<div style={{
|
|
34
|
+
position: 'relative',
|
|
35
|
+
}} id='qr-code-img-container'>
|
|
36
|
+
<img src={QRCodeArrow} alt='QR Code' style={{position: 'absolute', top: '-20%', left: '-70%'}}/>
|
|
37
|
+
</div>
|
|
38
|
+
<img src={MovalibLogo} alt='Movalib Logo' style={{width: '200px'}}/>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
)
|
package/src/QRCode.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import { Box, Button, darken, useTheme } from '@mui/material';
|
|
|
4
4
|
import QRCodeStyling, { Options } from "qr-code-styling";
|
|
5
5
|
import './QRCode.css';
|
|
6
6
|
import html2canvas from "html2canvas";
|
|
7
|
+
import {DownloadedQRCode} from "./DownloadedQRCode";
|
|
7
8
|
|
|
8
9
|
interface QRCodeProps {
|
|
9
10
|
size?: number;
|
|
@@ -85,44 +86,19 @@ const QRCode: FC<QRCodeProps> = ({
|
|
|
85
86
|
const qrCodeContainer = document.querySelector<HTMLElement>('#qr-code-container');
|
|
86
87
|
const qrCodeDiv = qrCodeContainer?.querySelector<HTMLElement>('.qr-code');
|
|
87
88
|
const qrCodeCanva = qrCodeDiv?.querySelector('canvas');
|
|
89
|
+
const downloadedDiv = document.getElementById('qr-code-downloaded-container');
|
|
88
90
|
|
|
89
91
|
// If we don't have the QR Code, we can't download it
|
|
90
|
-
if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva) {
|
|
92
|
+
if (!qrCodeContainer || !qrCodeDiv || !qrCodeCanva || !downloadedDiv) {
|
|
91
93
|
return;
|
|
92
94
|
}
|
|
93
95
|
|
|
94
|
-
const tmpRendered =
|
|
95
|
-
|
|
96
|
-
tmpRendered.style.width = 'fit-content';
|
|
97
|
-
tmpRendered.style.display = 'flex';
|
|
98
|
-
tmpRendered.style.justifyContent = 'center';
|
|
99
|
-
tmpRendered.style.flexDirection = 'column';
|
|
100
|
-
tmpRendered.style.alignItems = 'center';
|
|
101
|
-
tmpRendered.style.gap = '8px';
|
|
102
|
-
tmpRendered.style.background= 'transparent';
|
|
103
|
-
|
|
104
|
-
const catchPhrase = document.createElement('span');
|
|
105
|
-
catchPhrase.innerText = 'PRENEZ RENDEZ-VOUS EN LIGNE !';
|
|
106
|
-
catchPhrase.style.color = darken(theme.palette.primary.main, 0.4);
|
|
107
|
-
catchPhrase.style.fontWeight = '900';
|
|
108
|
-
catchPhrase.style.padding = '8px';
|
|
109
|
-
catchPhrase.style.fontFamily= 'Caveat';
|
|
110
|
-
catchPhrase.style.fontSize= '2em';
|
|
111
|
-
|
|
112
|
-
const scanThis = document.createElement('span');
|
|
113
|
-
|
|
114
|
-
scanThis.innerText = 'SCANNEZ CE QR CODE';
|
|
115
|
-
scanThis.style.color = darken(theme.palette.primary.main, 0.4);
|
|
116
|
-
scanThis.style.fontWeight = '900';
|
|
117
|
-
scanThis.style.marginBottom = '8px';
|
|
118
|
-
scanThis.style.fontSize= '1.5em';
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
tmpRendered.append(catchPhrase);
|
|
122
|
-
tmpRendered.append(qrCodeCanva);
|
|
123
|
-
tmpRendered.append(scanThis);
|
|
96
|
+
const tmpRendered = downloadedDiv.cloneNode(true) as HTMLElement;
|
|
97
|
+
tmpRendered.style['display']= 'flex';
|
|
124
98
|
|
|
99
|
+
const downloadedQrCodeImgContainer = tmpRendered.querySelector<HTMLElement>('#qr-code-img-container')!;
|
|
125
100
|
|
|
101
|
+
downloadedQrCodeImgContainer.append(qrCodeCanva);
|
|
126
102
|
// add it to the document to be able to download it
|
|
127
103
|
document.body.append(tmpRendered);
|
|
128
104
|
|
|
@@ -165,6 +141,7 @@ const QRCode: FC<QRCodeProps> = ({
|
|
|
165
141
|
</Button>
|
|
166
142
|
</Box>
|
|
167
143
|
}
|
|
144
|
+
<DownloadedQRCode />
|
|
168
145
|
</div>
|
|
169
146
|
);
|
|
170
147
|
}
|
|
Binary file
|
|
Binary file
|
package/src/helpers/Enums.ts
CHANGED
|
@@ -180,7 +180,7 @@ export enum EventState {
|
|
|
180
180
|
* Refusé (rendez-vous refusé par le client)
|
|
181
181
|
* Cela concerne le refus de l'éventuel devis transmis par le garagiste pour le moment
|
|
182
182
|
*/
|
|
183
|
-
REJECTED = "REJECTED",
|
|
183
|
+
REJECTED = "REJECTED",
|
|
184
184
|
/**
|
|
185
185
|
* Planifé (rendez-vous planifié, devis accepté par le client le cas échéant)
|
|
186
186
|
* Note : si l'acceptation du devis n'est pas obligatoire pour le centre,
|
|
@@ -194,7 +194,7 @@ export enum EventState {
|
|
|
194
194
|
/**
|
|
195
195
|
* Le rendez-vous est clôturé
|
|
196
196
|
*/
|
|
197
|
-
DONE = "DONE",
|
|
197
|
+
DONE = "DONE",
|
|
198
198
|
/**
|
|
199
199
|
* Le rendez-vous a été annulé (par le centre ou le client)
|
|
200
200
|
*/
|
|
@@ -203,7 +203,8 @@ export enum EventState {
|
|
|
203
203
|
|
|
204
204
|
export enum EventType {
|
|
205
205
|
APPOINTMENT = "APPOINTMENT",
|
|
206
|
-
UNAVAILABILITY = "UNAVAILABILITY"
|
|
206
|
+
UNAVAILABILITY = "UNAVAILABILITY",
|
|
207
|
+
NOTE = "NOTE",
|
|
207
208
|
}
|
|
208
209
|
|
|
209
210
|
export enum DayOfWeek {
|
|
@@ -270,4 +271,4 @@ export enum RoleType {
|
|
|
270
271
|
* Super-Administrateur (team Movalib)
|
|
271
272
|
*/
|
|
272
273
|
SUPER_ADMIN = "ROLE_SUPER_ADMIN",
|
|
273
|
-
}
|
|
274
|
+
}
|
package/src/models/Event.ts
CHANGED
|
@@ -52,9 +52,12 @@ export default class Event {
|
|
|
52
52
|
vehicleDepositDate?: Date;
|
|
53
53
|
vehicleDepositDateRequest?: Date;
|
|
54
54
|
|
|
55
|
+
/** Propriété calculée pas toujours présent, pour savoir si les produits de cet event on été commandé au grossistes */
|
|
56
|
+
hasProductOrdered?: boolean;
|
|
57
|
+
|
|
55
58
|
constructor(id: string, ownerId: number, type : EventType, title: string, garageName: string, garageId: number,
|
|
56
59
|
state: EventState, garageAddress?: Address, start?: Date, end?: Date, prestations?: Prestation[], operations?: Operation[], products?: Product[],
|
|
57
|
-
guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string, vehicleAvailableNotified?: boolean, editable?: boolean)
|
|
60
|
+
guestsId?: string[], vehicleId?: number, quoteId?: number, notes?: string, vehicleAvailableNotified?: boolean, editable?: boolean)
|
|
58
61
|
{
|
|
59
62
|
this.id = id;
|
|
60
63
|
this.notes = notes;
|
|
@@ -85,4 +88,4 @@ export default class Event {
|
|
|
85
88
|
|
|
86
89
|
return [];
|
|
87
90
|
}
|
|
88
|
-
}
|
|
91
|
+
}
|