Sprint 4 - Livraison

incubateur-ademe · Jul 24, 2023 · 9dbec7e · 9dbec7e
1 parent f330b4b
commit 9dbec7e
Show file tree

Hide file tree

Showing 48 changed files with 5,079 additions and 1,793 deletions.
diff --git a/.gitignore b/.gitignore
@@ -43,3 +43,6 @@ yarn-error.log*
 cypress/screenshots/
 cypress/videos/
 cypress/results/
+
+# Local Netlify folder
+.netlify
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,74 @@
 # CHANGELOG
 
 
+## 1.14.2 (24/07/2023)
+
+* U11 - ancre partie conseils ADEME
+
+## 1.14.1 (24/07/2023)
+
+* BSR - source negaoctet, outbound link refactorisé
+
+## 1.14.0 (21/07/2023)
+
+* U12 - livraison, screenshot
+
+## 1.13.1 (21/07/2023)
+
+* U8 - hypotheses de calcul
+
+## 1.13.0 (20/07/2023)
+
+* U11 - livraison, telechargement partie conseil
+
+## 1.12.1 (20/07/2023)
+
+* U10 - conseil ademe, corrections
+
+## 1.12.0 (18/07/2023)
+
+* U10 - conseil ademe
+
+## 1.11.5 (18/07/2023)
+
+* BSR: agribalyse 3.1
+
+## 1.11.4 (17/07/2023)
+
+* BSR: injection de l'URL de base et de son préfixe (https)
+
+## 1.11.3 (17/07/2023)
+
+* U7 - telechargement, corrections
+
+## 1.11.2 (17/07/2023)
+
+* U5 - partage, corrections
+
+## 1.11.1 (13/07/2023)
+
+* BSR - zones (accessibilité)
+
+## 1.11.0 (13/07/2023)
+
+* U7 - telechargement
+
+## 1.10.3 (13/07/2023)
+
+* BSR - correction FE Agribalyse
+
+## 1.10.2 (12/07/2023)
+
+* BSR - connexion Agribalyse
+
+## 1.10.1 (11/07/2023)
+
+* BSR - essai de trappe pour modale accessible
+
+## 1.10.0 (11/07/2023)
+
+* U5 - partage
+
 ## 1.9.2 (10/07/2023)
 
 * BSR - nettoyage fréquences

diff --git a/README.md b/README.md
@@ -39,6 +39,32 @@ L’organisation du développement suit le workflow [Gitflow](https://www.atlass
 - `style`
 - `test`
 
+## Variable d'environnement
+
+Pour l'instant il n'y a que des variables d'environnement "publiques",
+
+Il vous faut un fichier `.env.local` à la racine
+
+```bash
+NEXT_PUBLIC_SITE_URL=localhost:3000
+```
+
+`NEXT_PUBLIC_SITE_URL` est le nom de domaine du site, sans le protocole (mais avec le port éventuellement).
+
+A vous de renseigner la/les valeurs sur l'ensemble des sites déployés.
+
+
+## Connexion à Agribalyse
+
+Parfois les données sont extraites par API.
+
+Parfois les données sont codées en dur.
+
+Il y a un cas de figure entre les deux : un fichier batch se connecte à une API et modifie un fichier .json (qui sera considéré comme "en dur" par l'appli une fois lancée). C'est le cas d'Agribalyse.
+
+Pour mettre à jour ce fichier, lancer `yarn buildfruit`
+
+
 ## Architecture 🏛️
 
 Le projet utilise React avec (entre autre) [Nextjs](https://nextjs.org/), [React Query](https://tanstack.com/query/v4) et [Styled Components](https://styled-components.com/). Le state est simplement géré par [Context](https://react.dev/learn/passing-data-deeply-with-context).

diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "scripts": {
+    "buildfruit": "node src/scripts/build_fruits_et_legumes.js",
     "test": "playwright test",
     "test:ui": "playwright test --ui",
     "dev": "next dev",
@@ -22,6 +23,7 @@
     "axios": "^1.3.2",
     "chrome-aws-lambda": "^10.1.0",
     "copy-to-clipboard": "^3.3.3",
+    "focus-trap-react": "^10.2.1",
     "fuse.js": "^6.6.2",
     "html-to-image": "^1.11.11",
     "iframe-resizer-react": "^1.1.0",

diff --git a/pages/iframes/livraison/simulation.js b/pages/iframes/livraison/simulation.js
@@ -11,8 +11,10 @@ export default function Default() {
       <Section2>
         <Section2.InnerMargin>
           <RulesProviderLivraison>
-            <IntroLivraison />
-            <CalculateurLivraison />
+            <main>
+              <IntroLivraison />
+              <CalculateurLivraison />
+            </main>
           </RulesProviderLivraison>
         </Section2.InnerMargin>
       </Section2>

diff --git a/pages/impactlivraison.js b/pages/impactlivraison.js
@@ -1,19 +1,25 @@
 import Section2 from "components/base/Section2";
+import AdviceLivraison from "components/livraison/AdviceLivraison";
 import CalculateurLivraison from "components/livraison/CalculateurLivraison";
+import ConclusionLivraison from "components/livraison/ConclusionLivraison";
 import IntroLivraison from "components/livraison/IntroLivraison";
 import { RulesProviderLivraison } from "components/livraison/RulesProviderLivraison";
 import categories from "data/categories.json";
 
 export default function Impactlivraison() {
   return (
-    <Section2>
-      <Section2.InnerMargin>
-        <RulesProviderLivraison>
-          <IntroLivraison />
-          <CalculateurLivraison />
-        </RulesProviderLivraison>
-      </Section2.InnerMargin>
-    </Section2>
+    <main>
+      <IntroLivraison />
+      <RulesProviderLivraison>
+        <CalculateurLivraison />
+      </RulesProviderLivraison>
+      <Section2>
+        <Section2.InnerMargin>
+          <AdviceLivraison />
+        </Section2.InnerMargin>
+      </Section2>
+      <ConclusionLivraison />
+    </main>
   );
 }
 export async function getStaticProps() {

diff --git a/public/metalivraison.png b/public/metalivraison.png
diff --git a/src/components/base/Modal2.js b/src/components/base/Modal2.js
@@ -1,30 +1,35 @@
+import FocusTrap from "focus-trap-react";
 import React from "react";
 import styled from "styled-components";
 
 export default function Modal2(props) {
   return (
-    <Wrapper open={props.open}>
-      <Background open={props.open} onClick={() => props.setOpen(false)} />
-      <Content
-        open={props.open}
-        width={props.width}
-        textColor={props.textColor}
-        backgroundColor={props.backgroundColor}
-        noAnimation={props.noAnimation}
-      >
-        <Header>
-          {props.getTitle ? props.getTitle() : "Titre"}
-          <ButtonClose onClick={() => props.setOpen(false)}>
-            Fermer
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-              <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
-            </svg>
-          </ButtonClose>
-        </Header>
+    props.open && (
+      <FocusTrap focusTrapOptions={{ initialFocus: "#button-close" }}>
+        <Wrapper open={props.open}>
+          <Background open={props.open} onClick={() => props.setOpen(false)} />
+          <Content
+            open={props.open}
+            width={props.width}
+            textColor={props.textColor}
+            backgroundColor={props.backgroundColor}
+            noAnimation={props.noAnimation}
+          >
+            <Header>
+              {props.getTitle ? props.getTitle() : "Titre"}
+              <ButtonClose onClick={() => props.setOpen(false)} id="button-close">
+                Fermer
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
+                </svg>
+              </ButtonClose>
+            </Header>
 
-        <Scroll className={props.className}>{props.children}</Scroll>
-      </Content>
-    </Wrapper>
+            <Scroll className={props.className}>{props.children}</Scroll>
+          </Content>
+        </Wrapper>
+      </FocusTrap>
+    )
   );
 }
 
@@ -76,13 +81,21 @@ const Content = styled.div`
   width: ${(props) => props.width || "40em"};
 `;
 
-const ButtonClose = styled.div`
+const ButtonClose = styled.button`
   align-items: center;
+  background: inherit;
+  border: none;
+  color: ${(props) => props.theme.colors.text};
   cursor: pointer;
   display: flex;
   > svg {
     margin-left: 0.5rem;
   }
+  &:focus {
+    border-radius: 2pt;
+    outline: solid;
+    outline-color: revert;
+  }
 `;
 
 const Scroll = styled.div`

diff --git a/src/components/base/Modal3.js b/src/components/base/Modal3.js
@@ -1,41 +1,47 @@
+import FocusTrap from "focus-trap-react";
 import React from "react";
 import styled from "styled-components";
 
 export default function Modal3(props) {
   return (
-    <Wrapper open={props.open}>
-      <Background
-        open={props.open}
-        onClick={() => {
-          props.dismiss();
-          props.setOpen(false);
-        }}
-      />
-      <Content
-        open={props.open}
-        width={props.width}
-        textColor={props.textColor}
-        backgroundColor={props.backgroundColor}
-        noAnimation={props.noAnimation}
-      >
-        <Header>
-          {props.getTitle ? props.getTitle() : "Titre"}
-          <ButtonClose
+    props.open && (
+      <FocusTrap focusTrapOptions={{ initialFocus: "#button-close" }}>
+        <Wrapper open={props.open}>
+          <Background
+            open={props.open}
             onClick={() => {
               props.dismiss();
               props.setOpen(false);
             }}
+          />
+          <Content
+            open={props.open}
+            width={props.width}
+            textColor={props.textColor}
+            backgroundColor={props.backgroundColor}
+            noAnimation={props.noAnimation}
           >
-            Fermer
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-              <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
-            </svg>
-          </ButtonClose>
-        </Header>
+            <Header>
+              {props.getTitle ? props.getTitle() : "Titre"}
+              <ButtonClose
+                id="button-close"
+                onClick={() => {
+                  props.dismiss();
+                  props.setOpen(false);
+                }}
+              >
+                Fermer
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
+                </svg>
+              </ButtonClose>
+            </Header>
 
-        <Scroll className={props.className}>{props.children}</Scroll>
-      </Content>
-    </Wrapper>
+            <Scroll className={props.className}>{props.children}</Scroll>
+          </Content>
+        </Wrapper>
+      </FocusTrap>
+    )
   );
 }
 
@@ -84,13 +90,21 @@ const Content = styled.div`
   width: ${(props) => props.width || "40em"};
 `;
 
-const ButtonClose = styled.div`
+const ButtonClose = styled.button`
   align-items: center;
+  background: inherit;
+  border: none;
+  color: ${(props) => props.theme.colors.text};
   cursor: pointer;
   display: flex;
   > svg {
     margin-left: 0.5rem;
   }
+  &:focus {
+    border-radius: 2pt;
+    outline: solid;
+    outline-color: revert;
+  }
 `;
 
 const Scroll = styled.div`