feat: add info messages

betagouv · Aug 12, 2024 · ea37bf5 · ea37bf5
1 parent 86784a4
commit ea37bf5
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 13 deletions.
diff --git a/packages/frontend/src/features/menu/ClauseMenu.tsx b/packages/frontend/src/features/menu/ClauseMenu.tsx
@@ -37,7 +37,18 @@ export const ClauseMenu = ({ isNational, ...props }: { isNational: boolean } & M
   if (isNational)
     return (
       <>
-        <ClauseTitle isNational={isNational} buttons={null} {...props} />
+        <ClauseTitle
+          isNational={isNational}
+          buttons={null}
+          alert={
+            <ClauseFormBanner
+              status="idle"
+              icon={fr.cx("fr-icon-alert-fill")}
+              text={`Ces clauses sont communes à toutes les UDAP et ne peuvent pas être modifiées.`}
+            />
+          }
+          {...props}
+        />
         <ClauseList clauses={(clausesQuery.results as any) ?? []} isEditing={false} />
       </>
     );
@@ -76,7 +87,10 @@ const ClauseForm = ({
   ...props
 }: { clauses: Clause_v2[]; isNational: boolean } & ModalContentProps) => {
   const [mode, setMode] = useState<Mode>("view");
-  const [bannerProps, setBannerProps] = useState<{ status: BannerStatus; text: string; icon: string } | null>(null);
+  const [bannerProps, setBannerProps] = useState<{ status: BannerStatus; text: string; icon: string } | null>({
+    ...initialBannerProps,
+    text: "Ces clauses sont spécifiques à votre UDAP et modifiables.",
+  });
 
   const isEditing = mode === "edit";
   const isAdding = mode === "add";
@@ -223,12 +237,12 @@ const ClauseForm = ({
 
 type BannerStatus = "idle" | "success";
 
-const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string; status: BannerStatus }) => {
+export const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string; status: BannerStatus }) => {
   const bgColor = status === "idle" ? "#E8EDFF" : "#B8FEC9";
   const iconColor = status === "idle" ? "#0063CB" : "#18753C";
 
   return (
-    <Flex ml="-32px" mr="-32px" py="16px" px="32px" bgColor={bgColor}>
+    <Flex ml="-32px" mr="-32px" mb="24px" py="16px" px="32px" bgColor={bgColor}>
       <i className={cx(icon, css({ color: iconColor }))} />
       <styled.div
         dangerouslySetInnerHTML={{ __html: transformBold(text) }}
@@ -240,7 +254,7 @@ const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string;
   );
 };
 
-function transformBold(str: string) {
+export function transformBold(str: string) {
   return str.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
 }
 

diff --git a/packages/frontend/src/features/menu/HelpMenu.tsx b/packages/frontend/src/features/menu/HelpMenu.tsx
@@ -16,7 +16,7 @@ export const HelpMenu = ({ backButtonOnClick }: { backButtonOnClick: () => void
       <Divider height="2px" my={{ base: "27px", lg: "44px" }} color="#C1C1FB" />
       <Stack>
         <styled.div mb="10px">
-          Si vous n'arrivez pas à vous connecter, essayez de réinitialiser les données locales :
+          Vous ne voyez pas vos dernières informations enregistrées ? Essayez de réinitialiser les données locales :
         </styled.div>
         <Button onClick={() => deleteLocalData()}>Réinitialiser</Button>
       </Stack>

diff --git a/packages/frontend/src/features/menu/Share.tsx b/packages/frontend/src/features/menu/Share.tsx
@@ -7,6 +7,8 @@ import { ToggleSwitch } from "@codegouvfr/react-dsfr/ToggleSwitch";
 import { useMutation } from "@tanstack/react-query";
 import { css } from "#styled-system/css";
 import { MenuTitle } from "./MenuTitle";
+import { ClauseFormBanner } from "./ClauseMenu";
+import { fr } from "@codegouvfr/react-dsfr";
 
 export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => void }) => {
   const user = useUser()!;
@@ -41,7 +43,18 @@ export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => vo
 
   return (
     <>
-      <MenuTitle backButtonOnClick={backButtonOnClick}>Partage des CR</MenuTitle>
+      <MenuTitle
+        backButtonOnClick={backButtonOnClick}
+        alert={
+          <ClauseFormBanner
+            status="idle"
+            icon={fr.cx("fr-icon-alert-fill")}
+            text={`Tous les agents de l'UDAP peuvent voir et télécharger les compte-rendus envoyés. Seuls ceux à qui vous avez donné le droit peuvent créer, modifier, et supprimer vos compte-rendus. Le compte-rendu est attribué à un agent via le champ "rédigé par" du formulaire.`}
+          />
+        }
+      >
+        Partage des CR
+      </MenuTitle>
       <Divider hideFrom="lg" height="2px" my={{ base: "20px", lg: "44px" }} color="#C1C1FB" />
 
       <Stack w="100%">

diff --git a/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx b/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx
@@ -32,7 +32,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("bold"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         iconId="fr-icon-bold"
         type="button"
@@ -45,7 +45,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("italic"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         type="button"
         iconId="fr-icon-italic"
@@ -58,7 +58,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("underline"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         iconId="ri-underline"
         type="button"
@@ -91,7 +91,7 @@ const ColorInput = () => {
       <Popover.Trigger>
         <Button
           className={toolbarButtonRecipe({})}
-          size="small"
+          size="medium"
           priority="tertiary no outline"
           iconId="ri-palette-line"
           type="button"

diff --git a/packages/frontend/src/routes/pdf.$reportId.tsx b/packages/frontend/src/routes/pdf.$reportId.tsx
@@ -2,7 +2,7 @@ import "@ungap/with-resolvers";
 import { Banner } from "#components/Banner.js";
 import { EnsureUser } from "#components/EnsureUser.js";
 import { Spinner } from "#components/Spinner";
-import { css } from "#styled-system/css";
+import { css, cx } from "#styled-system/css";
 import { Center, Flex, Stack, styled } from "#styled-system/jsx";
 import Button from "@codegouvfr/react-dsfr/Button";
 import Input from "@codegouvfr/react-dsfr/Input";
@@ -27,6 +27,9 @@ import { TextEditorContext, TextEditorContextProvider } from "../features/text-e
 import { TextEditorToolbar } from "../features/text-editor/TextEditorToolbar";
 import { getDiff } from "../components/SyncForm";
 import { v4 } from "uuid";
+import Alert from "@codegouvfr/react-dsfr/Alert";
+import { fr } from "@codegouvfr/react-dsfr";
+import { transformBold } from "../features/menu/ClauseMenu";
 
 type Mode = "edit" | "view" | "send" | "sent";
 
@@ -124,7 +127,7 @@ export const PDF = () => {
         <Button
           type="button"
           iconId="ri-save-line"
-          size="small"
+          size="medium"
           onClick={() =>
             saveSnapshotMutation.mutate({
               report: JSON.stringify(report),
@@ -187,6 +190,19 @@ export const PDF = () => {
 
   return (
     <styled.div w="100%" h="100%" bgColor={mode === "edit" ? "background-open-blue-france" : "unset"}>
+      <Flex justifyContent="center" mb="24px" py="16px" px="32px" bgColor={"#E8EDFF"}>
+        <i className={cx(fr.cx("fr-icon-alert-fill"), css({ color: "#0063CB" }))} />
+        <styled.div
+          dangerouslySetInnerHTML={{
+            __html:
+              transformBold(`**Si vous modifiez un champ dans le formulaire, votre mise en page sera ré-initialisée.** <br/>
+Les modifications du compte-rendu se font uniquement sur l'appareil utilisé. Utilisez le même appareil pour continuer les modifications et l'envoi.`),
+          }}
+          ml="16px"
+          pr="24px"
+          color={"#0063CB"}
+        ></styled.div>
+      </Flex>
       <TextEditorContextProvider>
         {report ? (
           <SendForm generatePdf={generatePdfMutation.mutate} report={report}>