diff --git a/src/notifications/monthlyReport.hbs b/src/notifications/monthlyReport.hbs
index ea0a22d1e577cb822e8a510501ebbabd36c61a8b..0ed4363828c25b93ca5215b1256734d126e2aab6 100644
--- a/src/notifications/monthlyReport.hbs
+++ b/src/notifications/monthlyReport.hbs
@@ -5,15 +5,15 @@
<mj-style>
.elec-text {
color: #d87b39 !important;
- font-weight: bold !important;
+ font-weight: normal !important;
}
.gas-text {
color: #45d1b8 !important;
- font-weight: bold !important;
+ font-weight: normal !important;
}
.water-text {
color: #3a98ec !important;
- font-weight: bold !important;
+ font-weight: normal !important;
}
</mj-style>
</mj-head>
@@ -22,22 +22,20 @@
{{/base/header}}
<mj-section background-color="#121212">
- <mj-column width="60%" vertical-align="middle">
+ <mj-column width="55%" vertical-align="middle">
<mj-text color="white" font-weight="900" font-size="24px">
Bonjour {{username}},
</mj-text>
{{#if consumptionTextExist }}
- <mj-text color="white" font-weight="400" font-size="18px">Ce mois-ci vous avez consommé {{{consumptionText}}} par rapport au mois de {{previousMonth}}. <br /><br /> Retrouvez le détail de vos consommations et plus d'informations dans votre bilan Ecolyo.</mj-text>
+ <mj-text color="white" font-weight="400" font-size="18px">Par rapport au mois {{previousMonth}}, vous avez consommé :{{{consumptionText}}}<br /></mj-text>
{{/if}}
- {{#unless consumptionTextExist }}
- <mj-text color="white" font-weight="400" font-size="18px">Retrouvez le détail de vos consommations et plus d'informations dans votre bilan Ecolyo.</mj-text>
- {{/unless}}
</mj-column>
- <mj-column width="40%" vertical-align="middle">
+ <mj-column width="45%" vertical-align="middle">
<mj-image src={{consoImageUrl}} width="132px" align="center" alt="consomation"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#121212">
+ <mj-text color="white" font-weight="400" font-size="18px">Retrouvez le détail de vos consommations et plus d'informations dans votre bilan Ecolyo.<br /><br /></mj-text>
<mj-column>
<mj-social css-class="button-with-icon" icon-size="36px" mode="horizontal" font-size="20px" font-weight="700" >
<mj-social-element src="{{baseUrl}}/assets/ecolyo-icon.png" name="ecolyo" padding="0 10px 0 0" href="{{clientUrl}}">
@@ -52,27 +50,37 @@
L'info du mois
</mj-text>
<mj-image src="{{infoImage}}" width="82px" alt="nouveauté"></mj-image>
- <mj-text color="white" font-weight="400" font-size="18px" align="center" css-class="custom-link">{{{infoText}}}</mj-text>
+ <mj-text color="white" font-weight="400" font-size="18px" css-class="custom-link">{{{infoText}}}</mj-text>
{{#if isServiceNews}}
<mj-divider css-class="m-divider"></mj-divider>
<mj-text css-class="title custom-link" color="white" font-weight="900" font-size="24px" align="center" >
{{newsTitle}}
</mj-text>
- <mj-text color="white" font-weight="400" font-size="18px" align="center" css-class="custom-link" >{{{newsContent}}}</mj-text>
+ <mj-text color="white" font-weight="400" font-size="18px" css-class="custom-link" >{{{newsContent}}}</mj-text>
{{/if}}
{{#if isPoll}}
<mj-divider css-class="m-divider"></mj-divider>
<mj-text css-class="title " color="white" font-weight="900" font-size="24px" align="center" >
Votre avis nous intéresse
</mj-text>
- <mj-text color="white" font-weight="400" font-size="18px" align="center" css-class="custom-link" >{{{pollText}}}</mj-text>
+ <mj-text color="white" font-weight="400" font-size="18px" css-class="custom-link" >{{{pollText}}}</mj-text>
<mj-button color="black" background-color="#F1C017" css-class="button" font-size="20px" font-weight="700" >
<a href="{{pollUrl}}" style="text-decoration: none; color: black">C'est parti !</a>
</mj-button>
{{/if}}
</mj-column>
</mj-section>
-
+ <mj-section background-color="#121212">
+ <mj-column width="40%" vertical-align="middle">
+ <mj-image src={{feedbackImageUrl}} width="53px" align="center" alt="feedback"></mj-image>
+ </mj-column>
+ <mj-text color="white" font-weight="900" align="center" font-size="18px">
+ Un problème, une question, une suggestion ?
+ </mj-text>
+ <mj-text color="white" align="center" font-size="18px">
+ N'hésitez pas à nous écrire via la bulle dans le service.
+ </mj-text>
+ </mj-section>
<mj-section background-color="black">
<mj-column>
{{#> base/footer}}
@@ -82,5 +90,4 @@
</mj-column>
</mj-section>
</mj-body>
-</mjml>
-
+</mjml>
\ No newline at end of file
diff --git a/src/notifications/style.hbs b/src/notifications/style.hbs
index 47bc896a98c723d236929371973da3e90194d508..e3eda4f4d1bf833aab71e90678bd58aa0889b6f5 100644
--- a/src/notifications/style.hbs
+++ b/src/notifications/style.hbs
@@ -15,11 +15,12 @@
.m-divider p { margin: 60px 0 54px 0 !important; }
</mj-style>
<mj-style>
- .button table { background-color: #F1C017 !important; margin: 10px !important
- } .button-with-icon td { padding-right: 10px !important; } .button-with-icon
- table { background-color: #F1C017 !important; margin: 10px !important; }
+ .button table { background-color: #F1C017 !important; margin: 10px !important;
+ } .button-with-icon td { padding-right: 1px !important; } .button-with-icon
+ table { background-color: #F1C017 !important; margin-left: 10px !important; margin-right: 10px !important; }
.button-with-icon span { vertical-align: middle !important; }
- .button-with-icon a { vertical-align: middle !important; }
+ .button-with-icon a { vertical-align: middle !important; padding-right: 10px !important;}
+ .button-with-icon a img { padding-top: 20px;}
</mj-style>
<mj-style>
.custom-link a { color: #F1C017 !important; text-decoration: none !important;
diff --git a/src/styles/index.css b/src/styles/index.css
index 049ceff4849fb46ae394e1707c1a164e3ac5db92..9e1b70aab157ae4e9f6c485cc9310d15b259c173 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -38,31 +38,36 @@ body {
width: 100%;
display: flex;
align-items: center;
- justify-content: center; }
+ justify-content: center;
+ margin-left: 0; }
+ @media only screen and (max-width: 768px) {
+ /* line 24, src/styles/base/_layout.scss */
+ .cozy-bar {
+ margin-left: 1.25rem; } }
-/* line 31, src/styles/base/_layout.scss */
+/* line 35, src/styles/base/_layout.scss */
[role='banner'] .coz-bar-container {
background-color: #ffffff; }
@media only screen and (max-width: 768px) {
- /* line 31, src/styles/base/_layout.scss */
+ /* line 35, src/styles/base/_layout.scss */
[role='banner'] .coz-bar-container {
padding: 0 0 0 0;
background-color: unset; } }
-/* line 39, src/styles/base/_layout.scss */
+/* line 43, src/styles/base/_layout.scss */
.coz-bar-wrapper {
box-shadow: unset !important;
background: unset !important; }
-/* line 43, src/styles/base/_layout.scss */
+/* line 47, src/styles/base/_layout.scss */
.cv-button {
width: 4.25rem; }
-/* line 46, src/styles/base/_layout.scss */
+/* line 50, src/styles/base/_layout.scss */
.coz-label {
color: #32363f; }
-/* line 50, src/styles/base/_layout.scss */
+/* line 54, src/styles/base/_layout.scss */
.header {
display: flex;
align-items: center;
@@ -74,63 +79,63 @@ body {
top: 48px;
left: 0; }
@media only screen and (max-width: 768px) {
- /* line 50, src/styles/base/_layout.scss */
+ /* line 54, src/styles/base/_layout.scss */
.header {
top: 0; } }
- /* line 63, src/styles/base/_layout.scss */
+ /* line 67, src/styles/base/_layout.scss */
.header .header-top {
background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
width: 100%; }
- /* line 70, src/styles/base/_layout.scss */
+ /* line 74, src/styles/base/_layout.scss */
.header .header-top .header-text {
padding: 0 1rem 1rem 1rem;
color: #e0e0e0; }
- /* line 75, src/styles/base/_layout.scss */
+ /* line 79, src/styles/base/_layout.scss */
.header .header-content {
margin: 0 0 0 220px;
display: flex;
flex-direction: column; }
@media only screen and (max-width: 1023px) {
- /* line 75, src/styles/base/_layout.scss */
+ /* line 79, src/styles/base/_layout.scss */
.header .header-content {
margin: 0; } }
@media only screen and (max-width: 768px) {
- /* line 75, src/styles/base/_layout.scss */
+ /* line 79, src/styles/base/_layout.scss */
.header .header-content {
margin: 60px 0 0 0; } }
- /* line 85, src/styles/base/_layout.scss */
+ /* line 89, src/styles/base/_layout.scss */
.header .header-content .header-content-top {
display: flex;
flex-direction: row; }
- /* line 88, src/styles/base/_layout.scss */
+ /* line 92, src/styles/base/_layout.scss */
.header .header-content .header-content-top.header-content-top-right {
justify-content: flex-end; }
- /* line 91, src/styles/base/_layout.scss */
+ /* line 95, src/styles/base/_layout.scss */
.header .header-content .header-content-top .header-text {
padding: 2rem 1rem;
flex: 1; }
- /* line 95, src/styles/base/_layout.scss */
+ /* line 99, src/styles/base/_layout.scss */
.header .header-content .header-content-top .header-text-desktop {
display: flex;
flex: 1;
padding: 2rem 1.25rem;
color: #e0e0e0; }
- /* line 101, src/styles/base/_layout.scss */
+ /* line 105, src/styles/base/_layout.scss */
.header .header-content .header-content-top .header-back-button {
padding: 0 0.75rem; }
@media only screen and (max-width: 768px) {
- /* line 105, src/styles/base/_layout.scss */
+ /* line 109, src/styles/base/_layout.scss */
.header .header-content .header-content-top .header-text {
padding: 0 1rem 1rem 1rem;
color: #e0e0e0; }
- /* line 109, src/styles/base/_layout.scss */
+ /* line 113, src/styles/base/_layout.scss */
.header .header-content .header-content-top .header-text-desktop {
display: none; }
- /* line 112, src/styles/base/_layout.scss */
+ /* line 116, src/styles/base/_layout.scss */
.header .header-content .header-content-top .header-feedbacks-button {
display: none; } }
-/* line 120, src/styles/base/_layout.scss */
+/* line 124, src/styles/base/_layout.scss */
.content-view-loading {
height: 80vh;
width: 100%;
@@ -139,28 +144,28 @@ body {
justify-content: center;
align-items: center;
color: #e0e0e0; }
- /* line 128, src/styles/base/_layout.scss */
+ /* line 132, src/styles/base/_layout.scss */
.content-view-loading .content-view-loading-text {
padding-top: 1rem;
margin: 0 2rem;
text-align: center; }
- /* line 133, src/styles/base/_layout.scss */
+ /* line 137, src/styles/base/_layout.scss */
.content-view-loading .content-view-loading-button {
max-width: 50vw;
margin-top: 1rem; }
-/* line 139, src/styles/base/_layout.scss */
+/* line 143, src/styles/base/_layout.scss */
[role='main'] {
/* width */
/* Track */
/* Handle */ }
- /* line 141, src/styles/base/_layout.scss */
+ /* line 145, src/styles/base/_layout.scss */
[role='main']::-webkit-scrollbar {
width: 10px; }
- /* line 145, src/styles/base/_layout.scss */
+ /* line 149, src/styles/base/_layout.scss */
[role='main']::-webkit-scrollbar-track {
background: #3e4045; }
- /* line 149, src/styles/base/_layout.scss */
+ /* line 153, src/styles/base/_layout.scss */
[role='main']::-webkit-scrollbar-thumb {
background: #6f7074; }
@@ -1389,7 +1394,3 @@ a.MuiTypography-colorPrimary {
.application {
overflow-x: hidden;
background-color: #121212; }
- @media only screen and (max-width: 768px) {
- /* line 55, src/styles/index.scss */
- .application {
- min-height: 100vh; } }
diff --git a/src/targets/services/monthlyReportNotification.ts b/src/targets/services/monthlyReportNotification.ts
index e6f0e0b3331cfaee35c3b564f03611f11615aa4f..630f7381ef80300a049c2d1b3572e3a80c388935 100644
--- a/src/targets/services/monthlyReportNotification.ts
+++ b/src/targets/services/monthlyReportNotification.ts
@@ -13,7 +13,7 @@ import { TimeStep } from 'enum/timeStep.enum'
import ConsumptionService from 'services/consumption.service'
import { MonthlReport } from 'models/monthlyReport.model'
import EnvironmentService from 'services/environment.service'
-import { getMonthNameWithPrep, getPreviousMonthName } from 'utils/utils'
+import { getMonthNameWithPrep } from 'utils/utils'
const log = logger.namespace('report')
@@ -71,12 +71,12 @@ const buildConsumptionText = async (client: Client) => {
if (value) {
if (value > 0) {
text +=
- '<span class="elec-text">- ' +
+ '<span class="elec-text"><br>- ' +
Math.ceil(value * 100) +
" % d'électricité</span>"
} else {
text +=
- '<span class="elec-text">+ ' +
+ '<span class="elec-text"><br>+ ' +
Math.ceil(Math.abs(value * 100)) +
" % d'électricité</span>"
}
@@ -89,17 +89,14 @@ const buildConsumptionText = async (client: Client) => {
? consumption[FluidType.GAS].percentageVariation
: 0
if (value) {
- if (text.length > 0) {
- text += ', '
- }
if (value > 0) {
text +=
- '<span class="gas-text">- ' +
+ '<span class="gas-text"><br>- ' +
Math.ceil(value * 100) +
' % de gaz</span>'
} else {
text +=
- '<span class="gas-text">+ ' +
+ '<span class="gas-text"><br>+ ' +
Math.ceil(Math.abs(value * 100)) +
' % de gaz</span>'
}
@@ -110,17 +107,14 @@ const buildConsumptionText = async (client: Client) => {
? consumption[FluidType.WATER].percentageVariation
: 0
if (value) {
- if (text.length > 0) {
- text += ', '
- }
if (value > 0) {
text +=
- '<span class="water-text">- ' +
+ '<span class="water-text"><br>- ' +
Math.ceil(value * 100) +
" % d'eau</span>"
} else {
text +=
- '<span class="water-text">+ ' +
+ '<span class="water-text"><br>+ ' +
Math.ceil(Math.abs(value * 100)) +
" % d'eau</span>"
}
@@ -285,13 +279,14 @@ const monthlyReportNotification = async ({
),
pollText: monthlyReport.question.replace(/{cozyUrl}/g, appLink + '#/'),
pollUrl: monthlyReport.link,
- previousMonth: getPreviousMonthName(date.minus({ month: 1 })),
+ previousMonth: getMonthNameWithPrep(date.minus({ month: 1 })),
consoImageUrl: baseUrl + '/assets/multifluidConsumption.png',
+ feedbackImageUrl: baseUrl + '/assets/feedback.png',
})
const mailData = {
mode: 'noreply',
- subject: `[Ecolyo] - Votre bilan mensuel ${getMonthNameWithPrep(date)} ${
+ subject: `[Ecolyo] Votre bilan mensuel ${getMonthNameWithPrep(date)} ${
date.year
}`,
parts: [
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 7367f265008945b7ed7d88a7e4aa18b5d9f92942..9489a28f540e8c99dc726b41fc2d2a4aa01a2248 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -132,7 +132,7 @@ export const importIconbyId = async (id: string, pathType: string) => {
*/
export const getPreviousMonthName = (date: DateTime) => {
const monthNames = [
- 'janiver',
+ 'janvier',
'février',
'mars',
'avril',