feat: dashboard billing (#193)

* feat: move plans into sharable json

* remove unused code

* update pnpm lock

* update plans.json

* implement early adopter pricing

* docs: update meta title and description

* Finished the UI for upgrading plans

* Updated the pricing plans

* Updated the cards ui

* use relative import

* improve styling of upgrade plan card

* styling improvements, lemonsqueezy setup

* trigger lemonsqueezy payment and add webhook

* update pnpm lock

* add logout route

* feat: complete billing functionality

* generate lock file

* make crypto false on browser

* feat: adding upgrade prompts to org

* chore: add upgrade icon to upload video

* feat: add upgrade prompt to certificate and settings

* feat: implement onboarding setup page (#229)

* working on the onboarding setup

* working on the onboarding page

* Almost done with the onboarding UI

* finished the UI of the onBoarding setup

* finished the UI of the onBoarding setup

* Implementing the functions to carryout the logic of updating the UI onmount if a user has carried out a certain step or not

* Implementing the functions to carryout the logic of updating the UI onmount if a user has carried out a certain step or not

* making some chnages

* finished the onBoarding task

* updated some logic

* Removed the uneeded svg from the static folder

* fixed isCoursePublished not returning a boolean

* improved the setup link protection

* chore: make menuItems reactive

* improve formatting

* format supabase queries

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

* revamp setup

* improve the upgrade experience

* migration

* feat: add lemonsqueezy customer portal

---------

Co-authored-by: emmanuel <chifez1@gmail.com>

apps/dashboard/src/routes/+layout.svelte

@@ -34,6 +34,7 @@
   import shouldRedirectOnAuth from '$lib/utils/functions/routes/shouldRedirectOnAuth';
   import { identifyPosthogUser, initPosthog } from '$lib/utils/services/posthog';
   import { initSentry, setSentryUser } from '$lib/utils/services/sentry';
+  import UpgradeModal from '$lib/components/Upgrade/Modal.svelte';
 
   import '../app.postcss';
 
@@ -281,6 +282,7 @@
 
 <Theme bind:theme={carbonTheme} />
 
+<UpgradeModal />
 <Snackbar />
 
 {#if data.skipAuth}

apps/dashboard/src/routes/api/completion/customprompt/+server.js

@@ -1,6 +1,6 @@
-import { Configuration, OpenAIApi } from 'openai-edge';
-import { OpenAIStream, StreamingTextResponse } from 'ai';
 import { OPENAI_API_KEY } from '$env/static/private';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import { Configuration, OpenAIApi } from 'openai-edge';
 
 // Create an OpenAI API client (that's edge friendly!)
 const openAIConfig = new Configuration({

apps/dashboard/src/routes/api/lmz/subscribe/+server.js

@@ -0,0 +1,38 @@
+import { json } from '@sveltejs/kit';
+import { createCheckout } from '@lemonsqueezy/lemonsqueezy.js';
+import { LEMON_SQUEEZY_STORE_ID } from '$env/static/private';
+import { configureLemonSqueezy } from '$lib/utils/services/lemonsqueezy';
+
+export async function POST({ request }) {
+  const { email, name, orgId, productId, triggeredBy } = await request.json();
+
+  await configureLemonSqueezy();
+
+  if (!productId) {
+    return json({ success: false, message: 'Product Id is required' }, { status: 400 });
+  }
+
+  const checkoutData = {
+    email: email,
+    name: name,
+    custom: {
+      org_id: orgId,
+      triggered_by: `${triggeredBy}`
+    }
+  };
+
+  console.log({ checkoutData });
+
+  const { data } = await createCheckout(LEMON_SQUEEZY_STORE_ID, productId, {
+    checkoutData
+  });
+
+  const checkoutURL = data?.data.attributes.url;
+
+  console.log({ checkoutURL });
+
+  return json({
+    success: true,
+    checkoutURL
+  });
+}

apps/dashboard/src/routes/api/lmz/subscriptions/+server.js

@@ -0,0 +1,23 @@
+import { json } from '@sveltejs/kit';
+import { getSubscription } from '@lemonsqueezy/lemonsqueezy.js';
+import { configureLemonSqueezy } from '$lib/utils/services/lemonsqueezy';
+
+export async function GET({ url }) {
+  const subscriptionId = url.searchParams.get('subscriptionId');
+
+  await configureLemonSqueezy();
+
+  if (!subscriptionId) {
+    return json({ success: false, message: 'Subscription id is required' }, { status: 400 });
+  }
+
+  const response = await getSubscription(subscriptionId);
+  const customerPortal = response?.data?.data?.attributes?.urls?.customer_portal;
+
+  console.log({ customerPortal });
+
+  return json({
+    success: true,
+    customerPortal
+  });
+}

apps/dashboard/src/routes/api/lmz/webhook/+server.js

@@ -0,0 +1,77 @@
+import { json } from '@sveltejs/kit';
+import crypto from 'crypto';
+import { LEMON_SQUEEZY_WEBHOOK_SECRET } from '$env/static/private';
+import { createOrgPlan, cancelOrgPlan } from '$lib/utils/services/org';
+import { PLAN } from 'shared-constants/src/plans/constants';
+
+export async function POST({ request }) {
+  try {
+    // Catch the event type
+    const clonedReq = request.clone();
+    const eventType = request.headers.get('X-Event-Name');
+    const body = await request.json();
+
+    // Check signature
+    const secret = LEMON_SQUEEZY_WEBHOOK_SECRET;
+    const hmac = crypto.createHmac('sha256', secret);
+    const digest = Buffer.from(hmac.update(await clonedReq.text()).digest('hex'), 'utf8');
+    const signature = Buffer.from(request.headers.get('X-Signature') || '', 'utf8');
+
+    if (!crypto.timingSafeEqual(digest, signature)) {
+      throw new Error('Invalid signature.');
+    }
+
+    console.log(body);
+
+    // Logic according to event
+    if (eventType === 'subscription_created' || eventType === 'subscription_resumed') {
+      const orgId = body.meta.custom_data.org_id;
+      const triggeredBy = body.meta.custom_data.triggered_by;
+      const isSuccessful = body.data.attributes.status === 'active';
+
+      console.log({
+        orgId,
+        triggeredBy,
+        isSuccessful
+      });
+
+      if (isSuccessful && orgId) {
+        const { data, error } = await createOrgPlan({
+          orgId,
+          triggeredBy: parseInt(triggeredBy),
+          planName: PLAN.EARLY_ADOPTER,
+          data: body.data
+        });
+
+        if (error) console.error('Error creating org plan', error);
+        console.log('Create plan', data);
+      }
+    }
+
+    if (
+      ['subscription_cancelled', 'subscription_expired', 'subscription_payment_refunded'].includes(
+        `${eventType}`
+      )
+    ) {
+      const orgId = body.meta.custom_data.org_id;
+      const { data, error } = await cancelOrgPlan({
+        orgId,
+        planName: PLAN.EARLY_ADOPTER
+      });
+
+      if (error) console.error('Error canceling org plan', error);
+      console.log('Cancel plan', data);
+    }
+
+    return json({ message: 'Webhook received' });
+  } catch (err) {
+    console.error(err);
+    return json({ message: 'Server error' }, { status: 500 });
+  }
+}
+
+export function GET() {
+  return json({
+    success: true
+  });
+}

apps/dashboard/src/routes/api/stripe/webhook/+server.js

@@ -0,0 +1,57 @@
+import { json } from '@sveltejs/kit';
+
+export async function POST({ request }) {
+  try {
+    // Catch the event type
+    // const clonedReq = request.clone();
+    // const eventType = request.headers.get('X-Event-Name');
+    const body = await request.json();
+
+    // // Check signature
+    // const secret = LEMON_SQUEEZY_WEBHOOK_SECRET;
+    // const hmac = crypto.createHmac('sha256', secret);
+    // const digest = Buffer.from(hmac.update(await clonedReq.text()).digest('hex'), 'utf8');
+    // const signature = Buffer.from(request.headers.get('X-Signature') || '', 'utf8');
+
+    // if (!crypto.timingSafeEqual(digest, signature)) {
+    //   throw new Error('Invalid signature.');
+    // }
+
+    console.log(body);
+
+    // Logic according to event
+    // if (eventType === 'order_created') {
+    //   const orgId = body.meta.custom_data.org_id;
+    //   const triggeredBy = body.meta.custom_data.triggered_by;
+    //   const isSuccessful = body.data.attributes.status === 'paid';
+
+    //   console.log({
+    //     orgId,
+    //     triggeredBy,
+    //     isSuccessful
+    //   });
+
+    //   if (isSuccessful) {
+    //     const { error } = await createOrgPlan({
+    //       orgId,
+    //       triggeredBy,
+    //       planName: PLAN.EARLY_ADOPTER,
+    //       data: body.data
+    //     });
+
+    //     if (error) console.error('Error creating org plan', error);
+    //   }
+    // }
+
+    return json({ message: 'Webhook received' });
+  } catch (err) {
+    console.error(err);
+    return json({ message: 'Server error' }, { status: 500 });
+  }
+}
+
+export function GET() {
+  return json({
+    success: true
+  });
+}

apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte

@@ -3,7 +3,6 @@
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import { setCourse, course } from '$lib/components/Course/store';
   import IssueCertificateModal from '$lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte';
   // import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
   import Design from '$lib/components/Course/components/Ceritficate/Design.svelte';
@@ -40,7 +39,7 @@
       <StudentCertificate />
     </RoleBasedSecurity>
 
-    <!-- <Tabs autoWidth class="border-b border-gray-200">
+    <!-- <Tabs autoWidth class="border-b border-gray-200 dark:border-neutral-600">
       <Tab label="Design" />
       <Tab label="Reports" />
       <svelte:fragment slot="content">

apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte

@@ -121,7 +121,7 @@
       >
         {#each $lessons as lesson (lesson.id)}
           <div
-            class="relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 border-gray-200 p-5 dark:border-neutral-700 dark:bg-neutral-800"
+            class="relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 border-gray-200 dark:border-neutral-600 p-5 dark:border-neutral-700 dark:bg-neutral-800"
           >
             <!-- Number Chip -->
             <div class="mr-5">

apps/dashboard/src/routes/logout/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { logout } from '$lib/utils/functions/logout';
+
+  onMount(() => {
+    logout();
+  });
+</script>
+
+<div class="app-background w-full min-h-screen flex items-center justify-center">
+  <div>Logging you out...</div>
+</div>

apps/dashboard/src/routes/org/[slug]/+layout.server.ts

@@ -0,0 +1,5 @@
+export const load = ({ params = { slug: '' } }) => {
+  return {
+    orgName: params.slug
+  };
+};

apps/dashboard/src/routes/org/[slug]/+layout.svelte

@@ -4,6 +4,15 @@
   import { isQuizPage } from '$lib/utils/functions/app';
   import OrgSideBar from '$lib/components/Org/SideBar.svelte';
   import VerifyEmailModal from '$lib/components/Org/VerifyEmail/VerifyEmailModal.svelte';
+  import Box from '$lib/components/Box/index.svelte';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { goto } from '$app/navigation';
+
+  export let data;
+
+  $: if ($currentOrg.id && data.orgName === '*') {
+    goto(`/org/${$currentOrg.siteName}`);
+  }
 </script>
 
 <AddOrgModal />
@@ -13,6 +22,10 @@
     <OrgSideBar />
   {/if}
   <div class="org-slot bg-white dark:bg-black w-full">
-    <slot />
+    {#if data.orgName === '*'}
+      <Box>Taking you to your organization...</Box>
+    {:else}
+      <slot />
+    {/if}
   </div>
 </div>

apps/dashboard/src/routes/org/[slug]/+page.svelte

@@ -184,7 +184,7 @@
 
 <WelcomeModal />
 
-<div class="py-10 px-5 w-full max-w-7xl mx-auto">
+<div class="py-10 px-5 w-full max-w-5xl md:mx-auto">
   <div class="flex items-center justify-between mb-10">
     <h1 class="dark:text-white text-2xl md:text-3xl font-bold mb-3">
       {getGreeting()}
@@ -232,7 +232,7 @@
   <!-- <div class="flex items-start flex-wrap">
     {#each boxes as box}
       <div
-        class="w-full md:w-[246px] h-[165px] flex flex-col rounded border border-gray-200 justify-center px-5 md:mr-5 mb-5"
+        class="w-full md:w-[246px] h-[165px] flex flex-col rounded border border-gray-200 dark:border-neutral-600 justify-center px-5 md:mr-5 mb-5"
       >
         <p class="dark:text-white mb-2 text-sm">{box.label}</p>
         <p class="dark:text-white text-xl font-bold">{box.value}</p>
@@ -245,7 +245,7 @@
     <div class="w-full xl:w-auto container">
       <p class="dark:text-white font-bold mt-7 mb-4">Your Schedule</p>
       <div
-        class="rounded border border-gray-200 gap-3 flex flex-col md:flex-row items-start px-2 md:px-5 py-5 w-full"
+        class="rounded border border-gray-200 dark:border-neutral-600 gap-3 flex flex-col md:flex-row items-start px-2 md:px-5 py-5 w-full"
       >
         {#if !$isMobile}
           <div id="calendar" class="flex justify-center mt-5 w-2/5 min-w-[250px]">
@@ -326,10 +326,10 @@
     <!-- <div class="w-full">
       <p class="dark:text-white font-bold mb-7">Your Activities</p>
       <div
-        class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5 w-full"
+        class="rounded border border-gray-200 dark:border-neutral-600 md:min-w-[450px] activities-box py-4 px-2 md:px-5 w-full"
       >
         {#each activities as activity}
-          <div class="flex mb-3 pb-3 border-b border-gray-200">
+          <div class="flex mb-3 pb-3 border-b border-gray-200 dark:border-neutral-600">
             <Avatar src={activity.avatar} name="avatar" />
             <div class="ml-2 flex flex-col xl:flex-row">
               <div class="mr-2">

apps/dashboard/src/routes/org/[slug]/audience/+page.svelte

@@ -1,8 +1,12 @@
 <script>
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import Audience from '$lib/components/Org/Audience/index.svelte';
+  import { orgAudience, currentOrgPlan, currentOrgMaxAudience } from '$lib/utils/store/org';
+  import { PLAN } from 'shared-constants/src/plans/constants';
+  import UpgradeBanner from '$lib/components/Upgrade/Banner.svelte';
 
   let isLoading = false;
+
   function exportAudience() {
     isLoading = true;
     alert('This feature is coming soon');
@@ -14,13 +18,23 @@
   <title>Audience - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-6xl mx-auto">
+<section class="w-full max-w-4xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Audience</h1>
+      <div class="flex items-end">
+        <h1 class="dark:text-white text-2xl md:text-3xl font-bold m-0">Audience</h1>
+        {#if $currentOrgPlan?.plan_name !== PLAN.ENTERPRISE}
+          <span class="ml-2">
+            ({$orgAudience.length} / {$currentOrgMaxAudience})
+          </span>
+        {/if}
+      </div>
       <PrimaryButton label="Export" onClick={exportAudience} isDisabled={isLoading} {isLoading} />
     </div>
 
+    {#if $orgAudience.length >= $currentOrgMaxAudience}
+      <UpgradeBanner>Upgrade your plan to invite more students</UpgradeBanner>
+    {/if}
     <Audience />
   </div>
 </section>

apps/dashboard/src/routes/org/[slug]/courses/+page.svelte

@@ -13,6 +13,7 @@
   import { isOrgAdmin } from '$lib/utils/store/org';
   import type { Course } from '$lib/utils/types';
   import { browser } from '$app/environment';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
 
   export let data;
   let { cantFetch } = data;
@@ -93,6 +94,7 @@
       {:else}
         <PrimaryButton
           label="Create Course"
+          variant={VARIANTS.CONTAINED_DARK}
           isDisabled={!$isOrgAdmin}
           onClick={() => ($createCourseModal.open = true)}
         />

apps/dashboard/src/routes/org/[slug]/settings/+page.svelte

@@ -7,7 +7,7 @@
   <title>Settings - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-6xl mx-auto">
+<section class="w-full md:max-w-4xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Settings</h1>

apps/dashboard/src/routes/org/[slug]/settings/domains/+page.svelte

@@ -7,7 +7,7 @@
   <title>Custom domain - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-6xl mx-auto">
+<section class="w-full md:max-w-4xl mx-auto">
   <div class="py-10 px-3 md:px-5">
     <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
       >Back to Settings</a

apps/dashboard/src/routes/org/[slug]/settings/teams/+page.svelte

@@ -1,13 +1,14 @@
 <script>
   import TeamMembers from '$lib/components/Org/Settings/TeamMembers.svelte';
   import { currentOrgPath } from '$lib/utils/store/org';
+  import UpgradeBanner from '$lib/components/Upgrade/Banner.svelte';
 </script>
 
 <svelte:head>
   <title>Teams - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-6xl mx-auto">
+<section class="w-full md:max-w-4xl mx-auto">
   <div class="py-10 px-3 md:px-5">
     <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
       >Back to Settings</a
@@ -16,6 +17,7 @@
       <h1 class="dark:text-white text-3xl font-bold">Team members</h1>
     </div>
 
+    <UpgradeBanner>Upgrade your plan to add team members</UpgradeBanner>
     <TeamMembers />
   </div>
 </section>

apps/dashboard/src/routes/org/[slug]/setup/+page.svelte

@@ -0,0 +1,128 @@
+<script>
+  import Chip from '$lib/components/Chip/Text.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import StepDoneIcon from '$lib/components/Icons/StepDoneIcon.svelte';
+  import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
+
+  import { currentOrg } from '$lib/utils/store/org';
+  import { goto } from '$app/navigation';
+  import { snackbar } from '$lib/components/Snackbar/store.js';
+  import { profile } from '$lib/utils/store/user';
+
+  export let data;
+  let setupList = data.setup || [];
+  let completed = 0;
+
+  const StepsEnum = {
+    UPDATE_PROFILE: 'Upload a profile picture and update username',
+    UPDATE_ORG_PROFILE: 'Update organisation profile picture',
+    CREATE_COURSE: 'Create Course',
+    CREATE_LESSON: 'Create a lesson',
+    CREATE_EXERCISE: 'Create an exercise',
+    PUBLISH_COURSE: 'Publish a course'
+  };
+
+  const isCompleted = (id) => {
+    return setupList?.find((c) => c.id === id).is_completed == true;
+  };
+
+  const handleClick = (title) => {
+    switch (title) {
+      case StepsEnum.CREATE_COURSE:
+        goto(`/org/${$currentOrg.siteName}/courses?create=true`);
+        break;
+
+      case StepsEnum.CREATE_LESSON:
+        if (isCompleted('course')) {
+          const courseId = data?.courses[0].id;
+          goto(`/courses/${courseId}/lessons`);
+        } else {
+          snackbar.info('You need to create a course');
+        }
+        break;
+
+      case StepsEnum.CREATE_EXERCISE:
+        if (isCompleted('lesson')) {
+          const courseId = data?.courses[0].id;
+          const lessonId = data?.lessons[0].id;
+          goto(`/courses/${courseId}/lessons/${lessonId}`);
+        } else {
+          snackbar.info('You Need to Create a lesson');
+        }
+        break;
+
+      case StepsEnum.PUBLISH_COURSE:
+        if (isCompleted('course')) {
+          const courseId = data?.courses[0].id;
+          goto(`/courses/${courseId}/settings`);
+        } else {
+          snackbar.info('You need to create a course');
+        }
+        break;
+
+      case StepsEnum.UPDATE_PROFILE:
+        goto(`/org/${$currentOrg.siteName}/settings`);
+        break;
+
+      case StepsEnum.UPDATE_ORG_PROFILE:
+        goto(`/org/${$currentOrg.siteName}/settings?tab=org`);
+        break;
+    }
+  };
+
+  $: setupList = setupList.map((item) => {
+    if (item.id === 'profile') {
+      item.is_completed = !$profile.avatar_url.includes('avatars/avatar.png');
+    }
+    return item;
+  });
+
+  $: completed = setupList.filter((list) => list.is_completed).length;
+</script>
+
+<section class="w-full md:max-w-4xl mx-auto">
+  <div class="py-2 md:py-10 px-2 md:px-5">
+    <div class="flex items-center gap-2">
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Get Started</h1>
+      <Chip
+        value={`${completed}/${setupList.length}`}
+        className="text-[10px] font-semibold px-3 !py-1"
+        shape="rounded-full"
+      />
+    </div>
+
+    <section class="px-4">
+      {#each setupList as list, i}
+        <div
+          class="flex flex-col lg:flex-row lg:items-center justify-between gap-2 w-full py-8 border-b border-gray-300"
+        >
+          <div class={`space-y-2 flex-1 ${list.is_completed ? 'opacity-50' : ''}  max-w-[50%]`}>
+            <div class="flex items-center gap-2">
+              <Chip
+                value={i + 1}
+                className={`text-[10px] font-semibold !py-1 `}
+                shape="rounded-full"
+              />
+              <p class="font-medium text-lg">{list.title}</p>
+            </div>
+            <p class={`text-sm`}>{list.desc}</p>
+          </div>
+          <div class="w-[30%]">
+            <PrimaryButton
+              variant={list.is_completed ? VARIANTS.CONTAINED_DARK : VARIANTS.OUTLINED}
+              className="!w-full font-normal text-sm flex items-center gap-2"
+              onClick={() => handleClick(list.title)}
+              isDisabled={list.is_completed}
+            >
+              {#if list.is_completed}
+                <CheckmarkOutline />
+              {/if}
+              {list.button_label}
+            </PrimaryButton>
+          </div>
+        </div>
+      {/each}
+    </section>
+  </div>
+</section>

apps/dashboard/src/routes/org/[slug]/setup/+page.ts

@@ -0,0 +1,146 @@
+import { getSupabase } from '$lib/utils/functions/supabase';
+import get from 'lodash/get';
+
+const supabase = getSupabase();
+
+async function getGenericData(orgSlug: string): Promise<{
+  isCoursePublished: boolean;
+  isCourseCreated: boolean;
+  orgHasAvatarUrl: boolean;
+  courseData: any;
+}> {
+  const { data } = await supabase
+    .from('course')
+    .select(
+      `
+	    id,
+	    is_published,
+	    group:group_id!inner(
+	      organization!inner(
+	        avatar_url,
+	        siteName
+	      )
+	    )
+	  `
+    )
+    .eq('group.organization.siteName', orgSlug);
+
+  const result = data || [];
+
+  console.log('courseData', result);
+
+  return {
+    isCoursePublished: result.some((c) => c.is_published === true),
+    isCourseCreated: result.length > 0,
+    orgHasAvatarUrl: !!get(result[0], 'group.organization.avatar_url', ''),
+    courseData: result
+  };
+}
+
+async function getIsLessonCreated(
+  orgSlug: string
+): Promise<{ isLessonCreated: boolean; lessonData: any }> {
+  const { data } = await supabase
+    .from('lesson')
+    .select(
+      `
+	    id,
+	    course:course_id!inner(
+	      group:group_id!inner(
+	        organization!inner(
+	          siteName
+	        )
+	      )
+	    )
+	  `
+    )
+    .eq('course.group.organization.siteName', orgSlug);
+  console.log('lessonsData', data);
+
+  return {
+    isLessonCreated: Array.isArray(data) ? data.length > 0 : false,
+    lessonData: data
+  };
+}
+
+async function getIsExerciseCreated(orgSlug: string): Promise<boolean> {
+  const { data } = await supabase
+    .from('exercise')
+    .select(
+      `
+	    id,
+	    lesson:lesson_id!inner(
+	      course:course_id!inner(
+	        group:group_id!inner(
+	          organization!inner(
+	            siteName
+	          )
+	        )
+	      )
+	    )
+	  `
+    )
+    .eq('lesson.course.group.organization.siteName', orgSlug);
+
+  return Array.isArray(data) ? data?.length > 0 : false;
+}
+
+export const load = async ({ params = { slug: '' } }) => {
+  const { isCourseCreated, isCoursePublished, orgHasAvatarUrl, courseData } = await getGenericData(
+    params.slug
+  );
+  const { isLessonCreated, lessonData } = await getIsLessonCreated(params.slug);
+  const isExerciseCreated = await getIsExerciseCreated(params.slug);
+
+  const data = [
+    {
+      id: 'profile',
+      title: 'Upload a profile picture and update username',
+      desc: 'Personalize and a human touch making interactions more personal and memorable',
+      is_completed: false,
+      button_label: 'Update Profile'
+    },
+    {
+      id: 'organization',
+      title: 'Update organisation profile picture',
+      desc: 'Establish a professional and recognizable identity for your organization',
+      is_completed: orgHasAvatarUrl,
+      button_label: 'Update Org Profile'
+    },
+    {
+      id: 'course',
+      title: 'Create Course',
+      desc: 'Create a course that you will share with your students',
+      is_completed: isCourseCreated,
+      button_label: 'Create Course'
+    },
+    {
+      id: 'lesson',
+      title: 'Create a lesson',
+      desc: 'Break your course into lesson that your students can easily understand',
+      is_completed: isLessonCreated,
+      button_label: 'Create Lesson'
+    },
+    {
+      id: 'exercise',
+      title: 'Create an exercise',
+      desc: 'Test your students allow them to demonstarte their understanding of the subject matter',
+      is_completed: isExerciseCreated,
+      button_label: 'Create Assignment'
+    },
+    {
+      id: 'publish',
+      title: 'Publish a course',
+      desc: 'Make your course public and purchaseable ',
+      is_completed: isCoursePublished,
+      button_label: 'Publish Course'
+    }
+  ];
+
+  return {
+    orgSiteName: params.slug,
+    setup: data,
+    courses: courseData,
+    lessons: lessonData
+  };
+};