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

improve

Browse Source
This commit is contained in:
Emily
2024-10-09 19:35:07 +02:00
parent e953af2c1b
commit 0a7f2b58d0
8 changed files with 68 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
dashboard/components/pricing/PricingCard.vue
View File

@@ -1,82 +0,0 @@
<script lang="ts" setup>
export type PricingCardProp = {
title: string,
cost: string,
features: string[],
desc: string,
active: boolean,
planId: number,
isDowngrade: boolean
}
const props = defineProps<{ data: PricingCardProp }>();
const activeProject = useActiveProject();
async function onUpgradeClick() {
const res = await $fetch<string>(`/api/pay/${activeProject.value?._id.toString()}/create`, {
...signHeaders({ 'content-type': 'application/json' }),
method: 'POST',
body: JSON.stringify({ planId: props.data.planId })
})
if (!res) alert('Something went wrong');
window.open(res);
}
</script>
<template>
<div class="p-6 bg-[#303030] rounded-xl pricing-card flex flex-col">
<div class="flex flex-col">
<div class="text-[1.1rem] font-semibold mb-4">
{{ data.title }}
</div>
<div class="flex gap-1 items-end mb-2">
<div class="text-[1.1rem] font-semibold">
€{{ data.cost }}
</div>
<div class="text-text-sub text-[.9rem] mb-[.15rem]">
per month
</div>
</div>
<div v-if="data.active" class="text-[1rem] bg-[#1f1f22] rounded-md py-2 text-center">
Current active plan
</div>
<div @click="onUpgradeClick()" v-if="!data.active && !data.isDowngrade"
class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
Upgrade
</div>
<div @click="onUpgradeClick()" v-if="!data.active && data.isDowngrade"
class="cursor-pointer text-[1rem] font-semibold bg-[#1f1f22] text-red-400 rounded-md py-2 text-center">
Downgrade
</div>
</div>
<div class="bg-gray-400 h-[1px] w-full my-4"></div>
<div class="flex flex-col gap-1 grow">
<div class="flex gap-2 items-center" v-for="feature of data.features">
<i class="fas fa-check"></i>
<div>
{{ feature }}
</div>
</div>
</div>
<div class="bg-gray-400 h-[1px] w-full my-4"></div>
<div class="text-text-sub text-[.9rem] h-[20%]">
{{ data.desc }}
</div>
</div>
</template>
<style scoped lang="scss">
.pricing-card * {
font-family: "Poppins";
}
</style>

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

@@ -15,7 +15,7 @@ export type PricingCardProp = {
const props = defineProps<{ datas: PricingCardProp[], defaultIndex?: number }>();
const activeProject = useActiveProject();
const { project } = useProject();
const currentIndex = ref<number>(props.defaultIndex || 0);
@@ -24,8 +24,13 @@ const data = computed(() => {
})
async function onUpgradeClick() {
const res = await $fetch<string>(`/api/pay/${activeProject.value?._id.toString()}/create`, {
...signHeaders({ 'content-type': 'application/json' }),
const res = await $fetch<string>(`/api/pay/create`, {
headers: useComputedHeaders({
useSnapshotDates: false,
custom: {
'content-type': 'application/json'
}
}).value,
method: 'POST',
body: JSON.stringify({ planId: data.value.planId })
})
@@ -67,7 +72,10 @@ async function onUpgradeClick() {
}" :min="0" :max="datas.length - 1" v-model="currentIndex">
</URange>
</div>
<div class="poppins" v-for="sub of data.subs"> {{ sub }} </div>
<div :class="{ '!text-[.8rem] !text-lyx-text-darker': sub.includes('€') }" class="poppins text-[.9rem]"
v-for="sub of data.subs">
{{ sub }}
</div>
</div>
<div class="sep bg-[#262626] h-[1px] my-8"></div>
@@ -82,20 +90,27 @@ async function onUpgradeClick() {
</div>
<div class="mt-10 flex">
<div class="w-full" v-if="data.planId > -1">
<div @click="onUpgradeClick()" v-if="!data.active && !data.isDowngrade"
class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
<div class="w-full flex" v-if="data.planId > -1">
<LyxUiButton class="rounded-md py-2 w-full text-center" type="primary" @click="onUpgradeClick()"
v-if="!data.active && !data.isDowngrade">
Upgrade
</div>
<div @click="onUpgradeClick()" v-if="!data.active && data.isDowngrade"
class="w-full cursor-pointer text-[1rem] font-semibold bg-[#1f1f22] text-red-400 rounded-md py-2 text-center">
</LyxUiButton>
<LyxUiButton class="rounded-md py-2 w-full text-center" type="danger" @click="onUpgradeClick()"
v-if="!data.active && data.isDowngrade">
Downgrade
</div>
</LyxUiButton>
</div>
<NuxtLink v-if="data.planId === -1" :to="data.link || 'https://dashboard.litlyx.com'"
class="bg-[#222A42] cursor-pointer outline outline-[1px] outline-[#5680F8] w-full !rounded-md text-center text-[.9rem] !py-2 ">
<LyxUiButton v-if="data.planId === -1" :to="data.link || 'https://dashboard.litlyx.com'"
class="rounded-md py-2 w-full text-center" type="primary">
{{ data.cta }}
</NuxtLink>
</LyxUiButton>
</div>
</div>

4
dashboard/components/pricing/PricingDrawer.vue
View File

@@ -15,7 +15,7 @@ function getPricingsData() {
price: '€0 / mo',
subs: [
'Up to 5000 visits/events per month',
'CPM 0€ per visit/event'
],
features: [
'Email support',
@@ -274,7 +274,7 @@ async function onLifetimeUpgradeClick() {
</div>
</div>
<div class="mt-2">
<div class="rounded-lg px-10 py-3 bg-[#303030]">
<div class="rounded-lg px-10 py-3 bg-[#151515]">
<a href="mailto:help@litlyx.com" class="poppins text-[1.3rem]">
help@litlyx.com
</a>