Check payment and plan in home page

dashboard/src/lib/billing/types.tsx

@@ -23,7 +23,7 @@ export const PlanValidator = z.object({
   plan_description: z.string(),
   starting_on: z.string(),
   trial_info: TrialValidator,
-});
+}).nullable();
 
 export type UsageMetric = z.infer<typeof UsageMetricValidator>;
 export const UsageMetricValidator = z.object({

dashboard/src/lib/hooks/useStripe.tsx

@@ -7,6 +7,7 @@ import {
   CreditGrantsValidator,
   PaymentMethodValidator,
   PlanValidator,
+  Plan,
   UsageValidator,
   type CreditGrants,
   type PaymentMethod,
@@ -165,23 +166,21 @@ export const useCreatePaymentMethod = (): TCreatePaymentMethod => {
 export const checkIfProjectHasPayment = (): TCheckHasPaymentEnabled => {
   const { currentProject } = useContext(Context);
 
-  if (!currentProject?.id) {
-    throw new Error("Project ID is missing");
-  }
-
-  // Fetch list of payment methods
+  // Check if payment is enabled for the project
   const paymentEnabledReq = useQuery(
-    ["checkPaymentEnabled", currentProject?.id],
-    async (): Promise<boolean> => {
-      const res = await api.getHasBilling(
-        "<token>",
-        {},
-        { project_id: currentProject.id }
-      );
-
-      const data = z.boolean().parse(res.data);
-      return data;
-    }
+    currentProject?.id ? ["checkPaymentEnabled", currentProject.id] : ["checkPaymentEnabled", null],
+    currentProject?.id
+      ? async (): Promise<boolean> => {
+        const res = await api.getHasBilling(
+          "<token>",
+          {},
+          { project_id: currentProject.id }
+        );
+
+        const data = z.boolean().parse(res.data);
+        return data;
+      }
+      : async () => false
   );
 
   return {
@@ -291,21 +290,19 @@ export const useCustomerPlan = (): TGetPlan => {
 
   // Fetch current plan
   const planReq = useQuery(
-    ["getCustomerPlan", currentProject?.id],
-    async () => {
-      if (!currentProject?.id || currentProject.id === -1) {
-        return;
+    currentProject?.id ? ["getCustomerPlan", currentProject.id] : ["getCustomerPlan", null],
+    currentProject?.id
+      ? async (): Promise<PlanType> => {
+        const res = await api.getCustomerPlan(
+          "<token>",
+          {},
+          { project_id: currentProject.id }
+        );
+
+        const plan = PlanValidator.parse(res.data);
+        return plan;
       }
-      const res = await api.getCustomerPlan(
-        "<token>",
-        {},
-        {
-          project_id: currentProject?.id,
-        }
-      );
-      const plan = PlanValidator.parse(res.data);
-      return plan;
-    }
+      : async () => null
   );
 
   return {

dashboard/src/main/home/Home.tsx

@@ -61,6 +61,7 @@ import { NewProjectFC } from "./new-project/NewProject";
 import Onboarding from "./onboarding/Onboarding";
 import ProjectSettings from "./project-settings/ProjectSettings";
 import Sidebar from "./sidebar/Sidebar";
+import { checkIfProjectHasPayment, useCustomerPlan } from "lib/hooks/useStripe";
 
 // Guarded components
 const GuardedProjectSettings = fakeGuardedRoute("settings", "", [
@@ -210,7 +211,7 @@ const Home: React.FC<Props> = (props) => {
       } else {
         setHasFinishedOnboarding(true);
       }
-    } catch (error) {}
+    } catch (error) { }
   };
 
   useEffect(() => {
@@ -364,6 +365,12 @@ const Home: React.FC<Props> = (props) => {
   };
 
   const { cluster, baseRoute } = props.match.params as any;
+  const { hasPaymentEnabled } = checkIfProjectHasPayment();
+  const { plan } = useCustomerPlan();
+
+  console.log(plan)
+  console.log("hasbillingenabled?", hasPaymentEnabled);
+
   return (
     <ThemeProvider
       theme={currentProject?.simplified_view_enabled ? midnight : standard}

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -27,7 +27,6 @@ import {
   useDeploymentTargetList,
   type DeploymentTarget,
 } from "lib/hooks/useDeploymentTarget";
-import { checkIfProjectHasPayment } from "lib/hooks/useStripe";
 
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -59,7 +58,6 @@ const Apps: React.FC = () => {
   const [deploymentTargetIdFilter, setDeploymentTargetIdFilter] =
     useState<string>("all");
 
-  const { hasPaymentEnabled } = checkIfProjectHasPayment();
   const history = useHistory();
 
   const [searchValue, setSearchValue] = useState("");

dashboard/src/main/home/project-settings/BillingPage.tsx

@@ -210,7 +210,7 @@ function BillingPage(): JSX.Element {
       </Button>
       <Spacer y={2} />
 
-      {currentProject?.metronome_enabled ? (
+      {currentProject?.metronome_enabled && currentProject?.sandbox_enabled ? (
         <div>
           <div>
             <Text size={16}>Porter credit grants</Text>
@@ -226,10 +226,10 @@ function BillingPage(): JSX.Element {
               <Spacer inline x={1} />
               <Text size={20}>
                 {creditGrants !== undefined &&
-                creditGrants.remaining_credits > 0
+                  creditGrants.remaining_credits > 0
                   ? `$${formatCredits(
-                      creditGrants.remaining_credits
-                    )}/$${formatCredits(creditGrants.granted_credits)}`
+                    creditGrants.remaining_credits
+                  )}/$${formatCredits(creditGrants.granted_credits)}`
                   : "$ 0.00"}
               </Text>
             </Container>
@@ -255,7 +255,7 @@ function BillingPage(): JSX.Element {
                     </Container>
                     <Container row>
                       {plan.trial_info !== undefined &&
-                      plan.trial_info.ending_before !== "" ? (
+                        plan.trial_info.ending_before !== "" ? (
                         <Text>
                           Free trial ends{" "}
                           {relativeTime(plan.trial_info.ending_before)}
@@ -274,8 +274,8 @@ function BillingPage(): JSX.Element {
                 </Text>
                 <Spacer y={1} />
                 {usage?.length &&
-                usage.length > 0 &&
-                usage[0].usage_metrics.length > 0 ? (
+                  usage.length > 0 &&
+                  usage[0].usage_metrics.length > 0 ? (
                   <Flex>
                     <BarWrapper>
                       <Bars