diff --git a/src/components/LegalNotice/LegalNoticeLink.spec.tsx b/src/components/LegalNotice/LegalNoticeLink.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e5c27d0cc5ec956b77a45e9d2d4fd73eb44b62f
--- /dev/null
+++ b/src/components/LegalNotice/LegalNoticeLink.spec.tsx
@@ -0,0 +1,22 @@
+'use strict'
+/* eslint-env jest */
+import React from 'react'
+import { shallow } from 'enzyme'
+import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('LegalNoticeView component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(<LegalNoticeLink />).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/LegalNotice/LegalNoticeView.spec.tsx b/src/components/LegalNotice/LegalNoticeView.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f8f4366d26392dad5ecb12d2645e523f5857520
--- /dev/null
+++ b/src/components/LegalNotice/LegalNoticeView.spec.tsx
@@ -0,0 +1,12 @@
+'use strict'
+/* eslint-env jest */
+import React from 'react'
+import { shallow } from 'enzyme'
+import LegalNoticeView from 'components/LegalNotice/LegalNoticeView'
+
+describe('LegalNoticeView component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(<LegalNoticeView />).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..21fd8812daa636ed1024359edac706c777f38768
--- /dev/null
+++ b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegalNoticeView component should be rendered correctly 1`] = `
+<div
+ className="legal-notice-root"
+>
+ <div
+ className="legal-notice-content"
+ >
+ <div
+ className="legal-notice-header text-14-normal-uppercase"
+ >
+ LEGAL.TITLE_LEGAL
+ </div>
+ <ForwardRef
+ className="legal-notice-card-link"
+ to="options/legalnotice"
+ >
+ <StyledCard>
+ <div
+ className="legal-notice-card"
+ >
+ <div
+ className="legal-notice-card-content"
+ >
+ <StyledIcon
+ className="legal-notice-card-content-icon"
+ icon="test-file-stub"
+ size={50}
+ />
+ <div
+ className="legal-notice-card-content-title"
+ >
+ LEGAL.READ_LEGAL
+ </div>
+ </div>
+ </div>
+ </StyledCard>
+ </ForwardRef>
+ </div>
+</div>
+`;
diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..51c6e47f756f24156872859c70bcdb8467bce670
--- /dev/null
+++ b/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
@@ -0,0 +1,284 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegalNoticeView component should be rendered correctly 1`] = `
+<React.Fragment>
+ <CozyBar
+ displayBackArrow={true}
+ titleKey="COMMON.APP_LEGAL_TITLE"
+ />
+ <Header
+ desktopTitleKey="COMMON.APP_LEGAL_TITLE"
+ displayBackArrow={true}
+ setHeaderHeight={[Function]}
+ />
+ <Content
+ height={0}
+ >
+ <div
+ className="legal-notice-root"
+ >
+ <div
+ className="legal-notice-content"
+ >
+ <h2>
+ Mentions légales de Ecolyo
+ </h2>
+ <p>
+ Site du service Ecolyo :
+ localhost
+ </p>
+ <p>
+ Métropole de Lyon - 20, rue du Lac – CS 33569 - 69505 Lyon cedex 03
+
+ </p>
+ <p>
+ Tél : (33) 4 78 63 40 40
+ </p>
+
+ <p
+ className="ln-contact"
+ >
+ contact(at)grandlyon.com
+ </p>
+ <div
+ className="text-16-normal"
+ >
+ <div
+ className="legal-notice-oneline"
+ >
+ <span
+ className="text-16-bold"
+ >
+ Directeur de publication
+ </span>
+ : Blandine MELAY
+ </div>
+
+ <div
+ className="legal-notice-oneline"
+ >
+ <span
+ className="text-16-bold"
+ >
+ Animation éditoriale, gestion et mise à jour
+ </span>
+
+ : Marion BERTHOLON, Maria Inés LEAL
+ </div>
+
+ <div
+ className="legal-notice-oneline"
+ >
+ <span
+ className="text-16-bold"
+ >
+ Photographies
+ </span>
+ : sauf mention contraire, les photos sont la propriété de la Métropole de Lyon
+ </div>
+
+ <div
+ className="legal-notice-oneline"
+ >
+ <span
+ className="text-16-bold"
+ >
+ Conception et Charte graphique
+ </span>
+
+ : Florent Dufier -
+
+ <a
+ href="https://florentdufier.myportfolio.com/"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ https://florentdufier.myportfolio.com/
+ </a>
+ </div>
+ <div
+ className="legal-notice-oneline"
+ >
+ <span
+ className="text-16-bold"
+ >
+ Réalisation technique
+ </span>
+ : Métropole de Lyon, Sopra Steria, Cozy Cloud, Clever Age
+ </div>
+ <div
+ className="legal-notice-oneline"
+ >
+ <span
+ className="text-16-bold"
+ >
+ Maintenance technique
+ </span>
+ : Délégation Développement économique, emploi & savoirs - Innovation numérique & systèmes d’information - Usages et services numériques - Développement des services numériques
+ </div>
+
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Crédits
+ </h3>
+ <p>
+ Ce site est le résultat de développements spécifiques réalisés dans les langages Go, TypeScript, HTML et Sass. Les développements s’appuient sur plusieurs bibliothèques et frameworks libres : axios, cozy-bar, cozy-client, cozy-harvest-lib, cozy-scripts, cozy-ui, d3, detect-browser, eslint-config-cozy-app, global, lodash, luxon, moment, moment-timezone, node-sass, object-hash, react, react-dom, react-lottie, react-router-dom, react-swipeable-views, sass-loader. La pile technique intègre également les applications Cozy stack, Yarn, Docker, ACH. Les déploiements sont réalisés sur le registre hébergé chez Cozy. L’équipe de réalisation utilise au quotidien les applications GitLab, IceScrum, RocketChat, Sonarqube.
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Traitement des données personnelles et droit d’accès, de modification et de suppression
+ </h3>
+ <p>
+ Conformément à la réglementation en vigueur en matière de protection des données personnelles, le service Ecolyo a fait l’objet d’une inscription au registre des traitements de la Métropole de Lyon. Ecolyo fait partie de l’écosystème de services orientés « self data » déployés par la Métropole de Lyon avec l’ambition d’offrir aux usagers métropolitains les outils et les services leur permettant d’exercer directement leur droit à la portabilité, dans un cadre apte à garantir aussi bien la transparence et le contrôle sur l’usage de leurs données personnelles que l’exploitation directe du contenu de ces données selon leurs libres choix. Le self data est en effet selon la Fondation Internet Nouvelle Génération (FING) « “la production, l’exploitation et le partage de données personnelles par les individus, sous leur contrôle et à leurs propres fins ». Au sein de cet environnement self data, la gestion des données s’appuie sur l’organisation suivante des rôles et responsabilités associées :
+ </p>
+ <ul>
+ <li>
+ Les partenaires du service Ecolyo – Enedis, GRDF et Eau du Grand Lyon sont responsable exclusivements des selis traitements de Données Personnelles relatifs à la collecte des données de consommation de l’usager et à leur transmission sur la plateforme de cloud personnel, après consentement de l’usager ;
+ </li>
+ <li>
+ La Métropole de Lyon est responsable de traitement sur le périmètre du service Ecolyo qu’elle propose à l’usager, ainsi que les traitements nécessaires à la fourniture de la plateforme de cloud personnel qu’elle met à disposition de l’usager pour accéder au service Ecolyo. En sa qualité de responsable de ces traitements, elle collecte et traite :
+ <ul>
+ <li>
+ Les données de compte de l’usager sur la plateforme de cloud personnel à des fins de gestion du compte et de communication avec l’usager ;
+ </li>
+ <li>
+ Les données privées de consommation d’énergie dont la récupération, la sauvegarde, le stockage, la synchronisation et le partage sur la plateforme de cloud personnel sont initiés par l’usager sans visibilité de la Métropole de Lyon sur leur contenu.
+ </li>
+ </ul>
+ </li>
+ <li>
+ L’usager, seul décisionnaire des finalités d’utilisation qu’il souhaite définir pour le traitement de ses données personnelles, à la suite de leur transmission par les partenaires du service Ecolyo sur son cloud personnel.
+ </li>
+ </ul>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <p>
+ Ainsi, dans le cadre de l’utilisation d’Ecolyo, l’usager ne recevra les données des partenaires du service : Enedis, GRDF et Eau du Grand Lyon seulement qu’à sa demande expresse après la saisie de ses identifiants.
+ </p>
+ <p>
+ L’utilisateur est donc le seul à accéder :
+ </p>
+ <ul>
+ <li>
+ À ses données de consommation d’électricité horaires, journalières, hebdomadaires, mensuelles et annuelles.
+ </li>
+ <li>
+ À ses données de consommation de gaz journalières, hebdomadaires, mensuelles et annuelles.
+ </li>
+ <li>
+ À ses données de consommation eau journalières, hebdomadaires, mensuelles et annuelles.
+ </li>
+ </ul>
+ <p>
+ Les engagements et responsabilités de la Métropole de Lyon concernant la protection des données et la confidentialité des données Ecolyo sont précisés dans les Mentions légales et les conditions d’utilisation du cloud personnel Grand Lyon qui accueille aujourd’hui le service Ecolyo et sans lequel le service ne peut pas fonctionner. Conformément à la loi 78-17 du 6 janvier 1978 modifiée relative à l’information, aux fichiers et aux libertés, vous disposez d’un droit d’accès, de rectification et d’opposition au traitement de vos données à caractère personnel. Votre cloud personnel vous permet d’exercer ces droits directement dans cet espace sur vos données de compte et sur vos données privées de consommation dans le cadre de votre utilisation du service Ecolyo.
+ </p>
+ <p>
+ Vous pouvez également si vous avez des questions à ce sujet, vous adresser par courrier postal à :
+ </p>
+ <p>
+ Métropole de Lyon - Direction des Affaires Juridiques et de la Commande Publique - 20, rue du Lac – CS 33569 - 69505 Lyon Cedex 03.
+ </p>
+ <p>
+ L’exercice des droits d’accès et de rectification de vos données nominatives auprès de la Métropole de Lyon concerne exclusivement celles de « Ecolyo ».
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Dispositions légales
+ </h3>
+ <p>
+ Les divers éléments du site web (la forme, la mise en page, le fonds, la structure …) sont protégés par le droit des dessins et modèles, le droit d’auteur, le droit des marques ainsi que le droit à l’image et ils ne peuvent être copiés ou imités en tout ou partie sauf autorisation expresse de la Métropole de Lyon.
+ </p>
+
+ <p>
+ Toute personne ne respectant pas les dispositions légales applicables se rend coupable du délit de contrefaçon et est passible des sanctions pénales prévues par la loi.
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Droits d’auteurs
+ </h3>
+ <p>
+ Les photographies, textes, logos, pictogrammes, ainsi que toutes œuvres intégrées dans le site sont la propriété de la "Métropole de Lyon" ou de tiers ayant autorisé la "Métropole de Lyon" à les utiliser.
+ </p>
+ <p>
+ Les reproductions, les transmissions, les modifications, les réutilisations, sur un support papier ou informatique, dudit site et des œuvres qui y sont reproduites ne sont autorisées que pour un usage personnel et privé conforme aux dispositions de l’article L 122-5 du Code de la Propriété Intellectuelle. Ces reproductions devront ainsi notamment indiquer clairement la source et l’auteur du site et/ou de ces œuvres multimédias. En aucun cas ces reproductions ne sauraient porter préjudice aux droits des tiers. Les reproductions, les transmissions, les modifications, les réutilisations à des fins publicitaires, commerciales ou d’information, de tout ou partie du site, sont totalement interdites.
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Logo de la Métropole de Lyon et d’Ecolyo
+ </h3>
+ <p>
+ Les logos de la Métropole de Lyon et d’Ecolyo ne peuvent pas être modifiés – proportions, couleurs, éléments, constituants – et ne peuvent pas être sujet à aucune transformation, animation ou tout autre processus. Les logos de la Métropole de Lyon et d’Ecolyo ne peuvent être utilisés et associés qu’aux seules informations vérifiables. Ils ne peuvent être notamment utilisés que pour illustrer des relations avec la Métropole de Lyon ou des actions de sponsorings dûment établies. Quel que soit le cas d’espèce, la Métropole de Lyon se réserve le droit d’approuver ou de désapprouver toute utilisation des logos de la Métropole de Lyon et d’Ecolyo, pour assurer son utilisation correcte, conformément à l’éthique, la morale et aux intérêts de la Métropole de Lyon. Les conditions susmentionnées s’appliquent dans le cadre de pages web, elles ne font pas référence à l’utilisation des logos dans tout autre document. La Métropole de Lyon se réserve le droit de modifier les conditions d’utilisation des logos de la Métropole de Lyon et d’Ecolyo à tout moment et sans préavis.
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Droit des bases de données
+ </h3>
+ <p>
+ Les bases de données sont protégées par la loi du 1er juillet 1998 et le régime français du droit d’auteur.
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Établissements de liens vers le site Ecolyo
+ </h3>
+ <p>
+ La Métropole de Lyon autorise la mise en place d’un lien hypertexte vers son service Ecolyo pour tous les sites internet, à l’exclusion de ceux diffusant des informations à caractère polémique, pornographique, xénophobe ou pouvant, dans une plus large mesure porter atteinte à la sensibilité du plus grand nombre.
+ </p>
+ <p>
+ Le lien doit aboutir à la page d’accueil du service et le service Ecolyo doit apparaître dans une nouvelle fenêtre. Les pages du service Ecolyo ne doivent en aucun cas être intégrées à l’intérieur des pages d’un autre site (iframe).
+ </p>
+ <p>
+ Dans tous les cas d’espèce, La Métropole de Lyon se réserve le droit de demander la suppression d’un lien si elle estime que le site cible ne respecte pas les règles ainsi définies.
+
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Liens vers des sites tiers depuis le site Ecolyo
+ </h3>
+ <p>
+ Les liens hypertextes mis en œuvre au sein du site en direction d’autres sites et/ou de pages personnelles et d’une manière générale vers toutes ressources existantes sur internet ne sauraient engager la responsabilité de la Métropole de Lyon quant aux liens qu’ils contiennent ou aux changements ou mises à jour qui leur sont apportés.
+ </p>
+ </div>
+ <div
+ className="legal-notice-part"
+ >
+ <h3>
+ Mise en garde générale
+ </h3>
+ <p>
+ Nos services mettent tout en œuvre pour offrir aux visiteurs de ce site web des informations fiables et vérifiées. Cependant, malgré tous les soins apportés, le site peut comporter des inexactitudes, des défauts de mise à jour ou des erreurs.
+ </p>
+ <p>
+ Nous remercions les utilisateurs du site de nous faire part d’éventuelles omissions, erreurs ou corrections par mail sur la boite aux lettres du webmestre.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </Content>
+</React.Fragment>
+`;