From 14f58792f6499ca86c823fad8b9330be0a07c4a0 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 14 Sep 2023 06:42:16 +0100
Subject: [PATCH 01/11] CLASSROOMIO-T-152: Student can join any course via
 invite link

---
 src/lib/components/AuthUI/index.svelte        |  26 +--
 .../components/People/InviationModal.svelte   | 104 ++++++------
 .../Course/components/People/store.js         |   6 +-
 src/lib/components/Course/store.ts            |   1 +
 src/lib/components/Org/SideBar.svelte         |  10 +-
 src/lib/components/PrimaryButton/constants.js |   2 +
 src/lib/utils/constants/routes.ts             |   8 +-
 src/lib/utils/functions/user.ts               |   8 +
 src/lib/utils/types/index.ts                  |   1 +
 src/routes/+layout.svelte                     |   2 +-
 src/routes/api/email/invite/+server.js        |   4 +-
 src/routes/invite/s/[hash]/+layout.server.ts  |  31 ++++
 src/routes/invite/s/[hash]/+page.svelte       |  82 ++++++++++
 .../invite/{ => t}/[hash]/+layout.server.ts   |  16 +-
 src/routes/invite/{ => t}/[hash]/+page.svelte | 149 +++++++++++-------
 src/routes/onboarding/+page.svelte            |   4 -
 src/routes/signup/+page.svelte                |   3 +-
 17 files changed, 320 insertions(+), 137 deletions(-)
 create mode 100644 src/lib/utils/functions/user.ts
 create mode 100644 src/routes/invite/s/[hash]/+layout.server.ts
 create mode 100644 src/routes/invite/s/[hash]/+page.svelte
 rename src/routes/invite/{ => t}/[hash]/+layout.server.ts (59%)
 rename src/routes/invite/{ => t}/[hash]/+page.svelte (58%)

diff --git a/src/lib/components/AuthUI/index.svelte b/src/lib/components/AuthUI/index.svelte
index 86198e6e..9ddbd055 100644
--- a/src/lib/components/AuthUI/index.svelte
+++ b/src/lib/components/AuthUI/index.svelte
@@ -1,17 +1,20 @@
-<script>
+<script lang="ts">
+  import { page } from '$app/stores';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import GoogleIconColored from '../Icons/GoogleIconColored.svelte';
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { currentOrg } from '$lib/utils/store/org';
+  import type { SupabaseClient } from '@supabase/supabase-js';
 
-  export let supabase;
-  export let handleSubmit;
+  export let supabase: SupabaseClient;
+  export let handleSubmit = () => {};
   export let isLogin = true;
   export let showOnlyContent = false;
   export let isLoading = false;
   export let showLogo = false;
   export let formRef;
+  export let hideGoogleAuth = false;
 
   async function signInWithGoogle() {
     if (isLoading) {
@@ -19,12 +22,11 @@
     }
     try {
       console.log('signInWithGoogle');
-      const { user, session, error } = await supabase.auth.signInWithOAuth({
+      const { error, data } = await supabase.auth.signInWithOAuth({
         provider: 'google'
       });
 
-      console.log('user', user);
-      console.log('session', session);
+      console.log('data', data);
       console.log('error', error);
     } catch (error) {
       console.log('catch error', error);
@@ -57,7 +59,7 @@
       >
         <slot />
       </form>
-      {#if !showOnlyContent}
+      {#if !showOnlyContent && !hideGoogleAuth}
         <div class="w-10/12 mb-3">
           <p class="dark:text-white text-sm mb-5">or sign up with:</p>
           <PrimaryButton
@@ -75,10 +77,14 @@
     {#if !showOnlyContent}
       <div class="w-full p-6 border-t border-grey text-center">
         {#if isLogin}
-          Not registered yet? <a class="hover:underline text-primary-700" href="/signup">Sign up</a>
+          Not registered yet? <a
+            class="hover:underline text-primary-700"
+            href="/signup{$page.url.search}">Sign up</a
+          >
         {:else}
-          Already have an account? <a class="hover:underline text-primary-700" href="/login"
-            >Log In</a
+          Already have an account? <a
+            class="hover:underline text-primary-700"
+            href="/login{$page.url.search}">Log In</a
           >
         {/if}
       </div>
diff --git a/src/lib/components/Course/components/People/InviationModal.svelte b/src/lib/components/Course/components/People/InviationModal.svelte
index e2ad1bcb..f614af90 100644
--- a/src/lib/components/Course/components/People/InviationModal.svelte
+++ b/src/lib/components/Course/components/People/InviationModal.svelte
@@ -1,27 +1,20 @@
 <script lang="ts">
+  import { Popover } from 'carbon-components-svelte';
+  import Link from 'carbon-icons-svelte/lib/Link.svelte';
   import Modal from '$lib/components/Modal/index.svelte';
+  import copy from 'copy-to-clipboard';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import TextArea from '$lib/components/Form/TextArea.svelte';
   import { ROLE } from '$lib/utils/constants/roles';
   import { addGroupMember, fetchGroup } from '$lib/utils/services/courses';
   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: {
-    students: string;
-    tutors: string;
-    title?: string;
-    description?: string;
-  } = {
-    students: '',
-    tutors: ''
-  };
+  import type { Course } from '$lib/utils/types';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
 
   interface Tutor {
     id: number;
@@ -33,6 +26,8 @@
   let selectedIds: Array<number> = [];
   let selectedTutors: Tutor[] = [];
   let isLoadingTutors = false;
+  let link = '';
+  let copied = false;
 
   function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
     return value !== null && value !== undefined;
@@ -41,28 +36,14 @@
     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;
-    if (hasError) return;
+    if (!selectedTutors.length) {
+      resetForm();
+      return;
+    }
 
     let membersStack = [];
     console.log(`$course`, $course);
 
-    // Create groupmemebers from group_id and add teachers and students
-    for (const studentEmail of students) {
-      membersStack.push({
-        email: studentEmail,
-        group_id: $course.group?.id,
-        role_id: ROLE.STUDENT
-      });
-    }
-
     for (const tutor of selectedTutors) {
       membersStack.push({
         profile_id: tutor.profileId,
@@ -128,12 +109,37 @@
     isLoadingTutors = false;
   }
 
+  function getInviteLink(_course: Course, siteName: string) {
+    const hash = encodeURIComponent(
+      btoa(
+        JSON.stringify({
+          groupId: _course.group?.id,
+          name: _course.title,
+          description: _course.description,
+          orgSiteName: siteName
+        })
+      )
+    );
+
+    return `https://${siteName}.classroomio.com/invite/s/${hash}`;
+  }
+
+  function copyLink() {
+    copy(link);
+    copied = true;
+    setTimeout(() => {
+      copied = false;
+    }, 1000);
+  }
+
   $: {
     selectedTutors = formatSelected(selectedIds);
     console.log('selectedTutors', selectedTutors);
   }
 
   $: setTutors($currentOrg.id, $invitationModal.open);
+
+  $: link = getInviteLink($course, $currentOrg.siteName);
 </script>
 
 <Modal
@@ -144,8 +150,8 @@
   modalHeading="Invite people"
 >
   <form on:submit|preventDefault={onSubmit}>
-    <div class="mb-4">
-      <p class="text-base mb-1">Invite Tutors</p>
+    <div class="mb-8">
+      <p class="text-base mb-1 font-semibold">Invite Tutors</p>
       <MultiSelect
         disabled={isLoadingTutors}
         label="Select tutors in organization..."
@@ -169,19 +175,29 @@
       {/if}
     </div>
 
-    <TextArea
-      label="Invite Students"
-      labelClassName="text-base"
-      bind:value={$invitationModal.students}
-      rows="2"
-      maxRows={3}
-      placeholder="student@gmail.com, john@gmail.com"
-      helperMessage="To invite people, add their emails separated by a comma"
-      errorMessage={errors.students}
-      className="mb-4"
-    />
+    <div class="mb-8 w-[90%] flex justify-between items-center">
+      <div class="w-3/5">
+        <p class="text-base mb-1 font-semibold">Invite Students</p>
+        <p class=" text-sm">You can invite students via an invite link</p>
+      </div>
 
-    <div class="mt-5 flex items-center">
+      <div class="relative">
+        <PrimaryButton
+          disablePadding={true}
+          className="text-sm py-2 px-3"
+          variant={VARIANTS.OUTLINED}
+          onClick={copyLink}
+        >
+          <Link size={16} class="mr-1" />
+          Copy link
+        </PrimaryButton>
+        <Popover caret open={copied} align="bottom">
+          <div style="padding: 5px">Copied Successfully</div>
+        </Popover>
+      </div>
+    </div>
+
+    <div class="mt-5 flex items-center flex-row-reverse">
       <PrimaryButton className="px-6 py-3" label="Finish" type="submit" />
     </div>
   </form>
diff --git a/src/lib/components/Course/components/People/store.js b/src/lib/components/Course/components/People/store.js
index 6beba7f5..b338b663 100644
--- a/src/lib/components/Course/components/People/store.js
+++ b/src/lib/components/Course/components/People/store.js
@@ -5,12 +5,10 @@ export const deleteMemberModal = writable({
 });
 
 export const invitationModal = writable({
-  open: false,
-  students: ''
+  open: false
 });
 
 export const resetForm = () =>
   invitationModal.update(() => ({
-    open: false,
-    students: ''
+    open: false
   }));
diff --git a/src/lib/components/Course/store.ts b/src/lib/components/Course/store.ts
index 1bad049b..fabf860c 100644
--- a/src/lib/components/Course/store.ts
+++ b/src/lib/components/Course/store.ts
@@ -11,6 +11,7 @@ export const course: Writable<Course> = writable({
   description: '',
   cost: 0,
   currency: '',
+  status: 'ACTIVE',
   is_certificate_downloadable: false,
   certificate_theme: 'professional',
   metadata: {
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index c497b403..99dd8797 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -19,12 +19,12 @@
   const menuItems = [
     {
       path: '',
-      label: 'Home'
-    },
-    {
-      path: '/quiz',
-      label: 'Quizzes'
+      label: 'Dashboard'
     },
+    // {
+    //   path: '/quiz',
+    //   label: 'Quizzes'
+    // },
     {
       path: '/courses',
       label: 'Courses'
diff --git a/src/lib/components/PrimaryButton/constants.js b/src/lib/components/PrimaryButton/constants.js
index a5ac46f8..4b93c17e 100644
--- a/src/lib/components/PrimaryButton/constants.js
+++ b/src/lib/components/PrimaryButton/constants.js
@@ -7,6 +7,7 @@ export const VARIANTS = {
   CONTAINED_SUCCESS: 'CONTAINED_SUCCESS',
   OUTLINED: 'OUTLINED',
   NONE: 'NONE',
+  LINK: 'LINK',
   TEXT: 'TEXT',
   TEXT_DANGER: 'TEXT_DANGER'
 };
@@ -25,6 +26,7 @@ export const VARIANTS_CLASS = {
   [VARIANTS.NONE]:
     'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
   [VARIANTS.TEXT]: 'text-black hover:underline',
+  [VARIANTS.LINK]: 'text-primary-500 dark:text-primary-500 hover:underline',
   [VARIANTS.TEXT_DANGER]:
     'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300'
 };
diff --git a/src/lib/utils/constants/routes.ts b/src/lib/utils/constants/routes.ts
index 087d337d..f742a45d 100644
--- a/src/lib/utils/constants/routes.ts
+++ b/src/lib/utils/constants/routes.ts
@@ -7,7 +7,8 @@ export const ROUTE = {
   COURSE: '/course',
   LOGIN: '/login',
   SIGN_UP: '/signup',
-  INVITE_SIGNUP: '/invite',
+  INVITE_TEACHER: '/invite/t',
+  INVITE_STUDENT: '/invite/s',
   PROFILE: '/profile',
   PEOPLE: '/people',
   DISCUSSIONS: '/discussions',
@@ -20,7 +21,7 @@ export const PUBLIC_ROUTES = [
   `^${ROUTE.HOME}$`,
   ROUTE.LOGIN,
   ROUTE.SIGN_UP,
-  `^${ROUTE.INVITE_SIGNUP}/.*`,
+  `^${ROUTE.INVITE_TEACHER}/.*`,
   ROUTE.FORGOT,
   ROUTE.RESET,
   `^${ROUTE.PAGES}/.*`,
@@ -31,7 +32,8 @@ export const PUBLIC_ROUTES = [
 export const ROUTES_TO_HIDE_NAV = [
   ROUTE.LOGIN,
   ROUTE.SIGN_UP,
-  `^${ROUTE.INVITE_SIGNUP}/.*`,
+  `^${ROUTE.INVITE_TEACHER}/.*`,
+  `^${ROUTE.INVITE_STUDENT}/.*`,
   ROUTE.FORGOT,
   ROUTE.RESET,
   ROUTE.ONBOARDING
diff --git a/src/lib/utils/functions/user.ts b/src/lib/utils/functions/user.ts
new file mode 100644
index 00000000..87b677b3
--- /dev/null
+++ b/src/lib/utils/functions/user.ts
@@ -0,0 +1,8 @@
+import { supabase } from '$lib/utils/functions/supabase';
+import type { Profile } from '$lib/components/Course/components/People/types';
+
+export async function getProfile(email: string): Promise<Profile | null> {
+  const { data } = await supabase.from('profile').select('*').eq('email', email).single();
+  console.log('getProfile data', data);
+  return data;
+}
diff --git a/src/lib/utils/types/index.ts b/src/lib/utils/types/index.ts
index 98cdc6ff..a9d1b312 100644
--- a/src/lib/utils/types/index.ts
+++ b/src/lib/utils/types/index.ts
@@ -64,6 +64,7 @@ export interface Group {
   updated_at?: string;
   organization_id?: string /* foreign key to organization.id */;
   organization?: Organization;
+  tutors: Profile[];
 }
 
 export interface Role {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d41e90c9..9be57c7a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -81,7 +81,7 @@
     console.log('Get user profile', authUser);
 
     if (!authUser) {
-      goto('/login');
+      goto('/login?redirect=/' + path);
     }
 
     // Check if user has profile
diff --git a/src/routes/api/email/invite/+server.js b/src/routes/api/email/invite/+server.js
index ec7439d6..17947ecb 100644
--- a/src/routes/api/email/invite/+server.js
+++ b/src/routes/api/email/invite/+server.js
@@ -15,7 +15,7 @@ export async function POST({ request }) {
   const accessToken = request.headers.get('Authorization');
   console.log('/POST api/email/invite', body);
 
-  if (!org || !Object.keys(org) || !email) {
+  if (!org || !Object.keys(org) || !email || !accessToken) {
     return json(
       { success: false, message: 'Org data and Teacher name are required' },
       { status: 400 }
@@ -43,7 +43,7 @@ export async function POST({ request }) {
     orgId: id,
     orgSiteName: siteName
   });
-  const inviteLink = `${origin}/invite/${encodeURIComponent(btoa(inviteData))}`;
+  const inviteLink = `${origin}/invite/t/${encodeURIComponent(btoa(inviteData))}`;
   console.log('inviteData', inviteData);
 
   const options = {
diff --git a/src/routes/invite/s/[hash]/+layout.server.ts b/src/routes/invite/s/[hash]/+layout.server.ts
new file mode 100644
index 00000000..73439ae0
--- /dev/null
+++ b/src/routes/invite/s/[hash]/+layout.server.ts
@@ -0,0 +1,31 @@
+import { redirect } from '@sveltejs/kit';
+import { getSupabase, supabase } from '$lib/utils/functions/supabase';
+import { getCurrentOrg } from '$lib/utils/services/org';
+
+if (!supabase) {
+  getSupabase();
+}
+
+export const load = async ({ params = { hash: '' } }) => {
+  try {
+    const courseHashData = atob(decodeURIComponent(params.hash));
+    console.log('courseHashData', courseHashData);
+
+    const { groupId, name, description, orgSiteName } = JSON.parse(courseHashData);
+
+    if (!groupId || !name || !description || !orgSiteName) {
+      throw 'Validation failed';
+    }
+    const currentOrg = await getCurrentOrg(orgSiteName, true);
+
+    return {
+      groupId,
+      name,
+      description,
+      currentOrg
+    };
+  } catch (error) {
+    console.error('Error decoding course invite params.hash', error);
+    throw redirect(301, '/404');
+  }
+};
diff --git a/src/routes/invite/s/[hash]/+page.svelte b/src/routes/invite/s/[hash]/+page.svelte
new file mode 100644
index 00000000..18f29853
--- /dev/null
+++ b/src/routes/invite/s/[hash]/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import AuthUI from '$lib/components/AuthUI/index.svelte';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { addGroupMember } from '$lib/utils/services/courses';
+  import type { CurrentOrg } from '$lib/utils/types/org.js';
+  import { ROLE } from '$lib/utils/constants/roles';
+  import { profile } from '$lib/utils/store/user.js';
+
+  export let data;
+
+  let supabase = getSupabase();
+  let loading = false;
+
+  let disableSubmit = false;
+  let formRef: HTMLFormElement;
+
+  async function handleSubmit() {
+    loading = true;
+
+    const member = {
+      profile_id: $profile.id,
+      group_id: data.groupId,
+      role_id: ROLE.STUDENT
+    };
+    addGroupMember(member).then((addedMember) => {
+      loading = false;
+      if (addedMember.error) {
+        console.error('Error adding student to group', data.groupId);
+        return;
+      }
+
+      // Send notification to teacher(s) that a student has joined the course.
+      // also send welcome email to students when they join the course
+      // go to lms
+      return goto('/lms');
+    });
+  }
+
+  function setCurOrg(cOrg: CurrentOrg) {
+    if (!cOrg) return;
+    currentOrg.set(cOrg);
+  }
+
+  onMount(() => {
+    setTheme(data.currentOrg?.theme || '');
+  });
+
+  $: setCurOrg(data.currentOrg as CurrentOrg);
+</script>
+
+<svelte:head>
+  <title>Join {data.name} on ClassroomIO</title>
+</svelte:head>
+
+<AuthUI
+  {supabase}
+  isLogin={false}
+  {handleSubmit}
+  isLoading={loading}
+  showOnlyContent={true}
+  showLogo={true}
+  bind:formRef
+>
+  <div class="mt-0 w-full">
+    <h3 class="dark:text-white text-lg font-medium mt-0 mb-4 text-center">{data.name}</h3>
+    <p class="dark:text-white text-sm font-light text-center">{data.description}</p>
+  </div>
+
+  <div class="my-4 w-full flex justify-center items-center">
+    <PrimaryButton
+      label="Join Course"
+      type="submit"
+      isDisabled={disableSubmit || loading}
+      isLoading={loading}
+    />
+  </div>
+</AuthUI>
diff --git a/src/routes/invite/[hash]/+layout.server.ts b/src/routes/invite/t/[hash]/+layout.server.ts
similarity index 59%
rename from src/routes/invite/[hash]/+layout.server.ts
rename to src/routes/invite/t/[hash]/+layout.server.ts
index 8dcb5fd3..743bb377 100644
--- a/src/routes/invite/[hash]/+layout.server.ts
+++ b/src/routes/invite/t/[hash]/+layout.server.ts
@@ -1,7 +1,14 @@
 import { redirect } from '@sveltejs/kit';
 import { getCurrentOrg } from '$lib/utils/services/org';
-import { getSupabase } from '$lib/utils/functions/supabase';
+import { getSupabase, supabase } from '$lib/utils/functions/supabase';
+import { getProfile } from '$lib/utils/functions/user';
 
+if (!supabase) {
+  getSupabase();
+}
+
+// we need to know if the email exists or not.
+// with this we can only ask the user to accept
 export const load = async ({ params = { hash: '' } }) => {
   try {
     const hashData = atob(decodeURIComponent(params.hash));
@@ -9,13 +16,16 @@ export const load = async ({ params = { hash: '' } }) => {
 
     const { orgId, email, orgSiteName } = JSON.parse(hashData);
 
-    getSupabase();
     const _currentOrg = await getCurrentOrg(orgSiteName, true);
 
+    const profile = await getProfile(email);
+    console.log('profile data', profile);
+
     return {
       orgId,
       email,
-      currentOrg: _currentOrg
+      currentOrg: _currentOrg,
+      profile
     };
   } catch (error) {
     console.error('Error decoding invite params.hash', error);
diff --git a/src/routes/invite/[hash]/+page.svelte b/src/routes/invite/t/[hash]/+page.svelte
similarity index 58%
rename from src/routes/invite/[hash]/+page.svelte
rename to src/routes/invite/t/[hash]/+page.svelte
index 0ac809b1..06edeb4b 100644
--- a/src/routes/invite/[hash]/+page.svelte
+++ b/src/routes/invite/t/[hash]/+page.svelte
@@ -10,11 +10,11 @@
   } from '$lib/utils/functions/validator';
   import { SIGNUP_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import { setTheme } from '$lib/utils/functions/theme';
   import type { CurrentOrg } from '$lib/utils/types/org.js';
   import { onMount } from 'svelte';
-  import Error from '../../+error.svelte';
+  import type { Profile } from '$lib/components/Course/components/People/types';
 
   export let data;
 
@@ -34,7 +34,10 @@
   let formRef: HTMLFormElement;
 
   async function handleSubmit() {
-    const validationRes = authValidation(fields);
+    const validationRes = authValidation({
+      ...fields,
+      email: 'test@gmail.com' // validation for this ema
+    });
     console.log('validationRes', validationRes);
 
     if (Object.keys(validationRes).length) {
@@ -44,40 +47,44 @@
 
     try {
       loading = true;
-      // Signup
-      const { data: signupData, error } = await supabase.auth.signUp({
-        email: data.email,
-        password: fields.password
-      });
+      let profile: Profile | null = data.profile;
 
-      console.log('Signup', signupData);
-      if (error) throw error;
+      if (!data.profile) {
+        // Signup
+        const { data: signupData, error } = await supabase.auth.signUp({
+          email: data.email,
+          password: fields.password
+        });
 
-      if (!signupData.user) {
-        throw 'User cannot be created ';
+        console.log('Signup', signupData);
+        if (error) throw error;
+
+        if (!signupData.user) {
+          throw 'User cannot be created ';
+        }
+
+        // Insert profile
+        const userId = signupData.user.id;
+        const profileRes = await supabase
+          .from('profile')
+          .insert({
+            id: userId,
+            username: fields.name.toLowerCase().replace(' ', '-') + new Date().getTime(),
+            fullname: fields.name,
+            email: data.email
+          })
+          .select();
+
+        console.log('Insert profile', profileRes.data);
+
+        if (profileRes.error) {
+          throw profileRes.error;
+        }
+
+        profile = profileRes.data[0] || {};
       }
 
-      // Insert profile
-      const userId = signupData.user.id;
-      const profileRes = await supabase
-        .from('profile')
-        .insert({
-          id: userId,
-          username: fields.name.toLowerCase().replace(' ', '-') + new Date().getTime(),
-          fullname: fields.name,
-          email: data.email
-        })
-        .select();
-
-      console.log('Insert profile', profileRes.data);
-
-      if (profileRes.error) {
-        throw profileRes.error;
-      }
-
-      const profile = profileRes.data[0] || {};
-
-      if (!profile.id) {
+      if (!profile?.id) {
         throw 'Unable to create profile';
       }
 
@@ -91,12 +98,23 @@
         .match({ email: data.email, organization_id: data.currentOrg?.id });
 
       console.log('Update member response', updateMemberRes);
-      formRef?.reset();
 
-      return goto('/login');
+      const res = await supabase.auth.signInWithPassword({
+        email: data.email,
+        password: fields.password
+      });
+
+      if (res.error) {
+        throw res.error;
+      }
+
+      formRef?.reset();
+      return goto($currentOrgPath);
     } catch (error) {
       if (error instanceof Error) {
         submitError = error.message;
+      } else {
+        submitError = error?.toString() || '';
       }
     } finally {
       loading = false;
@@ -116,6 +134,7 @@
   $: disableSubmit = getDisableSubmit(fields);
 
   $: setCurOrg(data.currentOrg as CurrentOrg);
+  $: console.log('data.profile', data.profile);
 </script>
 
 <svelte:head>
@@ -132,7 +151,13 @@
   bind:formRef
 >
   <div class="mt-4 w-full">
-    <p class="dark:text-white text-lg font-semibold mb-6">Create a free account</p>
+    <p class="dark:text-white text-lg font-semibold mb-6">
+      {#if data.profile}
+        Log in to join
+      {:else}
+        Create a free account to join
+      {/if}
+    </p>
     <TextField
       label="Your Email"
       value={data.email}
@@ -142,18 +167,20 @@
       inputClassName="w-full"
       isDisabled={true}
     />
-    <TextField
-      label="Full Name"
-      bind:value={fields.name}
-      type="text"
-      autoFocus={true}
-      placeholder="e.g Joke Silva"
-      className="mb-6"
-      inputClassName="w-full"
-      isDisabled={loading}
-      errorMessage={errors.name}
-      isRequired
-    />
+    {#if !data.profile}
+      <TextField
+        label="Full Name"
+        bind:value={fields.name}
+        type="text"
+        autoFocus={true}
+        placeholder="e.g Joke Silva"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.name}
+        isRequired
+      />
+    {/if}
     <TextField
       label="Your Password"
       bind:value={fields.password}
@@ -166,17 +193,19 @@
       helperMessage="Password must be more than 6 characters"
       isRequired
     />
-    <TextField
-      label="Confirm Password"
-      bind:value={fields.confirmPassword}
-      type="password"
-      placeholder="************"
-      className="mb-6"
-      inputClassName="w-full"
-      isDisabled={loading}
-      errorMessage={errors.confirmPassword}
-      isRequired
-    />
+    {#if !data.profile}
+      <TextField
+        label="Confirm Password"
+        bind:value={fields.confirmPassword}
+        type="password"
+        placeholder="************"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.confirmPassword}
+        isRequired
+      />
+    {/if}
     {#if submitError}
       <p class="text-sm text-red-500">{submitError}</p>
     {/if}
@@ -184,7 +213,7 @@
 
   <div class="my-4 w-full flex justify-end items-center">
     <PrimaryButton
-      label="Create and Join"
+      label="Accept Invite"
       type="submit"
       className="sm:w-full w-full"
       isDisabled={disableSubmit || loading}
diff --git a/src/routes/onboarding/+page.svelte b/src/routes/onboarding/+page.svelte
index 14bc6722..a2c06fdd 100644
--- a/src/routes/onboarding/+page.svelte
+++ b/src/routes/onboarding/+page.svelte
@@ -199,10 +199,6 @@
   $: progress = Math.round((step / maxSteps) * 100);
   $: fields.siteName = generateSitename(fields.siteName || '');
   $: setOrgSiteName(fields.orgName, isSiteNameTouched);
-
-  $: {
-    console.log('currentOrg', $currentOrg);
-  }
 </script>
 
 {#if $profile.id}
diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte
index e561de8e..db2de514 100644
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -1,5 +1,6 @@
 <script>
   import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { getSupabase } from '$lib/utils/functions/supabase';
@@ -40,7 +41,7 @@
 
       formRef?.reset();
 
-      return goto('/login');
+      return goto('/login' + $page.url.search);
       // success = true;
       // fields = Object.assign({}, SIGNUP_FIELDS);
     } catch (error) {

From be619ae6bd6ef28e7671e2960b669784b296c638 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 14 Sep 2023 18:46:24 +0100
Subject: [PATCH 02/11] CLASSROOMIO-T-152: Send notification to teachers and
 student after student joins

---
 .../Course/components/People/utils.ts         |  2 +-
 .../email/course/student_welcome/+server.js   | 51 +++++++++++++++++
 .../course/student_welcome/template.svelte    | 15 +++++
 .../course/student_welcome/welcome.svelte     | 37 ++++++++++++
 .../course/teacher_student_joined/+server.js  | 49 ++++++++++++++++
 .../teacher_student_joined/template.svelte    | 13 +++++
 .../teacher_student_joined/welcome.svelte     | 44 ++++++++++++++
 .../{welcome => teacher_welcome}/+server.js   |  2 +-
 .../template.svelte                           |  0
 .../welcome.svelte                            |  0
 src/routes/invite/s/[hash]/+page.svelte       | 28 ++++++++-
 src/routes/invite/s/[hash]/utils.ts           | 56 ++++++++++++++++++
 src/routes/login/+page.svelte                 |  9 +++
 src/routes/signup/+page.svelte                | 57 ++++++++++++++++---
 14 files changed, 351 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/api/email/course/student_welcome/+server.js
 create mode 100644 src/routes/api/email/course/student_welcome/template.svelte
 create mode 100644 src/routes/api/email/course/student_welcome/welcome.svelte
 create mode 100644 src/routes/api/email/course/teacher_student_joined/+server.js
 create mode 100644 src/routes/api/email/course/teacher_student_joined/template.svelte
 create mode 100644 src/routes/api/email/course/teacher_student_joined/welcome.svelte
 rename src/routes/api/email/course/{welcome => teacher_welcome}/+server.js (94%)
 rename src/routes/api/email/course/{welcome => teacher_welcome}/template.svelte (100%)
 rename src/routes/api/email/course/{welcome => teacher_welcome}/welcome.svelte (100%)
 create mode 100644 src/routes/invite/s/[hash]/utils.ts

diff --git a/src/lib/components/Course/components/People/utils.ts b/src/lib/components/Course/components/People/utils.ts
index 58240efa..5b2e9f39 100644
--- a/src/lib/components/Course/components/People/utils.ts
+++ b/src/lib/components/Course/components/People/utils.ts
@@ -11,7 +11,7 @@ export async function sendTeacherCourseWelcome(params: {
   const accessToken = data.session?.access_token || '';
 
   try {
-    const response = await fetch('/api/email/course/welcome', {
+    const response = await fetch('/api/email/course/teacher_welcome', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
diff --git a/src/routes/api/email/course/student_welcome/+server.js b/src/routes/api/email/course/student_welcome/+server.js
new file mode 100644
index 00000000..0deb5ef4
--- /dev/null
+++ b/src/routes/api/email/course/student_welcome/+server.js
@@ -0,0 +1,51 @@
+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();
+
+// Sends email to student when they successfully join a course
+export async function POST({ request }) {
+  const { to, orgName, courseName } = await request.json();
+  const accessToken = request.headers.get('Authorization') || '';
+  console.log('/POST api/email/course/student_welcome', to, orgName);
+
+  if (!to || !orgName || !courseName) {
+    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 options = {
+    from: SENDGRID_FROM_NOTIFY,
+    to,
+    subject: `[${orgName}] Welcome to Class`,
+    html: render({
+      template: WelcomeTemplate,
+      props: {
+        orgName,
+        courseName
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}
diff --git a/src/routes/api/email/course/student_welcome/template.svelte b/src/routes/api/email/course/student_welcome/template.svelte
new file mode 100644
index 00000000..7b63c5f3
--- /dev/null
+++ b/src/routes/api/email/course/student_welcome/template.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
+  import Welcome from './welcome.svelte';
+
+  export let orgName = '';
+  export let courseName = '';
+</script>
+
+<EmailTemplate
+  children={Welcome}
+  props={{
+    orgName,
+    courseName
+  }}
+/>
diff --git a/src/routes/api/email/course/student_welcome/welcome.svelte b/src/routes/api/email/course/student_welcome/welcome.svelte
new file mode 100644
index 00000000..682838ef
--- /dev/null
+++ b/src/routes/api/email/course/student_welcome/welcome.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Text } from 'svelte-email';
+
+  export let orgName = '';
+  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'
+  };
+</script>
+
+<Text style={paragraph}>Hey there,</Text>
+<Text style={paragraphContent}>
+  Congratulations, you’ve successfully joined “{courseName}"
+</Text>
+<Text style={paragraphContent}>
+  Everything has been set up for you to have an amazing learning experience.
+</Text>
+<Text style={paragraphContent}>
+  If you run into any issues, don’t fail to reach out to your instructor(s).
+</Text>
+<Text style={footerParagraph}>Cheers,</Text>
+<Text style={footerParagraph}>{orgName}</Text>
diff --git a/src/routes/api/email/course/teacher_student_joined/+server.js b/src/routes/api/email/course/teacher_student_joined/+server.js
new file mode 100644
index 00000000..47cc09f7
--- /dev/null
+++ b/src/routes/api/email/course/teacher_student_joined/+server.js
@@ -0,0 +1,49 @@
+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, courseName } = await request.json();
+  const accessToken = request.headers.get('Authorization') || '';
+  console.log('/POST api/email/course/teacher_student_joined', to, courseName);
+
+  if (!to || !courseName) {
+    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 options = {
+    from: SENDGRID_FROM_NOTIFY,
+    to,
+    subject: `[${courseName}] You've got a new student!`,
+    html: render({
+      template: WelcomeTemplate,
+      props: {
+        courseName
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}
diff --git a/src/routes/api/email/course/teacher_student_joined/template.svelte b/src/routes/api/email/course/teacher_student_joined/template.svelte
new file mode 100644
index 00000000..1b981877
--- /dev/null
+++ b/src/routes/api/email/course/teacher_student_joined/template.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
+  import Welcome from './welcome.svelte';
+
+  export let courseName = '';
+</script>
+
+<EmailTemplate
+  children={Welcome}
+  props={{
+    courseName
+  }}
+/>
diff --git a/src/routes/api/email/course/teacher_student_joined/welcome.svelte b/src/routes/api/email/course/teacher_student_joined/welcome.svelte
new file mode 100644
index 00000000..f27db4ba
--- /dev/null
+++ b/src/routes/api/email/course/teacher_student_joined/welcome.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Text, Link } from 'svelte-email';
+
+  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 linkStyle = {
+    color: '#1d4ee2'
+  };
+</script>
+
+<Text style={paragraph}>Hi amazing tutor,</Text>
+<Text style={paragraphContent}>
+  Congratulations, a new student has joined a course you are teaching: “{courseName}""
+</Text>
+<Text style={paragraphContent}>
+  We hope they have a great experience learning from the best (YOU).
+</Text>
+<Text style={paragraphContent}>
+  If you run into any issues, please don’t fail to reach out to us, we’d love to make your teaching
+  experience as easy as possible.
+</Text>
+
+<Text style={footerParagraph}>Cheers</Text>
+<Text style={footerParagraph}>
+  <Link style={linkStyle} href="https://classroomio.com">ClassroomIO</Link>
+</Text>
diff --git a/src/routes/api/email/course/welcome/+server.js b/src/routes/api/email/course/teacher_welcome/+server.js
similarity index 94%
rename from src/routes/api/email/course/welcome/+server.js
rename to src/routes/api/email/course/teacher_welcome/+server.js
index cce9d134..6ed86ed0 100644
--- a/src/routes/api/email/course/welcome/+server.js
+++ b/src/routes/api/email/course/teacher_welcome/+server.js
@@ -10,7 +10,7 @@ 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);
+  console.log('/POST api/email/course/teacher_welcome', to, name, orgName);
 
   if (!to || !name || !orgName || !courseName || !orgSiteName) {
     return json({ success: false, message: 'Missing required fields' }, { status: 400 });
diff --git a/src/routes/api/email/course/welcome/template.svelte b/src/routes/api/email/course/teacher_welcome/template.svelte
similarity index 100%
rename from src/routes/api/email/course/welcome/template.svelte
rename to src/routes/api/email/course/teacher_welcome/template.svelte
diff --git a/src/routes/api/email/course/welcome/welcome.svelte b/src/routes/api/email/course/teacher_welcome/welcome.svelte
similarity index 100%
rename from src/routes/api/email/course/welcome/welcome.svelte
rename to src/routes/api/email/course/teacher_welcome/welcome.svelte
diff --git a/src/routes/invite/s/[hash]/+page.svelte b/src/routes/invite/s/[hash]/+page.svelte
index 18f29853..0318682b 100644
--- a/src/routes/invite/s/[hash]/+page.svelte
+++ b/src/routes/invite/s/[hash]/+page.svelte
@@ -10,6 +10,7 @@
   import type { CurrentOrg } from '$lib/utils/types/org.js';
   import { ROLE } from '$lib/utils/constants/roles';
   import { profile } from '$lib/utils/store/user.js';
+  import { sendStudentCourseWelcome, sendTeacherStudentJoinedCourse } from './utils';
 
   export let data;
 
@@ -27,6 +28,18 @@
       group_id: data.groupId,
       role_id: ROLE.STUDENT
     };
+
+    const teacherMembers = await supabase
+      .from('groupmember')
+      .select('id, profile(email)')
+      .eq('group_id', data.groupId)
+      .eq('role_id', ROLE.TUTOR);
+
+    const teachers: Array<string> =
+      teacherMembers.data?.map((teacher) => {
+        return teacher.profile?.email || '';
+      }) || [];
+
     addGroupMember(member).then((addedMember) => {
       loading = false;
       if (addedMember.error) {
@@ -34,8 +47,19 @@
         return;
       }
 
+      // Send email welcoming student to the course
+      sendStudentCourseWelcome({
+        to: $profile.email,
+        orgName: data.currentOrg?.name,
+        courseName: data.name
+      });
+
       // Send notification to teacher(s) that a student has joined the course.
-      // also send welcome email to students when they join the course
+      sendTeacherStudentJoinedCourse({
+        to: teachers,
+        courseName: data.name
+      });
+
       // go to lms
       return goto('/lms');
     });
@@ -46,7 +70,7 @@
     currentOrg.set(cOrg);
   }
 
-  onMount(() => {
+  onMount(async () => {
     setTheme(data.currentOrg?.theme || '');
   });
 
diff --git a/src/routes/invite/s/[hash]/utils.ts b/src/routes/invite/s/[hash]/utils.ts
new file mode 100644
index 00000000..dfbc3f1a
--- /dev/null
+++ b/src/routes/invite/s/[hash]/utils.ts
@@ -0,0 +1,56 @@
+import { supabase } from '$lib/utils/functions/supabase';
+
+export async function sendStudentCourseWelcome(params: {
+  to: string;
+  orgName: string;
+  courseName: string;
+}) {
+  const { data } = await supabase.auth.getSession();
+  const accessToken = data.session?.access_token || '';
+
+  try {
+    const response = await fetch('/api/email/course/student_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);
+  }
+}
+
+export async function sendTeacherStudentJoinedCourse(params: {
+  to: Array<string>;
+  courseName: string;
+}) {
+  const { data } = await supabase.auth.getSession();
+  const accessToken = data.session?.access_token || '';
+
+  try {
+    const response = await fetch('/api/email/course/teacher_student_joined', {
+      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/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 5882ce77..ee1a63b7 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { page } from '$app/stores';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { getSupabase } from '$lib/utils/functions/supabase';
@@ -6,6 +7,7 @@
   import { LOGIN_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
   import { currentOrg } from '$lib/utils/store/org';
+  import { goto } from '$app/navigation';
 
   let formRef;
   let supabase = getSupabase();
@@ -14,6 +16,9 @@
   let loading = false;
   let errors = {};
 
+  let query = new URLSearchParams($page.url.search);
+  let redirect = query.get('redirect');
+
   async function handleSubmit() {
     const validationRes = authValidation(fields);
     console.log('validationRes', validationRes);
@@ -31,6 +36,10 @@
       });
       console.log('data', data);
       if (error) throw error;
+
+      if (redirect) {
+        goto(redirect);
+      }
     } catch (error) {
       submitError = error.error_description || error.message;
     } finally {
diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte
index db2de514..7600545e 100644
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import TextField from '$lib/components/Form/TextField.svelte';
@@ -11,15 +11,19 @@
   } from '$lib/utils/functions/validator';
   import { SIGNUP_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
+  import { profile } from '$lib/utils/store/user';
 
   let supabase = getSupabase();
   let fields = Object.assign({}, SIGNUP_FIELDS);
   let loading = false;
   let success = false;
   let errors = {};
-  let submitError;
+  let submitError: string;
   let disableSubmit = false;
-  let formRef;
+  let formRef: HTMLFormElement;
+
+  let query = new URLSearchParams($page.url.search);
+  let redirect = query.get('redirect');
 
   async function handleSubmit(e) {
     const validationRes = authValidation(fields);
@@ -32,18 +36,55 @@
 
     try {
       loading = true;
-      const { data, error } = await supabase.auth.signUp({
+
+      const {
+        data: { session },
+        error
+      } = await supabase.auth.signUp({
         email: fields.email,
         password: fields.password
       });
-      console.log('data', data);
+      console.log('session', session);
+
       if (error) throw error;
 
+      const { user: authUser } = session || {};
+      if (!authUser) {
+        throw 'Error creating user';
+      }
+
+      const [regexUsernameMatch] = [...(authUser.email?.matchAll(/(.*)@/g) || [])];
+
+      const profileRes = await supabase
+        .from('profile')
+        .insert({
+          id: authUser.id,
+          username: regexUsernameMatch[1] + `${new Date().getTime()}`,
+          fullname: regexUsernameMatch[1],
+          email: authUser.email
+        })
+        .select();
+      console.log('profileRes', profileRes);
+
+      if (profileRes.error) {
+        throw profileRes.error;
+      }
+
+      // Setting profile
+      console.log('setting profile', profileRes.data[0]);
+      profile.set(profileRes.data[0]);
+
+      if (redirect) {
+        goto(redirect);
+      } else {
+        goto('/');
+      }
+
       formRef?.reset();
 
-      return goto('/login' + $page.url.search);
-      // success = true;
-      // fields = Object.assign({}, SIGNUP_FIELDS);
+      // return goto('/login' + $page.url.search);
+      success = true;
+      fields = Object.assign({}, SIGNUP_FIELDS);
     } catch (error) {
       submitError = error.error_description || error.message;
     } finally {

From f3f8a00809469df3a8a7640d9bbafd3f47a73cf3 Mon Sep 17 00:00:00 2001
From: emmanuel <ifeanyi@digdippa.com>
Date: Thu, 14 Sep 2023 20:59:51 +0000
Subject: [PATCH 03/11] CLASSROOMIO-T-146:Made the course page responsive

CLASSROOMIO-T-146:Made updates to the code following the reviews

CLASSROOMIO-T-146:Made updates to the Z-Index

Merge branch 'main' into CLASSROOMIO-T-146

Merge branch 'main' into CLASSROOMIO-T-146

CLASSROOMIO-T-146:Made the course page responsive

CLASSROOMIO-T-146:working on the course page responsiveness

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-146:Making the course page responsive

CLASSROOMIO-T-145: All done and ready

CLASSROOMIO-T-145: All done and ready

CLASSROOMIO-T-145: Fixed the Z-index issue

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145: Finished implementing the responsive design for the Main dashboard and LMS dashboard

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-144:Updating the dashboard responsiveness ooth for LMS and the Main dashboard

CLASSROOMIO-T-144:Updated the dashboard responsiveness ooth for LMS and the Main dashboard

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145:Made the LMS dashboard responsive


Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-73
Merged-by: Best Admin <best@digdippa.com>
---
 src/app.postcss                               |   5 +
 src/lib/components/Apps/index.svelte          |  43 ++-
 src/lib/components/Apps/store.js              |   6 +
 .../components/Ceritficate/Design.svelte      |   6 +-
 .../components/Lesson/AddLessonModal.svelte   |   2 +-
 .../components/Lesson/Exercises/index.svelte  |   4 +-
 .../Lesson/Materials/Video/Index.svelte       |  10 +-
 .../components/Lesson/Materials/index.svelte  |   6 +-
 .../Course/components/Navigation/index.svelte | 208 +++++---------
 .../components/People/InviationModal.svelte   |   2 +-
 .../components/CourseContainer/index.svelte   |   6 +-
 .../components/Editor/Container.svelte        |  36 +--
 .../components/Editor/index.svelte            | 166 +++++++----
 .../components/PricingSection.svelte          |   6 +-
 .../components/CourseLandingPage/index.svelte |  12 +-
 src/lib/components/Tabs/index.svelte          |   4 +-
 src/routes/+layout.svelte                     |   4 +-
 .../courses/[id]/attendance/+page.svelte      | 137 ++++-----
 .../courses/[id]/landingpage/+page.svelte     |  13 +-
 src/routes/courses/[id]/lessons/+page.svelte  |   4 +-
 .../lessons/[...lessonParams]/+page.svelte    |  29 +-
 src/routes/courses/[id]/marks/+page.svelte    |  48 +---
 src/routes/courses/[id]/people/+page.svelte   | 270 +++++++++---------
 .../courses/[id]/submissions/+page.svelte     |  13 +-
 24 files changed, 520 insertions(+), 520 deletions(-)
 create mode 100644 src/lib/components/Apps/store.js

diff --git a/src/app.postcss b/src/app.postcss
index c0a32d14..368f4933 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -14,6 +14,11 @@ html {
 #calendar .grid {
   --sc-theme-calendar-colors-background-highlight: var(--main-primary-color);
 }
+
+html .dark {
+  --scrollbarBG: #1f2937;
+}
+
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--thumbBG) var(--scrollbarBG);
diff --git a/src/lib/components/Apps/index.svelte b/src/lib/components/Apps/index.svelte
index 0a8d464b..e3575f65 100644
--- a/src/lib/components/Apps/index.svelte
+++ b/src/lib/components/Apps/index.svelte
@@ -6,12 +6,15 @@
   import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
   import ChartPie from 'carbon-icons-svelte/lib/ChartPie.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
+  import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
+  import { apps } from './store';
 
   import QandA from './components/QandA/index.svelte';
   import LiveChat from './components/LiveChat/index.svelte';
   import Notes from './components/Notes/index.svelte';
   import Poll from './components/Poll/index.svelte';
   import APPS_CONSTANTS from './constants';
+  import { OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
 
   let selectedApp;
 
@@ -48,8 +51,21 @@
   });
 </script>
 
-<div class="root">
-  <div class="apps">
+<div class={`root ${$apps.open ? 'open dark:bg-slate-800' : 'close dark:bg-slate-800'}`}>
+  <div class={`apps`}>
+    <div class="lg:hidden">
+      <IconButton
+        buttonClassName="lg:hidden"
+        toolTipProps={{ title: 'Settings', hotkeys: ['A', '0'] }}
+        onClick={() => {
+          handleAppClick;
+          $apps.dropdown = !$apps.dropdown;
+        }}
+      >
+        <Settings size={24} class="carbon-icon dark:text-white lg:hidden" />
+      </IconButton>
+    </div>
+
     <IconButton
       toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
       value={APPS_CONSTANTS.APPS.LIVE_CHAT}
@@ -104,7 +120,7 @@
 
 <style lang="scss">
   .root {
-    height: 93vh;
+    height: calc(100vh - 48px);
     position: sticky;
     top: 0;
     border-left: 1px solid var(--border-color);
@@ -129,4 +145,25 @@
       overflow: auto;
     }
   }
+
+  @media screen and (max-width: 1024px) {
+    .root {
+      position: absolute;
+      height: calc(100vh - 109px);
+      top: 109px;
+      right: 0;
+      z-index: 999;
+    }
+    .open {
+      position: absolute;
+      transform: translateX(0);
+      transition: all 0.2s ease-in-out;
+    }
+    .close {
+      position: absolute;
+      transform: translateX(100%);
+      display: none;
+      transition: all 0.2s ease-in-out;
+    }
+  }
 </style>
diff --git a/src/lib/components/Apps/store.js b/src/lib/components/Apps/store.js
new file mode 100644
index 00000000..fe32e6d9
--- /dev/null
+++ b/src/lib/components/Apps/store.js
@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store';
+
+export const apps = writable({
+  open: false,
+  dropdown: false
+});
diff --git a/src/lib/components/Course/components/Ceritficate/Design.svelte b/src/lib/components/Course/components/Ceritficate/Design.svelte
index b86d2059..da764441 100644
--- a/src/lib/components/Course/components/Ceritficate/Design.svelte
+++ b/src/lib/components/Course/components/Ceritficate/Design.svelte
@@ -45,8 +45,8 @@
 </svelte:head>
 
 <main class="md:-ml-4 md:-mr-4 px-2">
-  <div class="flex-1 flex flex-col md:flex-row justify-between gap-3 w-full mb-3 h-4/5">
-    <section class="w-full md:w-2/5 h-full">
+  <div class="flex-1 flex flex-col lg:flex-row justify-between gap-3 w-full mb-3 h-4/5">
+    <section class="w-full lg:w-2/5 h-full">
       <strong class="my-2 text-base font-semibold text-black dark:text-gray-100"
         >Certificate settings</strong
       >
@@ -99,7 +99,7 @@
       </div>
     </section>
     <section
-      class="bg-gray-100 dark:bg-gray-700 flex justify-center items-center rounded-md w-full md:w-3/5"
+      class="bg-gray-100 dark:bg-gray-700 flex justify-center items-center rounded-md w-full lg:w-3/5"
     >
       <div class="certificate-container flex justify-center items-center h-5/6">
         {#if $course.certificate_theme === 'professional'}
diff --git a/src/lib/components/Course/components/Lesson/AddLessonModal.svelte b/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
index 8dd45939..a4f3b586 100644
--- a/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
+++ b/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
@@ -55,7 +55,7 @@
 <Modal
   onClose={() => (openModal = false)}
   bind:open={openModal}
-  width="w-[60%]"
+  width="w-[80%] md:w-[60%]"
   containerClass="overflow-hidden"
   modalHeading="Add New Lesson"
 >
diff --git a/src/lib/components/Course/components/Lesson/Exercises/index.svelte b/src/lib/components/Course/components/Lesson/Exercises/index.svelte
index 55f59683..5ba8b331 100644
--- a/src/lib/components/Course/components/Lesson/Exercises/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercises/index.svelte
@@ -165,8 +165,8 @@
           <p class="dark:text-white mt-4 text-sm">Created Jul 3, 2021</p>
         </a>
       {:else}
-        <Box className="mt-3">
-          <div class="flex justify-between flex-col items-center w-96">
+        <Box className="mt-3 text-center">
+          <div class="flex justify-between flex-col items-center w-[80%] md:w-96">
             <img src="/images/empty-exercise-icon.svg" alt="Exercise" class="my-2.5 mx-auto" />
             <h2 class="text-xl my-1.5 font-normal">No exercises added for this lesson</h2>
             <p class="text-sm text-center text-slate-500">
diff --git a/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte b/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte
index 2c0095ad..c1c718c2 100644
--- a/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte
@@ -11,13 +11,15 @@
   const onChange = (tab) => () => (currentTab = tab);
 </script>
 
-<section class="w-full h-full flex flex-row items-start gap-3">
-  <div class="flex-1 flex-col">
-    <p class="text-sm font-normal text-start text-[#4F4B4B] dark:text-[#b0a9a9] mb-3">Add By</p>
+<section class="w-full h-full flex flex-col md:flex-row items-start gap-3">
+  <div class="flex flex-row md:flex-col gap-2 items-center">
+    <p class="text-sm font-normal text-start text-[#4F4B4B] dark:text-[#b0a9a9] mb-3 w-full">
+      Add By
+    </p>
     {#each tabs as item (item.value)}
       <button
         on:click={onChange(item.value)}
-        class={`w-full px-4 py-3 my-5 border ${
+        class={`w-full px-4 py-3 my-1 border ${
           currentTab === item.value
             ? 'border border-[#0233BD] bg-[#F5F8FE] dark:text-black'
             : 'border border-gray-200'
diff --git a/src/lib/components/Course/components/Lesson/Materials/index.svelte b/src/lib/components/Course/components/Lesson/Materials/index.svelte
index 4996b264..924ecd9f 100644
--- a/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/index.svelte
@@ -197,13 +197,13 @@
 <Modal
   {onClose}
   bind:open={$uploadCourseVideoStore.isModalOpen}
-  width="w-4/5 h-[566px]"
+  width="w-4/5 w-[90%] h-[80%] md:h-[566px]"
   modalHeading="Add a Video"
 >
   <VideoUploader {lessonId} />
 </Modal>
 
-<h1 class="text-4xl mt-0">
+<h1 class="text-4xl mt-0 capitalize">
   {lessonTitle}
 </h1>
 
@@ -386,7 +386,7 @@
     </article>
   {/if}
 {:else}
-  <Box>
+  <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
diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte
index 495006e5..7ff810de 100644
--- a/src/lib/components/Course/components/Navigation/index.svelte
+++ b/src/lib/components/Course/components/Navigation/index.svelte
@@ -24,6 +24,7 @@
   import { updateCourse } from '$lib/utils/services/courses';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
   import { isMobile } from '$lib/utils/store/useMobile';
+  import { menu } from '$lib/components/Org/store';
 
   // export let lessonId;
   export let path;
@@ -32,12 +33,14 @@
   let show = null;
   let isLessonActive = false;
 
+  const toggleSidebar = () => {
+    $menu.hidden = !$menu.hidden;
+  };
+
   function handleMainGroupClick(href) {
     return () => {
-      if ($isMobile) {
-        setTimeout(() => (show = false), 500);
-      }
       goto(href);
+      toggleSidebar();
     };
   }
 
@@ -146,145 +149,66 @@
 
 <Settings />
 
-<div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}">
-  {#if show}
-    <div class="relative h-full dark:bg-gray-800">
-      <!-- <PageNav title="Back to courses" paddingClass="pl-2" titleSize="text-md">
-        <slot:fragment slot="image">
-          <Avatar src={$course.logo} />
-          <IconButton
-            value="toggle"
-            onClick={() => goto(`${$currentOrgPath}/courses`)}
-            size="small"
-            contained={true}
+<aside
+  class={`${
+    $menu.hidden
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[40]'
+      : 'translate-x-0 absolute md:relative z-[40]'
+  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
+>
+  <div class="h-full flex flex-col">
+    <ul class="my-5">
+      {#each navItems as navItem}
+        {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
+          <NavExpandable
+            label={navItem.label}
+            handleClick={handleMainGroupClick(navItem.to)}
+            isGroupActive={(path || $page.url.pathname) === navItem.to}
+            isExpanded={isLessonActive}
+            total={navItem.isLecture ? ($lessons || []).length : 0}
           >
-            <ArrowLeftIcon size={20} class="carbon-icon dark:text-white" />
-          </IconButton>
-        </slot:fragment>
-        <slot:fragment slot="widget">
-          <RoleBasedSecurity allowedRoles={[1, 2]}>
-            <IconButton onClick={() => ($settingsDialog.open = !$settingsDialog.open)}>
-              <SettingsIcon size={20} class="carbon-icon dark:text-white" />
-            </IconButton>
-          </RoleBasedSecurity>
-        </slot:fragment>
-      </PageNav> -->
-      <div class="h-full py-3 overflow-y-auto">
-        {#each navItems as navItem}
-          {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
-            <NavExpandable
-              label={navItem.label}
-              handleClick={handleMainGroupClick(navItem.to)}
-              isGroupActive={(path || $page.url.pathname) === navItem.to}
-              isExpanded={isLessonActive}
-              total={navItem.isLecture ? ($lessons || []).length : 0}
-            >
-              {#if navItem.isLecture}
-                {#each $lessons as item, index}
-                  <a
-                    class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&
-                    !item.is_unlocked
-                      ? 'cursor-not-allowed'
-                      : ''}"
-                    href={isStudent && !item.is_unlocked
-                      ? $page.url.pathname
-                      : getLessonsRoute($course.id, item.id)}
-                    on:click={() => {
-                      if ($isMobile) {
-                        setTimeout(() => (show = false), 500);
-                      }
-                    }}
-                    aria-disabled={!item.is_unlocked}
+            {#if navItem.isLecture}
+              {#each $lessons as item, index}
+                <a
+                  class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&
+                  !item.is_unlocked
+                    ? 'cursor-not-allowed'
+                    : ''}"
+                  href={isStudent && !item.is_unlocked
+                    ? $page.url.pathname
+                    : getLessonsRoute($course.id, item.id)}
+                  on:click={toggleSidebar}
+                  aria-disabled={!item.is_unlocked}
+                >
+                  <div
+                    class="flex items-center py-3 px-4 {NavClasses.item} {(
+                      path || $page.url.pathname
+                    ).includes(item.id) && NavClasses.active}"
                   >
-                    <div
-                      class="flex items-center py-3 px-4 {NavClasses.item} {(
-                        path || $page.url.pathname
-                      ).includes(item.id) && NavClasses.active}"
-                    >
-                      <TextChip
-                        value={getLectureNo(index + 1)}
-                        className="bg-primary-200 text-primary-600 text-xs mr-2"
-                        size="sm"
-                        shape="rounded-full"
-                      />
-                      <span>{item.title}</span>
-                      <span class="grow" />
-                      {#if !item.is_unlocked}
-                        <span class="text-md ml-2" title="This lesson is locked.">
-                          <LockedIcon class="carbon-icon dark:text-white" />
-                        </span>
-                      {:else if item.is_complete}
-                        <span class="ml-2" title="You have completed this lesson">
-                          <CheckmarkFilled class="carbon-icon dark:text-white" />
-                        </span>
-                      {/if}
-                    </div>
-                  </a>
-                {/each}
-              {/if}
-            </NavExpandable>
-          {/if}
-        {/each}
-      </div>
-    </div>
-  {/if}
-  <div class="toggler rounded-full shadow-lg absolute bottom-0">
-    <IconButton
-      value="toggle"
-      onClick={() => (show = !show)}
-      size={$isMobile ? 'large' : 'small'}
-      color="text-black"
-      toolTipProps={$isMobile
-        ? {}
-        : {
-            title: 'Toggle sidebar',
-            hotkeys: ['B'],
-            direction: 'right'
-          }}
-    >
-      {#if show}
-        <ChevronLeftIcon size={16} />
-      {:else}
-        <ChevronRightIcon size={16} />
-      {/if}
-    </IconButton>
+                    <TextChip
+                      value={getLectureNo(index + 1)}
+                      className="bg-primary-200 text-primary-600 text-xs mr-2"
+                      size="sm"
+                      shape="rounded-full"
+                    />
+                    <span>{item.title}</span>
+                    <span class="grow" />
+                    {#if !item.is_unlocked}
+                      <span class="text-md ml-2" title="This lesson is locked.">
+                        <LockedIcon class="carbon-icon dark:text-white" />
+                      </span>
+                    {:else if item.is_complete}
+                      <span class="ml-2" title="You have completed this lesson">
+                        <CheckmarkFilled class="carbon-icon dark:text-white" />
+                      </span>
+                    {/if}
+                  </div>
+                </a>
+              {/each}
+            {/if}
+          </NavExpandable>
+        {/if}
+      {/each}
+    </ul>
   </div>
-</div>
-
-<style lang="scss">
-  .root {
-    height: calc(100vh - 48px);
-    display: flex;
-    flex-direction: column;
-    min-width: 360px;
-    max-width: 360px;
-    top: 0;
-    border-right: 1px solid var(--border-color);
-    background-color: rgb(250, 251, 252);
-
-    &.hide {
-      min-width: 15px;
-      max-width: 15px;
-    }
-  }
-  .footer {
-    border-top: 1px solid var(--border-color);
-  }
-
-  .toggler {
-    right: -15px;
-    z-index: 10;
-    border: 1px solid var(--border-color);
-    top: 50px;
-    height: fit-content;
-    background: var(--border-color);
-  }
-
-  @media (max-width: 760px) {
-    .root {
-      width: 98%;
-      min-width: unset;
-      max-width: unset;
-    }
-  }
-</style>
+</aside>
diff --git a/src/lib/components/Course/components/People/InviationModal.svelte b/src/lib/components/Course/components/People/InviationModal.svelte
index f614af90..65bfa2d2 100644
--- a/src/lib/components/Course/components/People/InviationModal.svelte
+++ b/src/lib/components/Course/components/People/InviationModal.svelte
@@ -145,7 +145,7 @@
 <Modal
   onClose={resetForm}
   bind:open={$invitationModal.open}
-  width="w-2/5"
+  width="w-4/5 md:w-2/5"
   maxWidth="max-w-lg"
   modalHeading="Invite people"
 >
diff --git a/src/lib/components/CourseContainer/index.svelte b/src/lib/components/CourseContainer/index.svelte
index 41f31006..2453f7a4 100644
--- a/src/lib/components/CourseContainer/index.svelte
+++ b/src/lib/components/CourseContainer/index.svelte
@@ -16,9 +16,7 @@
   export let isFetching = false;
 
   $: {
-    const user = $group.people.find(
-      (person) => person.profile_id === $profile.id
-    );
+    const user = $group.people.find((person) => person.profile_id === $profile.id);
 
     if (user) {
       isStudent = user.role_id === 3;
@@ -58,6 +56,6 @@
   }
 
   .rightBar.isMobile {
-    margin-left: 10px;
+    /* margin-left: 10px; */
   }
 </style>
diff --git a/src/lib/components/CourseLandingPage/components/Editor/Container.svelte b/src/lib/components/CourseLandingPage/components/Editor/Container.svelte
index d34c0e9e..143192a6 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/Container.svelte
+++ b/src/lib/components/CourseLandingPage/components/Editor/Container.svelte
@@ -7,36 +7,12 @@
   export let show = true;
 </script>
 
-<section
-  class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
->
+<section class="root z-10">
   {#if show}
     <div class="relative h-full bg-white dark:bg-gray-800">
       <slot />
     </div>
   {/if}
-
-  <div class="toggler rounded-full shadow-lg absolute bottom-0">
-    <IconButton
-      value="toggle"
-      onClick={() => (show = !show)}
-      size={$isMobile ? 'large' : 'small'}
-      color="text-black"
-      toolTipProps={$isMobile
-        ? {}
-        : {
-            title: 'Toggle editor',
-            hotkeys: ['B'],
-            direction: 'right',
-          }}
-    >
-      {#if show}
-        <ChevronLeftIcon size={16} />
-      {:else}
-        <ChevronRightIcon size={16} />
-      {/if}
-    </IconButton>
-  </div>
 </section>
 
 <style lang="scss">
@@ -50,11 +26,6 @@
     left: 0;
     border-right: 1px solid var(--border-color);
     background-color: rgb(250, 251, 252);
-
-    &.hide {
-      min-width: 15px;
-      max-width: 15px;
-    }
   }
 
   .toggler {
@@ -67,10 +38,5 @@
   }
 
   @media (max-width: 760px) {
-    .root {
-      width: 98%;
-      min-width: unset;
-      max-width: unset;
-    }
   }
 </style>
diff --git a/src/lib/components/CourseLandingPage/components/Editor/index.svelte b/src/lib/components/CourseLandingPage/components/Editor/index.svelte
index 4d10a5e8..fc206efd 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/index.svelte
+++ b/src/lib/components/CourseLandingPage/components/Editor/index.svelte
@@ -18,13 +18,16 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { updateCourse } from '$lib/utils/services/courses';
   import generateSlug from '$lib/utils/functions/generateSlug';
+  import ChevronLeftIcon from 'carbon-icons-svelte/lib/ChevronLeft.svelte';
+
+  import { isMobile } from '$lib/utils/store/useMobile';
 
   export let course;
   export let courseId;
 
   let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
   let loading = false;
-
+  let show = false;
   const sections = [
     {
       key: 1,
@@ -115,69 +118,112 @@
   }
 </script>
 
-<Container show={true}>
-  <!-- Publish Header Section -->
-  {#if !selectedSection}
-    <div class="flex justify-between items-center px-2 w-full">
-      <CloseButton onClick={handleClose} />
-      <div class="flex items-center">
-        <PrimaryButton
-          label="Save"
-          type="button"
-          className="mr-1"
-          variant={VARIANTS.OUTLINED}
-          onClick={handleSave}
-          isLoading={loading}
-        />
-        <PrimaryButton label="Publish" type="button" onClick={handlePublish} isDisabled={loading} />
-        <IconButton onClick={handlePreview} disabled={loading || !course.slug}>
-          <ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
-        </IconButton>
-      </div>
-    </div>
-    <div class="flex justify-between items-center px-2 w-full mb-2">
-      <h3 class="dark:text-white">Page Builder</h3>
-    </div>
-    {#each sections as section}
-      <button
-        class="w-full flex items-center justify-between px-2 py-3 border border-b-0 border-gray-300"
-        on:click={handleSectionSelect(section.key)}
-      >
-        <p class="dark:text-white mr-2">{section.title} section</p>
-        <ChevronRightIcon size={24} class="carbon-class" />
-      </button>
-    {/each}
-  {:else}
-    <!-- Title -->
-    <div class="flex items-center {borderBottomGrey} w-full">
-      <IconButton onClick={handleClose}>
-        <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" title="Go back" />
-      </IconButton>
-      <h3 class="dark:text-white">{selectedSection.title}</h3>
-    </div>
-
-    <div class="title-content p-2 overflow-y-auto">
-      {#if selectedSection.key === 1}
-        <HeaderForm bind:course />
-      {:else if selectedSection.key === 2}
-        <RequirementForm bind:course />
-      {:else if selectedSection.key === 3}
-        <DescriptionForm bind:course />
-      {:else if selectedSection.key === 4}
-        <GoalsForm bind:course />
-      {:else if selectedSection.key === 5}
-        <ReviewsForm bind:course />
-      {:else if selectedSection.key === 6}
-        <InstructorForm bind:course />
-      {:else if selectedSection.key === 7}
-        <PricingForm bind:course />
+<aside
+  class={`${
+    show ? '-translate-x-[100%] fixed z-[9999]' : 'translate-x-0 fixed z-[9999]'
+  } left-0 transition w-[280px] min-w-[280px] bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
+>
+  <div class="toggler rounded-full shadow-lg absolute">
+    <IconButton
+      value="toggle"
+      onClick={() => (show = !show)}
+      size={$isMobile ? 'large' : 'small'}
+      color="text-black"
+      toolTipProps={$isMobile
+        ? {}
+        : {
+            title: 'Toggle editor',
+            direction: 'right'
+          }}
+    >
+      {#if show}
+        <ChevronRightIcon size={16} />
+      {:else}
+        <ChevronLeftIcon size={16} />
       {/if}
-    </div>
-  {/if}
-</Container>
+    </IconButton>
+  </div>
+  <div class="h-full flex flex-col">
+    {#if !selectedSection}
+      <div class="flex justify-between items-center px-2 w-full">
+        <CloseButton onClick={handleClose} />
+        <div class="flex items-center">
+          <PrimaryButton
+            label="Save"
+            type="button"
+            className="mr-1"
+            variant={VARIANTS.OUTLINED}
+            onClick={handleSave}
+            isLoading={loading}
+          />
+          <PrimaryButton
+            label="Publish"
+            type="button"
+            onClick={handlePublish}
+            isDisabled={loading}
+          />
+          <IconButton onClick={handlePreview} disabled={loading || !course.slug}>
+            <ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
+          </IconButton>
+        </div>
+      </div>
+      <div class="flex justify-between items-center px-2 w-full mb-2">
+        <h3 class="dark:text-white">Page Builder</h3>
+      </div>
+      {#each sections as section}
+        <button
+          class="w-full flex items-center justify-between px-2 py-3 border border-b-0 border-gray-300"
+          on:click={handleSectionSelect(section.key)}
+        >
+          <p class="dark:text-white mr-2">{section.title} section</p>
+          <ChevronRightIcon size={24} class="carbon-class" />
+        </button>
+      {/each}
+    {:else}
+      <!-- Title -->
+      <div class="flex items-center {borderBottomGrey} w-full">
+        <IconButton onClick={handleClose}>
+          <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" title="Go back" />
+        </IconButton>
+        <h3 class="dark:text-white">{selectedSection.title}</h3>
+      </div>
+
+      <div class="title-content p-2 overflow-y-auto">
+        {#if selectedSection.key === 1}
+          <HeaderForm bind:course />
+        {:else if selectedSection.key === 2}
+          <RequirementForm bind:course />
+        {:else if selectedSection.key === 3}
+          <DescriptionForm bind:course />
+        {:else if selectedSection.key === 4}
+          <GoalsForm bind:course />
+        {:else if selectedSection.key === 5}
+          <ReviewsForm bind:course />
+        {:else if selectedSection.key === 6}
+          <InstructorForm bind:course />
+        {:else if selectedSection.key === 7}
+          <PricingForm bind:course />
+        {/if}
+      </div>
+    {/if}
+  </div>
+</aside>
 
 <style>
   .title-content {
     height: 90%;
   }
+  .toggler {
+    right: -15px;
+    z-index: 10;
+    border: 1px solid var(--border-color);
+    top: 50px;
+    height: fit-content;
+    background: var(--border-color);
+  }
+  @media screen and (max-width: 767px) {
+    .toggler {
+      right: -25px;
+    }
+  }
 </style>
diff --git a/src/lib/components/CourseLandingPage/components/PricingSection.svelte b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
index 8da9e409..54951a14 100644
--- a/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+++ b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <!-- Pricing Details -->
-<aside class="{className} price-container md:sticky md:top-0 md:shadow-2xl md:rounded-lg m-h-fit">
+<aside class="{className} price-container lg:sticky lg:top-0 lg:shadow-2xl lg:rounded-lg m-h-fit">
   <div class="p-10">
     <!-- Pricing -->
     <div class="mb-6">
@@ -120,9 +120,9 @@
     height: fit-content;
   }
 
-  @media (max-width: 768px) {
+  @media screen and (min-width: 768px) and (max-width: 1024px) {
     .price-container {
-      width: 100%;
+      width: 405px;
       min-width: unset;
     }
   }
diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index 8018f47e..4f4e47cc 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -164,12 +164,14 @@
       {/if}
     </div>
   </header>
-  <PricingSection className="md:hidden" {courseData} />
+  <!-- <PricingSection className="md:hidden" {courseData} /> -->
   <!-- Body -->
   <div class="bg-white dark:bg-gray-800 w-full">
-    <div class="py-8 lg:w-10/12 w-full m-2 lg:m-auto flex justify-between">
+    <div
+      class="py-8 lg:w-11/12 w-full m-2 lg:m-auto flex flex-col-reverse lg:flex-row items-center lg:items-start justify-between"
+    >
       <!-- Course Details -->
-      <div class="course-content w-full p-3 md:w-9/12 md:mr-14">
+      <div class="course-content w-full p-3 lg:w-10/12 lg:mr-14">
         <!-- Navigation -->
         <nav class="flex items-center border-b border-gray-300 pb-3">
           {#each NAV_ITEMS as navItem}
@@ -416,7 +418,7 @@
       </div>
 
       <!-- Pricing Details -->
-      <PricingSection className="hidden md:block" {courseData} />
+      <PricingSection {courseData} />
     </div>
   </div>
 </div>
@@ -464,7 +466,7 @@
   }
 
   .course-content {
-    max-width: 608px;
+    max-width: 800px;
   }
 
   nav {
diff --git a/src/lib/components/Tabs/index.svelte b/src/lib/components/Tabs/index.svelte
index 15a6a787..d3261b1e 100644
--- a/src/lib/components/Tabs/index.svelte
+++ b/src/lib/components/Tabs/index.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="w-full flex flex-col">
-  <div class="flex items-center border-b-2 w-full">
+  <div class="flex items-center border-b-2 w-full overflow-x-auto">
     {#each tabs as tab}
       {#if !tab.icon && !tab.badgeValue}
         <button
@@ -32,7 +32,7 @@
             : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
           on:click={onChange(tab.value)}
         >
-          <div class="grid grid-cols-4 gap-3 items-center">
+          <div class="grid grid-cols-5 md:grid-cols-4 gap-5 md:gap-3 items-center">
             {#if tab.icon}
               <svelte:component this={tab.icon} />
             {/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9be57c7a..b2eb8d41 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -315,14 +315,14 @@
           {#if !isQuizPage($page.url.pathname)}
             <OrgSideBar />
           {/if}
-          <div class="org-slot w-full bg-white dark:bg-gray-800">
+          <div class="org-slot bg-white dark:bg-gray-800 w-full">
             <slot />
           </div>
         </div>
       {:else if isLMSPage($page.url.pathname)}
         <div class="org-root w-full flex items-center justify-between">
           <LMSSideBar />
-          <div class="org-slot w-full bg-white dark:bg-gray-800">
+          <div class="org-slot bg-white dark:bg-gray-800 w-full">
             <slot />
           </div>
         </div>
diff --git a/src/routes/courses/[id]/attendance/+page.svelte b/src/routes/courses/[id]/attendance/+page.svelte
index 8c14abb3..fe58149a 100644
--- a/src/routes/courses/[id]/attendance/+page.svelte
+++ b/src/routes/courses/[id]/attendance/+page.svelte
@@ -138,77 +138,80 @@
 
 <CourseContainer bind:isStudent>
   <PageNav title="Attendance" />
-
-  <section class="mx-9 my-5">
-    <div class="flex flex-row items-center justify-between">
-      <div class="flex">
-        <p class="flex items-center mr-5">
-          <Checkbox checked disabled /> Present
-        </p>
-        <p class="flex items-center">
-          <Checkbox disabled /> Absent
-        </p>
+  <PageBody width="w-full max-w-6xl md:w-11/12">
+    <section class="flex items-center mx-2 lg:mx-9 my-5">
+      <div
+        class="flex flex-col lg:flex-row items-start gap-2 lg:items-center justify-between w-full"
+      >
+        <div class="flex">
+          <p class="flex items-center mr-5">
+            <Checkbox checked disabled /> Present
+          </p>
+          <p class="flex items-center">
+            <Checkbox disabled /> Absent
+          </p>
+        </div>
+        <div>
+          <Search
+            class="dark:text-slate-950"
+            placeholder="Search students"
+            bind:value={searchValue}
+          />
+        </div>
       </div>
-      <div>
-        <Search
-          class="dark:text-slate-950"
-          placeholder="Search students"
-          bind:value={searchValue}
-        />
-      </div>
-    </div>
-  </section>
+    </section>
 
-  <section class="my-5 mx-9">
-    <StructuredList class="m-0">
-      <!-- Moved the lesson headers outside the students loop -->
-      <StructuredListHead class="bg-primary-100">
-        <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
-          {#each $lessons as lesson, index}
-            <StructuredListCell head class="text-primary-600 py-3"
-              >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
-            >
-          {/each}
-        </StructuredListRow>
-      </StructuredListHead>
-
-      {#each searchStudents(searchValue) as student}
-        <StructuredListBody>
-          <StructuredListRow>
-            <StructuredListCell>
-              <div class="w-1/4 flex items-center">
-                <p class="dark:text-white font-semibold">
-                  {student.profile.fullname}
-                </p>
-              </div>
-            </StructuredListCell>
-            {#each $lessons as lesson}
-              <StructuredListCell class="">
-                <Checkbox
-                  class={isStudent && 'cursor-not-allowed'}
-                  disabled={isStudent}
-                  checked={$attendance[student.id]
-                    ? $attendance[student.id][lesson.id]
-                      ? $attendance[student.id][lesson.id].is_present
-                      : false
-                    : false}
-                  on:change={(e) => handleAttendanceChange(e, student, lesson)}
-                />
-              </StructuredListCell>
+    <section class="my-5 mx-2 lg:mx-9">
+      <StructuredList class="m-0 relative">
+        <!-- Moved the lesson headers outside the students loop -->
+        <StructuredListHead class="bg-primary-100">
+          <StructuredListRow head class="mx-7">
+            <StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
+            {#each $lessons as lesson, index}
+              <StructuredListCell head class="text-primary-600 py-3"
+                >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
+              >
             {/each}
           </StructuredListRow>
-        </StructuredListBody>
-      {/each}
-    </StructuredList>
-    {#if students.length === 0}
-      <div>
-        <Box>
+        </StructuredListHead>
+
+        {#each searchStudents(searchValue) as student}
+          <StructuredListBody>
+            <StructuredListRow>
+              <StructuredListCell>
+                <div class="w-1/4 flex items-center">
+                  <p class="dark:text-white font-semibold">
+                    {student.profile.fullname}
+                  </p>
+                </div>
+              </StructuredListCell>
+              {#each $lessons as lesson}
+                <StructuredListCell class="">
+                  <Checkbox
+                    class={isStudent && 'cursor-not-allowed'}
+                    disabled={isStudent}
+                    checked={$attendance[student.id]
+                      ? $attendance[student.id][lesson.id]
+                        ? $attendance[student.id][lesson.id].is_present
+                        : false
+                      : false}
+                    on:change={(e) => handleAttendanceChange(e, student, lesson)}
+                  />
+                </StructuredListCell>
+              {/each}
+            </StructuredListRow>
+          </StructuredListBody>
+        {/each}
+      </StructuredList>
+      {#if students.length === 0}
+        <Box className="h-[300px] w-full">
           <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white">No Student Added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-white text-center">No Student Added</h3>
         </Box>
-      </div>
-    {/if}
-    <Pagination totalItems={10} pageSizes={[10, 15, 20]} />
-  </section>
+      {/if}
+      {#if students.length !== 0}
+        <Pagination totalItems={10} pageSizes={[10, 15, 20]} />
+      {/if}
+    </section>
+  </PageBody>
 </CourseContainer>
diff --git a/src/routes/courses/[id]/landingpage/+page.svelte b/src/routes/courses/[id]/landingpage/+page.svelte
index f1fb2e35..1df225ea 100644
--- a/src/routes/courses/[id]/landingpage/+page.svelte
+++ b/src/routes/courses/[id]/landingpage/+page.svelte
@@ -30,12 +30,12 @@
 </script>
 
 <div
-  class="root absolute inset-0 flex justify-center items-center z-50 bg-white"
+  class="absolute inset-0 z-50 bg-white"
   in:fly={{ y: 500, duration: 500 }}
   out:fly={{ y: 500, duration: 500 }}
 >
   <Editor {courseId} bind:course={courseData} />
-  <div class="rightBar" class:isMobile={$isMobile}>
+  <div class="rightBar">
     <CourseLandingPage bind:courseData />
   </div>
 </div>
@@ -43,13 +43,8 @@
 <style>
   .rightBar {
     flex-grow: 1;
-    width: calc(100% - 360px);
-    overflow: auto;
+    width: 100%;
     height: 100%;
-    overflow: auto;
-  }
-
-  .rightBar.isMobile {
-    margin-left: 10px;
+    overflow-y: auto;
   }
 </style>
diff --git a/src/routes/courses/[id]/lessons/+page.svelte b/src/routes/courses/[id]/lessons/+page.svelte
index f30b6954..935a76ce 100644
--- a/src/routes/courses/[id]/lessons/+page.svelte
+++ b/src/routes/courses/[id]/lessons/+page.svelte
@@ -321,12 +321,12 @@
         </div>
       {:else}
         <Box>
-          <div class="flex justify-between flex-col items-center w-96">
+          <div class="flex justify-between flex-col items-center w-[90%] md:w-96">
             <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
             <h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
             <p class="text-sm text-center text-slate-500">
               Share your knowledge with the world by creating engaging lessons. Start by clicking on
-              the New Lesson button.
+              the Add button.
             </p>
           </div>
         </Box>
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index fe11d658..348d4f7e 100644
--- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
@@ -4,17 +4,19 @@
   import { fetchCourse, fetchLesson } from '$lib/utils/services/courses';
   import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { Loading } from 'carbon-components-svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
   import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
-  import MODES from '$lib/utils/constants/mode.js';
+  import MODES from '$lib/utils/constants/mode';
   import { setCourse, course } from '$lib/components/Course/store';
   import Download from 'carbon-icons-svelte/lib/Download.svelte';
-
+  import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
+  import { apps } from '$lib/components/Apps/store';
+  import IconButton from '$lib/components/IconButton/index.svelte';
   import {
     lesson,
     lessons,
@@ -144,6 +146,10 @@
     }));
   }
 
+  const toggleApps = () => {
+    $apps.open = !$apps.open;
+  };
+
   function toggleMode() {
     prevMode = mode;
     mode = mode === MODES.edit ? MODES.view : MODES.edit;
@@ -176,9 +182,20 @@
     <svelte:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
         {#if data.isMaterialsTabActive}
-          <div class="flex items-center">
+          <div class="lg:hidden">
+            <IconButton onClick={toggleApps} buttonClassName="">
+              <OverflowMenuVertical size={24} />
+            </IconButton>
+          </div>
+          <div
+            class={`flex-row ${
+              $apps.dropdown && $apps.open
+                ? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-gray-800 p-3 lg:p-0'
+                : 'hidden'
+            } lg:flex items-center`}
+          >
             <PrimaryButton
-              className="mr-2"
+              className="mb-2 lg:mb-0 mr-2"
               variant={VARIANTS.OUTLINED}
               onClick={downloadLesson}
               {isLoading}
@@ -207,7 +224,7 @@
     <PageBody>
       <Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />
 
-      <div class="w-full flex flex-row-reverse">
+      <div class="w-full flex flex-row-reverse mt-10">
         <PrimaryButton
           onClick={markLessonComplete}
           isLoading={isMarkingComplete}
diff --git a/src/routes/courses/[id]/marks/+page.svelte b/src/routes/courses/[id]/marks/+page.svelte
index e43cbfbf..cef5feb1 100644
--- a/src/routes/courses/[id]/marks/+page.svelte
+++ b/src/routes/courses/[id]/marks/+page.svelte
@@ -8,10 +8,7 @@
   import { ROLE } from '$lib/utils/constants/roles';
   import { setCourse, course, group } from '$lib/components/Course/store';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import {
-    fetchCourse,
-    fetchExercisesByMarks,
-  } from '$lib/utils/services/courses';
+  import { fetchCourse, fetchExercisesByMarks } from '$lib/utils/services/courses';
   import { getLectureNo } from '$lib/components/Course/function';
   import { fetchMarks } from '$lib/utils/services/marks';
   import { profile } from '$lib/utils/store/user';
@@ -19,10 +16,8 @@
   export let data;
   const { courseId } = data;
 
-  let borderBottomGrey =
-    'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
-  let borderleftGrey =
-    'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
+  let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
+  let borderleftGrey = 'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
   let students = [];
   let isStudent = false;
 
@@ -52,11 +47,11 @@
       if (studentMarksByExerciseId[groupmember_id]) {
         studentMarksByExerciseId[groupmember_id] = {
           ...studentMarksByExerciseId[groupmember_id],
-          [exercise_id]: total_points_gotten,
+          [exercise_id]: total_points_gotten
         };
       } else {
         studentMarksByExerciseId[groupmember_id] = {
-          [exercise_id]: total_points_gotten,
+          [exercise_id]: total_points_gotten
         };
       }
     });
@@ -70,11 +65,11 @@
       if (lessonMapping[lesson_id]) {
         lessonMapping[lesson_id] = {
           ...lessonMapping[lesson_id],
-          [exercise_id]: { title: exercise_title, points },
+          [exercise_id]: { title: exercise_title, points }
         };
       } else {
         lessonMapping[lesson_id] = {
-          [exercise_id]: { title: exercise_title, points },
+          [exercise_id]: { title: exercise_title, points }
         };
       }
     });
@@ -82,20 +77,16 @@
 
   $: {
     students = isStudent
-      ? $group.people.filter(
-          (person) => !!person.profile && person.profile.id === $profile.id
-        )
-      : $group.people.filter(
-          (person) => !!person.profile && person.role_id === ROLE.STUDENT
-        );
+      ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
+      : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
   }
 </script>
 
 <CourseContainer bind:isStudent>
   <PageNav title="Marks" />
 
-  <PageBody width="w-11/12">
-    <div class="table rounded-md border border-gray-300 w-auto">
+  <PageBody width="w-full max-w-6xl md:w-11/12">
+    <div class="table rounded-md border border-gray-300 w-full">
       <div class="flex items-center {borderBottomGrey}">
         <div class="box flex items-center p-3">
           <p class="dark:text-white w-40">Student</p>
@@ -111,8 +102,7 @@
               >
                 {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
                   <p
-                    class="col text-sm dark:text-white {index &&
-                      borderleftGrey}"
+                    class="col text-sm dark:text-white {index && borderleftGrey}"
                     title={lessonMapping[lesson.id][exerciseId].title}
                   >
                     {lessonMapping[lesson.id][exerciseId].title}
@@ -129,9 +119,7 @@
       </div>
 
       {#each students as student}
-        <div
-          class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}"
-        >
+        <div class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}">
           <div class="w-40 flex items-center">
             <img
               alt="Student avatar"
@@ -143,11 +131,7 @@
                 {student.profile.fullname}
               </p>
               <p class="dark:text-white">
-                {`${
-                  student.assigned_student_id
-                    ? '#' + student.assigned_student_id
-                    : '-'
-                }`}
+                {`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
               </p>
             </div>
           </div>
@@ -176,9 +160,7 @@
       {:else}
         <Box>
           <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            No Student Added
-          </h3>
+          <h3 class="text-3xl text-gray-500 dark:text-white">No Student Added</h3>
         </Box>
       {/each}
     </div>
diff --git a/src/routes/courses/[id]/people/+page.svelte b/src/routes/courses/[id]/people/+page.svelte
index c6f12352..16b0fcbd 100644
--- a/src/routes/courses/[id]/people/+page.svelte
+++ b/src/routes/courses/[id]/people/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import TextChip from '$lib/components/Chip/Text.svelte';
   import ComingSoon from '$lib/components/ComingSoon/index.svelte';
+  import Filter from 'carbon-icons-svelte/lib/Filter.svelte';
   import { onMount } from 'svelte';
   import copy from 'copy-to-clipboard';
   import {
@@ -17,6 +18,7 @@
   import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
+  import PageBody from '$lib/components/PageBody/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import Select from '$lib/components/Form/Select.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
@@ -135,138 +137,148 @@
       </RoleBasedSecurity>
     </slot:fragment>
   </PageNav>
-  <section class="my-5 mx-9">
-    <div class="flex flex-row flex-end justify-end items-center mb-7">
-      <div class="mr-5 w-80">
-        <Search
-          class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
-          placeholder="Search people"
-          bind:value={searchValue}
-        />
-      </div>
-      <div class="mb-3">
-        <Select bind:value={filterBy} options={ROLES} className="dark:text-black mt-3 w-20" />
-        <!-- <select bind:value={filterBy} class="mt-3">
-          {#each ROLES as option}
-            <option value={option.value}>{option.label}</option>
-          {/each}
-        </select> -->
-      </div>
-      <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <p class="dark:text-white hidden lg:block text-lg w-20" />
-      </RoleBasedSecurity>
-    </div>
-
-    <StructuredList class="m-0">
-      <StructuredListHead
-        class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
+  <PageBody width="w-full max-w-6xl md:w-11/12">
+    <section class="my-5 mx-2 md:mx-9">
+      <div
+        class="flex flex-col md:flex-row flex-end gap-2 justify-end items-start md:items-center mb-7"
       >
-        <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            >Name</StructuredListCell
-          >
-          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            >Role</StructuredListCell
-          >
-          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            >Action</StructuredListCell
-          >
-          <RoleBasedSecurity allowedRoles={[1, 2]}>
-            <p class="dark:text-white hidden lg:block text-lg w-20" />
-          </RoleBasedSecurity>
-        </StructuredListRow>
-      </StructuredListHead>
+        <div class="max-w-[320px]">
+          <Search
+            class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
+            placeholder="Search people"
+            bind:value={searchValue}
+          />
+        </div>
+        <div class="mb-3">
+          <Select
+            bind:value={filterBy}
+            options={ROLES}
+            className="dark:text-black mt-3 max-w-[80px]"
+          />
+          <!-- <select bind:value={filterBy} class="mt-3">
+            {#each ROLES as option}
+              <option value={option.value}>{option.label}</option>
+            {/each}
+          </select> -->
+        </div>
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <p class="dark:text-white hidden lg:block text-lg w-20" />
+        </RoleBasedSecurity>
+      </div>
 
-      {#each filterPeople(searchValue, people) as person}
-        <StructuredListBody>
-          <StructuredListRow class="relative">
-            <!-- first column -->
-            <StructuredListCell class="w-3/6">
-              {#if person.profile}
-                <div class="flex items-center absolute bottom-3">
-                  <Avatar
-                    src={person.profile.avatar_url}
-                    name={person.profile.fullname}
-                    width="w-8"
-                    height="h-8"
-                    className="mr-3"
-                  />
-                  <div class="flex items-center">
-                    <div class="mr-2">
-                      <p class="dark:text-white text-base font-normal">
-                        {person.profile.fullname}
-                      </p>
-                      <p class="text-xs text-primary-600">
-                        {getEmail(person)}
-                      </p>
-                    </div>
-                    <RoleBasedSecurity allowedRoles={[1, 2]}>
-                      <div class="hidden lg:flex lg:justify-between lg:items-center mr-2">
-                        <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
+      <StructuredList class="m-0">
+        <StructuredListHead
+          class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
+        >
+          <StructuredListRow head class="mx-7">
+            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+              >Name</StructuredListCell
+            >
+            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+              >Role</StructuredListCell
+            >
+            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+              >Action</StructuredListCell
+            >
+            <RoleBasedSecurity allowedRoles={[1, 2]}>
+              <p class="dark:text-white hidden lg:block text-lg w-20" />
+            </RoleBasedSecurity>
+          </StructuredListRow>
+        </StructuredListHead>
+
+        {#each filterPeople(searchValue, people) as person}
+          <StructuredListBody>
+            <StructuredListRow class="relative">
+              <!-- first column -->
+              <StructuredListCell class="w-4/6 md:w-3/6">
+                {#if person.profile}
+                  <div class="flex items-start lg:items-center">
+                    <Avatar
+                      src={person.profile.avatar_url}
+                      name={person.profile.fullname}
+                      width="w-8"
+                      height="h-8"
+                      className="mr-3"
+                    />
+                    <div class="flex flex-col lg:flex-row items-start lg:items-center">
+                      <div class="mr-2">
+                        <p class="dark:text-white text-base font-normal">
+                          {person.profile.fullname}
+                        </p>
+                        <p class="text-xs text-primary-600 line-clamp-1">
+                          {getEmail(person)}
+                        </p>
                       </div>
-                    </RoleBasedSecurity>
-                    {#if person.profile_id == $profile.id}
-                      <ComingSoon label="You" />
+                      <div class="flex items-center">
+                        <RoleBasedSecurity allowedRoles={[1, 2]}>
+                          <CopyButton
+                            text={getEmail(person)}
+                            feedback="Copied Email to clipboard"
+                          />
+                        </RoleBasedSecurity>
+                        {#if person.profile_id == $profile.id}
+                          <ComingSoon label="You" />
+                        {/if}
+                      </div>
+                    </div>
+                  </div>
+                {:else}
+                  <div class="flex items-start lg:items-center w-2/4">
+                    <TextChip
+                      value={person.email.substring(0, 2).toUpperCase()}
+                      className="bg-primary-200 text-black font-semibold text-xs mr-3"
+                      shape="rounded-full"
+                    />
+                    <a
+                      href="mailto:{person.email}"
+                      class="text-md text-primary-600 mr-2 dark:text-white"
+                    >
+                      {person.email}
+                    </a>
+                    <div class="flex items-center justify-between">
+                      <RoleBasedSecurity allowedRoles={[1, 2]}>
+                        <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
+                      </RoleBasedSecurity>
+
+                      <TextChip
+                        value="Pending"
+                        className="text-xs bg-yellow-200 text-yellow-700 h-fit"
+                        size="sm"
+                      />
+                    </div>
+                  </div>
+                {/if}
+              </StructuredListCell>
+
+              <!-- second column -->
+              <StructuredListCell class="w-1/4 px-3">
+                <p class=" dark:text-white font-normal text-center text-base w-1/4">
+                  {ROLE_LABEL[person.role_id]}
+                </p>
+              </StructuredListCell>
+
+              <!-- third column -->
+              <StructuredListCell class="p-0 w-1/4">
+                <RoleBasedSecurity allowedRoles={[1, 2]}>
+                  <div class="hidden lg:flex lg:justify-between lg:items-center w-20">
+                    {#if person.profile_id !== $profile.id}
+                      <IconButton
+                        onClick={() => {
+                          member = person;
+                          $deleteMemberModal.open = true;
+                        }}
+                      >
+                        <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
+                      </IconButton>
                     {/if}
                   </div>
-                </div>
-              {:else}
-                <div class="flex items-center w-2/4 absolute bottom-3">
-                  <TextChip
-                    value={person.email.substring(0, 2).toUpperCase()}
-                    className="bg-primary-200 text-black font-semibold text-xs mr-3"
-                    shape="rounded-full"
-                  />
-                  <a
-                    href="mailto:{person.email}"
-                    class="text-md text-primary-600 mr-2 dark:text-white"
-                  >
-                    {person.email}
-                  </a>
-
-                  <RoleBasedSecurity allowedRoles={[1, 2]}>
-                    <div class="hidden lg:flex lg:justify-between lg:items-center w-20">
-                      <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
-                    </div>
-                  </RoleBasedSecurity>
-
-                  <TextChip
-                    value="Pending"
-                    className="text-xs bg-yellow-200 text-yellow-700 h-fit"
-                    size="sm"
-                  />
-                </div>
-              {/if}
-            </StructuredListCell>
-
-            <!-- second column -->
-            <StructuredListCell class="w-1/4 py-4 px-3">
-              <p class="dark:text-white font-normal text-base w-1/4 my-auto">
-                {ROLE_LABEL[person.role_id]}
-              </p>
-            </StructuredListCell>
-
-            <!-- third column -->
-            <StructuredListCell class="p-0 w-1/4">
-              <RoleBasedSecurity allowedRoles={[1, 2]}>
-                <div class="hidden lg:flex lg:justify-between lg:items-center w-20">
-                  {#if person.profile_id !== $profile.id}
-                    <IconButton
-                      onClick={() => {
-                        member = person;
-                        $deleteMemberModal.open = true;
-                      }}
-                    >
-                      <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
-                    </IconButton>
-                  {/if}
-                </div>
-              </RoleBasedSecurity>
-            </StructuredListCell>
-          </StructuredListRow>
-        </StructuredListBody>
-      {/each}
-    </StructuredList>
-    <Pagination totalItems={10} pageSizes={[10, 15, 20]} />
-  </section>
+                </RoleBasedSecurity>
+              </StructuredListCell>
+            </StructuredListRow>
+          </StructuredListBody>
+        {/each}
+      </StructuredList>
+      <!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
+    </section>
+  </PageBody>
 </CourseContainer>
diff --git a/src/routes/courses/[id]/submissions/+page.svelte b/src/routes/courses/[id]/submissions/+page.svelte
index 03a75088..09972fa8 100644
--- a/src/routes/courses/[id]/submissions/+page.svelte
+++ b/src/routes/courses/[id]/submissions/+page.svelte
@@ -244,8 +244,8 @@
   <CourseContainer>
     <PageNav title="Submitted Exercises" />
 
-    <PageBody width="w-11/12 overflow-x-auto overflow-y-hidden">
-      <div class="flex items-center w-full">
+    <PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
+      <div class="flex items-center w-full overflow-x-scroll">
         {#each sections as { id, title, items }, idx (id)}
           <div
             class="section rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
@@ -301,7 +301,7 @@
                       {`${item.tutor ? 'created by' + item.tutor.name : ''}`}
                     </p>
                   </a>
-                  <p class="dark:text-white text-gray-500 dark:text-white text-xs">
+                  <p class="dark:text-white text-gray-500 text-xs">
                     {item.submittedAt}
                   </p>
                   <!-- <div class="badge rounded-md px-2 bg-green-500 text-white">
@@ -324,10 +324,15 @@
   .section {
     max-width: 355px;
     min-width: 355px;
-    height: 80vh;
+    height: 75vh;
   }
 
   .content {
     height: 95%;
   }
+  @media screen and (max-width: 768px) {
+    .section {
+      min-width: 250px;
+    }
+  }
 </style>

From 72759555930476fda7eff05b40d3812d38dad4b7 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 14 Sep 2023 22:18:43 +0100
Subject: [PATCH 04/11] undo redirect after login

---
 src/routes/login/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index ee1a63b7..58579d2e 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -37,9 +37,9 @@
       console.log('data', data);
       if (error) throw error;
 
-      if (redirect) {
-        goto(redirect);
-      }
+      // if (redirect) {
+      //   goto(redirect);
+      // }
     } catch (error) {
       submitError = error.error_description || error.message;
     } finally {

From 530ea721a2ef37c8f4ece135da6c772972a9e0c6 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 14 Sep 2023 22:26:20 +0100
Subject: [PATCH 05/11] clean up goto

---
 src/routes/login/+page.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 58579d2e..8bd0cc78 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -7,7 +7,6 @@
   import { LOGIN_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
   import { currentOrg } from '$lib/utils/store/org';
-  import { goto } from '$app/navigation';
 
   let formRef;
   let supabase = getSupabase();
@@ -36,10 +35,6 @@
       });
       console.log('data', data);
       if (error) throw error;
-
-      // if (redirect) {
-      //   goto(redirect);
-      // }
     } catch (error) {
       submitError = error.error_description || error.message;
     } finally {

From bc7a5e1e4db46acf68ddac6aae9068fb4940ec1e Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 14 Sep 2023 23:04:51 +0100
Subject: [PATCH 06/11] CLASSROOMIO-T-152: Add payment link + reload on org
 login

---
 .../components/People/InviationModal.svelte   |  18 +--
 src/lib/components/Course/store.ts            |   1 +
 .../components/Editor/PricingForm.svelte      | 112 ++++++++++--------
 .../components/PricingSection.svelte          |  29 +++--
 .../components/CourseLandingPage/index.svelte |   5 +
 src/lib/components/Form/TextField.svelte      |   4 +-
 src/lib/components/TextEditor/index.svelte    |   4 +-
 src/lib/utils/functions/course.ts             |  18 +++
 .../utils/functions/getCurrencyFormatter.ts   |   5 +-
 src/lib/utils/services/sendgrid.ts            |   2 +-
 src/lib/utils/types/index.ts                  |   3 +-
 .../email/course/student_welcome/+server.js   |   4 +-
 .../course/teacher_student_joined/+server.js  |   4 +-
 .../email/course/teacher_welcome/+server.js   |   4 +-
 src/routes/api/email/invite/+server.js        |   4 +-
 src/routes/login/+page.svelte                 |   7 ++
 16 files changed, 133 insertions(+), 91 deletions(-)
 create mode 100644 src/lib/utils/functions/course.ts

diff --git a/src/lib/components/Course/components/People/InviationModal.svelte b/src/lib/components/Course/components/People/InviationModal.svelte
index 65bfa2d2..1957f44f 100644
--- a/src/lib/components/Course/components/People/InviationModal.svelte
+++ b/src/lib/components/Course/components/People/InviationModal.svelte
@@ -15,6 +15,7 @@
   import { sendTeacherCourseWelcome } from './utils';
   import type { Course } from '$lib/utils/types';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { getStudentInviteLink } from '$lib/utils/functions/course';
 
   interface Tutor {
     id: number;
@@ -109,21 +110,6 @@
     isLoadingTutors = false;
   }
 
-  function getInviteLink(_course: Course, siteName: string) {
-    const hash = encodeURIComponent(
-      btoa(
-        JSON.stringify({
-          groupId: _course.group?.id,
-          name: _course.title,
-          description: _course.description,
-          orgSiteName: siteName
-        })
-      )
-    );
-
-    return `https://${siteName}.classroomio.com/invite/s/${hash}`;
-  }
-
   function copyLink() {
     copy(link);
     copied = true;
@@ -139,7 +125,7 @@
 
   $: setTutors($currentOrg.id, $invitationModal.open);
 
-  $: link = getInviteLink($course, $currentOrg.siteName);
+  $: link = getStudentInviteLink($course, $currentOrg.siteName);
 </script>
 
 <Modal
diff --git a/src/lib/components/Course/store.ts b/src/lib/components/Course/store.ts
index fabf860c..68621eaf 100644
--- a/src/lib/components/Course/store.ts
+++ b/src/lib/components/Course/store.ts
@@ -21,6 +21,7 @@ export const course: Writable<Course> = writable({
     videoUrl: '',
     showDiscount: false,
     discount: 0,
+    paymentLink: '',
     reward: {
       show: false,
       description: ''
diff --git a/src/lib/components/CourseLandingPage/components/Editor/PricingForm.svelte b/src/lib/components/CourseLandingPage/components/Editor/PricingForm.svelte
index 1120e981..f555b361 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/PricingForm.svelte
+++ b/src/lib/components/CourseLandingPage/components/Editor/PricingForm.svelte
@@ -1,32 +1,36 @@
-<script>
+<script lang="ts">
   import cloneDeep from 'lodash/cloneDeep';
   import set from 'lodash/set';
   import get from 'lodash/get';
   import isEmpty from 'lodash/isEmpty';
-  import { Toggle } from 'carbon-components-svelte';
+  import { Toggle, Select, SelectItem } from 'carbon-components-svelte';
+
   import TextField from '$lib/components/Form/TextField.svelte';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
+  import { isCourseFree } from '$lib/utils/functions/course';
+  import type { Course } from '$lib/utils/types';
 
-  export let course = {};
+  export let course: Course;
 
   let discount = 0;
-  let showDiscount;
-  let giftToggled;
+  let paymentLink = '';
+  let showDiscount = false;
+  let giftToggled = false;
 
   let hasBeenSet = false;
 
-  function setDefaults(course) {
+  function setDefaults(course: Course) {
     console.log('\n\nsetDefaults course', course);
     if (isEmpty(course) || hasBeenSet) return;
     hasBeenSet = true;
 
+    paymentLink = get(course, 'metadata.paymentLink', '');
     discount = get(course, 'metadata.discount', 0);
     showDiscount = get(course, 'metadata.showDiscount', false);
     giftToggled = get(course, 'metadata.reward.show', false);
   }
 
-  function setter(value, setterKey) {
-    console.log('\n\nsetter course', value);
+  function setter(value: string | number | boolean, setterKey: string) {
     if (typeof value !== 'boolean' && !value) return;
 
     const _course = cloneDeep(course);
@@ -34,66 +38,76 @@
     course = _course;
   }
 
-  function handleChange(html) {
+  function handleChange(html: string) {
     const _course = cloneDeep(course);
     set(_course, 'metadata.reward.description', html);
     course = _course;
   }
 
   $: setter(showDiscount, 'metadata.showDiscount');
+  $: setter(paymentLink, 'metadata.paymentLink');
   $: setter(discount, 'metadata.discount');
   $: setter(giftToggled, 'metadata.reward.show');
 
   $: setDefaults(course);
 </script>
 
-<TextField
-  className="mt-5"
-  labelClassName="font-bold"
-  label="Currency"
-  value={course.currency}
-  isDisabled={true}
-/>
+{#if typeof course !== 'undefined'}
+  <Select labelText="Currency" bind:selected={course.currency}>
+    <SelectItem value="NGN" />
+    <SelectItem value="USD" />
+  </Select>
 
-<TextField
-  className="mt-5"
-  labelClassName="font-bold"
-  label="Cost"
-  type="number"
-  bind:value={course.cost}
-/>
-
-<div class="mt-5">
-  <!-- <label for="text-field" class="m-0 font-bold mb-2">Discount</label> -->
-  <Toggle labelText="Discount" bind:toggled={showDiscount}>
-    <span slot="labelA">No</span>
-    <span slot="labelB">Yes</span>
-  </Toggle>
-</div>
-
-{#if showDiscount}
   <TextField
     className="mt-5"
     labelClassName="font-bold"
-    label="Discout Percent"
+    label="Cost"
     type="number"
-    bind:value={discount}
-    helperMessage="In Percentage %"
+    bind:value={course.cost}
   />
-{/if}
 
-<div class="mt-5">
-  <!-- <label for="text-field" class="m-0 font-bold mb-2">Discount</label> -->
-  <Toggle labelText="Gift on Completion" bind:toggled={giftToggled}>
-    <span slot="labelA">No</span>
-    <span slot="labelB">Yes</span>
-  </Toggle>
-</div>
+  {#if !isCourseFree(course.cost || 0)}
+    <TextField
+      className="mt-5"
+      labelClassName="font-bold"
+      label="Payment Link"
+      helperMessage="Stripe, Lemon Squeezy or any payment link"
+      bind:value={paymentLink}
+    />
+  {/if}
 
-{#if giftToggled}
-  <p class="dark:text-white font-bold mt-5">About Gift</p>
-
-  <div class="h-2/5">
-    <TextEditor value={get(course, 'metadata.reward.description')} onChange={handleChange} />
+  <div class="mt-5">
+    <!-- <label for="text-field" class="m-0 font-bold mb-2">Discount</label> -->
+    <Toggle labelText="Discount" bind:toggled={showDiscount}>
+      <span slot="labelA">No</span>
+      <span slot="labelB">Yes</span>
+    </Toggle>
   </div>
+
+  {#if showDiscount}
+    <TextField
+      className="mt-5"
+      labelClassName="font-bold"
+      label="Discout Percent"
+      type="number"
+      bind:value={discount}
+      helperMessage="In Percentage %"
+    />
+  {/if}
+
+  <div class="mt-5">
+    <!-- <label for="text-field" class="m-0 font-bold mb-2">Discount</label> -->
+    <Toggle labelText="Gift on Completion" bind:toggled={giftToggled}>
+      <span slot="labelA">No</span>
+      <span slot="labelB">Yes</span>
+    </Toggle>
+  </div>
+
+  {#if giftToggled}
+    <p class="dark:text-white font-bold mt-5">About Gift</p>
+
+    <div class="h-2/5">
+      <TextEditor value={get(course, 'metadata.reward.description', '')} onChange={handleChange} />
+    </div>
+  {/if}
 {/if}
diff --git a/src/lib/components/CourseLandingPage/components/PricingSection.svelte b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
index 54951a14..11fb2aff 100644
--- a/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+++ b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import type { Course } from '$lib/utils/types';
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
+  import { isCourseFree } from '$lib/utils/functions/course';
   import get from 'lodash/get';
 
   export let className = '';
+  export let editMode = false;
   export let courseData: Course = {
     id: '',
     title: '',
@@ -15,6 +16,7 @@
   let calculatedCost = 0;
   let discount = 0;
   let formatter: Intl.NumberFormat | undefined;
+  let isFree = false;
 
   function calcDisc(percent: number, cost: number) {
     if (!percent) return cost;
@@ -23,7 +25,15 @@
     return Math.round(discountedPrice);
   }
 
-  function addToCart() {}
+  function handleJoinCourse() {
+    if (editMode) return;
+
+    if (isFree) {
+      // get invite link
+      // redirect to link
+    } else {
+    }
+  }
 
   function buyNow() {}
 
@@ -32,9 +42,11 @@
     formatter = getCurrencyFormatter(currency);
   }
 
+  $: console.log('courseData.currency', courseData.currency);
   $: setFormatter(courseData.currency);
   $: discount = get(courseData, 'metadata.discount', 0);
   $: calculatedCost = calcDisc(discount, courseData.cost || 0);
+  $: isFree = isCourseFree(calculatedCost);
 </script>
 
 <!-- Pricing Details -->
@@ -44,6 +56,9 @@
     <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}
       </p>
       {#if courseData?.metadata?.showDiscount}
         <p class="dark:text-white font-light text-sm text-gray-500">
@@ -58,15 +73,9 @@
     <!-- Call To Action Buttons -->
     <div class="flex flex-col w-full items-center">
       <PrimaryButton
-        label="Add to Cart"
+        label="Join Course"
         className="w-full sm:w-full py-3 mb-3"
-        onClick={addToCart}
-      />
-      <PrimaryButton
-        label="Buy Now"
-        className="w-full sm:w-full py-3 mb-3"
-        variant={VARIANTS.OUTLINED}
-        onClick={addToCart}
+        onClick={handleJoinCourse}
       />
       <p class="dark:text-white font-light text-sm text-gray-500">Early bird offer. Buy ASAP</p>
     </div>
diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index 4f4e47cc..a78c7889 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -25,6 +25,7 @@
 
   dayjs.extend(relativeTime);
 
+  export let editMode = false;
   export let courseData: Course = {
     id: '',
     title: '',
@@ -164,7 +165,11 @@
       {/if}
     </div>
   </header>
+<<<<<<< Updated upstream
   <!-- <PricingSection className="md:hidden" {courseData} /> -->
+=======
+  <PricingSection className="md:hidden" {courseData} {editMode} />
+>>>>>>> Stashed changes
   <!-- Body -->
   <div class="bg-white dark:bg-gray-800 w-full">
     <div
diff --git a/src/lib/components/Form/TextField.svelte b/src/lib/components/Form/TextField.svelte
index 22decfcd..33f3145f 100644
--- a/src/lib/components/Form/TextField.svelte
+++ b/src/lib/components/Form/TextField.svelte
@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import PasswordEye from '../Icons/PasswordEye.svelte';
 
   export let label = '';
   export let placeholder = '';
-  export let value = '';
+  export let value: string | number;
   export let name = '';
   export let onKeyDown = () => {};
   export let className = '';
diff --git a/src/lib/components/TextEditor/index.svelte b/src/lib/components/TextEditor/index.svelte
index 5bf850a1..39093f5f 100644
--- a/src/lib/components/TextEditor/index.svelte
+++ b/src/lib/components/TextEditor/index.svelte
@@ -4,10 +4,10 @@
 
   export let id = '';
   export let value: string;
-  export let onChange = (html = '') => {};
+  export let onChange = (html: string) => {};
   export let height = 300;
   export let placeholder = '';
-  export let editorWindowRef;
+  export let editorWindowRef = null;
 
   const apiKey = PUBLIC_TINYMCE_API_KEY;
 
diff --git a/src/lib/utils/functions/course.ts b/src/lib/utils/functions/course.ts
new file mode 100644
index 00000000..1b3bbddd
--- /dev/null
+++ b/src/lib/utils/functions/course.ts
@@ -0,0 +1,18 @@
+import type { Course } from '../types';
+
+export const isCourseFree = (cost: number) => !(Number(cost) > 0);
+
+export const getStudentInviteLink = (_course: Course, orgSiteName: string) => {
+  const hash = encodeURIComponent(
+    btoa(
+      JSON.stringify({
+        groupId: _course.group?.id,
+        name: _course.title,
+        description: _course.description,
+        orgSiteName
+      })
+    )
+  );
+
+  return `https://${orgSiteName}.classroomio.com/invite/s/${hash}`;
+};
diff --git a/src/lib/utils/functions/getCurrencyFormatter.ts b/src/lib/utils/functions/getCurrencyFormatter.ts
index 3603fcec..6fdd06d8 100644
--- a/src/lib/utils/functions/getCurrencyFormatter.ts
+++ b/src/lib/utils/functions/getCurrencyFormatter.ts
@@ -1,7 +1,8 @@
 export default (currency: string | undefined) => {
-  return new Intl.NumberFormat('en-US', {
+  const locale = currency == 'NGN' ? 'en-NG' : 'en-US';
+  return new Intl.NumberFormat(locale, {
     style: 'currency',
     currency: currency,
-    minimumFractionDigits: 2,
+    minimumFractionDigits: 2
   });
 };
diff --git a/src/lib/utils/services/sendgrid.ts b/src/lib/utils/services/sendgrid.ts
index 75fc8056..f569ec72 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_NOTIFY = 'ClassroomIO <notify@classroomio.com>';
+export const SENDGRID_FROM_NOREPLY = 'ClassroomIO <noreply@classroomio.com>';
 
 export let sendgrid: MailService;
 
diff --git a/src/lib/utils/types/index.ts b/src/lib/utils/types/index.ts
index a9d1b312..308f011b 100644
--- a/src/lib/utils/types/index.ts
+++ b/src/lib/utils/types/index.ts
@@ -8,6 +8,7 @@ interface CourseMetadata {
   videoUrl?: '';
   showDiscount: false;
   discount: 0;
+  paymentLink?: string;
   reward?: {
     show: boolean;
     description: string;
@@ -94,7 +95,7 @@ export interface Course {
   logo?: string;
   slug?: any; // type unknown;
   metadata?: CourseMetadata;
-  cost?: number;
+  cost: number;
   currency?: string;
   group?: Group;
   organization?: Organization;
diff --git a/src/routes/api/email/course/student_welcome/+server.js b/src/routes/api/email/course/student_welcome/+server.js
index 0deb5ef4..ee366ce2 100644
--- a/src/routes/api/email/course/student_welcome/+server.js
+++ b/src/routes/api/email/course/student_welcome/+server.js
@@ -1,7 +1,7 @@
 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 { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
 
 const sendgrid = getSendgrid();
@@ -30,7 +30,7 @@ export async function POST({ request }) {
   }
 
   const options = {
-    from: SENDGRID_FROM_NOTIFY,
+    from: SENDGRID_FROM_NOREPLY,
     to,
     subject: `[${orgName}] Welcome to Class`,
     html: render({
diff --git a/src/routes/api/email/course/teacher_student_joined/+server.js b/src/routes/api/email/course/teacher_student_joined/+server.js
index 47cc09f7..3570cc14 100644
--- a/src/routes/api/email/course/teacher_student_joined/+server.js
+++ b/src/routes/api/email/course/teacher_student_joined/+server.js
@@ -1,7 +1,7 @@
 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 { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
 
 const sendgrid = getSendgrid();
@@ -29,7 +29,7 @@ export async function POST({ request }) {
   }
 
   const options = {
-    from: SENDGRID_FROM_NOTIFY,
+    from: SENDGRID_FROM_NOREPLY,
     to,
     subject: `[${courseName}] You've got a new student!`,
     html: render({
diff --git a/src/routes/api/email/course/teacher_welcome/+server.js b/src/routes/api/email/course/teacher_welcome/+server.js
index 6ed86ed0..de1ca347 100644
--- a/src/routes/api/email/course/teacher_welcome/+server.js
+++ b/src/routes/api/email/course/teacher_welcome/+server.js
@@ -1,7 +1,7 @@
 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 { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
 
 const sendgrid = getSendgrid();
@@ -32,7 +32,7 @@ export async function POST({ request }) {
   const inviteLink = `${origin}/org/${orgSiteName}/courses`;
 
   const options = {
-    from: SENDGRID_FROM_NOTIFY,
+    from: SENDGRID_FROM_NOREPLY,
     to,
     subject: `You have been invited to a course in ${orgName}!`,
     html: render({
diff --git a/src/routes/api/email/invite/+server.js b/src/routes/api/email/invite/+server.js
index 17947ecb..a1565d97 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_NOTIFY } from '$lib/utils/services/sendgrid';
+import { getSendgrid, SENDGRID_FROM_NOREPLY } 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_NOTIFY,
+    from: SENDGRID_FROM_NOREPLY,
     to: email,
     subject: `Join ${name} on ClassroomIO`,
     html: render({
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 8bd0cc78..ca301c68 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -35,6 +35,13 @@
       });
       console.log('data', data);
       if (error) throw error;
+
+      // reload page on org site cause for some reason the authlistener on +layout.svelte doesn't run
+      // on org site
+      if ($currentOrg.id && redirect) {
+        console.log('Forcing full page reload for auth listener');
+        window.location.reload();
+      }
     } catch (error) {
       submitError = error.error_description || error.message;
     } finally {

From 96428080c2b80ae1059fb98520d0840543331d15 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 14 Sep 2023 23:09:50 +0100
Subject: [PATCH 07/11] fix deploy

---
 src/lib/components/CourseLandingPage/index.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index a78c7889..a3101f38 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -165,11 +165,7 @@
       {/if}
     </div>
   </header>
-<<<<<<< Updated upstream
-  <!-- <PricingSection className="md:hidden" {courseData} /> -->
-=======
   <PricingSection className="md:hidden" {courseData} {editMode} />
->>>>>>> Stashed changes
   <!-- Body -->
   <div class="bg-white dark:bg-gray-800 w-full">
     <div

From 90274d7ef44bd5cf33ea9064b1d0fa918d62ec31 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 15 Sep 2023 00:11:23 +0100
Subject: [PATCH 08/11] CLASSROOMIO-T-152: Extra improvements

---
 .../components/PricingSection.svelte                 |  1 -
 src/lib/components/Org/Settings/store.ts             |  3 ++-
 src/lib/components/UploadImage/index.svelte          |  2 +-
 src/routes/courses/[id]/landingpage/+page.svelte     |  2 +-
 src/routes/signup/+page.svelte                       | 12 ++++++++----
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/CourseLandingPage/components/PricingSection.svelte b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
index 11fb2aff..8342571f 100644
--- a/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+++ b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
@@ -42,7 +42,6 @@
     formatter = getCurrencyFormatter(currency);
   }
 
-  $: console.log('courseData.currency', courseData.currency);
   $: setFormatter(courseData.currency);
   $: discount = get(courseData, 'metadata.discount', 0);
   $: calculatedCost = calcDisc(discount, courseData.cost || 0);
diff --git a/src/lib/components/Org/Settings/store.ts b/src/lib/components/Org/Settings/store.ts
index 48e2769d..164ffeac 100644
--- a/src/lib/components/Org/Settings/store.ts
+++ b/src/lib/components/Org/Settings/store.ts
@@ -82,7 +82,8 @@ export let landingPageSettings: Writable<OrgLandingPageJson> = writable({
     title: 'Our Story',
     content:
       'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.',
-    imageUrl: '',
+    imageUrl:
+      'https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/landingpage/riverside.jpeg',
     show: true
   },
   courses: {
diff --git a/src/lib/components/UploadImage/index.svelte b/src/lib/components/UploadImage/index.svelte
index c6c2f69e..204c2ffb 100644
--- a/src/lib/components/UploadImage/index.svelte
+++ b/src/lib/components/UploadImage/index.svelte
@@ -53,7 +53,7 @@
   <input
     style="display:none"
     type="file"
-    accept=".jpg, .jpeg, .png"
+    accept=".jpg, .jpeg, .png, .webp"
     on:change={(e) => onFileSelected(e)}
     bind:this={fileinput}
   />
diff --git a/src/routes/courses/[id]/landingpage/+page.svelte b/src/routes/courses/[id]/landingpage/+page.svelte
index 1df225ea..2ff2720f 100644
--- a/src/routes/courses/[id]/landingpage/+page.svelte
+++ b/src/routes/courses/[id]/landingpage/+page.svelte
@@ -36,7 +36,7 @@
 >
   <Editor {courseId} bind:course={courseData} />
   <div class="rightBar">
-    <CourseLandingPage bind:courseData />
+    <CourseLandingPage bind:courseData editMode={true} />
   </div>
 </div>
 
diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte
index 7600545e..0d01eb57 100644
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -12,6 +12,7 @@
   import { SIGNUP_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
   import { profile } from '$lib/utils/store/user';
+  import { currentOrg } from '$lib/utils/store/org';
 
   let supabase = getSupabase();
   let fields = Object.assign({}, SIGNUP_FIELDS);
@@ -53,7 +54,11 @@
         throw 'Error creating user';
       }
 
+      if (!$currentOrg.id) return;
+
       const [regexUsernameMatch] = [...(authUser.email?.matchAll(/(.*)@/g) || [])];
+      const response = await fetch('https://api.ipregistry.co/?key=tryout');
+      const metadata = await response.json();
 
       const profileRes = await supabase
         .from('profile')
@@ -61,7 +66,8 @@
           id: authUser.id,
           username: regexUsernameMatch[1] + `${new Date().getTime()}`,
           fullname: regexUsernameMatch[1],
-          email: authUser.email
+          email: authUser.email,
+          metadata
         })
         .select();
       console.log('profileRes', profileRes);
@@ -77,12 +83,10 @@
       if (redirect) {
         goto(redirect);
       } else {
-        goto('/');
+        goto('/login');
       }
 
       formRef?.reset();
-
-      // return goto('/login' + $page.url.search);
       success = true;
       fields = Object.assign({}, SIGNUP_FIELDS);
     } catch (error) {

From 6db697bc6cde6b1b22e590f45344bc0f0951a905 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 15 Sep 2023 08:26:26 +0100
Subject: [PATCH 09/11] CLASSROOMIO-T-152: Landing page fully ready

---
 .../Course/components/Navigation/index.svelte |   2 +-
 .../components/PaymentModal.svelte            | 111 ++++++++++++++++++
 .../components/PricingSection.svelte          |  40 +++++--
 .../CourseLandingPage/components/utils.ts     |  60 ++++++++++
 .../components/CourseLandingPage/index.svelte |  31 ++---
 src/lib/components/Navigation/index.svelte    |   2 +-
 src/lib/utils/functions/validator.js          |  16 +++
 src/lib/utils/types/index.ts                  |   1 +
 .../course/student_prove_payment/+server.js   |  60 ++++++++++
 .../prove_payment.svelte                      |  37 ++++++
 .../student_prove_payment/template.svelte     |  19 +++
 .../teacher_student_buycourse/+server.js      |  57 +++++++++
 .../join_request.svelte                       |  44 +++++++
 .../teacher_student_buycourse/template.svelte |  17 +++
 .../teacher_student_joined/welcome.svelte     |   2 +-
 src/routes/course/[slug]/+page.js             |  12 +-
 src/routes/course/[slug]/+page.svelte         |  44 ++-----
 src/routes/invite/s/[hash]/+page.svelte       |  25 +++-
 18 files changed, 510 insertions(+), 70 deletions(-)
 create mode 100644 src/lib/components/CourseLandingPage/components/PaymentModal.svelte
 create mode 100644 src/lib/components/CourseLandingPage/components/utils.ts
 create mode 100644 src/routes/api/email/course/student_prove_payment/+server.js
 create mode 100644 src/routes/api/email/course/student_prove_payment/prove_payment.svelte
 create mode 100644 src/routes/api/email/course/student_prove_payment/template.svelte
 create mode 100644 src/routes/api/email/course/teacher_student_buycourse/+server.js
 create mode 100644 src/routes/api/email/course/teacher_student_buycourse/join_request.svelte
 create mode 100644 src/routes/api/email/course/teacher_student_buycourse/template.svelte

diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte
index 7ff810de..9f6ae582 100644
--- a/src/lib/components/Course/components/Navigation/index.svelte
+++ b/src/lib/components/Course/components/Navigation/index.svelte
@@ -154,7 +154,7 @@
     $menu.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[40]'
       : 'translate-x-0 absolute md:relative z-[40]'
-  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
+  } transition w-[350px] min-w-[350px] md:max-w-[350px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] overflow-y-auto border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="h-full flex flex-col">
     <ul class="my-5">
diff --git a/src/lib/components/CourseLandingPage/components/PaymentModal.svelte b/src/lib/components/CourseLandingPage/components/PaymentModal.svelte
new file mode 100644
index 00000000..25c778ef
--- /dev/null
+++ b/src/lib/components/CourseLandingPage/components/PaymentModal.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import Modal from '$lib/components/Modal/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { coursePaymentValidation } from '$lib/utils/functions/validator';
+  import { Link } from 'carbon-components-svelte';
+  import { sendTeacherStudentJoinRequest, sendStudentRequestReceipt } from './utils';
+  import { currentOrg } from '$lib/utils/store/org';
+
+  export let open = false;
+  export let paymentLink = '';
+  export let teacherEmail = '';
+  export let courseName = '';
+
+  let fields = {
+    fullname: '',
+    email: ''
+  };
+
+  let errors = {
+    fullname: '',
+    email: ''
+  };
+
+  const STEPS = {
+    STEP_1: 'ENTER_DETAILS',
+    STEP_2: 'GO_TO_PAYMENT'
+  };
+
+  let step = STEPS.STEP_1;
+
+  function onSubmit() {
+    errors = coursePaymentValidation(fields);
+    console.log('coursePayment errors', errors);
+
+    if (Object.keys(errors).length) {
+      return;
+    }
+
+    if (paymentLink) {
+      step = STEPS.STEP_2;
+
+      // Send email to first added teacher of student wanting to join
+      sendTeacherStudentJoinRequest({
+        to: teacherEmail,
+        courseName,
+        studentEmail: fields.email,
+        studentFullname: fields.fullname
+      });
+    } else {
+      open = false;
+    }
+  }
+
+  function onClickPaymentLink() {
+    // Send email to student to send proof of payment to teacher
+    sendStudentRequestReceipt({
+      to: fields.email,
+      courseName,
+      teacherEmail,
+      studentFullname: fields.fullname,
+      orgName: $currentOrg.name
+    });
+
+    fields.fullname = '';
+    fields.email = '';
+    open = false;
+  }
+</script>
+
+<Modal onClose={() => (open = false)} bind:open width="w-96" modalHeading="Process course payment">
+  {#if step === STEPS.STEP_1}
+    <form on:submit|preventDefault={onSubmit}>
+      <TextField
+        label="Your Fullname"
+        bind:value={fields.fullname}
+        autoFocus={true}
+        placeholder="John Doe"
+        className="mb-4"
+        isRequired={true}
+        autoComplete={false}
+        errorMessage={errors.fullname}
+      />
+      <TextField
+        label="Your Fullname"
+        bind:value={fields.email}
+        placeholder="johndoe@email.com"
+        className="mb-4"
+        isRequired={true}
+        autoComplete={false}
+        errorMessage={errors.email}
+      />
+
+      <div class="mt-5 flex items-center flex-row-reverse">
+        <PrimaryButton
+          className="px-6 py-3"
+          label={paymentLink ? 'Next' : 'Finish'}
+          type="submit"
+        />
+      </div>
+    </form>
+  {:else if step === STEPS.STEP_2}
+    <p>
+      You will now be taken to a payment page, once you've paid send a proof of payment to the
+      course admin
+    </p>
+    <div class="mt-5 flex items-center flex-row-reverse">
+      <Link href={paymentLink} target="_blank" on:click={onClickPaymentLink}>Go to payment</Link>
+    </div>
+  {/if}
+</Modal>
diff --git a/src/lib/components/CourseLandingPage/components/PricingSection.svelte b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
index 8342571f..0c499382 100644
--- a/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+++ b/src/lib/components/CourseLandingPage/components/PricingSection.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
+  import get from 'lodash/get';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import type { Course } from '$lib/utils/types';
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
   import { isCourseFree } from '$lib/utils/functions/course';
-  import get from 'lodash/get';
+  import { getStudentInviteLink } from '$lib/utils/functions/course';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { goto } from '$app/navigation';
+  import PaymentModal from './PaymentModal.svelte';
+  import type { Course } from '$lib/utils/types';
+  import { ROLE } from '$lib/utils/constants/roles';
 
   export let className = '';
   export let editMode = false;
-  export let courseData: Course = {
-    id: '',
-    title: '',
-    description: ''
-  };
+  export let courseData: Course;
+  export let startCoursePayment = false;
 
   let calculatedCost = 0;
   let discount = 0;
@@ -29,27 +31,39 @@
     if (editMode) return;
 
     if (isFree) {
-      // get invite link
-      // redirect to link
+      const link = getStudentInviteLink(courseData, $currentOrg.siteName);
+      goto(link);
     } else {
+      startCoursePayment = true;
     }
   }
 
-  function buyNow() {}
-
   function setFormatter(currency: string | undefined) {
     if (!currency) return;
     formatter = getCurrencyFormatter(currency);
   }
 
+  function getTeacherEmail(group: Course['group']) {
+    const firstTutor = group?.members?.find((m) => m.role_id === ROLE.TUTOR);
+
+    return firstTutor?.profile?.email || '';
+  }
+
   $: setFormatter(courseData.currency);
   $: discount = get(courseData, 'metadata.discount', 0);
   $: calculatedCost = calcDisc(discount, courseData.cost || 0);
   $: isFree = isCourseFree(calculatedCost);
 </script>
 
+<PaymentModal
+  bind:open={startCoursePayment}
+  paymentLink={get(courseData, 'metadata.paymentLink', '')}
+  courseName={courseData.title}
+  teacherEmail={getTeacherEmail(courseData.group)}
+/>
+
 <!-- Pricing Details -->
-<aside class="{className} price-container lg:sticky lg:top-0 lg:shadow-2xl lg:rounded-lg m-h-fit">
+<aside class="{className} price-container lg:sticky lg:top-10 lg:shadow-2xl lg:rounded-lg m-h-fit">
   <div class="p-10">
     <!-- Pricing -->
     <div class="mb-6">
@@ -72,7 +86,7 @@
     <!-- Call To Action Buttons -->
     <div class="flex flex-col w-full items-center">
       <PrimaryButton
-        label="Join Course"
+        label={isFree ? 'Join Course' : 'Buy Now'}
         className="w-full sm:w-full py-3 mb-3"
         onClick={handleJoinCourse}
       />
diff --git a/src/lib/components/CourseLandingPage/components/utils.ts b/src/lib/components/CourseLandingPage/components/utils.ts
new file mode 100644
index 00000000..282ab3e7
--- /dev/null
+++ b/src/lib/components/CourseLandingPage/components/utils.ts
@@ -0,0 +1,60 @@
+import { supabase } from '$lib/utils/functions/supabase';
+
+export async function sendTeacherStudentJoinRequest(params: {
+  to: string;
+  courseName: string;
+  studentEmail: string;
+  studentFullname: string;
+}) {
+  const { data } = await supabase.auth.getSession();
+  const accessToken = data.session?.access_token || '';
+
+  try {
+    const response = await fetch('/api/email/course/teacher_student_buycourse', {
+      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);
+  }
+}
+
+export async function sendStudentRequestReceipt(params: {
+  to: string;
+  courseName: string;
+  orgName: string;
+  studentFullname: string;
+  teacherEmail: string;
+}) {
+  const { data } = await supabase.auth.getSession();
+  const accessToken = data.session?.access_token || '';
+
+  try {
+    const response = await fetch('/api/email/course/student_prove_payment', {
+      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/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index a3101f38..18461649 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -26,11 +26,7 @@
   dayjs.extend(relativeTime);
 
   export let editMode = false;
-  export let courseData: Course = {
-    id: '',
-    title: '',
-    description: ''
-  };
+  export let courseData: Course;
   const ratingsImg = [
     '/images/rating-1.svg',
     '/images/rating-2.svg',
@@ -44,6 +40,7 @@
   let player: any;
   let averageRating = 0;
   let totalRatings = 0;
+  let startCoursePayment = false;
 
   // initialize the expandDescription array with 'false' values for each review.
   let expandDescription = Array(reviews.length).fill(false);
@@ -62,16 +59,6 @@
     activeNav = window.location.hash;
   }
 
-  function addToCart() {}
-
-  function buyNow() {
-    // if (courseData.cost) {
-    //   paystackApi.tra;
-    // } else {
-    //   // Course is free
-    // }
-  }
-
   function initPlyr(_player: any, _video: string | undefined) {
     if (!player) return;
 
@@ -120,7 +107,13 @@
         <p class="dark:text-white author my-3 text-sm">
           {get(courseData, 'metadata.instructor.name', '')}
         </p>
-        <PrimaryButton label="Start Course" className="px-6 py-5 mt-6 sm:w-fit" />
+        <PrimaryButton
+          label="Start Course"
+          className="px-6 py-5 mt-6 sm:w-fit"
+          onClick={() => {
+            startCoursePayment = true;
+          }}
+        />
       </div>
 
       <!-- Banner Image getEmbedId(videoUrl) -->
@@ -165,16 +158,16 @@
       {/if}
     </div>
   </header>
-  <PricingSection className="md:hidden" {courseData} {editMode} />
+  <PricingSection className="md:hidden" {courseData} {editMode} bind:startCoursePayment />
   <!-- Body -->
   <div class="bg-white dark:bg-gray-800 w-full">
     <div
-      class="py-8 lg:w-11/12 w-full m-2 lg:m-auto flex flex-col-reverse lg:flex-row items-center lg:items-start justify-between"
+      class="py-8 lg:w-11/12 w-full m-2 lg:m-auto flex flex-col-reverse lg:flex-row items-center lg:items-start justify-between max-w-[1200px]"
     >
       <!-- Course Details -->
       <div class="course-content w-full p-3 lg:w-10/12 lg:mr-14">
         <!-- Navigation -->
-        <nav class="flex items-center border-b border-gray-300 pb-3">
+        <nav class="flex items-center border-b border-gray-300 py-3 sticky top-11 bg-white">
           {#each NAV_ITEMS as navItem}
             <a
               href="{$page.url.pathname}{navItem.key}"
diff --git a/src/lib/components/Navigation/index.svelte b/src/lib/components/Navigation/index.svelte
index a940f649..31a8e82b 100644
--- a/src/lib/components/Navigation/index.svelte
+++ b/src/lib/components/Navigation/index.svelte
@@ -10,7 +10,7 @@
   export let logo;
   export let orgName;
   export let isOrgSite = false;
-  export let backgroundColor = 'bg-blue';
+  export let backgroundColor = 'bg-white';
 
   let navClass = '';
 
diff --git a/src/lib/utils/functions/validator.js b/src/lib/utils/functions/validator.js
index 8bc4980f..1751af56 100644
--- a/src/lib/utils/functions/validator.js
+++ b/src/lib/utils/functions/validator.js
@@ -134,6 +134,22 @@ export const authValidation = (fields = {}) => {
   return processErrors(error);
 };
 
+export const coursePaymentValidation = (fields = {}) => {
+  const schema = z.object({
+    fullname: z.string().min(6, {
+      message: 'Must be 6 or more characters long',
+      invalid_type_error: 'Must not be empty'
+    }),
+    email: z.string().email({
+      message: 'Invalid email address',
+      invalid_type_error: 'Must not be empty'
+    })
+  });
+  const { error } = schema.safeParse(fields);
+
+  return processErrors(error);
+};
+
 export const resetValidation = (fields = {}) => {
   const { error } = resetValidationSchema.safeParse(fields);
 
diff --git a/src/lib/utils/types/index.ts b/src/lib/utils/types/index.ts
index 308f011b..32a88f0a 100644
--- a/src/lib/utils/types/index.ts
+++ b/src/lib/utils/types/index.ts
@@ -66,6 +66,7 @@ export interface Group {
   organization_id?: string /* foreign key to organization.id */;
   organization?: Organization;
   tutors: Profile[];
+  members: Groupmember[];
 }
 
 export interface Role {
diff --git a/src/routes/api/email/course/student_prove_payment/+server.js b/src/routes/api/email/course/student_prove_payment/+server.js
new file mode 100644
index 00000000..1cc37f9a
--- /dev/null
+++ b/src/routes/api/email/course/student_prove_payment/+server.js
@@ -0,0 +1,60 @@
+import { render } from 'svelte-email';
+import { json } from '@sveltejs/kit';
+import JoinRequestTemplate from './template.svelte';
+import { getSendgrid, SENDGRID_FROM_NOREPLY } 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, courseName, teacherEmail, studentFullname, orgName } = await request.json();
+  const accessToken = request.headers.get('Authorization') || '';
+  console.log(
+    '/POST api/email/course/student_prove_payment',
+    to,
+    courseName,
+    teacherEmail,
+    studentFullname,
+    orgName
+  );
+
+  if (!to || !courseName || !teacherEmail || !studentFullname || !orgName) {
+    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 options = {
+    from: SENDGRID_FROM_NOREPLY,
+    to,
+    replyTo: teacherEmail,
+    subject: `[${courseName}] One more step left`,
+    html: render({
+      template: JoinRequestTemplate,
+      props: {
+        courseName,
+        studentFullname,
+        teacherEmail,
+        orgName
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}
diff --git a/src/routes/api/email/course/student_prove_payment/prove_payment.svelte b/src/routes/api/email/course/student_prove_payment/prove_payment.svelte
new file mode 100644
index 00000000..f08052f5
--- /dev/null
+++ b/src/routes/api/email/course/student_prove_payment/prove_payment.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Text } from 'svelte-email';
+
+  export let courseName = '';
+  export let studentFullname = '';
+  export let teacherEmail = '';
+  export let orgName = '';
+
+  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'
+  };
+</script>
+
+<Text style={paragraph}>Hi {studentFullname},</Text>
+<Text style={paragraphContent}>
+  You are one step closer to joining: {courseName}
+</Text>
+<Text style={paragraphContent}>
+  Please send your proof of payment to: {teacherEmail}, in order to join the course.
+</Text>
+
+<Text style={footerParagraph}>Talk to you soon and see you in class.</Text>
+<Text style={footerParagraph}>{orgName}</Text>
diff --git a/src/routes/api/email/course/student_prove_payment/template.svelte b/src/routes/api/email/course/student_prove_payment/template.svelte
new file mode 100644
index 00000000..78da5907
--- /dev/null
+++ b/src/routes/api/email/course/student_prove_payment/template.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
+  import ProvePayment from './prove_payment.svelte';
+
+  export let courseName = '';
+  export let studentFullname = '';
+  export let orgName = '';
+  export let teacherEmail = '';
+</script>
+
+<EmailTemplate
+  children={ProvePayment}
+  props={{
+    courseName,
+    studentFullname,
+    orgName,
+    teacherEmail
+  }}
+/>
diff --git a/src/routes/api/email/course/teacher_student_buycourse/+server.js b/src/routes/api/email/course/teacher_student_buycourse/+server.js
new file mode 100644
index 00000000..0f421e9b
--- /dev/null
+++ b/src/routes/api/email/course/teacher_student_buycourse/+server.js
@@ -0,0 +1,57 @@
+import { render } from 'svelte-email';
+import { json } from '@sveltejs/kit';
+import JoinRequestTemplate from './template.svelte';
+import { getSendgrid, SENDGRID_FROM_NOREPLY } 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, courseName, studentEmail, studentFullname } = await request.json();
+  const accessToken = request.headers.get('Authorization') || '';
+  console.log(
+    '/POST api/email/course/teacher_student_buycourse',
+    to,
+    courseName,
+    studentEmail,
+    studentFullname
+  );
+
+  if (!to || !courseName || !studentEmail || !studentFullname) {
+    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 options = {
+    from: SENDGRID_FROM_NOREPLY,
+    to,
+    subject: `[${courseName}] Request to Join Course!`,
+    html: render({
+      template: JoinRequestTemplate,
+      props: {
+        courseName,
+        studentFullname,
+        studentEmail
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}
diff --git a/src/routes/api/email/course/teacher_student_buycourse/join_request.svelte b/src/routes/api/email/course/teacher_student_buycourse/join_request.svelte
new file mode 100644
index 00000000..3584749e
--- /dev/null
+++ b/src/routes/api/email/course/teacher_student_buycourse/join_request.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Text, Link } from 'svelte-email';
+
+  export let courseName = '';
+  export let studentFullname = '';
+  export let studentEmail = '';
+
+  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 linkStyle = {
+    color: '#1d4ee2'
+  };
+</script>
+
+<Text style={paragraph}>Hi amazing tutor,</Text>
+<Text style={paragraphContent}>
+  A new student has requested to join a course you are teaching: “{courseName}"
+</Text>
+<Text style={paragraphContent}>Student details</Text>
+<Text style={paragraphContent}>
+  Name: {studentFullname}<br />
+  Email: {studentEmail}
+</Text>
+
+<Text style={footerParagraph}>Cheers</Text>
+<Text style={footerParagraph}>
+  <Link style={linkStyle} href="https://classroomio.com">ClassroomIO</Link>
+</Text>
diff --git a/src/routes/api/email/course/teacher_student_buycourse/template.svelte b/src/routes/api/email/course/teacher_student_buycourse/template.svelte
new file mode 100644
index 00000000..5c3db5c8
--- /dev/null
+++ b/src/routes/api/email/course/teacher_student_buycourse/template.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
+  import JoinRequest from './join_request.svelte';
+
+  export let courseName = '';
+  export let studentFullname = '';
+  export let studentEmail = '';
+</script>
+
+<EmailTemplate
+  children={JoinRequest}
+  props={{
+    courseName,
+    studentFullname,
+    studentEmail
+  }}
+/>
diff --git a/src/routes/api/email/course/teacher_student_joined/welcome.svelte b/src/routes/api/email/course/teacher_student_joined/welcome.svelte
index f27db4ba..3607162f 100644
--- a/src/routes/api/email/course/teacher_student_joined/welcome.svelte
+++ b/src/routes/api/email/course/teacher_student_joined/welcome.svelte
@@ -28,7 +28,7 @@
 
 <Text style={paragraph}>Hi amazing tutor,</Text>
 <Text style={paragraphContent}>
-  Congratulations, a new student has joined a course you are teaching: “{courseName}""
+  Congratulations, a new student has joined a course you are teaching: “{courseName}"
 </Text>
 <Text style={paragraphContent}>
   We hope they have a great experience learning from the best (YOU).
diff --git a/src/routes/course/[slug]/+page.js b/src/routes/course/[slug]/+page.js
index 21587fcb..018e98fc 100644
--- a/src/routes/course/[slug]/+page.js
+++ b/src/routes/course/[slug]/+page.js
@@ -1,5 +1,15 @@
-export const load = ({ params = { slug: '' } }) => {
+import { fetchCourse } from '$lib/utils/services/courses';
+import { supabase, getSupabase } from '$lib/utils/functions/supabase';
+
+if (!supabase) {
+  getSupabase();
+}
+
+export const load = async ({ params = { slug: '' } }) => {
+  const { data } = await fetchCourse(undefined, params.slug);
+
   return {
     slug: params.slug,
+    course: data
   };
 };
diff --git a/src/routes/course/[slug]/+page.svelte b/src/routes/course/[slug]/+page.svelte
index 51681024..7d663fdf 100644
--- a/src/routes/course/[slug]/+page.svelte
+++ b/src/routes/course/[slug]/+page.svelte
@@ -1,39 +1,21 @@
-<script>
-  import Backdrop from '$lib/components/Backdrop/index.svelte';
-  import { Moon } from 'svelte-loading-spinners';
+<script lang="ts">
   import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
-  import { profile } from '$lib/utils/store/user';
-  import { setCourse, course } from '$lib/components/Course/store';
-  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { browser } from '$app/environment';
+  import type { Course } from '$lib/utils/types';
 
-  export let data;
+  interface Data {
+    course: Course;
+  }
+  export let data: Data;
 
-  let courseData = {};
-  let loading = false;
+  let courseData: Course;
 
-  async function triggerSetCourse(_profile) {
-    if (!browser) return;
-    loading = true;
-    const { data: _data } = await fetchCourse(undefined, data.slug);
-    setCourse(_data);
-    loading = false;
+  function setCourseData(course: Course | null) {
+    if (!course) return;
+
+    courseData = { ...course };
   }
 
-  function setCourseData(course, lessons) {
-    courseData = { ...course, lessons };
-    console.log('courseData', courseData);
-  }
-
-  $: triggerSetCourse($profile);
-  $: setCourseData($course, $lessons);
+  $: setCourseData(data.course);
 </script>
 
-{#if loading}
-  <Backdrop>
-    <Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
-  </Backdrop>
-{:else}
-  <CourseLandingPage {courseData} />
-{/if}
+<CourseLandingPage {courseData} />
diff --git a/src/routes/invite/s/[hash]/+page.svelte b/src/routes/invite/s/[hash]/+page.svelte
index 0318682b..e540c714 100644
--- a/src/routes/invite/s/[hash]/+page.svelte
+++ b/src/routes/invite/s/[hash]/+page.svelte
@@ -16,6 +16,7 @@
 
   let supabase = getSupabase();
   let loading = false;
+  let refresh = false;
 
   let disableSubmit = false;
   let formRef: HTMLFormElement;
@@ -23,6 +24,18 @@
   async function handleSubmit() {
     loading = true;
 
+    if (refresh) {
+      window.location.reload();
+      refresh = false;
+      return;
+    }
+
+    if (!$profile.id || !$profile.email) {
+      console.log('Profile not found', $profile);
+      refresh = true;
+      return;
+    }
+
     const member = {
       profile_id: $profile.id,
       group_id: data.groupId,
@@ -91,13 +104,19 @@
   bind:formRef
 >
   <div class="mt-0 w-full">
-    <h3 class="dark:text-white text-lg font-medium mt-0 mb-4 text-center">{data.name}</h3>
-    <p class="dark:text-white text-sm font-light text-center">{data.description}</p>
+    {#if refresh}
+      <p class="dark:text-white text-sm font-light text-center">
+        Something went wrong, please try again.
+      </p>
+    {:else}
+      <h3 class="dark:text-white text-lg font-medium mt-0 mb-4 text-center">{data.name}</h3>
+      <p class="dark:text-white text-sm font-light text-center">{data.description}</p>
+    {/if}
   </div>
 
   <div class="my-4 w-full flex justify-center items-center">
     <PrimaryButton
-      label="Join Course"
+      label={refresh ? 'Try again' : 'Join Course'}
       type="submit"
       isDisabled={disableSubmit || loading}
       isLoading={loading}

From 25eb5d2f9d31bd081a76d6664635f390287d0b73 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 15 Sep 2023 08:50:04 +0100
Subject: [PATCH 10/11] CLASSROOMIO-T-121: Fetch audience by org in course

---
 src/lib/utils/services/org/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/utils/services/org/index.js b/src/lib/utils/services/org/index.js
index 322b7242..5b0e28f7 100644
--- a/src/lib/utils/services/org/index.js
+++ b/src/lib/utils/services/org/index.js
@@ -125,14 +125,16 @@ export async function getOrgAudience(orgId) {
       email,
       avatar_url,
       created_at,
-      organizationmember!inner(
+      groupmember!inner(
         role_id,
-        organization_id
+        group_id:group!inner(
+          organization_id
+        )
       )
     `
     )
-    .eq('organizationmember.organization_id', orgId)
-    .eq('organizationmember.role_id', 3); // is a student, tutor is 2 and admin is 1
+    .eq('groupmember.group.organization_id', orgId)
+    .eq('groupmember.role_id', ROLE.STUDENT);
 
   console.log('data', data);
 

From a1b607b20fbda86ff9c50413010be134fa5d0d33 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 15 Sep 2023 09:22:51 +0100
Subject: [PATCH 11/11] CLASSROOMIO-T-160: Limit teachers features

---
 src/lib/components/Org/Settings/index.svelte  | 12 ++++++++----
 src/lib/components/PrimaryButton/index.svelte |  4 ++--
 src/lib/utils/store/org.ts                    |  5 +++++
 src/routes/org/[slug]/+page.svelte            |  3 ++-
 src/routes/org/[slug]/courses/+page.svelte    |  9 +++++++--
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Org/Settings/index.svelte b/src/lib/components/Org/Settings/index.svelte
index 62771d5e..fd34c9dd 100644
--- a/src/lib/components/Org/Settings/index.svelte
+++ b/src/lib/components/Org/Settings/index.svelte
@@ -8,6 +8,7 @@
   import { onMount } from 'svelte';
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
+  import { isOrgAdmin } from '$lib/utils/store/org';
 
   let selected = 0;
   let query = new URLSearchParams($page.url.search);
@@ -18,19 +19,22 @@
       key: 0,
       label: 'Profile',
       tabKey: '',
-      href: $page.url.pathname
+      href: $page.url.pathname,
+      disabled: false
     },
     {
       key: 1,
       label: 'Organization',
       tabKey: 'org',
-      href: `${$page.url.pathname}?tab=org`
+      href: `${$page.url.pathname}?tab=org`,
+      disabled: !$isOrgAdmin
     },
     {
       key: 2,
       label: 'LandingPage',
       tabKey: 'landingpage',
-      href: `${$page.url.pathname}?tab=landingpage`
+      href: `${$page.url.pathname}?tab=landingpage`,
+      disabled: !$isOrgAdmin
     }
   ];
 
@@ -59,7 +63,7 @@
 
 <Tabs autoWidth bind:selected>
   {#each tabs as tab}
-    <Tab label={tab.label} href={tab.href} />
+    <Tab label={tab.label} href={tab.href} disabled={tab.disabled} />
   {/each}
   <!-- <Tab label="Account" /> -->
   <svelte:fragment slot="content">
diff --git a/src/lib/components/PrimaryButton/index.svelte b/src/lib/components/PrimaryButton/index.svelte
index 17fb1ef0..ed0085fb 100644
--- a/src/lib/components/PrimaryButton/index.svelte
+++ b/src/lib/components/PrimaryButton/index.svelte
@@ -13,12 +13,12 @@
   export let isDisabled = false;
   export let isLoading = false;
 
-  $: isDisabled = isLoading ? true : false;
+  $: isDisabled = isLoading ? true : isDisabled;
 </script>
 
 <button
   class="{isDisabled
-    ? 'bg-opacity-25 hover:bg-opacity-25 cursor-not-allowed'
+    ? 'opacity-25 cursor-not-allowed'
     : 'cursor-pointer'} flex items-center h-auto {VARIANTS_CLASS[
     isLoading ? VARIANTS.OUTLINED : variant
   ]} {!disablePadding &&
diff --git a/src/lib/utils/store/org.ts b/src/lib/utils/store/org.ts
index 8562dc18..6a9ef8d6 100644
--- a/src/lib/utils/store/org.ts
+++ b/src/lib/utils/store/org.ts
@@ -2,6 +2,7 @@ import { writable, derived } from 'svelte/store';
 import { STEPS } from '../constants/quiz';
 import type { Writable } from 'svelte/store';
 import type { CurrentOrg, OrgTeamMember } from '../types/org';
+import { ROLE } from '$lib/utils/constants/roles';
 
 export const orgs = writable<CurrentOrg[]>([]);
 export const currentOrg: Writable<CurrentOrg> = writable({
@@ -17,6 +18,10 @@ export const currentOrg: Writable<CurrentOrg> = writable({
 });
 export const orgAudience = writable([]);
 export const orgTeam = writable<OrgTeamMember[]>([]);
+export const isOrgAdmin = derived(
+  currentOrg,
+  ($currentOrg) => parseInt($currentOrg.role_id) === ROLE.ADMIN
+);
 export const currentOrgPath = derived(currentOrg, ($currentOrg) =>
   $currentOrg.siteName ? `/org/${$currentOrg.siteName}` : ''
 );
diff --git a/src/routes/org/[slug]/+page.svelte b/src/routes/org/[slug]/+page.svelte
index b4de8525..9759e075 100644
--- a/src/routes/org/[slug]/+page.svelte
+++ b/src/routes/org/[slug]/+page.svelte
@@ -15,6 +15,7 @@
   import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { onMount } from 'svelte';
   import { Add } from 'carbon-icons-svelte';
+  import { isOrgAdmin } from '$lib/utils/store/org';
 
   export let data;
   const { orgName } = data;
@@ -201,7 +202,7 @@
         <Add size={24} />
       </PrimaryButton>
     {:else}
-      <PrimaryButton label="Create Course" onClick={createCourse} />
+      <PrimaryButton label="Create Course" onClick={createCourse} isDisabled={!$isOrgAdmin} />
     {/if}
   </div>
 
diff --git a/src/routes/org/[slug]/courses/+page.svelte b/src/routes/org/[slug]/courses/+page.svelte
index 58c09aef..ad9fc776 100644
--- a/src/routes/org/[slug]/courses/+page.svelte
+++ b/src/routes/org/[slug]/courses/+page.svelte
@@ -10,6 +10,7 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { Add } from 'carbon-icons-svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
+  import { isOrgAdmin } from '$lib/utils/store/org';
 
   export let data;
   let { allCourses, cantFetch } = data;
@@ -51,11 +52,15 @@
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Courses</h1>
       {#if $isMobile}
-        <PrimaryButton onClick={() => ($createCourseModal.open = true)}>
+        <PrimaryButton isDisabled={!$isOrgAdmin} onClick={() => ($createCourseModal.open = true)}>
           <Add size={24} />
         </PrimaryButton>
       {:else}
-        <PrimaryButton label="Create Course" onClick={() => ($createCourseModal.open = true)} />
+        <PrimaryButton
+          label="Create Course"
+          isDisabled={!$isOrgAdmin}
+          onClick={() => ($createCourseModal.open = true)}
+        />
       {/if}
     </div>