From d6472a54ca5807a5673f04ddc9c8bcbbed676626 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Mon, 30 Oct 2023 04:52:00 +0000
Subject: [PATCH] course landing page improvements

---
 .../AI/AIButton/CustomPromptBtn.svelte        |  1 +
 src/lib/components/Backdrop/index.svelte      | 20 ++++--
 .../components/Buttons/VisitOrgSite.svelte    |  8 +--
 .../Course/components/Settings/index.svelte   | 64 ++++++++++--------
 .../components/PricingSection.svelte          | 66 +++++++++++--------
 .../components/CourseLandingPage/index.svelte |  5 +-
 src/lib/components/Form/TextArea.svelte       |  2 +-
 .../Snackbar/{constants.js => constants.ts}   |  0
 src/lib/components/Snackbar/index.svelte      | 12 ++--
 src/lib/utils/services/courses/index.ts       |  2 +-
 .../utils/services/org/{index.js => index.ts} | 52 +++++++++++----
 src/lib/utils/store/org.ts                    | 13 +++-
 src/lib/utils/store/user.ts                   |  2 +-
 src/lib/utils/types/index.ts                  | 11 ++--
 src/lib/utils/types/org.ts                    |  8 +++
 src/routes/+layout.svelte                     | 24 +++----
 .../courses/[id]/landingpage/+page.svelte     |  7 +-
 .../courses/[id]/submissions/+page.svelte     |  4 +-
 18 files changed, 189 insertions(+), 112 deletions(-)
 rename src/lib/components/Snackbar/{constants.js => constants.ts} (100%)
 rename src/lib/utils/services/org/{index.js => index.ts} (78%)

diff --git a/src/lib/components/AI/AIButton/CustomPromptBtn.svelte b/src/lib/components/AI/AIButton/CustomPromptBtn.svelte
index 3939896c..8793420c 100644
--- a/src/lib/components/AI/AIButton/CustomPromptBtn.svelte
+++ b/src/lib/components/AI/AIButton/CustomPromptBtn.svelte
@@ -47,6 +47,7 @@
   }
 
   $: onCompletion($completion);
+  $: prompt = defaultPrompt;
 </script>
 
 <div class="{className} relative z-[100]">
diff --git a/src/lib/components/Backdrop/index.svelte b/src/lib/components/Backdrop/index.svelte
index b5efb34e..d8e50c29 100644
--- a/src/lib/components/Backdrop/index.svelte
+++ b/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>
diff --git a/src/lib/components/Buttons/VisitOrgSite.svelte b/src/lib/components/Buttons/VisitOrgSite.svelte
index 48f82008..abb32bf4 100644
--- a/src/lib/components/Buttons/VisitOrgSite.svelte
+++ b/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
diff --git a/src/lib/components/Course/components/Settings/index.svelte b/src/lib/components/Course/components/Settings/index.svelte
index dadd26c1..5ddf147c 100644
--- a/src/lib/components/Course/components/Settings/index.svelte
+++ b/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>
diff --git a/src/lib/components/CourseLandingPage/components/PricingSection.svelte b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
index 63e935f3..c179a265 100644
--- a/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+++ b/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>
 
diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index e3889821..61f002af 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/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>
diff --git a/src/lib/components/Form/TextArea.svelte b/src/lib/components/Form/TextArea.svelte
index 780474e8..bb62c5c3 100644
--- a/src/lib/components/Form/TextArea.svelte
+++ b/src/lib/components/Form/TextArea.svelte
@@ -36,7 +36,7 @@
 
       {#if isAIEnabled}
         <CustomPromptBtn
-          defaultPrompt={initAIPrompt}
+          bind:defaultPrompt={initAIPrompt}
           alignPopover={aiAlignPopover}
           handleInsert={(v) => {
             value = v;
diff --git a/src/lib/components/Snackbar/constants.js b/src/lib/components/Snackbar/constants.ts
similarity index 100%
rename from src/lib/components/Snackbar/constants.js
rename to src/lib/components/Snackbar/constants.ts
diff --git a/src/lib/components/Snackbar/index.svelte b/src/lib/components/Snackbar/index.svelte
index f367de44..19ebd297 100644
--- a/src/lib/components/Snackbar/index.svelte
+++ b/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;
     }
diff --git a/src/lib/utils/services/courses/index.ts b/src/lib/utils/services/courses/index.ts
index 75111bd5..f5a9f2e4 100644
--- a/src/lib/utils/services/courses/index.ts
+++ b/src/lib/utils/services/courses/index.ts
@@ -109,7 +109,7 @@ export async function uploadAvatar(courseId: string, avatar: string) {
 export async function updateCourse(
   courseId: Course['id'],
   avatar: string | undefined,
-  course: Course
+  course: Partial<Course>
 ) {
   if (avatar && courseId) {
     const filename = `course/${courseId + Date.now()}.webp`;
diff --git a/src/lib/utils/services/org/index.js b/src/lib/utils/services/org/index.ts
similarity index 78%
rename from src/lib/utils/services/org/index.js
rename to src/lib/utils/services/org/index.ts
index 5b0e28f7..16ccbf77 100644
--- a/src/lib/utils/services/org/index.js
+++ b/src/lib/utils/services/org/index.ts
@@ -5,8 +5,9 @@ import { goto } from '$app/navigation';
 import { supabase } from '$lib/utils/functions/supabase';
 import { orgs, currentOrg, orgAudience, orgTeam } from '$lib/utils/store/org';
 import { ROLE, ROLE_LABEL } from '$lib/utils/constants/roles';
+import type { CurrentOrg, OrgTeamMember, OrgAudience } from '$lib/utils/types/org';
 
-export async function getOrgTeam(orgId) {
+export async function getOrgTeam(orgId: string) {
   const { data, error } = await supabase
     .from('organizationmember')
     .select(
@@ -24,9 +25,22 @@ export async function getOrgTeam(orgId) {
     )
     .eq('organization_id', orgId)
     .neq('role_id', ROLE.STUDENT)
-    .order('id', { ascending: false });
+    .order('id', { ascending: false })
+    .returns<
+      {
+        id: number;
+        email: string;
+        verified: boolean;
+        role_id: number;
+        profile: {
+          id: string;
+          fullname: string;
+          email: string;
+        };
+      }[]
+    >();
 
-  const team = [];
+  const team: OrgTeamMember[] = [];
   if (data?.length) {
     data.forEach((teamMember) => {
       team.push({
@@ -49,7 +63,7 @@ export async function getOrgTeam(orgId) {
   };
 }
 
-export async function getOrganizations(userId) {
+export async function getOrganizations(userId: string) {
   const { data, error } = await supabase
     .from('organizationmember')
     .select(
@@ -70,9 +84,18 @@ export async function getOrganizations(userId) {
     `
     )
     .eq('profile_id', userId)
-    .order('id', { ascending: false });
+    .order('id', { ascending: false })
+    .returns<
+      {
+        id: string;
+        profile_id: string;
+        role_id: string;
+        created_at: string;
+        organization: CurrentOrg;
+      }[]
+    >();
 
-  const orgsArray = [];
+  const orgsArray: CurrentOrg[] = [];
 
   if (Array.isArray(data) && data.length) {
     data.forEach((orgMember) => {
@@ -114,7 +137,7 @@ export async function getOrganizations(userId) {
   };
 }
 
-export async function getOrgAudience(orgId) {
+export async function getOrgAudience(orgId: string) {
   // get all students who are participants in any course belonging to an org
   const { data, error } = await supabase
     .from('profile')
@@ -153,7 +176,7 @@ export async function getOrgAudience(orgId) {
   };
 }
 
-export async function getCourseBySiteName(siteName) {
+export async function getCourseBySiteName(siteName: string) {
   const { data, error } = await supabase
     .from('course')
     .select(
@@ -176,7 +199,7 @@ export async function getCourseBySiteName(siteName) {
   return data;
 }
 
-export async function getCurrentOrg(siteName, justGet = false) {
+export async function getCurrentOrg(siteName: string, justGet = false) {
   const { data, error } = await supabase
     .from('organization')
     .select(
@@ -189,16 +212,21 @@ export async function getCurrentOrg(siteName, justGet = false) {
       theme
     `
     )
-    .eq('siteName', siteName);
+    .eq('siteName', siteName)
+    .returns<CurrentOrg[]>();
 
-  if (!justGet && (error || isEmpty(data))) {
+  const isDataEmpty = !data?.[0];
+
+  if (!justGet && (error || isDataEmpty)) {
     console.error('Error getOrganization', error);
     return goto('/404');
   }
 
   if (!justGet) {
+    if (isDataEmpty) return;
+
     currentOrg.set(data[0]);
-  } else if (!isEmpty(data)) {
+  } else if (!isDataEmpty) {
     return data[0];
   }
 }
diff --git a/src/lib/utils/store/org.ts b/src/lib/utils/store/org.ts
index bf5375c4..259287d0 100644
--- a/src/lib/utils/store/org.ts
+++ b/src/lib/utils/store/org.ts
@@ -1,7 +1,8 @@
 import { writable, derived } from 'svelte/store';
+import { dev, browser } from '$app/environment';
 import { STEPS } from '../constants/quiz';
 import type { Writable } from 'svelte/store';
-import type { CurrentOrg, OrgTeamMember } from '../types/org';
+import type { CurrentOrg, OrgTeamMember, OrgAudience } from '../types/org';
 import { ROLE } from '$lib/utils/constants/roles';
 import type { UserLessonDataType } from '$lib/utils/types';
 
@@ -17,7 +18,7 @@ export const currentOrg: Writable<CurrentOrg> = writable({
   landingpage: {},
   theme: ''
 });
-export const orgAudience = writable([]);
+export const orgAudience = writable<OrgAudience[]>([]);
 export const orgTeam = writable<OrgTeamMember[]>([]);
 export const isOrgAdmin = derived(
   currentOrg,
@@ -26,6 +27,14 @@ export const isOrgAdmin = derived(
 export const currentOrgPath = derived(currentOrg, ($currentOrg) =>
   $currentOrg.siteName ? `/org/${$currentOrg.siteName}` : ''
 );
+export const currentOrgDomain = derived(currentOrg, ($currentOrg) => {
+  const browserOrigin = dev && browser && window.location.origin;
+  return browserOrigin
+    ? browserOrigin
+    : $currentOrg.siteName
+    ? `https://${$currentOrg.siteName}.classroomio.com`
+    : '';
+});
 
 // Quiz
 export const createQuizModal = writable({
diff --git a/src/lib/utils/store/user.ts b/src/lib/utils/store/user.ts
index f51a65b5..af9734cb 100644
--- a/src/lib/utils/store/user.ts
+++ b/src/lib/utils/store/user.ts
@@ -16,7 +16,7 @@ export const user = writable<{
 });
 
 export const profile = writable<{
-  id: string | number | undefined;
+  id: string | undefined;
   fullname: string;
   avatar_url: string;
   profile_url?: string;
diff --git a/src/lib/utils/types/index.ts b/src/lib/utils/types/index.ts
index e6d583c4..f8af8033 100644
--- a/src/lib/utils/types/index.ts
+++ b/src/lib/utils/types/index.ts
@@ -59,12 +59,12 @@ export interface ExerciseSubmissions {
 //===========================================
 
 interface CourseMetadata {
-  requirements: string;
-  description: string;
-  goals: string;
+  requirements?: string;
+  description?: string;
+  goals?: string;
   videoUrl?: '';
-  showDiscount: false;
-  discount: 0;
+  showDiscount?: false;
+  discount?: 0;
   paymentLink?: string;
   reward?: {
     show: boolean;
@@ -188,6 +188,7 @@ export interface Course {
     is_present: boolean;
     id: number;
   }[];
+  lessons?: Lesson[];
 }
 
 export interface Groupmember {
diff --git a/src/lib/utils/types/org.ts b/src/lib/utils/types/org.ts
index a0dfed89..254f458b 100644
--- a/src/lib/utils/types/org.ts
+++ b/src/lib/utils/types/org.ts
@@ -21,3 +21,11 @@ export interface OrgTeamMember {
   role: string;
   isAdmin: boolean;
 }
+
+export interface OrgAudience {
+  id: string;
+  name: string;
+  email: string;
+  avatar_url: string;
+  date_joined: string;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c8f4fe77..2fff93e9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
   import { derived } from 'svelte/store';
   import { goto } from '$app/navigation';
   import { dev, browser } from '$app/environment';
@@ -8,9 +9,8 @@
   import * as Sentry from '@sentry/browser';
   import { CaptureConsole } from '@sentry/integrations';
   import posthog from 'posthog-js';
-  import { Theme } from 'carbon-components-svelte';
+  import { Theme, ToastNotification, Loading } from 'carbon-components-svelte';
   import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
-  import { Moon } from 'svelte-loading-spinners';
   import LandingNavigation from '$lib/components/Navigation/index.svelte';
   import OrgNavigation from '$lib/components/Navigation/app.svelte';
   import LMSNavigation from '$lib/components/Navigation/lms.svelte';
@@ -19,8 +19,6 @@
   import Backdrop from '$lib/components/Backdrop/index.svelte';
   import OrgSideBar from '$lib/components/Org/SideBar.svelte';
   import LMSSideBar from '$lib/components/LMS/SideBar.svelte';
-  // import SideBar from "../components/SideBar/index.svelte";
-  // import Footer from '$lib/components/Footer/index.svelte';
   import Apps from '$lib/components/Apps/index.svelte';
   import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
   import { course } from '$lib/components/Course/store';
@@ -177,7 +175,7 @@
       // Set user in sentry
       setSentryUser();
 
-      const orgRes = await getOrganizations($profile.id);
+      const orgRes = await getOrganizations(profileData.id);
 
       // student redirect
       if (data.isOrgSite) {
@@ -305,8 +303,16 @@
 {:else}
   <main class="dark:bg-black">
     {#if $navigating && $delayedPreloading}
-      <Backdrop>
-        <Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
+      <Backdrop disableCenteredContent={true} className="opacity-90">
+        <div class="h-full w-full relative" transition:fly={{ x: -200, duration: 500 }}>
+          <ToastNotification kind="info-square" class="absolute bottom-5 left-5">
+            <span slot="title" class="flex items-center">
+              <span class="mr-2">Redirecting</span>
+              <Loading withOverlay={false} small />
+            </span>
+            <span slot="caption">Taking you to the next page, please wait.</span>
+          </ToastNotification>
+        </div>
       </Backdrop>
     {/if}
     {#if !hideNavByRoute($page.url.pathname)}
@@ -351,10 +357,6 @@
       {/if}
     </div>
   </main>
-
-  {#if !['about', ''].includes(path)}
-    <!-- <Footer /> -->
-  {/if}
 {/if}
 
 <style>
diff --git a/src/routes/courses/[id]/landingpage/+page.svelte b/src/routes/courses/[id]/landingpage/+page.svelte
index 58531a4f..f7a3feb9 100644
--- a/src/routes/courses/[id]/landingpage/+page.svelte
+++ b/src/routes/courses/[id]/landingpage/+page.svelte
@@ -1,17 +1,18 @@
-<script>
+<script lang="ts">
   import { fly } from 'svelte/transition';
   import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
   import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
   import { course } from '$lib/components/Course/store';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
+  import type { Course, Lesson } from '$lib/utils/types';
 
   export let data;
 
   const { courseId } = data;
 
-  let courseData = {};
+  let courseData: Course;
 
-  function setCourseData(course = {}, lessons) {
+  function setCourseData(course: Course, lessons: Lesson[]) {
     courseData = { ...course, lessons };
   }
 
diff --git a/src/routes/courses/[id]/submissions/+page.svelte b/src/routes/courses/[id]/submissions/+page.svelte
index 76677da5..b5c6f628 100644
--- a/src/routes/courses/[id]/submissions/+page.svelte
+++ b/src/routes/courses/[id]/submissions/+page.svelte
@@ -23,7 +23,7 @@
     triggerSendEmail,
     NOTIFICATION_NAME
   } from '$lib/utils/services/notification/notification';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
   import { browser } from '$app/environment';
 
   type items = {
@@ -103,7 +103,7 @@
 
     const { fullname, email } = submissionData?.student;
     const { title, status_id }: { title: string; status_id: number } = submissionData;
-    const exerciseLink = `${$currentOrg.siteName}.classroomio.com/courses/${courseId}/lessons/${lessonDetails.id}/exercises/${exerciseDetails.id}`;
+    const exerciseLink = `${$currentOrgDomain}/courses/${courseId}/lessons/${lessonDetails.id}/exercises/${exerciseDetails.id}`;
 
     const content = `
       <p>Hello ${fullname},</p>