From 5e612c5b4f100727d25fd15a851d5e02b78dead4 Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Sun, 26 Nov 2023 18:25:46 +0530
Subject: [PATCH] refactor: update orders history page

---
 templates/customer/history.tpl | 90 ++++++++++++----------------------
 1 file changed, 32 insertions(+), 58 deletions(-)

diff --git a/templates/customer/history.tpl b/templates/customer/history.tpl
index 422757f..63b36d3 100644
--- a/templates/customer/history.tpl
+++ b/templates/customer/history.tpl
@@ -25,95 +25,69 @@
 {extends file='customer/page.tpl'}
 
 {block name='page_title'}
-  {l s='Order history' d='Shop.Theme.Customeraccount'}
+  <h2 class="text-2xl font-bold mb-8">
+    {l s='Order history' d='Shop.Theme.Customeraccount'}
+  </h2>
 {/block}
 
 {block name='page_content'}
-  <h6>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
+  <h6 class='text-lg'>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
 
   {if $orders}
-    <table class="table table-striped table-bordered table-labeled hidden-sm-down">
+    <table class="mt-2 w-full">
       <thead class="thead-default">
         <tr>
           <th>{l s='Order reference' d='Shop.Theme.Checkout'}</th>
           <th>{l s='Date' d='Shop.Theme.Checkout'}</th>
           <th>{l s='Total price' d='Shop.Theme.Checkout'}</th>
-          <th class="hidden-md-down">{l s='Payment' d='Shop.Theme.Checkout'}</th>
-          <th class="hidden-md-down">{l s='Status' d='Shop.Theme.Checkout'}</th>
-          <th>{l s='Invoice' d='Shop.Theme.Checkout'}</th>
+          <th class="max-md:hidden">{l s='Payment' d='Shop.Theme.Checkout'}</th>
+          <th>{l s='Status' d='Shop.Theme.Checkout'}</th>
+          <th class="max-md:hidden">{l s='Invoice' d='Shop.Theme.Checkout'}</th>
           <th>&nbsp;</th>
         </tr>
       </thead>
       <tbody>
         {foreach from=$orders item=order}
-          <tr>
-            <th scope="row">{$order.details.reference}</th>
-            <td>{$order.details.order_date}</td>
-            <td class="text-xs-right">{$order.totals.total.value}</td>
-            <td class="hidden-md-down">{$order.details.payment}</td>
-            <td>
-              <span
-                class="label label-pill {$order.history.current.contrast}"
-                style="background-color:{$order.history.current.color}"
-              >
+          <tr class="even:bg-gray-200 text-sm md:text-base">
+            <td class="text-center">{$order.details.reference}</th>
+            <td class="text-center">{$order.details.order_date}</td>
+            <td class="text-center">{$order.totals.total.value}</td>
+            <td class="text-center max-md:hidden">{$order.details.payment}</td>
+            <td class="text-center max-md:px-2">
                 {$order.history.current.ostate_name}
-              </span>
             </td>
-            <td class="text-sm-center hidden-md-down">
+            <td class="text-center max-md:hidden">
               {if $order.details.invoice_url}
-                <a href="{$order.details.invoice_url}"><i class="material-icons">&#xE415;</i></a>
+                <a href="{$order.details.invoice_url}">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-download mx-auto" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M12 17v-6" /><path d="M9.5 14.5l2.5 2.5l2.5 -2.5" /></svg>
+                </a>
               {else}
                 -
               {/if}
             </td>
-            <td class="text-sm-center order-actions">
+            <td class="text-center md:flex gap-2 items-center justify-center">
               <a href="{$order.details.details_url}" data-link-action="view-order-details">
-                {l s='Details' d='Shop.Theme.Customeraccount'}
+                  <svg xmlns="http://www.w3.org/2000/svg" class="md:hidden icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 17h6" /><path d="M9 13h6" /></svg>
+                  <h2 class="text-sm md:text-base max-md:hidden">
+                    {l s='Details' d='Shop.Theme.Customeraccount'}
+                  </h2>
               </a>
               {if $order.details.reorder_url}
-                <a href="{$order.details.reorder_url}">{l s='Reorder' d='Shop.Theme.Actions'}</a>
+                <a href="{$order.details.reorder_url}">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="md:hidden icon icon-tabler icon-tabler-reorder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3" /><path d="M16.5 8.5l2.5 2.5l2.5 -2.5" /></svg>
+                    <h2 class="text-sm md:text-sm max-md:hidden">
+                        {l s='Reorder' d='Shop.Theme.Actions'}
+                    </h2>
+                </a>
               {/if}
             </td>
           </tr>
         {/foreach}
       </tbody>
     </table>
-
-    <div class="orders hidden-md-up">
-      {foreach from=$orders item=order}
-        <div class="order">
-          <div class="row">
-            <div class="col-xs-10">
-              <a href="{$order.details.details_url}"><h3>{$order.details.reference}</h3></a>
-              <div class="date">{$order.details.order_date}</div>
-              <div class="total">{$order.totals.total.value}</div>
-              <div class="status">
-                <span
-                  class="label label-pill {$order.history.current.contrast}"
-                  style="background-color:{$order.history.current.color}"
-                >
-                  {$order.history.current.ostate_name}
-                </span>
-              </div>
-            </div>
-            <div class="col-xs-2 text-xs-right">
-                <div>
-                  <a href="{$order.details.details_url}" data-link-action="view-order-details" title="{l s='Details' d='Shop.Theme.Customeraccount'}">
-                    <i class="material-icons">&#xE8B6;</i>
-                  </a>
-                </div>
-                {if $order.details.reorder_url}
-                  <div>
-                    <a href="{$order.details.reorder_url}" title="{l s='Reorder' d='Shop.Theme.Actions'}">
-                      <i class="material-icons">&#xE863;</i>
-                    </a>
-                  </div>
-                {/if}
-            </div>
-          </div>
-        </div>
-      {/foreach}
+    {else}
+    <div class='w-full mt-2 p-2 bg-red-100 border border-red-300'>
+      <span>You have not placed any orders yet !</span>
     </div>
-
   {/if}
 {/block}