Untitled
unknown
plain_text
a year ago
4.4 kB
5
Indexable
const body = `
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>SnapEzee - Invoice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
/* Inline styles for consistent rendering */
body {
font-family: Arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 10px;
}
th {
background: #29aaff;
color: #fff;
}
</style>
</head>
<body>
<!-- Invoice -->
<div style="max-width: 768px; margin: auto; padding: 10px 0;">
<!-- Header -->
<div style="text-align: center;">
<!-- <img src="./logo.png" alt="logo" style="width: 80px; height: 80px;"> -->
<h1 style="font-size: 22px; font-weight: 700; margin: 5px 0;">Snap<span style="color: #29aaff;">Ezee</span></h1>
</div>
<!-- Invoice Details -->
<div style="text-align: center; padding: 20px 0;">
<h2 style="font-size: 19px; font-weight: 700; margin: 10px 0;">Invoice</h2>
<div style="text-align: left; margin: auto; width: fit-content;">
<h4 style="margin: 5px 0;">Invoice Number: <strong>${savedOrder?.orderNumber}</strong></p>
<h4 style="margin: 5px 0;">Invoice Date: <strong>${savedOrder?.createdAt}</strong></p>
</div>
</div>
<!-- Invoice To/From -->
<div style="display: flex; justify-content: space-between; gap:10px; padding: 0 10px;">
<!-- Invoice To -->
<div style="width: 50%;">
<h4 style="font-size: 15px; opacity: 0.9;">Invoice To</h4>
<h2 style="font-size: 18px; font-weight: 600; margin: 5px 0;">${mobileUser?.name}</h2>
<p style="margin: 5px 0; color: white;"> ${mobileUser?.email} <br> ${address?.addresses[0]?.address}, ${address?.addresses[0]?.state}, ${address?.addresses[0]?.city}, ${address?.addresses[0]?.country}</p>
</div>
<!-- Invoice From -->
<div>
<h4 style="font-size: 15px; opacity: 0.9;">Invoice From</h4>
<h2 style="font-size: 18px; font-weight: 600; margin: 5px 0;">Animas Roky</h2>
<p style="margin: 5px 0; color: white">Apexo Inc <br> info@snapzee.com
</div>
</div>
<!-- Invoice Items -->
<div style="padding: 10px;">
<table style="width : 100%">
<!-- Table Header -->
<thead>
<tr>
<th>No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<!-- Table Body -->
<tbody>
${items?.map((item, index) => (`
<tr>
<td>${index + 1}</td>
<td>${documentNames[index]}</td>
<td>${item.quantity}</td>
<td>${item.amountPerItem}</td>
</tr>
`)).join('')}
<tr>
<td colspan="3" style="text-align: right;">SubTotal</td>
<td>${savedOrder?.subtotal}</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;">Tax</td>
<td>${savedOrder?.vatAmount}</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;">Grand Total</td>
<td>${savedOrder?.total}</td>
</tr>
</tbody>
</table>
</div>
<!-- Footer -->
<div style="background-color: #29aaff; color: white; text-align: center; margin-left: 10px; margin-right: 10px; margin-top: 10px; padding: 10px 0; width: 100%">
<span style="color:#fff">info@snapzee.com</span>
</div>
</div>
</body>
</html>
`;Editor is loading...
Leave a Comment