feat: add 4 certificate templates (#295)

* add cloud translation api package

* feat: Script that auto generates translations for other languages

* add comments

* fix: broken translation

* improve translation

* update locck file

* clean up

* all round trasnlations check

* checkpoint

* finish up

* move to dev dependencies

* fix vercel build error

* translations fix

* - add documentation
- translation bug fix

* quick adjust

* PR Fixes

* add new line

* update docs

* checkpoint

* feat: redesign & addition of certificates

* text color update

* patterned width fix

* "student-name" class remove

* checkpoint

* PR Fix

* quick fix

* PR Fixes

* update certificate ready page for students

* PR Fixes

* quick cleanup

* move fetchCourses into .ts file

* feat: give students access to certificates only after completing course

* checkpoint

* height fix

* Merge branch 'main' of https://github.com/rotimi-best/classroomio into classroomio-issue-272

* Fix; merge PR Fix

* fix: width of plain & professional certs

* PR Fix

* feat: add translation

* handle error when trying to download a certificate

* add fetchExploreCourses

* fix: requested reviews

* review fixes checkpoint

* replace the certificate background

* height fix for patterned certififcates

* fix more bugs

* rename schema

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte

@@ -13,12 +13,12 @@
   import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
   import { t } from '$lib/utils/functions/translations';
 
-  export let courseId: string = '';
+  export let data;
 </script>
 
 <IssueCertificateModal />
 
-<CourseContainer bind:courseId>
+<CourseContainer bind:courseId={data.courseId}>
   <PageNav title={$t('course.navItem.certificates.title')} disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -32,11 +32,11 @@
     </slot:fragment>
   </PageNav>
 
-  <PageBody className="w-full mx-0" padding="px-3">
+  <PageBody className="w-full mx-0" padding="px-3 pb-10">
     <RoleBasedSecurity allowedRoles={[1, 2]}>
       <Design />
     </RoleBasedSecurity>
-    <RoleBasedSecurity allowedRoles={[3]}>
+    <RoleBasedSecurity onlyStudent>
       <StudentCertificate />
     </RoleBasedSecurity>
 

apps/dashboard/src/routes/lms/+page.svelte

@@ -5,7 +5,7 @@
   import { goto } from '$app/navigation';
   import { profile } from '$lib/utils/store/user';
   import { currentOrg } from '$lib/utils/store/org';
-  import { fetchCourses } from '$lib/components/Courses/api';
+  import { fetchCourses } from '$lib/utils/services/courses';
   import { courses, courseMetaDeta } from '$lib/components/Courses/store';
   import type { Course } from '$lib/utils/types';
   import { getGreeting } from '$lib/utils/functions/date';

apps/dashboard/src/routes/lms/community/[slug]/+page.svelte

@@ -23,7 +23,7 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { browser } from '$app/environment';
-  import { fetchCourses } from '$lib/components/Courses/api';
+  import { fetchCourses } from '$lib/utils/services/courses';
   import { t } from '$lib/utils/functions/translations';
   import { courses } from '$lib/components/Courses/store';
   import type { Course } from '$lib/utils/types';

apps/dashboard/src/routes/lms/community/ask/+page.svelte

@@ -11,7 +11,6 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { profile } from '$lib/utils/store/user';
-  import { fetchCourses } from '$lib/components/Courses/api';
   import { t } from '$lib/utils/functions/translations';
   import { courses } from '$lib/components/Courses/store';
   import type { Course } from '$lib/utils/types';

apps/dashboard/src/routes/lms/explore/+page.svelte

@@ -2,10 +2,10 @@
   import { onMount } from 'svelte';
   import { Search, Dropdown } from 'carbon-components-svelte';
   import { profile } from '$lib/utils/store/user';
-  import { fetchExploreCourses } from '$lib/components/Courses/api';
+  import { fetchExploreCourses } from '$lib/utils/services/courses';
   import Courses from '$lib/components/Courses/index.svelte';
 
-  import { courses, courseMetaDeta } from '$lib/components/Courses/store';
+  import { courseMetaDeta } from '$lib/components/Courses/store';
   import { currentOrg } from '$lib/utils/store/org';
   import type { Course } from '$lib/utils/types';
   import { browser } from '$app/environment';
@@ -20,6 +20,7 @@
   let filteredExploreCourses: Course[];
   let hasFetched = false;
   let exploreCourseList: Course[] = [];
+
   async function getCourses(userId: string | null, orgId: string) {
     if (hasFetched || !userId || !orgId) {
       return;

apps/dashboard/src/routes/lms/mylearning/+page.svelte

@@ -3,7 +3,7 @@
   import Tabs from '$lib/components/Tabs/index.svelte';
   import TabContent from '$lib/components/TabContent/index.svelte';
   import Courses from '$lib/components/Courses/index.svelte';
-  import { fetchCourses } from '$lib/components/Courses/api';
+  import { fetchCourses } from '$lib/utils/services/courses';
   import { profile } from '$lib/utils/store/user';
   import { currentOrg } from '$lib/utils/store/org';
   import {

apps/dashboard/src/routes/org/[slug]/community/[slug]/+page.svelte

@@ -23,7 +23,7 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { browser } from '$app/environment';
-  import { fetchCourses } from '$lib/components/Courses/api';
+  import { fetchCourses } from '$lib/utils/services/courses';
   import { t } from '$lib/utils/functions/translations';
   import { courses } from '$lib/components/Courses/store';
   import type { Course } from '$lib/utils/types';

apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte

@@ -12,7 +12,7 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { profile } from '$lib/utils/store/user';
-  import { fetchCourses } from '$lib/components/Courses/api';
+  import { fetchCourses } from '$lib/utils/services/courses';
   import { t } from '$lib/utils/functions/translations';
   import { courses } from '$lib/components/Courses/store';
   import type { Course } from '$lib/utils/types';

apps/dashboard/src/routes/org/[slug]/courses/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Search, Dropdown } from 'carbon-components-svelte';
   import { profile } from '$lib/utils/store/user';
-  import { fetchCourses } from '$lib/components/Courses/api';
+  import { fetchCourses } from '$lib/utils/services/courses';
   import Courses from '$lib/components/Courses/index.svelte';
   import NewCourseModal from '$lib/components/Courses/components/NewCourseModal/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';