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]>

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>