billing placeholder

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

@@ -43,7 +43,7 @@ class ProjectSettings extends Component<PropsType, StateType> {
       !this.state.tabOptions.find((t) => t.value === "billing")
     ) {
       const tabOptions = this.state.tabOptions;
-      tabOptions.splice(1, 0, { value: "billing", label: "Billing" });
+      // tabOptions.splice(1, 0, { value: "billing", label: "Billing" });
       this.setState({ tabOptions });
       return;
     }
@@ -56,7 +56,7 @@ class ProjectSettings extends Component<PropsType, StateType> {
       const billingIndex = this.state.tabOptions.findIndex(
         (t) => t.value === "billing"
       );
-      tabOptions.splice(billingIndex, 1);
+      // tabOptions.splice(billingIndex, 1);
     }
   }
 
@@ -65,6 +65,10 @@ class ProjectSettings extends Component<PropsType, StateType> {
     this.setState({ projectName: currentProject.name });
     const tabOptions = [];
     tabOptions.push({ value: "manage-access", label: "Manage Access" });
+    tabOptions.push({
+      value: "billing",
+      label: "Billing",
+    });
 
     if (this.props.isAuthorized("settings", "", ["get", "delete"])) {
       if (this.context?.hasBillingEnabled) {
@@ -111,6 +115,14 @@ class ProjectSettings extends Component<PropsType, StateType> {
       return <InvitePage />;
     } else if (this.state.currentTab === "api-tokens") {
       return <APITokensSection />;
+    } else if (this.state.currentTab === "billing") {
+      return (
+        <Placeholder>
+          <Helper>
+          Please contact <a href="mailto:support@porter.run">support@porter.run</a> to upgrade your project's usage limits.
+          </Helper>
+        </Placeholder>
+      );
     } else {
       return (
         <>
@@ -173,6 +185,19 @@ ProjectSettings.contextType = Context;
 
 export default withRouter(withAuth(ProjectSettings));
 
+const Placeholder = styled.div`
+  width: 100%;
+  height: 200px;
+  background: #ffffff11;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  padding: 0 30px;
+  justify-content: center;
+  padding-bottom: 10px;
+`;
+
 const Warning = styled.div`
   font-size: 13px;
   color: ${(props: { highlight: boolean; makeFlush?: boolean }) =>