add pricing

dashboard/components/pricing/PricingCard.vue

@@ -5,16 +5,22 @@ export type PricingCardProp = {
     cost: string,
     features: string[],
     desc: string,
-    active: boolean
+    active: boolean,
+    planId: number
 }
 
 const props = defineProps<{ data: PricingCardProp }>();
 
+const activeProject = useActiveProject();
 
-const router = useRouter();
-
-function onUpgradeClick() {
-    router.push('/book_demo')
+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>
@@ -37,7 +43,8 @@ function onUpgradeClick() {
             <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" class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
+            <div @click="onUpgradeClick()" v-if="!data.active"
+                class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
                 Upgrade
             </div>
         </div>

dashboard/components/pricing/PricingDrawer.vue

@@ -22,7 +22,8 @@ const starterTierCardData = ref<PricingCardProp>({
            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
+    active: activeProject.value?.premium === false,
+    planId: 0
 });
 
 const accelerationTierCardData = ref<PricingCardProp>({
@@ -39,7 +40,8 @@ const accelerationTierCardData = ref<PricingCardProp>({
         "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
+    active: activeProject.value?.premium_type === 1,
+    planId: 1
 });
 
 const expansionTierCardData = ref<PricingCardProp>({
@@ -56,7 +58,8 @@ const expansionTierCardData = ref<PricingCardProp>({
         "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
+    active: activeProject.value?.premium_type === 2,
+    planId: 2
 });
 
 </script>