feat(emails): add email layout to make them prettier

README.md

@@ -98,9 +98,7 @@ Or if you want some live-reload:
 yarn dev
 ```
 
-## Useful scripts
-
-### Send daily notification emails
+## Email notifications
 
 Tickets bundles a script to send notification emails to members.
 You should consider executing this script once a day, at the end of the day.
@@ -111,6 +109,27 @@ node scripts/send-notification-emails.js
 
 Pro-tips: use `crontab -e`
 
+When improving emails and to make sure the email is properly rendered, you can start [Greenmail](https://greenmail-mail-test.github.io/greenmail/) and [Roundcube](https://roundcube.net/) with `docker-compose up`.
+This will setup a SMTP/IMAP server and a WebUI for test purposes.
+
+Then properly set your local environment:
+```
+SMTP_HOST=localhost
+SMTP_PORT=33025
+SMTP_USER=anyUser
+SMTP_PASS=anyPassword
+```
+
+You should use the following command to take into account the local config when sending emails:
+```bash
+node --env-file .env scripts/send-notification-emails.js
+```
+
+Once emails have been sent, you can read them at http://localhost:38000.
+Enter the receiver email and any password as credentials to check its mailbox.
+
+If you want to quickly test the rendered result on multiple email client, go to https://testi.at/.
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

docker-compose.yml

@@ -11,5 +11,29 @@ services:
     volumes:
       - mongodb_data:/data/db
 
+  greenmail:
+    image: greenmail/standalone:1.6.14
+    container_name: tickets-backend-greenmail
+    environment:
+      - GREENMAIL_OPTS=-Dgreenmail.hostname=0.0.0.0 -Dgreenmail.setup.test.smtp -Dgreenmail.setup.test.imap -Dgreenmail.auth.disabled
+    ports:
+      - "33025:3025" # SMTP
+      - "33143:3143" # IMAP
+
+  roundcube:
+    image: roundcube/roundcubemail:1.6.1-apache
+    container_name: tickets-backend-roundcube
+    depends_on:
+      - greenmail
+    ports:
+      - "38000:80"
+      - "39000:9000"
+    environment:
+      ROUNDCUBEMAIL_DEFAULT_HOST: greenmail  # IMAP server
+      ROUNDCUBEMAIL_DEFAULT_PORT: 3143       # IMAP port
+      ROUNDCUBEMAIL_SMTP_SERVER: greenmail   # SMTP server
+      ROUNDCUBEMAIL_SMTP_PORT: 3025          # SMTP port
+
+
 volumes:
   mongodb_data:

lib/emails/fin-abonnement.js

@@ -1,17 +1,23 @@
-function render() {
-  return {
-    subject: 'Dernier jour de l\'abonnement',
-    text: `Bonjour,
-
-Votre dernier jour d’abonnement est arrivé à échéance.
+import process from 'node:process'
+import {renderHtmlLayout, button, alert, spacer, theme} from './layout.js'
 
-Comme je sais que nous allons être amenés à nous recroiser prochainement, voici le lien pour rempiler en abonnement ou en tickets :
-https://www.coworking-metz.fr/la-boutique/
+const WORDPRESS_BASE_URL = process.env.WORDPRESS_BASE_URL || 'https://www.coworking-metz.fr'
 
-Marie-Poule du Poulailler
-
-PS: n’hésitez pas à nous contacter si vous rencontrez le moindre problème !
-`
+function render() {
+  return {
+    subject: 'Abonnement arrivé à échéance',
+    html: renderHtmlLayout(`Bonjour,<br />
+<br />
+Vous continuez de venir au Coworking et nous apprécions votre visite.<br />
+Cependant, il semble que <strong>votre abonnement soit arrivé à échéance</strong>.
+Vous pouvez le renouveler en quelques clics à partir de la boutique :
+${button('RENOUVELER MON ABONNEMENT', new URL('/boutique/pass-resident/', WORDPRESS_BASE_URL).toString())}
+Merci pour votre compréhension et votre soutien 🫶<br />
+<br />
+À bientôt,<br />
+L'équipe du Poulailler
+${alert(`🙋‍♀️ Si vous rencontrez le moindre problème, contactez-nous à <a style="font-weight: medium; text-decoration: underline; color: ${theme.meatBrown}" href="mailto:[email protected]">[email protected]</a> ou répondez à cet e-mail. Nous sommes là pour vous aider.`, spacer(20), '')}
+`)
   }
 }