From d251cf185bdff1891e41ac1daf414fe0656a1f2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= <eepi1994@hotmail.com>
Date: Mon, 16 Sep 2024 12:22:32 +0300
Subject: [PATCH] TMS-1067: Show price-info for event in listing if it's free

---
 CHANGELOG.MD                     |  2 ++
 partials/ui/event-highlight.dust | 52 ++++++++++++++++++++------------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index ad944d3..bbe29e0 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1067: Show price-info for event in listing if it's free
+
 ## [1.15.0] - 2024-08-21
 
 - TMS-1058: Remove text-decoration & decrease font-size for single-post h1-heading
diff --git a/partials/ui/event-highlight.dust b/partials/ui/event-highlight.dust
index 809bbeb..62c527e 100644
--- a/partials/ui/event-highlight.dust
+++ b/partials/ui/event-highlight.dust
@@ -1,9 +1,9 @@
  <div class="column is-6 is-4-desktop mb-4 mb-0-desktop">
-    <div class="events__item has-height-100 {classes.event_item_bg}">
+    <div class="events__item has-height-100 {classes.event_item_bg|attr}">
         {?image}
             <div class="image is-16by9" aria-hidden="true">
-                <a href="{url}" aria-hidden="true" tabindex="-1">
-                    <img src="{image}" loading="lazy" alt="" class="objectfit-image">
+                <a href="{url|url}" aria-hidden="true" tabindex="-1">
+                    <img src="{image|url}" loading="lazy" alt="" class="objectfit-image">
                 </a>
                 {>"ui/event-item-pill" /}
             </div>
@@ -11,48 +11,60 @@
 
         <div class="events__item-inner pt-5 pr-6 pb-6 pl-6">
             <h3 class="h5 mt-0 mb-5">
-                <a href="{url}" class="has-text-black">
-                    {name|s}
+                <a href="{url|url}" class="has-text-black">
+                    {name|html}
                 </a>
             </h3>
 
             {?short_description}
-            <p>{short_description|s}</p>
+                <p>{short_description|kses}</p>
             {/short_description}
 
             {?primary_keyword}
-                <span class="is-sr-only">{primary_keyword|s}</span>
+                <span class="is-sr-only">{primary_keyword|html}</span>
             {/primary_keyword}
 
-            <div class="is-flex is-align-items-center mt-2 mb-2 {classes.event_item_text}">
-                <span class="is-flex" aria-label="{Strings.s.event.date|s}">
-                    {>"ui/icon" icon="date" class="icon--large is-primary mr-4 {classes.event_item_icon}" /}
+            <div class="is-flex is-align-items-center mt-2 mb-2 {classes.event_item_text|attr}">
+                <span class="is-flex" aria-label="{Strings.s.event.date|attr}">
+                    {>"ui/icon" icon="date" class="icon--large is-primary mr-4 {classes.event_item_icon|attr}" /}
                 </span>
 
-                {date|s}
+                {date|html}
             </div>
 
-            <div class="is-flex is-align-items-center mt-2 mb-2 {classes.event_item_text}">
-                <span class="is-flex" aria-label="{Strings.s.event.time|s}">
-                    {>"ui/icon" icon="time" class="icon--large is-primary mr-4 {classes.event_item_icon}" /}
+            <div class="is-flex is-align-items-center mt-2 mb-2 {classes.event_item_text|attr}">
+                <span class="is-flex" aria-label="{Strings.s.event.time|attr}">
+                    {>"ui/icon" icon="time" class="icon--large is-primary mr-4 {classes.event_item_icon|attr}" /}
                 </span>
 
-                {time|s}
+                {time|html}
             </div>
 
             {?location.name}
                 <div class="is-flex is-align-items-center mt-2 mb-2 {classes.event_item_text}">
-                    <span class="is-flex" aria-label="{Strings.s.event.location|s}">
-                        {>"ui/icon" icon="location" class="icon--large is-primary mr-4 {classes.event_item_icon}" /}
+                    <span class="is-flex" aria-label="{Strings.s.event.location|attr}">
+                        {>"ui/icon" icon="location" class="icon--large is-primary mr-4 {classes.event_item_icon|attr}" /}
                     </span>
 
-                    {location.name|s}
+                    {location.name|html}
                 </div>
             {/location.name}
 
+            {#price}
+                {?is_free}
+                    <div class="is-flex is-align-items-center mt-2 mb-2 {classes.event_item_text|attr}">
+                        <span class="is-flex" aria-label="{Strings.s.event.price|attr}">
+                            {>"ui/icon" icon="euro" class="icon--large is-primary mr-4 {iclasses.event_item_icon|attr}" /}
+                        </span>
+
+                        {price|html}
+                    </div>
+                {/is_free}
+            {/price}
+
             {?url}
-                <a href="{url}" class="button is-primary is-outlined is-small is-hidden-desktop mt-4">
-                    {Strings.s.common.read_more|s}
+                <a href="{url|url}" class="button is-primary is-outlined is-small is-hidden-desktop mt-4">
+                    {Strings.s.common.read_more|html}
                 </a>
             {/url}
         </div>