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

---
 CHANGELOG.MD                                  |  2 +
 .../page-events-calendar-item-grid.dust       | 12 +++++
 .../page-events-calendar-item-list.dust       | 44 +++++++++----------
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index ce38458..06a8230 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/views/page-events-calendar/page-events-calendar-item-grid.dust b/partials/views/page-events-calendar/page-events-calendar-item-grid.dust
index 766974e..0795286 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="events__meta is-flex is-align-items-center">
+                    <span class="is-flex" aria-label="{Strings.s.event.price|attr}">
+                        {>"ui/icon" icon="euro" class="icon--large is-primary mr-2 {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..49ce48d 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|html}
             </p>
 
             <a href="{url}" class="button is-primary is-small mt-4">
-                {Strings.s.common.read_more|s}
+                {Strings.s.common.read_more|html}
             </a>
         </div>
     </div>