@movalib/movalib-commons 1.59.14 → 1.59.15

package/dist/src/helpers/Tools.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateField = exports.formatVehicleTireStr = exports.formatVehicleTire = exports.formatFrenchVehiclePlate = exports.isEmpty = exports.flexCenter = exports.flexEnd = exports.getApplicationShortLabel = exports.capitalizeFirstLetter = exports.flexLeftRow = exports.getFrenchDayLabel = exports.getDayOfWeek = exports.findScheduleByDayOfWeek = exports.formatTime = exports.getFormattedIntervals = exports.getFormattedSchedule = exports.formatPhoneNumber = exports.getDayOfWeekIndex = exports.getDayOfWeekLabel = exports.FR_WEEK_DAYS = exports.isSafariOniOS = exports.flexStart = exports.getApplicationsShortLabels = void 0;
+exports.validateField = exports.formatVehicleTireStr = exports.formatVehicleTire = exports.formatFrenchVehiclePlate = exports.isEmpty = exports.flexCenter = exports.flexEnd = exports.getApplicationShortLabel = exports.capitalizeFirstLetter = exports.flexLeftRow = exports.getFrenchDayLabel = exports.getDayOfWeek = exports.findScheduleByDayOfWeek = exports.formatTime = exports.getFormattedIntervals = exports.getFormattedSchedule = exports.formatPhoneNumber = exports.iAmOwner = exports.getDayOfWeekIndex = exports.getDayOfWeekLabel = exports.FR_WEEK_DAYS = exports.isSafariOniOS = exports.flexStart = exports.getApplicationsShortLabels = void 0;
 var Enums_1 = require("./Enums");
+var UserConnected_1 = __importDefault(require("../services/UserConnected"));
 var getApplicationsShortLabels = function (applications) {
     if (!applications) {
         return '';
@@ -38,6 +42,11 @@ var getDayOfWeekIndex = function (day) {
     return -1;
 };
 exports.getDayOfWeekIndex = getDayOfWeekIndex;
+var iAmOwner = function (ownreId) {
+    var _a;
+    return ownreId === ((_a = UserConnected_1.default.getInstance().me) === null || _a === void 0 ? void 0 : _a.id);
+};
+exports.iAmOwner = iAmOwner;
 var formatPhoneNumber = function (phoneNumber) {
     var formattedNumber = "";
     if (phoneNumber) {

package/dist/src/services/AuthenticationService.js

@@ -43,6 +43,7 @@ var ApiHelper_1 = require("../helpers/ApiHelper");
 var CookieUtils_1 = require("../helpers/CookieUtils");
 var Enums_1 = require("../helpers/Enums");
 var Logger_1 = __importDefault(require("../helpers/Logger"));
+var UserConnected_1 = __importDefault(require("./UserConnected"));
 var UserService_1 = __importDefault(require("./UserService"));
 var AuthenticationService = /** @class */ (function () {
     function AuthenticationService() {
@@ -110,6 +111,7 @@ var AuthenticationService = /** @class */ (function () {
                             Logger_1.default.error(errorMsg);
                             return [2 /*return*/, { success: false, error: errorMsg }];
                         }
+                        UserConnected_1.default.getInstance().me = userResponse.data;
                         return [2 /*return*/, { success: true, data: userResponse.data }];
                     case 3: return [2 /*return*/, tokenResponse];
                     case 4: return [3 /*break*/, 6];

package/dist/src/services/GarageService.d.ts

@@ -12,6 +12,8 @@ export default class GarageService {
     static updateColorPrestationCategory(garageId: string, categoryCode: string, color: string): Promise<APIResponse<string>>;
     static updateGarageEventColor(garageId: string, eventId: string, color: string): Promise<APIResponse<string>>;
     static updateVehicleGarageEvent(garageId: string, eventId: string, req: any): Promise<APIResponse<string>>;
+    static uploadEventDocument(garageId: string, eventId: string, req: FormData): Promise<APIResponse<string>>;
+    static deleteEventDocument(garageId: string, eventId: string, docId: string): Promise<APIResponse<string>>;
     static sendGarageMandate(garageId: string): Promise<APIResponse<string>>;
     static getGarageAllData(garageId: string): Promise<APIResponse<Garage>>;
     static createGaragePrestationRequest(garageId: string, req: any): Promise<APIResponse<string>>;

package/dist/src/services/GarageService.js

@@ -65,7 +65,7 @@ var GarageService = /** @class */ (function () {
             url: "".concat(ApiHelper_1.API_BASE_URL, "/garage/").concat(garageId, "/prestation-category/").concat(categoryCode, "/color"),
             method: Enums_1.APIMethod.PATCH,
             appType: Enums_1.MovaAppType.GARAGE,
-            body: JSON.stringify({ color: color }),
+            body: JSON.stringify({ color: color })
         });
     };
     GarageService.updateGarageEventColor = function (garageId, eventId, color) {
@@ -73,7 +73,7 @@ var GarageService = /** @class */ (function () {
             url: "".concat(ApiHelper_1.API_BASE_URL, "/garage/").concat(garageId, "/event/").concat(eventId, "/color"),
             method: Enums_1.APIMethod.PATCH,
             appType: Enums_1.MovaAppType.GARAGE,
-            body: JSON.stringify({ color: color }),
+            body: JSON.stringify({ color: color })
         });
     };
     GarageService.updateVehicleGarageEvent = function (garageId, eventId, req) {
@@ -81,7 +81,22 @@ var GarageService = /** @class */ (function () {
             url: "".concat(ApiHelper_1.API_BASE_URL, "/garage/").concat(garageId, "/event/").concat(eventId, "/vehicle"),
             method: Enums_1.APIMethod.PATCH,
             appType: Enums_1.MovaAppType.GARAGE,
-            body: JSON.stringify(req),
+            body: JSON.stringify(req)
+        });
+    };
+    GarageService.uploadEventDocument = function (garageId, eventId, req) {
+        return (0, ApiHelper_1.request)({
+            url: "".concat(ApiHelper_1.API_BASE_URL, "/garage/").concat(garageId, "/event/").concat(eventId, "/documents"),
+            method: Enums_1.APIMethod.POST,
+            appType: Enums_1.MovaAppType.GARAGE,
+            body: req
+        });
+    };
+    GarageService.deleteEventDocument = function (garageId, eventId, docId) {
+        return (0, ApiHelper_1.request)({
+            url: "".concat(ApiHelper_1.API_BASE_URL, "/garage/").concat(garageId, "/event/").concat(eventId, "/documents/").concat(docId),
+            appType: Enums_1.MovaAppType.GARAGE,
+            method: Enums_1.APIMethod.DELETE,
         });
     };
     GarageService.sendGarageMandate = function (garageId) {

package/dist/src/services/UserConnected.d.ts

@@ -0,0 +1,9 @@
+export default class UserConnected {
+    private static instance;
+    private _me;
+    private constructor();
+    static getInstance(): UserConnected;
+    get me(): any;
+    set me(user: any);
+    clearUser(): void;
+}

package/dist/src/services/UserConnected.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var UserService_1 = __importDefault(require("./UserService"));
+var UserConnected = /** @class */ (function () {
+    function UserConnected() {
+        var storedUser = localStorage.getItem('user');
+        this._me = storedUser ? JSON.parse(storedUser) : null;
+    }
+    UserConnected.getInstance = function () {
+        if (!UserConnected.instance) {
+            UserConnected.instance = new UserConnected();
+        }
+        return UserConnected.instance;
+    };
+    Object.defineProperty(UserConnected.prototype, "me", {
+        get: function () {
+            var _this = this;
+            if (!this._me) {
+                var storedUser = localStorage.getItem('user');
+                if (storedUser === undefined || storedUser === null || storedUser === 'undefined') {
+                    UserService_1.default.getCurrentUser()
+                        .then(function (response) {
+                        localStorage.setItem('user', JSON.stringify(response.data));
+                        _this._me = response.data;
+                        return _this._me;
+                    });
+                }
+                else {
+                    this._me = JSON.parse(storedUser);
+                    return this._me;
+                }
+            }
+            else {
+                return this._me;
+            }
+        },
+        set: function (user) {
+            this._me = user;
+            if (user) {
+                localStorage.setItem('user', JSON.stringify(user));
+            }
+            else {
+                localStorage.removeItem('user'); // Supprime les données si user est null ou undefined
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    UserConnected.prototype.clearUser = function () {
+        // Méthode pour effacer l'utilisateur
+        this._me = null;
+        localStorage.removeItem('user');
+    };
+    return UserConnected;
+}());
+exports.default = UserConnected;

package/dist/src/services/UserService.d.ts

@@ -19,5 +19,5 @@ export default class UserService {
      * @param password
      * @returns
      */
-    static getCurrentUser(appType: MovaAppType): Promise<APIResponse<User>>;
+    static getCurrentUser(appType?: MovaAppType): Promise<APIResponse<User>>;
 }

package/dist/src/services/VehicleService.d.ts

@@ -3,5 +3,8 @@ import { MovaAppType } from "../helpers/Enums";
 import { EditVehicleParams } from "./VehicleService.types";
 export default class VehicleService {
     static getVehicleDescription(appType: MovaAppType, plate: string): Promise<APIResponse<string>>;
+    static getVehicleDocument(appType: MovaAppType, vehicleId: number): Promise<APIResponse<string>>;
+    static deleteVehicleDocument(appType: MovaAppType, vehicleId: number, documentId: string): Promise<APIResponse<string>>;
+    static uploadVehicleDocument(appType: MovaAppType, vehicleId: number, req: FormData): Promise<APIResponse<string>>;
     static editVehicle({ vehicleId, appType, ...payload }: EditVehicleParams): Promise<APIResponse<string>>;
 }

package/dist/src/services/VehicleService.js

@@ -23,6 +23,28 @@ var VehicleService = /** @class */ (function () {
             appType: appType,
         });
     };
+    VehicleService.getVehicleDocument = function (appType, vehicleId) {
+        return (0, ApiHelper_1.request)({
+            url: "".concat(ApiHelper_1.API_BASE_URL, "/vehicle/").concat(vehicleId, "/document"),
+            method: Enums_1.APIMethod.GET,
+            appType: appType,
+        });
+    };
+    VehicleService.deleteVehicleDocument = function (appType, vehicleId, documentId) {
+        return (0, ApiHelper_1.request)({
+            url: "".concat(ApiHelper_1.API_BASE_URL, "/vehicle/").concat(vehicleId, "/documents/").concat(documentId),
+            method: Enums_1.APIMethod.DELETE,
+            appType: appType,
+        });
+    };
+    VehicleService.uploadVehicleDocument = function (appType, vehicleId, req) {
+        return (0, ApiHelper_1.request)({
+            url: "".concat(ApiHelper_1.API_BASE_URL, "/vehicle/").concat(vehicleId, "/documents"),
+            method: Enums_1.APIMethod.POST,
+            appType: appType,
+            body: req
+        });
+    };
     VehicleService.editVehicle = function (_a) {
         var vehicleId = _a.vehicleId, appType = _a.appType, payload = __rest(_a, ["vehicleId", "appType"]);
         return (0, ApiHelper_1.request)({

package/dist/src/style/styled.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ToggleButtonProps } from "@mui/material";
+interface StyledToggleButtonProps extends ToggleButtonProps {
+    customSelectedBackgroundColor?: string;
+    customBackgroundColor?: string;
+    customHoverColor?: string;
+}
+export declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "classes" | "className" | "style" | "tabIndex" | "onChange" | "onClick" | "fullWidth" | "size" | "disabled" | "value" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledToggleButtonProps, {}, {}>;
+/**
+ * Personnalisation du style des Toogle Buttons
+ * Note : il n'est posssible de le personnaliser directement au niveau
+ * de l'objet "components" du theme.
+ */
+export declare const StyledToggleButtonGroup: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonGroupProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export {};

package/dist/src/style/styled.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledToggleButtonGroup = exports.StyledToggleButton = void 0;
+var material_1 = require("@mui/material");
+exports.StyledToggleButton = (0, material_1.styled)(material_1.ToggleButton)(function (_a) {
+    var theme = _a.theme, customSelectedBackgroundColor = _a.customSelectedBackgroundColor, customBackgroundColor = _a.customBackgroundColor, customHoverColor = _a.customHoverColor;
+    return ({
+        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.
+ */
+exports.StyledToggleButtonGroup = (0, material_1.styled)(material_1.ToggleButtonGroup)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '& .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: (0, material_1.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
+            },
+        },
+    });
+});

package/dist/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
+      },
+    },
+  }));

package/index.ts

@@ -6,7 +6,7 @@ export { default as VehicleService } from './src/services/VehicleService';
 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 UserConnected } from './src/services/UserConnected';
 // Export des composants
 export { default as DialogForgotPassword } from './src/DialogForgotPassword';
 export { default as IbanInput } from './src/IbanInput';
@@ -14,12 +14,12 @@ 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';
-export { default as VehicleFullCard } from './src/VehicleFullCard';
+export { default as VehicleFullCard } from './src/components/vehicle/VehicleFullCard';
 export { default as MovaDigitalPassport } from './src/MovaDigitalPassport';
 export { default as Loader } from './src/Loader';
 export { default as MovaDialog } from './src/MovaDialog';
 export { default as QRCode } from './src/QRCode';
-export { default as VehiclePlateField, regexPlate, oldRegexPlate } from './src/VehiclePlateField';
+export { default as VehiclePlateField, regexPlate, oldRegexPlate } from './src/components/vehicle/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';
@@ -31,6 +31,7 @@ export { default as GenderSelector } from './src/GenderSelector';
 export { default as ActivateAccount } from './src/components/singup/ActivateAccount';
 export { QrCodePLVContainer } from './src/components/QrCodePLVContainer/QrCodePLVContainer';
 export { PLVComponent, PrintSize } from './src/components/QrCodePLVContainer/PLVComponent';
+export {LinkedDocumentDialog} from './src/components/LinkedDocumentDialog';
 // Export des classes
 export { default as Subscription } from './src/models/Subscription';
 export { default as Absence } from './src/models/Absence';
@@ -80,6 +81,7 @@ export {
   findScheduleByDayOfWeek,
   getDayOfWeekLabel,
   isSafariOniOS,
+  iAmOwner,
   getApplicationsShortLabels,
 } from './src/helpers/Tools';
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
@@ -117,3 +119,6 @@ export {
 
 // Export des utils
 export { openDialogPrint } from './src/utils/DialogPrint';
+
+// Export des styles
+export { StyledToggleButton, StyledToggleButtonGroup} from './src/style/styled';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@movalib/movalib-commons",
-	"version": "1.59.14",
+	"version": "1.59.15",
 	"description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -10,7 +10,8 @@
 		"build": "rm -rf dist && tsc && npm run copy-assets",
 		"copy-assets": "cp -r src/assets/ dist/src/assets/ && cp -r src/style/ dist/src/style/",
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"clean": "rm -rf dist node_modules package-lock.json"
+		"clean": "rm -rf dist node_modules package-lock.json",
+		"build:dev" : "rm -rf dist && tsc && npm run copy-assets && npm pack"
 	},
 	"keywords": [],
 	"author": "",

package/src/VehiclePlateField.tsx

@@ -49,6 +49,7 @@ const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps> = ({ onValidV
     }
   }
 
+  
   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

package/src/components/LinkedDocumentDialog.tsx

@@ -0,0 +1,200 @@
+import Dialog from "@mui/material/Dialog";
+import Toolbar from "@mui/material/Toolbar";
+import theme from "../../theme";
+import DialogTitle from "@mui/material/DialogTitle";
+import Box from "@mui/material/Box";
+import { FindInPage } from "@mui/icons-material";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import CloseRounded from "@mui/icons-material/CloseRounded";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import { DocumentType, MovaAppType } from "../helpers/Enums";
+import { useState } from "react";
+import { ToggleButtonGroup, useMediaQuery } from "@mui/material";
+import { StyledToggleButton } from "../style/styled";
+
+
+type LinkedDocumentDialog = {
+    isShowLinkedDocument: boolean;
+    toggleShowLinkedDocument: (docType: DocumentType | null) => void;
+    isVehicle: boolean;
+    message?: JSX.Element;
+    appType: MovaAppType;
+};
+
+export const LinkedDocumentDialog = ({
+    isShowLinkedDocument,
+    toggleShowLinkedDocument,
+    isVehicle,
+    message,
+    appType,
+}: LinkedDocumentDialog) => {
+
+    const [selectedTypeDocument, setSelectedTypeDocument] = useState<DocumentType | null>(null);
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+    return (
+        <Dialog
+            open={isShowLinkedDocument}
+            fullWidth
+            maxWidth='md'
+            onClose={() => toggleShowLinkedDocument(null)}
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <Toolbar
+                disableGutters
+                sx={{
+                    display: 'block',
+                    background: theme.palette.grey[200],
+                    minHeight: 3,
+                    p: 0,
+                }}
+            >
+                <DialogTitle id='search-dialog-title'>
+                    <Box position='relative' sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                        <FindInPage sx={{ height: '30px', width: '30px' }} />
+                        <Typography
+                            variant='h6'
+                            sx={{
+                                textTransform: 'uppercase',
+                                fontStyle: 'bold',
+                                textAlign: 'center',
+                            }}
+                        >
+                            Quel type de document ?
+                        </Typography>
+                        <IconButton
+                            size='small'
+                            aria-label='close'
+                            onClick={() => toggleShowLinkedDocument(null)}
+                            title={'Fermer'}
+                        >
+                            <CloseRounded />
+                        </IconButton>
+                    </Box>
+                </DialogTitle>
+            </Toolbar>
+            <DialogContent sx={{ textAlign: 'center' }}>
+                <ToggleButtonGroup
+                    orientation={isMobile ? 'vertical' : 'horizontal'}
+                    size='small'
+                    value={selectedTypeDocument}
+                    exclusive
+                    onChange={(_, value: DocumentType) => {
+                        setSelectedTypeDocument(value);
+                    }}
+                    aria-label='update-scheduling-alert'
+                    sx={{ gap: 3, flexWrap: 'wrap', justifyContent: 'center' }}
+                >
+                    {isVehicle ? (
+                        <>
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_TIRE_PHOTO}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_TIRE_PHOTO}
+                                aria-label='document tire'
+                            >
+                                <b>Photo pneu</b>
+                            </StyledToggleButton>
+                            {appType === MovaAppType.INDIVIDUAL && (
+                                <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_MAINTENANCE_INVOICE}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_MAINTENANCE_INVOICE}
+                                aria-label='invoice document'
+                            >
+                                <b>Facture</b>
+                            </StyledToggleButton>
+                            )}
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_INSPECTION}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_INSPECTION}
+                                aria-label='vehicule inspection docuemnt'
+                            >
+                                <b>Contrôle technique</b>
+                            </StyledToggleButton>
+
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_OTHER}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_OTHER}
+                                aria-label='vehicule document other'
+                            >
+                                <b>Autre</b>
+                            </StyledToggleButton>
+                        </>
+                    ) : (
+                        <>
+                            {/* <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.EVENT_MAINTENANCE}
+                                selected={selectedTypeDocument === DocumentType.EVENT_MAINTENANCE}
+                                aria-label='event visual proof document'
+                            >
+                                <b>Maintenance</b>
+                            </StyledToggleButton> */}
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.EVENT_VISUAL_PROOFS}
+                                selected={selectedTypeDocument === DocumentType.EVENT_VISUAL_PROOFS}
+                                aria-label='event visual proof document'
+                            >
+                                <b>Photos et Preuves Visuelles</b>
+                            </StyledToggleButton>
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.EVENT_OTHER}
+                                selected={selectedTypeDocument === DocumentType.EVENT_OTHER}
+                                aria-label='event document other'
+                            >
+                                <b>Autre</b>
+                            </StyledToggleButton>
+                        </>
+                    )}
+                </ToggleButtonGroup>
+                {message && (
+                    <>{message}</>
+                )}
+            </DialogContent>
+            <DialogActions
+                sx={{
+                    py: 1,
+                    backgroundColor: theme.palette.grey[200],
+                }}
+            >
+                <Button color='inherit' onClick={() => toggleShowLinkedDocument(null)}>
+                    Annuler
+                </Button>
+                <Box sx={{ flexGrow: 1 }} />
+                <Button color='primary' autoFocus sx={{ ml: 1 }} disabled={!selectedTypeDocument} onClick={() => toggleShowLinkedDocument(selectedTypeDocument)}>
+                    <b>Valider</b>
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};