Feat/business type in alerts

common/utils/apiFragments.js

@@ -170,6 +170,11 @@ export const OBSERVED_INFRACTIONS_FRAGMENT = gql`
     type
     unit
     extra
+    business {
+      id
+      transportType
+      businessType
+    }
   }
 `;
 

common/utils/regulation/groupAlertsByDay.js

@@ -14,20 +14,28 @@ export const getAlertsGroupedByDay = observedInfractions => {
   return Object.entries(infractionsGroupedByLabel).map(
     ([label, infractions]) => {
       const firstInfraction = infractions[0];
-      const { sanction, type, description, unit } = firstInfraction;
+      const { sanction, type, unit } = firstInfraction;
       return {
         alerts: infractions.map(
-          ({ date, isReportable, isReported, extra }) => ({
+          ({
+            date,
+            isReportable,
+            isReported,
+            extra,
+            business,
+            description
+          }) => ({
             ...(unit === PERIOD_UNITS.DAY && { day: date }),
             ...(unit === PERIOD_UNITS.WEEK && { week: date }),
             checked: isReported,
             reportable: isReportable,
-            extra
+            extra,
+            business,
+            description
           })
         ),
         infringementLabel: label,
         type,
-        description,
         sanction
       };
     }

web/admin/components/ExpendituresCard.js

@@ -5,20 +5,11 @@ import {
   regroupExpendituresSpendingDateByType
 } from "common/utils/expenditures";
 import Chip from "@mui/material/Chip";
-import Typography from "@mui/material/Typography";
 import { MissionInfoCard } from "./MissionInfoCard";
 import React from "react";
 import Grid from "@mui/material/Grid";
-import { makeStyles } from "@mui/styles";
 import { useModals } from "common/utils/modals";
-import { fr } from "@codegouvfr/react-dsfr";
-
-export const useStyles = makeStyles(theme => ({
-  noExpenditureLabel: {
-    color: fr.colors.decisions.text.mention.grey.default,
-    fontStyle: "italic"
-  }
-}));
+import { Description } from "../../common/typography/Description";
 
 export function ExpendituresCard({
   title,
@@ -30,7 +21,6 @@ export function ExpendituresCard({
   loading,
   titleProps = {}
 }) {
-  const classes = useStyles();
   const modals = useModals();
 
   const expenditureCount = Array.isArray(expenditures)
@@ -80,9 +70,9 @@ export function ExpendituresCard({
           })}
         </Grid>
       ) : (
-        <Typography className={classes.noExpenditureLabel}>
+        <Description>
           Aucun frais n'a été enregistré pour cette journée
-        </Typography>
+        </Description>
       )}
     </MissionInfoCard>
   );

web/admin/components/MissionDetails/MissionDetailsObservations.js

@@ -7,6 +7,7 @@ import { Event } from "../../../common/Event";
 import { useMissionDetailsStyles } from "./MissionDetailsStyle";
 import { useModals } from "common/utils/modals";
 import { Button } from "@codegouvfr/react-dsfr/Button";
+import { Description } from "../../../common/typography/Description";
 
 export function MissionDetailsObservations({
   mission,
@@ -63,9 +64,7 @@ export function MissionDetailsObservations({
           ))}
         </List>
       ) : (
-        <Typography className={classes.noCommentText}>
-          Aucune observation sur cette mission
-        </Typography>
+        <Description>Aucune observation sur cette mission</Description>
       )}
     </Box>
   );

web/admin/components/MissionDetails/MissionDetailsStyle.js

@@ -1,5 +1,4 @@
 import { makeStyles } from "@mui/styles";
-import { fr } from "@codegouvfr/react-dsfr";
 
 export const useMissionDetailsStyles = makeStyles(theme => ({
   missionSubTitle: {
@@ -28,10 +27,6 @@ export const useMissionDetailsStyles = makeStyles(theme => ({
   employeeCard: {
     width: "100%"
   },
-  noCommentText: {
-    fontStyle: "italic",
-    color: fr.colors.decisions.text.mention.grey.default
-  },
   validationButton: {
     marginTop: theme.spacing(4)
   },

web/admin/components/MissionVehicleInfo.js

@@ -2,17 +2,10 @@ import React from "react";
 import { getVehicleName } from "common/utils/vehicles";
 import { VehicleField } from "../../common/VehicleField";
 import { EditableMissionInfo } from "./EditableMissionInfo";
-import { makeStyles } from "@mui/styles";
-
-export const useStyles = makeStyles(theme => ({
-  placeholder: {
-    fontStyle: "italic",
-    color: theme.palette.grey[500]
-  }
-}));
+import { useTypographyStyles } from "../../common/typography/TypographyStyles";
 
 export function MissionVehicleInfo({ vehicle, editVehicle, vehicles }) {
-  const classes = useStyles();
+  const typographyClasses = useTypographyStyles();
 
   return (
     <EditableMissionInfo
@@ -22,7 +15,9 @@ export function MissionVehicleInfo({ vehicle, editVehicle, vehicles }) {
         v ? (
           getVehicleName(v, true)
         ) : (
-          <span className={classes.placeholder}>Aucun véhicule utilisé</span>
+          <span className={typographyClasses.disabled}>
+            Aucun véhicule utilisé
+          </span>
         )
       }
       renderEditMode={(newVehicle, setNewVehicle) => (

web/admin/components/styles/ValidationsStyle.js

@@ -7,11 +7,6 @@ export const useStyles = makeStyles(theme => ({
     display: "flex",
     alignItems: "center"
   },
-  explanation: {
-    marginBottom: theme.spacing(2),
-    fontStyle: "italic",
-    textAlign: "justify"
-  },
   container: {
     padding: theme.spacing(2),
     flexShrink: 1,

web/admin/panels/Company.js

@@ -47,11 +47,6 @@ export const usePanelStyles = makeStyles(theme => ({
     marginTop: theme.spacing(1),
     flexShrink: 0
   },
-  explanation: {
-    marginBottom: theme.spacing(2),
-    fontStyle: "italic",
-    textAlign: "justify"
-  },
   title: {
     marginBottom: theme.spacing(2),
     display: "flex",

web/admin/panels/Employees.js

@@ -33,17 +33,14 @@ import { BusinessDropdown } from "../components/BusinessDropdown";
 import Stack from "@mui/material/Stack";
 import Notice from "../../common/Notice";
 import { Button } from "@codegouvfr/react-dsfr/Button";
+import { Explanation } from "../../common/typography/Explanation";
 
 const useStyles = makeStyles(theme => ({
   title: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
   },
-  explanation: {
-    fontStyle: "italic",
-    textAlign: "justify"
-  },
   successText: {
     color: theme.palette.success.main
   },
@@ -800,12 +797,12 @@ export function Employees({ company, containerRef }) {
           </Button>
         )}
       </Box>
-      <Typography className={classes.explanation}>
+      <Explanation>
         Invitez vos salariés en renseignant leurs adresses e-mail (certaines
         adresses n’apparaissent pas dans la liste ci-dessous car les salariés
         ont choisi de ne pas vous les communiquer), afin qu'ils puissent
         enregistrer du temps de travail pour l'entreprise.
-      </Typography>
+      </Explanation>
 
       {areThereEmploymentsWithoutBusinessType && (
         <Notice