ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: course and org landing page improvements (#468)

Browse Source 
* make gift section HTML rendered

* hide classroomio branding on landing page

* improve section expanding

* feat: toggle show sections on course landing page

* fix: show discount on landing page course card
This commit is contained in:
Rotimi Best
2024-09-09 01:14:55 +01:00
committed by GitHub
parent 982acb0711
commit 8ab51095a7
27 changed files with 531 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/Course/components/NewsFeed/NewsFeedCard.svelte
+6 -4
View File
@@ -30,7 +30,9 @@
let comment = '';
let areCommentsExpanded = false;
let isDeleteFeedModal = false;
let errors = {};
let errors: {
newComment: string;
};
let reactions = {
smile: '😀',
@@ -58,7 +60,7 @@
const handleAddNewComment = (event) => {
if (event.key === 'Enter' || event.type === 'click') {
errors = addNewsfeedCommentValidation(comment);
errors = addNewsfeedCommentValidation(comment) as typeof errors;
if (Object.keys(errors).length) {
return;
}
@@ -230,8 +232,8 @@
<Send size={24} />
</button>
</div>
{#if errors.newComment}
<p class="text-sm text-red-500">{errors.newComment}</p>
{#if errors?.newComment}
<p class="text-sm text-red-500">{errors?.newComment}</p>
{/if}
</section>
<DeleteFeedConfirmation bind:openDeleteModal={isDeleteFeedModal} deleteFeed={handleDeleteFeed} />
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/CertificateForm.svelte
+80
View File
@@ -0,0 +1,80 @@
<script lang="ts">
import cloneDeep from 'lodash/cloneDeep';
import set from 'lodash/set';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { Toggle } from 'carbon-components-svelte';
import UploadImage from '$lib/components/UploadImage/index.svelte';
import { uploadAvatar } from '$lib/utils/services/courses';
import type { Course } from '$lib/utils/types';
import { t } from '$lib/utils/functions/translations';
import { NAV_ITEM_KEY } from '../../constants';
export let course: Course;
let avatar: string | undefined;
let show: boolean;
let templateUrl: string | undefined;
let hasBeenSet = false;
let isUploading = false;
function setter(value: any, setterKey: string) {
if (typeof value === 'undefined') return;
const _course = cloneDeep(course);
set(_course, setterKey, value);
course = _course;
}
async function onTemplateChange(_avatar: string | undefined) {
if (!_avatar || !course.id) return;
isUploading = true;
const logo = await uploadAvatar(course.id, _avatar);
if (logo) {
templateUrl = logo;
setter(templateUrl, 'metadata.certificate.templateUrl');
}
isUploading = false;
}
function setDefaults(course: Course) {
if (isEmpty(course) || hasBeenSet) return;
hasBeenSet = true;
show = get(course, `metadata.sectionDisplay.${NAV_ITEM_KEY.CERTIFICATE}`) ?? true;
templateUrl = get(
course,
'metadata.certificate.templateUrl',
'/images/certificate-template.svg'
);
}
$: onTemplateChange(avatar);
$: setter(show, `metadata.sectionDisplay.${NAV_ITEM_KEY.CERTIFICATE}`);
$: setDefaults(course);
</script>
<div class="mt-5 border-bottom-c">
<p class="font-bold">
{$t('course.navItem.landing_page.editor.certificate_form.upload_template')}
</p>
<UploadImage bind:avatar src={templateUrl} shape="rounded-none" bind:isUploading />
</div>
<div class="mt-5">
<p class="font-bold">
{$t('course.navItem.landing_page.editor.display_section')}
</p>
<Toggle bind:toggled={show} size="sm">
<span slot="labelA" style="color: gray">{$t('settings.landing_page.hide_section')}</span>
<span slot="labelB" style="color: gray">{$t('settings.landing_page.show_section')}</span>
</Toggle>
</div>
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/DescriptionForm.svelte
+46 -4
View File
@@ -1,9 +1,51 @@
<script>
<script lang="ts">
import TextEditor from '$lib/components/TextEditor/index.svelte';
import cloneDeep from 'lodash/cloneDeep';
import set from 'lodash/set';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { Toggle } from 'carbon-components-svelte';
import type { Course } from '$lib/utils/types';
import { t } from '$lib/utils/functions/translations';
import { NAV_ITEM_KEY } from '../../constants';
export let value = '';
export let course: Course;
let show: boolean;
let hasBeenSet = false;
function setter(value: any, setterKey: string) {
if (typeof value === 'undefined') return;
const _course = cloneDeep(course);
set(_course, setterKey, value);
course = _course;
}
function setDefaults(course: Course) {
if (isEmpty(course) || hasBeenSet) return;
hasBeenSet = true;
show = get(course, `metadata.sectionDisplay.${NAV_ITEM_KEY.DESCRIPTION}`) ?? true;
}
$: setter(show, `metadata.sectionDisplay.${NAV_ITEM_KEY.DESCRIPTION}`);
$: setDefaults(course);
</script>
<div class="h-2/5">
<TextEditor bind:value />
<div>
<TextEditor bind:value={course.metadata.description} />
</div>
<div class="mt-5">
<p class="font-bold">
{$t('course.navItem.landing_page.editor.display_section')}
</p>
<Toggle bind:toggled={show} size="sm">
<span slot="labelA" style="color: gray">{$t('settings.landing_page.hide_section')}</span>
<span slot="labelB" style="color: gray">{$t('settings.landing_page.show_section')}</span>
</Toggle>
</div>
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/GoalsForm.svelte
+46 -4
View File
@@ -1,9 +1,51 @@
<script>
<script lang="ts">
import cloneDeep from 'lodash/cloneDeep';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import set from 'lodash/set';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { Toggle } from 'carbon-components-svelte';
import type { Course } from '$lib/utils/types';
import { t } from '$lib/utils/functions/translations';
import { NAV_ITEM_KEY } from '../../constants';
export let value = '';
export let course: Course;
let show: boolean;
let hasBeenSet = false;
function setter(value: any, setterKey: string) {
if (typeof value === 'undefined') return;
const _course = cloneDeep(course);
set(_course, setterKey, value);
course = _course;
}
function setDefaults(course: Course) {
if (isEmpty(course) || hasBeenSet) return;
hasBeenSet = true;
show = get(course, `metadata.sectionDisplay.${NAV_ITEM_KEY.GOALS}`) ?? true;
}
$: setter(show, `metadata.sectionDisplay.${NAV_ITEM_KEY.GOALS}`);
$: setDefaults(course);
</script>
<div class="h-2/5">
<TextEditor bind:value />
<div class="">
<TextEditor bind:value={course.metadata.goals} />
</div>
<div class="mt-5">
<p class="font-bold">
{$t('course.navItem.landing_page.editor.display_section')}
</p>
<Toggle bind:toggled={show} size="sm">
<span slot="labelA" style="color: gray">{$t('settings.landing_page.hide_section')}</span>
<span slot="labelB" style="color: gray">{$t('settings.landing_page.show_section')}</span>
</Toggle>
</div>
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/InstructorForm.svelte
+11 -6
View File
@@ -11,6 +11,7 @@
import { t } from '$lib/utils/functions/translations';
export let course: Course;
let name: string | undefined;
let role: string | undefined;
let imgUrl: string | undefined;
@@ -18,6 +19,7 @@
let courseNo: string | undefined;
let avatar: string | undefined;
let hasBeenSet = false;
let isUploading = false;
function setter(value: any, setterKey: string) {
if (!value) return;
@@ -30,12 +32,13 @@
async function onAvatarChange(_avatar: string | undefined) {
if (!_avatar || !course.id) return;
isUploading = true;
const logo = await uploadAvatar(course.id, _avatar);
if (!logo) return;
imgUrl = logo;
isUploading = false;
}
function setDefaults(course: Course) {
@@ -60,11 +63,13 @@
$: setDefaults(course);
</script>
<div class="mt-5">
<label for="upload" class="font-bold"
>{$t('course.navItem.landing_page.editor.instructor_form.upload')}</label
>
<UploadImage bind:avatar src={imgUrl} />
<div class="mt-5 w-full">
<label for="upload" class="font-bold">
{$t('course.navItem.landing_page.editor.instructor_form.upload')}
</label>
<div class="w-full flex justify-center">
<UploadImage bind:avatar src={imgUrl} bind:isUploading />
</div>
</div>
<TextField
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/RequirementForm.svelte
+45 -3
View File
@@ -1,9 +1,51 @@
<script lang="ts">
import TextEditor from '$lib/components/TextEditor/index.svelte';
import cloneDeep from 'lodash/cloneDeep';
import set from 'lodash/set';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { Toggle } from 'carbon-components-svelte';
import type { Course } from '$lib/utils/types';
import { t } from '$lib/utils/functions/translations';
import { NAV_ITEM_KEY } from '../../constants';
export let value: string | undefined;
export let course: Course;
let show: boolean;
let hasBeenSet = false;
function setter(value: any, setterKey: string) {
if (typeof value === 'undefined') return;
const _course = cloneDeep(course);
set(_course, setterKey, value);
course = _course;
}
function setDefaults(course: Course) {
if (isEmpty(course) || hasBeenSet) return;
hasBeenSet = true;
show = get(course, `metadata.sectionDisplay.${NAV_ITEM_KEY.REQUIREMENT}`) ?? true;
}
$: setter(show, `metadata.sectionDisplay.${NAV_ITEM_KEY.REQUIREMENT}`);
$: setDefaults(course);
</script>
<div class="h-2/5">
<TextEditor bind:value />
<div>
<TextEditor bind:value={course.metadata.requirements} />
</div>
<div class="mt-5">
<p class="font-bold">
{$t('course.navItem.landing_page.editor.display_section')}
</p>
<Toggle bind:toggled={show} size="sm">
<span slot="labelA" style="color: gray">{$t('settings.landing_page.hide_section')}</span>
<span slot="labelB" style="color: gray">{$t('settings.landing_page.show_section')}</span>
</Toggle>
</div>
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/index.svelte
+16 -7
View File
@@ -16,6 +16,7 @@
import PricingForm from './PricingForm.svelte';
import GoalsForm from './GoalsForm.svelte';
import ReviewsForm from './ReviewsForm.svelte';
import CertificateForm from './CertificateForm.svelte';
import InstructorForm from './InstructorForm.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -73,16 +74,21 @@
{
key: 5,
path: '',
title: $t('course.navItem.landing_page.editor.title.reviews')
title: $t('course.navItem.landing_page.editor.title.certificate')
},
{
key: 6,
path: '',
title: $t('course.navItem.landing_page.editor.title.instructor')
title: $t('course.navItem.landing_page.editor.title.reviews')
},
{
key: 7,
path: '',
title: $t('course.navItem.landing_page.editor.title.instructor')
},
{
key: 8,
path: '',
title: $t('course.navItem.landing_page.editor.title.pricing')
}
];
@@ -123,6 +129,7 @@
attendance: undefined,
group: undefined,
lessons: undefined,
lesson_section: undefined,
polls: undefined,
slug: course.slug
});
@@ -228,16 +235,18 @@
{#if selectedSection.key === 1}
<HeaderForm bind:course />
{:else if selectedSection.key === 2}
<RequirementForm bind:value={course.metadata.requirements} />
<RequirementForm bind:course />
{:else if selectedSection.key === 3}
<DescriptionForm bind:value={course.metadata.description} />
<DescriptionForm bind:course />
{:else if selectedSection.key === 4}
<GoalsForm bind:value={course.metadata.goals} />
<GoalsForm bind:course />
{:else if selectedSection.key === 5}
<ReviewsForm bind:course />
<CertificateForm bind:course />
{:else if selectedSection.key === 6}
<InstructorForm bind:course />
<ReviewsForm bind:course />
{:else if selectedSection.key === 7}
<InstructorForm bind:course />
{:else if selectedSection.key === 8}
<PricingForm bind:course />
{/if}
</div>
apps/dashboard/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+11 -12
View File
@@ -6,11 +6,13 @@
import { getStudentInviteLink } from '$lib/utils/functions/course';
import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
import { goto } from '$app/navigation';
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
import PaymentModal from './PaymentModal.svelte';
import type { Course } from '$lib/utils/types';
import { ROLE } from '$lib/utils/constants/roles';
import { capturePosthogEvent } from '$lib/utils/services/posthog';
import { t } from '$lib/utils/functions/translations';
import { calcCourseDiscount } from '$lib/utils/functions/course';
export let className = '';
export let editMode = false;
@@ -24,13 +26,6 @@
let formatter: Intl.NumberFormat | undefined;
let isFree = false;
function calcDisc(percent: number, cost: number, showDiscount: boolean) {
if (!percent || !showDiscount) return cost;
const discountAmount = (percent / 100) * cost;
const discountedPrice = cost - discountAmount;
return Math.round(discountedPrice);
}
function handleJoinCourse() {
if (editMode) return;
@@ -64,7 +59,11 @@
$: setFormatter(courseData.currency);
$: discount = get(courseData, 'metadata.discount', 0);
$: calculatedCost = calcDisc(discount, courseData.cost || 0, !!courseData.metadata.showDiscount);
$: calculatedCost = calcCourseDiscount(
discount,
courseData.cost || 0,
!!courseData.metadata.showDiscount
);
$: isFree = isCourseFree(calculatedCost);
$: startCoursePayment && handleJoinCourse();
</script>
@@ -101,9 +100,9 @@
{#if courseData?.metadata?.showDiscount}
<p class="dark:text-white font-light text-sm text-gray-500">
{discount}% {$t('course.navItem.landing_page.pricing_section.discount')}.
<span class="line-through"
>{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
>
<span class="line-through">
{formatter?.format(courseData?.cost || 0) || courseData.cost}
</span>
</p>
{/if}
{:else}
@@ -180,7 +179,7 @@
<!-- Gift Container -->
{#if courseData?.metadata?.reward?.show}
<div class="p-10 flex items-center flex-col border-t border-b border-gray-300">
{@html get(courseData, 'metadata.reward.description', '')}
<HtmlRender content={get(courseData, 'metadata.reward.description', '')} />
</div>
{/if}
</aside>
apps/dashboard/src/lib/components/CourseLandingPage/components/SectionsDisplay.svelte
+21 -26
View File
@@ -1,46 +1,41 @@
<script lang="ts">
import { CheckmarkOutline, ChevronDown, ChevronUp } from 'carbon-icons-svelte';
import pluralize from 'pluralize';
import { t } from '$lib/utils/functions/translations';
import type { Lesson } from '$lib/utils/types';
import IconButton from '$lib/components/IconButton/index.svelte';
export let index: number;
export let title: string;
export let lessonCount: number;
export let exerciseCount: number;
export let lessons: Lesson;
export let showLessons: boolean[] = Array(lessons.length).fill(true);
export let lessons: Lesson[];
function toggleShowLessons(index) {
showLessons[index] = !showLessons[index];
}
let expand = false;
</script>
<div class="w-full rounded-md my-3">
<!-- lesson header -->
<div class="py-1 pl-3 pr-4 bg-[#F7F7F7] text-sm font-medium flex items-center justify-between">
<button
class="py-3 pl-3 pr-4 bg-[#F7F7F7] dark:bg-neutral-700 text-sm font-medium flex items-center justify-between w-full"
on:click={() => (expand = !expand)}
>
<span class="flex items-center gap-2">
<IconButton onClick={() => toggleShowLessons(index)}>
{#if showLessons[index]}
<ChevronDown />
{:else}
<ChevronUp />
{/if}
</IconButton>
{title}</span
>
<span class="text-xs font-normal"
>{lessonCount}
{$t('course.navItem.landing_page.lessons')}, {exerciseCount}
{$t('course.navItem.landing_page.exercises')}</span
>
</div>
{#if expand}
<ChevronUp />
{:else}
<ChevronDown />
{/if}
{title}
</span>
<span class="text-xs font-normal">
{pluralize($t('course.navItem.landing_page.lessons'), lessonCount, true)},
{pluralize($t('course.navItem.landing_page.exercises'), exerciseCount, true)}
</span>
</button>
<!-- lessons -->
{#if showLessons[index]}
{#if expand}
{#each lessons as lesson}
<div class="py-3 pl-6 text-[13px] text-[#656565] flex items-center gap-5 lesson-section">
<div class="py-3 pl-3 text-[13px] text-[#656565] flex items-center gap-2 lesson-section">
<CheckmarkOutline size={16} class="scale-[0.8]" />
{lesson.title}
</div>
apps/dashboard/src/lib/components/CourseLandingPage/constants.ts
+12 -9
View File
@@ -1,10 +1,9 @@
// import { t } from '$lib/utils/functions/translations';
export const SECTION_KEYS = {
export const NAV_ITEM_KEY = {
HEADER: 'header',
REQUIREMENT: '#requirement',
DESCRIPTION: '#description',
GOALS: '#goals',
CERTIFICATE: '#certificate',
LESSONS: '#lessons',
REVIEWS: '#reviews',
INSTRUCTOR: '#instructor'
@@ -12,27 +11,31 @@ export const SECTION_KEYS = {
export const NAV_ITEMS = [
{
key: SECTION_KEYS.REQUIREMENT,
key: NAV_ITEM_KEY.REQUIREMENT,
label: 'course.navItem.landing_page.editor.title.requirement'
},
{
key: SECTION_KEYS.DESCRIPTION,
key: NAV_ITEM_KEY.DESCRIPTION,
label: 'course.navItem.landing_page.editor.title.description'
},
{
key: SECTION_KEYS.GOALS,
key: NAV_ITEM_KEY.GOALS,
label: 'course.navItem.landing_page.editor.title.goals'
},
{
key: SECTION_KEYS.LESSONS,
key: NAV_ITEM_KEY.CERTIFICATE,
label: 'course.navItem.landing_page.editor.title.certificate'
},
{
key: NAV_ITEM_KEY.LESSONS,
label: 'course.navItems.nav_content'
},
{
key: SECTION_KEYS.REVIEWS,
key: NAV_ITEM_KEY.REVIEWS,
label: 'course.navItem.landing_page.editor.title.reviews'
},
{
key: SECTION_KEYS.INSTRUCTOR,
key: NAV_ITEM_KEY.INSTRUCTOR,
label: 'course.navItem.landing_page.editor.title.instructor'
}
];
apps/dashboard/src/lib/components/CourseLandingPage/index.svelte
+96 -119
View File
@@ -1,14 +1,12 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import get from 'lodash/get';
import pluralize from 'pluralize';
import { page } from '$app/stores';
import { onMount, onDestroy } from 'svelte';
import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte'; //note
import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile.svelte'; // exercise
import Video from 'carbon-icons-svelte/lib/Video.svelte'; //video
import PlayFilled from 'carbon-icons-svelte/lib/PlayFilled.svelte';
import { ImageLoader, InlineLoading } from 'carbon-components-svelte';
import { NAV_ITEMS } from './constants';
import { getLectureNo } from '../Course/function';
import { currentOrg } from '$lib/utils/store/org';
import { course } from '$lib/components/Course/store';
@@ -30,6 +28,9 @@
import { observeIntersection } from './components/IntersectionObserver';
import SectionsDisplay from './components/SectionsDisplay.svelte';
import { getExerciseCount, getLessonSections, getTotalLessons, filterNavItems } from './utils';
import { NAV_ITEM_KEY, NAV_ITEMS } from './constants';
export let editMode = false;
export let courseData: Course;
const ratingsImg = [
@@ -48,26 +49,18 @@
let startCoursePayment = false;
let isVisible = false;
let observer: { destroy: () => void };
let certificate: Course['metadata']['certificate'] = {
templateUrl: '/images/certificate-template.svg'
};
// initialize the expandDescription array with 'false' values for each review.
let expandDescription = Array(reviews.length).fill(false);
// a variable that stores the sections and the lessons in each sections
const lesson_sections = createLessonSections(courseData);
let activeNav = NAV_ITEMS[0].key;
let instructor = {};
let video: string | undefined;
// get total lessons
const totalLessons = Array.isArray(lesson_sections)
? lesson_sections.reduce((total, section) => {
return total + section.lessons.length;
}, 0)
: 0;
function playVideo() {
console.log('open modal with video');
}
const lessonSections = getLessonSections(courseData);
const totalLessons = getTotalLessons(lessonSections);
function locationHashChanged() {
activeNav = window.location.hash;
@@ -86,18 +79,6 @@
expandDescription[id] = !expandDescription[id];
}
// this function creates a new lesson_section variable using the lessons section_id and groups them into appropriate sections,
// this way it solves the issue of the landing page being a standalone site
function createLessonSections(data) {
const lessonSections = data.lesson_section.map((section) => {
return {
...section,
lessons: data.lessons.filter((lesson) => lesson.section_id === section.id)
};
});
return lessonSections;
}
onMount(() => {
window.onhashchange = locationHashChanged;
const targetNode = document.querySelector('.target-component');
@@ -110,6 +91,8 @@
observer?.destroy();
});
$: initPlyr(player, video);
$: video = get(courseData, 'metadata.videoUrl');
$: allowNewStudent = get(courseData, 'metadata.allowNewStudent');
$: bannerImage = get(courseData, 'logo');
@@ -117,16 +100,16 @@
.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
$: instructor = get(courseData, 'metadata.instructor') || {};
$: initPlyr(player, video);
$: certificate = get(courseData, 'metadata.certificate', certificate);
$: navItems = filterNavItems(courseData, reviews);
$: navItemKeys = navItems.map((item) => item.key);
$: {
reviews = get(courseData, 'metadata.reviews') || [];
totalRatings = reviews?.reduce((acc = 0, review) => acc + (review?.rating || 0), 0);
averageRating = totalRatings / reviews?.length;
}
$: {
let imgurl = get(instructor, 'imgUrl', $currentOrg.avatar_url);
console.log({ imgurl, instructor, org: $currentOrg });
}
</script>
{#if !editMode}
@@ -214,6 +197,7 @@
{/if}
</div>
</header>
<!-- Body -->
<div class="w-full bg-white dark:bg-black">
<div
@@ -222,12 +206,11 @@
<!-- Course Details -->
<div class="course-content w-full p-3 lg:mr-10 lg:w-10/12">
<!-- Navigation -->
<nav
class="sticky top-0 flex items-center border-b border-gray-300 py-3 {!editMode &&
'lg:top-11'} bg-white dark:bg-neutral-800"
>
{#each NAV_ITEMS as navItem}
{#each navItems as navItem}
<a
href="{$page.url.pathname}{navItem.key}"
class="{navItem.key === activeNav &&
@@ -239,44 +222,75 @@
</nav>
<!-- Sections - Requirement -->
<section id="requirement" class="mt-8 border-b border-gray-300 pb-10">
<h3 class="mb-3 mt-0 text-2xl font-bold">
{$t('course.navItem.landing_page.requirement')}
</h3>
<ul class="list font-light">
<HtmlRender content={get(courseData, 'metadata.requirements', '')} />
</ul>
</section>
{#if navItemKeys.includes(NAV_ITEM_KEY.REQUIREMENT)}
<section
id="requirement"
transition:fade={{ delay: 250, duration: 300 }}
class="mt-8 border-b border-gray-300 pb-10"
>
<h3 class="mb-3 mt-0 text-2xl font-bold">
{$t('course.navItem.landing_page.requirement')}
</h3>
<ul class="list font-light">
<HtmlRender content={get(courseData, 'metadata.requirements', '')} />
</ul>
</section>
{/if}
<!-- Sections - Course Description -->
<section id="description" class="mt-8 border-b border-gray-300 pb-10">
<h3 class="mb-3 mt-0 text-2xl font-bold">
{$t('course.navItem.landing_page.description')}
</h3>
{#if navItemKeys.includes(NAV_ITEM_KEY.DESCRIPTION)}
<section
id="description"
transition:fade={{ delay: 250, duration: 300 }}
class="mt-8 border-b border-gray-300 pb-10"
>
<h3 class="mb-3 mt-0 text-2xl font-bold">
{$t('course.navItem.landing_page.description')}
</h3>
<HtmlRender
className="dark:text-white text-sm font-light"
content={get(courseData, 'metadata.description', '')}
/>
</section>
<HtmlRender
className="dark:text-white text-sm font-light"
content={get(courseData, 'metadata.description', '')}
/>
</section>
{/if}
<!-- Sections - Goal -->
<section id="goals" class="mt-8 pb-10">
<h3 class="text-2xl font-bold mt-0 mb-3">{$t('course.navItem.landing_page.learn')}</h3>
<ul class="list font-light">
<HtmlRender content={get(courseData, 'metadata.goals', '')} />
</ul>
</section>
{#if navItemKeys.includes(NAV_ITEM_KEY.GOALS)}
<section id="goals" transition:fade={{ delay: 250, duration: 300 }} class="mt-8 pb-10">
<h3 class="text-2xl font-bold mt-0 mb-3">{$t('course.navItem.landing_page.learn')}</h3>
<ul class="list font-light">
<HtmlRender content={get(courseData, 'metadata.goals', '')} />
</ul>
</section>
{/if}
<!-- Sections - Certificate -->
<section class="border-b border-gray-300 mt-8 pb-10">
<h3 class="text-2xl font-bold mt-0">{$t('course.navItem.landing_page.certificate')}</h3>
<p class="dark:text-white text-sm font-light mb-3">
{$t('course.navItem.landing_page.certificate_text')}
</p>
<img src="/images/certificate-template.svg" alt="certificate template" />
</section>
{#if navItemKeys.includes(NAV_ITEM_KEY.CERTIFICATE)}
<section
id="certificate"
transition:fade={{ delay: 250, duration: 300 }}
class="border-b border-gray-300 mt-8 pb-10"
>
<h3 class="text-2xl font-bold mt-0">{$t('course.navItem.landing_page.certificate')}</h3>
<p class="dark:text-white text-sm font-light mb-3">
{$t('course.navItem.landing_page.certificate_text')}
</p>
<ImageLoader
class="certificate-img max-h-[215px]"
src={certificate?.templateUrl}
alt="certificate template"
>
<svelte:fragment slot="loading">
<InlineLoading />
</svelte:fragment>
<svelte:fragment slot="error">An error occurred.</svelte:fragment>
</ImageLoader>
</section>
{/if}
<!-- Sections - Lessons -->
{#if $course.version === COURSE_VERSION.V1}
@@ -286,7 +300,6 @@
{$t('course.navItem.landing_page.content')}
</h3>
<p class="dark:text-white text-sm font-light">
<!-- {lessons.length} lessons -->
{pluralize('lesson', lessons.length, true)}
</p>
</div>
@@ -301,75 +314,35 @@
<p class="ml-2 text-xs font-light dark:text-white inline">
{lesson.title}
</p>
<!-- <div class="flex items-center">
{#if lesson.slide_url}
<span class="text-sm font-light flex w-2/4"
><PresentationFile size={16} class="mr-1" />{$t(
'course.navItem.landing_page.slide'
)}</span
>
{/if}
{#if lesson.note}
<span class="text-sm font-light flex w-2/4"
><Notebook size={16} class="mr-1" />{$t(
'course.navItem.landing_page.note'
)}</span
>
{/if}
</div> -->
<!-- <div class="flex items-center">
{#if lesson.videos}
<span class="text-sm font-light flex w-2/4"
><Video size={16} class="mr-1" />{lesson.videos.length}
{$t('course.navItem.landing_page.video')}{lesson.videos.length > 1 ? 's' : ''}
</span>
{/if}
{#if get(lesson, 'totalExercises[0].count')}
<span class="flex w-2/4 text-sm font-light"
><PageNumber size={16} class="mr-1" />{pluralize(
'exercise',
get(lesson, 'totalExercises[0].count', 0),
true
)}</span
>
{/if}
</div> -->
</div>
{/each}
</div>
</section>
{:else if $course.version === COURSE_VERSION.V2}
<section>
<section id="lessons">
<!-- header -->
<div class="flex items-center justify-between">
<h1>{$t('course.navItem.landing_page.course_content')}</h1>
<span class="text-xs font-normal"
>{lesson_sections?.length}
{$t('course.navItem.landing_page.modules')}, {totalLessons}
{$t('course.navItem.landing_page.lessons')}</span
>
<span class="text-xs font-normal">
{pluralize($t('course.navItem.landing_page.modules'), lessonSections.length, true)},
{pluralize($t('course.navItem.landing_page.lessons'), totalLessons, true)}
</span>
</div>
{#each lesson_sections as sections, index}
{#each lessonSections as section}
<SectionsDisplay
{index}
title={sections.title}
lessonCount={sections.lessons?.length}
exerciseCount={sections.lessons.reduce(
(total, lesson) => total + (lesson.totalExercises?.[0]?.count || 0),
0
)}
lessons={sections.lessons}
exerciseCount={getExerciseCount(section.lessons)}
lessonCount={section.lessons?.length}
lessons={section.lessons}
title={section.title}
/>
{/each}
</section>
{/if}
<!-- Sections - Reviews -->
{#if reviews && reviews.length > 0}
<section id="reviews">
{#if navItemKeys.includes(NAV_ITEM_KEY.REVIEWS)}
<section id="reviews" transition:fade={{ delay: 250, duration: 300 }}>
<h2 class="my-16 mr-0 mb-6 ml-0 font-semibold">
{$t('course.navItem.landing_page.reviews')}
</h2>
@@ -554,6 +527,10 @@
background-color: rgba(0, 0, 0, 0.5);
}
:global(.certificate-img) {
width: unset !important;
}
.active {
position: relative;
display: inline-block;
apps/dashboard/src/lib/components/CourseLandingPage/utils.ts
+45
View File
@@ -0,0 +1,45 @@
import { NAV_ITEMS, NAV_ITEM_KEY } from './constants';
import type { Course, Review } from '$lib/utils/types';
import get from 'lodash/get';
export function getExerciseCount(lessons) {
return lessons.reduce((total, lesson) => total + (lesson.totalExercises?.[0]?.count || 0), 0);
}
export function getLessonSections(data) {
const sections =
data?.lesson_section?.map((section) => {
return {
...section,
lessons: data.lessons.filter((lesson) => lesson.section_id === section.id)
};
}) || [];
return sections || [];
}
export function getTotalLessons(sections) {
return sections.reduce((total, section) => {
return total + section.lessons.length;
}, 0);
}
export function filterNavItems(course: Course, reviews: Review[]) {
const rules = get(course, 'metadata.sectionDisplay', {});
return NAV_ITEMS.filter((item) => {
const key = item.key;
if (typeof rules[key] === 'boolean') {
return !!rules[key];
}
if (key === NAV_ITEM_KEY.REVIEWS) {
// Show only if there are reviews added
return reviews.length > 0;
}
// In case they are undefined
return true;
});
}
apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
+27 -6
View File
@@ -18,6 +18,7 @@
import RadioButtonChecked from 'carbon-icons-svelte/lib/RadioButtonChecked.svelte';
import GrowthIcon from 'carbon-icons-svelte/lib/Growth.svelte';
import UserProfileIcon from 'carbon-icons-svelte/lib/UserProfile.svelte';
import { calcCourseDiscount } from '$lib/utils/functions/course';
export let bannerImage: string | undefined;
export let id = '';
@@ -25,7 +26,6 @@
export let title = '';
export let description = '';
export let isPublished = false;
export let cost = 0;
export let totalLessons = 0;
export let totalStudents = 0;
export let currency = 'USD';
@@ -34,6 +34,14 @@
export let isExplore = false;
export let progressRate = 45;
export let type: COURSE_TYPE;
export let pricingData: {
cost: number;
currency?: string;
showDiscount?: boolean;
discount?: number;
} = {
cost: 0
};
let target: any;
@@ -92,6 +100,12 @@
icon: GrowthIcon
}
};
$: cost = calcCourseDiscount(
pricingData.discount,
pricingData.cost ?? 0,
!!pricingData.showDiscount
);
</script>
{#if !isLMS && !isOnLandingPage}
@@ -169,11 +183,18 @@
</p>
<p class="text-xs py-2">
{#if isOnLandingPage}
<span class="px-2"
>{!cost
? $t('course.navItem.landing_page.pricing_section.free')
: formatter.format(cost)}</span
>
<span class="px-2">
{#if !cost}
$t('course.navItem.landing_page.pricing_section.free')
{:else if pricingData.showDiscount}
{formatter.format(cost)}
<span class="line-through">
{formatter?.format(pricingData?.cost)}
</span>
{:else}
{formatter.format(cost)}
{/if}
</span>
{:else if isLMS}
{#if !isExplore}
<div class="flex items-center gap-2">
apps/dashboard/src/lib/components/Org/LandingPage/index.svelte
+15 -11
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import get from 'lodash/get';
import { onMount } from 'svelte';
import LogoFacebook from 'carbon-icons-svelte/lib/LogoFacebook.svelte';
import LogoTwitter from 'carbon-icons-svelte/lib/LogoTwitter.svelte';
import LogoLinkedin from 'carbon-icons-svelte/lib/LogoLinkedin.svelte';
@@ -29,9 +28,10 @@
import { landingPageSettings } from '$lib/components/Org/Settings/store';
import { t } from '$lib/utils/functions/translations';
import PoweredBy from '$lib/components/Upgrade/PoweredBy.svelte';
import type { CurrentOrg } from '$lib/utils/types/org';
export let orgSiteName = '';
export let org = {};
export let org: CurrentOrg | null;
let email: string | undefined;
let isAdding = false;
@@ -46,12 +46,12 @@
phone: '',
message: ''
};
let contactError = {};
let contactError: Record<string, string> = {};
const supabase = getSupabase();
async function handleSubmit() {
if (!email || !validateEmail(email)) return;
if (!email || !validateEmail(email) || !org) return;
isAdding = true;
const { error } = await supabase.from('organization_emaillist').insert({
@@ -85,7 +85,7 @@
email: contact.email,
phone: contact.phone,
message: contact.message,
organization_id: org.id
organization_id: org?.id
});
if (error) {
@@ -148,18 +148,18 @@
}
$: initPlyr(player, $landingPageSettings.header?.banner?.video);
$: setDefault(org.landingpage);
$: setDefault(org?.landingpage);
</script>
<svelte:head>
<title>
{!org.name ? '' : `${org.name}'s `}{$t('course.navItem.landing_page.landing_page')}
{!org?.name ? '' : `${org.name}'s `}{$t('course.navItem.landing_page.landing_page')}
</title>
</svelte:head>
<PoweredBy />
{#if !org.landingpage}
{#if !org?.landingpage}
<PageLoader />
{:else}
<main>
@@ -312,7 +312,12 @@
type={courseData.type}
description={courseData.description}
isPublished={courseData.is_published}
cost={courseData.cost}
pricingData={{
cost: courseData.cost,
discount: courseData.metadata.discount,
showDiscount: courseData.metadata.showDiscount,
currency: courseData.currency
}}
currency={courseData.currency}
totalLessons={get(courseData, 'lessons[0].count', 0)}
isOnLandingPage={true}
@@ -442,8 +447,7 @@
label={$t('course.navItem.landing_page.message')}
bind:value={contact.message}
errorMessage={contactError.message}
rows="9"
maxRows={15}
rows={9}
placeholder={$t('course.navItem.landing_page.your_message')}
/>
</div>
apps/dashboard/src/lib/components/UploadImage/index.svelte
+9 -1
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import Camera from 'carbon-icons-svelte/lib/Camera.svelte';
import { Loading } from 'carbon-components-svelte';
import { t } from '$lib/utils/functions/translations';
export let avatar: string | undefined;
@@ -10,6 +11,7 @@
export let isDisabled = false;
export let maxFileSizeInMb: number = 2; // Default max file size 2MB
export let flexDirection = 'flex-col';
export let isUploading = false;
let fileinput: HTMLInputElement;
@@ -31,6 +33,8 @@
errorMessage = null; // Clear error message on successful load
};
};
$: isDisabled = isUploading;
</script>
<section class="width-fit p-3 flex {flexDirection} items-center justify-between gap-5">
@@ -63,7 +67,11 @@
}}
disabled={isDisabled}
>
<Camera size={20} />
{#if isUploading}
<Loading withOverlay={false} small />
{:else}
<Camera size={20} />
{/if}
<span class="ml-2">{$t('settings.profile.profile_picture.upload_image')}</span>
</button>
<p class="text-xs text-center text-gray-500">
apps/dashboard/src/lib/utils/functions/course.ts
+7
View File
@@ -29,3 +29,10 @@ export function replaceHTMLTag(text: string) {
.map((char) => tagsToReplace[char] || char)
.join('');
}
export function calcCourseDiscount(percent = 0, cost: number, showDiscount: boolean) {
if (!percent || !showDiscount) return cost;
const discountAmount = (percent / 100) * cost;
const discountedPrice = cost - discountAmount;
return Math.round(discountedPrice);
}
apps/dashboard/src/lib/utils/store/org.ts
+5 -5
View File
@@ -51,11 +51,11 @@ export const currentOrgDomain = derived(currentOrg, ($currentOrg) => {
: '';
});
// Utility org store
export const isFreePlan = derived(
currentOrgPlan,
($plan) => !$plan || $plan.plan_name === PLAN.BASIC
);
export const isFreePlan = derived(currentOrgPlan, ($plan) => {
if (!$plan) return false;
return !$plan || $plan.plan_name === PLAN.BASIC;
});
export const currentOrgMaxAudience = derived(currentOrgPlan, ($plan) =>
!$plan
? 20
apps/dashboard/src/lib/utils/translations/de.json
+2 -2
View File
@@ -395,7 +395,7 @@
}
},
"course_content": "Kursinhalte",
"modules": "Module",
"modules": "module",
"lessons": "Unterricht",
"exercises": "Übungen"
},
@@ -1430,4 +1430,4 @@
"no": "NEIN",
"yes": "Ja"
}
}
}
apps/dashboard/src/lib/utils/translations/en.json
+8 -2
View File
@@ -923,12 +923,14 @@
"goals": "Goals",
"reviews": "Reviews",
"instructor": "Instructor",
"pricing": "Pricing"
"pricing": "Pricing",
"certificate": "Certificate"
},
"save": "Save",
"page_builder": "Page Builder",
"section": "section",
"display_section": "Display section",
"header_form": {
"title": "Title",
@@ -962,6 +964,10 @@
}
},
"certificate_form": {
"upload_template": "Certificate template"
},
"instructor_form": {
"upload": "Instructor Logo",
"name": "Instructor name",
@@ -1002,7 +1008,7 @@
},
"course_content": "Course content",
"modules": "Modules",
"modules": "modules",
"lessons": "lessons",
"exercises": "exercises",
"start_course": "Start Course",
apps/dashboard/src/lib/utils/translations/es.json
+2 -2
View File
@@ -395,7 +395,7 @@
}
},
"course_content": "Contenido del curso",
"modules": "Módulos",
"modules": "módulos",
"lessons": "lecciones",
"exercises": "ceremonias"
},
@@ -1430,4 +1430,4 @@
"no": "No",
"yes": "Sí"
}
}
}
apps/dashboard/src/lib/utils/translations/fr.json
+2 -2
View File
@@ -395,7 +395,7 @@
}
},
"course_content": "Contenu du cours",
"modules": "Modules",
"modules": "modules",
"lessons": "leçons",
"exercises": "exercices"
},
@@ -1430,4 +1430,4 @@
"no": "Non",
"yes": "Oui"
}
}
}
apps/dashboard/src/lib/utils/translations/pt.json
+2 -2
View File
@@ -395,7 +395,7 @@
}
},
"course_content": "Conteúdo do curso",
"modules": "Módulos",
"modules": "módulos",
"lessons": "lições",
"exercises": "exercícios"
},
@@ -1430,4 +1430,4 @@
"no": "Não",
"yes": "Sim"
}
}
}
apps/dashboard/src/lib/utils/translations/ru.json
+2 -2
View File
@@ -395,7 +395,7 @@
}
},
"course_content": "Содержание курса",
"modules": "Модули",
"modules": "mодули",
"lessons": "уроки",
"exercises": "упражнения"
},
@@ -1430,4 +1430,4 @@
"no": "Нет",
"yes": "Да"
}
}
}
apps/dashboard/src/lib/utils/translations/vi.json
+2 -2
View File
@@ -395,7 +395,7 @@
}
},
"course_content": "Nội dung khóa học",
"modules": "Mô-đun",
"modules": "mô-đun",
"lessons": "bài học",
"exercises": "bài tập"
},
@@ -1430,4 +1430,4 @@
"no": "KHÔNG",
"yes": "Đúng"
}
}
}
apps/dashboard/src/lib/utils/types/index.ts
+4
View File
@@ -97,11 +97,15 @@ interface CourseMetadata {
description: string;
imgUrl: string;
};
certificate?: {
templateUrl: string;
};
reviews?: Array<Review>;
lessonTabsOrder?: Array<Tabs>;
grading?: boolean;
lessonDownload?: boolean;
allowNewStudent: boolean;
sectionDisplay?: Record<string, boolean>;
}
export interface LessonCommentInsertPayload {
apps/dashboard/src/routes/+layout.svelte
+1 -1
View File
@@ -307,7 +307,7 @@
{:else if data.skipAuth}
<PlayQuiz />
{:else if data.isOrgSite && !path}
<OrgLandingPage orgSiteName={data.orgSiteName} org={data.org || {}} />
<OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
{:else}
<main class="dark:bg-black">
{#if $navigating && $delayedPreloading}
supabase/migrations/20240907090948_open_orgplan_for_landingpage.sql
+8
View File
@@ -0,0 +1,8 @@
drop policy "User must be an org member to SELECT" on "public"."organization_plan";
create policy "Enable read access for all users"
on "public"."organization_plan"
as permissive
for select
to public
using (true);