From 029ca0140fd28606de6d6af52c172ea272f43af7 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 13 May 2024 16:30:45 +0200
Subject: [PATCH] Add buy link (VBV-682)

---
 .../src/components/header/MainNavigationBar.vue   | 12 +++++++++++-
 client/src/components/header/MobileMenu.vue       | 14 ++++++++++++++
 client/src/composables.ts                         | 15 +++++++++++++++
 client/src/utils/utils.ts                         | 11 ++++++++++-
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 33d264cb..ea8a002e 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -21,7 +21,9 @@ import {
   getLearningMentorUrl,
   getLearningPathUrl,
   getMediaCenterUrl,
+  isVVLearningMentor,
 } from "@/utils/utils";
+import { useVVByLink } from "@/composables";
 
 log.debug("MainNavigationBar created");
 
@@ -29,6 +31,7 @@ const breakpoints = useBreakpoints(breakpointsTailwind);
 const userStore = useUserStore();
 const courseSessionsStore = useCourseSessionsStore();
 const notificationsStore = useNotificationsStore();
+const vvBuyLink = useVVByLink();
 const {
   inCockpit,
   inCompetenceProfile,
@@ -291,7 +294,14 @@ const mentorTabTitle = computed(() =>
               >
                 <it-icon-media-library class="h-8 w-8" />
               </router-link>
-
+              <router-link
+                v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"
+                :to="vvBuyLink.href.value"
+                data-cy="buy-vv-link"
+                class="nav-item-no-mobile"
+              >
+                {{ $t("a.Lehrgang kaufen") }}
+              </router-link>
               <router-link
                 v-if="hasAppointmentsMenu"
                 :to="appointmentsUrl"
diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index d1f0e80a..efbc7516 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -9,9 +9,11 @@ import {
   getLearningMentorUrl,
   getLearningPathUrl,
   getMediaCenterUrl,
+  isVVLearningMentor,
 } from "@/utils/utils";
 import { computed } from "vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useVVByLink } from "@/composables";
 
 const router = useRouter();
 
@@ -33,6 +35,7 @@ defineProps<{
 const emit = defineEmits(["closemodal", "logout"]);
 
 const courseSessionsStore = useCourseSessionsStore();
+const vvBuyLink = useVVByLink();
 
 const clickLink = (to: string | undefined) => {
   if (to) {
@@ -119,6 +122,17 @@ const mentorTabTitle = computed(() =>
                   {{ $t("a.Mediathek") }}
                 </button>
               </li>
+              <li
+                v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"
+                class="mb-6"
+              >
+                <button
+                  data-cy="vv-buy-link"
+                  @click="clickLink(vvBuyLink.href.value as string)"
+                >
+                  {{ $t("Lernpfad kaufen") }}
+                </button>
+              </li>
             </ul>
           </div>
           <div class="mt-6 border-b">
diff --git a/client/src/composables.ts b/client/src/composables.ts
index 0b898845..15ecb645 100644
--- a/client/src/composables.ts
+++ b/client/src/composables.ts
@@ -51,6 +51,7 @@ import orderBy from "lodash/orderBy";
 import log from "loglevel";
 import type { ComputedRef, Ref } from "vue";
 import { computed, onMounted, ref, watchEffect } from "vue";
+import { useRouter, type RouteLocationRaw } from "vue-router";
 
 export function useCurrentCourseSession() {
   /**
@@ -728,3 +729,17 @@ export function useEvaluationWithFeedback() {
 
   return { hasFeedback };
 }
+
+export function useVVByLink() {
+  const router = useRouter();
+  const userStore = useUserStore();
+  const href = computed(
+    () =>
+      router.resolve({
+        name: "accountConfirm",
+        params: { courseType: `vv-${userStore.language}` },
+      }).href as RouteLocationRaw
+  );
+
+  return { href };
+}
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
index 2892cf6d..5080fd4b 100644
--- a/client/src/utils/utils.ts
+++ b/client/src/utils/utils.ts
@@ -1,4 +1,4 @@
-import type { AssignmentType } from "@/types";
+import type { AssignmentType, CourseSession } from "@/types";
 import { useTranslation } from "i18next-vue";
 
 export function assertUnreachable(msg: string): never {
@@ -66,3 +66,12 @@ export function getAssignmentTypeIcon(assignmentType: AssignmentType): string {
       return "it-icon-lc-assignment";
   }
 }
+
+export function isVVLearningMentor(courseSession: CourseSession | undefined): boolean {
+  return (
+    (courseSession?.actions.includes("is_learning_mentor") &&
+      !courseSession?.actions.includes("learning-mentor::edit-mentors") &&
+      courseSession?.course.configuration.is_vv) ??
+    false
+  );
+}