From 6de19616497b443065c7851e37b8f32462efe3d7 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 20 Feb 2024 16:37:26 +0000
Subject: [PATCH] feat(options): replace report button with switch
---
.../Comparison/fluidPerformanceIndicator.scss | 6 +-
src/components/Analysis/monthlyanalysis.scss | 8 +-
.../consumptionDetails.scss | 7 +-
.../FluidButtons/fluidButtons.scss | 7 +-
.../Consumption/consumptionView.scss | 4 +-
.../Options/ExportData/exportData.scss | 8 +-
src/components/Options/GCU/gcuLink.scss | 10 +-
src/components/Options/HelpLink/HelpLink.scss | 11 +-
.../Options/MatomoOptOut/matomoOptOut.scss | 5 +-
.../profileTypeOptions.scss | 4 +-
.../ReportOptions/ReportOptions.spec.tsx | 10 +-
.../Options/ReportOptions/ReportOptions.tsx | 128 ++++++++----------
.../Options/ReportOptions/reportOptions.scss | 53 ++++----
.../__snapshots__/OptionsView.spec.tsx.snap | 55 +++++---
src/locales/fr.json | 8 +-
15 files changed, 141 insertions(+), 183 deletions(-)
diff --git a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
index 6213c8fdc..4457dccc9 100644
--- a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
+++ b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
@@ -14,10 +14,8 @@
//MultiFluidIndicator
.fi-content {
min-height: 23.875rem;
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
+ max-width: 45.75rem;
+ width: 100%;
.fi-header {
margin-top: 1rem;
margin-bottom: 1.25rem;
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index 15f293d72..2d7afc608 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -1,5 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
.analysis-root {
display: flex;
@@ -9,11 +8,8 @@
gap: 1rem;
.analysis-content {
- width: 45.75rem;
-
- @media #{$large-phone} {
- width: 100%;
- }
+ max-width: 45.75rem;
+ width: 100%;
}
.status-header {
display: grid;
diff --git a/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss b/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss
index e8827802d..8935757ac 100644
--- a/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss
+++ b/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss
@@ -1,5 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
.consumption-details-root {
display: flex;
@@ -12,10 +11,8 @@
margin-bottom: 1rem;
.consumption-details-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
+ max-width: 45.75rem;
+ width: 100%;
.consumption-details-header {
margin-bottom: 0.5rem;
color: $grey-bright;
diff --git a/src/components/Consumption/FluidButtons/fluidButtons.scss b/src/components/Consumption/FluidButtons/fluidButtons.scss
index fa69ea60a..7d120d2ee 100644
--- a/src/components/Consumption/FluidButtons/fluidButtons.scss
+++ b/src/components/Consumption/FluidButtons/fluidButtons.scss
@@ -1,5 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
.fluid-buttons {
background: $dark-light-2;
@@ -10,11 +9,9 @@
align-items: center;
justify-content: space-evenly;
box-sizing: border-box;
- width: 45.75rem;
margin: auto;
- @media #{$large-phone} {
- width: 100%;
- }
+ max-width: 45.75rem;
+ width: 100%;
}
.fluid-button {
min-width: 80px;
diff --git a/src/components/Consumption/consumptionView.scss b/src/components/Consumption/consumptionView.scss
index 174d986a8..ce636ccff 100644
--- a/src/components/Consumption/consumptionView.scss
+++ b/src/components/Consumption/consumptionView.scss
@@ -18,11 +18,11 @@
.konnector-section {
background-color: $default-background;
margin: 0 auto;
- width: 45.75rem;
box-sizing: border-box;
padding-bottom: 1rem;
+ max-width: 45.75rem;
+ width: 100%;
@media #{$large-phone} {
- width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 3b6852c49..38965f5bd 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -1,6 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/base/mixins';
div.expansion-panel-root,
div.expansion-panel-root.Mui-expanded:last-child {
@@ -16,10 +14,8 @@ div.expansion-panel-root.Mui-expanded:last-child {
padding: 0 1.5rem;
.export-option-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
+ max-width: 45.75rem;
+ width: 100%;
.MuiAccordionSummary-content {
margin: 0;
}
diff --git a/src/components/Options/GCU/gcuLink.scss b/src/components/Options/GCU/gcuLink.scss
index b63f84bd5..3a88a80d9 100644
--- a/src/components/Options/GCU/gcuLink.scss
+++ b/src/components/Options/GCU/gcuLink.scss
@@ -1,4 +1,3 @@
-@import 'src/styles/base/breakpoint';
@import 'src/styles/base/color';
.gcu-link-root {
@@ -33,10 +32,8 @@
.ln-contact {
color: $multi-color;
}
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
+ max-width: 45.75rem;
+ width: 100%;
}
}
@@ -48,9 +45,6 @@
flex-direction: row;
margin: -0.75rem 0;
width: 100%;
- @media #{$large-phone} {
- width: 100%;
- }
.gcu-link-card-content {
display: flex;
flex-direction: row;
diff --git a/src/components/Options/HelpLink/HelpLink.scss b/src/components/Options/HelpLink/HelpLink.scss
index dc6ae1872..453d742a2 100644
--- a/src/components/Options/HelpLink/HelpLink.scss
+++ b/src/components/Options/HelpLink/HelpLink.scss
@@ -1,5 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
.help-root {
display: flex;
@@ -9,14 +8,13 @@
padding: 0 1.5rem;
margin-top: 2rem;
.help-content {
- width: 45.75rem;
+ max-width: 45.75rem;
+ width: 100%;
a {
color: $white;
text-decoration: none;
}
- @media #{$large-phone} {
- width: 100%;
- }
+
.help-header {
color: $grey-bright;
margin-bottom: 1rem;
@@ -33,9 +31,6 @@
flex-direction: row;
margin: -0.75rem 0;
width: 100%;
- @media #{$large-phone} {
- width: 100%;
- }
.help-card-content {
display: flex;
flex-direction: row;
diff --git a/src/components/Options/MatomoOptOut/matomoOptOut.scss b/src/components/Options/MatomoOptOut/matomoOptOut.scss
index 830a9fb80..0c4754fbe 100644
--- a/src/components/Options/MatomoOptOut/matomoOptOut.scss
+++ b/src/components/Options/MatomoOptOut/matomoOptOut.scss
@@ -1,5 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
@import 'src/styles/base/typo-variables';
.matomo-opt-out-container {
@@ -12,10 +11,8 @@
.matomo-opt-out {
margin: 0 auto;
+ max-width: 45.75rem;
width: 100%;
- @media (min-width: $width-large-phone) {
- width: 45.75rem;
- }
.opt-out-header {
color: $grey-bright;
}
diff --git a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
index bf2af8321..daf6c7bd9 100644
--- a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
+++ b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
@@ -6,10 +6,8 @@
padding: 0 1.5rem;
.profile-type-content {
margin: 0 auto;
+ max-width: 45.75rem;
width: 100%;
- @media (min-width: $width-large-phone) {
- width: 45.75rem;
- }
.MuiButtonBase-root {
height: 40px;
margin: 0;
diff --git a/src/components/Options/ReportOptions/ReportOptions.spec.tsx b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
index 711a1ce72..008e75540 100644
--- a/src/components/Options/ReportOptions/ReportOptions.spec.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
@@ -32,7 +32,7 @@ describe('ReportOptions component', () => {
<ReportOptions />
</Provider>
)
- expect(screen.getByText('profile.report.deactivate')).toBeInTheDocument()
+ expect(screen.getAllByRole('checkbox')[0]).toBeChecked()
})
it('should update the profile with sendAnalysisNotification to false', async () => {
@@ -41,7 +41,7 @@ describe('ReportOptions component', () => {
<ReportOptions />
</Provider>
)
- await userEvent.click(screen.getAllByRole('button')[0])
+ await userEvent.click(screen.getAllByRole('checkbox')[0])
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: false,
@@ -57,7 +57,7 @@ describe('ReportOptions component', () => {
<ReportOptions />
</Provider>
)
- await userEvent.click(screen.getAllByRole('button')[0])
+ await userEvent.click(screen.getAllByRole('checkbox')[0])
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: true,
@@ -75,8 +75,8 @@ describe('ReportOptions component', () => {
<ReportOptions />
</Provider>
)
- expect(screen.getByRole('checkbox')).not.toBeChecked()
- await userEvent.click(screen.getByRole('checkbox'))
+ expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked()
+ await userEvent.click(screen.getAllByRole('checkbox')[1])
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
sendConsumptionAlert: true,
diff --git a/src/components/Options/ReportOptions/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
index 7a2578a8c..30dc6917c 100644
--- a/src/components/Options/ReportOptions/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@material-ui/core'
import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -95,84 +94,71 @@ const ReportOptions = () => {
return (
<div className="report-option-root">
<div className="report-option-content">
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_bilan')}
- </div>
{/* Monthly Report activation */}
- <div className="switch-container-bilan">
- <span className="switch-label text-16-normal">
+ <div className="reportCard">
+ <div className="row">
+ <StyledSwitch
+ onClick={toggleAnalysisNotification}
+ checked={profile.sendAnalysisNotification}
+ />
+ <span className="text-16-normal-uppercase">
+ {t('profile.report.title_bilan')}
+ </span>
+ </div>
+ <span className="text-16-normal">
{t('profile.report.switch_label_bilan')}
</span>
- <div className="button-container">
- <Button
- aria-label={t('unsubscribe.button_accessibility')}
- onClick={() => toggleAnalysisNotification()}
- variant="contained"
- classes={{
- root: 'btnPrimary',
- label: 'text-18-bold',
- }}
- >
- {profile.sendAnalysisNotification
- ? t('profile.report.deactivate')
- : t('profile.report.activate')}
- </Button>
- </div>
</div>
{/* Consumption Alert activation */}
{isWaterConnected && (
- <>
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_alert')}
- </div>
- <div className="waterAlert">
- <div className="switch-container-alert">
- <StyledSwitch
- checked={profile.sendConsumptionAlert}
- onChange={handleAlertChange}
- inputProps={{
- 'aria-label': t(
- 'profile.accessibility.button_toggle_consumption_alert'
- ),
- }}
- />
- <span className="text-16-normal">
- {t('profile.report.switch_label_alert')}
- </span>
+ <div className="reportCard">
+ <div className="row">
+ <StyledSwitch
+ checked={profile.sendConsumptionAlert}
+ onChange={handleAlertChange}
+ />
+
+ <div className="text-16-normal-uppercase">
+ {t('profile.report.title_alert')}
</div>
- {profile.sendConsumptionAlert && (
- <>
- <div className="text-16-normal">
- {t('profile.report.input_label_alert')}
- </div>
- <div className="switch-container-alert">
- <input
- className="inputNumber text-18"
- type="number"
- defaultValue={
- profile.waterDailyConsumptionLimit === 0
- ? ''
- : profile.waterDailyConsumptionLimit
- }
- onBlur={setWaterLimit}
- aria-label={t(
- 'profile.accessibility.input_water_alert_report'
- )}
- inputMode="numeric"
- />
- <span className="switch-label text-16-normal">L</span>
- </div>
- {maxDayData && (
- <div className="alert-input-subtext text-14">
- {t('profile.report.input_label_subtext_alert')}
- {Math.round(maxDayData.value)}
- {' L'}
- </div>
- )}
- </>
- )}
</div>
- </>
+
+ <span className="text-16-normal">
+ {t('profile.report.switch_label_alert')}
+ </span>
+
+ {profile.sendConsumptionAlert && (
+ <>
+ <div className="text-16-normal">
+ {t('profile.report.input_label_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <input
+ className="inputNumber text-18"
+ type="number"
+ defaultValue={
+ profile.waterDailyConsumptionLimit === 0
+ ? ''
+ : profile.waterDailyConsumptionLimit
+ }
+ onBlur={setWaterLimit}
+ aria-label={t(
+ 'profile.accessibility.input_water_alert_report'
+ )}
+ inputMode="numeric"
+ />
+ <span className="switch-label text-16-normal">L</span>
+ </div>
+ {maxDayData && (
+ <div className="alert-input-subtext text-14">
+ {t('profile.report.input_label_subtext_alert')}
+ {Math.round(maxDayData.value)}
+ {' L'}
+ </div>
+ )}
+ </>
+ )}
+ </div>
)}
</div>
</div>
diff --git a/src/components/Options/ReportOptions/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
index e6da9654a..58ab12b6b 100644
--- a/src/components/Options/ReportOptions/reportOptions.scss
+++ b/src/components/Options/ReportOptions/reportOptions.scss
@@ -1,5 +1,6 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
+
.report-option-root {
display: flex;
flex-direction: column;
@@ -8,48 +9,40 @@
padding: 0 1.5rem;
margin-top: 2rem;
.report-option-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
+ max-width: 45.75rem;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
}
.head {
color: $grey-bright;
margin-bottom: 1rem;
}
- .switch-container-bilan {
- display: flex;
- flex-direction: column;
- color: $grey-bright;
- margin-bottom: 2rem;
- .switch-label {
- margin-left: 0.2rem;
- padding-right: 0.8rem;
- }
- .button-container {
- max-width: 200px;
- button {
- width: 125px;
- margin-top: 0.75rem;
- }
- }
- }
- .waterAlert {
+ .reportCard {
+ border: 1px solid #383941;
+ border-radius: 4px;
+ padding: 12px 16px;
display: flex;
flex-direction: column;
- gap: 1rem;
+ gap: 10px;
color: $grey-bright;
-
- .switch-container-alert {
- color: $grey-bright;
+ .row {
display: flex;
+ flex-direction: row;
align-items: center;
- gap: 0.5rem;
}
+ }
- .alert-input-subtext {
- color: $soft-grey;
- }
+ .switch-container-alert {
+ color: $grey-bright;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ .alert-input-subtext {
+ color: $soft-grey;
}
}
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index f4e64582f..eee51c9ad 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -159,37 +159,50 @@ exports[`OptionsView component should be rendered correctly 1`] = `
class="report-option-content"
>
<div
- class="head text-16-normal-uppercase"
- >
- profile.report.title_bilan
- </div>
- <div
- class="switch-container-bilan"
+ class="reportCard"
>
- <span
- class="switch-label text-16-normal"
- >
- profile.report.switch_label_bilan
- </span>
<div
- class="button-container"
+ class="row"
>
- <button
- aria-label="unsubscribe.button_accessibility"
- class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained"
- tabindex="0"
- type="button"
+ <span
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-3"
>
<span
- class="MuiButton-label text-18-bold"
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-7 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-4 MuiSwitch-colorSecondary PrivateSwitchBase-checked-8 Mui-checked WithStyles(ForwardRef(Switch))-checked-5"
>
- profile.report.deactivate
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ checked=""
+ class="PrivateSwitchBase-input-10 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
</span>
<span
- class="MuiTouchRipple-root"
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-6"
/>
- </button>
+ </span>
+ <span
+ class="text-16-normal-uppercase"
+ >
+ profile.report.title_bilan
+ </span>
</div>
+ <span
+ class="text-16-normal"
+ >
+ profile.report.switch_label_bilan
+ </span>
</div>
</div>
</div>
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 56927c973..76f03a79a 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -967,14 +967,12 @@
},
"profile": {
"report": {
+ "title_bilan": "Inscription à la lettre mensuelle",
+ "switch_label_bilan": "Recevoir mon bilan de consommation et des conseils",
"title_alert": "Alerte Consommation Excessive d'Eau",
- "title_bilan": "Notification par mail",
- "switch_label_bilan": "Je reçois la lettre mensuelle contenant un bilan et des conseils sur ma consommation.",
"switch_label_alert": "Être prévenu d’un dépassement anormal de ma consommation d’eau",
"input_label_alert": "Si ma consommation d’eau quotidienne dépasse :",
- "input_label_subtext_alert": "Votre consommation quotidienne maximum sur les 6 derniers mois\u00a0: ",
- "activate": "Activer",
- "deactivate": "Désactiver"
+ "input_label_subtext_alert": "Votre consommation quotidienne maximum sur les 6 derniers mois\u00a0: "
},
"accessibility": {
"button_toggle_mail_report": "Recevoir mon bilan mensuel par mail",
--
GitLab