From 3644a0d77d1e80ae6fe3e6f3b6877ecb85c63c27 Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Tue, 14 Nov 2023 10:25:09 +0100
Subject: [PATCH] feat: test onboarding redirects

---
 client/src/fetchHelpers.ts                    |   4 +
 .../src/pages/onboarding/AccountProfile.vue   |  55 +++++++---
 .../src/router/__tests__/onboarding.spec.ts   | 103 ++++++++++++++++++
 client/src/router/onboarding.ts               |  17 ++-
 client/src/services/onboarding.ts             |   9 ++
 client/src/stores/user.ts                     |   2 +
 6 files changed, 171 insertions(+), 19 deletions(-)
 create mode 100644 client/src/router/__tests__/onboarding.spec.ts
 create mode 100644 client/src/services/onboarding.ts

diff --git a/client/src/fetchHelpers.ts b/client/src/fetchHelpers.ts
index af1a14e4..e4f38c93 100644
--- a/client/src/fetchHelpers.ts
+++ b/client/src/fetchHelpers.ts
@@ -68,6 +68,10 @@ export const itDelete = (url: RequestInfo) => {
   return itPost(url, {}, { method: "DELETE" });
 };
 
+export const itPut = (url: RequestInfo, data: unknown) => {
+  return itPost(url, data, { method: "PUT" });
+};
+
 const itGetPromiseCache = new Map<string, Promise<any>>();
 
 export function bustItGetCache(key?: string) {
diff --git a/client/src/pages/onboarding/AccountProfile.vue b/client/src/pages/onboarding/AccountProfile.vue
index ad221468..d482882b 100644
--- a/client/src/pages/onboarding/AccountProfile.vue
+++ b/client/src/pages/onboarding/AccountProfile.vue
@@ -1,27 +1,49 @@
 <script setup lang="ts">
 import WizardPage from "@/components/onboarding/WizardPage.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import type { Ref } from "vue";
 import { computed, ref, watch } from "vue";
 import { useUserStore } from "@/stores/user";
 import AvatarImage from "@/components/ui/AvatarImage.vue";
 import { useFileUpload } from "@/composables";
 import { useRoute } from "vue-router";
-import { useFetch } from "@/fetchHelpers";
+import { itPut, useFetch } from "@/fetchHelpers";
 import { useTranslation } from "i18next-vue";
+import { profileNextRoute } from "@/services/onboarding";
 
 const { t } = useTranslation();
 
+type Organisation = {
+  id: string;
+  name: string;
+};
+
 const user = useUserStore();
 const route = useRoute();
 
-const { data: companies } = useFetch(() => "/api/core/organisations/");
+const fetchResult = useFetch("/api/core/organisations/");
+const organisations: Ref<Organisation[] | null> = fetchResult.data;
 
-const selectedCompany = ref({
+const selectedOrganisation = ref({
   id: "0",
   name: t("a.Auswählen"),
 });
-const validCompany = computed(() => {
-  return selectedCompany.value.id !== "0";
+
+watch(
+  organisations,
+  (newOrganisations) => {
+    if (newOrganisations) {
+      const userOrganisation = newOrganisations.find((c) => c.id === user.organisation);
+      if (userOrganisation) {
+        selectedOrganisation.value = userOrganisation;
+      }
+    }
+  },
+  { immediate: true }
+);
+
+const validOrganisation = computed(() => {
+  return selectedOrganisation.value.id !== "0";
 });
 
 const {
@@ -35,18 +57,15 @@ watch(avatarFileInfo, (info) => {
   console.log("fileInfo changed", info);
 });
 
-watch(selectedCompany, (company) => {
-  console.log("company changed", company);
+watch(selectedOrganisation, (organisation) => {
+  console.log("organisation changed", organisation);
+  itPut("/api/core/me/", {
+    organisation: organisation.id,
+  });
 });
 
 const nextRoute = computed(() => {
-  if (route.params.courseType === "uk") {
-    return "setupComplete";
-  }
-  if (route.params.courseType === "vv") {
-    return "checkoutAddress";
-  }
-  return "";
+  return profileNextRoute(route.params.courseType);
 });
 </script>
 
@@ -62,7 +81,11 @@ const nextRoute = computed(() => {
         andere Personen einfacher finden.
       </p>
 
-      <ItDropdownSelect v-if="companies" v-model="selectedCompany" :items="companies" />
+      <ItDropdownSelect
+        v-if="organisations"
+        v-model="selectedOrganisation"
+        :items="organisations"
+      />
 
       <div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24">
         <div>
@@ -94,7 +117,7 @@ const nextRoute = computed(() => {
     <template #footer>
       <router-link v-slot="{ navigate }" :to="{ name: nextRoute }" custom>
         <button
-          :disabled="!validCompany"
+          :disabled="!validOrganisation"
           class="btn-blue flex items-center"
           role="link"
           @click="navigate"
diff --git a/client/src/router/__tests__/onboarding.spec.ts b/client/src/router/__tests__/onboarding.spec.ts
new file mode 100644
index 00000000..ede9c6a4
--- /dev/null
+++ b/client/src/router/__tests__/onboarding.spec.ts
@@ -0,0 +1,103 @@
+import { createPinia, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, vi } from "vitest";
+
+import { START_LOCATION } from "vue-router";
+import { useUserStore } from "../../stores/user";
+import { onboardingRedirect } from "../onboarding";
+
+describe("Onboarding", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("redirect guest", () => {
+    const user = useUserStore();
+    user.loggedIn = false;
+    const mock = vi.fn();
+    onboardingRedirect(routeLocation("accountConfirm", "uk"), START_LOCATION, mock);
+    expect(mock).toHaveBeenCalledWith({
+      name: "accountCreate",
+      params: { courseType: "uk" },
+    });
+  });
+
+  it("redirect logged-in user from accountCreate to accountConfirm", () => {
+    const user = useUserStore();
+    user.loggedIn = true;
+    const mockNext = vi.fn();
+    onboardingRedirect(routeLocation("accountCreate", "uk"), START_LOCATION, mockNext);
+    expect(mockNext).toHaveBeenCalledWith({
+      name: "accountConfirm",
+      params: { courseType: "uk" },
+    });
+  });
+
+  it("UK: redirect to profile next route for logged-in user with organisation", () => {
+    const user = useUserStore();
+    user.loggedIn = true;
+    user.organisation = "1";
+    const mockNext = vi.fn();
+    onboardingRedirect(routeLocation("accountConfirm", "uk"), START_LOCATION, mockNext);
+    expect(mockNext).toHaveBeenCalledWith({
+      name: "setupComplete",
+      params: { courseType: "uk" },
+    });
+  });
+
+  it("VV: redirect to profile next route for logged-in user with organisation", () => {
+    const user = useUserStore();
+    user.loggedIn = true;
+    user.organisation = "1";
+    const mockNext = vi.fn();
+    onboardingRedirect(routeLocation("accountConfirm", "vv"), START_LOCATION, mockNext);
+    expect(mockNext).toHaveBeenCalledWith({
+      name: "checkoutAddress",
+      params: { courseType: "vv" },
+    });
+  });
+
+  it("no redirect for logged-in user without organisation to accountConfirm", () => {
+    const user = useUserStore();
+    user.loggedIn = true;
+    user.organisation = "";
+    const mockNext = vi.fn();
+    onboardingRedirect(routeLocation("accountConfirm", "uk"), START_LOCATION, mockNext);
+    expect(mockNext).toHaveBeenCalledWith(); // No arguments passed means no redirection
+  });
+
+  it("no redirect for logged-in user to a non-relevant route", () => {
+    const user = useUserStore();
+    user.loggedIn = true;
+    const mockNext = vi.fn();
+    onboardingRedirect(routeLocation("someOtherRoute", "uk"), START_LOCATION, mockNext);
+    expect(mockNext).toHaveBeenCalledWith(); // No arguments passed means no redirection
+  });
+
+  it("no redirect for guest on accountCreate page", () => {
+    const user = useUserStore();
+    user.loggedIn = false;
+    const mockNext = vi.fn();
+    onboardingRedirect(routeLocation("accountCreate", "uk"), START_LOCATION, mockNext);
+    expect(mockNext).toHaveBeenCalledWith(); // No arguments passed means no redirection
+  });
+});
+
+function routeLocation(name: string, courseType: string) {
+  return {
+    fullPath: "",
+    hash: "",
+    matched: [],
+    meta: {},
+    name: name,
+    params: {
+      courseType,
+    },
+    path: "",
+    query: {},
+    redirectedFrom: undefined,
+  };
+}
diff --git a/client/src/router/onboarding.ts b/client/src/router/onboarding.ts
index d1a986b8..50583f6a 100644
--- a/client/src/router/onboarding.ts
+++ b/client/src/router/onboarding.ts
@@ -1,25 +1,36 @@
+import { profileNextRoute } from "@/services/onboarding";
 import { useUserStore } from "@/stores/user";
 import type { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
+import { START_LOCATION } from "vue-router";
 
 export async function onboardingRedirect(
   to: RouteLocationNormalized,
   from: RouteLocationNormalized,
   next: NavigationGuardNext
 ) {
-  const userStore = useUserStore();
+  const user = useUserStore();
 
   // Guest
-  if (!userStore.loggedIn) {
+  if (!user.loggedIn) {
     if (to.name !== "accountCreate") {
       return next({ name: "accountCreate", params: to.params });
     }
     return next();
   }
 
-  // Logged in
+  // Member
   if (to.name === "accountCreate") {
     return next({ name: "accountConfirm", params: to.params });
   }
 
+  // Maybe we can skip the account setup steps
+  if (
+    from === START_LOCATION &&
+    user.organisation &&
+    (to.name === "accountConfirm" || to.name === "accountProfile")
+  ) {
+    return next({ name: profileNextRoute(to.params.courseType), params: to.params });
+  }
+
   return next();
 }
diff --git a/client/src/services/onboarding.ts b/client/src/services/onboarding.ts
new file mode 100644
index 00000000..57361853
--- /dev/null
+++ b/client/src/services/onboarding.ts
@@ -0,0 +1,9 @@
+export function profileNextRoute(courseType: string | string[]) {
+  if (courseType === "uk") {
+    return "setupComplete";
+  }
+  if (courseType === "vv") {
+    return "checkoutAddress";
+  }
+  return "";
+}
diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts
index 3ab6c207..7b32430a 100644
--- a/client/src/stores/user.ts
+++ b/client/src/stores/user.ts
@@ -25,6 +25,7 @@ export type UserState = {
   email: string;
   username: string;
   avatar_url: string;
+  organisation: string;
   is_superuser: boolean;
   course_session_experts: string[];
   loggedIn: boolean;
@@ -57,6 +58,7 @@ const initialUserState: UserState = {
   username: "",
   avatar_url: "",
   is_superuser: false,
+  organisation: "",
   course_session_experts: [],
   loggedIn: false,
   language: defaultLanguage,