Email HTML templates

[mad-anne]

I want to merge this change because it adds compiled HTML templates for e-mails and improves its' content. It introduces MJML as a markup language used for structuring e-mails.

Closes #1662

Pull Request Checklist

1. Privileged views and APIs are guarded by proper permission checks.
2. All visible strings are translated with proper context.
3. All data-formatting is locale-aware (dates, numbers, and so on).
4. Database queries are optimized and the number of queries is constant.
5. The changes are tested.
6. The code is documented (docstrings, project documentation).
7. Python code quality checks pass: pycodestyle, pydocstyle, pylint.
8. JavaScript code quality checks pass: eslint.

[Edit]

Below are some compiled MJML email templates rendered by Django.

Order confirmation e-mail.

Staff member password set up e-mail.

[patrys]

We specifically wanted to get rid of premailer as it's not very effective to reprocess templates each time an email is sent.

[codecov-io]

Codecov Report

Merging #1673 into master will increase coverage by 0.08%.
The diff coverage is 94.11%.

@@            Coverage Diff             @@
##           master    #1673      +/-   ##
==========================================
+ Coverage      83%   83.08%   +0.08%     
==========================================
  Files         142      142              
  Lines        6071     6077       +6     
  Branches      660      661       +1     
==========================================
+ Hits         5039     5049      +10     
+ Misses        861      858       -3     
+ Partials      171      170       -1

Impacted Files	Coverage Δ
saleor/dashboard/emails.py	100% <100%> (ø)	⬆️
saleor/order/emails.py	100% <100%> (ø)	⬆️
saleor/registration/views.py	97.61% <100%> (-0.06%)	⬇️
saleor/order/models.py	88.51% <100%> (ø)	⬆️
saleor/registration/forms.py	82.5% <66.66%> (+5%)	⬆️
saleor/userprofile/models.py	93.84% <0%> (+3.07%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3fc38b9...bee6a90. Read the comment docs.

[patrys]

We've discussed two potential solutions in the past. Both would mean keeping a "source" template and a "compiled" template with its styles inlined:

• https://foundation.zurb.com/emails/email-templates.html
• https://mjml.io/

[maarcingebala]

@patrys There is some wrapper for MJML in Django, we'll check if we could use it.

[patrys]

@elwoodxblues I was thinking about putting compiled templates (including Django variable placeholders) where Django can find them, not running another server.

[patrys]

Code looks good! I'd love to see a screenshot.

[rafalp]

Seems like extra space left after attr's deletion? This repeats everywhere that <mj-text font-size="16px"> was copied to.

[mad-anne]

You're right, I'll fix it.

[maarcingebala]

This template (as well as it's plain text version) could also contain a link to the dashboard, so that receiver of this email could quickly log in there.

[mad-anne]

Ok, I'll add it.

[maarcingebala]

I think we could compile all templates to a single directory, similarly to how webpack compiles the assets to /static/assets/. It would be great if we had simple command in package.json that would do that.

[patrys]

I think it's worth considering passing the trimmed flag to blocktrans in HTML context.

[akjanik]

LGTM