Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-09 23:48:36 +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

5
TODO
View File

@@ -1 +1,4 @@
- Email login (remove/fix github login)
- Email login (remove/fix github login)
- Remove github login

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>

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

@@ -127,23 +127,23 @@ const { visible } = usePricingDrawer();
<SettingsTemplate v-if="!invoicesPending && !planPending" :entries="entries">
<template #info>
<div v-if="!isGuest">
<div class="flex flex-col gap-2">
<LyxUiInput class="px-2 py-1" placeholder="Address line 1" v-model="currentBillingInfo.line1">
<div class="flex flex-col gap-4">
<LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1" v-model="currentBillingInfo.line1">
</LyxUiInput>
<LyxUiInput class="px-2 py-1" 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-2 w-full">
<LyxUiInput class="px-2 py-1 w-full" placeholder="Country"
<div class="flex gap-4 w-full">
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Country"
v-model="currentBillingInfo.country">
</LyxUiInput>
<LyxUiInput class="px-2 py-1 w-full" placeholder="Postal code"
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Postal code"
v-model="currentBillingInfo.postal_code">
</LyxUiInput>
</div>
<div class="flex gap-2 w-full">
<LyxUiInput class="px-2 py-1 w-full" placeholder="City" v-model="currentBillingInfo.city">
<div class="flex gap-4 w-full">
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City" v-model="currentBillingInfo.city">
</LyxUiInput>
<LyxUiInput class="px-2 py-1 w-full" 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>
@@ -157,28 +157,22 @@ const { visible } = usePricingDrawer();
<template #plan>
<LyxUiCard v-if="planData" class="flex flex-col w-full">
<div class="flex flex-col gap-6 px-8 grow">
<div class="flex justify-between flex-col sm:flex-row">
<div class="flex justify-between items-center flex-col sm:flex-row">
<div class="flex flex-col">
<div class="flex gap-3 items-center">
<div class="poppins font-semibold text-[1.1rem]">
{{ planData.premium ? 'Premium plan' : 'Basic plan' }}
</div>
<div
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-sm">
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
</div>
</div>
<div class="poppins text-text-sub text-[.9rem]">
Our free plan for testing the product.
</div>
</div>
<div class="flex items-center gap-1">
<div class="poppins font-semibold text-[2rem]"> €
{{ getPremiumPrice(planData.premium_type) }} </div>
<div class="poppins text-text-sub mt-2"> per month </div>
<div class="flex items-center ml-2">
<i class="far fa-info-circle text-[.8rem]"></i>
</div>
</div>
</div>
<div class="flex flex-col">
@@ -201,11 +195,9 @@ const { visible } = usePricingDrawer();
<div class="poppins"> Expire date:</div>
<div> {{ prettyExpireDate }}</div>
</div>
<div v-if="!isGuest" @click="visible = true"
class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
<div class="poppins"> Upgrade plan </div>
<i class="fas fa-arrow-up-right"></i>
</div>
<LyxUiButton v-if="!isGuest" @click="visible = true" type="primary">
Upgrade plan
</LyxUiButton>
</div>
</LyxUiCard>
</template>

11
dashboard/pages/dashboard/events.vue
View File

@@ -95,11 +95,18 @@ function goToUpgrade() {
<div> It can take a few minutes </div>
</div>
<div class="w-[15rem] flex flex-col gap-0">
<USelectMenu v-model="selectedTimeFrom" :options="options"></USelectMenu>
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
}
}" v-model="selectedTimeFrom" :options="options"></USelectMenu>
</div>
<div v-if="isPremium" @click="downloadCSV()"
class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-1 rounded-lg">
Download CSV
</div>

11
dashboard/pages/dashboard/visits.vue
View File

@@ -100,11 +100,18 @@ function goToUpgrade() {
<div> It can take a few minutes </div>
</div>
<div class="w-[15rem] flex flex-col gap-0">
<USelectMenu v-model="selectedTimeFrom" :options="options"></USelectMenu>
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
}
}" v-model="selectedTimeFrom" :options="options"></USelectMenu>
</div>
<div v-if="isPremium" @click="downloadCSV()"
class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-1 rounded-lg">
Download CSV
</div>

2
dashboard/pages/events.vue
View File

@@ -30,7 +30,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
</div>
<div>
<LyxUiButton type="secondary" to="https://docs.litlyx.com/custom-events">
Go to docs
Trigger your first event
</LyxUiButton>
</div>
</LyxUiCard>