Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

better drawer

Browse Source
This commit is contained in:
Emily
2024-12-19 16:46:03 +01:00
parent 3f26f1ab68
commit 7009a0ad02
17 changed files with 108 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/components/CVerticalNavigation.vue
View File

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

4
dashboard/components/banner/LimitsInfo.vue
View File

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

7
dashboard/components/banner/Offer.vue
View File

@@ -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">

13
dashboard/components/drawer/Docs.vue Normal file
View File

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

20
dashboard/components/drawer/Generic.vue Normal file
View File

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

75
dashboard/components/pricing/PricingDrawer.vue → dashboard/components/drawer/Pricing.vue
View File

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

2
dashboard/components/pricing/PricingCardGeneric.vue
View File

@@ -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(() => {

17
dashboard/components/settings/billing.vue
View File

@@ -111,8 +111,7 @@ async function saveBillingInfo() {
}
const { visible } = usePricingDrawer();
const { showDrawer } = useDrawer();
</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>