Applied endpoint to check billing

dashboard/src/main/home/Home.tsx

@@ -293,12 +293,22 @@ class Home extends Component<PropsType, StateType> {
     this.getMetadata();
   }
 
+  async checkIfProjectHasBilling(projectId: number) {
+    const res = await api.getHasBilling(
+      "<token>",
+      {},
+      { project_id: projectId }
+    );
+    this.context.setHasBillingEnabled(res.data?.has_billing);
+  }
+
   // TODO: Need to handle the following cases. Do a deep rearchitecture (Prov -> Dashboard?) if need be:
   // 1. Make sure clicking cluster in drawer shows cluster-dashboard
   // 2. Make sure switching projects shows appropriate initial view (dashboard || provisioner)
   // 3. Make sure initializing from URL (DO oauth) displays the appropriate initial view
   componentDidUpdate(prevProps: PropsType) {
     if (prevProps.currentProject?.id !== this.props.currentProject?.id) {
+      this.checkIfProjectHasBilling(this?.context?.currentProject?.id);
       api
         .getUsage(
           "<token>",

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

@@ -46,7 +46,7 @@ class ProjectSettings extends Component<PropsType, StateType> {
     tabOptions.push({ value: "manage-access", label: "Manage Access" });
 
     if (this.props.isAuthorized("settings", "", ["get", "delete"])) {
-      if (currentProject?.hasBilling) {
+      if (this.context?.hasBillingEnabled) {
         tabOptions.push({
           value: "billing",
           label: "Billing",
@@ -73,7 +73,7 @@ class ProjectSettings extends Component<PropsType, StateType> {
 
     if (
       this.state.currentTab === "billing" &&
-      this.context.currentProject?.hasBilling
+      this.context?.hasBillingEnabled
     ) {
       return <BillingPage />;
     }

dashboard/src/shared/Context.tsx

@@ -51,6 +51,8 @@ export interface GlobalContextType {
   clearContext: () => void;
   edition: "ee" | "ce";
   setEdition: (appVersion: string) => void;
+  hasBillingEnabled: boolean;
+  setHasBillingEnabled: (isBillingEnabled: boolean) => void;
 }
 
 /**
@@ -145,6 +147,10 @@ class ContextProvider extends Component<PropsType, StateType> {
         this.setState({ edition });
       }
     },
+    hasBillingEnabled: null,
+    setHasBillingEnabled: (isBillingEnabled: boolean) => {
+      this.setState({ hasBillingEnabled: isBillingEnabled });
+    },
   };
 
   render() {

dashboard/src/shared/api.tsx

@@ -1055,6 +1055,11 @@ const getCustomerToken = baseApi<{}, { project_id: number }>(
   ({ project_id }) => `/api/projects/${project_id}/billing/token`
 );
 
+const getHasBilling = baseApi<{}, { project_id: number }>(
+  "GET",
+  ({ project_id }) => `/api/projects/${project_id}/billing`
+);
+
 // Bundle export to allow default api import (api.<method> is more readable)
 export default {
   checkAuth,
@@ -1162,4 +1167,5 @@ export default {
   createWebhookToken,
   getUsage,
   getCustomerToken,
+  getHasBilling,
 };

dashboard/src/shared/types.tsx

@@ -298,6 +298,8 @@ export interface ContextProps {
   clearContext: () => void;
   edition: "ee" | "ce";
   setEdition: (appVersion: string) => void;
+  hasBillingEnabled: boolean;
+  setHasBillingEnabled: (isBillingEnabled: boolean) => void;
 }
 
 export enum JobStatusType {