diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index f923063602546826d693b5ecbc0e35e8962bff61..b6edc1b0f152145e7ae3c8ae326e677f1b82812f 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -4,7 +4,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useSelector, useDispatch } from 'react-redux'
import { AppStore } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
-import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { Button } from '@material-ui/core'
const ReportOptions: React.FC = () => {
const { t } = useI18n()
@@ -15,8 +15,10 @@ const ReportOptions: React.FC = () => {
dispatch(updateProfile({ sendAnalysisNotification: value }))
}
- const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- e.target.checked ? updateProfileReport(true) : updateProfileReport(false)
+ const toggleAnalysisNotification = () => {
+ profile.sendAnalysisNotification
+ ? updateProfileReport(false)
+ : updateProfileReport(true)
}
return (
@@ -26,18 +28,25 @@ const ReportOptions: React.FC = () => {
{t('profile.report.title')}
</div>
<div className="switch-container">
- <StyledSwitch
- checked={profile.sendAnalysisNotification}
- onChange={handleChange}
- inputProps={{
- 'aria-label': t(
- 'profile.accessibility.button_toggle_mail_report'
- ),
- }}
- />
<span className="switch-label text-16-normal">
{t('profile.report.switch_label')}
</span>
+ <div className="button-container">
+ <Button
+ aria-label={t('unsubscribe.button_accessibility')}
+ onClick={() => toggleAnalysisNotification()}
+ variant={'contained'}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ type="submit"
+ >
+ {profile.sendAnalysisNotification
+ ? t('profile.report.deactivate')
+ : t('profile.report.activate')}
+ </Button>
+ </div>
</div>
</div>
</div>
diff --git a/src/components/Options/UnSubscribe.tsx b/src/components/Options/UnSubscribe.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bbf9646baf05915bfaba3d95a9728c827948d452
--- /dev/null
+++ b/src/components/Options/UnSubscribe.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import './unSubscribe.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
+import { Button } from '@material-ui/core'
+import { useDispatch } from 'react-redux'
+import { updateProfile } from 'store/profile/profile.actions'
+import { useHistory } from 'react-router-dom'
+
+const UnSubscribe: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ const { t } = useI18n()
+ const dispatch = useDispatch()
+ const history = useHistory()
+ const unSubscribe = async () => {
+ dispatch(updateProfile({ sendAnalysisNotification: false }))
+ history.push('/consumption')
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_analysis'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_analysis'}
+ ></Header>
+ <Content height={headerHeight}>
+ <div className="unsubscribe-container">
+ <StyledIcon className="profile-icon" icon={BearIcon} size={250} />
+
+ <div className="text-20-bold head">{t('unsubscribe.title')}</div>
+ <div className="text-16-normal question">
+ {t('unsubscribe.content')}
+ </div>
+ <Button
+ aria-label={t('unsubscribe.button_accessibility')}
+ onClick={() => unSubscribe()}
+ variant={'contained'}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ type="submit"
+ >
+ {t('unsubscribe.button_text')}
+ </Button>
+ </div>
+ </Content>
+ </>
+ )
+}
+
+export default UnSubscribe
diff --git a/src/components/Options/reportOptions.scss b/src/components/Options/reportOptions.scss
index f7512a00f3a6d87497ee4f0077470cbd835372fd..2bd7260b961539cdf10a14ecbbc7ee5d41f4dd59 100644
--- a/src/components/Options/reportOptions.scss
+++ b/src/components/Options/reportOptions.scss
@@ -24,5 +24,13 @@
.switch-label {
margin-left: 0.2rem;
}
+ .button-container {
+ margin-left: auto;
+ max-width: 200px;
+ button {
+ margin-top: 0;
+ width: 125px;
+ }
+ }
}
}
diff --git a/src/components/Options/unSubscribe.scss b/src/components/Options/unSubscribe.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6d1d6c9e9c75b78cc2f013a0c5fc76cc3c29c2de
--- /dev/null
+++ b/src/components/Options/unSubscribe.scss
@@ -0,0 +1,19 @@
+@import 'src/styles/base/color';
+
+.unsubscribe-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ max-width: 450px;
+ margin: auto;
+ padding: 2rem;
+ text-align: center;
+ .head {
+ color: $gold-shadow;
+ }
+ .question {
+ color: $white;
+ margin-top: 1.5rem;
+ }
+}
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 5ad8773911d676ae3de6ec7e942756c071e2ded2..624f36e83667e48ed4a079da85cadf39007ae9de 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -6,6 +6,7 @@ import DuelView from 'components/Duel/DuelView'
import QuizView from 'components/Quiz/QuizView'
import ExplorationView from 'components/Exploration/ExplorationView'
import ActionView from 'components/Action/ActionView'
+import UnSubscribe from 'components/Options/UnSubscribe'
const HomeView = lazy(() => import('components/Home/HomeView'))
const SingleFluidView = lazy(() =>
@@ -74,6 +75,7 @@ const Routes = () => {
<Route path={'/options'} exact component={OptionsView} />
<Route path="/analysis" component={AnalysisView} />
<Route path="/profiletype" component={ProfileTypeView} />
+ <Route path="/unsubscribe" component={UnSubscribe} />
<Redirect from="/" to="/consumption" />
<Redirect from="*" to="/consumption" />
</Switch>
diff --git a/src/locales/fr.json b/src/locales/fr.json
index aebede2ec3c4818d61ed6682f6c925fe7f037f18..6fb747ad4b6003ca2fdfe0eab91e79b1be3ac3a6 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -8,6 +8,7 @@
"title_duel": "Duel final",
"title_ecogestures": "Écogestes",
"title_options": "Options",
+ "title_analysis": "Analyse",
"title_profiletype": "Ajuster mon profil",
"title_faq": "FAQ",
"title_legal_notice": "Mentions légales",
@@ -119,8 +120,8 @@
"text5": "Sinon, munissez-vous de la pièce d'identité du titulaire du contrat d'électricité, le titulaire du compte Enedis doit avoir le même nom que le titulaire du contrat.",
"text6": "Promis, vous n'aurez à effectuer cette démarche qu'une seule fois au début !",
"text7": "Une fois votre compte créé, revenez sur Ecolyo vous connecter.",
- "buttonText" : "J'ai compris",
- "accessibility" : {
+ "buttonText": "J'ai compris",
+ "accessibility": {
"window_title": "Fenêtre d'information",
"buttonText": "Valider",
"button_close": "Fermer la fenêtre"
@@ -559,7 +560,9 @@
"profile": {
"report": {
"title": "Notification par mail",
- "switch_label": "Être prévenu de la parution de mon bilan mensuel"
+ "switch_label": "Être prévenu de la parution de mon bilan mensuel",
+ "activate": "Activer",
+ "deactivate": "Désactiver"
},
"accessibility": {
"button_toggle_mail_report": "Activer les notifications par mail"
@@ -814,6 +817,12 @@
"slide2Txt2": "Il vous faudra donc un compte Enedis, GRDF ou Eau du Grand Lyon pour vous identifier.",
"slide3Txt": "Si vous n'en avez pas, vous pourrez vous en créer un sur le site du partenaire. Le lien vers ce site se trouve dans la partie Options. Une fois votre compte créé, revenez vous identifier dans Ecolyo."
},
+ "unsubscribe": {
+ "title": "Etes-vous sûr de ne plus vouloir recevoir notre email mensuel ?",
+ "content": "Dans ce cas, vous ne recevrez plus la notification de votre bilan ainsi que les conseils associés au mois en cours.",
+ "button_text": "Oui, je me désabonne",
+ "button_accessibility": "Bouton de désinscription"
+ },
"welcome_modal": {
"title": "Félicitations",
"perso": "Votre espace personnel a bien été créé.",