[backend] add new email template #4511
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@thesan any idea why the backend integration tests are failing? |
|
nvm, found the issue! |
There was a problem hiding this comment.
Great work! I didn't know react-email nor ts-pattern these are really good 🤩
I added a few CRs but more importantly the jest config should be fixed to parse the jsx. Also you will need to mock createEmailProvider in packages/server/test/setup.ts and replace text by html in the notifier test.
I'm not sure why the interaction tests fail... Might be a Vercel issue or more likely I forgot to merge some CI fixes on this branch. If it happens again I'll take a better look at it.
|
@thesan Fixed tests, but interaction tests are still failing |
| <Container style={containerStyle}> | ||
| <Section style={logoSectionStyle}> | ||
| <Img | ||
| src="https://github.com/Joystream/design/blob/master/logo/pioneer/horizontal/monochromatic/light/cropped/png/[email protected]?raw=true" |
There was a problem hiding this comment.
@kdembler I'm not sure if it's ideal for emails but even with this bigger logo after optimizing the svg with Inkscape it weigh 4.2kb (url encoded). WDYT of embedding it in the email maybe even as a data-url for email client compatibility ?
| src="https://github.com/Joystream/design/blob/master/logo/pioneer/horizontal/monochromatic/light/cropped/png/[email protected]?raw=true" | |
| src="%3Csvg width='364' height='88' fill='white' version='1.1' viewBox='0 0 364 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m50 8c-8.18 0-14 5.82-14 13v67h-8v-67c0-11.6 9.4-21 21-21 21.5 0 39 17.5 39 39 0 21.2-16.9 38.5-38 39l-1.78-7.99h0.778c17.1 0 31-13.9 31-31s-13.9-31-31-31z'/%3E%3Cpath d='m46.9 64h2.11c13.8 0 25-11.2 25-25s-11.2-25-25-25c-3.87 0-7 3.13-7 7v1h7c9.39 0 17 7.61 17 17s-7.61 17-17 17h-3.89l1.78 8z'/%3E%3Cpath d='m43.8 50h5.22c6.08 0 11-4.92 11-11s-4.92-11-11-11h-7v8h7c1.66 0 3 1.34 3 3s-1.34 3-3 3h-7l1.78 8z'/%3E%3Cpath d='m22.1 18.4c-0.0811 0.852-0.123 1.72-0.123 2.59v67h-8v-53c0-6.75 3.18-12.7 8.12-16.6z'/%3E%3Cpath d='m0 49c0-6.75 3.18-12.7 8.12-16.6-0.0811 0.852-0.123 1.72-0.123 2.59v53h-8v-39z'/%3E%3Cpath d='m155 65.8v-40h8.01v40h-8.01z'/%3E%3Cpath d='m155 11.4v8.02h8.01v-8.02h-8.01z'/%3E%3Cpath d='m146 59.9c3.45-3.77 5.18-8.66 5.18-14.7 6e-3 -6.01-1.73-10.9-5.22-14.6-1.65-1.82-3.67-3.26-5.92-4.24s-4.69-1.44-7.15-1.39c-2.29-0.0284-4.55 0.462-6.63 1.43-1.61 0.679-3.08 1.64-4.35 2.83l-1.21 1.48h-0.387v-4.97h-8v52h8v-18.4h0.387c0.152 0.223 0.317 0.438 0.493 0.642 0.466 0.527 0.963 1.03 1.49 1.5 0.741 0.7 1.55 1.32 2.42 1.86 2.37 1.35 5.04 2.07 7.77 2.1 2.46 0.0583 4.9-0.408 7.16-1.37s4.29-2.39 5.95-4.2v-0.0088zm-5.37-24.1c2.18 2.35 3.27 5.5 3.27 9.47 0 3.97-1.09 7.12-3.27 9.48-2.27 2.25-5.34 3.51-8.53 3.51s-6.26-1.26-8.53-3.51c-2.19-2.35-3.29-5.51-3.28-9.48 6e-3 -3.97 1.1-7.13 3.28-9.47 2.27-2.25 5.34-3.52 8.53-3.52s6.26 1.27 8.53 3.52z'/%3E%3Cpath d='m169 53c0.996 2.48 2.49 4.74 4.39 6.62 2.86 2.8 6.48 4.69 10.4 5.44 3.93 0.754 7.99 0.334 11.7-1.21 3.69-1.54 6.84-4.13 9.07-7.46 2.22-3.32 3.42-7.23 3.44-11.2 0.056-2.69-0.425-5.36-1.41-7.86-0.99-2.5-2.47-4.78-4.35-6.7-1.88-1.92-4.12-3.45-6.6-4.49-2.48-1.04-5.14-1.58-7.83-1.58-2.69 0-5.35 0.536-7.82 1.58-2.48 1.04-4.72 2.57-6.6 4.49-1.88 1.92-3.36 4.2-4.35 6.7-0.989 2.5-1.47 5.17-1.41 7.86-0.07 2.67 0.407 5.34 1.4 7.82zm6.98-7.82c-6e-3 -3.97 1.09-7.12 3.28-9.47 2.27-2.25 5.33-3.52 8.53-3.52 3.2 0 6.26 1.27 8.53 3.52 2.18 2.34 3.27 5.5 3.27 9.47 0 3.97-1.09 7.13-3.27 9.48-2.27 2.25-5.34 3.51-8.53 3.51-3.2 0-6.26-1.26-8.53-3.51-2.18-2.35-3.28-5.51-3.28-9.48z'/%3E%3Cpath d='m258 59.7c-1.88-1.89-3.35-4.14-4.33-6.62-0.983-2.48-1.46-5.14-1.38-7.82-0.056-2.69 0.419-5.36 1.4-7.86s2.44-4.78 4.29-6.7 4.07-3.45 6.52-4.49c2.45-1.04 5.07-1.58 7.73-1.58s5.28 0.536 7.73 1.58c2.45 1.04 4.66 2.57 6.52 4.49s3.32 4.2 4.29 6.7 1.45 5.17 1.4 7.86c-5e-3 0.887-0.067 1.77-0.184 2.64h-31.2c0.389 2.75 1.41 5.03 3.06 6.84 2.24 2.25 5.27 3.51 8.42 3.51s6.18-1.26 8.42-3.51c0.561-0.61 1.05-1.28 1.46-2h8.6c-0.518 1.31-1.17 2.56-1.95 3.74-2.2 3.32-5.31 5.91-8.96 7.46s-7.66 1.96-11.5 1.21c-3.88-0.754-7.45-2.65-10.3-5.44zm5.8-23.9c-1.25 1.35-2.13 2.97-2.66 4.85h22.2c-0.526-1.89-1.41-3.5-2.65-4.85-2.24-2.25-5.27-3.52-8.42-3.52s-6.19 1.27-8.42 3.52z'/%3E%3Cpath d='m297 53c0.983 2.48 2.46 4.74 4.33 6.62 2.82 2.8 6.39 4.69 10.3 5.44 3.88 0.754 7.89 0.334 11.5-1.21s6.76-4.13 8.96-7.46c0.781-1.18 1.43-2.44 1.95-3.74h-8.6c-0.415 0.72-0.902 1.38-1.46 2-2.24 2.25-5.27 3.51-8.42 3.51s-6.18-1.26-8.42-3.51c-1.65-1.8-2.67-4.08-3.06-6.84h31.2c0.117-0.873 0.179-1.76 0.184-2.64 0.055-2.69-0.42-5.36-1.4-7.86-0.977-2.5-2.44-4.78-4.29-6.7s-4.07-3.45-6.52-4.49c-2.45-1.04-5.07-1.58-7.73-1.58s-5.28 0.536-7.73 1.58c-2.45 1.04-4.66 2.57-6.52 4.49s-3.32 4.2-4.29 6.7c-0.977 2.5-1.45 5.17-1.4 7.86-0.07 2.67 0.402 5.34 1.38 7.82zm7.47-12.4c0.527-1.88 1.41-3.5 2.66-4.85 2.24-2.25 5.27-3.52 8.42-3.52s6.19 1.27 8.42 3.52c1.24 1.35 2.12 2.96 2.65 4.85h-22.2z'/%3E%3Cpath d='m348 33-0.088 32.7h-8l0.079-34.2c3e-3 -1.54 0.615-3.01 1.7-4.09 1.09-1.09 2.56-1.7 4.1-1.7h17.8v7.26h-15.6z'/%3E%3Cpath d='m213 25.7v40h7.91v-22.5c-0.095-2.92 0.942-5.75 2.9-7.92 0.878-0.999 1.96-1.8 3.18-2.34 1.22-0.541 2.53-0.812 3.86-0.796 5.58 0 8.38 3.19 8.38 9.56v24h8v-24.4c-0.018-5.18-1.28-9.19-3.79-12v-2e-3c-0.595-0.624-1.24-1.2-1.91-1.74-1.1-0.823-2.34-1.45-3.66-1.84-1.64-0.524-3.35-0.782-5.07-0.766-1.49-0.0074-2.98 0.212-4.4 0.651-1.14 0.328-2.23 0.816-3.24 1.45-0.789 0.542-1.52 1.17-2.16 1.87-0.456 0.454-0.866 0.952-1.22 1.49-0.149 0.282-0.281 0.502-0.378 0.651h-0.387v-5.35h-8z'/%3E%3C/svg%3E%0A" |
This way we don't have to rely on GH servers and also they're email clients which require users to allow the fetching of remote assets.
There was a problem hiding this comment.
I like the idea but apparently the support for SVGs in emails is low, especially for embedded ones:
https://www.caniemail.com/features/image-svg/
https://www.caniemail.com/features/html-svg/
It seems it's the same case for base64 encoded PNGs:
Some bad news about base64 encoded images:
They are totally blocked by Outlook.
They are not displayed by most webmail services (especially if you use more than one inside the message).
There was a problem hiding this comment.
Thanks for having a look. And I am bookmarking caniemail !
thesan
added
scope:notifications
Added new notification email template according to the design done here #4252
For emails, I've used https://react.email, it allows writing email templates in React, so we use the same UI framework as the main app. The React template gets rendered to raw HTML when the email is sent.
You can do live preview of emails using
yarn workspace server dev:emails. Here's an example:Details
I've also did some small stylistic code improvements to make it easier to read. When I first started looking at
serverpackage I was a bit confused by all the HOFs and passing functions around.Closes #4274