Email HTML templates

.gitignore

@@ -28,3 +28,4 @@ dist/
 /static/
 /saleor/static/assets/
 webpack-bundle.json
+/templates/templated_email/html/compiled/

.travis.yml

@@ -14,6 +14,7 @@ install:
   - nvm install 8
   - npm i
   - npm run build-assets --production
+  - npm run build-emails
 script:
   - tox
 env:

circle.yml

@@ -14,6 +14,7 @@ machine:
 dependencies:
   pre:
     - npm install
+    - npm run build-emails
     - pip install -U pip
     - pip install -r requirements.txt
   override:

docs/gettingstarted/installation-linux.rst

@@ -163,6 +163,11 @@ Installation
 
     $ npm run build-assets
 
+#. Compile e-mails:
+
+   .. code-block:: bash
+
+    $ npm run build-emails
 
 #. Start the development server:
 

docs/gettingstarted/installation-macos.rst

@@ -152,6 +152,11 @@ Installation
 
     $ npm run build-assets
 
+#. Compile e-mails:
+
+   .. code-block:: bash
+
+    $ npm run build-emails
 
 #. Start the development server:
 

docs/gettingstarted/installation-windows.rst

@@ -124,6 +124,11 @@ All commands need to be performed in either PowerShell or a Command Shell.
 
     npm run build-assets
 
+#. Compile e-mails:
+
+   .. code-block:: powershell
+
+    $ npm run build-emails
 
 #. Start the development server:
 

package.json

@@ -60,6 +60,7 @@
     "eslint-plugin-standard": "^3.0.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
+    "mjml": "^3.3.5",
     "node-sass": "^4.7.2",
     "postcss": "^6.0.11",
     "postcss-loader": "^2.0.6",
@@ -88,6 +89,7 @@
   "scripts": {
     "build-assets": "node ./node_modules/webpack/bin/webpack.js -p --progress",
     "heroku-postbuild": "npm run build-assets",
-    "start": "UV_THREADPOOL_SIZE=8 node ./node_modules/webpack/bin/webpack.js -d --watch --progress"
+    "start": "UV_THREADPOOL_SIZE=8 node ./node_modules/webpack/bin/webpack.js -d --watch --progress",
+    "build-emails": "mkdir -p templates/templated_email/html/compiled/ && find templates -name \"*.mjml\" -not -path \"templates/templated_email/html/source/*partials/*\" -not -path \"templates/templated_email/html/source/*shared/*\" -exec ./node_modules/.bin/mjml -l skip {} -o templates/templated_email/html/compiled/ \\;"
   }
 }

saleor/dashboard/emails.py

@@ -2,19 +2,23 @@
 from django.conf import settings
 from django.contrib.auth.tokens import default_token_generator
 from django.contrib.sites.models import Site
+from django.urls import reverse
 from django.utils.encoding import force_bytes
 from django.utils.http import urlsafe_base64_encode
 from templated_email import send_templated_mail
 
+from ..core.utils import build_absolute_uri
+
 
 @shared_task
 def send_set_password_email(staff):
     site = Site.objects.get_current()
-    ctx = {'protocol': 'http',
-           'domain': site.domain,
-           'site_name': site.name,
-           'uid': urlsafe_base64_encode(force_bytes(staff.pk)).decode(),
-           'token': default_token_generator.make_token(staff)}
+    ctx = {
+        'protocol': 'https' if settings.ENABLE_SSL else 'http',
+        'domain': site.domain,
+        'site_name': site.name,
+        'uid': urlsafe_base64_encode(force_bytes(staff.pk)).decode(),
+        'token': default_token_generator.make_token(staff)}
     send_templated_mail(
         template_name='dashboard/staff/set_password',
         from_email=settings.DEFAULT_FROM_EMAIL,
@@ -25,7 +29,11 @@ def send_set_password_email(staff):
 @shared_task
 def send_promote_customer_to_staff_email(staff):
     site = Site.objects.get_current()
-    ctx = {'domain': site.domain, 'site_name': site.name}
+    ctx = {
+        'protocol': 'https' if settings.ENABLE_SSL else 'http',
+        'domain': site.domain,
+        'url': build_absolute_uri(reverse('dashboard:index')),
+        'site_name': site.name}
     send_templated_mail(
         template_name='dashboard/staff/promote_customer',
         from_email=settings.DEFAULT_FROM_EMAIL,

saleor/order/emails.py

@@ -8,19 +8,27 @@
 CONFIRM_NOTE_TEMPLATE = 'order/note/confirm_note'
 
 
-def _send_confirmation(email, url, template):
+def _send_confirmation(email, url, template, context=None):
     site = Site.objects.get_current()
+    ctx = {
+        'protocol': 'https' if settings.ENABLE_SSL else 'http',
+        'site_name': site.name,
+        'domain': site.domain,
+        'url': url}
+    if context:
+        ctx.update(context)
     send_templated_mail(
         from_email=settings.ORDER_FROM_EMAIL,
         recipient_list=[email],
-        context={'site_name': site.name,
-                 'url': url},
+        context=ctx,
         template_name=template)
 
 
 @shared_task
-def send_order_confirmation(email, url):
-    _send_confirmation(email, url, CONFIRM_ORDER_TEMPLATE)
+def send_order_confirmation(email, url, order_pk):
+    from .models import Order
+    order = Order.objects.get(pk=order_pk)
+    _send_confirmation(email, url, CONFIRM_ORDER_TEMPLATE, {'order': order})
 
 
 @shared_task

saleor/order/models.py

@@ -131,7 +131,7 @@ def send_confirmation_email(self):
         email = self.get_user_current_email()
         payment_url = build_absolute_uri(
             reverse('order:details', kwargs={'token': self.token}))
-        emails.send_order_confirmation.delay(email, payment_url)
+        emails.send_order_confirmation.delay(email, payment_url, self.pk)
 
     def get_last_payment_status(self):
         last_payment = self.payments.last()

saleor/registration/forms.py

@@ -1,10 +1,10 @@
 from django import forms
 from django.contrib.auth import forms as django_forms
-from django.http.request import HttpRequest
 from django.urls import reverse
 from django.utils.translation import pgettext, pgettext_lazy
 from templated_email import send_templated_mail
 
+from ..core.utils import build_absolute_uri
 from ..userprofile.models import User
 
 
@@ -48,10 +48,8 @@ def save(self, request=None, commit=True):
         return user
 
 
-class PasswordSetUpForm(django_forms.PasswordResetForm):
-    """
-        PasswordSetUpForm that overrides sending emails to use templated email.
-        Allows setting password for new users that have no usable password.
+class PasswordResetForm(django_forms.PasswordResetForm):
+    """PasswordResetForm that overrides sending emails to use templated email.
     """
 
     def get_users(self, email):
@@ -61,11 +59,11 @@ def get_users(self, email):
     def send_mail(
             self, subject_template_name, email_template_name, context,
             from_email, to_email, html_email_template_name=None):
-        reset_url = HttpRequest.build_absolute_uri(
+        reset_url = build_absolute_uri(
             reverse(
                 'account_reset_password_confirm',
                 kwargs={'uidb64': context['uid'], 'token': context['token']}))
         context['reset_url'] = reset_url
         send_templated_mail(
-            'account/password_set', from_email=from_email,
+            'account/password_reset', from_email=from_email,
             recipient_list=[to_email], context=context)

saleor/registration/views.py

@@ -8,13 +8,14 @@
 from django.utils.translation import ugettext_lazy as _
 
 from ..cart.utils import find_and_assign_anonymous_cart
-from .forms import LoginForm, PasswordSetUpForm, SignupForm
+from .forms import LoginForm, PasswordResetForm, SignupForm
 
 
 @find_and_assign_anonymous_cart()
 def login(request):
     kwargs = {
-        'template_name': 'account/login.html', 'authentication_form': LoginForm}
+        'template_name': 'account/login.html',
+        'authentication_form': LoginForm}
     return django_views.LoginView.as_view(**kwargs)(request, **kwargs)
 
 
@@ -46,15 +47,13 @@ def password_reset(request):
     kwargs = {
         'template_name': 'account/password_reset.html',
         'success_url': reverse_lazy('account_reset_password_done'),
-        'email_template_name': 'account/email/password_reset_message.txt',
-        'subject_template_name': 'account/email/password_reset_subject.txt'}
+        'form_class': PasswordResetForm}
     return django_views.PasswordResetView.as_view(**kwargs)(request, **kwargs)
 
 
 class PasswordResetConfirm(django_views.PasswordResetConfirmView):
     template_name = 'account/password_reset_from_key.html'
     success_url = reverse_lazy('account_reset_password_complete')
-    set_password_form = PasswordSetUpForm
     token = None
     uidb64 = None
 
@@ -63,8 +62,6 @@ def password_reset_confirm(request, uidb64=None, token=None):
     kwargs = {
         'template_name': 'account/password_reset_from_key.html',
         'success_url': reverse_lazy('account_reset_password_complete'),
-        'set_password_form': 'PasswordSetUpForm',
         'token': token,
         'uidb64': uidb64}
-    return PasswordResetConfirm.as_view(**kwargs)(
-        request, **kwargs)
+    return PasswordResetConfirm.as_view(**kwargs)(request, **kwargs)

templates/templated_email/account/password_reset.email

@@ -0,0 +1,27 @@
+{% load i18n %}
+
+{% block subject %}
+  {% trans "Password reset e-mail" context "Password reset e-mail subject" %}
+{% endblock %}
+
+{% block plain %}
+{% blocktrans context "Password reset e-mail text" %}
+Hi!
+
+You're receiving this e-mail because you or someone else has requested a password for your user account at {{ domain }}.
+It can be safely ignored if you did not request a password reset. Click the link below to reset your password.
+{% endblocktrans %}
+
+{{ protocol}}://{{ domain }}{% url 'account_reset_password_confirm' uidb64=uid token=token %}
+
+This is an automatically generated email, please do not reply.
+
+{% blocktrans context "Password reset e-mail text" %}
+Sincerely,
+{{ site_name }}
+{% endblocktrans %}
+{% endblock %}
+
+{% block html %}
+{% include 'templated_email/html/compiled/password_reset.html' %}
+{% endblock %}

templates/templated_email/dashboard/staff/promote_customer.email

@@ -2,9 +2,16 @@
 {% block subject %}{% blocktrans %}Hello from {{ site_name }}!{% endblocktrans %}{% endblock %}
 
 {% block plain %}
-{% blocktrans %}You're receiving this e-mail because you have been promoted to staff member at {{ domain }}.{% endblocktrans %}
+{% blocktrans context "Promote customer to staff member confirmation e-mail text" %}
+Hi!
 
-{% blocktrans %}Thank you for using {{ site_name }}!
-{{ domain }}
+You're receiving this e-mail because you have been promoted to staff member at {{ domain }}.{% endblocktrans %}
+
+{% blocktrans context "Promote customer to staff member confirmation e-mail text" %}
+This is an automatically generated email, please do not reply.
 {% endblocktrans %}
 {% endblock %}
+
+{% block html %}
+{% include 'templated_email/html/compiled/promote_customer.html' %}
+{% endblock %}

templates/templated_email/dashboard/staff/set_password.email

@@ -1,13 +1,21 @@
 {% load i18n %}
-{% block subject %}{% blocktrans %}Hello from {{ site_name }}!{% endblocktrans %}{% endblock %}
+{% block subject %}{% blocktrans context "Set password for staff member e-mail title" %}Hello from {{ site_name }}!{% endblocktrans %}{% endblock %}
 
 {% block plain %}
-{% blocktrans %}You're receiving this e-mail because you have to set password for your staff member account at {{ domain }}.
-Click the link below to reset your password.{% endblocktrans %}
+{% blocktrans context "Set password for staff member e-mail text" %}
+Hi!
+
+You're receiving this e-mail because you have to set password for your staff member account at {{ domain }}.
+Click the link below to reset your password.
+{% endblocktrans %}
 
 {{ protocol}}://{{ domain }}{% url 'account_reset_password_confirm' uidb64=uid token=token %}
 
-{% blocktrans %}Thank you for using {{ site_name }}!
-{{ domain }}
+{% blocktrans context "Set password for staff member e-mail text" %}
+This is an automatically generated email, please do not reply.
 {% endblocktrans %}
 {% endblock %}
+
+{% block html %}
+{% include 'templated_email/html/compiled/set_password.html' %}
+{% endblock %}

templates/templated_email/html/source/account/password_reset.mjml

@@ -0,0 +1,36 @@
+<mjml>
+  <mj-head>
+    <mj-include path="../shared/styles" />
+  </mj-head>
+  <mj-body>
+    <mj-container>
+      <mj-section css-class="no-display">
+        <mj-column>
+          <mj-text>
+            {% load i18n %}
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-include path="../shared/header" />
+      <mj-section>
+        <mj-column>
+          <mj-text font-size="16px">
+            {% trans "Hi!" context "Password reset e-mail text" %}
+          </mj-text>
+          <mj-text>
+            {% blocktrans trimmed context "Password reset e-mail text" %}
+              You're receiving this e-mail because you or someone else has requested a password for your user account at {{ domain }}.<br/>
+              It can be safely ignored if you did not request a password reset. Click the link below to reset your password.
+            {% endblocktrans %}
+          </mj-text>
+          <mj-text>
+            <a href="{{ protocol}}://{{ domain }}{% url 'account_reset_password_confirm' uidb64=uid token=token %}">
+              {{ protocol}}://{{ domain }}{% url 'account_reset_password_confirm' uidb64=uid token=token %}
+            </a>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-include path="../shared/footer" />
+    </mj-container>
+  </mj-body>
+</mjml>