From eb7f48ff0c60de5b9e164a87e4439903b2562c06 Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Thu, 14 Dec 2023 16:15:24 +0530
Subject: [PATCH] refactor: add product custmizations modal on cart page

---
 assets/css/theme.css                          | 174 +++++++++++-------
 templates/_partials/stylesheets.tpl           |   1 +
 .../_partials/cart-detailed-product-line.tpl  |  29 ++-
 3 files changed, 136 insertions(+), 68 deletions(-)

diff --git a/assets/css/theme.css b/assets/css/theme.css
index 9b0f967..a0aba31 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -909,6 +909,10 @@ select {
   margin-left: 1.5rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-4 {
   margin-right: 1rem;
 }
@@ -949,10 +953,6 @@ select {
   margin-top: 2rem;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
 .block {
   display: block;
 }
@@ -1227,10 +1227,6 @@ 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;
 }
@@ -1356,9 +1352,8 @@ 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-black {
+  stroke: #000;
 }
 
 .stroke-gray-500 {
@@ -1373,26 +1368,10 @@ select {
   stroke: inherit;
 }
 
-.stroke-gray-700 {
-  stroke: #374151;
-}
-
-.stroke-gray-400 {
-  stroke: #9ca3af;
-}
-
-.stroke-black {
-  stroke: #000;
-}
-
 .stroke-\[3px\] {
   stroke-width: 3px;
 }
 
-.stroke-2 {
-  stroke-width: 2;
-}
-
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1407,6 +1386,10 @@ select {
   padding: 0.5rem;
 }
 
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1415,12 +1398,8 @@ select {
   padding: 2rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
-.p-2\.5 {
-  padding: 0.625rem;
+.p-1 {
+  padding: 0.25rem;
 }
 
 .px-2 {
@@ -1512,6 +1491,14 @@ select {
   padding-top: 1.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1590,6 +1577,11 @@ select {
   line-height: 1;
 }
 
+.text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
 .text-blue-950 {
   --tw-text-opacity: 1;
   color: rgb(23 37 84 / var(--tw-text-opacity));
@@ -1640,14 +1632,8 @@ 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));
+.underline {
+  text-decoration-line: underline;
 }
 
 .line-through {
@@ -1728,6 +1714,84 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.even\:bg-gray-100:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.even\:bg-gray-200\/70:nth-child(even) {
+  background-color: rgb(229 231 235 / 0.7);
+}
+
+.even\:bg-blue-200\/70:nth-child(even) {
+  background-color: rgb(191 219 254 / 0.7);
+}
+
+.even\:bg-blue-100:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.even\:bg-blue-100\/20:nth-child(even) {
+  background-color: rgb(219 234 254 / 0.2);
+}
+
+.even\:bg-blue-100\/50:nth-child(even) {
+  background-color: rgb(219 234 254 / 0.5);
+}
+
+.even\:bg-blue-950\/20:nth-child(even) {
+  background-color: rgb(23 37 84 / 0.2);
+}
+
+.even\:bg-gray-200\/50:nth-child(even) {
+  background-color: rgb(229 231 235 / 0.5);
+}
+
+.even\:bg-gray-200\/80:nth-child(even) {
+  background-color: rgb(229 231 235 / 0.8);
+}
+
+.even\:bg-gray-200\/60:nth-child(even) {
+  background-color: rgb(229 231 235 / 0.6);
+}
+
+.even\:bg-blue-900\/60:nth-child(even) {
+  background-color: rgb(30 58 138 / 0.6);
+}
+
+.even\:bg-blue-900\/10:nth-child(even) {
+  background-color: rgb(30 58 138 / 0.1);
+}
+
+.even\:bg-blue-800\/10:nth-child(even) {
+  background-color: rgb(30 64 175 / 0.1);
+}
+
+.even\:bg-blue-600\/10:nth-child(even) {
+  background-color: rgb(37 99 235 / 0.1);
+}
+
+.even\:bg-blue-500\/10:nth-child(even) {
+  background-color: rgb(59 130 246 / 0.1);
+}
+
+.even\:bg-blue-400\/10:nth-child(even) {
+  background-color: rgb(96 165 250 / 0.1);
+}
+
+.even\:bg-blue-600\/5:nth-child(even) {
+  background-color: rgb(37 99 235 / 0.05);
+}
+
+.even\:bg-blue-700\/5:nth-child(even) {
+  background-color: rgb(29 78 216 / 0.05);
+}
+
+.even\:bg-blue-700\/10:nth-child(even) {
+  background-color: rgb(29 78 216 / 0.1);
+}
+
 .hover\:border-blue-900:hover {
   --tw-border-opacity: 1;
   border-color: rgb(30 58 138 / var(--tw-border-opacity));
@@ -1814,11 +1878,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
-.group.-current .group-\[\.-current\]\:block {
+.group.-complete .group-\[\.-complete\]\:block {
   display: block;
 }
 
-.group.-complete .group-\[\.-complete\]\:block {
+.group.-current .group-\[\.-current\]\:block {
   display: block;
 }
 
@@ -2106,27 +2170,3 @@ 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;
-}
diff --git a/templates/_partials/stylesheets.tpl b/templates/_partials/stylesheets.tpl
index f3186e3..3d6a7d0 100644
--- a/templates/_partials/stylesheets.tpl
+++ b/templates/_partials/stylesheets.tpl
@@ -27,6 +27,7 @@
 <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.36.0/tabler-icons.min.css">
 <link rel="stylesheet" href="/themes/elegance/assets/js/style.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />
 {foreach $stylesheets.external as $stylesheet}
   <link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
 {/foreach}
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 2e7861d..721c809 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -28,8 +28,35 @@
     <img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
   </div>
   <div class="flex flex-1 flex-col gap-2">
-    <div class="product-line-info">
+    <div class="product-line-info flex flex-col">
       <a class="label text-lg font-semibold" href="{$product.url}" data-id_customization="{$product.id_customization|intval}">{$product.name}</a>
+    {if is_array($product.customizations) && $product.customizations|count}
+      {block name='cart_detailed_product_line_customization'}
+        {foreach from=$product.customizations item="customization"}
+          <a href="#product-customizations-modal-{$customization.id_customization}" class="text-blue-900 font-medium" rel="modal:open" >{l s='Show customizations' d='Shop.Theme.Catalog'}</a>
+          <div class="modal bg-white p-4" id="product-customizations-modal-{$customization.id_customization}" >
+            <div class="w-full flex items-center justify-between mb-4">
+              <h4 class="modal-title text-xl font-bold">{l s='Customizations' d='Shop.Theme.Catalog'}</h4>
+            </div>
+            <div class="modal-body flex flex-col gap-2">
+              {foreach from=$customization.fields item="field"}
+                <div class="product-customization-line row">
+                  <div class="col-sm-12 col-xs-8 value">
+                    {if $field.type == 'text'}
+                      {if (int)$field.id_module}
+                        {$field.text nofilter}
+                      {else}
+                        {$field.text}
+                      {/if}
+                    {/if}
+                  </div>
+                </div>
+              {/foreach}
+            </div>
+          </div>
+        {/foreach}
+      {/block}
+    {/if}
     </div>
     <div class="flex gap-4 product-line-info product-price h5 {if $product.has_discount}has-discount{/if}">
       {if $product.has_discount}