From 5f931eb71880d3f31a4d54d56b7ccfd9c6372677 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Due=20Bonde?= <sdb@novicell.dk>
Date: Thu, 13 Jun 2024 00:49:12 +0200
Subject: [PATCH 1/2] OS2UOL-124: Add registration section with data

---
 .../view-components/EducationalCards.vue      |  3 +-
 .../view-components/RegistrationSection.vue   | 75 +++++++++++++++++++
 components/views/courseView.vue               | 49 +++++++++---
 3 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 components/view-components/RegistrationSection.vue

diff --git a/components/view-components/EducationalCards.vue b/components/view-components/EducationalCards.vue
index 3809a22..6b19a0b 100644
--- a/components/view-components/EducationalCards.vue
+++ b/components/view-components/EducationalCards.vue
@@ -52,6 +52,7 @@ const determineIcon = (cardLink: string) => {
                     ? card.field_material_file
                     : card?.field_material_url?.url
                 "
+                target="_blank"
               >
                 <span class="educational-materials__card-link-text">
                   {{ card?.field_material_download_text }}
@@ -80,8 +81,6 @@ const determineIcon = (cardLink: string) => {
 
 <style lang="postcss" scoped>
 .educational-materials {
-  margin-bottom: 20px;
-
   &__card-wrapper {
     .row {
       margin-right: -12px;
diff --git a/components/view-components/RegistrationSection.vue b/components/view-components/RegistrationSection.vue
new file mode 100644
index 0000000..86b4671
--- /dev/null
+++ b/components/view-components/RegistrationSection.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div class="course__registration">
+    <h2>Tilmelding</h2>
+    <div v-if="props.data.free || props.data.price" class="course__registration__prices">
+      <BaseTag
+        v-if="props.data.free"
+        :data="{ label: 'Gratis' }"
+        color="secondary"
+      />
+      <div
+        v-else-if="props.data.price"
+        v-for="(price, index) in props.data.price"
+        :key="index"
+        class="course__registration__price-item"
+      >
+        <div>
+          {{ price?.field_price }} kr.
+          {{ price?.field_price_settlement_unit?.label }}
+        </div>
+        <div>{{ price?.field_price_vat?.label }}</div>
+      </div>
+    </div>
+    <div v-if="props.data.description" class="course__registration__price-description" v-html="props.data.price_description" />
+    <h4 v-if="props.data.title" class="course__registration__title" v-html="props.data.title" />
+    <div v-if="props.data.description" class="course__registration__description" v-html="props.data.description" />
+    <div v-if="props.data.deadline" class="course__registration__description" v-html="props.data.deadline" />
+    <div v-if="props.data.phone" class="course__registration__phone">
+      Tlf.: {{ props.data.phone }}
+    </div>
+    <div v-if="props.data.email" class="course__registration__email">
+      Email: <a :href="'mailto:' + props.data.email">{{ props.data.email }}</a>
+    </div>
+    <div v-if="props.data.url" class="course__registration__url">
+      <a :href="props.data.url" target="_blank">{{ props.data.url }}</a>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+  .course__registration {
+    text-align: center;
+    padding: 48px var(--grid-gutter-half) @(--md) 96px var(--grid-gutter-half);
+    background: var(--color-secondary-lighten-5);
+
+    & h2 {
+      margin-bottom: 16px;
+    }
+
+    &__title {
+      margin-bottom: 16px;
+      padding-top: 16px @(--md) 32px;
+    }
+
+    &__prices {
+      display: flex;
+      justify-content: center;
+      gap: 16px;
+      margin-bottom: 16px;
+    }
+
+    &__price-item {
+      font-size: 16px @(--md) 22px;
+    }
+  }
+</style>
diff --git a/components/views/courseView.vue b/components/views/courseView.vue
index e648fa5..9513658 100644
--- a/components/views/courseView.vue
+++ b/components/views/courseView.vue
@@ -33,6 +33,20 @@ useHead({
   ],
 });
 
+const registrationData = computed(() => {
+  return {
+    'deadline': props.data?.field_registration_deadline,
+    'description': props.data?.field_registration_description,
+    'email': props.data?.field_registration_email,
+    'phone': props.data?.field_registration_phone,
+    'title': props.data?.field_registration_title,
+    'url': props.data?.field_registration_url,
+    'price': props.data?.field_price,
+    'price_description': props.data?.field_description_of_price,
+    'free': props.data?.field_is_free,
+  }
+});
+
 const practicalInfoData = computed(() => {
   const data = [
     {
@@ -331,11 +345,17 @@ const practicalInfoData = computed(() => {
         </div>
 
         <!-- Section calendar -->
-        <div class="col-xs-12 col-sm-12 col-md-12 course__section-calendar">
-          <div class="course__calendar">
-            <h3>Tilmelding</h3>
-            <p>calendar integration goes here</p>
-          </div>
+        <div
+          v-if="
+            data.field_registration_deadline ||
+            data.field_registration_description ||
+            data.field_registration_email ||
+            data.field_registration_phone ||
+            data.field_registration_title ||
+            data.field_registration_url"
+          class="col-xs-12 col-sm-12 col-md-12 course__section-registration"
+        >
+          <RegistrationSection :data="registrationData" />
         </div>
 
         <!-- Section related articles -->
@@ -343,7 +363,7 @@ const practicalInfoData = computed(() => {
           class="col-xs-12 col-sm-12 col-md-12 course__section-related-articles"
         >
           <div class="course__related-articles">
-            <h3>Relaterede forløb</h3>
+            <h2>Relaterede forløb</h2>
             <div>article cards</div>
           </div>
         </div>
@@ -419,14 +439,23 @@ const practicalInfoData = computed(() => {
     padding-top: 48px @(--md) 96px;
   }
 
-  &__section-video,
-  &__section-cards,
-  &__section-calendar,
-  &__section-related-articles {
+  &__section-registration {
+    padding-top: 24px @(--md) 48px;
+    padding-bottom: 24px @(--md) 48px;
+  }
+
+  &__section-cards {
+    padding-top: 24px @(--md) 48px;
+    padding-bottom: 24px @(--md) 48px;
+  }
+
+  &__section-video {
     padding-top: 48px @(--md) 96px;
+    padding-bottom: 24px @(--md) 48px;
   }
 
   &__section-related-articles {
+    padding-top: 24px @(--md) 48px;
     padding-bottom: 48px @(--md) 96px;
   }
 }

From 477eef82b75c7f8654b83dc94af6cc89d1ffe897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Due=20Bonde?= <sdb@novicell.dk>
Date: Thu, 13 Jun 2024 00:53:03 +0200
Subject: [PATCH 2/2] OS2UOL-124: Adjust price-item styling

---
 components/view-components/RegistrationSection.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/view-components/RegistrationSection.vue b/components/view-components/RegistrationSection.vue
index 86b4671..3c035da 100644
--- a/components/view-components/RegistrationSection.vue
+++ b/components/view-components/RegistrationSection.vue
@@ -61,14 +61,8 @@ const props = defineProps({
       padding-top: 16px @(--md) 32px;
     }
 
-    &__prices {
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-      margin-bottom: 16px;
-    }
-
     &__price-item {
+      margin-bottom: 16px;
       font-size: 16px @(--md) 22px;
     }
   }