@movalib/movalib-commons 1.59.14 → 1.59.16

package/src/components/vehicle/VehiclePlateField.tsx

@@ -0,0 +1,164 @@
+import React, { FunctionComponent, ReactNode, useEffect, useState } from 'react';
+import TextField from '@mui/material/TextField';
+import { IconButton, InputAdornment } from '@mui/material';
+import SearchIcon from '@mui/icons-material/SearchRounded';
+import { VehiclePlateFormat } from '../../helpers/Enums';
+import Logger from '../../helpers/Logger';
+
+interface VehiclePlateFieldProps {
+    onValidVehiclePlate: (vehiclePlate: string) => void;
+  }
+
+// Regex pour une plaque d'immatriculation française (nouveau format SIV)
+export const regexPlate = /^[A-Z]{2}-\d{3}-[A-Z]{2}$/; 
+// Regex pour une plaque d'immatriculation française (ancien format FNI)
+export const oldRegexPlate = /^\d{1,4}[ -]?[A-Z]{1,4}[ -]?\d{1,4}$/;
+
+
+const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps> = ({ onValidVehiclePlate }) => {
+
+  const [value, setValue] = useState<string>('');
+  const [error, setError] = useState<boolean>(false);
+  const [lastLength, setLastLength] = useState<number>(0); // Ajout d'un état pour stocker la longueur précédente
+  const [helperText, setHelperText] = useState<ReactNode>('');
+
+  // Hook de validation de la plaque
+  useEffect(() => {
+    if (!error && value !== '' && value.match(regexPlate)) {
+        onValidVehiclePlate(value);
+    }
+
+  }, [error, value, onValidVehiclePlate]);
+
+  const getPlateFormat = (plate: string): VehiclePlateFormat | undefined  => {
+    if (plate === '') {
+      // Si la saisie est vide, retournez un format par défaut (nouveau format, par exemple)
+      return undefined;
+    }
+
+    if (/^[A-Za-z]/.test(plate)) {
+      // Commence par une lettre => nouveau format
+      return VehiclePlateFormat.FRENCH_NEW;
+    } else if (/^\d/.test(plate)) {
+      // Commence par un chiffre => ancien format
+      return VehiclePlateFormat.FRENCH_OLD;
+    } else {
+      Logger.error("Format de plaque inconnu");
+      // On retourne le nouveau format par défaut
+      return VehiclePlateFormat.FRENCH_NEW;
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+
+    let inputValue = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // Convertir en majuscules et supprimer les caractères non valides
+
+    // Si la saisie commence par une lettre, on contrôle l'ancien format, sinon le nouveau
+    switch(getPlateFormat(inputValue)){
+
+      case VehiclePlateFormat.FRENCH_NEW :{
+        setHelperText(<>Format détecté : <b>AA-111-AA</b></>);
+        handleChangeFrenchNew(inputValue);
+        break;
+      }
+
+      case VehiclePlateFormat.FRENCH_OLD: {
+        setHelperText(
+          <>
+            Format détecté (ancien) : <b>1111 AAAA 1111</b>
+            <br />
+            Pour lancer la recherche, cliquez sur <SearchIcon />
+          </>
+        );        
+        handleChangeFrenchOld(inputValue);
+        break;
+      }
+
+      case undefined: {
+        setHelperText('');
+        setValue('');
+      }
+    }
+
+  };
+
+  const validatePlate = () => {
+
+    if(oldRegexPlate.test(value)){
+      onValidVehiclePlate(value);
+    }
+
+    setError(!oldRegexPlate.test(value));
+  }
+
+  const handleChangeFrenchOld = (inputValue: string) => {
+    
+      // ON bloque la saisie à 12 caractères max (limite des anciennes plaques)
+      if(!(inputValue.length > 12)){
+        setValue(inputValue);
+      } 
+
+      setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+  }
+
+  const handleChangeFrenchNew = (inputValue: string) => {
+
+      // Vérifier si l'utilisateur est en train de supprimer un caractère
+      const isDeleting = inputValue.length < lastLength;
+
+      // Supprimer les tirets pour avoir une chaîne propre
+      const cleanInput = inputValue.replace(/-/g, '');
+
+      // Ajouter des tirets aux positions appropriées
+      if (cleanInput.length > 1 && !(cleanInput.length == 2 && isDeleting)) {
+        inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2)}`;
+      }
+
+      if (cleanInput.length > 4 && !(cleanInput.length == 5 && isDeleting)) {
+        inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2, 5)}-${cleanInput.slice(5, 7)}`;
+      }
+
+      setValue(inputValue);
+
+      // On teste la plaque une fois la saisie terminée
+      if(inputValue.length == 9){
+        setError(!regexPlate.test(inputValue));
+      } else {
+        setError(false);
+      }
+
+      setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+  }
+
+  return (
+    <TextField
+      label="Plaque d'immatriculation"
+      variant="outlined"
+      value={value}
+      onChange={handleChange}
+      error={error}
+      autoFocus
+      sx={{ 
+        width: '100%', 
+        '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+      }}
+      helperText={lastLength > 0 ? helperText : ''}
+      InputProps={{
+        endAdornment: (
+             
+          <InputAdornment position="end" sx={{ mr: 1, display: getPlateFormat(value) === VehiclePlateFormat.FRENCH_OLD ? 'inherit' : 'none' }} >
+            <IconButton
+              edge="end"
+              onClick={validatePlate}
+            >
+              <SearchIcon />
+            </IconButton>
+          </InputAdornment>
+          
+        ),
+      }} 
+    />
+  );
+};
+
+export default VehiclePlateField;

package/src/helpers/CookieUtils.ts

@@ -5,8 +5,9 @@ export const COOKIE_INDIVIDUAL_TOKEN: string = 'movalibIndividualToken';
 export const COOKIE_DEFAULT_EXPIRES: number = 7;
 
 export const createCookie = (name:string, value:string) => {
+  console.log('from lib', name, value);
   if(name && value){
-    Cookies.set(name, value, { expires: COOKIE_DEFAULT_EXPIRES, sameSite: 'None', secure: true });
+    Cookies.set(name, value, { expires: COOKIE_DEFAULT_EXPIRES, sameSite: 'Lax' });
   }
 }
 

package/src/helpers/Enums.ts

@@ -235,8 +235,15 @@ export enum DocumentType {
     USER_BANK_DETAILS = "USER_BANK_DETAILS",
     USER_APPOINTMENT_QUOTE = "USER_APPOINTMENT_QUOTE",
     VEHICLE_MAINTENANCE_INVOICE = 'VEHICLE_MAINTENANCE_INVOICE',
+    GARAGE_LOGO = "GARAGE_LOGO",
+
     VEHICLE_TIRE_PHOTO = 'VEHICLE_TIRE_PHOTO',
-    GARAGE_LOGO = "GARAGE_LOGO"
+    VEHICLE_INSPECTION = 'VEHICLE_INSPECTION',
+    VEHICLE_OTHER = 'VEHICLE_OTHER',
+    
+    EVENT_OTHER = 'EVENT_OTHER',
+    EVENT_VISUAL_PROOFS = 'EVENT_VISUAL_PROOFS',
+    EVENT_MAINTENANCE = 'EVENT_MAINTENANCE',
 }
 
 export enum MovaAppType {

package/src/helpers/Tools.ts

@@ -46,6 +46,7 @@ export const getDayOfWeekIndex = (day: DayOfWeek) => {
   return -1;
 }
 
+
 export const formatPhoneNumber = (phoneNumber: string): string => {
   let formattedNumber = "";
 

package/src/models/Event.ts

@@ -108,4 +108,4 @@ export default class Event {
 
         return [];
     }
-}
+}

package/src/services/AuthenticationService.ts

@@ -68,7 +68,6 @@ export default class AuthenticationService {
                     Logger.error(errorMsg);
                     return { success: false, error: errorMsg };
                 }
-
                 return { success: true, data: userResponse.data };
 
             } else {

package/src/services/GarageService.ts

@@ -78,42 +78,48 @@ export default class GarageService {
 		});
 	}
 
-	static updateColorPrestationCategory(
-		garageId: string,
-		categoryCode: string,
-		color: string,
-	): Promise<APIResponse<string>> {
-		return request({
-			url: `${API_BASE_URL}/garage/${garageId}/prestation-category/${categoryCode}/color`,
-			method: APIMethod.PATCH,
-			appType: MovaAppType.GARAGE,
-			body: JSON.stringify({ color }),
-		});
-	}
-	static updateGarageEventColor(
-		garageId: string,
-		eventId: string,
-		color: string,
-	): Promise<APIResponse<string>> {
-		return request({
-			url: `${API_BASE_URL}/garage/${garageId}/event/${eventId}/color`,
-			method: APIMethod.PATCH,
-			appType: MovaAppType.GARAGE,
-			body: JSON.stringify({ color }),
-		});
-	}
-	static updateVehicleGarageEvent(
-		garageId: string,
-		eventId: string,
-		req: any,
-	): Promise<APIResponse<string>> {
-		return request({
-			url: `${API_BASE_URL}/garage/${garageId}/event/${eventId}/vehicle`,
-			method: APIMethod.PATCH,
-			appType: MovaAppType.GARAGE,
-			body: JSON.stringify(req),
-		});
-	}
+  static updateColorPrestationCategory(garageId: string, categoryCode: string, color: string): Promise<APIResponse<string>> {
+    return request({
+      url: `${API_BASE_URL}/garage/${garageId}/prestation-category/${categoryCode}/color`,
+      method: APIMethod.PATCH,
+      appType: MovaAppType.GARAGE,
+      body: JSON.stringify({ color })
+    });
+  }
+  static updateGarageEventColor(garageId: string, eventId: string, color: string): Promise<APIResponse<string>> {
+    return request({
+      url: `${API_BASE_URL}/garage/${garageId}/event/${eventId}/color`,
+      method: APIMethod.PATCH,
+      appType: MovaAppType.GARAGE,
+      body: JSON.stringify({ color })
+    });
+  }
+  static updateVehicleGarageEvent(garageId: string, eventId: string, req: any): Promise<APIResponse<string>> {
+
+    return request({
+      url: `${API_BASE_URL}/garage/${garageId}/event/${eventId}/vehicle`,
+      method: APIMethod.PATCH,
+      appType: MovaAppType.GARAGE,
+      body: JSON.stringify(req)
+    });
+  }
+
+  static uploadEventDocument(garageId: string, eventId: string, req: FormData): Promise<APIResponse<string>> {
+    return request({
+      url: `${API_BASE_URL}/garage/${garageId}/event/${eventId}/documents`,
+      method: APIMethod.POST,
+      appType: MovaAppType.GARAGE,
+      body: req
+    });
+}
+
+  static deleteEventDocument(garageId: string, eventId: string, docId: string): Promise<APIResponse<string>> {
+    return request({
+      url: `${API_BASE_URL}/garage/${garageId}/event/${eventId}/documents/${docId}`,
+      appType: MovaAppType.GARAGE,
+      method: APIMethod.DELETE,
+    });
+  }
 
 	static sendGarageMandate(garageId: string): Promise<APIResponse<string>> {
 		return request({

package/src/services/UserService.ts

@@ -78,7 +78,7 @@ export default class UserService {
      * @param password 
      * @returns 
      */
-    static async getCurrentUser(appType: MovaAppType): Promise<APIResponse<User>> {
+    static async getCurrentUser(appType?: MovaAppType): Promise<APIResponse<User>> {
         try {
             return await request({
                 url: `${API_BASE_URL}/user/me`,

package/src/services/VehicleService.ts

@@ -13,6 +13,31 @@ export default class VehicleService {
         });
     }
 
+    static getVehicleDocument(appType: MovaAppType, vehicleId: number): Promise<APIResponse<string>>  {
+        return request({
+            url: `${API_BASE_URL}/vehicle/${vehicleId}/document`,
+            method: APIMethod.GET,
+            appType: appType,
+        });
+    }
+
+    static deleteVehicleDocument(appType: MovaAppType,vehicleId: number, documentId: string): Promise<APIResponse<string>> {
+        return request({
+          url: `${API_BASE_URL}/vehicle/${vehicleId}/documents/${documentId}`,
+          method: APIMethod.DELETE,
+          appType: appType,
+        });
+    }
+
+    static uploadVehicleDocument(appType: MovaAppType, vehicleId: number, req: FormData): Promise<APIResponse<string>> {
+        return request({
+          url: `${API_BASE_URL}/vehicle/${vehicleId}/documents`,
+          method: APIMethod.POST,
+          appType: appType,
+          body: req
+        });
+    }
+
     static editVehicle({vehicleId, appType,...payload}: EditVehicleParams): Promise<APIResponse<string>> {
         return request({
             url: `${API_BASE_URL}/vehicle/${vehicleId}`,

package/src/style/styled.ts

@@ -0,0 +1,70 @@
+import { ToggleButtonProps, ToggleButton, styled, ToggleButtonGroup, lighten } from "@mui/material";
+
+interface StyledToggleButtonProps extends ToggleButtonProps {
+    customSelectedBackgroundColor?: string;
+    customBackgroundColor?: string;
+    customHoverColor?: string;
+  }
+  
+  export const StyledToggleButton = styled(ToggleButton)<StyledToggleButtonProps>(
+    ({ theme, customSelectedBackgroundColor, customBackgroundColor, customHoverColor }) => ({
+      padding: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      borderRadius: theme.shape.borderRadius,
+      '&:hover': {
+        backgroundColor: customHoverColor || theme.palette.warning.dark,
+      },
+      '&.Mui-selected': {
+        backgroundColor: customSelectedBackgroundColor || theme.palette.warning.main,
+      },
+      '&.Mui-selected:hover': {
+        backgroundColor: customHoverColor || theme.palette.warning.dark,
+      },
+      '&:not(:first-of-type)': {
+        borderRadius: theme.shape.borderRadius,
+        border: '1px solid rgba(0, 0, 0, 0.12)',
+      },
+      '&:first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+      '&.Mui-disabled': {
+        border: 0,
+        backgroundColor: theme.palette.grey[100],
+      },
+    }),
+  );
+
+
+/**
+ * Personnalisation du style des Toogle Buttons
+ * Note : il n'est posssible de le personnaliser directement au niveau
+ * de l'objet "components" du theme.
+ */
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+    '& .MuiToggleButtonGroup-grouped': {
+      padding: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      '&.Mui-disabled': {
+        border: 0,
+        backgroundColor: theme.palette.grey[100],
+      },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.primary.light,
+      },
+      '&:not(:first-of-type)': {
+        borderRadius: theme.shape.borderRadius,
+        border: '1px solid rgba(0, 0, 0, 0.12)',
+      },
+      '&:first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+      '&:hover': {
+        backgroundColor: lighten(theme.palette.primary.light, 0.3), // Modifier la couleur de fond au survol
+      },
+      '&.Mui-selected:hover': {
+        backgroundColor: theme.palette.primary.light, // Modifier la couleur de fond au survol
+      },
+    },
+  }));