Add billing page link on billing modal (#4598)

dashboard/src/main/home/Home.tsx

@@ -221,7 +221,7 @@ const Home: React.FC<Props> = (props) => {
       } else {
         setHasFinishedOnboarding(true);
       }
-    } catch (error) {}
+    } catch (error) { }
   };
 
   useEffect(() => {
@@ -428,32 +428,6 @@ const Home: React.FC<Props> = (props) => {
                     {dayjs().to(dayjs(plan.trial_info.ending_before))}
                   </GlobalBanner>
                 )}
-                {!trialExpired && showBillingModal && (
-                  <BillingModal
-                    back={() => {
-                      setShowBillingModal(false);
-                    }}
-                    onCreate={async () => {
-                      await refetchPaymentEnabled({
-                        throwOnError: false,
-                        cancelRefetch: false,
-                      });
-                      setShowBillingModal(false);
-                    }}
-                  />
-                )}
-                {trialExpired && (
-                  <BillingModal
-                    trialExpired
-                    onCreate={async () => {
-                      await refetchPaymentEnabled({
-                        throwOnError: false,
-                        cancelRefetch: false,
-                      });
-                      setShowBillingModal(false);
-                    }}
-                  />
-                )}
               </>
             )}
           <ModalHandler setRefreshClusters={setForceRefreshClusters} />
@@ -550,8 +524,8 @@ const Home: React.FC<Props> = (props) => {
 
               <Route path="/addons/new">
                 {currentProject?.capi_provisioner_enabled &&
-                currentProject?.simplified_view_enabled &&
-                currentProject?.beta_features_enabled ? (
+                  currentProject?.simplified_view_enabled &&
+                  currentProject?.beta_features_enabled ? (
                   <AddonTemplates />
                 ) : (
                   <LegacyNewAddOnFlow />
@@ -565,8 +539,8 @@ const Home: React.FC<Props> = (props) => {
               </Route>
               <Route path="/addons">
                 {currentProject?.capi_provisioner_enabled &&
-                currentProject?.simplified_view_enabled &&
-                currentProject?.beta_features_enabled ? (
+                  currentProject?.simplified_view_enabled &&
+                  currentProject?.beta_features_enabled ? (
                   <AddonDashboard />
                 ) : (
                   <LegacyAddOnDashboard />

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 && 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,24 @@ const Apps: React.FC = () => {
           loading={envDeleting}
         />
       )}
+      {!currentProject?.sandbox_enabled &&
+        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/modals/BillingModal.tsx

@@ -87,6 +87,9 @@ const BillingModal = ({
                   })}>
                     Already redeemed your startup deal?
                   </Text>
+                  <Spacer y={0.5} />
+                  {"For more details on the current costs and usage of this project, visit the "}
+                  <Link to="/project-settings?selected_tab=billing">billing page.</Link>
                 </div>
               )
               : "Link a payment method to your Porter project."}

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 => {