chore: identify user persona

frontend/src/App.vue

@@ -24,7 +24,7 @@ const router = useRouter()
 const noSidebar = ref(false)
 
 router.beforeEach((to, from, next) => {
-	if (to.query.fromLesson) {
+	if (to.query.fromLesson || to.path === '/persona') {
 		noSidebar.value = true
 	} else {
 		noSidebar.value = false

frontend/src/components/AppSidebar.vue

@@ -76,7 +76,7 @@
 			/>
 
 			<div
-				class="flex items-center"
+				class="flex items-center mt-4"
 				:class="
 					sidebarStore.isSidebarCollapsed ? 'flex-col space-y-3' : 'flex-row'
 				"

frontend/src/pages/Courses.vue

@@ -96,6 +96,7 @@
 import {
 	Breadcrumbs,
 	Button,
+	call,
 	createListResource,
 	FormControl,
 	Select,
@@ -107,6 +108,7 @@ import { BookOpen, Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { canCreateCourse } from '@/utils'
 import CourseCard from '@/components/CourseCard.vue'
+import router from '../router'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -121,6 +123,7 @@ const currentTab = ref('Live')
 const { brand } = sessionStore()
 
 onMounted(() => {
+	identifyUserPersona()
 	setFiltersFromQuery()
 	updateCourses()
 	categories.value = [
@@ -145,16 +148,34 @@ const courses = createListResource({
 	pageLength: pageLength.value,
 	start: start.value,
 	onSuccess(data) {
-		let allCategories = data.map((course) => course.category)
-		allCategories = allCategories.filter(
-			(category, index) => allCategories.indexOf(category) === index && category
-		)
-		if (categories.value.length <= allCategories.length) {
-			updateCategories(data)
-		}
+		setCategories(data)
 	},
 })
 
+const setCategories = (data) => {
+	let allCategories = data.map((course) => course.category)
+	allCategories = allCategories.filter(
+		(category, index) => allCategories.indexOf(category) === index && category
+	)
+	if (categories.value.length <= allCategories.length) {
+		updateCategories(data)
+	}
+}
+
+const identifyUserPersona = () => {
+	if (user.data?.is_system_manager) {
+		call('frappe.client.get_count', {
+			doctype: 'LMS Course',
+		}).then((data) => {
+			if (!data) {
+				router.push({
+					name: 'PersonaForm',
+				})
+			}
+		})
+	}
+}
+
 const updateCourses = () => {
 	updateFilters()
 	courses.update({

frontend/src/pages/PersonaForm.vue

@@ -0,0 +1,176 @@
+<template>
+	<div class="flex h-screen overflow-hidden sm:bg-gray-50">
+		<div class="relative z-10 mx-auto py-8 sm:w-max sm:py-32">
+			<div class="mx-auto flex items-center justify-center space-x-2">
+				<LMSLogo class="size-7" />
+				<span
+					class="select-none text-xl font-semibold tracking-tight text-gray-900"
+				>
+					Learning
+				</span>
+			</div>
+			<div
+				class="mx-auto space-y-5 w-full h-fit bg-white px-4 py-8 sm:mt-6 sm:w-96 sm:rounded-lg sm:px-8 sm:shadow-xl"
+			>
+				<div>
+					<div class="text-sm text-gray-700 mb-2">
+						{{ __('1. What best describes your role?') }}
+					</div>
+					<FormControl
+						v-model="persona.role"
+						type="select"
+						:options="roleOptions"
+					/>
+				</div>
+
+				<div>
+					<div>
+						<div class="text-sm text-gray-700 mb-2">
+							{{ __('2. How many students are you planning to teach?') }}
+						</div>
+						<FormControl
+							v-model="persona.noOfStudents"
+							type="select"
+							:options="noOfStudentsOptions"
+						/>
+					</div>
+				</div>
+
+				<div>
+					<div>
+						<div class="text-sm text-gray-700 mb-2">
+							{{ __('3. What is your main use case for Frappe Learning?') }}
+						</div>
+						<FormControl
+							v-model="persona.useCase"
+							type="select"
+							:options="useCaseOptions"
+						/>
+					</div>
+				</div>
+
+				<div>
+					<div>
+						<div class="text-sm text-gray-700 mb-2">
+							{{ __('4. Are you currently using any Frappe products?') }}
+						</div>
+						<FormControl
+							v-model="persona.frappeProducts"
+							type="select"
+							:options="frappeProductsOptions"
+						/>
+					</div>
+				</div>
+
+				<div class="flex w-full">
+					<Button variant="solid" class="mx-auto" @click="submitPersona()">
+						{{ __('Submit and Continue') }}
+					</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import LMSLogo from '@/components/Icons/LMSLogo.vue'
+import { Button, call, FormControl, usePageMeta } from 'frappe-ui'
+import { computed, inject, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { sessionStore } from '@/stores/session'
+
+const user = inject('$user')
+const router = useRouter()
+const { brand } = sessionStore()
+
+const persona = reactive({
+	role: null,
+	noOfStudents: null,
+	useCase: null,
+	frappeProducts: null,
+})
+
+const submitPersona = () => {
+	call('lms.lms.api.capture_user_persona', {
+		site: user.data?.sitename,
+		role: persona.role,
+		no_of_students: persona.noOfStudents,
+		use_case: persona.useCase,
+		frappe_products: persona.frappeProducts,
+	}).then(() => {
+		router.push({
+			name: 'Courses',
+		})
+	})
+}
+
+const roleOptions = computed(() => {
+	const options = [
+		'Trainer / Instructor',
+		'Freelancer / Consultant',
+		'HR / L&D Professional',
+		'School / University Admin',
+		'Software Developer',
+		'Community Manager',
+		'Business Owner / Team Lead',
+		'Other',
+	]
+
+	return options.map((option) => ({
+		label: option,
+		value: option,
+	}))
+})
+
+const noOfStudentsOptions = computed(() => {
+	const options = [
+		'Less than 50',
+		'50-200',
+		'200-1000',
+		'1000+',
+		'Not sure yet',
+	]
+
+	return options.map((option) => ({
+		label: option,
+		value: option,
+	}))
+})
+
+const useCaseOptions = computed(() => {
+	const options = [
+		'Teaching students in a school/university',
+		'Training employees in my company',
+		'Onboarding and educating my users/community',
+		'Selling courses and earning income',
+		'Other',
+	]
+
+	return options.map((option) => ({
+		label: option,
+		value: option,
+	}))
+})
+
+const frappeProductsOptions = computed(() => {
+	const options = [
+		'Frappe Framework',
+		'ERPNext / Frappe HR',
+		'Frappe CRM / Helpdesk',
+		'Custom Frappe App',
+		'Other',
+		'Not using any Frappe product',
+	]
+
+	return options.map((option) => ({
+		label: option,
+		value: option,
+	}))
+})
+
+usePageMeta(() => {
+	return {
+		title: 'Persona',
+		icon: brand.favicon,
+	}
+})
+</script>

frontend/src/router.js

@@ -210,6 +210,11 @@ const routes = [
 		name: 'AssignmentSubmissionList',
 		component: () => import('@/pages/AssignmentSubmissionList.vue'),
 	},
+	{
+		path: '/persona',
+		name: 'PersonaForm',
+		component: () => import('@/pages/PersonaForm.vue'),
+	},
 ]
 
 let router = createRouter({