Skip to content

Adds email template #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ArtyomKr wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Adds email template #19

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4c1d94a
Added and integrated email template
ArtyomKr Aug 6, 2020
300ed1c
Merge branch 'master' of https://github.com/ArtyomKr/mapa-subscription
ArtyomKr Aug 6, 2020
169195c
Added check for undefined
ArtyomKr Aug 6, 2020
e7e623b
Added check if arrays are empty
ArtyomKr Aug 26, 2020
c2c698a
Deletes 'from' field
ArtyomKr Aug 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
277 changes: 248 additions & 29 deletions src/core/utils/mailer.util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export const determineCoordinatesInRectange = (

export const createMail = async () => {
const todayDate = new Date();
todayDate.setMonth(todayDate.getMonth() - 1)
const maxLastTimestamp = new Date().getTime()/1000;
const minLastTimestamp = todayDate.getTime()/1000;
todayDate.setMonth(todayDate.getMonth() - 1);
const maxLastTimestamp = new Date().getTime() / 1000;
const minLastTimestamp = todayDate.getTime() / 1000;

const entries = await getEntries(minLastTimestamp, maxLastTimestamp);

Expand Down Expand Up @@ -74,7 +74,9 @@ export const createMail = async () => {
const { id } = JSON.parse(x.subs_params);
const entry = entries.find(x => x.id === id);

arrayListByEntries = [...arrayListByEntries, entry];
if (entry){
arrayListByEntries = [...arrayListByEntries, entry];
}
});
}

Expand Down Expand Up @@ -120,32 +122,249 @@ export const createMail = async () => {
});
}

emailer.sendMail({
to: email,
html: `
<h1>
Hello ${email}!
</h1>

<h2>
Initiatives:
</h2>
${JSON.stringify(arrayListByEntries, null, 2)}
${JSON.stringify(subscriptionByEntries, null, 2)}

<h2>
Geo:
</h2>
${JSON.stringify(arrayListByCoordinates, null, 2)}
${JSON.stringify(subscriptionByLocation, null, 2)}

<h2>
Tag:
</h2>
${JSON.stringify(arrayListByTag, null, 2)}
${JSON.stringify(subscriptionByTag, null, 2)}
//This function wraps entries in array into html code, and then ads new entry "title" to the beginning of array, and returns a chunk of html code instead of array
function wrapArrayList (arrayList, title) {

//checking if the array is not empty
if (arrayList.length !== 0) {

//wrapping entries in the array
const wrappedArrayList = arrayList.map(
entry =>
`
<tr class="organization-block" bgcolor="#214478">
<td style="padding:16px 20px">
<table class="organization-block__name" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 10px;">
<tr>
<td align="left" valign="top" width="230px" style="font: bold 18px/30px PT Sans, Roboto, Arial, sans-serif;">
${entry.title}
</td>
<td style="font-size: 0; line-height: 0;" width="232px">
&nbsp;
</td>
<td valign="top" width="134px">
<table class="organization-block__button">
<tr>
<td align="center" width="134px" height="18px" bgcolor="#00D400" style="border-radius: 20px; font: bold 14px/20px PT Sans, Roboto, Arial, sans-serif;">
<a style="color: #ffffff;" href="https://mapa.falanster.by/#/?entry=${entry.id}">
Перайсці
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="organization-block__info" cellpadding="0" cellspacing="0" style="padding-bottom: 10px;">
<tr>
<td width="364px" style="font: 16px PT Sans, Roboto, Arial, sans-serif;">
${entry.description}
</td>
<td style="font-size: 0; line-height: 0;" width="97px">
&nbsp;
</td>
<td valign="top" width="134px">
<table class="organization-block__button">
<tr>
<td align="center" width="134px" height="18px" bgcolor="#FF7F2A" style="color: #ffffff; border-radius: 20px; font: bold 14px/20px PT Sans, Roboto, Arial, sans-serif;">
<a style="color: #ffffff;" href="">
Адпісацца
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="organization-block__tags" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" bgcolor="#00D400" style="padding: 0 20px 0 20px; border-radius: 20px; font-family: PT Sans, Roboto, Arial, sans-serif;">
#${entry.tags.join(' #')}
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td height="20px"></td>
</tr>
`
);

//adding title to the beginning of the array
wrappedArrayList.unshift(
`
<tr>
<td bgcolor="#FF7F2A" style="padding-left: 20px; font: bold 18px/30px PT Sans, Roboto, Arial, sans-serif;" align="center">
${title}
</td>
</tr>
`
);

//returning the result as a chunk of html code
return wrappedArrayList.join('');

//if array is empty returning empty array
} else return []
}

//using function wrapArrayList to convert the following arrays into html code:
const initiativesBlock = wrapArrayList(arrayListByEntries, "Абнаўленні вашых iнiцыятыў:");

const tagsBlock = wrapArrayList(arrayListByTag, "Падыходзяць пад вашы тэгi:");

const geoTagsBlock = wrapArrayList(arrayListByCoordinates, "Блiзка да вас:");

//TODO: change adress of images from my repository (https://artyomkr.github.io/mail-template/images/) to https://mapa.falanster.by/mapa/src/img/template
//TODO: change adress of fonts from my repository (https://artyomkr.github.io/mail-template/fonts/) to https://mapa.falanster.by/mapa/src/img/template/fonts
if (initiativesBlock.length !== 0 || tagsBlock.length !== 0 || geoTagsBlock.length !== 0 ){
emailer.sendMail({
to: email,
html: `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mapa mail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
src: local('PT Sans'), local('PTSans-Regular'),
url('https://artyomkr.github.io/mail-template/fonts/PT Sans/pt-sans-v11-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
url('https://artyomkr.github.io/mail-template/fonts/PT Sans/pt-sans-v11-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
url('https://artyomkr.github.io/mail-template/fonts/PT Sans/pt-sans-v11-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'),
url('https://artyomkr.github.io/mail-template/fonts/PT Sans/pt-sans-v11-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),
url('https://artyomkr.github.io/mail-template/fonts/PT Sans/pt-sans-v11-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#PTSans') format('svg');
}
@font-face {
font-family: 'Hangyaboly';
font-weight: 400;
font-style: normal;
src: url('https://artyomkr.github.io/mail-template/fonts/Hangyaboly/hangyaboly.eot');
src: url('https://artyomkr.github.io/mail-template/fonts/Hangyaboly/hangyaboly.eot?#iefix') format('embedded-opentype'),
url('https://artyomkr.github.io/mail-template/fonts/Hangyaboly/hangyaboly.woff2') format('woff2'),
url('https://artyomkr.github.io/mail-template/fonts/Hangyaboly/hangyaboly.woff') format('woff'),
url('https://artyomkr.github.io/mail-template/fonts/Hangyaboly/hangyaboly.ttf') format('truetype'),
url('https://artyomkr.github.io/mail-template/fonts/Hangyaboly/hangyaboly.svg#hangyaboly') format('svg');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('https://artyomkr.github.io/mail-template/fonts/Roboto/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot');
src: local('Roboto'), local('Roboto-Regular'),
url('https://artyomkr.github.io/mail-template/fonts/Roboto/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
url('https://artyomkr.github.io/mail-template/fonts/Roboto/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
url('https://artyomkr.github.io/mail-template/fonts/Roboto/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'),
url('https://artyomkr.github.io/mail-template/fonts/Roboto/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),
url('https://artyomkr.github.io/mail-template/fonts/Roboto/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Roboto') format('svg');
}
td {
font-family: PT Sans, Roboto, Arial, sans-serif;
color: #FBFCFF;
}
a{
text-decoration: none;
color: #FBFCFF;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#162D50">
<tr>
<td>
<table class="mail-content" align="center" cellpadding="0" cellspacing="0" width="636" style="border-collapse: collapse;">
<tr class="mail-header">
<td style="padding-top: 33px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" style="color: #FF7F2A; font: 12px/14px PT Sans, Arial, sans-serif;">
<a href="" style="color: #FF7F2A;">
Дасляць сябру
</a>
|
<a href="" style="color: #FF7F2A;">
Чытаць онлайн
</a>
</td>
</tr>
<tr>
<td style="background-image:url(https://artyomkr.github.io/mail-template/images/cover.png)">
<a href="https://mapa.falanster.by/" style="display: block; margin: 29px 461px 30px 21px;">
<img src="https://artyomkr.github.io/mail-template/images/mapa_logo.png" alt="Mapa logo" style="display:block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>

<tr class="mail-body">
<td bgcolor="#1A1A1A">
<table cellpadding="0" cellspacing="0" width="100%">
<tr >
<td style="padding:23px 152px 21px 152px; color: #FBFCFF; font: 24px/40px Hangyaboly, PT Sans, Roboto, Arial, sans-serif;" align="center">
Абнаўленні Мапа заўтрашняга дня 01.10.2019
</td>
</tr>

${initiativesBlock}

${tagsBlock}

${geoTagsBlock}

</table>
</td>
</tr>
<tr class="mail-footer">
<td style="padding:31px 21px 10px 21px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="https://falanster.by/" style="display: block;">
<img src="https://artyomkr.github.io/mail-template/images/falanster.png" alt="Falanster logo" style="display:block;"/>
</a>
</td>
<td align="right" style="padding-left:100px; font-family: PT Sans, Roboto, Arial, sans-serif;">
Далучайцеся да нас
</td>
<td align="right">
<a href="https://vk.com/falanster_by">
<img src="https://artyomkr.github.io/mail-template/images/Vk_logo.png" alt="Vk logo"/>
</a>
<a href="https://www.facebook.com/falanster.by/">
<img src="https://artyomkr.github.io/mail-template/images/Fb_logo.png" alt="Fb logo"/>
</a>
<a href="https://www.instagram.com/falanster.by/">
<img src="https://artyomkr.github.io/mail-template/images/Inst_logo.png" alt="Inst logo"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="unsubscribe-button">
<td align="center" style="padding-bottom: 36px; font-size: 11px; line-height: 13px; font-family: PT Sans, Roboto Arial, sans-serif;">
<a href="" style="text-decoration: underline;">Unsubscribe</a> from our email notifications
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
`
});
});
}
}
});
};