JSFiddle - React, Tailwind, and code Playground

by Sasá Rafalsky

HTML

{% capture email_title %}
  {% if has_pending_payment %}
    Thank you for your order!
  {% else %}
    Thank you for your purchase!
  {% endif %}
{% endcapture %}
{% capture email_body %}
  {% if has_pending_payment %}
    {% if buyer_action_required %}
      You’ll get a confirmation email after completing your payment.
    {% else %}
      Your payment is being processed. You'll get an email when your order is confirmed.
    {% endif %}
  {% else %}
    {% if requires_shipping %}
    {% case delivery_method %}
        {% when 'pick-up' %}
          You’ll receive an email when your order is ready for pickup.
        {% when 'local' %}
          Hi {{ customer.first_name }}, we're getting your order ready for delivery.
        {% else %}
          We're getting your order ready to be shipped. We will notify you when it has been sent.
      {% endcase %}
        {% if delivery_instructions != blank  %}
          <p><b>Delivery information:</b> {{ delivery_instructions }}</p>
        {% endif %}
       {% if consolidated_estimated_delivery_time %}
        {% if has_multiple_delivery_methods %}
          <h3 class="estimated_delivery__title">Estimated delivery</h3>
          <p>{{ consolidated_estimated_delivery_time }}</p>
        {% else %}
          <p>
            Estimated delivery <b>{{ consolidated_estimated_delivery_time }}</b>
          </p>
        {% endif %}
       {% endif %}
    {% endif %}
  {% endif %}
  {% assign gift_card_line_items = line_items | where: "gift_card" %}
  {% assign found_gift_card_with_recipient_email = false %}
  {% for line_item in gift_card_line_items %}
    {% if line_item.properties["__shopify_send_gift_card_to_recipient"] and line_item.properties["Recipient email"] %}
      {% assign found_gift_card_with_recipient_email = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if found_gift_card_with_recipient_email %}
    <p>Your gift card recipient will receive an email with their gift card code.</p>
  {% elsif...