Order Status History Craft Commerce

status-history.twig

<h3 class="font-semibold mb-3 text-xl">
  {{- 'Status History'|t -}}
</h3>
<ol class="space-y-5 text-sm">
  {% for history in order.histories %}
    <li>
      <h5 class="mb-1 inline-block uppercase text-11 border px-1 py-0.5 leading-none text-{{ history.newStatus.color }}-500 border-{{ history.newStatus.color }}-500">
        {{- history.newStatus -}}
      </h5>
      <div class="ml-2">
        <time datetime="{{ macro.dateTime(history.dateCreated) }}" class="block font-medium text-slate-700">
          <span class="mr-1.5">{{ macro.dateFormatted(history.dateCreated) }}</span>
          <span class="text-xs font-normal text-slate-400">(<span class="mx-0.5">{{ history.dateCreated|time('g:ia') }}</span>)</span>
        </time>
        {% if history.message|length %}
          <p class="text-slate-400">{{ history.message }}</p>
        {% endif %}
      </div>
    </li>
  {% else %}
    <li>No status updates have been applied yet.</li>
  {% endfor %}
</ol>