@inv2/common
Version:
A common module for v2
456 lines (453 loc) • 15.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Receipt Template</title>
</head>
<body>
<!-- partial:index.partial.html -->
<!--
HTML Email Receipt
Built in Maizzle, with Tailwind CSS.
https://maizzle.com
Original design by @_hiskie
https://dribbble.com/shots/3081118-Email-Receipt-Daily-UI-017
Maizzle.js source file:
https://github.com/maizzle/remix/blob/master/src/templates/3-dailyui17-email-receipt.njk
-->
<html
lang="en"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
>
<head>
<meta charset="utf8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<title>Your transaction is now confirmed</title>
<!--[if !mso]><!-->
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {
border-collapse: collapse;
}
td,
th,
div,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Segoe UI', sans-serif;
mso-line-height-rule: exactly;
}
</style>
<![endif]-->
<style>
@media screen {
img {
max-width: 100%;
}
td,
th {
box-sizing: border-box;
}
u ~ div .wrapper {
min-width: 100vw;
}
a[x-apple-data-detectors] {
color: inherit;
text-decoration: none;
}
.all-font-roboto {
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif ;
}
.all-font-sans {
font-family: -apple-system, 'Segoe UI', sans-serif ;
}
}
/* @media (min-width: 1994px) {
td{
}
} */
@media (max-width: 600px) {
.sm-inline-block {
display: inline-block ;
}
.sm-hidden {
display: none ;
}
.sm-leading-32 {
line-height: 32px ;
}
.sm-p-20 {
padding: 20px ;
}
.sm-py-12 {
padding-top: 12px ;
padding-bottom: 12px ;
}
.sm-text-center {
text-align: center ;
}
.sm-text-xs {
font-size: 12px ;
}
.sm-text-lg {
font-size: 18px ;
}
.sm-w-1-4 {
width: 25% ;
}
.sm-w-3-4 {
width: 75% ;
}
.sm-w-full {
width: 100% ;
}
}
</style>
<style>
@media (max-width: 600px) {
.sm-dui17-b-t {
border: solid #4299e1;
border-width: 4px 0 0;
}
}
</style>
</head>
<body
style="
box-sizing: border-box;
margin: 0;
padding: 0;
width: 660px;
word-break: break-word;
-webkit-font-smoothing: antialiased;
background-color: #f2f2f2;
"
>
<div style="display: none; line-height: 0; font-size: 0">
Dear {{{firstName}}},
<br />
<p>Please see details of your transaction below</p>
<!-- ${
asset_name.toLowerCase() === 'fgn bond'
? `Thank you for participating in the ${moment().format(
'MMM'
)} ${moment().format('YYYY')} FGN Savings Bond. <br/>
Please see details of your transaction below: Description – ${moment().format(
'MMM'
)} ${moment().format('YYYY')} FGN Savings Bond`
: `thanks for patronizing us - your reservation is now
confirmed ✔`
} -->
</div>
<table
class="wrapper all-font-sans"
width="100%"
height="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td style="padding: 24px" width="100%">
<table
class="sm-w-full"
width="600"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td colspan="2" class="sm-inline-block" style="display: none">
<img
src="https://res.cloudinary.com/dsavh0wlc/image/upload/v1658917919/new_banner_2_qihvcl.jpg"
alt="Double Room"
style="
border: 0;
line-height: 100%;
vertical-align: middle;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
"
/>
</td>
</tr>
<tr>
<td
class="sm-hidden"
style="padding-top: 40px; padding-bottom: 40px"
width="160"
>
<img
src="{{email_image}}"
alt="Double room"
style="
border: 0;
line-height: 100%;
vertical-align: middle;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
"
width="160"
/>
</td>
<td
align="left"
class="sm-p-20 sm-dui17-b-t"
style="
border-radius: 2px;
padding: 40px;
position: relative;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
vertical-align: top;
z-index: 50;
"
bgcolor="#ffffff"
valign="top"
>
<table
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td width="80%">
<h1
class="sm-text-lg all-font-roboto"
style="
font-weight: 700;
line-height: 100%;
margin: 0;
margin-bottom: 4px;
font-size: 24px;
color: #000;
"
>
Payment Receipt
</h1>
<p
class="sm-text-xs"
style="margin: 0; color: #a0aec0; font-size: 14px"
>
Thank you participating in {{{product}}}
</p>
</td>
<td style="text-align: right" width="20%" align="right">
<a
href="https://example.com"
target="_blank"
style="text-decoration: none"
>
<img
src="{{url}}images/logo.png"
alt="Download PDF"
style="
border: 0;
line-height: 100%;
vertical-align: middle;
font-size: 12px;
"
width="50"
/>
</a>
</td>
</tr>
</table>
<div style="line-height: 32px">‌</div>
<table
class="sm-leading-32"
style="line-height: 28px; font-size: 14px"
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td
class="sm-inline-block"
style="color: #718096"
width="50%"
>
Name
</td>
<td
class="sm-inline-block"
style="font-weight: 600; text-align: right"
width="50%"
align="right"
>
{{{firstName}}} {{{lastName}}}
</td>
</tr>
</table>
<table
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td style="padding-top: 24px; padding-bottom: 24px">
<div
style="
background-color: #edf2f7;
height: 2px;
line-height: 2px;
"
>
‌
</div>
</td>
</tr>
</table>
<table
style="font-size: 14px"
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td
class="sm-w-full sm-inline-block sm-py-12"
style="
font-family: Menlo, Consolas, monospace;
font-weight: 600;
text-align: center;
color: #cbd5e0;
font-size: 18px;
letter-spacing: -1px;
"
width="20%"
align="center"
>
<p
class="all-font-roboto"
style="font-weight: 600; margin: 0; color: #000000"
>
{{{date}}}
</p>
</td>
</tr>
</table>
<table
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td style="padding-top: 24px; padding-bottom: 24px">
<div
style="
background-color: #edf2f7;
height: 2px;
line-height: 2px;
"
>
‌
</div>
</td>
</tr>
</table>
<table
class="sm-leading-32"
style="line-height: 28px; font-size: 14px"
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td
class="sm-inline-block"
style="color: #718096"
width="50%"
>
Description
</td>
<td
class="sm-inline-block"
style="font-weight: 600; text-align: right"
width="50%"
align="right"
>
{{{product}}}
</td>
</tr>
<tr>
<td
class="sm-inline-block"
style="color: #718096"
width="50%"
>
Reference
</td>
<td
class="sm-inline-block"
style="font-weight: 600; text-align: right"
width="50%"
align="right"
>
{{{reference}}}
</td>
</tr>
<tr>
<td
class="sm-inline-block"
style="color: #718096; font-size: 20px"
width="50%"
>
Total
</td>
<td
class="sm-inline-block"
style="
font-weight: 600;
text-align: right;
color: #68d391;
font-size: 20px;
"
width="50%"
align="right"
>
{{{currency_symbol}}} {{{amount}}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!-- partial -->
</body>
</html>