@gov-cy/dsf-email-templates 1.0.8 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/NOTES.md +10 -1
- package/README.md +67 -46
- package/build/submission-email.html +37 -31
- package/package.json +1 -1
- package/src/DSFEmailRenderer.mjs +7 -11
- package/src/njk/components/body.njk +1 -1
- package/src/njk/components/bodyHeading.njk +4 -3
- package/src/njk/components/bodyList.njk +2 -1
- package/src/njk/components/bodyParagraph.njk +5 -2
- package/src/njk/components/bodySuccess.njk +28 -0
- package/src/njk/components/footer.njk +2 -1
- package/src/njk/components/header.njk +2 -15
- package/src/njk/components/preHeader.njk +2 -1
- package/src/njk/govcyEmailElement.njk +5 -4
- package/src/njk/templates/submission-email.njk +14 -14
- package/test/moca/unit.test.js +20 -29
- package/build/submission-email-small.html +0 -124
- package/build/verification-email.html +0 -85
- package/src/njk/components/success.njk +0 -23
- package/src/njk/templates/submission-email-small.njk +0 -47
- package/src/njk/templates/verification-test.njk +0 -33
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [v2.0.0] - 2024-04-23
|
|
9
|
+
|
|
10
|
+
Restructure of the `govcyBase.njk`. Success now is part of the body and removed salutation from header.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
- `lang` parameter in all components with text content
|
|
14
|
+
- `bodySuccess.njk` which renders success panel inside the body
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
- body vertical spacing
|
|
18
|
+
|
|
19
|
+
### Removed
|
|
20
|
+
- Unnecessary templates
|
|
21
|
+
- `success` block from `govcyBase.njk` and templates
|
|
22
|
+
- `success.njk`. It is replaced by `bodySuccess.njk` which is rendered in the body block
|
|
23
|
+
- Salutation from header. If needed can now be a paragraph inside the body
|
|
24
|
+
|
|
25
|
+
## [v1.0.9] - 2024-04-23
|
|
26
|
+
|
|
27
|
+
### Changed
|
|
28
|
+
- Added npm shield in readme.md
|
|
29
|
+
|
|
8
30
|
## [v1.0.7] - 2024-04-22
|
|
9
31
|
|
|
10
32
|
### Added
|
package/NOTES.md
CHANGED
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
Notes for the project
|
|
2
2
|
|
|
3
|
+
## Project structure
|
|
4
|
+
|
|
5
|
+
- `bin` contains the command line tools
|
|
6
|
+
- `src` contains the source files
|
|
7
|
+
- `src\njk` contain the nunjucks source base and macros
|
|
8
|
+
- `src\templates` contain the template files used to build the html files
|
|
9
|
+
- `build` contains the build HTML files
|
|
10
|
+
- `test` contains the scripts for testing
|
|
11
|
+
|
|
3
12
|
## Testing
|
|
4
13
|
|
|
5
14
|
### Unit tests
|
|
6
15
|
|
|
7
|
-
|
|
16
|
+
Run `npm test`
|
|
8
17
|
|
|
9
18
|
### Mailtrap
|
|
10
19
|
|
package/README.md
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
[](https://www.npmjs.com/package/@gov-cy/dsf-email-templates)
|
|
1
2
|
|
|
2
3
|
[](https://github.com/gov-cy/dsf-email-template/actions/workflows/unit-test.yml)
|
|
3
4
|
[](https://github.com/gov-cy/dsf-email-template/actions/workflows/tag-and-publish-on-version-change.yml)
|
|
@@ -10,6 +11,7 @@ Use this project to produce html email templates to be used by DSF. These emails
|
|
|
10
11
|
- Make sure it works well with most email clients
|
|
11
12
|
- Be responsive (work well on desktop and mobiles)
|
|
12
13
|
- Follow accessibility guidelines
|
|
14
|
+
- Allow multi-language content
|
|
13
15
|
- Include the gov.cy branding
|
|
14
16
|
|
|
15
17
|
The project uses [nunjucks](https://mozilla.github.io/nunjucks/) templates to built the email html.
|
|
@@ -29,10 +31,9 @@ Compatibility with clients based on mailtrap test on 2024-04-10
|
|
|
29
31
|
## Features
|
|
30
32
|
|
|
31
33
|
`DSF-email-templates` can:
|
|
32
|
-
- Generate email HTML from input nunjucks template, using the project's base template and macros.
|
|
33
|
-
- Generate email HTML from input JSON data
|
|
34
|
-
|
|
35
|
-
It can be used by importing the class in your code, or from the command line using file input.
|
|
34
|
+
- Generate email HTML programmatically from input nunjucks template, using the project's base template and macros.
|
|
35
|
+
- Generate email HTML programmatically from input JSON data
|
|
36
|
+
- Generate email HTML from the command line
|
|
36
37
|
|
|
37
38
|
## Install
|
|
38
39
|
|
|
@@ -42,15 +43,6 @@ First, install the DSF Email Templates package using npm:
|
|
|
42
43
|
npm install @gov-cy/dsf-email-templates
|
|
43
44
|
```
|
|
44
45
|
|
|
45
|
-
## Project structure
|
|
46
|
-
|
|
47
|
-
- `bin` contains the command line tools
|
|
48
|
-
- `src` contains the source files
|
|
49
|
-
- `src\njk` contain the nunjucks source base and macros
|
|
50
|
-
- `src\templates` contain the template files used to build the html files
|
|
51
|
-
- `build` contains the build HTML files
|
|
52
|
-
- `test` contains the scripts for testing
|
|
53
|
-
|
|
54
46
|
## Using it Programmatically
|
|
55
47
|
|
|
56
48
|
You can use the `DSFEmailRenderer` class to render email templates programmatically in your Node.js applications.
|
|
@@ -78,8 +70,9 @@ const inputString = `
|
|
|
78
70
|
{% block header -%}{{ govcyEmailElement ('header',{serviceName:'Service name', name:'First and Last name',lang:lang}) }}{%- endblock %}
|
|
79
71
|
{% block body -%}
|
|
80
72
|
{% call govcyEmailElement('body') -%}
|
|
81
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
73
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:1}) -%}Heading 1{%- endcall %}
|
|
82
74
|
{% call govcyEmailElement('bodyParagraph') -%}Paragraph{%- endcall %}
|
|
75
|
+
{% call govcyEmailElement('bodyParagraph',{"lang":"el"}) -%}Παράγραφος{%- endcall %}
|
|
83
76
|
{% endcall %}
|
|
84
77
|
{% endblock %}
|
|
85
78
|
{% block footer -%}
|
|
@@ -124,7 +117,6 @@ You can then use various the base template's blocks to built the structure of th
|
|
|
124
117
|
- **subject**: Set's the html title. Usually the same as the intended email subject
|
|
125
118
|
- **pre**: Pre header text that is invisible in the html body
|
|
126
119
|
- **header**: The header of the email with the gov.cy logo and name of the service or site
|
|
127
|
-
- **success**: An area dedicated to showing the success panel. To be used when sending emails after successful submissions from a service.
|
|
128
120
|
- **body**: The main body of the email.
|
|
129
121
|
- **footer**: The footer of the email
|
|
130
122
|
|
|
@@ -137,7 +129,6 @@ Here's an example using the blocks of the base template. Note that this will onl
|
|
|
137
129
|
{% block subject %}Service email{% endblock %}
|
|
138
130
|
{% block pre -%}The pre header text'{%- endblock %}
|
|
139
131
|
{% block header -%}The header{%- endblock %}
|
|
140
|
-
{% block success -%}Success message{%- endblock %}
|
|
141
132
|
{% block body -%}The Body{% endblock %}
|
|
142
133
|
{% block footer -%}The footer{%- endblock %}
|
|
143
134
|
```
|
|
@@ -180,7 +171,7 @@ Returns govcy header for emails html. It should be used in the `header` block.
|
|
|
180
171
|
**Parameters**
|
|
181
172
|
- {string} `serviceName` The service name. Will escape text
|
|
182
173
|
- {string} `name` The name used in salutation. Will escape text
|
|
183
|
-
- {string} `lang` The language used. Can be 'en','el'. Optional
|
|
174
|
+
- {string} `lang` The language used. Can be 'en','el'. Optional.
|
|
184
175
|
|
|
185
176
|
Usage example:
|
|
186
177
|
|
|
@@ -212,18 +203,44 @@ Usage example:
|
|
|
212
203
|
```
|
|
213
204
|
</details>
|
|
214
205
|
|
|
206
|
+
<details>
|
|
207
|
+
<summary>bodySuccess</summary>
|
|
208
|
+
|
|
209
|
+
Returns govcy success panel for emails html. It should be used in the `body` block.
|
|
210
|
+
|
|
211
|
+
**Parameters**
|
|
212
|
+
- {string} `title` The success title text. Will escape text
|
|
213
|
+
- {string} `body` The success body text. Will escape text
|
|
214
|
+
- {string} `lang` The language used. Can be 'en','el'. Optional.
|
|
215
|
+
|
|
216
|
+
Usage example:
|
|
217
|
+
|
|
218
|
+
```njk
|
|
219
|
+
{{ govcyEmailElement
|
|
220
|
+
(
|
|
221
|
+
'bodySuccess',
|
|
222
|
+
{
|
|
223
|
+
title:'title part',
|
|
224
|
+
body:'body part'
|
|
225
|
+
}
|
|
226
|
+
)
|
|
227
|
+
}}
|
|
228
|
+
```
|
|
229
|
+
</details>
|
|
230
|
+
|
|
215
231
|
<details>
|
|
216
232
|
<summary>bodyHeading</summary>
|
|
217
233
|
|
|
218
234
|
Returns govcy an h1, h2, h3 or h3 for emails html. It should be used in the `body` block. It returns the content available inside the macro.
|
|
219
235
|
|
|
220
236
|
**Parameters**
|
|
221
|
-
- {string} `
|
|
237
|
+
- {string} `headingLevel` The heading level. Optional, default is 1. Can be 1,2,3,4
|
|
238
|
+
- {string} `lang` The language used. Can be 'en','el'. Optional.
|
|
222
239
|
|
|
223
240
|
Usage example:
|
|
224
241
|
|
|
225
242
|
```njk
|
|
226
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
243
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:2,lang:'en'}) -%}
|
|
227
244
|
Heading 2
|
|
228
245
|
{%- endcall %}
|
|
229
246
|
```
|
|
@@ -232,12 +249,16 @@ Usage example:
|
|
|
232
249
|
<details>
|
|
233
250
|
<summary>bodyParagraph</summary>
|
|
234
251
|
|
|
235
|
-
Returns govcy a paragraph. It should be used in the `body` block. It
|
|
252
|
+
Returns govcy a paragraph. It should be used in the `body` block. It returns the content available inside the macro.
|
|
253
|
+
|
|
254
|
+
**Parameters**
|
|
255
|
+
- {string} `headingLevel` The heading level. Optional, default is 1. Can be 1,2,3,4
|
|
256
|
+
- {string} `lang` The language used. Can be 'en','el'. Optional.
|
|
236
257
|
|
|
237
258
|
Usage example:
|
|
238
259
|
|
|
239
260
|
```njk
|
|
240
|
-
{% call govcyEmailElement('bodyParagraph') -%}
|
|
261
|
+
{% call govcyEmailElement('bodyParagraph',{lang:'en'}) -%}
|
|
241
262
|
Lorem ipsum
|
|
242
263
|
{%- endcall %}
|
|
243
264
|
```
|
|
@@ -251,6 +272,7 @@ Returns govcy an ordered or un-ordered list. It should be used in the `body` blo
|
|
|
251
272
|
**Parameters**
|
|
252
273
|
- {string} `type` The list type. Optional, default is 'ul'. Can be 'ul', 'ol'
|
|
253
274
|
- {array} `items` The array of items to turn onto list items
|
|
275
|
+
- {string} `lang` The language used. Can be 'en','el'. Optional.
|
|
254
276
|
|
|
255
277
|
Usage example:
|
|
256
278
|
|
|
@@ -279,21 +301,19 @@ Here's a complete example of a nunjucks template using DSF assets:
|
|
|
279
301
|
{# header block #}
|
|
280
302
|
{% block header -%}
|
|
281
303
|
{# use the header component #}
|
|
282
|
-
{{ govcyEmailElement ('header',{serviceName:'Έκδοση πιστοποιητικού γέννησης',
|
|
304
|
+
{{ govcyEmailElement ('header',{serviceName:'Έκδοση πιστοποιητικού γέννησης',lang:lang}) }}
|
|
283
305
|
{%- endblock %}
|
|
284
306
|
{# success block #}
|
|
285
|
-
{% block success -%}
|
|
286
|
-
{# use the email success component #}
|
|
287
|
-
{{ govcyEmailElement ('success',
|
|
288
|
-
{
|
|
289
|
-
title:'Το πιστοποιητικό γέννησης που εκδώσατε είναι έτοιμο',
|
|
290
|
-
body:'Αριθμός αναφοράς 123456'}
|
|
291
|
-
) }}
|
|
292
|
-
{%- endblock %}
|
|
293
307
|
{# body block #}
|
|
294
308
|
{% block body -%}
|
|
295
309
|
{# use the body component #}
|
|
296
310
|
{% call govcyEmailElement('body') -%}
|
|
311
|
+
{# use the email success component #}
|
|
312
|
+
{{ govcyEmailElement ('bodySuccess',
|
|
313
|
+
{
|
|
314
|
+
title:'Το πιστοποιητικό γέννησης που εκδώσατε είναι έτοιμο',
|
|
315
|
+
body:'Αριθμός αναφοράς 123456'}
|
|
316
|
+
) }}
|
|
297
317
|
{# use combinatopn of body components to complete the body #}
|
|
298
318
|
{% call govcyEmailElement('bodyParagraph') -%}
|
|
299
319
|
Η ημερομηνία έκδοσης είναι 1/1/2019 και ο αριθμός αναφοράς σας είναι 123456.
|
|
@@ -340,23 +360,24 @@ import { DSFEmailRenderer } from '@gov-cy/dsf-email-templates';
|
|
|
340
360
|
const renderer = new DSFEmailRenderer();
|
|
341
361
|
|
|
342
362
|
const inputJson={
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
]
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
363
|
+
lang: "el",
|
|
364
|
+
subject: "Service email",
|
|
365
|
+
pre: "The pre header text",
|
|
366
|
+
header: {serviceName:'Service name', name:'First and Last name'},
|
|
367
|
+
success: {
|
|
368
|
+
title:'title part',
|
|
369
|
+
body:'body part'
|
|
370
|
+
},
|
|
371
|
+
body: [
|
|
372
|
+
{"component": "bodySuccess", params:"{title:'title part', body:'body part'}"},
|
|
373
|
+
{"component": "bodyHeading",params: '{"headingLevel":1}',body:"Heading 1"},
|
|
374
|
+
{"component": "bodyParagraph", body:"Paragraph",params:'{lang:"en"}'},
|
|
375
|
+
{"component": "bodyList", params:'{type:"ol", items: ["item 1", "item 2", "item 3"]}'}
|
|
376
|
+
],
|
|
377
|
+
footer: {
|
|
378
|
+
footerText: "Name of service"
|
|
359
379
|
}
|
|
380
|
+
}
|
|
360
381
|
|
|
361
382
|
//Render the email template
|
|
362
383
|
const renderedTemplate = renderer.renderFromJson(inputJson);
|
|
@@ -39,37 +39,43 @@
|
|
|
39
39
|
<tr>
|
|
40
40
|
<td align="left" valign="top" style="padding:0px 16px 12px;border-bottom: 4px solid #ffad2d;background:#31576f;background-color:#31576f;">
|
|
41
41
|
<!-- SERVICE NAME -->
|
|
42
|
-
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;" >Service name</div>
|
|
43
|
-
</td>
|
|
44
|
-
</tr>
|
|
45
|
-
<tr>
|
|
46
|
-
<td align="center" valign="top" style="padding:20px 16px;">
|
|
47
|
-
<!-- SALUTATION -->
|
|
48
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >Αγαπητέ / Αγαπητή First and Last name</div>
|
|
42
|
+
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;" lang="el">Service name</div>
|
|
49
43
|
</td>
|
|
50
44
|
</tr>
|
|
51
45
|
</table>
|
|
52
46
|
<!-- SUCCESS -->
|
|
53
47
|
|
|
54
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:10px 0;max-width: 600px;background:#00703c;background-color:#00703c;" >
|
|
55
|
-
<tr>
|
|
56
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
57
|
-
<!-- Received -->
|
|
58
|
-
<div style="font-family:helvetica;font-size:24px;font-weight:bold;line-height:1.5;text-align:center;color:#ffffff;">Έχουμε λάβει την αίτησή σας</div>
|
|
59
|
-
</td>
|
|
60
|
-
</tr><tr>
|
|
61
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
62
|
-
<!-- details -->
|
|
63
|
-
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:center;color:#ffffff;">Η ημερομηνία της αίτησης είναι 12/1/2024 και ο αριθμός αναφοράς σας είναι DSF123456789.</div>
|
|
64
|
-
</td>
|
|
65
|
-
</tr></table>
|
|
66
48
|
<!-- BODY -->
|
|
67
49
|
|
|
68
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
69
|
-
|
|
50
|
+
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; padding:10px 0;" >
|
|
51
|
+
<tr>
|
|
52
|
+
<td align="center" valign="top" style="padding:10px 16px;">
|
|
53
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
54
|
+
Αγαπητέ / Αγαπητή First and Last name
|
|
55
|
+
</div>
|
|
56
|
+
</td>
|
|
57
|
+
</tr>
|
|
58
|
+
|
|
59
|
+
<tr>
|
|
60
|
+
<td align="center" valign="top" style="padding:10px 0;">
|
|
61
|
+
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:10px 0;max-width: 600px;background:#00703c;background-color:#00703c;" >
|
|
62
|
+
<tr>
|
|
63
|
+
<td align="center" valign="top" style="padding:10px 16px;">
|
|
64
|
+
<!-- Received -->
|
|
65
|
+
<div style="font-family:helvetica;font-size:24px;font-weight:bold;line-height:1.5;text-align:center;color:#ffffff;">Έχουμε λάβει την αίτησή σας</div>
|
|
66
|
+
</td>
|
|
67
|
+
</tr><tr>
|
|
68
|
+
<td align="center" valign="top" style="padding:10px 16px;">
|
|
69
|
+
<!-- details -->
|
|
70
|
+
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:center;color:#ffffff;">Η ημερομηνία της αίτησης είναι 12/1/2024 και ο αριθμός αναφοράς σας είναι DSF123456789.</div>
|
|
71
|
+
</td>
|
|
72
|
+
</tr></table>
|
|
73
|
+
</td>
|
|
74
|
+
</tr>
|
|
75
|
+
|
|
70
76
|
<tr>
|
|
71
77
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
72
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >
|
|
78
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" lang="en">
|
|
73
79
|
|
|
74
80
|
<h1 style="font-size:28px;font-weight:700;margin: 0;">
|
|
75
81
|
Heading 1
|
|
@@ -80,14 +86,14 @@
|
|
|
80
86
|
</tr>
|
|
81
87
|
<tr>
|
|
82
88
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
83
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
89
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
84
90
|
Αν χρειαστούμε οποιοδήποτε άλλο στοιχείο κατά τη διάρκεια εξέτασης της αίτησής σας, θα επικοινωνήσουμε μαζί σας
|
|
85
91
|
</div>
|
|
86
92
|
</td>
|
|
87
93
|
</tr>
|
|
88
94
|
<tr>
|
|
89
95
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
90
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
96
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
91
97
|
|
|
92
98
|
<h2 style="font-size:24px;font-weight:700;margin: 0;">
|
|
93
99
|
Heading 2
|
|
@@ -98,14 +104,14 @@
|
|
|
98
104
|
</tr>
|
|
99
105
|
<tr>
|
|
100
106
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
101
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
107
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
102
108
|
Lorem ipsum kai xero go kouventes
|
|
103
109
|
</div>
|
|
104
110
|
</td>
|
|
105
111
|
</tr>
|
|
106
112
|
<tr>
|
|
107
113
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
108
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
114
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
109
115
|
|
|
110
116
|
<h3 style="font-size:20px;font-weight:700;margin: 0;">
|
|
111
117
|
Heading 3
|
|
@@ -116,14 +122,14 @@
|
|
|
116
122
|
</tr>
|
|
117
123
|
<tr>
|
|
118
124
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
119
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
125
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
120
126
|
Lorem ipsum kai xero go kouventes
|
|
121
127
|
</div>
|
|
122
128
|
</td>
|
|
123
129
|
</tr>
|
|
124
130
|
<tr>
|
|
125
131
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
126
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
132
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
127
133
|
|
|
128
134
|
<h4 style="font-size:18px;font-weight:700;margin: 0;">
|
|
129
135
|
Heading 4
|
|
@@ -134,14 +140,14 @@
|
|
|
134
140
|
</tr>
|
|
135
141
|
<tr>
|
|
136
142
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
137
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
143
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
138
144
|
Lorem ipsum kai xero go kouventes
|
|
139
145
|
</div>
|
|
140
146
|
</td>
|
|
141
147
|
</tr>
|
|
142
148
|
<tr>
|
|
143
149
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
144
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
150
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
145
151
|
|
|
146
152
|
<ol style="margin:0; margin-left: 16px; padding:0; line-height:22px;" align="left">
|
|
147
153
|
<li>xero -</li><li>go</li><li>kouvente</li></ol>
|
|
@@ -151,7 +157,7 @@
|
|
|
151
157
|
</tr>
|
|
152
158
|
<tr>
|
|
153
159
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
154
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
160
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">
|
|
155
161
|
|
|
156
162
|
<ul style="margin:0; margin-left: 16px; padding:0; line-height:22px;" align="left" type="disc">
|
|
157
163
|
<li><a href="#">xero</a></li><li>go</li><li>kouvente</li></ul>
|
package/package.json
CHANGED
package/src/DSFEmailRenderer.mjs
CHANGED
|
@@ -79,29 +79,25 @@ export default class DSFEmailRenderer {
|
|
|
79
79
|
`
|
|
80
80
|
//if there is a pre-header
|
|
81
81
|
if (jsonInput.hasOwnProperty('pre')){
|
|
82
|
-
jsonTemplate += `{% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'${jsonInput.pre}'
|
|
82
|
+
jsonTemplate += `{% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'${jsonInput.pre}'
|
|
83
|
+
}) }}{%- endblock %}`
|
|
83
84
|
}
|
|
84
85
|
//if there is a header
|
|
85
86
|
if (jsonInput.hasOwnProperty('header')){
|
|
86
87
|
jsonTemplate += `
|
|
87
88
|
{% block header -%}
|
|
88
89
|
{{ govcyEmailElement ('header',{serviceName:'${jsonInput.header.serviceName}',
|
|
89
|
-
name:'${jsonInput.header.name}'
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
//if there is a success
|
|
93
|
-
if (jsonInput.hasOwnProperty('success')){
|
|
94
|
-
jsonTemplate += `
|
|
95
|
-
{% block success -%}
|
|
96
|
-
{{ govcyEmailElement ('success',{title:'${jsonInput.success.title}',
|
|
97
|
-
body:'${jsonInput.success.body}'}) }}
|
|
90
|
+
name:'${jsonInput.header.name}'
|
|
91
|
+
${jsonInput.header.hasOwnProperty("lang")? `,lang:'${jsonInput.header.lang}'`:``}
|
|
92
|
+
}) }}
|
|
98
93
|
{%- endblock %}`
|
|
99
94
|
}
|
|
100
95
|
//if there is a footer
|
|
101
96
|
if (jsonInput.hasOwnProperty('footer')){
|
|
102
97
|
jsonTemplate += `
|
|
103
98
|
{% block footer -%}
|
|
104
|
-
{{ govcyEmailElement ('footer',{footerText:'${jsonInput.footer.footerText}'
|
|
99
|
+
{{ govcyEmailElement ('footer',{footerText:'${jsonInput.footer.footerText}'
|
|
100
|
+
${jsonInput.footer.hasOwnProperty("lang")? `,lang:'${jsonInput.footer.lang}'`:``} }) }}
|
|
105
101
|
{%- endblock %}`
|
|
106
102
|
}
|
|
107
103
|
//if there is a body
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@returns govcy body for emails html
|
|
3
3
|
#}
|
|
4
4
|
{% macro gocvyEmailBody() -%}
|
|
5
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
5
|
+
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; padding:10px 0;" >
|
|
6
6
|
{{ caller() }}
|
|
7
7
|
</table>
|
|
8
8
|
{%- endmacro %}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{# body Heading
|
|
2
|
-
@param {string}
|
|
2
|
+
@param {string} headingLevel The heading level. Optional, default is 1. Can be 1,2,3,4
|
|
3
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
3
4
|
@returns govcy body Heading for emails html
|
|
4
5
|
#}
|
|
5
6
|
{% macro gocvyEmailBodyHeading(params) -%}
|
|
6
7
|
{%- from "./bodyParagraph.njk" import gocvyEmailBodyParagraph -%}
|
|
7
8
|
{#- set default values -#}
|
|
8
|
-
{%- set headingLevel = params.
|
|
9
|
+
{%- set headingLevel = params.headingLevel | default(1) -%}
|
|
9
10
|
{%- if headingLevel > 4 -%}
|
|
10
11
|
{%- set headingLevel = 4 -%}
|
|
11
12
|
{%- endif -%}
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
{%- else -%}
|
|
20
21
|
{%- set fontSize = '18px' -%}
|
|
21
22
|
{%- endif -%}
|
|
22
|
-
{% call gocvyEmailBodyParagraph() %}
|
|
23
|
+
{% call gocvyEmailBodyParagraph({lang:params.lang}) %}
|
|
23
24
|
<h{{headingLevel}} style="font-size:{{fontSize}};font-weight:700;margin: 0;">
|
|
24
25
|
{{ caller() }}
|
|
25
26
|
</h{{headingLevel}}>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{# body list
|
|
2
2
|
@param {string} type The list type. Optional, default is 'ul'. Can be 'ul', 'ol'
|
|
3
3
|
@param {array} items The array of items to turn onto list items
|
|
4
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
4
5
|
@returns govcy body List for emails html
|
|
5
6
|
#}
|
|
6
7
|
{% macro gocvyEmailBodyList(params) -%}
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
{%- set openHTML = '<ul style="margin:0; margin-left: 16px; padding:0; line-height:22px;" align="left" type="disc">' -%}
|
|
16
17
|
{%- set closeHTML = '</ul>' -%}
|
|
17
18
|
{%- endif -%}
|
|
18
|
-
{% call gocvyEmailBodyParagraph() %}
|
|
19
|
+
{% call gocvyEmailBodyParagraph({lang:params.lang}) %}
|
|
19
20
|
{{ openHTML | safe }}
|
|
20
21
|
{# for each item render list item #}
|
|
21
22
|
{%- for item in params.items -%}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
{# body Paragraph
|
|
2
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
2
3
|
@returns govcy body Paragraph for emails html
|
|
3
4
|
#}
|
|
4
|
-
{% macro gocvyEmailBodyParagraph() -%}
|
|
5
|
+
{% macro gocvyEmailBodyParagraph(params) -%}
|
|
6
|
+
{#- set default values -#}
|
|
7
|
+
{%- set lang = params.lang | default('el') -%}
|
|
5
8
|
<tr>
|
|
6
9
|
<td align="center" valign="top" style="padding:10px 16px;">
|
|
7
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >
|
|
10
|
+
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"{% if params.lang %} lang="{{params.lang}}"{% endif %}>
|
|
8
11
|
{{ caller() }}
|
|
9
12
|
</div>
|
|
10
13
|
</td>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{# success panel
|
|
2
|
+
@param {string} title The success title text. Will escape text
|
|
3
|
+
@param {string} body The success body text. Will escape text
|
|
4
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
5
|
+
@returns govcy success panel for emails html
|
|
6
|
+
#}
|
|
7
|
+
{% macro gocvyEmailBodySuccess(params) -%}
|
|
8
|
+
<tr>
|
|
9
|
+
<td align="center" valign="top" style="padding:10px 0;">
|
|
10
|
+
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:10px 0;max-width: 600px;background:#00703c;background-color:#00703c;" >
|
|
11
|
+
<tr>
|
|
12
|
+
<td align="center" valign="top" style="padding:10px 16px;">
|
|
13
|
+
<!-- Received -->
|
|
14
|
+
<div style="font-family:helvetica;font-size:24px;font-weight:bold;line-height:1.5;text-align:center;color:#ffffff;"{% if params.lang %} lang="{{params.lang}}"{% endif %}>{{ params.title }}</div>
|
|
15
|
+
</td>
|
|
16
|
+
</tr>
|
|
17
|
+
{%- if params.body -%}
|
|
18
|
+
<tr>
|
|
19
|
+
<td align="center" valign="top" style="padding:10px 16px;">
|
|
20
|
+
<!-- details -->
|
|
21
|
+
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:center;color:#ffffff;"{% if params.lang %} lang="{{params.lang}}"{% endif %}>{{ params.body }}</div>
|
|
22
|
+
</td>
|
|
23
|
+
</tr>
|
|
24
|
+
{%- endif -%}
|
|
25
|
+
</table>
|
|
26
|
+
</td>
|
|
27
|
+
</tr>
|
|
28
|
+
{%- endmacro %}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{# footer
|
|
2
2
|
@param {string} footerText The footerText. Will escape text
|
|
3
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
3
4
|
@returns govcy footer for emails html
|
|
4
5
|
#}
|
|
5
6
|
{% macro gocvyEmailFooter(params) -%}
|
|
@@ -11,7 +12,7 @@
|
|
|
11
12
|
<strong style="color:#000000; text-decoration: none;font-weight: 500;">gov.cy</strong>
|
|
12
13
|
</a>
|
|
13
14
|
</div>
|
|
14
|
-
<div style="font-family:Arial;font-size:16px;text-align:left;margin-bottom: 10px;line-height:1;" >
|
|
15
|
+
<div style="font-family:Arial;font-size:16px;text-align:left;margin-bottom: 10px;line-height:1;" {% if params.lang %} lang="{{params.lang}}"{% endif %}>
|
|
15
16
|
{{ params.footerText}}
|
|
16
17
|
</div>
|
|
17
18
|
</td>
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
{# header
|
|
2
2
|
@param {string} serviceName The service name. Will escape text
|
|
3
3
|
@param {string} name The name used in salutation. Will escape text
|
|
4
|
-
@param {string} lang The language used. Can be 'en','el'. Optional
|
|
4
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
5
5
|
@returns govcy header for emails html
|
|
6
6
|
#}
|
|
7
7
|
{% macro gocvyEmailHeader(params) -%}
|
|
8
|
-
{#- set default values -#}
|
|
9
|
-
{%- set lang = params.lang | default('el') -%}
|
|
10
|
-
{#- set language vars -#}
|
|
11
|
-
{%- set salutation -%}
|
|
12
|
-
{{- 'Dear' if lang=='en' -}}
|
|
13
|
-
{{- 'Αγαπητέ / Αγαπητή' if lang=='el' -}}
|
|
14
|
-
{%- endset -%}
|
|
15
8
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
16
9
|
<tr>
|
|
17
10
|
<!-- IMAGE -->
|
|
@@ -22,13 +15,7 @@
|
|
|
22
15
|
<tr>
|
|
23
16
|
<td align="left" valign="top" style="padding:0px 16px 12px;border-bottom: 4px solid #ffad2d;background:#31576f;background-color:#31576f;">
|
|
24
17
|
<!-- SERVICE NAME -->
|
|
25
|
-
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;" >{{ params.serviceName }}</div>
|
|
26
|
-
</td>
|
|
27
|
-
</tr>
|
|
28
|
-
<tr>
|
|
29
|
-
<td align="center" valign="top" style="padding:20px 16px;">
|
|
30
|
-
<!-- SALUTATION -->
|
|
31
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >{{ salutation }} {{params.name}}</div>
|
|
18
|
+
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;"{% if params.lang %} lang="{{params.lang}}"{% endif %}>{{ params.serviceName }}</div>
|
|
32
19
|
</td>
|
|
33
20
|
</tr>
|
|
34
21
|
</table>
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{# pre header
|
|
2
2
|
@param {string} preText The pre header text. Will escape text
|
|
3
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
3
4
|
@returns govcy pre header for emails html
|
|
4
5
|
#}
|
|
5
6
|
{% macro gocvyEmailPreHeader(params) -%}
|
|
6
|
-
<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>
|
|
7
|
+
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"{% if params.lang %} lang="{{params.lang}}"{% endif %}>{{params.preText}}</div>
|
|
7
8
|
{%- endmacro %}
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
{%- elif component == 'header' -%}
|
|
8
8
|
{%- from "./components/header.njk" import gocvyEmailHeader -%}
|
|
9
9
|
{{ gocvyEmailHeader(params) }}
|
|
10
|
-
{#-
|
|
11
|
-
{%- elif component == '
|
|
12
|
-
{%- from "./components/
|
|
13
|
-
{{
|
|
10
|
+
{#- bodySuccess -#}
|
|
11
|
+
{%- elif component == 'bodySuccess' -%}
|
|
12
|
+
{%- from "./components/bodySuccess.njk" import gocvyEmailBodySuccess -%}
|
|
13
|
+
{{ gocvyEmailBodySuccess(params) }}
|
|
14
14
|
{#- bodyList -#}
|
|
15
15
|
{%- elif component == 'bodyList' -%}
|
|
16
16
|
{%- from "./components/bodyList.njk" import gocvyEmailBodyList -%}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
{%- elif component == 'footer' -%}
|
|
20
20
|
{%- from "./components/footer.njk" import gocvyEmailFooter -%}
|
|
21
21
|
{{ gocvyEmailFooter(params) }}
|
|
22
|
+
{#- caller elements -#}
|
|
22
23
|
{#- body -#}
|
|
23
24
|
{%- elif component == 'body' -%}
|
|
24
25
|
{%- from "./components/body.njk" import gocvyEmailBody -%}
|
|
@@ -14,41 +14,41 @@
|
|
|
14
14
|
{# header block #}
|
|
15
15
|
{% block header -%}
|
|
16
16
|
{# use the header component #}
|
|
17
|
-
{{ govcyEmailElement ('header',{serviceName:'Service name',
|
|
18
|
-
{%- endblock %}
|
|
19
|
-
{# success block #}
|
|
20
|
-
{% block success -%}
|
|
21
|
-
{# use the email success component #}
|
|
22
|
-
{{ govcyEmailElement ('success',
|
|
23
|
-
{
|
|
24
|
-
title:'Έχουμε λάβει την αίτησή σας',
|
|
25
|
-
body:'Η ημερομηνία της αίτησης είναι 12/1/2024 και ο αριθμός αναφοράς σας είναι DSF123456789.'}
|
|
26
|
-
) }}
|
|
17
|
+
{{ govcyEmailElement ('header',{serviceName:'Service name',lang:lang}) }}
|
|
27
18
|
{%- endblock %}
|
|
28
19
|
{# body block #}
|
|
29
20
|
{% block body -%}
|
|
30
21
|
{# use the body component #}
|
|
31
22
|
{% call govcyEmailElement('body') -%}
|
|
23
|
+
{% call govcyEmailElement('bodyParagraph') -%}
|
|
24
|
+
Αγαπητέ / Αγαπητή First and Last name
|
|
25
|
+
{%- endcall %}
|
|
26
|
+
{# use the email success component #}
|
|
27
|
+
{{ govcyEmailElement ('bodySuccess',
|
|
28
|
+
{
|
|
29
|
+
title:'Έχουμε λάβει την αίτησή σας',
|
|
30
|
+
body:'Η ημερομηνία της αίτησης είναι 12/1/2024 και ο αριθμός αναφοράς σας είναι DSF123456789.'}
|
|
31
|
+
) }}
|
|
32
32
|
{# use combinatopn of body components to complete the body #}
|
|
33
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
33
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:1,lang:"en"}) -%}
|
|
34
34
|
Heading 1
|
|
35
35
|
{%- endcall %}
|
|
36
36
|
{% call govcyEmailElement('bodyParagraph') -%}
|
|
37
37
|
Αν χρειαστούμε οποιοδήποτε άλλο στοιχείο κατά τη διάρκεια εξέτασης της αίτησής σας, θα επικοινωνήσουμε μαζί σας
|
|
38
38
|
{%- endcall %}
|
|
39
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
39
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:2}) -%}
|
|
40
40
|
Heading 2
|
|
41
41
|
{%- endcall %}
|
|
42
42
|
{% call govcyEmailElement('bodyParagraph') -%}
|
|
43
43
|
Lorem ipsum kai xero go kouventes
|
|
44
44
|
{%- endcall %}
|
|
45
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
45
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:3}) -%}
|
|
46
46
|
Heading 3
|
|
47
47
|
{%- endcall %}
|
|
48
48
|
{% call govcyEmailElement('bodyParagraph') -%}
|
|
49
49
|
Lorem ipsum kai xero go kouventes
|
|
50
50
|
{%- endcall %}
|
|
51
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
51
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:4}) -%}
|
|
52
52
|
Heading 4
|
|
53
53
|
{%- endcall %}
|
|
54
54
|
{% call govcyEmailElement('bodyParagraph') -%}
|
package/test/moca/unit.test.js
CHANGED
|
@@ -12,15 +12,15 @@ describe('1. Testing `DSFEmailRenderer.renderFromString`, use of `govcyBase.njk`
|
|
|
12
12
|
{% block lang %}{{lang}}{% endblock %}
|
|
13
13
|
{% block subject %}Service email{% endblock %}
|
|
14
14
|
{% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'The pre header text'}) }}{%- endblock %}
|
|
15
|
-
{% block header -%}{{ govcyEmailElement ('header',{serviceName:'Service name'
|
|
16
|
-
{% block success -%}{{ govcyEmailElement ('success',{title:'title part', body:'body part'}) }}{%- endblock %}
|
|
15
|
+
{% block header -%}{{ govcyEmailElement ('header',{serviceName:'Service name'}) }}{%- endblock %}
|
|
17
16
|
{% block body -%}
|
|
18
17
|
{% call govcyEmailElement('body') -%}
|
|
19
18
|
{% call govcyEmailElement('bodyParagraph') -%}Paragraph{%- endcall %}
|
|
20
|
-
{
|
|
21
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
22
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
23
|
-
{% call govcyEmailElement('bodyHeading',{
|
|
19
|
+
{{ govcyEmailElement ('bodySuccess',{title:'title part', body:'body part'}) }}
|
|
20
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:1}) -%}Heading 1{%- endcall %}
|
|
21
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:2}) -%}Heading 2{%- endcall %}
|
|
22
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:3}) -%}Heading 3{%- endcall %}
|
|
23
|
+
{% call govcyEmailElement('bodyHeading',{headingLevel:4}) -%}Heading 4{%- endcall %}
|
|
24
24
|
{% endcall %}
|
|
25
25
|
{% endblock %}
|
|
26
26
|
{% block footer -%}
|
|
@@ -37,17 +37,14 @@ describe('2. Testing `DSFEmailRenderer.renderFromJson`', () => {
|
|
|
37
37
|
lang: "el",
|
|
38
38
|
subject: "Service email",
|
|
39
39
|
pre: "The pre header text",
|
|
40
|
-
header: {serviceName:'Service name'
|
|
41
|
-
success: {
|
|
42
|
-
title:'title part',
|
|
43
|
-
body:'body part'
|
|
44
|
-
},
|
|
40
|
+
header: {serviceName:'Service name'},
|
|
45
41
|
body: [
|
|
46
42
|
{"component": "bodyParagraph", body:"Paragraph"},
|
|
47
|
-
{"component": "
|
|
48
|
-
{"component": "bodyHeading",params: '{"
|
|
49
|
-
{"component": "bodyHeading",params: '{"
|
|
50
|
-
{"component": "bodyHeading",params: '{"
|
|
43
|
+
{"component": "bodySuccess", params:"{title:'title part', body:'body part'}"},
|
|
44
|
+
{"component": "bodyHeading",params: '{"headingLevel":1}',body:"Heading 1"},
|
|
45
|
+
{"component": "bodyHeading",params: '{"headingLevel":2}',body:"Heading 2"},
|
|
46
|
+
{"component": "bodyHeading",params: '{"headingLevel":3}',body:"Heading 3"},
|
|
47
|
+
{"component": "bodyHeading",params: '{"headingLevel":4}',body:"Heading 4"},
|
|
51
48
|
],
|
|
52
49
|
footer: {
|
|
53
50
|
footerText: "Name of service"
|
|
@@ -101,7 +98,7 @@ function renderChecks(renderedHTML, checksNum){
|
|
|
101
98
|
});
|
|
102
99
|
it(checksNum+'7 `header` block and `header` macro render as expected', async () => {
|
|
103
100
|
// check for structure
|
|
104
|
-
let expectedRegex = /<body>([\s\S]*?)<!-- HEADER -->\s*<table([\s\S]*?)>\s*<tr([\s\S]*?)>\s*<td([\s\S]*?)>\s*<img([\s\S]*?)>\s*<\/td([\s\S]*?)>\s*<\/tr([\s\S]*?)>\s*<tr([\s\S]*?)>\s*<td([\s\S]*?)>\s*<div([\s\S]*?)>([\s\S]*?)<\/div>\s*<\/td([\s\S]*?)>\s*<\/tr([\s\S]*?)
|
|
101
|
+
let expectedRegex = /<body>([\s\S]*?)<!-- HEADER -->\s*<table([\s\S]*?)>\s*<tr([\s\S]*?)>\s*<td([\s\S]*?)>\s*<img([\s\S]*?)>\s*<\/td([\s\S]*?)>\s*<\/tr([\s\S]*?)>\s*<tr([\s\S]*?)>\s*<td([\s\S]*?)>\s*<div([\s\S]*?)>([\s\S]*?)<\/div>\s*<\/td([\s\S]*?)>\s*<\/tr([\s\S]*?)>([\s\S]*?)<\/table>/;
|
|
105
102
|
expect(renderedHTML).to.match(expectedRegex);
|
|
106
103
|
// table style
|
|
107
104
|
expectedRegex = /<body>([\s\S]*?)<!-- HEADER -->\s*<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >/;
|
|
@@ -113,18 +110,12 @@ function renderChecks(renderedHTML, checksNum){
|
|
|
113
110
|
expectedRegex = /<body>([\s\S]*?)<td align="left" valign="top" style="padding:0px 16px 12px;border-bottom: 4px solid #ffad2d;background:#31576f;background-color:#31576f;">/;
|
|
114
111
|
expect(renderedHTML).to.match(expectedRegex);
|
|
115
112
|
// service name div
|
|
116
|
-
expectedRegex = /<body>([\s\S]*?)<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;"
|
|
117
|
-
expect(renderedHTML).to.match(expectedRegex);
|
|
118
|
-
// 3rd td
|
|
119
|
-
expectedRegex = /<body>([\s\S]*?)<td align="center" valign="top" style="padding:20px 16px;">/;
|
|
120
|
-
expect(renderedHTML).to.match(expectedRegex);
|
|
121
|
-
// salutation name div
|
|
122
|
-
expectedRegex = /<body>([\s\S]*?)<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >/;
|
|
113
|
+
expectedRegex = /<body>([\s\S]*?)<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;">/;
|
|
123
114
|
expect(renderedHTML).to.match(expectedRegex);
|
|
124
115
|
});
|
|
125
116
|
it(checksNum+'8 `success` block and `success` macro render as expected', async () => {
|
|
126
117
|
//check for structure
|
|
127
|
-
let expectedRegex = /<body>([\s\S]*?)
|
|
118
|
+
let expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 0;">\s*<table([\s\S]*?)>\s*<tr([\s\S]*?)>\s*<td([\s\S]*?)>\s*<div([\s\S]*?)>([\s\S]*?)<\/div>\s*<\/td([\s\S]*?)>\s*<\/tr([\s\S]*?)>\s*<tr([\s\S]*?)>\s*<td([\s\S]*?)>\s*<div([\s\S]*?)>([\s\S]*?)<\/div>\s*<\/td([\s\S]*?)>\s*<\/tr([\s\S]*?)>([\s\S]*?)<\/table>\s*<\/td([\s\S]*?)>\s*<\/tr([\s\S]*?)>/;
|
|
128
119
|
expect(renderedHTML).to.match(expectedRegex);
|
|
129
120
|
// table style
|
|
130
121
|
expectedRegex = /<body>([\s\S]*?)<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:10px 0;max-width: 600px;background:#00703c;background-color:#00703c;" >/;
|
|
@@ -138,22 +129,22 @@ function renderChecks(renderedHTML, checksNum){
|
|
|
138
129
|
});
|
|
139
130
|
it(checksNum+'9 `bodyParagraph` macro render as expected', async () => {
|
|
140
131
|
// Define the regular expression to match the expected segment
|
|
141
|
-
const expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
132
|
+
const expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">\s*Paragraph\s*<\/div>\s*<\/td>\s*<\/tr>/;
|
|
142
133
|
// Check if the rendered HTML matches the regular expression pattern
|
|
143
134
|
expect(renderedHTML).to.match(expectedRegex);
|
|
144
135
|
});
|
|
145
136
|
it(checksNum+'10 `bodyHeading` macro render as expected', async () => {
|
|
146
137
|
// Heading 1
|
|
147
|
-
let expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
138
|
+
let expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">\s*<h1 style="font-size:28px;font-weight:700;margin: 0;">\s*Heading 1\s*<\/h1>\s*<\/div>\s*<\/td>\s*<\/tr>/;
|
|
148
139
|
expect(renderedHTML).to.match(expectedRegex);
|
|
149
140
|
// Heading 2
|
|
150
|
-
expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
141
|
+
expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">\s*<h2 style="font-size:24px;font-weight:700;margin: 0;">\s*Heading 2\s*<\/h2>\s*<\/div>\s*<\/td>\s*<\/tr>/;
|
|
151
142
|
expect(renderedHTML).to.match(expectedRegex);
|
|
152
143
|
// Heading 3
|
|
153
|
-
expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
144
|
+
expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">\s*<h3 style="font-size:20px;font-weight:700;margin: 0;">\s*Heading 3\s*<\/h3>\s*<\/div>\s*<\/td>\s*<\/tr>/;
|
|
154
145
|
expect(renderedHTML).to.match(expectedRegex);
|
|
155
146
|
// Heading 4
|
|
156
|
-
expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;"
|
|
147
|
+
expectedRegex = /<body>([\s\S]*?)<tr>\s*<td align="center" valign="top" style="padding:10px 16px;">\s*<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;">\s*<h4 style="font-size:18px;font-weight:700;margin: 0;">\s*Heading 4\s*<\/h4>\s*<\/div>\s*<\/td>\s*<\/tr>/;
|
|
157
148
|
expect(renderedHTML).to.match(expectedRegex);
|
|
158
149
|
});
|
|
159
150
|
it(checksNum+'11 `footer` block and `footer` macro render as expected', async () => {
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
|
3
|
-
<head>
|
|
4
|
-
<title>Service email</title>
|
|
5
|
-
<!--[if !mso]><!-->
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
-
<!--<![endif]-->
|
|
8
|
-
<!--[if (gte mso 9)|(IE)]>
|
|
9
|
-
<style>
|
|
10
|
-
li {
|
|
11
|
-
margin-left:10px !important;
|
|
12
|
-
mso-special-format: bullet;
|
|
13
|
-
}
|
|
14
|
-
</style>
|
|
15
|
-
<![endif]-->
|
|
16
|
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
17
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
18
|
-
</head>
|
|
19
|
-
<body>
|
|
20
|
-
<!-- PRE HEADER TEXT -->
|
|
21
|
-
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">The pre header text</div>
|
|
22
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
23
|
-
<tr>
|
|
24
|
-
<td align="center">
|
|
25
|
-
<!--[if mso]>
|
|
26
|
-
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
|
|
27
|
-
<tr>
|
|
28
|
-
<td align="center" valign="top" width="600">
|
|
29
|
-
<![endif]-->
|
|
30
|
-
<!-- HEADER -->
|
|
31
|
-
|
|
32
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
33
|
-
<tr>
|
|
34
|
-
<!-- IMAGE -->
|
|
35
|
-
<td align="left" valign="top" style="padding: 12px 16px 0px;background:#31576f;background-color:#31576f;">
|
|
36
|
-
<img src="https://cdn.jsdelivr.net/gh/gov-cy/govdesign@main/govcylogo_v3.png" alt="gov.cy" border="0" />
|
|
37
|
-
</td>
|
|
38
|
-
</tr>
|
|
39
|
-
<tr>
|
|
40
|
-
<td align="left" valign="top" style="padding:0px 16px 12px;border-bottom: 4px solid #ffad2d;background:#31576f;background-color:#31576f;">
|
|
41
|
-
<!-- SERVICE NAME -->
|
|
42
|
-
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;" >Service name</div>
|
|
43
|
-
</td>
|
|
44
|
-
</tr>
|
|
45
|
-
<tr>
|
|
46
|
-
<td align="center" valign="top" style="padding:20px 16px;">
|
|
47
|
-
<!-- SALUTATION -->
|
|
48
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >Dear First and Last name</div>
|
|
49
|
-
</td>
|
|
50
|
-
</tr>
|
|
51
|
-
</table>
|
|
52
|
-
<!-- SUCCESS -->
|
|
53
|
-
|
|
54
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:10px 0;max-width: 600px;background:#00703c;background-color:#00703c;" >
|
|
55
|
-
<tr>
|
|
56
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
57
|
-
<!-- Received -->
|
|
58
|
-
<div style="font-family:helvetica;font-size:24px;font-weight:bold;line-height:1.5;text-align:center;color:#ffffff;">Success messasage</div>
|
|
59
|
-
</td>
|
|
60
|
-
</tr><tr>
|
|
61
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
62
|
-
<!-- details -->
|
|
63
|
-
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:center;color:#ffffff;">Lorem ipsum</div>
|
|
64
|
-
</td>
|
|
65
|
-
</tr></table>
|
|
66
|
-
<!-- BODY -->
|
|
67
|
-
|
|
68
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
69
|
-
|
|
70
|
-
<tr>
|
|
71
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
72
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >
|
|
73
|
-
|
|
74
|
-
<h1 style="font-size:28px;font-weight:700;margin: 0;">
|
|
75
|
-
Heading 1
|
|
76
|
-
</h1>
|
|
77
|
-
|
|
78
|
-
</div>
|
|
79
|
-
</td>
|
|
80
|
-
</tr>
|
|
81
|
-
<tr>
|
|
82
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
83
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >
|
|
84
|
-
Body
|
|
85
|
-
</div>
|
|
86
|
-
</td>
|
|
87
|
-
</tr>
|
|
88
|
-
<tr>
|
|
89
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
90
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >
|
|
91
|
-
|
|
92
|
-
<ol style="margin:0; margin-left: 16px; padding:0; line-height:22px;" align="left">
|
|
93
|
-
<li>item 1</li><li>item 2</li><li>item 3</li></ol>
|
|
94
|
-
|
|
95
|
-
</div>
|
|
96
|
-
</td>
|
|
97
|
-
</tr>
|
|
98
|
-
</table>
|
|
99
|
-
<!-- FOOTER -->
|
|
100
|
-
|
|
101
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
102
|
-
<tr>
|
|
103
|
-
<td align="center" valign="top" style="padding:10px 16px 10px;border-top: 4px solid #ffad2d;background:#ebf1f3;background-color:#ebf1f3;">
|
|
104
|
-
<div style="font-family:Arial; font-size: 24px;text-align:left;margin-bottom: 10px;line-height:1;">
|
|
105
|
-
<a href="https://gov.cy" style="color:#000000; text-decoration: none;font-weight: 500;">
|
|
106
|
-
<strong style="color:#000000; text-decoration: none;font-weight: 500;">gov.cy</strong>
|
|
107
|
-
</a>
|
|
108
|
-
</div>
|
|
109
|
-
<div style="font-family:Arial;font-size:16px;text-align:left;margin-bottom: 10px;line-height:1;" >
|
|
110
|
-
Service name
|
|
111
|
-
</div>
|
|
112
|
-
</td>
|
|
113
|
-
</tr>
|
|
114
|
-
</table>
|
|
115
|
-
<!--[if mso]>
|
|
116
|
-
</td>
|
|
117
|
-
</tr>
|
|
118
|
-
</table>
|
|
119
|
-
<![endif]-->
|
|
120
|
-
</td>
|
|
121
|
-
</tr>
|
|
122
|
-
</table>
|
|
123
|
-
</body>
|
|
124
|
-
</html>
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="el" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
|
3
|
-
<head>
|
|
4
|
-
<title>Service email</title>
|
|
5
|
-
<!--[if !mso]><!-->
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
-
<!--<![endif]-->
|
|
8
|
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
9
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<!-- PRE HEADER TEXT -->
|
|
13
|
-
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">The pre header text</div>
|
|
14
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
15
|
-
<tr>
|
|
16
|
-
<td align="center">
|
|
17
|
-
<!--[if mso]>
|
|
18
|
-
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
|
|
19
|
-
<tr>
|
|
20
|
-
<td align="center" valign="top" width="600">
|
|
21
|
-
<![endif]-->
|
|
22
|
-
<!-- HEADER -->
|
|
23
|
-
|
|
24
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
25
|
-
<tr>
|
|
26
|
-
<!-- IMAGE -->
|
|
27
|
-
<td align="left" valign="top" style="padding: 12px 16px 0px;background:#31576f;background-color:#31576f;">
|
|
28
|
-
<img src="https://cdn.jsdelivr.net/gh/gov-cy/govdesign@main/govcylogo_v3.png" alt="gov.cy" border="0" />
|
|
29
|
-
</td>
|
|
30
|
-
</tr>
|
|
31
|
-
<tr>
|
|
32
|
-
<td align="left" valign="top" style="padding:0px 16px 12px;border-bottom: 4px solid #ffad2d;background:#31576f;background-color:#31576f;">
|
|
33
|
-
<!-- SERVICE NAME -->
|
|
34
|
-
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:left; color:#ffffff;" >Service name</div>
|
|
35
|
-
</td>
|
|
36
|
-
</tr>
|
|
37
|
-
<tr>
|
|
38
|
-
<td align="center" valign="top" style="padding:20px 16px;">
|
|
39
|
-
<!-- SALUTATION -->
|
|
40
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >Αγαπητέ / Αγαπητή First and Last name</div>
|
|
41
|
-
</td>
|
|
42
|
-
</tr>
|
|
43
|
-
</table>
|
|
44
|
-
<!-- SUCCESS -->
|
|
45
|
-
|
|
46
|
-
<!-- BODY -->
|
|
47
|
-
|
|
48
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
49
|
-
|
|
50
|
-
<tr>
|
|
51
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
52
|
-
<div style="font-family:Arial;font-size:16px;line-height:1.5;text-align:left;" >
|
|
53
|
-
<h1 style="font-size:28px;font-weight:700;margin: 0;">
|
|
54
|
-
Verify code: 12234
|
|
55
|
-
</h1>
|
|
56
|
-
</div>
|
|
57
|
-
</td>
|
|
58
|
-
</tr>
|
|
59
|
-
</table>
|
|
60
|
-
<!-- FOOTER -->
|
|
61
|
-
|
|
62
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
|
|
63
|
-
<tr>
|
|
64
|
-
<td align="center" valign="top" style="padding:10px 16px 10px;border-top: 4px solid #ffad2d;background:#ebf1f3;background-color:#ebf1f3;">
|
|
65
|
-
<div style="font-family:Arial; font-size: 24px;text-align:left;margin-bottom: 10px;line-height:1;">
|
|
66
|
-
<a href="https://gov.cy" style="color:#000000; text-decoration: none;font-weight: 500;">
|
|
67
|
-
<strong style="color:#000000; text-decoration: none;font-weight: 500;">gov.cy</strong>
|
|
68
|
-
</a>
|
|
69
|
-
</div>
|
|
70
|
-
<div style="font-family:Arial;font-size:16px;text-align:left;margin-bottom: 10px;line-height:1;" >
|
|
71
|
-
Όνομα υπηρεσίας
|
|
72
|
-
</div>
|
|
73
|
-
</td>
|
|
74
|
-
</tr>
|
|
75
|
-
</table>
|
|
76
|
-
<!--[if mso]>
|
|
77
|
-
</td>
|
|
78
|
-
</tr>
|
|
79
|
-
</table>
|
|
80
|
-
<![endif]-->
|
|
81
|
-
</td>
|
|
82
|
-
</tr>
|
|
83
|
-
</table>
|
|
84
|
-
</body>
|
|
85
|
-
</html>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{# pre success panel
|
|
2
|
-
@param {string} title The success title text. Will escape text
|
|
3
|
-
@param {string} body The success body text. Will escape text
|
|
4
|
-
@returns govcy success panel for emails html
|
|
5
|
-
#}
|
|
6
|
-
{% macro gocvyEmailSuccess(params) -%}
|
|
7
|
-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:10px 0;max-width: 600px;background:#00703c;background-color:#00703c;" >
|
|
8
|
-
<tr>
|
|
9
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
10
|
-
<!-- Received -->
|
|
11
|
-
<div style="font-family:helvetica;font-size:24px;font-weight:bold;line-height:1.5;text-align:center;color:#ffffff;">{{ params.title }}</div>
|
|
12
|
-
</td>
|
|
13
|
-
</tr>
|
|
14
|
-
{%- if params.body -%}
|
|
15
|
-
<tr>
|
|
16
|
-
<td align="center" valign="top" style="padding:10px 16px;">
|
|
17
|
-
<!-- details -->
|
|
18
|
-
<div style="font-family:Arial;font-size:18px;line-height:1.5;text-align:center;color:#ffffff;">{{ params.body }}</div>
|
|
19
|
-
</td>
|
|
20
|
-
</tr>
|
|
21
|
-
{%- endif -%}
|
|
22
|
-
</table>
|
|
23
|
-
{%- endmacro %}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
{# extend the base html #}
|
|
2
|
-
{% extends "govcyBase.njk" %}
|
|
3
|
-
{# import components #}
|
|
4
|
-
{% from "govcyEmailElement.njk" import govcyEmailElement %}
|
|
5
|
-
{# set language #}
|
|
6
|
-
{% set lang='en'%}
|
|
7
|
-
{# set the blocks of the base template #}
|
|
8
|
-
{# language block #}
|
|
9
|
-
{% block lang %}{{lang}}{% endblock %}
|
|
10
|
-
{# subject block #}
|
|
11
|
-
{% block subject %}Service email{% endblock %}
|
|
12
|
-
{# pre header block #}
|
|
13
|
-
{% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'The pre header text'}) }}{%- endblock %}
|
|
14
|
-
{# header block #}
|
|
15
|
-
{% block header -%}
|
|
16
|
-
{# use the header component #}
|
|
17
|
-
{{ govcyEmailElement ('header',{serviceName:'Service name', name:'First and Last name',lang:lang}) }}
|
|
18
|
-
{%- endblock %}
|
|
19
|
-
{# success block #}
|
|
20
|
-
{% block success -%}
|
|
21
|
-
{# use the email success component #}
|
|
22
|
-
{{ govcyEmailElement ('success',
|
|
23
|
-
{
|
|
24
|
-
title:'Success messasage',
|
|
25
|
-
body:'Lorem ipsum'
|
|
26
|
-
}
|
|
27
|
-
) }}
|
|
28
|
-
{%- endblock %}
|
|
29
|
-
{# body block #}
|
|
30
|
-
{% block body -%}
|
|
31
|
-
{# use the body component #}
|
|
32
|
-
{% call govcyEmailElement('body') -%}
|
|
33
|
-
{# use combinatopn of body components to complete the body #}
|
|
34
|
-
{% call govcyEmailElement('bodyHeading',{headinLevel:1}) -%}
|
|
35
|
-
Heading 1
|
|
36
|
-
{%- endcall %}
|
|
37
|
-
{% call govcyEmailElement('bodyParagraph') -%}
|
|
38
|
-
Body
|
|
39
|
-
{%- endcall %}
|
|
40
|
-
{{ govcyEmailElement ('bodyList',{type:'ol', items: ["item 1", "item 2", "item 3"]}) }}
|
|
41
|
-
{%- endcall%}
|
|
42
|
-
{%- endblock %}
|
|
43
|
-
{# footer block #}
|
|
44
|
-
{% block footer -%}
|
|
45
|
-
{# use the footer component #}
|
|
46
|
-
{{ govcyEmailElement ('footer',{footerText:'Service name'}) }}
|
|
47
|
-
{%- endblock %}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
{# extend the base html #}
|
|
2
|
-
{% extends "govcyBase.njk" %}
|
|
3
|
-
{# import components #}
|
|
4
|
-
{% from "govcyEmailElement.njk" import govcyEmailElement %}
|
|
5
|
-
{# set language #}
|
|
6
|
-
{% set lang='el'%}
|
|
7
|
-
{# set the blocks of the base template #}
|
|
8
|
-
{# language block #}
|
|
9
|
-
{% block lang %}{{lang}}{% endblock %}
|
|
10
|
-
{# subject block #}
|
|
11
|
-
{% block subject %}Service email{% endblock %}
|
|
12
|
-
{# pre header block #}
|
|
13
|
-
{% block pre -%}{{ govcyEmailElement ('preHeader',{preText:'The pre header text'}) }}{%- endblock %}
|
|
14
|
-
{# header block #}
|
|
15
|
-
{% block header -%}
|
|
16
|
-
{# use the header component #}
|
|
17
|
-
{{ govcyEmailElement ('header',{serviceName:'Service name', name:'First and Last name',lang:lang}) }}
|
|
18
|
-
{%- endblock %}
|
|
19
|
-
{# body block #}
|
|
20
|
-
{% block body -%}
|
|
21
|
-
{# use the body component #}
|
|
22
|
-
{% call govcyEmailElement('body') -%}
|
|
23
|
-
{# use combinatopn of body components to complete the body #}
|
|
24
|
-
{% call govcyEmailElement('bodyHeading',{headinLevel:1}) -%}
|
|
25
|
-
Verify code: 12234
|
|
26
|
-
{%- endcall %}
|
|
27
|
-
{%- endcall%}
|
|
28
|
-
{%- endblock %}
|
|
29
|
-
{# footer block #}
|
|
30
|
-
{% block footer -%}
|
|
31
|
-
{# use the footer component #}
|
|
32
|
-
{{ govcyEmailElement ('footer',{footerText:'Όνομα υπηρεσίας'}) }}
|
|
33
|
-
{%- endblock %}
|