From 53eb95612c007dbb37ef8b834faf0d7996622dbd Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 1 Feb 2024 10:48:05 +0530
Subject: [PATCH] fix: review button

---
 frontend/src/components/Controls/Rating.vue   |   4 +-
 frontend/src/components/CourseCard.vue        |  51 ++++----
 frontend/src/components/CourseCardOverlay.vue |  44 ++++---
 frontend/src/components/CourseOutline.vue     |  39 +++++-
 frontend/src/components/CourseReviews.vue     | 120 +++++++----------
 .../src/components/Modals/ReviewModal.vue     |   3 +
 frontend/src/pages/CourseDetail.vue           | 121 ++++++++++--------
 frontend/src/pages/Courses.vue                |  30 +++--
 frontend/src/pages/Lesson.vue                 |   2 +-
 lms/lms/utils.py                              |  20 +--
 lms/templates/reviews_cta.html                |   2 +-
 11 files changed, 237 insertions(+), 199 deletions(-)

diff --git a/frontend/src/components/Controls/Rating.vue b/frontend/src/components/Controls/Rating.vue
index 5e6e3e6c..95897d12 100644
--- a/frontend/src/components/Controls/Rating.vue
+++ b/frontend/src/components/Controls/Rating.vue
@@ -2,8 +2,8 @@
 	<div class="flex text-center">
 		<div v-for="index in 5">
 			<Star
-				:class="{ 'fill-orange-500': index <= rating }"
-				class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer"
+				:class="index <= rating ? 'fill-orange-500' : ''"
+				class="h-6 w-6 fill-gray-400 text-gray-50 mr-1 cursor-pointer"
 				@click="markRating(index)"
 			/>
 		</div>
diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 07bdee19..5e3061ba 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col border border-gray-200 h-full rounded-md shadow-sm text-base overflow-auto"
+		class="flex flex-col h-full rounded-md shadow-md text-base overflow-auto"
 		style="min-height: 320px"
 	>
 		<div
@@ -10,12 +10,9 @@
 			:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
 		>
 			<div class="flex relative top-4 left-4 w-fit">
-				<div
-					class="course-card-pills rounded-md border border-gray-200"
-					v-for="tag in course.tags"
-				>
+				<Badge theme="gray" size="lg" class="mr-2" v-for="tag in course.tags">
 					{{ tag }}
-				</div>
+				</Badge>
 			</div>
 			<div v-if="!course.image" class="image-placeholder">
 				{{ course.title[0] }}
@@ -23,25 +20,34 @@
 		</div>
 		<div class="flex flex-col flex-auto p-4">
 			<div class="flex items-center justify-between mb-2">
-				<div
-					v-if="course.lesson_count"
-					class="flex items-center space-x-1 py-1"
-				>
-					<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
-					<span> {{ course.lesson_count }} </span>
+				<div v-if="course.lesson_count">
+					<Tooltip
+						:text="__('Lessons')"
+						class="flex items-center space-x-1 py-1"
+					>
+						<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
+						<span> {{ course.lesson_count }} </span>
+					</Tooltip>
 				</div>
 
-				<div
-					v-if="course.enrollment_count"
-					class="flex items-center space-x-1 py-1"
-				>
-					<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
-					<span> {{ course.enrollment_count }} </span>
+				<div v-if="course.enrollment_count">
+					<Tooltip
+						:text="__('Enrolled Students')"
+						class="flex items-center space-x-1 py-1"
+					>
+						<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
+						<span> {{ course.enrollment_count }} </span>
+					</Tooltip>
 				</div>
 
-				<div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
-					<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
-					<span> {{ course.avg_rating }} </span>
+				<div v-if="course.avg_rating">
+					<Tooltip
+						:text="__('Average Rating')"
+						class="flex items-center space-x-1 py-1"
+					>
+						<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
+						<span> {{ course.avg_rating }} </span>
+					</Tooltip>
 				</div>
 
 				<div v-if="course.status != 'Approved'">
@@ -110,8 +116,7 @@
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
-import { Badge, createResource } from 'frappe-ui'
-import { ref, watchEffect } from 'vue'
+import { Badge, Tooltip } from 'frappe-ui'
 
 const { user } = sessionStore()
 
diff --git a/frontend/src/components/CourseCardOverlay.vue b/frontend/src/components/CourseCardOverlay.vue
index 29bc40d9..6f8ee64b 100644
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -1,11 +1,14 @@
 <template>
-	<div class="shadow rounded-md" style="width: 300px">
+	<div class="border border-gray-200 rounded-md min-w-80">
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
-			class="rounded-t-md"
+			class="rounded-t-md min-h-56 min-w-80"
 		/>
 		<div class="p-5">
+			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
+				{{ course.data.price }}
+			</div>
 			<router-link
 				v-if="course.data.membership"
 				:to="{
@@ -21,7 +24,7 @@
 					},
 				}"
 			>
-				<Button variant="solid" class="w-full mb-3">
+				<Button variant="solid" size="md" class="w-full">
 					<span>
 						{{ __('Continue Learning') }}
 					</span>
@@ -37,7 +40,7 @@
 					},
 				}"
 			>
-				<Button variant="solid" class="w-full mb-3">
+				<Button variant="solid" size="md" class="w-full">
 					<span>
 						{{ __('Buy this course') }}
 					</span>
@@ -47,7 +50,8 @@
 				v-else
 				@click="enrollStudent()"
 				variant="solid"
-				class="w-full mb-3"
+				class="w-full"
+				size="md"
 			>
 				<span>
 					{{ __('Start Learning') }}
@@ -56,30 +60,32 @@
 			<Button
 				v-if="user?.data?.is_moderator"
 				variant="subtle"
-				class="w-full mb-3"
+				class="w-full"
+				size="md"
 			>
 				<span>
 					{{ __('Edit') }}
 				</span>
 			</Button>
-			<div class="text-lg font-semibold mb-3">
-				{{ course.data.price }}
+			<div class="mt-8 mb-4 font-medium">
+				{{ __('This course has:') }}
 			</div>
-			<div class="flex items-center mb-3">
-				<Users class="h-4 w-4 text-gray-700" />
-				<span class="ml-1">
-					{{ course.data.enrollment_count_formatted }} {{ __('Enrolled') }}
-				</span>
-			</div>
-			<div class="flex items-center mb-3">
-				<BookOpen class="h-4 w-4 text-gray-700" />
-				<span class="ml-1">
+			<div class="flex items-center mb-4">
+				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
+				<span class="ml-2">
 					{{ course.data.lesson_count }} {{ __('Lessons') }}
 				</span>
 			</div>
+			<div class="flex items-center mb-4">
+				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
+				<span class="ml-2">
+					{{ course.data.enrollment_count_formatted }}
+					{{ __('Enrolled Students') }}
+				</span>
+			</div>
 			<div class="flex items-center">
-				<Star class="h-4 w-4 fill-orange-500 text-gray-100" />
-				<span class="ml-1">
+				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
+				<span class="ml-2">
 					{{ course.data.avg_rating }} {{ __('Rating') }}
 				</span>
 			</div>
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index d620e056..294cbf0e 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -1,28 +1,40 @@
 <template>
-	<div class="course-outline text-base">
-		<div class="mt-4">
+	<div class="text-base">
+		<div v-if="showHeader" class="flex justify-between mb-4">
+			<div class="text-2xl font-semibold">
+				{{ __('Course Content') }}
+			</div>
+			<!-- <span class="font-medium cursor-pointer" @click="expandAllChapters()">
+				{{ expandAll ? __("Collapse all chapters") : __("Expand all chapters") }}
+			</span> -->
+		</div>
+		<div :class="{ 'shadow rounded-md pt-2 px-2': showOutline }">
 			<Disclosure
 				v-slot="{ open }"
 				v-for="(chapter, index) in outline.data"
 				:key="chapter.name"
 				:defaultOpen="openChapter(chapter.idx)"
 			>
-				<DisclosureButton class="flex w-full px-2 pt-2 pb-3">
+				<DisclosureButton ref="" class="flex w-full px-2 py-4">
 					<ChevronRight
 						:class="{
 							'rotate-90 transform duration-200': open,
 							'duration-200': !open,
 							open: index == 1,
 						}"
-						class="h-5 w-5 text-gray-900 stroke-1 mr-2"
+						class="h-4 w-4 text-gray-900 stroke-1 mr-2"
 					/>
-					<div class="text-base font-medium">
+					<div class="text-base text-left font-medium">
 						{{ chapter.title }}
 					</div>
+					<div class="ml-auto text-sm">
+						{{ chapter.lessons.length }}
+						{{ chapter.lessons.length == 1 ? __('lesson') : __('lessons') }}
+					</div>
 				</DisclosureButton>
 				<DisclosurePanel class="pb-2">
 					<div v-for="lesson in chapter.lessons" :key="lesson.name">
-						<div class="outline-lesson my-2 pl-9">
+						<div class="outline-lesson py-2 pl-8">
 							<router-link
 								:to="{
 									name: 'Lesson',
@@ -58,6 +70,7 @@
 </template>
 <script setup>
 import { createResource } from 'frappe-ui'
+import { ref } from 'vue'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
 	ChevronRight,
@@ -68,11 +81,20 @@ import {
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
+const expandAll = ref(true)
 const props = defineProps({
 	courseName: {
 		type: String,
 		required: true,
 	},
+	showOutline: {
+		type: Boolean,
+		default: false,
+	},
+	showHeader: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const outline = createResource({
@@ -87,10 +109,13 @@ const outline = createResource({
 const openChapter = (index) => {
 	return index == route.params.chapterNumber || index == 1
 }
+
+const expandAllChapters = () => {
+	expandAll.value = !expandAll.value
+}
 </script>
 <style>
 .outline-lesson:has(.router-link-active) {
 	background-color: theme('colors.gray.100');
-	padding: 0.5rem 0 0.5rem 2.25rem;
 }
 </style>
diff --git a/frontend/src/components/CourseReviews.vue b/frontend/src/components/CourseReviews.vue
index 6ab032c4..c1972236 100644
--- a/frontend/src/components/CourseReviews.vue
+++ b/frontend/src/components/CourseReviews.vue
@@ -1,86 +1,51 @@
 <template>
-	<div v-if="reviews.data" class="my-10">
-		<div class="text-2xl font-semibold mb-5">
-			{{ __('Reviews') }}
+	<div v-if="reviews.data" class="mt-20 mb-10">
+		<Button
+			v-if="membership && !hasReviewed.data"
+			@click="openReviewModal()"
+			class="float-right"
+		>
+			{{ __('Write a Review') }}
+		</Button>
+		<div class="flex items-center font-semibold text-2xl">
+			<Star class="h-6 w-6 stroke-1 text-gray-50 fill-orange-500 mr-1" />
+			{{ avg_rating }} {{ __('ratings and ') }} {{ reviews.data.length }}
+			{{ __('reviews') }}
 		</div>
-		<div class="flex justify-between">
-			<div class="flex flex-col items-center">
-				<div v-if="avg_rating" class="text-3xl font-semibold mb-2">
-					{{ avg_rating }}
-				</div>
-				<div class="flex mb-2">
-					<Star
-						v-for="index in 5"
-						class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-1"
-						:class="
-							index <= Math.ceil(avg_rating)
-								? 'fill-orange-500'
-								: 'fill-gray-600'
-						"
-					/>
-				</div>
-				<div class="mb-2">{{ reviews.data.length }} {{ __('reviews') }}</div>
-				<Button v-if="membership" @click="openReviewModal()">
-					<span>
-						{{ __('Write a review') }}
-					</span>
-				</Button>
-			</div>
-			<div class="border border-gray-300 mx-4"></div>
-			<div class="flex flex-col">
-				<div v-for="index in reversedRange(5)">
-					<div class="flex items-center mb-4">
-						<span class="mr-2"> {{ index }} {{ __('stars') }} </span>
-						<div class="bg-gray-200 rounded-full w-52 mr-2">
-							<div
-								class="bg-gray-900 h-1 rounded-full"
-								:style="{ width: rating_percent[index] + '%' }"
-							></div>
-						</div>
-						<span> {{ Math.floor(rating_percent[index]) }}% </span>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="mt-12">
+		<div class="grid gap-8 mt-10">
 			<div v-for="(review, index) in reviews.data">
-				<div class="my-4">
-					<div class="flex items-center">
-						<UserAvatar :user="review.owner_details" :size="'2xl'" />
-						<div class="mx-4">
-							<span class="text-lg font-medium mr-4">
-								{{ review.owner_details.full_name }}
-							</span>
-							<span>
-								{{ review.creation }}
-							</span>
-							<div class="flex mt-2">
-								<Star
-									v-for="index in 5"
-									class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2"
-									:class="
-										index <= Math.ceil(review.rating)
-											? 'fill-orange-500'
-											: 'fill-gray-600'
-									"
-								/>
-							</div>
+				<div class="flex items-center">
+					<UserAvatar :user="review.owner_details" :size="'2xl'" />
+					<div class="mx-4">
+						<span class="text-lg font-medium mr-4">
+							{{ review.owner_details.full_name }}
+						</span>
+						<span>
+							{{ review.creation }}
+						</span>
+						<div class="flex mt-2">
+							<Star
+								v-for="index in 5"
+								class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2"
+								:class="
+									index <= Math.ceil(review.rating)
+										? 'fill-orange-500'
+										: 'fill-gray-600'
+								"
+							/>
 						</div>
 					</div>
-					<div class="mt-4 leading-5">
-						{{ review.review }}
-					</div>
 				</div>
-				<div
-					class="mx-3 h-px border-t border-gray-200"
-					v-if="index < reviews.data.length - 1"
-				></div>
+				<div v-if="review.review" class="mt-4 leading-5">
+					{{ review.review }}
+				</div>
 			</div>
 		</div>
 	</div>
 	<ReviewModal
 		v-model="showReviewModal"
 		v-model:reloadReviews="reviews"
+		v-model:hasReviewed="hasReviewed"
 		:courseName="courseName"
 	/>
 </template>
@@ -106,6 +71,19 @@ const props = defineProps({
 	},
 })
 
+const hasReviewed = createResource({
+	url: 'frappe.client.get_count',
+	cache: ['eligible_to_review', props.courseName, props.membership.member],
+	params: {
+		doctype: 'LMS Course Review',
+		filters: {
+			course: props.courseName,
+			owner: props.membership.member,
+		},
+	},
+	auto: true,
+})
+
 const reversedRange = (count) =>
 	Array.from({ length: count }, (_, index) => count - index)
 
diff --git a/frontend/src/components/Modals/ReviewModal.vue b/frontend/src/components/Modals/ReviewModal.vue
index 5e9f3784..ca0fcf06 100644
--- a/frontend/src/components/Modals/ReviewModal.vue
+++ b/frontend/src/components/Modals/ReviewModal.vue
@@ -39,6 +39,8 @@ import { createToast } from '@/utils/'
 
 const show = defineModel()
 const reviews = defineModel('reloadReviews')
+const hasReviewed = defineModel('hasReviewed')
+
 let review = reactive({
 	review: '',
 	rating: 0,
@@ -73,6 +75,7 @@ function submitReview(close) {
 		},
 		onSuccess() {
 			reviews.value.reload()
+			hasReviewed.value.reload()
 		},
 		onError(err) {
 			createToast({
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index 771f1bc7..2d27f405 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -6,65 +6,84 @@
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
 		<div class="m-5">
-			<div>
-				<div class="text-3xl font-semibold">
-					{{ course.data.title }}
-				</div>
-				<div class="my-3">
-					{{ course.data.short_introduction }}
-				</div>
-				<div class="flex items-center justify-between w-1/3">
-					<div v-if="course.data.avg_rating" class="flex items-center">
-						<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
-						<span class="ml-1">
-							{{ course.data.avg_rating }}
-						</span>
+			<div class="flex justify-between w-full">
+				<div class="w-2/3">
+					<div class="text-3xl font-semibold">
+						{{ course.data.title }}
 					</div>
-					<span v-if="course.data.avg_rating">&middot;</span>
-					<div v-if="course.data.enrollment_count" class="flex items-center">
-						<Users class="h-4 w-4 text-gray-700" />
-						<span class="ml-1">
-							{{ course.data.enrollment_count_formatted }}
-						</span>
+					<div class="my-3">
+						{{ course.data.short_introduction }}
 					</div>
-					<span v-if="course.data.enrollment_count">&middot;</span>
 					<div class="flex items-center">
-						<span
-							class="mr-1"
-							:class="{
-								'avatar-group overlap': course.data.instructors.length > 1,
-							}"
+						<Tooltip
+							v-if="course.data.avg_rating"
+							:text="__('Average Rating')"
+							class="flex items-center"
 						>
-							<UserAvatar
-								v-for="instructor in course.data.instructors"
-								:user="instructor"
-							/>
-						</span>
-						<span v-if="course.data.instructors.length == 1">
-							{{ course.data.instructors[0].full_name }}
-						</span>
-						<span v-if="course.data.instructors.length == 2">
-							{{ course.data.instructors[0].first_name }} and
-							{{ course.data.instructors[1].first_name }}
-						</span>
-						<span v-if="course.data.instructors.length > 2">
-							{{ course.data.instructors[0].first_name }} and
-							{{ course.data.instructors.length - 1 }} others
-						</span>
+							<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
+							<span class="ml-1">
+								{{ course.data.avg_rating }}
+							</span>
+						</Tooltip>
+						<span v-if="course.data.avg_rating" class="mx-3">&middot;</span>
+						<Tooltip
+							v-if="course.data.enrollment_count"
+							:text="__('Enrolled Students')"
+							class="flex items-center"
+						>
+							<Users class="h-4 w-4 text-gray-700" />
+							<span class="ml-1">
+								{{ course.data.enrollment_count_formatted }}
+							</span>
+						</Tooltip>
+						<span v-if="course.data.enrollment_count" class="mx-3"
+							>&middot;</span
+						>
+						<div class="flex items-center">
+							<span
+								class="mr-1"
+								:class="{
+									'avatar-group overlap': course.data.instructors.length > 1,
+								}"
+							>
+								<UserAvatar
+									v-for="instructor in course.data.instructors"
+									:user="instructor"
+								/>
+							</span>
+							<span v-if="course.data.instructors.length == 1">
+								{{ course.data.instructors[0].full_name }}
+							</span>
+							<span v-if="course.data.instructors.length == 2">
+								{{ course.data.instructors[0].first_name }} and
+								{{ course.data.instructors[1].first_name }}
+							</span>
+							<span v-if="course.data.instructors.length > 2">
+								{{ course.data.instructors[0].first_name }} and
+								{{ course.data.instructors.length - 1 }} others
+							</span>
+						</div>
+					</div>
+					<div class="flex mt-3 mb-4 w-fit">
+						<Badge
+							theme="gray"
+							size="lg"
+							class="mr-2"
+							v-for="tag in course.data.tags"
+						>
+							{{ tag }}
+						</Badge>
 					</div>
-				</div>
-			</div>
-			<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
-				<div class="">
 					<div
 						v-html="course.data.description"
 						class="course-description"
 					></div>
 					<div class="mt-10">
-						<div class="text-2xl font-semibold">
-							{{ __('Course Content') }}
-						</div>
-						<CourseOutline :courseName="course.data.name" />
+						<CourseOutline
+							:courseName="course.data.name"
+							:showOutline="true"
+							:showHeader="true"
+						/>
 					</div>
 					<CourseReviews
 						v-if="course.data.avg_rating"
@@ -73,7 +92,7 @@
 						:membership="course.data.membership"
 					/>
 				</div>
-				<div>
+				<div class="">
 					<CourseCardOverlay :course="course" />
 				</div>
 			</div>
@@ -81,7 +100,7 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs } from 'frappe-ui'
+import { createResource, Breadcrumbs, Badge, Tooltip } from 'frappe-ui'
 import { computed } from 'vue'
 import { Users, Star } from 'lucide-vue-next'
 import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index 7f8412ce..000b58cb 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -9,7 +9,7 @@
 					:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
 				/>
 				<div class="flex">
-					<Button v-if="user.data.is_moderator" variant="solid">
+					<Button v-if="user.data?.is_moderator" variant="solid">
 						<template #prefix>
 							<Plus class="h-4 w-4" />
 						</template>
@@ -17,8 +17,19 @@
 					</Button>
 				</div>
 			</header>
-			<div class="pb-5">
-				<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
+			<div class="">
+				<div
+					v-if="courses.data.length == 0 && courses.list.loading"
+					class="p-5 text-base text-gray-700"
+				>
+					Loading Courses...
+				</div>
+				<Tabs
+					v-else
+					v-model="tabIndex"
+					:tabs="tabs"
+					tablistClass="overflow-x-visible"
+				>
 					<template #tab="{ tab, selected }">
 						<div>
 							<button
@@ -27,16 +38,7 @@
 							>
 								<component v-if="tab.icon" :is="tab.icon" class="h-5" />
 								{{ __(tab.label) }}
-								<Badge
-									:class="
-										selected
-											? 'text-gray-800 border border-gray-800'
-											: 'border border-gray-500'
-									"
-									variant="subtle"
-									theme="gray"
-									size="sm"
-								>
+								<Badge theme="gray">
 									{{ tab.count }}
 								</Badge>
 							</button>
@@ -45,7 +47,7 @@
 					<template #default="{ tab }">
 						<div
 							v-if="tab.courses && tab.courses.value.length"
-							class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5 mx-5"
+							class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 my-5 mx-5"
 						>
 							<router-link
 								v-for="course in tab.courses.value"
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 68859559..6c984cce 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -98,7 +98,7 @@
 							allowfullscreen
 						></iframe>
 					</div>
-					<div v-for="block in lesson.data.body.split('\n\n')">
+					<div v-for="block in lesson.data.body.split('\n\n\n')">
 						<div v-if="block.includes('{{ YouTubeVideo')">
 							<iframe
 								class="youtube-video"
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 9127796f..0af3e8d7 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -84,7 +84,7 @@ def get_membership(course, member=None, batch=None):
 		membership = frappe.db.get_value(
 			"LMS Enrollment",
 			filters,
-			["name", "batch_old", "current_lesson", "member_type", "progress"],
+			["name", "batch_old", "current_lesson", "member_type", "progress", "member"],
 			as_dict=True,
 		)
 
@@ -362,10 +362,8 @@ def get_mentors(course):
 	return course_mentors
 
 
-def is_eligible_to_review(course, membership):
+def is_eligible_to_review(course):
 	"""Checks if user is eligible to review the course"""
-	if not membership:
-		return False
 	if frappe.db.count(
 		"LMS Course Review", {"course": course, "owner": frappe.session.user}
 	):
@@ -1184,6 +1182,7 @@ def get_course_details(course):
 		[
 			"name",
 			"title",
+			"tags",
 			"description",
 			"image",
 			"video_link",
@@ -1198,7 +1197,7 @@ def get_course_details(course):
 		],
 		as_dict=1,
 	)
-	course_details.tags = get_tags(course_details.name)
+	course_details.tags = course_details.tags.split(",") if course_details.tags else []
 	course_details.lesson_count = get_lesson_count(course_details.name)
 
 	course_details.enrollment_count = frappe.db.count(
@@ -1215,9 +1214,9 @@ def get_course_details(course):
 
 	course_details.instructors = get_instructors(course_details.name)
 	if course_details.paid_course:
-		course_details.course_price, course_details.currency = check_multicurrency(
-			course_details.course_price, course_details.currency, None, course_details.amount_usd
-		)
+		"""course_details.course_price, course_details.currency = check_multicurrency(
+		        course_details.course_price, course_details.currency, None, course_details.amount_usd
+		)"""
 		course_details.price = fmt_money(
 			course_details.course_price, 0, course_details.currency
 		)
@@ -1229,7 +1228,7 @@ def get_course_details(course):
 		course_details.membership = frappe.db.get_value(
 			"LMS Enrollment",
 			{"member": frappe.session.user, "course": course_details.name},
-			["name", "course", "current_lesson", "progress"],
+			["name", "course", "current_lesson", "progress", "member"],
 			as_dict=1,
 		)
 		course_details.is_instructor = is_instructor(course_details.name)
@@ -1238,6 +1237,7 @@ def get_course_details(course):
 		course_details.current_lesson = get_lesson_index(
 			course_details.membership.current_lesson
 		)
+
 	return course_details
 
 
@@ -1306,7 +1306,7 @@ def get_lesson(course, chapter, lesson):
 		not lesson_details.include_in_preview
 		and not membership
 		and not has_course_moderator_role()
-		and not is_instructor(course.name)
+		and not is_instructor(course)
 	):
 		return {
 			"no_preview": 1,
diff --git a/lms/templates/reviews_cta.html b/lms/templates/reviews_cta.html
index dfb06f44..1fe718f0 100644
--- a/lms/templates/reviews_cta.html
+++ b/lms/templates/reviews_cta.html
@@ -1,4 +1,4 @@
-{% if is_eligible_to_review(course.name, membership) %}
+{% if membership and is_eligible_to_review(course.name) %}
     <span class="btn btn-secondary btn-sm review-link">
         {{ _("Write a review") }}
     </span>