@movalib/movalib-commons 1.0.67 → 1.0.68

package/dist/src/services/UserService.js

@@ -0,0 +1,76 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ApiHelper_1 = require("../helpers/ApiHelper");
+var Enums_1 = require("../helpers/Enums");
+var Logger_1 = __importDefault(require("../helpers/Logger"));
+var UserService = /** @class */ (function () {
+    function UserService() {
+    }
+    /**
+     * @param email
+     * @param password
+     * @returns
+     */
+    UserService.getCurrentUser = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, (0, ApiHelper_1.request)({
+                                url: "".concat(ApiHelper_1.API_BASE_URL, "/user/me"),
+                                method: Enums_1.APIMethod.GET
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                    case 2:
+                        error_1 = _a.sent();
+                        Logger_1.default.error('Error occurred during getting user:', error_1);
+                        return [2 /*return*/, Promise.reject(error_1)];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return UserService;
+}());
+exports.default = UserService;

package/index.ts

@@ -30,11 +30,13 @@ export { default as Event } from './src/models/Event';
 export { default as VehicleTire } from './src/models/VehicleTire';
 
 // Export des types
+export type { APIRequest, APIResponse } from './src/helpers/ApiHelper';
 export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm, MovaInterval, OriginReference,
     MovaVehicleForm } from './src/helpers/Types';
 
 // Export des méthodes utilitaires
-export { validateField, formatVehicleTire, formatFrenchVehiclePlate } from './src/helpers/Tools'; 
+export { readCookie, deleteCookie } from './src/helpers/CookieUtils'; 
+export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty } from './src/helpers/Tools'; 
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
 export { formatDateByCountryCode, getLongFormattedDateTime, capitalizeFirstLetter } from './src/helpers/DateUtils';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,21 +20,21 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
-    "@mui/x-date-pickers": "^6.9.1",
     "@mui/material": "^5.13.5",
+    "@mui/x-date-pickers": "^6.9.1",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "file-loader": "^6.2.0",
-    "@types/node": "^16.18.53",
     "@types/react-router-dom": "^5.3.0",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^2.0.0",
+    "file-loader": "^6.2.0",
+    "js-cookie": "^3.0.5",
+    "qr-code-styling": "^1.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1",
-    "qr-code-styling": "^1.4.4",
-    "typescript": "^4.9.5",
-    "date-fns": "^2.29.3",
-    "date-fns-tz": "^2.0.0"
+    "typescript": "^4.9.5"
   },
   "eslintConfig": {
     "extends": [
@@ -42,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.4",
     "html-webpack-plugin": "^5.5.3",
     "ts-loader": "^9.4.4",
     "webpack-cli": "^5.1.4"

package/src/MovaLogin.tsx

@@ -103,7 +103,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
     const getMovaLogo = () => {
 
         return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
-            movaAppType === MovaAppType.USER ? LogoLarge : 
+            movaAppType === MovaAppType.INDIVIDUAL ? LogoLarge : 
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
     }
 
@@ -267,7 +267,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                                 Mot de passe oublié ?
                             </Link>
                         </Grid>
-                        {movaAppType === MovaAppType.USER && <Grid item>
+                        {movaAppType === MovaAppType.INDIVIDUAL && <Grid item>
                             <Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickSignUp(e)}>
                             Créer mon compte
                             </Link>

package/src/MovaSignUp.tsx

@@ -145,7 +145,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     const getMovaLogo = () => {
 
         return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
-            movaAppType === MovaAppType.USER ? LogoLarge : 
+            movaAppType === MovaAppType.INDIVIDUAL ? LogoLarge : 
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
     }
 

package/src/QRCode.css

@@ -0,0 +1,4 @@
+.qr-code canvas {
+    max-width: 300px !important;
+    width: 100%;
+}

package/src/QRCode.tsx

@@ -12,6 +12,7 @@ import QRCodeStyling, {
   Extension,
   Options
 } from "qr-code-styling";
+import './QRCode.css';
 
 
 interface QRCodeProps {
@@ -19,18 +20,14 @@ interface QRCodeProps {
   showDownload?:boolean
 }
 
-
 const styles = {
     inputWrapper: {
       margin: "20px 0",
       display: "flex",
       alignItems: 'center',
       justifyContent: "center",
-      width: '100%'
-    },
-    inputBox: {
-      flexGrow: 1,
-      marginRight: 20
+      width: '300px',
+      height: '300px'
     }
   };
   
@@ -42,9 +39,9 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
   const defaultData:string = 'https://movalib.com';
 
   const [options, setOptions] = useState<Options>({
-    width: 300,
-    height: 300,
-    type: 'svg' as DrawType,
+    width: 600,
+    height: 600,
+    type: 'canvas' as DrawType,
     data: data ?? defaultData,
     image: QRCodeImage,
     margin: 10,
@@ -56,8 +53,7 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
     imageOptions: {
       hideBackgroundDots: true,
       imageSize: 0.4,
-      margin: 15,
-      crossOrigin: 'anonymous',
+      margin: 15
     },
     dotsOptions: {
       color: darken(theme.palette.primary.main, 0.3),
@@ -126,8 +122,11 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
   };
 
   return (
-    <Box>
-      <div ref={ref} style={styles.inputWrapper} />
+    <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center' }} >
+      <div ref={ref} style={styles.inputWrapper} className='qr-code' />
 {/*         <select onChange={onExtensionChange} value={fileExt}>
           <option value="svg">SVG</option>
           <option value="png">PNG</option>

package/src/ScheduleFields.tsx

@@ -0,0 +1,301 @@
+import * as React from 'react';
+import { FunctionComponent, useEffect, useState } from 'react';
+import { Checkbox, FormControlLabel, Grid, IconButton, FormHelperText, FormControl, RadioGroup, Radio } from '@mui/material';
+import AddIcon from '@mui/icons-material/AddRounded';
+import DeleteIcon from '@mui/icons-material/DeleteRounded';
+import { TimePicker } from '@mui/x-date-pickers';
+import theme from '../theme'; // Import du thème personnalisé
+import Schedule from './models/Schedule';
+import { DayOfWeek } from './helpers/Enums';
+import Logger from './helpers/Logger';
+import { flexCenter } from './helpers/Tools';
+
+export const FR_WEEK_DAYS: string[] = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
+
+type DayInterval = {
+  startTime: Date | '' | null, 
+  endTime: Date | '' | null, 
+  countryCode: string,
+  error: string | null
+}
+
+export type DaySchedule = {
+  day: DayOfWeek,
+  checked: boolean,
+  allDay: boolean,
+  intervals: DayInterval[],
+};
+
+const initialSchedules: DaySchedule[] = [
+  {day: DayOfWeek.MONDAY, checked: false, allDay: false, intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.TUESDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.WEDNESDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.THURSDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.FRIDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.SATURDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.SUNDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+];
+
+interface ScheduleFieldsProps {
+  timePickerStep: number,
+  size: 'small' | 'medium',
+  onChange: (schedules: DaySchedule[]) => void,
+  schedules?: Schedule[] | undefined;
+}
+
+const ScheduleFields: FunctionComponent<ScheduleFieldsProps> = ({ timePickerStep, schedules, size, onChange }) => {
+  
+  const mergeSchedules = (apiSchedules: Schedule[]): DaySchedule[] => {
+      // Créez une copie profonde du tableau initialSchedules pour éviter toute mutation accidentelle
+      const mergedSchedules = JSON.parse(JSON.stringify(initialSchedules));
+      
+      // Parcourez chaque élément de apiSchedules et mettez à jour updatedSchedules
+      const today = new Date().toISOString().substring(0, 10);  
+
+      for (const apiSchedule of apiSchedules) {
+          const dayIndex = mergedSchedules.findIndex((schedule: { day: DayOfWeek; }) => schedule.day === apiSchedule.dayOfWeek);
+          if (dayIndex !== -1) {
+            mergedSchedules[dayIndex].checked = apiSchedule.intervals.length > 0;
+            mergedSchedules[dayIndex].intervals = apiSchedule.intervals.map(interval => ({
+                  ...interval,
+                  // On injecte une date fictive même si nous n'utilisons que l'heure, le Timepicker attend une Date JS Valide
+                  startTime: new Date(`${today}T${interval.startTime!}`),
+                  endTime: new Date(`${today}T${interval.endTime!}`),
+                  error: null,  // Réinitialisez l'erreur car les données sont maintenant mises à jour
+              }));
+            mergedSchedules[dayIndex].allDay = apiSchedule.isAllWorkingDay;
+          }
+      }
+      
+      Logger.info(mergedSchedules);
+
+      return mergedSchedules;
+  }
+
+  /**
+   * Cette fonction renvoie une liste de DaySchedule depuis une liste de Schedule
+   * @returns 
+   */
+  const initializeFromSchedules = () => {
+
+    if (schedules && schedules.length > 0 ){
+
+      return schedules.map(s => {
+        const iList: DayInterval[] = s.intervals.map(i => ({
+          startTime: new Date(i.startTime!),
+          endTime: new Date(i.endTime!),
+          countryCode: i.countryCode,
+          error: null,
+        }));
+      
+        return {
+          day: s.dayOfWeek,
+          checked: iList.length > 0, // le checked est à true si il y a au moins un interval de saisi
+          intervals: iList,
+        };
+      });
+    }
+    return [];
+  }
+
+  // Si des schedules sont transmises on initialise un nouveau tableau de DaySchedule[]
+  const [schedule, setSchedule] = useState<DaySchedule[]>(initialSchedules);
+
+  // Chargement initial des données du garage
+  useEffect(() => {
+
+    if(schedules && schedules.length > 0){
+      setSchedule(mergeSchedules(schedules));      
+    }
+
+  }, [schedules]); // Exécute le hook à chaque fois que les schedules transmis en props changent
+
+  const handleDayChecked = (dayIndex: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].checked = event.target.checked;
+    // On réinitialise aussi les intervals
+    newSchedule[dayIndex].intervals = [{startTime: null, endTime: null, countryCode: 'fr', error: null}];
+    onChange(newSchedule);
+    setSchedule(newSchedule);
+  };
+
+  const handleAllDayChecked = (e: React.ChangeEvent<HTMLInputElement>, value: string, dayIndex: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].allDay = event.target.checked;
+    onChange(newSchedule);
+    setSchedule(newSchedule);
+  };
+
+  const validateInterval = (start: Date | '', end: Date | ''): string | null => {
+    if (start instanceof Date && end instanceof Date && start.getTime() > end.getTime()) {
+        return "L'heure de début doit être antérieure à l'heure de fin";
+    }
+    return null;
+  };
+
+  const validateIntervals = (intervals: DayInterval[]): string | null  => {
+
+    // On tri les intervals par date de début
+    const sortedIntervals = [...intervals].sort((a, b) => 
+      a.startTime && b.startTime ? a.startTime.toISOString().localeCompare(b.startTime.toISOString()) : 0);
+
+  console.log(sortedIntervals)
+    for (let i = 0; i < sortedIntervals.length; i++) {
+        if (
+          sortedIntervals[i].startTime?.toString().localeCompare(sortedIntervals[i].endTime?.toString()!)! >= 0 ||
+          (i < sortedIntervals.length - 1 &&
+            sortedIntervals[i].endTime?.toString().localeCompare(sortedIntervals[i + 1].startTime?.toString()!)! > 0)
+        ) {
+          return 'Attention vos intervales se chevauchent'; // start time is after or equal to end time, or end time of current interval is after start time of next interval
+        }
+    }
+    return null; // all intervals are valid and there are no overlapping intervals
+  }
+  
+
+  const handleIntervalChange = (dayIndex: number, intervalIndex: number, type: 'startTime' | 'endTime') => 
+  (newValue: "" | Date | null) => {
+
+    const newSchedule = [...schedule];
+
+    newSchedule[dayIndex].intervals[intervalIndex][type] = newValue!;
+
+    newSchedule[dayIndex].intervals[intervalIndex].error = validateInterval(
+      newSchedule[dayIndex].intervals[intervalIndex].startTime!, 
+      newSchedule[dayIndex].intervals[intervalIndex].endTime!
+    );
+
+    //Contrôle le chevauchement d'intervales
+    if(type === 'endTime' && intervalIndex > 0 && !newSchedule[dayIndex].intervals[intervalIndex].error){
+      console.log(dayIndex);
+      console.log(newSchedule[dayIndex].intervals);
+      newSchedule[dayIndex].intervals[intervalIndex].error = validateIntervals(
+        newSchedule[dayIndex].intervals);
+    }
+
+    setSchedule(newSchedule);
+    onChange(newSchedule);
+  };
+
+  const addInterval = (dayIndex: number) => () => {
+    Logger.info(dayIndex);
+
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].intervals.push({startTime: null, endTime: null, countryCode: 'fr', error: null});
+    Logger.info(newSchedule);
+    setSchedule(newSchedule);
+  };
+
+  const deleteInterval = (dayIndex: number, intervalIndex: number) => () => {
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].intervals.splice(intervalIndex, 1);
+    onChange(newSchedule);
+    setSchedule(newSchedule);
+  }
+
+  const getDayOfWeekIndex = (day: DayOfWeek) => {
+    if(day){      
+      // Convertir les valeurs de l'énumération en un tableau
+      const daysArray = Object.values(DayOfWeek);
+      return daysArray.indexOf(day);
+    }
+    return -1;
+  }
+
+  return (
+      <Grid container spacing={1} sx={{ minWidth: '650px', maxWidth: '800px'}} >
+        {schedule.map((daySchedule, dayIndex) => (
+          <>
+            <Grid item xs={1} />
+
+            <Grid item xs={2} key={dayIndex+1}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={daySchedule.checked}
+                    onChange={handleDayChecked(dayIndex)}
+                  />
+                }
+                label={FR_WEEK_DAYS[getDayOfWeekIndex(daySchedule.day)]}
+              />
+            </Grid>
+
+            <Grid item xs={7} key={(dayIndex+1)*Math.random()}>
+              {daySchedule.intervals.map((interval, intervalIndex) => (
+                <Grid container key={intervalIndex+1} 
+                  style={{ paddingTop: intervalIndex > 0 ? theme.spacing(1) : 0 }}>
+                  <Grid item xs={6} key={(intervalIndex+1)*Math.random()} sx={{ textAlign: 'center' }}>
+                    <TimePicker
+                      views={['hours', 'minutes']}
+                      minutesStep={timePickerStep ?? 30} // Valeur par défaut de 30 minutes au cas ou
+                      disabled={!daySchedule.checked}
+                      value={interval.startTime}  
+                      formatDensity='dense'                    
+                      onChange={handleIntervalChange(dayIndex, intervalIndex, 'startTime')}
+                      slotProps={{
+                        textField: {
+                          size: 'small',                          
+                          sx: {
+                            width:'150px',
+                            minWidth:'100px',
+                            padding: 0,
+                          },
+                        },
+                        actionBar: {
+                          sx: { display: 'none' },
+                        },
+                      }}
+                    />
+                  </Grid>
+                  <Grid item xs={6} key={(intervalIndex+1)*Math.random()} sx={{ display: 'contents'}}>
+                    <TimePicker
+                      minutesStep={timePickerStep ?? 30} // Valeur par défaut de 30 minutes au cas ou
+                      disabled={!(interval.startTime instanceof Date)}
+                      value={interval.endTime}
+                      formatDensity='dense'
+                      onChange={handleIntervalChange(dayIndex, intervalIndex, 'endTime')}
+                      //onClose={handleIntervalClose}
+                      closeOnSelect={false}
+                      slotProps={{
+                        textField: {
+                          size: 'small',                          
+                          sx: {
+                            width:'150px',
+                            minWidth:'100px',
+                            padding: 0,
+                          },
+                        },
+                        actionBar: {
+                          sx: { display: 'none' },
+                        },
+                      }}                      
+                    />
+                        {intervalIndex > 0 &&
+                        <IconButton onClick={deleteInterval(dayIndex, intervalIndex)} disabled={!daySchedule.checked} sx={{ ml: 2 }}>
+                          <DeleteIcon />
+                        </IconButton>
+                      }
+                  </Grid>
+                  <Grid item xs={12} key={(intervalIndex+1)*Math.random()} >
+                    {interval.error && <FormHelperText error sx={{mb:1}}>{interval.error}</FormHelperText>}
+                  </Grid> 
+                </Grid>
+              ))}                  
+            </Grid>
+
+            <Grid item xs={1} key={(dayIndex+1)*Math.random()} sx={{ pl: 0 }}>
+              <IconButton onClick={addInterval(dayIndex)} disabled={!daySchedule.checked}>
+                <AddIcon />
+              </IconButton>
+            </Grid> 
+            
+            <Grid item xs={1} />
+          </>
+        ))}
+      </Grid>
+  );
+}
+
+export default ScheduleFields;

package/src/helpers/ApiHelper.ts

@@ -0,0 +1,95 @@
+import { APIMethod } from "./Enums";
+import { COOKIE_GARAGE_TOKEN, readCookie } from "./CookieUtils";
+import Logger from "./Logger";
+
+export const API_BASE_URL = process.env.REACT_APP_API_URL ?? 'https://localhost:8443/api';
+
+export type APIResponse<T> = {
+    success: boolean;
+    data?: T;
+    error?: string;
+};
+
+export type APIRequest = {
+    url: string,
+    method: APIMethod,
+    body?: string | FormData
+}
+
+function handleError(error: Error): APIResponse<null>  {
+    let msg = error.message.includes('fetch') ? "Connexion impossible" : error.message;
+    return {
+        success: false,
+        error: msg
+    };
+}
+
+function handleResponse(response: Response): Promise<APIResponse<any>> {
+
+    const contentType = response.headers.get("content-type");
+    const isJson = contentType && contentType.includes("application/json");
+
+    const dataPromise = isJson ? response.json() : response.text();
+
+    return dataPromise.then(data => {
+        
+        if (!response.ok) {
+
+            Logger.error(data);
+
+            let errorMsg: string;
+
+            switch(response.status){
+                case 403:
+                    errorMsg = 'Accès non autorisé (403)'; break;
+                case 404:
+                    errorMsg = 'La ressource demandée est introuvable (404)'; break;
+                case 500:
+                    errorMsg = 'Une erreur interne du serveur est survenue (500)'; break;
+                default:
+                    errorMsg = (typeof data === 'string') ? data : `Une erreur est survenue (${response.status})`; break;
+            }
+
+            return { success: false, error: errorMsg };
+        }
+        
+        return { success: true, data };
+    });
+}
+
+
+/**
+ * ATTENTION : cela signifie que toutes les requêtes du Front seront de type "preflight"
+ * Il faut penser à configurer l'API pour autoriser les headers
+ * @param options 
+ * @param dispatch 
+ * @returns 
+ */
+export const request = (options:APIRequest): Promise<APIResponse<any>> => {
+
+    const headers = new Headers();
+
+    // Si le corps est de type FormData, il ne faut pas définir le content-type manuellement (le navigateur prend le relai est injecte un boundary (délimiteur)
+    if (!(options.body instanceof FormData)) {
+        headers.append('Content-Type', 'application/json');
+    }
+
+    // Récupération du TOKEN depuis les cookies et intégration au header
+    if(readCookie(COOKIE_GARAGE_TOKEN)) {
+        headers.append('Authorization', 'Bearer ' + readCookie(COOKIE_GARAGE_TOKEN))
+    }
+
+    // On intègre les headers aux options
+    const defaults = {headers: headers};
+    options = Object.assign({}, defaults, options);
+
+    Logger.info(options);
+
+      // Appel API
+    return fetch(options.url, options)
+        .then(handleResponse)
+        .catch(error => {
+            Logger.error('There has been a problem with your fetch operation : ', error.message);
+            return handleError(error);
+        });
+}

package/src/helpers/CookieUtils.ts

@@ -0,0 +1,23 @@
+import Cookies from "js-cookie";
+
+export const COOKIE_GARAGE_TOKEN: string = 'movalibGarageToken'; 
+export const COOKIE_INDIVIDUAL_TOKEN: string = 'movalibIndividualToken'; 
+export const COOKIE_DEFAULT_EXPIRES: number = 7;
+
+export const createCookie = (name:string, value:string) => {
+  if(name && value){
+    Cookies.set(name, value, { expires: COOKIE_DEFAULT_EXPIRES, sameSite: 'None', secure: true });
+  }
+}
+
+export const deleteCookie = (name:string) => {
+    if(name){
+      Cookies.remove(name);
+    }
+  }
+  
+  export const readCookie = (name:string) => {
+    if(name){
+      return Cookies.get(name);
+    }
+  }

package/src/helpers/Enums.ts

@@ -1,3 +1,10 @@
+export enum APIMethod {
+    GET = 'GET',
+    PUT = 'PUT',
+    PATCH = 'PATCH',
+    POST = 'POST',
+    DELETE = 'DELETE'
+}
 
 export enum DateFormatTypes {
     SHORT_FORMAT_DATE = 'dd/MM/yyyy',
@@ -81,7 +88,7 @@ export enum MovaAppType {
     /**
     * Application Utilisateur (automobiliste)
     */
-    USER = "USER",
+    INDIVIDUAL = "INDIVIDUAL",
     /**
      * Application Administrateur (MovaTeam)
      */