From 713a873b8f68c050b5748caaac4909d03f3c182f Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Thu, 8 Jul 2021 17:23:18 +0200
Subject: [PATCH] Add new page + route + edit option button
---
src/components/Options/ReportOptions.tsx | 33 ++++++++-----
src/components/Options/UnSubscribe.tsx | 60 +++++++++++++++++++++++
src/components/Options/reportOptions.scss | 8 +++
src/components/Options/unSubscribe.scss | 19 +++++++
src/components/Routes/Routes.tsx | 2 +
src/locales/fr.json | 15 ++++--
6 files changed, 122 insertions(+), 15 deletions(-)
create mode 100644 src/components/Options/UnSubscribe.tsx
create mode 100644 src/components/Options/unSubscribe.scss
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index f92306360..b6edc1b0f 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 000000000..bbf9646ba
--- /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 f7512a00f..2bd7260b9 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 000000000..6d1d6c9e9
--- /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 5ad877391..624f36e83 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 aebede2ec..6fb747ad4 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éé.",
--
GitLab