@gov-cy/dsf-email-templates 1.0.8

package/src/njk/components/footer.njk

@@ -0,0 +1,20 @@
+{# footer 
+ @param {string} footerText The footerText. Will escape text 
+ @returns govcy footer for emails html 
+#}
+{% macro gocvyEmailFooter(params) -%}
+<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+    <tr>
+        <td align="center" valign="top" style="padding:10px 16px 10px;border-top: 4px solid #ffad2d;background:#ebf1f3;background-color:#ebf1f3;">
+            <div style="font-family:Arial; font-size: 24px;text-align:left;margin-bottom: 10px;line-height:1;">
+                <a href="https://gov.cy" style="color:#000000; text-decoration: none;font-weight: 500;">
+                    <strong style="color:#000000; text-decoration: none;font-weight: 500;">gov.cy</strong>
+                </a>
+            </div>
+            <div style="font-family:Arial;font-size:16px;text-align:left;margin-bottom: 10px;line-height:1;" >
+                {{ params.footerText}}
+            </div>
+        </td>
+    </tr>
+</table>
+{%- endmacro %}

package/src/njk/components/header.njk

@@ -0,0 +1,35 @@
+{# header 
+ @param {string} serviceName The service name. Will escape text 
+ @param {string} name The name used in salutation. Will escape text 
+ @param {string} lang The language used. Can be 'en','el'. Optional, default is 'el'.
+ @returns govcy header for emails html 
+#}
+{% macro gocvyEmailHeader(params) -%}
+{#- set default values -#}
+{%- set lang = params.lang | default('el') -%}
+{#- set language vars -#}
+{%- set salutation -%} 
+   {{- 'Dear' if lang=='en' -}} 
+   {{- 'Αγαπητέ / Αγαπητή' if lang=='el' -}} 
+{%- endset -%}
+<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+    <tr>
+        <!-- IMAGE -->
+        <td align="left" valign="top" style="padding: 12px 16px 0px;background:#31576f;background-color:#31576f;">
+            <img src="https://cdn.jsdelivr.net/gh/gov-cy/govdesign@main/govcylogo_v3.png" alt="gov.cy" border="0" />
+        </td>
+    </tr>
+    <tr>
+        <td align="left" valign="top" style="padding:0px 16px 12px;border-bottom: 4px solid #ffad2d;background:#31576f;background-color:#31576f;">
+            <!-- SERVICE NAME -->
+            <div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;" >{{ params.serviceName }}</div>
+        </td>
+    </tr>
+    <tr>
+        <td align="center" valign="top" style="padding:20px 16px;">
+            <!-- SALUTATION -->
+            <div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >{{ salutation }} {{params.name}}</div>
+        </td>
+    </tr>
+</table>
+{%- endmacro %}

package/src/njk/components/preHeader.njk

@@ -0,0 +1,7 @@
+{# pre header
+ @param {string} preText The pre header text. Will escape text 
+ @returns govcy pre header for emails html 
+#}
+{% macro gocvyEmailPreHeader(params) -%}
+<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">{{params.preText}}</div>
+{%- endmacro %}

package/src/njk/components/success.njk

@@ -0,0 +1,23 @@
+{# pre success panel
+ @param {string} title The success title text. Will escape text 
+ @param {string} body The success body text. Will escape text 
+ @returns govcy success panel for emails html 
+#}
+{% macro gocvyEmailSuccess(params) -%}
+<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:10px 0;max-width: 600px;background:#00703c;background-color:#00703c;" >
+    <tr>
+        <td align="center" valign="top" style="padding:10px 16px;">
+            <!-- Received -->
+            <div style="font-family:helvetica;font-size:24px;font-weight:bold;line-height:1.5;text-align:center;color:#ffffff;">{{ params.title }}</div>
+        </td>
+    </tr>
+    {%- if params.body -%}
+    <tr>
+        <td align="center" valign="top" style="padding:10px 16px;">
+            <!-- details -->
+            <div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:center;color:#ffffff;">{{ params.body }}</div>
+        </td>
+    </tr> 
+    {%- endif -%}
+</table>
+{%- endmacro %}

package/src/njk/govcyBase.njk

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="{% block lang %}el{% endblock %}" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    <head>
+        <title>{% block subject %}Untitled Page{% endblock %}</title>
+        <!--[if !mso]><!-->
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <!--<![endif]-->
+        <!--[if (gte mso 9)|(IE)]>
+        <style>
+        li {
+        margin-left:10px !important;
+        mso-special-format: bullet;
+        }
+        </style>
+        <![endif]-->
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+    </head>
+    <body>
+        <!-- PRE HEADER TEXT -->
+        {% block pre %}{% endblock %}
+        <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
+            <tr>
+                <td align="center">
+                    <!--[if mso]>
+                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+                    <tr>
+                    <td align="center" valign="top" width="600">
+                    <![endif]-->
+                    <!-- HEADER -->
+                    {% block header %}{% endblock %}
+                    <!-- SUCCESS -->
+                    {% block success %}{% endblock %}
+                    <!-- BODY -->
+                    {% block body %}{% endblock %}
+                    <!-- FOOTER  -->
+                    {% block footer %}{% endblock %}
+                    <!--[if mso]>
+                    </td>
+                    </tr>
+                    </table>
+                    <![endif]-->
+                </td>
+            </tr>
+        </table>
+    </body>
+</html>

package/src/njk/govcyEmailElement.njk

@@ -0,0 +1,44 @@
+{% macro govcyEmailElement(component, params) -%}
+    {#- preHeader -#}
+    {%- if component == 'preHeader' -%}
+        {%- from "./components/preHeader.njk" import gocvyEmailPreHeader -%}
+        {{ gocvyEmailPreHeader(params) }}
+    {#- header -#}
+    {%- elif component == 'header' -%}
+        {%- from "./components/header.njk" import gocvyEmailHeader -%}
+        {{ gocvyEmailHeader(params) }}
+    {#- success -#}
+    {%- elif component == 'success' -%}
+        {%- from "./components/success.njk" import gocvyEmailSuccess -%}
+        {{ gocvyEmailSuccess(params) }}
+    {#- bodyList -#}
+    {%- elif component == 'bodyList' -%}
+        {%- from "./components/bodyList.njk" import gocvyEmailBodyList -%}
+        {{ gocvyEmailBodyList(params) }}
+    {#- footer -#}
+    {%- elif component == 'footer' -%}
+        {%- from "./components/footer.njk" import gocvyEmailFooter -%}
+        {{ gocvyEmailFooter(params) }}
+    {#- body -#}
+    {%- elif component == 'body' -%}
+        {%- from "./components/body.njk" import gocvyEmailBody -%}
+        {%- call gocvyEmailBody(params) -%}
+            {{ caller() }}
+        {%- endcall -%}
+    {#- bodyHeading -#}
+    {%- elif component == 'bodyHeading' -%}
+        {%- from "./components/bodyHeading.njk" import gocvyEmailBodyHeading -%}
+        {%- call gocvyEmailBodyHeading(params) -%}
+            {{ caller() }}
+        {%- endcall -%}
+    {#- bodyParagraph -#}
+    {%- elif component == 'bodyParagraph' -%}
+        {%- from "./components/bodyParagraph.njk" import gocvyEmailBodyParagraph -%}
+        {%- call gocvyEmailBodyParagraph(params) -%}
+            {{ caller() }}
+        {%- endcall -%}
+    {%- else -%}
+        {# Handle unknown component types #}
+        Unknown component: {{ component }}
+    {%- endif -%}
+{%- endmacro %}

package/src/njk/templates/submission-email-small.njk

@@ -0,0 +1,47 @@
+{# extend the base html #}
+{% extends "govcyBase.njk" %}
+{# import components #}
+{% from "govcyEmailElement.njk" import govcyEmailElement %}
+{# set language #}
+{% set lang='en'%}
+{# set the blocks of the base template  #}
+    {# language block  #}
+    {% block lang %}{{lang}}{% endblock %}
+    {# subject block #}
+    {% block subject %}Service email{% endblock %}
+    {# pre header block #}
+    {% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'The pre header text'}) }}{%- endblock %}
+    {# header block #}
+    {% block header -%}
+        {# use the header component #}
+        {{ govcyEmailElement ('header',{serviceName:'Service name', name:'First and Last name',lang:lang}) }}
+    {%- endblock %}
+    {# success block #}
+    {% block success -%}
+        {# use the email success component #}
+        {{ govcyEmailElement ('success',
+        {
+            title:'Success messasage',
+            body:'Lorem ipsum'
+        }
+        ) }}
+    {%- endblock %}
+    {# body block #}
+    {% block body -%}
+        {# use the body component   #}
+        {% call govcyEmailElement('body') -%}
+            {# use combinatopn of body components to complete the body #}
+            {% call govcyEmailElement('bodyHeading',{headinLevel:1}) -%}
+                Heading 1
+            {%- endcall %}
+            {% call govcyEmailElement('bodyParagraph') -%}
+                Body
+            {%- endcall %}
+            {{ govcyEmailElement ('bodyList',{type:'ol', items: ["item 1", "item 2", "item 3"]}) }}
+        {%- endcall%}
+    {%- endblock %}
+    {# footer block #}
+    {% block footer -%}
+        {# use the footer component #}
+        {{ govcyEmailElement ('footer',{footerText:'Service name'}) }}
+    {%- endblock %}

package/src/njk/templates/submission-email.njk

@@ -0,0 +1,65 @@
+{# extend the base html #}
+{% extends "govcyBase.njk" %}
+{# import components #}
+{% from "govcyEmailElement.njk" import govcyEmailElement %}
+{# set language #}
+{% set lang='el'%}
+{# set the blocks of the base template  #}
+    {# language block  #}
+    {% block lang %}{{lang}}{% endblock %}
+    {# subject block #}
+    {% block subject %}Service email{% endblock %}
+    {# pre header block #}
+    {% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'The pre header text'}) }}{%- endblock %}
+    {# header block #}
+    {% block header -%}
+        {# use the header component #}
+        {{ govcyEmailElement ('header',{serviceName:'Service name', name:'First and Last name',lang:lang}) }}
+    {%- endblock %}
+    {# success block #}
+    {% block success -%}
+        {# use the email success component #}
+        {{ govcyEmailElement ('success',
+        {
+            title:'Έχουμε λάβει την αίτησή σας', 
+            body:'Η ημερομηνία της αίτησης είναι 12/1/2024 και ο αριθμός αναφοράς σας είναι DSF123456789.'}
+        ) }}
+    {%- endblock %}
+    {# body block #}
+    {% block body -%}
+        {# use the body component   #}
+        {% call govcyEmailElement('body') -%}
+            {# use combinatopn of body components to complete the body #}
+            {% call govcyEmailElement('bodyHeading',{headinLevel:1}) -%}
+                Heading 1
+            {%- endcall %}
+            {% call govcyEmailElement('bodyParagraph') -%}
+                Αν χρειαστούμε οποιοδήποτε άλλο στοιχείο κατά τη διάρκεια εξέτασης της αίτησής σας, θα επικοινωνήσουμε μαζί σας
+            {%- endcall %}
+            {% call govcyEmailElement('bodyHeading',{headinLevel:2}) -%}
+                Heading 2
+            {%- endcall %}
+            {% call govcyEmailElement('bodyParagraph') -%}
+                Lorem ipsum kai xero go kouventes
+            {%- endcall %}
+            {% call govcyEmailElement('bodyHeading',{headinLevel:3}) -%}
+                Heading 3
+            {%- endcall %}
+            {% call govcyEmailElement('bodyParagraph') -%}
+                Lorem ipsum kai xero go kouventes
+            {%- endcall %}
+            {% call govcyEmailElement('bodyHeading',{headinLevel:4}) -%}
+                Heading 4
+            {%- endcall %}
+            {% call govcyEmailElement('bodyParagraph') -%}
+                Lorem ipsum kai xero go kouventes
+            {%- endcall %}
+            {{ govcyEmailElement ('bodyList',{type:'ol', items: ["xero -", "go", "kouvente"]}) }}
+            {{ govcyEmailElement ('bodyList',{type:'ul', items: ['<a href="#">xero</a>', "go", "kouvente"]}) }}
+        {%- endcall%}
+    {%- endblock %}
+    {# footer block #}
+    {% block footer -%}
+        {# use the footer component #}
+        {{ govcyEmailElement ('footer',{footerText:'Όνομα υπηρεσίας'}) }}
+    {%- endblock %}

package/src/njk/templates/verification-test.njk

@@ -0,0 +1,33 @@
+{# extend the base html #}
+{% extends "govcyBase.njk" %}
+{# import components #}
+{% from "govcyEmailElement.njk" import govcyEmailElement %}
+{# set language #}
+{% set lang='el'%}
+{# set the blocks of the base template  #}
+    {# language block  #}
+    {% block lang %}{{lang}}{% endblock %}
+    {# subject block #}
+    {% block subject %}Service email{% endblock %}
+    {# pre header block #}
+    {% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'The pre header text'}) }}{%- endblock %}
+    {# header block #}
+    {% block header -%}
+        {# use the header component #}
+        {{ govcyEmailElement ('header',{serviceName:'Service name', name:'First and Last name',lang:lang}) }}
+    {%- endblock %}
+    {# body block #}
+    {% block body -%}
+        {# use the body component   #}
+        {% call govcyEmailElement('body') -%}
+            {# use combinatopn of body components to complete the body #}
+            {% call govcyEmailElement('bodyHeading',{headinLevel:1}) -%}
+                Verify code: 12234
+            {%- endcall %}
+        {%- endcall%}
+    {%- endblock %}
+    {# footer block #}
+    {% block footer -%}
+        {# use the footer component #}
+        {{ govcyEmailElement ('footer',{footerText:'Όνομα υπηρεσίας'}) }}
+    {%- endblock %}

package/test/mailtrap-njk.js

@@ -0,0 +1,89 @@
+"use strict";
+/**
+ * Send test email on you mailtrap account. 
+ * 
+ * To run the script takes 1 argument which is the path of t file for the body of the email
+ * 
+ * for example:
+ * 
+ * ```
+ * node .\test\mailtrap.js build/test.html
+ * ```
+ * 
+ * Note that to use you need to set the mailtrap username and password as followes:
+ * 
+ * ```
+ * #on powershell
+ * $env:MAILTRAP_USERNAME = 'xxxxxxxxx'
+ * $env:MAILTRAP_PASSWORD = 'yyyyyyyy'
+
+ * #on windows
+ * set MAILTRAP_USERNAME=xxxxxxxxx
+ * set MAILTRAP_PASSWORD=yyyyyyyy
+
+ * # On Unix 
+ * export MAILTRAP_USERNAME=xxxxxxxxx
+ * export MAILTRAP_PASSWORD=yyyyyyyy
+
+ * #in javascript
+ * cap['browserstack.username'] = process.env.MAILTRAP_USERNAME || 'xxxxxxxxx';
+ * cap['browserstack.accessKey'] = process.env.MAILTRAP_PASSWORD || 'yyyyyyyy';
+ * ```
+ * 
+ */
+import nodemailer from 'nodemailer';
+import fs from 'fs';
+import { DSFEmailRenderer } from '../src/index.mjs';
+import { exit } from 'process';
+
+// async..await is not allowed in global scope, must use a wrapper
+async function testMailtrap() {
+  
+  const myArgs = process.argv.slice(2);
+  
+  if (myArgs.length < 1) {
+    console.log('ERROR: Argument not specified. Specify the path of the HTML file for the body of the email.');
+    process.exit(1);
+  }
+  const renderer = new DSFEmailRenderer();
+  //render html 
+  const htmlBody = await renderer.renderFromFile(myArgs[0]);
+
+  // Generate test SMTP service account from ethereal.email
+  // Only needed if you don't have a real mail account for testing
+  let testAccount = await nodemailer.createTestAccount();
+
+  // create reusable transporter object using the default SMTP transport
+  let transporter = nodemailer.createTransport({
+    host: "smtp.mailtrap.io",
+    port: 2525,
+    auth: {
+      user: process.env.MAILTRAP_USERNAME,
+      pass: process.env.MAILTRAP_PASSWORD
+    }
+  });
+  
+  // send mail with defined transport object
+  let info = await transporter.sendMail({
+    from: 'govcy" <noreply@gov.cy>', // sender address
+    to: "test@dits.dmrid.gov.cy", // list of receivers
+    subject: "{{SERVICE-NAME}}", // Subject line
+    // text: `Text`, // plain text body
+    html: htmlBody
+  });
+
+  console.log("Message sent: %s", info.messageId);
+
+  // Preview only available when sending through an Ethereal account
+  console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
+}
+
+// Call testMailtrap() and handle errors
+testMailtrap()
+    .then(() => {
+        console.log('Mailtrap test successful');
+    })
+    .catch((error) => {
+        console.error('An error occurred:', error);
+        process.exit(1); // Exit with a non-zero status code
+    });

package/test/mailtrap.js

@@ -0,0 +1,84 @@
+"use strict";
+/**
+ * Send test email on you mailtrap account. 
+ * 
+ * To run the script takes 1 argument which is the path of njk file to render the body of the email
+ * 
+ * for example:
+ * 
+ * ```
+ * node .\test\mailtrap.js build/test.html
+ * ```
+ * 
+ * Note that to use you need to set the mailtrap username and password as followes:
+ * 
+ * ```
+ * #on powershell
+ * $env:MAILTRAP_USERNAME = 'xxxxxxxxx'
+ * $env:MAILTRAP_PASSWORD = 'yyyyyyyy'
+
+ * #on windows
+ * set MAILTRAP_USERNAME=xxxxxxxxx
+ * set MAILTRAP_PASSWORD=yyyyyyyy
+
+ * # On Unix 
+ * export MAILTRAP_USERNAME=xxxxxxxxx
+ * export MAILTRAP_PASSWORD=yyyyyyyy
+
+ * #in javascript
+ * cap['browserstack.username'] = process.env.MAILTRAP_USERNAME || 'xxxxxxxxx';
+ * cap['browserstack.accessKey'] = process.env.MAILTRAP_PASSWORD || 'yyyyyyyy';
+ * ```
+ * 
+ */
+import nodemailer from 'nodemailer';
+import fs from 'fs';
+import { exit } from 'process';
+
+// async..await is not allowed in global scope, must use a wrapper
+async function testMailtrap() {
+
+  const myArgs = process.argv.slice(2);
+  
+  if (myArgs.length < 1) {
+    console.log('ERROR: Argument not specified. Specify the path of the HTML file for the body of the email.');
+    process.exit(1);
+  }
+  // Generate test SMTP service account from ethereal.email
+  // Only needed if you don't have a real mail account for testing
+  let testAccount = await nodemailer.createTestAccount();
+
+  // create reusable transporter object using the default SMTP transport
+  let transporter = nodemailer.createTransport({
+    host: "smtp.mailtrap.io",
+    port: 2525,
+    auth: {
+      user: process.env.MAILTRAP_USERNAME,
+      pass: process.env.MAILTRAP_PASSWORD
+    }
+  });
+
+  // send mail with defined transport object
+  let info = await transporter.sendMail({
+    from: 'govcy" <noreply@gov.cy>', // sender address
+    to: "test@dits.dmrid.gov.cy", // list of receivers
+    subject: "{{SERVICE-NAME}}", // Subject line
+    // text: `Text`, // plain text body
+    html: fs.readFileSync(myArgs[0])
+  });
+
+  console.log("Message sent: %s", info.messageId);
+
+  // Preview only available when sending through an Ethereal account
+  console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
+}
+
+// Call testMailtrap() and handle errors
+testMailtrap()
+    .then(() => {
+        console.log('Mailtrap test successful');
+    })
+    .catch((error) => {
+        console.error('An error occurred:', error);
+        process.exit(1); // Exit with a non-zero status code
+    });