From 8218fdcbf37b2e3c92a31d616ffbb37f3c7ee139 Mon Sep 17 00:00:00 2001
From: jatiny <jatiny@consultbop.com>
Date: Tue, 19 Nov 2024 06:36:06 +0000
Subject: [PATCH] chore: update customer templates

---
 .../_partials/order-detail-no-return.tpl      | 100 +++---
 .../_partials/order-detail-return.tpl         | 145 ++++----
 templates/customer/order-detail.tpl           | 331 ++++++++----------
 3 files changed, 273 insertions(+), 303 deletions(-)

diff --git a/templates/customer/_partials/order-detail-no-return.tpl b/templates/customer/_partials/order-detail-no-return.tpl
index 005af9b..040e309 100644
--- a/templates/customer/_partials/order-detail-no-return.tpl
+++ b/templates/customer/_partials/order-detail-no-return.tpl
@@ -23,31 +23,31 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 {block name='order_products_table'}
-  <div class="box hidden-sm-down">
-    <table id="order-products" class="table table-bordered">
-      <thead class="thead-default">
+  <div class="box hidden sm:block">
+    <table id="order-products" class="table-auto border-separate border border-gray-200 w-full">
+      <thead class="bg-gray-100">
         <tr>
-          <th>{l s='Product' d='Shop.Theme.Catalog'}</th>
-          <th>{l s='Quantity' d='Shop.Theme.Catalog'}</th>
-          <th>{l s='Unit price' d='Shop.Theme.Catalog'}</th>
-          <th>{l s='Total price' d='Shop.Theme.Catalog'}</th>
+          <th class="px-4 py-2 text-left">{l s='Product' d='Shop.Theme.Catalog'}</th>
+          <th class="px-4 py-2 text-left">{l s='Quantity' d='Shop.Theme.Catalog'}</th>
+          <th class="px-4 py-2 text-left">{l s='Unit price' d='Shop.Theme.Catalog'}</th>
+          <th class="px-4 py-2 text-left">{l s='Total price' d='Shop.Theme.Catalog'}</th>
         </tr>
       </thead>
       {foreach from=$order.products item=product}
-        <tr>
-          <td>
+        <tr class="border-t border-gray-200">
+          <td class="px-4 py-2">
             <strong>
-              <a {if isset($product.download_link)}href="{$product.download_link}"{/if}>
+              <a {if isset($product.download_link)}href="{$product.download_link}"{/if} class="text-blue-600 hover:underline">
                 {$product.name}
               </a>
             </strong><br/>
             {if $product.reference}
-              {l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/>
+              <span class="text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/></span>
             {/if}
             {if $product.customizations}
               {foreach from=$product.customizations item="customization"}
-                <div class="customization">
-                  <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
+                <div class="customization mt-2">
+                  <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
                 </div>
                 <div id="_desktop_product_customization_modal_wrapper_{$customization.id_customization}">
                   <div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true">
@@ -61,11 +61,11 @@
                         </div>
                         <div class="modal-body">
                           {foreach from=$customization.fields item="field"}
-                            <div class="product-customization-line row">
-                              <div class="col-sm-3 col-xs-4 label">
+                            <div class="product-customization-line flex mb-2">
+                              <div class="w-1/3 font-semibold text-sm text-gray-600">
                                 {$field.label}
                               </div>
-                              <div class="col-sm-9 col-xs-8 value">
+                              <div class="w-2/3 text-sm">
                                 {if $field.type == 'text'}
                                   {if (int)$field.id_module}
                                     {$field.text nofilter}
@@ -73,7 +73,7 @@
                                     {$field.text}
                                   {/if}
                                 {elseif $field.type == 'image'}
-                                  <img src="{$field.image.small.url}">
+                                  <img src="{$field.image.small.url}" class="w-16 h-16 object-cover">
                                 {/if}
                               </div>
                             </div>
@@ -86,7 +86,7 @@
               {/foreach}
             {/if}
           </td>
-          <td>
+          <td class="px-4 py-2">
             {if $product.customizations}
               {foreach $product.customizations as $customization}
                 {$customization.quantity}
@@ -95,52 +95,49 @@
               {$product.quantity}
             {/if}
           </td>
-          <td class="text-xs-right">{$product.price}</td>
-          <td class="text-xs-right">{$product.total}</td>
+          <td class="px-4 py-2 text-right">{$|cat:$product.price}</td>
+          <td class="px-4 py-2 text-right">{$|cat:$product.total}</td>
         </tr>
       {/foreach}
       <tfoot>
         {foreach $order.subtotals as $line}
           {if $line.value}
-            <tr class="text-xs-right line-{$line.type}">
-              <td colspan="3">{$line.label}</td>
-              <td>{$line.value}</td>
+            <tr class="text-right border-t border-gray-200">
+              <td colspan="3" class="px-4 py-2">{$line.label}</td>
+              <td class="px-4 py-2">{$line.value}</td>
             </tr>
           {/if}
         {/foreach}
-        <tr class="text-xs-right line-{$order.totals.total.type}">
-          <td colspan="3">{$order.totals.total.label}</td>
-          <td>{$order.totals.total.value}</td>
+        <tr class="text-right border-t border-gray-200">
+          <td colspan="3" class="px-4 py-2">{$order.totals.total.label}</td>
+          <td class="px-4 py-2">{$order.totals.total.value}</td>
         </tr>
       </tfoot>
     </table>
   </div>
 
-  <div class="order-items hidden-md-up box">
+  <div class="order-items sm:hidden box">
     {foreach from=$order.products item=product}
-      <div class="order-item">
-        <div class="row">
-          <div class="col-sm-5 desc">
-            <div class="name">{$product.name}</div>
+      <div class="order-item py-4 border-b border-gray-200">
+        <div class="flex">
+          <div class="w-1/2">
+            <div class="text-lg font-semibold">{$product.name}</div>
             {if $product.reference}
-              <div class="ref">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div>
+              <div class="text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div>
             {/if}
             {if $product.customizations}
               {foreach $product.customizations as $customization}
-                <div class="customization">
-                  <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
-                </div>
-                <div id="_mobile_product_customization_modal_wrapper_{$customization.id_customization}">
+                <div class="customization mt-2">
+                  <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
                 </div>
+                <div id="_mobile_product_customization_modal_wrapper_{$customization.id_customization}"></div>
               {/foreach}
             {/if}
           </div>
-          <div class="col-sm-7 qty">
-            <div class="row">
-              <div class="col-xs-4 text-sm-left text-xs-left">
-                {$product.price}
-              </div>
-              <div class="col-xs-4">
+          <div class="w-1/2 text-right">
+            <div class="flex justify-between">
+              <div class="text-sm">{$product.price}</div>
+              <div class="text-sm">
                 {if $product.customizations}
                   {foreach $product.customizations as $customization}
                     {$customization.quantity}
@@ -149,27 +146,26 @@
                   {$product.quantity}
                 {/if}
               </div>
-              <div class="col-xs-4 text-xs-right">
-                {$product.total}
-              </div>
+              <div class="text-sm">{'$'|cat:$product.total}</div>
             </div>
           </div>
         </div>
       </div>
     {/foreach}
   </div>
-  <div class="order-totals hidden-md-up box">
+
+  <div class="order-totals sm:hidden box mt-4">
     {foreach $order.subtotals as $line}
       {if $line.value}
-        <div class="order-total row">
-          <div class="col-xs-8"><strong>{$line.label}</strong></div>
-          <div class="col-xs-4 text-xs-right">{$line.value}</div>
+        <div class="order-total flex justify-between py-2">
+          <div class="text-sm font-semibold">{'$line.label'}</div>
+          <div class="text-sm">{'$line.value'}</div>
         </div>
       {/if}
     {/foreach}
-    <div class="order-total row">
-      <div class="col-xs-8"><strong>{$order.totals.total.label}</strong></div>
-      <div class="col-xs-4 text-xs-right">{$order.totals.total.value}</div>
+    <div class="order-total flex justify-between py-2">
+      <div class="text-sm font-semibold">{'$order.totals.total.label'}</div>
+      <div class="text-sm">{'$order.totals.total.value'}</div>
     </div>
   </div>
 {/block}
diff --git a/templates/customer/_partials/order-detail-return.tpl b/templates/customer/_partials/order-detail-return.tpl
index 1156ec3..8aeefc5 100644
--- a/templates/customer/_partials/order-detail-return.tpl
+++ b/templates/customer/_partials/order-detail-return.tpl
@@ -25,42 +25,42 @@
 {block name='order_products_table'}
   <form id="order-return-form" action="{$urls.pages.order_follow}" method="post">
 
-    <div class="box hidden-sm-down">
-      <table id="order-products" class="table table-bordered return">
-        <thead class="thead-default">
+    <div class="box hidden sm:block">
+      <table id="order-products" class="table-auto border-separate border border-gray-200 w-full return">
+        <thead class="bg-gray-100">
           <tr>
-            <th class="head-checkbox"><input type="checkbox"/></th>
-            <th>{l s='Product' d='Shop.Theme.Catalog'}</th>
-            <th>{l s='Quantity' d='Shop.Theme.Catalog'}</th>
-            <th>{l s='Returned' d='Shop.Theme.Customeraccount'}</th>
-            <th>{l s='Unit price' d='Shop.Theme.Catalog'}</th>
-            <th>{l s='Total price' d='Shop.Theme.Catalog'}</th>
+            <th class="px-4 py-2"><input type="checkbox"/></th>
+            <th class="px-4 py-2">{l s='Product' d='Shop.Theme.Catalog'}</th>
+            <th class="px-4 py-2">{l s='Quantity' d='Shop.Theme.Catalog'}</th>
+            <th class="px-4 py-2">{l s='Returned' d='Shop.Theme.Customeraccount'}</th>
+            <th class="px-4 py-2">{l s='Unit price' d='Shop.Theme.Catalog'}</th>
+            <th class="px-4 py-2">{l s='Total price' d='Shop.Theme.Catalog'}</th>
           </tr>
         </thead>
         {foreach from=$order.products item=product name=products}
-          <tr>
-            <td>
+          <tr class="border-t border-gray-200">
+            <td class="px-4 py-2">
               {if !$product.customizations}
                 <span id="_desktop_product_line_{$product.id_order_detail}">
-                <input type="checkbox" id="cb_{$product.id_order_detail}" name="ids_order_detail[{$product.id_order_detail}]" value="{$product.id_order_detail}">
-              </span>
-              {else}
-                {foreach $product.customizations  as $customization}
-                  <span id="_desktop_product_customization_line_{$product.id_order_detail}_{$customization.id_customization}">
-                  <input type="checkbox" id="cb_{$product.id_order_detail}" name="customization_ids[{$product.id_order_detail}][]" value="{$customization.id_customization}">
+                  <input type="checkbox" id="cb_{$product.id_order_detail}" name="ids_order_detail[{$product.id_order_detail}]" value="{$product.id_order_detail}">
                 </span>
+              {else}
+                {foreach $product.customizations as $customization}
+                  <span id="_desktop_product_customization_line_{$product.id_order_detail}_{$customization.id_customization}">
+                    <input type="checkbox" id="cb_{$product.id_order_detail}" name="customization_ids[{$product.id_order_detail}][]" value="{$customization.id_customization}">
+                  </span>
                 {/foreach}
               {/if}
             </td>
-            <td>
+            <td class="px-4 py-2">
               <strong>{$product.name}</strong><br/>
               {if $product.reference}
-                {l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/>
+                <span class="text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/></span>
               {/if}
               {if $product.customizations}
                 {foreach from=$product.customizations item="customization"}
-                  <div class="customization">
-                    <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
+                  <div class="customization mt-2">
+                    <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
                   </div>
                   <div id="_desktop_product_customization_modal_wrapper_{$customization.id_customization}">
                     <div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true">
@@ -74,11 +74,11 @@
                           </div>
                           <div class="modal-body">
                             {foreach from=$customization.fields item="field"}
-                              <div class="product-customization-line row">
-                                <div class="col-sm-3 col-xs-4 label">
+                              <div class="product-customization-line flex mb-2">
+                                <div class="w-1/3 font-semibold text-sm text-gray-600">
                                   {$field.label}
                                 </div>
-                                <div class="col-sm-9 col-xs-8 value">
+                                <div class="w-2/3 text-sm">
                                   {if $field.type == 'text'}
                                     {if (int)$field.id_module}
                                       {$field.text nofilter}
@@ -86,7 +86,7 @@
                                       {$field.text}
                                     {/if}
                                   {elseif $field.type == 'image'}
-                                    <img src="{$field.image.small.url}">
+                                    <img src="{$field.image.small.url}" class="w-16 h-16 object-cover">
                                   {/if}
                                 </div>
                               </div>
@@ -99,14 +99,14 @@
                 {/foreach}
               {/if}
             </td>
-            <td class="qty">
+            <td class="px-4 py-2">
               {if !$product.customizations}
                 <div class="current">
                   {$product.quantity}
                 </div>
                 {if $product.quantity > $product.qty_returned}
-                  <div class="select" id="_desktop_return_qty_{$product.id_order_detail}">
-                    <select name="order_qte_input[{$product.id_order_detail}]" class="form-control form-control-select">
+                  <div class="select mt-2" id="_desktop_return_qty_{$product.id_order_detail}">
+                    <select name="order_qte_input[{$product.id_order_detail}]" class="form-control border-gray-300 rounded-md shadow-sm">
                       {section name=quantity start=1 loop=$product.quantity+1-$product.qty_returned}
                         <option value="{$smarty.section.quantity.index}">{$smarty.section.quantity.index}</option>
                       {/section}
@@ -118,10 +118,10 @@
                   <div class="current">
                     {$customization.quantity}
                   </div>
-                  <div class="select" id="_desktop_return_qty_{$product.id_order_detail}_{$customization.id_customization}">
+                  <div class="select mt-2" id="_desktop_return_qty_{$product.id_order_detail}_{$customization.id_customization}">
                     <select
                       name="customization_qty_input[{$customization.id_customization}]"
-                      class="form-control form-control-select"
+                      class="form-control border-gray-300 rounded-md shadow-sm"
                     >
                       {section name=quantity start=1 loop=$customization.quantity+1}
                         <option value="{$smarty.section.quantity.index}">{$smarty.section.quantity.index}</option>
@@ -132,32 +132,32 @@
                 <div class="clearfix"></div>
               {/if}
             </td>
-            <td class="text-xs-right">{$product.qty_returned}</td>
-            <td class="text-xs-right">{$product.price}</td>
-            <td class="text-xs-right">{$product.total}</td>
+            <td class="px-4 py-2 text-right">{$product.qty_returned}</td>
+            <td class="px-4 py-2 text-right">{'$'|cat:$product.price}</td>
+            <td class="px-4 py-2 text-right">{'$'|cat:$product.total}</td>
           </tr>
         {/foreach}
         <tfoot>
           {foreach $order.subtotals as $line}
             {if $line.value}
-              <tr class="text-xs-right line-{$line.type}">
-                <td colspan="5">{$line.label}</td>
-                <td colspan="2">{$line.value}</td>
+              <tr class="text-right border-t border-gray-200">
+                <td colspan="5" class="px-4 py-2">{'$line.label'}</td>
+                <td colspan="2" class="px-4 py-2">{'$line.value'}</td>
               </tr>
             {/if}
           {/foreach}
-          <tr class="text-xs-right line-{$order.totals.total.type}">
-            <td colspan="5">{$order.totals.total.label}</td>
-            <td colspan="2">{$order.totals.total.value}</td>
+          <tr class="text-right border-t border-gray-200">
+            <td colspan="5" class="px-4 py-2">{'$order.totals.total.label'}</td>
+            <td colspan="2" class="px-4 py-2">{'$order.totals.total.value'}</td>
           </tr>
         </tfoot>
       </table>
     </div>
 
-    <div class="order-items hidden-md-up box">
+    <div class="order-items sm:hidden box">
       {foreach from=$order.products item=product}
-        <div class="order-item">
-          <div class="row">
+        <div class="order-item py-4 border-b border-gray-200">
+          <div class="flex">
             <div class="checkbox">
               {if !$product.customizations}
                 <span id="_mobile_product_line_{$product.id_order_detail}"></span>
@@ -167,29 +167,27 @@
                 {/foreach}
               {/if}
             </div>
-            <div class="content">
-              <div class="row">
-                <div class="col-sm-5 desc">
-                  <div class="name">{$product.name}</div>
+            <div class="content w-full">
+              <div class="flex">
+                <div class="w-1/2">
+                  <div class="name font-semibold text-sm">{$product.name}</div>
                   {if $product.reference}
-                    <div class="ref">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div>
+                    <div class="ref text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div>
                   {/if}
                   {if $product.customizations}
                     {foreach $product.customizations as $customization}
-                      <div class="customization">
-                        <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
+                      <div class="customization mt-2">
+                        <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
                       </div>
                       <div id="_mobile_product_customization_modal_wrapper_{$customization.id_customization}">
                       </div>
                     {/foreach}
                   {/if}
                 </div>
-                <div class="col-sm-7 qty">
-                  <div class="row">
-                    <div class="col-xs-4 text-sm-left text-xs-left">
-                      {$product.price}
-                    </div>
-                    <div class="col-xs-4">
+                <div class="w-1/2">
+                  <div class="flex justify-between">
+                    <div class="text-sm">{'$'|cat:$product.price}</div>
+                    <div class="text-sm">
                       {if $product.customizations}
                         {foreach $product.customizations as $customization}
                           <div class="q">{l s='Quantity' d='Shop.Theme.Catalog'}: {$customization.quantity}</div>
@@ -202,12 +200,9 @@
                         {/if}
                       {/if}
                       {if $product.qty_returned > 0}
-                        <div>{l s='Returned' d='Shop.Theme.Customeraccount'}: {$product.qty_returned}</div>
+                        <div class="text-xs text-gray-600">{l s='Returned' d='Shop.Theme.Customeraccount'}: {$product.qty_returned}</div>
                       {/if}
                     </div>
-                    <div class="col-xs-4 text-xs-right">
-                      {$product.total}
-                    </div>
                   </div>
                 </div>
               </div>
@@ -216,38 +211,38 @@
         </div>
       {/foreach}
     </div>
-    <div class="order-totals hidden-md-up box">
+    <div class="order-totals sm:hidden box">
       {foreach $order.subtotals as $line}
         {if $line.value}
-          <div class="order-total row">
-            <div class="col-xs-8"><strong>{$line.label}</strong></div>
-            <div class="col-xs-4 text-xs-right">{$line.value}</div>
+          <div class="order-total flex justify-between py-2 px-4 border-b border-gray-200">
+            <div class="text-sm font-semibold">{$line.label}</div>
+            <div class="text-sm">{'$line.value'}</div>
           </div>
         {/if}
       {/foreach}
-      <div class="order-total row">
-        <div class="col-xs-8"><strong>{$order.totals.total.label}</strong></div>
-        <div class="col-xs-4 text-xs-right">{$order.totals.total.value}</div>
+      <div class="order-total flex justify-between py-2 px-4 border-t border-gray-200">
+        <div class="text-sm font-semibold">{$order.totals.total.label}</div>
+        <div class="text-sm">{'$order.totals.total.value'}</div>
       </div>
     </div>
 
-    <div class="box">
-      <header>
-        <h3>{l s='Merchandise return' d='Shop.Theme.Customeraccount'}</h3>
-        <p>{l s='If you wish to return one or more products, please mark the corresponding boxes and provide an explanation for the return. When complete, click the button below.' d='Shop.Theme.Customeraccount'}</p>
+    <div class="box mt-4">
+      <header class="mb-4">
+        <h3 class="text-lg font-semibold">{l s='Merchandise return' d='Shop.Theme.Customeraccount'}</h3>
+        <p class="text-sm text-gray-600">{l s='If you wish to return one or more products, please mark the corresponding boxes and provide an explanation for the return. When complete, click the button below.' d='Shop.Theme.Customeraccount'}</p>
       </header>
-      <section class="form-fields">
+      <section class="form-fields mb-4">
         <div class="form-group">
-          <textarea cols="67" rows="3" name="returnText" class="form-control"></textarea>
+          <textarea cols="67" rows="3" name="returnText" class="form-control border-gray-300 rounded-md shadow-sm w-full"></textarea>
         </div>
       </section>
-      <footer class="form-footer">
+      <footer class="form-footer mt-4">
         <input type="hidden" name="id_order" value="{$order.details.id}">
-        <button class="form-control-submit btn btn-primary" type="submit" name="submitReturnMerchandise">
+        <button class="form-control-submit btn bg-blue-500 text-white rounded-md py-2 px-6 hover:bg-blue-600" type="submit" name="submitReturnMerchandise">
           {l s='Request a return' d='Shop.Theme.Customeraccount'}
         </button>
       </footer>
     </div>
 
   </form>
-{/block}
+{/block}}
diff --git a/templates/customer/order-detail.tpl b/templates/customer/order-detail.tpl
index 44b9afc..fcc8a17 100644
--- a/templates/customer/order-detail.tpl
+++ b/templates/customer/order-detail.tpl
@@ -20,7 +20,6 @@
  * @author    PrestaShop SA <contact@prestashop.com>
  * @copyright 2007-2019 PrestaShop SA and Contributors
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
- * International Registered Trademark & Property of PrestaShop SA
  *}
 {extends file='customer/page.tpl'}
 
@@ -30,184 +29,164 @@
 
 {block name='page_content'}
   {block name='order_infos'}
-    <div id="order-infos">
-      <div class="box">
-          <div class="row">
-            <div class="col-xs-{if $order.details.reorder_url}9{else}12{/if}">
-              <strong>
-                {l
-                  s='Order Reference %reference% - placed on %date%'
-                  d='Shop.Theme.Customeraccount'
-                  sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]
-                }
-              </strong>
-            </div>
-            {if $order.details.reorder_url}
-              <div class="col-xs-3 text-xs-right">
-                <a href="{$order.details.reorder_url}" class="button-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
-              </div>
-            {/if}
-            <div class="clearfix"></div>
-          </div>
-      </div>
-
-      <div class="box">
-          <ul>
-            <li><strong>{l s='Carrier' d='Shop.Theme.Checkout'}</strong> {$order.carrier.name}</li>
-            <li><strong>{l s='Payment method' d='Shop.Theme.Checkout'}</strong> {$order.details.payment}</li>
-
-            {if $order.details.invoice_url}
-              <li>
-                <a href="{$order.details.invoice_url}">
-                  {l s='Download your invoice as a PDF file.' d='Shop.Theme.Customeraccount'}
-                </a>
-              </li>
-            {/if}
-
-            {if $order.details.recyclable}
-              <li>
-                {l s='You have given permission to receive your order in recycled packaging.' d='Shop.Theme.Customeraccount'}
-              </li>
-            {/if}
-
-            {if $order.details.gift_message}
-              <li>{l s='You have requested gift wrapping for this order.' d='Shop.Theme.Customeraccount'}</li>
-              <li>{l s='Message' d='Shop.Theme.Customeraccount'} {$order.details.gift_message nofilter}</li>
-            {/if}
-          </ul>
-      </div>
+    <div id="order-infos" class="space-y-6">
+    <div class="bg-white shadow rounded-lg p-6">
+           <div class="flex flex-wrap items-center">
+             <div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}">
+               <strong>
+                 {l s='Order Reference %reference% - placed on %date%' d='Shop.Theme.Customeraccount' sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]}
+               </strong>
+             </div>
+             {if $order.details.reorder_url}
+               <div class="w-full lg:w-3/12 text-right">
+                 <a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
+               </div>
+             {/if}
+           </div>
+       </div><div class="bg-white shadow rounded-lg p-6">
+           <div class="flex flex-wrap items-center">
+             <div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}">
+               <strong>
+                 {l s='Order Reference %reference% - placed on %date%' d='Shop.Theme.Customeraccount' sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]}
+               </strong>
+             </div>
+             {if $order.details.reorder_url}
+               <div class="w-full lg:w-3/12 text-right">
+                 <a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
+               </div>
+             {/if}
+           </div>
     </div>
+   <div class="bg-white shadow rounded-lg p-6">
+           <ul class="space-y-4">
+             <li><strong>{l s='Carrier' d='Shop.Theme.Checkout'}</strong> {$order.carrier.name}</li>
+             <li><strong>{l s='Payment method' d='Shop.Theme.Checkout'}</strong> {$order.details.payment}</li>
+ 
+             {if $order.details.invoice_url}
+               <li>
+                 <a href="{$order.details.invoice_url}" class="text-blue-500 hover:text-blue-700">
+                   {l s='Download your invoice as a PDF file.' d='Shop.Theme.Customeraccount'}
+                 </a>
+               </li>
+             {/if}
+ 
+             {if $order.details.recyclable}
+               <li>
+                 {l s='You have given permission to receive your order in recycled packaging.' d='Shop.Theme.Customeraccount'}
+               </li>
+             {/if}
+ 
+             {if $order.details.gift_message}
+               <li>{l s='You have requested gift wrapping for this order.' d='Shop.Theme.Customeraccount'}</li>
+               <li>{l s='Message' d='Shop.Theme.Customeraccount'} {$order.details.gift_message nofilter}</li>
+             {/if}
+           </ul>
+       </div>
+     </div>
   {/block}
 
   {block name='order_history'}
-    <section id="order-history" class="box">
-      <h3>{l s='Follow your order\'s status step-by-step' d='Shop.Theme.Customeraccount'}</h3>
-      <table class="table table-striped table-bordered table-labeled hidden-xs-down">
-        <thead class="thead-default">
-          <tr>
-            <th>{l s='Date' d='Shop.Theme.Global'}</th>
-            <th>{l s='Status' d='Shop.Theme.Global'}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {foreach from=$order.history item=state}
-            <tr>
-              <td>{$state.history_date}</td>
-              <td>
-                <span class="label label-pill {$state.contrast}" style="background-color:{$state.color}">
-                  {$state.ostate_name}
-                </span>
-              </td>
-            </tr>
-          {/foreach}
-        </tbody>
-      </table>
-      <div class="hidden-sm-up history-lines">
-        {foreach from=$order.history item=state}
-          <div class="history-line">
-            <div class="date">{$state.history_date}</div>
-            <div class="state">
-              <span class="label label-pill {$state.contrast}" style="background-color:{$state.color}">
-                {$state.ostate_name}
-              </span>
-            </div>
-          </div>
-        {/foreach}
-      </div>
-    </section>
-  {/block}
+     <section id="order-history" class="bg-white shadow rounded-lg p-6">
+       <h3 class="text-xl font-semibold">{l s='Follow your order\'s status step-by-step' d='Shop.Theme.Customeraccount'}</h3>
+       <table class="table-auto w-full hidden md:table">
+         <thead class="text-gray-700">
+           <tr>
+             <th class="px-4 py-2">{l s='Date' d='Shop.Theme.Global'}</th>
+             <th class="px-4 py-2">{l s='Status' d='Shop.Theme.Global'}</th>
+           </tr>
+         </thead>
+         <tbody>
+           {foreach from=$order.history item=state}
+             <tr>
+               <td class="px-4 py-2">{($state.history_date)}</td>
+               <td class="px-4 py-2">
+                 <span class="inline-block px-4 py-1 rounded-full text-white" style="background-color:{$state.color}">
+                   {$state.ostate_name}
+                 </span>
+               </td>
+             </tr>
+           {/foreach}
+         </tbody>
+       </table>
+       <div class="block md:hidden">
+         {foreach from=$order.history item=state}
+           <div class="mb-4">
+             <div class="text-sm font-semibold">{($state.history_date)}</div>
+             <div class="mt-2">
+               <span class="inline-block px-4 py-1 rounded-full text-white" style="background-color:{$state.color}">
+                 {$state.ostate_name}
+               </span>
+             </div>
+           </div>
+         {/foreach}
+       </div>
+     </section>
+   {/block}
+ 
+   {if $order.follow_up}
+     <div class="bg-white shadow rounded-lg p-6">
+       <p>{l s='Click the following link to track the delivery of your order' d='Shop.Theme.Customeraccount'}</p>
+       <a href="{$order.follow_up}" class="text-blue-500 hover:text-blue-700">{$order.follow_up}</a>
+     </div>
+   {/if}
 
-  {if $order.follow_up}
-    <div class="box">
-      <p>{l s='Click the following link to track the delivery of your order' d='Shop.Theme.Customeraccount'}</p>
-      <a href="{$order.follow_up}">{$order.follow_up}</a>
-    </div>
-  {/if}
+    {block name='addresses'}
+     <div class="flex flex-wrap">
+       {if $order.addresses.delivery}
+         <div class="w-full lg:w-6/12 p-4">
+           <article id="delivery-address" class="bg-white shadow rounded-lg p-6">
+             <h4 class="text-lg font-semibold">{l s='Delivery address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.delivery.alias]}</h4>
+	     <address class="text-sm text-gray-700">{$order.addresses.delivery.formatted nofilter}</address>
+           </article>
+         </div>
+       {/if}
+ 
+       <div class="w-full lg:w-6/12 p-4">
+         <article id="invoice-address" class="bg-white shadow rounded-lg p-6">
+           <h4 class="text-lg font-semibold">{l s='Invoice address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.invoice.alias]}</h4>
+           <address class="text-sm text-gray-700">{$order.addresses.invoice.formatted nofilter}</address>
+         </article>
+       </div>
+     </div>
+   {/block}
 
-  {block name='addresses'}
-    <div class="addresses">
-      {if $order.addresses.delivery}
-        <div class="col-lg-6 col-md-6 col-sm-6">
-          <article id="delivery-address" class="box">
-            <h4>{l s='Delivery address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.delivery.alias]}</h4>
-            <address>{$order.addresses.delivery.formatted nofilter}</address>
-          </article>
-        </div>
-      {/if}
-
-      <div class="col-lg-6 col-md-6 col-sm-6">
-        <article id="invoice-address" class="box">
-          <h4>{l s='Invoice address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.invoice.alias]}</h4>
-          <address>{$order.addresses.invoice.formatted nofilter}</address>
-        </article>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  {/block}
-
-  {$HOOK_DISPLAYORDERDETAIL nofilter}
-
-  {block name='order_detail'}
-    {if $order.details.is_returnable}
-      {include file='customer/_partials/order-detail-return.tpl'}
-    {else}
-      {include file='customer/_partials/order-detail-no-return.tpl'}
-    {/if}
-  {/block}
-
-  {block name='order_carriers'}
-    {if $order.shipping}
-      <div class="box">
-        <table class="table table-striped table-bordered hidden-sm-down">
-          <thead class="thead-default">
-            <tr>
-              <th>{l s='Date' d='Shop.Theme.Global'}</th>
-              <th>{l s='Carrier' d='Shop.Theme.Checkout'}</th>
-              <th>{l s='Weight' d='Shop.Theme.Checkout'}</th>
-              <th>{l s='Shipping cost' d='Shop.Theme.Checkout'}</th>
-              <th>{l s='Tracking number' d='Shop.Theme.Checkout'}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {foreach from=$order.shipping item=line}
-              <tr>
-                <td>{$line.shipping_date}</td>
-                <td>{$line.carrier_name}</td>
-                <td>{$line.shipping_weight}</td>
-                <td>{$line.shipping_cost}</td>
-                <td>{$line.tracking nofilter}</td>
-              </tr>
-            {/foreach}
-          </tbody>
-        </table>
-        <div class="hidden-md-up shipping-lines">
-          {foreach from=$order.shipping item=line}
-            <div class="shipping-line">
-              <ul>
-                <li>
-                  <strong>{l s='Date' d='Shop.Theme.Global'}</strong> {$line.shipping_date}
-                </li>
-                <li>
-                  <strong>{l s='Carrier' d='Shop.Theme.Checkout'}</strong> {$line.carrier_name}
-                </li>
-                <li>
-                  <strong>{l s='Weight' d='Shop.Theme.Checkout'}</strong> {$line.shipping_weight}
-                </li>
-                <li>
-                  <strong>{l s='Shipping cost' d='Shop.Theme.Checkout'}</strong> {$line.shipping_cost}
-                </li>
-                <li>
-                  <strong>{l s='Tracking number' d='Shop.Theme.Checkout'}</strong> {$line.tracking nofilter}
-                </li>
-              </ul>
-            </div>
-          {/foreach}
-        </div>
-      </div>
-    {/if}
-  {/block}
-
-  {block name='order_messages'}
-    {include file='customer/_partials/order-messages.tpl'}
-  {/block}
-{/block}
+   {$HOOK_DISPLAYORDERDETAIL nofilter}
+ 
+   {block name='order_detail'}
+     {if $order.details.is_returnable}
+       {include file='customer/_partials/order-detail-return.tpl'}
+     {else}
+       {include file='customer/_partials/order-detail-no-return.tpl'}
+     {/if}
+   {/block}
+ 
+   {block name='order_carriers'}
+     {if $order.shipping}
+       <div class="bg-white shadow rounded-lg p-6">
+         <table class="table-auto w-full hidden md:table">
+           <thead class="text-gray-700">
+             <tr>
+               <th class="px-4 py-2">{l s='Date' d='Shop.Theme.Global'}</th>
+               <th class="px-4 py-2">{l s='Carrier' d='Shop.Theme.Checkout'}</th>
+               <th class="px-4 py-2">{l s='Weight' d='Shop.Theme.Checkout'}</th>
+               <th class="px-4 py-2">{l s='Shipping cost' d='Shop.Theme.Checkout'}</th>
+               <th class="px-4 py-2">{l s='Tracking number' d='Shop.Theme.Checkout'}</th>
+             </tr>
+           </thead>
+	   <tbody>
+             {foreach from=$order.shipping item=line}
+               <tr>
+                 <td class="px-4 py-2">{$line.shipping_date}</td>
+                 <td class="px-4 py-2">{$line.carrier_name}</td>
+                 <td class="px-4 py-2">{$line.shipping_weight}</td>
+                 <td class="px-4 py-2">{$line.shipping_cost}</td>
+ 		 <td class="px-4 py-2">{$line.tracking nofilter}</td> 
+	       </tr>
+             {/foreach}
+           </tbody>
+         </table>
+       </div>
+     {/if}
+   {/block}
+ 
+ {/block}