From e3d0db15f24f433bf0582c0abf852565dd1f74ae Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 26 Sep 2023 23:29:50 +0100
Subject: [PATCH] fix discount bug + font dif on lesson page

---
 .../Materials/components/ComponentNote.svelte |   4 +-
 .../components/Lesson/Materials/index.svelte  | 281 +++++++++---------
 .../components/PricingSection.svelte          |   7 +-
 .../components/HTMLRender/HTMLRender.svelte   |   6 +-
 4 files changed, 154 insertions(+), 144 deletions(-)

diff --git a/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte b/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte
index c09b4907..67503abc 100644
--- a/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte
+++ b/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}
diff --git a/src/lib/components/Course/components/Lesson/Materials/index.svelte b/src/lib/components/Course/components/Lesson/Materials/index.svelte
index b4bab92a..6c3efd5c 100644
--- a/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/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,144 +235,148 @@
   <VideoUploader {lessonId} />
 </Modal>
 
-<h1 class="text-4xl mt-0 capitalize">
-  {lessonTitle}
-</h1>
+<HtmlRender>
+  <svelte:fragment slot="content">
+    <h1 class="text-4xl mt-0 capitalize">
+      {lessonTitle}
+    </h1>
 
-{#if mode === MODES.edit}
-  <Tabs {tabs} {currentTab} {onChange}>
-    <slot:fragment slot="content">
-      <TabContent value={getValue('Note')} index={currentTab}>
-        <div bind:this={aiButtonRef} class="w-full flex flex-row-reverse">
-          <PrimaryButton
-            className="flex items-center relative"
-            onClick={() => {
-              openPopover = !openPopover;
-            }}
-            isLoading={$isLoading}
-            isDisabled={$isLoading}
-            variant={VARIANTS.OUTLINED}
-          >
-            <MagicWandFilled size={20} class="carbon-icon mr-3" />
-            AI
-            <Popover
-              caret
-              align="left"
-              bind:open={openPopover}
-              on:click:outside={({ detail }) => {
-                openPopover = aiButtonRef?.contains(detail.target);
-              }}
-            >
-              <div class="p-2">
-                <button class={aiButtonClass} on:click={() => callAI('outline')}>
-                  <ListIcon class="carbon-icon mr-2" />
-                  Generate Lesson Outline
-                </button>
-                <button class={aiButtonClass} on:click={() => callAI('note')}>
-                  <AlignBoxTopLeftIcon class="carbon-icon mr-2" />
-                  Generate Lesson Note
-                </button>
-                <button class={aiButtonClass} on:click={() => callAI('activities')}>
-                  <IbmWatsonKnowledgeStudioIcon class="carbon-icon mr-2" />
-                  Generate Lesson Activities
-                </button>
-              </div>
-            </Popover>
-          </PrimaryButton>
-        </div>
-
-        <div class="h-[60vh] mt-5">
-          <TextEditor
-            id={lessonId}
-            bind:editorWindowRef
-            value={$lesson.materials.note}
-            onChange={(html) => ($lesson.materials.note = html)}
-            placeholder="Write your lesson note here"
-          />
-        </div>
-      </TabContent>
-
-      <TabContent value={getValue('Slide')} index={currentTab}>
-        {#if mode === MODES.edit}
-          <TextField
-            label="Slide link"
-            bind:value={$lesson.materials.slide_url}
-            onInputChange={handleInputChange}
-          />
-        {/if}
-      </TabContent>
-      <TabContent value={getValue('Video')} index={currentTab}>
-        <PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
-        {#if $lesson.materials.videos.length}
-          <div class="flex flex-col items-start w-full h-full">
-            {#each $lesson.materials.videos as video, index}
-              {#if mode === MODES.edit}
-                <div class="ml-auto">
-                  <IconButton
-                    value="delete-video"
-                    contained={true}
-                    onClick={() => deleteLessonVideo(index)}
-                  >
-                    <TrashCanIcon size={20} class="carbon-icon dark:text-white" />
-                  </IconButton>
-                </div>
-              {/if}
-              <div class="w-full h-full flex flex-col gap-2 overflow-hidden">
-                {#key video.link}
-                  <div class="mb-5">
-                    {#if video.type === 'youtube'}
-                      <iframe
-                        width="100%"
-                        height="569"
-                        class="iframe"
-                        src={formatYoutubeVideo(video.link, errors)}
-                        title="YouTube video player"
-                        frameborder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                        allowfullscreen
-                      />
-                    {:else if video.metadata?.svid}
-                      <div style="position:relative;padding-bottom:51.416579%">
-                        <iframe
-                          src="https://muse.ai/embed/{video.metadata
-                            ?.svid}?logo=https://app.classroomio.com/logo-512.png&subtitles=auto&cover_play_position=center"
-                          style="width:100%;height:100%;position:absolute;left:0;top:0"
-                          frameborder="0"
-                          allowfullscreen
-                          title="Muse AI Video Embed"
-                        />
-                      </div>
-                    {:else}
-                      <video bind:this={player} class="plyr-video-trigger" playsinline controls>
-                        <source src={video.link} type="video/mp4" />
-                        <track kind="captions" />
-                      </video>
-                    {/if}
+    {#if mode === MODES.edit}
+      <Tabs {tabs} {currentTab} {onChange}>
+        <slot:fragment slot="content">
+          <TabContent value={getValue('Note')} index={currentTab}>
+            <div bind:this={aiButtonRef} class="w-full flex flex-row-reverse">
+              <PrimaryButton
+                className="flex items-center relative"
+                onClick={() => {
+                  openPopover = !openPopover;
+                }}
+                isLoading={$isLoading}
+                isDisabled={$isLoading}
+                variant={VARIANTS.OUTLINED}
+              >
+                <MagicWandFilled size={20} class="carbon-icon mr-3" />
+                AI
+                <Popover
+                  caret
+                  align="left"
+                  bind:open={openPopover}
+                  on:click:outside={({ detail }) => {
+                    openPopover = aiButtonRef?.contains(detail.target);
+                  }}
+                >
+                  <div class="p-2">
+                    <button class={aiButtonClass} on:click={() => callAI('outline')}>
+                      <ListIcon class="carbon-icon mr-2" />
+                      Generate Lesson Outline
+                    </button>
+                    <button class={aiButtonClass} on:click={() => callAI('note')}>
+                      <AlignBoxTopLeftIcon class="carbon-icon mr-2" />
+                      Generate Lesson Note
+                    </button>
+                    <button class={aiButtonClass} on:click={() => callAI('activities')}>
+                      <IbmWatsonKnowledgeStudioIcon class="carbon-icon mr-2" />
+                      Generate Lesson Activities
+                    </button>
                   </div>
-                {/key}
+                </Popover>
+              </PrimaryButton>
+            </div>
+
+            <div class="h-[60vh] mt-5">
+              <TextEditor
+                id={lessonId}
+                bind:editorWindowRef
+                value={$lesson.materials.note}
+                onChange={(html) => ($lesson.materials.note = html)}
+                placeholder="Write your lesson note here"
+              />
+            </div>
+          </TabContent>
+
+          <TabContent value={getValue('Slide')} index={currentTab}>
+            {#if mode === MODES.edit}
+              <TextField
+                label="Slide link"
+                bind:value={$lesson.materials.slide_url}
+                onInputChange={handleInputChange}
+              />
+            {/if}
+          </TabContent>
+          <TabContent value={getValue('Video')} index={currentTab}>
+            <PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
+            {#if $lesson.materials.videos.length}
+              <div class="flex flex-col items-start w-full h-full">
+                {#each $lesson.materials.videos as video, index}
+                  {#if mode === MODES.edit}
+                    <div class="ml-auto">
+                      <IconButton
+                        value="delete-video"
+                        contained={true}
+                        onClick={() => deleteLessonVideo(index)}
+                      >
+                        <TrashCanIcon size={20} class="carbon-icon dark:text-white" />
+                      </IconButton>
+                    </div>
+                  {/if}
+                  <div class="w-full h-full flex flex-col gap-2 overflow-hidden">
+                    {#key video.link}
+                      <div class="mb-5">
+                        {#if video.type === 'youtube'}
+                          <iframe
+                            width="100%"
+                            height="569"
+                            class="iframe"
+                            src={formatYoutubeVideo(video.link, errors)}
+                            title="YouTube video player"
+                            frameborder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowfullscreen
+                          />
+                        {:else if video.metadata?.svid}
+                          <div style="position:relative;padding-bottom:51.416579%">
+                            <iframe
+                              src="https://muse.ai/embed/{video.metadata
+                                ?.svid}?logo=https://app.classroomio.com/logo-512.png&subtitles=auto&cover_play_position=center"
+                              style="width:100%;height:100%;position:absolute;left:0;top:0"
+                              frameborder="0"
+                              allowfullscreen
+                              title="Muse AI Video Embed"
+                            />
+                          </div>
+                        {:else}
+                          <video bind:this={player} class="plyr-video-trigger" playsinline controls>
+                            <source src={video.link} type="video/mp4" />
+                            <track kind="captions" />
+                          </video>
+                        {/if}
+                      </div>
+                    {/key}
+                  </div>
+                {/each}
               </div>
-            {/each}
-          </div>
-        {/if}
-      </TabContent>
-    </slot:fragment>
-  </Tabs>
-{:else if !isMaterialsEmpty($lesson.materials)}
-  <div class="w-full">
-    {#each componentsToRender as Component, index}
-      <svelte:component this={Component} key={index} />
-    {/each}
-  </div>
-{: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">
-      No note, video or slide added for this lesson yet
-    </h3>
-    <p class="text-sm text-center font-normal py-2">
-      Share your knowledge with your students by creating engaging content<br />
-      Start by clicking on <strong>Get started</strong> button.
-    </p>
-    <PrimaryButton label="Get started" className="rounded-md" onClick={toggleMode} />
-  </Box>
-{/if}
+            {/if}
+          </TabContent>
+        </slot:fragment>
+      </Tabs>
+    {:else if !isMaterialsEmpty($lesson.materials)}
+      <div class="w-full">
+        {#each componentsToRender as Component, index}
+          <svelte:component this={Component} key={index} />
+        {/each}
+      </div>
+    {: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">
+          No note, video or slide added for this lesson yet
+        </h3>
+        <p class="text-sm text-center font-normal py-2">
+          Share your knowledge with your students by creating engaging content<br />
+          Start by clicking on <strong>Get started</strong> button.
+        </p>
+        <PrimaryButton label="Get started" className="rounded-md" onClick={toggleMode} />
+      </Box>
+    {/if}
+  </svelte:fragment>
+</HtmlRender>
diff --git a/src/lib/components/CourseLandingPage/components/PricingSection.svelte b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
index c3cb1bf0..a0f6c62e 100644
--- a/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+++ b/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>
 
diff --git a/src/lib/components/HTMLRender/HTMLRender.svelte b/src/lib/components/HTMLRender/HTMLRender.svelte
index 65abddce..f8e3f1a5 100644
--- a/src/lib/components/HTMLRender/HTMLRender.svelte
+++ b/src/lib/components/HTMLRender/HTMLRender.svelte
@@ -6,5 +6,9 @@
 </script>
 
 <article class="preview prose prose-sm sm:prose {className}">
-  {@html marked(content, { breaks: true, gfm: true })}
+  {#if $$slots.content}
+    <slot name="content" />
+  {:else}
+    {@html marked(content, { breaks: true, gfm: true })}
+  {/if}
 </article>