feat: eval and certification flow with purchased certificate

frontend/src/pages/Lesson.vue

@@ -4,45 +4,7 @@
 			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>
+			<CertificationLinks :courseName="courseName" />
 		</header>
 		<div class="grid md:grid-cols-[70%,30%] h-screen">
 			<div
@@ -243,6 +205,7 @@ import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
+import CertificationLinks from '@/components/CertificationLinks.vue'
 
 const user = inject('$user')
 const router = useRouter()