@movalib/movalib-commons 1.1.18 → 1.1.20

package/devIndex.tsx

@@ -22,6 +22,7 @@ import Schedule from './src/models/Schedule';
 import { flexCenter } from './src/helpers/Tools';
 import AccountValidation from './src/AccountValidation';
 import VehiclePlateField from './src/VehiclePlateField';
+import GaragePLV from './src/GaragePLV';
 
 const App = () => {
 
@@ -130,6 +131,8 @@ const App = () => {
               alert('Form Submitted !');
             } } />
 
+            <GaragePLV url={getQRCodeData()} />
+
             <QRCode data={getQRCodeData()} showDownload={true} />
 
             <div style={{ marginTop: '40px' }} />

package/dist/devIndex.js

@@ -59,6 +59,7 @@ var Schedule_1 = __importDefault(require("./src/models/Schedule"));
 var Tools_1 = require("./src/helpers/Tools");
 var AccountValidation_1 = __importDefault(require("./src/AccountValidation"));
 var VehiclePlateField_1 = __importDefault(require("./src/VehiclePlateField"));
+var GaragePLV_1 = __importDefault(require("./src/GaragePLV"));
 var App = function () {
     Logger_1.default.enableLogging();
     // Chargement de données garage de test
@@ -127,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)(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 }), (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/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AuthenticationService } from './src/services/AuthenticationService';
 export { default as GarageService } from './src/services/GarageService';
 export { default as UserService } from './src/services/UserService';
+export { default as GaragePLV } from './src/GaragePLV';
 export { default as AccountValidation } from './src/AccountValidation';
 export { default as AddressFields } from './src/AddressFields';
 export { default as ScheduleFields } from './src/ScheduleFields';
@@ -37,7 +38,7 @@ export type { APIRequest, APIResponse } from './src/helpers/ApiHelper';
 export type { DaySchedule, DayInterval } from './src/ScheduleFields';
 export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm, MovaInterval, MovaVehicleForm, AddressFieldName } from './src/helpers/Types';
 export { readCookie, deleteCookie } from './src/helpers/CookieUtils';
-export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty, getApplicationShortLabel } from './src/helpers/Tools';
+export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty, getApplicationShortLabel, capitalizeFirstLetter } from './src/helpers/Tools';
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
-export { formatDateByCountryCode, getLongFormattedDateTime, capitalizeFirstLetter } from './src/helpers/DateUtils';
+export { formatDateByCountryCode, getLongFormattedDateTime } from './src/helpers/DateUtils';
 export { RoleType, MovaAppType, DayOfWeek, EventState, EventType, DocumentType, DigitalPassportIndex, DocumentState, Gender, DateFormatTypes, PartsApplicationType, ProductType, OrderPreference, OrderState, SlotAlgorithm, VehiclePlateFormat as VehiclePlateType } from './src/helpers/Enums';

package/dist/index.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MovaAppType = exports.RoleType = exports.capitalizeFirstLetter = exports.getLongFormattedDateTime = exports.formatDateByCountryCode = exports.validateEmail = exports.validateText = exports.validatePhoneNumber = exports.getApplicationShortLabel = exports.isEmpty = 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.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.UserService = exports.GarageService = exports.AuthenticationService = void 0;
-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 = void 0;
+exports.RoleType = exports.getLongFormattedDateTime = exports.formatDateByCountryCode = exports.validateEmail = exports.validateText = exports.validatePhoneNumber = exports.capitalizeFirstLetter = exports.getApplicationShortLabel = exports.isEmpty = 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.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.UserService = exports.GarageService = exports.AuthenticationService = void 0;
+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 = void 0;
 // Export des services
 var AuthenticationService_1 = require("./src/services/AuthenticationService");
 Object.defineProperty(exports, "AuthenticationService", { enumerable: true, get: function () { return __importDefault(AuthenticationService_1).default; } });
@@ -14,6 +14,8 @@ Object.defineProperty(exports, "GarageService", { enumerable: true, get: functio
 var UserService_1 = require("./src/services/UserService");
 Object.defineProperty(exports, "UserService", { enumerable: true, get: function () { return __importDefault(UserService_1).default; } });
 // Export des composants
+var GaragePLV_1 = require("./src/GaragePLV");
+Object.defineProperty(exports, "GaragePLV", { enumerable: true, get: function () { return __importDefault(GaragePLV_1).default; } });
 var AccountValidation_1 = require("./src/AccountValidation");
 Object.defineProperty(exports, "AccountValidation", { enumerable: true, get: function () { return __importDefault(AccountValidation_1).default; } });
 var AddressFields_1 = require("./src/AddressFields");
@@ -89,6 +91,7 @@ Object.defineProperty(exports, "formatVehicleTire", { enumerable: true, get: fun
 Object.defineProperty(exports, "formatFrenchVehiclePlate", { enumerable: true, get: function () { return Tools_1.formatFrenchVehiclePlate; } });
 Object.defineProperty(exports, "isEmpty", { enumerable: true, get: function () { return Tools_1.isEmpty; } });
 Object.defineProperty(exports, "getApplicationShortLabel", { enumerable: true, get: function () { return Tools_1.getApplicationShortLabel; } });
+Object.defineProperty(exports, "capitalizeFirstLetter", { enumerable: true, get: function () { return Tools_1.capitalizeFirstLetter; } });
 var Validator_1 = require("./src/helpers/Validator");
 Object.defineProperty(exports, "validatePhoneNumber", { enumerable: true, get: function () { return Validator_1.validatePhoneNumber; } });
 Object.defineProperty(exports, "validateText", { enumerable: true, get: function () { return Validator_1.validateText; } });
@@ -96,7 +99,6 @@ Object.defineProperty(exports, "validateEmail", { enumerable: true, get: functio
 var DateUtils_1 = require("./src/helpers/DateUtils");
 Object.defineProperty(exports, "formatDateByCountryCode", { enumerable: true, get: function () { return DateUtils_1.formatDateByCountryCode; } });
 Object.defineProperty(exports, "getLongFormattedDateTime", { enumerable: true, get: function () { return DateUtils_1.getLongFormattedDateTime; } });
-Object.defineProperty(exports, "capitalizeFirstLetter", { enumerable: true, get: function () { return DateUtils_1.capitalizeFirstLetter; } });
 // Export des enums
 var Enums_1 = require("./src/helpers/Enums");
 Object.defineProperty(exports, "RoleType", { enumerable: true, get: function () { return Enums_1.RoleType; } });

package/dist/src/GaragePLV.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface GaragePLVProps {
+    url: string;
+}
+declare const GaragePLV: FC<GaragePLVProps>;
+export default GaragePLV;

package/dist/src/GaragePLV.js

@@ -0,0 +1,135 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+var QRCode_1 = __importDefault(require("./QRCode"));
+var react_to_print_1 = require("react-to-print");
+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 PLVTitle = {
+    display: 'flex',
+    justifyContent: 'left',
+    alignItems: 'center',
+    textTransform: 'uppercase',
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '50px',
+    lineHeight: 1,
+};
+var PLVHeaderLogo = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '25%'
+};
+var PLVFooterLogo = {
+    display: 'flex',
+    justifyContent: 'end',
+    alignItems: 'center',
+    width: '15%',
+    right: '6%',
+    position: 'relative',
+    zIndex: -1
+};
+var PLVQRCode = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+var PLVBaseLine = {
+    display: 'flex',
+    justifyContent: 'left',
+    alignItems: 'center',
+    fontFamily: 'Dancing Script',
+    transform: 'rotate(-10deg)',
+    fontSize: '30px',
+};
+var PVLFooterText = {
+    fontFamily: 'Montserrat, sans-serif',
+    textTransform: 'uppercase',
+    fontSize: '14px',
+    letterSpacing: 4,
+    position: 'absolute'
+};
+/**
+ * PLV Garage au format A4
+ */
+var PLVComponent = /** @class */ (function (_super) {
+    __extends(PLVComponent, _super);
+    function PLVComponent() {
+        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 PLVComponent;
+}(react_1.default.Component));
+var GaragePLV = function (_a) {
+    var url = _a.url;
+    var componentRef = (0, react_1.useRef)(null);
+    var theme = (0, material_1.useTheme)();
+    var handlePrint = (0, react_to_print_1.useReactToPrint)({
+        content: function () { return componentRef.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)" }))] })));
+};
+exports.default = GaragePLV;
+// CSS pour cacher le contenu à l'écran mais le rendre imprimable
+var css = "\n    .highlight {\n        background-color: #BCD46C; /* Couleur de surlignage */\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        font-weight: 500;\n        color: white;\n    }\n    .not-highlight {\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        color: #BCD46C;\n    }\n\n  .printable-content {\n    visibility: hidden;\n    position: absolute;\n    left: -10000px;\n    top: -10000px;\n  }\n  @media print {\n    .printable-content {\n      visibility: visible;\n      position: static;\n    }\n  }\n";
+var styleSheet = document.createElement("style");
+styleSheet.innerText = css;
+document.head.appendChild(styleSheet);

package/dist/src/MovaSignUp.js

@@ -99,7 +99,6 @@ var MovaLogin = function (_a) {
     var _e = (0, react_1.useState)(false), showPassword = _e[0], setShowPassword = _e[1];
     var handleDateChange = function (name, date) {
         var _a;
-        console.log(date);
         if (name && date) {
             var fieldName = name;
             var fieldValue = date;
@@ -112,6 +111,14 @@ var MovaLogin = function (_a) {
         if (e) {
             var fieldName = e.target.name;
             var fieldValue = e.target.value;
+            // Capitalisation automatique du prénom
+            if (fieldName == "firstname") {
+                fieldValue = (0, Tools_1.capitalizeFirstLetter)(fieldValue);
+            }
+            // Uppercase automatique pour le nom
+            if (fieldName == "lastname") {
+                fieldValue = fieldValue.toUpperCase();
+            }
             var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
             setUserForm(__assign(__assign({}, userForm), newField));
         }

package/dist/src/QRCode.js

@@ -33,7 +33,7 @@ var styles = {
 var QRCode = function (_a) {
     var data = _a.data, _b = _a.showDownload, showDownload = _b === void 0 ? false : _b;
     var theme = (0, material_1.useTheme)();
-    // Le contenu du QR Code est transmis en props, sinon redirection vers ls site vitrine
+    // 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,

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

@@ -5,4 +5,3 @@ export declare const countryTimeZones: {
 export declare const toUTCToLocaleDate: (date: "" | Date | null, countryCode: string) => Date;
 export declare const formatDateByCountryCode: (date: Date | undefined, countryCode: string, formatType: DateFormatTypes) => string;
 export declare function getLongFormattedDateTime(date: Date | undefined, timeZone: string, locale: Locale): string;
-export declare function capitalizeFirstLetter(str: string): string;

package/dist/src/helpers/DateUtils.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.capitalizeFirstLetter = exports.getLongFormattedDateTime = exports.formatDateByCountryCode = exports.toUTCToLocaleDate = exports.countryTimeZones = void 0;
+exports.getLongFormattedDateTime = exports.formatDateByCountryCode = exports.toUTCToLocaleDate = exports.countryTimeZones = void 0;
 var date_fns_tz_1 = require("date-fns-tz");
 var locale_1 = require("date-fns/locale");
 var Enums_1 = require("./Enums");
+var Tools_1 = require("./Tools");
 // Tableau de correspondance entre les codes de pays et les fuseaux horaires
 exports.countryTimeZones = {
     'FR': 'Europe/Paris',
@@ -42,8 +43,8 @@ var formatDateByCountryCode = function (date, countryCode, formatType) {
 exports.formatDateByCountryCode = formatDateByCountryCode;
 function getLongFormattedDateTime(date, timeZone, locale) {
     if (date) {
-        var day = capitalizeFirstLetter((0, date_fns_tz_1.format)(date, 'eeee', { timeZone: timeZone, locale: locale }));
-        var month = capitalizeFirstLetter((0, date_fns_tz_1.format)(date, 'MMMM', { timeZone: timeZone, locale: locale }));
+        var day = (0, Tools_1.capitalizeFirstLetter)((0, date_fns_tz_1.format)(date, 'eeee', { timeZone: timeZone, locale: locale }));
+        var month = (0, Tools_1.capitalizeFirstLetter)((0, date_fns_tz_1.format)(date, 'MMMM', { timeZone: timeZone, locale: locale }));
         var hours = (0, date_fns_tz_1.format)(date, 'HH', { timeZone: timeZone, locale: locale });
         var minutes = (0, date_fns_tz_1.format)(date, 'mm', { timeZone: timeZone, locale: locale });
         var dayOfMonth = (0, date_fns_tz_1.format)(date, 'dd', { timeZone: timeZone, locale: locale });
@@ -52,12 +53,3 @@ function getLongFormattedDateTime(date, timeZone, locale) {
     return '';
 }
 exports.getLongFormattedDateTime = getLongFormattedDateTime;
-function capitalizeFirstLetter(str) {
-    if (str.length === 0) {
-        return str;
-    }
-    var firstChar = str.charAt(0).toUpperCase();
-    var restOfString = str.slice(1);
-    return firstChar + restOfString;
-}
-exports.capitalizeFirstLetter = capitalizeFirstLetter;

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

@@ -2,6 +2,7 @@ import VehicleTire from "../models/VehicleTire";
 import { MovaFormField } from "./Types";
 import { CSSProperties } from "react";
 import { PartsApplicationType } from "./Enums";
+export declare const capitalizeFirstLetter: (str: string) => string;
 export declare const getApplicationShortLabel: (application: PartsApplicationType | undefined) => "" | "AV" | "AR" | "AV + AR" | "G" | "D" | "G + D";
 export declare const flexEnd: CSSProperties;
 export declare const flexCenter: CSSProperties;

package/dist/src/helpers/Tools.js

@@ -1,7 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateField = exports.formatVehicleTireStr = exports.formatVehicleTire = exports.formatFrenchVehiclePlate = exports.isEmpty = exports.flexCenter = exports.flexEnd = exports.getApplicationShortLabel = void 0;
+exports.validateField = exports.formatVehicleTireStr = exports.formatVehicleTire = exports.formatFrenchVehiclePlate = exports.isEmpty = exports.flexCenter = exports.flexEnd = exports.getApplicationShortLabel = exports.capitalizeFirstLetter = void 0;
 var Enums_1 = require("./Enums");
+var capitalizeFirstLetter = function (str) {
+    if (str.length === 0) {
+        return str;
+    }
+    var firstChar = str.charAt(0).toUpperCase();
+    var restOfString = str.slice(1);
+    return firstChar + restOfString;
+};
+exports.capitalizeFirstLetter = capitalizeFirstLetter;
 var getApplicationShortLabel = function (application) {
     if (application) {
         switch (application) {

package/index.ts

@@ -6,6 +6,7 @@ export { default as GarageService } from './src/services/GarageService';
 export { default as UserService } from './src/services/UserService';
 
 // Export des composants
+export { default as GaragePLV } from './src/GaragePLV';
 export { default as AccountValidation } from './src/AccountValidation';
 export { default as AddressFields } from './src/AddressFields';
 export { default as ScheduleFields } from './src/ScheduleFields';
@@ -49,9 +50,10 @@ export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm, MovaInterval,
 
 // Export des méthodes utilitaires
 export { readCookie, deleteCookie } from './src/helpers/CookieUtils'; 
-export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty, getApplicationShortLabel } from './src/helpers/Tools'; 
+export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty, getApplicationShortLabel,
+    capitalizeFirstLetter } from './src/helpers/Tools'; 
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
-export { formatDateByCountryCode, getLongFormattedDateTime, capitalizeFirstLetter } from './src/helpers/DateUtils';
+export { formatDateByCountryCode, getLongFormattedDateTime } from './src/helpers/DateUtils';
 
 // Export des enums
 export { RoleType, MovaAppType, DayOfWeek, EventState, EventType, DocumentType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,6 +34,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1",
+    "react-to-print": "^2.14.15",
     "typescript": "^4.9.5"
   },
   "eslintConfig": {

package/public/index.html

@@ -2,6 +2,9 @@
 <html>
 <head>
   <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">
+
 </head>
 <body>
   <div id="root"></div>

package/src/GaragePLV.tsx

@@ -0,0 +1,179 @@
+import React, { CSSProperties, FC, useRef } from 'react';
+import QRCode from './QRCode';
+import { useReactToPrint } from 'react-to-print';
+import { Button, Grid, Typography, darken, useTheme } from '@mui/material';
+import { flexCenter } from './helpers/Tools';
+import LogoLarge from './assets/images/logo/logo_large.png';
+import LeafsLarge from './assets/images/leafs_large.png';
+import theme from '../theme';
+
+interface GaragePLVProps {
+  url: string;
+}
+
+const PLVTitle:CSSProperties = {
+    display: 'flex',
+    justifyContent: 'left',
+    alignItems: 'center',
+    textTransform: 'uppercase',
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '50px',
+    lineHeight: 1,
+}
+
+const PLVHeaderLogo:CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width:'25%'
+}
+
+const PLVFooterLogo:CSSProperties = {
+    display: 'flex',
+    justifyContent: 'end',
+    alignItems: 'center',
+    width:'15%',
+    right: '6%',
+    position: 'relative',
+    zIndex: -1
+}
+
+const PLVQRCode:CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+}
+
+const PLVBaseLine:CSSProperties = {
+    display: 'flex',
+    justifyContent: 'left',
+    alignItems: 'center',
+    fontFamily: 'Dancing Script',
+    transform: 'rotate(-10deg)',
+    fontSize: '30px',
+}
+
+const PVLFooterText:CSSProperties = {
+    fontFamily: 'Montserrat, sans-serif',
+    textTransform: 'uppercase',
+    fontSize: '14px',
+    letterSpacing: 4,
+    position: 'absolute'
+}
+
+/**
+ * PLV Garage au format A4
+ */
+class PLVComponent extends React.Component<GaragePLVProps> {
+
+  render() {
+    return (
+        
+      <div className="printable-content" style={{ width: '210mm', height: '297mm' }}>
+        <Grid container>
+
+            <Grid item xs={12} style={PLVHeaderLogo} sx={{ m: 2, mt: 4}}>
+                <img src={LogoLarge} style={PLVHeaderLogo}/>
+            </Grid>
+
+            <Grid item xs={12} sx={{ ml: 6, mt: 4 }}>
+                <Typography style={PLVTitle} >
+                    <span className='highlight'>Dans ce garage</span>
+                </Typography>
+                <Typography style={PLVTitle}>
+                    <span className='highlight'> prenez rendez-vous </span>
+                </Typography>
+                <Typography style={PLVTitle}>
+                    <span className='highlight'> en un clic. </span>
+                </Typography>
+            </Grid>
+
+            <Grid item xs={12} sx={{ ml: 6, mt: 4 }}>
+                <Typography style={PLVTitle}>
+                    <span className='not-highlight'> Votre entretien </span>
+                </Typography>
+                <Typography style={PLVTitle}>
+                    <span className='not-highlight'> auto ne sera plus </span>
+                </Typography>
+                <Typography style={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>
+
+            <Grid item xs={5} style={PLVBaseLine}>
+                <Typography style={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>
+                <img src={LeafsLarge} style={PLVFooterLogo}/>
+            
+            </Grid>
+
+        </Grid>
+
+      </div>
+    );
+  }
+}
+
+const GaragePLV: FC<GaragePLVProps> = ({ url }) => {
+
+  const componentRef = useRef<PLVComponent>(null);
+  const theme = useTheme();
+
+  const handlePrint = useReactToPrint({
+    content: () => componentRef.current,
+    documentTitle: 'Movalib_PLV_A4', 
+  });
+
+  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>
+    </div>
+  );
+};
+
+export default GaragePLV;
+
+// CSS pour cacher le contenu à l'écran mais le rendre imprimable
+const css = `
+    .highlight {
+        background-color: #BCD46C; /* Couleur de surlignage */
+        margin: 4px 4px; /* Espacement autour du texte surligné */
+        padding-left : 8px;
+        padding-right: 8px;
+        font-weight: 500;
+        color: white;
+    }
+    .not-highlight {
+        margin: 4px 4px; /* Espacement autour du texte surligné */
+        padding-left : 8px;
+        padding-right: 8px;
+        color: #BCD46C;
+    }
+
+  .printable-content {
+    visibility: hidden;
+    position: absolute;
+    left: -10000px;
+    top: -10000px;
+  }
+  @media print {
+    .printable-content {
+      visibility: visible;
+      position: static;
+    }
+  }
+`;
+const styleSheet = document.createElement("style");
+styleSheet.innerText = css;
+document.head.appendChild(styleSheet);

package/src/MovaSignUp.tsx

@@ -14,7 +14,7 @@ import { MovaFormField, MovaUserSignUpForm } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
 import { validateEmail } from "./helpers/Validator";
 import GenderSelector from "./GenderSelector";
-import { validateField } from "./helpers/Tools";
+import { capitalizeFirstLetter, validateField } from "./helpers/Tools";
 import { useHistory } from "react-router-dom";
 import InputAdornment from '@mui/material/InputAdornment';
 import Visibility from '@mui/icons-material/Visibility';
@@ -68,7 +68,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     const [showPassword, setShowPassword] = useState(false);
 
     const handleDateChange = (name: string, date: Date | null) => {
-        console.log(date)
+ 
         if(name && date){
             const fieldName: string = name;
             const fieldValue: Date = date;
@@ -81,9 +81,20 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | null): void => {
         if(e){
             const fieldName: string = e.target.name;
-            const fieldValue: string = e.target.value;
+            let fieldValue: string = e.target.value;
+
+            // Capitalisation automatique du prénom
+            if (fieldName == "firstname"){
+                fieldValue = capitalizeFirstLetter(fieldValue);
+            }
+        
+            // Uppercase automatique pour le nom
+            if (fieldName == "lastname"){
+                fieldValue = fieldValue.toUpperCase();
+            }
+
             const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
-    
+            
             setUserForm({ ...userForm, ...newField});
         }
     }

package/src/QRCode.tsx

@@ -35,7 +35,7 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
 
   const theme = useTheme();
   
-  // Le contenu du QR Code est transmis en props, sinon redirection vers ls site vitrine
+  // Le contenu du QR Code est transmis en props, sinon redirection vers le site vitrine
   const defaultData:string = 'https://movalib.com';
 
   const [options, setOptions] = useState<Options>({

package/src/helpers/DateUtils.ts

@@ -1,6 +1,7 @@
 import { format, utcToZonedTime } from 'date-fns-tz';
 import { fr } from 'date-fns/locale';
 import { DateFormatTypes } from './Enums';
+import { capitalizeFirstLetter } from './Tools';
 
 // Tableau de correspondance entre les codes de pays et les fuseaux horaires
 export const countryTimeZones: { [key: string]: string } = {
@@ -62,15 +63,4 @@ export function getLongFormattedDateTime(date: Date | undefined, timeZone: strin
       return `${day} ${dayOfMonth} ${month} à ${hours}:${minutes}`;
     }
     return '';
-}
-
-export function capitalizeFirstLetter(str: string): string {
-    if (str.length === 0) {
-        return str;
-    }
-
-    const firstChar = str.charAt(0).toUpperCase();
-    const restOfString = str.slice(1);
-
-    return firstChar + restOfString;
-}
+}

package/src/helpers/Tools.ts

@@ -4,6 +4,17 @@ import { MovaFormField } from "./Types";
 import { CSSProperties } from "react";
 import { PartsApplicationType, VehiclePlateFormat } from "./Enums";
 
+export const capitalizeFirstLetter = (str: string): string => {
+  if (str.length === 0) {
+    return str;
+  }
+
+  const firstChar = str.charAt(0).toUpperCase();
+  const restOfString = str.slice(1);
+
+  return firstChar + restOfString;
+}
+
 export const getApplicationShortLabel = (application:PartsApplicationType | undefined) => {
   if(application){
     switch(application){