search

KYH-Net23 / EmailProvider

This repository is responsible for handling emails to customers & admins.
0 stars 0 forks source link

Enhancement: Email template for the order confirmation #11

Open KimmoKAhola opened 6 days ago

KimmoKAhola commented 6 days ago

Implement this template for the email. Replace the dummy values with data from the order confirmation model.

<div style="font-family: 'Tahoma', Arial, sans-serif; display: grid; place-items: center; margin-bottom: 72px">
  <h1 style="margin-bottom: 36px; font-family: 'Tahoma', Arial, sans-serif;">Here it comes! Your order has been shipped.</h1>
  <a style="max-width: 150px; text-decoration: none; width: auto; background: black; color: white; padding: 12px 24px; text-align: center; border-radius: 24px; font-family: 'Tahoma', Arial, sans-serif;" href="">Track package</a>
</div>

<div style="font-family: 'Tahoma', Arial, sans-serif; display: grid; max-width: 750px; margin:auto; padding: 24px; border: 1px solid #e5e5e5; gap: 24px; border-radius: 12px;">
  <div style="display: flex; justify-content: space-between; padding-bottom: 24px">
    <img style="max-height: 150px; object-fit: cover"
         src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
         alt="product image">

    <div style="display: flex; flex-direction: column; justify-content: space-between; font-family: 'Tahoma', Arial, sans-serif;">
      <div style="max-width: 90%; font-family: 'Tahoma', Arial, sans-serif;">
        <h3 style="border-bottom: 1px solid #e8e8e8; font-style: normal; font-family: 'Tahoma', Arial, sans-serif;">Apple computer</h3>
        <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">A powerful and sleek Apple computer that fits your needs.</p>
        <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Some more info maybe?</p>
      </div>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Quantity: 1</p>
    </div>

    <div style="margin-top: auto; font-family: 'Tahoma', Arial, sans-serif;">
      <p style="font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Price: $400</p>
      <p style="font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Discount: $300</p>
    </div>
  </div>

  <div style="text-align: right; padding-top: 12px; font-family: 'Tahoma', Arial, sans-serif;">
    <h3 style="font-size: 18px; font-weight: bold; color: #333; font-family: 'Tahoma', Arial, sans-serif;">Total: 600 SEK</h3>
  </div>

  <div style="display: flex; justify-content: center;">
    <a style="max-width: 150px; text-decoration: none; width: auto; background: black; color: white; padding: 12px 24px; text-align: center; border-radius: 24px; font-family: 'Tahoma', Arial, sans-serif;" href="">View Receipt</a>
  </div>

  <hr style="border: none; border-top: 1px solid #e5e5e5; margin: 24px 0;">

  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;">
    <div style="text-align: center; font-family: 'Tahoma', Arial, sans-serif;">
      <h3 style="font-size: 16px; margin-bottom: 8px; color: #333; font-family: 'Tahoma', Arial, sans-serif;">Shipping From</h3>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Rika Centrallager</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">12345 Stockholm</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Stockholmsgatan</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Sweden</p>
    </div>
    <div style="text-align: center; font-family: 'Tahoma', Arial, sans-serif;">
      <h3 style="font-size: 16px; margin-bottom: 8px; color: #333; font-family: 'Tahoma', Arial, sans-serif;">Delivery Address</h3>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Kimmo Ahola</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Ölandsresan 48</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">75755 Uppsala</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Sweden</p>
    </div>
    <div style="text-align: center; font-family: 'Tahoma', Arial, sans-serif;">
      <h3 style="font-size: 16px; margin-bottom: 8px; color: #333; font-family: 'Tahoma', Arial, sans-serif;">Billing Address</h3>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Kimmo Ahola</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Ölandsresan 48</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">75755 Uppsala</p>
      <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">Sweden</p>
    </div>
  </div>

  <hr style="border: none; border-top: 1px solid #e5e5e5; margin: 24px 0;">

  <div style="display: grid; justify-content: center; font-family: 'Tahoma', Arial, sans-serif;">
    <p style="color: rgba(0,0,0,0.7); font-size: 14px; text-align: center; font-family: 'Tahoma', Arial, sans-serif;">Rika - It will arrive, eventually!</p>
    <p style="color: rgba(0,0,0,0.7); font-size: 14px; font-family: 'Tahoma', Arial, sans-serif;">We'd love your feedback! <a href="" style="color: #000; text-decoration: underline; font-family: 'Tahoma', Arial, sans-serif;">Leave a review</a>.</p>
  </div>
</div>

<div style="font-family: Tahoma, Arial, sans-serif; margin: 0; padding: 0; background: #f9f9f9;">
  <!-- Container Table -->
  <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background: #f9f9f9; padding: 24px 0;">
    <tr>
      <td align="center">
        <!-- Main Content Table -->
        <table width="750" cellpadding="0" cellspacing="0" border="0" style="background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; font-family: Tahoma, Arial, sans-serif; padding: 0;">
          <!-- Header -->
          <tr>
            <td align="center" style="padding: 36px 24px;">
              <h1 style="margin: 0; font-family: Tahoma, Arial, sans-serif; font-size: 24px; font-weight: bold;">Here it comes! Your order has been shipped.</h1>
            </td>
          </tr>
          <!-- Button -->
          <tr>
            <td align="center" style="padding: 24px;">
              <a href="" style="display: inline-block; text-decoration: none; background: #000; color: #fff; padding: 12px 24px; border-radius: 24px; font-family: Tahoma, Arial, sans-serif; font-size: 16px; text-align: center;">Track package</a>
            </td>
          </tr>
          <!-- Product Details -->
          <tr>
            <td style="padding: 24px;">
              <table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family: Tahoma, Arial, sans-serif;">
                <tr>
                  <!-- Product Image -->
                  <td style="padding-right: 16px; vertical-align: top; width: 150px;">
                    <img src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="product image" style="max-height: 150px; width: 100%; object-fit: cover;">
                  </td>
                  <!-- Product Info -->
                  <td style="padding-right: 16px; vertical-align: top;">
                    <h3 style="margin: 0 0 8px; border-bottom: 1px solid #e8e8e8; font-size: 18px; font-weight: bold;">Apple computer</h3>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">A powerful and sleek Apple computer that fits your needs.</p>
                    <p style="margin: 8px 0 0; color: rgba(0,0,0,0.7); font-size: 14px;">Some more info maybe?</p>
                  </td>
                  <!-- Price -->
                  <td style="vertical-align: bottom; text-align: right;">
                    <p style="margin: 0; color: #000; font-size: 14px;">Price: $400</p>
                    <p style="margin: 4px 0 0; color: #000; font-size: 14px;">Discount: $300</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Total -->
          <tr>
            <td style="padding: 24px; text-align: right;">
              <h3 style="margin: 0; font-size: 18px; font-weight: bold;">Total: 600 SEK</h3>
            </td>
          </tr>
          <!-- View Receipt Button -->
          <tr>
            <td align="center" style="padding: 24px;">
              <a href="" style="display: inline-block; text-decoration: none; background: #000; color: #fff; padding: 12px 24px; border-radius: 24px; font-family: Tahoma, Arial, sans-serif; font-size: 16px; text-align: center;">View Receipt</a>
            </td>
          </tr>
          <!-- Shipping and Billing -->
          <tr>
            <td style="padding: 24px;">
              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <!-- Shipping From -->
                  <td style="text-align: center; width: 33%; font-family: Tahoma, Arial, sans-serif;">
                    <h3 style="margin: 0 0 8px; font-size: 16px; color: #333;">Shipping From</h3>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Rika Centrallager</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">12345 Stockholm</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Stockholmsgatan</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Sweden</p>
                  </td>
                  <!-- Delivery Address -->
                  <td style="text-align: center; width: 33%; font-family: Tahoma, Arial, sans-serif;">
                    <h3 style="margin: 0 0 8px; font-size: 16px; color: #333;">Delivery Address</h3>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Kimmo Ahola</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Ölandsresan 48</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">75755 Uppsala</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Sweden</p>
                  </td>
                  <!-- Billing Address -->
                  <td style="text-align: center; width: 33%; font-family: Tahoma, Arial, sans-serif;">
                    <h3 style="margin: 0 0 8px; font-size: 16px; color: #333;">Billing Address</h3>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Kimmo Ahola</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Ölandsresan 48</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">75755 Uppsala</p>
                    <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Sweden</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td style="padding: 24px; text-align: center;">
              <p style="margin: 0; color: rgba(0,0,0,0.7); font-size: 14px;">Rika - It will arrive, eventually!</p>
              <p style="margin: 4px 0 0; color: rgba(0,0,0,0.7); font-size: 14px;">We'd love your feedback! <a href="" style="color: #000; text-decoration: underline;">Leave a review</a>.</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>```