WIP: Add email notifications

.env

@@ -47,3 +47,6 @@ APP_BPN_ENDPOINT=
 APP_BPN_CRM_ID_ADMIN=1292
 APP_BPN_CRM_ID_MANAGER=1293
 APP_BPN_CRM_ID_TEAMER=1070
+
+APP_DEFAULT_EMAIL_FROM=[email protected]
+APP_DEFAULT_EMAIL_TO=[email protected]

assets/mjml/layout.mjml

@@ -0,0 +1,101 @@
+<mjml>
+    <mj-head>
+        <mj-font name="Lato" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" />
+        <mj-preview>MyE&amp;P Team</mj-preview>
+        <mj-title>MyE&amp;P Team</mj-title>
+        <mj-attributes>
+            <mj-all font-family="Lato, Verdana, Arial, 'Helvetica neue', sans-serif" />
+        </mj-attributes>
+        <mj-style>
+            h1 {
+                font-weight: bold;
+                font-size: 32px;
+                line-height: 36px;
+                margin-bottom: 0;
+                padding-bottom: 16px;
+            }
+            h2 {
+                font-weight: normal;
+                font-size: 24px;
+                line-height: 28px;
+                margin-bottom: 0;
+            }
+            p {
+                padding-bottom: 16px;
+            }
+            p.small {
+                font-size: 14px;
+                color: #999999;
+            }
+            a {
+                text-decoration: underline;
+                color: #5F7983;
+            }
+            a.footerlink {
+                text-decoration: none;
+                color: inherit;
+            }
+            a.button {
+                text-decoration: none;
+                color: white;
+                display: inline-block;
+                background-color: #3d8ccb;
+                padding: 8px 16px;
+                border-radius: 4px;
+            }
+        </mj-style>
+    </mj-head>
+    <mj-body background-color="#666666">
+        <mj-hero mode="fluid-height" height="285px" background-color="#FFFFFF" padding-top="20px" padding-bottom="20px">
+            <mj-image src="{{ email.image('@images/logo.png') }}" width="200px" align="left" alt="Logo E&P" />
+        </mj-hero>
+        <mj-section background-color="#FFFFFF" border-top="1px solid #3d8ccb">
+            <mj-column>
+                <mj-text font-size="16px" line-height="24px" color="#666666">
+                    {% block body %}
+                    <h1>
+                        Lorem ipsum dolor sit amet
+                    </h1>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa delectus dolores
+                        earum eius fugiat in nesciunt quas quidem vitae?
+                    </p>
+                    <h2>
+                        Lorem ipsum dolor
+                    </h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa delectus dolores
+                        earum eius fugiat in nesciunt quas quidem vitae?
+                    </p>
+                    <p>
+                        <a href="#" class="button">
+                            Button
+                        </a>
+                    </p>
+                    <p class="small">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, eveniet!
+                    </p>
+                    {% endblock %}
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section background-color="#3d8ccb">
+            <mj-column>
+                <mj-text color="#FFFFFF" font-size="14px" line-height="18px">
+                    E&amp;P Reisen und Events GmbH
+                    <br />
+                    Aachener Str. 326-328
+                    <br />
+                    50933 Köln
+                </mj-text>
+            </mj-column>
+            <mj-column>
+                <mj-text color="#FFFFFF" font-size="14px">
+                    <a href="https://www.ep-reisen.de/unternehmen/impressum-skireiseveranstalter/" title="E&P Impressum" class="footerlink" target="_blank">Impressum</a>
+                    <span>|</span>
+                    <a href="https://www.ep-reisen.de/unternehmen/impressum-skireiseveranstalter/datenschutz-winterreisen/" title="E&P Datenschutz" class="footerlink" target="_blank">Datenschutz</a>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

config/services.yaml

@@ -7,6 +7,9 @@ parameters:
     bpn_crm_id_manager: '%env(int:APP_BPN_CRM_ID_MANAGER)%'
     bpn_crm_id_teamer: '%env(int:APP_BPN_CRM_ID_TEAMER)%'
 
+    default_email_from: '%env(APP_DEFAULT_EMAIL_FROM)%'
+    default_email_to: '%env(APP_DEFAULT_EMAIL_TO)%'
+
 services:
     _defaults:
         autowire: true
@@ -108,3 +111,7 @@ services:
     App\Service\Pdf\InvoiceRenderer:
         arguments:
             $options: { 'project_dir': '%kernel.project_dir%' }
+
+    App\Email\Mailer:
+        arguments:
+            $defaults: { 'from': '%default_email_from%', 'to': '%default_email_to%' }

package.json

@@ -14,6 +14,7 @@
         "dropzone": "^6.0.0-beta.2",
         "file-loader": "^6.2.0",
         "flatpickr": "^4.6.13",
+        "mjml": "^4.14.1",
         "postcss": "^8.4.29",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^7.3.3",
@@ -31,7 +32,8 @@
         "dev-server": "encore dev-server",
         "dev": "encore dev",
         "watch": "encore dev --watch",
-        "build": "encore production --progress"
+        "build": "encore production --progress",
+        "mjml": "mjml assets/mjml/layout.mjml -o templates/email/layout.html.twig"
     },
     "dependencies": {
         "sortablejs": "^1.15.0"

src/Email/Mailer.php

@@ -0,0 +1,97 @@
+<?php
+
+namespace App\Email;
+
+use App\Model\EmailAttachmentDto;
+use Psr\Log\LoggerInterface;
+use Symfony\Bridge\Twig\Mime\TemplatedEmail;
+use Symfony\Component\Mailer\Exception\TransportExceptionInterface;
+use Symfony\Component\Mailer\MailerInterface;
+use Symfony\Component\Mime\Address;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+class Mailer
+{
+    public function __construct(
+        private readonly MailerInterface $mailer,
+        private readonly TranslatorInterface $translator,
+        private readonly array $defaults,
+        private readonly LoggerInterface $logger
+    ) {
+    }
+
+    public function createAndSendEmail(array $context, array $options): void
+    {
+        $config = $this->resolveConfig($options);
+        $email = $this->create($context, $config);
+
+        $recipients = (array) $config['to'];
+
+        foreach ($recipients as $recipient) {
+            $email->to($recipient);
+            $this->send($email);
+        }
+    }
+
+    public function create(array $context, array $config): TemplatedEmail
+    {
+        $email = (new TemplatedEmail())
+            ->from($config['from'])
+            ->subject($this->translator->trans($config['subject'], $config['subject_parameters']))
+            ->htmlTemplate($config['template'])
+            ->context($context)
+        ;
+
+        foreach ($config['attachments'] as $attachment) {
+            /* @var EmailAttachmentDto $attachment */
+            $email->attach($attachment->getContent(), $attachment->getName(), $attachment->getMimeType());
+        }
+
+        return $email;
+    }
+
+    public function send(TemplatedEmail $email): void
+    {
+        $recipients = array_map(fn (Address $address) => $address->toString(), $email->getTo());
+
+        try {
+            $this->mailer->send($email);
+            $this->logger->info('Send email', [
+                'to' => $recipients,
+                'subject' => $email->getSubject(),
+            ]);
+        } catch (TransportExceptionInterface $e) {
+            $this->logger->error('Email could not be sent', [
+                'to' => $recipients,
+                'subject' => $email->getSubject(),
+                'error' => $e->getMessage(),
+            ]);
+        }
+    }
+
+    private function resolveConfig(array $options): array
+    {
+        $resolver = new OptionsResolver();
+
+        $resolver
+            ->setDefaults([
+                'from' => $this->defaults['from'],
+                'to' => $this->defaults['to'],
+                'subject_parameters' => [],
+                'attachments' => [],
+            ])
+            ->setRequired([
+                'template',
+                'subject',
+            ])
+            ->setAllowedTypes('to', ['string', 'array'])
+            ->setAllowedTypes('template', 'string')
+            ->setAllowedTypes('subject', 'string')
+            ->setAllowedTypes('subject_parameters', 'array')
+            ->setAllowedTypes('attachments', 'array')
+        ;
+
+        return $resolver->resolve($options);
+    }
+}

src/Email/WelcomeEmailMailer.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Email;
+
+use App\Entity\User;
+use Psr\Log\LoggerInterface;
+
+class WelcomeEmailMailer
+{
+    public function __construct(private readonly Mailer $mailer, private readonly LoggerInterface $logger)
+    {}
+
+    public function send(User $user): void
+    {
+        $this->mailer->createAndSendEmail([
+            'user' => $user,
+        ], [
+            'to' => $user->getEmail(),
+            'subject' => 'Willkommen bei MyE&P Team',
+            'template' => 'email/welcome.html.twig',
+        ]);
+
+        $this->logger->info('Send welcome email', [
+            'user_id' => $user->getId(),
+            'user_email' => $user->getEmail(),
+        ]);
+    }
+}

src/Model/EmailAttachmentDto.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Model;
+
+class EmailAttachmentDto
+{
+    public function __construct(private string $name, private string $content, private string $mimeType)
+    {
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function getContent(): string
+    {
+        return $this->content;
+    }
+
+    public function getMimeType(): string
+    {
+        return $this->mimeType;
+    }
+}

templates/email/layout.html.twig

@@ -0,0 +1,272 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <title>MyE&amp;P Team</title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }
+
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }
+
+    p {
+      display: block;
+      margin: 13px 0;
+    }
+
+  </style>
+  <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+  <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap);
+
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+
+      .mj-column-per-50 {
+        width: 50% !important;
+        max-width: 50%;
+      }
+    }
+
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }
+
+    .moz-text-html .mj-column-per-50 {
+      width: 50% !important;
+      max-width: 50%;
+    }
+
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:479px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }
+
+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }
+
+  </style>
+  <style type="text/css">
+    h1 {
+      font-weight: bold;
+      font-size: 32px;
+      line-height: 36px;
+      margin-bottom: 0;
+      padding-bottom: 16px;
+    }
+
+    h2 {
+      font-weight: normal;
+      font-size: 24px;
+      line-height: 28px;
+      margin-bottom: 0;
+    }
+
+    p {
+      padding-bottom: 16px;
+    }
+
+    p.small {
+      font-size: 14px;
+      color: #999999;
+    }
+
+    a {
+      text-decoration: underline;
+      color: #5F7983;
+    }
+
+    a.footerlink {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    a.button {
+      text-decoration: none;
+      color: white;
+      display: inline-block;
+      background-color: #3d8ccb;
+      padding: 8px 16px;
+      border-radius: 4px;
+    }
+
+  </style>
+</head>
+
+<body style="word-spacing:normal;background-color:#666666;">
+  <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">MyE&amp;P Team</div>
+  <div style="background-color:#666666;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->
+    <div style="margin:0 auto;max-width:600px;">
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr style="vertical-align:top;">
+            <td style="width:0.01%;padding-bottom:NaN%;mso-padding-bottom-alt:0;" />
+            <td style="background:#FFFFFF;background-position:center center;background-repeat:no-repeat;padding:0px;padding-top:20px;padding-bottom:20px;vertical-align:top;">
+              <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->
+              <div class="mj-hero-content" style="margin:0px auto;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
+                  <tbody>
+                    <tr>
+                      <td style="">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
+                          <tbody>
+                            <tr>
+                              <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                  <tbody>
+                                    <tr>
+                                      <td style="width:200px;">
+                                        <img alt="Logo E&P" src="{{ email.image('@images/logo.png') }}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200" height="auto" />
+                                      </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+            <td style="width:0.01%;padding-bottom:NaN%;mso-padding-bottom-alt:0;" />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+        <tbody>
+          <tr>
+            <td style="border-top:1px solid #3d8ccb;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Lato, Verdana, Arial, 'Helvetica neue', sans-serif;font-size:16px;line-height:24px;text-align:left;color:#666666;">{% block body %} <h1> Lorem ipsum dolor sit amet </h1>
+                          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa delectus dolores earum eius fugiat in nesciunt quas quidem vitae? </p>
+                          <h2> Lorem ipsum dolor </h2>
+                          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa delectus dolores earum eius fugiat in nesciunt quas quidem vitae? </p>
+                          <p>
+                            <a href="#" class="button"> Button </a>
+                          </p>
+                          <p class="small"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, eveniet! </p> {% endblock %}
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#3d8ccb" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#3d8ccb;background-color:#3d8ccb;margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3d8ccb;background-color:#3d8ccb;width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+              <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Lato, Verdana, Arial, 'Helvetica neue', sans-serif;font-size:14px;line-height:18px;text-align:left;color:#FFFFFF;">E&amp;P Reisen und Events GmbH <br /> Aachener Str. 326-328 <br /> 50933 Köln</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+              <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Lato, Verdana, Arial, 'Helvetica neue', sans-serif;font-size:14px;line-height:1;text-align:left;color:#FFFFFF;"><a href="https://www.ep-reisen.de/unternehmen/impressum-skireiseveranstalter/" title="E&P Impressum" class="footerlink" target="_blank">Impressum</a>
+                          <span>|</span>
+                          <a href="https://www.ep-reisen.de/unternehmen/impressum-skireiseveranstalter/datenschutz-winterreisen/" title="E&P Datenschutz" class="footerlink" target="_blank">Datenschutz</a>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
+</body>
+
+</html>

templates/email/welcome.html.twig

@@ -0,0 +1,15 @@
+{% extends 'email/layout.html.twig' %}
+
+{% block body %}
+    <h1>
+        Willkommen bei MyE&P Team
+    </h1>
+    <p>
+        Hallo {{ user.firstName }},
+    </p>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque, commodi deleniti
+        dignissimos dolorum earum ex facere facilis necessitatibus non omnis pariatur possimus quas repudiandae sit
+        soluta tenetur, voluptatem.
+    </p>
+{% endblock %}