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 <[email protected]> * revamp setup * improve the upgrade experience * migration * feat: add lemonsqueezy customer portal --------- Co-authored-by: emmanuel <[email protected]>
2024-04-07 06:08:34 +01:00
parent 136e057954
commit fcd0bcc656
105 changed files with 1743 additions and 463 deletions
@@ -0,0 +1,5 @@
+export const load = ({ params = { slug: '' } }) => {
+  return {
+    orgName: params.slug
+  };
+};
@@ -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>
@@ -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">
@@ -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>
@@ -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)}
        />
@@ -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>
@@ -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
@@ -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>
@@ -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>
@@ -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
+  };
+};