add colors + fix billing page

This commit is contained in:
Emily
2024-09-11 15:13:03 +02:00
parent 4134d33dc4
commit 6a9a698b7a
5 changed files with 102 additions and 32 deletions

View File

@@ -67,7 +67,7 @@ const chartData = ref<ChartData<'bar'>>({
label: e.label || '?',
backgroundColor: [e.color],
borderWidth: 0,
borderRadius: 8
borderRadius: 0
}
})
});

View File

@@ -46,7 +46,28 @@ const chartData = ref<ChartData<'doughnut'>>({
{
rotation: 1,
data: [],
backgroundColor: ['#6bbbe3', '#5655d0', '#a6d5cb', '#fae0b9'],
backgroundColor: [
"#5655d0",
"#6bbbe3",
"#a6d5cb",
"#fae0b9",
"#f28e8e",
"#e3a7e4",
"#c4a8e1",
"#8cc1d8",
"#f9c2cd",
"#b4e3b2",
"#ffdfba",
"#e9c3b5",
"#d5b8d6",
"#add7f6",
"#ffd1dc",
"#ffe7a1",
"#a8e6cf",
"#d4a5a5",
"#f3d6e4",
"#c3aed6"
],
borderColor: ['#1d1d1f'],
borderWidth: 2
},
@@ -87,7 +108,7 @@ const headers = computed(() => {
});
const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/data/events`, {
method: 'POST', headers, lazy: true, immediate: false,transform:transformResponse
method: 'POST', headers, lazy: true, immediate: false, transform: transformResponse
});
onMounted(() => {

View File

@@ -30,7 +30,29 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
});
const parsedDatasets: any[] = [];
const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
const colors = [
"#5655d0",
"#6bbbe3",
"#a6d5cb",
"#fae0b9",
"#f28e8e",
"#e3a7e4",
"#c4a8e1",
"#8cc1d8",
"#f9c2cd",
"#b4e3b2",
"#ffdfba",
"#e9c3b5",
"#d5b8d6",
"#add7f6",
"#ffd1dc",
"#ffe7a1",
"#a8e6cf",
"#d4a5a5",
"#f3d6e4",
"#c3aed6"
];
for (let i = 0; i < fixed.allKeys.length; i++) {
const line: any = {

View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import dayjs from 'dayjs';
import type { SettingsTemplateEntry } from './Template.vue';
import { getPlanFromId, PREMIUM_PLAN, type PREMIUM_TAG } from '@data/PREMIUM';
const activeProject = useActiveProject();
@@ -51,11 +52,17 @@ function openInvoice(link: string) {
}
function getPremiumName(type: number) {
if (type === 0) return 'FREE';
if (type === 1) return 'ACCELERATION';
if (type === 2) return 'EXPANSION';
return 'CUSTOM';
return Object.keys(PREMIUM_PLAN).map(e => ({
...PREMIUM_PLAN[e as PREMIUM_TAG], name: e
})).find(e => e.ID == type)?.name;
}
function getPremiumPrice(type: number) {
const PLAN = getPlanFromId(type);
if (!PLAN) return '0,00';
return (PLAN.COST / 100).toFixed(2).replace('.', ',')
}
@@ -104,7 +111,8 @@ const { visible } = usePricingDrawer();
</div>
</div>
<div class="flex items-center gap-1">
<div class="poppins font-semibold text-[2rem]"> $0 </div>
<div class="poppins font-semibold text-[2rem]">
{{ getPremiumPrice(planData.premium_type) }} </div>
<div class="poppins text-text-sub mt-2"> per month </div>
</div>
</div>

View File

@@ -23,7 +23,8 @@ export type PREMIUM_DATA = {
AI_MESSAGE_LIMIT: number,
PRICE: string,
PRICE_TEST: string,
ID: number
ID: number,
COST: number
}
export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
@@ -32,88 +33,102 @@ export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
COUNT_LIMIT: 5_000,
AI_MESSAGE_LIMIT: 10,
PRICE: 'price_1POKCMB2lPUiVs9VLe3QjIHl',
PRICE_TEST: 'price_1PNbHYB2lPUiVs9VZP32xglF'
PRICE_TEST: 'price_1PNbHYB2lPUiVs9VZP32xglF',
COST: 0
},
PLAN_1: {
ID: 1,
COUNT_LIMIT: 150_000,
AI_MESSAGE_LIMIT: 100,
PRICE: 'price_1POKCOB2lPUiVs9VC13s2rQw',
PRICE_TEST: 'price_1PNZjVB2lPUiVs9VrsTbJL04'
PRICE_TEST: 'price_1PNZjVB2lPUiVs9VrsTbJL04',
COST: 0
},
PLAN_2: {
ID: 2,
COUNT_LIMIT: 500_000,
AI_MESSAGE_LIMIT: 5_000,
PRICE: 'price_1POKCKB2lPUiVs9Vol8XOmhW',
PRICE_TEST: 'price_1POK34B2lPUiVs9VIROb0IIV'
PRICE_TEST: 'price_1POK34B2lPUiVs9VIROb0IIV',
COST: 0
},
CUSTOM_1: {
ID: 1001,
COUNT_LIMIT: 10_000_000,
AI_MESSAGE_LIMIT: 100_000,
PRICE: 'price_1POKZyB2lPUiVs9VMAY6jXTV',
PRICE_TEST: ''
PRICE_TEST: '',
COST: 0
},
INCUBATION: {
ID: 101,
COUNT_LIMIT: 50_000,
AI_MESSAGE_LIMIT: 30,
PRICE: 'price_1PdsyzB2lPUiVs9V4J246Jw0',
PRICE_TEST: ''
PRICE_TEST: '',
COST: 499
},
ACCELERATION: {
ID: 102,
COUNT_LIMIT: 150_000,
AI_MESSAGE_LIMIT: 100,
PRICE: 'price_1Pdt5bB2lPUiVs9VhkuCouEt',
PRICE_TEST: ''
PRICE_TEST: '',
COST: 999
},
GROWTH: {
ID: 103,
COUNT_LIMIT: 500_000,
AI_MESSAGE_LIMIT: 3_000,
PRICE: 'price_1PdszrB2lPUiVs9VIdkT3thv',
PRICE_TEST: ''
PRICE_TEST: '',
COST: 2999
},
EXPANSION: {
ID: 104,
COUNT_LIMIT: 1_000_000,
AI_MESSAGE_LIMIT: 5_000,
PRICE: 'price_1Pdt0xB2lPUiVs9V0Rdt80Fe',
PRICE_TEST: ''
PRICE_TEST: '',
COST: 5999
},
SCALING: {
ID: 105,
COUNT_LIMIT: 2_500_000,
AI_MESSAGE_LIMIT: 10_000,
PRICE: 'price_1Pdt1UB2lPUiVs9VUmxntSwZ',
PRICE_TEST: ''
PRICE_TEST: '',
COST: 9999
},
UNICORN: {
ID: 106,
COUNT_LIMIT: 5_000_000,
AI_MESSAGE_LIMIT: 20_000,
PRICE: 'price_1Pdt2LB2lPUiVs9VGBFAIG9G',
PRICE_TEST: ''
PRICE_TEST: '',
COST: 14999
},
LIFETIME_GROWTH_ONETIME: {
ID: 2001,
COUNT_LIMIT: 500_000,
AI_MESSAGE_LIMIT: 3_000,
PRICE: 'price_1PvewGB2lPUiVs9VLheJC8s1',
PRICE_TEST: 'price_1Pvf7LB2lPUiVs9VMFNyzpim'
PRICE_TEST: 'price_1Pvf7LB2lPUiVs9VMFNyzpim',
COST: 239900
},
GROWTH_DUMMY: {
ID: 5001,
COUNT_LIMIT: 500_000,
AI_MESSAGE_LIMIT: 3_000,
PRICE: 'price_1PvgoRB2lPUiVs9VC51YBT7J',
PRICE_TEST: 'price_1PvgRTB2lPUiVs9V3kFSNC3G'
PRICE_TEST: 'price_1PvgRTB2lPUiVs9V3kFSNC3G',
COST: 0
}
}
CustomPremiumPriceModel.find({}).then(custom_prices => {
try {
CustomPremiumPriceModel.find({}).then(custom_prices => {
for (const custom_price of custom_prices) {
PREMIUM_PLAN[custom_price.tag] = {
ID: custom_price.price_id,
@@ -123,7 +138,11 @@ CustomPremiumPriceModel.find({}).then(custom_prices => {
PRICE_TEST: custom_price.price_test || ''
}
}
});
});
} catch (ex) {
}
export function getPlanFromTag(tag: PREMIUM_TAG) {