release 23/12/2024

common/utils/apiQueries.js

@@ -432,6 +432,11 @@ export const CONTROLLER_READ_CONTROL_DATA = gql`
         ...ObservedInfractions
       }
       reportedInfractionsLastUpdateTime
+      businessTypeDuringControl {
+        id
+        transportType
+        businessType
+      }
     }
   }
 `;

web/common/EmploymentInfoCard.js

@@ -28,12 +28,11 @@ import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import ThirdPartyEmploymentAccess from "./ThirdPartyEmploymentAccess";
-import ContentCopyOutlined from "@mui/icons-material/ContentCopyOutlined";
-import Box from "@mui/material/Box";
 import { HideEmail } from "../home/HideEmail";
 import { getNextHeadingComponent } from "common/utils/html";
 import { formatActivity } from "common/utils/businessTypes";
 import Notice from "./Notice";
+import { Button } from "@codegouvfr/react-dsfr/Button";
 
 const useStyles = makeStyles(theme => ({
   companyName: {
@@ -48,18 +47,6 @@ const useStyles = makeStyles(theme => ({
   },
   employmentDetails: {
     display: "block"
-  },
-  copyAdminEmails: {
-    display: "flex",
-    alignItems: "center",
-    flexWrap: "wrap",
-    color: theme.palette.primary.main,
-    fontSize: "0.85em",
-    cursor: "pointer",
-    marginTop: theme.spacing(1)
-  },
-  copyAdminEmailsIcon: {
-    marginRight: theme.spacing(1)
   }
 }));
 
@@ -93,7 +80,13 @@ export function EmploymentInfoCard({
 
   const emailsCurrentAdminsDisplay = useMemo(
     () => (
-      <ul style={{ listStyleType: "none", paddingInlineStart: "0px" }}>
+      <ul
+        style={{
+          listStyleType: "none",
+          paddingInlineStart: "0px",
+          margin: "0px"
+        }}
+      >
         {employment?.company.currentAdmins?.map(admin => (
           <li key={admin.email} style={{ overflowWrap: "anywhere" }}>
             {admin.email}
@@ -234,6 +227,18 @@ export function EmploymentInfoCard({
               uppercaseTitle={false}
             />
           </Grid>
+          {!hideBusiness && !!employment.business && (
+            <Grid item xs={12}>
+              <InfoItem
+                name="Type d'activité"
+                value={formatActivity(employment.business)}
+                titleProps={{
+                  component: getNextHeadingComponent(headingComponent)
+                }}
+                uppercaseTitle={false}
+              />
+            </Grid>
+          )}
           {!!emailsCurrentAdminsDisplay && (
             <Grid item>
               <InfoItem
@@ -242,8 +247,10 @@ export function EmploymentInfoCard({
                 titleProps={{
                   component: getNextHeadingComponent(headingComponent)
                 }}
+                uppercaseTitle={false}
               />
-              <Box
+              <Button
+                priority="tertiary"
                 onClick={() => {
                   navigator.clipboard
                     .writeText(emailsCurrentAdmins)
@@ -255,14 +262,9 @@ export function EmploymentInfoCard({
                       );
                     });
                 }}
-                className={classes.copyAdminEmails}
               >
-                <ContentCopyOutlined
-                  className={classes.copyAdminEmailsIcon}
-                  fontSize="small"
-                />
                 copier les emails
-              </Box>
+              </Button>
             </Grid>
           )}
           {!hideRole && (
@@ -281,18 +283,6 @@ export function EmploymentInfoCard({
               />
             </Grid>
           )}
-          {!hideBusiness && !!employment.business && (
-            <Grid item xs={12}>
-              <InfoItem
-                name="Type d'activité"
-                value={formatActivity(employment.business)}
-                titleProps={{
-                  component: getNextHeadingComponent(headingComponent)
-                }}
-                uppercaseTitle={false}
-              />
-            </Grid>
-          )}
           {!hideActions && (
             <Grid item xs={12}>
               <ThirdPartyEmploymentAccess

web/common/Notice.js

@@ -12,6 +12,7 @@ const Notice = ({
   linkUrl,
   linkText,
   style,
+  isNoMarginRight = false,
   isFullWidth = true,
   classes = {},
   sx = {},
@@ -40,6 +41,9 @@ const Notice = ({
                 fr.cx("fr-notice__title", { "fr-text--sm": size === "small" }),
                 classes.title
               )}
+              style={{
+                ...(isNoMarginRight && { marginRight: 0 })
+              }}
             >
               {title}{" "}
               <span className={fr.cx("fr-text--regular")}>{description}</span>

web/common/hooks/useScroll.js

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
-function useScroll() {
+export const useScroll = () => {
   const { hash, pathname, search } = useLocation();
 
   useEffect(() => {
@@ -15,11 +15,23 @@ function useScroll() {
     if (pathname === "/resources/regulations" && search !== "") {
       return;
     }
-    const mainElements = document.getElementsByTagName("main");
-    if (mainElements && mainElements[0]) {
-      mainElements[0].scrollIntoView({ behavior: "smooth", block: "start" });
-    }
+    scrollToMain();
   }, [hash, pathname, search]);
-}
+};
+
+export const scrollToMain = () => {
+  const mainElements = document.getElementsByTagName("main");
+  if (mainElements && mainElements[0]) {
+    _scrollTo(mainElements[0]);
+  }
+};
+
+export const scrollToId = id => {
+  const idElement = document.getElementById(id);
+  if (idElement) {
+    _scrollTo(idElement);
+  }
+};
 
-export default useScroll;
+const _scrollTo = element =>
+  element.scrollIntoView({ behavior: "smooth", block: "start" });

web/common/typography/Description.js

@@ -3,13 +3,20 @@ import React from "react";
 import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import { fr } from "@codegouvfr/react-dsfr";
 
-export const Description = ({ children, className, style, ...otherProps }) => {
+export const Description = ({
+  children,
+  className,
+  style,
+  noMargin = false,
+  ...otherProps
+}) => {
   return (
     <Typography
       className={cx(fr.cx("fr-text--sm"), className)}
       style={{
         ...style,
-        color: fr.colors.decisions.text.mention.grey.default
+        color: fr.colors.decisions.text.mention.grey.default,
+        ...(noMargin && { margin: 0 })
       }}
       {...otherProps}
     >

web/control/components/Alerts/AlertGroup.js

@@ -36,15 +36,16 @@ const useStyles = makeStyles(theme => {
     alertNumber: {
       display: "inline-flex",
       whiteSpace: "pre",
-      borderRadius: theme.spacing(1.5),
+      borderRadius: "100px",
       color: "white",
       paddingLeft: theme.spacing(1),
       paddingRight: theme.spacing(1),
       height: theme.spacing(3),
       minWidth: theme.spacing(3),
       alignItems: "center",
       justifyContent: "center",
-      fontWeight: "bold"
+      fontWeight: "bold",
+      fontSize: "0.75rem"
     },
     reportedAlert: {
       borderColor: theme.palette.primary.main,
@@ -93,7 +94,7 @@ export function AlertGroup({
   type,
   sanction,
   setPeriodOnFocus,
-  setTab,
+  onChangeTab,
   readOnlyAlerts,
   displayBusinessType = false,
   titleProps = {}
@@ -148,10 +149,15 @@ export function AlertGroup({
           wrap="nowrap"
         >
           <Grid item>
-            <Typography className="bold" color="primary" {...titleProps}>
+            <Typography
+              className="bold"
+              color="primary"
+              {...titleProps}
+              fontSize="0.875rem"
+            >
               {sanction}
             </Typography>
-            <Typography className="bold">{infringementLabel}</Typography>
+            <Typography fontWeight="500">{infringementLabel}</Typography>
           </Grid>
           {alertsNumber !== 0 && (
             <Grid item>
@@ -185,7 +191,7 @@ export function AlertGroup({
                   {displayBusinessType && (
                     <BusinessTypeTitle business={alertBusiness} />
                   )}
-                  <Description>{alertDescription}</Description>
+                  <Description noMargin>{alertDescription}</Description>
                   <List>
                     {alertsByBusiness.map((alert, index) => (
                       <ListItem key={index} disableGutters>
@@ -195,7 +201,7 @@ export function AlertGroup({
                           sanction={sanction}
                           isReportable={isSanctionReportable}
                           setPeriodOnFocus={setPeriodOnFocus}
-                          setTab={setTab}
+                          onChangeTab={onChangeTab}
                           readOnlyAlerts={readOnlyAlerts}
                         />
                       </ListItem>

web/control/components/Alerts/InfractionDay.js

@@ -48,7 +48,6 @@ const gregorian_fr = {
 
 const useStyles = makeStyles(theme => ({
   calendar: {
-    margin: "auto",
     border: "1px solid",
     borderColor: fr.colors.decisions.background.disabled.grey.default,
     borderRadius: "0px",
@@ -136,7 +135,7 @@ export const InfractionDay = ({ alerts, sanction }) => {
       {initialTimestamps?.length > 0 && (
         <ul
           className="fr-tag-group"
-          style={{ listStyleType: "none", paddingInlineStart: "none" }}
+          style={{ listStyleType: "none", paddingInlineStart: "0" }}
         >
           {initialTimestamps
             .map(ts => (ts / 1000) >> 0)

web/control/components/RegulatoryAlert.js

@@ -163,7 +163,7 @@ export function RegulatoryAlert({
   sanction,
   isReportable,
   setPeriodOnFocus,
-  setTab,
+  onChangeTab,
   readOnlyAlerts
 }) {
   const { isReportingInfractions, onUpdateInfraction } = useInfractions();
@@ -188,11 +188,11 @@ export function RegulatoryAlert({
         />
       )}
       <div>
-        {setTab ? (
+        {onChangeTab ? (
           <Link
             onClick={e => {
               e.preventDefault();
-              setTab("history");
+              onChangeTab("history");
               if (setPeriodOnFocus) {
                 setPeriodOnFocus(
                   alert.day || alert.week || alert.month