better drawer

dashboard/app.vue

@@ -10,7 +10,7 @@ const { alerts, closeAlert } = useAlert();
 
 const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dialogClosable } = useCustomDialog();
 
-const { visible } = usePricingDrawer();
+const { drawerVisible, hideDrawer, drawerClasses } = useDrawer();
 
 </script>
 
@@ -18,10 +18,10 @@ const { visible } = usePricingDrawer();
 
   <div class="w-dvw h-dvh bg-lyx-background-light relative">
 
-    <Transition name="pdrawer">
+    <Transition name="drawer">
-      <LazyPricingDrawer @onCloseClick="visible = false"
+      <LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses"
-        class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="visible">
+        class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="drawerVisible">
-      </LazyPricingDrawer>
+      </LazyDrawerGeneric>
     </Transition>
 
 
@@ -78,18 +78,18 @@ const { visible } = usePricingDrawer();
 </template>
 
 <style scoped lang="scss">
-.pdrawer-enter-active,
+.drawer-enter-active,
-.pdrawer-leave-active {
+.drawer-leave-active {
   transition: all .5s ease-in-out;
 }
 
-.pdrawer-enter-from,
+.drawer-enter-from,
-.pdrawer-leave-to {
+.drawer-leave-to {
   transform: translateX(100%)
 }
 
-.pdrawer-enter-to,
+.drawer-enter-to,
-.pdrawer-leave-from {
+.drawer-leave-from {
   transform: translateX(0)
 }
 </style>

dashboard/components/CVerticalNavigation.vue

@@ -105,8 +105,6 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
 });
 
 
-const pricingDrawer = usePricingDrawer();
-
 </script>
 
 <template>

dashboard/components/banner/LimitsInfo.vue

@@ -5,10 +5,10 @@ const limitsInfo = await useFetch("/api/project/limits_info", {
     lazy: true, headers: useComputedHeaders({ useSnapshotDates: false })
 });
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+    showDrawer('PRICING');
 }
 
 </script>

dashboard/components/banner/Offer.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+    showDrawer('PRICING');
 }
 
 const { project } = useProject()
@@ -20,7 +20,8 @@ const isPremium = computed(() => {
     <div v-if="!isPremium" class="w-full bg-[#5680f822] p-4 rounded-lg text-[.9rem] flex items-center">
         <div class="flex flex-col grow">
             <div class="poppins font-semibold text-lyx-primary">
-                Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout
+                Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at
+                checkout
                 from Acceleration Plan and beyond.
             </div>
             <!-- <div class="poppins text-lyx-primary">

dashboard/components/drawer/Docs.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+const emits = defineEmits<{
+    (evt: 'onCloseClick'): void
+}>();
+
+</script>
+
+<template>
+    <div class="w-full h-full">
+        <iframe class="w-full h-full" src="https://docs.litlyx.com/introduction" frameborder="0"></iframe>
+    </div>
+</template>

dashboard/components/drawer/Generic.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+
+const emits = defineEmits<{ (evt: 'onCloseClick'): void }>();
+
+const { drawerComponent } = useDrawer();
+
+</script>
+
+<template>
+    <div class="p-8 overflow-y-auto">
+
+        <div @click="$emit('onCloseClick')"
+            class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
+            <i class="fas fa-close text-[1.6rem]"></i>
+        </div>
+
+        <Component v-if="drawerComponent" :is="drawerComponent"></Component>
+
+    </div>
+</template>

dashboard/components/drawer/Pricing.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { PricingCardProp } from './PricingCardGeneric.vue';
+import type { PricingCardProp } from '../pricing/PricingCardGeneric.vue';
-
 
 
 const { data: planData, refresh: refreshPlanData } = useFetch('/api/project/plan', {
@@ -182,35 +181,11 @@ function getPricingsData() {
     return { freePricing, customPricing, slidePricings }
 }
 
-const { projectId } = useProject();
-
-const emits = defineEmits<{
-    (evt: 'onCloseClick'): void
-}>();
-
-async function onLifetimeUpgradeClick() {
-    const res = await $fetch<string>(`/api/pay/create-onetime`, {
-        ...signHeaders({
-            'content-type': 'application/json',
-            'x-pid': projectId.value ?? ''
-        }),
-        method: 'POST',
-        body: JSON.stringify({ planId: 2001 })
-    })
-    if (!res) alert('Something went wrong');
-    window.open(res);
-}
-
 </script>
 
 <template>
     <div class="p-8 overflow-y-auto">
 
-        <div @click="$emit('onCloseClick')"
-            class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
-            <i class="fas fa-close text-[1.6rem]"></i>
-        </div>
-
         <div class="flex gap-8 mt-10 h-max xl:flex-row flex-col">
             <PricingCardGeneric class="flex-1" :datas="getPricingsData().freePricing"></PricingCardGeneric>
             <PricingCardGeneric class="flex-1" :datas="getPricingsData().slidePricings" :default-index="2">
@@ -218,52 +193,6 @@ async function onLifetimeUpgradeClick() {
             <PricingCardGeneric class="flex-1" :datas="getPricingsData().customPricing"></PricingCardGeneric>
         </div>
 
-        <!-- <LyxUiCard class="w-full mt-6">
-            <div class="flex">
-                <div class="flex flex-col gap-3">
-                    <div>
-                        <span class="text-lyx-primary font-semibold text-[1.4rem]">
-                            LIFETIME DEAL
-                        </span>
-                        <span class="text-lyx-text-dark text-[.8rem]"> (Growth plan) </span>
-                    </div>
-                    <div class="text-[2rem]"> € 2.399,00 </div>
-                    <div> Up to 500.000 visits/events per month </div>
-                    <LyxUiButton type="primary" @click="onLifetimeUpgradeClick()"> Purchase </LyxUiButton>
-                </div>
-                <div class="flex justify-evenly grow">
-                    <div class="flex flex-col justify-evenly">
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Slack support </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Unlimited domanis </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Unlimited reports </div>
-                        </div>
-                    </div>
-                    <div class="flex flex-col justify-evenly">
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> AI Tokens: 3.000 / month </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Server type: SHARED </div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <img class="h-6" :src="'/check.png'" alt="Check">
-                            <div> Data retention: 5 Years </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </LyxUiCard> -->
-
         <div class="flex justify-between items-center mt-10 flex-col xl:flex-row">
             <div class="flex flex-col gap-2">
                 <div class="poppins text-[2rem] font-semibold">
@@ -282,7 +211,5 @@ async function onLifetimeUpgradeClick() {
             </div>
         </div>
 
-
-
     </div>
 </template>

dashboard/components/pricing/PricingCardGeneric.vue

@@ -15,8 +15,6 @@ export type PricingCardProp = {
 
 const props = defineProps<{ datas: PricingCardProp[], defaultIndex?: number }>();
 
-const { project } = useProject();
-
 const currentIndex = ref<number>(props.defaultIndex || 0);
 
 const data = computed(() => {

dashboard/components/settings/billing.vue

@@ -111,8 +111,7 @@ async function saveBillingInfo() {
 
 }
 
-
+const { showDrawer } = useDrawer();
-const { visible } = usePricingDrawer();
 
 </script>
 
@@ -128,9 +127,11 @@ const { visible } = usePricingDrawer();
             <template #info>
                 <div v-if="!isGuest">
                     <div class="flex flex-col gap-4">
-                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1" v-model="currentBillingInfo.line1">
+                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1"
+                            v-model="currentBillingInfo.line1">
                         </LyxUiInput>
-                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 2" v-model="currentBillingInfo.line2">
+                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 2"
+                            v-model="currentBillingInfo.line2">
                         </LyxUiInput>
                         <div class="flex gap-4 w-full">
                             <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Country"
@@ -141,9 +142,11 @@ const { visible } = usePricingDrawer();
                             </LyxUiInput>
                         </div>
                         <div class="flex gap-4 w-full">
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City" v-model="currentBillingInfo.city">
+                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City"
+                                v-model="currentBillingInfo.city">
                             </LyxUiInput>
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="State" v-model="currentBillingInfo.state">
+                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="State"
+                                v-model="currentBillingInfo.state">
                             </LyxUiInput>
                         </div>
                     </div>
@@ -195,7 +198,7 @@ const { visible } = usePricingDrawer();
                             <div class="poppins"> Expire date:</div>
                             <div> {{ prettyExpireDate }}</div>
                         </div>
-                        <LyxUiButton v-if="!isGuest" @click="visible = true" type="primary">
+                        <LyxUiButton v-if="!isGuest" @click="showDrawer('PRICING')" type="primary">
                             Upgrade plan
                         </LyxUiButton>
                     </div>

dashboard/composables/useDrawer.ts

@@ -0,0 +1,34 @@
+
+const drawerVisible = ref<boolean>(false);
+const drawerComponent = ref<Component>();
+
+const drawerClasses = ref<string>('')
+
+type ComponentType = "DOCS" | "PRICING";
+
+async function loadComponent(component: ComponentType): Promise<Component> {
+    switch (component) {
+        case "DOCS":
+            const DrawerDocs = await import("../components/drawer/Docs.vue");
+            return DrawerDocs.default;
+        case "PRICING":
+            const DrawerPricing = await import("../components/drawer/Pricing.vue");
+            return DrawerPricing.default;
+        default:
+            throw new Error("Unknown component type");
+    }
+}
+
+async function showDrawer(component: ComponentType, classes: string = "") {
+    drawerComponent.value = await loadComponent(component);
+    drawerVisible.value = true;
+    drawerClasses.value = classes;
+}
+
+function hideDrawer() {
+    drawerVisible.value = false;
+}
+
+export function useDrawer() {
+    return { drawerClasses, drawerVisible, drawerComponent, showDrawer, hideDrawer };
+}

dashboard/composables/usePricingDrawer.ts

@@ -1,9 +0,0 @@
-
-
-
-const pricingDrawerVisible = ref<boolean>(false);
-
-
-export function usePricingDrawer() {
-    return { visible: pricingDrawerVisible };
-}

dashboard/layouts/dashboard.vue

@@ -7,8 +7,6 @@ import { Lit } from 'litlyx-js';
 const { userRoles, isLogged } = useLoggedUser();
 const { project } = useProject();
 
-const pricingDrawer = usePricingDrawer();
-
 const selfhosted = useSelfhosted();
 
 const sections: Section[] = [

dashboard/layouts/header.vue

@@ -23,12 +23,6 @@ const entries = [
 const loggedUser = useLoggedUser();
 const { setToken } = useAccessToken();
 
-function logout() {
-    loggedUser.value = { logged: false }
-    setToken('');
-    location.reload();
-}
-
 </script>
 
 

dashboard/pages/analyst.vue

@@ -222,7 +222,7 @@ async function deleteChat(chat_id: string) {
     await reloadChatsList();
 }
 
-const { visible: pricingDrawerVisible } = usePricingDrawer()
+const { showDrawer } = useDrawer();
 
 
 async function clearAllChats() {
@@ -386,7 +386,7 @@ async function clearAllChats() {
                         <div class="manrope font-semibold text-text-dirty"> {{ chatsRemaining }} remaining requests
                         </div>
                     </div>
-                    <LyxUiButton type="primary" class="text-[.9rem] text-center " @click="pricingDrawerVisible = true">
+                    <LyxUiButton type="primary" class="text-[.9rem] text-center " @click="showDrawer('PRICING')">
                         Upgrade
                     </LyxUiButton>
                 </div>

dashboard/pages/dashboard/events.vue

@@ -70,10 +70,10 @@ const showWarning = computed(() => {
 })
 
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+   showDrawer('PRICING');
 }
 </script>
 

dashboard/pages/dashboard/visits.vue

@@ -77,10 +77,10 @@ const showWarning = computed(() => {
     return options.indexOf(selectedTimeFrom.value) > 1
 })
 
-const pricingDrawer = usePricingDrawer();
+const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-    pricingDrawer.visible.value = true;
+    showDrawer('PRICING');
 }
 
 </script>

dashboard/pages/index.vue

@@ -32,12 +32,18 @@ const firstInteraction = useFetch<boolean>('/api/project/first_interaction', {
 const showDashboard = computed(() => project.value && firstInteraction.data.value);
 
 const selfhosted = useSelfhosted();
+
+const { showDrawer } = useDrawer();
 </script>
 
 <template>
 
     <div class="dashboard w-full h-full overflow-y-auto overflow-x-hidden pb-[7rem] md:pt-4 lg:pt-0">
 
+        <div @click="showDrawer('DOCS','!w-[30vw] !min-w-[30vw]')">
+            test
+        </div>
+
         <div v-if="showDashboard">
 
             <div class="w-full px-4 py-2 gap-2 flex flex-col">