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

* 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

apps/dashboard/src/lib/components/Course/components/NewsFeed/NewsFeedCard.svelte

@@ -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}
+    {#if errors?.newComment}
-      <p class="text-sm text-red-500">{errors.newComment}</p>
+      <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

@@ -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

@@ -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">
+<div>
-  <TextEditor bind:value />
+  <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

@@ -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">
+<div class="">
-  <TextEditor bind:value />
+  <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 +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">
+<div class="mt-5 w-full">
-  <label for="upload" class="font-bold"
+  <label for="upload" class="font-bold">
-    >{$t('course.navItem.landing_page.editor.instructor_form.upload')}</label
+    {$t('course.navItem.landing_page.editor.instructor_form.upload')}
-  >
+  </label>
-  <UploadImage bind:avatar src={imgUrl} />
+  <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

@@ -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">
+<div>
-  <TextEditor bind:value />
+  <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,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

@@ -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"
+                <span class="line-through">
-                  >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
+                  {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

@@ -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 lessons: Lesson[];
-  export let showLessons: boolean[] = Array(lessons.length).fill(true);
 
-  function toggleShowLessons(index) {
+  let expand = false;
-    showLessons[index] = !showLessons[index];
-  }
 </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 expand}
-        {#if showLessons[index]}
+        <ChevronUp />
-          <ChevronDown />
+      {:else}
-        {:else}
+        <ChevronDown />
-          <ChevronUp />
+      {/if}
-        {/if}
+      {title}
-      </IconButton>
+    </span>
-      {title}</span
+    <span class="text-xs font-normal">
-    >
+      {pluralize($t('course.navItem.landing_page.lessons'), lessonCount, true)},
-    <span class="text-xs font-normal"
+      {pluralize($t('course.navItem.landing_page.exercises'), exerciseCount, true)}
-      >{lessonCount}
+    </span>
-      {$t('course.navItem.landing_page.lessons')}, {exerciseCount}
+  </button>
-      {$t('course.navItem.landing_page.exercises')}</span
-    >
-  </div>
 
-  <!-- lessons -->
+  {#if expand}
-  {#if showLessons[index]}
     {#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

@@ -1,10 +1,9 @@
-//   import { t } from '$lib/utils/functions/translations';
+export const NAV_ITEM_KEY = {
-
-export const SECTION_KEYS = {
   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

@@ -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 lessonSections = getLessonSections(courseData);
-  const totalLessons = Array.isArray(lesson_sections)
+  const totalLessons = getTotalLessons(lessonSections);
-    ? lesson_sections.reduce((total, section) => {
-        return total + section.lessons.length;
-      }, 0)
-    : 0;
-
-  function playVideo() {
-    console.log('open modal with video');
-  }
 
   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">
+        {#if navItemKeys.includes(NAV_ITEM_KEY.REQUIREMENT)}
-            <HtmlRender content={get(courseData, 'metadata.requirements', '')} />
+          <section
-          </ul>
+            id="requirement"
-        </section>
+            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">
+        {#if navItemKeys.includes(NAV_ITEM_KEY.DESCRIPTION)}
-          <h3 class="mb-3 mt-0 text-2xl font-bold">
+          <section
-            {$t('course.navItem.landing_page.description')}
+            id="description"
-          </h3>
+            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
+            <HtmlRender
-            className="dark:text-white text-sm font-light"
+              className="dark:text-white text-sm font-light"
-            content={get(courseData, 'metadata.description', '')}
+              content={get(courseData, 'metadata.description', '')}
-          />
+            />
-        </section>
+          </section>
+        {/if}
 
         <!-- Sections - Goal -->
-        <section id="goals" class="mt-8 pb-10">
+        {#if navItemKeys.includes(NAV_ITEM_KEY.GOALS)}
-          <h3 class="text-2xl font-bold mt-0 mb-3">{$t('course.navItem.landing_page.learn')}</h3>
+          <section id="goals" transition:fade={{ delay: 250, duration: 300 }} class="mt-8 pb-10">
-          <ul class="list font-light">
+            <h3 class="text-2xl font-bold mt-0 mb-3">{$t('course.navItem.landing_page.learn')}</h3>
-            <HtmlRender content={get(courseData, 'metadata.goals', '')} />
+            <ul class="list font-light">
-          </ul>
+              <HtmlRender content={get(courseData, 'metadata.goals', '')} />
-        </section>
+            </ul>
+          </section>
+        {/if}
 
         <!-- Sections - Certificate -->
-        <section class="border-b border-gray-300 mt-8 pb-10">
+        {#if navItemKeys.includes(NAV_ITEM_KEY.CERTIFICATE)}
-          <h3 class="text-2xl font-bold mt-0">{$t('course.navItem.landing_page.certificate')}</h3>
+          <section
-          <p class="dark:text-white text-sm font-light mb-3">
+            id="certificate"
-            {$t('course.navItem.landing_page.certificate_text')}
+            transition:fade={{ delay: 250, duration: 300 }}
-          </p>
+            class="border-b border-gray-300 mt-8 pb-10"
-          <img src="/images/certificate-template.svg" alt="certificate template" />
+          >
-        </section>
+            <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"
+              <span class="text-xs font-normal">
-                >{lesson_sections?.length}
+                {pluralize($t('course.navItem.landing_page.modules'), lessonSections.length, true)},
-                {$t('course.navItem.landing_page.modules')}, {totalLessons}
+                {pluralize($t('course.navItem.landing_page.lessons'), totalLessons, true)}
-                {$t('course.navItem.landing_page.lessons')}</span
+              </span>
-              >
             </div>
 
-            {#each lesson_sections as sections, index}
+            {#each lessonSections as section}
               <SectionsDisplay
-                {index}
+                exerciseCount={getExerciseCount(section.lessons)}
-                title={sections.title}
+                lessonCount={section.lessons?.length}
-                lessonCount={sections.lessons?.length}
+                lessons={section.lessons}
-                exerciseCount={sections.lessons.reduce(
+                title={section.title}
-                  (total, lesson) => total + (lesson.totalExercises?.[0]?.count || 0),
-                  0
-                )}
-                lessons={sections.lessons}
               />
             {/each}
           </section>
         {/if}
 
         <!-- Sections - Reviews -->
-        {#if reviews && reviews.length > 0}
+        {#if navItemKeys.includes(NAV_ITEM_KEY.REVIEWS)}
-          <section id="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

@@ -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

@@ -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"
+          <span class="px-2">
-            >{!cost
+            {#if !cost}
-              ? $t('course.navItem.landing_page.pricing_section.free')
+              $t('course.navItem.landing_page.pricing_section.free')
-              : formatter.format(cost)}</span
+            {: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

@@ -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"
+                        rows={9}
-                        maxRows={15}
                         placeholder={$t('course.navItem.landing_page.your_message')}
                       />
                     </div>

apps/dashboard/src/lib/components/UploadImage/index.svelte

@@ -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

@@ -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

@@ -51,11 +51,11 @@ export const currentOrgDomain = derived(currentOrg, ($currentOrg) => {
         : '';
 });
 
-// Utility org store
+export const isFreePlan = derived(currentOrgPlan, ($plan) => {
-export const isFreePlan = derived(
+  if (!$plan) return false;
-  currentOrgPlan,
+
-  ($plan) => !$plan || $plan.plan_name === PLAN.BASIC
+  return !$plan || $plan.plan_name === PLAN.BASIC;
-);
+});
 export const currentOrgMaxAudience = derived(currentOrgPlan, ($plan) =>
   !$plan
     ? 20

apps/dashboard/src/lib/utils/translations/de.json

@@ -395,7 +395,7 @@
           }
         },
         "course_content": "Kursinhalte",
-        "modules": "Module",
+        "modules": "module",
         "lessons": "Unterricht",
         "exercises": "Übungen"
       },

apps/dashboard/src/lib/utils/translations/en.json

@@ -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

@@ -395,7 +395,7 @@
           }
         },
         "course_content": "Contenido del curso",
-        "modules": "Módulos",
+        "modules": "módulos",
         "lessons": "lecciones",
         "exercises": "ceremonias"
       },

apps/dashboard/src/lib/utils/translations/fr.json

@@ -395,7 +395,7 @@
           }
         },
         "course_content": "Contenu du cours",
-        "modules": "Modules",
+        "modules": "modules",
         "lessons": "leçons",
         "exercises": "exercices"
       },

apps/dashboard/src/lib/utils/translations/pt.json

@@ -395,7 +395,7 @@
           }
         },
         "course_content": "Conteúdo do curso",
-        "modules": "Módulos",
+        "modules": "módulos",
         "lessons": "lições",
         "exercises": "exercícios"
       },

apps/dashboard/src/lib/utils/translations/ru.json

@@ -395,7 +395,7 @@
           }
         },
         "course_content": "Содержание курса",
-        "modules": "Модули",
+        "modules": "mодули",
         "lessons": "уроки",
         "exercises": "упражнения"
       },

apps/dashboard/src/lib/utils/translations/vi.json

@@ -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"
       },

apps/dashboard/src/lib/utils/types/index.ts

@@ -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

@@ -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

@@ -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);