Merge pull request #622 from MTES-MCT/master

Release 09/01/2025

common/utils/apiQueries.js

@@ -188,13 +188,15 @@ export const COMPANY_SIGNUP_MUTATION = gql`
     $usualName: String!
     $phoneNumber: String
     $businessType: String
+    $nbWorkers: Int
   ) {
     signUp {
       company(
         siren: $siren
         usualName: $usualName
         phoneNumber: $phoneNumber
         businessType: $businessType
+        nbWorkers: $nbWorkers
       ) {
         employment {
           id

web/common/AlertEmailDelay.js

@@ -7,7 +7,7 @@ const AlertEmailDelay = () => {
     <Notice
       sx={{ marginY: 2 }}
       style={{ paddingBottom: 0 }}
-      type="warning"
+      type="info"
       description={
         <>
           Il est possible que&nbsp;:

web/common/ButtonGoHome.js

@@ -10,6 +10,7 @@ const ButtonGoHome = () => {
       onClick={() => {
         history.push("/home");
       }}
+      style={{ margin: "auto" }}
     >
       Aller dans mon espace
     </Button>

web/common/WayHeardOfMobilic.js

@@ -1,12 +1,7 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import RadioGroup from "@mui/material/RadioGroup";
-import Grid from "@mui/material/Grid";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Radio from "@mui/material/Radio";
-import TextField from "@mui/material/TextField";
 import React from "react";
-import { makeStyles } from "@mui/styles";
+import { RadioButtons } from "@codegouvfr/react-dsfr/RadioButtons";
+import { Input } from "@codegouvfr/react-dsfr/Input";
+import { MandatorySuffix } from "./forms/MandatorySuffix";
 
 export const WAY_HEARD_OF_MOBILIC_CHOICES = [
   {
@@ -41,81 +36,90 @@ export const WAY_HEARD_OF_MOBILIC_CHOICES = [
 
 export const HEARD_OF_MOBILIC_OTHER_VALUE = "OTHER";
 
-const useStyles = makeStyles(theme => ({
-  wayKnowingMobilicSection: {
-    textAlign: "left",
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-    color: theme.palette.grey[700]
-  },
-  wayKnowingMobilicTitle: {
-    marginBottom: theme.spacing(1)
-  }
-}));
+export function WayHeardOfMobilic({
+  setWayHeardOfMobilic,
+  touched = false,
+  required
+}) {
+  const [selectValue, setSelectValue] = React.useState("");
+  const [otherValue, setOtherValue] = React.useState("");
 
-export const WayHeardOfMobilic = ({ setWayHeardOfMobilicValue }) => {
-  const classes = useStyles();
-  const [wayHeardOfMobilicSelect, setWayHeardOfMobilicSelect] = React.useState(
-    ""
+  const selectError = React.useMemo(() => touched && !selectValue, [
+    selectValue,
+    touched
+  ]);
+
+  const otherError = React.useMemo(
+    () =>
+      touched && selectValue === HEARD_OF_MOBILIC_OTHER_VALUE && !otherValue,
+    [touched, selectValue, otherValue]
   );
 
-  const handleChangeWayHeardOfMobilic = event => {
-    setWayHeardOfMobilicSelect(event.target.value);
-    setWayHeardOfMobilicValue(event.target.value);
+  React.useEffect(() => {
+    setWayHeardOfMobilic(
+      selectValue === HEARD_OF_MOBILIC_OTHER_VALUE ? otherValue : selectValue
+    );
+  }, [selectValue, otherValue]);
+
+  React.useEffect(() => {
+    if (selectValue !== HEARD_OF_MOBILIC_OTHER_VALUE) {
+      setOtherValue("");
+    }
+  }, [selectValue]);
+
+  const handleRadioChange = event => {
+    const newValue = event.target.value;
+    setSelectValue(newValue);
+  };
+
+  const handleOtherInputChange = event => {
+    const value = event.target.value.trimStart();
+    setOtherValue(value);
   };
 
   return (
-    <Box className={classes.wayKnowingMobilicSection}>
-      <Typography className={classes.wayKnowingMobilicTitle}>
-        Comment avez-vous connu Mobilic ?
-      </Typography>
-      <RadioGroup
-        aria-label="how-did-you-know-mobilic"
-        name="controlled-radio-buttons-group"
-        value={wayHeardOfMobilicSelect}
-        onChange={handleChangeWayHeardOfMobilic}
-      >
-        <Grid container rowSpacing={2}>
-          {WAY_HEARD_OF_MOBILIC_CHOICES.map(choice => (
-            <Grid item xs={12} sm={6} key={choice.value}>
-              <FormControlLabel
-                value={choice.value}
-                control={<Radio size={"small"} />}
-                label={choice.label}
-              />
-            </Grid>
-          ))}
-          <Grid item xs={12} sm={6}>
-            <FormControlLabel
-              key={HEARD_OF_MOBILIC_OTHER_VALUE}
-              control={
-                <Radio
-                  size={"small"}
-                  value={HEARD_OF_MOBILIC_OTHER_VALUE}
-                  color="primary"
-                  label="Autre"
-                />
-              }
-              label={
-                wayHeardOfMobilicSelect === HEARD_OF_MOBILIC_OTHER_VALUE ? (
-                  <TextField
-                    label="Précisez"
-                    variant="standard"
-                    inputProps={{
-                      maxLength: 250
-                    }}
-                    onChange={e => {
-                      setWayHeardOfMobilicValue(e.target.value.trimStart());
-                    }}
-                  />
-                ) : (
-                  "Autre"
-                )
-              }
-            />
-          </Grid>
-        </Grid>
-      </RadioGroup>
-    </Box>
+    <>
+      <RadioButtons
+        legend={
+          <>
+            Comment avez-vous connu Mobilic ? <MandatorySuffix />
+          </>
+        }
+        options={[
+          ...WAY_HEARD_OF_MOBILIC_CHOICES.map(choice => ({
+            value: choice.value,
+            label: choice.label,
+            nativeInputProps: { value: choice.value }
+          })),
+          {
+            value: HEARD_OF_MOBILIC_OTHER_VALUE,
+            label: "Autre",
+            nativeInputProps: { value: HEARD_OF_MOBILIC_OTHER_VALUE }
+          }
+        ]}
+        value={selectValue}
+        required={required}
+        state={selectError ? "error" : "default"}
+        stateRelatedMessage={
+          selectError ? "Veuillez compléter ce champ" : undefined
+        }
+        onChange={handleRadioChange}
+      />
+      {selectValue === HEARD_OF_MOBILIC_OTHER_VALUE && (
+        <Input
+          label="Précisez"
+          nativeInputProps={{
+            value: otherValue,
+            onChange: handleOtherInputChange,
+            maxLength: 250
+          }}
+          state={otherError ? "error" : "default"}
+          stateRelatedMessage={
+            otherError ? "Veuillez compléter ce champ" : undefined
+          }
+          required={required}
+        />
+      )}
+    </>
   );
-};
+}

web/common/forms/NumericInput.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { Input } from "./Input";
+
+export const NumericInput = ({
+  initialValue,
+  onChangeValue,
+  label,
+  required = false,
+  min = 0,
+  max
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+  const [touched, setTouched] = React.useState(false);
+  const state = React.useMemo(
+    () => (touched && (value < min || value > max) ? "error" : "default"),
+    [touched, min, max, value]
+  );
+  React.useEffect(() => {
+    onChangeValue(value);
+  }, [value]);
+  const errorMessage = React.useMemo(() => {
+    if (!touched) {
+      return "";
+    }
+    if (!max || isNaN(parseInt(max))) {
+      return `Veuillez entrer une valeur supérieure à ${min}`;
+    }
+    return `Veuillez entrer une valeur comprise entre ${min} et ${max}`;
+  }, [touched, min, max, value]);
+
+  const handleChange = event => {
+    const inputValue = event.target.value;
+    if (!inputValue) {
+      setValue(inputValue);
+    }
+
+    const parsedValue = parseInt(inputValue);
+
+    if (!isNaN(parsedValue)) {
+      setValue(parsedValue);
+    } else {
+      event.target.value = value;
+    }
+  };
+
+  return (
+    <Input
+      label={label}
+      required={required}
+      nativeInputProps={{
+        value: value,
+        onInput: handleChange,
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        type: "number",
+        onBlur: () => setTouched(true)
+      }}
+      type="number"
+      state={state}
+      stateRelatedMessage={errorMessage}
+    />
+  );
+};

web/common/routes.js

@@ -40,6 +40,7 @@ import { FranceConnectCallback } from "../signup/FranceConnectCallback";
 import { Invite } from "../signup/invite";
 import Signup from "../signup/root";
 import { SignupSelection } from "../signup/SignupSelection";
+import { SecurityAccreditation } from "../landing/accreditation";
 
 function UserReadRedirect() {
   const { token } = useParams();
@@ -204,6 +205,13 @@ export const ROUTES = [
     component: <Accessibility />,
     menuItemFilter: () => false
   },
+  {
+    path: "/security-accreditation",
+    label: "Sécurité",
+    accessible: () => true,
+    component: <SecurityAccreditation />,
+    menuItemFilter: () => false
+  },
   {
     path: "/legal-notices",
     label: "Mentions légales",

web/control/components/Alerts/InfractionDay.js

@@ -14,6 +14,9 @@ import { useControl } from "../../../controller/utils/contextControl";
 import { capitalizeFirstLetter } from "common/utils/string";
 import classNames from "classnames";
 
+const controlHistoryDepth =
+  parseInt(process.env.REACT_APP_USER_CONTROL_HISTORY_DEPTH) || 28;
+
 const gregorian_fr = {
   name: "gregorian_fr",
   months: [
@@ -74,7 +77,7 @@ export const InfractionDay = ({ alerts, sanction }) => {
   ]);
 
   const maxDate = new Date(unixToJSTimestamp(controlData.creationTime));
-  const minDate = addDaysToDate(new Date(maxDate), -28);
+  const minDate = addDaysToDate(new Date(maxDate), -controlHistoryDepth);
 
   const onSelectedDatesChange = values => {
     const selectedTimestamps = values

web/controller/components/details/ControllerControlHistory.js

@@ -5,12 +5,15 @@ import { formatDateTime, formatDay } from "common/utils/time";
 import { Description } from "../../../common/typography/Description";
 import { Stack } from "@mui/material";
 
+const controlHistoryDepth =
+  process.env.REACT_APP_USER_CONTROL_HISTORY_DEPTH || 28;
+
 export function ControllerControlHistory({ controlTime, tokenInfo }) {
   return (
     <Stack rowGap={1}>
       <>
         <Typography variant="h6" component="h2" sx={{ lineHeight: "0.5rem" }}>
-          Historique récent (28 jours)
+          Historique récent ({controlHistoryDepth} jours)
         </Typography>
         <Description noMargin>
           Du{" "}