@movalib/movalib-commons 1.53.1 → 1.55.0

package/index.ts

@@ -1,6 +1,7 @@
 // src/index.ts
 
 // Export des services
+
 export { default as VehicleService } from './src/services/VehicleService';
 export { default as AuthenticationService } from './src/services/AuthenticationService';
 export { default as GarageService } from './src/services/GarageService';
@@ -27,7 +28,8 @@ export { default as MovaCopyright } from './src/MovaCopyright';
 export { default as MovaVehicleTireField } from './src/MovaVehicleTireField';
 export { default as ConfirmationDialog } from './src/ConfirmationDialog';
 export { default as GenderSelector } from './src/GenderSelector';
-
+export { QrCodePLVContainer } from './src/components/QrCodePLVContainer/QrCodePLVContainer';
+export { PLVComponent, PrintSize } from './src/components/QrCodePLVContainer/PLVComponent';
 // Export des classes
 export { default as Subscription } from './src/models/Subscription';
 export { default as Absence } from './src/models/Absence';
@@ -51,22 +53,61 @@ export { default as VehicleTire } from './src/models/VehicleTire';
 // Export des types
 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 type {
+  MovaFormField,
+  MovaLoginForm,
+  MovaUserSignUpForm,
+  MovaInterval,
+  MovaVehicleForm,
+  AddressFieldName,
+} from './src/helpers/Types';
 
 // Export des méthodes utilitaires
-export { readCookie, deleteCookie } from './src/helpers/CookieUtils'; 
-export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty, getApplicationShortLabel,
-    capitalizeFirstLetter, flexLeftRow, formatPhoneNumber, getFormattedSchedule, getFormattedIntervals, 
-    findScheduleByDayOfWeek, getDayOfWeekLabel, isSafariOniOS, getApplicationsShortLabels } from './src/helpers/Tools'; 
+export { readCookie, deleteCookie } from './src/helpers/CookieUtils';
+export {
+  validateField,
+  formatVehicleTire,
+  formatFrenchVehiclePlate,
+  isEmpty,
+  getApplicationShortLabel,
+  capitalizeFirstLetter,
+  flexLeftRow,
+  formatPhoneNumber,
+  getFormattedSchedule,
+  getFormattedIntervals,
+  findScheduleByDayOfWeek,
+  getDayOfWeekLabel,
+  isSafariOniOS,
+  getApplicationsShortLabels,
+} from './src/helpers/Tools';
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
 export { formatDateByCountryCode, getLongFormattedDateTime } from './src/helpers/DateUtils';
-export { request, API_BASE_URL,  } from './src/helpers/ApiHelper'; 
+export { request, API_BASE_URL } from './src/helpers/ApiHelper';
 
 // Export des enums
-export { RoleType, MovaAppType, DayOfWeek, EventState, EventType, DocumentType,
-    DigitalPassportIndex, DocumentState, Gender, DateFormatTypes, PartsApplicationType,
-    ProductType, OrderPreference, OrderState, SlotAlgorithm, VehiclePlateFormat as VehiclePlateType,
-    SubscriptionPaymentInterval, RegistrationState, PrestationType, PrestationState, CountryCode,
-    SubscriptionState, SubscriptionType, APIMethod } from './src/helpers/Enums';
-
+export {
+  RoleType,
+  MovaAppType,
+  DayOfWeek,
+  EventState,
+  EventType,
+  DocumentType,
+  DigitalPassportIndex,
+  DocumentState,
+  Gender,
+  DateFormatTypes,
+  PartsApplicationType,
+  ProductType,
+  OrderPreference,
+  OrderState,
+  SlotAlgorithm,
+  VehiclePlateFormat as VehiclePlateType,
+  SubscriptionPaymentInterval,
+  RegistrationState,
+  PrestationType,
+  PrestationState,
+  CountryCode,
+  SubscriptionState,
+  SubscriptionType,
+  APIMethod,
+} from './src/helpers/Enums';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.53.1",
+  "version": "1.55.0",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,9 +40,7 @@
     "typescript": "^4.9.5"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
+    "extends": ["react-app"]
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.4",

package/src/GaragePLV.tsx

@@ -1,241 +1,41 @@
-import React, { CSSProperties, FC, useRef } from 'react';
-import QRCode from './QRCode';
+import { Button, darken, useTheme } from '@mui/material';
+import { type FC, useRef } from 'react';
 import { useReactToPrint } from 'react-to-print';
-import { Button, Grid, Typography, darken, useTheme } from '@mui/material';
-import { flexCenter, flexStart } from './helpers/Tools';
-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
-}
+import { PLVComponent, PrintSize } from './components/QrCodePLVContainer/PLVComponent';
+import { flexCenter } from './helpers/Tools';
 
 interface GaragePLVProps {
   url: string;
-  printSize?: PrintSize
-}
-
-const PLVTitle:CSSProperties = {
-    display: 'flex',
-    justifyContent: 'left',
-    alignItems: 'center',
-    textTransform: 'uppercase',
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '50px',
-    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 = {
-    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: 'Caveat',
-    lineHeight: 2.5,
-    fontWeight: 700,
-    marginTop: 20,
-    paddingLeft: 0,
-    //transform: 'rotate(-10deg)',
-    fontSize: '27px',
-}
-
-const PLVBaseLineA3:CSSProperties = {
-  display: 'flex',
-  justifyContent: 'left',
-  alignItems: 'center',
-  fontFamily: 'Caveat',
-  lineHeight: 2.5,
-  fontWeight: 700,
-  marginTop: 20,
-  //transform: 'rotate(-10deg)',
-  fontSize: '38px',
-}
-
-const PVLFooterText:CSSProperties = {
-    fontFamily: 'Montserrat, sans-serif',
-    textTransform: 'uppercase',
-    fontSize: '14px',
-    letterSpacing: 4,
-    position: 'absolute'
-}
-
-const PVLFooterTextA3:CSSProperties = {
-  fontFamily: 'Montserrat, sans-serif',
-  textTransform: 'uppercase',
-  fontSize: '20px',
-  letterSpacing: 4,
-  position: 'absolute'
-}
-
-/**
- * PLV Garage au format A4
- */
-class PLVComponent extends React.Component<GaragePLVProps> {
-
-  render() {
-    return (
-
-      <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: 6, mb: 4 }}>
-                <img src={LogoLarge} style={PLVHeaderLogo}/>
-            </Grid>
-
-            <Grid item xs={12} sx={{ ml: 6, mt: 4 }}>
-                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle} >
-                    <span className='highlight'>Prenez rendez-vous </span>
-                </Typography>
-                <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={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
-                    <span className='not-highlight'> Votre entretien </span>
-                </Typography>
-                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
-                    <span className='not-highlight'> auto ne sera plus </span>
-                </Typography>
-                <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
-                    <span className='not-highlight'> un casse-tête. </span>
-                </Typography>
-            </Grid>
-
-            <Grid item xs={6} sx={{ pl: 0, mt: this.props.printSize === PrintSize.A3 ? 11 : 7 }} style={PLVQRCode}>
-                <QRCode data={this.props.url} size={this.props.printSize === PrintSize.A4 ? 300 : 450} />
-            </Grid>
-
-            <Grid item xs={6} style={PLVBaseLine}>
-                <Typography style={this.props.printSize === PrintSize.A3 ? PLVBaseLineA3 : PLVBaseLine }>
-                  Vos rendez-vous et factures en un clic<br />
-                  Alertes et suivi en temps réél<br />
-                  Regroupez 100% de vos documents<br />
-                  Movalib vous réconcilie avec votre auto !
-                </Typography>
-            </Grid>
-
-            <Grid item xs={12} style={flexStart}>
-                <Typography color={theme.palette.primary.dark} sx={{ml: this.props.printSize === PrintSize.A3 ? 8 : 7, 
-                  fontSize: this.props.printSize === PrintSize.A3 ? '1.6rem' : '1rem'}}>
-                  Ou rendez-vous sur <b>app.movalib.com</b>
-                </Typography>
-            </Grid>
-
-            <Grid item xs={12} sx={{ mt: this.props.printSize === PrintSize.A3 ? 11 : 7 }} style={PLVFooterLogo}>
-                <span style={this.props.printSize === PrintSize.A3 ? PVLFooterTextA3 : PVLFooterText}>WWW.MOVALIB.COM</span>
-                <img src={LeafsLarge} style={PLVFooterLogo}/>
-            </Grid>
-
-        </Grid>
-
-      </div>
-    );
-  }
 }
 
 const GaragePLV: FC<GaragePLVProps> = ({ url }) => {
-
   const PLVrefA4 = useRef<PLVComponent>(null);
   const PLVrefA3 = useRef<PLVComponent>(null);
   const theme = useTheme();
 
   const handleA4Print = useReactToPrint({
-          content: () => PLVrefA4.current,
-          documentTitle: 'Movalib_PLV_A4', 
+    content: () => PLVrefA4.current,
+    documentTitle: 'Movalib_PLV_A4',
   });
 
   const handleA3Print = useReactToPrint({
     content: () => PLVrefA3.current,
-    documentTitle: 'Movalib_PLV_A3', 
+    documentTitle: 'Movalib_PLV_A3',
   });
 
   return (
     <div style={flexCenter}>
-
       <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>
+      <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>
   );
 };
 
 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/components/QrCodePLVContainer/PLVComponent.tsx

@@ -0,0 +1,214 @@
+import { Grid, Typography } from '@mui/material';
+import React, { type CSSProperties } from 'react';
+import theme from '../../../theme';
+import QRCode from '../../QRCode';
+import LeafsLarge from '../../assets/images/leafs_large.png';
+import LogoLarge from '../../assets/images/logo/logo_large.png';
+import { flexStart } from '../../helpers/Tools';
+
+const PLVTitle: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'left',
+  alignItems: 'center',
+  textTransform: 'uppercase',
+  fontFamily: 'Montserrat, sans-serif',
+  fontSize: '50px',
+  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 = {
+  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: 'Caveat',
+  lineHeight: 2.5,
+  fontWeight: 700,
+  marginTop: 20,
+  paddingLeft: 0,
+  //transform: 'rotate(-10deg)',
+  fontSize: '27px',
+};
+
+const PLVBaseLineA3: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'left',
+  alignItems: 'center',
+  fontFamily: 'Caveat',
+  lineHeight: 2.5,
+  fontWeight: 700,
+  marginTop: 20,
+  //transform: 'rotate(-10deg)',
+  fontSize: '38px',
+};
+
+const PVLFooterText: CSSProperties = {
+  fontFamily: 'Montserrat, sans-serif',
+  textTransform: 'uppercase',
+  fontSize: '14px',
+  letterSpacing: 4,
+  position: 'absolute',
+};
+
+const PVLFooterTextA3: CSSProperties = {
+  fontFamily: 'Montserrat, sans-serif',
+  textTransform: 'uppercase',
+  fontSize: '20px',
+  letterSpacing: 4,
+  position: 'absolute',
+};
+
+export enum PrintSize {
+  A3 = 'A3',
+  A4 = 'A4',
+}
+
+type PLVComponentProps = {
+  printSize: PrintSize;
+  url: string;
+};
+
+/**
+ * PLV Garage au format A4
+ */
+export class PLVComponent extends React.Component<PLVComponentProps> {
+  render() {
+    return (
+      <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: 6, mb: 4 }}>
+            <img src={LogoLarge} style={PLVHeaderLogo} />
+          </Grid>
+
+          <Grid item xs={12} sx={{ ml: 6, mt: 4 }}>
+            <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
+              <span className='highlight'>Prenez rendez-vous </span>
+            </Typography>
+            <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={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
+              <span className='not-highlight'> Votre entretien </span>
+            </Typography>
+            <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
+              <span className='not-highlight'> auto ne sera plus </span>
+            </Typography>
+            <Typography style={this.props.printSize === PrintSize.A3 ? PLVTitleA3 : PLVTitle}>
+              <span className='not-highlight'> un casse-tête. </span>
+            </Typography>
+          </Grid>
+
+          <Grid item xs={6} sx={{ pl: 0, mt: this.props.printSize === PrintSize.A3 ? 11 : 7 }} style={PLVQRCode}>
+            <QRCode data={this.props.url} size={this.props.printSize === PrintSize.A4 ? 300 : 450} />
+          </Grid>
+
+          <Grid item xs={6} style={PLVBaseLine}>
+            <Typography style={this.props.printSize === PrintSize.A3 ? PLVBaseLineA3 : PLVBaseLine}>
+              Vos rendez-vous et factures en un clic
+              <br />
+              Alertes et suivi en temps réél
+              <br />
+              Regroupez 100% de vos documents
+              <br />
+              Movalib vous réconcilie avec votre auto !
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} style={flexStart}>
+            <Typography
+              color={theme.palette.primary.dark}
+              sx={{
+                ml: this.props.printSize === PrintSize.A3 ? 8 : 7,
+                fontSize: this.props.printSize === PrintSize.A3 ? '1.6rem' : '1rem',
+              }}
+            >
+              Ou rendez-vous sur <b>app.movalib.com</b>
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sx={{ mt: this.props.printSize === PrintSize.A3 ? 11 : 7 }} style={PLVFooterLogo}>
+            <span style={this.props.printSize === PrintSize.A3 ? PVLFooterTextA3 : PVLFooterText}>WWW.MOVALIB.COM</span>
+            <img src={LeafsLarge} style={PLVFooterLogo} />
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+// 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);