From 662890734aaec65977ab6c05fbbc2dac638692ba Mon Sep 17 00:00:00 2001
From: Jevy Larano <32891190+jrlarano@users.noreply.github.com>
Date: Mon, 9 Sep 2024 19:14:01 +0800
Subject: [PATCH] Jl/fix new modal (#247)

* fix svg icons position

* hide quantity if shoppinglist is disabled
---
 .../core-ui/components/common/offer-overview.styl  |  2 ++
 .../core-ui/components/common/offer-overview.ts    | 14 +++++++++++---
 .../core-ui/components/common/shopping-list.styl   |  7 +++++--
 lib/kits/core-ui/components/common/sidebar.styl    |  2 ++
 .../core-ui/components/helpers/transformers.ts     |  2 ++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/lib/kits/core-ui/components/common/offer-overview.styl b/lib/kits/core-ui/components/common/offer-overview.styl
index 9f9dae7c..19d916b1 100644
--- a/lib/kits/core-ui/components/common/offer-overview.styl
+++ b/lib/kits/core-ui/components/common/offer-overview.styl
@@ -273,6 +273,7 @@
             height 36px
 
             svg
+                display inline
                 vertical-align middle
                 width 16px
                 height 16px
@@ -391,6 +392,7 @@
                                 border 0.5px solid #7b7b7b
 
                                 svg
+                                    display inline
                                     width 10px
                                     height 10px
 
diff --git a/lib/kits/core-ui/components/common/offer-overview.ts b/lib/kits/core-ui/components/common/offer-overview.ts
index 80801be5..2e907432 100644
--- a/lib/kits/core-ui/components/common/offer-overview.ts
+++ b/lib/kits/core-ui/components/common/offer-overview.ts
@@ -77,6 +77,7 @@ const defaultTemplate = `\
                                     <div class="sgn-product-description"><span>{{description}}</span></div>
                                 </div>
                                 <div class="sgn-product-price-container">
+                                    {{#showQuantityButtons}}
                                     <div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
                                         <div class="sgn-offer-product-quantity-content">
                                             <button id="sgn-offer-product-quantity-minus-{{id}}" class="sgn-offer-product-quantity-minus">
@@ -88,6 +89,7 @@ const defaultTemplate = `\
                                             </button>
                                         </div>
                                     </div>
+                                    {{/showQuantityButtons}}
                                     <div class="sgn-product-price"><span>{{formattedPrice}}</span></div>
                                 </div>
                             </div>
@@ -149,13 +151,19 @@ const OfferOverview = ({
                 ? await fetchOffer(offer.id)
                 : await transformIncitoOffer(offer);
 
+        const disableShoppingList = document.querySelector(
+            '.sgn__offer-shopping'
+        )
+            ? false
+            : true;
+
         container.innerHTML = Mustache.render(template, {
             translations,
             label: sgnData?.details?.label,
-            disableShoppingList: document.querySelector('.sgn__offer-shopping')
-                ? false
-                : true,
+            disableShoppingList,
             offer: transformedOffer,
+            showQuantityButtons:
+                !disableShoppingList || scriptEls.showQuantityButtons,
             layoutWidth: sgnData?.incito?.root_view?.layout_width
         });
 
diff --git a/lib/kits/core-ui/components/common/shopping-list.styl b/lib/kits/core-ui/components/common/shopping-list.styl
index dd557c20..9b2b9ec4 100644
--- a/lib/kits/core-ui/components/common/shopping-list.styl
+++ b/lib/kits/core-ui/components/common/shopping-list.styl
@@ -39,6 +39,7 @@
         padding 0
 
         > svg
+            display inline
             width 25px
 
 .sgn-shopping-list-items-container
@@ -112,6 +113,7 @@
             height 36px
 
             svg
+                display inline
                 vertical-align middle
                 width 16px
                 height 16px
@@ -121,7 +123,7 @@
             border unset
             background unset
             width 30px
-            padding 8px 0
+            padding 0
             text-align center
 
     .sgn-shopping-list-content-ticker-box
@@ -179,6 +181,7 @@
                 border 0.5px solid #7b7b7b
 
                 svg
+                    display inline
                     width 10px
                     height 10px
 
@@ -187,7 +190,7 @@
                 border unset
                 background unset
                 width 30px
-                padding 8px 0
+                padding 0
                 text-align center
 
 @media print
diff --git a/lib/kits/core-ui/components/common/sidebar.styl b/lib/kits/core-ui/components/common/sidebar.styl
index 5460713c..0a5311b0 100644
--- a/lib/kits/core-ui/components/common/sidebar.styl
+++ b/lib/kits/core-ui/components/common/sidebar.styl
@@ -161,6 +161,7 @@
                 width 50px
 
                 > svg
+                    display inline
                     width 25px
                     height 25px
                 
@@ -337,6 +338,7 @@
             color #ffffff
 
             > svg
+                display inline
                 width 25px
                 height 25px
 
diff --git a/lib/kits/core-ui/components/helpers/transformers.ts b/lib/kits/core-ui/components/helpers/transformers.ts
index b10767f7..bb3d8880 100644
--- a/lib/kits/core-ui/components/helpers/transformers.ts
+++ b/lib/kits/core-ui/components/helpers/transformers.ts
@@ -41,6 +41,8 @@ export const transformScriptData = (
             dataset.componentPublicationSidebarPosition === 'left'
                 ? 'left'
                 : 'right',
+        showQuantityButtons:
+            dataset.componentPublicationShowQuantityButtons === 'true',
         enableLazyload: dataset.componentPublicationEnableLazyload === 'true',
         requestFilter: dataset.componentListPublicationsRequestFilter,
         clientFilter: dataset.componentListPublicationsClientFilter,