feat: paid certifications on courses

frontend/src/components/CourseCard.vue

@@ -100,9 +100,15 @@
 					<CourseInstructors :instructors="course.instructors" />
 				</div>
 
-				<div class="font-semibold">
+				<div v-if="course.paid_course" class="font-semibold">
 					{{ course.price }}
 				</div>
+				<div
+					v-if="course.paid_certificate"
+					class="text-xs text-ink-blue-3 bg-surface-blue-1 py-0.5 px-1 rounded-md"
+				>
+					{{ __('Paid Certificate') }}
+				</div>
 			</div>
 		</div>
 	</div>

frontend/src/components/CourseCardOverlay.vue

@@ -6,7 +6,7 @@
 			class="rounded-t-md min-h-56 w-full"
 		/>
 		<div class="p-5">
-			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
+			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
 			<router-link
@@ -113,12 +113,21 @@
 						{{ course.data.rating }} {{ __('Rating') }}
 					</span>
 				</div>
+				<div
+					v-if="course.data.paid_certificate"
+					class="flex items-center font-semibold text-ink-gray-9"
+				>
+					<GraduationCap class="h-4 w-4 stroke-2" />
+					<span class="ml-2">
+						{{ __('Paid Certificate') }}
+					</span>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { BookOpen, Users, Star } from 'lucide-vue-next'
+import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
 import { showToast, formatAmount } from '@/utils/'

frontend/src/components/CourseReviews.vue

@@ -38,7 +38,7 @@
 						<div class="flex mt-2">
 							<Star
 								v-for="index in 5"
-								class="h-5 w-5 text-ink-gray-2 rounded-sm mr-2"
+								class="h-5 w-5 text-ink-gray-1 rounded-sm mr-2"
 								:class="
 									index <= Math.ceil(review.rating)
 										? 'fill-orange-500'

frontend/src/pages/Billing.vue

@@ -21,11 +21,11 @@
 				<div
 					class="h-fit bg-surface-gray-2 rounded-md p-5 space-y-4 lg:order-last mb-10 lg:mt-10 text-sm font-medium lg:w-1/4"
 				>
-					<div class="flex items-center justify-between space-x-2">
+					<div class="flex flex-col space-y-2">
 						<div class="text-ink-gray-5">
-							{{ __('Ordered Item') }}
+							{{ __('Payment for ') }} {{ type }}:
 						</div>
-						<div class="">
+						<div class="leading-5">
 							{{ orderSummary.data.title }}
 						</div>
 					</div>
@@ -126,7 +126,7 @@
 						<p class="text-ink-gray-5">
 							{{
 								__(
-									'Make sure to enter the right billing name as the same will be used in your invoice.'
+									'Make sure to enter the correct billing name as the same will be used in your invoice.'
 								)
 							}}
 						</p>
@@ -140,10 +140,10 @@
 		<div v-else-if="access.data?.message">
 			<NotPermitted
 				:text="access.data.message"
-				:buttonLabel="
-					type == 'course' ? 'Checkout Courses' : 'Checkout Batches'
+				:buttonLabel="type == 'course' ? 'Checkout Course' : 'Checkout Batch'"
+				:buttonLink="
+					type == 'course' ? `/lms/courses/${name}` : `/lms/batches/${name}`
 				"
-				:buttonLink="type == 'course' ? '/lms/courses' : '/lms/batches'"
 			/>
 		</div>
 		<div v-else-if="!user.data?.name">
@@ -163,7 +163,7 @@ import {
 	Breadcrumbs,
 	Tooltip,
 } from 'frappe-ui'
-import { reactive, inject, onMounted, ref } from 'vue'
+import { reactive, inject, onMounted, computed } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
 import { showToast } from '@/utils/'
@@ -193,7 +193,7 @@ const props = defineProps({
 const access = createResource({
 	url: 'lms.lms.api.validate_billing_access',
 	params: {
-		type: props.type,
+		billing_type: props.type,
 		name: props.name,
 	},
 	onSuccess(data) {
@@ -206,7 +206,7 @@ const orderSummary = createResource({
 	url: 'lms.lms.utils.get_order_summary',
 	makeParams(values) {
 		return {
-			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
+			doctype: props.type == 'batch' ? 'LMS Batch' : 'LMS Course',
 			docname: props.name,
 			country: billingDetails.country,
 		}
@@ -236,13 +236,15 @@ const paymentLink = createResource({
 	url: 'lms.lms.payments.get_payment_link',
 	makeParams(values) {
 		return {
-			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
+			doctype: props.type == 'batch' ? 'LMS Batch' : 'LMS Course',
 			docname: props.name,
 			title: orderSummary.data.title,
 			amount: orderSummary.data.original_amount,
 			total_amount: orderSummary.data.amount,
 			currency: orderSummary.data.currency,
 			address: billingDetails,
+			redirect_to: redirectTo,
+			payment_for_certificate: props.type == 'certificate',
 		}
 	},
 })
@@ -347,4 +349,14 @@ const changeCurrency = (country) => {
 	billingDetails.country = country
 	orderSummary.reload()
 }
+
+const redirectTo = computed(() => {
+	if (props.type == 'course') {
+		return `/lms/courses/${props.name}`
+	} else if (props.type == 'batch') {
+		return `/lms/batches/${props.name}`
+	} else if (props.type == 'certificate') {
+		return `/lms/courses/${props.name}/certification`
+	}
+})
 </script>

frontend/src/pages/CourseCertification.vue

@@ -0,0 +1,2 @@
+<template>Course Certificate</template>
+<script setup></script>

frontend/src/pages/CourseForm.vue

@@ -160,7 +160,7 @@
 						<div class="text-lg font-semibold mt-5 mb-4">
 							{{ __('Settings') }}
 						</div>
-						<div class="grid grid-cols-3 gap-10 mb-4">
+						<div class="grid grid-cols-2 gap-10 mb-4">
 							<div
 								v-if="user.data?.is_moderator"
 								class="flex flex-col space-y-4"
@@ -188,35 +188,38 @@
 									v-model="course.featured"
 									:label="__('Featured')"
 								/>
-							</div>
-							<div class="flex flex-col space-y-3">
 								<FormControl
 									type="checkbox"
 									v-model="course.disable_self_learning"
 									:label="__('Disable Self Enrollment')"
 								/>
-								<FormControl
-									type="checkbox"
-									v-model="course.enable_certification"
-									:label="__('Completion Certificate')"
-								/>
 							</div>
 						</div>
 					</div>
 					<div class="container border-t">
 						<div class="text-lg font-semibold mt-5 mb-4">
-							{{ __('Pricing') }}
+							{{ __('Pricing and Certification') }}
 						</div>
-						<div class="mb-4">
+						<div class="grid grid-cols-3 mb-4">
 							<FormControl
 								type="checkbox"
 								v-model="course.paid_course"
 								:label="__('Paid Course')"
 							/>
+							<FormControl
+								type="checkbox"
+								v-model="course.enable_certification"
+								:label="__('Completion Certificate')"
+							/>
+							<FormControl
+								type="checkbox"
+								v-model="course.paid_certificate"
+								:label="__('Paid Certificate')"
+							/>
 						</div>
 						<FormControl
 							v-model="course.course_price"
-							:label="__('Course Price')"
+							:label="__('Amount')"
 							class="mb-4"
 						/>
 						<Link

frontend/src/pages/Lesson.vue

@@ -4,6 +4,45 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
+			<div
+				v-if="
+					lesson.data && lesson.data.membership && lesson.data.paid_certificate
+				"
+			>
+				<router-link
+					v-if="!lesson.data.membership.purchased_certificate"
+					:to="{
+						name: 'Billing',
+						params: {
+							type: 'certificate',
+							name: courseName,
+						},
+					}"
+				>
+					<Button>
+						<template #prefix>
+							<GraduationCap class="size-4 stroke-1.5" />
+						</template>
+						{{ __('Get Certified') }}
+					</Button>
+				</router-link>
+				<router-link
+					v-else-if="!lesson.data.membership.certficate"
+					:to="{
+						name: 'CourseCertification',
+						params: {
+							courseName: courseName,
+						},
+					}"
+				>
+					<Button>
+						<template #prefix>
+							<GraduationCap class="size-4 stroke-1.5" />
+						</template>
+						{{ __('Get Certified') }}
+					</Button>
+				</router-link>
+			</div>
 		</header>
 		<div class="grid md:grid-cols-[70%,30%] h-screen">
 			<div
@@ -197,7 +236,7 @@ import { computed, watch, inject, ref, onMounted, onBeforeUnmount } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRouter, useRoute } from 'vue-router'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { ChevronLeft, ChevronRight, GraduationCap } from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
 import { getEditorTools, updateDocumentTitle } from '../utils'
 import EditorJS from '@editorjs/editorjs'

frontend/src/router.js

@@ -28,6 +28,12 @@ const routes = [
 		component: () => import('@/pages/Lesson.vue'),
 		props: true,
 	},
+	{
+		path: '/courses/:courseName/certification',
+		name: 'CourseCertification',
+		component: () => import('@/pages/CourseCertification.vue'),
+		props: true,
+	},
 	{
 		path: '/courses/:courseName/learn/:chapterName',
 		name: 'SCORMChapter',