Release Sprint 5 v2

* A22 - FE boissons selon Agribalyse 3.1.1

* A21 - FE fruits et légumes Agribalyse 3.1.1

* B5 - modal wording

* A25 - disclaimer NégaOctet

* BSR - arrondi CO2eq à 2 chiffres après la virgule

* A22 - boissons, corrections

* [BSR] màj source de données boissons & fruits & légumes

CHANGELOG.md

@@ -2,6 +2,34 @@
 # CHANGELOG
 
 
+## 1.18.8 (10/08/2023)
+
+* A22b - affichage des sources
+
+## 1.18.7 (10/08/2023)
+
+* A22 - boissons, corrections
+
+## 1.18.6 (10/08/2023)
+
+* BSR - arrondi CO2eq à 2 chiffres après la virgule
+
+## 1.18.5 (10/08/2023)
+
+* A25 - disclaimer Négaoctet
+
+## 1.18.4 (10/08/2023)
+
+* B5 - modal wording
+
+## 1.18.3 (10/08/2023)
+
+* A21 - FE fruits et légumes Agribalyse 3.1.1
+
+## 1.18.2 (10/08/2023)
+
+* A22 - FE boissons Agribalyse 3.1.1
+
 ## 1.18.1 (08/08/2023)
 
 * U28b - rollback, fonctionnalité pas encore mûre

README.md

@@ -76,7 +76,10 @@ 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`
+Pour mettre à jour ce fichier,
+
+ - lancer `yarn build:fruit` pour les fruits et légumes,
+ - lancer `yarn build:boisson` pour les boissons.
 
 
 ## Architecture 🏛️

package.json

@@ -3,7 +3,8 @@
   "version": "0.2.0",
   "private": true,
   "scripts": {
-    "buildfruit": "node src/scripts/build_fruits_et_legumes.js",
+    "build:fruit": "node src/scripts/build_fruits_et_legumes.js",
+    "build:boisson": "node src/scripts/build_boissons.js",
     "test": "playwright test",
     "test:ui": "playwright test --ui",
     "dev": "next dev",

src/components/fruitsetlegumes/Saisons.js

@@ -3,6 +3,7 @@ import List from "./saisons/List";
 import Search from "./saisons/Search";
 import Wrapper from "./saisons/Wrapper";
 import Section from "components/base/Section";
+import SourceAgribalyse from "components/misc/SourceAgribalyse.js";
 import Bottom from "components/misc/category/Bottom";
 import Description from "components/misc/category/Description";
 import Instruction from "components/misc/category/Instruction";
@@ -20,7 +21,8 @@ const StyledTop = styled(Top)`
     margin: 0;
   }
 `;
-export default function Distance(props) {
+
+export default function Saisons(props) {
   const { equivalents, categories } = useContext(DataContext);
 
   const [sorting, setSorting] = useState("alph_desc");
@@ -103,6 +105,7 @@ export default function Distance(props) {
   return (
     <Section>
       <Section.Content>
+        <SourceAgribalyse />
         <Wrapper month={props.month} slug={props.category.slug}>
           <Description description={props.category.description} />
           <StyledTop>

src/components/misc/Category.js

@@ -8,6 +8,7 @@ import Wrapper from "./category/Wrapper";
 import Checkbox from "components/base/Checkbox";
 import Section from "components/base/Section";
 import BarChart from "components/charts/BarChart";
+import SourceAgribalyse from "components/misc/SourceAgribalyse.js";
 import DataContext from "components/providers/DataProvider";
 import React, { useContext, useMemo, useState } from "react";
 import { formatName, formatTotal, formatUsage } from "utils/formatters";
@@ -43,6 +44,7 @@ export default function CategoryList(props) {
   return (
     <Section>
       <Section.Content>
+        {props?.category?.slug === "boisson" ? <SourceAgribalyse /> : <></>}
         <Wrapper name={props.category.title || props.category.name} slug={props.category.slug}>
           <Description description={props.category.description} />
           <Top className="noscreenshot">

src/components/misc/SourceAgribalyse.js

@@ -0,0 +1,29 @@
+import OutboundLink from "components/base/OutboundLink.js";
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 2rem;
+  text-align: right;
+  ${(props) => props.theme.mq.medium} {
+    margin-bottom: 1rem;
+  }
+  ${(props) => props.theme.mq.small} {
+    margin-bottom: 0;
+  }
+`;
+
+export default function SourceAgribalyse() {
+  return (
+    <Wrapper>
+      <span> Source : </span>
+      <OutboundLink title="Agribalyse 3.1.1" href="https://agribalyse.ademe.fr/app" data-testid="lien-agribalyse">
+        Agribalyse 3.1.1{" "}
+      </OutboundLink>
+      <span> - </span>
+      <span>Mise à jour le 10/10/2023 </span>
+    </Wrapper>
+  );
+}

src/components/modals/Co2eModal.js

@@ -1,34 +1,28 @@
-import React, { useContext } from 'react'
-import styled from 'styled-components'
+import Modal from "components/base/Modal";
+import ModalContext from "components/providers/ModalProvider";
+import React, { useContext } from "react";
+import styled from "styled-components";
 
-import ModalContext from 'components/providers/ModalProvider'
-
-import Modal from 'components/base/Modal'
-
-const Title = styled.h2``
-const Text = styled.p``
+const Title = styled.h2``;
+const Text = styled.p``;
 export default function Co2eModal() {
-  const { Co2e: open, setCo2e: setOpen } = useContext(ModalContext)
+  const { Co2e: open, setCo2e: setOpen } = useContext(ModalContext);
   return (
     <Modal open={open} setOpen={setOpen}>
       <Title>
         L&apos;équivalent CO<sub>2</sub> (CO<sub>2</sub>e)
       </Title>
       <Text>
-        Le dérèglement climatique actuel est une conséquence de nos émissions
-        importantes de différents gaz à effet de serre. Nous pouvons mesurer ces
-        émissions avec un indice simple : les kilogrammes d&apos;équivalent CO
+        Le dérèglement climatique actuel est une conséquence de nos émissions importantes de différents gaz à effet de
+        serre. Nous pouvons mesurer ces émissions avec un indice simple : les kilogrammes d&apos;équivalent CO
         <sub>2</sub> (kgCO<sub>2</sub>e).
       </Text>
       <Text>
-        Chaque gaz à effet est de serre est ramené à un équivalent en CO
-        <sub>2</sub> selon son pouvoir de réchauffement. Par exemple, 1 kg de
-        méthane équivaut à 28 kg de CO<sub>2</sub> car il est 28 fois plus
-        réchauffant. Si la fabrication d&apos;un produit a émis 1 kg de méthane
-        et 1 kg de CO
-        <sub>2</sub>, alors l&apos;impact total de ce produit est de 29 kg
-        d&apos;équivalent CO<sub>2</sub>.
+        Chaque gaz à effet de serre est ramené à un équivalent en CO
+        <sub>2</sub> selon son pouvoir de réchauffement. Par exemple, 1 kg de méthane équivaut à 28 kg de CO<sub>2</sub>{" "}
+        car il est 28 fois plus réchauffant. Si la fabrication d&apos;un produit a émis 1 kg de méthane et 1 kg de CO
+        <sub>2</sub>, alors l&apos;impact total de ce produit est de 29 kg d&apos;équivalent CO<sub>2</sub>.
       </Text>
     </Modal>
-  )
+  );
 }

src/components/modals/Co2eModal2.js

@@ -26,7 +26,7 @@ export default function Co2eModal2() {
       </Text>
       <Text>
         <strong>
-          Chaque gaz à effet est de serre est ramené à un équivalent en CO
+          Chaque gaz à effet de serre est ramené à un équivalent en CO
           <sub>2</sub> selon son pouvoir de réchauffement.
         </strong>
       </Text>

src/components/modals/WarningNegaoctet.js

@@ -0,0 +1,45 @@
+import Modal2 from "components/base/Modal2";
+import OutboundLink from "components/base/OutboundLink";
+import ModalContext from "components/providers/ModalProvider";
+import React, { useContext } from "react";
+import styled from "styled-components";
+
+export default function WarningNegaoctet() {
+  const { warningNegaoctet: open, setWarningNegaoctet: setOpen } = useContext(ModalContext);
+
+  const getTitle = () => {
+    return <Title>Source des données</Title>;
+  };
+
+  return (
+    <Modal2 open={open} setOpen={setOpen} getTitle={getTitle}>
+      <p>
+        Les données et les calculs sont issues de&nbsp;
+        <OutboundLink
+          href="https://base-empreinte.ademe.fr/documentation/base-impact"
+          title="Base impact, étude réalisée par Negaoctet"
+        >
+          l'étude NégaOctet 2022
+        </OutboundLink>
+        .
+      </p>
+      <p>
+        ⚠️ Attention : aujourd’hui pour calculer l’impact carbone de Stocker un Go de données, nous ne prenons pas en
+        compte dans nos calculs l’impact carbone de la transmission ni celui du stockage effectué par l'appareil,
+        puisque nous estimions que ce dernier étant partagé par beaucoup de personnes, était amorti.
+      </p>
+      <p>
+        Ces calculs, expliquent la différence d’impact carbone que l’on a entre le site&nbsp;
+        <OutboundLink href="https://impactco2.fr" title="site Internet impactCO2">
+          impactco2.fr
+        </OutboundLink>{" "}
+        et les données NO.{" "}
+      </p>
+      <p>Nous travaillons à affiner ce calcul et le mettre à jour.</p>
+    </Modal2>
+  );
+}
+
+const Title = styled.h1`
+  margin: 0;
+`;

src/components/providers/ModalProvider.js

@@ -9,6 +9,7 @@ import ReduireModal3 from "components/modals/ReduireModal3";
 import ShareModal from "components/modals/ShareModal";
 import SocialModal3 from "components/modals/SocialModal3";
 import TilesModal from "components/modals/TilesModal";
+import WarningNegaoctet from "components/modals/WarningNegaoctet";
 import React, { useState } from "react";
 
 const ModalContext = React.createContext({});
@@ -25,6 +26,7 @@ export function ModalProvider(props) {
   const [devices, setDevices] = useState(false);
   const [hypothesis, setHypothesis] = useState(false);
   const [hypothesisLivraison, setHypothesisLivraison] = useState(false);
+  const [warningNegaoctet, setWarningNegaoctet] = useState(false);
 
   return (
     <ModalContext.Provider
@@ -82,6 +84,11 @@ export function ModalProvider(props) {
           window?.please?.track(["trackEvent", "Interaction", "Modal", "Hypothèses usages numériques"]);
           setHypothesis(value);
         },
+        warningNegaoctet,
+        setWarningNegaoctet: (value) => {
+          window?.please?.track(["trackEvent", "Interaction", "Modal", "Avertissement négaoctet"]);
+          setWarningNegaoctet(value);
+        },
         hypothesisLivraison,
         setHypothesisLivraison: (value) => {
           if (value === true) {
@@ -103,6 +110,7 @@ export function ModalProvider(props) {
       <DevicesModal />
       <DetailsUsagesNumModal />
       <DetailLivraisonModal2 />
+      <WarningNegaoctet />
     </ModalContext.Provider>
   );
 }

src/components/screenshot/Background.js

@@ -25,7 +25,7 @@ const Content = styled.div`
   position: relative;
 
   ${(props) => props.theme.mq.medium} {
-    padding: 1.5rem 0.75rem;
+    padding: 2rem 0.75rem;
   }
 `;
 export default function Background(props) {

src/components/views/equivalent/Details.js

@@ -1,17 +1,13 @@
-import React, { useContext } from 'react'
-import styled from 'styled-components'
+import Value from "./details/Value";
+import ButtonLink from "components/base/ButtonLink";
+import MagicLink from "components/base/MagicLink";
+import Section from "components/base/Section";
+import ModalContext from "components/providers/ModalProvider";
+import React, { useContext } from "react";
+import styled from "styled-components";
+import { formatName } from "utils/formatters";
 
-import { formatName } from 'utils/formatters'
-
-import ModalContext from 'components/providers/ModalProvider'
-
-import ButtonLink from 'components/base/ButtonLink'
-import MagicLink from 'components/base/MagicLink'
-import Section from 'components/base/Section'
-
-import Value from './details/Value'
-
-const Title = styled.h1``
+const Title = styled.h1``;
 const Subtitle = styled.span`
   font-size: 1.75rem;
   font-weight: 300;
@@ -22,61 +18,67 @@ const Subtitle = styled.span`
     font-size: 1.125rem;
     line-height: inherit;
   }
-`
+`;
 const Br = styled.br`
   display: none;
   ${(props) => props.theme.mq.small} {
     display: inline;
   }
-`
+`;
 const StyledSectionContent = styled(Section.Content)`
   margin-bottom: 3.5rem;
 
   ${(props) => props.theme.mq.small} {
     display: block;
     margin-bottom: 2rem;
   }
-`
+`;
 const Disclaimer = styled.p`
   font-size: 0.875rem;
   margin-bottom: 0.5rem;
   max-width: 27.25rem;
-`
+`;
 const StyledMagicLink = styled(MagicLink)`
   font-size: 0.875rem;
-`
-export default function Details(props) {
-  const { setCo2e } = useContext(ModalContext)
+`;
 
+export default function Details(props) {
+  const { setCo2e, setWarningNegaoctet } = useContext(ModalContext);
+  console.log(props);
   return (
     <>
       <Section>
         <Section.Content flex>
           <Title>
-            {props.equivalent.prefix && (
-              <>{formatName(props.equivalent.prefix, 1, true)}</>
-            )}
+            {props.equivalent.prefix && <>{formatName(props.equivalent.prefix, 1, true)}</>}
             {formatName(props.equivalent.name, 1, !props.equivalent.prefix)}
-            <Br />{' '}
-            {props.equivalent.subtitle && (
-              <Subtitle>({formatName(props.equivalent.subtitle, 1)})</Subtitle>
-            )}
+            <Br /> {props.equivalent.subtitle && <Subtitle>({formatName(props.equivalent.subtitle, 1)})</Subtitle>}
           </Title>
         </Section.Content>
       </Section>
       <Value equivalent={props.equivalent} category={props.category} />
       <Section>
         <StyledSectionContent flex>
           <Disclaimer>
-            Valeurs exprimées en kg{' '}
+            Valeurs exprimées en kg{" "}
             <ButtonLink onClick={() => setCo2e(true)}>
               CO<sub>2</sub>e
-            </ButtonLink>{' '}
+            </ButtonLink>{" "}
             émis {props.equivalent?.include || props.category?.include}.
           </Disclaimer>
-          <StyledMagicLink to={props.equivalent.source}>Source</StyledMagicLink>
+          {props?.equivalent?.slug === "stockagedonnee" ? (
+            <>
+              <Disclaimer>
+                <ButtonLink onClick={() => setWarningNegaoctet(true)}>Source</ButtonLink>
+              </Disclaimer>
+            </>
+          ) : (
+            <>
+              <StyledMagicLink to={props.equivalent.source}>Source</StyledMagicLink>
+            </>
+          )}
         </StyledSectionContent>
       </Section>
     </>
-  )
+  );
 }