From 7523e6c3e724a038b820c3b4b76d357728bf7390 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 7 Sep 2023 10:47:25 +0000
Subject: [PATCH] CLASSROOMIO-T-150: Add teacher to course + linear lesson
 content

clean up

CLASSROOMIO-T-150: Notify teacher they have been added

Make lesson content be linear on preview mode

CLASSROOMIO-T-150: Add teachers with a dropdown to course


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>


Merge-request: CLASSROOMIO-MR-69
Merged-by: Best Admin <best@digdippa.com>
---
 src/app.postcss                               |   5 +
 .../components/Lesson/Materials/index.svelte  | 280 ++++++++++--------
 .../components/People/InviationModal.svelte   | 149 ++++++++--
 .../Course/components/People/store.js         |   8 +-
 .../Course/components/People/utils.ts         |  31 ++
 src/lib/components/Course/store.ts            |  27 +-
 src/lib/components/Navigation/app.svelte      |   6 +-
 src/lib/components/Navigation/lms.svelte      |   6 +-
 src/lib/components/TextEditor/index.svelte    |   2 +-
 src/lib/utils/functions/app.js                |   2 +-
 src/lib/utils/functions/theme.ts              |   1 +
 src/lib/utils/services/org/index.js           |  10 +-
 src/lib/utils/services/sendgrid.ts            |   2 +-
 src/lib/utils/store/org.ts                    |   4 +-
 src/lib/utils/types/org.ts                    |  10 +
 src/routes/+layout.svelte                     |  17 +-
 src/routes/api/completion/+server.js          |   6 +-
 .../api/email/course/welcome/+server.js       |  55 ++++
 .../api/email/course/welcome/template.svelte  |  19 ++
 .../api/email/course/welcome/welcome.svelte   |  53 ++++
 src/routes/api/email/invite/+server.js        |   4 +-
 .../lessons/[...lessonParams]/+page.svelte    |   2 +-
 src/routes/courses/[id]/people/+page.svelte   |   4 +
 23 files changed, 511 insertions(+), 192 deletions(-)
 create mode 100644 src/lib/components/Course/components/People/utils.ts
 create mode 100644 src/routes/api/email/course/welcome/+server.js
 create mode 100644 src/routes/api/email/course/welcome/template.svelte
 create mode 100644 src/routes/api/email/course/welcome/welcome.svelte

diff --git a/src/app.postcss b/src/app.postcss
index a6599a33..005cb883 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -57,6 +57,11 @@ h6 {
   line-height: 1.25 !important;
 }
 
+.prose p {
+  margin-top: 0px !important;
+  margin-bottom: 10px !important;
+}
+
 .dark .prose h1,
 .dark .prose h2,
 .dark .prose h3,
diff --git a/src/lib/components/Course/components/Lesson/Materials/index.svelte b/src/lib/components/Course/components/Lesson/Materials/index.svelte
index 401ca0a5..4562c24a 100644
--- a/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/index.svelte
@@ -34,7 +34,9 @@
   export let prevMode = '';
   export let lessonId = '';
   export let isSaving = false;
+  export let toggleMode = () => {};
 
+  let lessonTitle = '';
   let initAutoSave = false;
   let timeoutId: NodeJS.Timeout;
   let tabs = CONSTANTS.tabs;
@@ -65,6 +67,8 @@
   function isNoteEmpty(note) {
     if (!note || typeof note !== 'string') return true;
 
+    if (!document) return false;
+
     const dummyDiv = document.createElement('div');
     dummyDiv.innerHTML = note;
 
@@ -73,6 +77,12 @@
     return rawText === '';
   }
 
+  function isMaterialsEmpty(materials) {
+    const { slide_url, videos, note } = materials;
+
+    return isNoteEmpty(note) && !slide_url && isEmpty(videos);
+  }
+
   function handleSave(prevMode: string) {
     if (prevMode === MODES.edit) {
       saveLesson();
@@ -138,7 +148,7 @@
     window.players = players;
   }
 
-  function autoSave(updatedMaterials) {
+  function autoSave(updatedMaterials, _isLoading) {
     if (timeoutId) clearTimeout(timeoutId);
 
     if (!initAutoSave) {
@@ -166,7 +176,7 @@
     $uploadCourseVideoStore.isModalOpen = false;
   };
 
-  $: autoSave($lesson.materials);
+  $: autoSave($lesson.materials, $isLoading);
 
   $: onLessonIdChange(lessonId);
 
@@ -177,6 +187,8 @@
   $: updateNoteByCompletion($completion);
 
   $: initPlyr(player, $lesson.materials.videos);
+
+  $: lessonTitle = $lessons.find((les) => les.id === $lesson.id)?.title || '';
 </script>
 
 <Modal
@@ -188,10 +200,14 @@
   <VideoUploader {lessonId} />
 </Modal>
 
-<Tabs {tabs} {currentTab} {onChange}>
-  <slot:fragment slot="content">
-    <TabContent value={tabs[0].value} index={currentTab}>
-      {#if mode === MODES.edit}
+<h1 class="text-4xl mt-0">
+  {lessonTitle}
+</h1>
+
+{#if mode === MODES.edit}
+  <Tabs {tabs} {currentTab} {onChange}>
+    <slot:fragment slot="content">
+      <TabContent value={tabs[0].value} index={currentTab}>
         <div bind:this={aiButtonRef} class="w-full flex flex-row-reverse">
           <PrimaryButton
             className="flex items-center relative"
@@ -238,131 +254,151 @@
             placeholder="Write your lesson note here"
           />
         </div>
-      {:else if !isNoteEmpty($lesson.materials?.note)}
-        <article class="preview prose prose-sm sm:prose p-2">
-          {@html $lesson.materials.note}
-        </article>
-      {:else}
-        <Box>
-          <div class="flex justify-between flex-col items-center w-96">
-            <img src="/images/empty-note-icon.svg" alt="No Note" class="my-2.5 mx-auto" />
-            <h2 class="text-xl my-1.5 font-normal">No Notes yet</h2>
-            <p class="text-sm text-center text-slate-500">
-              Share your knowledge with the world by creating engaging notes. Add your notes now.
-            </p>
-          </div>
-        </Box>
-      {/if}
-    </TabContent>
+      </TabContent>
 
-    <TabContent value={tabs[1].value} index={currentTab}>
-      {#if mode === MODES.edit}
-        <TextField
-          label="Slide link"
-          bind:value={$lesson.materials.slide_url}
-          onInputChange={handleInputChange}
-        />
-      {:else if $lesson.materials.slide_url}
-        <iframe
-          title="Embeded Slides"
-          src={$lesson.materials.slide_url}
-          frameborder="0"
-          width="100%"
-          height="569"
-          class="iframe"
-          allowfullscreen="true"
-          mozallowfullscreen="true"
-          webkitallowfullscreen="true"
-        />
-      {:else}
-        <Box>
-          <div class="flex justify-between flex-col items-center w-96">
-            <img src="/images/empty-slide-icon.svg" alt="No Slide" class="my-2.5 mx-auto" />
-            <h2 class="text-xl my-1.5 font-normal">No slides yet</h2>
-            <p class="text-sm text-center text-slate-500">
-              Share your knowledge with the world by creating engaging slides. Add your slide's link
-              now.
-            </p>
-          </div>
-        </Box>
-      {/if}
-    </TabContent>
+      <TabContent value={tabs[1].value} index={currentTab}>
+        {#if mode === MODES.edit}
+          <TextField
+            label="Slide link"
+            bind:value={$lesson.materials.slide_url}
+            onInputChange={handleInputChange}
+          />
+        {/if}
+      </TabContent>
 
-    <TabContent value={tabs[2].value} index={currentTab}>
-      {#if mode === MODES.edit && $lesson.materials.videos.length}
+      <TabContent value={tabs[2].value} index={currentTab}>
         <PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
-      {/if}
-      {#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 $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>
-              {/key}
+              {/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>
+        {/if}
+      </TabContent>
+    </slot:fragment>
+  </Tabs>
+{:else if !isMaterialsEmpty($lesson.materials)}
+  {#if $lesson.materials.videos.length}
+    <div class="w-full">
+      {#each $lesson.materials.videos as video}
+        <div class="w-full overflow-hidden mb-5">
+          {#key video.link}
+            <div class="mb-5">
+              {#if video.type === 'youtube'}
+                <iframe
+                  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>
-          {/each}
+          {/key}
         </div>
-      {:else}
-        <Box>
-          <img src="/no-video.svg" alt="Video not found" />
-          <h3 class="text-xl font-normal dark:text-white py-2">
-            No video added for this lesson yet
-          </h3>
-          <p class="text-sm text-center font-normal py-2">
-            Share videos with your students and get auto transcription and in video search out of
-            the box.<br />
-            Start by clicking on Add Video button.
-          </p>
-          <PrimaryButton label="Add Video" className="rounded-md" onClick={openAddVideoModal} />
-        </Box>
-      {/if}
-    </TabContent>
-  </slot:fragment>
-</Tabs>
+      {/each}
+    </div>
+  {/if}
+
+  {#if $lesson.materials.slide_url}
+    <iframe
+      title="Embeded Slides"
+      src={$lesson.materials.slide_url}
+      frameborder="0"
+      width="100%"
+      height="569"
+      class="iframe my-3"
+      allowfullscreen="true"
+      mozallowfullscreen="true"
+      webkitallowfullscreen="true"
+    />
+  {/if}
+
+  {#if !isNoteEmpty($lesson.materials?.note)}
+    <article class="preview prose prose-sm sm:prose p-2">
+      {@html $lesson.materials.note}
+    </article>
+  {/if}
+{:else}
+  <Box>
+    <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}
 
 <style>
   .iframe {
-    height: 569px;
+    width: 100%;
+    height: 450px;
   }
 
   @media (max-width: 760px) {
diff --git a/src/lib/components/Course/components/People/InviationModal.svelte b/src/lib/components/Course/components/People/InviationModal.svelte
index dd55db5e..e2ad1bcb 100644
--- a/src/lib/components/Course/components/People/InviationModal.svelte
+++ b/src/lib/components/Course/components/People/InviationModal.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Modal from '$lib/components/Modal/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import TextArea from '$lib/components/Form/TextArea.svelte';
@@ -7,16 +7,45 @@
   import { invitationModal, resetForm } from './store';
   import { validateForm } from '$lib/components/Courses/functions';
   import { course, setCourse } from '$lib/components/Course/store';
+  import { MultiSelect, Loading } from 'carbon-components-svelte';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { getOrgTeam } from '$lib/utils/services/org';
+  import type { OrgTeamMember } from '$lib/utils/types/org';
+  import { sendTeacherCourseWelcome } from './utils';
 
-  let errors = {
-    emails: '',
+  let errors: {
+    students: string;
+    tutors: string;
+    title?: string;
+    description?: string;
+  } = {
+    students: '',
+    tutors: ''
   };
 
-  function addPerson() {
-    const { hasError, fieldErrors, students, tutors } = validateForm({
+  interface Tutor {
+    id: number;
+    text: string;
+    email: string;
+    profileId?: string;
+  }
+  let tutors: Tutor[] = [];
+  let selectedIds: Array<number> = [];
+  let selectedTutors: Tutor[] = [];
+  let isLoadingTutors = false;
+
+  function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+    return value !== null && value !== undefined;
+  }
+  const formatSelected = (i: Array<number>): Tutor[] =>
+    i.length === 0 ? [] : i.map((id) => tutors.find((tutor) => tutor.id === id)).filter(notEmpty);
+
+  function onSubmit() {
+    const { hasError, fieldErrors, students } = validateForm({
       ...$invitationModal,
       title: 'sfdsd',
       description: 'dsfdsf',
+      tutors: 'sgsg'
     });
 
     errors = fieldErrors;
@@ -24,30 +53,41 @@
 
     let membersStack = [];
     console.log(`$course`, $course);
+
     // Create groupmemebers from group_id and add teachers and students
-    for (const student of students) {
+    for (const studentEmail of students) {
       membersStack.push({
-        email: student,
-        group_id: $course.group.id,
-        role_id: ROLE.STUDENT,
+        email: studentEmail,
+        group_id: $course.group?.id,
+        role_id: ROLE.STUDENT
       });
     }
 
-    for (const tutor of tutors) {
+    for (const tutor of selectedTutors) {
       membersStack.push({
-        email: tutor,
-        group_id: $course.group.id,
-        role_id: ROLE.TUTOR,
+        profile_id: tutor.profileId,
+        group_id: $course.group?.id,
+        role_id: ROLE.TUTOR
+      });
+
+      sendTeacherCourseWelcome({
+        to: tutor.email,
+        name: tutor.text,
+        orgName: $currentOrg.name,
+        orgSiteName: $currentOrg.siteName,
+        courseName: $course.title
       });
     }
 
     addGroupMember(membersStack).then(async (membersAdded) => {
-      const group = await fetchGroup($course.group.id);
+      if (!$course?.group?.id) return;
+
+      const group = await fetchGroup($course?.group?.id);
 
       setCourse(
         {
           ...$course,
-          group: group.data,
+          group: group.data
         },
         false
       );
@@ -55,6 +95,45 @@
       resetForm();
     });
   }
+
+  function getTutors(team: OrgTeamMember[]) {
+    const existingTutors = $course.group?.tutors || [];
+    return team
+      .filter((teamMember) => teamMember.verified)
+      .filter((teamMember) => {
+        // filter out teamMembers that have already been added
+        return !existingTutors.some((t) => t.id === teamMember.profileId);
+      })
+      .map((teamMember) => ({
+        id: teamMember.id,
+        text: teamMember.fullname,
+        profileId: teamMember.profileId,
+        email: teamMember.email
+      }));
+  }
+
+  async function setTutors(orgId: string | undefined, _open: boolean) {
+    if (!orgId) return;
+
+    isLoadingTutors = true;
+    const { team, error } = await getOrgTeam(orgId);
+    if (error) {
+      console.error('Error fetching teams', error);
+      isLoadingTutors = false;
+      return;
+    }
+
+    tutors = getTutors(team);
+
+    isLoadingTutors = false;
+  }
+
+  $: {
+    selectedTutors = formatSelected(selectedIds);
+    console.log('selectedTutors', selectedTutors);
+  }
+
+  $: setTutors($currentOrg.id, $invitationModal.open);
 </script>
 
 <Modal
@@ -64,22 +143,38 @@
   maxWidth="max-w-lg"
   modalHeading="Invite people"
 >
-  <form on:submit|preventDefault={addPerson}>
-    <TextArea
-      label="Invite Tutors"
-      bind:value={$invitationModal.tutors}
-      rows="2"
-      maxRows="3"
-      placeholder="tutor@company.com, john@gmail.com"
-      helperMessage="To invite people, add their emails separated by a comma"
-      errorMessage={errors.tutors}
-      className="mb-4"
-    />
+  <form on:submit|preventDefault={onSubmit}>
+    <div class="mb-4">
+      <p class="text-base mb-1">Invite Tutors</p>
+      <MultiSelect
+        disabled={isLoadingTutors}
+        label="Select tutors in organization..."
+        bind:selectedIds
+        items={tutors}
+      />
+      {#if isLoadingTutors}
+        <span>
+          <Loading withOverlay={false} small />
+        </span>
+      {:else}
+        <span>
+          To add tutor to your organization,
+          <a
+            href={`/org/${$currentOrg.siteName}/settings/teams`}
+            class="underline text-primary-600"
+          >
+            go to organization settings
+          </a>
+        </span>
+      {/if}
+    </div>
+
     <TextArea
       label="Invite Students"
+      labelClassName="text-base"
       bind:value={$invitationModal.students}
       rows="2"
-      maxRows="3"
+      maxRows={3}
       placeholder="student@gmail.com, john@gmail.com"
       helperMessage="To invite people, add their emails separated by a comma"
       errorMessage={errors.students}
diff --git a/src/lib/components/Course/components/People/store.js b/src/lib/components/Course/components/People/store.js
index e12577ad..6beba7f5 100644
--- a/src/lib/components/Course/components/People/store.js
+++ b/src/lib/components/Course/components/People/store.js
@@ -1,18 +1,16 @@
 import { writable } from 'svelte/store';
 
 export const deleteMemberModal = writable({
-  open: false,
+  open: false
 });
 
 export const invitationModal = writable({
   open: false,
-  tutors: '',
-  students: '',
+  students: ''
 });
 
 export const resetForm = () =>
   invitationModal.update(() => ({
     open: false,
-    tutors: '',
-    students: '',
+    students: ''
   }));
diff --git a/src/lib/components/Course/components/People/utils.ts b/src/lib/components/Course/components/People/utils.ts
new file mode 100644
index 00000000..58240efa
--- /dev/null
+++ b/src/lib/components/Course/components/People/utils.ts
@@ -0,0 +1,31 @@
+import { supabase } from '$lib/utils/functions/supabase';
+
+export async function sendTeacherCourseWelcome(params: {
+  to: string;
+  name: string;
+  orgName: string;
+  orgSiteName: string;
+  courseName: string;
+}) {
+  const { data } = await supabase.auth.getSession();
+  const accessToken = data.session?.access_token || '';
+
+  try {
+    const response = await fetch('/api/email/course/welcome', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: accessToken
+      },
+      body: JSON.stringify(params)
+    });
+    if (!response.ok) {
+      throw new Error(await response.text());
+    }
+    const result = await response.json();
+
+    console.log('Sent invite email', result);
+  } catch (error) {
+    console.error('Error sending invite email', error);
+  }
+}
diff --git a/src/lib/components/Course/store.ts b/src/lib/components/Course/store.ts
index 426f6c2d..1bad049b 100644
--- a/src/lib/components/Course/store.ts
+++ b/src/lib/components/Course/store.ts
@@ -22,16 +22,16 @@ export const course: Writable<Course> = writable({
     discount: 0,
     reward: {
       show: false,
-      description: '',
+      description: ''
     },
     instructor: {
       name: '',
       role: '',
       coursesNo: 0,
       description: '',
-      imgUrl: '',
-    },
-  },
+      imgUrl: ''
+    }
+  }
 });
 
 export const mockGroupMember = {
@@ -46,15 +46,15 @@ export const mockGroupMember = {
     username: 'robertblake',
     avatar_url: '',
     created_at: '2021-08-08T13:42:13+00:00',
-    updated_at: '2021-08-08T13:42:13+00:00',
-  },
+    updated_at: '2021-08-08T13:42:13+00:00'
+  }
 };
 
 export const group = writable({
   id: null,
   tutors: [],
   students: [],
-  people: [],
+  people: []
 });
 
 export async function setCourse(data: Course, setLesson = true) {
@@ -65,7 +65,7 @@ export async function setCourse(data: Course, setLesson = true) {
     const groupData = Object.assign(data.group, {
       tutors: [],
       students: [],
-      people: [],
+      people: []
     });
 
     // @ts-ignore
@@ -77,7 +77,10 @@ export async function setCourse(data: Course, setLesson = true) {
           groupData.students.push(member);
         } else if (member.profile) {
           // @ts-ignore
-          groupData.tutors.push(member.profile);
+          groupData.tutors.push({
+            ...member.profile,
+            memberId: member.id
+          });
 
           // tutorsById[member.profile.id] = member.profile;
         }
@@ -120,15 +123,15 @@ export async function setCourse(data: Course, setLesson = true) {
       discount: 0,
       reward: {
         show: false,
-        description: '',
+        description: ''
       },
       instructor: {
         name: '',
         role: '',
         coursesNo: 0,
         description: '',
-        imgUrl: '',
-      },
+        imgUrl: ''
+      }
     };
   }
 
diff --git a/src/lib/components/Navigation/app.svelte b/src/lib/components/Navigation/app.svelte
index 3e0892ba..3540ec6f 100644
--- a/src/lib/components/Navigation/app.svelte
+++ b/src/lib/components/Navigation/app.svelte
@@ -12,7 +12,7 @@
   import { course } from '$lib/components/Course/store';
   import { appStore } from '$lib/utils/store/app';
   import { currentOrgPath } from '$lib/utils/store/org';
-  import { toggleBodyByTheme } from '$lib/utils/functions/app';
+  import { toggleBodyByMode } from '$lib/utils/functions/app';
   import { goto } from '$app/navigation';
   import { menu } from '../Org/store';
 
@@ -27,10 +27,10 @@
   function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
-    toggleBodyByTheme($appStore.isDark);
+    toggleBodyByMode($appStore.isDark);
 
     if (browser) {
-      localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
+      localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
     }
   }
 
diff --git a/src/lib/components/Navigation/lms.svelte b/src/lib/components/Navigation/lms.svelte
index bedfc52d..3309e182 100644
--- a/src/lib/components/Navigation/lms.svelte
+++ b/src/lib/components/Navigation/lms.svelte
@@ -7,16 +7,16 @@
 
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { appStore } from '$lib/utils/store/app';
-  import { toggleBodyByTheme } from '$lib/utils/functions/app';
+  import { toggleBodyByMode } from '$lib/utils/functions/app';
 
   export let navClass = '';
 
   function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
-    toggleBodyByTheme($appStore.isDark);
+    toggleBodyByMode($appStore.isDark);
     if (browser) {
-      localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
+      localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
     }
   }
 </script>
diff --git a/src/lib/components/TextEditor/index.svelte b/src/lib/components/TextEditor/index.svelte
index d46f2790..8cf62ed3 100644
--- a/src/lib/components/TextEditor/index.svelte
+++ b/src/lib/components/TextEditor/index.svelte
@@ -37,5 +37,5 @@
 </script>
 
 <div>
-  <Editor onIni {value} {apiKey} {conf} />
+  <Editor {value} {apiKey} {conf} />
 </div>
diff --git a/src/lib/utils/functions/app.js b/src/lib/utils/functions/app.js
index 319e8a22..1e644780 100644
--- a/src/lib/utils/functions/app.js
+++ b/src/lib/utils/functions/app.js
@@ -1,4 +1,4 @@
-export function toggleBodyByTheme(isDark) {
+export function toggleBodyByMode(isDark) {
   if (!document) return;
 
   if (isDark) {
diff --git a/src/lib/utils/functions/theme.ts b/src/lib/utils/functions/theme.ts
index 01dd4440..4b67e669 100644
--- a/src/lib/utils/functions/theme.ts
+++ b/src/lib/utils/functions/theme.ts
@@ -9,5 +9,6 @@ export function setTheme(theme: string) {
   // In case theme already exists in dom, don't add
   if (document.body.className.includes(theme)) return;
 
+  localStorage.setItem('theme', theme);
   document.body.className = document.body.className.concat(' ', theme);
 }
diff --git a/src/lib/utils/services/org/index.js b/src/lib/utils/services/org/index.js
index 70854668..8c0c5402 100644
--- a/src/lib/utils/services/org/index.js
+++ b/src/lib/utils/services/org/index.js
@@ -1,5 +1,6 @@
-import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import { get } from 'svelte/store';
+
 import { goto } from '$app/navigation';
 import { supabase } from '$lib/utils/functions/supabase';
 import { orgs, currentOrg, orgAudience, orgTeam } from '$lib/utils/store/org';
@@ -30,9 +31,10 @@ export async function getOrgTeam(orgId) {
     data.forEach((teamMember) => {
       team.push({
         id: teamMember.id,
-        email: teamMember?.profile?.email || teamMember?.email,
-        verified: teamMember?.verified,
+        email: teamMember?.profile?.email || teamMember.email,
+        verified: teamMember.verified,
         profileId: teamMember?.profile?.id,
+        fullname: teamMember?.profile?.fullname || '',
         role: ROLE_LABEL[teamMember?.role_id] || '',
         isAdmin: teamMember?.role_id === ROLE.ADMIN
       });
@@ -42,7 +44,7 @@ export async function getOrgTeam(orgId) {
   }
 
   return {
-    team,
+    team: get(orgTeam),
     error
   };
 }
diff --git a/src/lib/utils/services/sendgrid.ts b/src/lib/utils/services/sendgrid.ts
index 27c6516d..75fc8056 100644
--- a/src/lib/utils/services/sendgrid.ts
+++ b/src/lib/utils/services/sendgrid.ts
@@ -3,7 +3,7 @@ import type { MailService } from '@sendgrid/mail';
 import { SENDGRID_API_KEY } from '$env/static/private';
 
 export const SENDGRID_FROM = 'Rotimi Best <best@classroomio.com>';
-export const SENDGRID_FROM_HELP = 'ClassroomIO <help@classroomio.com>';
+export const SENDGRID_FROM_NOTIFY = 'ClassroomIO <notify@classroomio.com>';
 
 export let sendgrid: MailService;
 
diff --git a/src/lib/utils/store/org.ts b/src/lib/utils/store/org.ts
index 5ceaf910..5878a4ca 100644
--- a/src/lib/utils/store/org.ts
+++ b/src/lib/utils/store/org.ts
@@ -1,7 +1,7 @@
 import { writable, derived } from 'svelte/store';
 import { STEPS } from '../constants/quiz';
 import type { Writable } from 'svelte/store';
-import type { CurrentOrg } from '../types/org';
+import type { CurrentOrg, OrgTeamMember } from '../types/org';
 
 export const orgs = writable([]);
 export const currentOrg: Writable<CurrentOrg> = writable({
@@ -16,7 +16,7 @@ export const currentOrg: Writable<CurrentOrg> = writable({
   theme: ''
 });
 export const orgAudience = writable([]);
-export const orgTeam = writable([]);
+export const orgTeam = writable<OrgTeamMember[]>([]);
 export const currentOrgPath = derived(currentOrg, ($currentOrg) =>
   $currentOrg.siteName ? `/org/${$currentOrg.siteName}` : ''
 );
diff --git a/src/lib/utils/types/org.ts b/src/lib/utils/types/org.ts
index 760efa78..ba6e0b98 100644
--- a/src/lib/utils/types/org.ts
+++ b/src/lib/utils/types/org.ts
@@ -9,3 +9,13 @@ export interface CurrentOrg {
   landingpage: {};
   theme: string;
 }
+
+export interface OrgTeamMember {
+  id: number;
+  email: string;
+  verified: boolean;
+  profileId?: string;
+  fullname: string;
+  role: string;
+  isAdmin: boolean;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ea96da9e..bbc86adb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -31,7 +31,7 @@
   import { isMobile } from '$lib/utils/store/useMobile';
   import { ROUTE } from '$lib/utils/constants/routes';
   import { getOrganizations, getCurrentOrg } from '$lib/utils/services/org';
-  import { toggleBodyByTheme } from '$lib/utils/functions/app';
+  import { toggleBodyByMode } from '$lib/utils/functions/app';
   import { appStore } from '$lib/utils/store/app';
   import { currentOrg } from '$lib/utils/store/org';
   import { setTheme } from '$lib/utils/functions/theme';
@@ -202,6 +202,15 @@
       window['ga-disable-G-C7WBN0S06R'] = true;
     }
 
+    if (browser) {
+      // Update theme - dark or light mode
+      $appStore.isDark = localStorage.getItem('mode') === 'dark';
+      toggleBodyByMode($appStore.isDark);
+
+      const theme = localStorage.getItem('theme');
+      if (theme) setTheme(theme);
+    }
+
     setupSentry();
 
     handleResize();
@@ -239,12 +248,6 @@
       }
     });
 
-    if (browser) {
-      // Update theme - dark or light mode
-      $appStore.isDark = localStorage.getItem('theme') === 'dark';
-      toggleBodyByTheme($appStore.isDark);
-    }
-
     if (data.isOrgSite) {
       console.log('data', data);
       if (!data.org) {
diff --git a/src/routes/api/completion/+server.js b/src/routes/api/completion/+server.js
index 44963e03..6ef605a6 100644
--- a/src/routes/api/completion/+server.js
+++ b/src/routes/api/completion/+server.js
@@ -25,9 +25,13 @@ export async function POST({ request }) {
   const response = await openai.createChatCompletion({
     model: 'gpt-3.5-turbo',
     messages: [
+      {
+        role: 'system',
+        content: 'Act like an assistant of a lecturer'
+      },
       {
         role: 'user',
-        content: `Generate ${instruction[type]} given the course title is "${courseTitle}" and the lesson is "${lessonTitle}". Format in HTML without any styling, no ul, ol or li tags, don't include the title of the course and title of the lesson in the result & make sure the content is well detailed.`
+        content: `Generate ${instruction[type]} given the course title is "${courseTitle}" and the title of the lesson is "${lessonTitle}". Format in HTML without any styling. MOST IMPORTANT DON'T include the title of the course and don't include the lesson title: "${lessonTitle}" in your output. Please make sure the content is well detailed.`
       }
     ],
     stream: true
diff --git a/src/routes/api/email/course/welcome/+server.js b/src/routes/api/email/course/welcome/+server.js
new file mode 100644
index 00000000..cce9d134
--- /dev/null
+++ b/src/routes/api/email/course/welcome/+server.js
@@ -0,0 +1,55 @@
+import { render } from 'svelte-email';
+import { json } from '@sveltejs/kit';
+import WelcomeTemplate from './template.svelte';
+import { getSendgrid, SENDGRID_FROM_NOTIFY } from '$lib/utils/services/sendgrid';
+import { getSupabase } from '$lib/utils/functions/supabase';
+
+const sendgrid = getSendgrid();
+const supabase = getSupabase();
+
+export async function POST({ request }) {
+  const { to, name, orgName, courseName, orgSiteName } = await request.json();
+  const accessToken = request.headers.get('Authorization') || '';
+  console.log('/POST api/email/course/welcome', to, name, orgName);
+
+  if (!to || !name || !orgName || !courseName || !orgSiteName) {
+    return json({ success: false, message: 'Missing required fields' }, { status: 400 });
+  }
+
+  let user;
+  try {
+    const { data } = await supabase.auth.getUser(accessToken);
+    user = data.user;
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!user) {
+    return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
+  }
+
+  const origin = request.headers.get('origin');
+  const inviteLink = `${origin}/org/${orgSiteName}/courses`;
+
+  const options = {
+    from: SENDGRID_FROM_NOTIFY,
+    to,
+    subject: `You have been invited to a course in ${orgName}!`,
+    html: render({
+      template: WelcomeTemplate,
+      props: {
+        name,
+        orgName,
+        inviteLink,
+        courseName
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}
diff --git a/src/routes/api/email/course/welcome/template.svelte b/src/routes/api/email/course/welcome/template.svelte
new file mode 100644
index 00000000..6457a342
--- /dev/null
+++ b/src/routes/api/email/course/welcome/template.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
+  import Welcome from './welcome.svelte';
+
+  export let name = '';
+  export let orgName = '';
+  export let inviteLink = '';
+  export let courseName = '';
+</script>
+
+<EmailTemplate
+  children={Welcome}
+  props={{
+    name,
+    orgName,
+    inviteLink,
+    courseName
+  }}
+/>
diff --git a/src/routes/api/email/course/welcome/welcome.svelte b/src/routes/api/email/course/welcome/welcome.svelte
new file mode 100644
index 00000000..ac0e5185
--- /dev/null
+++ b/src/routes/api/email/course/welcome/welcome.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Text, Section, Button, Link } from 'svelte-email';
+
+  export let name = '';
+  export let orgName = '';
+  export let inviteLink = '';
+  export let courseName = '';
+
+  const fontFamily =
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
+
+  const paragraph = {
+    fontFamily,
+    fontSize: '16px',
+    lineHeight: '26px'
+  };
+  const paragraphContent = {
+    ...paragraph,
+    margin: '20px 0'
+  };
+
+  const footerParagraph = {
+    ...paragraph,
+    margin: '0px'
+  };
+
+  const btnContainer = {
+    textAlign: 'center' as const
+  };
+
+  const button = {
+    fontFamily,
+    backgroundColor: '#1d4ee2',
+    borderRadius: '5px',
+    color: '#fff',
+    fontSize: '16px',
+    textDecoration: 'none',
+    textAlign: 'center' as const,
+    display: 'block'
+  };
+</script>
+
+<Text style={paragraph}>Hey {name},</Text>
+<Text style={paragraphContent}>
+  You have been given access to teach a course by {orgName}
+</Text>
+<Text style={paragraphContent}>
+  The course is titled: {courseName}
+</Text>
+
+<Section style={btnContainer}>
+  <Button pX={12} pY={12} style={button} href={inviteLink}>Open Dashboard</Button>
+</Section>
diff --git a/src/routes/api/email/invite/+server.js b/src/routes/api/email/invite/+server.js
index f0a80e23..ec7439d6 100644
--- a/src/routes/api/email/invite/+server.js
+++ b/src/routes/api/email/invite/+server.js
@@ -1,7 +1,7 @@
 import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
 import TeacherInviteTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_HELP } from '$lib/utils/services/sendgrid';
+import { getSendgrid, SENDGRID_FROM_NOTIFY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
 
 const sendgrid = getSendgrid();
@@ -47,7 +47,7 @@ export async function POST({ request }) {
   console.log('inviteData', inviteData);
 
   const options = {
-    from: SENDGRID_FROM_HELP,
+    from: SENDGRID_FROM_NOTIFY,
     to: email,
     subject: `Join ${name} on ClassroomIO`,
     html: render({
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index 6cdc3593..fe11d658 100644
--- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
@@ -205,7 +205,7 @@
     <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
   {:else if !!data.lessonId}
     <PageBody>
-      <Materials lessonId={data.lessonId} {mode} {prevMode} bind:isSaving />
+      <Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />
 
       <div class="w-full flex flex-row-reverse">
         <PrimaryButton
diff --git a/src/routes/courses/[id]/people/+page.svelte b/src/routes/courses/[id]/people/+page.svelte
index c82c381e..c6f12352 100644
--- a/src/routes/courses/[id]/people/+page.svelte
+++ b/src/routes/courses/[id]/people/+page.svelte
@@ -62,6 +62,9 @@
 
   async function deletePerson() {
     $group.people = $group.people.filter((person: { id: string }) => person.id !== member.id);
+    $group.tutors = $group.tutors.filter(
+      (person: { memberId: string }) => person.memberId !== member.id
+    );
 
     await deleteGroupMember(member.id);
   }
@@ -114,6 +117,7 @@
 </script>
 
 <InviationModal />
+
 <DeleteConfirmation
   email={member.email || (member.profile && member.profile.email)}
   {deletePerson}