Add new org improvements

2023-09-11 11:47:30 +01:00
parent bd2f647ca1
commit 35817f44b9
22 changed files with 269 additions and 138 deletions
@@ -10,6 +10,6 @@
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M15 1.5V3C15.9946 3 16.9484 3.39509 17.6516 4.09835C18.3549 4.80161 18.75 5.75544 18.75 6.75C18.75 7.74456 18.3549 8.69839 17.6516 9.40165C16.9484 10.1049 15.9946 10.5 15 10.5V12C16.3924 12 17.7277 11.4469 18.7123 10.4623C19.6969 9.47774 20.25 8.14239 20.25 6.75C20.25 5.35761 19.6969 4.02226 18.7123 3.03769C17.7277 2.05312 16.3924 1.5 15 1.5ZM15 22.5H16.5V18.75C16.4984 17.3581 15.9447 16.0237 14.9605 15.0395C13.9763 14.0553 12.6419 13.5016 11.25 13.5H6.75C5.35811 13.5016 4.0237 14.0553 3.03949 15.0395C2.05527 16.0237 1.50163 17.3581 1.5 18.75V22.5H3V18.75C3.00117 17.7558 3.39664 16.8027 4.09964 16.0996C4.80265 15.3966 5.7558 15.0012 6.75 15H11.25C12.2442 15.0012 13.1973 15.3966 13.9004 16.0996C14.6034 16.8027 14.9988 17.7558 15 18.75V22.5ZM21 22.5H22.5V18.75C22.4985 17.3581 21.9448 16.0236 20.9606 15.0394C19.9764 14.0552 18.6419 13.5015 17.25 13.5V15C18.2442 15.0011 19.1974 15.3966 19.9004 16.0996C20.6034 16.8026 20.9989 17.7558 21 18.75V22.5ZM11.0834 3.63199C10.4667 3.21993 9.74168 3 9 3C8.00544 3 7.05161 3.39509 6.34835 4.09835C5.64509 4.80161 5.25 5.75544 5.25 6.75C5.25 7.49168 5.46994 8.2167 5.88199 8.83339C6.29405 9.45007 6.87972 9.93072 7.56494 10.2145C8.25016 10.4984 9.00416 10.5726 9.73159 10.4279C10.459 10.2833 11.1272 9.9261 11.6517 9.40165C12.1761 8.8772 12.5333 8.20902 12.6779 7.48159C12.8226 6.75416 12.7484 6.00016 12.4646 5.31494C12.1807 4.62971 11.7001 4.04404 11.0834 3.63199ZM6.08326 2.38478C6.94662 1.80791 7.96165 1.5 9 1.5C10.3924 1.5 11.7277 2.05312 12.7123 3.03769C13.6969 4.02226 14.25 5.35761 14.25 6.75C14.25 7.78835 13.9421 8.80339 13.3652 9.66674C12.7883 10.5301 11.9684 11.203 11.0091 11.6004C10.0498 11.9977 8.99418 12.1017 7.97578 11.8991C6.95738 11.6966 6.02192 11.1965 5.28769 10.4623C4.55347 9.72808 4.05345 8.79262 3.85088 7.77422C3.64831 6.75582 3.75227 5.70022 4.14963 4.74091C4.54699 3.7816 5.2199 2.96166 6.08326 2.38478Z"
-    fill="#7A797D"
+    fill="currentColor"
  />
 </svg>
@@ -8,6 +8,6 @@
 >
  <path
    d="M21.75 6H19.5V5.25C19.5 4.85218 19.342 4.47064 19.0607 4.18934C18.7794 3.90804 18.3978 3.75 18 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934 4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V6H2.25C1.85218 6 1.47064 6.15804 1.18934 6.43934C0.908035 6.72064 0.75 7.10218 0.75 7.5V9C0.75 9.99456 1.14509 10.9484 1.84835 11.6517C2.19657 11.9999 2.60997 12.2761 3.06494 12.4645C3.51991 12.653 4.00754 12.75 4.5 12.75H4.84219C5.28398 14.1501 6.12634 15.39 7.26516 16.3166C8.40398 17.2431 9.78933 17.8157 11.25 17.9634V20.25H9C8.80109 20.25 8.61032 20.329 8.46967 20.4697C8.32902 20.6103 8.25 20.8011 8.25 21C8.25 21.1989 8.32902 21.3897 8.46967 21.5303C8.61032 21.671 8.80109 21.75 9 21.75H15C15.1989 21.75 15.3897 21.671 15.5303 21.5303C15.671 21.3897 15.75 21.1989 15.75 21C15.75 20.8011 15.671 20.6103 15.5303 20.4697C15.3897 20.329 15.1989 20.25 15 20.25H12.75V17.9606C15.7444 17.6578 18.2288 15.5569 19.1325 12.75H19.5C20.4946 12.75 21.4484 12.3549 22.1516 11.6517C22.8549 10.9484 23.25 9.99456 23.25 9V7.5C23.25 7.10218 23.092 6.72064 22.8107 6.43934C22.5294 6.15804 22.1478 6 21.75 6ZM4.5 11.25C3.90326 11.25 3.33097 11.0129 2.90901 10.591C2.48705 10.169 2.25 9.59674 2.25 9V7.5H4.5V10.5C4.5 10.75 4.51219 11 4.53656 11.25H4.5ZM18 10.4156C18 13.7456 15.3291 16.4756 12.0459 16.5H12C10.4087 16.5 8.88258 15.8679 7.75736 14.7426C6.63214 13.6174 6 12.0913 6 10.5V5.25H18V10.4156ZM21.75 9C21.75 9.59674 21.5129 10.169 21.091 10.591C20.669 11.0129 20.0967 11.25 19.5 11.25H19.4531C19.4839 10.9729 19.4995 10.6944 19.5 10.4156V7.5H21.75V9Z"
-    fill="#7A797D"
+    fill="currentColor"
  />
 </svg>
@@ -10,6 +10,6 @@
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M20.9243 6.00098H22.5001V7.50098H20.9243C20.8276 7.97046 20.6412 8.41687 20.3753 8.81573L21.4928 9.93323L20.4323 10.9937L19.3148 9.87623C18.916 10.1421 18.4696 10.3284 18.0001 10.4252V12.001H16.5001V10.4252C16.0307 10.3284 15.5842 10.142 15.1854 9.87615L14.0679 10.9937L13.0074 9.93315L14.1249 8.81565C13.8591 8.41681 13.6727 7.97043 13.576 7.50098H12.0001V6.00098H13.576C13.6727 5.53149 13.8591 5.08508 14.125 4.68623L13.0075 3.56873L14.068 2.50823L15.1855 3.62573C15.5843 3.35989 16.0307 3.17351 16.5001 3.0768V1.50098H18.0001V3.0768C18.4696 3.17352 18.916 3.35993 19.3149 3.6258L20.4324 2.5083L21.4929 3.5688L20.3754 4.6863C20.6412 5.08514 20.8276 5.53152 20.9243 6.00098ZM16.0001 8.62178C16.3701 8.86902 16.8051 9.00098 17.2501 9.00098C17.8467 9.00032 18.4186 8.76306 18.8404 8.34124C19.2622 7.91943 19.4995 7.34751 19.5001 6.75098C19.5001 6.30597 19.3682 5.87095 19.1209 5.50094C18.8737 5.13093 18.5223 4.84255 18.1112 4.67225C17.7 4.50195 17.2476 4.45739 16.8112 4.54421C16.3747 4.63103 15.9738 4.84532 15.6591 5.15999C15.3445 5.47465 15.1302 5.87557 15.0434 6.31202C14.9566 6.74848 15.0011 7.20088 15.1714 7.61201C15.3417 8.02315 15.6301 8.37455 16.0001 8.62178ZM21 16.5002V12.7502H22.5V16.5002C22.5 16.8981 22.342 17.2796 22.0607 17.5609C21.7794 17.8422 21.3978 18.0002 21 18.0002H15V21.0002H18V22.5002H6V21.0002H9V18.0002H3C2.60218 18.0002 2.22064 17.8422 1.93934 17.5609C1.65804 17.2796 1.5 16.8981 1.5 16.5002V4.50024C1.5 4.10242 1.65804 3.72089 1.93934 3.43958C2.22064 3.15828 2.60218 3.00024 3 3.00024H10.5V4.50024H3V16.5002H21ZM10.5 21.0002H13.5V18.0002H10.5V21.0002Z"
-    fill="#7A797D"
+    fill="currentColor"
  />
 </svg>
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import { page } from '$app/stores';
  import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
  import LicenseDraft from 'carbon-icons-svelte/lib/LicenseDraft.svelte';
@@ -7,14 +7,13 @@
  import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
  import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
  import CommunityIcon from '$lib/components/Icons/CommunityIcon.svelte';
-  import ExerciseIcon from '$lib/components/Icons/ExerciseIcon.svelte';
  import Avatar from '$lib/components/Avatar/index.svelte';
  import { currentOrg } from '$lib/utils/store/org';
  import { profile } from '$lib/utils/store/user';
  import { NavClasses } from '$lib/utils/constants/reusableClass';
  import { menu } from '$lib/components/Org/store';

-  function isActive(pagePath, itemPath) {
+  function isActive(pagePath: string, itemPath: string) {
    const pageLinkItems = pagePath.split('/');
    const itemLinkItems = itemPath.split('/');

@@ -54,8 +53,8 @@
 <aside
  class={`${
    $menu.hidden
-      ? '-translate-x-[100%] top-[56px] md:top-0 absolute md:translate-x-0 md:relative z-[9999]'
-      : 'translate-x-0 absolute md:relative top-[56px] md:top-0 z-[9999]'
+      ? '-translate-x-[100%] top-[56px] md:top-0 absolute md:translate-x-0 md:relative z-40'
+      : 'translate-x-0 absolute md:relative top-[56px] md:top-0 z-40'
  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full`}
 >
  <div class="h-full flex flex-col">
@@ -72,7 +71,7 @@
        <TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
      {/if}

-      <OrgSelector />
+      <OrgSelector canAddOrg={false} />

      <ul class="my-5">
        {#each sideLinks as item (item.name)}
@@ -0,0 +1,146 @@
+<script lang="ts">
+  import Modal from '$lib/components/Modal/index.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { profile } from '$lib/utils/store/user';
+  import { generateSitename } from '$lib/utils/functions/org';
+  import { getOrganizations } from '$lib/utils/services/org';
+  import { blockedSubdomain } from '$lib/utils/constants/app';
+  import { newOrgModal } from '../store';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
+  import { createOrgValidation } from '$lib/utils/functions/validator';
+
+  type Error = {
+    orgName: string;
+    siteName: string;
+  };
+  let loading = false;
+  let orgName = '';
+  let siteName = '';
+
+  let errors: Error = {
+    orgName: '',
+    siteName: ''
+  };
+
+  function resetForm() {
+    orgName = '';
+    siteName = '';
+    loading = false;
+
+    errors = {
+      orgName: '',
+      siteName: ''
+    };
+  }
+
+  async function createNewOrg() {
+    errors = createOrgValidation({
+      orgName,
+      siteName
+    }) as Error;
+
+    if (Object.values(errors).length) {
+      loading = false;
+      return;
+    }
+    // Validate if domain is among our seculeded subdomains
+    if (blockedSubdomain.includes(siteName || '')) {
+      errors.siteName = 'Sitename already exists.';
+      loading = false;
+      return;
+    }
+
+    const { data: org, error } = await supabase
+      .from('organization')
+      .insert({
+        name: orgName,
+        siteName: siteName
+      })
+      .select();
+    console.log('Create organisation', org);
+
+    if (error) {
+      console.log('Error: create organisation', error);
+      errors.siteName = 'Sitename already exists.';
+      loading = false;
+      return;
+    }
+
+    if (Array.isArray(org) && org.length) {
+      const orgData = org[0];
+      const { data, error } = await supabase
+        .from('organizationmember')
+        .insert({
+          organization_id: orgData.id,
+          profile_id: $profile.id,
+          role_id: 1
+        })
+        .select();
+
+      console.log('Create organisation member', data);
+
+      if (error) {
+        console.log('Error: create organisation member', error);
+        errors.siteName =
+          'Something went wrong while creating this organization. Please reload and try again';
+
+        // Delete organization so it can be recreated.
+        await supabase.from('organization').delete().match({ siteName });
+        loading = false;
+        return;
+      }
+
+      $snackbarStore.open = true;
+      $snackbarStore.message = 'Org created Successfully';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+
+      await getOrganizations($profile.id);
+
+      resetForm();
+
+      $newOrgModal.open = false;
+    }
+  }
+
+  $: siteName = generateSitename(orgName);
+</script>
+
+<Modal
+  onClose={() => ($newOrgModal.open = false)}
+  bind:open={$newOrgModal.open}
+  width="w-96"
+  modalHeading="Create Organization"
+>
+  <form on:submit|preventDefault={createNewOrg} class="px-2">
+    <TextField
+      label="Name of Organization"
+      bind:value={orgName}
+      autoFocus={true}
+      placeholder="e.g Pepsi Co"
+      className="mb-4"
+      isRequired={true}
+      errorMessage={errors.orgName}
+      autoComplete={false}
+    />
+    <!-- Org Site Name -->
+    <TextField
+      label="Organisation Site name"
+      helperMessage={`https://${siteName || ''}.classroomio.com`}
+      bind:value={siteName}
+      name="sitename"
+      type="text"
+      placeholder="e.g edforall"
+      className="mb-5 w-full"
+      labelClassName="text-lg font-normal"
+      errorMessage={errors.siteName}
+      isRequired={true}
+    />
+
+    <div class="mt-5 flex items-center flex-row-reverse">
+      <PrimaryButton className="px-6 py-3" label="Create" type="submit" isLoading={loading} />
+    </div>
+  </form>
+</Modal>
@@ -270,12 +270,14 @@
            </p>
          </div>
        </div>
-        <div class="cards-container my-4 mx-2">
-          {#if $courseMetaDeta.isLoading}
+        {#if $courseMetaDeta.isLoading}
+          <div class="cards-container my-4 mx-2">
            <CardLoader />
            <CardLoader />
            <CardLoader />
-          {:else}
+          </div>
+        {:else if $courses.length > 0}
+          <div class="cards-container my-4 mx-2">
            {#each $courses.slice(0, viewAll ? $courses.length : 3) as courseData}
              <Card
                id={courseData.id}
@@ -290,17 +292,17 @@
                totalLessons={get(courseData, 'lessons[0].count', 0)}
                isOnLandingPage={true}
              />
-            {:else}
-              <Box>
-                <CoursesEmptyIcon />
-                <h3 class="dark:text-white text-2xl my-5">No Course Published</h3>
-                <p class="dark:text-white w-1/3 text-center">
-                  We've got great courses coming your way, stay tuned!!!
-                </p>
-              </Box>
            {/each}
-          {/if}
-        </div>
+          </div>
+        {:else}
+          <Box>
+            <CoursesEmptyIcon />
+            <h3 class="dark:text-white text-2xl my-5">No Course Published</h3>
+            <p class="dark:text-white w-1/3 text-center">
+              We've got great courses coming your way, stay tuned!!!
+            </p>
+          </Box>
+        {/if}

        {#if $courses.length > 3}
          <div class="w-full flex justify-center">
@@ -74,16 +74,16 @@ export let landingPageSettings: Writable<OrgLandingPageJson> = writable({
    },
    video: {
      show: true,
-      link: 'https://www.youtube.com/watch?v=bbVZo4Yw7pI'
+      link: 'https://www.youtube.com/watch?v=qqAYW7uxErI'
    },
-    show: false
+    show: true
  },
  aboutUs: {
    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: '',
-    show: false
+    show: true
  },
  courses: {
    title: 'Explore our',
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import { page } from '$app/stores';
  import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
  import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
@@ -43,7 +43,7 @@
    }
  ];

-  function isActive(pagePath, itemPath) {
+  function isActive(pagePath: string, itemPath: string) {
    const pageLinkItems = pagePath.split('/');
    const itemLinkItems = itemPath.split('/');

@@ -61,8 +61,8 @@
 <aside
  class={`${
    $menu.hidden
-      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
-      : 'translate-x-0 absolute md:relative z-[9999]'
+      ? '-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)] md:h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
  <div class="h-full flex flex-col">
@@ -97,13 +97,13 @@
                : 'dark:text-white'}"
            >
              {#if menuItem.path === ''}
-                <HomeIcon color="#7A797D" />
+                <HomeIcon />
              {:else if menuItem.path === '/courses'}
-                <CourseIcon color="#7A797D" />
+                <CourseIcon />
              {:else if menuItem.path === '/site'}
                <SiteSettingsIcon />
              {:else if menuItem.path === '/community'}
-                <ForumIcon size={24} class="carbon-icon dark:text-white fill-[#7A797D]" />
+                <ForumIcon size={24} class="carbon-icon dark:fill-[#fff] fill-[#000]" />
              {:else if menuItem.path === '/quiz'}
                <QuizIcon />
              {:else if menuItem.path === '/audience'}
@@ -3,3 +3,7 @@ import { writable } from 'svelte/store';
 export const menu = writable({
  hidden: true
 });
+
+export const newOrgModal = writable({
+  open: false
+});
@@ -1,28 +1,19 @@
-<script>
+<script lang="ts">
  import { Popover, SkeletonText } from 'carbon-components-svelte';
  import CaretSortIcon from 'carbon-icons-svelte/lib/CaretSort.svelte';
  import OrgSelectorItem from './OrgSelectorItem.svelte';
-  import Modal from '../Modal/index.svelte';
-  import TextField from '../Form/TextField.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, orgs, currentOrgPath } from '$lib/utils/store/org';
+  import { goto } from '$app/navigation';
+  import { newOrgModal } from '$lib/components/Org/store';

+  export let canAddOrg = true;
  let open = false;
-  let openAddOrg = false;
-  let loading = false;
-  let orgName = '';
-
-  const IS_FEATURE_ENABLED = false;

  function handleAddOrg() {
-    if (IS_FEATURE_ENABLED) {
-      console.log('add org modal');
-      open = false;
-      openAddOrg = true;
-    }
+    console.log('add org modal');
+    open = false;
+    $newOrgModal.open = true;
  }
-
-  function createNewOrg() {}
 </script>

 <div class="mt-5 relative" data-outline>
@@ -44,51 +35,25 @@
      <SkeletonText style="width: 100%; height: 100%;" />
    </div>
  {/if}
-
-  <Popover bind:open closeOnOutsideClick align="bottom-left">
-    <OrgSelectorItem
-      size="sm"
-      active={true}
-      avatarText={$currentOrg.shortName}
-      text={$currentOrg.name}
-      hasDivider={true}
-      onClick={() => null}
-    />
-    <OrgSelectorItem
-      size=""
-      text=" + Add Organization"
-      onClick={handleAddOrg}
-      disabled={!IS_FEATURE_ENABLED}
-    />
-  </Popover>
-</div>
-
-{#if openAddOrg}
-  <Modal
-    onClose={() => (openAddOrg = false)}
-    bind:open={openAddOrg}
-    width="w-96"
-    modalHeading="Create Organization"
-  >
-    <form on:submit|preventDefault={createNewOrg} class="px-2">
-      <TextField
-        label="Name of Organization"
-        bind:value={orgName}
-        autoFocus={true}
-        placeholder="e.g Pepsi Co"
-        className="mb-4"
-        isRequired={true}
-        autoComplete={false}
-      />
-
-      <div class="mt-5 flex items-center flex-row-reverse">
-        <PrimaryButton
-          className="px-6 py-3"
-          label="Create Organization"
-          type="submit"
-          isLoading={loading}
+  {#if canAddOrg}
+    <Popover bind:open closeOnOutsideClick align="bottom-left">
+      {#each $orgs as org}
+        <OrgSelectorItem
+          size="sm"
+          active={$currentOrg.shortName === org.shortName}
+          avatar={org.avatar_url}
+          avatarText={org.shortName}
+          text={org.name}
+          hasDivider={true}
+          onClick={() => {
+            currentOrg.set(org);
+            goto($currentOrgPath);
+            open = false;
+          }}
        />
-      </div>
-    </form>
-  </Modal>
-{/if}
+      {/each}
+
+      <OrgSelectorItem size="" text=" + Add Organization" onClick={handleAddOrg} />
+    </Popover>
+  {/if}
+</div>
@@ -1,13 +1,15 @@
 <script>
+  import Avatar from '$lib/components/Avatar/index.svelte';
  import TextChip from '../Chip/Text.svelte';
  import ComingSoon from '../ComingSoon/index.svelte';

-  export let size;
+  export let size = '';
  export let hasDivider = false;
  export let active = false;
+  export let avatar = '';
  export let avatarText = '';
  export let text = '';
-  export let onClick;
+  export let onClick = () => {};
  export let disabled = false;
 </script>

@@ -17,7 +19,16 @@
      'border-b border-gray-100'} {active && 'bg-primary-100 dark:bg-gray-500'}"
    on:click={onClick}
  >
-    {#if avatarText}
+    {#if avatar}
+      <Avatar
+        src={avatar}
+        name={text}
+        shape="rounded-md"
+        width="w-7"
+        height="h-7"
+        className="mr-2"
+      />
+    {:else if avatarText}
      <TextChip
        value={avatarText}
        className="mr-2 bg-primary-200 font-bold dark:bg-gray-600"
@@ -22,7 +22,6 @@
 <style>
  .root {
    overflow-y: auto;
-    overflow-x: hidden;
    height: calc(100vh - 127px);
  }
  .head {
@@ -1,5 +0,0 @@
-export function genQuizPin() {
-  var minm = 100000;
-  var maxm = 999999;
-  return Math.floor(Math.random() * (maxm - minm + 1)) + minm;
-}
@@ -0,0 +1,12 @@
+export function genQuizPin(): number {
+  var minm = 100000;
+  var maxm = 999999;
+  return Math.floor(Math.random() * (maxm - minm + 1)) + minm;
+}
+
+export function generateSitename(orgName: string): string {
+  return orgName
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-zA-Z0-9-]/g, '');
+}
@@ -1,4 +1,3 @@
-import get from 'lodash/get';
 import isNumber from 'lodash/isNumber';
 import z from 'zod';
 import { validateEmail } from './validateEmail';
@@ -161,6 +160,22 @@ export const onboardingValidation = (fields = {}, step) => {
  return processErrors(error);
 };

+export const createOrgValidation = (fields = {}) => {
+  const schema = z.object({
+    orgName: z.string().min(5, {
+      message: 'Must be 5 or more characters long',
+      invalid_type_error: 'Must not be empty'
+    }),
+    siteName: z.string().min(5, {
+      message: 'Must be 5 or more characters long',
+      invalid_type_error: 'Must not be empty'
+    })
+  });
+  const { error } = schema.safeParse(fields);
+
+  return processErrors(error);
+};
+
 export const createQuizValidation = (fields = {}) => {
  const { error } = createQuizValidationSchema.safeParse(fields);

@@ -72,21 +72,6 @@ export async function fetchGroup(groupId: Group['id']) {
  };
 }

-export async function setProfileIdOfGroupMember(email: string, profileId: string) {
-  const { data, error } = await supabase
-    .from('groupmember')
-    .update({
-      email: null,
-      profile_id: profileId
-    })
-    .match({ email: email });
-
-  return {
-    data,
-    error
-  };
-}
-
 export async function uploadAvatar(courseId: string, avatar: string) {
  const filename = `course/${courseId + Date.now()}.webp`;
  let logo;
@@ -57,17 +57,20 @@ export async function getOrganizations(userId) {
      id,
      profile_id,
      role_id,
+      created_at,
      organization!organizationmember_organization_id_fkey (
        id,
        name,
        siteName,
        avatar_url,
        landingpage,
-        theme
+        theme,
+        created_at
      )
    `
    )
-    .eq('profile_id', userId);
+    .eq('profile_id', userId)
+    .order('id', { ascending: false });

  const orgsArray = [];

@@ -3,7 +3,7 @@ import { STEPS } from '../constants/quiz';
 import type { Writable } from 'svelte/store';
 import type { CurrentOrg, OrgTeamMember } from '../types/org';

-export const orgs = writable([]);
+export const orgs = writable<CurrentOrg[]>([]);
 export const currentOrg: Writable<CurrentOrg> = writable({
  id: '',
  name: '',
@@ -30,14 +30,15 @@
  import { getSupabase } from '$lib/utils/functions/supabase';
  import { isMobile } from '$lib/utils/store/useMobile';
  import { ROUTE } from '$lib/utils/constants/routes';
-  import { getOrganizations, getCurrentOrg } from '$lib/utils/services/org';
+  import { getOrganizations } from '$lib/utils/services/org';
  import { toggleBodyByMode } from '$lib/utils/functions/app';
  import { appStore } from '$lib/utils/store/app';
  import { currentOrg } from '$lib/utils/store/org';
  import { setTheme } from '$lib/utils/functions/theme';
+  import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
+  import AddOrgModal from '$lib/components/Org/AddOrgModal/AddOrgModal.svelte';

  import '../app.postcss';
-  import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';

  export let data;

@@ -171,6 +172,8 @@
        // Not on invite page or no org, go to onboarding
        if (isEmpty(orgRes.orgs) && !path.includes('invite')) {
          goto(ROUTE.ONBOARDING);
+        } else if (params.has('redirect')) {
+          goto(params.get('redirect') || '');
        } else if (
          ['login', 'signup', 'onboarding', 'invite'].some((r) => path.includes(r)) ||
          path === '' // for home page
@@ -220,7 +223,7 @@
      !isPublicRoute($page.url.pathname)
    ) {
      console.log('No auth token and is not a public route, redirect to login', path);
-      return goto('/login');
+      return goto('/login?redirect=/' + path);
    }

    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
@@ -309,6 +312,7 @@

    <div class="flex justify-between">
      {#if isOrgPage($page.url.pathname)}
+        <AddOrgModal />
        <div class="org-root w-full flex items-center justify-between">
          {#if !isQuizPage($page.url.pathname)}
            <OrgSideBar />
@@ -12,6 +12,7 @@
  import { getOrganizations } from '$lib/utils/services/org';
  import { sendWelcomeEmail } from './utils';
  import { currentOrg } from '$lib/utils/store/org';
+  import { generateSitename } from '$lib/utils/functions/org';

  interface OnboardingField {
    fullname?: string;
@@ -196,10 +197,7 @@
  };

  $: progress = Math.round((step / maxSteps) * 100);
-  $: fields.siteName = fields.siteName
-    ?.toLowerCase()
-    ?.replace(/\s+/g, '-')
-    ?.replace(/[^a-zA-Z0-9-]/g, '');
+  $: fields.siteName = generateSitename(fields.siteName || '');
  $: setOrgSiteName(fields.orgName, isSiteNameTouched);

  $: {
@@ -7,7 +7,6 @@
  import NewCourseModal from '$lib/components/Courses/components/NewCourseModal/index.svelte';
  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
  import { courses, createCourseModal, courseMetaDeta } from '$lib/components/Courses/store';
-  import { setProfileIdOfGroupMember } from '$lib/utils/services/courses';
  import { currentOrg } from '$lib/utils/store/org';
  import { Add } from 'carbon-icons-svelte';
  import { isMobile } from '$lib/utils/store/useMobile';
@@ -25,8 +24,6 @@
    if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length && orgId) {
      $courseMetaDeta.isLoading = true;

-      const updatedProfile = await setProfileIdOfGroupMember($profile.email, userId);
-      console.log(`updatedProfile`, updatedProfile);
      const coursesResult = await fetchCourses(userId, orgId);
      console.log(`coursesResult`, coursesResult);

@@ -1,4 +0,0 @@
-{
-  "outputDirectory": "__sapper__/export",
-  "public": true
-}