IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2026-02-06 01:46:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor template

Browse Source
This commit is contained in:
einhornimmond 2025-01-29 12:58:18 +01:00
parent 61f67388d1
commit f362eafb00
8 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/src/emails/__snapshots__/sendEmailVariants.test.ts.snap
View File

@ -1699,17 +1699,16 @@ exports[`sendEmailVariants sendTransactionReceivedEmail result has the correct h
<h2 style=\\"margin-top: 15px; color: #383838;\\">Bibi Bloxberg has sent you 37.40 Gradido</h2>
<div class=\\"text-block\\" style=\\"margin-top: 20px; color: #9ca0a8;\\">
<p>Hello Peter Lustig,</p>
<p>You have just received 37.40 GDD from Bibi Bloxberg (bibi@bloxberg.de).</p>
<p> You have just received 37.40 GDD from Bibi Bloxberg (<a href=\\"mailto:bibi@bloxberg.de?subject=RE%3A%20Bibi%20Bloxberg%20has%20sent%20you%2037.40%20Gradido\\">bibi@bloxberg.de</a>).
</p>
</div>
<div class=\\"content\\" style=\\"display: block; width: 78%; margin: 40px 1% 40px 1%; padding: 20px 10% 40px 10%; border-radius: 24px; background-image: linear-gradient(180deg, #f5f5f5, #f5f5f5);\\">
<h2 style=\\"margin-top: 15px; color: #383838;\\">Message</h2>
<div class=\\"child-left\\" style=\\"text-align: left;\\">
<div class=\\"p_content\\" style=\\"margin: 15px 0 15px 0; line-height: 26px; color: #9ca0a8;\\">Du bist schon lustiger ;)</div>
</div>
<div class=\\"child-right\\" style=\\"text-align: right;\\"><a class=\\"button-5\\" href=\\"mailto:bibi@bloxberg.de?subject=RE%3A%20Bibi%20Bloxberg%20has%20sent%20you%2037.40%20Gradido\\" style=\\"display: inline-block; padding: 9px 15px; border: 0; line-height: inherit; text-decoration: none; cursor: pointer; border-radius: 20px; background-image: radial-gradient(circle farthest-corner at 0% 0%, #f9cd69, #c58d38); margin: 25px 0 25px 0; background: linear-gradient(135deg, #53900c, #6e6e6e); font-size: 20px; font-weight: 600; color: #f5f5f5; width: auto; box-shadow: 20px 20px 25px; transition: all 0.3s ease;\\">
<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 -960 960 960\\" style=\\"vertical-align: middle; margin-right: 8px;\\">
<path d=\\"M240-400h480v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320h594l46 45v-525H160v480Zm0 0v-480 480Z\\" fill=\\"#e8eaed\\"/>
</svg><span>Reply</span></a></div>
<div class=\\"child-right\\" style=\\"text-align: right;\\"><a class=\\"button-5\\" href=\\"mailto:bibi@bloxberg.de?subject=RE%3A%20Bibi%20Bloxberg%20has%20sent%20you%2037.40%20Gradido\\" style=\\"display: inline-block; padding: 9px 15px; border: 0; line-height: inherit; text-decoration: none; cursor: pointer; border-radius: 20px; background-image: radial-gradient(circle farthest-corner at 0% 0%, #f9cd69, #c58d38); margin: 25px 0 25px 0; background: linear-gradient(135deg, #53900c, #6e6e6e); font-size: 20px; font-weight: 600; color: #f5f5f5; width: auto; box-shadow: 20px 20px 25px; transition: all 0.3s ease;\\"><span class=\\"chatbox-wrapper\\" style=\\"margin-right: 8px;\\"><img class=\\"bi-chatbox\\" alt=\\"chatbox\\" loading=\\"lazy\\" src=\\"cid:chatboxicon\\" style=\\"margin-bottom: -5px;\\"></span><span>Reply</span></a>
</div>
</div><a class=\\"button-3\\" href=\\"http://localhost/transactions\\" style=\\"display: inline-block; padding: 9px 15px; color: white; border: 0; line-height: inherit; text-decoration: none; cursor: pointer; border-radius: 20px; background-image: radial-gradient(circle farthest-corner at 0% 0%, #f9cd69, #c58d38); box-shadow: 16px 13px 35px 0 rgba(56, 56, 56, 0.3); margin: 25px 0 25px 0; width: 50%;\\">To account</a>
<div class=\\"text-block\\" style=\\"margin-top: 20px; color: #9ca0a8;\\">
<p>Kind regards,<br>your Gradido team

5
backend/src/emails/sendEmailTranslated.ts
View File

@ -99,6 +99,11 @@ export const sendEmailTranslated = async ({
path: path.join(__dirname, 'templates/includes/youtube-icon.png'),
cid: 'youtubeicon',
},
{
filename: 'chatbox-icon.png',
path: path.join(__dirname, 'templates/includes/chatbox-icon.png'),
cid: 'chatboxicon',
},
],
},
locals, // the 'locale' in here seems not to be used by 'email-template', because it doesn't work if the language isn't set before by 'i18n.setLocale'

BIN
backend/src/emails/templates/includes/chatbox-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 B

8
backend/src/emails/templates/includes/chatbox-icon.pug
View File

@ -1,2 +1,6 @@
svg(xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" style="vertical-align: middle; margin-right: 8px;")
path(d="M240-400h480v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320h594l46 45v-525H160v480Zm0 0v-480 480Z" fill="#e8eaed")
span.chatbox-wrapper
img.bi-chatbox(
alt="chatbox"
loading="lazy"
src="cid:chatboxicon"
)

7
backend/src/emails/templates/includes/webflow.css
View File

@ -86,6 +86,13 @@ h2 {
box-shadow: 20px 25px 30px rgba(56, 56, 56, 0.4);
}
.chatbox-wrapper {
margin-right: 8px;
}
.bi-chatbox {
margin-bottom: -5px;
}
.child-right {
text-align: right;
}

16
backend/src/emails/templates/transactionReceived/html.pug
View File

@ -1,16 +1,26 @@
extend ../layout.pug
block content
block content
mixin mailto(email, subject)
- var formattedSubject = encodeURIComponent(subject)
a(class!=attributes.class href=`mailto:${email}?subject=${formattedSubject}`)
block
- var subject= t('emails.transactionReceived.replySubject', { senderFirstName, senderLastName, transactionAmount })
h2= t('emails.transactionReceived.title', { senderFirstName, senderLastName, transactionAmount })
.text-block
include ../includes/salutation.pug
p= t('emails.transactionReceived.haveReceivedAmountGDDFrom', { transactionAmount, senderFirstName, senderLastName, senderEmail })
p
= t('emails.transactionReceived.haveReceivedAmountGDDFrom', { transactionAmount, senderFirstName, senderLastName })
| (
+mailto(senderEmail, subject)=senderEmail
|).
.content
h2= t('emails.general.message')
.child-left
div(class="p_content")= memo
.child-right
a.button-5(href= `mailto:${senderEmail}?subject=${encodeURIComponent(t('emails.transactionReceived.replySubject', { senderFirstName, senderLastName, transactionAmount }))}`)
+mailto(senderEmail, subject)(class="button-5")
include ../includes/chatbox-icon.pug
span #{t('emails.general.answerNow')}

4
backend/src/locales/de.json
View File

@ -88,9 +88,9 @@
"title": "{senderFirstName} {senderLastName} hat deinen Gradido-Link eingelöst"
},
"transactionReceived": {
"haveReceivedAmountGDDFrom": "du hast soeben {transactionAmount} GDD von {senderFirstName} {senderLastName} (mailto:{senderEmail}) erhalten.",
"haveReceivedAmountGDDFrom": "du hast soeben {transactionAmount} GDD erhalten von {senderFirstName} {senderLastName}",
"subject": "{senderFirstName} {senderLastName} hat dir {transactionAmount} Gradido gesendet",
"replySubject": "RE: {senderFirstName} {senderLastName} hat dir {transactionAmount} Gradido gesendet",
"replySubject": "Re: {senderFirstName} {senderLastName} hat dir {transactionAmount} Gradido gesendet",
"title": "{senderFirstName} {senderLastName} hat dir {transactionAmount} Gradido gesendet"
}
},

2
backend/src/locales/en.json
View File

@ -88,7 +88,7 @@
"title": "{senderFirstName} {senderLastName} has redeemed your Gradido link"
},
"transactionReceived": {
"haveReceivedAmountGDDFrom": "You have just received {transactionAmount} GDD from {senderFirstName} {senderLastName} (mailto:{senderEmail}).",
"haveReceivedAmountGDDFrom": "You have just received {transactionAmount} GDD from {senderFirstName} {senderLastName}",
"replySubject": "RE: {senderFirstName} {senderLastName} has sent you {transactionAmount} Gradido",
"subject": "{senderFirstName} {senderLastName} has sent you {transactionAmount} Gradido",
"title": "{senderFirstName} {senderLastName} has sent you {transactionAmount} Gradido"