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

---
 CHANGELOG.MD                                  |  2 +
 partials/ui/event-highlight.dust              | 48 ++++++++++++-------
 .../page-events-calendar-item-grid.dust       | 12 +++++
 .../page-events-calendar-item-list.dust       | 46 +++++++++---------
 4 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 6bd62c9..cbeff3f 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.3.1] - 2024-08-21
 
 - TMS-1057: Increase articles lead-text font-size
diff --git a/partials/ui/event-highlight.dust b/partials/ui/event-highlight.dust
index cbca897..d0f1b0c 100644
--- a/partials/ui/event-highlight.dust
+++ b/partials/ui/event-highlight.dust
@@ -1,51 +1,63 @@
  <div class="column is-6 is-4-desktop mb-4 mb-0-desktop">
-    <div class="events__item has-height-100 is-flex is-flex-direction-column {classes.event_item_bg}">
+    <div class="events__item has-height-100 is-flex is-flex-direction-column {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>
             </div>
         {/image}
 
         <div class="events__item-inner has-height-100 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>
 
             {>"ui/event-item-pill" /}
 
-            <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}" /}
+                <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.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 {classes.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}
+                    {Strings.s.common.read_more|html}
                 </a>
             {/url}
         </div>
diff --git a/partials/views/page-events-calendar/page-events-calendar-item-grid.dust b/partials/views/page-events-calendar/page-events-calendar-item-grid.dust
index 2b09a53..3ad0827 100644
--- a/partials/views/page-events-calendar/page-events-calendar-item-grid.dust
+++ b/partials/views/page-events-calendar/page-events-calendar-item-grid.dust
@@ -50,5 +50,17 @@
                 {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 {item_classes.grid.icon|attr}" /}
+                    </span>
+
+                    {price|html}
+                </div>
+            {/is_free}
+        {/price}
     </div>
 </div>
diff --git a/partials/views/page-events-calendar/page-events-calendar-item-list.dust b/partials/views/page-events-calendar/page-events-calendar-item-list.dust
index 421d53a..7595f3d 100644
--- a/partials/views/page-events-calendar/page-events-calendar-item-list.dust
+++ b/partials/views/page-events-calendar/page-events-calendar-item-list.dust
@@ -1,19 +1,19 @@
-<div class="events__item columns is-gapless mt-4 mb-4 has-border has-border-1 {item_classes.list.item|s}">
+<div class="events__item columns is-gapless mt-4 mb-4 has-border has-border-1 {item_classes.list.item|attr}">
     {?image}
         <div class="column is-4 is-relative">
-            <a href="{url}" class="is-hidden-mobile is-overlay has-background-cover" aria-hidden="true"
+            <a href="{url|url}" class="is-hidden-mobile is-overlay has-background-cover" aria-hidden="true"
                tabindex="-1" {@inlinebg url=image /}></a>
 
             <div class="image is-16by9 is-hidden-tablet" aria-hidden="true">
-                <a href="{url}" aria-hidden="true" tabindex="-1">
-                    <img src="{image}" alt="" class="objectfit-image">
+                <a href="{url|url}" aria-hidden="true" tabindex="-1">
+                    <img src="{image|url}" alt="" class="objectfit-image">
                 </a>
             </div>
 
             {?primary_keyword}
                 <span
                     class="is-absolute has-top-1 has-left-1 pill is-bordered has-background-primary-invert has-text-primary">
-                    {primary_keyword|s}
+                    {primary_keyword|html}
                 </span>
             {/primary_keyword}
         </div>
@@ -22,45 +22,45 @@
     <div class="column">
         <div class="events__item-inner pt-5 pr-6 pb-6 pl-6">
             <h3 class="h5 mt-0 mb-5">
-                <a href="{url}">
-                    {name|s}
+                <a href="{url|url}">
+                    {name|html}
                 </a>
             </h3>
 
             <div class="is-flex is-flex-wrap-wrap">
-                <div class="is-flex is-align-items-center mt-2 mb-2 mr-4 {item_classes.list.meta_label|s}">
-                    <span class="is-flex" aria-label="{Strings.s.event.date|s}">
-                        {>"ui/icon" icon="date" class="icon--large is-primary mr-2 {item_classes.list.icon|s}" /}
+                <div class="is-flex is-align-items-center mt-2 mb-2 mr-4 {item_classes.list.meta_label|attr}">
+                    <span class="is-flex" aria-label="{Strings.s.event.date|attr}">
+                        {>"ui/icon" icon="date" class="icon--large is-primary mr-2 {item_classes.list.icon|attr}" /}
                     </span>
 
-                    {date|s}
+                    {date|html}
                 </div>
 
-                <div class="is-flex is-align-items-center mt-2 mb-2 mr-4 {item_classes.list.meta_label|s}">
-                    <span class="is-flex" aria-label="{Strings.s.event.time|s}">
-                        {>"ui/icon" icon="time" class="icon--large is-primary mr-2 {item_classes.list.icon|s}" /}
+                <div class="is-flex is-align-items-center mt-2 mb-2 mr-4 {item_classes.list.meta_label|attr}">
+                    <span class="is-flex" aria-label="{Strings.s.event.time|attr}">
+                        {>"ui/icon" icon="time" class="icon--large is-primary mr-2 {item_classes.list.icon|attr}" /}
                     </span>
 
-                    {time|s}
+                    {time|html}
                 </div>
 
                 {?location.name}
-                    <div class="is-flex is-align-items-center mt-2 mb-2 {item_classes.list.meta_label|s}">
-                        <span class="is-flex" aria-label="{Strings.s.event.location|s}">
-                            {>"ui/icon" icon=location_icon class="icon--large is-primary mr-2 {item_classes.list.icon|s}" /}
+                    <div class="is-flex is-align-items-center mt-2 mb-2 {item_classes.list.meta_label|attr}">
+                        <span class="is-flex" aria-label="{Strings.s.event.location|attr}">
+                            {>"ui/icon" icon=location_icon class="icon--large is-primary mr-2 {item_classes.list.icon|attr}" /}
                         </span>
 
-                        {location.name|s}
+                        {location.name|html}
                     </div>
                 {/location.name}
             </div>
 
-            <p class="has-text-small {item_classes.list.description|s}">
-                {short_description|s}
+            <p class="has-text-small {item_classes.list.description|attr}">
+                {short_description|kses}
             </p>
 
-            <a href="{url}" class="button is-primary is-small mt-4">
-                {Strings.s.common.read_more|s}
+            <a href="{url|url}" class="button is-primary is-small mt-4">
+                {Strings.s.common.read_more|html}
             </a>
         </div>
     </div>