Skip to main content

Stencil

EVA has a lot of functionalities where some form of user-friendly communication is desired. Think of invoices, thermal receipts, password reset mailings, end-of-day reports, click-and-collect order mailings and so on. You manage these outputs in Stencil.

Note

Building stencils requires knowledge about HTML, CSS and JavaScript. Some Stencils have been pre-built by our team for compliancy reasons, anything beyond what is pre-built is up to the customer.

The basic idea behind stencil is super simple; you can build a stencil in our HTML editor, optionally supported with some JavaScript functions (Helpers). Before diving into the details, we need to go over a few Stencil terms:

  • Type
  • Name
  • Destination
  • Stencil matching
  • Data model
  • Helper functions

Stencil Types

A Stencil can have one of three types:

  1. Template
  2. Partial
  3. Layout

Templates

The Template type is the most important one of the bunch. The Template makes up your actual output.

Partials

A partial is a snippet that you can insert into your templates, and can be reused across all templates to streamline your templates.

Layouts

When creating a Stencil with type Template, you can also select a Layout. A layout is to a template, what a template is to a partial. Templates are destination specific (we will cover destinations later on).

Example usage

  1. Create a Layout
  2. Create a Template, making use of the Layout
  3. Create Partials and include them in your Template

We will walk you through an example Stencil configuration later on.

Stencil Name

When creating a new Template, you have to specify a Name. This Name is no free-from, but a dropdown list. These available Names are directly tied to the Template's purpose. Examples:

  • Invoice is an invoice, which is mailed to a customer when an order is invoiced.
  • ThermalReceipt is the receipt that will be printed for in-store orders.

You get the point.

Stencil Destination

In addition to a Name, a Stencil has a Destination. For a ThermalReceipt Stencil, we want to select Thermal Printer as its Destination. Some Stencil Names can even support multiple Destinations, for example;Invoice consists of two parts:

  • the Invoice e-mail
  • the Invoice PDF which will be included in the Invoice e-mail as an attachment
  • Template type (note: HTML template type allows use of the PaperWidth property in Thermal Printer Type services and further provides printing compatibility when it comes to special characters and various alphabetic writing systems/languages.

This is a little cumbersome, since you need to know up front what Destination you need for what template. We have included a list with regularly-used Names, their purpose and the according Destinations on this page.

Stencil Matching

When configuring a Stencil, you can set a couple more properties:

  • Organization Unit
  • Country
  • Language

These decide what Stencil will be used in what situations. Example:

When an order is invoiced, EVA will check for the best Stencil match based on the organization unit that issues the invoice, the country in which the organization unit is located, and the language of the customer.

In these situations, Organization Unit trumps Country, and Country trumps Language.

Note

The checks for templates work on a matching mechanism, if you have a template specified for an organization unit, the other templates will be filtered out. It will then look for language: if it does find a match on a language, it will again filter out all other templates for that organization and language. So if you set a specific organization, then make sure to have related templates available on that same level of filtering.

Data model

Your Stencils, or rather Templates, are always supported by a certain data model. What data model this is completely depends on your stencil Name. For example; the Invoice Template is backed up by the order data model, making a bunch of order properties available for display in your Stencil.

Custom properties

For order-based stencils, you can set up product properties to be included in the data model using the Template:ProductProperties setting. This setting expects comma separated product properties (e.g. display_value, display_price).

Helper functions

Stencil can be enriched with Helper functions, which are essentially JavaScript functions to support your HTML stencil. We will go over these in more detail in our example Stencil configuration.

Disabling Stencils

You can also prevent communication for a template by marking it as disabled, you can also give this a specific OU, Country or language to block communications for that specific OU/Country/Language.

Interface

When opening the Stencil overview, you are most likely first greeted with a large list of Certified Invoices. These invoices are made by us at New Black and tick all boxes when it comes to compliancy.


The Overview provides a paginated view of all Stencils. You can filter these on Name, Language, Destination and Type. Some other properties are visible but can't be filtered on.

To add a new Stencil, click the large +Add button in the top-right. Let's do an example configuration.

Example configuration

Let's start with a real life example; in a Click and Collect flow, a customer orders items online and opts to pick them up in-store. The designated store will receive a task to reserve these items and do so. Upon reservation, we can trigger an e-mail to the customer telling them that their items are ready. This e-mail should also include a QR-code that is to be used to identify the customer in-store.

Let's make a Stencil for this.

Layout

First off, we need a proper layout. Think of this as the scaffolding for your mails.

  • We start with creating a new Stencil, and setting the Type to Layout.
  • We set the Organization Unit field to our top-level OU, so this Layout will be available for the entire organization.
  • For Layouts, Names are free to fill out with whatever you want.
  • We set the Destination to e-mail, so this Layout will be available to all Templates that have their Destination set to Mail.

We can now fill the Content box with our actual HTML. We will use the Example Layout given on this page. In the middle of this HTML code, we provide a {#body} tag. This is where the content of our Template will go.

To preview our Stencil, which is only a Layout for now, we can click the Preview button and select HTML. Which won't be much for now.

Template

Now we create a new Stencil, set the type to Template, set the Name to StockReservation, set the same OU and set the same Destination as the Layout. As soon as we set the Type to Template, the Layout field also appeared, where we can select the Layout we just built.

Now we are basically telling EVA to scaffold our Template using the linked Layout so any HTML we create here will be injected into the Layout we built before. Because we've built a very clean, basic Layout, we can just inject super simple content here to make a fully functioning Stencil.


Here, we also fill our example Stencil Template provided below to keep it simple. Right above this, we can use the {#subject}Your subject here{#/subject} declaration to specify the e-mail's subject.

Since we are now building a Template, we have access to a certain data model. We can see what properties we can use in our stencil when scrolling to the bottom of our Content tab. There we provide the complete data model with all possible properties to be used in the Stencil.

Using properties

The following is a little snippet from the available data:

{
"TemplateName": "StockReservation",
"Order": {
"BillingAddress": {
"CountryID": "LT",
"ZipCodeAndCity": "76048 Lake Ciara",
"StreetAndHouseNumber": "73577 Kenya Dale"
},
"ShippingAddress": {
"CountryID": "SN",
"ZipCodeAndCity": "42422 Lake Dillanfurt",
"StreetAndHouseNumber": "6569 Lew Trail"
},
"CurrencyID": "BTN"
}
}

Let's say we want to print the TemplateName on the Stencil, we can do so by putting {{>TemplateName}} in a string like so:

<p> This is a string containing the {{>TemplateName}}.</p>

We can add child properties by adding dots:

<p> This is a string containing the {{>Order.CurrencyID}}.</p>

And we can go as deep as we want:

<p> This is a string containing the {{>Order.BillingAddress.ZipCodeAndCity}}.</p>

In the example, we only use {{>User.FirstName}} to greet the customer.

Now that we have set this up, we can check the HTML preview or use the E-mail button in the bottom-right corner to send ourselves a preview.

Our mail now looks like this:


Helper functions

The button in our e-mail is great, but we need a Qr-code for in-store verification. In our data model, we have a property called VerificationCode. We need to translate this value into a QR-code so it can be scanned in-store.

For this, we can use Helper functions. In essence, helpers are JavaScript functions where you can use the same Data Model and use it in functions to your liking.

You should be happy you pay us big money; we have got you covered with some default Helper functions. They are all under the Examples below.

For this specific purpose, we have a QR-code Helper:

JavaScript
function qrcode(value, size) {
return barcode('qr', value, size, size, false);
}

We need to add this Helper, and insert the correct value for the QR-code to be generated. We can do so as follows:

<img src=“{{:~qrcode(VerificationCode, 120)}}“>

This will take our VerificationCode and insert it into the Qr-code helper to render the correct code.

Adding Media

You can use pictures in your templates by adding them under Add Media to the right above the actual code. After uploading your picture, you will have to set a name for it: make sure not to use any spaces in it.

After doing so, select it and click Select. A code will be automatically inserted at the top of the code contents like so: {#image eva-tortuga width height png}.

You can see the image inserted into actual code in the sample below:

HTML
<tr>
<td align="center">
<table width="515" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307content-wrapper-small" align="center" style="width:515px;margin:0 auto">
<tbody>
<tr>
<td class="m_3966551746016967307logo" align="center" style="padding-bottom:10px; text-align: center;"><img src="{#image eva-tortuga png}" width="200" alt="" border="0" style="display:block;margin:0 auto" class="CToWUd"></td>
</tr>
</tbody>
</table>
</td>
</tr>

Examples

Layout

HTML
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}

/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">

<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">

<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
{#body}
</td>
</tr>
</table>
</td>
</tr>

<!-- END MAIN CONTENT AREA -->
</table>

<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Your company here, 221 Baker Street, London, Zip c0d3</span>
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
Powered by <a href="https://www.newblack.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">EVA</a>
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->

<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
</tr>
</table>
</body>
</html>

Template

HTML
{#subject} Your order is ready for pickup {#/subject}
<body>
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
<p style="font-family: sans-serif; font-size: 24px; font-weight: bold; margin: 0; Margin-bottom: 15px; text-align: left;">Your order is ready for pickup</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; text-align: left;">Hi {{>User.FirstName}},</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; text-align: left;">Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;">
<a href="http://htmlemail.io" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize;">
Call To Action
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; text-align: left;">This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; text-align: left;">Good luck! Hope it works.</p>
</body>

Helpers

Generic Helpers

JavaScript
function date(value, format, culture, timezone='Europe/Amsterdam') {
return require('moment-timezone').tz(value, timezone).locale(culture).format(format);
}

function padLeft(str, n) {
return Array(Math.max(n-String(str).length + 1, 0) || 0).join(' ') + str;
}

function abs(value) {
return Math.abs(value);
}

function country(countryId, languageId) {
return require('i18n-iso-countries').getName(countryId, languageId);
}

function rateToPercentage(rate) {
return (Math.round((rate - 1 + Number.EPSILON) * 10000) / 10000 * 100).toFixed(2) + '%';
}

Currency Helpers

JavaScript
function currency(value, currencyId, locale, maximumFractionDigits) {

// locale should be mandatory
if(locale == undefined) return currencySymbol(currencyId) + ' ' + Number.parseFloat(value || 0.00).toFixed(2).replace('.', ',');

// maximumFractionDigits is no longer supported
if(maximumFractionDigits != undefined) return currencySymbol(currencyId) + ' ' + Number.parseFloat(value || 0.00).toFixed(maximumFractionDigits).replace('.', ',');

return value.toLocaleString(locale, { style: 'currency', currency: currencyId });
}

function currencyAbs(value, currencyId, locale) {
return currency(Math.abs(value), currencyId, locale);
}
How the currency helper helps

Value, currencyId and locale are all three required.

  • The value is a number (float) to represent the amount of money
  • The currencyId is the standard ISO-4217 code for the currency
  • The locale is formatted with a ISO-639-1 language code, underscore, and a ISO-3166-1-alpha-2 country code. This comes down to the following format: currency(123.123, 'EUR', 'nl-NL') or currency(123.123, 'USD', 'en-US')

This function will help format the currency in the proper way everywhere, for example no periods but spaces as thousand-separators in France, and no decimals for JPY.

Image Helpers

JavaScript
function barcode(type, value, width, height, includeText) {
var url = model.AssetsUrl + '/barcode/' + type + '/' + width + '/' + height + '/' + value + '/no-margin';
if (!includeText) {
url += '/pure';
}
return url;
}

function qrcode(value, size) {
return barcode('qr', value, size, size, false);
}

function ean(value, width, height, includeText) {
return barcode('ean', value, width, height, includeText);
}

function code39(value, width, height, includeText) {
return barcode('code39', value, width, height, includeText);
}

function code128(value, width, height, includeText) {
return barcode('code128', value, width, height, includeText);
}

Discount lines tax rate Helper

This helper is used when you'd like to have a tax rate displayed on discount line(s). The usual scenario is that tax rates are not displayed on invoice templates however, with this helper you can inherit the tax rate applied on the regular product line (connected to the discount line by ParentID) and render it to the discount line as well.

JavaScript
function renderDiscountLines(pLine,lines){
var ParentTaxRate
txtLine='';
if (pLine.TaxRate !== null){
ParentTaxRate=pLine.TaxRate + '%';
}
else{
ParentTaxRate='0 %';
}
lines.forEach(vLine=>{
if (vLine.ParentID === pLine.ID) {
txtLine+='<tr><td class="text-right" style="width:5%"></td><td class="text-left"><p class="bold order orderline" style="word-wrap: break-word">Discount: ' +
vLine.Description +
'<br/></p></td><td class="text-right"></td><td class="text-right"><p class="bold">'+ParentTaxRate+'</p></td><td class="text-right"><p class="bold">' + fixed(vLine.TotalAmountInTaxInvoiced) +
'</p></td></tr>';
}
})
return txtLine;
}

Debugging Helper

If you are troubleshooting a template and can't seem to find the issue, this helper and code reference could be helpful. Be sure to remove it afterward as most people don't read JSON.

JavaScript
// Use {{:~printJSON(~root)}} to print all the available data

function printJSON(data) {
var jsonString = JSON.stringify(data, null, 4);
var a = "<pre><code>" + jsonString + "</pre></code>";
return a;
}

Certified invoice configuration

Even though we build the certified invoices for you, we do allow for some configuration based on settings.

SettingValueDescription
DisplayRecommendedRetailPricetrue or falseWhether to display recommended retail prices on the invoice.

Example partials for thermal receipt

  • navigate to Stencil Overview
  • in the top-right corner, click +Add
  • under Type, select Partial
  • under Name, set ThermalReceipt-Header
  • under Destination, tick the Thermal Printer
  • leave all other fields empty
  • paste the following code:
HTML
<scope align="center" font="FontB" tabs="21">

<feed amount="32" />

<bold>Tortuga Pirate Supplies {{>ShopName}}</bold>
{{>ShopStreet}}
{{>ShopZipCode}} {{>ShopCity}}
{{>ShopPhoneNumber}}
EVA Tortuga

<feed amount="16" />

</scope>
  • under Type, select Partial
  • under Name, set ThermalReceipt-Footer
  • under Destination, tick the Thermal Printer
  • leave all other fields empty
  • paste the following code:
HTML
<scope bold="true" align="center" font="FontB">

<bold>Thank you for your purchase at
Tortuga Pirate Supplies!</bold>
You were served by JOHN DOE #123

</scope>

Shipped line

  • under Type, select Partial
  • under Name, set ThermalReceipt-ShippedLine
  • under Destination, tick the Thermal Printer
  • leave all other fields empty
  • paste the following code:
HTML
<scope align="left">
<grid positions="0, 5, 39, 49">
<row>
{{* Quantity to ship *}}
<col>{{:QuantityToShip}}</col>

{{* Description *}}
<col>{{>PrimaryDescription}}</col>

<col>{{:~taxRate(TaxRate)}}</col>
<col align="right" width="8"><bold>{{:~currency(AmountInTax,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</bold></col>

</row>
</grid>

{{for Descriptions}}
{{>this}}
{{/for}}

{{if CustomItemNumber || IsInsuranceProduct || CardNumber || SerialNumber}}

<grid positions="0, 4, 20">
<row>
<col>{{:CustomItemNumber}}</col>

{{if CardNumber}}
<col>{{:~trim(CardNumber)}}</col>
{{/if}}
{{if SerialNumber}}
<col>{{:~trim(SerialNumber)}}</col>
{{/if}}
</row>
</grid>

{{/if}}

</scope>
{{if GiftCardActivated}}

{{if Returned}}
Card deactivated
{{else}}
Card activated
{{/if}}

{{/if}}

{{if GiftCardActivationFailed}}
{{if Returned }}
Card not deactivated
{{else}}
Card not activated
{{/if}}
{{/if}}
{{if Returned}}
<bold>RETURNED</bold>
{{/if}}

<feed amount="24" />
<line />

Example template for thermal receipt

  • under Type, select Template
  • under Name, set ThermalReceipt
  • under Destination, tick the Thermal Printer
  • leave all other fields empty
  • paste the following code:
HTML
<report>
<scope font="FontB">
{{if ReturnedOrderReprint}}

<scope size="1 0" bold="true">
ORDER RETURNED REPRINT
</scope>

<feed amount="32" />

{{/if}}

{#partial ThermalReceipt-Header}

<line width="double" />
<feed amount="4" />
{{if InvoiceNumber}} <bold>INVOICE</bold>{{/if}}
<bold>{{:~date(DocumentTime, 'LLL', LanguageID + '-' + CountryID, TimeZone)}}</bold>
{{if InvoiceNumber}}
Invoice number : {{:InvoiceNumber}}

{{/if}}


{{if CustomerData && CustomerData.length > 0}}
<feed amount="6" />

<scope font="FontB">
{{for CustomerData}}
{{>#data}}
{{/for}}
</scope>
<line />
{{/if}}


<feed amount="24" />

<scope font="FontB">
{{for ShippedLines}}
{#partial ThermalReceipt-ShippedLine}
{{/for}}

{{if NoLinesShipped}}
<bold>NO PRODUCTS SHIPPED</bold>
{{/if}}

{{if AnyUnshippedLines}}

<feed amount="24" />
<line />
<feed amount="24" />

<bold>STILL TO SHIP:</bold>

<feed amount="24" />

{{for UnshippedLines}}

{#partial ThermalReceipt-ShippedLine}

{{/for}}

{{/if}}

<feed amount="24" />

</scope>

<scope font="FontA" align="right">
<grid positions="0, 25">
<row>
<line />
<col><bold>Total</bold>:</col>
<col width="10">{{:~currency(OriginalTotalAmountInTax,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</col>
</row>
<row>
<col><bold>Subtotal:</bold></col>
<col width="10">{{:~currency(OriginalTotalAmount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</col>
</row>
</grid>

<grid positions="0, 25">
{{for Taxes}}
{{if Amount}}
<row>
<col>{{:~taxAmount(~root.CountryID,Rate)}}</col>
<col width="10">{{:~currency(Amount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</col>
</row>
{{/if}}
{{/for}}
</grid>

<feed amount="80" />

<grid positions="0,25">
{{for Payments}}
<row>
<col>{{:~translatePaymentType(Description) + ' ' + ~date(PaymentDate, 'DD-MM-YYYY, HH:mm', LanguageID + '-' + CountryID, TimeZone)}}</col>
<col width="10">{{:~currency(Amount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</col>
</row>
{{/for}}
</grid>

{{if PaidAmount}}
<grid positions="0,25">
<row>
<col>Paid:</col>
<col width="10">{{:~currency(PaidAmount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</col>
</row>
</grid>
{{/if}}

{{if Change}}
<grid positions="0,25">
<row>
<col>Change</col>
<col width="10">{{:~currency(Change,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</col>
</row>
</grid>
{{/if}}

<feed amount="40" />
<grid positions="0,25">
{{for CardActions}}
<row>
<col>Gift card </col>
<col>{{:~trim(CardNumber)}}</col>
</row>
<row>
<col>Remaining balance </col>
<col>{{:~currency(NewBalance,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</col>
</row>
<row>
<col> </col>
</row>
{{/for}}
</grid>
</scope>
<scope font="FontB">

<placeholder name="PinReceipt" />
<feed amount="110" />

{{for CardTransactions}}

{{for Lines}}
{{>#data}}
{{/for}}

{{/for}}

<feed amount="15" />

<placeholder name="VoucherActivation" />

{{if Remark}}
<feed amount="32" />
<bold>Remark: {{>Remark}}</bold>
<feed amount="20" />
{{/if}}
<line />

<feed amount="4" />
<scope bold="true" align="center" font="FontB">
{{if OrderCompleted}}
{#partial ThermalReceipt-Footer}
{{/if}}
<scope bold="false" font="FontB">
<feed amount="80" />
<barcode data="{{:OrderBarcode}}" type="Code39" />
<feed amount="24" />
{{:OrderID}}
<feed amount="80" />
</scope>

</scope>
</scope>
</scope>
</report>

Helpers

For the ThermalReceipt template, paste the following code into the helper field:

JavaScript
function taxRate(rate) {
return ((rate-1)*100).toFixed(2) + '%';
}

function taxAmount(countryID, rate) {
var prefix = 'VAT';
switch (countryID) {
case 'US':
prefix = 'TAX';
break;
case 'SE':
case 'NO':
prefix = 'MVA';
break;
case 'NL':
prefix = 'BTW';
break;
case 'DE':
prefix = 'MwST';
break;
case 'FR':
prefix = 'TVA';
break;
case 'PT':
prefix = 'IVA';
break;
}
return prefix + ' ' + rate + '%';
}

function fixed(e) {
e = e || 0;
return e.toFixed(2);
}

function translateResourceType(type) {
if (type) {
switch (type.toLowerCase()) {
case 'serialnumber':
return 'Serienummer';
}
}

return type;
}

function translatePaymentType(description) {
if (description == 'Intersolve') return 'Gift card';
return description;
}

function getHashString(s) {
if(s.length < 31) return '';
return `${s[0]}${s[10]}${s[20]}${s[30]} - Processado por programa\r\ncertificado nº 0/AT`;
}

function trim(value) {
var len = value.length;

if (len < 4) {
return value;
}

return value.substring(0, len - 4) + '****';
}

Invoices

We want three kinds of invoices; a PDF template, an e-mail template, and an HTTP template. The PDF is the actual invoice, the e-mail is a nice message with the PDF as an attachment, and HTTP is a document openable using an HTTP viewer.

The Destination for the PDF is PDF, for the e-mail it's Mail, and for HTTP it's HTTP.

Below we provide the template as well as the required helpers.

PDF Template

HTML
<html>

<head>

<title>Invoice Tortuga Pirate Supplies</title>
<meta charset="utf-8">
<style>

.container {
padding: 20px;
margin-right: auto;
margin-left: auto;
width: 520px;
height: auto;
border: 2px #e0ddd8;
border-style: none solid none solid;
}

body {
background-color: #F9F7F5;
}

h1,
h2,
h3 {
font-family: 'Hind', sans-serif;
font-weight: 600;
color: #333;
}

h2 {
font-size: 24px;
line-height: 29px;
margin: 0 0 15px 0;
}

h3 {
font-size: 19px;
line-height: 23px;
margin: 4px 0;
}

h3.totaal {
font-size: 19px;
line-height: 23px;
text-align: right;
margin: 0;
}

p {
font-family: 'Hind', sans-serif;
font-size: 12px;
font-weight: 400;
color: #333;
line-height: 16px;
margin: 0 0 10px;
display: block;
}

p.title {
font-size: 13px;
font-weight: bold;
padding-right: 30px;
}

p.desc {
padding-left: 15px;
padding-right: 30px;
}

p.bold {
font-size: 13px;
font-weight: bold;
}

p.italic {
font-style: italic;
}

p.small {
font-size: 10px;
line-height: 12px;
}

.logo {
width: 100%;
height: 70px;
clear: both;
}

.store {
width: 60%;
float: left;
}

.store > .address {
width: 220px;
padding-top: 20px;
float: left;
}

.customer {
width: 40%;
float: left;
}

th {
text-align: left;
}

.table {
width: 100%;
font-family: 'Hind', sans-serif;
font-size: 12px;
}

.table > tr > th,
.table > tr > td {
line-height: 15px;
vertical-align: top;
}

.table > tr > th {
font-size: 13px;
font-weight: bold;
vertical-align: bottom;
}

.headert {
clear: both;
width: 100%;
height: 30px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}

.product {
margin: 20px 0;
clear: both;
overflow: auto;
position: relative;
}

.bottom {
clear: both;
width: 100%;
}

.left {
width: 350px;
float: left;
border: 2px solid #ddd;
padding: 15px;
}

.right {
width: 400px;
float: right;
text-align: right;
padding-top: 10px;
border-top: 4px solid #000000;
}

.footer {
width: 100%;
border-top: 4px solid #000000;
padding-top: 8px;
text-align: center;
}

.text-right {
text-align: right!important;
}

.remark{
font-family: "Hind", sans-serif;
font-size: 12px;
clear: both;
width: 100%;
}

.hero-image {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: auto;
}
.store-remark {
padding-top: 35px;
}
.table-border-align {
width:515px;
margin:0 auto;
padding-top: 15px;
border-spacing: 10px;
}

.table-align {
width:515px;
margin:0 auto;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap" rel="stylesheet">
</head>

<body>

<div class="container">
<div class="header">
<div class="logo">
<td class="m_3966551746016967307logo" align="center" style="padding-bottom:20px"><a target="_blank"><img src="https://i.ibb.co/938w2xC/Logo-liggend-wit-1.png" width="246" alt="" border="0" style="display:block;margin:0 auto" class="CToWUd"></a></td>
</div>
<div class="hero-image">
<td class="m_3966551746016967307full-width-img"><a target="_blank" ><img src="https://i.ibb.co/kD7JtQQ/Flessenpost.png" width="517" alt="" border="0" style="display:block" class="CToWUd"></a></td>
</div>
</div>
<div class="header-title">
<table>
<tbody>
<tr>
<td><h1 style="padding-top: 15px;">Your Order Receipt</h1></td>
</tr>
</tbody>
</table>
</div>
<div class="body-content">
<table>
<tbody>
<tr>
<td><p>Hi, {{>Customer.FirstName}}</p></td>
</tr>
<tr>
<td><p>Enjoy your Tortuga piece(s), come back soon!</p></td>
</tr>
</tbody>
</table>
</div>
<div class="product-list">
<div class="product-detail">
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-border-align">
<tbody>
<tr>
<td><p style="font-size: 17px;">Item</p></td>
<td></td>
<td width="8"></td>
<td width="5"><p style="font-size: 17px;">Quantity</p></td>
<td width="3"></td>
<td width="60"><p style="font-size: 17px;">Price</p></td>
</tr>
<tr>
<td height="5" style="border-top:2px solid #e0ddd8"></td>
<td height="5" style="border-top:2px solid #e0ddd8"></td>
<td width="8"></td>
<td height="5" style="border-top:2px solid #e0ddd8"></td>
<td width="3"></td>
<td height="5" style="border-top:2px solid #e0ddd8"></td>
</tr>
{{for Lines}}
{{if ProductPrimaryImage != null }}
<tr>
<td><img src="{{>~root.AssetsUrl}}/blob/{{>ProductPrimaryImage}}"width="100" /></td>
<td><p>{{>Description}}</p></td>
<td width="8"></td>
<td width="5"><p>{{>TotalQuantityToShip}}</p></td>
<td width="3"></td>
<td width="60"><p>{{:~currency(TotalAmount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</p></td>
</tr>
{{else}}
<tr>
<td><p>{{>ProductBackendID}}</p></td>
<td><p>{{>Description}}</p></td>
<td width="8"></td>
<td width="5"><p>{{>TotalQuantityToShip}}</p></td>
<td width="3"></td>
<td width="60"><p>{{:~currency(TotalAmount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</p></td>
</tr>
{{/if}}
{{/for}}
</tbody>
</table>
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td height="25" style="border-top:2px solid #e0ddd8"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pricing">
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td><p>Subtotal</p></td>
<td style="padding: 0 0 0 390px;"></td>
<td width="65"><p>{{:~currency(InvoiceTotals.SubTotal,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</p></td>
</tr>
</tbody>
</table>
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td height="25" style="border-top:2px solid #e0ddd8"></td>
</tr>
</tbody>
</table>
{{for InvoiceTotals.Taxes}}
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td width="95"><p>{{:~taxAmount(~root.CountryID, Rate)}}</p></td>
<td style="padding: 0 0 0 375px;"></td>
<td width="85"><p>{{:~currency(Amount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</p></td>
</tr>
</tbody>
</table>
{{/for}}
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td height="25" style="border-top:2px solid #e0ddd8"></td>
</tr>
</tbody>
</table>
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td width="95"><p style="font-weight: bold;">Total {{:~totalQty(Lines)}} pcs</p></td>
<td style="padding: 0 0 0 375px;"></td>
<td width="73"><p>{{:~currency(InvoiceTotals.Total,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</p></td>
</tr>
</tbody>
</table>
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" style="width:515px;margin:0 auto; padding-top: 15px;">
<tbody>
{{for Payments.Payments}}
<tr>
<td><p>Amount paid via {{>TypeName}}</p></td>
<td style="padding: 0 0 0 280px;"></td>
<td width="64"><p>{{:~currency(Amount,~root.CurrencyID, ~root.LanguageID + '-' + ~root.CountryID)}}</p></td>
</tr>
{{/for}}
</tbody>
</table>
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td height="25" style="border-top:2px solid #e0ddd8"></td>
</tr>
</tbody>
</table>
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td><p style="font-weight: bold;">Remark: </p></td>
</tr>
<tr>
<td>{{>InvoiceData.Remark}}</td>
</tr>
</tbody>
</table>
</div>
<div class="store-info">
{{if ShopAddress.OpeningHours != null && ShopAddress.OpeningHours.length > 0}}
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td><p style="font-weight:bold;">Store Information</p></td>
<td width="136"></td>
<td><p style="font-weight: bold; float: left;">Opening Hours</p></td>
</tr>
<tr height="25"></tr>
{{for ShopAddress}}
<tr>
<td style="vertical-align: top;">
<table width="275">
<tr><td><p style="font-weight: bold;">{{>Name}}</p></td></tr>
<tr><td><p>{{>StreetAndHouseNumber}}</p></td></tr>
<tr><td><p>{{>ZipCodeAndCity}}</p></td></tr>
</table>
</td>
<td width="136">
{{for ShopAddress.OpeningHours}}
<tr>
<td>{{:~dayofweekToString(Day,~root.LanguageID)}}</td>
{{if Closed}}
<td>Closed</td>
{{else}}
<td>{{>Start}} - {{>End}}</td>
{{/if}}
</tr>
{{/for}}
</td>
</tr>
{{/for}}
</tbody>
</table>
{{/if}}
</div>
<div class="invoice-date-barcode" style="padding-top: 35px;">
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" class="table-align">
<tbody>
<tr>
<td height="25" style="border-top:3px solid #e0ddd8"></td>
</tr>
</tbody>
</table>
<table width="515" border="0" cellspacing="0" cellpadding="0" align="center" style="width:515px;margin:0 auto; padding-bottom: 15px;">
<tbody>
<tr>
<td>
<table width="140" border="0" cellspacing="0" cellpadding="0" align="center" style="width:140px;margin:0 auto;">
<tbody>
<tr>
<td><p>Date & Time</p></td>
</tr>
<tr>
<td><p>{{:~date(InvoiceData.InvoiceDateTime, 'LLL', ~root.LanguageID + '-' + ~root.CountryID, ~root.TimeZone)}}</p></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0 0 0 235px;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td style="padding-left: 30px;"><p style="15">Order: {{>InvoiceData.OrderID}}</p></td>
</tr>
</tbody>
</table>
</div>
<div class="social-media" style="background-color: #EBEBEB; height: 35px; width: auto;">
<table border="0" cellspacing="0" cellpadding="3" width="515">
<tbody>
<tr>
<td></td>
<td align="center">
<table>
<tbody>
<tr>
<td style="font-family: 'Hind'; font-size: 13px;">Tortuga Pirate Supplies 2021</td>

</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="footer-info">
<table align="center">
<tr>

</tr>
</table>
</div>
</div>

</body>

</html>

Helpers

JavaScript
function dayofweekToString(nr,languageID) {     
var moment = require('moment');
moment.locale(languageID || 'en')
return capitalizeFirstLetter(moment().day(nr).format('dddd'));
}

function capitalizeFirstLetter(string) {
if (string.length === 0) return "";
return string.charAt(0).toUpperCase() + string.slice(1);
}

function taxrate(rate) {
return (rate*100 - 100);
}

function taxAmount(countryID, rate) {
var prefix = 'VAT';
switch (countryID) {
case 'CA':
case 'US':
prefix = 'TAX';
break;
case 'SE':
case 'NO':
prefix = 'MVA';
break;
case 'NL':
prefix = 'BTW';
break;
case 'DE':
prefix = 'MwST';
break;
case 'FR':
prefix = 'TVA';
break;
case 'PT':
prefix = 'IVA';
break;
}
return prefix + ' ' + ((rate-1)*100).toFixed(2) + '%';
}

function translateResourceType(type) {
if (type) {
switch (type.toLowerCase()) {
case 'serialnumber':
return 'Serienummer';
}
}

return type;
}

function translatePaymentType(description) {
if (description == 'Intersolve') return 'Gift card';
return description;
}

function getHashString(s) {
if(s.length < 31) return '';
return `${s[0]}${s[10]}${s[20]}${s[30]} - Processado por programa\r\ncertificado nº 0/AT`;
}

function trim(value) {
var len = value.length;

if (len < 4) {
return value;
}

return value.substring(0, len - 4) + '****';
}
function getProductProperty(properties, name) {
if (properties === null || properties.length === 0) return null;
for (var i = 0; i < properties.length; ++i) {
if (properties[i].Key == name) return properties[i].Value;
}
return null;
}

function totalQty(total) {
var amount = 0;
i = total.length;
while(i--) {
if(total[i].Description.toUpperCase().indexOf('DISCOUNT')>=0) {
amount = amount;
} else {
amount += total[i].TotalQuantityToShip;
}
}
return amount;
}

Invoice e-mail

HTML
<head>
<style type="text/css">
h1,
h2,
h3 {
font-family: 'Hind', sans-serif !important;
font-weight: 600;
color: #333;
}

p {
font-family: 'Hind', sans-serif !important;
font-size: 12px;
font-weight: 400;
color: #333;
line-height: 16px;
margin: 0 0 10px;
display: block;
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap" rel="stylesheet">
</head>


{#subject} Order #{{>InvoiceData.OrderID}} - Your Digital Invoice {#/subject}
<div style="box-sizing:border-box;margin:0;padding:0;width:100%">



<div class="m_3966551746016967307show" style="font-size:0px;max-height:0px;overflow:hidden;display:none"> Your Digital Invoice<br>
<br>



</div>



<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="m_3966551746016967307wrapper" bgcolor="#f9f7f5">
<tbody><tr>
<td align="center"><table width="600" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307full-width" align="center" style="width:600px;margin:0 auto">
<tbody><tr>
<td style="border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center"><table width="600" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307full-width" align="center" style="width:600px;margin:0 auto">
<tbody><tr>
<td height="20" style="font-size:1px;line-height:1px;height:20px">

<div class="m_3966551746016967307gmailfix" style="white-space:nowrap;font:15px courier;line-height:1px;background:#f9f7f5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>

</td>
</tr>
<tr>
<td class="m_3966551746016967307mobile-hide" height="10" style="font-size:1px;line-height:1px;height:10px"></td>
</tr>
<tr>
<td align="center">

<table width="515" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307content-wrapper-small" align="center" style="width:515px;margin:0 auto">
<tbody><tr>
<td class="m_3966551746016967307logo" align="center" style="padding-bottom:20px"><a target="_blank"><img src="https://i.ibb.co/938w2xC/Logo-liggend-wit-1.png" width="246" alt="" border="0" style="display:block;margin:0 auto" class="CToWUd"></a></td>
</tr>
</tbody></table>

</td>
</tr>
<tr>
<td height="10" style="font-size:1px;line-height:1px;height:10px"></td>
</tr>
<tr>
<td class="m_3966551746016967307full-width" style="width:600px;max-width:600px;min-width:600px" align="center">

<table width="515" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307content-wrapper-small" align="center" style="width:515px;margin:0 auto">
<tbody><tr>
<td class="m_3966551746016967307full-width-img"><a target="_blank" ><img src="https://i.ibb.co/kD7JtQQ/Flessenpost.png" width="515" alt="" border="0" style="display:block" class="CToWUd"></a></td>
</tr>
</tbody></table>
<table width="515" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307content-wrapper-small" align="center" style="width:515px;margin:0 auto">
<tbody><tr>
<td height="30"></td>
</tr>
</tbody></table>





<table width="515" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307content-wrapper-small" align="center" style="width:515px;margin:0 auto">
<tbody><tr>
<td class="m_3966551746016967307libre" align="left" style="font-family:Hind,sans-serif;font-size:23px;line-height:36px;color:#000001;font-weight:bold">Your Digital Invoice</td>
</tr>
<tr>
<td align="left" style="padding:20px 0 0 0"><table cellpadding="0" cellspacing="0" width="40" border="0" style="width:40px">
<tbody><tr>
<td style="border-top:4px solid #000000;padding-bottom:20px;font-size:1px;line-height:1px">&nbsp;</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td class="m_3966551746016967307black" align="left" style="font-family:Hind,sans-serif;font-size:14px;line-height:26px;color:#000001;font-weight:500">
Hi {{>Customer.FirstName}}, <br><br>
Thank you for your visit to Tortuga Pirate Supplies. <br>
Enclosed is the digital invoice of your recent purchase<br><br>
We hope to see you again!
</a>
</td> </tr>

</tbody></table>
</td></tr>
</tbody></table>
<table width="515" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307content-wrapper-small" align="center" style="width:515px;margin:0 auto">
<tbody><tr>
<td height="35"></td>
</tr>
</tbody></table>
















<table width="515" border="0" cellspacing="0" cellpadding="0" class="m_3966551746016967307content-wrapper-small" align="center" style="width:515px;margin:0 auto">
<tbody><tr>
<td height="25" style="border-bottom:2px solid #e0ddd8"></td>
</tr>
<tr>
<td height="35"></td>
</tr>
</tbody></table>




<table align="center" border="0" cellpadding="0" cellspacing="0" class="m_3966551746016967307content-wrapper-small" style="width:515px;margin:0 auto" width="515">

<tbody><tr>
<td height="40">
</td></tr></tbody></table>


<table align="center" border="0" cellpadding="0" cellspacing="0" class="m_3966551746016967307content-wrapper-small" style="width:515px;margin:0 auto" width="515">

<tbody><tr>
<td height="40">
</td></tr></tbody></table>



</td>
</tr>
</tbody></table>

</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tbody><tr>
<td align="center" bgcolor="#eae7e3">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="m_3966551746016967307full-width" style="width:600px;margin:0 auto" width="600">

<tbody><tr>
<td height="20" style="font-size:1px;line-height:1px;height:20px">
<div class="m_3966551746016967307gmailfix" style="white-space:nowrap;font:15px courier;line-height:1px;background:#eae7e3">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div></td></tr><tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="m_3966551746016967307content-wrapper-small" style="width:515px;margin:0 auto" width="515">

<tbody><tr>
<td align="center" style="padding-bottom:20px">
<table align="center" border="0" cellpadding="0" cellspacing="0">

<tbody><tr>
<td>
<p>EVA Tortuga 2021</p>
</td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>





<table bgcolor="#f9f7f5" border="0" cellpadding="0" cellspacing="0" width="100%">

<tbody><tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="m_3966551746016967307full-width" style="width:600px;margin:0 auto" width="600">

<tbody><tr>
<td align="center">