refactor: make checkout steps editable

assets/css/theme.css

@@ -949,6 +949,10 @@ select {
   margin-top: 2rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .block {
   display: block;
 }
@@ -1223,6 +1227,10 @@ select {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.justify-self-end {
+  justify-self: end;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1348,6 +1356,11 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .stroke-gray-500 {
   stroke: #6b7280;
 }
@@ -1360,6 +1373,18 @@ select {
   stroke: inherit;
 }
 
+.stroke-gray-700 {
+  stroke: #374151;
+}
+
+.stroke-gray-400 {
+  stroke: #9ca3af;
+}
+
+.stroke-black {
+  stroke: #000;
+}
+
 .stroke-\[3px\] {
   stroke-width: 3px;
 }
@@ -1390,6 +1415,14 @@ select {
   padding: 2rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1607,6 +1640,16 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .line-through {
   text-decoration-line: line-through;
 }
@@ -1762,16 +1805,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.disabled\:text-gray-500:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.disabled\:text-gray-400:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:flex {
   display: flex;
 }
@@ -1781,6 +1814,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
+.group.-current .group-\[\.-current\]\:block {
+  display: block;
+}
+
+.group.-complete .group-\[\.-complete\]\:block {
+  display: block;
+}
+
+.group.-complete .group-\[\.-complete\]\:hidden {
+  display: none;
+}
+
+.group.-current .group-\[\.-current\]\:hidden {
+  display: none;
+}
+
 @media not all and (min-width: 1024px) {
   .max-lg\:flex-col {
     flex-direction: column;
@@ -2057,3 +2106,27 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     line-height: 1;
   }
 }
+
+.\[\&\>\.content\\\]\:block>.content\undefined {
+  display: block;
+}
+
+.\[\&\>\.content\\\]\:hidden>.content\undefined {
+  display: none;
+}
+
+.\[\&\>\.content\]\:block>.content {
+  display: block;
+}
+
+.\[\&\>\.content\]\:hidden>.content {
+  display: none;
+}
+
+.\[\&\>div\\\]\:block>div\undefined {
+  display: block;
+}
+
+.\[\&\>p\\\]\:block>p\undefined {
+  display: block;
+}

templates/checkout/_partials/steps/addresses.tpl

@@ -25,7 +25,6 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
-  {if !$step_is_complete}
     <div class="js-address-form p-4 flex flex-col gap-4">
       <form
         method="POST"
@@ -141,5 +140,4 @@
 
       </form>
     </div>
-  {/if}
 {/block}

templates/checkout/_partials/steps/checkout-step.tpl

@@ -30,15 +30,19 @@
                         '-reachable'      => $step_is_reachable,
                         '-complete'       => $step_is_complete,
                         'js-current-step' => $step_is_current
-                    ]|classnames}"
+                    ]|classnames} group"
   >
-    <div class="step-title font-semibold p-2 border border-gray-800 flex gap-2 items-center ">
+    <div class="step-title font-semibold p-2.5 border border-gray-800 w-full flex gap-2 items-center">
-      <i class="ti ti-square"></i>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black hidden group-[.-complete]:block icon-tabler-square-check" width="20" height="20" 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 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M9 12l2 2l4 -4" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black group-[.-complete]:hidden icon-tabler-square" width="20" height="20" 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 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg>
       <span class="step-number">{$position}</span>
       {$title}
+      <span class=" ml-auto text-sm text-gray-400 cursor-pointer group-[.-current]:hidden">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="18" height="18" 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="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
+      </span>
     </div>
 
-    <div class="content">
+    <div class="content hidden group-[.-current]:block">
       {block name='step_content'}DUMMY STEP CONTENT{/block}
     </div>
   </section>

templates/checkout/_partials/steps/payment.tpl

@@ -1,7 +1,6 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
-  {if !$step_is_complete}
   <div class="w-full flex flex-col gap-4 p-4">
 
       {hook h='displayPaymentTop'}
@@ -161,6 +160,5 @@
           </div>
         </div>
       </div>
-    {/if}
   </div>
 {/block}

templates/checkout/_partials/steps/personal-information.tpl

@@ -1,9 +1,8 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
-  {if !$step_is_complete}
     {if $customer.is_logged && !$customer.is_guest}
-      <div class="flex flex-col">
+      <div class="flex flex-col p-4">
         <span class="identity">
           {l s='Connected as [1]%firstname% %lastname%[/1].'
             d='Shop.Theme.Customeraccount'
@@ -27,7 +26,7 @@
         </span>
       </div>
     {else}
-      <div class="flex w-full flex-col tabs">
+      <div class="flex w-full flex-col tabs p-4">
         <ul class="tabs-list flex w-full">
           <li class="flex flex-1 p-4 items-center justify-center">
             <a
@@ -67,7 +66,6 @@
         </div>
       </div>
     {/if}
-  {/if}
 {/block}
 
 {**

templates/checkout/_partials/steps/shipping.tpl

@@ -25,7 +25,6 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
-  {if !$step_is_complete}
     <div id="hook-display-before-carrier">
       {$hookDisplayBeforeCarrier nofilter}
     </div>
@@ -74,19 +73,10 @@
                         </div>
                       </label>
                     </div>
-                    <div class="row carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}>
-                      {$carrier.extraContent nofilter}
-                    </div>
-                    <div class="clearfix"></div>
                 {/foreach}
               </div>
             {/block}
             <div class="flex w-full">
-              <div id="delivery" class="flex w-full flex-col gap-2">
-                <label for="delivery_message" class="text-sm">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label>
-                <textarea rows="2" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
-              </div>
-
               {if $recyclablePackAllowed}
                 <span class="custom-checkbox">
                   <input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
@@ -124,5 +114,4 @@
     </div>
 
     <div id="extra_carrier"></div>
-  {/if}
 {/block}

templates/checkout/_partials/steps/unreachable.tpl

@@ -25,7 +25,7 @@
 {block name='step'}
   <section class="checkout-step -unreachable" id="{$identifier}">
     <div class="step-title font-semibold p-2 border border-gray-800 flex gap-2 items-center ">
-      <i class="ti ti-lock-square"></i>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black icon-tabler-lock-square" width="20" height="20" 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="M8 11m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" /><path d="M10 11v-2a2 2 0 1 1 4 0v2" /><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /></svg>
       <span class="step-number">{$position}</span>
       {$title}
     </div>