feat: wizard POC
This commit is contained in:
Reto Aebersold
Christian Cueni
parent
193638f3ca
commit
a39b105780
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="flex min-h-full flex-col">
|
||||
<MainNavigationBar class="flex-none" />
|
||||
<MainNavigationBar v-if="!route.meta.hideChrome" class="flex-none" />
|
||||
<RouterView v-slot="{ Component }" class="flex-auto">
|
||||
<Transition mode="out-in" name="app">
|
||||
<component :is="Component" :key="componentKey"></component>
|
||||
</Transition>
|
||||
</RouterView>
|
||||
<AppFooter class="flex-none" />
|
||||
<AppFooter v-if="!route.meta.hideChrome" class="flex-none" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,6 +19,9 @@ import { graphqlClient } from "@/graphql/client";
|
|||
import eventBus from "@/utils/eventBus";
|
||||
import { provideClient } from "@urql/vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const componentKey = ref(1);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
<script setup lang="ts">
|
||||
import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
|
||||
import { SUPPORT_LOCALES } from "@/i18nextWrapper";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
||||
import type { AvailableLanguages } from "@/stores/user";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
async function changeLocale(language: AvailableLanguages) {
|
||||
userStore.setUserLanguages(language);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div
|
||||
class="flex flex-col items-center justify-between space-y-8 bg-blue-900 p-8 lg:w-1/3"
|
||||
>
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<div class="flex justify-center">
|
||||
<div class="h-8 w-16">
|
||||
<it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
|
||||
</div>
|
||||
<div class="ml-1 border-l border-white pl-3 text-2xl text-white">
|
||||
{{ $t("general.title") }}
|
||||
</div>
|
||||
</div>
|
||||
<Menu as="div" class="relative block text-left">
|
||||
<div class="text-white">
|
||||
<MenuButton class="text-white">
|
||||
<it-icon-globe class="relative top-[2px] h-4 w-4" />
|
||||
<span class="ml-2 inline">
|
||||
{{ $t(`language.${userStore.language}`) }}
|
||||
</span>
|
||||
</MenuButton>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
v-for="locale in SUPPORT_LOCALES"
|
||||
:key="locale"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<button
|
||||
:class="[
|
||||
active ? 'bg-gray-200 text-gray-900' : 'text-gray-700',
|
||||
'block w-full px-4 py-2 text-left',
|
||||
]"
|
||||
:data-cy="`language-selector-${locale}`"
|
||||
@click="changeLocale(locale)"
|
||||
>
|
||||
{{ $t(`language.${locale}`) }}
|
||||
</button>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs text-white">
|
||||
<img
|
||||
src="/static/images/student.jpg"
|
||||
class="aspect-square rounded-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
<h3 class="mt-8 text-center">Überbetriebliche Kurse</h3>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-x-2 text-sm text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="h-10 w-10 fill-none"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
<div>
|
||||
Hast du Fragen? Schau dir unsere
|
||||
<a class="underline" href="#">FAQ</a>
|
||||
an oder kontaktiere uns:
|
||||
<a class="underline" href="mailto:help@vbv.ch">help@vbv.ch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="flex-grow p-16">
|
||||
<ItNavigationProgress :steps="3" :current-step="0" />
|
||||
<h2 class="my-10">Konto erstellen</h2>
|
||||
<p class="mb-4">Damit du myVBV nutzen kannst, brauchst du ein Konto.</p>
|
||||
<a href="#" class="btn-primary">Konto erstellen</a>
|
||||
|
||||
<p class="mb-4 mt-12">Hast du schon ein Konto?</p>
|
||||
<a href="#" class="btn-secondary">Anmelden</a>
|
||||
</div>
|
||||
<div class="flex justify-end border border-t px-6 py-4">
|
||||
<a href="#" class="btn-blue">Weiter</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# Onboarding flow
|
||||
|
||||
## ÜK
|
||||
|
||||
### Guard
|
||||
|
||||
1. Call /me
|
||||
|
||||
- User logged in -> redirect to /
|
||||
- Anonymous user -> Set to /onboarding/uk/step1
|
||||
|
||||
## VV
|
||||
|
||||
### Guard
|
||||
|
||||
1. Call /shop/vv/state
|
||||
- User logged in
|
||||
- If already bought -> redirect to /
|
||||
- If not bought -> redirect to /onboarding/vv/step1?state="success"
|
||||
- Anonymous user -> Set to /onboarding/vv/step1
|
||||
|
|
@ -229,6 +229,14 @@ const router = createRouter({
|
|||
path: "/course/:courseSlug/appointments",
|
||||
component: () => import("@/pages/AppointmentsPage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/onboarding/uk",
|
||||
component: () => import("@/pages/onboarding/OnboardUk.vue"),
|
||||
meta: {
|
||||
public: true,
|
||||
hideChrome: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/styleguide",
|
||||
component: () => import("../pages/StyleGuidePage.vue"),
|
||||
|
|
@ -236,6 +244,7 @@ const router = createRouter({
|
|||
public: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
component: () => import("../pages/404Page.vue"),
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ from django.apps import AppConfig
|
|||
|
||||
|
||||
class PaymentConfig(AppConfig):
|
||||
default_auto_field = 'django.db.models.BigAutoField'
|
||||
name = 'payment'
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "payment"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.99997 0.500065C5.87826 0.500065 3.84354 1.34291 2.34313 2.84319C0.842877 4.34358 0 6.37855 0 8.50003C0 10.6215 0.842844 12.6565 2.34313 14.1569C3.84351 15.6571 5.87849 16.5 7.99997 16.5C10.1214 16.5 12.1564 15.6572 13.6568 14.1569C15.1571 12.6565 15.9999 10.6215 15.9999 8.50003C15.9999 7.09568 15.6303 5.71622 14.9281 4.50002C14.226 3.28382 13.2161 2.27398 11.9999 1.57181C10.7837 0.869634 9.40425 0.5 7.9999 0.5L7.99997 0.500065ZM14.2315 5.64294H11.5087C11.1104 4.2353 10.4191 2.92763 9.48007 1.80587C10.514 2.03661 11.4806 2.50308 12.3047 3.16848C13.1288 3.83405 13.7883 4.68085 14.2315 5.64298V5.64294ZM7.96862 15.0885C6.92078 14.0448 6.13802 12.7653 5.68571 11.3573H10.3143C9.8611 12.7657 9.07743 14.0451 8.02857 15.0885C8.01059 15.1014 7.98648 15.1014 7.96862 15.0885H7.96862ZM5.39718 10.2144C5.18761 9.0811 5.18761 7.9191 5.39718 6.78581H10.6028C10.8123 7.9191 10.8123 9.0811 10.6028 10.2144H5.39718ZM1.1428 8.5001C1.1419 7.92178 1.21486 7.34564 1.35989 6.78581H4.23706C4.05058 7.92103 4.05058 9.07917 4.23706 10.2144H1.35989C1.21486 9.65455 1.1419 9.07842 1.1428 8.5001ZM7.99997 1.90023C8.01004 1.89628 8.02127 1.89628 8.03135 1.90023C9.08072 2.94729 9.86361 4.23086 10.3143 5.64294H5.68567C6.13886 4.23451 6.92254 2.95506 7.97139 1.91166C7.97917 1.90439 7.98938 1.90031 7.99997 1.90018L7.99997 1.90023ZM11.7629 6.78581H14.6401C14.9296 7.91032 14.9296 9.08988 14.6401 10.2144H11.7629C11.9494 9.07917 11.9494 7.92103 11.7629 6.78581ZM6.52012 1.80587C5.5821 2.92832 4.89089 4.23572 4.49154 5.64294H1.76869C2.21193 4.68082 2.87139 3.83402 3.69549 3.16845C4.51959 2.50301 5.48619 2.03656 6.52012 1.80583V1.80587ZM1.76876 11.3573H4.49161C4.88982 12.7649 5.58115 14.0726 6.52019 15.1943C5.48626 14.9636 4.51966 14.4971 3.69556 13.8317C2.87146 13.1661 2.21199 12.3193 1.76876 11.3572V11.3573ZM9.48308 15.1943C10.4199 14.0716 11.1101 12.7642 11.5087 11.3573H14.2316C13.7883 12.3194 13.1289 13.1662 12.3048 13.8317C11.4807 14.4972 10.5141 14.9636 9.48014 15.1944L9.48308 15.1943Z" fill="#0A0A0A"/>
|
||||
<path d="M7.99997 0.500065C5.87826 0.500065 3.84354 1.34291 2.34313 2.84319C0.842877 4.34358 0 6.37855 0 8.50003C0 10.6215 0.842844 12.6565 2.34313 14.1569C3.84351 15.6571 5.87849 16.5 7.99997 16.5C10.1214 16.5 12.1564 15.6572 13.6568 14.1569C15.1571 12.6565 15.9999 10.6215 15.9999 8.50003C15.9999 7.09568 15.6303 5.71622 14.9281 4.50002C14.226 3.28382 13.2161 2.27398 11.9999 1.57181C10.7837 0.869634 9.40425 0.5 7.9999 0.5L7.99997 0.500065ZM14.2315 5.64294H11.5087C11.1104 4.2353 10.4191 2.92763 9.48007 1.80587C10.514 2.03661 11.4806 2.50308 12.3047 3.16848C13.1288 3.83405 13.7883 4.68085 14.2315 5.64298V5.64294ZM7.96862 15.0885C6.92078 14.0448 6.13802 12.7653 5.68571 11.3573H10.3143C9.8611 12.7657 9.07743 14.0451 8.02857 15.0885C8.01059 15.1014 7.98648 15.1014 7.96862 15.0885H7.96862ZM5.39718 10.2144C5.18761 9.0811 5.18761 7.9191 5.39718 6.78581H10.6028C10.8123 7.9191 10.8123 9.0811 10.6028 10.2144H5.39718ZM1.1428 8.5001C1.1419 7.92178 1.21486 7.34564 1.35989 6.78581H4.23706C4.05058 7.92103 4.05058 9.07917 4.23706 10.2144H1.35989C1.21486 9.65455 1.1419 9.07842 1.1428 8.5001ZM7.99997 1.90023C8.01004 1.89628 8.02127 1.89628 8.03135 1.90023C9.08072 2.94729 9.86361 4.23086 10.3143 5.64294H5.68567C6.13886 4.23451 6.92254 2.95506 7.97139 1.91166C7.97917 1.90439 7.98938 1.90031 7.99997 1.90018L7.99997 1.90023ZM11.7629 6.78581H14.6401C14.9296 7.91032 14.9296 9.08988 14.6401 10.2144H11.7629C11.9494 9.07917 11.9494 7.92103 11.7629 6.78581ZM6.52012 1.80587C5.5821 2.92832 4.89089 4.23572 4.49154 5.64294H1.76869C2.21193 4.68082 2.87139 3.83402 3.69549 3.16845C4.51959 2.50301 5.48619 2.03656 6.52012 1.80583V1.80587ZM1.76876 11.3573H4.49161C4.88982 12.7649 5.58115 14.0726 6.52019 15.1943C5.48626 14.9636 4.51966 14.4971 3.69556 13.8317C2.87146 13.1661 2.21199 12.3193 1.76876 11.3572V11.3573ZM9.48308 15.1943C10.4199 14.0716 11.1101 12.7642 11.5087 11.3573H14.2316C13.7883 12.3194 13.1289 13.1662 12.3048 13.8317C11.4807 14.4972 10.5141 14.9636 9.48014 15.1944L9.48308 15.1943Z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Loading…
Reference in New Issue