Untitled

 avatar
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