Update wizard to show the correct step number

client/src/components/onboarding/WizardPage.vue

@@ -1,15 +1,27 @@
 <script setup lang="ts">
 import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { isString, startsWith } from "lodash";
 
+const route = useRoute();
 const props = defineProps<{
   step: number;
 }>();
+
+const steps = computed(() => {
+  const courseType = route.params.courseType;
+  if (isString(courseType) && startsWith(courseType, "vv-")) {
+    return 4;
+  }
+  return 3;
+});
 </script>
 
 <template>
   <div class="flex h-screen flex-col">
     <div class="flex-grow scroll-smooth p-16 lg:overflow-auto">
-      <ItNavigationProgress :steps="3" :current-step="props.step" />
+      <ItNavigationProgress :steps="steps" :current-step="props.step" />
       <slot name="content"></slot>
     </div>
 

client/src/pages/onboarding/vv/AccountCourseProfile.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import WizardPage from "@/components/onboarding/WizardPage.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { useEntities, type CourseProfile } from "@/services/entities";
-import { profileNextRoute } from "@/services/onboarding";
+import { useEntities } from "@/services/entities";
 import { useUserStore } from "@/stores/user";
+import type { DropdownSelectable } from "@/types";
 import { useTranslation } from "i18next-vue";
 import { computed, ref, watch } from "vue";
-import { useRoute } from "vue-router";
 
 const { t } = useTranslation();
 
 const user = useUserStore();
-const route = useRoute();
 
 const { courseProfiles } = useEntities();
 
@@ -20,29 +18,17 @@ const selectedCourseProfile = ref({
   name: t("a.Auswählen"),
 });
 
-// watch(
-//   organisations,
-//   (newOrganisations) => {
-//     if (newOrganisations) {
-//       const userOrganisation = newOrganisations.find((c) => c.id === user.organisation);
-//       if (userOrganisation) {
-//         selectedOrganisation.value = userOrganisation;
-//       }
-//     }
-//   },
-//   { immediate: true }
-// );
-//
 const validCourseProfile = computed(() => {
   return selectedCourseProfile.value.id !== 0;
 });
 
-watch(selectedCourseProfile, async (courseProfile: CourseProfile) => {
-  user.updateChosenCourseProfile(courseProfile);
-});
-
-const nextRoute = computed(() => {
-  return profileNextRoute(route.params.courseType);
+watch(selectedCourseProfile, async (courseProfile: DropdownSelectable) => {
+  const courseProfileWithCode = courseProfiles.value.find(
+    (cp) => cp.id === courseProfile.id
+  );
+  if (courseProfileWithCode) {
+    user.updateChosenCourseProfile(courseProfileWithCode);
+  }
 });
 
 const courseProfilesToDropdown = computed(() => {
@@ -77,7 +63,7 @@ const courseProfilesToDropdown = computed(() => {
     </template>
 
     <template #footer>
-      <router-link v-slot="{ navigate }" :to="{ name: nextRoute }" custom>
+      <router-link v-slot="{ navigate }" :to="{ name: 'checkoutAddress' }" custom>
         <button
           :disabled="!validCourseProfile"
           class="btn-blue flex items-center"