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/lib/components/Org/Settings/OrgSettings.svelte

@@ -1,6 +1,7 @@
 <script>
   import { goto } from '$app/navigation';
   import { Grid, Row, Column } from 'carbon-components-svelte';
+  import FlashFilled from 'carbon-icons-svelte/lib/FlashFilled.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -9,6 +10,7 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import SectionTitle from '../SectionTitle.svelte';
+  import { isFreePlan } from '$lib/utils/store/org';
 
   let avatar;
   let loading = false;
@@ -94,7 +96,7 @@
   }
 </script>
 
-<Grid class="border-c rounded border-gray-200 w-full mt-5">
+<Grid class="border-c rounded border-gray-200 dark:border-neutral-600 w-full mt-5">
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
     <Column sm={4} md={4} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
     <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0 flex flex-col items-center lg:items-start">
@@ -175,7 +177,7 @@
       </p>
       <PrimaryButton
         label="Edit domain"
-        className="my-7 py-5 px-10 text-primary-700"
+        className="my-7 py-5 px-10"
         variant={VARIANTS.OUTLINED}
         onClick={() => gotoSetting('/domains')}
       />
@@ -189,11 +191,15 @@
         Add team mates to your organization so you can both collaborate on projects.
       </p>
       <PrimaryButton
-        label="Manage Team"
-        className="my-7 py-5 px-10 text-primary-700"
+        className="my-7 py-5 px-10 flex items-center gap-2 justify-center"
         variant={VARIANTS.OUTLINED}
         onClick={() => gotoSetting('/teams')}
-      />
+      >
+        {#if $isFreePlan}
+          <FlashFilled size={16} class="text-blue-700" />
+        {/if}
+        Manage Team
+      </PrimaryButton>
     </Column>
   </Row>
 </Grid>