course landing page improvements

src/lib/components/AI/AIButton/CustomPromptBtn.svelte

@@ -47,6 +47,7 @@
   }
 
   $: onCompletion($completion);
+  $: prompt = defaultPrompt;
 </script>
 
 <div class="{className} relative z-[100]">

src/lib/components/Backdrop/index.svelte

@@ -1,4 +1,12 @@
-<div class="root">
+<script lang="ts">
+  export let disableCenteredContent = false;
+  export let className = '';
+</script>
+
+<div
+  class="root {!className.includes('opacity') && 'opacity-100'} {!disableCenteredContent &&
+    'center'} {className}"
+>
   <slot />
 </div>
 
@@ -8,15 +16,17 @@
     left: 0;
     right: 0;
     bottom: 0;
-    display: flex;
     position: fixed;
-    align-items: center;
-    justify-content: center;
     background-color: rgba(0, 0, 0, 0.3);
     -webkit-tap-highlight-color: transparent;
     color: #fff;
     z-index: 1201;
-    opacity: 1;
     transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>

src/lib/components/Buttons/VisitOrgSite.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import ArrowUpRightIcon from '$lib/components/Icons/ArrowTopRight.svelte';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrgDomain } from '$lib/utils/store/org';
   import { isMobile } from '$lib/utils/store/useMobile';
 
   export let className = '';
 </script>
 
-<a
-  href={`https://${$currentOrg.siteName}.classroomio.com`}
-  target="_blank"
-  class="{className} ml-2 hover:no-underline"
->
+<a href={$currentOrgDomain} target="_blank" class="{className} ml-2 hover:no-underline">
   <PrimaryButton>
     {#if !$isMobile}
       View site

src/lib/components/Course/components/Settings/index.svelte

@@ -16,7 +16,7 @@
   import { currentOrgPath } from '$lib/utils/store/org';
   import { isObject } from '$lib/utils/functions/isObject';
   import { lessons } from '../Lesson/store/lessons';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
   import { snackbar } from '$lib/components/Snackbar/store';
   import UploadWidget from '$lib/components/UploadWidget/index.svelte';
   import { handleOpenWidget } from '$lib/components/CourseLandingPage/store';
@@ -24,14 +24,17 @@
   let isSaving = false;
   let isLoading = false;
   let isDeleting = false;
-  let errors = {};
-  let avatar;
+  let errors: {
+    title: string | undefined;
+    description: string | undefined;
+  } = { title: undefined, description: undefined };
+  let avatar: string | undefined;
 
   function widgetControl() {
     $handleOpenWidget.open = true;
   }
 
-  function getLessonOrder(id) {
+  function getLessonOrder(id: string) {
     const index = $lessons.findIndex((lesson) => lesson.id === id);
     if (index < 9) {
       return '0' + (index + 1);
@@ -172,7 +175,6 @@
 
   $: $settings.course_description = $course.description;
   $: $settings.course_title = $course.title;
-  $: $settings.allow_new_students = $settings.is_published;
 
   $: setDefault($course);
 </script>
@@ -238,11 +240,7 @@
       <div class="">
         <p class="text-md">Course Link</p>
         {#if $course.slug}
-          <CodeSnippet
-            wrapText
-            type="multi"
-            code={`https://${$currentOrg.siteName}.classroomio.com/course/${$course.slug}`}
-          />
+          <CodeSnippet wrapText type="multi" code={`${$currentOrgDomain}/course/${$course.slug}`} />
         {:else}
           <CodeSnippet code="Setup landing page to get course link" />
         {/if}
@@ -256,23 +254,12 @@
     </Column>
     <Column sm={8} md={8} lg={8}>
       <Toggle size="sm" bind:toggled={$settings.grading}>
-        <span slot="labelA" style="color: gray">Disable</span>
-        <span slot="labelB" style="color: gray">Enable</span>
-      </Toggle>
-    </Column>
-  </Row>
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={8} md={8} lg={8}>
-      <SectionTitle>Allow New Students</SectionTitle>
-      <p>Allow new students to access this course</p>
-    </Column>
-    <Column sm={8} md={8} lg={8}>
-      <Toggle size="sm" bind:toggled={$settings.allow_new_students}>
-        <span slot="labelA" style="color: gray">Disable</span>
-        <span slot="labelB" style="color: gray">Enable</span>
+        <span slot="labelA" style="color: gray">Disabled</span>
+        <span slot="labelB" style="color: gray">Enabled</span>
       </Toggle>
     </Column>
   </Row>
+
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>Order Lessons Tab</SectionTitle>
@@ -289,8 +276,8 @@
     </Column>
     <Column sm={8} md={8} lg={8}>
       <Toggle size="sm" bind:toggled={$settings.lesson_download}>
-        <span slot="labelA" style="color: gray">Disable</span>
-        <span slot="labelB" style="color: gray">Enable</span>
+        <span slot="labelA" style="color: gray">Disabled</span>
+        <span slot="labelB" style="color: gray">Enabled</span>
       </Toggle>
     </Column>
   </Row>
@@ -301,8 +288,8 @@
     </Column>
     <Column sm={8} md={8} lg={8}>
       <PrimaryButton
-        variant={VARIANTS.LINK}
-        label="Download Course"
+        variant={VARIANTS.OUTLINED}
+        label="Download"
         onClick={downloadCourse}
         isDisabled={isLoading}
         {isLoading}
@@ -310,6 +297,19 @@
     </Column>
   </Row>
 
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={8} md={8} lg={8}>
+      <SectionTitle>Allow New Students</SectionTitle>
+      <p>Allow new students to access this course</p>
+    </Column>
+    <Column sm={8} md={8} lg={8}>
+      <Toggle size="sm" bind:toggled={$settings.allow_new_students}>
+        <span slot="labelA" style="color: gray">Disabled</span>
+        <span slot="labelB" style="color: gray">Enabled</span>
+      </Toggle>
+    </Column>
+  </Row>
+
   <!-- Publish Course -->
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
     <Column sm={8} md={8} lg={8}>
@@ -317,7 +317,13 @@
       <p>This determines if your course displays on your landing page</p>
     </Column>
     <Column sm={8} md={8} lg={8}>
-      <Toggle size="sm" bind:toggled={$settings.is_published}>
+      <Toggle
+        size="sm"
+        bind:toggled={$settings.is_published}
+        on:toggle={(e) => {
+          $settings.allow_new_students = e.detail.toggled;
+        }}
+      >
         <span slot="labelA" style="color: gray">Unpublished</span>
         <span slot="labelB" style="color: gray">Published</span>
       </Toggle>

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

@@ -53,7 +53,7 @@
   $: setFormatter(courseData.currency);
 
   $: discount = get(courseData, 'metadata.discount', 0);
-  $: calculatedCost = calcDisc(discount, courseData.cost || 0, courseData.metadata.showDiscount);
+  $: calculatedCost = calcDisc(discount, courseData.cost || 0, !!courseData.metadata.showDiscount);
   $: isFree = isCourseFree(calculatedCost);
 </script>
 
@@ -77,18 +77,24 @@
       <div class="flex items-center justify-center gap-3 px-3 py-3">
         <!-- Pricing -->
         <div class=" text-center">
-          <p class="dark:text-white font-medium text-sm flex items-center gap-1">
-            {formatter?.format(calculatedCost) || calculatedCost}
-            {#if isFree}
-              <span class="text-xs">(Free)</span>
+          {#if courseData?.metadata?.allowNewStudent}
+            <p class="dark:text-white font-medium text-sm flex items-center gap-1">
+              {formatter?.format(calculatedCost) || calculatedCost}
+              {#if isFree}
+                <span class="text-xs">(Free)</span>
+              {/if}
+            </p>
+            {#if courseData?.metadata?.showDiscount}
+              <p class="dark:text-white font-light text-sm text-gray-500">
+                {discount}% Discount.
+                <span class="line-through"
+                  >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
+                >
+              </p>
             {/if}
-          </p>
-          {#if courseData?.metadata?.showDiscount}
-            <p class="dark:text-white font-light text-sm text-gray-500">
-              {discount}% Discount.
-              <span class="line-through"
-                >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
-              >
+          {:else}
+            <p class="dark:text-white text-lg">
+              This course is currently not accepting new students.
             </p>
           {/if}
         </div>
@@ -99,7 +105,7 @@
             label={isFree ? 'Join Course' : 'Buy Now'}
             className="w-full sm:w-full h-[40px]"
             onClick={handleJoinCourse}
-            isDisabled={!editMode && !courseData.metadata.allowNewStudent}
+            isDisabled={!courseData.metadata.allowNewStudent}
           />
         </div>
       </div>
@@ -114,18 +120,24 @@
     <div class="p-2 lg:p-10">
       <!-- Pricing -->
       <div class="mb-6">
-        <p class="dark:text-white font-medium text-lg">
-          {formatter?.format(calculatedCost) || calculatedCost}
-          {#if isFree}
-            <span class="text-sm">(Free)</span>
+        {#if courseData?.metadata?.allowNewStudent}
+          <p class="dark:text-white font-medium text-lg">
+            {formatter?.format(calculatedCost) || calculatedCost}
+            {#if isFree}
+              <span class="text-sm">(Free)</span>
+            {/if}
+          </p>
+          {#if courseData?.metadata?.showDiscount}
+            <p class="dark:text-white font-light text-sm text-gray-500">
+              {discount}% Discount.
+              <span class="line-through"
+                >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
+              >
+            </p>
           {/if}
-        </p>
-        {#if courseData?.metadata?.showDiscount}
-          <p class="dark:text-white font-light text-sm text-gray-500">
-            {discount}% Discount.
-            <span class="line-through"
-              >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
-            >
+        {:else}
+          <p class="dark:text-white text-lg">
+            This course is currently not accepting new students.
           </p>
         {/if}
       </div>
@@ -136,9 +148,11 @@
           label={isFree ? 'Join Course' : 'Buy Now'}
           className="w-full sm:w-full py-3 mb-3"
           onClick={handleJoinCourse}
-          isDisabled={!editMode && !courseData.metadata.allowNewStudent}
+          isDisabled={!courseData.metadata.allowNewStudent}
         />
-        <p class="dark:text-white font-light text-sm text-gray-500">Early bird offer. Buy ASAP</p>
+        {#if courseData?.metadata?.showDiscount && courseData.metadata.allowNewStudent}
+          <p class="dark:text-white font-light text-sm text-gray-500">Early bird offer. Buy ASAP</p>
+        {/if}
       </div>
     </div>
 

src/lib/components/CourseLandingPage/index.svelte

@@ -128,9 +128,10 @@
           label="Start Course"
           className="px-6 py-5 mt-6 sm:w-fit hidden md:block"
           onClick={() => {
+            if (editMode) return;
             startCoursePayment = true;
           }}
-          isDisabled={!editMode && !courseData.metadata.allowNewStudent}
+          isDisabled={!courseData.metadata.allowNewStudent}
         />
       </div>
 
@@ -202,7 +203,7 @@
             <a
               href="{$page.url.pathname}{navItem.key}"
               class="{navItem.key === activeNav &&
-                'active text-primary-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-neutral-600 dark:hover:text-slate-900 dark:text-white z-0"
+                'active text-primary-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-gray-200 dark:hover:text-slate-900 dark:text-white z-0"
             >
               {navItem.label}
             </a>

src/lib/components/Form/TextArea.svelte

@@ -36,7 +36,7 @@
 
       {#if isAIEnabled}
         <CustomPromptBtn
-          defaultPrompt={initAIPrompt}
+          bind:defaultPrompt={initAIPrompt}
           alignPopover={aiAlignPopover}
           handleInsert={(v) => {
             value = v;

src/lib/components/Snackbar/index.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { fly } from 'svelte/transition';
   import InformationIcon from 'carbon-icons-svelte/lib/Information.svelte';
   import WarningIcon from 'carbon-icons-svelte/lib/Warning.svelte';
@@ -8,11 +8,11 @@
   import { SNACKBAR_SEVERITY, SNACKBAR_SEVERITY_COLOR } from './constants';
   import { snackbarStore, snackbarStoreInitialState } from './store';
 
-  let severityColor;
-  let timeoutId;
+  let severityColor: string;
+  let timeoutId: NodeJS.Timeout | undefined;
 
   function handleClose() {
-    if (typeof $snackbarStore.handleClose === 'number') {
+    if (typeof $snackbarStore.handleClose === 'function') {
       $snackbarStore.handleClose();
     }
 
@@ -21,11 +21,11 @@
       ...snackbarStoreInitialState
     }));
     clearTimeout(timeoutId);
-    timeoutId = null;
+    timeoutId = undefined;
   }
 
   // When open is true trigger autoHideDuration
-  function handleOpen(open) {
+  function handleOpen(open: boolean) {
     if (!open) {
       return;
     }