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 || '?', label: e.label || '?',
backgroundColor: [e.color], backgroundColor: [e.color],
borderWidth: 0, borderWidth: 0,
borderRadius: 8 borderRadius: 0
} }
}) })
}); });

View File

@@ -46,7 +46,28 @@ const chartData = ref<ChartData<'doughnut'>>({
{ {
rotation: 1, rotation: 1,
data: [], 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'], borderColor: ['#1d1d1f'],
borderWidth: 2 borderWidth: 2
}, },

View File

@@ -30,7 +30,29 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
}); });
const parsedDatasets: any[] = []; 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++) { for (let i = 0; i < fixed.allKeys.length; i++) {
const line: any = { const line: any = {

View File

@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { SettingsTemplateEntry } from './Template.vue'; import type { SettingsTemplateEntry } from './Template.vue';
import { getPlanFromId, PREMIUM_PLAN, type PREMIUM_TAG } from '@data/PREMIUM';
const activeProject = useActiveProject(); const activeProject = useActiveProject();
@@ -51,11 +52,17 @@ function openInvoice(link: string) {
} }
function getPremiumName(type: number) { 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> </div>
<div class="flex items-center gap-1"> <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 class="poppins text-text-sub mt-2"> per month </div>
</div> </div>
</div> </div>

View File

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