Add stock checking to server upgrades (#3270)

* Add stock checking to server upgrades

* Fix route

apps/frontend/src/pages/settings/billing/index.vue

@@ -382,6 +382,7 @@
             text: err.message ?? (err.data ? err.data.description : err),
           })
       "
+      :fetch-capacity-statuses="fetchCapacityStatuses"
       :customer="customer"
       :payment-methods="paymentMethods"
       :return-url="`${config.public.siteUrl}/servers/manage`"
@@ -566,6 +567,7 @@ definePageMeta({
   middleware: "auth",
 });
 
+const app = useNuxtApp();
 const auth = await useAuth();
 const baseId = useId();
 
@@ -990,6 +992,38 @@ const showPyroUpgradeModal = async (subscription) => {
   pyroPurchaseModal.value.show();
 };
 
+async function fetchCapacityStatuses(serverId, product) {
+  if (product) {
+    try {
+      return {
+        custom: await usePyroFetch(`servers/${serverId}/upgrade-stock`, {
+          method: "POST",
+          body: {
+            cpu: product.metadata.cpu,
+            memory_mb: product.metadata.ram,
+            swap_mb: product.metadata.swap,
+            storage_mb: product.metadata.storage,
+          },
+        }),
+      };
+    } catch (error) {
+      console.error("Error checking server capacities:", error);
+      app.$notify({
+        group: "main",
+        title: "Error checking server capacities",
+        text: error,
+        type: "error",
+      });
+      return {
+        custom: { available: 0 },
+        small: { available: 0 },
+        medium: { available: 0 },
+        large: { available: 0 },
+      };
+    }
+  }
+}
+
 const resubscribePyro = async (subscriptionId) => {
   try {
     await useBaseFetch(`billing/subscription/${subscriptionId}`, {

packages/ui/src/components/billing/PurchaseModal.vue

@@ -127,7 +127,7 @@
             <div class="font-semibold text-nowrap"></div>
           </div>
           <div
-            v-if="customMatchingProduct && (existingPlan || !customOutOfStock)"
+            v-if="customMatchingProduct && !customOutOfStock"
             class="flex sm:flex-row flex-col gap-4 w-full"
           >
             <div class="flex flex-col w-full gap-2">
@@ -737,13 +737,20 @@ const updateCustomServerStock = async () => {
 
   updateCustomServerStockTimeout = setTimeout(async () => {
     if (props.fetchCapacityStatuses) {
-      const capacityStatus = await props.fetchCapacityStatuses(mutatedProduct.value)
+      if (props.existingSubscription) {
-      if (capacityStatus.custom?.available === 0) {
+        if (mutatedProduct.value) {
-        customOutOfStock.value = true
+          const capacityStatus = await props.fetchCapacityStatuses(
+            props.existingSubscription.metadata.id,
+            mutatedProduct.value,
+          )
+          customOutOfStock.value = capacityStatus.custom?.available === 0
+          console.log(capacityStatus)
+        }
       } else {
-        customOutOfStock.value = false
+        const capacityStatus = await props.fetchCapacityStatuses(mutatedProduct.value)
+        customOutOfStock.value = capacityStatus.custom?.available === 0
       }
-    } else if (!props.existingServer) {
+    } else {
       console.error('No fetchCapacityStatuses function provided.')
       customOutOfStock.value = true
     }