From c8f346506ea8ae0613a5c80a4c4dcd5e9967b7b6 Mon Sep 17 00:00:00 2001
From: Hugo Subtil <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 25 Oct 2021 17:30:35 +0200
Subject: [PATCH] fix(email): update font handling + issue on title
---
src/notifications/base/header.hbs | 4 ++-
src/notifications/consumptionLimit.hbs | 8 ++---
src/notifications/monthlyReport.hbs | 30 ++++++++++---------
src/notifications/style.hbs | 26 ++++++++++++++++
.../services/monthlyReportNotification.ts | 20 ++++++-------
5 files changed, 59 insertions(+), 29 deletions(-)
diff --git a/src/notifications/base/header.hbs b/src/notifications/base/header.hbs
index 103fe47d8..50a39c65d 100644
--- a/src/notifications/base/header.hbs
+++ b/src/notifications/base/header.hbs
@@ -12,8 +12,10 @@
src="{{baseUrl}}/assets/ecolyo-icon.png"
name="ecolyo"
padding="0 10px 0 0"
+ font-family="Lato"
+ align="center"
>
- Du nouveau dans mon espace ecolyo
+ {{title}}
</mj-social-element>
</mj-social>
</mj-section>
diff --git a/src/notifications/consumptionLimit.hbs b/src/notifications/consumptionLimit.hbs
index da6f3c765..e3bebd4ef 100644
--- a/src/notifications/consumptionLimit.hbs
+++ b/src/notifications/consumptionLimit.hbs
@@ -9,10 +9,10 @@
<mj-section background-color="#121212">
<mj-column width="60%" vertical-align="middle">
- <mj-text color="white" font-weight="900" font-size="24px">
+ <mj-text color="white" font-weight="900" font-size="24px" font-family="Lato">
Bonjour {{username}},
</mj-text>
- <mj-text color="white" font-weight="400" font-size="18px">
+ <mj-text color="white" font-weight="400" font-size="18px" font-family="Lato">
La limite de consommation d'eau journalière que vous avez fixée à {{userLimit}} L a été dépassée le {{limitDate}}.<br />
Pour comprendre ce qu’il s’est passé, rendez-vous dans Ecolyo.
</mj-text>
@@ -26,11 +26,11 @@
<mj-section background-color="#121212">
<mj-column>
<mj-social css-class="button-with-icon" icon-size="36px" mode="horizontal" font-size="20px" font-weight="700" font-family="Lato">
- <mj-social-element src="{{baseUrl}}/assets/ecolyo-icon.png" name="ecolyo" padding="0 10px 0 0" href="{{clientUrl}}">
+ <mj-social-element src="{{baseUrl}}/assets/ecolyo-icon.png" name="ecolyo" font-family="Lato" padding="0 10px 0 0" href="{{clientUrl}}">
Voir dans Ecolyo
</mj-social-element>
</mj-social>
- <mj-text color="white" font-weight="400" font-size="18px" align="center">
+ <mj-text color="white" font-weight="400" font-size="18px" align="center" font-family="Lato">
Vous souhaitez modifier votre seuil d'alerte ou supprimer cette notification ? <a href="{{unsubscribeUrl}}" style="color: #E3B82A; font-weight: 900 !important;">C'est ici</a>
</mj-text>
</mj-column>
diff --git a/src/notifications/monthlyReport.hbs b/src/notifications/monthlyReport.hbs
index 6bd573423..095a428fb 100644
--- a/src/notifications/monthlyReport.hbs
+++ b/src/notifications/monthlyReport.hbs
@@ -23,21 +23,21 @@
<mj-section background-color="#121212">
<mj-column width="60%" vertical-align="middle">
- <mj-text color="white" font-weight="900" font-size="24px">
+ <mj-text color="white" font-weight="900" font-family="Lato" 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-family="Lato" 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>
{{/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>
+ <mj-text color="white" font-weight="400" font-family="Lato" 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-image src={{consoImageUrl}} width="132px" align="center" alt="consomation"></mj-image>
</mj-column>
</mj-section>
- <mj-section background-color="#121212">
+ <mj-section background-color="#121212">
<mj-column>
<mj-social css-class="button-with-icon" icon-size="36px" mode="horizontal" font-size="20px" font-weight="700" font-family="Lato">
<mj-social-element src="{{baseUrl}}/assets/ecolyo-icon.png" name="ecolyo" padding="0 10px 0 0" href="{{clientUrl}}">
@@ -48,24 +48,24 @@
</mj-section>
<mj-section background-color="radial-gradient(96.2% 96.2% at 50% 3.8%, #343641 0%, #1B1C22 100%)">
<mj-column>
- <mj-text css-class="title" color="white" font-weight="900" font-size="24px" align="center">
+ <mj-text css-class="title" color="white" font-weight="900" font-size="24px" align="center" font-family="Lato">
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" font-family="Lato" align="center" 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">
+ <mj-text css-class="title custom-link" color="white" font-weight="900" font-size="24px" align="center" font-family="Lato">
{{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" align="center" css-class="custom-link" font-family="Lato">{{{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">
+ <mj-text css-class="title " color="white" font-weight="900" font-size="24px" align="center" font-family="Lato">
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" align="center" css-class="custom-link" font-family="Lato">{{{pollText}}}</mj-text>
<mj-button color="black" background-color="#F1C017" css-class="button" font-size="20px" font-weight="700" font-family="Lato">
<a href="{{pollUrl}}" style="text-decoration: none; color: black">C'est parti !</a>
</mj-button>
@@ -74,10 +74,12 @@
</mj-section>
<mj-section background-color="black">
- {{#> base/footer}}
- {{/base/footer}}
- {{#> base/unsubscribe}}
- {{/base/unsubscribe}}
+ <mj-column>
+ {{#> base/footer}}
+ {{/base/footer}}
+ {{#> base/unsubscribe}}
+ {{/base/unsubscribe}}
+ </mj-column>
</mj-section>
</mj-body>
</mjml>
diff --git a/src/notifications/style.hbs b/src/notifications/style.hbs
index ab4ae97fa..89b7ee59d 100644
--- a/src/notifications/style.hbs
+++ b/src/notifications/style.hbs
@@ -18,6 +18,7 @@
.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-with-icon span { vertical-align: middle !important; }
</mj-style>
<mj-style>
.custom-link a { color: #F1C017 !important; text-decoration: none !important;
@@ -28,4 +29,29 @@
.text-and-image img { vertical-align: middle!important; margin-right:
12px!important }
</mj-style>
+<mj-attributes>
+ <mj-all font-family="Lato, sans-serif" font-size="16px" />
+</mj-attributes>
<mj-font name="Lato" href="https://fonts.googleapis.com/css?family=Lato" />
+<mj-style>
+ @font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+ }
+ @font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+ }
+ @font-face {
+ font-family: 'Lato-Bold';
+ font-style: normal;
+ font-weight: 800;
+ src: asset-url('Lato-Bold.woff2') format('woff2');
+ }
+</mj-style>
\ No newline at end of file
diff --git a/src/targets/services/monthlyReportNotification.ts b/src/targets/services/monthlyReportNotification.ts
index 62af59c32..d49333e6f 100644
--- a/src/targets/services/monthlyReportNotification.ts
+++ b/src/targets/services/monthlyReportNotification.ts
@@ -71,13 +71,13 @@ const buildConsumptionText = async (client: Client) => {
if (value) {
if (value > 0) {
text +=
- '<span class="elec-text">+' +
+ '<span class="elec-text">+ ' +
(value * 100).toFixed(2) +
" % d'électricité</span>"
} else {
text +=
- '<span class="elec-text">' +
- (value * 100).toFixed(2) +
+ '<span class="elec-text">- ' +
+ Math.abs(value * 100).toFixed(2) +
" % d'électricité</span>"
}
}
@@ -94,13 +94,13 @@ const buildConsumptionText = async (client: Client) => {
}
if (value > 0) {
text +=
- '<span class="gas-text">+' +
+ '<span class="gas-text">+ ' +
(value * 100).toFixed(2) +
' % de gaz</span>'
} else {
text +=
- '<span class="gas-text">' +
- (value * 100).toFixed(2) +
+ '<span class="gas-text">- ' +
+ Math.abs(value * 100).toFixed(2) +
' % de gaz</span>'
}
}
@@ -115,13 +115,13 @@ const buildConsumptionText = async (client: Client) => {
}
if (value > 0) {
text +=
- '<span class="water-text">+' +
+ '<span class="water-text">+ ' +
(value * 100).toFixed(2) +
" % d'eau</span>"
} else {
text +=
- '<span class="water-text">' +
- (value * 100).toFixed(2) +
+ '<span class="water-text">- ' +
+ Math.abs(value * 100).toFixed(2) +
" % d'eau</span>"
}
}
@@ -291,7 +291,7 @@ const monthlyReportNotification = async ({
const mailData = {
mode: 'noreply',
- subject: `[Ecolyo] - Votre bilan mensuel du ${getMonthNameWithPrep(date)}-${
+ subject: `[Ecolyo] - Votre bilan mensuel ${getMonthNameWithPrep(date)} ${
date.year
}`,
parts: [
--
GitLab