From a5195afe05a5d1bba7a7feb08bca81e21f7703ea Mon Sep 17 00:00:00 2001
From: Jevy Larano <32891190+jrlarano@users.noreply.github.com>
Date: Sat, 18 May 2024 15:46:34 +0800
Subject: [PATCH] Add description and price placeholder

---
 .../components/common/offer-overview.styl     | 36 ++++++++++++++++++-
 .../components/common/offer-overview.ts       | 18 +++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/lib/kits/core-ui/components/common/offer-overview.styl b/lib/kits/core-ui/components/common/offer-overview.styl
index 68d46dd8..619d84aa 100644
--- a/lib/kits/core-ui/components/common/offer-overview.styl
+++ b/lib/kits/core-ui/components/common/offer-overview.styl
@@ -117,6 +117,22 @@
     padding 0
     display flex
 
+    .sgn-modal-close
+        position absolute
+        display inline-block
+        padding 0
+        min-width 0
+        width 34px
+        height 34px
+        background transparent
+        right 0.5rem
+        top 0.5rem
+        border-radius 100%
+
+        >svg
+            width 100%
+            height 100%
+
     .sgn-popup-header
         padding: 0.8rem 0 0.3rem 0
 
@@ -219,6 +235,25 @@
         flex 1 1 auto
         overflow hidden
 
+        .sgn-product-title
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+            max-width 476px
+            font-weight 500
+            font-size 1.1rem
+
+        .sgn-product-description
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+            max-width 476px
+            font-size 0.8rem
+
+        .sgn-product-price
+            font-weight 500
+            font-size 1.2rem
+
     .sgn-offer-product-quantity-content
         display flex
         border 1px solid rgba(0, 0, 0, 0.12)
@@ -257,7 +292,6 @@
             min-width 0
             background transparent
 
-
 .sgn__theme-dark
     .sgn-offer-overview-popup
         background #1c1c1e
diff --git a/lib/kits/core-ui/components/common/offer-overview.ts b/lib/kits/core-ui/components/common/offer-overview.ts
index 1b1270d1..986386d2 100644
--- a/lib/kits/core-ui/components/common/offer-overview.ts
+++ b/lib/kits/core-ui/components/common/offer-overview.ts
@@ -76,6 +76,9 @@ const defaultTemplateV2 = `\
                     <img src="{{images.zoom}}" alt="{{heading}}">
                 </div>
                 <div class="sgn-offer-details-container">
+                    <button class="sgn-modal-close">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>
+                    </button>
                     <div class="sgn-popup-header">
                         <div class="sgn-menu-popup-labels">
                             <div class="sgn-menu-label">
@@ -101,7 +104,11 @@ const defaultTemplateV2 = `\
                             {{#products}}
                             <div id="sgn-offer-product-{{id}}" data-offer-product-id="{{id}}" data-offer-product-quantity="{{quantity}}" class="sgn-product-details">
                                 <div class="sgn-product-image"><img src="{{#image}}{{image}}{{/image}}{{^image}}{{images.zoom}}{{/image}}" alt="{{heading}}"></div>
-                                <div class="sgn-product-heading">{{title}}</div>
+                                <div class="sgn-product-heading">
+                                    <div class="sgn-product-title"><span>{{title}}</span></div>
+                                    <div class="sgn-product-description"><span>{{description}}</span></div>
+                                    <div class="sgn-product-price"><span>{{price}}</span></div>
+                                </div>
                                 <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">
@@ -380,12 +387,21 @@ const OfferOverview = ({
         });
     };
 
+    const closeModalListener = () => {
+        container
+            ?.querySelector('.sgn-modal-close')
+            ?.addEventListener('click', () => {
+                destroyModal();
+            });
+    };
+
     const addEventListeners = () => {
         document.querySelector<HTMLDivElement>('.sgn-modal-container')?.focus();
 
         addOpenWebshopListener();
         addShoppingListListener();
         addProductListener();
+        closeModalListener();
     };
 
     return {render};