From d5606b7734b24bb0aa94819dfba8a4fdfa9bdbee Mon Sep 17 00:00:00 2001
From: jatiny <jatiny@consultbop.com>
Date: Wed, 20 Nov 2024 06:36:08 +0000
Subject: [PATCH] chore: work on the guest tracking page ui

---
 .../_partials/order-detail-no-return.tpl      | 10 +++----
 .../_partials/order-detail-return.tpl         | 15 +++++------
 templates/customer/guest-tracking.tpl         | 14 +++++-----
 templates/customer/order-detail.tpl           | 26 +++++++++----------
 4 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/templates/customer/_partials/order-detail-no-return.tpl b/templates/customer/_partials/order-detail-no-return.tpl
index 040e309..92f3783 100644
--- a/templates/customer/_partials/order-detail-no-return.tpl
+++ b/templates/customer/_partials/order-detail-no-return.tpl
@@ -146,7 +146,7 @@
                   {$product.quantity}
                 {/if}
               </div>
-              <div class="text-sm">{'$'|cat:$product.total}</div>
+              <div class="text-sm">{$|cat:$product.total}</div>
             </div>
           </div>
         </div>
@@ -158,14 +158,14 @@
     {foreach $order.subtotals as $line}
       {if $line.value}
         <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 class="text-sm font-semibold">{$line.label}</div>
+          <div class="text-sm">{$line.value}</div>
         </div>
       {/if}
     {/foreach}
     <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 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 8aeefc5..c42db64 100644
--- a/templates/customer/_partials/order-detail-return.tpl
+++ b/templates/customer/_partials/order-detail-return.tpl
@@ -141,14 +141,14 @@
           {foreach $order.subtotals as $line}
             {if $line.value}
               <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>
+                <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-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>
+            <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>
@@ -216,13 +216,12 @@
         {if $line.value}
           <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 class="text-sm">{$line.value}</div>
           </div>
         {/if}
-      {/foreach}
-      <div class="order-total flex justify-between py-2 px-4 border-t border-gray-200">
+      {/foreach} <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 class="text-sm">{$order.totals.total.value}</div>
       </div>
     </div>
 
diff --git a/templates/customer/guest-tracking.tpl b/templates/customer/guest-tracking.tpl
index 52a149b..fdb7b9f 100644
--- a/templates/customer/guest-tracking.tpl
+++ b/templates/customer/guest-tracking.tpl
@@ -37,10 +37,10 @@
 
 {block name='page_content' append}
   {block name='guest_to_customer'}
-    <form action="{$urls.pages.guest_tracking}" method="post">
+    <form action="{$urls.pages.guest_tracking}" method="post" class="table-auto p-4 mt-6 border-separate border border-gray-200 w-full" >
       <header>
-        <h1 class="h3">{l s='Transform your guest account into a customer account and enjoy:' d='Shop.Theme.Customeraccount'}</h1>
-        <ul>
+        <h1 class="h3 font-semibold ">{l s='Transform your guest account into a customer account and enjoy:' d='Shop.Theme.Customeraccount'}</h1>
+        <ul class="text-base leading-8"  >
           <li> -{l s='Personalized and secure access' d='Shop.Theme.Customeraccount'}</li>
           <li> -{l s='Fast and easy checkout' d='Shop.Theme.Customeraccount'}</li>
           <li> -{l s='Easier merchandise return' d='Shop.Theme.Customeraccount'}</li>
@@ -49,9 +49,9 @@
 
       <section class="form-fields">
 
-        <label>
-          <span>{l s='Set your password:' d='Shop.Forms.Labels'}</span>
-          <input type="password" data-validate="isPasswd" name="password" value="">
+        <label class="flex flex-col sm:flex-row sm:gap-2">
+          <span class="font-semibold my-auto" >{l s='Set your password:' d='Shop.Forms.Labels'}</span>
+          <input type="password" data-validate="isPasswd" name="password" class="md:ml-5 mb-2 " value="">
         </label>
 
       </section>
@@ -62,7 +62,7 @@
         <input type="hidden" name="order_reference" value="{$order.details.reference}">
         <input type="hidden" name="email" value="{$guest_email}">
 
-        <button class="btn btn-primary" type="submit">{l s='Send' d='Shop.Theme.Actions'}</button>
+        <button class="px-6 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" type="submit">{l s='Send' d='Shop.Theme.Actions'}</button>
       </footer>
 
     </form>
diff --git a/templates/customer/order-detail.tpl b/templates/customer/order-detail.tpl
index fcc8a17..477aa3d 100644
--- a/templates/customer/order-detail.tpl
+++ b/templates/customer/order-detail.tpl
@@ -30,7 +30,7 @@
 {block name='page_content'}
   {block name='order_infos'}
     <div id="order-infos" class="space-y-6">
-    <div class="bg-white shadow rounded-lg p-6">
+    <div class="border rounded 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>
@@ -43,7 +43,7 @@
                </div>
              {/if}
            </div>
-       </div><div class="bg-white shadow rounded-lg p-6">
+       </div><div class="border rounded 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>
@@ -57,7 +57,7 @@
              {/if}
            </div>
     </div>
-   <div class="bg-white shadow rounded-lg p-6">
+   <div class="border rounded mt-6 mb-4  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>
@@ -86,7 +86,7 @@
   {/block}
 
   {block name='order_history'}
-     <section id="order-history" class="bg-white shadow rounded-lg p-6">
+     <section id="order-history" class="border mt-6 rounded 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">
@@ -98,8 +98,8 @@
          <tbody>
            {foreach from=$order.history item=state}
              <tr>
-               <td class="px-4 py-2">{($state.history_date)}</td>
-               <td class="px-4 py-2">
+               <td class="text-center">{($state.history_date)}</td>
+               <td class="text-center">
                  <span class="inline-block px-4 py-1 rounded-full text-white" style="background-color:{$state.color}">
                    {$state.ostate_name}
                  </span>
@@ -131,18 +131,18 @@
    {/if}
 
     {block name='addresses'}
-     <div class="flex flex-wrap">
+     <div class="flex flex-wrap justify-between mt-6 mb-6">
        {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">
+         <div class="w-full lg:w-[49%] mb-6 ">
+           <article id="delivery-address" class="border rounded 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">
+       <div class="w-full lg:w-[49%] ">
+         <article id="invoice-address" class="border rounded 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>
@@ -162,7 +162,7 @@
  
    {block name='order_carriers'}
      {if $order.shipping}
-       <div class="bg-white shadow rounded-lg p-6">
+       <div class="md:border md:mt-6 hidden md:p-6">
          <table class="table-auto w-full hidden md:table">
            <thead class="text-gray-700">
              <tr>
@@ -173,7 +173,7 @@
                <th class="px-4 py-2">{l s='Tracking number' d='Shop.Theme.Checkout'}</th>
              </tr>
            </thead>
-	   <tbody>
+	   <tbody class="text-center" >
              {foreach from=$order.shipping item=line}
                <tr>
                  <td class="px-4 py-2">{$line.shipping_date}</td>