@movalib/movalib-commons 1.1.89 → 1.1.92

package/devIndex.tsx

@@ -74,7 +74,7 @@ const App = () => {
   const getQRCodeData = ():string => {
     // On renvoie les données pour le QR Code, l'url change selon l'environnement (variables d'environnement)
     //return `https://app.movalib.com/#/garage/2?redirect=garage`;
-    return `https://app.movalib.com/#/garage/4`;
+    return `https://app.movalib.com/#/garage/9`;
   }
 
   const handleScheduleChange = (schedule: DaySchedule[]) => {
@@ -194,7 +194,7 @@ const App = () => {
           </Box>
 
 
-          {openAccountValidation && <AccountValidation smsValidation={true} resetPassword={false} movaAppType={MovaAppType.GARAGE}
+          {openAccountValidation && <AccountValidation smsValidation={false} resetPassword={false} movaAppType={MovaAppType.INDIVIDUAL}
           onSubmit={function (success: boolean, message: string): void {
             throw new Error('Function not implemented.');
           } } onResendSecurityCode={function (success: boolean, message: string): void {

package/dist/devIndex.js

@@ -100,7 +100,7 @@ var App = function () {
     var getQRCodeData = function () {
         // On renvoie les données pour le QR Code, l'url change selon l'environnement (variables d'environnement)
         //return `https://app.movalib.com/#/garage/2?redirect=garage`;
-        return "https://app.movalib.com/#/garage/4";
+        return "https://app.movalib.com/#/garage/9";
     };
     var handleScheduleChange = function (schedule) {
         if (schedule) {
@@ -160,7 +160,7 @@ var App = function () {
                                             throw new Error('Function not implemented.');
                                         } }), (0, jsx_runtime_1.jsx)("br", {}), " ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(IbanInput_1.default, { onIbanChange: function (iban) {
                                             throw new Error('Function not implemented.');
-                                        } })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function () { return setOpenAccountValidation(!openAccountValidation); } }, { children: "Validation de compte" })) })), openAccountValidation && (0, jsx_runtime_1.jsx)(AccountValidation_1.default, { smsValidation: true, resetPassword: false, movaAppType: Enums_1.MovaAppType.GARAGE, onSubmit: function (success, message) {
+                                        } })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function () { return setOpenAccountValidation(!openAccountValidation); } }, { children: "Validation de compte" })) })), openAccountValidation && (0, jsx_runtime_1.jsx)(AccountValidation_1.default, { smsValidation: false, resetPassword: false, movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (success, message) {
                             throw new Error('Function not implemented.');
                         }, onResendSecurityCode: function (success, message) {
                             throw new Error('Function not implemented.');

package/dist/src/AccountValidation.js

@@ -36,7 +36,12 @@ var initialFormState = {
     confirmation: { value: '', isValid: true },
     securityCode: { value: '', isValid: true },
     phoneNumber: { value: '', isValid: true },
+    acceptsTerms: { value: false, isValid: true },
 };
+// ATTENTION : s'assurer de la présence des documents suivants à la racine du composant porteur (dossier 'public')
+var CGUPath = "/Movalib_CGU.pdf";
+var proCGUPath = "/Movalib_Pro_CGU.pdf";
+var proCGVPath = "/Movalib_Pro_CGV.pdf";
 var AccountValidation = function (_a) {
     var _b, _c, _d, _e;
     var movaAppType = _a.movaAppType, smsValidation = _a.smsValidation, resetPassword = _a.resetPassword, onSubmit = _a.onSubmit, onResendSecurityCode = _a.onResendSecurityCode;
@@ -50,17 +55,19 @@ var AccountValidation = function (_a) {
     var _k = (0, react_1.useState)(false), openPhoneNumberInput = _k[0], setOpenPhoneNumberInput = _k[1];
     var isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     (0, react_1.useEffect)(function () {
-        var params = new URLSearchParams(location.search);
-        var token = params.get('token');
-        // Si cette variable est transmise, cela signifie que le compte a été créé sans mot de passe
-        var localEmptyPwd = Boolean(params.get('emptyPwd'));
-        setEmptyPwd(localEmptyPwd);
-        if (token && !resetPassword) {
-            if (!localEmptyPwd) {
-                var req = {
-                    token: token
-                };
-                activateUserAccount(req);
+        var params = location !== undefined ? new URLSearchParams(location.search) : undefined;
+        if (params !== undefined) {
+            var token = params.get('token');
+            // Si cette variable est transmise, cela signifie que le compte a été créé sans mot de passe
+            var localEmptyPwd = Boolean(params.get('emptyPwd'));
+            setEmptyPwd(localEmptyPwd);
+            if (token && !resetPassword) {
+                if (!localEmptyPwd) {
+                    var req = {
+                        token: token
+                    };
+                    activateUserAccount(req);
+                }
             }
         }
     }, [location]);
@@ -125,6 +132,13 @@ var AccountValidation = function (_a) {
             setValidationForm(__assign(__assign({}, validationForm), newField));
         }
     };
+    var handleCheckboxChange = function (e, checked) {
+        var _a;
+        var fieldName = e.target.name;
+        var fieldValue = checked;
+        var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
+        setValidationForm(__assign(__assign({}, validationForm), newField));
+    };
     var validateForm = function () {
         var newForm = __assign({}, validationForm);
         // Validator pour les champs obligatoires
@@ -139,8 +153,11 @@ var AccountValidation = function (_a) {
         // Validator pour le code de sécurité
         if (smsValidation)
             newForm.securityCode = (0, Tools_1.validateField)(validationForm.securityCode, function (value) { return value.length === 6; }, "Le code doit contenir 6 chiffres");
+        // Validator pour les CGU
+        newForm.acceptsTerms = (0, Tools_1.validateField)(validationForm.acceptsTerms, function (value) { return Boolean(value); }, movaAppType == Enums_1.MovaAppType.GARAGE ? 'Vous devez accepter les termes de nos CGU et de nos CGV' : 'Vous devez accepter les termes de nos CGU');
         setValidationForm(newForm);
-        return newForm.password.isValid && newForm.confirmation.isValid && (smsValidation ? newForm.securityCode.isValid : true);
+        return newForm.password.isValid && newForm.confirmation.isValid && (smsValidation ? newForm.securityCode.isValid : true) &&
+            newForm.acceptsTerms.isValid;
     };
     var handleValidateAccount = function () {
         if (validateForm()) {
@@ -214,8 +231,8 @@ var AccountValidation = function (_a) {
             });
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(emptyPwd || smsValidation || resetPassword) &&
-                (0, jsx_runtime_1.jsx)(MovaDialog_1.default, __assign({ leafImageColor: 'pink', titleStyle: getTitleStyle(), fullScreen: isMobile, open: emptyPwd || smsValidation || resetPassword, closable: false, onClose: function () {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(emptyPwd || smsValidation || resetPassword || true) &&
+                (0, jsx_runtime_1.jsx)(MovaDialog_1.default, __assign({ leafImageColor: 'pink', titleStyle: getTitleStyle(), fullScreen: isMobile, open: emptyPwd || smsValidation || resetPassword || true, closable: false, onClose: function () {
                         throw new Error('Function not implemented.');
                     }, actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ type: "submit", onClick: handleValidateAccount, fullWidth: true, variant: "contained", sx: { mt: 4, mb: 0 } }, { children: resetPassword ? (0, jsx_runtime_1.jsx)("span", { children: "R\u00E9initialiser mon mot de passe" }) : (0, jsx_runtime_1.jsx)("span", { children: "Activer mon compte" }) })) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
                                         display: 'flex',
@@ -232,7 +249,8 @@ var AccountValidation = function (_a) {
                                         endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: function (e) { return setShowPassword(function (prev) { return !prev; }); } }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
                                     } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "confirmation", label: "Confirmation mot de passe", type: showPassword ? 'text' : 'password', id: "confirmation", onChange: function (e) { return handleInputChange(e); }, value: validationForm.confirmation.value, error: !validationForm.confirmation.isValid, helperText: Boolean(validationForm.confirmation.error) ? validationForm.confirmation.error : "", InputProps: {
                                         endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: function (e) { return setShowPassword(function (prev) { return !prev; }); } }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
-                                    } }) }))] })) })), loading &&
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12, sx: { mt: 2, display: 'flex', justifyContent: 'start' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ error: !validationForm.acceptsTerms.isValid }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: "acceptsTerms", color: "primary", checked: validationForm.acceptsTerms.value, onChange: function (e, checked) { return handleCheckboxChange(e, checked); }, sx: { pr: 4 } }), label: (0, jsx_runtime_1.jsxs)("span", { children: ["J'accepte ", movaAppType === Enums_1.MovaAppType.GARAGE ? "sans réserve" : '', " les", ' ', (0, jsx_runtime_1.jsx)("a", __assign({ href: movaAppType === Enums_1.MovaAppType.GARAGE ? proCGUPath : CGUPath, target: "_blank", style: { color: theme.palette.primary.main } }, { children: "Conditions G\u00E9n\u00E9rales d'Utilisation" })), movaAppType === Enums_1.MovaAppType.GARAGE &&
+                                                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)("br", {}), "et les ", ' ', (0, jsx_runtime_1.jsx)("a", __assign({ href: proCGVPath, target: "_blank", style: { color: theme.palette.primary.main } }, { children: "Conditions G\u00E9n\u00E9rales de Vente" }))] })] }) }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: validationForm.acceptsTerms.error })] })) }))] })) })), loading &&
                 (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) })), openPhoneNumberInput && (0, jsx_runtime_1.jsx)(ConfirmationDialog_1.default, { open: openPhoneNumberInput, confirmLabel: "Envoyer", closeLabel: "Annuler", onClose: function () { return setOpenPhoneNumberInput(false); }, onConfirm: resendCode, message: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Indique nous ton num\u00E9ro de t\u00E9l\u00E9phone" }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", fullWidth: true, required: true, id: "phoneNumber", label: "N\u00B0 de t\u00E9l\u00E9phone", name: "phoneNumber", autoComplete: "tel", onChange: function (e) { return handleInputChange(e); }, value: validationForm.phoneNumber.value, error: Boolean(validationForm.phoneNumber.error), helperText: validationForm.phoneNumber.error }) }))] }) })] }));
 };
 exports.default = AccountValidation;

package/dist/src/MovaDialog.d.ts

@@ -1,4 +1,4 @@
-import { SxProps, Theme } from '@mui/material';
+import { SxProps, Theme, Breakpoint } from '@mui/material';
 import type { CSSProperties, FC } from 'react';
 import React from 'react';
 interface MovaDialogProps {
@@ -14,6 +14,7 @@ interface MovaDialogProps {
     title?: string;
     titleStyle?: CSSProperties;
     sx?: SxProps<Theme>;
+    maxWidth?: Breakpoint | false;
 }
 declare const MovaDialog: FC<MovaDialogProps>;
 export default MovaDialog;

package/dist/src/MovaDialog.js

@@ -22,7 +22,7 @@ var leaf_green_large_png_1 = __importDefault(require("./assets/images/leaf_green
 var leaf_yellow_large_png_1 = __importDefault(require("./assets/images/leaf_yellow_large.png"));
 var leaf_pink_large_png_1 = __importDefault(require("./assets/images/leaf_pink_large.png"));
 var MovaDialog = function (_a) {
-    var fullScreen = _a.fullScreen, open = _a.open, onClose = _a.onClose, _b = _a.closable, closable = _b === void 0 ? true : _b, children = _a.children, title = _a.title, titleStyle = _a.titleStyle, message = _a.message, leafImageColor = _a.leafImageColor, transition = _a.transition, actions = _a.actions, sx = _a.sx;
+    var fullScreen = _a.fullScreen, open = _a.open, onClose = _a.onClose, _b = _a.closable, closable = _b === void 0 ? true : _b, children = _a.children, title = _a.title, titleStyle = _a.titleStyle, message = _a.message, leafImageColor = _a.leafImageColor, transition = _a.transition, actions = _a.actions, sx = _a.sx, maxWidth = _a.maxWidth;
     var getTransition = function () {
         switch (transition) {
             case "fade":
@@ -51,7 +51,7 @@ var MovaDialog = function (_a) {
             onClose();
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, __assign({ fullScreen: fullScreen, fullWidth: true, TransitionComponent: getTransition(), open: open, "aria-labelledby": "garage-dialog-title", "aria-describedby": "garage-dialog-description", onClose: handleOnClose, sx: __assign(__assign({}, sx), { textAlign: 'center' }) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getLeafImage(), style: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, __assign({ fullScreen: fullScreen, fullWidth: true, TransitionComponent: getTransition(), open: open, "aria-labelledby": "garage-dialog-title", "aria-describedby": "garage-dialog-description", onClose: handleOnClose, maxWidth: maxWidth, sx: __assign(__assign({}, sx), { textAlign: 'center' }) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getLeafImage(), style: {
                     position: 'absolute',
                     float: 'left',
                     width: '150px',

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

@@ -3,6 +3,7 @@ import { MovaFormField, MovaInterval } from "./Types";
 import { CSSProperties } from "react";
 import { DayOfWeek, PartsApplicationType } from "./Enums";
 import Schedule from "../models/Schedule";
+export declare const flexStart: CSSProperties;
 export declare const isSafariOniOS: () => boolean;
 export declare const FR_WEEK_DAYS: string[];
 export declare const getDayOfWeekLabel: (day: DayOfWeek) => string | undefined;

package/dist/src/helpers/Tools.js

@@ -1,7 +1,12 @@
 "use strict";
 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 = 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.getDayOfWeekIndex = exports.getDayOfWeekLabel = exports.FR_WEEK_DAYS = exports.isSafariOniOS = exports.flexStart = void 0;
 var Enums_1 = require("./Enums");
+exports.flexStart = {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center'
+};
 var isSafariOniOS = function () {
     var userAgent = window.navigator.userAgent;
     var iOS = !!userAgent.match(/iPad/i) || !!userAgent.match(/iPhone/i) || !!userAgent.match(/iPod/i);

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

@@ -3,6 +3,7 @@ export type MovaValidationForm = {
     confirmation: MovaFormField;
     securityCode: MovaFormField;
     phoneNumber: MovaFormField;
+    acceptsTerms: MovaFormField;
 };
 export type AddressFieldName = 'streetName' | 'additional' | 'postalCode' | 'cityName';
 export type MovaVehicleForm = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.1.89",
+  "version": "1.1.92",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/AccountValidation.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties, FunctionComponent, useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import UserService from './services/UserService';
-import { Box, CircularProgress, Grid, IconButton, Link, TextField, Typography, darken, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Checkbox, CircularProgress, FormControl, FormControlLabel, FormHelperText, Grid, IconButton, Link, SelectChangeEvent, TextField, Typography, colors, darken, useMediaQuery, useTheme } from '@mui/material';
 import Logger from './helpers/Logger';
 import InputAdornment from '@mui/material/InputAdornment';
 import Visibility from '@mui/icons-material/Visibility';
@@ -9,7 +9,7 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { LoadingButton } from '@mui/lab';
 import { MovaAppType } from './helpers/Enums';
 import { MovaFormField, MovaValidationForm } from './helpers/Types';
-import { validateField } from './helpers/Tools';
+import { flexStart, validateField } from './helpers/Tools';
 import MovaDialog from './MovaDialog';
 import LogoLarge from './assets/images/logo/logo_large.png';
 import LogoProLarge from './assets/images/logo/logo_pro_large.png';
@@ -21,6 +21,7 @@ const initialFormState = {
     confirmation: { value: '', isValid: true },
     securityCode: { value: '', isValid: true },
     phoneNumber: { value: '', isValid: true },
+    acceptsTerms:  { value: false, isValid: true },
 }
 
 interface AccountValidationProps {
@@ -31,6 +32,11 @@ interface AccountValidationProps {
     onResendSecurityCode?: (success:boolean, message:string) => void,
 }
 
+// ATTENTION : s'assurer de la présence des documents suivants à la racine du composant porteur (dossier 'public')
+const CGUPath:string = "/Movalib_CGU.pdf";
+const proCGUPath:string = "/Movalib_Pro_CGU.pdf";
+const proCGVPath:string = "/Movalib_Pro_CGV.pdf";
+
 const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppType, smsValidation, resetPassword, onSubmit, onResendSecurityCode }) => {
 
     const [loading, setLoading] = useState(true);
@@ -45,22 +51,25 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
 
      useEffect(() => {
         
-        const params = new URLSearchParams(location.search);
-        const token = params.get('token');
-
-        // Si cette variable est transmise, cela signifie que le compte a été créé sans mot de passe
-        let localEmptyPwd = Boolean(params.get('emptyPwd'));
-        setEmptyPwd(localEmptyPwd);
+        const params = location !== undefined ? new URLSearchParams(location.search) : undefined;
 
-        if (token && !resetPassword) {
+        if(params !== undefined){
+            const token = params.get('token');
 
-            if(!localEmptyPwd){
-
-                let req = {
-                    token: token
+            // Si cette variable est transmise, cela signifie que le compte a été créé sans mot de passe
+            let localEmptyPwd = Boolean(params.get('emptyPwd'));
+            setEmptyPwd(localEmptyPwd);
+    
+            if (token && !resetPassword) {
+    
+                if(!localEmptyPwd){
+    
+                    let req = {
+                        token: token
+                    }
+    
+                    activateUserAccount(req);
                 }
-
-                activateUserAccount(req);
             }
         }
 
@@ -135,6 +144,15 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
         }
     }
 
+    const handleCheckboxChange = (e: SelectChangeEvent<string>, checked: boolean): void => {
+
+        const fieldName: string = e.target.name;
+        const fieldValue: boolean = checked;
+        const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+
+        setValidationForm({ ...validationForm, ...newField});
+    }  
+
     const validateForm = () => {
         let newForm: MovaValidationForm = { ...validationForm };
 
@@ -157,9 +175,14 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
         if(smsValidation)
             newForm.securityCode = validateField(validationForm.securityCode, value => value.length === 6, "Le code doit contenir 6 chiffres");
 
+        // Validator pour les CGU
+        newForm.acceptsTerms = validateField(validationForm.acceptsTerms, value => Boolean(value), 
+            movaAppType == MovaAppType.GARAGE ? 'Vous devez accepter les termes de nos CGU et de nos CGV' : 'Vous devez accepter les termes de nos CGU');
+
         setValidationForm(newForm);
 
-        return newForm.password.isValid && newForm.confirmation.isValid && (smsValidation ? newForm.securityCode.isValid : true);
+        return newForm.password.isValid && newForm.confirmation.isValid && (smsValidation ? newForm.securityCode.isValid : true) &&
+            newForm.acceptsTerms.isValid;
     }
 
 
@@ -252,12 +275,12 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
 
     return (
         <div>
-            {(emptyPwd || smsValidation || resetPassword) &&
+            {(emptyPwd || smsValidation || resetPassword || true) &&
                 <MovaDialog 
                     leafImageColor='pink'
                     titleStyle={getTitleStyle()}
                     fullScreen={isMobile} 
-                    open={emptyPwd || smsValidation || resetPassword} 
+                    open={emptyPwd || smsValidation || resetPassword || true} 
                     closable={false}
                     onClose={function (): void {
                         throw new Error('Function not implemented.');
@@ -380,6 +403,39 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
                                 }}   
                             />
                         </Grid>
+                        <Grid item xs={12} sx={{mt: 2, display:'flex', justifyContent:'start'}} >
+                            <FormControl error={!validationForm.acceptsTerms.isValid} >
+                                <FormControlLabel
+                                    control={
+                                    <Checkbox
+                                        name="acceptsTerms"
+                                        color="primary"
+                                        checked={validationForm.acceptsTerms.value}
+                                        onChange={(e, checked) => handleCheckboxChange(e, checked)}
+                                        sx={{pr: 4}}
+                                    />
+                                    }
+                                    label={
+                                    <span>
+                                        J'accepte {movaAppType === MovaAppType.GARAGE ? "sans réserve" : ''} les{' '}
+                                        <a href={movaAppType === MovaAppType.GARAGE ? proCGUPath : CGUPath} target="_blank"
+                                            style={{ color:theme.palette.primary.main}}>
+                                        Conditions Générales d'Utilisation
+                                        </a>
+                                        {movaAppType === MovaAppType.GARAGE &&
+                                        <>
+                                            &nbsp;<br />et les {' '}
+                                            <a href={proCGVPath} target="_blank" style={{ color:theme.palette.primary.main}}>
+                                            Conditions Générales de Vente
+                                            </a>
+                                        </>
+                                        }
+                                    </span>
+                                    }
+                                />
+                                <FormHelperText>{validationForm.acceptsTerms.error}</FormHelperText>
+                            </FormControl>
+                        </Grid>
                     </Grid>
                 </MovaDialog>}
 

package/src/MovaDialog.tsx

@@ -1,4 +1,4 @@
-import { Alert, AppBar, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Toolbar, Typography, SxProps, Theme } from '@mui/material';
+import { Alert, AppBar, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Toolbar, Typography, SxProps, Theme, Breakpoint } from '@mui/material';
 import type { CSSProperties, FC } from 'react';
 import BackIcon from '@mui/icons-material/ArrowBackIosNewRounded';
 import React from 'react';
@@ -20,10 +20,11 @@ interface MovaDialogProps {
     title?: string,
     titleStyle?: CSSProperties;
     sx?: SxProps<Theme>;
+    maxWidth? : Breakpoint | false;
 }
 
 const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable = true, children, title, titleStyle, 
-    message, leafImageColor, transition, actions, sx}) => {
+    message, leafImageColor, transition, actions, sx, maxWidth}) => {
 
     const getTransition = () => {
         switch(transition){
@@ -74,6 +75,7 @@ const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable =
             aria-labelledby="garage-dialog-title"
             aria-describedby="garage-dialog-description"
             onClose={handleOnClose}
+            maxWidth={maxWidth}
             sx={{ ...sx, textAlign:'center'}}
         >
             <img src={getLeafImage()} style={{

package/src/helpers/Tools.ts

@@ -5,6 +5,12 @@ import { CSSProperties } from "react";
 import { DayOfWeek, PartsApplicationType, VehiclePlateFormat } from "./Enums";
 import Schedule from "../models/Schedule";
 
+export const flexStart:CSSProperties = {
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center'
+}
+
 export const isSafariOniOS = ():boolean => {
   const userAgent = window.navigator.userAgent;
   const iOS = !!userAgent.match(/iPad/i) || !!userAgent.match(/iPhone/i) || !!userAgent.match(/iPod/i);

package/src/helpers/Types.ts

@@ -2,7 +2,8 @@ export type MovaValidationForm = {
     password: MovaFormField,
     confirmation: MovaFormField,
     securityCode: MovaFormField,
-    phoneNumber: MovaFormField
+    phoneNumber: MovaFormField,
+    acceptsTerms:  MovaFormField,
 }
 
 export type AddressFieldName = 'streetName' | 'additional' | 'postalCode' | 'cityName';