From 2e12b3ef735af5b6635894043bb29387322cd0ca Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Thu, 18 Jul 2024 14:31:34 +0200
Subject: [PATCH] add premium plans + new pricing

---
 .../components/pricing/PricingCardGeneric.vue |  96 +++++++
 .../components/pricing/PricingDrawer.vue      | 241 +++++++++++++-----
 dashboard/public/check.png                    | Bin 0 -> 1429 bytes
 shared/data/PREMIUM.ts                        |  59 ++++-
 4 files changed, 331 insertions(+), 65 deletions(-)
 create mode 100644 dashboard/components/pricing/PricingCardGeneric.vue
 create mode 100644 dashboard/public/check.png

diff --git a/dashboard/components/pricing/PricingCardGeneric.vue b/dashboard/components/pricing/PricingCardGeneric.vue
new file mode 100644
index 0000000..e5a6d2d
--- /dev/null
+++ b/dashboard/components/pricing/PricingCardGeneric.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+
+
+export type PricingCardProp = {
+    title: string,
+    price: string,
+    subs: string[],
+    features: string[],
+    cta: string,
+    link?: string,
+    isDowngrade: boolean,
+    active: boolean,
+    planId: number
+}
+
+const props = defineProps<{ datas: PricingCardProp[] }>();
+
+const activeProject = useActiveProject();
+
+const currentIndex = ref<number>(0);
+
+const data = computed(() => {
+    return props.datas[currentIndex.value];
+})
+
+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: data.value.planId })
+    })
+    if (!res) alert('Something went wrong');
+    window.open(res);
+}
+
+</script>
+
+
+<template>
+    <div class="relative bg-[#151515] outline outline-[1px] outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
+
+        <div class="flex flex-col gap-3 text-center">
+            <div class="poppins text-xl font-light"> {{ data.title }} </div>
+            <div v-if="data.active" class="absolute right-6 top-3 poppins text-[.75rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] px-3 py-[.1rem] rounded-xl">
+                Active
+            </div>
+            <div class="poppins text-4xl font-medium"> {{ data.price }} </div>
+        </div>
+
+        <div class="sep bg-[#262626] h-[1px] my-8"></div>
+
+        <div class="flex flex-col text-center h-[6rem] justify-center gap-2">
+            <div v-if="datas.length > 1">
+                <URange :ui="{
+                    thumb: {
+                        color: 'text-[#5680f8]'
+                    },
+                    progress: {
+                        background: '!bg-[#5680f8]'
+                    }
+                }" :min="0" :max="datas.length - 1" v-model="currentIndex">
+                </URange>
+            </div>
+            <div class="poppins" v-for="sub of data.subs"> {{ sub }} </div>
+        </div>
+
+        <div class="sep bg-[#262626] h-[1px] my-8"></div>
+
+        <div class="flex flex-col gap-2">
+            <div class="flex gap-2" v-for="feature of data.features">
+                <div class="h-6 w-6">
+                    <img class="w-full h-full" :src="'check.png'" alt="Check">
+                </div>
+                <div>{{ feature }}</div>
+            </div>
+        </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">
+                    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">
+                    Downgrade
+                </div>
+            </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 ">
+                {{ data.cta }}
+            </NuxtLink>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/dashboard/components/pricing/PricingDrawer.vue b/dashboard/components/pricing/PricingDrawer.vue
index 8d9dd01..8fddcf0 100644
--- a/dashboard/components/pricing/PricingDrawer.vue
+++ b/dashboard/components/pricing/PricingDrawer.vue
@@ -1,71 +1,188 @@
 <script lang="ts" setup>
-import type { PricingCardProp } from './PricingCard.vue';
+import type { PricingCardProp } from './PricingCardGeneric.vue';
 
 
 const activeProject = useActiveProject();
 
 const props = defineProps<{ currentSub: number }>();
 
+const freePricing: PricingCardProp[] = [
+    {
+        title: 'Free',
+        price: '€0 / mo',
+        subs: [
+            'Up to 5000 visits/events per month',
+            'CPM 0€ per visit/event'
+        ],
+        features: [
+            'Email support',
+            'Unlimited domains',
+            'Unlimited reports',
+            'AI Tokens: 10',
+            'Server type: SHARED',
+            'Projects: max 2',
+            'Data retention: 2 Months'
+        ],
+        cta: 'Start For Free now!',
+        active: props.currentSub == 0,
+        isDowngrade: props.currentSub > 0,
+        planId: 0
+    },
+]
 
-const starterTierCardData = ref<PricingCardProp>({
-    title: 'STARTER',
-    cost: '0',
-    features: [
-        "3K visits/events per month",
-        "10 AI Interaction per month",
-        "1 month data retention",
-        "Limited reports",
-        "1 Team member",
-        "Limited Automatic Email Report",
-        "Shared Server & DB",
-        "Low priority email support",
-    ],
-    desc: `Free project are not reliable and sometimes
-           can experience some data loss.To have a 
-           dedicated server we suggest to upgrade the
-           plan to an higher one!`,
-    active: activeProject.value?.premium === false,
-    isDowngrade: props.currentSub > 0,
-    planId: 0
-});
+const customPricing: PricingCardProp[] = [
+    {
+        title: 'Enterprise',
+        price: 'Custom',
+        subs: [
+            'Unlimited visits/events per month',
+            'Service Tailor-made on needs'
+        ],
+        features: [
+            'Priority support',
+            'Server type: DEDICATED',
+            'DB instance: DEDICATED',
+            'Dedicated operator',
+            'White label',
+            'Custom Charts',
+            'Custom Data Aggregation'
+        ],
+        cta: 'Let\'s Talk!',
+        link: 'mailto:help@litlyx.com',
+        active: false,
+        isDowngrade: false,
+        planId: -1
+    }
+]
 
-const accelerationTierCardData = ref<PricingCardProp>({
-    title: 'ACCELERATION',
-    cost: '9,99',
-    features: [
-        "150K visits/events per month",
-        "100 AI Interaction per month",
-        "6 months data retention",
-        "Limited reports",
-        "1 Team member",
-        "Limited Automatic Email Report",
-        "Shared Server & DB",
-        "Low priority email support"
-    ],
-    desc: `Your project is entering a growth phase. We simplify data analysis for you. For more support, try our Expansion plan—it's worth it!`,
-    active: activeProject.value?.premium_type === 1,
-    isDowngrade: props.currentSub > 1,
-    planId: 1
-});
-
-const expansionTierCardData = ref<PricingCardProp>({
-    title: 'EXPANSION',
-    cost: '39,99',
-    features: [
-        "500K visits/events per month",
-        "5000 AI Interaction per month",
-        "2 years data retention",
-        "Unlimited reports",
-        "10 Team member",
-        "Unlimited Automatic Email Report",
-        "Dedicated Server & DB",
-        "high priority email support"
-    ],
-    desc: `We will support you with everything we can offer and give you the full power of our service. If you need more space and are growing, contact us for a custom offer!`,
-    active: activeProject.value?.premium_type === 2,
-    isDowngrade: props.currentSub > 2,
-    planId: 2
-});
+const slidePricings: PricingCardProp[] = [
+    {
+        title: 'Incubation',
+        price: '€4,99 / mo',
+        subs: [
+            'Up to 50.000 visits/events per month',
+            'CPM 0,10€ per visit/event'
+        ],
+        features: [
+            'Discord support',
+            'Unlimited domains',
+            'Unlimited reports',
+            'AI Tokens: 30',
+            'Server type: SHARED',
+            'Projects: max 3',
+            'Data retention: 6 Months'
+        ],
+        cta: 'Go to Cloud Dashboard',
+        active: props.currentSub == 101,
+        isDowngrade: props.currentSub > 101,
+        planId: 101
+    },
+    {
+        title: 'Acceleration',
+        price: '€9,99 / mo',
+        subs: [
+            'Up to 150.000 visits/events per month',
+            'CPM 0,06€ per visit/event'
+        ],
+        features: [
+            'Discord support',
+            'Unlimited domains',
+            'Unlimited reports',
+            'AI Tokens: 100',
+            'Server type: SHARED',
+            'Projects: max 3',
+            'Data retention: 9 Months'
+        ],
+        cta: 'Go to Cloud Dashboard',
+        active: props.currentSub == 102,
+        isDowngrade: props.currentSub > 102,
+        planId: 102
+    },
+    {
+        title: 'Growth',
+        price: '€29,99 / mo',
+        subs: [
+            'Up to 500.000 visits/events per month',
+            'CPM 0,059€ per visit/event'
+        ],
+        features: [
+            'Discord support',
+            'Unlimited domains',
+            'Unlimited reports',
+            'AI Tokens: 3.000',
+            'Server type: SHARED',
+            'Projects: max 3',
+            'Data retention: 1 Year'
+        ],
+        cta: 'Go to Cloud Dashboard',
+        active: props.currentSub == 103,
+        isDowngrade: props.currentSub > 103,
+        planId: 103
+    },
+    {
+        title: 'Expansion',
+        price: '€59,99 / mo',
+        subs: [
+            'Up to 1.000.000 visits/events per month',
+            'CPM 0,059€ per visit/event'
+        ],
+        features: [
+            'Discord support',
+            'Unlimited domains',
+            'Unlimited reports',
+            'AI Tokens: 5.000',
+            'Server type: SHARED',
+            'Projects: max 3',
+            'Data retention: 1 Year'
+        ],
+        cta: 'Go to Cloud Dashboard',
+        active: props.currentSub == 104,
+        isDowngrade: props.currentSub > 104,
+        planId: 104
+    },
+    {
+        title: 'Scaling',
+        price: '€99,99 / mo',
+        subs: [
+            'Up to 2.500.000 visits/events per month',
+            'CPM 0,039€ per visit/event'
+        ],
+        features: [
+            'Discord support',
+            'Unlimited domains',
+            'Unlimited reports',
+            'AI Tokens: 10.000',
+            'Server type: DEDICATED',
+            'Projects: max 3',
+            'Data retention: 2 Years'
+        ],
+        cta: 'Go to Cloud Dashboard',
+        active: props.currentSub == 105,
+        isDowngrade: props.currentSub > 105,
+        planId: 105
+    },
+    {
+        title: 'Unicorn',
+        price: '€149,99 / mo',
+        subs: [
+            'Up to 5.000.000 visits/events per month',
+            'CPM 0,029€ per visit/event'
+        ],
+        features: [
+            'Discord support',
+            'Unlimited domains',
+            'Unlimited reports',
+            'AI Tokens: 20.000',
+            'Server type: DEDICATED',
+            'Projects: max 3',
+            'Data retention: 3 Years'
+        ],
+        cta: 'Go to Cloud Dashboard',
+        active: props.currentSub == 106,
+        isDowngrade: props.currentSub > 106,
+        planId: 106
+    }
+]
 
 
 const emits = defineEmits<{
@@ -83,9 +200,9 @@ const emits = defineEmits<{
         </div>
 
         <div class="flex gap-8 mt-10 h-max xl:flex-row flex-col">
-            <PricingCard class="flex-1" :data="starterTierCardData"></PricingCard>
-            <PricingCard class="flex-1" :data="accelerationTierCardData"></PricingCard>
-            <PricingCard class="flex-1" :data="expansionTierCardData"></PricingCard>
+            <PricingCardGeneric class="flex-1" :datas="freePricing"></PricingCardGeneric>
+            <PricingCardGeneric class="flex-1" :datas="slidePricings"></PricingCardGeneric>
+            <PricingCardGeneric class="flex-1" :datas="customPricing"></PricingCardGeneric>
         </div>
 
         <div class="flex justify-between items-center mt-10 flex-col xl:flex-row">
diff --git a/dashboard/public/check.png b/dashboard/public/check.png
new file mode 100644
index 0000000000000000000000000000000000000000..33e8934c6d5cd5d94b7624f2650a25827db52f9b
GIT binary patch
literal 1429
zcmV;G1#0?<P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1rSL@K~#7F<(toM
z8$}eyzq3gbM-`HVgs4EM&VdUTI|sy#1PO^7$;si=h6~rEe?i870nL>QNl(<hq#O}a
zTrM0q#JwPHwS}mtRDq?cs*}n)eQ($6?z&@pe|y&bNY47l#@_GSH*enCc`J}H-^dpg
z+HBcastVW@1yK=DWd&6H`w5^!pY`Z7+Ny_u)wW=_f0An*WQafpkZ2aXO@epEg~p&G
zAX@ZYCuEEkQYJM6>_}B!5tsW=>VRIBkqzt}jU}L!mS-e3Ku*HPp`n6f8ZJjk4UxzI
zyN&+7Qjo|`_&AP7+>>j^h)FC1aA2c=^&^e%Eto;ag8CwkH&}=WpLHAJ+#vBx#fEjh
zEBgl#|1X*c)MfvB+C=`5ToFPx4_6zZcMrScuDl?ZS9>S`G;JQ=m8;)|+cyMtd2tS?
z8VZGIH|6Tati5K&06z1@6VIrcd+gJhYJhs<;;<-guY-?$*Ns~fnK%T7bNp>A03`C(
zU0J$4;j=g4d7h^_%rC)78PTJ{YD1SNXomnLIcHcH@eEg=LK_d>FaVwXy%Z`q<KV<i
zmna2>z%a!<TSNo6h~6bu)=#DAdG7=~fX4m);)-Xeaz)S!MjlYKz*oKg4Be+C^qyZq
zG=g5>_kb-FNc{GvPjKV&$0%QYiD(49U}OLq`-dn1o_L1E$1{SpKYGT0_!?dj#{T9f
z|Bb|ZlvV~PU9k}jRc6in%rSt1brXie;`!mH|I)&p2Or|!-YTLpfY{;fa0sX^7);vY
z8H)bf&UP66AHh(v5br^k(bkvgQc}&ylMF;Bo~OO$@7EHGX9hI$EmQha%V>Qh5tGE<
z`R#)kbN?hnjbeaRg<<3)o`-;4Ap@ui3?eV_49$MmEn!ghm#6q4Wy_QVXb$3;O5}x+
zarmIW`||G?*;w#9<{;i7kpa8|zgE7$jm>{z8R4ty)47RfVjF;q690k6F~ZlB*MIhL
zFYsQT;u#Kt9mL>a_Z_t9;m0#VnCgth*T{%|@)i$XRHY!;Lri}D<9)pmW|XLgh<ARL
zhJffG0Xid0tJ4h<Px-IiB@Y;Mk&v)P(23`q{)b;b%3VA|7lGQ=68%96Ofv!xi<=Z1
zbmF<H<LYic*zMHIVV>5;BfF0Ii+9UmrwpV8gGXs*gu2AWj|t+5PE(fFog=Ve-$#l(
z`14)op~DdI+(gmht#cF<2TqYPIwP1Op5ewzcRQpm`~M?@%Fr7Q93X#bzh{Ja4Belf
zEWdtF9U+6Y0rr9?bmsqhd=;j^y@lTM(doE^(?AeAE1ZT&;(2L|TW!5pBLlc=W$Xou
z4W0cHf1^ZTKxXL$hR|7p3be`u48UGMQ89FrVbS2RKi(#zy&g`9(V1bbuxT)g{C>1^
zl7Qka%S9RrJ#MDfeV{b}yU8LA1=cdDlYC-U!hLlL_5#cbsxhfYkeRtAR+lf1X*c7S
z&-JL2rd->bwnxZj=|1-ky`9a{3`Nfkwk8S#pZVG1nb4Jq>q^S_z(~{g(JZ(36R9+#
zFP7YR3^S)lPU3Felch*^v?RG{%9xH)64Bz^CC*J#i8>?PzG87WM?*NN`?P6p7KvL!
z*c%2=2g2<%%k9QVu3Wiz^Y{J6A+_EZ?<VPtJt8&X9vR*|jXk>XxS7-#ymm?7b)U-E
zQ=@O5o`k#Zz@2DzjSNy{gK$@h{`PriOtauF3FZZxR@S%AzXB}Ne*J$@GO7Ro01jnX
jNoGw=04e|g00;m8000000Mb*F00000NkvXXu0mjfXLhCW

literal 0
HcmV?d00001

diff --git a/shared/data/PREMIUM.ts b/shared/data/PREMIUM.ts
index d16dbc8..9455c60 100644
--- a/shared/data/PREMIUM.ts
+++ b/shared/data/PREMIUM.ts
@@ -2,7 +2,18 @@ import { CustomPremiumPriceModel } from "../schema/CustomPremiumPriceSchema";
 
 export type PREMIUM_TAG = typeof PREMIUM_TAGS[number];
 
-export const PREMIUM_TAGS = ['FREE', 'PLAN_1', 'PLAN_2', 'CUSTOM_1'] as const;
+export const PREMIUM_TAGS = [
+    'FREE',
+    'PLAN_1',
+    'PLAN_2',
+    'CUSTOM_1',
+    'INCUBATION',
+    'ACCELERATION',
+    'GROWTH',
+    'EXPANSION',
+    'SCALING',
+    'UNICORN'
+] as const;
 
 
 export type PREMIUM_DATA = {
@@ -16,7 +27,7 @@ export type PREMIUM_DATA = {
 export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
     FREE: {
         ID: 0,
-        COUNT_LIMIT: 3_000,
+        COUNT_LIMIT: 5_000,
         AI_MESSAGE_LIMIT: 10,
         PRICE: 'price_1POKCMB2lPUiVs9VLe3QjIHl',
         PRICE_TEST: 'price_1PNbHYB2lPUiVs9VZP32xglF'
@@ -41,7 +52,49 @@ export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
         AI_MESSAGE_LIMIT: 100_000,
         PRICE: 'price_1POKZyB2lPUiVs9VMAY6jXTV',
         PRICE_TEST: ''
-    }
+    },
+    INCUBATION: {
+        ID: 101,
+        COUNT_LIMIT: 50_000,
+        AI_MESSAGE_LIMIT: 30,
+        PRICE: 'price_1PdsyzB2lPUiVs9V4J246Jw0',
+        PRICE_TEST: ''
+    },
+    ACCELERATION: {
+        ID: 102,
+        COUNT_LIMIT: 150_000,
+        AI_MESSAGE_LIMIT: 100,
+        PRICE: 'price_1Pdt5bB2lPUiVs9VhkuCouEt',
+        PRICE_TEST: ''
+    },
+    GROWTH: {
+        ID: 103,
+        COUNT_LIMIT: 500_000,
+        AI_MESSAGE_LIMIT: 3_000,
+        PRICE: 'price_1PdszrB2lPUiVs9VIdkT3thv',
+        PRICE_TEST: ''
+    },
+    EXPANSION: {
+        ID: 104,
+        COUNT_LIMIT: 1_000_000,
+        AI_MESSAGE_LIMIT: 5_000,
+        PRICE: 'price_1Pdt0xB2lPUiVs9V0Rdt80Fe',
+        PRICE_TEST: ''
+    },
+    SCALING: {
+        ID: 105,
+        COUNT_LIMIT: 2_500_000,
+        AI_MESSAGE_LIMIT: 10_000,
+        PRICE: 'price_1Pdt1UB2lPUiVs9VUmxntSwZ',
+        PRICE_TEST: ''
+    },
+    UNICORN: {
+        ID: 106,
+        COUNT_LIMIT: 5_000_000,
+        AI_MESSAGE_LIMIT: 20_000,
+        PRICE: 'price_1Pdt2LB2lPUiVs9VGBFAIG9G',
+        PRICE_TEST: ''
+    },
 }
 
 CustomPremiumPriceModel.find({}).then(custom_prices => {