Move modal to Apps component

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -32,9 +32,6 @@ import time from "assets/time.png";
 import letter from "assets/vector.svg";
 
 import DashboardHeader from "../cluster-dashboard/DashboardHeader";
-import BillingModal from "../modals/BillingModal";
-import { checkIfProjectHasPayment, useCustomerPlan } from "lib/hooks/useStripe";
-import dayjs from "dayjs";
 
 type Props = {};
 
@@ -56,7 +53,7 @@ const namespaceBlacklist = [
   "monitoring",
 ];
 
-const AppDashboard: React.FC<Props> = ({ }) => {
+const AppDashboard: React.FC<Props> = ({}) => {
   const { currentProject, currentCluster, setFeaturePreview } =
     useContext(Context);
   const [apps, setApps] = useState([]);
@@ -69,19 +66,6 @@ const AppDashboard: React.FC<Props> = ({ }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [shouldLoadTime, setShouldLoadTime] = useState(true);
 
-  const { hasPaymentEnabled, refetchPaymentEnabled } =
-    checkIfProjectHasPayment();
-  const { plan } = useCustomerPlan();
-
-  const isTrialExpired = (timestamp: string): boolean => {
-    if (timestamp === "") {
-      return true;
-    }
-    const timestampDate = dayjs(timestamp);
-    return timestampDate.isBefore(dayjs(new Date()));
-  };
-  const trialExpired = plan !== null && plan && isTrialExpired(plan.trial_info.ending_before);
-
   const filteredApps = useMemo(() => {
     const filteredBySearch = search(apps ?? [], searchValue, {
       keys: ["name"],
@@ -384,17 +368,6 @@ const AppDashboard: React.FC<Props> = ({ }) => {
           )}
         </>
       )}
-      {trialExpired && !hasPaymentEnabled && (
-        <BillingModal
-          trialExpired
-          onCreate={async () => {
-            await refetchPaymentEnabled({
-              throwOnError: false,
-              cancelRefetch: false,
-            });
-          }}
-        />
-      )}
       <Spacer y={5} />
     </StyledAppDashboard>
   );

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

@@ -1,6 +1,13 @@
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { AddonWithEnvVars } from "@porter-dev/api-contracts";
 import { useQueries } from "@tanstack/react-query";
+import dayjs from "dayjs";
 import { useHistory } from "react-router";
 import styled from "styled-components";
 import { z } from "zod";
@@ -27,7 +34,7 @@ import {
   useDeploymentTargetList,
   type DeploymentTarget,
 } from "lib/hooks/useDeploymentTarget";
-import { checkIfProjectHasPayment } from "lib/hooks/useStripe";
+import { checkIfProjectHasPayment, useCustomerPlan } from "lib/hooks/useStripe";
 
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -58,7 +65,8 @@ const Apps: React.FC = () => {
   const { deploymentTargetList } = useDeploymentTargetList({ preview: false });
   const [deploymentTargetIdFilter, setDeploymentTargetIdFilter] =
     useState<string>("all");
-  const { hasPaymentEnabled } = checkIfProjectHasPayment();
+  const { hasPaymentEnabled, refetchPaymentEnabled } =
+    checkIfProjectHasPayment();
 
   const history = useHistory();
 
@@ -69,6 +77,24 @@ const Apps: React.FC = () => {
   const [envDeleting, setEnvDeleting] = useState(false);
   const [showBillingModal, setShowBillingModal] = useState(false);
 
+  const { plan } = useCustomerPlan();
+
+  const isTrialExpired = (timestamp: string): boolean => {
+    if (timestamp === "") {
+      return true;
+    }
+    const timestampDate = dayjs(timestamp);
+    return timestampDate.isBefore(dayjs(new Date()));
+  };
+  const trialExpired =
+    plan !== null && plan && isTrialExpired(plan.trial_info.ending_before);
+
+  useEffect(() => {
+    if (trialExpired && !hasPaymentEnabled) {
+      setShowBillingModal(true);
+    }
+  });
+
   const [{ data: apps = [], status }, { data: addons = [] }] = useQueries({
     queries: [
       {
@@ -257,7 +283,9 @@ const Apps: React.FC = () => {
               Get started by creating an application.
             </Text>
             <Spacer y={1} />
-            {currentProject?.sandbox_enabled && currentProject?.billing_enabled && !hasPaymentEnabled ? (
+            {currentProject?.sandbox_enabled &&
+            currentProject?.billing_enabled &&
+            !hasPaymentEnabled ? (
               <Button
                 alt
                 onClick={() => {
@@ -456,6 +484,21 @@ const Apps: React.FC = () => {
           loading={envDeleting}
         />
       )}
+      {trialExpired && !hasPaymentEnabled && showBillingModal && (
+        <BillingModal
+          back={() => {
+            setShowBillingModal(false);
+            history.push("/project-settings?selected_tab=billing");
+          }}
+          trialExpired
+          onCreate={async () => {
+            await refetchPaymentEnabled({
+              throwOnError: false,
+              cancelRefetch: false,
+            });
+          }}
+        />
+      )}
     </StyledAppDashboard>
   );
 };

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

@@ -104,11 +104,6 @@ function ProjectSettings(props: any) {
     if (!_.isEqual(tabOpts, tabOptions)) {
       setTabOptions(tabOpts);
     }
-
-    const selectedTab = getQueryParam(props, "selected_tab");
-    if (selectedTab && selectedTab !== currentTab) {
-      setCurrentTab(selectedTab);
-    }
   }, [context, projectName, currentTab, props, tabOptions]);
 
   const validateProjectName = (): ValidationError => {