From 515900ca9d12e32e1944ed38482efaa6ba50d04e Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Thu, 9 Nov 2023 11:36:05 +0100
Subject: [PATCH] feat: setup complete

---
 client/src/components/onboarding/InfoBox.vue  | 22 ++++++++
 .../src/components/onboarding/WizardPage.vue  |  6 ++-
 .../pages/onboarding/uk/AccountConfirm.vue    | 19 +++----
 .../pages/onboarding/uk/AccountProfile.vue    |  4 +-
 .../src/pages/onboarding/uk/SetupComplete.vue | 54 +++++++++++++++++++
 client/src/router/index.ts                    |  6 +++
 6 files changed, 99 insertions(+), 12 deletions(-)
 create mode 100644 client/src/components/onboarding/InfoBox.vue
 create mode 100644 client/src/pages/onboarding/uk/SetupComplete.vue

diff --git a/client/src/components/onboarding/InfoBox.vue b/client/src/components/onboarding/InfoBox.vue
new file mode 100644
index 00000000..3bf3451e
--- /dev/null
+++ b/client/src/components/onboarding/InfoBox.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps({
+  icon: {
+    type: String,
+    default: "it-icon-info",
+  },
+  color: {
+    type: String,
+    default: "text-inherit",
+  },
+});
+</script>
+
+<template>
+  <div class="mb-8 flex items-center space-x-4 border px-8 py-4">
+    <component
+      :is="props.icon"
+      :class="['block aspect-square h-16 w-auto', props.color]"
+    />
+    <slot name="content"></slot>
+  </div>
+</template>
diff --git a/client/src/components/onboarding/WizardPage.vue b/client/src/components/onboarding/WizardPage.vue
index 02d01dbc..3b1f4374 100644
--- a/client/src/components/onboarding/WizardPage.vue
+++ b/client/src/components/onboarding/WizardPage.vue
@@ -12,7 +12,11 @@ const props = defineProps<{
       <ItNavigationProgress :steps="3" :current-step="props.step" />
       <slot name="content"></slot>
     </div>
-    <div class="flex justify-end border border-t px-6 py-4">
+
+    <div
+      class="flex justify-end space-x-2 px-6 py-4"
+      :class="{ 'border border-t': $slots.footer }"
+    >
       <slot name="footer"></slot>
     </div>
   </div>
diff --git a/client/src/pages/onboarding/uk/AccountConfirm.vue b/client/src/pages/onboarding/uk/AccountConfirm.vue
index 8e30b5bd..91bac002 100644
--- a/client/src/pages/onboarding/uk/AccountConfirm.vue
+++ b/client/src/pages/onboarding/uk/AccountConfirm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import WizardPage from "@/components/onboarding/WizardPage.vue";
 import { useUserStore } from "@/stores/user";
+import InfoBox from "@/components/onboarding/InfoBox.vue";
 
 const userStore = useUserStore();
 </script>
@@ -9,15 +10,15 @@ const userStore = useUserStore();
   <WizardPage :step="0.5">
     <template #content>
       <h2 class="my-10">Konto erstellen</h2>
-
-      <div class="mb-8 flex items-center space-x-4 border px-8 py-4">
-        <it-icon-check class="h-24 w-24 text-green-500" />
-        <p class="text-lg font-bold">
-          Du hast erfolgreich ein Konto für
-          <br />
-          {{ userStore.email }} erstellt.
-        </p>
-      </div>
+      <InfoBox color="text-green-500" icon="it-icon-check">
+        <template #content>
+          <p class="text-lg font-bold">
+            Du hast erfolgreich ein Konto für
+            <br />
+            {{ userStore.email }} erstellt.
+          </p>
+        </template>
+      </InfoBox>
       <p class="text-lg font-bold">Mach nun weiter mit dem nächsten Schritt.</p>
     </template>
 
diff --git a/client/src/pages/onboarding/uk/AccountProfile.vue b/client/src/pages/onboarding/uk/AccountProfile.vue
index 6b6b9ff4..0be51603 100644
--- a/client/src/pages/onboarding/uk/AccountProfile.vue
+++ b/client/src/pages/onboarding/uk/AccountProfile.vue
@@ -69,10 +69,10 @@ watch(selectedCompany, (company) => {
     </template>
 
     <template #footer>
-      <button class="btn-blue flex items-center">
+      <router-link :to="{ name: 'setupComplete' }" class="btn-blue flex items-center">
         Weiter
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
-      </button>
+      </router-link>
     </template>
   </WizardPage>
 </template>
diff --git a/client/src/pages/onboarding/uk/SetupComplete.vue b/client/src/pages/onboarding/uk/SetupComplete.vue
new file mode 100644
index 00000000..6aafbe11
--- /dev/null
+++ b/client/src/pages/onboarding/uk/SetupComplete.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import WizardPage from "@/components/onboarding/WizardPage.vue";
+import InfoBox from "@/components/onboarding/InfoBox.vue";
+import { ref } from "vue";
+
+const courseSessionName = ref("");
+</script>
+
+<template>
+  <WizardPage :step="2">
+    <template #content>
+      <h2 class="my-10">An Durchführung teilnehmen</h2>
+      <template v-if="courseSessionName">
+        <InfoBox color="text-green-500" icon="it-icon-check">
+          <template #content>
+            <p class="text-lg">
+              Super, nun ist alles bereit. Du bist der Durchführung «{{
+                courseSessionName
+              }}» zugewiesen und kannst mit dem Lehrgang starten.
+            </p>
+          </template>
+        </InfoBox>
+      </template>
+      <template v-else>
+        <InfoBox>
+          <template #content>
+            <p class="text-lg">
+              Aktuell bist du leider keiner Durchführung zugewiesen.
+            </p>
+          </template>
+        </InfoBox>
+        <p>
+          Damit du mit diesem Lehrgang starten kannst, musst du einer Durchführung
+          zugewiesen werden. Nimm dafür deinem üK-Verantwortlichen oder unserem
+          <a class="underline" href="mailto:help@vbv.ch">Support</a>
+          Kontakt auf.
+        </p>
+      </template>
+    </template>
+    <template v-if="courseSessionName" #footer>
+      <router-link
+        :to="{ name: 'accountProfile' }"
+        class="btn-secondary flex items-center"
+      >
+        <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
+        Zurück
+      </router-link>
+      <router-link to="/" class="btn-blue flex items-center">
+        Jetzt mit dem Lehrgang starten
+        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
+      </router-link>
+    </template>
+  </WizardPage>
+</template>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 9744f956..05204a12 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -258,6 +258,12 @@ const router = createRouter({
           component: () => import("@/pages/onboarding/uk/AccountProfile.vue"),
           name: "accountProfile",
         },
+        {
+          path: "account/complete",
+          props: true,
+          component: () => import("@/pages/onboarding/uk/SetupComplete.vue"),
+          name: "setupComplete",
+        },
       ],
     },
     {