fix discount bug + font dif on lesson page

src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte

@@ -16,7 +16,7 @@
 </script>
 
 {#if !isNoteEmpty($lesson.materials?.note)}
-  <article class="preview prose prose-sm sm:prose p-2">
+  <div>
     {@html $lesson.materials.note}
-  </article>
+  </div>
 {/if}

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -34,6 +34,7 @@
   import ComponentNote from './components/ComponentNote.svelte';
   import ComponentSlide from './components/ComponentSlide.svelte';
   import ComponentVideo from './components/ComponentVideo.svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   export let mode = MODES.view;
   export let prevMode = '';
@@ -234,11 +235,13 @@
   <VideoUploader {lessonId} />
 </Modal>
 
-<h1 class="text-4xl mt-0 capitalize">
+<HtmlRender>
+  <svelte:fragment slot="content">
+    <h1 class="text-4xl mt-0 capitalize">
       {lessonTitle}
-</h1>
+    </h1>
 
-{#if mode === MODES.edit}
+    {#if mode === MODES.edit}
       <Tabs {tabs} {currentTab} {onChange}>
         <slot:fragment slot="content">
           <TabContent value={getValue('Note')} index={currentTab}>
@@ -356,13 +359,13 @@
           </TabContent>
         </slot:fragment>
       </Tabs>
-{:else if !isMaterialsEmpty($lesson.materials)}
+    {:else if !isMaterialsEmpty($lesson.materials)}
       <div class="w-full">
         {#each componentsToRender as Component, index}
           <svelte:component this={Component} key={index} />
         {/each}
       </div>
-{:else}
+    {:else}
       <Box className="text-center">
         <img src="/no-video.svg" alt="Video not found" />
         <h3 class="text-xl font-normal dark:text-white py-2">
@@ -374,4 +377,6 @@
         </p>
         <PrimaryButton label="Get started" className="rounded-md" onClick={toggleMode} />
       </Box>
-{/if}
+    {/if}
+  </svelte:fragment>
+</HtmlRender>

src/lib/components/CourseLandingPage/components/PricingSection.svelte

@@ -21,8 +21,8 @@
   let formatter: Intl.NumberFormat | undefined;
   let isFree = false;
 
-  function calcDisc(percent: number, cost: number) {
-    if (!percent) return cost;
+  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);
@@ -51,8 +51,9 @@
   }
 
   $: setFormatter(courseData.currency);
+
   $: discount = get(courseData, 'metadata.discount', 0);
-  $: calculatedCost = calcDisc(discount, courseData.cost || 0);
+  $: calculatedCost = calcDisc(discount, courseData.cost || 0, courseData.metadata.showDiscount);
   $: isFree = isCourseFree(calculatedCost);
 </script>
 

src/lib/components/HTMLRender/HTMLRender.svelte

@@ -6,5 +6,9 @@
 </script>
 
 <article class="preview prose prose-sm sm:prose {className}">
+  {#if $$slots.content}
+    <slot name="content" />
+  {:else}
     {@html marked(content, { breaks: true, gfm: true })}
+  {/if}
 </article>