Add tutorial

src/assets/icons/ico/circleEmpty.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9" fill="#121212" stroke="#383941" stroke-width="2"/>
+</svg>

src/assets/icons/ico/circleFilled.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.5" fill="#F1C017" stroke="#383941"/>
+</svg>

src/assets/icons/visu/tuto/arrowLeft.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 6L8 12.5L16 19" stroke="#A0A0A0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/visu/tuto/arrowRight.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6L16 12.5L8 19" stroke="#121212" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Tutorial/TutorialWelcome.tsx

-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import './tutorialWelcome.scss'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { IconButton } from '@material-ui/core'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useClient } from 'cozy-client'
 import { useDispatch } from 'react-redux'
 import { updateProfile } from 'store/profile/profile.actions'
@@ -9,7 +11,13 @@ import userInstanceSettings from 'components/Hooks/userInstanceSettings'
 import Dialog from '@material-ui/core/Dialog'
 import Button from '@material-ui/core/Button'
 import get from 'lodash/get'
-
+import CircleEmpty from 'assets/icons/ico/circleEmpty.svg'
+import CircleFilled from 'assets/icons/ico/circleFilled.svg'
+import LeftArrowIcon from 'assets/icons/visu/tuto/arrowLeft.svg'
+import RigthArrowIcon from 'assets/icons/visu/tuto/arrowRight.svg'
+import Illu1 from 'assets/icons/visu/tuto/tuto1.svg'
+import Illu2 from 'assets/icons/visu/tuto/tuto2.svg'
+import Illu3 from 'assets/icons/visu/tuto/tuto3.svg'
 interface TutorialWelcomeProps {
   open: boolean
 }
@@ -21,7 +29,7 @@ const TutorialWelcome: React.FC<TutorialWelcomeProps> = ({
   const client = useClient()
   const dispatch = useDispatch()
   const { data: instanceSettings } = userInstanceSettings()
-
+  const [tutoSlide, setTutoSlide] = useState<number>(0)
   const setTutorialWelcomeViewed = useCallback(async () => {
     const mailService = new MailService()
     let username = ''
@@ -57,7 +65,12 @@ const TutorialWelcome: React.FC<TutorialWelcomeProps> = ({
       })
     )
   }, [client, dispatch])
-
+  const tutoNext = () => {
+    if (tutoSlide < 2) setTutoSlide(prev => prev + 1)
+  }
+  const tutoPrev = () => {
+    if (tutoSlide > 0) setTutoSlide(prev => prev - 1)
+  }
   return (
     <Dialog
       open={open}
@@ -74,30 +87,105 @@ const TutorialWelcome: React.FC<TutorialWelcomeProps> = ({
       </div>
       <div className="welcome-root">
         <div className="welcome-content">
-          <div className="welcome-header text-24-bold">
-            <span>{t('tutorial_welcome.title')}</span>
-            {instanceSettings.public_name ? (
-              <div className="wm-name text-24-bold">{`${instanceSettings.public_name} !`}</div>
-            ) : (
-              ' !'
-            )}
-          </div>
-          <div className="welcome-perso text-18-bold">
-            {t('tutorial_welcome.perso')}
-          </div>
+          {tutoSlide === 0 && (
+            <>
+              <div className="welcome-header text-24-normal tuto-txt-grey">
+                <span>{t('tutorial_welcome.title')}</span>
+                {instanceSettings.public_name ? (
+                  <span> {` ${instanceSettings.public_name} !`}</span>
+                ) : (
+                  ' !'
+                )}
+                <br />
+                {t('tutorial_welcome.perso')}
+              </div>
+              <Icon
+                icon={Illu1}
+                width="100%"
+                height="60%"
+                classname="tuto-illu"
+              />
+              <div className="welcome-perso text-16-white">
+                {t('tutorial_welcome.slide1Txt')}
+              </div>
+            </>
+          )}
+          {tutoSlide === 1 && (
+            <>
+              <div className="text-16-white tuto-txt-grey">
+                {t('tutorial_welcome.slide2Txt')}
+              </div>
+              <Icon
+                icon={Illu2}
+                width="100%"
+                height="70%"
+                classname="tuto-illu"
+              />
+              <div className="text-16-white tuto-txt">
+                {t('tutorial_welcome.slide2Txt2')}
+              </div>
+            </>
+          )}
+          {tutoSlide === 2 && (
+            <>
+              <Icon
+                icon={Illu3}
+                width="100%"
+                height="60%"
+                classname="tuto-illu"
+              />
+              <div className="text-16-white tuto-txt">
+                {t('tutorial_welcome.slide3Txt')}
+              </div>
+            </>
+          )}
+        </div>
+        <div className="slide-indicator">
+          <Icon icon={tutoSlide === 0 ? CircleFilled : CircleEmpty} size={20} />
+          <Icon icon={tutoSlide === 1 ? CircleFilled : CircleEmpty} size={20} />
+          <Icon icon={tutoSlide === 2 ? CircleFilled : CircleEmpty} size={20} />
         </div>
         <div className="welcome-footer">
-          <Button
-            aria-label={t('tutorial_welcome.accessibility.button_valid')}
-            className="button-ok"
-            onClick={setTutorialWelcomeViewed}
-            classes={{
-              root: 'btn-highlight',
-              label: 'text-16-bold',
-            }}
-          >
-            {t('tutorial_welcome.button_valid')}
-          </Button>
+          {tutoSlide !== 0 && (
+            <IconButton
+              aria-label={t('tutorial_welcome.accessibility.previous')}
+              className="tuto-navigation-button"
+              onClick={tutoPrev}
+              classes={{
+                root: 'btn-profile-back',
+                label: 'text-16-normal',
+              }}
+            >
+              <Icon icon={LeftArrowIcon} className="arrow-icon" size={18} />
+              {t('tutorial_welcome.accessibility.previous')}
+            </IconButton>
+          )}
+          {tutoSlide !== 2 ? (
+            <IconButton
+              aria-label={t('tutorial_welcome.accessibility.next')}
+              className="tuto-navigation-button rounded"
+              onClick={tutoNext}
+              classes={{
+                root: 'btn-highlight',
+                label: 'text-16-bold',
+              }}
+            >
+              {t('tutorial_welcome.accessibility.next')}
+              <Icon icon={RigthArrowIcon} className="arrow-icon" size={18} />
+            </IconButton>
+          ) : (
+            <Button
+              aria-label={t('tutorial_welcome.accessibility.finish')}
+              className="tuto-navigation-button rounded"
+              onClick={setTutorialWelcomeViewed}
+              classes={{
+                root: 'btn-highlight',
+                label: 'text-16-bold',
+              }}
+            >
+              {t('tutorial_welcome.accessibility.finish')}
+            </Button>
+          )}
         </div>
       </div>
     </Dialog>

src/components/Tutorial/tutorialWelcome.scss

 @import 'src/styles/base/color';
 @import 'src/styles/base/breakpoint';
 
-.welcome-root{
+.welcome-root {
   height: 100%;
-  width: 36rem;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -11,10 +11,17 @@
   @media #{$large-phone} {
     width: 100%;
   }
-  .welcome-content{
+  .welcome-content {
     margin: 2rem 0;
     height: 100%;
     flex: 1;
+    max-width: 350px;
+    padding: 1rem 1.5rem;
+    color: $grey-bright;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
     .welcome-header {
       background: $multi-color-radial-gradient;
       background-clip: 'text';
@@ -23,12 +30,59 @@
       margin-bottom: 1.25rem;
       text-align: center;
     }
+    .tuto-txt {
+      text-align: center;
+    }
+    .tuto-txt-grey {
+      color: $soft-grey;
+    }
+    .tuto-illu {
+      margin: 1rem 0;
+    }
   }
-  .welcome-footer{
-    margin: 1.5rem 0;
+  .slide-indicator {
+    display: flex;
+    justify-content: space-between;
+    width: 80px;
+  }
+  .welcome-footer {
+    border-top: 1px solid $grey-dark;
+    margin-top: 2rem;
+    min-height: 55px;
+    padding: 1.5rem, 0;
+    background: $dark-2;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .rounded {
+      border-radius: 22px;
+      margin-left: 1rem;
+      margin-right: 1rem;
+    }
+    .disabled {
+      opacity: 0.5;
+    }
+    button.tuto-navigation-button {
+      max-width: 12.5rem;
+      margin: 0.375rem 1rem 0.375rem 0.5rem;
+      padding: 0.5rem 1rem;
+      display: flex;
+      align-items: center;
+      .arrow-icon {
+        color: black;
+        margin: 0 0.3rem;
+        position: relative;
+        top: 1px;
+      }
+      @media (max-width: $width-tablet) {
+        max-width: 8.5rem;
+      }
+    }
   }
 }
 
 #accessibility-title {
   display: none;
-}
+}
\ No newline at end of file

src/locales/fr.json

@@ -379,7 +379,7 @@
       "subtitle1": "Comment ai-je accès à mes données d’électricité, de gaz et d’eau ?",
       "content1": "Pour visualiser vos consommations réelles et profiter pleinement du potentiel de notre service, il vous faut au minimum un des trois compteurs communicants suivants : Linky (pour l’électricité), Gazpar (pour le gaz), Téléo (pour l’eau). Ces compteurs sont opérés par les gestionnaires de réseaux. Pour Linky, c’est Enedis, le gestionnaire de réseau de distribution d’électricité. Pour Gazpar, GRDF est responsable de cette gestion. Et pour Téléo, c’est Eau du Grand Lyon. Ces acteurs sont responsables de la relève de vos données. C’es données servent notamment votre fournisseur d’électricité, de gaz ou d’eau pour vous facturer. Des fournisseurs d’électricité ou de gaz il y en a des dizaines ! Les gestionnaires de réseaux (… et de votre compteur) ne sont que trois ! Nous avons donc décidé de travailler avec eux, au plus près de la donnée brute issue de vos compteurs. Il vous faudra donc avoir un compte chez Enedis, GRDF et Eau du Grand Lyon pour accéder à vos données. Si vous n’en avez pas, il suffira de vous en créer un. Ceci ne sera à faire qu’une fois, au début.",
       "subtitle2": "Ecolyo se trouve dans un cloud personnel Grand Lyon, qu’est-ce que cela signifie ?",
-      "content2" : "Comme vous avez dû le remarquer, lors de votre première connexion à Ecolyo vous avez dû vous créer un Cloud Personnel Grand Lyon. Le service Ecolyo se trouve à l’intérieur de cet espace protégé. Dans ce cloud personnel, vous pourrez trouver également d’autres services. Toutes les données traitées par Ecolyo, mais aussi les autres services que vous seriez amenés à utiliser dans ce cloud personnel restent dans ce Cloud Personnel Grand Lyon et n’en sortent pas. Pour en savoir plus sur ce cloud et son utilisation, ainsi que la durée de conservation de vos données, vous pouvez lire les conditions générales d’utilisation du service ici.",
+      "content2": "Comme vous avez dû le remarquer, lors de votre première connexion à Ecolyo vous avez dû vous créer un Cloud Personnel Grand Lyon. Le service Ecolyo se trouve à l’intérieur de cet espace protégé. Dans ce cloud personnel, vous pourrez trouver également d’autres services. Toutes les données traitées par Ecolyo, mais aussi les autres services que vous seriez amenés à utiliser dans ce cloud personnel restent dans ce Cloud Personnel Grand Lyon et n’en sortent pas. Pour en savoir plus sur ce cloud et son utilisation, ainsi que la durée de conservation de vos données, vous pouvez lire les conditions générales d’utilisation du service ici.",
       "subtitle3": "Et donc concrètement pour Ecolyo, quelles données sont collectées et qui y a accès ?",
       "content3": "Pour qu’Ecolyo ait accès à vos données de consommations, vous devrez activer vos connecteurs dans la page Options. À ce moment-là, et à travers un court parcours, vous donnerez votre consentement à partager ces données avec le Service Ecolyo, et ce pour une durée limitée dans le temps. Chaque partenaire définit la durée de base du temps du partage des données. Vos connecteurs, une fois configurés, permettent le transfert de vos données de consommations au service Ecolyo. Le transfert de cette donnée se fait sans que personne n’y accède, pas même la Métropole de Lyon. En effet, ces données sont stockées et travaillées directement dans votre cloud personnel qui en assure la protection. Tous les calculs, analyses et traitements sur ces données sont faites DANS votre espace personnel sans visibilité sur le contenu des données par la Métropole de Lyon. Vous pouvez bien sûr mettre fin au partage de vos données de consommation à plusieurs niveaux :  Vous pouvez supprimer le transfert quotidien de vos données en supprimant tout simplement le connecteur dans la Page Options. Attention : lors de la désinstallation du connecteur qui collecte vos données au sein du cloud, celui-ci ne va plus aller chercher vos données. Par contre, votre consentement chez le partenaire fournisseur est toujours actif jusqu’à votre révocation de consentement auprès de ce dernier. Pour révoquer votre consentement, il vous faudra contacter ou agir directement chez le partenaire en question : Enedis pour l’électricité ou GRDF pour le gaz. Pour l’électricité, vous pouvez peut supprimer votre consentement à partager vos données en écrivant directement à dataconnect(at)enedis.fr. Pour le gaz, il vous faudra vous connecter à votre espace GRDF  et supprimer le consentement donné à la Métropole de Lyon dans la partie « Suivi de Consommations » puis « Données Consultées ». Pour supprimer l’ensemble de vos données ainsi que votre espace personnel Grand Lyon, contactez nous à ecolyo(at)grandlyon.com.",
       "subtitle4": "Personne n’a donc accès à mes données, pas même la métropole de Lyon, vraiment ?",
@@ -756,8 +756,15 @@
     "button_valid": "Ok",
     "accessibility": {
       "window_title": "Fenêtre de bienvenue",
-      "button_valid": "Valider"
-    }
+      "button_valid": "Valider",
+      "next": "Suivant",
+      "previous": "Précédent",
+      "finish": "C'est parti !"
+    },
+    "slide1Txt": "Pour accéder à vos consommations d'énergie ou d'eau, vous allez devoir configurer des \"connecteurs\" dans la partie Options.",
+    "slide2Txt": "Les données issues de vos compteurs communicants nous seront transmises, après votre accord, par Enedis pour l'électricité, GRDF pour le gaz et Eau du Grand Lyon pour l'eau.",
+    "slide2Txt2": "Il vous faudra donc un compte Enedis, GRDF ou Eau du Grand Lyon pour vous identifier.",
+    "slide3Txt": "Si vous n'avez pas de compte, il faudra donc en créer un sur le site du partenaire avant de revenir vous identifier dans Ecolyo."
   },
   "welcome_modal": {
     "title": "Félicitations",